/* =========================================================
   Ginza Lingual LP  v2
   既存サイト（ginzakyousei.com）のトンマナ準拠：
   白基調・ハイキー・透明感／臙脂（ロゴ #D0121B 系）を差し色／
   明朝見出し・細い罫線・pill型ボタン
========================================================= */

:root {
	--accent: #c01d27;          /* 臙脂（ロゴ #D0121B を一段落ち着かせた基調） */
	--accent-dark: #9d1720;
	--accent-soft: rgba(192, 29, 39, 0.06);
	--base: #ffffff;
	--base-alt: #f6f6f7;        /* 交互セクションの薄グレー */
	--base-mist: #eef0f2;       /* さらに淡い青灰 */
	--ink: #3e3e42;             /* 墨グレー（本文） */
	--ink-strong: #29292d;
	--ink-soft: #83838a;        /* 補足 */
	--line: #e5e5e9;            /* hairline */
	--gold: #b1975f;            /* 金茶（ごく少量） */
	--serif: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
	--sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
	--en: "Cormorant Garamond", serif;
	--radius: 14px;
	--shadow: 0 8px 32px rgba(41, 41, 45, 0.07);
	--shadow-soft: 0 2px 16px rgba(41, 41, 45, 0.05);
	--header-h: 76px;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
	margin: 0;
	font-family: var(--sans);
	font-weight: 400;
	color: var(--ink);
	background: var(--base);
	line-height: 1.9;
	letter-spacing: 0.03em;
	font-size: 15.5px;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
ul, ol, dl, figure, h1, h2, h3, p { margin: 0; padding: 0; }
li { list-style: none; }
.visually-hidden {
	position: absolute; width: 1px; height: 1px; margin: -1px;
	clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}
.pc-only { display: inline; }
.sp-only { display: none; }

/* ヒーロー登場アニメの起点（ローディング明けにずらす） */
body { --intro: 0s; }
body.home { --intro: 1.55s; }
.skip-loader body.home { --intro: 0s; }

.section-inner { max-width: 1080px; margin: 0 auto; padding: 124px 24px; }

/* ---------- 見出し（中央・軽い） ---------- */
.section-title {
	font-family: var(--serif);
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 500;
	color: var(--ink-strong);
	line-height: 1.6;
	letter-spacing: 0.12em;
	text-align: center;
	margin-bottom: 56px;
}
.section-title__en {
	display: block;
	font-family: var(--en);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.38em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 14px;
}
.section-title__sub {
	display: block;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 400;
	color: var(--ink-soft);
	letter-spacing: 0.1em;
	margin-top: 14px;
}
/* 左寄せで使うセクション */
.method__text .section-title,
.doctor__body .section-title,
.clinic__info .section-title,
.archive__header .section-title { text-align: left; }

/* ---------- ボタン（pill） ---------- */
.btn {
	display: inline-block;
	padding: 15px 40px;
	font-family: var(--sans);
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	border-radius: 999px;
	transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
	text-align: center;
}
.btn--primary {
	background: var(--accent);
	color: #fff;
	border: 1px solid var(--accent);
	box-shadow: 0 6px 20px rgba(192, 29, 39, 0.22);
}
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); box-shadow: 0 4px 12px rgba(192, 29, 39, 0.28); }
.btn--ghost {
	background: rgba(255, 255, 255, 0.8);
	color: var(--ink);
	border: 1px solid #cfcfd6;
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--large { padding: 19px 64px; font-size: 16px; }
.btn--line {
	background: #fff;
	color: #06c755;
	border: 1px solid #06c755;
}
.btn--line:hover { background: #06c755; color: #fff; }
.btn--header { padding: 11px 26px; font-size: 13px; white-space: nowrap; }

/* =========================================================
   Header
========================================================= */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
	transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
/* フロントページ：ヒーロー上では透過し、スクロールで白背景に（JSが .has-clear-header を付与） */
body.has-clear-header .site-header {
	background: transparent;
	backdrop-filter: none;
	border-bottom-color: transparent;
}
body.has-clear-header .site-header.is-solid,
body.has-clear-header .site-header.is-open {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(10px);
	border-bottom-color: var(--line);
}
/* フロントページ：ローディング明けにヘッダーがふわっと現れる */
@keyframes header-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
body.home .site-header { animation: header-in 0.9s calc(var(--intro) + 0.15s) ease both; }
.site-header__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 28px;
	height: var(--header-h);
	display: flex;
	align-items: center;
	gap: 28px;
}
.site-header__brand { display: flex; align-items: center; flex: none; }
.site-header__logo { height: 38px; width: auto; }
.site-header__nav { margin-left: auto; }
.site-header__nav ul { display: flex; gap: 26px; }
.site-header__nav a {
	color: var(--ink);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	position: relative;
	padding: 4px 0;
	white-space: nowrap; /* 幅が詰まってもリンク文言を折り返させない */
}
.site-header__nav a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 1px;
	background: var(--accent);
	transition: width 0.25s;
}
.site-header__nav a:hover::after { width: 100%; }
.site-header__actions { display: flex; align-items: center; gap: 18px; flex: none; }
.site-header__tel { display: flex; flex-direction: column; align-items: flex-end; color: var(--ink-strong); }
.site-header__tel-number { font-family: var(--en); font-size: 21px; font-weight: 500; letter-spacing: 0.05em; line-height: 1.1; white-space: nowrap; }
.site-header__tel-note { font-size: 10px; color: var(--accent); font-weight: 700; letter-spacing: 0.1em; }
.site-header__toggle { display: none; }

