/**
 * home — p-home-*（トップページ）
 * 仕様: docs/build-specs/home.md / DECISIONS.md。mobile-first（600/1000/1280px）
 * 値は tokens.css のカスタムプロパティ参照。px 直書きは 1px 罫線のみ
 */

/* =========================================================
   1. p-home-notice — 開院告知バー
   ========================================================= */

.p-home-notice {
	background: var(--color-text);
	padding-block: 0.5rem;
	overflow: hidden;
}

/* テキストを偶数枚並べ、-50%（＝全体の半分）まで動かすことで継ぎ目なくループさせる。
   半分ぶんの幅が画面幅を上回る枚数を front-page.php 側で出力している（広い画面の空白対策） */
.p-home-notice__marquee {
	display: flex;
	width: max-content;
	animation: ors-marquee 28s linear infinite;
}

.p-home-notice__text {
	margin: 0;
	padding-inline-end: 3rem; /* 折り返し時の文どうしの間隔 */
	white-space: nowrap;
	font-family: var(--font-heading); /* PC/SP とも Zen Kaku Bold に統一（DECISIONS #6） */
	font-weight: 700;
	font-size: var(--fs-caption);
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-bg-sand);
}

@keyframes ors-marquee {
	to { transform: translateX(-50%); }
}

/* WCAG 2.2.2: 自動で動く文字は止められるようにする */
@media (hover: hover) {
	.p-home-notice:hover .p-home-notice__marquee {
		animation-play-state: paused;
	}
}

.p-home-notice:focus-within .p-home-notice__marquee {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.p-home-notice__marquee {
		animation: none;
	}
}

@media (min-width: 1000px) {
	.p-home-notice__text {
		font-size: var(--fs-title);
		padding-inline-end: 5rem;
	}
}

/* =========================================================
   2. p-home-hero — ファーストビュー
   ========================================================= */

.p-home-hero {
	/* Use the small viewport so browser toolbars do not cover the USP cards. */
	--fv-chrome: 6.2rem;
	position: relative;
	display: flex;
	flex-direction: column;
	/* Tall phones should reveal the next section instead of stretching the photo gap. */
	min-height: min(calc(100svh - var(--fv-chrome)), 41rem); /* 2026-10-15 写真拡大のため 36rem → 41rem */
	background: var(--color-base);
	overflow: hidden;
}

/* .l-inner の margin-inline:auto は flex 子要素だと「auto マージン」として働き、
   幅が内容に縮んで中央寄せになる。左右パディングで内容幅を中央に保ちつつ全幅に戻す */
.p-home-hero__inner,
.p-home-hero__usp-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: max(var(--space-section-x), calc((100% - var(--container)) / 2));
}

.p-home-hero__inner {
	padding-block: clamp(0.75rem, 3svh, 2rem) 0;
}

.p-home-hero::before {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 15rem;
	background: url("../../img/home/hero-curve-sp.svg") center bottom / 100% 100% no-repeat;
	pointer-events: none;
}

.p-home-hero__copy > .c-eyebrow {
	display: none;
}

.p-home-hero__copy {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: start;
	gap: clamp(0.5rem, 1.7svh, 1rem);
}

.p-home-hero__title {
	margin: 0;
	font-size: var(--fs-hero-sp);
	font-weight: 700;
	line-height: var(--lh-tight);
	letter-spacing: -0.03em;
	color: var(--color-text);
}

.p-home-hero__em {
	color: var(--color-primary); /* H1強調行の承認済み例外（DECISIONS #3） */
}

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

.p-home-hero__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}


/* SCROLLインジケーター（PCのみ・u-pc-only） */
.p-home-hero__scroll-line {
	width: 1px;
	height: 3rem;
	background: var(--color-text);
}

/* SP: updated Figma cutout, below the lead copy and behind the USP cards. */
.p-home-hero__visual {
	position: relative;
	flex: 1 1 0;
	min-height: 5rem;
	margin-block: -1rem -3rem;
}

