/**
 * components — サイト共通コンポーネント（クローム分のみ）
 * このファイルには c-btn / c-tel-btn / c-table--hours のみ実装（他の c- 部品は別担当）。
 * 仕様: docs/build-specs/chrome.md / DECISIONS.md（ボタンとカードは色を維持し、影と浮き上がりでホバーを表現）
 */

/* --- c-btn ------------------------------------------------ */

.c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.875rem; /* 46px（タップ領域44px以上） */
	padding: 0.5rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--fs-body);
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: var(--color-text);
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow 150ms ease-out, transform 150ms ease-out;
}

.c-btn__arrow {
	transition: transform 150ms ease-out;
}

/* Fill: オレンジ地×チャコール文字（白文字 on #FD920F は禁止） */
.c-btn--fill {
	background: var(--color-primary);
	color: var(--color-text);
}

/* Outline */
.c-btn--outline {
	background: var(--color-base);
	border-color: var(--color-text-accent);
	color: var(--color-text-accent);
}

/* Text: 矢印リンク */
.c-btn--text {
	min-height: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--color-text-accent);
}

/* 幅・サイズ */
.c-btn--full { width: 100%; }
.c-btn--l { min-height: 3.25rem; padding: 0.75rem 2rem; }
.c-btn--s { min-height: 2.5rem; padding: 0.375rem 1rem; font-size: var(--fs-nav); }

@media (hover: hover) {
	.c-btn--text:hover {
		text-decoration: underline;
	}
	.c-btn--text:not(.l-bottom-bar *):hover .c-btn__arrow {
		transform: translateX(0.125rem);
	}
}

/* --- c-sns-link（公式Instagram等。アイコン＋文字の小リンク） --- */

.c-sns-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--tap-min);
	color: inherit;
	font-size: var(--fs-note);
	text-decoration: none;
}

.c-sns-link__icon {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
}

@media (hover: hover) {
	.c-sns-link:hover span {
		text-decoration: underline;
	}
}

/* --- c-tel-btn（ティール枠の電話ボタン） ------------------- */

.c-tel-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.125rem;
	min-height: var(--tap-min);
	padding: 0.625rem 1rem;
	background: var(--color-base);
	border: 1px solid var(--color-secondary);
	border-radius: var(--radius);
	text-align: center;
	text-decoration: none;
	transition: box-shadow 150ms ease-out, transform 150ms ease-out;
}

.c-tel-btn__label {
	font-family: var(--font-body);
	font-size: var(--fs-caption);
	line-height: 1.3;
	color: var(--color-text-muted);
}

.c-tel-btn__number {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-title);
	line-height: 1.2;
	color: var(--color-text-secondary);
}

/* ボトムバー用: 1行表示 */
.c-tel-btn--bar {
	flex-direction: row;
	gap: 0.375rem;
	padding: 0.8125rem 0.5rem;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-note);
	line-height: 1.3;
	color: var(--color-text-secondary);
}

/* --- c-table --hours（診療時間テーブル） ------------------- */

.c-table--hours {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-base);
	table-layout: fixed;
}

.c-table--hours th,
.c-table--hours td {
	padding: 0.625rem 0.25rem;
	text-align: center;
	vertical-align: middle;
}

.c-table--hours thead th {
	background: var(--color-bg-cream);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-eyebrow); /* SP 12px → PC 15px */
	color: var(--color-text);
}

.c-table--hours thead th:first-child {
	width: 5.5rem; /* SP 88px */
	font-size: var(--fs-eyebrow);
}

.c-table--hours tbody th {
	background: var(--color-base); /* Arkhe 親の th 背景を無効化 */
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-eyebrow);
	color: var(--color-text);
}

.c-table--hours tbody td {
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow);
	color: var(--color-text);
}

.c-table--hours tbody th,
.c-table--hours tbody td {
	border-top: 1px solid var(--color-line);
}

.c-table--hours td.is-closed {
	color: var(--color-text-muted);
}

