@charset "UTF-8";

/*========================================
asayake
========================================*/
.product {
	background-image: url(../img/product/asayake/sp/product_bg.jpg);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
}
/*-- PC --------*/
@media screen and (min-width: 769px) {
	.product.asayake {
		background-image: url(../img/product/asayake/pc/product_bg.jpg);
		background-repeat: no-repeat;
		background-position: bottom center;
		background-size: cover;
	}
}

/* -----------------------------------
MV
----------------------------------- */
.product-asayake-mv {
	position: relative;
}
.product-asayake-mv-logo {
	position: absolute;
	top: calc(366vw / 8.28);
	left: calc(132vw / 8.28);
	width: calc(332vw / 8.28);
}
.product-asayake-mv-logo img {
	position: absolute;
	top: 0;
}
.product-asayake-mv-fragrance {
	position: absolute;
	top: 42.5vw;
	right: 10.2vw;
	width: 19.7vw;
}
.product-asayake-mv-fragrance img {
	position: absolute;
	top: 0;
}
.product-asayake-mv-text {
	position: absolute;
	top: calc(328vw / 8.28);
	left: calc(136vw / 8.28);
	width: calc(322vw / 8.28);
	opacity: 0;
	filter: blur(2vw);
	transition: all 1500ms cubic-bezier(.645, .045, .355, 1);
}
.started .product-asayake-mv-text {
	opacity: 1;
	filter: blur(0);
}
.product-main {
	padding-top: 0;
}
.product-box:first-child {
	margin-top: calc(114vw / 8.28);
}
/*-- PC --------*/
@media screen and (min-width: 769px) {
	.product-asayake-mv-logo {
		top: calc(316vw / 19.2);
		left: calc(525vw / 19.2);
		width: calc(312vw / 19.2);
	}
	.product-asayake-mv-text {
		top: calc(280vw / 19.2);
		left: calc(527vw / 19.2);
		width: calc(302vw / 19.2);
	}
	.product-asayake-mv-fragrance {
		top: calc(540vw / 19.2);
		left: calc(298vw / 19.2);
		right: auto;
		width: calc(143vw / 19.2);
	}
	.product-box:first-child {
		margin-top: 0;
	}
}

/* -----------------------------------
PRODUCT
----------------------------------- */
.product-box-price-dot {
	font-weight: 300;
}
.product-img-mask {
	margin: 0 auto;
}
.product-img-mask-bg {
	opacity: 0;
	transition: 1000ms cubic-bezier(.46, .54, .38, .9);
}
.started .product-img-mask-bg {
	opacity: 1;
}
/*-- PC --------*/
@media screen and (min-width: 769px) {
	.product-textblock .content-product-more {
		width: 61%;
	}
	.product-img-mask {
		width: calc(464vw / 19.2);
	}
	.product-box-flex .product-img-mask {
		width: calc(587vw / 19.2);
	}
}