/* 写真の外枠。形（マスク）はここに一括で掛ける（写真ごとだと重ねたとき縁に線が出る） */
.p-home-hero__frame {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(72%, 24rem); /* 2026-10-15 拡大（旧 min(63%, 21rem)） */
	mask: url("../../img/home/hero-mask-sp.png") right bottom / contain no-repeat;
}

.p-home-hero__visual picture {
	display: block;
	position: absolute;
	inset: 0;
}

/* マスクと同じ比率（488:521）・同じ寄せ（右下）で contain → 形と写真がぴったり重なる */
.p-home-hero__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: right bottom;
}

/* FVスライドショー: 1枚目を土台に、2〜5枚目を5秒ずつ順にフェードで重ねる（JSなし・5枚×5秒＝25秒周期）
   枚数を変えるときは animation の秒数・delay・keyframes の % をあわせて調整する */
.p-home-hero__slide--fade {
	opacity: 0;
	animation: ors-hero-fade 25s ease-in-out infinite both;
}

.p-home-hero__slide--fade:nth-of-type(2) { animation-delay: 5s; }
.p-home-hero__slide--fade:nth-of-type(3) { animation-delay: 10s; }
.p-home-hero__slide--fade:nth-of-type(4) { animation-delay: 15s; }
.p-home-hero__slide--fade:nth-of-type(5) { animation-delay: 20s; }

/* 1周25秒のうち 5秒（=20%）表示。フェードは約1秒（=4%） */
@keyframes ors-hero-fade {
	0%   { opacity: 0; }
	4%   { opacity: 1; }
	20%  { opacity: 1; }
	24%  { opacity: 0; }
	100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.p-home-hero__slide--fade {
		display: none;
	}
}

/* 訴求ポイント3つ: 読み込み時に少しずつずらして、下からふわっと表示（CSSのみ・2026-10-15） */
.p-home-hero__usp-tile {
	animation: ors-usp-rise 0.7s ease-out both;
}

.p-home-hero__usp-tile:nth-child(1) { animation-delay: 0.25s; }
.p-home-hero__usp-tile:nth-child(2) { animation-delay: 0.4s; }
.p-home-hero__usp-tile:nth-child(3) { animation-delay: 0.55s; }

@keyframes ors-usp-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.p-home-hero__usp-tile {
		animation: none;
	}
}

/* USPタイル — FV下端に密着。写真下端にわずかに重ねる（PC も同じ重なり方） */
.p-home-hero__usp-wrap {
	position: relative;
	z-index: 1;
	margin-top: auto;
}

.p-home-hero__usp {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)); /* 内容のmin-contentで溢れさせない */
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.p-home-hero__usp-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center; /* 行数が違うタイル同士でも上下バランスを揃える */
	gap: 0.25rem;
	min-height: 8.125rem;
	padding: 0.75rem 0.25rem;
	background: var(--color-base);
	border-radius: var(--radius-usp);
	text-align: center;
}

.p-home-hero__usp-tile img {
	width: 2.5rem;
	height: 2.5rem;
	object-fit: contain;
}

.p-home-hero__usp-tile img.p-home-hero__usp-icon--perio {
	width: 3rem;
	height: 3rem;
}

.p-home-hero__usp-text {
	margin: 0;
	display: grid;
	gap: 0.125rem;
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-text);
}

.p-home-hero__usp-main {
	font-size: 0.75rem;
	line-height: 1.5;
}

.p-home-hero__usp-num {
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--color-text-secondary);
}

.p-home-hero__usp-sub {
	font-size: 0.6875rem; /* 主情報（駅名）より一段小さく */
	line-height: 1.4;
	font-weight: 500;
	color: var(--color-text-muted);
}