/* =========================================================
   Hero（ハイキー写真×白パネル）
========================================================= */
.hero {
	position: relative;
	min-height: min(100vh, 940px); /* svh非対応ブラウザ向けフォールバック */
	min-height: min(100svh, 940px);
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-top: var(--header-h);
	background: var(--base-mist);
}
.hero__media { position: absolute; inset: 0; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.hero__scrim {
	position: absolute; inset: 0;
	background:
		linear-gradient(to top, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 34%),
		linear-gradient(to right,
			rgba(255, 255, 255, 0.94) 0%,
			rgba(255, 255, 255, 0.82) 30%,
			rgba(255, 255, 255, 0.5) 52%,
			rgba(255, 255, 255, 0) 76%);
}
.hero__body {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 28px 64px;
	color: var(--ink-strong);
}
.hero__eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	color: var(--accent);
	padding: 7px 20px;
	border: 1px solid rgba(192, 29, 39, 0.35);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.75);
	margin-bottom: 30px;
}
.hero__title {
	font-family: var(--serif);
	font-size: clamp(30px, 4.2vw, 50px);
	font-weight: 600;
	line-height: 1.62;
	letter-spacing: 0.14em;
	text-shadow: 0 0 14px rgba(255, 255, 255, 0.95), 0 0 34px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(255, 255, 255, 0.9);
}
.hero__title-line { display: block; }
.hero__title em { font-style: normal; color: var(--accent); }
.hero__lead {
	margin-top: 24px;
	font-size: clamp(14px, 1.4vw, 16px);
	font-weight: 500;
	line-height: 2.2;
	letter-spacing: 0.08em;
	color: var(--ink-strong);
	text-shadow: 0 0 12px rgba(255, 255, 255, 0.95), 0 0 28px rgba(255, 255, 255, 0.75);
}
.hero__badges {
	display: inline-flex;
	margin-top: 36px;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(4px);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
}
.hero__badges li {
	min-width: 158px;
	padding: 18px 26px 15px;
	text-align: center;
}
.hero__badges li + li { border-left: 1px solid var(--line); }
.hero__badges strong {
	display: block;
	font-family: var(--serif);
	font-size: 23px;
	font-weight: 600;
	color: var(--accent);
	line-height: 1.3;
	letter-spacing: 0.04em;
}
.hero__badges strong em { font-style: normal; font-size: 13px; }
.hero__badges span { font-size: 11px; color: var(--ink-soft); letter-spacing: 0.1em; }
.hero__badges sup { font-size: 9px; }
.hero__cta { display: flex; gap: 16px; margin-top: 36px; flex-wrap: wrap; align-items: center; }
.hero__note { margin-top: 22px; font-size: 10.5px; color: var(--ink-soft); letter-spacing: 0.05em; }
.hero__vertical {
	position: absolute;
	z-index: 2;
	top: calc(var(--header-h) + 48px);
	right: 44px;
	writing-mode: vertical-rl;
	font-family: var(--serif);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.5em;
	color: var(--ink-strong);
	padding-right: 16px;
	border-right: 1px solid rgba(62, 62, 66, 0.3);
	text-shadow: 0 0 12px rgba(255, 255, 255, 0.95), 0 0 26px rgba(255, 255, 255, 0.8);
}

/* =========================================================
   実績ストリップ（白・hairline）
========================================================= */
.stats { background: var(--base); border-bottom: 1px solid var(--line); padding: 44px 24px 30px; }
.stats__list {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}
.stats__item {
	text-align: center;
	padding: 6px 14px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.stats__item + .stats__item { border-left: 1px solid var(--line); }
.stats__label { font-size: 11px; color: var(--ink-soft); letter-spacing: 0.12em; }
.stats__value {
	font-family: var(--serif);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.55;
	color: var(--ink-strong);
	letter-spacing: 0.06em;
}
.stats__value sup { font-size: 9px; }
.stats__note { max-width: 1080px; margin: 18px auto 0; font-size: 10.5px; color: var(--ink-soft); text-align: right; }

/* =========================================================
   お悩み（霞グレー背景×白カード）
========================================================= */
.worry { background: var(--base-mist); }
.worry__box {
	max-width: 760px;
	margin: 0 auto;
	background: var(--base);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	padding: 14px 44px;
}
.worry__list li {
	position: relative;
	padding: 19px 8px 19px 46px;
	font-size: 15.5px;
	letter-spacing: 0.05em;
}
.worry__list li + li { border-top: 1px solid var(--line); }
.worry__list li::before {
	content: "✓";
	position: absolute;
	left: 4px; top: 50%;
	transform: translateY(-50%);
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.worry__answer {
	max-width: 760px;
	margin: 36px auto 0;
	padding: 30px 40px;
	background: var(--base);
	border: 1px solid rgba(192, 29, 39, 0.22);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	font-size: 16px;
	line-height: 2.2;
	text-align: center;
}
.worry__answer strong { color: var(--accent); font-weight: 700; }

/* =========================================================
   ブランドバンド（フルブリード写真×白明朝コピー）
========================================================= */
.band {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(320px, 48vh, 480px);
	/* 写真をビューポートに固定し、前後のセクションが上にかぶさって流れる（clip-pathの窓） */
	clip-path: inset(0);
	isolation: isolate;
}
.band__img {
	position: fixed;
	top: 0; left: 0;
	width: 100vw;
	height: 100vh; /* lvh非対応ブラウザ向けフォールバック */
	height: 100lvh;
	object-fit: cover;
	object-position: 50% 18%; /* 顔が見切れない位置 */
	z-index: -1;
}
.band__scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(rgba(41, 30, 30, 0.52), rgba(41, 30, 30, 0.44));
}
.band__body {
	position: relative;
	z-index: 1;
	text-align: center;
	color: #fff;
	padding: 80px 24px;
}
.band__en {
	display: block;
	font-family: var(--en);
	font-size: 12px;
	letter-spacing: 0.42em;
	padding-left: 0.42em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
	margin-bottom: 20px;
}
.band__copy {
	font-family: var(--serif);
	font-size: clamp(20px, 3vw, 30px);
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 2;
	text-shadow: 0 1px 22px rgba(0, 0, 0, 0.4);
}

/* =========================================================
   裏側矯正とは・比較表
========================================================= */
.about { background: var(--base-alt); }
.about__lead {
	max-width: 780px;
	margin: 0 auto 52px;
	font-family: var(--serif);
	font-size: 16px;
	line-height: 2.4;
	letter-spacing: 0.05em;
	color: var(--ink-strong);
	text-align: center;
}
.about__table-wrap { overflow-x: auto; background: var(--base); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 32px; }
.about__table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: 13.5px;
}
.about__table caption {
	caption-side: top;
	text-align: left;
	font-family: var(--serif);
	font-size: 15px;
	font-weight: 600;
	color: var(--ink-strong);
	margin-bottom: 16px;
	letter-spacing: 0.08em;
}
.about__table th, .about__table td {
	border: 1px solid var(--line);
	padding: 14px 12px;
	text-align: center;
	line-height: 1.7;
}
.about__table thead th { background: var(--base-alt); font-family: var(--serif); font-size: 14px; font-weight: 600; }
.about__table thead th.is-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.about__table tbody th { background: var(--base-alt); font-weight: 500; white-space: nowrap; }
.about__table td.is-accent { background: var(--accent-soft); font-weight: 700; color: var(--accent-dark); }
.about__note { max-width: 780px; margin: 24px auto 0; font-size: 12.5px; color: var(--ink-soft); text-align: center; }

