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

#headerArea{z-index: 99;}
#sideBox nav#sidr{ padding-top:50px;}
#sideBox .contentsList .titleTxt a{ font-size:67.5%; color:#000;}

.btnBox a{ color:#000;}

#headerArea #headerAreaInner{padding: 0.2em 0 0.2em 0.6em;width: 100%;}
#headerArea .logoBox{width: 38%;}
.secBox > .sectionInner{ padding-top:4em;}
.secBox > .sectionInner > .titleBox{ margin:0;}
#headerArea #headerAreaInner h1 {margin: 0;}

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

.btnBox{padding: 0% 5% 6%;}
.btnBox .txtBox{font-size: 130%;font-weight: 500;}
.btnBox .btnBoxInner{max-width: 100%;margin: 0 auto;padding:8% 0 0;}
.btnBox .btnBoxInner ul{display: block;}
.btnBox .btnBoxInner li{width: 88%;padding: 0.4em 0 0.3em;font-size: 150%;margin:0 auto 0.7em;}
.btnBox .btnBoxInner li a{}
.btnBox .btnBoxInner .application{}
.btnBox .btnBoxInner .mockup{}
.btnBox .linkTopicsFaq p{margin: 1% 0;}
.btnBox .btnBoxInner .application{width: 100%;margin: 0 auto 0.7em;}

h2{font-size: calc(10px + 4vw);line-height: 1.4;margin-bottom: 0.5em;}
h2 span{font-size: 50%;}
h2 span:before,
h2 span:after{content: '';flex-grow: 0.05;height: 1px;}
h2 span:before{margin-right: 10px;}
h2 span:after{margin-left: 10px;}


/*--- mainView ---*/
#mainView{max-width: 100%;margin: 2em auto 0;background: url("../../images/kanibari/2205/bg_main_sp.jpg") no-repeat center top;background-size: 100%;background-size: cover;}
#mainView *{min-height: inherit;}
#mainView p{margin:0; padding:0;}
#mainView .sectionInner{margin:0 auto;padding: 2em 1em 3em;max-width:none;width: 100%;}
#mainView .sectionInner h2{font-size: 170%;margin: 0.5em auto -0.4em;}
#mainView .sectionInner h2 span{font-size: inherit;display: inline-block;}
#mainView .sectionInner h2 span:before,
#mainView .sectionInner h2 span:after{content: none;}
#mainView .sectionInner h2 span:before{margin-right: 0;}
#mainView .sectionInner h2 span:after{margin-left: 0;}
#mainView .sectionInner h2 img{padding-top: 0em;width: 84%;}
#mainView .sectionInner .sp_live img{width: 30%;}
#mainView .imgMainBox{font-size: 15vw;margin-bottom: 0.2em;}
#mainView .imgMainBox p:last-child{padding: 0;text-align: center;width: 100%;line-height: 0.9em;}
body.appPage #mainView .txtTtl{margin: 0 auto 18%;width: 100%;}/*アプリ経由版*/
#mainView .bgBox{max-width: 100%;width: 100%;margin: 0 auto;display: block;}
#mainView .bgBox .txtBox{width: 100%;margin-bottom: 1em;text-align: center;}
#mainView .bgBox .imgBox{width: 100%;margin-right: 0;margin-left: 0.7em;}


#mainView .btnBox{width: 70%;padding: 0.35em 0 0.3em;font-size: 160%;margin-top: 3%;}
#mainView .btnBox a{}
#mainView .btnBox a:after{}

#mainView .sectionInner .kidschannelBtn a {display: block;max-width: initial;position: initial;top: initial;right: initial;width: auto;text-align: center;}
#mainView .sectionInner .kidschannelBtn a img {width: 80%;}


/*--- newstyleSec ---*/

#newstyleSec{background-size: 260%;}
#newstyleSec .sectionInner{padding: 1em;margin-bottom: 0em;}
#newstyleSec .newstyleBox{padding: 6% 0%;}
#newstyleSec .newstyleBox h2{font-size: 200%;line-height: 1.2;margin-bottom: 0.2em;}
#newstyleSec .newstyleBox h2 span{font-size: 100%;}
#newstyleSec .newstyleBox h2 span:before,
#newstyleSec .newstyleBox h2 span:after{}
#newstyleSec .newstyleBox h2 span:before{}
#newstyleSec .newstyleBox h2 span:after{}
#newstyleSec .newstyleBox .cnt_txt{width: 100%;margin: 2em auto 0;}
#newstyleSec .newstyleBox .cnt_txt p {margin: 0 auto;text-align: center;line-height: 2em;}
#newstyleSec .newstyleBox .cnt_txt span{margin-right: 0;margin-bottom: 1.5em;}
#newstyleSec .newstyleBox .cnt_txt span::after{content: "";display: block;position: absolute;top: 87%;right: 37%;width: 0;height: 0;border: 10px solid;border-color: #2AA0C5 transparent transparent transparent ;z-index: -1;}

#newstyleSec .newstyleBox .dispFlex{display: block;width: 100%;margin: 0 auto;}
#newstyleSec .newstyleBox dl{padding: 10% 0 0;margin-bottom: 2.5em;border-left: none;border-top: 1px solid;}
#newstyleSec .newstyleBox .linenone{border-top: none;}
#newstyleSec .newstyleBox dl:nth-child(2){margin: 0 0 2.5em;}
#newstyleSec .newstyleBox dt{font-size: 160%;}
#newstyleSec .newstyleBox dd{font-size: 140%;text-align: center;}
#newstyleSec .newstyleBox dd.tac{}
#newstyleSec .newstyleBox p{margin-top: 0em;font-size: 125%;line-height: 1.6em;}
#newstyleSec .newstyleBox .pr_img{margin: 0 auto 2em;}
#newstyleSec .newstyleBox .pr_img img{width: 100%;}


#newstyleSec .iconListBox{}
#newstyleSec .iconListBox .sectionInner{max-width: 100%;width: 100%;padding: 22% 8% 5%;}
#newstyleSec .iconListBox .sectionInner h3{font-size: 180%;line-height: 1.25;}
#newstyleSec .iconListBox .listItem{margin:0 0 0.8em; width: 30%;}
#newstyleSec .iconListBox .listItem span{}
#newstyleSec .iconListBox .listItem .txtBox{font-size: 88%;}
#newstyleSec .iconListBox .listItem .txtBox.min18{}
#newstyleSec .iconListBox .listItem .imgBox{}
#newstyleSec .aboutBtn{margin-top: 11em;}
#newstyleSec .aboutBtn{}
#newstyleSec .aboutBtn p{font-size: 5vw;}
#newstyleSec .aboutBtn .check{margin: 0px 1%;padding: 2% 8% 2% 0;font-size: 4vw;}
#newstyleSec .aboutBtn .check a{}
#newstyleSec .aboutBtn .check a:after{right: 1%;width: 11%;height: 79%;top:6%;color:#de1d74;padding-top: 3px;}

/*--- .featuresSec ---*/
.featuresSec .ttl-txt{font-size: 120%;}
.featuresSec .contentsBox{width: 90vw; padding: 0 0.8em;}
.featuresSec .contentsBox .pointBox{padding: 2em 1em;}
.featuresSec .contentsBox .pointBox .pointImg{min-width:1em;margin-top: -21.7em;z-index: 0; display: none;}
.featuresSec .contentsBox .pointBox .txtBox{z-index: 1;}

.featuresSec .nextbox{padding: 1em 0.5em;}
.featuresSec .bgb{border: solid 1px #0071bc;box-shadow: 4px 4px 0px rgb(0,113,188);padding: 0.7em 0.3em;}
.featuresSec .nextbox .leftimg{width: 40%;margin: 0 auto;}
.featuresSec .nextbox ul{align-items: center;}
.featuresSec .nextbox .rightimg{width: 100%;}

.featuresSec .nextbox li{padding: 0px 0em;}
.featuresSec .pointBtn {width: 95%;}
.featuresSec .nextbox p{font-size: 124%;}
.featuresSec .pointBtn a{position: relative;}
.featuresSec .pointBtn a:after{width: 6px;height: 6px;top: 33%; right: -10%;}
.featuresSec .contentsBox .pointBox .txtBox p{font-size:135%;}

/*improveSec*/
#improveSec .titleBox p{font-size:11px;}
#improveSec .tabBoxListItem{width: 33%;padding: 1em 0.5em;border-radius: 5px;line-height: 1.3em;}
#improveSec .tabBoxListItem .txtSub{font-size:65%; }
#improveSec .tabBoxListItem .txtMain{font-size: 115%;}
#improveSec .tabBoxListItem.currentItem::after{top: 90%;border: 18px solid;margin: 0 35.5%;}
#improveSec .tabBoxListItem.firstBox::after{border-color: #f14b94 transparent transparent transparent;}
#improveSec .tabBoxListItem.mediumBox::after{border-color: #73a507 transparent transparent transparent;}
#improveSec .tabBoxListItem.highBox::after{border-color: #2aa0c5 transparent transparent transparent;}
#improveSec .courseContentsBox .listItem {display: none;padding: 1em 1em 0em 1em;}
#improveSec .courseContentsBox .firstBox{border: 5px solid #f14b94;}
#improveSec .courseContentsBox .firstBox{border: 5px solid #f14b94;}
#improveSec .courseContentsBox .mediumBox{border: 5px solid #73a507;}
#improveSec .courseContentsBox .highBox{border: 5px solid #2aa0c5;}
#improveSec .courseContentsBox h3{font-size: 190%!important;line-height: 1.2em;margin-bottom: 0.8em;}
#improveSec .courseContentsBox .tabinner{display: block;margin: 0;}
#improveSec .courseContentsBox .tabinner li{padding: 1em 0.5em 1em 0.5em;width: 100%;border-right: none!important;}

#improveSec .courseContentsBox .firstBox .tabinner li{border-bottom: dashed 2px #f14b94;}
#improveSec .courseContentsBox .mediumBox .tabinner li{border-bottom: dashed 2px #73a507;}
#improveSec .courseContentsBox .highBox .tabinner li{border-bottom: dashed 2px #2aa0c5;}
#improveSec .courseContentsBox .tabinner li:nth-last-child(1){border-bottom: none!important;}
#improveSec .courseContentsBox .tabinner li img{width: 50%;}
#improveSec .courseContentsBox .tabinner li p{text-align: center;}
#improveSec .courseContentsBox .tabinner li .tabtxt{text-align: left;}


#improveSec .courseContentsBox .onepoint{padding: 1em 1em 1.5em;margin: 0 -1em;}
#improveSec .courseContentsBox .onepoint ul{display: block;}
#improveSec .courseContentsBox .onepoint li{text-align: center;}
#improveSec .courseContentsBox .onepoint li img{width: 6%;margin: 0 0 0.7em 0;}
#improveSec .courseContentsBox .onepoint .point_txt .pointtitle{text-align: center;}
#improveSec .courseContentsBox .onepoint .point_txt{width: 100%;text-align: left;}


/*voiceSec*/
#voiceSec .voiceLi .studentDt{width: 100%;}
#voiceSec .voiceLi .voice {width: 100%;padding: 0 1em;height: 8em;border-radius: 20px;position: relative;}
#voiceSec .voiceLi .voice:before {content: ""; width: 0;height: 0;border-style: solid;border-width: 0 0 30px 30px;border-color: transparent transparent #fff transparent; position:absolute; left: 2em; top: -20px; transform: rotate(15deg);}
#voiceSec .voiceLi .txt {font-size: 110%;line-height: 1.3;margin: 0;z-index:1;width: 100%;}
#voiceSec .voiceLi .studentVoice:first-child {margin-bottom: 1em;}
#voiceSec .voiceUl .voiceLi:nth-child(5) {background-color: #d7dbf4;}
#voiceSec .voiceUl .voiceLi:nth-child(6) {background-color: #f4cbda;}
#qualitySec .movieBox .movietxt{font-size: 120%;}

/*--- qualitySec ---*/
#qualitySec .imgLogo {max-width:100px;} 
#qualitySec .titleBox{margin-bottom:3em;}
#qualitySec .titleBox .txtTtl {margin:0 0 0.5em 0;width: 100%;display:flex;justify-content: space-between;align-items: center;}
#qualitySec .titleBox .txtTtl img{width: calc(100% - 2.5em);height: auto;}
#qualitySec .titleBox .txtTtl:before {content: "";display: inline-block;width: 2em;height: 2em;background: url(../../images/img_livestation.png) no-repeat center / cover;}
#qualitySec .titleBox .leftBox{width:24%;display: none;}
#qualitySec .titleBox .rightBox {width: 100%;}
#qualitySec .movieBox{max-width:420px; margin:0 auto;}
#qualitySec .movieBox .leftBox{width: 100%;padding-right: 0;margin-bottom:3em;}
#qualitySec .movieBox .leftBox > p{text-align:center;}
#qualitySec .movieBox .rightBox{width: 100%;padding-left: 0;}
#qualitySec .movieInBox{margin:0 auto 1em;max-width:635px;position: relative;padding-bottom: 56.25%;height: 0;}
#qualitySec .movieInBox iframe{margin:0 auto;position: absolute;top: 0;left: 0;width: 100%;height: 100%;max-width:none;max-height:none;}
#qualitySec .movieBox dt{text-align:center;margin-bottom: 1em;font-size: 113%;}
#qualitySec .movieBox dt span{display:inline-block; border-bottom:2px solid #fff;}

/*2020年8月3日ここから*/
/*--- nlsTelTop ---*/
#nlsTelTop {width:25px;height: 27px;margin: 0 0.5em 0 0;}
#nlsInstagramTop {width: 25px;}
/*--- promoBtnBox ---*/
#dmy1{width:10px;}
#promoBtnBox{width: 135px;margin: 0 0.5em 0 auto;}
/*2020年8月3日ここまで*/

/*--- nlsTopicsBlogSec ---*/
#nlsTopicsBlogSec {background: none;}
#nlsTopicsBlogSec .nlsTopicsBlogUl .nlsTopicsBlogLi{width: 100%;max-width: 350px;margin: 0 auto 1em auto;padding: 1.25em;}
#nlsTopicsBlogSec .btn{margin: 0.8em auto 0;}


/*--- ryoukinSec ---*/
#ryoukinSec{}
#ryoukinSec .sectionInner{padding-bottom: 2em;}
#ryoukinSec .contentsBox table{}
#ryoukinSec .contentsBox table tr{}
#ryoukinSec .contentsBox table th{padding: 3% 1% 2%;width: 13%;line-height: 1.3;font-weight: 500;}
#ryoukinSec .contentsBox table td{padding: 3% 1%;width: 30%;/*border-left: 5px solid #fff;*/}
#ryoukinSec .contentsBox table td:before {content: none;}
#ryoukinSec .contentsBox .bgColorBk{}
#ryoukinSec .contentsBox .bgColorGr{}
#ryoukinSec .contentsBox .bgColorPk{}
#ryoukinSec .contentsBox .bgColorLsl{}
#ryoukinSec .contentsBox .bgColorSl{}
#ryoukinSec .contentsBox .bgColorLgl{}
#ryoukinSec .contentsBox .bgColorGl{}
#ryoukinSec .contentsBox .fee01{}
#ryoukinSec .contentsBox .fee02{font-size: 100%;padding: 3% 1% 2%;}
#ryoukinSec .contentsBox .fee02.bgColorPk{border: 2px solid #e61e79;border-bottom: 2px solid #e61e79;border-right: none;}
#ryoukinSec .contentsBox .tax{font-size: 60%;display: block;}
#ryoukinSec .contentsBox .txtColorPk{line-height: 1.2;}
#ryoukinSec .contentsBox .fontFee{font-size: 160%;}
#ryoukinSec .contentsBox .borderPk{border-top:2px solid #E61E79;border-left:none;border-right:none;border-bottom:2px solid #E61E79;padding-right: 1%;}
#ryoukinSec .contentsBox .borderPk2{border-top: 2px solid #E61E79;border-left: 1px solid #fff;border-right: 2px solid #E61E79;border-bottom: 2px solid #E61E79;padding-right: 1%;}


/*2020年8月20日レベルの目安ここから*/
#ryoukinSec .levelBox{margin: 1em auto;}
#ryoukinSec .levelBox .contentsBox{margin-bottom: 8%; padding: 0.8em 1em 0.5em;}
#ryoukinSec .levelBox .contentsBox th{padding: 0 1.2em;}
#ryoukinSec .levelBox .contentsBox td{/*font-size: 100%;*/}
#ryoukinSec .levelBox h3{max-width: 170px;width: 100%;margin: 1.3em auto 2em;}
/*2020年8月20日レベルの目安ここまで*/


/*--- procedureSec ---*/
#procedureSec{}
#procedureSec .sectionInner{padding-bottom: 3em;}
#procedureSec .sectionInner h2 span{}
#procedureSec .sectionInner h2 span:before,
#procedureSec .sectionInner h2 span:after{}
#procedureSec .stepBox{max-width:100%;}
#procedureSec .stepBox p{font-size: 130%;line-height: 1.4;}
#procedureSec .stepBox ul{width:100%;}
#procedureSec .stepBox li{font-size:120%;padding: 0em 1em 0em 0.5em;align-items: center;display: inline-flex;justify-content: start;text-align: left;line-height: 1.2;}
#procedureSec .stepBox li .txtSizeS{font-size: 100%;}
#procedureSec .stepBox li .procedureIcon{position: inherit;width: 30%;margin-right: 1em;}
#procedureSec .stepBox li .procedureIcon img{width: 100%;}
#procedureSec .stepBox li:last-child{padding:1em 1em 1em 0.5em;}
#procedureSec .stepBox li:last-child .procedureIcon{top: 10%;}
#procedureSec .stepBox .arrowBox{display: block;text-align: center;}

#procedureSec .btnBox{background: url(../../images/kanibari/2109/bg_btn01.png) no-repeat center;padding: 0 15%;}
#procedureSec .btnBox .btnBoxInner{}
#procedureSec .btnBox .btnBoxInner .txtBox{margin: 0 auto 0.7em;width: 100%;padding: 0.4em 0 0.3em;font-size: 180%;}
#procedureSec .btnBox .btnBoxInner .txtBox a{}
#procedureSec .btnBox .btnBoxInner .studentBox{font-size: 110%;line-height: 2.2;}
#procedureSec .btnBox .btnBoxInner .studentBox a{margin-left: 0em;padding: 0.4em 2.5em 0.3em 2em;font-size: 120%;}
#procedureSec .btnBox .btnBoxInner .studentBox a:after{}
/*初めてガイドボタン*/
#procedureSec .lessonguide{width:85%;border-radius: 50vw;}
#procedureSec .lessonguide p{font-size: 120%;}


/*--- cmMovieSec ---*/
#cmMovieSec{background-size: 260%;}
#cmMovieSec *{}
#cmMovieSec .sectionInner{max-width: calc(880px + 4em);padding-top:4em;padding-bottom: 10em;}
#cmMovieSec .imgLogo {max-width:182px;} 
#cmMovieSec .titleBox{margin-bottom:3em;}
#cmMovieSec .titleBox .txtTtl {margin:0 0 0.5em 0;width: 100%;display:flex;justify-content: space-between;align-items: center;}
#cmMovieSec .titleBox .txtTtl img{width: calc(100% - 2.5em);height: auto;}
#cmMovieSec .titleBox .txtTtl:before{content:"";display:inline-block;width: 2em;height: 2em;background:url(../../images/img_livestation_cm.png) no-repeat center / cover;}
#cmMovieSec .titleBox .leftBox{width:24%;display: none;}
#cmMovieSec .titleBox .rightBox {width: 100%;margin: 0 auto;}
#cmMovieSec .movieBox{max-width:420px; margin:0 auto;}
#cmMovieSec .movieBox .leftBox{width: 100%;padding-right: 0; margin-bottom:3em;}
#cmMovieSec .movieBox .rightBox{width: 100%;padding-left: 0;}
#cmMovieSec .movieInBox{margin:0 auto 1em;max-width:635px;position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;}
#cmMovieSec .movieInBox iframe{margin:0 auto;position: absolute;top: 0;left: 0;width: 100%;height: 100%;max-width:none;max-height:none;}
#cmMovieSec .movieBox dt{text-align:center;margin-bottom: 1em;font-size: 113%;}
#cmMovieSec .movieBox dt span{display:inline-block; border-bottom:2px solid #fff;}

/*210611変更点ここから*/
#cmMovieSec .movieBox .noticeText{font-size:0.9em;}
/*210611変更点ここまで*/



/*--- sidemenu ---*/
#sideBox #sidr_top{width: 100%;}
#sideBox #sidr_bottom{width: 100%;}


/*----- IE11 にのみ適用 -----*/
@media all and (-ms-high-contrast: none) {
    /*--- mainView ---*/
    *::-ms-backdrop, #mainView .slick-initialized .slick-slide {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    *::-ms-backdrop, #mainView .slick-initialized .slick-slide img {
        opacity: 0;
    }
}