/**
 * about — p-about-*（医院紹介ページ）
 *
 * 仕様: docs/build-specs/about.md / DECISIONS.md（残り4ページ裁定 #12〜#23・その他 #1〜#11）
 * - 本文幅は .l-inner（--container 1234px）をそのまま使う（about.md「コンテンツ幅」）
 * - 縦リズム: SP 3rem / PC 5rem。背景は ①cream → ②③④白 → ⑤cream → ⑦白
 * - 波: ①→② は wave-down-cream（下側セクション上端）／④→⑤ は wave-down-white（PCにも出す・#19）／
 *       ⑤→⑦ は wave-up-white を c-wave--top で上のセクションに重ねる
 * - カード（c-point-card）・帯（c-feature-band）・CTA（c-closing-cta）・関連（c-related-card）は
 *   components.css の共通部品。ここではページ内の配置（グリッド・余白）のみ
 */

/* --- セクション共通（縦リズム・波の基準位置） ---------------- */

.p-about-concept,
.p-about-features,
.p-about-clinic,
.p-about-equipment,
.p-about-closing {
	position: relative;
	padding-block: 3rem;
}

.p-about-concept,
.p-about-features,
.p-about-clinic,
.p-about-closing {
	background: var(--color-base);
}

.p-about-equipment {
	background: var(--color-bg-cream);
}

/* 波: 下側セクションの上端に重ねる（c-wave--top のものは components.css 側で bottom:100%） */
.p-about-wave {
	top: 0;
}

/* セクション内の縦グリッド（見出しと中身の gap 24px → PC 32px） */
.p-about-concept > .l-inner,
.p-about-features > .l-inner,
.p-about-equipment > .l-inner,
.p-about-closing > .l-inner {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 1000px) {
	.p-about-concept,
	.p-about-features,
	.p-about-clinic,
	.p-about-equipment,
	.p-about-closing {
		padding-block: 5rem;
	}

	.p-about-concept {
		padding-block: 7.5rem 5rem; /* ②のみ上 120px（カンプ） */
	}

	.p-about-concept > .l-inner,
	.p-about-features > .l-inner,
	.p-about-equipment > .l-inner,
	.p-about-closing > .l-inner {
		gap: 2rem;
	}
}

/* --- ② p-about-concept（コンセプト） ------------------------ */

.p-about-concept__body {
	display: grid;
	gap: 1.125rem; /* 段落間 18px */
	text-align: left;
}

.p-about-concept__body p {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-text-muted);
}

.p-about-concept__visual img {
	display: block;
	width: 100%;
	height: auto;
	/* 撮影写真の元比率 3:2 のまま表示する（2026-10-02 クライアント指摘。旧: SPのみ 2:1 にトリミング） */
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius); /* カンプ 0 → 画像面は --radius に統一（about.md §9-4） */
}

@media (min-width: 1000px) {
	.p-about-concept__body {
		text-align: center;
	}
}


/* --- ③ p-about-features（当院の特徴・c-point-card ×6） ------ */

.p-about-features__grid {
	display: grid;
	gap: 1.5rem;
}

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

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

/* --- ④ p-about-clinic（院内のご案内・c-feature-band ×3） ----
   見出しのみ .l-inner の内側。帯は全幅フルブリードのため .l-inner の外に置く */

.p-about-clinic__bands {
	display: grid;
	gap: 2rem; /* 帯と帯の間の白い隙間 32px */
	margin-top: 1.5rem;
}

@media (min-width: 1000px) {
	.p-about-clinic__bands {
		margin-top: 2rem;
	}
}

/* --- ⑤ p-about-equipment（設備のご案内） -------------------- */

.p-about-equipment__grid {
	display: grid;
	gap: 2rem;
}

.p-about-equipment__item {
	display: grid;
	align-content: start;
	gap: 0.5rem;
}

.p-about-equipment__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 64 / 45; /* 表示 384×270 */
	object-fit: cover;
	border-radius: var(--radius); /* カンプ 3px → --radius（DECISIONS #2） */
}

.p-about-equipment__name {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-title-s);
	line-height: 1.6;
	color: var(--color-text);
}

/* ⚠️ メーカー名・機種名は非掲載（8/25決定・DECISIONS #18）。名称 → 説明 の2行構成 */
.p-about-equipment__text {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-caption);
	letter-spacing: 0.04em;
	line-height: 1.7;
	color: var(--color-text-muted);
}

@media (min-width: 600px) {
	.p-about-equipment__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

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

/* --- ⑦ p-about-closing（クロージング＋CTA＋関連ページ） ------
   CTAは c-closing-cta、カードは c-related-card。ここは配置のみ */

/* 主CTAは SP 全幅・タブレット以上は内容幅（DECISIONS その他 #5） */
@media (min-width: 600px) {
	.p-about-closing .c-closing-cta .c-btn--full {
		width: auto;
	}
}

@media (min-width: 1000px) {
		}