/* -----------------------------------
RECOMMEND
----------------------------------- */
.product-box-recommend-border:nth-of-type(1) {
	top: 0;
	left: 0;
	width: 0%;
	height: 1px;
	transform-origin: left;
}
.product-box-recommend-border:nth-of-type(2) {
	bottom: 0;
	right: 0;
	width: 1px;
	height: 0%;
	transform-origin: bottom;
}
.product-box-recommend-border:nth-of-type(3) {
	bottom: 0;
	left: 0;
	width: 1px;
	height: 0%;
	transform-origin: bottom;
}
.product-box-recommend-border:nth-of-type(4) {
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 0%;
	height: 1px;
	transform-origin: center;
}
.product-box-recommend-border:nth-of-type(5) {
	top: 0;
	right: 0;
	width: 0%;
	height: 1px;
	transform-origin: right;
}
.product-img-3set {
	width: 88%;
}
/*-- PC --------*/
@media screen and (min-width: 769px) {
	.product-box-recommend {
		margin: 12vw auto 0;
		padding: 0 0 0;
		padding-bottom: 6vw;
		width: 73%;
	}
	.product .recommend-textblock {
		width: 45%;
	}
	.recommend-textblock .product-box-name {
		margin: 0;
	}
	.recommend-pdt-name {
		margin: 1.3vw auto 0;
		font-size: .85vw;
	}
	.recommend-price-block {
		margin-top: 1vw;
	}
	.recommend-textblock .content-product-more {
		margin: 1.6vw auto 0;
		width: 74%;
	}
	.product-img-3set {
		width: 100%;
	}
}
/* -----------------------------------
Button
----------------------------------- */
.content-product-more.opened .content-product-more-btn::before,
.content-product-more-btn::before,
.content-product-more.opened .content-product-more-btn:hover::before,
.content-product-more-btn:hover::before,
.content-product-more.open.opened .content-product-more-btn::before {
	background: linear-gradient(-40deg, rgba(253, 228, 193, 1) 0%, rgba(242, 187, 188, 1) 21.7607%, rgba(148, 182, 224, 1) 62.9611%, rgba(229, 202, 225, 1) 100%);
}
.content-product-more-shop li:not(:first-of-type),
.content-product-more-shop li:first-of-type {
	border-image: linear-gradient(-40deg, rgba(253, 228, 193, 1) 0%, rgba(242, 187, 188, 1) 21.7607%, rgba(148, 182, 224, 1) 62.9611%, rgba(229, 202, 225, 1) 100%);
	border-image-slice: 1;
}
.content-product-more-shop {
	border-left: 1px solid #fde4c1;
	border-right: 1px solid #e5cae1;
}
.content-product-more-shop li:not(:has(.bf-btn)) {
	z-index: 2;
}
.content-product-more-shop li:hover {
	background: #e8d3dc;
}
.other-btn-flex .left {
	margin-bottom: calc(113vw / 8.28);
}
.content-series-more.open .content-series-more-btn {
	background: #e8d3dc;
}
@media screen and (min-width: 769px) {
	.other-btn-flex .left {
		margin-bottom: 0;
	}
}

/* -----------------------------------
Animation
----------------------------------- */
.pdt-fade {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}
.fade-in,
.product-box-recommend .recommend-flex img.fade-in {
  opacity: 0;
  transition: opacity 1000ms cubic-bezier(.53, .08, .25, .82) 400ms;
}
.fade-in.started,
.product-box-recommend .recommend-flex.started img.fade-in {
  opacity: 1;
}

.product-flex .product-img-mask {
  position: relative;
}
.gatefold {
	position: absolute;
	inset: 0;
}
.gatefold::before,
.gatefold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/product/asayake/sp/window.png") center / 100% 100% no-repeat;
  transition: transform 1s;
  z-index: 2;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
	opacity: .6;
}
.gatefold::before {
  clip-path: inset(0 50% 0 0);
  transform-origin: left center;
}
.gatefold::after {
  clip-path: inset(0 0 0 50%);
  transform-origin: right center;
}
.product-box.started .gatefold::before {
  transform: perspective(1500px) rotateY(-90deg);
}
.product-box.started .gatefold::after {
  transform: perspective(1500px) rotateY(90deg);
}
.product-flex .product-img-mask-bg {
	display: block;
	width: 100%;
}

/* 販売前用 */
.content-product-more .content-product-more-btn {
	pointer-events: none;
}
.content-product-more-btn::after {
	content: none;
}
.content-product-more-btn span {
	color: transparent;
	-webkit-background-clip: text;
	background-image: linear-gradient(-40deg, rgba(253, 228, 193, 1) 0%, rgba(242, 187, 188, 1) 21.7607%, rgba(148, 182, 224, 1) 62.9611%, rgba(229, 202, 225, 1) 100%);
}
.content-product-more-btn {
	outline: none !important;
	background: transparent !important;
	border-radius: 0;
}
.content-product-more.opened .content-product-more-btn::before,
.content-product-more-btn::before,
.content-product-more.opened .content-product-more-btn:hover::before,
.content-product-more-btn:hover::before,
.content-product-more.open.opened .content-product-more-btn::before {
	box-sizing: border-box;
	border: 2px solid transparent;
	border-image: linear-gradient( -40deg, rgba(253, 228, 193, 1) 0%, rgba(242, 187, 188, 1) 21.7607%, rgba(148, 182, 224, 1) 62.9611%, rgba(229, 202, 225, 1) 100%) 1;
	background: transparent !important;
	background-image: none !important;
	border-radius: 0;
	opacity: 1 !important;
}