@charset "utf-8";

/* --------------------------------------------------------- */
/* index.css */
/* --------------------------------------------------------- */

#wrap{position:relative;overflow:hidden;}
.section{width:100%;margin:0 auto;}
.content{width:100%;margin:0 auto;}
.layer{width:92%;max-width:950px;margin:0 auto;}
.sp{display:none;}

a{display:block;}
.txt a{display:inline;}
img{width:auto;max-width:100%;height:auto;}


/* ヘッダー
----------------------- */
#header{background:#fdeeed;}
#header .layer{width:100%;}



/* メイン
----------------------- */
#main{}
#main h2{margin:0 auto;}
#main .cardbox{}
.txt{font-size:26px;line-height:180%;text-align:center;}

/* card */
#card{background:#fdf2d9;}
#card h2{width:56.527%;/*537*/padding-top:6.527%;}
#card h2 + .txt{margin-top:3.158%;}
#card .txtlink{padding-top:3.264%;line-height:140%;text-align:center;}
#card .txtlink a{display:inline;font-weight:bold;}
#card .txtlink small{font-size:77%;}

.cardbox{margin-top:6.316%;}
.cardbox h3{padding:4.948% 0;border-radius:20px 20px 0 0;position:relative;}
.cardbox h3:after{content:'';display:block;position:absolute;top:0;left:0;width:12.632%;padding-top:12.632%;margin:-40px 0 0 -20px;background-repeat:no-repeat;background-size:100% auto;}
.cardbox h3 img{width:58.632%;/*557*/margin:0 auto;}
.cardbox h3 small{display:block;margin-top:0.75em;font-size:16px;font-weight:normal;line-height:161%;text-align:center;}
.cardbox .txt{font-size:30px;}
.cardbox .toggle{display:none;border-right:2px solid;border-left:2px solid;background:#fff;box-sizing:border-box;}
.cardbox .border{padding-bottom:5.286%;background:url(../img/border.jpg) no-repeat center bottom;}
.cardbox .btn{width:62.368%;/*590*/margin:0 auto;}
.cardbox .btn a{box-shadow:6px 6px 0 0 rgba(0,0,0,0.3);transition:ease 0.3s;}
.cardbox .btn a:hover{opacity:0.7;}
.cardbox .btn-toggle{padding:2.106% 0;text-align:center;border-radius:0 0 20px 20px;cursor:pointer;transition:opacity ease 0.3s;}
.cardbox .btn-toggle:hover{opacity:0.7;}
.cardbox .btn-toggle span{width:4.316%;display:inline-block;transform:rotate(180deg);}
.cardbox .btn-toggle.open span{transform:rotate(0deg);}

#accumulate{margin-top:5.264%;}
#accumulate h3{padding:1.685% 0;background:#ed85ac;}
#accumulate h3:after{background-image:url(../img/icon-accumulate.png);}
#accumulate .toggle{border-color:#ed85ac;}
#accumulate .image{width:67.654%;/*640*/margin:0 auto;padding:4.757% 0;}
#accumulate .border{padding-bottom:5.286%;background:url(../img/border.jpg) no-repeat center bottom;background-size:68.4375% auto;text-align:center;}
#accumulate .border a{margin-top:1.5%;color:#db266a;font-size:20px;}
#accumulate .btn{padding:1.586% 0 6.977%;}
#accumulate .btn-toggle{background:#db266a;}

#usable h3{background:#f28433;}
#usable h3:after{background-image:url(../img/icon-usable.png);}
#usable .toggle{border-color:#f28433;}
#usable .txt{padding:5.286% 0;}
#usable .txt strong{color:#ee6408;}
#usable .txt + .txt{margin-top:-3.172%;padding-top:0;}
#usable .btn{padding-bottom:6.977%;}
#usable .border{background-size:74.238% auto;}
#usable .mt{margin-top:-1.48%;padding-top:0;}
#usable .bnr{width:62.368%;margin:0 auto;padding-bottom:6.343%;}
#usable .bnr a{transition:ease 0.3s;}
#usable .bnr a:hover{opacity:0.7;}
#usable .btn-toggle{background:#ee6408;}

#get{padding-bottom:10.527%;}
#get h3{padding:3.264% 0 1.685%;background:#8a81bc;}
#get h3:after{background-image:url(../img/icon-get.png);}
#get .toggle{border-color:#8a81bc;} 
#get #get-img2{width:90.064%;margin:0 auto 6.343%;padding-top:6.343%;}
#get .nest{width:89.853%;margin:0 auto;}
#get .nest:last-of-type{padding-bottom:6.343%;}
#get .nest + .nest{margin-top:1.058%;}
#get .nest .head{padding:0 1em;color:#fff;font-size:14px;font-weight:bold;line-height:286%;background:black;box-sizing:border-box;}
#get .nest .tglhd{cursor:pointer;position:relative;}
#get .nest .tglhd:before,
#get .nest .tglhd:after{display:block;content:"";width:1.4286em;height:0.2143em;background:#fff;position:absolute;top:50%;right:0.7143em;transition:.3s;}
#get .nest .tglhd:before{transform:translateY(-50%);}
#get .nest .tglhd:after{transform:translateY(-50%) rotate(90deg);}
#get .nest .tglhd.on:after{transform:translateY(-50%) rotate(0deg);}
#get .nest .nestbox{padding:1em;font-size:14px;line-height:135%;border:2px solid #000;border-top:none;box-sizing:border-box;}
#get .nest .nestbox p,
#get .nest .nestbox ul,
#get .nest .nestbox li{font-size:14px;line-height:135%;}
#get .nest .nestbox li{padding-left:1em;text-indent:-1em;box-sizing:border-box;}
#get .nest .nestbox a{display:inline;color:#0066cc;}
#get .nest .toggle2{display:none;}
#get .nest .mt{margin-top:1em;}
#get .nest .line{color:#ec2113;text-align:center;margin:1em 0 0.5em;padding:0.5em 1em;border-top:2px solid #ec2113;border-bottom:2px solid #ec2113;box-sizing:border-box;}
#get .nest .red{color:#ec2113;text-decoration:underline;}
#get .btn-toggle{background:#64428b;}


/* membership */
#membership{background:#fff;}
#membership h2{width:42.948%;/*408*/padding:10.527% 0 3.158%;}
#membership h3{margin:0 auto;}
#membership h3.head2{width:93.895%;margin-bottom:3.158%;}
#membership h3.head3{width:52.211%;margin-bottom:4.211%;}
#membership .txt{margin-bottom:5.264%;}
#membership .txtbox{width:72%;margin:0 auto 5.264%;}
#membership .txt2{margin-bottom:1.053%;font-size:24px;line-height:183%;}
#membership .note li{padding-left:1em;font-size:20px;line-height:150%;text-indent:-1em;box-sizing:border-box;}
#membership .note .red{color:#ec2113;}
#membership .btn{width:72%;/*684*/margin:0 auto;}
#membership .btn + .btn{margin-top:3.79%;}
#membership .btn a,
#membership .btn span{display:block;box-shadow:6px 6px 0 0 rgba(0,0,0,0.3);transition:ease 0.3s;}
#membership .btn a:hover,
#membership .btn span:hover{opacity:0.7;}
#membership .image{width:52.632%;/*500*/margin:11.158% auto 10.527%;}


/* etc */
#etc{margin-top:14.737%;}
#etc h3{width:71.685%;/*681*/margin:0 auto 4.211%;}
#etc ul{display:flex;flex-wrap:wrap;justify-content:space-between;width:72.632%;margin:0 auto 18.685%;}
#etc li{width:48.551%;margin-bottom:2.899%;}
#etc li a:hover{opacity:0.7;}


/* ポップアップ追随
----------------------- */
#pop{position:fixed;right:0;bottom:0;width:auto;width:150px;padding-top:150px;margin:0 15px 15px 0;background:url(../img/btn-popup.png) no-repeat;background-size:100% auto;cursor:pointer;
animation:4s bound-anim ease-in infinite;}
#pop:hover{opacity:0.7;}
#pop a{display:block;position:absolute;top:0;left:0;width:100%;height:100%;}
@keyframes bound-anim{
  0%{transform:translateY(0px);}
  80%{transform:translateY(0px);}
  85%{transform: translateY(-12%);}
  90%{transform:translateY(0px);}
  95%{transform: translateY(-12%);}
  100%{transform:translateY(0px);}
}