@media (min-width: 600px) {
	.c-table--hours th,
	.c-table--hours td {
		height: 2.5rem; /* 行高40px */
		padding: 0.5rem 0.25rem;
	}
	.c-table--hours thead th {
		font-size: var(--fs-nav); /* 曜日 15px */
	}
	.c-table--hours thead th:first-child {
		width: 7.5rem; /* 120px */
		font-size: var(--fs-caption); /* 「診療時間」13px */
	}
	.c-table--hours tbody th {
		font-size: var(--fs-caption); /* 時刻 13px */
	}
	.c-table--hours tbody td {
		font-size: var(--fs-nav); /* ●▲− 15px */
	}
}

/* =========================================================
   ここから追記（トップページ担当・2026-08-29）
   台帳: docs/23 §4。診療ページ等でも共用するため汎用に実装
   ========================================================= */

/* --- c-eyebrow（英字ラベル） ------------------------------- */

.c-eyebrow {
	margin: 0;
	font-family: var(--font-en);
	font-weight: 600;
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

/* --- c-sec-head（eyebrow + h2 の組） ----------------------- */

.c-sec-head {
	display: grid;
	align-content: start;
	gap: 0.375rem;
}

.c-sec-head__title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: var(--fs-h2);
	line-height: var(--lh-heading);
	letter-spacing: -0.02em;
	color: var(--color-text);
}

.c-sec-head--center {
	justify-items: center;
	text-align: center;
}

/* 全ページ共通のセクション見出し。 */
.c-sec-head--graphic {
	gap: var(--graphic-gap);
}

.c-sec-head--graphic > .c-eyebrow {
	font-size: var(--fs-section-en);
	line-height: 1;
	letter-spacing: var(--ls-section-en);
	overflow-wrap: anywhere;
}

.c-sec-head--graphic > .c-sec-head__title {
	font-weight: 700;
}

.c-sec-head--compact > .c-eyebrow {
	font-size: var(--fs-section-en-compact);
}

/* Inline emphasis; cloned decoration follows each wrapped line. */
.c-highlight {
	background: linear-gradient(var(--color-primary), var(--color-primary)) no-repeat left 90% / 100% var(--highlight-height);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* --- c-tag（タグ/バッジ） ---------------------------------- */

.c-tag {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.5rem;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: var(--fs-caption);
	line-height: 1.2;
	white-space: nowrap;
}

.c-tag--outline {
	border: 1px solid var(--color-secondary);
	background: var(--color-base);
	color: var(--color-text-secondary);
}

.c-tag--soft {
	background: var(--color-bg-sand);
	color: var(--color-text);
}

/* --- c-num（装飾連番 01,02…） ------------------------------ */

.c-num {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-statement);
	line-height: 1;
	color: var(--color-text-secondary);
}

.c-num--graphic {
	display: grid;
	justify-items: start;
	gap: var(--graphic-gap);
	width: fit-content;
	font-size: var(--fs-number-graphic);
	line-height: 1;
}

.c-num--graphic::after {
	content: "";
	width: var(--number-accent-width);
	height: var(--number-accent-height);
	background: var(--color-primary);
}

/* --- c-card（汎用カード面） -------------------------------- */

.c-card,
.c-related-card {
	background: var(--color-base);
	border-radius: var(--radius);
	box-shadow: 0 0.125rem 1rem rgba(74, 64, 56, 0.06);
}

/* --- c-treatment-card（診療科目カード） --------------------- */

.c-treatment-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	height: 100%;
	padding: 1rem 0.75rem;
	background: var(--color-bg-cream);
	border-radius: var(--radius);
	color: var(--color-text);
	text-decoration: none;
	transition: box-shadow 150ms ease-out, transform 150ms ease-out;
}

.c-treatment-card__icon {
	width: 3.5rem;
	height: 3.5rem;
}

/* 2本の歯を描いた口腔外科だけ、歯の見た目の大きさを他の科目に合わせる。 */
img[src$="/icon-oral-surgery-vector.webp"] {
	transform: scale(1.25);
	transform-origin: center;
}

.c-treatment-card__name {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-body);
	line-height: 1.4;
	text-align: center;
}

