@charset "utf-8";
/* CSS Document */
/*----------------------------------------------------------------------------
***                                                            ファーストビュー
----------------------------------------------------------------------------*/
#mainView{background: url(/ochanoma/images_shin/callan_plan/img_header01.jpg) no-repeat; background-size: cover; background-position: center right 45%;max-width: 1200px;margin: 0 auto 0;}
#mainView .mainViewInner{max-width:1000px;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;}
.underPage #mainView .ttlMain{font-size: 130%;}
.underPage #mainView .txtLabelc{padding: 0.4em 1em 0.4em; font-size: 65%;}

/* 共通指定 */
.underPage .ttlBox .ttl-h3 .txtMain{padding: 0.5em 0; display: inline-block; width: 90vw; background: linear-gradient(to bottom, #212E5C, #35508F);}
.secBox .contentsBox .txtBox{margin:1em 0 2em 0;}

/*-- お茶の間留学キャンペーンPOPUP--*/
.close_btn { font-size:25px; cursor: pointer;font-weight: bold;line-height: 0.4em;}
.close_txt{font-size: 9px;}
.popup_content { width: 95%; /*height: 70%;*/border: solid 10px #DA594E;}
#campaignSec .pop_txt{position: absolute;/*left: 7%; bottom: 4%;*/font-size: 95%; top: 52%;}
#campaignSec .address_register{padding-left: 3%;}
#campaignSec .cp_banner img{padding: 0 1em; margin: 2em auto 0;}
#campaignSec .popup_content img{width: 100%;}
#campaignSec .taikenBox{font-size: 150%;}
#campaignSec .taiken{width: 80% ;font-size: 160%}
#campaignSec .formBox{margin: 1.0em 0 1.0em 0;}
.popup_content .smalltxt{font-size: 70%; line-height: 1.4;}

/*-- お茶の間留学はカラン正式認定校 --*/
#callanSec{}
#callanSec .callanMethodBox{margin:1.5em 0 0;}
#callanSec .callanMethodBox dt{color:#00b2bc; font-size:130%; font-weight:bold;}
#callanSec .listBox .listItem{width: 47%;}
#callanSec .listBox .listItem a{font-size: 115%;}

/*-- カランメソッドの特徴 --*/
#callanTokuchoSec{}
#callanTokuchoSec .boxArea{background:#fff;margin: 0 0 3em;padding: 0;border-radius: 10px;}
#callanTokuchoSec .boxArea .leftBox{padding:0 1em 0 0;}
#callanTokuchoSec .ttl-h4{font-size: 125%;line-height: 1.2;margin: 0 0 1em;}
#callanTokuchoSec .videoBoxArea{padding: 2em 1em 1em;}
#callanTokuchoSec .videoBox{display: block;}
#callanTokuchoSec .dispFlex p{font-size: 120%;}
#callanTokuchoSec .dispFlex{display: block;}

/* 中高生セクション */
.bg-stripe-blue{width: 89vw;}
.recommendArea{padding: 1em;}
.recommendArea h5{margin-top: 0.6em;}
.recommendArea ul{padding: 0;}
.recommendArea li{margin-bottom: 0.7em;}
.recommendArea li:last-child{margin-bottom: 0;}
.recommendArea li p{line-height: 1.3em;}
.recommendArea .txtRed{margin-top: 0.6em; text-align: center; line-height: 1.3em;}
.recommendArea .formBox .tac a{line-height: 1.1;}
.recommendArea li{font-size: 120%; width: 100%; padding: 0 0 0 1.8em; text-indent: -1.8em;}

/*-- 1回のレッスンの流れ --*/
#lessonFlowSec{}
#lessonFlowSec .lessonNagareBox .lessonNagareList{}
#lessonFlowSec .lessonNagareBox .lessonNagareList li{width: 48%;}
#lessonFlowSec .lessonNagareBox .lessonNagareList li:after{}
#lessonFlowSec .lessonNagareBox .lessonNagareList li:first-child{}
#lessonFlowSec .lessonNagareBox .lessonNagareList li:first-child:after{}
#lessonFlowSec .lessonNagareBox .txtAttention{}
#lessonFlowSec .lessonNagareBox .lessonNagareList li p{width: 90%;}

/* 利用開始までのステップ */
#startStepSec{}
#startStepSec .startStepList ul{display:block;}
#startStepSec .listItem{background:#fff;width: 90%;padding: 1em 1em;margin: 0 auto 2em;position: relative;}
#startStepSec .listItem:after{content: "➡";display:block;width: auto;height: auto;line-height: 1;position:absolute;left: calc(50% - 0.5em);top: -16%;color: #00b2bc;font-size: 270%;transform: rotate(90deg);}
#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{padding-top: 3em;} */
/* #callanLinkSec .sectionInner{padding: 5% 0% 5%;} */
#callanLinkSec .ttl-h3{width:80%; margin:0 auto;}
#callanLinkSec .callanAppBox{margin:0 0 2em;}
#callanLinkSec .formBox.bigBtn02 .formBtn{font-size:140%;}
#callanLinkSec .txtLink a{color:#000000;}

/* 料金 */
#priceSec{}
#priceSec .txtLabel{}
#priceSec .txtBox01{text-align: left;margin-bottom: 1em;}
#priceSec .txtLabel{display: inline-block;font-size: 100%;color: #fff;background: #212e5b;line-height: 1;padding: 0.4em 1em 0.4em;border-radius: 30px;font-weight: normal;margin: 2em 0em 0.5em 0em;}
#priceSec .contentsBox{max-width:660px; margin:0 auto;}
#priceSec .contentsBox .priceTableBox table{width:100%;border-color:#4d4d4d;font-size: 131%; margin: 0 0.2em 0.2em;}
#priceSec .contentsBox .priceTableBox table th{border-color:#4d4d4d; color:#fff; font-weight:bold; font-size: 100%;}
#priceSec .contentsBox .priceTableBox table td{border-color:#4d4d4d; color:#3d3a39; font-size: 100%; line-height: 1.5;}
.red_solid{font-size: 95%;}
.normal_solid{font-size: 95%;}
.pricetxt{font-size: 120%;}

/* カラン・イングリッシュのレベルとは */
#levelSec{}
#levelSec .contentsBox .txt01{text-align: left;}
#levelSec .contentsBox table{width: 100%; border: 1px solid #CCC; margin: 1.3em auto 0em;}
#levelSec .contentsBox table .bordernone{border-radius: 5px;}

/* 生徒様の声 */
#studentSec .studentcontentsBox .voiceBox{display: block; margin: 2em 0 3em;}
#studentSec .studentcontentsBox .studentBox{width: 100%; margin-bottom: 2em;}
#studentSec .studentcontentsBox .studentBox h4{font-size: 145%;}
#studentSec .studentcontentsBox .studentBox .dispFlex .imgBox{width: 25%;}
#studentSec .studentcontentsBox .studentBox .dispFlex .txtBox{width: 75%;}
#studentSec .studentcontentsBox .studentBox .dispFlex .txtBox .mgb2em{margin-bottom: 1em;}

/* カランメソッドステージ修了証 */
#callanMethodStageSec .dispFlex{display: block;}