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

/*----------------------------------------------------------------------------
***                                                                Container
----------------------------------------------------------------------------*/
.meiryo {font-family: 'メイリオ', "Hiragino kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", 'Meiryo UI', Verdana, 'ＭＳ Ｐゴシック', sans-serif;}


/*----------------------------------------------------------------------------
***                                                             headerArea
----------------------------------------------------------------------------*/
#headerArea{position: sticky;top: -20px;/* left:0; */width:100%;z-index: 99;background: rgba(0,0,0,1);border-top: 20px solid #666;height: 70px;}
#headerArea #headerAreaInner{position:relative;padding: 3px 0 3px;height: 100%;width: calc(100% - 4em);max-width: 1050px;margin: 0 auto;}
#headerArea #headerAreaInner h1 {margin: 0;padding:0 0 2px 0;line-height: 1em;}
#headerArea .ttl{padding: 5px 0 5px;margin: 0;}
#headerArea .ttl img{/* margin: -10px 0 0 -10px; */}
#headerArea .logoBox{width:25%;max-width: 240px;}
#headerArea .moushikomiBtn{width: 23%; margin: 0 1em 0 auto;}
#headerArea .moushikomiBtn a{display: block;width: 100%;background: #e74051;border-radius: 5em;color: #fff;text-align: center;font-weight: bold;padding: 0.3em 0;font-size: 100%;}
#headerArea .moushikomiBtn a:hover{text-decoration: none;}
#headerArea #menuBtnBox{width: 30px;height: 20px;cursor: pointer;margin: 0 1em 0 0;/*background:#ccc;*//* position:  absolute; *//* top: 0; *//* right:  0; */z-index: 9999;}
#headerArea #menuBtnBox .menuBtn{position:relative;width:100%;height:100%;display:block;}
#headerArea #menuBtnBox .line,
#headerArea #menuBtnBox .menuBtn:before,
#headerArea #menuBtnBox .menuBtn:after{content:"";display:block;width: 30px;height: 2px;background: #fff;position:absolute;right:0;border-radius: 20px;transform-origin: center;transition:all 0.5s ease;}
#headerArea #menuBtnBox .line{top: 0;}
#headerArea #menuBtnBox .menuBtn:before{top: calc(50% - 1px);}
#headerArea #menuBtnBox .menuBtn:after{bottom:0;}
#headerArea #menuBtnBox .menuBtn.open .line{top: calc(50% - 1px);transform:rotate(-45deg);background: #000;}
#headerArea #menuBtnBox .menuBtn.open:before{top: calc(50% - 1px);opacity:0;}
#headerArea #menuBtnBox .menuBtn.open:after{bottom: calc(50% - 1px);transform: rotate(45deg);background: #000;}

#headerArea .ttlTxt{font-size: 11px;color: #fff;font-weight: normal;position: absolute;top: -18px;line-height: 1.6;margin: 0;padding: 0;}
#headerArea .ttlSub{position: absolute;top: -18px;right: 0;color: #fff;font-size: 11px;text-align: right;width: 400px;line-height: 1.6;margin: 0;padding: 0;}

@media (min-width:768px)  and (max-width:850px) {
	#headerArea .moushikomiBtn{width: 30%;}
}

/*----------------------------------------------------------------------------
***                                                             headerAreaInner
----------------------------------------------------------------------------*/
#headerAreaInner {padding: 2em 1em 2em;max-width: 1050px;margin: 0 auto;}
#headerAreaInner .navMenuTop {width: 70%;max-width:560px;}
#headerAreaInner .topicsBtnBox{margin-right: 2%; margin-top: 2px;}
#headerAreaInner .qaBtnBox{margin-right: 2%; margin-top: 2px;}
#headerAreaInner .loginBtnBox{margin-right: 2%;}
#headerAreaInner .nlsTelTop {max-width: 165px;width: 30%;margin: 2px 0 0 0;}
#headerAreaInner .navBox {width: 70%;}
#headerAreaInner .shopList{max-width: 220px;width: 100%;margin-bottom: 0.5em;}
#headerAreaInner .contentsList{max-width: calc(600px + 2em);width: 100%;padding-left: 2em;}
#headerArea .icoBox{display:none;}