.c-treatment-card__sub {
	display: block;
	font-size: var(--fs-caption);
}

.c-treatment-card__desc {
	margin: 0;
	align-self: stretch;
	font-family: var(--font-body);
	font-size: var(--fs-caption);
	line-height: 1.6;
	color: var(--color-text-muted);
}

/* 未公開: 白55%のベール＋COMING SOONバッジ（pointer-events:none + aria-disabled） */
.c-treatment-card.is-coming-soon {
	pointer-events: none;
}

.c-treatment-card.is-coming-soon::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.55);
	border-radius: inherit;
}

.c-treatment-card__badge {
	position: absolute;
	left: 50%;
	bottom: 0.875rem;
	transform: translateX(-50%);
	z-index: 1;
	padding: 0.375rem 0.75rem;
	background: var(--color-text-muted);
	border-radius: 100vmax;
	font-family: var(--font-en);
	font-weight: 600;
	font-size: 0.625rem; /* SPカード幅163px内に収めるため縮小（PCで12pxへ） */
	letter-spacing: 0.16em;
	line-height: 1;
	color: var(--color-base);
	white-space: nowrap;
}

@media (min-width: 1000px) {
	.c-treatment-card {
		padding: 1rem;
	}
	.c-treatment-card__icon {
		width: 5.5rem;
		height: 5.5rem;
	}
	.c-treatment-card__name {
		font-size: var(--fs-title-s);
	}
	.c-treatment-card__badge {
		padding: 0.5rem 1rem;
		font-size: var(--fs-eyebrow);
		letter-spacing: var(--ls-eyebrow);
	}
}

/* カードの共通ホバー（c-treatment-card / c-related-card で同一の浮き上がり） */
@media (hover: hover) {
	.c-treatment-card:not(.is-coming-soon):hover,
	.c-related-card:hover,
	.c-btn:not(.c-btn--text):not(.is-coming-soon):not(:disabled):not(.l-bottom-bar *):hover,
	.c-tel-btn:not(.l-bottom-bar *):hover {
		box-shadow: 0 0.375rem 1.25rem rgba(74, 64, 56, 0.14);
		transform: translateY(-0.125rem);
	}
}

/* --- c-news-list / c-news-item（お知らせリスト） ------------ */

.c-news-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-news-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: 1rem;
	border-bottom: 1px solid var(--color-line);
}

.c-news-item__date {
	flex-shrink: 0;
	font-family: var(--font-en);
	font-weight: 600;
	font-size: var(--fs-caption);
	letter-spacing: 0.045em;
	color: var(--color-text-muted);
}

.c-news-item .c-tag {
	flex-shrink: 0;
}

.c-news-item__title {
	font-family: var(--font-body);
	font-size: var(--fs-nav); /* 15px（カンプ値。DECISIONS #14） */
	line-height: 1.55;
	color: var(--color-text);
	text-decoration: none;
}

@media (hover: hover) {
	.c-news-item__title:hover {
		text-decoration: underline;
	}
}

/* --- c-step（流れ STEP） ----------------------------------- */

.c-step {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	height: 100%;
	padding: 1.25rem 1.125rem;
	background: var(--color-base);
	border-radius: var(--radius);
}

.c-step__label {
	margin: 0;
	font-family: var(--font-en);
	font-weight: 600;
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-text-secondary);
}

.c-step__title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-body);
	line-height: 1.5;
	color: var(--color-text);
}

.c-step__text {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-caption);
	line-height: 1.6;
	color: var(--color-text-muted);
}

/* c-step の縦スタック（ol/ul のリセット＋行間） */
.c-step-list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --rail: 左レール（連番＋縦コネクタ）付きのバリアント。
   治療の流れ・初診の流れで共用。回数タグは c-step__count の有無で出し分け。
   SP: 上段=レール＋回数タグ／下段=本文、PC: レール｜本文｜回数タグ の3列 */
.c-step--rail {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"rail tag"
		"main main";
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 0;
	border-radius: 0;
}