@media (min-width: 1000px) {
	.p-home-hero__title {
		font-size: var(--fs-h1);
	}

	.p-home-hero::before {
		height: 22.5rem;
		bottom: -9rem;
		background-image: url("../../img/home/hero-curve.svg");
	}

	.p-home-hero__copy > .c-eyebrow {
		display: block;
	}

	.p-home-hero {
		--fv-chrome: 8.1rem; /* PC: ヘッダー5.125 + 告知バー2.975 */
		/* 縦に大きいモニターでFVが間延びしないよう、カンプ基準（画面高900px相当）で上限を切る */
		min-height: min(calc(100svh - var(--fv-chrome)), 48.5rem);
	}

	.p-home-hero__inner {
		position: relative;
		z-index: 1;
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		/* 画面が低いノートPCでもFVに収まるよう、余白を画面高に追従させる。
		   上限（2.5rem / 4rem）は画面高 900px 前後で到達＝カンプどおりの見え方 */
		gap: clamp(1.25rem, 4.4svh, 2.5rem);
		min-height: 0;
		padding-block: clamp(1.5rem, 7svh, 4rem) 1.5rem;
	}

	.p-home-hero__copy {
		max-width: 30rem;
		gap: 1.25rem;
	}

	.p-home-hero__cta {
		flex-direction: row;
		align-items: center;
		gap: 1.5rem;
	}

	.p-home-hero__scroll {
		display: flex; /* base.css .u-pc-only(block) を上書き */
		flex-direction: column;
		align-items: center;
		gap: 0.625rem;
		width: max-content;
	}

	/* 画面が低いときは装飾のSCROLL表示を落として本体を優先する */
	@media (max-height: 820px) {
		.p-home-hero__scroll {
			display: none;
		}
	}

	.p-home-hero__visual {
		position: absolute;
		bottom: 0;
		right: var(--inner-gutter); /* ワイド画面で .l-inner の外端より右へ出さない */
		width: min(76%, 62rem); /* 2026-10-15 拡大（旧 min(69%, 54.5rem)）。低い画面では上端がわずかに切れる */
		height: auto;
		min-height: 0;
		overflow: visible;
		margin: 0;
	}

	/* SPの絶対配置敷き詰めを解除し、画像の固有比率で高さを出す */
	.p-home-hero__frame {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		width: 100%;
		mask: url("../../img/home/hero-mask-pc.webp") left top / 100% auto no-repeat;
	}

	.p-home-hero__visual picture {
		position: static;
	}

	/* 2枚目以降は1枚目に重ねる（1枚目が高さを決める） */
	.p-home-hero__visual .p-home-hero__slide--fade {
		position: absolute;
		inset: 0;
	}

	.p-home-hero__visual img {
		width: 100%;
		height: auto;
		object-fit: fill;
	}

	.p-home-hero__usp-wrap {
		position: relative;
		z-index: 1;
	}

	.p-home-hero__usp {
		margin-top: 0;
	}

	.p-home-hero__usp {
		gap: 1rem;
		max-width: 63.5rem;
		margin-left: auto;
	}

	.p-home-hero__usp-tile {
		flex-direction: row;
		justify-content: flex-start;
		gap: 0.875rem;
		min-height: 5.375rem;
		padding: 0.75rem 1.25rem;
		text-align: left;
	}

	.p-home-hero__usp-tile img {
		width: 3.25rem;
		height: 3.25rem;
		flex-shrink: 0;
	}

	.p-home-hero__usp-tile img.p-home-hero__usp-icon--perio {
		width: 4rem;
		height: 4rem;
	}

	.p-home-hero__usp-main {
		font-size: var(--fs-usp-pc);
	}

	.p-home-hero__usp-num {
		font-size: 2.125rem;
	}

	.p-home-hero__usp-sub {
		font-size: var(--fs-title-s);
	}
}

/* =========================================================
   3. p-home-reserve — WEB予約（ApoTool）
   ========================================================= */

.p-home-reserve {
	background: var(--color-base);
	padding-block: var(--space-section-y);
	/* FVの「WEB予約」ボタン（href="#reserve"）でスティッキーヘッダーに潜り込まないようにする。
	   SPヘッダー 3.75rem ＋ 余白（PC値は 1200px 以上で上書き） */
}

.p-home-reserve__inner {
	display: grid;
	gap: 1.5rem;
}

