@charset "utf-8";

/* 横スクロール防止（440px以下で右余白が出るのを防ぐ） */
html, body {
}
html {
	max-width: 100vw;
}
body {
	max-width: 100%;
}

@media screen and (max-width: 1920px) {
    html {
        font-size: 0.5208333333vw;
    }
}

/* 背景画像 */
.fix-bg { 
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1; 
	width: 100%;
	height: 100vh; 
	pointer-events: none;
	/* contain: paint はスクロール時の再描画パスによっては逆効果になるため付与しない */
}

/* slick操作中でも縦スクロールを優先（iOSでスクロールが詰まる対策） */
.slick-slider,
.slick-list,
.slick-track{
	touch-action: pan-y;
}

.fix-bg .bg1,
.fix-bg .bg2 { 
	width: 100%; 
	max-width: 1280px; 
	height: 100%; 
	margin: 0 auto;
}

.fix-bg .bg1 { 
	z-index: 2; 
	background: url('../img/bg/fix-1.webp') no-repeat 50% 0 / 1280px auto;
	position: absolute; 
	left: 50%; 
	top: 0; 
	transform: translateX(-50%);
}

.bg1 p{
	max-width: 1100px;
    margin: 0 auto 0;
    font-size: 10px;
    font-weight: 500;
	position: relative;
	top: 59%;
}

@media (max-width: 1280px) {
	.fix-bg .bg1{
		background: url('../img/bg/fix-1@1280.webp') no-repeat 50% 0 / 1280px auto;
	}
}
@media (max-width: 896px) {
	.fix-bg .bg1{
		background: url('../img/bg/fix-1@896.webp') no-repeat 50% 0 / 1280px auto;
	}
}
@media (max-width: 640px) {
	.fix-bg .bg1 { 
		background: url('../img/bg/fix-1@sp.webp') no-repeat 50% 0 / 100% auto;
	}
}

.spacer { 
	height: 560px;
}

.note { 
	width: 100%;
}

.note ul { 
	width: 100%; 
	font-size: 0;
}

.note ul li { 
	font-size: 10px;
}

@media (max-width: 481px) {
	.spacer { 
		height: 40vh;
	}
}

@keyframes shiny {
   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: 1;}
 100% { -webkit-transform: scale(20) rotate(45deg); opacity: 0;}
}

#container{
	background: #AFDBFB;
}

/* KV */
#kv { 
	position: relative; 
	z-index: 10;
	background: linear-gradient(180deg, #AFDBFB 33.69%, rgba(175, 219, 251, 0.00) 70.88%);
	min-height: 350px;
	height: auto;
}

#kv .inner-kv { 
	width: 100%; 
	z-index: 2;
	margin: 0 auto;
	max-width: 1280px;
	position: relative;
}

#kv .inner-kv.sp{
	display: none;
	max-width: 100%;
}

#kv .content_innner{
	display: flex;
}

#kv .inner-kv.pc .logo{
	position: absolute;
	top: 5%;
	left: 25%;
	max-width: 195px;
}

#kv .inner-kv.pc .logo img{
	width: 100%;
}

#kv .product{
	position: absolute;
    z-index: 1;
    left: 46%;
    max-width: 320px;
}

@media (max-width: 1280px) {
	#kv .product{
		left: 45%;
	}
}

@media (max-width: 1180px) {
	#kv .product{
		left: 41%;
        top: 3%;
	}
}

#kv .product img{
	width: 100%;
}

.mv_bg{
	position: absolute;
	top: 0;
	z-index: -1;
}

.mv_bg img{
	object-fit: cover;
	width: 100%;
}

/*
#kv .kv-content{
	background: url(../img/bg/kv-content_bg.webp) no-repeat;
    width: 720px;
    background-size: cover;
    height: 838px;
	position: relative;
	top: 5.2rem;
}
	*/

#kv .kv-content-inner{
	padding: 550px 0 0 120px;
	text-align: center;
}

#kv .kv-copy{
	position: relative;
	top: -24px;
}

