@charset "utf-8";
/* CSS Document */
/*----------------------------------------------------------------------------
***                                                            ファーストビュー
----------------------------------------------------------------------------*/
#mainView{background: url(/ochanoma/images_shin/callan_plan/img_header01.jpg) no-repeat center center/cover;max-width: 1200px;margin: 0 auto 0;}
#mainView .mainViewInner{width: 100%;margin:0 auto;padding: 40px 0px 40px 50px;border-top: none;}
#mainView .bgBox{border:1px solid #fff;display:inline-block;padding: 0 0;}

/* 共通指定 */
.secBox > .sectionInner .contentsBox{max-width: 960px;margin: 55px auto auto auto;}
.secBox > .sectionInner .studentcontentsBox{max-width: 1200px;}
/* .ttlBox .ttl-h3 .txtMain{background:#E3F5F6;padding:0.4em 0;display: inline-block; width: 1200px; border-top: #00b2bc solid 5px; border-bottom: #00b2bc solid 5px;} */
.formBox.normalBtn01 .formBtn{font-size: 195%;padding: 0.5em 0em;border-radius:50px;}
.underPage .ttlBox .ttl-h3 .txtMain{color: #fff; width: 1200px; padding:0.4em 0;display: inline-block; background: linear-gradient(to bottom, #212E5C, #35508F);}
.underPage.CallanPage .secBox.bgColorSec{background: none;}
.underPage .secBox.bgColorSec{background: none;}

/*-- お茶の間留学キャンペーンPOPUP--*/
.popup_wrap input {display: none;}
.popup_overlay {display: flex;justify-content: center;overflow: auto;position: fixed;top: 0;left: 0;z-index: 9999;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);opacity: 0;transition: opacity 0.5s, transform 0s 0.5s;transform: scale(0);}
.popup_trigger { position: absolute; width: 100%; height: 100%;}
.popup_wrap input:checked ~ .popup_overlay { opacity: 1; transform: scale(1); transition: opacity 0.5s;}
.open_btn {position: relative;cursor: pointer; transition: .3s ease;}
.open_btn:hover{ transition: .3s ease;opacity:0.8;}
.close_btn { position: absolute; top: 2%; right: 1%; font-size:35px; cursor: pointer;font-weight: bold;line-height: 0.4em;}
.close_txt{font-size: 13px;}