/* grid項目の min-width:auto を解除。これがないと iframe の min-width で
   ブロックごと広がり、ページ全体が横に溢れる（内側でスクロールさせたい） */
.p-home-reserve__block {
	min-width: 0;
}

.p-home-reserve__label {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.p-home-reserve__pill {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	padding: 0.3125rem 0.875rem;
	background: var(--color-text-secondary); /* AA適合（DECISIONS #8） */
	border-radius: 100vmax;
	font-weight: 700;
	font-size: var(--fs-caption);
	line-height: 1.3;
	color: var(--color-base);
}

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

/* タブ — 横1列。収まらない幅では横スクロールさせる（折り返さない） */
.p-home-reserve__tabs {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: 0.25rem;
	overflow-x: auto;
	/* -webkit-overflow-scrolling: touch は指定しない。iOSで慣性スクロール中の再タッチが
	   ネイティブ層に取られて touch-action が効かず、縦スクロールに抜けるバグがあるため
	   （iOS13以降は未指定でも標準で慣性スクロールになる） */
	overscroll-behavior: contain;
	touch-action: pan-x; /* タブ上のドラッグは横スクロール専用にし、ページの縦スクロールへ波及させない */
	scrollbar-width: none; /* 隣のタブが見切れることで続きがあると分かるため、バーは出さない */
}

.p-home-reserve__tabs::-webkit-scrollbar {
	display: none;
}

.p-home-reserve__tab {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	white-space: nowrap;
	min-height: var(--tap-min);
	margin: 0;
	margin-bottom: -1px; /* フレーム上罫線と接続 */
	padding: 0.625rem 0.875rem;
	background: var(--color-bg-cream);
	border: 1px solid var(--color-line);
	border-bottom: 0;
	border-radius: var(--radius) var(--radius) 0 0;
	font-family: var(--font-body);
	font-size: var(--fs-caption);
	line-height: 1.3;
	color: var(--color-text-muted);
	cursor: pointer;
	transition: background-color 150ms ease-out, color 150ms ease-out;
}

.p-home-reserve__tab.is-active {
	background: var(--color-base);
	border-color: var(--color-primary);
	font-weight: 700;
	color: var(--color-text-accent);
}

@media (hover: hover) {
	.p-home-reserve__tab:not(.is-active):hover {
		background: var(--color-base);
		color: var(--color-text);
	}
}

/* 予約フレーム — ApoTool側のページに min-width:375px があり、それ未満の幅では内容が切れる。
   iframeに最小幅を与え、収まらない場合はこちら側を横スクロールさせる（既定＝フォールバック）。
   容器が375px未満になるSPでは front-page.php のスクリプトが .is-apo-scaled を付け、
   375pxのままレンダリングした上で transform で容器幅に縮小する（下記） */
.p-home-reserve__frames {
	--apo-w: 23.4375rem; /* 375px。ApoTool の最小レンダリング幅（実測 2026-08-30） */
	--apo-h: 13.125rem;  /* 210px。iframe の height 属性と一致させる */
	--apo-scale: 1;
	background: var(--color-base);
	border: 1px solid var(--color-line);
	border-radius: 0 var(--radius) var(--radius) var(--radius); /* 左上0＝activeタブと接続 */
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

/* 縮小モード — transform はレイアウトに影響しないので容器の高さを縮小率ぶん明示する。
   border は高さに含めたくないため content-box に切り替える */
.p-home-reserve__frames.is-apo-scaled {
	box-sizing: content-box;
	height: calc(var(--apo-h) * var(--apo-scale));
	overflow: hidden;
}

.p-home-reserve__frames.is-apo-scaled .p-home-reserve__panel {
	width: var(--apo-w);
	transform: scale(var(--apo-scale));
	transform-origin: top left;
}

.p-home-reserve__panel {
	display: none;
	line-height: 0;
}

.p-home-reserve__panel.is-show {
	display: block;
}

.p-home-reserve__panel iframe {
	display: block;
	width: 100%;
	min-width: var(--apo-w); /* 375px。これ未満だとApoTool側で曜日列と「他の日程で探す」が切れる */
	border: 0;
}

.p-home-reserve__note {
	margin: 0.75rem 0 0;
	font-size: var(--fs-caption);
	line-height: 1.7;
	color: var(--color-text-muted);
}

.p-home-reserve__divider {
	margin: 0;
	border: 0;
	border-top: 1px solid var(--color-line);
}

/* 再診 */
.p-home-reserve__saishin {
	display: grid;
	gap: 0.5rem;
}

.p-home-reserve__saishin .p-home-reserve__label {
	margin-bottom: 0;
}

@media (min-width: 1000px) {
	.p-home-reserve__inner {
		gap: 2.25rem;
	}

	/* メニューが13件に増えたため、PCは横スクロールでなく折り返して全タブを見せる */
	.p-home-reserve__tabs {
		flex-wrap: wrap;
		overflow-x: visible;
		touch-action: auto; /* 折り返し表示に横スクロールは無いため、タッチ操作の制限も解除 */
	}

	.p-home-reserve__tab {
		padding: 0.75rem 1.5rem;
		font-size: var(--fs-body);
	}

	.p-home-reserve__saishin {
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 1.5rem;
	}
}

@media (min-width: 1200px) {
	.p-home-reserve {
	}
}

/* =========================================================
   4. p-home-news — お知らせ
   ========================================================= */

.p-home-news {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--color-base);
	padding-block: clamp(3rem, 7vw, 5rem);
}

.p-home-news::before,
.p-home-news::after {
	content: "";
	position: absolute;
	z-index: -1;
	bottom: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.p-home-news::before {
	left: 0;
	width: 74%;
	height: 94%;
	background-image: url("../../img/home/news-curve-orange.svg");
	transform: scaleX(-1);
}

.p-home-news::after {
	right: 0;
	width: 56%;
	height: 57%;
	background-image: url("../../img/home/news-curve-teal.svg");
}

.p-home-news__inner {
	display: grid;
	gap: 1rem;
}

/* SP: 縦リストを「日付＋カテゴリ／タイトル」の2段に詰めて縦幅を抑える（PCは components.css の1行組） */
@media (max-width: 999px) {
	.p-home-news__head .c-btn {
		justify-self: end;
	}

	.p-home-news .c-news-list {
		border-top: 1px solid var(--color-line);
	}

	.p-home-news .c-news-item {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 0.25rem 0.75rem;
		padding-block: 0.75rem;
	}

	.p-home-news .c-news-item .c-tag {
		justify-self: start;
	}

	.p-home-news .c-news-item__title {
		grid-column: 1 / -1;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

@media (min-width: 1000px) {
	.p-home-news__inner {
		grid-template-columns: auto 1fr;
		gap: 4rem;
	}

	.p-home-news__head {
		padding-top: 0.5rem;
	}
}

/* =========================================================
   5. p-home-message — 院長あいさつ
   ========================================================= */

.p-home-message {
	background: var(--color-base);
	padding-block: clamp(3rem, 8vw, 7.5rem);
}

/* SP: 見出し → 写真（リードを右下に重ねる）→ 本文（Figma 708:11326） */
.p-home-message__grid {
	display: grid;
	grid-template-areas:
		"head"
		"media"
		"body";
	gap: 1.5rem;
}

.p-home-message__head {
	grid-area: head;
	justify-items: start;
}

.p-home-message__media {
	grid-area: media;
	position: relative;
	isolation: isolate;
	width: 94%; /* 322 / 342 */
	margin-top: 1.5rem; /* 背面のクリーム面が上へはみ出すぶん */
}

/* 背面のクリーム面（写真の右上へずらす） */
.p-home-message__media::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -6.6% -6.2% 12.6% 14.6%;
	border-radius: var(--radius);
	background: var(--color-bg-cream);
}

.p-home-message__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 322 / 364;
	object-fit: cover;
	object-position: 100% 46%;
	border-radius: var(--radius);
}

.p-home-message__lead {
	grid-area: media;
	z-index: 1;
	align-self: end;
	justify-self: start;
	margin: 0 0 1.5rem 39%; /* ラベル左右の余白ぶん、カンプ(42%)より少し左へ */
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.3125rem; /* 21px（Heading/Lead） */
	line-height: 1.72; /* 行送り36px */
	color: var(--color-text);
	white-space: nowrap;
}

/* SPは写真の上に白地ラベルとして重ねる（マーカー線ではなく白ベタ） */
.p-home-message__lead .c-highlight {
	padding-inline: 0.25em; /* 左は半角スペース程度の余白 */
	background: var(--color-base);
}

.p-home-message__lead-gap {
	display: none;
}

.p-home-message__body {
	grid-area: body;
}

.p-home-message__text {
	display: grid;
	gap: 1em;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-text-muted);
}

.p-home-message__text p {
	margin: 0;
}

.p-home-message__sig {
	display: grid;
	gap: 0.125rem;
	justify-items: end;
	margin-top: 1.25rem;
	text-align: right;
}

.p-home-message__sig p {
	margin: 0;
}

.p-home-message__sig-name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-title-s); /* カンプ17px → 18px（DECISIONS #14） */
	color: var(--color-text);
}