.c-step__rail {
	grid-area: rail;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.c-step__connector {
	display: none; /* SPは縦コネクタ非表示（treatment-template.md §3） */
	width: 1px;
	height: 1.8125rem; /* 29px */
	background: var(--color-bg-sand);
}

.c-step__num {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-number-graphic);
	line-height: 1;
	color: var(--color-text-secondary);
}

.c-step__main {
	grid-area: main;
	display: grid;
	gap: 0.5rem;
}

.c-step--rail .c-step__title {
	font-size: var(--fs-title-s);
	line-height: 1.6;
}

.c-step--rail .c-step__text {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.c-step__count {
	grid-area: tag;
	justify-self: end;
	background: var(--color-primary);
	color: var(--color-text); /* charcoal on orange 4.47:1 は既知の許容（docs/10） */
}

@media (min-width: 1000px) {
	.c-step--rail {
		grid-template-columns: 4.5rem minmax(0, 1fr) auto; /* レール幅72px */
		grid-template-areas: "rail main tag";
		align-items: start;
		gap: 0 1rem;
		padding: 0.5rem 0;
	}

	.c-step__rail {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}

	.c-step__connector {
		display: block;
	}

	/* 先頭行の上にはコネクタを出さない（treatment-template.md §7 #11） */
	.c-step--rail:first-child .c-step__connector {
		visibility: hidden;
	}

	.c-step__main {
		padding-top: 2rem; /* コネクタ29px＋余白: 連番と見出しの天面を揃える */
	}

	.c-step__count {
		margin-top: 2rem;
	}
}

/* --- c-swiper（横スワイプ共通枠） --------------------------- */

.c-swiper {
	min-width: 0; /* grid/flex 内でトラック内容幅に広がるのを防ぐ */
	max-width: 100%;
}

.c-swiper__track {
	position: relative; /* item.offsetLeft の基準（site.js） */
	display: flex;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.c-swiper__track::-webkit-scrollbar {
	display: none;
}

.c-swiper__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.c-swiper__dots {
	display: flex;
	justify-content: center;
	margin-top: 0.5rem;
}

/* 7pxドット（視覚）＋縦44pxのタップ領域 */
.c-swiper__dot {
	position: relative;
	width: 1.5rem;
	height: var(--tap-min);
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.c-swiper__dot::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: 50%;
	background: var(--color-line);
	transition: background-color 150ms ease-out;
}

.c-swiper__dot.is-current::before {
	background: var(--color-primary);
}

/* スクロール不要（全件が収まる）時はドット非表示 */
.c-swiper.is-static .c-swiper__dots {
	display: none;
}

/* --- c-wave（セクション境界の波モチーフ） ------------------- */

.c-wave {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.75rem; /* SP 28px */
	pointer-events: none;
}

.c-wave--top {
	bottom: 100%;
}

.c-wave--bottom {
	top: 100%;
}

.c-wave img {
	display: block;
	width: 100%;
	height: 100%; /* SVG側の preserveAspectRatio="none" で全幅ストレッチ */
}

@media (min-width: 1000px) {
	.c-wave {
		height: 3.5rem; /* PC 56px */
	}
}

/* --- c-checklist（✓アイコン＋テキスト） --------------------- */

.c-checklist {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
}

.c-checklist li {
	position: relative;
	padding-left: 1.75rem;
	line-height: 1.7;
}

.c-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: var(--color-text-secondary);
}

/* =========================================================
   ここから追記（診療ページ担当・2026-08-29）
   台帳: docs/23 §4。c-page-header / c-breadcrumb / c-faq /
   c-stage-card / c-related-card / c-closing-cta（診療ページから昇格）
   仕様: docs/build-specs/treatment-template.md / DECISIONS.md
   ========================================================= */

/* --- c-page-header（下層ページのタイトル部・パンくず含む） --- */

.c-page-header {
	--page-header-pt: 3rem;
	background: var(--color-bg-cream);
	padding-block: var(--page-header-pt) 3rem;
}

.c-page-header__inner {
	--page-header-gap: 1.25rem;
	display: grid;
	gap: var(--page-header-gap);
}

/* Figma の H1：英字と日本語を間隔なしでまとめる。 */
.c-page-header__heading {
	min-width: 0;
}

/* パンくずはヘッダー直下に置き、見出しの位置は従来どおり保つ（上余白を下へ振り替え） */
.c-page-header__inner > .c-breadcrumb {
	margin-block: calc(0.75rem - var(--page-header-pt)) calc(var(--page-header-pt) - 0.75rem);
}

.c-page-header__inner > .c-eyebrow,
.c-page-header__heading > .c-eyebrow {
	font-size: clamp(2.5rem, 5.56vw, 5rem);
	line-height: 1;
	letter-spacing: 0.042em;
	hyphens: auto;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.c-page-header__heading > .c-page-header__title {
	margin: 0;
}

/* 既存ページの英字と H1 も同じ間隔にそろえる。 */
.c-page-header__inner > .c-eyebrow + .c-page-header__title {
	margin-block-start: calc(-1 * var(--page-header-gap));
}

.c-page-header__title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	/* SP 24px / PC 34px はカンプの指定。単一 clamp では両立しないため BP で切り替える
	   （--fs-statement は下限26pxで、SPだと見出しが折り返す） */
	font-size: var(--fs-h3);
	line-height: var(--lh-heading);
	letter-spacing: -0.02em;
	color: var(--color-text);
}

.c-page-header__lead {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-text);
}