/*----------------------------------------------------------------------------
***                                                                  gnavBottom
----------------------------------------------------------------------------*/
#gnavBottom{/* position: absolute; */width: 100%;padding: 0;font-size: 75%;z-index: 2;}
#gnavBottom .gnavBottomInner{/* position: relative; */padding: 0.5em 0 0 0;margin: 0 auto;width: calc(100% - 4em);max-width: 1050px;}

#breadcrumbArea{}
#breadcrumbArea a{color:#333; text-decoration:underline;}
#breadcrumbArea li:not(:last-child):after{content:"";display:inline-block;border: 0.3em solid transparent;border-left: 6px solid #ec1e79;border-right: 0em solid transparent;width: 0;height: 0;margin: 0 0.6em;}

#snsBtnBox{width: 20%; max-width: 150px;}
#snsBtnBox li{width: 29%; margin-left:2%;}

/*----------------------------------------------------------------------------
***                                                              mainsection
----------------------------------------------------------------------------*/

/*--- セクション共通 ---*/
.secBox{width: 100%;}
.secBox > .sectionInner{width: calc(100% - 4em);max-width: 1050px;margin: 0 auto;padding: 4em 0 4em;font-size: 110%;}
.secBox > .sectionInner > .titleBox{margin: 0 0 2em;}
.secBox > .sectionInner > .titleBox h2{font-size: 45px;font-weight: bold;}
.underPage .secBox .secBox > .sectionInner{max-width: calc(1000px + 4em);margin: 0 auto;padding: 5em 2em 5em;}
.underPage .secBox > .sectionInner > .titleBox h3{font-size:39px;}


/*--- mainView共通（下層ページ） ---*/
.underPage #mainView{}


/*--- TOPへ戻るボタン ---*/
#backToTop {position: fixed;right: 2em;bottom: 2.7em;z-index: 999; width: 52px;}
#backToTop:hover {cursor: pointer;}

/*----------------------------------------------------------------------------
***                                                              formLinkSec
----------------------------------------------------------------------------*/
#formLinkSec.lsFormLink{background-color: #fad9dc;}
#formLinkSec.lsFormLink>.sectionInner {max-width: 1200px;width: 50vw;margin: 0 auto;}
#formLinkSec.lsFormLink .btnBox{padding: 1em 0;}
#formLinkSec.lsFormLink_footer .campaignShogetsu0yen{padding: 3em 0;}
#formLinkSec.lsFormLink_footer .campaignShogetsu0yen .ttl img{width: 70%;}
#formLinkSec.lsFormLink_footer .campaignShogetsu0yen .moushikomiBtn a{font-size: 170%;padding: 0.7em 0;width: 100%;max-width: 440px;border-radius: 5em;}
#formLinkSec .last_img{margin: 0;}

