@charset "utf-8"; 

/* CSS Document */
/*----------------------------------------------------------------------------
***                                                             headerArea
----------------------------------------------------------------------------*/
#headerArea{position:absolute; width:100%; z-index:999999;}
#headerArea #headerAreaInner{position:relative; padding:15px 0 15px;}
#headerArea .ttl{padding:8px 0 0;}
#headerArea .ttl img{}
#headerArea .logoBox .ttlTxt{
    font-size: 11px;
    color: #fff;
    font-weight: normal;
    position: absolute;
    top: 5px;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}
#headerArea .logoBox .ttlSub{
    position: absolute;
    top: 5px;
    right: 0;
    color: #fff;
    font-size: 11px;
    text-align: right;
    width: 400px;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}


#headerArea #menuBtnBox{width:30px; height:20px; cursor:pointer; margin:0 1em 0 0;}
#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:#000; 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);}
#headerArea #menuBtnBox .menuBtn.open:before{top:calc(50% - 1px); opacity:0;}
#headerArea #menuBtnBox .menuBtn.open:after{bottom:calc(50% - 1px); transform:rotate(45deg);}

#breadcrumbArea{max-width: 980px;padding: 0px 1em;margin: 1em auto 3em;position: absolute;top: 1em;}
#breadcrumbArea li{float:left;font-size:10px;color: #fff;}
#breadcrumbArea li a{display:block;/* padding-right: 20px; */color: #fff;}
#breadcrumbArea li:before{content: ">";display: inline-block;margin: 0 0.5em;}
#breadcrumbArea li:first-child:before{display: none;}
/*#breadcrumbArea li a{display:block;background: url(https://www.nova.co.jp/common_images/icon_list03.gif) right 50% no-repeat;padding-right: 20px; color: #fff;}*/