@media (min-width: 1000px) {
	.c-page-header {
		--page-header-pt: 4rem;
		padding-block: var(--page-header-pt) 2.5rem;
	}
	.c-page-header__inner {
		--page-header-gap: 1.75rem;
	}
	.c-page-header__title {
		font-size: var(--fs-statement); /* PC 34px（カンプ） */
		line-height: 1.65;
	}
	.c-page-header__lead {
		font-family: var(--font-heading);
		font-weight: 700;
		font-size: var(--fs-lead);
		line-height: 1.6;
		letter-spacing: -0.02em;
	}
}

/* --- c-breadcrumb（パンくず） ------------------------------ */

.c-breadcrumb {
	font-family: var(--font-body);
	font-size: var(--fs-caption);
	letter-spacing: 0.04em;
	line-height: 1.6;
	color: var(--color-text-muted);
}

.c-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-breadcrumb li + li::before {
	content: "＞";
	margin-inline: 0.5em;
}

.c-breadcrumb a {
	display: inline-block;
	padding-block: 0.25em;
	color: inherit;
	text-decoration: none;
}

@media (hover: hover) {
	.c-breadcrumb a:hover {
		text-decoration: underline;
	}
}

/* --- c-faq（details/summary アコーディオン） ---------------
   Q./A. マーカーは CSS で付与し3ページ統一（treatment-template.md §7 #9） */

.c-faq {
	display: grid;
}

.c-faq__item {
	border-bottom: 1px solid var(--color-line);
}

.c-faq__q {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding-block: 1rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-title-s);
	line-height: 1.6;
	color: var(--color-text);
}

.c-faq__q::-webkit-details-marker {
	display: none;
}

.c-faq__q::before {
	content: "Q.";
	flex-shrink: 0;
	color: var(--color-primary);
}

/* 開閉アイコン（assets/img/common/accordion-plus.svg / accordion-minus.svg） */
.c-faq__q::after {
	content: "";
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-left: auto;
	margin-top: 0.25rem;
	background: url("../img/common/accordion-plus.svg") center / contain no-repeat;
}

.c-faq__item[open] .c-faq__q::after {
	background-image: url("../img/common/accordion-minus.svg");
}

.c-faq__a {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0;
	padding: 0 2rem 1rem 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-text-muted);
}

.c-faq__a::before {
	content: "A.";
	flex-shrink: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-text-secondary);
}

/* --- c-stage-card（進行段階・確認事項のカード） --------------
   左罫線アクセント付き。診療ページ④・ご来院前のご確認で共用 */

.c-stage-card {
	display: grid;
	gap: 0.5rem;
	padding: 1.5rem 1.25rem;
	background: var(--color-bg-cream);
	border-left: 3px solid var(--color-secondary); /* 段階のしるし（意図的な3px・角丸0） */
}

