@charset "UTF-8";

/*--------------------------------------
common
--------------------------------------*/
html{font-family:'Noto Sans JP', sans-serif;color:#3f3a39;background:#2B2B2B;}
html *{box-sizing:border-box;}
body{overflow-x:hidden;position:relative;}
img{width:100%;height:auto;}
picture{display:block;}
section h1{position:relative;text-align:center;}
sup{display:inline-block;vertical-align:super;/*font-size:60%;*/font-size:40%;position:relative;top:-0.25em;}
div,h1,h2,h3,h4,h5,p{letter-spacing:0.1em;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
.tac{text-align:center;}
.strng{font-weight:bold;}
.wball{word-break:break-all;}
.t_grad{display:inline-block;background:linear-gradient(90deg, rgba(231, 56, 40, 1) 0%, rgba(227, 0, 127, 1) 45%, rgba(242, 150, 0, 1) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.t_grad_r{display:inline-block;background:linear-gradient(90deg, rgba(229,0,18,1) 0%, rgba(163,0,0,1) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.ls-05em{letter-spacing:-0.5em;}
hr{background:rgb(143,143,143);background:linear-gradient(90deg, rgba(143,143,143,1) 0%, rgba(178,178,178,1) 45%, rgba(143,143,143,1) 100%);width:100%;height:2px;border:0;}
.cpc{display:block;}
.csp{display:none;}
.cpcib{display:inline-block;}
.brsp{display:none;}
.brpc{display:block;}
.brj980{display:block;}
.br480,
.br980{display:none;}
.tpink{color:#F6688B;}
.bgpink{background:#F6688B;}
@media(max-width:768px) {
	.cpc{display:none;}
	.csp{display:block;}
	.cpcib{display:none;}
	.brsp{display:block;}
	.brpc{display:none;}
}

.wrapper{width:100%;max-width:393px;margin:0 auto;position:absolute;top:0;left:50%;transform:translateX(-50%);}
@media(min-width:769px) {
	body:before{content:"";display:block;background:url(../img/top_bg_pc.png) no-repeat;background-size:contain;width:1440px;height:1024px;position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:0;}
}

.headerArea{position:absolute;top:0;right:0;width:100%;height:auto;overflow:hidden;}
.headerArea.open{height:auto;}
header{position:relative;top:0;right:-100%;z-index:9999;width:100%;height:auto;transition:.3s ease-out;overflow:hidden;}
.lineBtn{display:block;text-align:left;padding-right:0px;padding-top:0px;width:50px;height:50px;border-radius:25px;background-color:#fff;border:none;position:absolute;z-index:99999;right:20px;top:50px;cursor:pointer;}
#btnLine{
	display:block;
	position:absolute;top:25px;right:16px;
	width:18px;height:2px;
	margin:-1px 0 0 -7px;
	background:#2B2B2B;
	-webkit-transition:.2s;transition:.2s;
}
#btnLine:before, #btnLine:after{
	display:block;
	content:"";
	position:absolute;top:50%;left:0;
	width:18px;height:2px;
	background:#2B2B2B;
	-webkit-transition:.3s;transition:.3s;
}
/*
.lineBtn:hover #btnLine,
.lineBtn:hover #btnLine:before,
.lineBtn:hover #btnLine:after{background:#000;}
#topMenu.open .lineBtn:hover #btnLine{background:rgba(0,0,0,0);}
*/
#btnLine:before{margin-top:-8px;}
#btnLine:after{margin-top:7px;}
#btnLine.close{background:transparent;}
#btnLine.close:before, #btnLine.close:after{margin-top:0;}
#btnLine.close:before{transform:rotate(-45deg);-webkit-transform:rotate(-45deg);}
#btnLine.close:after{transform:rotate(-135deg);-webkit-transform:rotate(-135deg);}
header.open{width:100%;height:auto;right:0;}
header nav{position:relative;/*left:100%;*/height:auto;padding-bottom:125px;transition:.3s ease-out;z-index:9;}
header.open nav{display:block;/*left:0;*/}
header nav ul{position:relative;}
ul.nav_pc li,
header nav ul li{position:relative;line-height:2em;margin:0 0 0.25em;color:#fff;text-align:center;font-size:13px;font-weight:bold;}
ul.nav_pc li a,
header nav ul li a{font-size:16px;color:#fff;margin:2em auto 0;display:block;}
header nav ul li a:hover{color:#000;text-decoration:underline;}
ul.nav_pc li:nth-child(1) a img,
header nav ul li:nth-child(1) a img{width:104px;}
ul.nav_pc li:nth-child(2) a img,
header nav ul li:nth-child(2) a img{width:110px;}
ul.nav_pc li:nth-child(3) a img,
header nav ul li:nth-child(3) a img{width:117px;}
ul.nav_pc li:nth-child(4) a img,
header nav ul li:nth-child(4) a img{width:202px;}
.store{background:#2B2B2B;width:90%;margin:20px auto 0;color:#fff;display:flex;align-items:center;border-radius:20px;padding:24px 18px;justify-content:space-between;}
.store p{font-size:13px;font-weight:bold;letter-spacing:0;line-height:1.5em;}
.store p .annote{font-size:10px;font-weight:normal;}
.store figure{width:100px;margin-left:10px;}
header .store{margin:30px auto 10px;}
header .tiktok{width:90%;margin:30px auto;text-align:center;}
@media(max-width:768px) {
	#btnLine{top:25px;width:18px;right:16px;}
	#btnLine:before, #btnLine:after{width:18px;}
	#btnLine:before{margin-top:-9px;}
	#btnLine:after{margin-top:6px;}
}
nav{width:100%;position:absolute;top:0;left:0;}
nav h1{width:180px;padding:120px 0 10px;margin:0 auto;}

.floatingL,
.floatingR{display:none;position:fixed;top:50vh;transform:translateY(-50%);width:400px;}
.floatingL{right:calc(50% + 200px + 2%);}
.floatingL h2{margin:0 auto;text-align:center;color:#fff;font-size:16px;line-height:2em;}
.floatingL h2 img{width:133px;display:block;margin:10px auto 5px;}
.floatingL ul{display:flex;justify-content:space-evenly;align-items:center;margin:10px auto 40px;}
.floatingL ul li{width:119px;}
.floatingR{left:calc(50% + 200px + 2%);}
.floatingR .store{background:#F6688B;color:#fff;}
.floatingR ul.nav_pc{width:90%;margin:0 auto 30px;}
.floatingR ul.nav_pc li{text-align:left;}
.floatingR .tiktok{width:90%;margin:30px auto 40px;}
.tiktok img{width:54px;}
@media(min-width:1440px) {
	.floatingL{right:calc(50% + 200px + 5%);}
	.floatingR{left:calc(50% + 200px + 5%);}
}
@media(min-width:1280px) and (min-height:648px) {
	.floatingL,
	.floatingR{display:block;}
}

/*--------------------------------------
mv
--------------------------------------*/
#mv {position:relative;max-width:1600px;margin:0 auto;z-index:10;}
.scroll{position:absolute;left:-15%;bottom:270px;transform:rotateZ(90deg);}
.scroll p{font-size:16px;font-weight:bold;width:180px;border-bottom:1px solid #fff;color:#fff;text-align:right;padding-bottom:5px;padding-right:20px;position:relative;}
.scroll p:after{content:"";width:12px;height:10px;display:block;background:url(../img/btn_white.svg) no-repeat;background-size:contain;position:absolute;top:50%;right:0%;transform:translateY(-50%);}
.areaYellow{background:#FFD000;display:flex;align-items:center;justify-content:space-around;position:absolute;bottom:0;height:125px;padding:10px 20px;width:100%;z-index:19999;}
.areaYellow .areaL{width:154px;}
.areaYellow .areaR{width:160px;}
.areaYellow .areaR img.renewal{width:147px;}
.areaYellow .areaR img.logo{width:154px;margin-top:10px;}
.areaYellow .areaR img.purchase{width:155px;margin-top:10px;}


#about{background:#2B2B2B;padding:50px 0;color:#fff;text-align:center;line-height:2em;overflow:hidden;position:relative;z-index:10;}
#about h2{font-size:24px;line-height:1.5em;}
#about p{margin-top:50px;font-size:13px;}

#about h3{width:149px;margin:50px auto 40px;}
#about h4{width:100%;padding-right:10%;font-size:13px;margin:0 auto 0 0;text-align:left;line-height:1.5em;position:relative;cursor:pointer;}
#about h4:after{content:"";width:12px;height:10px;display:block;background:url(../img/btn_black.svg) no-repeat;background-size:contain;position:absolute;top:50%;right:0;transform:translateY(-50%);transition: .5s;}
#about h5{font-size:13px;margin:0 auto;line-height:1.5em;}

#productSwiper{width:100%;margin:50px auto 30px;}
#productSwiper img{height:120px;width:auto;}

.floatingL .btn,
#about .btn{width:170px;height:64px;margin:0 auto;border-radius:32px;background:#fff;line-height:64px;color:#2B2B2B;position:relative;text-align:center;}
#about .btn{margin:0 auto 72px;}
.floatingL .btn:after,
#about .btn:after{content:"";width:12px;height:10px;display:block;background:url(../img/btn_black.svg) no-repeat;background-size:contain;position:absolute;top:50%;right:15%;transform:translateY(-50%);}
.floatingL .btn a,
#about .btn a{color:#2B2B2B;padding-right:10%;display:block;}
#about .research{background:#F7F6F3;padding:20px;width:90%;margin:20px auto;color:#000;border-radius:12px;}
#about .research.open{/*border:1px solid #F9F5EF;*/background:#F9F5EF;color:#2B2B2B;margin-bottom:50px;}
#about .research.open h4:after{transform:translateY(-50%) rotateZ(90deg);}
#about .research .content{display:none;border-top:3px dotted #2B2B2B;margin-top:30px;padding:0 0 50px;}
#about .research .content figure.qnum{width:38px;margin:50px auto 0;}
#about .research .content figure.graph{width:249px;margin:1em auto;}
#about .research .content figure.graph#g1_2{width:277px;}
#about .research .content figure.graph#g2_1{width:295px;}
#about .research .content figure.graph#g2_2{width:299px;}
#about .research .content figure.graph#g2_3{width:293px;}
#about .research .content h5{text-align:center;margin:1em auto 1.5em;letter-spacing:0.025em;}
#about .research#research3 .content h5{text-align:justify;font-size:16px;margin:50px auto 1.5em;}
#about .research .content p{font-size:12px;line-height:1.5em;text-align:justify;margin:0 auto;letter-spacing:0.025em;}
#about .research .sterm{display:inline-block;padding-left:1em;}

#points{background:#F9F5EF;padding:72px 0;}
#points h2{margin:0 auto;text-align:center;color:#2B2B2B;font-size:16px;line-height:2em;}
#points h2 img{width:125px;display:block;margin:10px auto 5px;}
#points ul.points{width:90%;margin:2em auto;}
#points ul.points li{display:flex;align-items:center;margin:20px auto;flex-wrap:Wrap;}
#points ul.points li figure.pNum{width:50px;height:50px;margin-right:10px;}
#points ul.points li h3{width:calc(100% - 60px);line-height:1.5em;font-size:13px;font-weight:bold;}
#points ul.points li figure.point{width:100%;margin:20px auto;}
#points ul.points + p{margin-top:3em;font-size:13px;font-weight:bold;}
#points #calendar > p{font-weight:bold;}
#points .calendar{background:#fff;width:90%;margin:20px auto;padding:20px;display:flex;align-items:center;justify-content:space-between;}
#points .calendar h6{font-size:13px;font-weight:bold;line-height:1.5em;letter-spacing:0.025em;}
#points .calendar p.annote{font-size:10px;line-height:1.5em;margin-top:1em;letter-spacing:0.025em;}
#points .calendar input {width:10em;white-space:normal;border:0;border-radius:10px;font-size:12px;padding:10px;}
#points .calendar .qr{width:140px;}
@media(min-width:769px) {
	#points .calendar{padding:20px 10px 20px 20px;}
}

#lineup{padding:72px 0;}
#lineup h2{margin:0 auto;text-align:center;color:#fff;font-size:16px;line-height:2em;}
#lineup h2 img{width:130px;display:block;margin:10px auto 5px;}
#lineup ul.lineup{width:353px;max-width:90%;margin:30px auto;color:#fff;}
#lineup ul.lineup li{margin-bottom:30px;}
#lineup ul.lineup h3,
#lineup ul.lineup p.price{font-size:16px;text-align:center;line-height:1.5em;}
#lineup ul.lineup figure.pkg{margin:20px auto;}
#lineup ul.lineup p{font-size:12px;line-height:1.5em;}
#lineup ul.lineup .btns{margin:47px auto 50px;height:46px;overflow:hidden;transition:.3s ease-out;}
#lineup ul.lineup .btns.open{height:344px;}
#lineup ul.lineup .btns .btn_purchase{text-align:center;display:block;background:#fff;border-radius:25px;height:46px;line-height:46px;font-size:14px;color:#2B2B2B;margin-bottom:100px;transition:.24s ease-out;cursor:pointer;}
#lineup ul.lineup .btns .btn_purchase figure.cart{position:relative;width:14px;height:12px;display:inline-block;margin-left:5px;}
#lineup ul.lineup .btns .btn_purchase figure.cart img{position:absolute;top:0;left:0;transition:.24s ease-out;}
#lineup ul.lineup .btns .btn_purchase:hover figure.cart img.cart_b{opacity:0;}
#lineup ul.lineup .btns a{text-align:center;display:block;background:#fff;border-radius:25px;height:46px;line-height:46px;font-size:14px;color:#2B2B2B;margin-bottom:20px;transition:.24s ease-out;}
#lineup ul.lineup .btns a.btn_amazon{background:#F2BB40;}
#lineup ul.lineup .btns a.btn_rakuten{background:#BE0000;color:#fff;}
#lineup ul.lineup .btns .btn_purchase:hover,
#lineup ul.lineup .btns a:hover{background:#FF5193;color:#fff;text-decoration:none;}

#movies{padding:72px 0 122px;overflow:hidden;}
#movies h2{margin:0 auto;text-align:center;color:#fff;font-size:16px;line-height:2em;}
#movies h2 img{width:130px;display:block;margin:10px auto 5px;}
#movies h5{color:#fff;line-height:1.5em;font-size:16px;}
#movies iframe{width:320px;max-width:100%;height:180px;border-radius:15px;margin:0 auto 12px;}
#movies .swiper-slide {
    position: relative;
    aspect-ratio: 16 / 9;
    container-type: size;
    &:after {
        content: "";
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(100% - 14cqh);
        clip-path: polygon(0% 0%, 0% 100%, 44% 100%, 44% 49%, 56% 49%, 56% 67%, 0% 67%, 0% 100%, 100% 100%, 100% 0%);
    }
}
#movies #movieWrapper{position:relative;width:90%;margin:50px auto 30px;}
#movies .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:initial;top:105%;top:calc(105% + 60px);}
#movies .swiper-pagination-bullet{background:#fff;}
#movies .swiper-pagination-bullet-active{background:#F6688B;}
#movies .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 7px 4px;}

#introduction{padding:50px 0 70px;}
#introduction h2{margin:0 auto;text-align:center;color:#fff;font-size:16px;line-height:2em;}
#introduction h2 img{width:259px;display:block;margin:10px auto 5px;}
#introduction .introduction{background:#fff;width:90%;margin:50px auto 30px;border-radius:20px;padding:20px 20px 50px;}
#introduction .danny{width:319px;max-width:100%;margin:0 auto;}
#introduction h6{line-height:1.5em;font-size:12px;font-weight:bold;margin-top:1.5em;}
#introduction p{line-height:1.5em;font-size:14px;font-weight:bold;letter-spacing:0.025em;}
#introduction p + h6{border-top:3px dotted #F6688B;margin-top:1.25em;padding-top:1.5em;}
#introduction .tiktok{width:90%;margin:10px auto 70px;}
#introduction .tiktok a{display:flex;align-items:center;justify-content:space-around;}
#introduction .tiktok a:hover{text-decoration:none;}
#introduction .tiktok p{font-size:20px;font-weight:bold;color:#fff;}
#introduction .store p{font-size:13px;letter-spacing:0;}

.swiper-button-next2,
.swiper-button-prev2 {
    position: absolute;
    top: 50%;
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color,var(--swiper-theme-color));
}
.swiper-button-prev2:after,
.swiper-rtl .swiper-button-next2:after {
    content: 'prev';
}
.swiper-button-next2:after,
.swiper-rtl .swiper-button-prev2:after {
    content: 'next';
}
.swiper-button-next2:after,
.swiper-button-prev2:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none!important;
    letter-spacing: 0;
    text-transform: none;
    font-variant: initial;
    line-height: 1;
}
.swiper-button-next2,
.swiper-button-prev2{color:#fff;}

.remodal-overlay{z-index:100000;background:rgba(43,43,43,.9);}
.remodal-wrapper{z-index:100001;}

.inview{opacity:0;transform:translateY(24px);transition:.3s ease-out;}
.inview.is-show{opacity:1;transform:translateY(0);}
ul.points .inview{opacity:0;transform:scale(0.1);transform-origin:center center;transition:.3s ease-out;}
ul.points .inview.is-show{opacity:1;transform:scale(1.0);}

@media(min-width:1102px) {

}
@media(max-width:768px) {
	
}
@media(max-width:389px){
	.store p,
	#introduction .store p{font-size:3.2vw;}
}


/*--------------------------------------
footer
--------------------------------------*/
footer{width:100%;margin:0;padding:0 0 100px;text-align:center;position:relative;border-top:2px solid #fff;}
footer .copyright{height:80px;color:#fff;position:relative;}
footer .copyright p{position:relative;top:50%;transform:translateY(-50%);font-size:10px;font-weight:normal;}
@media(max-width:768px) {
	footer .copyright p{font-size:8px;}
}
/*--------------------------------------
topagetop
--------------------------------------*/
/*
#topagetop {display:block;position:fixed;z-index:500;bottom:30px;right:20px;width:50px;height:50px;background:rgba(255,255,255,0.5);border-radius:50%;text-indent:-9999px;opacity:1;cursor:pointer;transition:0.5s ease-out;}
@media(max-width:768px){
	#topagetop {right:10px;bottom:10px;}
	#topagetop.bottom {bottom:100px;}
}
#topagetop:hover {background:#000;transition:0.5s ease-out;}
#topagetop:after {display:block;position:absolute;bottom:25px;left:22px;width:20px;height:1px;border-bottom:1px solid #000;content:"";transform:rotate(45deg);transition:0.5s ease-out;}
#topagetop:before {display:block;position:absolute;bottom:25px;left:7px;width:20px;height:1px;border-bottom:1px solid #000;content:"";transform:rotate(-45deg);transition:0.5s ease-out;}
#topagetop:hover:before,
#topagetop:hover:after {border-color:#fff;transition:0.5s ease-out;}
*/