.p-home-message__sig-role {
	font-size: var(--fs-note);
	color: var(--color-text-muted);
}

.p-home-message__more {
	margin: 1.25rem 0 0;
	text-align: right;
}

.p-home-message__more .c-btn {
	font-size: var(--fs-note);
}

/* 320px前後の極小幅ではリードが写真からはみ出すので左へ寄せる */
@media (max-width: 374px) {
	.p-home-message__lead {
		margin-left: 30%;
		font-size: 1.125rem;
	}
}

/* PC: 写真左・右列に 見出し → リード → 本文 を縦中央でまとめる（従来レイアウト） */
@media (min-width: 1000px) {
	.p-home-message__grid {
		grid-template-columns: minmax(0, 23.75rem) minmax(0, 1fr);
		grid-template-rows: 1fr auto auto auto 1fr;
		grid-template-areas:
			"media ."
			"media head"
			"media lead"
			"media body"
			"media .";
		gap: 0 3.5rem;
	}

	.p-home-message__media {
		align-self: center;
		width: 100%;
		margin: 0;
	}

	.p-home-message__media::before {
		inset: 0;
		transform: translate(22.6%, 10%);
	}

	/* 右へずらしたクリーム面が右列の文字頭に掛かるため、右列を前面へ */
	.p-home-message__head,
	.p-home-message__body {
		position: relative;
		z-index: 1;
	}

	.p-home-message__media img {
		aspect-ratio: 380 / 440;
		object-position: 50% 50%;
	}

	.p-home-message__lead {
		grid-area: lead;
		align-self: start;
		margin: 1rem 0 0;
		font-size: var(--fs-h3);
		line-height: 1.65;
		white-space: normal;
	}

	.p-home-message__lead .c-highlight {
		padding-inline: 0;
		background: linear-gradient(var(--color-primary), var(--color-primary)) no-repeat left 90% / 100% var(--highlight-height);
	}

	.p-home-message__lead-gap {
		display: inline;
	}

	.p-home-message__text {
		margin-top: 1.5rem;
	}

	.p-home-message__sig {
		margin-top: 1.5rem;
		padding: 1rem 1.25rem;
	}

	.p-home-message__more {
		margin-top: 0.5rem;
	}
}

