/**
 * treatment — p-treatment-*（診療ページ共通テンプレート: 一般歯科／歯周病治療／根管治療）
 *
 * 仕様: docs/build-specs/treatment-template.md / DECISIONS.md
 * - 縦リズム: PC 5rem（§7 #14）・SP 3rem。①のみ c-page-header 側（pt64/pb40）
 * - 本文幅: .l-inner の内側で 67.5rem（=1080px）に統一（§7 #6。FAQ も同じ）
 * - 波: 上のセクション色を下のセクション上端に重ねる（c-wave + p-treatment-wave）
 */

.p-treatment {
	/* 診療ページ本文幅（--container とは別のページ内スコープ値） */
	--treatment-inner: 67.5rem;
}

.p-treatment-inner {
	max-width: var(--treatment-inner); /* .l-inner は content-box のため内容幅=1080px */
}

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

.p-treatment-symptoms,
.p-treatment-about,
.p-treatment-stages,
.p-treatment-features,
.p-treatment-flow,
.p-treatment-cost,
.p-treatment-specialist,
.p-treatment-faq,
.p-treatment-closing,
.p-treatment-fallback {
	position: relative;
	padding-block: 3rem;
}

/* 背景リズム（cream ↔ 白） */
.p-treatment-symptoms,
.p-treatment-stages,
.p-treatment-flow,
.p-treatment-specialist,
.p-treatment-faq {
	background: var(--color-base);
}

.p-treatment-about,
.p-treatment-cost,
.p-treatment-closing {
	background: var(--color-bg-cream);
}

.p-treatment-features {
	background: var(--color-bg-cream);
}

.p-treatment-features--base {
	background: var(--color-base); /* 根管のみ白（treatment-template.md §1） */
}

/* 波: 下側セクションの上端に重ねる（§4。常に left:0・幅100%） */
.p-treatment-wave {
	top: 0;
}

/* セクション内の縦グリッド */
.p-treatment-symptoms > .p-treatment-inner,
.p-treatment-about > .p-treatment-inner,
.p-treatment-stages > .p-treatment-inner,
.p-treatment-features > .p-treatment-inner,
.p-treatment-flow > .p-treatment-inner,
.p-treatment-cost > .p-treatment-inner {
	display: grid;
	gap: 1.5rem;
}

.p-treatment-specialist > .p-treatment-inner {
	display: grid;
	gap: 1.75rem;
}

.p-treatment-faq > .p-treatment-inner {
	display: grid;
	gap: 1.5rem;
}

.p-treatment-closing > .p-treatment-inner {
	display: grid;
	gap: 2rem;
}

/* 見出し直下の導入文（②④⑥ ほか共通） */
.p-treatment-intro {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-text-muted);
}

@media (min-width: 1000px) {
	.p-treatment-symptoms,
	.p-treatment-about,
	.p-treatment-features,
	.p-treatment-flow,
	.p-treatment-cost,
	.p-treatment-specialist,
	.p-treatment-faq,
	.p-treatment-closing,
	.p-treatment-fallback {
		padding-block: 5rem;
	}

	.p-treatment-stages {
		padding-block: 5rem 7.5rem; /* ④のみ下120px（§2） */
	}

	.p-treatment-symptoms > .p-treatment-inner,
	.p-treatment-about > .p-treatment-inner {
		gap: 1.75rem; /* 28px */
	}

	.p-treatment-stages > .p-treatment-inner,
	.p-treatment-features > .p-treatment-inner,
	.p-treatment-flow > .p-treatment-inner,
	.p-treatment-cost > .p-treatment-inner,
	.p-treatment-specialist > .p-treatment-inner {
		gap: 2.25rem; /* 36px */
	}

	.p-treatment-faq > .p-treatment-inner {
		gap: 2rem; /* 32px */
	}

	.p-treatment-closing > .p-treatment-inner {
		gap: 2.5rem; /* 40px */
	}
}

