/* CSS Document */
@import url("reset.css");
@import url("swiper-bundle.min.css");
@import url("common.css");


/* Common
---------------------------------------------------------- */
h3{
	color: var(--mainColor);
	font-size: 2.4rem;
	font-weight: 500;
	text-align: center;
}

.price{
	font-weight: 700;
	font-size: 2.8rem;
	line-height: 1.4;
}
.price small{ font-size: 1.8rem;}

@media screen and (max-width: 768px) and (orientation:portrait) {
	h3{ font-size: 1.5rem;}
	.price{ font-size: 2.2rem;}
	.price small{ font-size: 1.2rem;}
}

/* Animetion *****/
@keyframes fadeinBottom {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* movie
---------------------------------------------------------- */
#movie {
	position: relative;
	background-color: #000;
	display: grid;
}
#mov_overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 10;
	opacity: 1;
	transition: opacity 1s ease-in-out;
}

#mov_overlay.fadeOut {
	opacity: 0;
	pointer-events: none;
}

#mov_movie {
	width: 100%;
	aspect-ratio: 16/9;
}

.mov_text{
	position: absolute;
	bottom: 50px;
	left: 5vw;
	z-index: 100;
	width: 30%;
	max-width: 300px;
	min-width: 200px;
	-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.2)); /* SafariなどのWebkitブラウザ用 */
	filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.2)); 
	opacity: 0;
}
.mov_text.fadeIn{ animation: 2s fadeinBottom 1.5s forwards;}

.scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
	color: #fff;
    font-size: 13px;
    transform: translateX(-50%) translateY(-50%);
}
.scroll::after {
    content: '';
    position: absolute;
    right: 50%;
    top: 2rem;
    display: inline-block;
    background-color: #fff;
    transform : translateX(-50%);
    width : 1px;
    height : 50px;
    animation: scroll 1.5s infinite;
}
@keyframes scroll {
	0% {
		transform: scale(1, 0);
		transform-origin: 0 0;
	}
	50% {
		transform: scale(1, 1);
		transform-origin: 0 0;
	}
	50.1% {
		transform: scale(1, 1);
		transform-origin: 0 100%;
	}
	100% {
		transform: scale(1, 0);
		transform-origin: 0 100%;
	}
}
.scroll p{ margin: 0;}

@media screen and (max-width: 768px) and (orientation:portrait) {
	.scroll{ display: none;}
	.mov_text{
		width: 28%;
		min-width: inherit;
		bottom: 20px;
	}
}


/* mv Swiperコンテナの基本スタイル
---------------------------------------------------------- */
.swiper {
	position: relative;
	width: 100%;
	padding-bottom: 60px;
	background-color: var(--mainColor);
}

.swiper-slide {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.swiper-slide-active {
	transform: scale(1.05);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.swiper-slide video {
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	aspect-ratio: 9/16;
}

.video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
.video-overlay.hidden { opacity: 0;}

.swiper-button-prev,
.swiper-button-next {
	color: transparent;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 64px;
	height: 64px;
	margin-top: 0;
	z-index: 10;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* デフォルトのフォントアイコンを非表示にする */
.swiper-button-prev::after,
.swiper-button-next::after {
	content: '';
	display: none;
}

.swiper-button-prev::before,
.swiper-button-next::before{
	content: '';
	display: block;
	width: 60px;
	height: 60px;
    box-sizing: border-box;
}

/* 前へ矢印のスタイル */
.swiper-button-prev { left: 20px;}
.swiper-button-prev::before {
    border-top: 2px solid var(--trdColor);
    border-left: 2px solid var(--trdColor);
    transform: rotate(-45deg);
}

/* 次へ矢印のスタイル */
.swiper-button-next { right: 20px;}
.swiper-button-next::before {
	border-top: 2px solid var(--trdColor);
	border-right: 2px solid var(--trdColor);
	transform: rotate(45deg);
}

/* 矢印が非アクティブ（無効）な状態のスタイル */
.swiper-button-disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.swiper-pagination { bottom: 20px !important;}
.swiper-pagination-bullet {
	background-color: #ccc;
	opacity: 1;
}
.swiper-pagination-bullet-active { background-color: var(--trdColor);}

@media screen and (max-width: 768px) and (orientation:portrait) {
	.swiper-button-prev,
	.swiper-button-next {
		width: 34px;
		height: 34px;
	}
	.swiper-button-prev { left: 10px;}
	.swiper-button-next { right: 10px;}
	.swiper-button-prev::before,
	.swiper-button-next::before{
		width: 30px;
		height: 30px;
	}
}


/* mv
---------------------------------------------------------- */
#mv{
	position: relative;
	display: flex;
	width: 100%;
	height: 100vh;
}
.mv_image{
	width: 50%;
	height: 100%;
	overflow: hidden;
	line-height: 0;
}
.mv_image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mv_image:nth-of-type(1) img{ object-position: top right;}
.mv_image:nth-of-type(2) img{ object-position: top left;}

.mv_text{
	position: absolute;
	left: 0;
	bottom: 20px;
	z-index: 2;
	height: 70%;
}
.mv_text img{
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 768px) and (orientation:portrait) {
	#mv{
		flex-direction: column;
		height: auto;
	}
	.mv_image{ width: 100%;}
	.mv_text{
		height: 36%;
		bottom: 50%;
	}
}


/* about
---------------------------------------------------------- */
#about{
	margin: 0;
	background-color: #080403;
}