.c-stage-card__img {
	width: 100%;
	height: 11.25rem; /* 180px */
	object-fit: contain;
}

.c-stage-card__label {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--color-text-secondary);
}

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

.c-stage-card__body {
	margin: 0;
	font-size: var(--fs-note);
	line-height: 1.7;
	color: var(--color-text-muted);
}

.c-stage-card__treatment {
	display: grid;
	gap: 0.25rem;
	padding: 1rem;
	background: var(--color-base);
	border-radius: var(--radius);
}

.c-stage-card__treatment-label {
	margin: 0;
	font-size: var(--fs-caption);
	letter-spacing: 0.04em;
	line-height: 1.6;
	color: var(--color-text-secondary);
}

.c-stage-card__treatment-text {
	margin: 0;
	font-size: var(--fs-note);
	line-height: 1.7;
	color: var(--color-text-muted);
}

@media (min-width: 1000px) {
	.c-stage-card {
		padding: 2rem;
	}
}

/* --- c-related-card（関連ページカード） ---------------------
   サムネ＋名称＋「詳しく見る→」。アイコン＋説明の c-treatment-card とは別物・併用しない */

.c-related-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 0;
	overflow: hidden;
	color: var(--color-text);
	text-decoration: none;
	transition: box-shadow 150ms ease-out, transform 150ms ease-out;
}

.c-related-card__thumb {
	display: block;
}

.c-related-card__thumb img {
	display: block;
	width: 100%;
	height: 11.25rem; /* 180px */
	object-fit: cover;
}

/* 縦長の原本（院長ポートレート）を横長サムネに収める場合。
   顔〜胸元のバストアップで切り抜く（2026-10-02 クライアント指摘。旧: contain で全身＋左右余白） */
.c-related-card__thumb img.is-portrait {
	object-fit: cover;
	object-position: center 12%;
}

.c-related-card__name {
	margin: 0;
	padding: 1rem 1rem 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-title-s);
	line-height: 1.6;
	text-align: left;
}

.c-related-card__more {
	margin: 0;
	padding: 0.5rem 1rem 1rem;
	font-size: var(--fs-caption);
	letter-spacing: 0.04em;
	color: var(--color-text-accent);
}

@media (min-width: 1000px) {
	.c-related-card__thumb img {
		height: 14.0625rem; /* 225px */
	}
}

/* --- c-closing-cta（ページ末尾のCTAブロック） ----------------
   見出し＋本文＋予約ボタン。全下層ページ共通 */

.c-closing-cta {
	display: grid;
	justify-items: center;
	gap: 1rem;
	text-align: center;
}

.c-closing-cta__title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-h3); /* clamp 20→24px。PCでは上限24pxに張り付く */
	line-height: var(--lh-heading);
	letter-spacing: -0.02em;
	color: var(--color-text);
}

.c-closing-cta__text {
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-text-muted);
}

.c-closing-cta .c-btn--l {
	font-family: var(--font-heading);
	font-size: var(--fs-title); /* ラベル19px Bold（カンプ実測を正・treatment §2⑨） */
}

/* =========================================================
   ここから追記（医院紹介ページ担当・2026-08-30）
   台帳: docs/23 §4。c-point-card / c-feature-band（DECISIONS 残り4ページ #12 で c- へ昇格）
   仕様: docs/build-specs/about.md §8
   ========================================================= */

/* --- c-point-card（連番付きポイントカード） ------------------
   連番（c-num）＋見出し＋本文の縦積みカード。
   使用: 医院紹介③（白地セクション → 既定の cream 面）／
         院長紹介⑤（cream地セクション → --white で白面）。面色はセクション地と反転させる。
   BOM: .c-point-card > .c-num + .c-point-card__title + .c-point-card__text
   バリアント: --white（白面） */

.c-point-card {
	display: grid;
	align-content: start;
	gap: 0.5rem;
	height: 100%;
	padding: 1.5rem;
	background: var(--color-bg-cream);
	border-radius: var(--radius);
}