/* =========================================================
   FKSWメソッド
========================================================= */
.method { background: var(--base); }
.method__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 64px;
	align-items: start;
}
.method__text .section-title { font-size: clamp(21px, 2.4vw, 27px); line-height: 1.7; margin-bottom: 36px; }
.method__text > p { font-size: 15px; margin-bottom: 34px; line-height: 2.1; }
.method__text > p strong { color: var(--accent-dark); font-weight: 600; }
.method__points { display: grid; gap: 14px; counter-reset: mpoint; }
.method__points li {
	counter-increment: mpoint;
	position: relative;
	background: var(--base-alt);
	border-radius: var(--radius);
	padding: 22px 26px 20px 68px;
}
.method__points li::before {
	content: "0" counter(mpoint);
	position: absolute;
	left: 24px; top: 22px;
	font-family: var(--en);
	font-size: 22px;
	color: var(--accent);
	line-height: 1.2;
}
.method__points strong {
	display: block;
	font-family: var(--serif);
	font-size: 15.5px;
	font-weight: 600;
	color: var(--ink-strong);
	margin-bottom: 6px;
	letter-spacing: 0.06em;
}
.method__points span { font-size: 13.5px; color: var(--ink-soft); line-height: 1.9; display: block; }
.method__media { position: sticky; top: calc(var(--header-h) + 32px); }
.method__media img { border-radius: var(--radius); box-shadow: var(--shadow); }

/* =========================================================
   選ばれる理由（zigzag）
========================================================= */
.reason { background: var(--base-alt); }
.reason__item {
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: 56px;
	align-items: center;
	padding: 52px 0;
}
.reason__item + .reason__item { border-top: 1px solid var(--line); }
.reason__item:nth-child(odd) { grid-template-columns: 400px 1fr; }
.reason__item:nth-child(odd) .reason__media { order: -1; }
.reason__num {
	font-family: var(--en);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.14em;
	color: var(--accent);
	line-height: 1;
	margin-bottom: 18px;
}
.reason__num::before { content: "Reason "; font-size: 13px; letter-spacing: 0.2em; }
.reason__text h3 {
	font-family: var(--serif);
	font-size: clamp(19px, 2.1vw, 23px);
	font-weight: 600;
	color: var(--ink-strong);
	line-height: 1.7;
	letter-spacing: 0.08em;
	margin-bottom: 16px;
}
.reason__text p { font-size: 14.5px; line-height: 2.05; }
.reason__media img { border-radius: var(--radius); box-shadow: var(--shadow-soft); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* =========================================================
   ドクター
========================================================= */
.doctor { background: var(--base); }
.doctor__grid {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 64px;
	align-items: start;
}
.doctor__media img { border-radius: var(--radius); box-shadow: var(--shadow); }
.doctor__name {
	font-family: var(--serif);
	font-size: 32px;
	font-weight: 600;
	color: var(--ink-strong);
	letter-spacing: 0.12em;
	margin-bottom: 22px;
	line-height: 1.4;
}
.doctor__name em {
	font-family: var(--en);
	font-style: italic;
	font-size: 15px;
	font-weight: 500;
	color: var(--gold);
	margin-left: 14px;
	letter-spacing: 0.14em;
}
.doctor__role { display: block; font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--ink-soft); letter-spacing: 0.14em; margin-bottom: 10px; }
.doctor__creds { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.doctor__creds li {
	font-size: 12px;
	font-weight: 500;
	padding: 6px 16px;
	border: 1px solid rgba(192, 29, 39, 0.28);
	color: var(--accent-dark);
	background: var(--accent-soft);
	border-radius: 999px;
	letter-spacing: 0.04em;
}
.doctor__history h3 {
	font-family: var(--serif);
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-soft);
	margin-bottom: 14px;
	letter-spacing: 0.3em;
}
.doctor__history dl { display: grid; gap: 0; margin-bottom: 34px; }
.doctor__history dl > div {
	display: grid;
	grid-template-columns: 82px 1fr;
	gap: 18px;
	font-size: 13.5px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line);
}
.doctor__history dt { color: var(--ink-soft); font-family: var(--en); font-size: 14px; letter-spacing: 0.08em; }
.doctor__message {
	font-family: var(--serif);
	font-size: 15px;
	line-height: 2.3;
	letter-spacing: 0.06em;
	color: var(--ink-strong);
	padding: 26px 30px;
	background: var(--base-alt);
	border-radius: var(--radius);
}