.about_inner{
	width: 100vw;
	padding: 0;
	-webkit-box-pack: center;
	justify-content: center;
}

.about_image{
	position: relative;
	width: 60%;
	padding: 30px 0 0 0;
	background-image: url("../img/about_bg.png");
	background-repeat: no-repeat;
	background-position: top left;
	background-size: auto 100%;
	overflow: hidden;
}
.about_image img{
	position: absolute;
	right: 0;
	left: 0;;
	bottom: 0;
	width: auto;
	height: auto;
	margin: 0 auto;
	max-height: 90%;
	opacity: 0;
}

.about_image.fadeIn img{ animation: fadeinBottom 1.5s forwards;}

.about_buy{
	width: 40%;
	padding: 30px 20px;
	color: #fff;
	text-align: center;
	flex-direction: column;
	justify-content: center;
}
.about_buy img{
	width: 55%;
	max-width: 500px;
}
#about .about_buy .link_btn{
	background-color: #fff;
	color: var(--mainColor);
}

@media screen and (max-width: 768px) and (orientation:portrait) {
	.about_inner{
		flex-direction: column;
	}
	.about_image{
		width: 100%;
		height: 55vh;
	}
	.about_buy{
		width: 100%;
		height: auto;
		padding: 20px;
	}
}


/* cre
---------------------------------------------------------- */
.cre_mainvis{ position: relative;}

.cre_image{ width: 100%;}
.cre_image img{
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	border-radius: 0 0 25vw 25vw;
}

.cre_mainvis h3{
	position: absolute;
	bottom: 20vh;
	left: 50%;
	transform: translateX(-50%); 
	z-index: 10;
	width: 760px;
	max-width: 70%;
	margin: 0 auto;
	text-align: center;
	-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.5));
	filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.5)); 
}

.cre_feature ul{
	margin: 0;
	-webkit-box-align: stretch;
	align-items: stretch;
	justify-content: center;
}
.cre_feature ul li{
	/* width: calc(100%/3); */
	width: 100%;
	margin: 20px 0;
	padding: 0 0 30px;
	list-style: none;
}

.cre_feature ul dl{
	justify-content: center;
	flex-wrap: nowrap;
}
.cre_feature ul dl dt{ width: 15%;}
.cre_feature ul dl dd{
	font-size: 1.2rem;
	margin: 0 0 0 2%;
}

.cre_point{
	position: relative;
	margin: 30px 0;
	padding: 15px;
	border-radius: 30px;
	background: linear-gradient(#f9f5df 0%, #f7f6df 53.97%, #f6ecdf 100%);
	text-align: center;
}

.cre_po{
	position: absolute;
	top: -10px;
	right: 0;
	left: 0;
	width: 30%;
	max-width: 80px;
	margin: auto;
}

@media screen and (max-width: 768px) and (orientation:portrait) {
	.cre_image img{
		aspect-ratio: 3/2.5;
		object-position: bottom;
	}
	.cre_mainvis h3{ bottom: 10vh;}
	.cre_feature ul{ border: none;}
	/* .cre_feature ul li{
		width: 100%;
		margin: 20px 0;
		padding: 0 0 30px;
		border-left: none;
		border-bottom: 1px solid #8E8E8F;
	} */
	.cre_feature ul dl dt{ width: 70%;}
	.cre_feature ul dl dd{
		margin: 0 0 0 5%;
		font-size: 1rem;
	}
	.cre_point{ padding: 10px;}
}


/* collagen
---------------------------------------------------------- */
#collagen{
	background: url("../img/clgn_bg.jpg") no-repeat 0 0 / cover;
}

.clgn_inner{
	padding: 5vw;
	background-color: #fff;
}

.clgn_point{
  -webkit-box-align: stretch;
  align-items: stretch;	
}

.clgn_point dl{
	width: 48%;
	margin: 20px 0;
}

.clgn_point dl dt{
	margin: 0 0 15px 0;
	font-size: 1.6rem;
	line-height: 1.4;
	justify-content: flex-start;
	flex-wrap: nowrap;
}

.clgn_point dl dt .no{
	margin: 0 1rem 0 0;
	padding: 0 1rem 0 0;
	border-right: 1px solid var(--trdColor);
	color: var(--trdColor);
	text-align: center;
	line-height: 1;
}
.clgn_point dl dt .no strong{ font-size: 3.0rem;}

.clgn_point dl dd p{
	margin: 10px 0 0 0;
	line-height: 1.3;
}