#kv .news { 
	max-width: 396px; 
	margin: 0 auto;
	text-align: left;
}

#kv .news a { 
	display: block; 
	width: 100%; 
	background: linear-gradient(180deg, #FFF 0%, #C7E7FD 100%);
}

#kv .news a dl { 
	display: table; 
	width: 100%;
}

#kv .news a dl dt,
#kv .news a dl dd { 
	display: table-cell; 
	vertical-align: middle;
}

#kv .news a dl dt { 
	width: 90px; 
}

#kv .news a dl dt img { 
	width: 100%;
}

#kv .news a dl dd { 
	padding-left: 14px; 
	color: #2E58B0; 
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
}

#kv .news a dl dd span.small{
	font-size: 10px;
}

#kv .news a dl dd time { 
	display: block; 
	color: #757A7B;
	margin-top: 8px;
}

#kv .kv-product img,
#kv .kv-eye img{
	width: 100%;
}

#kv .kv-eye{
	width: 567px;
}

.kv-copy-small{
	color: #fff;
	font-size: 10px;
	text-align: left;
	width: 396px;
	margin: 18px auto 0;
}

@media (max-width: 896px) {
	#kv .inner-kv.pc{
		display: none;
	}

	#kv{
		overflow-x: hidden;
		
	}

	#kv .product{
		position: relative;
		left: 0;
		top: 0;
		z-index: -1;
		max-width: 100%;
		width: 100%;
	}
	#kv .inner-kv.sp{
		display: block;
		position: relative;
	}

	#kv .logo{
		max-width: 150px;
		margin: 0 auto;
		padding-top: 20px;
	}

	#kv .content_text-inner{
		background: url(../img/bg/bg_news.webp) no-repeat;
		background-size: cover;
		height: 474px;
        position: relative;
		top: -70px;
	}
	#kv .news{
		bottom: 0;
        width: 100%;
        position: relative;
        top: 42rem;
	}
	.kv-copy-small{
        margin: 210px 20px 0;
	}
	img{
		width: 100%;
	}
}

@media (max-width: 480px) {
	#kv .news a dl dd { 
		font-size: 10px;
	}
	#kv .product{
		top: 10px;
	}
	#kv .content_text-inner{
		height: 290px;
		top: -29px;
	}
	#kv .news{
		top: 36rem;
	}
	.kv-copy-small{
		margin: 90px 20px 0;
	}
}

@media (max-width: 440px) {
	#kv .news{
		width: 90%;
	}
}

/* campaign */
#campaign { 
	position: relative; 
	z-index: 9;
	top: -60px;
}
#campaign .inner { 
	position: relative; 
	width: 100%; 
	max-width: 1280px; 
	margin: 0 auto; 
}

#campaign .campaign-inner{
	padding: 220px 0 195px 14rem;
    text-align: center;
}

#campaign .campaign-title{
	margin-bottom: 24px;
}

#campaign .campaign-code{
	font-size: 18px;
	color: #2E58B0;
	font-weight: 700;
	border-radius: 57.519px;
	padding: 0 24px 6px;
	background: linear-gradient(180deg, #FFF 0%, #D2E5FF 100%);
	box-shadow: 0 5.752px 12.942px 0 #9CB5DB;
	margin: 0 32% 0 auto;
	max-width: 180px;
	line-height: 1;
}

#campaign .campaign-code span{
	font-size: 12px;
}

#campaign .campaign-content{
	max-width: 406px;
	margin: 0 auto;
}

#campaign .campaign-content img,
#campaign .campaign-text img{
	width: 100%;
}

#campaign .campaign-text{
	max-width: 400px;
	margin: 0 auto;
}

#campaign .campaign-btn{
	max-width: 400px;
	margin: 18px auto 8px;
}

#campaign .campaign-btn a{
	display: block;
}

#campaign .campaign-btn a:hover{
	opacity: 0.8;
}

#campaign .campaign-btn img{
	width: 100%;
}

#campaign .campaign-bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

