@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 .ttl img{width: 80%;height: auto;}
#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;}

#sideBox .contentsList .titleTxt{color: #5F363A;text-align: center;}
#sideBox .contentsList .titleTxt span{font-size: 90%;}
/*----------------------------------------------------------------------------
***                                                              mainsection
----------------------------------------------------------------------------*/
#top{min-width:1060px;}
#base{background: #F6BEC9;border-top: 4px solid #ec7e92;}
#bodyInner{background: #fff;max-width: 1120px;width: 77%;margin: 0 auto;}
#wrap{position: relative;}
#wrap::before{background: url(https://www.nova.co.jp/lp/novausagi/images/bg_usagi01.png)repeat top left;width: 123px;height:100%;content: "";position: absolute;top: -2%;left: -15%;}
#wrap::after{background: url(https://www.nova.co.jp/lp/novausagi/images/bg_usagi01.png)repeat top right;width: 123px;height:100%;content: "";position: absolute;top: -2%;right: -15%;}

.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;opacity: 0.7;color: #000;}

/*-----【共通】-----*/
/*個別にコンテンツの横幅を指定する*/
.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;}


/*----- ファーストビュー -----*/
#firstViewSec{overflow:hidden;position:relative;padding: 0;}
#firstViewSec .sectionInner{width:100%;max-width: 980px;margin:0 auto;position:relative;z-index:1;padding-top:2em;}
#firstViewSec #btnCM{position:absolute;top:70px;right:40px;}
#firstViewSec .titleBox{margin:0 auto 2em;padding:0;position:relative;}
#firstViewSec .ttl{}
#firstViewSec .titleBox .pos_a{position: absolute;}
#firstViewSec .titleBox .panda{top: 5%;left: 4%;}
#firstViewSec .titleBox .usagi{top: 0;right: 5%;}



/*----- うさぎに関するボタン -----*/
#usagibtnSec{}
#usagibtnSec ul{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
#usagibtnSec li{width: 47%;margin: 1em 0.4em;text-align: center;}
#usagibtnSec li a:hover{opacity: 0.7;}
#usagibtnSec li img{width: 100%;height: 100%;}
/*----- 叶えたいこと -----*/
#challengeSec .titleBox .subttl{font-size: 18px;font-weight: bold;}
#challengeSec .titleBox h3{font-size: 60px;font-weight: bold;display: inline-block;background: linear-gradient(to right, rgba(1, 184, 204, 1), rgba(236, 126, 146, 1));-webkit-background-clip: text; -webkit-text-fill-color: transparent;margin: -0.2em 0 0.2em; }
#challengeSec .titleBox p{font-size: 16px;line-height: 1.5em;}
#challengeSec .dreamBox{position: relative;}
#challengeSec .pos_a{position: absolute;}
#challengeSec .pos_r{position: relative;}
#challengeSec .training{top: -11%;left: 0;}
#challengeSec .fishing{top: -13%;right: 0;}
#challengeSec .dreamBox .dream_usagi{margin: 1em auto 7em;}
#challengeSec .dreamBox .dream_usagi .cos_usagi{position: relative;}
#challengeSec .dreamBox .dream_usagi .fuki{position: absolute;font-size: 30px;font-weight: bold;text-align: center;line-height: 1.2em;z-index: 3;}
#challengeSec .dreamBox .dream_usagi .fuki01{top: 4em;left: 1em;background: url(https://www.nova.co.jp/lp/novausagi/images/img_fukidashi01.png)no-repeat center center;width: 340px;height: 295px;padding: 3em 1em 0 0;background-size: 105%;}
#challengeSec .dreamBox .dream_usagi .fuki02{top: 5em;right: 2em;background: url(https://www.nova.co.jp/lp/novausagi/images/img_fukidashi02.png)no-repeat center center;width: 302px;height: 178px;padding: 2em 0em 0 1.5em;font-size:26px;}
#challengeSec .dreamBox .dream_usagi .fuki03{bottom: 0em;left: 3em;background: url(https://www.nova.co.jp/lp/novausagi/images/img_fukidashi03.png)no-repeat center center;width: 285px;height: 208px;padding: 2.8em 0em 0 0;font-size: 28px;}
#challengeSec .dreamBox .dream_usagi .fuki04{bottom: 0em;right: 3em;background: url(https://www.nova.co.jp/lp/novausagi/images/img_fukidashi04.png)no-repeat center center;width: 279px;height: 242px;padding: 2.8em 0em 0 0.5em;font-size: 27px;}

#challengeSec .dreamBox .dream_usagi .hv_on:hover{opacity: 0.7;}
#challengeSec .dreamBox .dream_usagi .hv_on .fuki::before{content: "";display: block;background: url(https://www.nova.co.jp/lp/novausagi/images/img_clear_click.png)no-repeat top left;width: 129px;height: 79px;position: absolute;}
#challengeSec .dreamBox .dream_usagi .hv_on .fuki01::before{top: -2%;left: 38%;}
#challengeSec .dreamBox .dream_usagi .hv_on .fuki02::before{top: -10%;left: 50%;}
#challengeSec .dreamBox .dream_usagi .hv_on .fuki03::before{top: 0%;left: 0;}
#challengeSec .dreamBox .dream_usagi .hv_on .fuki04::before{top: -3%;right: 0;}
#challengeSec .mDream{position: relative;display: block;background: url(https://www.nova.co.jp/lp/novausagi/images/ttl_ag_dreambg.png)no-repeat center;width: 460px;height: 83px;padding: 2.5em 0em 0 0.5em; margin: 0 auto;}
#challengeSec .mDreamTxt{display: block;/*position: absolute;top:15%;right: 32%;*/font-weight: bold;color: #FFF;font-size: 344%;margin: -0.35em auto;text-align: center;}
#challengeSec .txtOnly{font-size: 16px;font-weight: bold;margin: 0em 0.5em 2em;}

