@charset "utf-8";

#mainvis{
background-image: url("../../img/school/kids/ttl.jpg");
}


#mf1{
margin: 0 0 100px 0;
}
#mf1 .cbox{
width: 900px;
margin: 0 auto 60px auto;
border-radius: 10px;
}
#mf1 #cbox11{
display: table;
width: auto;
position: relative;
}
#mf1 #cbox11 .cbox-inner{
padding: 30px 50px;
}
#mf1 #cbox11 h2{
font-size: 1.75em;
font-weight: bold;
}
#mf1 #cbox11:before{
content: "";
display: block;
max-width: 105px;
max-height: 114px;
width: 14vw;
height: 15.2vw;
background: url("../../img/school/kids/ic1.png") center center /cover no-repeat;
position: absolute;
left: -70px;
top: 0;
}
#mf1 #cbox11:after{
content: "";
display: block;
max-width: 44px;
max-height: 44px;
width: 5.87vw;
height: 5.87vw;
background: url("../../img/school/kids/ic2.png") center center /cover no-repeat;
position: absolute;
bottom: 0;
right: -50px;
}


#mf1 #cbox12 ul{
justify-content: center;
font-size: 2.25em;
position: relative;
}
#mf1 #cbox12 ul:after{
content: "";
display: block;
background: url("../../img/school/kids/ic3.png") center center /cover no-repeat;
max-width: 150px;
max-height: 130px;
width: 20vw;
height: 17.33vw;
position: absolute;
right: 0;
bottom: -50px;
}
#mf1 #cbox12 ul li{
width: 220px;
height: 220px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-weight: bold;
border: solid 1px;
border-radius: 100%;
position: relative;
line-height: 1.3em;
margin: 0 10px;
}
#mf1 #cbox12 ul span{
border: solid 5px;
position: absolute;
left: 5px;
right: 5px;
}
#mf1 #cbox12 ul span.se_bd1{
top: 50%;
bottom: 5px;
border-bottom-left-radius:210px;
border-bottom-right-radius: 210px;
border-width: 0 5px 5px 5px;
}
#mf1 #cbox12 ul span.se_bd2{
top: 5px;
bottom: 50%;
border-top-left-radius:210px;
border-top-right-radius: 210px;
border-width:  5px 5px 0 5px;
}





#mf2 #cbox21{
background: url("../../img/top/mf4bg1.jpg") left top repeat;
background-blend-mode: color-burn;
border-radius: 20px;
margin: 0 0 50px 0;
}
#mf2 #cbox21 .cbox-inner{
padding: 60px 40px;
}
#mf2 #cbox21 h2{
text-align: center;
font-size: 1.88em;
font-weight: bold;
margin: 0 0 30px 0;
}
#mf2 #cbox21 h3{
font-size: 1.25em;
font-weight: bold;
padding: 20px;
text-align: center;
background: #fff;
border: solid 3px;
border-radius: 100px;
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 9;
}

#mf2 #cbox21 h3 span{
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 17.5px 0 17.5px;
border-left-color:transparent !important;
border-right-color:transparent !important;
border-bottom-color:transparent !important;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%,0);
}
#mf2 #cbox21 h3 span:before{
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 17.5px 0 17.5px;
border-color: #fff transparent transparent transparent;
position: absolute;
top: -24px;
left: 50%;
transform: translate(-50%,0);
}
#mf2 #cbox21 .clist{
justify-content: space-between;
}
#mf2 #cbox21 .cimg{
width: 500px;
padding: 4em 0 0 0;
position: relative;
}
#mf2 #cbox21 .ctext{
width: 580px;
}
#mf2 #cbox21 iframe{
border: #fff solid 3px !important;
border-radius: 20px;
}
#mf2 #cbox21 .cimg p{
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
#mf2 #cbox21 iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}

#mf2 #cbox22{
text-align: center;
}
#mf2 #cbox22 p{
font-size: 1.5em;
font-weight: bold;
}
#mf2 #cbox22 .cboxs{
border: solid 4px;
width: 900px;
margin: 50px auto;
border-radius: 20px;
}
#mf2 #cbox22 .cboxs-inner{
padding: 30px
}
#mf2 #cbox22 .cboxs p{
font-size: 1.75em;
position: relative;
}
#mf2 #cbox22 .cboxs p:before{
content: "";
display: block;
max-width: 50px;
max-height: 50px;
width: 6.67vw;
height: 6.67vw;
background: url("../../img/cmn/ic1.png") center center /cover no-repeat;
position: absolute;
top: 50%;
transform: translate(0,-50%);
}
#mf2 #cbox22 .cboxs p span{
display: block;
font-size: 0.57em;
font-weight: normal;
}










@media screen and (max-width: 850px) {
#mf1{
margin: 0 5vw 10vw 5vw;
}
#mf1 .cbox{
width: auto;
margin: 0 auto 5vw auto;
}
#mf1 #cbox11{
text-align: center;
}
#mf1 #cbox11 .cbox-inner{
padding: 4vw;
}
#mf1 #cbox11 h2{
font-size: 1.2em;
}
#mf1 #cbox11:before{
left: 0;
top: -5vw;
}
#mf1 #cbox11:after{
bottom: 0;
right: 2vw;
}



#mf1 #cbox12 ul{
font-size: 1.2em;
}
#mf1 #cbox12 ul:after{
bottom: -8vw;
}
#mf1 #cbox12 ul li{
max-width: 200px;
max-height: 200px;
width: 30vw;
height: 30vw;
margin: 0 0.5vw;
}
#mf1 #cbox12 ul span{
border: solid 0.67vw;
left: 0.67vw;
right: 0.67vw;
}
#mf1 #cbox12 ul span.se_bd1{
bottom: 0.67vw;
border-bottom-left-radius:28vw;
border-bottom-right-radius: 28vw;
border-width: 0 0.67vw 0.67vw 0.67vw;
}
#mf1 #cbox12 ul span.se_bd2{
top: 0.67vw;
border-top-left-radius:28vw;
border-top-right-radius: 28vw;
border-width:  0.67vw 0.67vw 0 0.67vw;
}




#mf2{
margin: 0 5vw 10vw 5vw;
}

#mf2 #cbox21{
margin: 0 0 10vw 0;
}
#mf2 #cbox21 .cbox-inner{
padding: 5vw 3vw;
}
#mf2 #cbox21 h2{
font-size: 1.3em;
margin: 0 0 5vw 0;
}
#mf2 #cbox21 h3{
font-size: 1em;
padding: 2vw;
}

#mf2 #cbox21 h3 span:before{

}
#mf2 #cbox21 .cimg{
width: 100%;
text-align: center;
}
#mf2 #cbox21 .ctext{
width: auto;
}
#mf2 #cbox21 iframe{
border: #fff solid 0.4vw !important;
}

#mf2 #cbox22 p{
font-size: 1em;
}
#mf2 #cbox22 .cboxs{
width: auto;
border: solid 0.53vw;
margin: 5vw auto;
}
#mf2 #cbox22 .cboxs-inner{
padding: 4vw;
}
#mf2 #cbox22 .cboxs p{
font-size: 1em;
}

}