@charset "utf-8";
/* CSS Document */

/* -----------------------------------------
  reset（編集しない）
----------------------------------------- */
article, aside, details, figcaption, figure,footer, header, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0;}
*, *:before, *:after {box-sizing: border-box;}

/* -----------------------------------------
  base（font-familyなどの変更。fontは1.6rem＝16px）
----------------------------------------- */

/* 解析タグの隙間対策 */
body > img {display: none;}

/* 画像の隙間対策 */
#wrapper .lp_content img {display: block; vertical-align: bottom; width: 100%; max-width: 100%; height: auto;}
.p-box {position: relative;}

/*============================
#main
============================*/
#wrapper {width: 100%; max-width: 750px; height: auto; margin: 0 auto; position: relative;}
#wrapper *{box-sizing: border-box;}
#wrapper .lp_content header{text-align: center; margin: 0 auto; position: relative;}
#wrapper .lp_content section{margin: 0 auto;text-align: justify;}
#wrapper .lp_content a img{opacity: 1;transition: all 0.5s ease;}
#wrapper .lp_contentr a img:hover{opacity: 0.7;}
#wrapper .lp_content .p-box{position: relative;}

/*============================
btn
============================*/
#wrapper .lp_content .btn_offer{position: absolute; bottom: 5.5%; left:50%; width: 81.0667%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);}
#wrapper .lp_content .btn_offer_02{position: absolute; top: 30%; left:50%; width: 81.0667%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);}
#wrapper .lp_content .btn_offer_03{position: absolute; bottom: 4%; left:50%; width: 81.0667%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);}
#wrapper .lp_content .btn_offer_04{position: absolute; bottom: 29.5%; left:50%; width: 81.0667%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);}
#wrapper .lp_content .btn_3pack{position: absolute; bottom: 54.8%; left:50%; width: 81.0667%; -webkit-transform: translate(-50%, 0);transform: translate(-50%, 0);}
#wrapper .lp_content .btn_1pack{position: absolute; bottom: 1.5%; left:50%; width: 81.0667%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);}
#wrapper .lp_content .btn_normal{margin: 6% auto 8%; display: block; width: 81.0667%;}
#wrapper .lp_content a img{ transition: all 0.5s ease; opacity: 1;}
#wrapper .lp_content a img:hover{opacity:0.7;}

/* movie */
#wrapper .lp_content .mov_01{width: 92%; height: auto; position: absolute; left: 4%; top: 6%;}
#wrapper .lp_content .mov_02{width: 92%; height: auto; position: absolute; left: 4%; top: 24%;}

/*============================
offer
============================*/

#wrapper .lp_content .offer_bottom ol{margin-bottom: 5%;}
#wrapper .lp_content .offer_bottom .p-box{margin-bottom: 5%;}

/*============================
accordion
============================*/
#wrapper .lp_content .faq{background-color: #eeebe4; padding: 0 4% 3%;}
#wrapper .lp_content .faq dl.accordion{margin-bottom: 5%;}
#wrapper .lp_content .faq dl.accordion dt{position: relative;}
#wrapper .lp_content .faq dl.accordion dt:after{content: ""; display: block; position: absolute; width: 3.3333%; padding-top: 2.2667%; background-image: url('../img/icon_arrow.png'); background-repeat: no-repeat; background-size: contain; top: 40%; right: 4%; transform: rotate(180deg); transition: all 0.5s ease;}
#wrapper .lp_content .faq dl.accordion dd{display: none;}
#wrapper .lp_content .faq dl.accordion dt.selected:after{transform: rotate(0deg);}

.fadein {opacity : 0; transform : translate(0, 50px); transition : all 300ms;}
.fadein.scrollin {opacity : 1; transform : translate(0, 0);}

