@charset "utf-8";

/* CSS Document */
/*----------------------------------------------------------------------------
***                                                             headerArea
----------------------------------------------------------------------------*/
#headerArea{position: sticky;width:100%;z-index: 99;top: 0;left: 0;}
#headerArea #headerAreaInner{position:relative;padding:1em 2em 1em;max-width:100%;z-index: 2;/* background: rgba(255,255,255,0.2); */}
#headerArea .ttl{padding:8px 0 0;}
#headerArea .logoBox .ttlTxt{font-size:11px;color: #333;font-weight:400;position:absolute;top: 2px;line-height:1.6;margin:0;padding:0;}
#headerArea .logoBox .ttlSub{position:absolute;top: 2px;right:0;color: #333;font-size:11px;text-align:right;width: 440px;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:after,#headerArea #menuBtnBox .menuBtn:before{content:"";display:block;width:30px;height:2px;background:#000;position:absolute;right:0;border-radius:20px;transform-origin:center;transition:all .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:0 1em;margin:1em auto 3em;position:absolute;top:1em;}
#breadcrumbArea li{float:left;font-size:10px;color:#fff;}
#breadcrumbArea li a{display:block;color:#fff;}
#breadcrumbArea li:before{content:">";display:inline-block;margin:0 .5em;}
#breadcrumbArea li:first-child:before{display:none;}

/*----------------------------------------------------------------------------
***                                                              mainsection
----------------------------------------------------------------------------*/
#top{min-width:1060px;}
.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;}
a:hover{text-decoration:none;}

/*-----【共通】-----*/
/*個別にコンテンツの横幅を指定する*/
.secBoxWidth{width:960px;margin:0 auto;}
.secBox .ttl-h2{font-size:100%;}
.secBox .ttl-h2 .txtTop{display:block;text-align:center;font-size:170%;margin: 0 0 1.5em;}
.secBox .ttl-h2 .txtBottom{display:inline-block;text-align:center;font-size:420%;/* padding:.4em 1.5em .4em 1.5em; */;}