/* --- ② p-treatment-symptoms（症状チェックリスト） ------------ */

.p-treatment-symptoms__card {
	background: var(--color-bg-cream);
	border-radius: var(--radius); /* カンプ3px → --radius（DECISIONS #2） */
	padding: 1.5rem 1.25rem;
}

.p-treatment-symptoms__list {
	gap: 0.75rem;
}

.p-treatment-symptoms__list li {
	padding-left: 1.75rem; /* チェックボックス20px＋gap8px */
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-text);
}

/* チェックボックス風マーカー（20×20・枠3pxティール・角丸2px＝図像扱いの実測値） */
.p-treatment-symptoms__list li::before {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	top: 0.375rem;
	background: var(--color-base);
	border: 3px solid var(--color-secondary);
	border-radius: 2px;
	font-size: 0.625rem;
	line-height: 1;
}

@media (min-width: 600px) {
	.p-treatment-symptoms__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 2rem;
		row-gap: 1rem;
	}
}

@media (min-width: 1000px) {
	.p-treatment-symptoms__card {
		padding: 2rem 2.5rem;
	}
}

/* --- ③ p-treatment-about（疾患の説明・2カラム） -------------- */

.p-treatment-about__grid {
	display: grid;
	gap: 1.75rem;
}

.p-treatment-about__text {
	display: grid;
	gap: 1.125rem; /* 段落gap 18px */
}

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

.p-treatment-about__media img {
	display: block;
	width: 100%;
	height: auto;
	margin-inline: auto;
	max-width: 26.25rem; /* PC 420px 相当。SPは全幅342px程度に収まる */
}

@media (min-width: 1000px) {
	.p-treatment-about__grid {
		grid-template-columns: minmax(0, 1fr) 26.25rem;
		gap: 3rem; /* カラムgap 48px */
		align-items: start;
	}
}

/* --- ④ p-treatment-stages（進行段階カード） ------------------ */

.p-treatment-stages__grid {
	display: grid;
	gap: 1.25rem;
}

/* カード本体は c-stage-card（components.css）。ここはグリッド配置のみ */

@media (min-width: 1000px) {
	.p-treatment-stages__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem; /* 両軸28px */
	}
}

/* --- ⑤ p-treatment-features（Point Row ×4） ------------------ */

.p-treatment-features__rows {
	display: grid;
	gap: 2rem;
}

.p-treatment-point {
	display: grid;
	gap: 1rem;
}

.p-treatment-point__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 800 / 534;
	object-fit: cover;
	border-radius: var(--radius);
}

.p-treatment-point__body {
	display: grid;
	gap: 0.5rem;
	align-content: start;
}

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

.p-treatment-point__text {
	margin: 0;
	font-size: var(--fs-note);
	line-height: 1.7;
	color: var(--color-text-muted);
}

.p-treatment-point__link {
	margin: 0.25rem 0 0;
	text-align: right;
	font-size: var(--fs-note);
}

@media (min-width: 1000px) {
	.p-treatment-features__rows {
		gap: 1.5rem; /* 行gap 24px */
	}

	.p-treatment-point {
		grid-template-columns: 17.5rem minmax(0, 1fr); /* 写真 280px */
		gap: 2rem;
		align-items: start;
	}

	.p-treatment-point__media img {
		width: 17.5rem;
		height: 11.25rem; /* 280×180 */
		aspect-ratio: auto;
	}
}

/* --- ⑥ p-treatment-flow（治療の流れ STEP×6） -----------------
   STEP行は c-step-list / c-step--rail（components.css）。ページ固有指定なし */

/* --- ⑦ p-treatment-cost（費用） ------------------------------ */

.p-treatment-cost__body {
	display: grid;
	gap: 1.125rem;
}

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

.p-treatment-cost__risk {
	display: grid;
	gap: 0.5rem;
	padding: 1rem;
	background: var(--color-base);
	border: 1px solid var(--color-line);
	border-radius: var(--radius); /* カンプ角丸なし → --radius に統一（§7 #12） */
}

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

