@charset "utf-8";
/* CSS Document */

#headerArea{position:absolute;width: 100%;}
#headerArea #headerAreaInner{padding: 0.8em 0;}
#headerArea .logoBox .ttlSub{right: 2em;}
#gnav{margin-top: 0;}

#headerArea #headerAreaInner{max-width: 1050px;}

#gnav .gnavBox .gnaviNyukai{background: none;margin: 0;}


.sectionInner .normalBtn01{ background:none; padding:0; margin:3em 0 0;}
.normalBtn01{background:url(/ochanoma/kids_summer2024/images/img_bg_btn.jpg) no-repeat center center/cover;padding:92px 0 63px;margin-top: 2em;}
.normalBtn01 .txtBtn .subText{ font-size:1.8rem; font-weight:bold; display:inline-block; padding:0 1.2em 0.8em; position:relative;}

.formBox.normalBtn01 .formBtn{background: none;}

.dispInBlock{display: block;}


/*----------------------------------------------------------------------------
***                                                            ファーストビュー
----------------------------------------------------------------------------*/

#mainView{background:url(/ochanoma/kids_summer2024/images/img_top.jpg) no-repeat center center/cover;padding: 0em 0 0em;margin-top: 100px;}
#mainView .sectionInner{padding: 0;max-width: 1150px;}
#mainView .bgBox{display:inline-block;padding: 3em 2em;}
#mainView .bgBox .formBox{  margin:2em auto 0;}
#mainView .formBox.smallBtn .formBtn{ width:100%;background: none;max-width: 385px;padding: 0.3em 0em 0.5em;}
#mainView .formBox.smallBtn .formBtn img{width: 100%;}
#mainView .cmBtn{ position:absolute; right:1em; bottom:40px;}
.formBox .sub02Text{text-align: center;font-size: 21px;font-weight: bold;margin-top: 20px;}


h3{margin-bottom: 1em;font-size: 40px;text-align: center;line-height: 1.3;}
h3 span{background-image: linear-gradient(transparent 57%, #fdd79d 0%);}
.secBox > .sectionInner{max-width:950px;}
p{font-size: 15px;}

/*-- コンテンツボタン --*/
#btnBox {max-width: 1100px;margin: 55px auto 0;}
#btnBox div h3{font-size: 40px;margin-bottom: 0.5em;background: none;}
#btnBox div h3 span{color:#00aea5;background-image:none;}
#btnBox div p{text-align: center;line-height: 1.8;}
#btnBox ul{margin:2em 5em 0;}
#btnBox ul li{border-left: 1px solid #000;padding: 1.5em;width: calc(100% / 5);position: relative;}
#btnBox ul li:nth-child(2){padding: 1em;}
#btnBox ul li:last-child{border-right: 1px solid #000;}
#btnBox ul li::after{content: "";display: block; width: 1em;height: 1em;border-bottom: 3px solid #66cec9;border-right: 3px solid #66cec9;position: absolute;left: calc(50% - 0.5em);bottom: 0.5em;transform: rotate(45deg);font-size: 80%;}
#btnBox ul li p{text-align: center;line-height: 1.2;font-size: 17px;}
#btnBox ul li a:hover{text-decoration: none;}

/*-- NOVA夏の完全パックの内容 --*/
#allpackSec .ttlBox p{text-align: center;font-size: 18px;}
#allpackSec .contentsBox > p{text-align: center;margin: 2em auto 5em;}
#allpackSec .contentsBox .coler_b{color: #00aea5;font-size: 27px;font-weight: bold;margin: 0 auto 1em;}

#allpackSec .contentsBox .sampleBox{position: relative;margin: 0em auto 3em;}
#allpackSec .contentsBox .sampleBox .sampleimg{text-align:center; }
#allpackSec .contentsBox .sampleBox .samplebag{position: absolute;top: -2em;right: 2em}

#allpackSec .contentsBox .expBox p{margin: 0.5em 1em;}

/*-- ハイレベル --*/
#highlevelSec{background: #33beb7;}
#highlevelSec .sectionInner{padding:40px 0 30px;}
#highlevelSec h3{color: #fff;font-size: 38px;}
#highlevelSec div.whiteBox{background: #fff;border: 4px solid #b2e7e4;position: relative;padding: 2em 2em 1.5em;margin: 0 3em;}
#highlevelSec div.whiteBox::before{   
	content: "";
    position: absolute;
    bottom: -20px;
    left: 45%;
    transform: translateX(50%) rotate(135deg);
    transform-origin: center center;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-top: 4px solid #b2e7e4;
    border-right: 4px solid #b2e7e4;	
}
#highlevelSec div.whiteBox p{font-size: 15px;}
#highlevelSec div.whiteBox .fuki{position: absolute;top: -25px;left: 25px;}
#highlevelSec div.whiteBox .human{position: absolute;top: 20px;right: 25px;}
#highlevelSec div.whiteBox .subttl{font-size: 22px;font-weight: bold;}
#highlevelSec div.whiteBox .checkBox{padding-left: 10px;margin-bottom: 1em;}
#highlevelSec div.whiteBox .checkBox p{font-weight: bold;margin: 5px 0;font-size: 17px;}
#highlevelSec div.whiteBox .checkBox p::before{content: "";display: inline-block;background-image: url("../images/img_contents08.png") ;background-repeat: no-repeat;width: 19px;height: 19px;margin:0 3px -3px 0;}

#highlevelSec .allnova{color: #fff;font-size:32px;text-align: center;margin-top: 1em; font-weight: bold;}

/*-- クオリティ --*/
#qualitySec{background: #f2fbfa;}
#qualitySec h3 .s_ttl{display: block;font-size: 26px;background-image:none;}
#qualitySec .subttl{text-align: center;font-weight: bold;font-size: 27px;margin: 1em auto;}
#qualitySec p.qualitytxt{text-align: center;font-size: 18px;line-height: 1.5;}
#qualitySec p.koushi_img{margin: 1.5em auto 1em;text-align: center;}

#qualitySec .pointBox h4{font-size: 25px;color:#33beb7;font-weight: bold;text-align: center;margin-top: 1.5em;}
#qualitySec .pointBox h4 span{font-size: 130%;}
#qualitySec .pointBox ul{max-width: 850px;margin: 3em auto 0;}
#qualitySec .pointBox li{width: calc(95% / 3);border: 1px solid #000;padding: 2em 1em 1em;position: relative;margin: 0.5em;
background: #fff;}
#qualitySec .pointBox li span{font-size: 43px;
    position: absolute;
    background: #fff;
    border-radius: 60vw;
    line-height: 0;
    font-family: 'Oswald', sans-serif;
    top: -6px;
    left: 0;
    right: 0;
    margin: auto;
    width: 30px;
    height: 26px;
    padding: 5px;
    color: #33beb7;
    display: inline-block;}