/* =========================================================
   症例
========================================================= */
.case { background: var(--base-alt); }
.case__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.case__item { background: var(--base); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-soft); }
.case__images { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.case__images figure { position: relative; }
.case__images img { border-radius: 8px; aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.case__images figcaption {
	position: absolute;
	top: 10px; left: 10px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--ink-strong);
	font-family: var(--en);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	padding: 3px 12px;
	border-radius: 999px;
}
.case__title { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink-strong); letter-spacing: 0.06em; margin-bottom: 16px; }
.case__meta { display: grid; gap: 0; }
.case__meta > div {
	display: grid;
	grid-template-columns: 104px 1fr;
	gap: 14px;
	font-size: 12.5px;
	padding: 8px 0;
	border-bottom: 1px solid var(--line);
	line-height: 1.8;
}
.case__meta > div:last-child { border-bottom: none; }
.case__meta dt { color: var(--ink-soft); }
.case__note { margin-top: 28px; font-size: 12px; color: var(--ink-soft); text-align: center; }

/* =========================================================
   費用
========================================================= */
.price { background: var(--base); }
.price__lead { max-width: 720px; margin: 0 auto 40px; font-size: 15.5px; text-align: center; }
.price__table-wrap { overflow-x: auto; background: var(--base); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; }
.price__table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 14.5px;
}
.price__table caption {
	caption-side: top;
	text-align: left;
	font-family: var(--serif);
	font-size: 15px;
	font-weight: 600;
	color: var(--ink-strong);
	letter-spacing: 0.08em;
	margin-bottom: 16px;
}
.price__table th, .price__table td {
	border: 1px solid var(--line);
	padding: 15px 18px;
	text-align: center;
}
.price__table thead th { background: var(--base-alt); font-family: var(--serif); font-weight: 600; }
.price__table tbody th { text-align: left; font-weight: 500; background: var(--base-alt); }
.price__table tr.is-accent th { background: var(--accent); color: #fff; font-weight: 700; border-color: var(--accent); }
.price__table tr.is-accent td { background: var(--accent-soft); font-weight: 700; color: var(--accent-dark); font-size: 16.5px; font-family: var(--serif); }
.price__notes { margin: 28px auto 0; display: grid; gap: 8px; max-width: 820px; }
.price__notes li {
	font-size: 12.5px;
	color: var(--ink-soft);
	padding-left: 16px;
	position: relative;
	line-height: 1.9;
}
.price__notes li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 1px; background: var(--accent); }

/* =========================================================
   治療の流れ（タイムライン）
========================================================= */
.flow { background: var(--base-alt); }
.flow__list { max-width: 720px; margin: 0 auto; position: relative; }
.flow__list::before {
	content: "";
	position: absolute;
	left: 27px; top: 12px; bottom: 12px;
	width: 1px;
	background: var(--line);
}
.flow__list li {
	position: relative;
	padding: 0 0 40px 88px;
}
.flow__list li:last-child { padding-bottom: 0; }
.flow__list li::before {
	counter-increment: none;
	content: "";
}
.flow__list li::after {
	content: "";
	position: absolute;
	left: 20px; top: 8px;
	width: 15px; height: 15px;
	border-radius: 50%;
	background: var(--base-alt);
	border: 2px solid var(--accent);
}
.flow__list strong {
	display: block;
	font-family: var(--serif);
	font-size: 17.5px;
	font-weight: 600;
	color: var(--ink-strong);
	letter-spacing: 0.08em;
	margin-bottom: 6px;
}
.flow__list span { font-size: 13.5px; color: var(--ink-soft); display: block; line-height: 1.95; }

/* =========================================================
   リスク
========================================================= */
.risk { background: var(--base); }
.risk__lead { max-width: 720px; margin: 0 auto 36px; font-size: 15px; text-align: center; }
.risk__list { max-width: 720px; margin: 0 auto; border-top: 1px solid var(--line); }
.risk__list li {
	padding: 17px 8px 17px 34px;
	font-size: 14px;
	line-height: 2;
	border-bottom: 1px solid var(--line);
	position: relative;
}
.risk__list li::before {
	content: "";
	position: absolute;
	left: 8px; top: 31px;
	width: 12px; height: 1px;
	background: var(--accent);
}
.risk__list strong { color: var(--ink-strong); font-weight: 600; }

