/*=============================================================
// viewport change - display none
=============================================================*/
.u-spNone {
	display: block;
}

.u-pcNone {
	display: none;
	visibility: hidden;
}

@media screen and (max-width: 767px) {
	.u-spNone {
		display: none;
		visibility: hidden;
	}

	.u-pcNone {
		display: block;
		visibility: visible;
	}
}

/* グローバルヘッダー(トップページのみ適用)
----------------------------------------------- */
body.home .globalHeader {
	--globalNavTextColor: #828282;
	z-index: 999;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	transition:
		background-color 0.3s ease,
		transform 0.6s ease;
}

body.home .globalHeader.low {
	background-color: transparent;
	--globalNavTextColor: #828282;
}
body.home .globalHeader.high {
	--globalNavTextColor: #272523;
	background-color: #fff;
}

body.home .global_nav {
	border-top: none;
}

body.home .global_nav > ul li a {
	color: var(--globalNavTextColor);
	padding-inline: 1.25em;
}

/* グローバルヘッダー
----------------------------------------------- */
.globalHeader {
	transform: translateY(0);
	transition: transform 0.6s ease;
}

.globalHeader[data-is-scroll-up="true"] {
	transform: translateY(0);
}

.globalHeader[data-is-scroll-up="false"] {
	transform: translateY(-101%);
}

@media screen and (min-width: 1200px) {
	.globalHeader .container {
		height: 100px;
	}
	.globalHeader .header_logo {
		height: 70px;
	}
	.globalHeader .header_logo a {
		height: 100%;
	}
	.globalHeader .header_logo a img {
		height: 100%;
		object-fit: contain;
	}
	body.home .global_nav > ul li a {
		padding-block: 8px;
	}
}

@media screen and (min-width: 1200px) {
	.global_nav.global_nav {
		max-width: 900px;
	}
}

/*====================================================
top_mv
====================================================*/
.top_mv__img {
	display: block;
}
.top_mv__img img {
	width: 100%;
}

/*====================================================
top_serum
====================================================*/
.top_serum {
	position: relative;
	overflow: hidden;
	padding-top: 200px;
}
@media screen and (max-width: 768px) {
	.top_serum {
		padding-top: 40px;
	}
}

.top_serum__bg {
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1920/1353;
}
@media screen and (max-width: 768px) {
	.top_serum__bg {
		aspect-ratio: 376/448;
	}
}
.top_serum__bg img {
	width: 100%;
	height: 100%;
}

.top_serum__container {
	--paddingInline: 20px;
	margin-inline: auto;
	width: min(100%, calc(1200px + (2 * var(--paddingInline))));
	padding-inline: var(--paddingInline);
}

.top_serum__ttl {
	width: min(100%, 1350px);
	margin-inline: auto;
	padding-inline: 20px;
}
@media screen and (max-width: 768px) {
	.top_serum__ttl {
		padding-inline: 0px;
	}
}

.top_serum__ttl img {
	width: 100%;
}

.top_serum__txt {
	line-height: 3;
	text-align: center;
	margin-top: 30px;
	letter-spacing: normal;
}
@media screen and (max-width: 768px) {
	.top_serum__txt {
		font-size: 15px;
	}
}

.top_serum__list {
	display: grid;
	row-gap: 64px;
	margin-top: 110px;
}
@media screen and (max-width: 768px) {
	.top_serum__list {
		row-gap: 48px;
		margin-top: 32px;
	}
}

.top_serum__item {
	--imgWidth: clamp(400px, 587 / 1920 * 100vw, 587px);
	display: grid;
	grid-template-areas: "img box";
	grid-template-columns: var(--imgWidth) 1fr;
	column-gap: clamp(40px, 100 / 1920 * 100vw, 100px);
	align-items: center;
}
.top_serum__item:nth-of-type(even) {
	grid-template-columns: 1fr var(--imgWidth);
	grid-template-areas: "box img";
}
@media screen and (max-width: 768px) {
	.top_serum__item {
		row-gap: 20px;
		grid-template-columns: 1fr;
		grid-template-areas:
			"img"
			"box";
	}
	.top_serum__item:nth-of-type(even) {
		grid-template-columns: 1fr;
		grid-template-areas:
			"img"
			"box";
	}
}

.top_serum__img {
	grid-area: img;
	aspect-ratio: 587/408;
}
.top_serum__img img {
	width: 100%;
	height: 100%;
}

.top_serum__box {
	grid-area: box;
}

.top_serum__head {
	font-size: 16px;
}

.top_serum__head2 {
	font-size: 25px;
	margin-top: 17px;
}

.top_serum__content {
}
.top_serum__content > * + * {
	margin-top: 1em;
}

.top_serum__point {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 22px;
}

.top_serum__point > * {
	position: relative;
	padding-left: 20px;
}
.top_serum__point > *::before {
	content: "";
	display: block;
	aspect-ratio: 17/13;
	width: 17px;
	position: absolute;
	top: 50%;
	left: 0;
	translate: 0 -50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2213%22%20viewBox%3D%220%200%2017%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M5.35185%2013L0%207.60976L4.72222%209.51219L17%200L5.35185%2013Z%22%20fill%3D%22black%22/%3E%3C/svg%3E");
}

.top_serum__btn {
	margin-top: 56px;
}
@media screen and (max-width: 768px) {
	.top_serum__btn {
		margin-top: 40px;
	}
}