@charset "utf-8";
/* CSS Document */
/*----------------------------------------------------------------------------
***                                                                    body
----------------------------------------------------------------------------*/
body{ margin:0; padding:0; }
body.boxSize{box-sizing:border-box;}
body.boxSize *{box-sizing:border-box;}
a{cursor:pointer;}
body h1,h2,p{letter-spacing: 0.02em;}
.pcNone{display:none;}
/*----------------------------------------------------------------------------
***                                                                headerArea
----------------------------------------------------------------------------*/
#headerArea{border-top: 2.5em solid #000;position: sticky;width: 100%;z-index: 99;top: 0;left: 0;background-color: #FFF;}
#headerArea #headerAreaInner {width: 100%;position: relative;padding: 0.8em 4.5em 0.8em 0;z-index: 1;}
#catchcopy .txt{margin:0;padding: 0.5em 0;background:#000;color:#fff;font-weight: bold;}
#headerArea .navMenuBtnBox {display:none;}
#headerArea .logoBox h1 span{ margin:0 0 0 1em; font-size:0.625rem; vertical-align:sub;}
#headerArea .logoBox h1 span a{ color:#333;}
#headerArea .logoBox .ttlTxt {font-size: 11px;color: #fff;font-weight: normal;position: absolute;top: -2.4em;line-height: 1.6;margin: 0;padding: 0;}
#headerArea .logoBox .ttlSub {position: absolute;top: -2.4em;right: 6em;color: #ccc;font-size: 11px;text-align: right;width: 400px;line-height: 1.6;margin: 0;padding: 0;}
#headerArea h1 img{vertical-align: top;} 

#headerArea .officialT{color: #666;vertical-align: text-top;font-weight: bold;}
#headerArea .officialF{color: #666;vertical-align: middle;}


/*----------------------------------------------------------------------------
***                                                    　         gnav
----------------------------------------------------------------------------*/
#gnav{font-size: 105%;margin-top: 0.5em;}
#gnav a{color:#000;line-height: 1;padding: 0 0.3em 0 0.3em;width: 100%;font-weight:bold;display: inline-block;text-align: center;}
#gnav .gnavBox > ul > li{padding:0.3em 0.5em 0;/*border-right: 1px solid #000;*/}
#gnav .gnavBox > ul > li:last-child{border-right:none;}
#gnav .gnavBox .gnaviTaiken{background: #fff000;border-radius: 50px;padding: 0.3em 2.0em;margin: 0 0 0 0.5em;}
#gnav .gnavBox .gnaviNyukai{background: #F7931E;border-radius: 50px;padding: 0.3em 1.0em;margin: 0 1.0em 0 0.5em;}
#gnav .loginBox{position:absolute;right:0;top: -3em;margin: 0;}
#gnav .loginBox a{display:block;background:#00b2bc;padding: 2em 0.5em 1em 0.5em;}

#gnav .pullDownList{position:relative;}
#gnav .gnavInBox{position:absolute;top: calc(100% + 0px);left:-55px;width: 210%;/* visibility:hidden; */box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.6);z-index: 1;}
#gnav .gnavInBox ul{background: rgba(255,255,255,1);border: 1px solid #ccc;border-top: none;}
#gnav .gnavInBox ul li{padding: 0 0.3em;}
#gnav .gnavInBox ul li:not(:last-of-type){border-bottom:1px solid #ccc;}
#gnav .gnavInBox ul li a{border:none;padding: 0.5em 0em;white-space: nowrap;}
.ConversationPage #gnav .navCurriculum    .navListLink{color:#00b2bc;}
.kidsPage         #gnav .navCurriculum    .navListLink{color:#00b2bc;}
.CallanPage       #gnav .navCurriculum    .navListLink{color:#00b2bc;}
.ConversationPage #gnav .navConversation  .navPullDownListLink{color:#00b2bc;}
.kidsPage         #gnav .navKids          .navPullDownListLink{color:#00b2bc;}
.CallanPage       #gnav .navCallan        .navPullDownListLink{color:#00b2bc;}
.ConnectPage      #gnav .navConnect       .navListLink{color:#00b2bc;}
.PricePage        #gnav .navPrice         .navListLink{color:#00b2bc;}
.faqPage          #gnav .navQA            .navListLink{color:#00b2bc;}