.c-point-card--white {
	background: var(--color-base);
}

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

.c-point-card__text {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-note);
	line-height: 1.7;
	color: var(--color-text-muted);
}

@media (min-width: 1000px) {
	.c-point-card {
		padding: 2rem; /* カンプ 32px */
	}
}

/* --- c-feature-band（写真×テキストの帯） --------------------
   全幅フルブリード前提（.l-inner の外側に置く）。地色は PC/SP とも cream（DECISIONS その他 #8）。
   使用: 医院紹介④（3本）／はじめての方へ／診療案内一覧②
   BOM: .c-feature-band > .c-feature-band__media（img もしくは __placeholder）
                        + .c-feature-band__body > .c-eyebrow + __title + __text
   バリアント: --reverse（写真を右へ。PCのみ効く。SPは常に写真が上）
   角丸は 0（カンプどおり。帯は面ではなく背景帯として扱う） */

.c-feature-band {
	display: grid;
	background: var(--color-bg-cream);
}

.c-feature-band__media {
	aspect-ratio: 16 / 9; /* 枠を先に予約して CLS を防ぐ */
	overflow: hidden;
}

.c-feature-band__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 撮影前のプレースホルダー面（c-treatment-card の is-coming-soon とは別物） */
.c-feature-band__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	background: var(--color-bg-sand);
	font-family: var(--font-heading); /* 和文用フォント。Josefin Sans は英字 eyebrow 専用 */
	font-weight: 700;
	font-size: var(--fs-title);
	letter-spacing: 0.08em;
	line-height: 1.6;
	color: var(--color-text-muted);
}

.c-feature-band__body {
	display: grid;
	align-content: center;
	gap: 0.5rem;
	padding: 1rem 1.5rem 1.5rem;
}

.c-feature-band__title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-h3);
	line-height: var(--lh-heading);
	letter-spacing: -0.02em;
	color: var(--color-text);
}

.c-feature-band__text {
	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) {
	.c-feature-band {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		gap: 3rem; /* カラム gap 48px */
		padding-block: 3rem;
		/* 帯内容は最大 84rem(1344px)＝カンプ1440−48×2。広い画面では中央寄せ */
		padding-inline: max(3rem, (100% - 84rem) / 2);
	}

	.c-feature-band--reverse .c-feature-band__media {
		order: 2;
	}

	.c-feature-band__body {
		padding: 0;
	}
}

/* --- c-related-list（関連ページカードの並び） ----------------
   全下層ページ共通。SPは右端が見切れる横スワイプ、PCは等幅3列で
   ドット非表示（c-swiper の is-static）。カード自体は c-related-card */

.c-related-list .c-swiper__track {
	gap: 1rem;
	/* スクロール領域の内側に影の余白を確保し、カード位置は維持。 */
	padding: 1.5rem;
	margin: -1.5rem;
	scroll-padding-inline: 1.5rem;
}

.c-related-list__item {
	display: grid;
	width: 18.75rem; /* SP: 300px。右端を見切らせてスワイプを示唆 */
	max-width: calc(100vw - 3.5rem); /* 320px幅でもはみ出さない */
}

@media (min-width: 1000px) {
	.c-related-list .c-swiper__track {
		gap: 1.5rem;
	}

	.c-related-list__item {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		max-width: none;
	}
}

/* =========================================================
   共通化の追補（2026-08-30・DECISIONS #26/#28 ほか）
   ページ側で個別に回避していた指定を共通部品へ集約
   ========================================================= */

/* 矢印リンクのタップ領域。min-height を足すと既存ページの行間が動くため、
   レイアウトを変えずに当たり判定だけ 44px へ広げる（WCAG 2.5.8） */
.c-btn--text {
	position: relative;
}

.c-btn--text::before {
	content: '';
	position: absolute;
	inset: 50% 0 auto 0;
	height: var(--tap-min);
	transform: translateY(-50%);
}

/* 矢印と文字の間隔（__more は block のため gap が効かない） */
.c-related-card__more .c-btn__arrow {
	margin-left: 0.375rem;
}

