@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300;400;700&display=swap');

body {
    background: /*#ffface*/#fffdde;
    font-weight: bold;
}
.con1_title p, .con2_title p, .con3_title p, .cms_title div p {
    font-family: 'Comic Neue', cursive;letter-spacing: 0.2rem;
}


.page_title_bg {
    background: #fff;
}
.page_title_box {
background-color: #5b5bcc;
    background-image: url("Dup/img/old-mathematics.png");
padding: 58px 0 58px 100px;
}

.fadecatch{
     opacity: 0;
    /* transform: translateY(20px);*/
     transition: 1.5s;
     transition-property: opacity,transform
}
.fadecatch.fadetrans{
     opacity: 1;
     transform: none
}


#header {
    padding-top: 30px;
}
header {
    position: relative;
}
.under_page header:after {
    display: none;
}
header:before {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100px;
    top: 0px;
    left: 0;
    background-image: url(Dup/img/kumo.png);
    background-size: 1500px;
    background-repeat: repeat-x;
    background-position-y: calc(100% - 10px), 20px;
    background-position-x: 0, 0;
    animation: main 100s linear infinite;
    z-index: 1;
}
header:after {
    position: absolute;
   /* content: "";*/
    display: block;
    width: 100%;
    height: 140px;
    bottom: 0px;
    left: 0;
    background-image: url(Dup/img/main_bg2.png);
    background-size: 1500px;
    background-repeat: repeat-x;
    background-position-y: calc(100% - 10px), 20px;
    background-position-x: 0, 0;
    animation: main 100s linear infinite;
}
@keyframes main {
0% {background-position-x: 0, 0}
50% {background-position-x: -1500px, -750px}
100% {background-position-x: -3000px, -1500px}
}
@keyframes main2 {
0% {background-position-x: 0}
50% {background-position-x: -750px}
100% {background-position-x: -1500px}
}
@keyframes sun {
0% {transform: rotate(0)}
100% {transform: rotate(360deg)}
}

.catch {
    
 top: 40%;
    left: 0;
    right: 0;
    margin: auto;
}
.demoTxt {
  display: block;
opacity:0;
 font-size: 24px;
 font-weight: bold;
 text-align: center;
    font-size: 35px;
    letter-spacing: 0;
    text-shadow: 1px 1px 1px #ffffff, -1px 1px 1px #ffffff, 1px -1px 1px #ffffff, -1px -1px 1px #ffffff, 1px 0px 1px #ffffff, 0px 1px 1px #ffffff, -1px 0px 1px #ffffff, 0px -1px 1px #ffffff;
    color: #737373;
}
.catch2 {
     color: #737373;text-shadow: 1px 1px 1px #ffffff, -1px 1px 1px #ffffff, 1px -1px 1px #ffffff, -1px -1px 1px #ffffff, 1px 0px 1px #ffffff, 0px 1px 1px #ffffff, -1px 0px 1px #ffffff, 0px -1px 1px #ffffff;
}
.demoTxt span {
 opacity: 0;
  -webkit-transition: .6s ease-in-out;
 transition: .6s ease-in-out;
}



main {
    margin-top: -8px;
}
#contents1 {
    background-color: #5b5bcc;
    background-image: url(Dup/img/barubu.png);
    background-repeat: no-repeat;
    background-position: left -418px top -50px;
    background-size: 1500px;
}
.con1_left .filter {
    display: none;
}
.con1_right p.txt_white {
   text-shadow: 2px 0px 5px #5b5bcc, -1px 0px 3px #5b5bcc;
   background: rgba(91, 91, 204, 0.55);
}
header .trans_header {
    top: -119px;/*隠れるところ*/
}


header .trans_logo {
    height: 80px;
    background: #fffdde;;
}
header .trans_logo img {
    max-width: 84px;
}
#top_cms .top_cms_bg {
    background-color: #fffdde;
    background-image: url(Dup/img/grid-me.png);
}
#footer .footer_bottom, .under_page #footer {
    background-color: transparent!important;
}
#pc_nav li a.txt_color1, #sp_nav li a.txt_color1 {
    color: #5b5bcc;
}
#page_title {
        background-position: 0 91%;
}
.cms_title div p {
    background: #eee;
    display: inline-block;
    padding: 2px 11px;
    border-radius: 7px;
}
.cms_title h2 {
    font-weight: bold;
}
.cms_1-a figure {
   border: 3px solid #5b5bcc;
    border-radius: 18px;
}
#cms_2-a .cate_title {
    background-color: #5b5bcc;
    background-image: url(../Dup/img/old-mathematics.png);
    display: block;
    color: #fff;
}
/*.cms_6-a figure {
    border: 3px solid #3c3c3c;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 1px rgba(228, 225, 209, 0.80);
}*/
.cms_6-a .cate_wrap{
  box-shadow: 4px 4px 0px 0px #f2f2f2;
}
#cms_6-a .box_wrap {
    background: #fff;
}
/*.cms_6-b .cate_box:first-of-type {
    border-top: none
}*/

#cms_3-f figure, .cms_3-f figure {
    border-radius: 50%;
    background: #fff;box-shadow: 4px 4px 0px 0px #f2f2f2;
}
#footer li a {
    color: #5b5bcc;
}
#page07 p {
    background-color: #ffffff;
}
.pager li a {
    background-color: #5b5bcc;
}
/* ----------------videoある時の調整------------------- */
@media(max-width: 1355px) {
#header {
    padding-left: 20px;
    width: 22%!important;
}

}
@media screen and (min-width:769px) and ( max-width:1355px) {
  #main_img {
    width: 78%!important;
}  

}
@media(max-width: 1152px){
    #header #logo {
        margin-bottom: 30px;
    }
}
@media screen and (min-width:769px) and ( max-width:1494px) {
  	#main_img {
		overflow: hidden;
		
	}


}