/*============================
インスタ用LP
============================*/
.sns_fv{display:block; position:relative;}
.lp_content p.fv_btn{position:absolute; top: 4.2%; left: 12.6%;}
.lp_content a.reflection {display: inline-block; border-radius: 30px; box-shadow: 0px 5px 4px #2c2c2c; position: relative; overflow: hidden;}
.lp_content a.reflection:after {content:""; height:100%; width:30px; position:absolute; top:-180px; left:0; background-color: #fff; opacity:0; -webkit-transform: rotate(45deg); -webkit-animation: reflection 2.5s ease-in-out infinite;}
.lp_content a.reflection_middle {display: inline-block; border-radius: 30px; box-shadow: 0px 5px 4px #7f7f7f; position: relative; overflow: hidden;}
.lp_content a.reflection_middle:after {content:"";height:100%;width:30px;position:absolute;top:-180px;left:0;background-color: #fff;
opacity:0;-webkit-transform: rotate(45deg);-webkit-animation: reflection 2.5s ease-in-out infinite;}
.lp_content p.fv_btn_smp {position: absolute; top: 4.4%; left: 9.5%; width: 80%;}
.lp_content p.fv_btn_smp_nd {position: absolute; top: 4.1%; left: 9.5%; width: 80%;}
.lp_content p.fv_btn_smp_nd_ad {position: absolute; top: 2.9%; left: 9.5%; width: 80%;}
.lp_content a.reflection_smp {display: inline-block; border-radius: 22px; box-shadow: 0px 5px 4px #666; position: relative; overflow: hidden;}
.lp_content a.reflection_smp:after {content:""; height:100%; width:30px; position:absolute; top:-180px; left:0; background-color: #fff; opacity:0; -webkit-transform: rotate(45deg); -webkit-animation: reflection 2.5s ease-in-out infinite;}
.lp_content a.reflection_smp_middle {display: inline-block;border-radius: 17px;box-shadow: 0px 5px 4px #7f7f7f;position: relative;overflow: hidden;}
.lp_content a.reflection_smp_middle:after {content:"";height:100%;width:30px;position:absolute;top:-180px;left:0;background-color: #fff;opacity:0;-webkit-transform: rotate(45deg);-webkit-animation: reflection 2.5s ease-in-out infinite;}

@keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 0.7; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/*============================
2袋⇒1袋定期LP
============================*/
.one_two_fv{display:block; position:relative;}
.lp_content p.pcfv_btn_one_two{position:absolute; top: 4.2%; left: 12.6%;}
.lp_content p.fv_btn_one_two{position:absolute; top: 4.4%; left: 12.6%;}
.lp_content p.fv_btn_smp_one_two {position: absolute; top: 4%; left: 9.5%; width: 80%;}
#wrapper .lp_content .pcbtn_offer_one_two{position: absolute; bottom: 1.9%; left:50%; width: 81.0667%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);}
#wrapper .lp_content .btn_offer_one_two{position: absolute; bottom: 26%; left:50%; width: 81.0667%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);}
#wrapper .lp_content .btn_bottom_one_two{position: absolute; bottom: 2%; left:50%; width: 81.0667%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);}
.lp_content a.reflection_smp_middle_one_two {display: inline-block;border-radius: 17px;box-shadow: 0px 5px 4px #7f7f7f;position: relative;overflow: hidden;}
.lp_content a.reflection_smp_middle_one_two:after {content:"";height:100%;width:20px;position:absolute;top:-180px;left:0;background-color: #fff;opacity:0;-webkit-transform: rotate(45deg);-webkit-animation: reflection 2.5s ease-in-out infinite;}
@keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 0.7; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/*============================
インフォマ用LP
============================*/
.infoma_fv{display:block;position:relative;}
.lp_content p.fv_btn_infoma {position: absolute; top: 14.25%; left: 10%; width: 85%;}
.lp_content a.reflection_infoma {display: inline-block; position: relative; overflow: hidden;}
.lp_content a.reflection_infoma:after {content:""; height:100%; width:30px; position:absolute; top:-180px; left:0; background-color: #fff; opacity:0; -webkit-transform: rotate(45deg); -webkit-animation: reflection 2.5s ease-in-out infinite;}
.lp_content p.fv_btn_smp_infoma {position: absolute; top: 14.2%; left: 0; right: 0; margin:0 auto; width: 85%;}
.lp_content a.reflection_smp_infoma {display: inline-block; position: relative; overflow: hidden;}
.lp_content a.reflection_smp_infoma:after {content:""; height:100%; width:30px; position:absolute; top:-180px; left:0; background-color: #fff; opacity:0; -webkit-transform: rotate(45deg); -webkit-animation: reflection 2.5s ease-in-out infinite;}
@keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 0.7; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

#wrapper .lp_content .btn_offer_info{position: absolute; bottom: 15.5%; left:50%; width: 80%; -webkit-transform: translate(-50%, 0);}
#wrapper .lp_content .btn_offer_info02 {position: absolute; bottom: 23.75%; left: 50%; width: 85%; -webkit-transform: translate(-50%, 0);}
#wrapper .lp_content .btn_offer_info03{position: absolute; bottom: 28%; left:50%; width: 72%; -webkit-transform: translate(-50%, 0);}
#wrapper .site-header {position: fixed; z-index: 100; top: 82%; bottom: 0; left: 0; right: 0; width: 100%; color: #fff; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,205,0,1) 100%, rgba(255,253,222,1) 100%);}
#wrapper .site-header a {padding-top: 5px; margin: -5px auto 0; display: block; width: 96%;}

/*============================
インフォマ用LP_02
============================*/
.infoma02_fv{display:block;position:relative;}
.lp_content p.fv_btn_infoma02 {position: absolute; top: 14.25%; left: 10%; width: 80%;}
.lp_content p.fv_logo_infoma02 {position: absolute; top: 4.6%; z-index: 100; width: 45%; display: block; left: 49%; animation: fadeup 3s;}
.lp_content p.fv_circle_infoma02 {position: absolute; top: 8.6%; z-index: 100; width: 34%; display: block; left: 61%;}
.lp_content p.fv_check_infoma02 {position: absolute; top: 9.2%; z-index: 200; width: 15%; display: block; left: 58%;}
.lp_content a.reflection_infoma02 {display: inline-block; position: relative; overflow: hidden;}
.lp_content a.reflection_infoma02:after {content:""; height:100%; width:30px; position:absolute; top:-180px; left:0; background-color: #fff; opacity:0; -webkit-transform: rotate(45deg); -webkit-animation: reflection 2.5s ease-in-out infinite;}
.lp_content p.fv_btn_smp_infoma02 {position: absolute; top: 30.3%; left: 0; right: 0; margin:0 auto; width: 85%;}
.lp_content a.reflection_smp_infoma02 {display: inline-block; position: relative; overflow: hidden;}
.lp_content a.reflection_smp_infoma02:after {content:""; height:100%; width:30px; position:absolute; top:-180px; left:0; background-color: #fff; opacity:0; -webkit-transform: rotate(45deg); -webkit-animation: reflection 2.5s ease-in-out infinite;}
.infoma02_special{display:block;position:relative;}
.lp_content p.special_btn_infoma02_one {position: absolute; top: 25.25%; left: 0; width: 68%; right: 0; margin: 0 auto;}
.lp_content p.special_btn_infoma02_two {position: absolute; top: 39.25%; left: 0; width: 68%; right: 0; margin: 0 auto;}
.lp_content p.special_btn_infoma02_three {position: absolute; top: 52.25%; left: 0; width: 68%; right: 0; margin: 0 auto;}
.lp_content p.special_btn_infoma02_four {position: absolute; top: 65.25%; left: 0; width: 68%; right: 0; margin: 0 auto;}
.lp_content p.special_btn_infoma02_five {position: absolute; top: 78.25%; left: 0; width: 68%; right: 0; margin: 0 auto;}
#wrapper .lp_content .btn_offer_infoma02 {position: absolute; bottom: 23.5%; left: 50%; width: 80%; -webkit-transform: translate(-50%, 0);}
#wrapper .site-header {position: fixed; z-index: 100; top: 82%; bottom: 0; left: 0; right: 0; width: 100%; color: #fff; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,205,0,1) 100%, rgba(255,253,222,1) 100%);}
#wrapper .site-header a {padding-top: 5px; margin: -5px auto 0; display: block; width: 96%;}

@keyframes reflection {0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } 80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } 81% { -webkit-transform: scale(4) rotate(45deg); opacity: 0.7; } 100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }}
@keyframes fadeup {from {opacity: 0;transform: translateY(20px);} to {opacity: 1; transform: translateY(0);}}
@keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}

/* CRMどっち派CP用 */
#wrapper .cv_btn {
position: absolute;
left: 8%;
bottom: 19%;
animation: spin 1s ease-in-out infinite;
}
#wrapper .cv_btn.cv_btn_crm {
bottom: 14.3%;
}

/* coupon */
.couponArea {
	position: relative;
}
.codecopy {
    width: 100%;
    text-align: center;
	position: absolute;
    top: 16px;
}
.copy-btn{
    width: 85%;
    font-size: min(3.5vw, 28px);
    border: 1px solid #7b7b7b;
    border-radius: 5px;
    background: #ddd;
	padding: 5px;
	color: #000;
}
@media screen and (max-width: 640px) {
	.copy-btn{
		padding: 4px;
	}
	.codecopy {
		top: 8px;
	}
	#wrapper .cv_btn.cv_btn_crm {
    bottom: 14.5%;
    width: 84%;
	}
}