.p-treatment-cost__risk-text {
	margin: 0;
	font-size: var(--fs-note);
	line-height: 1.7;
	color: var(--color-text-muted);
}

.p-treatment-cost__more {
	margin: 0;
}

/* --- ⑤b p-treatment-specialist（歯周病専門医とは） ----------- */

.p-treatment-specialist {
}

.p-treatment-specialist__lead {
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-text);
}

/* リード＋資格証の写真（SP 縦積み／PC 2カラム） */
.p-treatment-specialist__intro {
	display: grid;
	gap: 1.25rem;
	align-items: center;
}

.p-treatment-specialist__photo {
	justify-self: center;
	width: min(100%, 15rem);
	margin: 0;
}

.p-treatment-specialist__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}

@media (min-width: 1000px) {
	.p-treatment-specialist__intro {
		grid-template-columns: minmax(0, 1fr) 16rem;
		gap: 3rem;
	}

	.p-treatment-specialist__photo {
		width: 100%;
	}
}

.p-treatment-specialist__points {
	display: grid;
	gap: 1rem;
}

.p-treatment-specialist__point {
	display: grid;
	gap: 0.5rem;
	align-content: start;
	padding: 1.5rem;
	background: var(--color-bg-cream);
	border-radius: var(--radius);
}

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

.p-treatment-specialist__point-text {
	margin: 0;
	font-size: var(--fs-note);
	line-height: 1.7;
	color: var(--color-text-muted);
}

.p-treatment-specialist__diff,
.p-treatment-specialist__path {
	display: grid;
	gap: 1rem;
}

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

.p-treatment-specialist__diff-panels {
	display: grid;
	gap: 1rem;
}

.p-treatment-specialist__panel {
	display: grid;
	gap: 0.5rem;
	align-content: start;
	padding: 1.5rem;
	background: var(--color-base);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
}

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

.p-treatment-specialist__panel-text {
	margin: 0;
	font-size: var(--fs-note);
	line-height: 1.7;
	color: var(--color-text);
}

.p-treatment-specialist__path-list {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 1.5rem;
	list-style: none;
	background: var(--color-bg-cream);
	border-radius: var(--radius);
}

.p-treatment-specialist__path-list li {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
}

.p-treatment-specialist__path-num {
	flex-shrink: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-lead);
	line-height: 1.2;
	color: var(--color-text-secondary);
}

.p-treatment-specialist__path-text {
	font-size: var(--fs-note);
	line-height: 1.7;
	color: var(--color-text);
}

.p-treatment-specialist__closing {
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-text);
}

.p-treatment-specialist__more {
	margin: 0;
	font-size: var(--fs-body);
}

@media (min-width: 1000px) {
	.p-treatment-specialist__points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem; /* 24px */
	}

	.p-treatment-specialist__point {
		padding: 2rem;
	}

	.p-treatment-specialist__diff-panels {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

/* --- ⑨ p-treatment-closing（CTA＋関連ページ） ----------------
   CTAブロックは c-closing-cta、関連カードは c-related-card（components.css）。
   ここは関連カードのスワイパー内での並び（幅・gap）のみ */

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

/* SPでは見出し→図解→本文の順で読む。PCの2列配置は維持。 */
@media (max-width: 999px) {
	.p-treatment-about__media { grid-row: 1; }
}
.p-treatment-point__caption {
	margin: 0.5rem 0 0;
	font-size: var(--fs-caption);
	color: var(--color-text-muted);
}

/* 関連カードの下の「診療案内一覧」リンク（2026-10-15） */
.p-treatment-closing__index {
	margin: 0;
	text-align: center;
}

/* 特徴本文中のテキストリンク（矯正歯科01「診療スケジュール」等） */
.p-treatment-point__text a {
	color: var(--color-text-secondary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}