/* =========================================================
   FAQ
========================================================= */
.faq { background: var(--base-alt); }
.faq__list { max-width: 800px; margin: 0 auto; display: grid; gap: 12px; }
.faq__item { background: var(--base); border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; }
.faq__q {
	list-style: none;
	cursor: pointer;
	font-family: var(--serif);
	font-size: 15.5px;
	font-weight: 600;
	color: var(--ink-strong);
	letter-spacing: 0.05em;
	padding: 21px 60px 21px 62px;
	position: relative;
	line-height: 1.75;
	transition: color 0.2s;
}
.faq__q:hover { color: var(--accent-dark); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before {
	content: "Q";
	position: absolute;
	left: 26px; top: 20px;
	font-family: var(--en);
	font-size: 20px;
	font-weight: 500;
	color: var(--accent);
}
.faq__q::after {
	content: "";
	position: absolute;
	right: 26px; top: 50%;
	width: 9px; height: 9px;
	border-right: 1.5px solid var(--accent);
	border-bottom: 1.5px solid var(--accent);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.25s;
}
.faq__item[open] .faq__q::after { transform: translateY(-30%) rotate(-135deg); }
.faq__a { padding: 0 30px 24px 62px; position: relative; }
.faq__a::before {
	content: "A";
	position: absolute;
	left: 26px; top: -3px;
	font-family: var(--en);
	font-size: 20px;
	font-weight: 500;
	color: var(--gold);
}
.faq__a p { font-size: 14px; line-height: 2; }

/* =========================================================
   コラム（AIO記事）
========================================================= */
.column { background: var(--base); }
.column__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.column__card {
	background: var(--base);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	transition: transform 0.3s, box-shadow 0.3s;
}
.column__card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.column__card a { display: block; color: var(--ink); height: 100%; }
.column__thumb { aspect-ratio: 3 / 2; overflow: hidden; }
.column__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.column__card:hover .column__thumb img { transform: scale(1.04); }
.column__title {
	font-family: var(--serif);
	font-size: 16px;
	font-weight: 600;
	color: var(--ink-strong);
	line-height: 1.75;
	letter-spacing: 0.04em;
	padding: 20px 22px 10px;
}
.column__excerpt { font-size: 12.5px; color: var(--ink-soft); padding: 0 22px; line-height: 1.85; }
.column__meta {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 11px;
	color: var(--ink-soft);
	padding: 16px 22px 20px;
	letter-spacing: 0.04em;
}
.column__meta span { color: var(--gold); }
.column__more { text-align: center; margin-top: 48px; }
.column__empty { color: var(--ink-soft); font-size: 14.5px; text-align: center; }

/* =========================================================
   CTA
========================================================= */
.cta { background: var(--base-mist); text-align: center; position: relative; overflow: hidden; }
.cta::before {
	content: "";
	position: absolute;
	right: -120px; top: -120px;
	width: 380px; height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(192, 29, 39, 0.07), transparent 70%);
}
.cta .section-inner { padding: 96px 24px; position: relative; }
.cta__title {
	font-family: var(--serif);
	font-size: clamp(23px, 3vw, 31px);
	font-weight: 500;
	color: var(--ink-strong);
	letter-spacing: 0.12em;
	line-height: 1.8;
	margin-bottom: 18px;
}
.cta__lead { font-size: 14.5px; color: var(--ink); margin-bottom: 40px; }
.cta__actions { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.cta__tel { color: var(--ink-strong); font-family: var(--en); font-size: 31px; font-weight: 500; letter-spacing: 0.06em; line-height: 1.2; }
.cta__tel span { display: block; font-family: var(--sans); font-size: 11.5px; color: var(--ink-soft); letter-spacing: 0.14em; margin-bottom: 2px; }

/* =========================================================
   医院情報
========================================================= */
.clinic { background: var(--base); border-top: 1px solid var(--line); }
.clinic__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.clinic__table { display: grid; }
.clinic__table > div {
	display: grid;
	grid-template-columns: 108px 1fr;
	gap: 20px;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
	line-height: 1.9;
}
.clinic__table dt { color: var(--ink-soft); font-weight: 500; }
.clinic__map iframe { border-radius: var(--radius); box-shadow: var(--shadow-soft); }

/* =========================================================
   Footer
========================================================= */
.site-footer { background: var(--base-alt); border-top: 1px solid var(--line); color: var(--ink); padding: 60px 24px 88px; }
.site-footer__inner {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.2fr 1fr 0.8fr;
	gap: 40px;
}
.site-footer__name { margin-bottom: 16px; }
.site-footer__logo { height: 44px; width: auto; }
.site-footer__address, .site-footer__access { font-size: 12.5px; color: var(--ink-soft); line-height: 2; }
.site-footer__hours p { font-size: 12.5px; color: var(--ink-soft); line-height: 2; }
.site-footer__links { display: flex; flex-direction: column; gap: 10px; }
.site-footer__links a { color: var(--accent-dark); font-size: 12.5px; letter-spacing: 0.06em; }
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__copy {
	max-width: 1080px;
	margin: 44px auto 0;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	font-size: 10.5px;
	color: var(--ink-soft);
	text-align: center;
	letter-spacing: 0.08em;
}

/* =========================================================
   固定CTA（モバイル）
========================================================= */
.fixed-cta {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 90;
	display: none;
	grid-template-columns: 1fr 1fr 1.4fr;
	gap: 8px;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--line);
}
.fixed-cta__tel, .fixed-cta__line, .fixed-cta__reserve {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 4px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
	border-radius: 999px;
	letter-spacing: 0.06em;
}
.fixed-cta__tel { background: #fff; color: var(--ink-strong); border: 1px solid #cfcfd6; }
.fixed-cta__tel span { font-size: 9.5px; font-weight: 500; color: var(--accent); }
.fixed-cta__line { background: #fff; color: #06c755; border: 1px solid #06c755; }
.fixed-cta__line span { font-size: 9.5px; font-weight: 500; color: var(--ink-soft); }
.fixed-cta__reserve { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(192, 29, 39, 0.25); }

/* =========================================================
   記事ページ・アーカイブ
========================================================= */
.article, .archive { padding-top: var(--header-h); background: var(--base-alt); }
.article__inner, .archive__inner { max-width: 820px; margin: 0 auto; padding: 56px 24px 100px; }
.archive__inner { max-width: 1080px; }

.breadcrumb { margin-bottom: 32px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11.5px; color: var(--ink-soft); }
.breadcrumb li:not(:last-child)::after { content: "›"; margin-left: 6px; }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--accent); }

.article__title {
	font-family: var(--serif);
	font-size: clamp(23px, 3vw, 30px);
	font-weight: 600;
	color: var(--ink-strong);
	line-height: 1.75;
	letter-spacing: 0.05em;
	margin-bottom: 16px;
}
.article__meta { display: flex; gap: 18px; font-size: 12px; color: var(--ink-soft); margin-bottom: 24px; }
.article__eyecatch { margin: 28px 0; }
.article__eyecatch img { border-radius: var(--radius); }