#qualitySec .pointBox li .ttl{font-size: 24px;text-align: center;color: #33beb7;font-weight: bold;}
#qualitySec .pointBox li p.img{text-align: center;height: 35px;margin: 10px 0;}
#qualitySec .pointBox li p.txt{text-align: left;}


/*-- KIDSチャンネル --*/
#nkcSec{background: #fff2f7;}
#nkcSec .sectionInner{padding: 40px 0 55px;}
#nkcSec h3 {margin-bottom: 0.5em;}
#nkcSec h3 .s_ttl{display: block;font-size: 26px;background-image:none;}
#nkcSec .subttl{text-align: center;font-size: 18px;line-height: 1.5;}

#nkcSec .aboutNkcBox{font-size: 90%; width: 850px; margin: 2em auto 1em;background: #fff;padding: 2em;}
#nkcSec .aboutNkcBox .ttlBox{background: url("../images/img_nkc_bg.jpg"); background-repeat: no-repeat; background-size: cover; height: 250px; position: relative;}
#nkcSec .aboutNkcBox .ttlBox .ttl{background: #fff;position: absolute;top: 50%;left: 50%;width: 65%;transform: translate(-50%,-50%);padding: 1em 0;box-shadow: 7px 7px 7px -5px #777777;font-size: 26px;}
#nkcSec .aboutNkcBox .ttlBox span{color: #f5911e; font-weight: bold;font-size: 150%;}

#nkcSec .aboutNkcBox p.txt{font-size:180%;font-weight: bold;}
#nkcSec .aboutNkcBox .youtubeBtn{position: absolute;z-index: 1;right: 10em; bottom: 4em; transform: translate(50%,50%);}
#nkcSec .aboutNkcBox .nkcPointUl {margin: 1.5em 0 0;}
#nkcSec .aboutNkcBox .nkcPointLi {background: #fff6ed;padding: 1em 1.5em;width: calc(100% / 4);margin: 0.5em;}
#nkcSec .aboutNkcBox .nkcPointLi .txt{font-weight: bold;margin-top: 0.5em;font-size: 160%;line-height: 1.3;}
#nkcSec .aboutNkcBox .pointBox{font-size: 110%;}
#nkcSec .aboutNkcBox .pointBox .pointNum{color: #f93c38;border: 1px solid #f93c38;display: inline-block;padding: 0.3em 0.1em 0.3em 0.5em;margin-bottom: 0.5em;line-height: 1;position: relative;margin-right: 1em;}
#nkcSec .aboutNkcBox .pointBox .pointNum:after{content:"";display:block;position: absolute;width: 1.1em;height: 1.1em;top: 50%;right: -14px;background: #fff;transform: translate(0, -50%) rotate(-45deg);border-right: 1px solid;border-bottom: 1px solid;}
#nkcSec .aboutNkcBox .pointBox .pointNumTxt{position: relative; z-index: 1;}
#nkcSec .aboutNkcBox .pointBox{padding: 1.5em;}