#campaign .campaign-bg img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 896px) {
	#campaign { 
		top: -246px;
	}
	#campaign .campaign-inner{
		padding: 170px 20px;
	}
	#campaign .campaign-content{
		max-width: 560px;
		margin-left: auto;
	}
	#campaign .campaign-text{
		max-width: 560px;
		margin-left: auto;
	}
	#campaign .campaign-btn{
		max-width: 560px;
		margin: 18px 0 18px auto;
	}
	#campaign .campaign-code{
		margin: 0 0 0 auto;
	}
	
}
@media (max-width: 480px) {
	#campaign{
		top: -80px;
	}
	#campaign .inner{
		padding: 0 20px;
	}
	#campaign .campaign-inner{
		padding: 48px 0 64px;
	}
	#campaign .campaign-content{
		max-width: 274px;
		margin: 0 0 0 auto;
		padding-left: 40px;
	}
	#campaign .campaign-text{
		max-width: 265px;
		margin: 0 0 0 auto;
		padding-left: 40px;
	}
	#campaign .campaign-btn{
		max-width: 250px;
    	margin: 18px 0 0 auto;
		padding-left: 18px;
	}
	#campaign .campaign-code{
		font-size: 12px;
		max-width: 120px;
		margin: 0 0 0 auto;
		padding-top: 2px;
	}
	#campaign .campaign-code span{
		font-size: 9px;
	}
}

/* title */
#title { 
	position: relative; 
	z-index: 9;
	top: -240px;
}

#title .inner { 
	position: relative; 
	width: 100%; 
	max-width: 1280px;
	margin: 0 auto;
}

#title .title { 
	text-align: center;
	background: url('../img/tit/title_bg.webp') no-repeat 50% 0 / 100% auto;
	background-size: cover;
	padding: 69px 0 79px;
}

#title .title img { 
	width: 100%; 
	max-width: 730px;
}

@media (max-width: 896px) {
	#title{
		top: -420px;
	}
	#title .title img{
		max-width: 100%;
		position: relative;
		left: -6px;
	}
	#title .title{
		background: url('../img/tit/title_bg@sp.webp') no-repeat 50% 0 / 100% auto;
		padding: 108px 0 128px;
	}
}
@media (max-width: 480px) {
	#title{
		top: -145px;
	}
	#title .title{
		background: url(../img/tit/title_bg_sp.webp) no-repeat;
		background-size: cover;
		padding: 80px 0;
	}
}

/* review */
#review { 
	position: relative; 
	z-index: 9; 
	top: -200px;
}

#review .inner { 
	position: relative; 
	width: 100%; 
	max-width: 1280px; 
	margin: 0 auto;
	border-radius: 20px 20px 0 0;
	padding-bottom: 80px;
	background: linear-gradient(180deg, #52ADFF 0%, #2B80D5 34.13%, #C7E3F6 64.42%, #4DB4FF 89.9%);
}

#review .review-title { 
	text-align: center; 
	margin-bottom: 24px;
}

#review .review-inner {
	text-align: center;
	position: relative;
	top: -60px;
}

#review .review-list{
	max-width: 482px;
	margin: 32px auto 48px;
}

#review .review-list img{
	width: 100%;
}

#review .review-attention{
	text-align: left;
	color: #fff;
	font-weight: 700;
	max-width: 482px;
	font-size: 10px;
	margin: 12px auto 32px;
}

.review-slider-wrap{
	max-width: 90%;
	margin: 32px auto 0;
	overflow: hidden;
}

.review-slide a{
	display: block;
	text-decoration: none;
}

.review-slide a:hover{
	opacity: 0.8;
}

.review-slide-box{
	width: 90%;
}

.review-slide-box img{
	width: 100%;
}

#review .review-slider .slick-list{
	overflow: hidden;
}

#review .slick-dots{
	position: static;
	margin-top: 24px;
	text-align: center;
}

#review .slick-dots li{
	display: inline-block;
	margin: 0 4px;
}

