@charset "UTF-8";
/* ==========================================================================
   Object / Project / about
   ========================================================================== */
.p-about {
	background-color: #fff; /* 背景は白 */
	background-image: url(../../../img/about_bg.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
/* このセクションだけ inner を 1200px に */
.p-about > .l-inner {
	max-width: 1300px;
}

.p-about__container {
	display: grid;
	grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

/* 左：見出し */
.p-about__head {
	max-width: 500px;
}
.p-about__text {
	margin: 24px 0 32px;
	font-size: 15px;
	line-height: 2.05;
	color: var(--color-text-light);
}

/* 右：3つの特長 */
.p-about__features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.p-about__feature {
	padding: 8px 12px;
	text-align: center;
}

.p-about__icon {
	display: inline-flex;
	color: var(--color-gold);
	margin-bottom: 18px;
}
.p-about__feature-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-heading);
	margin-bottom: 14px;
}
.p-about__feature-text {
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--color-text-light);
}

/* ---- タブレット ---- */
@media (max-width: 1024px) {
	.p-about__container {
		grid-template-columns: 1fr;
		gap: 44px;
	}
	.p-about__head {
		max-width: none;
	}
}

/* ---- スマホ ---- */
@media (max-width: 767px) {
	.p-about__features {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	.p-about__feature {
		padding: 24px 8px;
	}
	.p-about__feature + .p-about__feature {
		border-left: none;
		border-top: 1px solid var(--color-line);
	}
	.p-about__head .c-btn--outline {
		width: 100%;
	}
}