/*----- コース一覧 -----*/
#nkcSec .pro_ttl{font-size: 28px;font-weight: bold;text-align: center;margin: 1.5em auto 0.5em;}
#nkcSec .programBox{background: #fff;padding: 0em;max-width: 850px;margin: auto;}
#nkcSec .programBox .coursetit{color:#5dbac4;text-align: center;}
#nkcSec .programBox .courseBox{margin-bottom:20px;padding: 30px 30px;font-size: 1.05rem;background:#fff;}
#nkcSec .programBox .detailAra{margin-bottom: 2px;}
#nkcSec .programBox .detailAra h4{font-size: 1.4rem;}
#nkcSec .programBox .detailAra h4:last-child{border-bottom: 1px solid #333;}
#nkcSec .programBox .detailAra h4 .taishyou{font-size: 85%;}
#nkcSec .programBox .descriptionArea{margin: auto 10px;}
#nkcSec .programBox .dekirukoto{color: #fb5c54;font-weight: bold;}
#nkcSec .programBox .txt{margin: 0 0em 0 2em;}
#nkcSec .pro_btn p{border: 3px solid #5dbac4;border-radius: 50vw;margin:1.5em auto 0;padding: 2px 20px 5px;color: #5dbac4;font-size: 26px;font-weight: bold;max-width: 450px;width: 100%;position: relative;background: #fff;}
#nkcSec .pro_btn p a:hover{opacity: 0.8;text-decoration: none;}
#nkcSec .pro_btn p a:visited{color:#5dbac4; }
#nkcSec .pro_btn p::before{   
	content: "";
    display: block;
    width: 15px;
    height: 15px;
    border: 0px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    bottom: 0em;
	top: 0;
	margin: auto;
	right: 20px;
	border-top: solid 3px #5dbac4;
    border-right: solid 3px #5dbac4;
}

/*-- 超効率的英語学習の仕組み --*/
#plotSec .sectionInner{padding: 60px 0 70px;}
#plotSec h3 .s_ttl{display: block;font-size: 26px;background-image:none;}
#plotSec .subttl{text-align: center;font-size: 18px;line-height: 1.5;}
#plotSec .plotimg{text-align: center;margin: 2em auto;}
#plotSec .plottxt{font-size: 28px;text-align: center;line-height: 1.2;font-weight: bold;border: 1px solid #000;padding: 10px 30px;max-width: 470px;position:relative;height: 80px;margin: auto;}
#plotSec .plottxt span{    background: #fff;display: block; padding: 25px 0;position: absolute;top: -23px; right: 0;left: 0;margin: auto 1em;}
#plotSec .orange{margin: 1em auto 0;text-align: center;font-weight: bold;font-size: 28px;color:#F8921D; }
#plotSec .blue{margin-top: 1em ;text-align: center;color: #33BEB7;font-size: 35px;font-weight: bold;line-height: 1.5;}



/*-- 夏期講習料金プラン --*/
#planSec{background: #E5F7F6;}
#planSec .sectionInner{padding: 60px 0 70px; }
#planSec h3 .s_ttl{display: block;font-size: 26px;background-image:none;}
#planSec .subttl{text-align: center;font-size: 18px;line-height: 1.5;}

#planSec .planBox {}
#planSec .planBox .plan{margin: 4em auto;position: relative;}
#planSec .planBox .plan:last-child{margin-bottom: 0;}
#planSec .planBox .plan h4{font-size: 26px;font-weight: bold;line-height: 1;position: relative;padding-left: 23px;}
#planSec .planBox .plan h4 span{font-size: 16px;font-weight: normal;}
#planSec .planBox .plan h4::before{border-left: 15px solid #33BEB7;height:55px;margin-right: 5px;content: "";display: inline-block;position: absolute;left: 0;}
#planSec .planBox .plan ul{margin:2em auto 1em;}
#planSec .planBox .plan li{background: #ccc;color: #fff;border-radius: 50vw;padding: 5px 25px;margin: 0 2px;text-align: center;font-size: 17px;}
#planSec .planBox .plan li.on{background: #33beb7;}
#planSec .planBox .plan .feeBox{align-items: stretch;margin-bottom: 0.5em;border:1px solid #000;}
#planSec .planBox .plan .feeBox p{padding: 10px 15px;width: 43%;font-size: 15px;text-align: center;background: #fff;margin: 0;}
#planSec .planBox .plan .feeBox p span{font-size: 25px;padding: 0 4px;}
#planSec .planBox .plan .feeBox p:last-child{border-left: 1px solid #000;}
#planSec .planBox .plan .feeBox p.student{background:#fff2f7; width: 14%;padding:13px 5px 0;font-size: 16px;border-right: 1px solid #000;}
#planSec .planBox .plan .feeBox p.nova_student{background:#fff6ed;}
#planSec .planBox .plan .feeBox .tax{font-size: 12px;padding: 0;}
#planSec .planBox .plan .kyozai{text-align: end;}

#planSec .planBox .plan.summer_pack{margin: 3.5em auto 1em;}
#planSec .planBox .plan.summer_pack .fuki{position: absolute;top: -55px;left: 0px;}

#planSec .planBox .plan.nkc_pack .feeBox p{width: 86%;}
#planSec .planBox .plan.nkc_pack .feeBox p:last-child{border-left: none;}
#planSec .planBox .plan.nkc_pack .plan_btn{margin-top: 1em;}
#planSec .planBox .plan .feeBox p.student{width: 14%;}