#review .slick-dots li button{
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #D9D9D9;
	padding: 0;
	font-size: 0;
}

#review .slick-dots li.slick-active button{
	background: #fff;
}


  

@media (max-width: 896px) {
	#review .review-inner{
		max-width: 388px;
		margin: 0 auto;
		top: -38px;
	}
}
@media (max-width: 640px) {
	#review{
		top: 80px;
	}
	.review-slide-box{
		width: 100%;
	}
	#review .review-list{
		margin: 18px auto;
	}
	#review .pc{
		display: none;
	}
	#review .sp{
		display: block;
	}
	.review-text{
		max-width: 285px;
		margin: 0 auto;
	}
}

/* 440px以下：スライドを100%幅にし、左右のチラつきを非表示 */
@media (max-width: 440px) {
	.review-slider-wrap{
		max-width: 100%;
	}
	.review-slider .slick-list{
		overflow: hidden;
	}
	.review-slide-box{
		width: 100%;
	}
}

@media (max-width: 440px) {
	#review .review-inner{
		margin: 0 20px;
	}
}

/* PROGRAM */
#program { 
	position: relative; 
	margin-bottom: -60px;
    z-index: 9;
    top: -210px;
}

#program .inner { 
	position: relative; 
	width: 100%; 
	max-width: 1280px;  
	margin: 0 auto; 
	padding-bottom: 64px;
	background: url('../img/program/program_bg.webp') no-repeat;
	background-size: cover;
}

#program .ctn{
	position: relative;
    top: -80px;
}

#program .ttl{
	background: url('../img/program/title_bg.webp') no-repeat;
	background-size: cover;
	padding: 120px 0 95px;
    top: -120px;
    position: relative;
}

#program .program-title{
	text-align: center;
	max-width: 400px;
	margin: 0 auto;
}

#program .program-title img{
	width: 100%;
}

#program .slider { 
	margin-bottom: 40px;
}

#program .slick-slide img{
	width: 100%;
}

#program .slick-slide img.sp{
	display: none;
}

.slick-arrow:before{
	top: 100%;
}

#program .box { 
	width: 96%; 
	max-width: 400px; 
	margin: 0 auto;
}

#program .box .box-inner { 
	position: relative; 
	padding: 24px 36px; 
	background: #fff; 
	border-radius: 30px;
}

#program .box .box-ctn { 
	padding-top: 20px;
}

#program .slick-arrow{ 
	bottom: -50px; 
	left: 50%; 
	transform: translateX(-50%); 
	background: none;
}

#program .slick-prev { 
	margin-left: -130px;
}

#program .slick-next { 
	margin-left: 130px;
}

#program .slick-prev:before ,
#program .slick-next:before { 
	border-color: #fff;
}

@keyframes circle {
	0% { stroke-dasharray: 0 366; }
	99.9%,to { stroke-dasharray: 366 366;}
}
#program .slide-aside { width: 80%; max-width: 640px; margin: 0 auto;}
#program .slide-aside ul { font-size: 0; text-align: center;}
#program .slide-aside ul li { position: relative; display: inline-block; width: 27px; margin: 0 8px;}
#program .slide-aside ul li span { position: relative; z-index: 2; display: block; color: #c0e8f9; font-size: 13px; font-weight: 700; cursor: pointer;}
#program .slide-aside ul li.current span { color: #fff;}
#program .slide-aside ul li:after{ content: ''; display: block; width: 22px; height: 22px; border: solid 2px #c0e8f9; border-radius: 50%;
 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1;
}
#program .slide-aside ul li svg { position: absolute; left: 50%; top: 50%; width: 25px; height: 25px; transform: translate(-50%,-50%) rotate(-90deg); z-index: 2;}
#program .slide-aside ul li svg circle { fill: transparent;}
#program .slide-aside ul li.current svg circle { stroke: #fff; stroke-width: 8; animation: circle 4.8s forwards;}

/* モバイルはスクロール負荷を下げるため、リング描画アニメを無効化 */
@media (max-width: 896px) {
	#program .slide-aside ul li.current svg circle {
		animation: none;
	}
}