/*--- moushikomiBox ---*/
.moushikomiBox.campaignShogetsu0yen {padding: 4em 0 0;}
.moushikomiBox.campaignShogetsu0yen .ttl{text-align: center;margin: 0 auto;width: 90%;}
.moushikomiBox.campaignShogetsu0yen .moushikomiBtn {margin: 0;}
.moushikomiBox.campaignShogetsu0yen .moushikomiBtn a{display: block;width: 90%;max-width: 335px;background-color: #e74051;color: #fff;font-size: 150%;font-weight: bold;padding: 0.5em 0;margin: 0.5em auto 0.8em auto;border-radius: 1em;text-align: center;}
.moushikomiBox.campaignShogetsu0yen .moushikomiBtn a:hover {text-decoration: none; opacity: .8;}
.moushikomiBox.campaignShogetsu0yen .aboutCampaignLink{margin: 0; text-align: center;text-decoration: underline;color: #000;}
/*.moushikomiBox.campaignShogetsu0yen .aboutCampaignLink a{text-decoration: underline;}*/
.moushikomiBox.campaignShogetsu0yen .aboutCampaignLink:hover{color: #e74051;}
/*bottom*/
.moushikomiBox.campaignShogetsu0yen.bottom{background-color: #fad9dc;}
.moushikomiBox.campaignShogetsu0yen.bottom .snsUl {margin-top: 2.5em;}
.moushikomiBox.campaignShogetsu0yen.bottom .snsLi {margin: 0 1em;}
.moushikomiBox .videoBox{margin-bottom: 1em;}
.moushikomiBox .videoBox .titleBox{font-size: 30px;font-weight: bold;}


@media (min-width:768px)  and (max-width:850px) {	
	#formLinkSec.lsFormLink>.sectionInner{width: 70vw;}
	.moushikomiBox.campaignShogetsu0yen .ttl{width: 100%;}
	#formLinkSec.lsFormLink_footer .campaignShogetsu0yen .ttl img{width: 100%;}
}

/*-- キャンペーンPOPUP--*/
.popup_wrap_cp 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_cp 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: 1%; right: 1%; font-size:35px; cursor: pointer;font-weight: 100;line-height: 0.4em;padding: 0.3em 0.1em 0.4em;background: #333333;color: #fff;z-index: 3}
.close_txt{font-size: 13px;}

.popup_content { position: relative;align-self: center;max-width:900px;width: 95%; padding: 10px 11px 10px; box-sizing: border-box; line-height: 1.4em; transition: 0.5s;height: auto;margin: 0em auto;background:linear-gradient(to right, rgba(50, 218, 229, 1), rgba(0, 161, 201, 1));}
.popup_content .cp_title{text-align: center;margin-top: 0.5em;}
.popup_content img{width: 80%;}
#campaignSec{text-align: center;}
#campaignSec .cp_banner img{margin: 1em auto;}
#campaignSec .cp_encho{position: absolute;top: 2%;left: 2%;width: 25%;}


#campaignSec .font_title{font-size: 55px;font-weight: bold;}
#campaignSec .gradation_txt{display: inline-block;background: linear-gradient(to right, rgba(255, 161, 11, 1), rgba(255, 36, 186, 1));-webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 2.5em; }
#campaignSec .title_cp{text-align: center;line-height: 2em;margin-left: 6em;}
#campaignSec .address_register{padding-left: 5%;}
#campaignSec a{color:#2d8cff; }
#campaignSec .popup_inner{background: #fff;padding: 2em 2.5em;position: relative;}
#campaignSec .popup_inner .cp_title img{width:40%;margin-left: 3em; }
#campaignSec .popup_inner ul{margin: 2em auto; }
#campaignSec .popup_inner li{padding: 0 0.5em;margin: 0 auto;width: 50%;}
#campaignSec .popup_inner li.standard_cp{border-color: #E5F5F9;}
#campaignSec .popup_inner li.premium_cp{border-color: #EDDBEC;}
#campaignSec .popup_inner .plan{padding: .7em;text-align: center;font-size: 150%;margin-top: -18%;font-weight: bold;}
#campaignSec .popup_inner .plan_img img{width: 100%;}
#campaignSec .popup_inner .cp_pop_btn{width: 100%;text-align: center;margin: 5% 0;}
#campaignSec .popup_inne .cp_btn{margin: 1em auto;}
#campaignSec .pop_txt{position: relative;}
#campaignSec .pop_txt .pop_images{position: absolute;top: 3%;right: -2%;}
#campaignSec .pop_txt .pop_images img{width: 100%;}
#campaignSec dl{margin: 0.7em 0;}
#campaignSec dt{width:10%;background: #666; padding: 0.2em; color: #fff;font-weight: bold;text-align: center;height: 5%;margin:0 0.5em}
#campaignSec dd{width:56%;font-size: 90%;padding-top: 0.2em;}
#campaignSec .font_LLL{font-size:35px;; font-weight: bold;}
#campaignSec dd .font_LL{font-size:140%; font-weight: bold;}
#campaignSec dd .font_L{font-size:115%;font-weight: bold;}
#campaignSec .aten{font-size: 60%;padding-left: 10em;}
/*-- キャンペーンPOPUP--*/
/*--- campaignSec ---*/
#campaignSec{
}
#campaignSec .popup_inner .ryoukinUl{margin: 0.5em auto;}
#campaignSec .ryoukinLi{width: 46%;position: relative;}
#campaignSec .ryoukinLi .ryoukinDl dt{font-size: 160%;padding: 0.2em 0 0.1em;color: #fff;width: auto;margin: 0;}
#campaignSec .ryoukinLi.standard .ryoukinDl{background-color: #fad9dc;padding-bottom: 1em;}
#campaignSec .ryoukinLi.premium .ryoukinDl{background-color: #d5f0ef;padding-bottom: 1em;}
#campaignSec .ryoukinLi.standard .ryoukinDl dt {background: #e74051;}
#campaignSec .ryoukinLi.premium .ryoukinDl dt {background: #2cb4ad;}
#campaignSec .ryoukinLi .ryoukinDl dd {margin: 0.5em;width: auto;}
#campaignSec .ryoukinLi.standard .ryoukinDl .level{line-height: 1.5;}
#campaignSec .ryoukinLi.premium .ryoukinDl .level{line-height: 1.5;}
#campaignSec  .ryoukinLi .ryoukinDl dd.Lesson_amount{font-size: 130%;font-weight: bold;margin: 0.5em 0;padding:0;}
#campaignSec .standard .Lesson_amount span{color: #e74051;font-size: 160%;padding: 0 0.2em;}
#campaignSec .premium .Lesson_amount span{color: #2cb4ad;font-size: 160%;padding: 0 0.2em;}
#campaignSec .ryoukinLi .ryoukinDl .btn_planS{border-radius: 50vw;color: #fff;background: #e74051;border: 3px solid #fff;padding: 0.3em 0 0.4em;font-size: 135%;width:75% ;margin: 0 auto;}
#campaignSec .ryoukinLi .ryoukinDl .btn_planP{border-radius: 50vw;color: #fff;background: #2cb4ad;border: 3px solid #fff;padding: 0.3em 0 0.4em;font-size: 135%;width:75% ;margin: 0 auto;}
#campaignSec .btn_planS a,#campaignSec .btn_planP a{display: block;width: 85%;margin: 0 auto;color: #fff;}
#campaignSec .btn_planS:hover,#campaignSec .btn_planP:hover{opacity: 0.8;}
#campaignSec .btn_planS:visited,#campaignSec .btn_planP:visited{color: #fff;}
#campaignSec .btn_planS a:hover,#campaignSec .btn_planP a:hover{text-decoration: none;}
#campaignSec .cpfuki{position: absolute;top: 33%;left: 6%;}


@media (min-width:768px)  and (max-width:850px) {
	#campaignSec .ryoukinLi{width: 49%;}
	#campaignSec .cpfuki{top:20%; left: -5%; }
	#campaignSec .txtSizeLL{font-size: 200%;}
	#campaignSec .ryoukinLi .ryoukinDl .btn_planS{width: 90%;}
	#campaignSec .ryoukinLi .ryoukinDl .btn_planP{width: 90%;}
	#campaignSec .levelBox .pullBtn{margin: 10% auto 0%;}
	
}









/*----------------------------------------------------------------------------
***                                                              footer
----------------------------------------------------------------------------*/
#footerArea{font-size: 74%;}
#footerAreaInner{max-width: 1200px; margin: 0 auto; padding: 0.5em 2em; width: 100%;}
#lsFooterSec .sectionInner {padding: 0;width: 100%;}

@media screen and (min-width: 1920px){
    #gnav a{font-size:85%;}
}