@media screen and (max-width: 768px) and (orientation:portrait) {
	.clgn_inner,
	.clgn_point dl{ width: 100%;}
}


/* feat
---------------------------------------------------------- */
#feat{ max-width: 1000px;}

.feat_image{
	width: 100%;
	margin: 30px auto;
	-webkit-box-align: flex-start;
	align-items: flex-start;
	flex-wrap: nowrap;
}

.feat_image:nth-child(even) img:first-child,
.feat_image:nth-child(odd) img:last-child{ width: 65%;}
.feat_image:nth-child(even) img:last-child,
.feat_image:nth-child(odd) img:first-child{ width: 35%;}

@media screen and (max-width: 768px) and (orientation:portrait) {
	#feat h4{ text-align: center;}
	.feat_image{
		width: 90%;
		margin: 30px auto;
		flex-wrap: wrap;
	}
	.feat_image:nth-child(odd){ flex-direction: column-reverse;}
	.feat_image:nth-child(even) img:first-child,
	.feat_image:nth-child(odd) img:last-child{ width: 100%;}
	.feat_image:nth-child(even) img:last-child,
	.feat_image:nth-child(odd) img:first-child{ width: 70%; margin: 20px auto;}
}


/* details
---------------------------------------------------------- */
#details{
	position: relative;
	margin-bottom: -10vw;
	padding: 30px 0 5vw;
	background-color: #fff;
	border-radius: 0 0 10vw 10vw;
}

.details_image{ width: 68%;}
.details_image img{
	width: 100%;
	max-width: inherit;
	border-radius: 0 20vh 20vh 0;
}
.details_price .about_buy{
	width: 32%;
	margin: 0;
	color: var(--mainColor);
}
.details_price .about_buy p{ text-align: left;}

.gallery{ margin: 20px auto;}
.gallery img{
	width: 32%;
	border-radius: 30px;
}

.details_info{
	-webkit-box-align: flex-start;
	align-items: flex-start;
}

.details_item{
	width: 48%;
	margin: 10px 0;
}

@media screen and (max-width: 768px) and (orientation:portrait) {
	#details{ padding: 20px;}
	.details_image,.details_price .about_buy,.details_item{
		width: 100%;
		padding: 0;
	}
	.details_price .about_buy{ margin-top: 20px;}
	.details_image img{ border-radius: 30px;}	
}


/* banner
---------------------------------------------------------- */
#banner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    width: 30%;
    max-width: 200px;
    aspect-ratio: 1;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

#banner.show {
    display: block !important;
    opacity: 1; 
    transform: translateY(0);
}

#banner.hidden{ 
    display: none !important;
}

#banner a{
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 30px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	line-height: 0;
	text-decoration: none;
	
}
.bn_bg{
	position: relative;
	width: 100%;
	height: 80%;
}
.bn_bg img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bn_logo{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 15px;
	z-index: 3;
	width: 60%;
	margin: auto;
}

#banner a .link_btn{
	display: flex;
	width: 100%;
	min-width: inherit;
	height: 20%;
	margin: 0;
	padding: 0;
	background-color: var(--subColor);
	border-radius: 0;
	font-size: 1rem;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	justify-content: center;
}

#banner a .link_btn span{
	position: relative;
	display: inline-block;
	padding: 0 2rem 0 0;
}
#banner a .link_btn span::after{
	content: '';
	position: absolute;
	top: calc(50% - 3px);
	right: 0;
	width: 6px;
	height: 6px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: rotate(45deg);
}

#banner a:hover .link_btn{ background-color: var(--mainColor);}

/* 閉じるボタン */
.close-btn{
	position: absolute;
	top: -8px;
	right: -8px;
	z-index: 10;
	font-size: 30px;
	cursor: pointer;
	width: 40px;
	height: 40px;
	line-height: 36px;
	text-align: center;
	background-color: var(--mainColor);
	border-radius: 50%;
	color: #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.close-btn:hover{
	color: var(--mainColor);
	background-color: #fff;
}

.insta_qr{ margin: 10vh 0 20px;}
.insta_qr p{
	margin: 10px 0 15px;
	text-align: center;
	font-size: 1.4rem;
}
.insta_qr a{
	display: inline-block;
	width: 200px;
	max-width: 60%;
	margin: auto;
	border: 1px solid rgba(0, 0, 0, 0.1);
	line-height: 0;
}
.insta_qr img{
	width: 100%;
}
.insta_qr a:hover{ border-color: var(--mainColor);}

@media screen and (max-width: 768px) and (orientation:portrait) {
	#banner{
		bottom: 0;
		left: 0;
		width: 100%;
		max-width: inherit;
		height: 60px;
		aspect-ratio: auto;
	}
	#banner a .link_btn{ height: 100%;}
	#banner a{ border-radius: 20px 20px 0 0;}
	.bn_bg,.close-btn{ display: none;}
	.insta_qr{ margin: 5vh 0 30px;}
	.insta_qr p{ font-size: 1.2rem;}
}