/* ==========================================================================
   page-about.css — ABOUT（PC 420:263／SP 424:333）
   レイアウトは spec-responsive.md「ABOUT」。スタッフのカードは components.css の .c-staff-list
   ========================================================================== */

.p-about-sec {
	padding-block: 80px;
}

.p-about-commit,
.p-about-staff,
.p-about-sec .c-def-table {
	margin-top: 32px;
}

@media (min-width: 768px) {
	.p-about-sec {
		padding-block: var(--space-section);
	}

	.p-about-commit,
	.p-about-staff,
	.p-about-sec .c-def-table {
		margin-top: var(--space-block);
	}
}

/* ---- COMMITMENT（2列×2段） ---- */
.p-about-commit {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

.p-about-commit__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--radius-card);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

.p-about-commit__photo {
	aspect-ratio: 342 / 220;
	overflow: hidden;
}

.p-about-commit__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-about-commit__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
}

.p-about-commit__title {
	font-family: var(--ff-mincho);
	font-size: var(--fs-display-s);
	line-height: var(--lh-display-s);
	letter-spacing: var(--ls-display-s);
	word-break: keep-all; /* <wbr> の位置でだけ折り返す（10/12。「空／間」のような語の途中の折り返しを防ぐ） */
	overflow-wrap: anywhere;
}

@media (min-width: 768px) {
	.p-about-commit {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.p-about-commit__photo {
		aspect-ratio: 540 / 320;
	}

	/* 768px 付近でも見出しが2行に収まるよう、21px → 22px（800px〜）に滑らかに広げる（10/12） */
	.p-about-commit__title {
		font-size: clamp(21px, calc(3.125vw - 3px), 22px);
	}
}

@media (min-width: 1100px) {
	.p-about-commit {
		gap: 24px 40px;
	}

	/* 1100px 付近でも見出しが1行に収まるよう、1440px の 22px まで滑らかに広げる */
	.p-about-commit__title {
		font-size: clamp(19px, calc(0.882vw + 9.3px), 22px);
	}
}

/* ---- STAFF：カードは components.css の .c-staff-list--about（集合写真はなし：9/30 荒川さん FB）。
   TOP の VIEW MORE（/about/#staff）は、base.css の scroll-padding-top で固定ヘッダーの下に止まる ---- */

/* ---- SALON INFO・COMPANY の表 ---- */
.p-about-info {
	background: var(--color-bg-base);
}

.p-about-company {
	background: var(--color-bg-divider);
}

/* 会社概要は英語表記で控えめに（FB No.27。Figma 857:1192：見出しはミュート色、区切りは薄い線） */
.p-about-company .c-def-table dt {
	color: var(--color-muted);
}

.p-about-company .c-def-table__row {
	border-bottom-color: rgb(28 27 24 / 0.12);
}