@media (max-width: 896px) {
	#program .program-title{
		max-width: 328px;
		margin: 0 auto;
	}
	#program .slick-slide img.sp{
		display: block;
	}
	#program .slick-slide img.pc{
		display: none;
	}
	#program .ttl{
		background: url('../img/program/title_bg@sp.webp') no-repeat 50% 0 / 100% auto;
		background-size: cover;
		padding: 217px 0;
	}
}
@media (max-width: 480px) {
	#program{
		top: 60px;
	}
	#program .ttl{
		padding: 80px 0 60px;
	}
	#program .ctn{
		top: -100px;
	}

}

/* 440px以下：プログラムスライダーを100%幅にし左右のチラつきを非表示 */
@media (max-width: 440px) {
	#program .slider .slick-list{
		overflow: hidden;
	}
	#program .box{
		width: 100%;
	}
}
#howto { 
	position: relative; 
	z-index: 9;
	top: -60px;
}

#howto .inner {
	position: relative;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

#howto .program-title{
	max-width: 400px;
	margin: 0 auto;
}

#howto .program-title img{
	width: 100%;
}

#howto .ttl{
	background: url('../img/howto/title_bg.webp') no-repeat;
	background-size: cover;
	padding: 172px 0;
	text-align: center;
	top: -200px;
	position: relative;
	z-index: 1;
}

.howto-inner{
	text-align: center;
    position: relative;
    top: -270px;
    padding: 100px 0 120px;
    background: url(../img/howto/howto_bg.webp) no-repeat;
    background-size: cover;
}

.howto-text{
	max-width: 410px;
	margin: 0 auto;
	position: relative;
	left: 2%;
}

.howto-text img{
	width: 100%;
}

.howto-attention{
	font-size: 14px;
	font-weight: 700;
	margin: 18px auto;
	max-width: 380px;
	color: #5d5d5d;
}

.howto-attention span{
	text-align: right;
	font-size: 9px;
	display: block;
	color: #5d5d5d;
	position: relative;
	right: 4%;
}

.howto-point{
	max-width: 450px;
	margin:0 auto;
}

.howto-point img{
	width: 100%;
}

.howto-attention2{
	font-size: 10px;
	font-weight: 700;
	text-align: left;
	max-width: 450px;
	margin:18px auto 0;
	color: #5d5d5d;
}

@media (max-width: 896px) {
	#howto .program-title{
		max-width: 300px;
		margin: 0 auto;
	}
	#howto .ttl{
		background: url('../img/howto/title@sp.webp') no-repeat 50% 0 / 100% auto;
		background-size: cover;
		padding: 211px 0;
		top: -163px;
	}
	.howto-content{
		max-width: 410px;
		margin: 0 auto;
	}
}

@media (max-width: 480px) {
	#howto{
		top: 150px;
	}
	#howto .ttl{
		padding: 100px 0;
	}
	.howto-inner{
		padding: 100px 20px 120px;
	}
	.howto-attention{
		font-size: 12px;
	}
}

/* product */
#product {
	position: relative;
	z-index: 9;
	top: -450px;
	margin-bottom: -530px;
}

#product .program-title{
	max-width: 240px;
	margin: 0 auto;
}

#product .program-title img{
	width: 100%;
}

#product .inner {
	position: relative;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

#product .ttl{
	background: url('../img/product/title_bg.webp') no-repeat;
	background-size: cover;
	padding: 160px 0 145px;
	text-align: center;
	position: relative;
	z-index: 1;
}

#product .product-content{
	background: linear-gradient(180deg, #EBF6FF 46.63%, #D6E4FF 100%);
	padding: 120px 0 120px;
	position: relative;
    top: -80px;
}

#product .product-inner{
	display: flex;
	gap: 24px;
	justify-content: center;
	align-items: center;
}

#product .product-imge{
	max-width: 140px;
}

#product .product-imge img{
	width: 100%;
}

