/**
 * 整顔整頭 WooCommerce ECパック
 * FEATURESセクション
 *
 * Version 1.2.0
 */

/* =========================================================
   FEATURES
========================================================= */

.seigan-features {
	position: relative;
	width: 100%;
	margin: 110px 0 95px;
	padding: 90px 24px;
	overflow: hidden;
	background:
		linear-gradient(
			145deg,
			#fbf8fb 0%,
			#ffffff 52%,
			#f9f4fa 100%
		);
}

.seigan-features::before {
	position: absolute;
	top: -180px;
	right: -140px;
	width: 430px;
	height: 430px;
	border-radius: 50%;
	background:
		radial-gradient(
			circle,
			rgba(171, 113, 176, 0.11) 0%,
			rgba(171, 113, 176, 0) 70%
		);
	content: "";
	pointer-events: none;
}

.seigan-features::after {
	position: absolute;
	bottom: -210px;
	left: -180px;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background:
		radial-gradient(
			circle,
			rgba(171, 113, 176, 0.08) 0%,
			rgba(171, 113, 176, 0) 70%
		);
	content: "";
	pointer-events: none;
}

.seigan-features__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
}

.seigan-features__header {
	max-width: 640px;
	margin: 0 auto 55px;
	text-align: center;
}

.seigan-section-label {
	margin: 0 0 11px !important;
	color: var(--seigan-primary);
	font-family:
		Georgia,
		"Times New Roman",
		serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.2em;
	line-height: 1.5;
}

.seigan-features__title {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	color: var(--seigan-text);
	font-family:
		Georgia,
		"Times New Roman",
		serif;
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1.25;
}

.seigan-features__lead {
	margin: 18px 0 0 !important;
	color: var(--seigan-text-light);
	font-size: 13px;
	letter-spacing: 0.09em;
	line-height: 2;
}

.seigan-features__grid {
	display: grid;
	grid-template-columns:
		repeat(5, minmax(0, 1fr));
	gap: 16px;
}

.seigan-feature-card {
	position: relative;
	min-height: 310px;
	padding: 30px 23px 27px;
	overflow: hidden;
	border: 1px solid rgba(222, 211, 223, 0.85);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.83);
	box-shadow:
		0 14px 38px
		rgba(83, 59, 85, 0.055);
	backdrop-filter: blur(7px);
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease,
		border-color 0.3s ease;
}

.seigan-feature-card:hover {
	transform: translateY(-5px);
	border-color: rgba(171, 113, 176, 0.52);
	box-shadow:
		0 20px 44px
		rgba(83, 59, 85, 0.1);
}

.seigan-feature-card__number {
	position: absolute;
	top: 14px;
	right: 17px;
	color: rgba(171, 113, 176, 0.22);
	font-family:
		Georgia,
		"Times New Roman",
		serif;
	font-size: 26px;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1;
}

.seigan-feature-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin: 10px 0 28px;
	border-radius: 50%;
	background:
		linear-gradient(
			145deg,
			#fcf7fc,
			#f5ecf6
		);
	color: var(--seigan-primary);
}

.seigan-feature-card__icon svg {
	display: block;
	width: 31px;
	height: 31px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.45;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.seigan-feature-card__title {
	margin: 0 0 14px !important;
	padding: 0 !important;
	border: none !important;
	color: var(--seigan-text);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.055em;
	line-height: 1.75;
}

.seigan-feature-card__text {
	margin: 0 !important;
	color: var(--seigan-text-light);
	font-size: 11px;
	letter-spacing: 0.035em;
	line-height: 1.9;
}


/* 5列が窮屈になる画面 */

@media screen and (max-width: 1100px) {

	.seigan-features__grid {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));
	}

	.seigan-feature-card:nth-child(4),
	.seigan-feature-card:nth-child(5) {
		min-height: 270px;
	}

}


/* スマートフォン */

@media screen and (max-width: 767px) {

	.seigan-features {
		margin: 72px 0 65px;
		padding: 65px 16px;
	}

	.seigan-features__header {
		margin-bottom: 36px;
	}

	.seigan-features__title {
		font-size: 34px;
	}

	.seigan-features__lead {
		margin-top: 14px !important;
		font-size: 12px;
		line-height: 1.9;
	}

	.seigan-features__grid {
		display: flex;
		gap: 12px;
		margin-right: -16px;
		padding-right: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.seigan-features__grid::-webkit-scrollbar {
		display: none;
	}

	.seigan-feature-card {
		flex: 0 0 78%;
		min-height: 285px;
		padding: 27px 22px 25px;
		scroll-snap-align: start;
	}

	.seigan-feature-card:nth-child(4),
	.seigan-feature-card:nth-child(5) {
		min-height: 285px;
	}

	.seigan-feature-card__icon {
		margin-bottom: 24px;
	}

}

/* 小さいスマートフォン */

@media screen and (max-width: 390px) {

	.seigan-feature-card {
		flex-basis: 84%;
	}

}