/* =========================================================
   6. p-home-about — 当院について
   ========================================================= */

.p-home-about {
	position: relative;
	background: var(--color-bg-cream); /* カンプが正（DECISIONS #16） */
	padding-block: clamp(2.5rem, 5vw, 2.5rem) clamp(3rem, 6vw, 5rem);
	overflow: hidden;
}

.p-home-about__visual {
	display: none;
}

.p-home-about__inner {
	position: relative;
	z-index: 1;
}

.p-home-about__statement {
	margin: 1.25rem 0 2rem;
}

.p-home-about__more {
	margin-top: 1.5rem;
	display: flex;
	width: fit-content;
	margin-left: auto;
}

.p-home-treatment__head > .p-home-more {
	margin-left: auto;
}

.p-home-section-more {
	margin-top: 1.5rem;
	text-align: right;
}

.p-home-about__layers {
	display: grid;
	gap: 1rem;
	max-width: 32.125rem; /* 514px */
}

.p-home-about__card {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
}

.p-home-about__card img {
	width: 3.5rem;
	height: 3.5rem;
	flex-shrink: 0;
}

.p-home-about__card-title {
	margin: 0 0 0.375rem;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-title);
	line-height: 1.4;
	color: var(--color-text);
}

.p-home-about__card-text {
	margin: 0;
	font-size: var(--fs-nav);
	line-height: 1.85;
	color: var(--color-text-muted);
}