@media screen and (max-width: 950px){

/* メイン
----------------------- */
.txt{font-size:2.736vw;}
.cardbox .txt{font-size:3.157vw;}

.cardbox h3 small{font-size:1.685vw;}

#accumulate .border a{font-size:2.106vw;}

#get .nest .head{font-size:1.474vw;}
#get .nest .nestbox{font-size:1.474vw;}
#get .nest .nestbox p,
#get .nest .nestbox ul,
#get .nest .nestbox li{font-size:1.474vw;}

/* membership */
#membership .txt2{font-size:2.527vw;}
#membership .note li{font-size:2.106vw;}


/* ポップアップ追随
----------------------- */
#pop{width:15.79%;padding-top:15.79%;margin:0 1.579% 1.579% 0;}

}



@media screen and (max-width: 750px){

.layer{width:92%;}
.sp{display:block;}
.pc{display:none;}


/* メイン
----------------------- */
#main{}
#main h2{}
#main .cardbox{}
.txt{font-size:3.467vw;}

/* card */
#card h2{width:57.827%;/*399*/padding-top:8.267vw;}
#card h2 + .txt{margin-top:4vw;}
#card .txtlink{padding-top:6vw;}
#card .txtlink small{display:block;margin-top:2vw;font-size:62%;}

.cardbox{margin-top:8vw;}
.cardbox h3{padding:6.267vw 0;}
.cardbox h3:after{width:17.392%;padding-top:17.392%;margin:-5.798% 0 0 -2.899%;}
.cardbox h3 img{width:80.725%;/*557*/}
.cardbox h3 small{font-size:2vw;}
.cardbox .txt{font-size:4vw;}
.cardbox .btn{width:calc(590 / (690 - 4) * 100%);}
.cardbox .btn a{box-shadow:0.8vw 0.8vw 0 0 rgba(0,0,0,0.3);}
.cardbox .btn a:hover{opacity:1;}
.cardbox .btn-toggle{padding:2.667vw 0;}
.cardbox .btn-toggle:hover{opacity:1;}
.cardbox .btn-toggle span{width:5.943%;margin:0 auto;}

#accumulate{margin-top:6.667vw;}
#accumulate h3{padding:2.134vw 0;}
#accumulate h3 img{margin-right:4.348%;}
#accumulate .image{width:calc(600 / (690 - 4) * 100%);/*600*/padding:6vw 0;}
#accumulate .border{padding-bottom:6.667vw;background-size:58.4vw auto;}
#accumulate .border a{font-size:3.2vw;}
#accumulate .btn{padding:2vw 0 8.8vw;}

#usable h3 img{margin-right:7.972%;}
#usable .txt{padding:6.667vw 0;}
#usable .txt + .txt{margin-top:-4vw;}
#usable .btn{padding-bottom:8.8vw;}
#usable .border{background-size:58.4vw auto;}
#usable .mt{margin-top:-2.041%;padding-top:0;}
#usable .bnr{width:86.006%;padding-bottom:8.747%;}
#usable .bnr a:hover{opacity:1;}

#get{padding-bottom:13.334vw;}
#get h3{padding:4.134vw 0 2.134vw;}
#get .imagewrap{width:80vw;margin:0 auto;padding-top:8vw;overflow-x:scroll;box-sizing:border-box;position:relative;}
#get .imagewrap .scr{width:21.667%;padding-top:16.667%;background:url(../img/icon-scroll1.png) no-repeat center;background-size:100% auto;;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
#get #get-img2{width:266.4vw;}
#get #get-img2 + .nest{margin-top:8vw;}
#get .nest{width:80vw;}
#get .nest:last-of-type{padding-bottom:8vw;}
#get .nest + .nest{margin-top:1.334vw;}
#get .nest .head{font-size:2.8vw;line-height:8vw;}
#get .nest .tglhd:before,
#get .nest .tglhd:after{width:3.333vw;height:0.4vw;right:0.4762em;}
#get .nest .nestbox{font-size:2.8vw;border-width:0.267vw;}
#get .nest .nestbox p,
#get .nest .nestbox ul,
#get .nest .nestbox li{font-size:2.8vw;}
#get .nest .toggle2{}
#get .nest .line{border-width:0.267vw;}


/* membership */
#membership h2{width:59.131%;/*408*/padding:13.334vw 0 4vw;}
#membership h3.head2{width:74.928%;margin-bottom:4.667vw;}
#membership h3.head3{width:71.885%;margin-bottom:5.334vw;}
#membership .txt{margin-bottom:5.334vw;}
#membership .txtbox{width:100%;margin-bottom:7.247%;}
#membership .txt2{margin-bottom:4.348%;font-size:3.467vw;line-height:180%;}
#membership .note li{font-size:2.667vw;}
#membership .btn{width:99.131%;/*684*/}
#membership .btn + .btn{margin-top:5.218%;}
#membership .btn a,
#membership .btn span{box-shadow:0.8vw 0.8vw 0 0 rgba(0,0,0,0.3);}
#membership .btn a:hover,
#membership .btn span:hover{opacity:1;}
#membership .image{width:72.464%;/*500*/margin:14.134vw auto 13.334vw;}


/* etc */
#etc{margin-top:18.667vw;}
#etc h3{width:98.696%;/*681*/margin-bottom:5.334vw;}
#etc ul{width:100%;margin:0 auto 22.334vw;}
#etc li a:hover{opacity:1;}


/* ポップアップ追随
----------------------- */
#pop{width:20%;padding-top:20%;margin:0 0.8vw 0.8vw 0;}
#pop:hover{opacity:1;}
	
}