/*詳細ページへのリンク*/
.linkBox p{text-align:center;}
.linkBox a{cursor:pointer;color:#00a1c9;font-size: 18px;line-height:1;padding:10px 0;font-weight: 700;}
.linkBox a:after{content:"▶";display:inline-block;font-size:85%;}

/*カラーの上書き*/
.colorBlue{color:#00a1c9!important;}
.colorPink{color:#f94891!important;}
.colorYellow{color:#ff0!important;}

/*フォーム*/
.formBox{background:url(https://www.nova.co.jp/campaign_20th/images/bg_mizutama.png);}
.formBox .raikoubnr{display: block;text-align: center;margin: 0 auto;padding: 0 0 5.0em;}

.formBoxInner{max-width:980px;margin:0 auto;padding:6.5em 0 3.0em;}
.formBoxInner .formItemBox .formBtnBox{display:flex;flex-wrap:wrap;justify-content:space-between;font-size:185%;}
.formBoxInner .formItemBox .formBtnBox>p{padding:0;}
.formBoxInner .formItemBox .btnBig{width:100%;margin:0 0 4%;}
.formBoxInner .formItemBox a{border-radius:5px;text-align:center;display:block;padding:.6em 0 .6em;line-height:1.2;font-weight: 700;}
.formBoxInner .formItemBox .btnBig a{background:#00a1c9;color:#fff;}
.formBoxInner .formItemBox .btnSmall{width:48%;}
.formBoxInner .formItemBox .btnSmall a{background:#fff;color:#00a1c9;border:2px solid #00a1c9;}
.formBoxInner .formItemBox{width:47%;max-width:460px;}
.formBoxInner .formItemBox .ttl-h2{text-align:center;font-size:270%;}
.formBoxInner .formKidsBox .btnBig a{background:#ff7bac;}
.formBoxInner .formKidsBox .btnSmall a{color:#ff7bac;border:2px solid #ff7bac;}



/*----- ファーストビュー -----*/
#firstViewSec{overflow:hidden;position:relative;padding:0 0 0;background:url(https://www.nova.co.jp/campaign_20th/images/bg_city_pc.png) no-repeat center top 2.5em;}
#firstViewSec .sectionInner{width:980px;margin:0 auto;position:relative;z-index:1;padding-top:0em;padding-bottom:0em;}
#firstViewSec #btnCM{position:absolute;top:150px;right:0px;}
#firstViewSec .titleBox{margin:0 auto 5em;padding:0;}
#firstViewSec .ttl{position:relative;}
#firstViewSec .ttl span{display:block;}
#firstViewSec .ttl .logo{margin:0 0 0;}
#firstViewSec .textDescription{margin:2em 0 0;}
#firstViewSec .textDescription .img{display:block;margin:0 0 2em;line-height:1.4;}
#firstViewSec .textDescription .text{display:block;font-size:270%;line-height:1.4;font-weight: bold;}

/*----- TV-CM -----*/
#movieSec{overflow:hidden;}
#movieSec .sectionInner{max-width:100%;padding-top: 0;padding-bottom:0;}
#movieSec .movieImg{margin:0;padding:0;}
#cmHoueiSec{background:#fafbfc;}
#cmHoueiSec .ttl-h2{font-size:100%;text-align:center;}
#cmHoueiSec .ttl-h2 .ttl-top{color:#00a1c9;display:block;text-align:center;font-size:170%;margin:0 0 .5em;}
#cmHoueiSec .ttl-h2 .ttl-bottom{color:#fff;background:#00a1c9;display:inline-block;text-align:center;font-size:260%;padding:.4em 1.5em .4em 1.5em;border-radius:5em;}
#cmHoueiSec .cmBox .cmBoxStyle span{font-size:220%;margin:0 0 .5em;display:block;font-weight:700;}
#cmHoueiSec .cmBox .cmBoxStyle a{display:block;}
#cmHoueiSec .cmBox .cmBoxStyle{max-width:456px;}
#cmHoueiSec .cmBox .cmBoxStyle .text{text-align:center;padding:0;}

#cmHoueiSec .usagiTokusetsu{margin: 3.0em auto 0;text-align: center;}

#movieSec .movieImg{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:157px;overflow:hidden;}
#movieSec .movieImg img{width:auto;height:100%;}
#movieSec .movieImg img:first-child{-webkit-animation:slide1 60s -30s linear infinite;animation:slide1 60s -30s linear infinite;}
#movieSec .movieImg img:last-child{-webkit-animation:slide2 60s linear infinite;animation:slide2 60s linear infinite;}
@keyframes slide1 {
  0% {
    transform:translateX(100%);
  }
  to {
    transform:translateX(-100%);
  }
}
 
@keyframes slide2 {
  0% {
    transform:translateX(0);
  }
  to {
    transform:translateX(-200%);
  }
}


/*----- NOVAの基本 -----*/
#nvoaKihonSec{overflow:hidden;}
#nvoaKihonSec .contentsBoxInner .novaKihonStyle{margin:0 0 -6em 0;position:relative;}
#nvoaKihonSec .contentsBoxInner .novaKihonStyle:last-child{margin-bottom:0;}
#nvoaKihonSec .contentsBoxInner .novaKihonStyle.bgStyleDiagonal01:before{content:"";display:block;width:120vw;height:35em;position:absolute;top:2em;left:calc(50% - 60vw);background: #d8f4f7;transform:rotate(-5deg);z-index:-1;}
#nvoaKihonSec .contentsBoxInner .novaKihonStyle.bgStyleDiagonal02:before{content:"";display:block;width:120vw;height:35em;position:absolute;top:2em;left:calc(50% - 60vw);background: #ffedef;transform:rotate(5deg);z-index:-1;}
#nvoaKihonSec .contentsBoxInner .novaKihonStyle.bgStyleDiagonalTop:before{top:2em;}
#nvoaKihonSec .contentsBoxInner .novaKihonStyle.bgStyleDiagonalBottom:before{top:initial;bottom:-26em;}
#nvoaKihonSec .contentsBoxInner .novaKihonStyle.textRight{flex-direction:row-reverse;}
#nvoaKihonSec .contentsBoxInner .novaKihonStyle .txtBox{max-width:450px;}
#nvoaKihonSec .contentsBoxInner .novaKihonStyle .ttl-h3{font-size:295%;}
#nvoaKihonSec .contentsBoxInner .novaKihonStyle .txt{font-size:135%;}
#nvoaKihonSec .contentsBoxInner .novaKihonStyle .fontB{display:block;}
#nvoaKihonSec .contentsBoxInner .novaKihonStyle .txt + .linkBox{margin-top:1.5em;}

/*----- NOVAフル活用術 -----*/
#novaKatsuyoSec{background:#01b8cc;}
#novaKatsuyoSec .ttl-h2{color: #fff;}
#novaKatsuyoSec .ttl-h2 .txtTop{;}
#novaKatsuyoSec .ttl-h2 .txtBottom{;}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle{width:47%;max-width:455px;min-height: 455px;background:#fff;border-radius:20px;padding:3em 3em 3em;position:relative;}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle:before{content:"01";display:flex;justify-content:end;align-items:end;width:1.7em;height:1.4em;line-height:1;position:absolute;top:0;left:0;font-size:290%;font-weight:700;box-sizing:border-box;}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle:after{content:"";display:flex;justify-content:center;align-items:center;width:2.2em;height:2.2em;position:absolute;top:0;left:0;font-size:290%;font-weight:700;box-sizing:border-box;border-radius:50%;border:4px solid transparent;border-bottom:4px solid #01b8cc;transform:rotate(-45deg) translate(.1em,-.2em);}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle.borderPink:after{border-bottom-color:#f94891;}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle.number01:before{content:"01";}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle.number02:before{content:"02";}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle.number03:before{content:"03";}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle.number04:before{content:"04";}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle.number05:before{content:"05";}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle.number06:before{content:"06";}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle.number07:before{content:"07";}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle.number08:before{content:"08";}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle>*{max-width:374px;margin:0 auto;}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle:nth-of-type(n+3){margin:7% 0 0;}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle .ttlBox{order:1;margin:0 auto auto;}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle .txtBox{order:3;margin:.5em auto 0;}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle .imgBox{order:2;margin: auto;}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle .ttl-h3{order:2;color:#01b8cc;font-weight:700;font-size:290%;text-align:center;line-height:1.2;}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle .ttl-sub{order:1;font-weight:700;font-size:125%;text-align:center;}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle .txt{font-weight: 400;font-size:135%;line-height: 1.6;margin:0 0 .5em;}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle .linkBox{text-align:center;line-height:1;padding:0;}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle a{font-weight:700;color:#01b8cc;padding:.5em 0;}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle .linkBox.appLink img{max-width:100%; height:auto;}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle .linkBox.appLink{padding:0 1em;}
#novaKatsuyoSec .contentsBoxInner .novaKatsuyoStyle .linkBox.appLink a:after{display:none;}

/*----- キャンペーン -----*/
#campaignContentsSec{background:#a6e7ed;position:relative;overflow:hidden;}
#campaignContentsSec:before{content:"";display:flex;justify-content:end;align-items:end;width:50vw;height:100%;line-height:1;position:absolute;top:0;right:calc(((100% - 980px)/ 2) + 980px);box-sizing:border-box;background:url(https://www.nova.co.jp/campaign_20th/images/bg_silhouette_usagi.png) repeat-x bottom right 0;}
#campaignContentsSec:after{content:"";display:flex;justify-content:end;align-items:end;width:50vw;height:100%;line-height:1;position:absolute;top:0;left:calc(((100% - 980px)/ 2) + 980px);box-sizing:border-box;background:url(https://www.nova.co.jp/campaign_20th/images/bg_silhouette_usagi.png) repeat-x bottom left 0;}
#campaignContentsSec .sectionInner{background:#fff;}
#campaignContentsSec .img{text-align:center;margin:-7em 0 0;}

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

/*----- SNS -----*/
.snsSec{margin: 0 0 0 0;}
.snsSec a{cursor:pointer;}
.snsSec .sectionInner{padding: 2em 0 2em;}
.snsSec .snsShareBox{margin: 0 0 0 -7%;padding: 0 0em 0 0;}
.snsSec .ttl{padding:0;margin:0;}
.snsSec .snsIcoBox{margin:0 .5em;padding:0;}
.snsSec .linkIcoBox{margin:0 0 0 1em;padding:0 0 0 1em;border-left:1px solid #b3b3b3;position: relative;}
.snsSec .linkIcoBox .success-msg{display:none;position: absolute;white-space: nowrap;top: 100%;left: 80%;transform: translate(-50%, 0px);color: #000;}

#snsHeaderSec.snsSec{margin: 0 0 0 auto;}
#snsHeaderSec.snsSec img{max-width:100%;height: auto;width: 2em;}
#snsHeaderSec.snsSec .sectionInner{padding: 0em 0 0em;}
#snsHeaderSec.snsSec .snsShareBox{margin: 0 0 0 0;padding: 0 3em 0 0;}