/*----------------------------------------------------------------------------
***                                                              mainsection
----------------------------------------------------------------------------*/
#wrap{/* overflow:hidden; */min-width:1060px;}
.mainSection{}
.mainSection a{cursor:pointer;}
.mainSection .bgWhite{background:#fff;}
.zindex1{z-index:1;}
.zIndex2{z-index:2;}
.zIndex3{z-index:3;}
.zIndex4{z-index:4;}
.zIndex5{z-index:5;}

/*-----【共通】-----*/
/*個別にコンテンツの横幅を指定する*/
.secBoxWidth{width:960px; margin:0 auto;}

/*無料体験レッスン 無料資料請求のボタン*/
.formLinkBox .formBtn{display:block; border:2px solid #fff; line-height:1; padding:19px 0 18px; width:290px; font-size:24px; font-weight:bold; color:#fff; text-align:center; background:#fff; position:relative;}
.formLinkBox .formBtn:before{content:"＞"; display:block; width:auto; height:auto; font-size:30px; position:absolute; top:50%; right:0.5em; transform:translate(0,-50%);}
.formLinkBox .formBtn.trial{background:#fbb03b; margin-right:10px;}
.formLinkBox .formBtn.request{background:#00a4c9; margin-left:10px;}
.formLinkBox .formBtn.tel{width:600px; padding:11px 0; background:none;}
.formLinkBox .formBtn.tel:before{display:none;}
.formLinkBox.border{background:#fff; border-bottom:1px solid #dadada; position:relative; z-index:5;}
.formLinkBox.border .wideBox{margin-bottom:-32px; min-width:960px;}

/*今すぐ無料体験スタート*/
.StartNowBox{display:block; width:480px; margin:70px auto -35px; border:2px solid #fff; position:relative; z-index:10;}
.StartNowBox p{text-align:center;}
.StartNowBox a{display:block; position:relative; color:#00a1c9; font-size:23px; font-weight:bold; line-height:1; padding:22px 0;}
.StartNowBox a:after{content:""; display:block; width:30px; height:34px; background:url(https://www.nova.co.jp/campaign/images/ico_arrow_White.png) no-repeat center right/100% auto; position:absolute; top:50%; right:10px; transform:translate(0,-50%);}
.StartNowBox.styleType01 a{background:#fff000;}
.StartNowBox.styleType02{margin-top:20px;}
.StartNowBox.styleType02 a{color:#fff000;  background:rgba(0,0,0,0.6);}
/*.StartNowBox.styleType02 a:after{background:url(https://www.nova.co.jp/campaign/images/ico_arrow_Blue.png) no-repeat center right/100% auto;}
*/
/*詳細ページへのリンク*/
.linkBox{display:block; width:218px; margin:1em auto 0;}
.linkBox p{text-align:center;}
.linkBox a{cursor:pointer; display:block; color:#00a1c9; font-size:15px; line-height:1; padding:10px 0; border:1px solid #ccc;}

.formLinkBox ul li{margin:0 1%;}

/*セクションのバックグラデーション*/
.bg_gradation_gray{ background:rgb(255,255,255); /* Old browsers */ background:-moz-linear-gradient(top,rgba(255,255,255,1) 85%,rgba(242,242,242,1) 100%); /* FF3.6-15 */ background:linear-gradient(to bottom,rgba(255,255,255,1) 85%,rgba(242,242,242,1) 100%); /* W3C,IE10+,FF16+,Chrome26+,Opera12+,Safari7+*/ filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */;}
.bg_shadow_gray{box-shadow:0px -100px 100px 0px rgba(160,160,160,0.1);}

/*----- ファーストビュー -----*/
#firstViewSec{overflow:hidden;position:relative;padding: 4em 0 2em;background:url(https://www.nova.co.jp/campaign/images/202101/img_main04.jpg) no-repeat center top;}
#firstViewSec:after{content:""; display:block; width:140%; height:5em; margin:0 0 0% -20%; border-radius:0% 0% 100% 100%; box-shadow:0px 100px 0px 100px rgba(255,255,255,1); position:absolute; bottom:315px; box-sizing:border-box; transform:scale(1,6);}
#firstViewSec .sectionInner{width:980px;margin: 0 auto;position:relative;z-index:1;padding-top: 2em;padding-bottom:3em;}
#firstViewSec #btnCM{position:absolute; top:320px; right:-30px;}
#firstViewSec .titleBox{width:630px; margin:0 auto 2em; padding:0 0 0 0em;}
#firstViewSec .ttl{position:relative;}
#firstViewSec .ttl span{display:block;}
#firstViewSec .ttl .logo{margin:-0.7em 0 -1.3em;}
#firstViewSec .bottom{padding:0% 0%; position:relative; z-index:1;}
#firstViewSec .bottom ul li{margin:0 1%;}
#firstViewSec .bottom .icoUsagi{margin:-20px 0 0 -50px; display:inline-block;}

/*----- NOVAで英会話をはじめる -----*/
#secTtlReason{/* overflow:hidden; */padding:3em 0 0 0;}
#secTtlReason .sectionInner .titleBox{position:relative; padding-bottom:3em; background:#fff;}
#secTtlReason .stickyBox:before{content:""; display:block; width:calc(100vw - 17px); min-width:100%; height:40px; position:absolute; left:-12%; left:calc((100vw - 980px - 17px)/-2); top:0; z-index:1; transform:translate(0%,0%); background:#00a4c8; /* Old browsers */background:-moz-linear-gradient(left, #00a4c8 50%,#1a1a1a 50%,#1a1a1a 100%); /* FF3.6-15 */background:-webkit-linear-gradient(left, #00a4c8 50%,#1a1a1a 50%,#1a1a1a 100%); /* Chrome10-25,Safari5.1-6 */background:linear-gradient(to right, #00a4c8 50%,#1a1a1a 50%,#1a1a1a 100%); /* W3C,IE10+,FF16+,Chrome26+,Opera12+,Safari7+*/filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a4c8',endColorstr='#1a1a1a',GradientType=1 ); /* IE6-9 */;}
#secTtlReason .sectionInner{position:relative; padding-top:0em; width:100%; background:#edeef2; box-shadow:0px -90px 30px 0px rgba(255,255,255,1) inset;}
#secTtlReason h3{}
#secTtlReason .box{padding:0em 0 0em;margin: 0 auto 4em;position:relative;width:980px;}
#secTtlReason .box .stickyBox{order:1; display:inline-block; position:-webkit-sticky; position:sticky; margin:-5em 0 0 0; top:0; width:50%; height:1070px; z-index:1;}
#secTtlReason .box .stickyBox img{position:absolute; right:0; top:40px;}
#secTtlReason .box ul{position:relative; z-index:1; margin:0 0 0 auto; order:2; width:49%;}
#secTtlReason .box li{margin-bottom:4em;}
#secTtlReason .box .linkBtn{margin:1em 0 0; font-size:130%; border:1px solid #999; color:#999; display:inline-block; width:11em; line-height:1; padding:0.4em 1em 0.3em; border-radius:50px; text-align:center;}
#secTtlReason .box .linkBtn:hover{color:#fff; background:#999;}
#secTtlReason .box dl dt{margin-bottom:0.8em;}
#secTtlReason .box dl dd{}
#secTtlReason .box dl dd .txt{background-image:linear-gradient( rgba(179,179,179,1) 1px,transparent 1px ); background-image:linear-gradient(rgba(0,0,0,0) calc(1.5em - 1px),rgba(179,179,179,0.6) 1px); background-size:auto 1.5em; background-position:top -3px center; line-height:1.5; margin-bottom:1.5em;}
#secTtlReason .box dl dd .label01{color:#ed1e79;}

/*----- ニーズに合わせた受講スタイル -----*/
#secTtlNeeds >.sectionInner{ width:100%;  padding:3em 0 2em;  background:rgb(255,239,48); background:radial-gradient(circle,rgba(255,239,48,1) 67%,rgba(244,202,28,1) 100%);}
#secTtlNeeds .titleBox{width:980px; margin:0 auto;}
#secTtlNeeds .titleBox .ttl{margin-bottom:1em;}
#secTtlNeeds .item{padding:0 1.5em; outline:0;}
#secTtlNeeds .item .hoverEase{display:block;}
#secTtlNeeds #SlideBox{overflow:hidden; margin-top:2em;}
#secTtlNeeds .slick-dots li button:before{opacity:1; color:#fff;}
#secTtlNeeds .slick-dots li.slick-active button:before{opacity:1; color:#000;}

/*--- 新コース登場！202304 ---*/
#secNewCourse{}
#secNewCourse >.sectionInner{padding: 6.5em 0em 1em;position:relative;overflow:hidden;border-bottom: dashed 2px #b1b1b1;}
#secNewCourse .titleBox{padding: 0 2em;}
#secNewCourse .titleBox .txt02{}
#secNewCourse h4{font-size:243%;font-family : 'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3', 'ＭＳ Ｐ明朝', 'Times', 'Times New Roman', serif;font-weight: 500;}
#secNewCourse h4 .bigTtl{font-size: 135%;}
#secNewCourse h4 .colorP{color:#df1442;font-size: 110%;font-weight: 700;}
#secNewCourse .courseBox{padding:0 2em; margin:0 0 3em;}
#secNewCourse dl{text-align:center;}
#secNewCourse dt{font-size:18px;}
#secNewCourse dt span{color:#ed1e79;}
#secNewCourse dd{width:264px; display:inline-block;}
#secNewCourse p{font-size:15px;}
#secNewCourse p a{color:#333;}
#secNewCourse ul li{}

/*--- はじめるなら！大定番のオールINシリーズ！ ---*/
#secTeiban{}
#secTeiban >.sectionInner{padding:3em 2em 3em; position:relative; overflow:hidden;}
#secTeiban .titleBox{padding:0 2em;}
#secTeiban .titleBox .txt02{}
#secTeiban .courseBox{padding:0 2em; margin:0 0 3em;}
#secTeiban dl{text-align:center;}
#secTeiban dt{font-size:18px;}
#secTeiban dt span{color:#ed1e79;}
#secTeiban dd{width:252px; display:inline-block;}
#secTeiban p{font-size:15px;}
#secTeiban p a{color:#333;}
#secTeiban ul li{}

/*--- NOVA新CM動画、WEBで公開中 ---*/
#secMoveBox{background:#00A4C8;}
#secMoveBox *{color:#000;}
#secMoveBox .sectionInner{padding:3em 4em 3em;}
#secMoveBox .titleBox .txtBox{padding:0 0 0 1.5em;}
#secMoveBox .titleBox .txtBox p{line-height:1.8; font-weight:bold;}
#secMoveBox .ttl{margin:0 0 1em 0;}

#secMoveBox .txtTtl{}
#secMoveBox .txtBox{}
#secMoveBox .moveBox .moveBoxChild{width:48%;}
#secMoveBox .moveBox .move{padding:10px 10px; margin:0 0 5px; background:#000;}
#secMoveBox .moveBox .move iframe{border-left:5px dashed #fff; border-right:5px dashed #fff; padding:3px 10px; display:block; width:100%; height:205px;}

/*----- 続けて良かった。NOVAの感想。 -----*/
#secTtlKansou{background:url(https://www.nova.co.jp/campaign/images/202101/bg_img03.jpg) no-repeat center/cover; padding:3em 0;}
#secTtlKansou >.sectionInner{padding:3em 3em;}
#secTtlKansou .box{background:rgba(255,255,255,0.8); width:450px; padding:2em 2em 1em; margin-bottom:3em;}
#secTtlKansou .box .titleBox{}
#secTtlKansou .box .subTtl{}

/*----- れなの覚えたて英語ひと言フレーズ -----*/
#secTtlInstagram{background:rgba(0,164,200,0.5);}

/*----- やっぱりNOVA -----*/
#secTtlKeizoku{background:url(https://www.nova.co.jp/campaign/images/202101/bg_img04.jpg) no-repeat center/cover; position:relative; padding:40px 0 0;}
#secTtlKeizoku:before{content:""; display:block; width:100%; min-width:100%; height:40px; position:absolute; left:50%; top:0; transform:translate(-50%,0%); background:#00a4c8; /* Old browsers */background:-moz-linear-gradient(left, #00a4c8 50%,#1a1a1a 50%,#1a1a1a 100%); /* FF3.6-15 */background:-webkit-linear-gradient(left, #00a4c8 50%,#1a1a1a 50%,#1a1a1a 100%); /* Chrome10-25,Safari5.1-6 */background:linear-gradient(to right, #00a4c8 50%,#1a1a1a 50%,#1a1a1a 100%); /* W3C,IE10+,FF16+,Chrome26+,Opera12+,Safari7+*/filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a4c8',endColorstr='#1a1a1a',GradientType=1 ); /* IE6-9 */;}
#secTtlKeizoku >.sectionInner{padding:4em 0 9em;}
#secTtlKeizoku .titleBox{margin-bottom:2em;}
#secTtlKeizoku ul li{margin-bottom:0.7em;}

/*----- 今なら新春上達応援キャンペーン -----*/
#secTtlCampaign{background:#ff0; padding:0em 0 0em; box-shadow:0px -15em 15em 0px rgba(0,0,0,0.2) inset;}
#secTtlCampaign >.sectionInner{width:820px; background:#fff; box-shadow:2px 2px 12px 4px rgba(0,0,0,0.5); transform:translate(0px,-5em); padding:3em 2em; position:relative;}

#secTtlCampaign .ttl span{display:inline-block; position:relative; top:-5px; right:-5px;}
#secTtlCampaign .box{width:635px; margin:0 auto;}
#secTtlCampaign .box .ttl{text-align:center; padding:1em 0em 0em 0em;}
#secTtlCampaign .box .txtBox{max-width:560px; margin:0 auto;}
#secTtlCampaign .label01{background:linear-gradient(transparent 60%,#fff000 0%); color:#ed1e79;}
#secTtlCampaign .fs-17{ padding:0px 25px 0px 32px;  font-size:1em;  line-height:initial;}

#secTtlCampaign .campaignItem{}

/*----------------------------------------------------------------------------
***                                                                footerArea
----------------------------------------------------------------------------*/
#footerArea{}
#footerAreaInner{padding:0.5em 0;}