#product .product-text-title{
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 12px;
	color: #336BB8;
	border-radius: 4px;
	border: 1px solid #336BB8;
	margin-bottom: 8px;
	text-align: center;
}

#product .product-text{
	max-width: 250px;
}

#product .product-text img{
	width: 100%;
}

#product .product-text-name{
	padding-bottom: 14px;
	border-bottom: 1px solid #336BB8;
	margin-bottom: 14px;
}

#product .product-text-price{
	font-size: 16px;
	font-weight: 900;
	color: #636363;
}

#product .product-text-price span{
	font-size: 12px;
}

#product .product-text-btn{
	max-width: 440px;
	margin: 18px auto 0;
}

#product .product-text-btn img{
	width: 100%;
}

#product .product-attention{
	max-width: 430px;
	margin: 18px auto 0;
	font-size: 10px;
}

#product .product-text-btn a{
	display: block;
	text-decoration: none;
}

#product .product-text-btn a:hover{
	opacity: 0.8;
}

@media (max-width: 896px) {
	#product .ttl{
		background: url('../img/product/title_bg@sp.webp') no-repeat 50% 0 / 100% auto;
		background-size: cover;
		padding: 220px 0 212px;
	}
	#product .program-title{
		max-width: 210px;
		margin: 0 auto;
	}
}

@media (max-width: 480px) {
	#product{
		top: -250px;
	}
	#product .ttl{
		padding: 100px 0;
	}
	#product .product-inner{
		margin: 0 20px;
	}
	#product .product-content{
		padding: 100px 0 48px;
	}
	#product .product-inner{
		gap: 13px;
	}
	#product .product-text-price{
		font-size: 13px;
	}
	#product .product-text-price span{
		font-size: 8px;
	}
}

@media (max-width: 440px) {
	#product .product-attention{
		margin: 18px 20px;
	}
}

/* shop */
#shop { 
	position: relative; 
	z-index: 5;
}

#shop .inner { 
	position: relative; 
	width: 100%; 
	max-width: 1280px; 
	margin: 0 auto; 
	padding: 72px 0 280px; 
	background: url('../img/bg/shop_bg.webp') no-repeat 50% 0 / 1280px auto;
}

#shop h2 { 
	margin-bottom: 18px; 
	text-align: center;
}

#shop h2 img { 
	width: 48%; 
	max-width: 178px;
}

#shop h3 { 
	margin-bottom: 14px; 
	color: #fff; 
	font-size: 32px; 
	text-align: center;
}

#shop p { 
	margin-bottom: 45px; 
	color: #fff; 
	font-size: 16px; 
	text-align: center;
}

#shop .btn-shop { 
	width: 48%; 
	max-width: 240px; 
	margin: 0 auto;
}

#shop .btn-shop a { 
	display: block; 
	border-radius: 10px; 
	overflow: hidden;
}

#shop .btn-shop a img { 
	width: 100%;
}

#shop .btn-shop a:hover{
	opacity: 0.8;
}

#shop .btn-shop a img.sp {
	display: none;
}

#shop .btn-shop a:hover img{ 
	opacity: 1;
}

@media (max-width: 801px) {
	#shop .inner { 
		background: url('../img/bg/shop@sp.webp') no-repeat 50% 0 / cover;
	}

	#shop h3{ 
		font-size: 20px; 
		color: #FFF;
		text-shadow: 0 0 10.05px #336BB8;
		font-weight: 600;
		letter-spacing: 0;
	}

	#shop p { 
		font-weight: 700; 
		letter-spacing: 0;
		text-shadow: 0 0 10.05px #336BB8;
	}
}

@media (max-width: 480px) {
	#shop{
		top: 200px;
	}
	#shop .inner { 
		padding: 40px 0 64px;
	}

	#shop .btn-shop a { 
		display: block; 
		border-radius: 5px;
	}

	#shop .btn-shop a img.pc { 
		display: none;
	}

	#shop .btn-shop a img.sp { 
		display: block;
	}
}