@media (min-width: 1000px) {
	.p-home-about__visual {
		display: block;
		position: absolute;
		top: 0;
		right: var(--inner-gutter); /* ワイド画面で .l-inner の外端より右へ出さない */
		width: min(48%, 45.5rem);
	}

	.p-home-about__visual img {
		display: block;
		width: 100%;
		height: auto;
	}

	.p-home-about__card {
		align-items: center;
		gap: 1rem;
		padding: 1.75rem;
	}

	.p-home-about__card img {
		width: 5.5rem;
		height: 5.5rem;
	}
}

/* =========================================================
   7. p-home-features — 当院の特徴（6点交互）
   ========================================================= */

.p-home-features {
	background: var(--color-base);
	padding-block: clamp(2.5rem, 6vw, 7.5rem) clamp(3rem, 7vw, 6rem); /* 下は§8の上波が重なる白地 */
}

.p-home-features__head {
	margin-bottom: clamp(1.5rem, 4vw, 3.5rem);
}

.p-home-features__row {
	padding-block: 1.5rem;
}

.p-home-features__media img {
	display: block;
	width: calc(100% - 1.5rem);
	height: 15rem;
	object-fit: cover;
	/* 画像左行: 左端フルブリード・内側角に大角丸（DECISIONS #11） */
	border-radius: 0 var(--radius-feature) var(--radius-feature) 0;
}

.p-home-features__row:nth-child(even) .p-home-features__media img {
	margin-left: auto;
	border-radius: var(--radius-feature) 0 0 var(--radius-feature);
}

.p-home-features__body {
	display: grid;
	justify-items: start;
	gap: 0.75rem;
	margin-top: 1rem;
	padding-inline: var(--space-section-x);
}

.p-home-features__title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700; /* セクションH2(900)との階層差（DECISIONS #13） */
	font-size: var(--fs-h2);
	line-height: 1.55;
	letter-spacing: -0.02em;
	color: var(--color-text);
}

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

@media (min-width: 1000px) {
	.p-home-features__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: stretch;
		min-height: 32.5rem;
		padding-block: 0;
		/* 交互のcream背景は全幅のまま、中身は .l-inner の外端幅（--container ＋左右余白）に収める。
		   1442px 未満では --inner-gutter が 0 になるため、1440px以下の見た目は変わらない */
		padding-inline: var(--inner-gutter);
	}

	.p-home-features__media {
		overflow: hidden;
	}

	.p-home-features__media img {
		width: 100%;
		height: 100%;
		margin: 0;
	}

	.p-home-features__row:nth-child(even) .p-home-features__media {
		order: 2;
	}

	.p-home-features__body {
		align-self: center;
		gap: 1.25rem;
		margin-top: 0;
		padding: 4rem clamp(3rem, 6.6vw, 6rem);
	}
}

/* =========================================================
   8. p-home-speciality — 専門治療ピックアップ（上下波）
   ========================================================= */