.supervisor {
	display: grid;
	grid-template-columns: 68px 1fr;
	gap: 18px;
	align-items: center;
	background: var(--base);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	padding: 18px 22px;
	margin-bottom: 32px; /* 直後の本文/アイキャッチとの間隔（アイキャッチ側の28pxとは相殺され32pxに揃う） */
}
.supervisor__photo img { width: 68px; height: 68px; object-fit: cover; object-position: 50% 20%; border-radius: 50%; }
.supervisor__label { font-size: 10.5px; color: var(--accent); font-weight: 700; letter-spacing: 0.14em; margin-bottom: 2px; }
.supervisor__name { font-family: var(--serif); font-size: 16.5px; font-weight: 600; color: var(--ink-strong); }
.supervisor__name span { font-family: var(--sans); font-size: 11.5px; font-weight: 400; color: var(--ink-soft); margin-left: 10px; }
.supervisor__cred { font-size: 11px; color: var(--ink-soft); line-height: 1.75; }

.article__content { background: var(--base); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 44px 48px; margin-bottom: 40px; }
.article__content h2 {
	font-family: var(--serif);
	font-size: 21px;
	font-weight: 600;
	color: var(--ink-strong);
	line-height: 1.7;
	letter-spacing: 0.06em;
	margin: 48px 0 22px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
	position: relative;
}
.article__content h2::after {
	content: "";
	position: absolute;
	left: 0; bottom: -1px;
	width: 56px; height: 2px;
	background: var(--accent);
}
.article__content h2:first-child { margin-top: 0; }
.article__content h3 {
	font-family: var(--serif);
	font-size: 17px;
	font-weight: 600;
	color: var(--ink-strong);
	margin: 38px 0 16px;
	padding-left: 14px;
	border-left: 3px solid var(--accent);
	line-height: 1.7;
}
.article__content p { margin-bottom: 20px; font-size: 15px; line-height: 2.1; }
.article__content ul, .article__content ol { margin: 0 0 20px 24px; }
.article__content ul li { list-style: disc; margin-bottom: 8px; }
.article__content ol li { list-style: decimal; margin-bottom: 8px; }
.article__content table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 13.5px; }
.article__content th, .article__content td { border: 1px solid var(--line); padding: 10px 14px; }
.article__content th { background: var(--base-alt); font-weight: 600; }
.article__content blockquote {
	margin: 0 0 20px;
	padding: 16px 22px;
	background: var(--base-alt);
	border-left: 3px solid var(--gold);
	border-radius: 0 8px 8px 0;
	color: var(--ink-soft);
}

.article__risk {
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px 28px;
	margin-bottom: 40px;
}
.article__risk h2 { font-family: var(--serif); font-size: 15px; font-weight: 600; margin-bottom: 10px; color: var(--accent-dark); letter-spacing: 0.06em; }
.article__risk p { font-size: 12.5px; color: var(--ink-soft); line-height: 2; }

.article__cta {
	text-align: center;
	background: var(--base);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	padding: 40px 24px;
	margin-bottom: 64px;
}
.article__cta-lead { font-family: var(--serif); font-size: 16.5px; font-weight: 600; color: var(--ink-strong); letter-spacing: 0.06em; margin-bottom: 22px; }

.article__related .section-title { margin-bottom: 36px; }

.archive__header { margin-bottom: 24px; }
.column__grid--archive { margin-top: 24px; }
.archive__pagination { margin-top: 52px; text-align: center; }
.archive__pagination .nav-links { display: flex; justify-content: center; gap: 10px; }
.archive__pagination .page-numbers {
	display: inline-block;
	min-width: 40px;
	padding: 8px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--base);
	color: var(--ink);
	font-size: 13.5px;
}
.archive__pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* =========================================================
   和のあしらい（神社本庁リファレンス）
========================================================= */

/* 見出し上の朱点 */
.section-title::before {
	content: "";
	display: block;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--accent);
	margin: 0 auto 18px;
}
.method__text .section-title::before,
.doctor__body .section-title::before,
.clinic__info .section-title::before,
.archive__header .section-title::before { margin-left: 0; }
.article__related .section-title::before { margin-left: 0; }

/* 隅の植物線画 */
.about, .cta { position: relative; overflow: hidden; }
.about .section-inner, .cta .section-inner { position: relative; z-index: 1; }
.about::after {
	content: "";
	position: absolute;
	right: -48px; bottom: -36px;
	width: 340px; height: 340px;
	background: url(../img/deco-branch.svg) no-repeat center / contain;
	opacity: 0.6;
	pointer-events: none;
}
.cta::after {
	content: "";
	position: absolute;
	left: -56px; bottom: -44px;
	width: 320px; height: 320px;
	background: url(../img/deco-branch.svg) no-repeat center / contain;
	transform: scaleX(-1);
	opacity: 0.5;
	pointer-events: none;
}