/*----------------------------------------------------------------------------
***                                                            breadcrumbTrailBox
----------------------------------------------------------------------------*/
.breadcrumbTrailBox{max-width:1200px;margin:0 auto 0;padding:0.3em 0;overflow: auto;font-size: 93%;}
.breadcrumbTrailBox a{color:#000000;white-space: nowrap;}
.breadcrumbTrailBox .listBox{padding:0 1em; width:fit-content;}
.breadcrumbTrailBox .listBox .listItem{margin:0;white-space: nowrap;width: auto;}
.breadcrumbTrailBox .listBox .listItem:after{content:">";margin: 0 0.5em;}
.breadcrumbTrailBox .listBox .listItem:last-child:after{display:none;}

/*----------------------------------------------------------------------------
***                                                              mainsection
----------------------------------------------------------------------------*/
#mainArea{min-width: 1200px;}
.mainSection > .mainSectionInner{margin: 0 auto;padding: 0px 0 0px;overflow: hidden;}
.secBox > .sectionInner{max-width: 1200px;margin:0 auto;padding: 80px 0 55px;}
.secBox > .sectionInner .contentsBox{max-width: 960px;margin: 0 auto;}
.secBox .inSec{width:auto;margin:0 auto;}
.commonW{width:1200px; margin:0 auto;}
.ttlBox{/*font-size:34px; margin-bottom:30px;*/}
.ttlBox .ttl-h2{/*font-size:34px; margin-bottom:30px;*/}
.ttlBox .ttl-h3 .txtMain{background:#fff;padding:0 0.5em;display: inline-block;}
.ttlBox .ttl-h3{font-size: 280%;color:#00b2bc;line-height:1.3em;position:relative;margin:0 0 1em;font-feature-settings: normal;}
.ttlBox .ttl-h3 .txtSub{display:block;font-size: 42%;color:#3d3a39;margin-bottom:0.5em;position:relative;z-index:1;}
.ttlBox .ttl-h3:before{content:""; display:block; width:100%; height:4px; background:#00b2bc; position:absolute; bottom:0.5em; left:0; right:0; z-index:-1;}
.secBox .ttl-h4{font-feature-settings: normal;}
.secBox .ttl-h5{font-feature-settings: normal;}

.secBox .contentsBox .txtBox{margin-bottom:2em;}

.txtAttention01{color:#00b2bc;}

.formBox{margin: 3em 0 0 0;}
.formBox .formBtn{color:#000;line-height:1;padding: 0.3em 2em 0.5em;text-align:center;font-size: 145%;font-weight:bold;display: inline-block;width: 90%;max-width: 550px;user-select: none;-webkit-user-select:none;}
.formBox .formBtn2{color:#FFFFFF;line-height:1;padding: 0.3em 2em 0.5em;text-align:center;font-size: 145%;font-weight:bold;display: inline-block;width: 90%;max-width: 550px;user-select: none;-webkit-user-select:none;}
.formBox.smallBtn .formBtn{background:#fff000; border-radius:50px;}

.formBox.normalBtn01 .formBtn{font-size: 195%;padding: 0.5em 0em 0.5em;border-radius:50px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fff001+0,fff001+50,efe200+50,efe200+100 */max-width: 550px;background: rgb(255,240,1); /* Old browsers */background: -moz-linear-gradient(top,  rgba(255,240,1,1) 0%, rgba(255,240,1,1) 50%, rgba(239,226,0,1) 50%, rgba(239,226,0,1) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(top,  rgba(255,240,1,1) 0%,rgba(255,240,1,1) 50%,rgba(239,226,0,1) 50%,rgba(239,226,0,1) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom,  rgba(255,240,1,1) 0%,rgba(255,240,1,1) 50%,rgba(239,226,0,1) 50%,rgba(239,226,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff001', endColorstr='#efe200',GradientType=0 ); /* IE6-9 */}
.formBox.normalBtn02 .formBtn{font-size: 195%; color:#fff;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4dc9d1+0,4dc9d1+50,49bcc3+50,49bcc3+100 */
background: rgb(77,201,209); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(77,201,209,1) 0%, rgba(77,201,209,1) 50%, rgba(73,188,195,1) 50%, rgba(73,188,195,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(77,201,209,1) 0%,rgba(77,201,209,1) 50%,rgba(73,188,195,1) 50%,rgba(73,188,195,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(77,201,209,1) 0%,rgba(77,201,209,1) 50%,rgba(73,188,195,1) 50%,rgba(73,188,195,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dc9d1', endColorstr='#49bcc3',GradientType=0 ); /* IE6-9 */
}
.formBox.normalBtn02 .txtGentei{color:#00b2bc;font-weight:bold;font-size: 145%;}
.formBox.normalBtn03{margin-top:2.5em;}
.formBox.normalBtn03 .formBtn{font-size: 195%;color:#fff;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e7227e+0,e7227e+50,da2074+50,da2074+100 */max-width: 422px;color: #fff;display: inline-flex;align-items: center;justify-content: center;background: rgb(231,34,126); /* Old browsers */background: -moz-linear-gradient(top,  rgba(231,34,126,1) 0%, rgba(231,34,126,1) 50%, rgba(218,32,116,1) 50%, rgba(218,32,116,1) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(top,  rgba(231,34,126,1) 0%,rgba(231,34,126,1) 50%,rgba(218,32,116,1) 50%,rgba(218,32,116,1) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom,  rgba(231,34,126,1) 0%,rgba(231,34,126,1) 50%,rgba(218,32,116,1) 50%,rgba(218,32,116,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7227e', endColorstr='#da2074',GradientType=0 ); /* IE6-9 */}
.formBox.normalBtn03 .txtGentei{color:#3d3a39;font-weight:bold;font-size: 145%;}
.formBox.normalBtn03 .formBtn:after{content:"";display:inline-block;width: 1em;height: 1em;margin: 0.095em 0 0 0.3em;background: url(https://www.nova.co.jp/ochanoma/images_shin/common/ico_contents02.png) no-repeat center/cover;}
.formBox.bigBtn02 .formBtn{font-size: 230%;color:#fff;display:inline-flex;align-items: center;justify-content: center;max-width: 465px;padding: 0.5em 0em 0.6em;border-radius: 10px;text-shadow: 1.5px 1.5px 1px rgba(0,0,0,0.4);
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00b2bc+0,00b2bc+50,00a7af+50,00a7af+100 */background: rgb(0,178,188); /* Old browsers */background: -moz-linear-gradient(top,  rgba(0,178,188,1) 0%, rgba(0,178,188,1) 50%, rgba(0,167,175,1) 50%, rgba(0,167,175,1) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(top,  rgba(0,178,188,1) 0%,rgba(0,178,188,1) 50%,rgba(0,167,175,1) 50%,rgba(0,167,175,1) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom,  rgba(0,178,188,1) 0%,rgba(0,178,188,1) 50%,rgba(0,167,175,1) 50%,rgba(0,167,175,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b2bc', endColorstr='#00a7af',GradientType=0 ); /* IE6-9 */}
.formBox.bigBtn02 .formBtn:after{content:"";display:inline-block;width: 1em;height: 1em;margin: 0.095em 0 0 0.3em;background: url(https://www.nova.co.jp/ochanoma/images_shin/common/ico_contents02.png) no-repeat center/cover;}
.formBox.small01 .formBtn{width: 35%;max-width: 280px; font-size: 150%;}
.formBox.small02 .formBtn{background:#00b2bc;font-size: 160%;color:#fff;display:inline-flex;align-items: center;}
.formBox.small02 .formBtn:after{content:"";display:inline-block;width: 1em;height: 1em;margin: 0 0 0 0.3em;background: url(https://www.nova.co.jp/ochanoma/images_shin/common/ico_contents02.png) no-repeat center/cover;}

.formBox .txt01{font-size: 132%;font-weight: bold;}
.formBox .txt02{font-size: 117%;font-weight: normal;}

/* 下層 */
.underPage #mainView{max-width: 1200px;margin: 0 auto 0;}
.underPage #mainView .ttl-h2 span{text-align: left;line-height: 1;}
.underPage #mainView .ttlSub{display: block;font-size: 106%;color: #f991c0;margin: 0 0 0.3em;}
.underPage #mainView .ttlMain{display: block;font-size: 285%;margin: 0 0 0.1em -0.1em;}
.underPage #mainView .txtLabeln{display: inline-block;font-size: 72%;color: #fff;background: #f7931e;line-height: 1;padding: 0.4em 1em 0.3em;border-radius: 30px;font-weight: normal;}
.underPage #mainView .txtLabelk{display: inline-block;font-size: 72%;color: #fff;background: #f991c0;line-height: 1;padding: 0.4em 1em 0.3em;border-radius: 30px;font-weight: normal;}
.underPage #mainView .txtLabelc{display: inline-block;font-size: 72%;color: #fff;background: #103770;line-height: 1;padding: 0.4em 1em 0.3em;border-radius: 30px;font-weight: normal;}
.underPage #mainView .mainViewInner{padding: 2.2em 0 2.2em 2.2em;}
.underPage #mainView .bgBox{border:none;}
.underPage #mainView .ttl-h2{padding: 0 0 0 1.5em;text-align: left;}
.underPage #mainView .ttlSubBox{margin:0;}

.underPage .ttlBox .ttl-h3{color:#3d3a39;font-size: 230%;margin-bottom: 0.6em;letter-spacing: -0.02em;}
.underPage .ttlBox .ttl-h3 .txtMain{background:none;}
.underPage .ttlBox .ttl-h3 .txtSub{}
.underPage .ttlBox .ttl-h3:before{display:none;}
.underPage .ttl-h4{font-size: 180%;}
.underPage .ttl-h5{font-size: 145%;}
.underPage .secBox.bgColorSec{background:#ffeaf3;}

/* プレーンなファーストビュー */
.plainFirstView #mainView{background:none;}
.plainFirstView #mainView .ttl-h2 span{text-align: center; color:#00b2bc;}
.plainFirstView #mainView .ttlSub{}
.plainFirstView #mainView .ttlMain{display: inline-block;font-size: 155%;}
.plainFirstView #mainView .txtLabel{}
.plainFirstView #mainView .mainViewInner{text-align:center;padding: 1em 1em 1em 1em;}
.plainFirstView #mainView .bgBox{}
.plainFirstView #mainView .ttl-h2{padding: 0 0 0 0;text-align: center;}
.plainFirstView #mainView .ttlSubBox{}

/* サブタイトル */
.underPage.ConversationPage #mainView .ttlSub{color: #f7931e;}
.underPage.CallanPage #mainView .ttlSub{color: #103770;}
.underPage.CallanjuniorPage #mainView .ttlSub{color: #103770;}
.underPage.PricePage #mainView .ttlSub{color: #432c89;}
.underPage.ConnectPage #mainView .ttlSub{color: #8cc63f;}

/* タイトル下部のラベル */
.underPage.ConversationPage #mainView .txtLabel{color: #f7931e;background: none;padding: 0;display: block;}
.underPage.CallanPage #mainView .txtLabel{color:#103770;background:none;padding: 0;display: block;}
.underPage.CallanjuniorPage #mainView .txtLabel{color:#103770;background:none;padding: 0;display: block;}
.underPage.PricePage #mainView .txtLabel{color:#432c89;background:none;padding: 0;display: block;}
.underPage.ConnectPage #mainView .txtLabel{color:#333333;background:none;padding: 0;display: block;margin: 0.8em 0 0 0;}

/* セクションのカラー */
.underPage.ConversationPage .secBox.bgColorSec{background:#e6f4f4;}
.underPage.CallanPage .secBox.bgColorSec{background:#e7ecf2;}
.underPage.CallanjuniorPage .secBox.bgColorSec{background:#FFF6EB;}
.underPage.PricePage .secBox.bgColorSec{background:#ffffff;}
.underPage.ConnectPage .secBox.bgColorSec{background:#E5F7F7;}




/* コンテンツ */

/* 流れ */
.lessonNagareBox .lessonNagareList{padding-top:1em;}
.lessonNagareBox .lessonNagareList li{text-align: center;padding: 0 1em;border-left:1px solid #4d4d4d;position: relative;}
.lessonNagareBox .lessonNagareList li:after{content: "";display:block;width: 0.8em;height: 0.8em;position:absolute;left: -9%;top: 45%;border-top: 2px solid #00b2bc;border-right: 2px solid #00b2bc;/*background: #fff;*/transform: rotate(45deg);/*box-shadow: 0px 0px 0px 9px rgba(255,255,255,1);*/}
.lessonNagareBox .lessonNagareList li:first-child{border-left:none;}
.lessonNagareBox .lessonNagareList li:first-child:after{display:none;}
.lessonNagareBox .txtAttention{margin:1.5em 0 0;}

/* 動画16：9 */
.movieBox{max-width:810px; margin:0 auto 1em;}
.movieBox .movieInBox{position:relative; padding-bottom:56.25%; height:0;overflow: hidden;}
.movieBox .movieInBox iframe{margin:0 auto;position: absolute;top: 0;left: 0;width: 100%;height: 100%;max-width:none;max-height:none;}


/*----------------------------------------------------------------------------
***                                                                  PageTop
----------------------------------------------------------------------------*/
.pagetop{ text-align: right; margin-top: 5px; margin-bottom: 10px; clear: both; }


/*----------------------------------------------------------------------------
***                                                             footer
----------------------------------------------------------------------------*/
/*--------------------------------------------------------オンラインだから、毎日気軽にレッスンできる！-------------------------------------------------------*/
.formBox.normalBtn01 .formBtn2{font-size: 195%;padding: 0.5em 0em 0.5em;border-radius:50px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fff001+0,fff001+50,efe200+50,efe200+100 */max-width: 550px;background: rgb(247,128,30); /* Old browsers */background: -moz-linear-gradient(top,  rgba(247,128,30,1) 0%, rgba(247,128,30,1) 50%, rgba(232,120,28,1) 50%, rgba(232,120,28,1) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(top,  rgba(247,128,30,1) 0%,rgba(247,128,30,1) 50%,rgba(232,120,28,1) 50%,rgba(232,120,28,1) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom,  rgba(247,128,30,1) 0%,rgba(247,128,30,1) 50%,rgba(232,120,28,1) 50%,rgba(232,120,28,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff001', endColorstr='#efe200',GradientType=0 ); /* IE6-9 */}
.formBox.normalBtn01 .formBtn01{
	color:#fff;
	font-size:1.5rem;
	border-radius:50px;
	padding: 0.5em 0em 0.6em;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fff001+0,fff001+50,efe200+50,efe200+100 */
	max-width: 420px;
	background: rgb(247,128,30);
	/* Old browsers */
	background: -moz-linear-gradient(top,  rgba(247,128,30,1) 0%, rgba(247,128,30,1) 50%, rgba(232,120,28,1) 50%, rgba(232,120,28,1) 100%);
	/* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(247,128,30,1) 0%, rgba(247,128,30,1) 50%, rgba(232,120,28,1) 50%, rgba(232,120,28,1) 100%);
/* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(247,128,30,1) 0%, rgba(247,128,30,1) 50%, rgba(232,120,28,1) 50%, rgba(232,120,28,1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff001', endColorstr='#efe200',GradientType=0 );
	/* IE6-9 */
}
/*--------------------------------------------------------ここまでオンラインだから、毎日気軽にレッスンできる！-------------------------------------------------------*/

/*----- 【ページトップへスライド】 -----*/
#totp{
	display:none;
    width:3.5em;
    height:3.5em;
    z-index: 9;
    position:fixed;
    right:85px;
    bottom: 25px;
}
#totp a {display:block; width:100%; height:100%;}
#totp a img{display:block; width:100%; height:auto;}

/*----- 【フッター】 -----*/
#footerSec *{color:#fff;}
#footerSec .footerInenr{max-width:none;padding: 0;border-bottom: 3px solid #ff0;}
#footerAreaTxt{background:#666;padding: 2em 0;}
#footerAreaTxt dl{max-width:900px; margin:0 auto;}
#footerAreaTxt dt{font-size: 295%;font-weight: normal;line-height: 1;vertical-align: bottom;padding: 0.3em 0 0 0;color: #fff;}
#footerAreaTxt dt span{font-size: 60%;}
#footerCopyright{background:#00b2bc;border-bottom: 3px solid #ff0;}
#footerCopyright *{color:#fff;}
#footerCopyright .copyrightBoxInenr{max-width: 960px;margin:0 auto;}
#footerCopyright p{margin:0; padding:0.5em 0;}

/*モーダルウインドウのオーバーレイ*/
#modal-overlay {z-index: 99999;display:none;position:fixed;top:0;left:0;width:100%;height:120%;background-color: rgba( 0,0,0, 0.4 );}

/*----------------------------------------------------------------------------
***                                                                  sideBox
----------------------------------------------------------------------------*/
/*----- 【汎用型】 -----*/
#sideBox{display:none;}