/* モーダルCSS */
.modalArea {display: none;position: fixed;z-index: 10;top: 0;left: 0;width: 100%;height: 100%;}
.modalBg {width: 100%;height: 100%;background-color: rgba(30,30,30,0.9);}
.modalWrapper {position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);width: 70%;max-width: 700px;padding: 30px 40px; background-color: #fff;}
.closeModal {position: absolute;top: 0.9rem;right: 1rem;cursor: pointer;font-size: 20px;font-weight: bold;color: #fff;background: #333;padding: 0 0.3em;}
/* POPUP内CSS */
#challengeSec .modalArea .modalContents h1{font-size: 35px;font-weight: bold;margin: 0.5em auto;line-height: 1.2em;}
#challengeSec .modalArea .modalContents ul{display: flex;flex-wrap: wrap;justify-content:space-between;align-items: flex-start;}
#challengeSec .modalArea .modalContents li{margin: 0em 0.5em 1em;}
#challengeSec .modalArea .modalContents .photo{width: 38%;}
#challengeSec .modalArea .modalContents .photo img{width: 100%;}
#challengeSec .modalArea .modalContents .txt{width: 54%;font-size: 16px;font-weight: bold;}
#challengeSec .modalArea .modalContents a{color:#0071bc; }

#challengeSec .next_dream{margin-bottom: 7em; position: relative;}
#challengeSec .next_dream .box{padding: 1em 2em;}
#challengeSec .next_dream .box p{text-align: center;border-bottom: 2px solid #F19FAD;font-size: 20px;font-weight: bold;padding: 0.4em 0;margin-bottom: 0.3em;}
#challengeSec .next_dream .box p:last-child{border: none;}


#challengeSec .next_dream li{position: relative;}
#challengeSec .next_dream .clear{display: block;position: absolute;top: 0.8em;left:0em; z-index:9;padding: 0;}
#challengeSec .next_dream .send{cursor: pointer;}
#challengeSec .next_dream a{color: #333;}

/*アコーディオン全体 共通*/
.accordion-area{list-style: none; ;margin:0 auto;}
.accordion-area li{margin: 20px auto;border: 1px solid #EB7E93;max-width: 550px;width: 90%;}
.title {position: relative;cursor: pointer;padding: 0% 3% 0% 50px;transition: all .5s ease;color: #fff;background: #EB7E93;font-weight: bold;font-size: 30px;}
/*アコーディオンで現れるエリア*/
.box{display: none; background: #fff;}
/*アイコンの〉と-*/
.title::before{
    position: absolute;
    content:'';
    width: 16px;
    height: 16px;
	top: 20%;
	right: 4%;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform:rotate(135deg);
}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{
 position: absolute;
    content:'';
    width: 25px;
    height: 10px;
	border-top: 4px solid #fff;
	border-right: 0;
	transform: rotate(0deg);
	top: 45%;
}


/*----- キャンペーン -----*/
#campaignContentsSec{background: url(https://www.nova.co.jp/lp/novausagi/images/bg_cpSec.png)no-repeat bottom center;margin-top: -5em;}
#campaignContentsSec .sectionInner {padding: 3em 0 0em;} 
#campaignContentsSec img{text-align:center;margin:2em 0;}

/*----- 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;}


@media (min-width:768px)  and (max-width:1200px) {
	#top{width: 100%;min-width: 100%;}
	#wrap::after,#wrap::before{background-size: 100%;width: 72px;}
	#wrap::after{right: -13%;}
	#wrap::before{left: -13%;}
	#firstViewSec .titleBox .panda{left: 11px;width: 27%;height: auto;}
	#firstViewSec .titleBox .panda img{width: 60%;height: auto;}
	#firstViewSec .titleBox .usagi{right: -35px;width: 20%;height: auto;}
	#firstViewSec .titleBox .usagi img{width: 60%;height: auto;}
	#firstViewSec .titleBox h2 img{width: 68%; height: auto;}
	#firstViewSec .titleBox .anniversary img{width: 90%;height: auto;}
	.secBox > .sectionInner > .titleBox{margin-bottom: 4em;}
	.secBox > .sectionInner{padding: 0 0 4em;}
	#challengeSec .titleBox h3{line-height: 1.2em;margin: 0.2em 0 0.5em;}
	#challengeSec .dreamBox .dream_usagi{margin: 4em auto 7em;}
	#challengeSec .dreamBox .training{top: -3%;left: -12%;}
	#challengeSec .dreamBox .fishing{top: -2%;right: -12%;}
	#challengeSec .dreamBox .dream_usagi .fuki01{top:6em;left: -14%; }
	#challengeSec .dreamBox .dream_usagi .fuki02{top: 7em;right: -8%;}
	#challengeSec .dreamBox .dream_usagi .fuki03{bottom: -1em;left: -9%;}
	#challengeSec .dreamBox .dream_usagi .fuki04{right: 0%}
	#campaignContentsSec .sectionInner{text-align: center;}
	#campaignContentsSec img{margin: 4em auto;width: 95%;height: auto;}
}