/* 長い矢印リンク（詳しくはこちら ⟶ 風） */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--ink-strong);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
	transition: color 0.3s;
}
.link-arrow__line {
	position: relative;
	width: 58px; height: 1px;
	background: var(--accent);
	transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.link-arrow__line::after {
	content: "";
	position: absolute;
	right: 0; bottom: 0;
	width: 11px; height: 1px;
	background: var(--accent);
	transform: rotate(-32deg);
	transform-origin: right bottom;
}
.link-arrow:hover { color: var(--accent); }
.link-arrow:hover .link-arrow__line { width: 88px; }

/* ヒーロー：スクロールインジケータ（朱の縦線） */
.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.hero__scroll-label {
	font-family: var(--en);
	font-size: 11px;
	letter-spacing: 0.34em;
	color: var(--ink-soft);
	writing-mode: vertical-rl;
}
.hero__scroll-line {
	width: 1px; height: 64px;
	background: rgba(62, 62, 66, 0.22);
	position: relative;
	overflow: hidden;
}
.hero__scroll-line::after {
	content: "";
	position: absolute;
	left: 0; top: -45%;
	width: 100%; height: 45%;
	background: var(--accent);
	animation: scroll-line 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes scroll-line {
	0% { top: -45%; }
	60%, 100% { top: 110%; }
}

/* =========================================================
   ローディング（Snow Peak Field Suite Spa リファレンス）
   CSSアニメのみで必ず消える＝JS無効・読み込み失敗でも安全
========================================================= */
.loader {
	position: fixed;
	inset: 0;
	z-index: 300;
	background: var(--base);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	animation: loader-hide 0.75s 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.loader__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.loader__logo {
	width: min(228px, 60vw);
	height: auto;
	animation: loader-fade 0.9s 0.2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.loader__en {
	font-family: var(--en);
	font-size: 10.5px;
	letter-spacing: 0.4em;
	padding-left: 0.4em;
	text-transform: uppercase;
	color: var(--ink-soft);
	animation: loader-fade 0.9s 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.loader__line {
	width: 148px; height: 1px;
	margin-top: 10px;
	background: var(--line);
	position: relative;
	overflow: hidden;
}
.loader__line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	animation: loader-line 1.05s 0.4s cubic-bezier(0.65, 0, 0.35, 1) both;
}
@keyframes loader-fade {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}
@keyframes loader-line {
	to { transform: scaleX(1); }
}
@keyframes loader-hide {
	from { opacity: 1; visibility: visible; }
	to { opacity: 0; visibility: hidden; }
}
/* 再訪スキップ・モーション低減環境では表示しない */
.skip-loader .loader { display: none; }

/* =========================================================
   アニメーション
========================================================= */

/* ヒーロー登場（CSSアニメのみ＝JS無効でも必ず表示される） */
@keyframes hero-fade-up {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: none; }
}
@keyframes hero-zoom {
	from { transform: scale(1.06); }
	to { transform: scale(1); }
}
@keyframes hero-vertical {
	from { opacity: 0; clip-path: inset(0 0 100% 0); }
	to { opacity: 1; clip-path: inset(0 0 -8% 0); }
}
/* ローディング（--intro）明けを起点に順に登場 */
.hero__img { animation: hero-zoom 6.5s var(--intro) cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero__eyebrow { animation: hero-fade-up 0.9s calc(var(--intro) + 0.16s) cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero__title-line:nth-child(1) { animation: hero-fade-up 1s calc(var(--intro) + 0.32s) cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero__title-line:nth-child(2) { animation: hero-fade-up 1s calc(var(--intro) + 0.46s) cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero__lead { animation: hero-fade-up 1s calc(var(--intro) + 0.64s) cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero__badges { animation: hero-fade-up 1s calc(var(--intro) + 0.8s) cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero__cta { animation: hero-fade-up 1s calc(var(--intro) + 0.94s) cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero__note { animation: hero-fade-up 1s calc(var(--intro) + 1.08s) cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero__vertical { animation: hero-vertical 1.4s calc(var(--intro) + 0.9s) cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero__scroll { animation: hero-fade-up 1s calc(var(--intro) + 1.3s) cubic-bezier(0.22, 0.61, 0.36, 1) both; }

/* スクロールフェード（単体・時差グループ共通） */
.js-fade {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js-fade.is-visible { opacity: 1; transform: none; }

/* 見出しの朱点：表示時にぽんと出る */
.section-title.js-fade::before {
	transform: scale(0);
	transition: transform 0.55s 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.section-title.js-fade.is-visible::before { transform: scale(1); }

/* 選ばれる理由：画像ワイプ＋テキスト時差フェード */
.js-reveal .reason__media { overflow: hidden; border-radius: var(--radius); }
.js-reveal .reason__media img {
	clip-path: inset(0 100% 0 0);
	transform: scale(1.06);
	transition: clip-path 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js-reveal:nth-child(odd) .reason__media img { clip-path: inset(0 0 0 100%); }
.js-reveal.is-visible .reason__media img { clip-path: inset(0 0 0 0); transform: scale(1); }
.js-reveal .reason__text {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.9s 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js-reveal.is-visible .reason__text { opacity: 1; transform: none; }

/* FAQ 回答のふわっと表示 */
@keyframes faq-open {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}
.faq__item[open] .faq__a { animation: faq-open 0.45s ease both; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.loader { display: none; }
	.band__img { position: absolute; width: 100%; height: 100%; }
	[data-parallax] { transform: none !important; }
	body.home { --intro: 0s; }
	body.home .site-header { animation: none; }
	.js-fade, .js-reveal .reason__text { opacity: 1; transform: none; transition: none; }
	.js-reveal .reason__media img { clip-path: none; transform: none; transition: none; }
	.hero__img, .hero__eyebrow, .hero__title-line, .hero__lead, .hero__badges,
	.hero__cta, .hero__note, .hero__vertical, .hero__scroll,
	.hero__scroll-line::after, .faq__item[open] .faq__a { animation: none; }
	.section-title.js-fade::before { transform: none; transition: none; }
}

/* =========================================================
   Responsive
========================================================= */
/* 1025〜1200px：PCナビを維持したまま詰める帯。
   電話番号を畳み、ナビの字間・間隔を絞って折り返しを防ぐ */
@media (max-width: 1200px) {
	.site-header__inner { gap: 20px; }
	.site-header__nav ul { gap: 16px; }
	.site-header__nav a { font-size: 12.5px; letter-spacing: 0.04em; }
	.site-header__tel { display: none; }
	.site-header__actions { gap: 12px; }
	.btn--header { padding: 10px 20px; font-size: 12.5px; }
}

@media (max-width: 1024px) {
	.site-header__nav { display: none; }
	.site-header__nav.is-open {
		display: block;
		position: absolute;
		top: var(--header-h);
		left: 0; right: 0;
		background: #fff; /* 下のヒーロー文字が透けないよう不透過に */
		border-bottom: 1px solid var(--line);
		padding: 12px 24px 20px;
	}
	.site-header__nav.is-open ul { flex-direction: column; gap: 0; }
	.site-header__nav.is-open a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
	.site-header__toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px; height: 44px;
		padding: 10px;
		background: none;
		border: none;
		cursor: pointer;
		margin-left: auto;
	}
	/* margin-left:auto をアクションズ側だけに持たせ、
	   トグルとの間で余白が二分されてボタンが中央に浮くのを防ぐ */
	.site-header__actions { margin-left: auto; }
	.site-header__toggle { margin-left: 0; }
	.site-header__toggle span:not(.visually-hidden) {
		display: block;
		width: 100%; height: 1.5px;
		background: var(--ink-strong);
		transition: transform 0.25s, opacity 0.25s;
	}
	.site-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
	.site-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.site-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
	.site-header__tel { display: none; }

	.method__grid { grid-template-columns: 1fr; }
	.method__media { position: static; max-width: 560px; }
	.doctor__grid { grid-template-columns: 1fr; gap: 44px; }
	.doctor__media { max-width: 340px; }
	.stats__list { grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
	.stats__item:nth-child(4) { border-left: none; }
	.reason__item, .reason__item:nth-child(odd) { grid-template-columns: 1fr; gap: 24px; }
	.reason__item:nth-child(odd) .reason__media { order: -1; }
	.reason__item .reason__media { order: -1; max-width: 560px; }
}

@media (max-width: 720px) {
	:root { --header-h: 62px; }
	body { font-size: 14.5px; }
	.pc-only { display: none; }
	.sp-only { display: inline; }
	.section-inner { padding: 80px 20px; }
	.section-title { margin-bottom: 38px; }

	.site-header__inner { padding: 0 18px; }
	.site-header__actions .btn--header { display: none; }
	.site-header__logo { height: 31px; }

	.hero { min-height: auto; }
	.hero__body { padding: 40px 20px 56px; }
	.hero__vertical { display: none; }
	.hero__scrim {
		background: linear-gradient(to top,
			rgba(255, 255, 255, 0.96) 0%,
			rgba(255, 255, 255, 0.85) 52%,
			rgba(255, 255, 255, 0.42) 100%);
	}
	.hero__img { object-position: 60% 50%; }
	.hero__eyebrow { font-size: 10.5px; padding: 6px 16px; margin-bottom: 22px; }
	.hero__badges { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
	.hero__badges li { min-width: 0; padding: 14px 6px 12px; }
	.hero__badges strong { font-size: 15.5px; }
	.hero__badges strong em { font-size: 10.5px; }
	.hero__badges span { font-size: 9.5px; }
	.hero__cta { margin-top: 28px; }
	.hero__cta .btn { width: 100%; }

	.stats { padding: 34px 20px 24px; }
	.stats__list { grid-template-columns: 1fr 1fr; row-gap: 18px; }
	.stats__item { border-left: none !important; }
	.stats__item + .stats__item { border-left: none; }
	.stats__value { font-size: 14.5px; }

	.worry__box { padding: 6px 20px; }
	.worry__list li { padding: 16px 4px 16px 40px; }
	.worry__list li::before { width: 23px; height: 23px; font-size: 11.5px; left: 2px; }
	.worry__answer { padding: 24px 20px; margin-top: 28px; }
	/* モバイルは固定窓をやめ、顔が見える位置で静止表示 */
	.band { min-height: 300px; clip-path: none; }
	.band__img { position: absolute; width: 100%; height: 100%; object-position: 62% 22%; }
	.band__body { padding: 60px 20px; }
	.site-footer__logo { height: 38px; }

	.about__table-wrap { padding: 20px 16px; }
	.price__table-wrap { padding: 20px 16px; }
	/* SPでは表が見切れるため、横スクロールできることを明示する */
	.about__table-wrap::before,
	.price__table-wrap::before {
		content: "→ 表は横にスクロールできます";
		display: block;
		font-size: 11px;
		letter-spacing: 0.06em;
		color: var(--ink-soft);
		margin-bottom: 10px;
	}
	.case__grid { grid-template-columns: 1fr; }
	.clinic__grid { grid-template-columns: 1fr; gap: 36px; }
	.column__grid { grid-template-columns: 1fr; }

	.method__points li { padding: 20px 20px 18px 58px; }
	.method__points li::before { left: 20px; font-size: 19px; }

	.flow__list::before { left: 23px; }
	.flow__list li { padding-left: 68px; padding-bottom: 34px; }
	.flow__list li::after { left: 16px; }

	.faq__q { padding: 18px 48px 18px 54px; font-size: 14.5px; }
	.faq__q::before { left: 22px; }
	.faq__a { padding-left: 54px; padding-right: 22px; }
	.faq__a::before { left: 22px; }

	.site-footer__inner { grid-template-columns: 1fr; gap: 28px; }
	.site-footer { padding-bottom: 130px; }
	.fixed-cta { display: grid; }

	.hero__scroll { display: none; }
	.about::after { width: 220px; height: 220px; right: -40px; bottom: -30px; opacity: 0.45; }
	.cta::after { width: 200px; height: 200px; left: -50px; bottom: -36px; opacity: 0.4; }

	.article__content { padding: 28px 20px; }
	.supervisor { grid-template-columns: 54px 1fr; padding: 14px 16px; }
	.supervisor__photo img { width: 54px; height: 54px; }
}