.p-home-speciality {
	position: relative;
	background: var(--color-bg-cream);
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

.p-home-speciality__cards {
	display: grid;
	gap: 1.5rem;
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.p-home-speciality__card {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: 0.75rem;
	padding: 1.25rem;
}

.p-home-speciality__card img {
	width: 100%;
	height: auto;
	aspect-ratio: 516 / 200;
	object-fit: cover;
	border-radius: var(--radius);
}

.p-home-speciality__card-title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-h3);
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--color-text);
}

.p-home-speciality__card-text {
	margin: 0;
	font-size: var(--fs-nav);
	line-height: 1.85;
	color: var(--color-text-muted);
}

@media (min-width: 1000px) {
	.p-home-speciality__cards {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--gap-cards);
	}

	.p-home-speciality__card {
		padding: 2rem;
		gap: 1rem;
	}
}

/* =========================================================
   9. p-home-treatment — 診療案内グリッド
   ========================================================= */

.p-home-treatment {
	background: var(--color-base);
	/* 上は§8の下波（SP28/PC56px）ぶん余白を確保 */
	padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 7vw, 5rem);
}

.p-home-treatment__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin-bottom: 1.5rem;
}

.p-home-treatment__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-home-treatment__grid > li {
	display: grid; /* カードを行高いっぱいに */
}

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

@media (min-width: 1000px) {
	.p-home-treatment__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

/* セクション右肩の矢印リンク（全て --color-text-accent。DECISIONS #12） */
.p-home-more {
	font-size: var(--fs-note);
}

/* =========================================================
   10. p-home-first-visit — はじめての方へ（下波）
   ========================================================= */

.p-home-first-visit {
	position: relative;
	background: var(--color-bg-cream);
	padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem);
}

.p-home-first-visit__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
	text-align: center;
}

.p-home-first-visit__sec-head {
	justify-items: center;
}

.p-home-first-visit__steps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-home-first-visit__steps .c-step {
	gap: var(--graphic-gap);
}

.p-home-first-visit__note {
	margin: 1.5rem 0 0;
	font-size: var(--fs-note);
	line-height: 1.7;
	color: var(--color-text-muted);
}

@media (min-width: 600px) {
	.p-home-first-visit__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.p-home-first-visit__head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		text-align: left;
	}

	.p-home-first-visit__sec-head {
		justify-items: start;
	}

	.p-home-first-visit__steps {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* =========================================================
   11. p-home-equipment — 設備紹介（スライダー）
   ========================================================= */

.p-home-equipment {
	background: var(--color-base);
	/* 上は§10の下波ぶん余白を確保 */
	padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 7vw, 5rem);
}

.p-home-equipment__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin-bottom: 1.5rem;
}

/* SPは右端へ切れる全幅スライダー。PCは .l-inner と同じ左右位置に揃える */
.p-home-equipment__swiper .c-swiper__track {
	gap: 1rem;
	padding-inline: max(var(--space-section-x), calc((100% - var(--container)) / 2));
	scroll-padding-inline: max(var(--space-section-x), calc((100% - var(--container)) / 2));
	padding-bottom: 0.25rem;
}

.p-home-equipment__card {
	display: grid;
	gap: 0.625rem;
	width: 13.75rem; /* SP 220px */
}

.p-home-equipment__thumb {
	display: grid;
	place-items: center;
	aspect-ratio: 282 / 180;
	padding: 0.75rem;
	background: var(--color-base);
	border-radius: var(--radius);
	overflow: hidden;
}

.p-home-equipment__thumb img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.p-home-equipment__name {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-body);
	text-align: center;
	color: var(--color-text);
}

@media (min-width: 1000px) {
	.p-home-equipment__swiper .c-swiper__track {
		gap: 1.5rem;
	}

	.p-home-equipment__card {
		width: 17.625rem; /* PC 282px */
	}

	.p-home-equipment__name {
		font-size: var(--fs-title-s); /* カンプ17px → 18px（DECISIONS #14） */
	}
}

/* =========================================================
   動きの抑制
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.p-home-reserve__tab,
	.c-treatment-card,
	.c-swiper__dot::before {
		transition: none !important;
	}
}

@media (min-width: 1000px) {
	.p-home-about__more { margin-left: 0; }
}