/* 準備中のボタン（料金表など）。クローム側の準備中トリートメントに合わせる */
.c-btn.is-coming-soon {
	pointer-events: none;
	border-color: var(--color-text-muted);
	color: var(--color-text-muted);
	opacity: 0.65;
}

/* COMING SOON バッジは絶対配置のため、説明文の最終行と重ならないよう
   バッジぶんの余白を確保する */
.c-treatment-card.is-coming-soon {
	padding-bottom: 3.25rem;
}

@media (min-width: 1000px) {
	.c-treatment-card.is-coming-soon {
		padding-bottom: 3.5rem;
	}
}

.u-color-primary {
	color: var(--color-primary);
}

/* Short statement copy, independent of the heading hierarchy. */
.c-statement {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-statement);
	line-height: 1.65;
	letter-spacing: -0.01em;
	color: var(--color-text);
}
.c-statement--compact {
	font-size: var(--fs-statement-compact);
}
@media (min-width: 1000px) {
	.c-statement--compact { font-size: var(--fs-h3); }
}

/* 診療科目の費用目安。SPは項目・金額を縦に並べ、長い素材名も折り返す。 */
.c-cost-row {
	margin: 0;
	padding: 1rem 1.25rem;
	display: grid;
	gap: 0.375rem;
	background: var(--color-base);
	border-radius: var(--radius);
	font-size: var(--fs-body);
	line-height: 1.7;
	overflow-wrap: anywhere;
}
.c-cost-row dt { font-weight: 700; }
.c-cost-row dd { margin: 0; color: var(--color-text-muted); }
@media (min-width: 600px) {
	.c-cost-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
}

/* 対応クレジットカードのロゴ列。原本の寸法が不揃いなため白タイルで高さを揃える（ロゴの縦横比・色は加工しない）
   SP は5等分グリッドで必ず1行（狭いカード内・320px幅でも折り返さない）、PC は高さ48pxの横並び */
.c-card-brands {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.375rem;
	max-width: 22rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.c-card-brands__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.5rem; /* 40px */
	padding: 0.25rem;
	background: var(--color-base);
	border: 1px solid var(--color-line);
	border-radius: 0.375rem;
}
.c-card-brands__item img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}
@media (min-width: 600px) {
	.c-card-brands {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		max-width: none;
	}
	.c-card-brands__item {
		height: 3rem; /* 48px。Amex・Diners は原本に枠と余白を含むため小さくし過ぎない */
		padding: 0.25rem 0.375rem;
	}
	.c-card-brands__item img { height: 100%; max-width: none; }
}

/* --- c-tel-outage（電話障害の案内ダイアログ） ------------- */

.c-tel-outage {
	position: fixed;
	inset: 0;
	margin: auto; /* base.css のリセットで中央寄せが外れるため明示 */
	width: min(100% - 2rem, 28rem);
	height: fit-content;
	max-height: calc(100% - 2rem);
	overflow-y: auto;
	padding: 1.75rem 1.5rem 1.25rem;
	border: 0;
	border-radius: var(--radius);
	background: var(--color-base);
	color: var(--color-text);
	box-shadow: 0 12px 32px rgba(74, 64, 56, 0.24);
}
.c-tel-outage::backdrop {
	background: rgba(74, 64, 56, 0.55);
}
.c-tel-outage__title {
	margin: 0 0 0.75rem;
	font-weight: 700;
	font-size: var(--fs-title-s);
	line-height: 1.5;
}
.c-tel-outage__text {
	margin: 0 0 1.25rem;
	font-size: var(--fs-note);
	line-height: 1.8;
}
.c-tel-outage__close {
	display: block;
	margin: 0.75rem auto 0;
	padding: 0.5rem 1rem;
	min-height: 2.75rem;
	border: 0;
	background: none;
	color: var(--color-text-muted);
	font-size: var(--fs-note);
	text-decoration: underline;
	cursor: pointer;
}

/* --- スクロールでふわっと表示（site.js が付け外しする。2026-10-15） --- */
.js-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.js-reveal.is-inview {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}