.popup_content { position: relative;align-self: center;max-width:800px;width: 95%; box-sizing: border-box; background: #fff; line-height: 1.4em; transition: 0.5s;height: auto;margin: 4em auto;border: solid 15px #DA594E;}
.popup_content p{margin: 0; text-align: center; font-size: 105%;}
.popup_content p .small{font-size: 85%;}
.popup_content .txtBtn{font-size: 90%;}
.popup_content .smalltxt{font-size: 75%; text-align: left; width: 92%; margin: 1em auto 0;}
.popup_content img{width: 100%;}
#campaignSec{text-align: center;}
#campaignSec .cp_banner img{margin: 2em auto 0em;}
#campaignSec .pop_txt{position: absolute; top: 57%;font-size: 105%;color: #333; width: 100%;}
#campaignSec .address_register{padding-left: 5%;}
#campaignSec a{color:#2d8cff; }

#campaignSec .taikenBox{font-size: 19px;font-weight: bold;}
#campaignSec .taiken{color:#000;width: 40%;padding: 0.7em; font-size: 170%;}
#campaignSec .formBox{margin: 1em 0 0;}

/*-- お茶の間留学はカラン正式認定校 --*/
#callanSec{}
#callanSec .fontLightBlue{color:#00b2bc; font-size:130%; font-weight:bold; text-align: center;}
#callanSec .callanMethodBox{margin:1.5em 0 0;}
/* #callanSec .ttlBox .ttl-h3 .txtMain{ border: none;} */
#callanSec .listBox{margin: 70px auto auto auto;}
#callanSec .listBox .listItem{width: 18%;}
#callanSec .listBox .listItem a{display: block; color: #3d3a39; text-decoration: none; background: #E4F5F6; border: solid 3px #00B2BC; width: 100%; padding: 1.5em 0 2em; font-weight: bold; font-size: 130%; text-align: center; border-radius: 7px; position: relative;}
#callanSec .listBox .listItem a::after{content: ""; position: absolute; bottom: 6px; right: 0; left:  0; width: 14px; height: 14px; margin: auto; border-top: 3px solid #00B2BC; border-right: 3px solid #00B2BC; transform: translateY(-2px) rotate(135deg); box-sizing: border-box;}
#callanSec .videoBox .titleBox{font-size: 230%; font-weight: bold;}
#callanSec .videoBox .contentsBox{margin-top: 0;}
#callanSec .videoBox .movieInBox{text-align: center; margin-top: 1em; color: #3d3a39;}

/*-- カランメソッドの特徴 --*/
#callanTokuchoSec{}
#callanTokuchoSec .boxArea{background:#fff;margin: 0 0 1em;padding: 2em 3em;border-radius: 10px;}
#callanTokuchoSec .boxArea .leftBox{padding:0 1em 0 0;position: relative;}
#callanTokuchoSec .boxArea .leftBox img{position: absolute;top: -10px;right: 140px;width: 20%; height: auto;}
#callanTokuchoSec .ttl-h4{font-size: 150%;line-height: 1.2;margin: 0 0 1em;}
#callanTokuchoSec .videoBoxArea{padding: 2em 1em 1em;}

/* 中高生 */
.bg-stripe-blue{background-color: #00b2bc; background-image: linear-gradient(-45deg, rgba(255, 255, 255) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255) 50%, rgba(255, 255, 255) 75%, transparent 75%, transparent); background-size: 12px 12px; width: 877px; margin: 0 auto; padding: 0.7em; margin-bottom: 50px;}
.recommendArea{background-color: #fff; padding: 2em;}
.recommendArea h4{font-size: 200%; text-align: center; color: #00b2bc; margin-bottom: 0.5em;}
.recommendArea h5{font-size: 180%; margin-bottom: 0.2em;}
.recommendArea .dispFlex{margin: 0 auto; max-width: 720px; justify-content: space-between;}
.recommendArea .imgBox{margin-top: 0.3em;}
.recommendArea .txtRed{font-size: 180%; text-align: center; color: #FE0001; font-weight: bold; margin-top: 0.5em;}
.recommendArea ul{padding: 0 30px 0 10px;}
.recommendArea li{line-height: 2em;}
.recommendArea li::before{content: ""; display: inline-block; width: 1em; height: 1em; background: url(/ochanoma/images_shin/callan_plan/ico_checkBox.png) no-repeat center center/cover; margin: 0 0.7em 0 0;}
.recommendArea .formBox{margin-top: 1.5em;}
.recommendArea .formBox.normalBtn01 .recommendBtn{max-width: 700px; color: #fff; background: linear-gradient(to bottom,#00b2bc 0%,#00b2bc 50%,#00A7B0 50%,#00A7B0 100%);}
/* 矢印 */
.recommendArea .arrowLine{display: flex; align-items: center; justify-content: center; height: 20px; margin-top: 0.5em;}
.recommendArea .line{height: 4px; background-color: #00b2bc;}
.recommendArea .line.left{flex: 1; position: relative; left: -2px;}
.recommendArea .line.right{flex: 2; position: relative; right: -2px;}
.recommendArea .arrow::before{content: ""; display: block; width: 25px; height: 25px; border-top: 4px solid #00b2bc; border-right: 4px solid #00b2bc; position: relative; top: 1px;}
.recommendArea .arrow.-bottom::before{transform: rotate(135deg);}

/*-- 1回のレッスンの流れ --*/
#lessonFlowSec{}
#lessonFlowSec .lessonNagareBox .lessonNagareList{}
#lessonFlowSec .lessonNagareBox .lessonNagareList li p{width: 80%; margin: 1em auto;}
#lessonFlowSec .lessonNagareBox .lessonNagareList li:after{left: -4%; top: 31%; background: #fff;}
#lessonFlowSec .lessonNagareBox .lessonNagareList li:first-child{}
#lessonFlowSec .lessonNagareBox .lessonNagareList li:first-child:after{}
#lessonFlowSec .lessonNagareBox .txtAttention{}

/* 利用開始までのステップ */
#startStepSec{}
#startStepSec .listItem{background:#fff;width: 30%;padding: 1em 1em;position: relative;}
#startStepSec .listItem:after{content: "➡";display:block;width: auto;height: auto;line-height: 1;position:absolute;left: -14%;top: 40%;color: #00b2bc;font-size: 350%;}
#startStepSec .listItem:first-child{border-left:none;}
#startStepSec .listItem:first-child:after{display:none;}
#startStepSec .listItem .ttl {font-size: 145%;color: #00b2bc;}
#startStepSec .listItem .img {font-size:180%;min-height: 3.5em;margin: 0.3em 0 0.3em;}
#startStepSec .listItem .txt {font-size: 95%;}

/* カランメソッドApp */
#callanLinkSec .sectionInner{padding-top: 0;}
#callanLinkSec .formBox.bigBtn02 .formBtn{font-size:160%;}
#callanLinkSec .txtLink a{color:#000000;}

/* 料金 */
#priceSec{}
#priceSec .txtLabel{}
#priceSec .txtBox01{text-align:center;margin-bottom: 1em;}
#priceSec .txtLabel{display: inline-block;font-size: 100%;color: #fff;background: #212e5b;line-height: 1;padding: 0.4em 1em 0.3em;border-radius: 30px;font-weight: normal;margin: 2em 0em 1em 0em;}
#priceSec .contentsBox{max-width:660px;}
#priceSec .contentsBox .priceTableBox table{width:100%; border-color:#4d4d4d; margin: 0 0.5em 0.3em; table-layout: fixed;}
#priceSec .contentsBox .priceTableBox table th{background: #1B1464; color: #fff; font-size: 135%;}
#priceSec .contentsBox .priceTableBox table td{border-color:#4d4d4d; color:#3d3a39; font-size: 135%; text-align: center;}
#priceSec .contentsBox .priceTableBox table td span{margin-left: 1em;}


/* カラン・イングリッシュのレベルとは */
#levelSec{}
#levelSec .txt01{margin-bottom: 2em;}
#levelSec .contentsBox table{border: 1px solid #CCC; background: #fff; margin: 2em auto 3em; width: 90%; max-width: 800px;}
#levelSec .contentsBox table th{background: #FFFFF0; line-height: 1.3; padding: 5px;}
#levelSec .contentsBox table td{text-align: center; vertical-align: middle; line-height: 1.3; padding: 5px;}
#levelSec .contentsBox table .bordernone{border: none; border-radius: 10px;}

/* カランメソッドステージ修了証 */
#callanMethodStageSec{}
#callanMethodStageSec h4{font-size: 180%; font-weight: normal;}
#callanMethodStageSec .dispFlex{justify-content: space-evenly; align-items: center;}

/* 生徒様の声 */
#studentSec{}
/* #studentSec .studentcontentsBox .voiceBox{margin: 3em 0 5em;} */
#studentSec .studentcontentsBox .studentBox{width: 48%;}
#studentSec .studentcontentsBox .studentBox h4{font-size: 170%; color: #3d3a39; margin-bottom: 0.2em;}
#studentSec .studentcontentsBox .studentBox img{border: solid 1px #B3B3B3;}
#studentSec .studentcontentsBox .studentBox .txtBox{margin: 0.5em 0 0 1em;}
#studentSec .studentcontentsBox .studentBox .txtBox{margin-top: 0;}
#studentSec .studentcontentsBox .studentBox .fontB{margin-bottom: 0;}
#studentSec .studentcontentsBox .studentBox .mgb2em{margin-top: 0; margin-bottom: 0.5em;}
#studentSec .studentLink a{font-weight: 500; color: #00b2bc; text-decoration: underline;}
#studentSec .recommendBox{margin-top: 0.5em;}
#studentSec .recommendBox p{text-align: left;}
#studentSec .formBox .recommendBtn{width: auto; padding: 0.5em 1em; color: #fff; background: linear-gradient(to bottom,#00b2bc 0%,#00b2bc 50%,#00A7B0 50%,#00A7B0 100%); font-size: 130%; font-weight: 500;}
/* 矢印 */
#studentSec .recommendBox .arrowRight::before{content: ""; display: inline-block; width: 0.6em; height: 0.6em; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);}

/* 3つ並べボタン */
.btnArea{display: flex; justify-content: center; gap: 35px; flex-wrap: wrap; margin: 4em auto;}
.btnArea .formBox{margin: 0;}
.btnArea .formBox .formBtn{width: 300px; line-height: 1.3; padding: 0.8em 0; font-size: 180%; border-radius: 10px; box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.2);}
.btnArea .formBox .blueBtn{background-color: #00B2BC; color: #fff;}
.btnArea .formBox .yellowBtn{background-color: #FFF000;}
.btnArea .formBox .orangeBtn{background-color: #F7931E; color: #fff;}

/* カラン・イングリッシュをお申込みされた方へボタン */
.formBox.normalBtn04 .formBtn{font-size: 185%; padding: 0.5em 0 0.5em; border-radius: 50px; max-width: 550px; background: linear-gradient(to bottom,  rgba(15,189,213,1) 0%,rgba(15,189,213,1) 50%,rgba(14,179,201,1) 50%,rgba(14,179,201,1) 100%);}

/*-- キャンペーンバナー --*/
.cmpbnr{width: 95%; max-width: 800px; height: auto; margin: 2em auto 0;}
.cmpbnr img{width: 100%; height: auto;}

/*-- キャンペーン文言 --*/
.red_solid{border:5px solid #FE0001; font-size: 110%;}
.red_solid2{border: 5px solid #FE0001; border-bottom: 1px solid #4d4d4d;}
.red_solid3{border: 5px solid #FE0001; border-top: 1px solid #4d4d4d;}
.season{position: absolute; right: -1em; width: 80px; bottom: -1em;}
.season img{width: 100%; height: auto;}
.campaign_txt.two{margin: 0.3em auto 1em;}
.redtxt{color: #FE0001; font-weight: bold;}
.bluetxt{color: #0000c9; font-weight: bold;}

.campaignBox{position: relative; background: #f1f7d0; border-radius: 5px; padding: 2em 0em; margin: 1.5em auto 0; width: 100%;}
.campaignBox::after{content: ""; position: absolute; left: 50%; width: 0; height: 0; border-style: solid; transform: translateX(-50%); top: -15px; bottom: auto; border-width: 0 30px 30px 30px; border-color: transparent transparent #f1f7d0 transparent;}
.campaignBoxInner{width: 65%; margin: 0 auto;}
.campaign{color: #fff; font-size: 20px; text-align: center; font-weight: bold; margin: 0; background: #8ac426;}
.campaign_txt{text-align: center; font-size: 17px; color: #3e3a39; font-weight: bold;}
.campaign_txt span{color: #ee9300; font-size: 20px;}
.campaign_kikan{font-weight: bold; color: #ee9300; text-align: center; background: #fff; border-radius: 50vw; font-size: 20px;}
.campaign_more{margin: 0; text-align: center; font-size: 15px; color: #3e3a39;}
.campaign_img{position: absolute; width: 72px; top: 20%; right: 75px; transform: translateY(-50%);}
.campaign_img img{width: 100%; height: auto;}