@media screen and (min-width:769px) {
    .menu_stick {
    box-shadow: 4px 4px 0px 0px #f2f2f2;
}
#main_img {
	height: auto!important;
} 
}
@media(max-width: 768px) {
    header .trans_header {
    top: 0;
}
.page_title_box {
    padding: 51px 0 51px 0px;
}
.under_page header:before {
    display: none;
}
#main_img {
    height: auto!important;
}
header:before {
    height: 178px;
    top: 91px;
}
	.con1_right {
	padding-top: 90px;
}
.con1_right h2, .con1_right p {
        background: rgba(91, 91, 204, 0.74);
}

.con3_wrap {
    background-position: right 0% bottom 0%;
    background-size: 19%;
	padding-bottom: 79px;
}
#top_info {
    background-color: #fff;
}
}
@media(max-width: 667px) {
    #contents1 .con1_left {
        height: 0;
    }
    header:before {
    background-size: 600px;
}
  header:before {
    height: 61px;
    top: 82px;
}
.demoTxt {
    font-size: 17px;
}
.catch {
    top: 34%;
}
.catch2 {
    font-size: 13px;
    margin-top: 6px;
}
}

/*GMO追加*/
                            .text_area {
                                background: #FFFDDE;
                                max-width: 1800px;
                                margin: 60px auto;
                                padding: 0 10px;
                            }

                            .text_area h2 {
                                line-height: 1.4;
                                margin: 0 0 15px;
                            }

                            .text_area p {
                                margin: 0;
                            }

                            .text_area p:last-child {}

                            /*ボタン*/
                            .column_link .more {
                                margin: 0 auto;
                            }

                            .column_link {
                                margin: 40px auto 20px;
                                text-align: center;
                            }

                            .column_link a {
                                line-height: 1.5;
                                padding: 22px 15px;
                                position: relative;
                                text-decoration: none;
                                transition: 0.2s;
                            }

                            .column_link a:hover {
                                text-decoration: none;
                            }

                            .column_link .more {
                                width: 90%;
                            }

                            @media (min-width: 768px) {

                                /*ボタン PCのみ*/
                                .column_link .more {
                                    width: 25%;
                                }
                            }

                            @media only screen and (max-width: 768px) {
                                .text_area {
                                    margin: 0 auto;
                                    padding: 60px 20px 40px;
                                }
                            }

                            /*20221102修正*/
                            .about-img_box {
                                width: 45%;
                                margin: 0 auto;
                            }

                            .cta-tel_design-box {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: 50%;
                            }

                            .tel-txt_box {
                                margin-left: 9px;
                            }

                            .tel-txt_box p {
                                font-size: 25px;
                                font-weight: bolder;
                                color: #fff;
                                letter-spacing: 0.1em;
                            }

                            .cta-button_design-box {
                                width: 46%;
                                padding: 5px 5px;
                                border: 3px solid #fff;
                                text-align: center;
                                border-radius: 3px;
                                font-size: 15px;
                            }

                            .cta-flex_design {
                                display: flex;
                                width: 100%;
                                justify-content: space-evenly;
                                flex-wrap: wrap;
                                gap: 10px 0px;
                            }

                            .tel-img_box {
                                width: 6%;
                                border: 2px solid #fff;
                                padding: 4px;
                                border-radius: 4px;
                            }

                            .cta-container {
                                width: 50%;
                                margin: 0px auto 0;
                                border: 3px solid #fff;
                                padding: 20px 10px;
                                border-radius: 8px;
                            }

                            span.tel-font-size {
                                font-size: 18px;
                            }

                            .cta-button_design-box:hover {
                                background: #fff;
                                transition: 0.2s;
                                border: 3px solid #4e4e4e;
                            }
                            .cta-button_design-box:hover a {
                                color: #4e4e4e !important;
                            }
                            .cta-description {
                                text-align: center;
                                margin: 0 auto 15px;
                                color: #fff;
                                letter-spacing: 0.1em;
                            }

                            .cta-button_design-box a {
                                color: #fff;
                                min-width:200px;
                            }

                            /*  はてなブログ共通CSSで記述済み */
                            .center {
                                text-align: center;
                                margin-left: auto;
                                margin-right: auto;
                            }

                            #contents1 {
                                background-color: #5b5bcc;
                                background-image: url(Dup/img/barubu.png);
                                background-repeat: no-repeat;
                                background-position: left -433px top 210px;
                                background-size: 1500px;
                            }

                            .banner-flex-box {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                width: 85%;
                                margin: 50px auto 0;
                                gap: 20px;
                                flex-wrap: wrap;
                            }

                            .button-design_css {
                                margin: 30px auto 0;
                                text-align: center;
                                border: 3px solid #fff;
                                padding: 7px 5px;
                                font-size: 21px;
                                width: 45%;
                                color: #fff;
                            }

                            .button-design_css a {
                                color: #fff;
                            }
                            @media(max-width:1260px) {
                                .about-img_box {
                                    width:95%;
                                }
                                .cta-container {
                                    width:100%;
                                }
                                .banner-flex-box {
                                    flex-direction: column-reverse;
                                }
                            }
                            @media(max-width:600px) {
                                .cta-button_design-box {
                                    width:90%;
                                }
                                .cta-tel_design-box {
                                    width: 100%;
                                }
                                .cta-description {
                                    text-align: left;
                                    font-size: 13px;
                                }
                                .button-design_css {
                                    width: 100%;
                                }
                                .cta-container {
                                    width:95%;
                                }
                            }