/* =========================================================
   /menu/ 固有スタイル (HIN-110: standalone HTML プロトタイプ忠実再現)

   - HIN-109 初期実装後のユーザーフィードバックを受けて、プロトタイプ
     `/workspace/tmp/menu-standalone.html` の :root トークン・JSX inline
     style 値を逐語的にトレースする全面リウォーク
   - .page-menu スコープでトークン宣言。:root には漏らさず、トップや
     他下層に影響を与えない
   - body font-family は Shippori Mincho B1 をベース。line-height 1.85
   - 純白 #ffffff / クリーム #faf8f3 の 2 トーン交互セクション
   - 深緑 #173a33 はアクセント色（大番号・チャプターバー・FooterCTA 背景）
   - StickyNav は position:fixed + 非スクロール時透明、スクロール後 blur
   ========================================================= */

/* ---------- スコープトークン (プロトタイプ :root と完全一致) ---------- */
.page-menu {
	--menu-color-main-dark: #173a33;
	--menu-color-accent:    #c8a96a;
	--menu-color-bg:        #ffffff;
	--menu-color-bg-tint:   #faf8f3;
	--menu-color-text:      #262626;
	--menu-color-muted:     #6f6f6f;

	--menu-bg-dark-2:       #1f4a40;
	--menu-bg-cream-2:      #f3eedf;

	--menu-ink-cream:       #f1ead7;
	--menu-ink-cream-soft:  #b8ad8c;

	--menu-gold:            #c8a96a;
	--menu-gold-soft:       #a88a4f;
	--menu-gold-dim:        #8a7240;

	--menu-rule-light:      rgba(23, 58, 51, 0.16);
	--menu-rule-soft:       rgba(23, 58, 51, 0.14);
	--menu-rule-dark:       rgba(200, 169, 106, 0.32);

	--menu-font-mincho:     var(--font-main);
	--menu-font-en:         var(--font-en);
	--menu-font-mono:       var(--font-mono);

	--menu-radius: 2px;

	background: var(--menu-color-bg);
	color: var(--menu-color-text);
	font-family: var(--menu-font-mincho);
	font-weight: 400;
	font-feature-settings: 'palt' 1;
	line-height: 1.85;
}

/* /menu/ ではプロトタイプの StickyNav がページのトップナビとして機能する。
   WP の `.site-header` と重複するため /menu/ ページ上では非表示にして
   プロトタイプの「ページが直接ブラウザ最上部に張り付く」設計を再現する。
   WordPress の `body_class()` は `page-{template}.php` テンプレートに対して
   `page-template-page-menu-php` クラスを付与するため、それで絞り込む。 */
body.page-template-page-menu-php .site-header,
body.page-template-page-menu .site-header {
	display: none;
}

/* ---------- 共通: eyebrow (プロトタイプ .eyebrow と完全一致) ---------- */
/* base.css の .eyebrow を /menu/ スコープ内で上書き */
.page-menu .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--menu-font-mono);
	font-style: normal;
	font-weight: 400;
	font-size: 10px;
	letter-spacing: 0.28em;
	color: var(--menu-gold-soft);
	text-transform: uppercase;
	margin: 0;
}
.page-menu .eyebrow::before {
	content: '';
	display: inline-block;
	flex-shrink: 0;
	width: 32px;
	height: 1px;
	background: var(--menu-gold-soft);
}
.page-menu .eyebrow::after {
	content: none;
}
/* 深緑面（FooterCTA 等）の上では gold(#c8a96a) に切替 */
.page-menu .eyebrow-on-dark {
	color: var(--menu-gold);
}
.page-menu .eyebrow-on-dark::before {
	background: var(--menu-gold);
}

/* ---------- 共通: .btn (プロトタイプ .btn と完全一致) ---------- */
.page-menu .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 16px 32px;
	border: 1px solid var(--menu-color-main-dark);
	border-radius: var(--menu-radius);
	color: var(--menu-color-main-dark);
	background: transparent;
	font-family: var(--menu-font-mincho);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.16em;
	cursor: pointer;
	text-decoration: none;
	transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
	min-height: 0;
}
.page-menu .btn:hover,
.page-menu .btn:focus-visible {
	background: var(--menu-color-main-dark);
	color: #fff;
}
/* btn-gold: 主に CTA セクションで使うゴールド枠ボタン */
.page-menu .btn-gold,
.page-menu .btn-on-dark {
	border: 1px solid var(--menu-gold);
	color: var(--menu-gold);
	background: transparent;
}
.page-menu .btn-gold:hover,
.page-menu .btn-gold:focus-visible,
.page-menu .btn-on-dark:hover,
.page-menu .btn-on-dark:focus-visible {
	background: var(--menu-gold);
	color: var(--menu-color-main-dark);
	border-color: var(--menu-gold);
}
/* btn-line: 詳細セクションの「このメニューで予約する」用。深緑塗りつぶし。 */
.page-menu .btn-line {
	background: var(--menu-color-main-dark);
	color: #fff;
	border: 1px solid var(--menu-color-main-dark);
}
.page-menu .btn-line:hover,
.page-menu .btn-line:focus-visible {
	background: transparent;
	color: var(--menu-color-main-dark);
	border-color: var(--menu-color-main-dark);
}
/* btn-outline: 詳細セクションの「↑ 一覧に戻る」用。透明 + 細枠線。 */
.page-menu .btn-outline {
	background: transparent;
	color: var(--menu-color-main-dark);
	border: 1px solid var(--menu-rule-light);
}
.page-menu .btn-outline:hover,
.page-menu .btn-outline:focus-visible {
	background: rgba(23, 58, 51, 0.05);
	border-color: var(--menu-color-main-dark);
}
/* btn-outline-on-dark: FooterCTA 内の「お電話で予約」用。深緑面で ink-cream 系。 */
.page-menu .btn-outline-on-dark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 20px 44px;
	border: 1px solid var(--menu-ink-cream-soft);
	border-radius: var(--menu-radius);
	color: var(--menu-ink-cream);
	background: transparent;
	font-family: var(--menu-font-mincho);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.16em;
	text-decoration: none;
	transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.page-menu .btn-outline-on-dark:hover,
.page-menu .btn-outline-on-dark:focus-visible {
	background: var(--menu-ink-cream);
	color: var(--menu-color-main-dark);
	border-color: var(--menu-ink-cream);
}

/* ---------- M-2 StickyNav (fixed + transparent → blur on scroll) ---------- */
.menu-sticky-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	padding: 18px clamp(24px, 5vw, 80px);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 24px;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom: 1px solid transparent;
	transition: background 280ms ease, backdrop-filter 280ms ease, border-color 280ms ease;
}
.menu-sticky-nav.is-scrolled {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom-color: var(--menu-rule-light);
}
.menu-sticky-brand {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	text-decoration: none;
	line-height: 1.1;
}
.menu-sticky-brand-jp {
	font-family: var(--menu-font-mincho);
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 0.12em;
	color: var(--menu-color-main-dark);
}
.menu-sticky-brand-en {
	font-family: var(--menu-font-en);
	font-style: italic;
	font-weight: 400;
	font-size: 10px;
	letter-spacing: 0.2em;
	color: var(--menu-gold);
	text-transform: uppercase;
}
.menu-sticky-nums {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 22px;
}
.menu-sticky-nums li {
	margin: 0;
}
.menu-sticky-nums a {
	font-family: var(--menu-font-mono);
	font-weight: 400;
	font-size: 10px;
	letter-spacing: 0.16em;
	color: var(--menu-color-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color 220ms ease;
}
.menu-sticky-nums a:hover,
.menu-sticky-nums a:focus-visible {
	color: var(--menu-color-main-dark);
}
/* StickyNav 内の CTA は通常 .btn より小さめ */
.menu-sticky-cta {
	padding: 10px 22px !important;
	font-size: 12px !important;
	letter-spacing: 0.14em !important;
}

/* HIN-113: StickyNav 右端のアクション群（ハンバーガー + 予約 CTA を 1 セル化）。
   `.menu-sticky-drawer` は `.menu-sticky-nav` (position: fixed) 基準で
   `position: absolute` で配置するため、grid セルではなく単独で flow 外に置く。 */
.menu-sticky-actions {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

/* ハンバーガーボタン（3 本線・ミニマル）。
   `aria-expanded="true"` で × に変形する。 */
.menu-sticky-toggle {
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--menu-rule-light);
	border-radius: 0;
	cursor: pointer;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
	transition: border-color 220ms ease;
}
.menu-sticky-toggle span {
	display: block;
	width: 18px;
	height: 1px;
	background: var(--menu-color-main-dark);
	transition: transform 220ms ease, opacity 220ms ease;
}
.menu-sticky-toggle:hover,
.menu-sticky-toggle:focus-visible {
	border-color: var(--menu-gold);
}
.menu-sticky-toggle:focus-visible {
	outline: 2px solid var(--menu-gold);
	outline-offset: 2px;
}
.menu-sticky-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}
.menu-sticky-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}
.menu-sticky-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}

/* ドロワー（ハンバーガー直下から開くドロップダウン）。
   `hidden` 属性で初期非表示。JS が `removeAttribute('hidden')` で開く。 */
.menu-sticky-drawer {
	position: absolute;
	top: 100%;
	right: clamp(20px, 4vw, 80px);
	margin-top: 8px;
	min-width: 240px;
	padding: 8px 24px;
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--menu-rule-light);
	box-shadow: 0 10px 30px rgba(23, 58, 51, 0.08);
}
.menu-sticky-drawer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.menu-sticky-drawer li {
	margin: 0;
}
.menu-sticky-drawer a {
	display: block;
	padding: 14px 4px;
	font-family: var(--menu-font-mincho);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.12em;
	color: var(--menu-color-main-dark);
	text-decoration: none;
	border-bottom: 1px solid var(--menu-rule-light);
	transition: color 220ms ease;
}
.menu-sticky-drawer li:last-child a {
	border-bottom: none;
}
.menu-sticky-drawer a:hover,
.menu-sticky-drawer a:focus-visible {
	color: var(--menu-gold);
}

/* ---------- M-1 Hero ---------- */
.menu-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(100px, 14vw, 180px) 0 clamp(60px, 10vw, 120px);
	background: var(--menu-color-bg);
	color: var(--menu-color-text);
}
/* Gold accent rule (right-top). プロトタイプ 1700-1707 行と完全一致。 */
.menu-hero-rule {
	position: absolute;
	top: 80px;
	right: calc((100vw - min(1320px, 100vw)) / 2 + 80px);
	width: 1px;
	height: 96px;
	background: var(--menu-gold);
}
.menu-hero-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 clamp(24px, 5vw, 80px);
}
.menu-hero .eyebrow {
	margin-bottom: 0;
}
.menu-hero-title {
	margin: 32px 0 28px;
	font-family: var(--menu-font-mincho);
	font-weight: 500;
	font-size: clamp(40px, 6.5vw, 88px);
	line-height: 1.4;
	letter-spacing: 0.06em;
	color: var(--menu-color-main-dark);
}
.menu-hero-title-accent {
	color: var(--menu-gold);
	font-style: normal;
}
.menu-hero-lead {
	margin: 0 0 60px;
	max-width: 600px;
	font-family: var(--menu-font-mincho);
	font-weight: 400;
	/* HIN-170: 本文サイズ +22% (clamp(15,1.4vw,18) → clamp(18,1.7vw,22)) */
	font-size: clamp(18px, 1.7vw, 22px);
	line-height: 2.0;
	color: var(--menu-color-muted);
}
/* HIN-112: 文節単位の折り返しユーティリティ。
   文章を <span class="nowrap"> で文節ごとに包むと、ブラウザが
   container 幅に応じて文節境界（読点・句点・修飾終わり）でのみ
   改行する。単語中改行・カタカナ語中改行を防げる。 */
.page-menu .nowrap {
	display: inline-block;
	white-space: nowrap;
}
.menu-hero-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--menu-rule-light);
}
.menu-hero-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 28px 24px;
	border-bottom: 1px solid var(--menu-rule-light);
	border-right: 1px solid var(--menu-rule-light);
	background: transparent;
	text-decoration: none;
	transition: background 220ms ease;
}
.menu-hero-card:nth-child(4n) {
	border-right: none;
}
.menu-hero-card:hover,
.menu-hero-card:focus-visible {
	background: rgba(200, 169, 106, 0.06);
}
.menu-hero-card-num {
	font-family: var(--menu-font-en);
	font-style: italic;
	font-weight: 300;
	font-size: 36px;
	line-height: 0.9;
	color: var(--menu-gold);
}
.menu-hero-card-name {
	font-family: var(--menu-font-mincho);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	color: var(--menu-color-main-dark);
}
.menu-hero-card-en {
	font-family: var(--menu-font-en);
	font-style: italic;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.05em;
	color: var(--menu-gold-soft);
}

/* ---------- M-3 メニュー詳細セクション ---------- */
.menu-detail {
	position: relative;
	padding: clamp(60px, 9vw, 140px) 0;
	scroll-margin-top: 80px;
}
.menu-detail.is-white {
	background: var(--menu-color-bg);
	color: var(--menu-color-text);
}
.menu-detail.is-cream {
	background: var(--menu-color-bg-tint);
	color: var(--menu-color-text);
}
/* alias アンカー（#menu-NN） */
.menu-detail-alias {
	display: block;
	height: 0;
	overflow: hidden;
	scroll-margin-top: 80px;
}
.menu-detail-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 clamp(24px, 5vw, 80px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: clamp(40px, 6vw, 100px);
}
.menu-detail.is-flip .menu-detail-inner {
	direction: rtl;
}
.menu-detail.is-flip .menu-detail-photo,
.menu-detail.is-flip .menu-detail-body {
	direction: ltr;
}

/* 写真ブロック (.ph 相当) */
.menu-detail-photo {
	width: 100%;
}
.menu-detail-photo-figure {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: linear-gradient(180deg, #ece6d4 0%, #ddd5bc 100%);
	border: 1px solid rgba(23, 58, 51, 0.14);
	border-radius: var(--menu-radius);
}
/* .ph::before の斜めストライプ装飾。画像未設定時のフォールバック背景 */
.menu-detail-photo-figure::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		45deg,
		rgba(23, 58, 51, 0.04) 0 18px,
		transparent 18px 36px
	);
	pointer-events: none;
	z-index: 1;
}
.menu-detail-photo-figure img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 2;
}
/* HIN-113: PHOTO — Symptom Care 等のオーバーレイラベル (.menu-detail-photo-tag) は削除済み。
   関連 figcaption も page-menu.php から撤去し、孤児スタイルを残さない。 */

/* HIN-114: PhotoCluster ラッパー（プロトタイプ `function PhotoCluster` 準拠）。
   `.is-1` は単独 figure（既存の 4/5 縦）。
   `.is-2` は 1 列 × 2 行のスタック、子 figure の aspect-ratio を 5/4 / 16/10 に上書き。
   `.is-3` は 2 列 × 2 行で 1 枚目が full-width（横長 10/7）、2/3 枚目が 1/1 正方形。
   いずれもサブ figure 側で `.menu-detail-photo-figure` の `aspect-ratio: 4/5` を上書きする。 */
.menu-detail-photo-cluster {
	width: 100%;
}
.menu-detail-photo-cluster.is-1 > .menu-detail-photo-figure {
	/* 単独ケース。既存 4/5 を維持。 */
	aspect-ratio: 4 / 5;
}
.menu-detail-photo-cluster.is-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
.menu-detail-photo-cluster.is-2 > .menu-detail-photo-figure:nth-child(1) {
	aspect-ratio: 5 / 4;
}
.menu-detail-photo-cluster.is-2 > .menu-detail-photo-figure:nth-child(2) {
	aspect-ratio: 16 / 10;
}
.menu-detail-photo-cluster.is-3 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.menu-detail-photo-cluster.is-3 > .menu-detail-photo-figure:nth-child(1) {
	/* full-width で配置。プロトタイプの `gridTemplateRows: '1.4fr 1fr'` と
	   `height: 100%` の組み合わせは grid container 高さが未定の場合に
	   `fr` 単位の挙動が安定しないため、aspect-ratio 10/7 で同等の縦横比を再現する。 */
	grid-column: 1 / -1;
	aspect-ratio: 10 / 7;
}
.menu-detail-photo-cluster.is-3 > .menu-detail-photo-figure:nth-child(2),
.menu-detail-photo-cluster.is-3 > .menu-detail-photo-figure:nth-child(3) {
	aspect-ratio: 1 / 1;
}

/* 本文ブロック */
.menu-detail-body {
	display: flex;
	flex-direction: column;
}
/* chapter (vertical bar + MENU NO.) — プロトタイプ 1567-1586 行 */
.menu-detail-chapter {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 28px;
}
.menu-detail-chapter-bar {
	display: inline-block;
	width: 2px;
	height: 22px;
	background: var(--menu-color-main-dark);
}
.menu-detail-chapter-label {
	font-family: var(--menu-font-mono);
	font-weight: 400;
	font-size: 10px;
	letter-spacing: 0.28em;
	color: var(--menu-color-main-dark);
	text-transform: uppercase;
}
/* head (numeral + meta) — プロトタイプ 1587-1618 行 */
.menu-detail-head {
	display: flex;
	align-items: baseline;
	gap: 24px;
	margin-bottom: 24px;
}
.menu-detail-numeral {
	display: inline-block;
	font-family: var(--menu-font-en);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(72px, 9vw, 132px);
	line-height: 0.85;
	letter-spacing: -0.02em;
	color: var(--menu-color-main-dark);
}
.menu-detail-meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.menu-detail-en {
	font-family: var(--menu-font-en);
	font-style: italic;
	font-weight: 400;
	font-size: 18px;
	letter-spacing: 0.04em;
	color: var(--menu-gold);
	text-transform: none;
}
/* h2 メニュー名 — プロトタイプ 1619-1629 行 */
.menu-detail-name {
	margin: 0 0 28px;
	font-family: var(--menu-font-mincho);
	font-weight: 500;
	font-size: clamp(24px, 2.6vw, 34px);
	line-height: 1.4;
	letter-spacing: 0.04em;
	color: var(--menu-color-main-dark);
	white-space: nowrap;
}
/* headline (キャッチ) — プロトタイプ 1630-1639 行 */
.menu-detail-headline {
	margin: 0 0 24px;
	font-family: var(--menu-font-mincho);
	font-weight: 400;
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.85;
	letter-spacing: 0.04em;
	color: var(--menu-color-main-dark);
}
/* intro / body — プロトタイプ 1640-1653 行 */
.menu-detail-intro {
	margin: 0 0 18px;
	font-family: var(--menu-font-mincho);
	font-weight: 400;
	/* HIN-170: 本文サイズ +20% (15 → 18) */
	font-size: 18px;
	line-height: 2.0;
	color: var(--menu-color-muted);
}
.menu-detail-body-text {
	margin: 0 0 40px;
	font-family: var(--menu-font-mincho);
	font-weight: 400;
	/* HIN-170: 本文サイズ +20% (15 → 18) */
	font-size: 18px;
	line-height: 2.0;
	color: var(--menu-color-muted);
}
/* rule (body-text と features の間) — プロトタイプ 1654-1659 行 */
.menu-detail-rule {
	width: 100%;
	height: 1px;
	background: var(--menu-rule-light);
	margin: 0 0 32px;
}
.menu-detail.is-cream .menu-detail-rule {
	background: var(--menu-rule-soft);
}

/* features grid — プロトタイプ 1660-1683 行 */
.menu-detail-lists {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-bottom: 40px;
}
/* HIN-178: .menu-detail-lists-indicator は SP 横スライド時のみ表示する。
   PC / タブレットでは常に非表示にしておき、≤640px の media query で flex に上書きする。 */
.menu-detail-lists-indicator {
	display: none;
}
.menu-detail-list-block .eyebrow {
	margin-bottom: 18px;
}
.menu-feature-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.menu-feature-list li {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 0;
	margin: 0;
	font-family: var(--menu-font-mincho);
	font-weight: 400;
	/* HIN-170: 本文サイズ +20% (15 → 18) */
	font-size: 18px;
	line-height: 1.7;
	color: var(--menu-color-text);
}
.menu-feature-num {
	flex-shrink: 0;
	display: inline-block;
	min-width: 24px;
	padding-top: 2px;
	font-family: var(--menu-font-en);
	font-style: italic;
	font-weight: 400;
	font-size: 14px;
	color: var(--menu-gold);
	letter-spacing: 0;
}
.menu-feature-text {
	display: inline-block;
	font-size: 16px;
}

/* PriceBox: 枠線付きカード — プロトタイプ 1432-1486 行 */
.menu-detail-price {
	display: grid;
	grid-template-columns: auto 1px 1fr 1px 1fr;
	align-items: end;
	gap: 22px;
	padding: 22px 26px;
	margin-bottom: 32px;
	border: 1px solid rgba(23, 58, 51, 0.2);
	background: rgba(255, 255, 255, 0.5);
}
.menu-detail-price-cell {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.menu-detail-price-divider {
	align-self: stretch;
	width: 1px;
	background: rgba(23, 58, 51, 0.2);
}
.menu-detail-price-label {
	font-family: var(--menu-font-mono);
	font-weight: 400;
	font-size: 9px;
	letter-spacing: 0.22em;
	color: var(--menu-color-muted);
	text-transform: uppercase;
	white-space: nowrap;
}
.menu-detail-price-value {
	font-family: var(--menu-font-mincho);
	font-weight: 500;
	font-size: clamp(22px, 2vw, 28px);
	line-height: 1.1;
	letter-spacing: 0.02em;
	color: var(--menu-color-main-dark);
	white-space: nowrap;
}
.menu-detail-price-value.is-accent {
	color: var(--menu-gold);
}

.menu-detail-actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

/* ---------- M-5 FooterCTA (深緑背景 #173a33) ---------- */
.menu-footer-cta {
	background: var(--menu-color-main-dark);
	color: var(--menu-ink-cream);
	padding: clamp(80px, 12vw, 160px) 0;
	border-top: 1px solid var(--menu-rule-light);
	text-align: center;
}
.menu-footer-cta-inner {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 clamp(24px, 5vw, 80px);
}
/* "Reservation" 中央＋左右に水平ルール — プロトタイプ .divider-mark 相当 */
.menu-footer-cta-mark {
	display: flex;
	align-items: center;
	gap: 16px;
}
.menu-footer-cta-mark::before,
.menu-footer-cta-mark::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--menu-rule-dark);
}
.menu-footer-cta-mark-label {
	font-family: var(--menu-font-en);
	font-style: italic;
	font-weight: 400;
	font-size: 22px;
	letter-spacing: 0.06em;
	color: var(--menu-gold);
	text-transform: none;
	white-space: nowrap;
}
.menu-footer-cta-title {
	margin: 36px 0 24px;
	font-family: var(--menu-font-mincho);
	font-weight: 500;
	font-size: clamp(28px, 3.6vw, 44px);
	line-height: 1.5;
	letter-spacing: 0.06em;
	color: var(--menu-ink-cream);
}
.menu-footer-cta-lead {
	margin: 0 0 48px;
	font-family: var(--menu-font-mincho);
	font-weight: 400;
	/* HIN-170: 本文サイズ +20% (15 → 18) */
	font-size: 18px;
	line-height: 2.0;
	color: var(--menu-ink-cream-soft);
}
.menu-footer-cta-actions {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}
/* FooterCTA 内の primary（btn-line）はゴールド枠ボタンに切替
   HIN-166: .btn-outline-on-dark と形状を揃えるため border-radius を明示し四角枠化（基底 .btn の 999px を上書き） */
.menu-footer-cta .btn-line {
	padding: 20px 44px;
	border: 1px solid var(--menu-gold);
	border-radius: var(--menu-radius);
	color: var(--menu-gold);
	background: transparent;
	font-family: var(--menu-font-mincho);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.16em;
}
.menu-footer-cta .btn-line:hover,
.menu-footer-cta .btn-line:focus-visible {
	background: var(--menu-gold);
	color: var(--menu-color-main-dark);
	border-color: var(--menu-gold);
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 960px) {
	/* StickyNav: 番号リストを撤去、ブランド + CTA だけ残す */
	.menu-sticky-nav {
		grid-template-columns: 1fr auto;
		padding: 14px clamp(20px, 4vw, 32px);
	}
	.menu-sticky-nums {
		display: none;
	}
	/* Hero グリッドを 2 列に */
	.menu-hero-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.menu-hero-card {
		border-right: 1px solid var(--menu-rule-light);
	}
	.menu-hero-card:nth-child(4n) {
		border-right: 1px solid var(--menu-rule-light);
	}
	.menu-hero-card:nth-child(2n) {
		border-right: none;
	}
	/* 詳細セクション: 1 カラム化 (flip を解除) */
	.menu-detail-inner {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.menu-detail.is-flip .menu-detail-inner {
		direction: ltr;
	}
	.menu-detail-photo-figure {
		max-width: clamp(280px, 70vw, 480px);
		margin: 0 auto;
	}
	/* HIN-114: モバイルでは PhotoCluster 全体に max-width / 中央寄せを伝播する。
	   個別 figure に max-width をかけると `.is-2` / `.is-3` のグリッド内で並びが崩れるため、
	   ラッパー側で固めて中の grid 子要素は 100% で展開させる。 */
	.menu-detail-photo-cluster {
		max-width: clamp(280px, 70vw, 480px);
		margin: 0 auto;
	}
	.menu-detail-photo-cluster.is-2 > .menu-detail-photo-figure,
	.menu-detail-photo-cluster.is-3 > .menu-detail-photo-figure {
		max-width: none;
		margin: 0;
	}
	.menu-detail-lists {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.menu-detail-price {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	/* HIN-178 / HIN-179: SP / タブレットでは「セクション名 → headline → 写真 → 本文」の
	   順番で表示する。
	   - `.menu-detail-inner` 自体は既に 1col grid。`.menu-detail-body` を
	     `display: contents` で平坦化し、見出し（chapter + head + name）と
	     headline（name 直下のキャッチコピー）を写真の前に並び替える。
	   - PC（≥961px）の 2col grid + is-flip の方向制御には影響しない。
	   - HIN-179: クライアント要望で headline を name 直下・写真の前に配置。
	     既存 HTML 順は `name → headline → 写真` のため、order だけで実現する。 */
	.menu-detail-body {
		display: contents;
	}
	.menu-detail-body > .menu-detail-chapter,
	.menu-detail-body > .menu-detail-head,
	.menu-detail-body > .menu-detail-name {
		order: 1;
	}
	.menu-detail-body > .menu-detail-headline {
		order: 2;
	}
	.menu-detail-photo {
		order: 3;
	}
	.menu-detail-body > .menu-detail-intro,
	.menu-detail-body > .menu-detail-body-text,
	.menu-detail-body > .menu-detail-rule,
	.menu-detail-body > .menu-detail-lists-wrap,
	.menu-detail-body > .menu-detail-price,
	.menu-detail-body > .menu-detail-actions {
		order: 4;
	}
	.menu-detail-price-divider {
		display: none;
	}
	.menu-detail-name {
		white-space: normal;
	}
}

@media (max-width: 640px) {
	/* HIN-113: モバイル時はドロワーを左右マージン 16px で広めに */
	.menu-sticky-drawer {
		right: 16px;
		left: 16px;
		min-width: auto;
	}
	.menu-hero {
		padding: clamp(80px, 22vw, 120px) 0 clamp(48px, 10vw, 72px);
	}
	.menu-hero-rule {
		display: none;
	}
	/* HIN-178: SP でも menu-hero-card を 2 列グリッドで表示する。
	   1 列縦並びだと情報密度が低く、PC のセル形式の雰囲気が失われるため。
	   セル内余白を圧縮し、テキストサイズを SP 向けに調整して折り返しすぎを回避。
	   border-right は :nth-child(2n) のみ消して 2 列の右端を成立させる。 */
	.menu-hero-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.menu-hero-card {
		padding: 18px 14px;
		gap: 6px;
		border-right: 1px solid var(--menu-rule-light);
	}
	.menu-hero-card:nth-child(2n) {
		border-right: none;
	}
	.menu-hero-card-num {
		font-size: 28px;
	}
	.menu-hero-card-name {
		font-size: 13.5px;
		line-height: 1.4;
		letter-spacing: 0.02em;
	}
	.menu-hero-card-en {
		font-size: 10.5px;
	}
	.menu-detail {
		padding: clamp(60px, 14vw, 80px) 0;
	}
	.menu-detail-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.menu-detail-numeral {
		font-size: 72px;
	}
	.menu-detail-actions .btn,
	.menu-detail-actions .btn-outline,
	.menu-footer-cta-actions .btn,
	.menu-footer-cta-actions .btn-line,
	.menu-footer-cta-actions .btn-outline-on-dark {
		width: 100%;
		padding: 16px 32px;
	}
	.menu-footer-cta-mark {
		gap: 14px;
	}
	.menu-footer-cta-mark-label {
		font-size: 18px;
	}
	/* HIN-178: SP で .menu-detail-lists を横スライドに切り替える。
	   front-page の .reasons-list と同型の構造で、`.menu-detail-list-block` 2 枚を
	   横並び・scroll-snap・次が見切れる幅で配置する。
	   `@media (max-width: 960px)` で `grid-template-columns: 1fr` になっているのを
	   `display: flex` で上書きするため `display` を明示する。 */
	.menu-detail-lists {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		grid-template-columns: none;
		gap: 16px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding: 0 16px 4px;
		margin: 0 -16px;
		scrollbar-width: none;
	}
	.menu-detail-lists::-webkit-scrollbar {
		display: none;
	}
	.menu-detail-list-block {
		flex: 0 0 82%;
		min-width: 0;
		scroll-snap-align: start;
	}
	/* SP のみインジケーターを表示。ベース宣言（display: none）を上書きする。 */
	.menu-detail-lists-indicator {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin: 14px 0 4px;
	}
	.menu-detail-lists-indicator__dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: rgba(31, 77, 67, 0.2);
		transition: background-color 0.25s ease, transform 0.25s ease;
	}
	.menu-detail-lists-indicator__dot.is-active {
		background: var(--menu-color-main-dark, #1f4d43);
		transform: scale(1.2);
	}

	/* HIN-179 (revert): 自動フェード切替は撤回し、複数枚（.is-2 / .is-3）も
	   既存の grid レイアウトで静的表示する。クライアント要望により、写真サイズや
	   構図の違いで切替時に画面印象が大きく変わる問題を解消する。
	   - `.is-1` / `.is-2` / `.is-3` ともに静止表示。連続切替・ループ・常時ズームは
	     行わない。
	   - 各 figure はスクロールで `.menu-detail` に `.is-visible` が付くタイミング
	     （main.js line 68-82 の IntersectionObserver）で 1 回だけ opacity 0 → 1 と
	     translateY(15px) → 0 をふわっと戻す。`.is-visible` は一度付くと外れない
	     ため再表示・繰り返しは発生しない。
	   - 写真側に 0.15s の transition-delay を入れて「見出し → 写真 → 本文」の
	     自然な時間差を演出する（写真自体は表示後完全静止）。
	   - PC（≥641px）では本ルール自体が当たらないため未演出（既存どおり）。 */
	.menu-detail-photo-cluster > .menu-detail-photo-figure {
		opacity: 0;
		transform: translateY(15px);
		transition: opacity 0.7s ease-out 0.15s, transform 0.9s ease-out 0.15s;
	}
	.menu-detail.is-visible .menu-detail-photo-cluster > .menu-detail-photo-figure {
		opacity: 1;
		transform: translateY(0);
	}

	/* HIN-181 / HIN-182: SP の情報並び順を再構成する。
	   現状（max-width:960px ブロック）: 名前 → headline → 写真 → 本文/lists/price/CTA(順序 4 一括)
	   新規（≤640px）: 名前 → 短い説明（headline）→ 料金 → 写真 → 特徴/こんな方に → 区切り → 短い説明（intro）→ 長い説明 → CTA
	   - 「料金確認までのスクロール量を減らす」「短い説明 → 料金 → 写真」で最初に
	     どんな施術か・料金感・雰囲気を把握できるようにする要望（HIN-181）。
	   - HIN-182: intro（短い説明）は写真上ではなく写真下に置き、body-text（長い説明）と
	     連続したテキスト塊として読ませる。intro と body-text の間に rule を挟まず order 7/8 で隣接させる。
	   - `.menu-detail-body { display: contents }` は 960px ブロックでセット済み。
	     ここでは order のみ上書きするため display: contents は触らない。
	   - PC（≥961px）の 2col grid + is-flip 配置には影響しない。
	   - rule（区切り線）は SP 新順では「特徴/こんな方に → 短い説明（intro）+ 長い説明（body-text）」
	     のテキスト塊への境目として order 6 で配置。 */
	.menu-detail-body > .menu-detail-headline {
		order: 2;
	}
	.menu-detail-body > .menu-detail-price {
		order: 3;
	}
	.menu-detail-photo {
		order: 4;
	}
	.menu-detail-body > .menu-detail-lists-wrap {
		order: 5;
	}
	.menu-detail-body > .menu-detail-rule {
		order: 6;
	}
	.menu-detail-body > .menu-detail-intro {
		order: 7;
	}
	.menu-detail-body > .menu-detail-body-text {
		order: 8;
	}
	.menu-detail-body > .menu-detail-actions {
		order: 9;
	}

	/* HIN-181: SP 写真サイズを `.menu-detail-photo` 領域いっぱいに拡大する。
	   現状（max-width:960px ブロック）: max-width: clamp(280px, 70vw, 480px) で 480px 上限。
	   新規（≤640px）: max-width 制限を解除し、コンテナ幅まで広げる。
	   - クライアント要望: 写真の存在感を強め、施術イメージを伝わりやすくする。
	   - `.is-2` / `.is-3` の複数枚レイアウトも同じく解放（cluster 全体に適用）。 */
	.menu-detail-photo-figure,
	.menu-detail-photo-cluster {
		max-width: none;
		margin: 0;
	}

	/* HIN-181: 料金カードを「枠内 2 段」に再構成する。
	   現状（max-width:960px ブロック）: grid-template-columns: 1fr で縦 3 段（DURATION / 初回 / 通常）。
	   新規（≤640px）: 上段 = DURATION（フルワイド・小さめのメタ情報）、
	                  下段 = 初回 ¥XXX | 通常 ¥XXX（2 列で比較しやすく）。
	   - `:nth-of-type` で cell（div）を指定。divider は <span> なので nth-of-type にカウントされない。
	   - divider は 960px ブロックで display:none 済み、そのまま継承。
	   - 全カード（8 メニュー）の高さ揃え: 値の文字列長は近いため自然サイズで概ね揃う。
	     padding / gap を固定し、`.menu-detail-price-cell` に min-height を持たせて
	     DURATION 文言の長短差（例「60分」と「45分〜60分」）でも上段高さが揃うようにする。
	   - 余白・上品さ重視で padding は PC の 22/26 から 24/22 に変更、border-radius は維持。
	   - 枠線は 1px のままだが、border-color を少し濃く（rgba 0.28）して輪郭を明確化。 */
	.menu-detail-price {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"duration duration"
			"first    usual";
		gap: 14px 22px;
		padding: 20px 22px;
		border-color: rgba(23, 58, 51, 0.28);
		align-items: stretch;
	}
	.menu-detail-price-cell:nth-of-type(1) {
		grid-area: duration;
		padding-bottom: 14px;
		border-bottom: 1px solid rgba(23, 58, 51, 0.14);
	}
	.menu-detail.is-cream .menu-detail-price-cell:nth-of-type(1) {
		border-bottom-color: rgba(23, 58, 51, 0.18);
	}
	.menu-detail-price-cell:nth-of-type(2) {
		grid-area: first;
		min-height: 56px;
	}
	.menu-detail-price-cell:nth-of-type(3) {
		grid-area: usual;
		min-height: 56px;
	}
	/* 価格値の SP フォントサイズを少し圧縮（PC は clamp(22, 2vw, 28)）して
	   2 列レイアウトでも 1 行に収まりやすくする。 */
	.menu-detail-price-value {
		font-size: 22px;
	}
	.menu-detail-price-label {
		font-size: 10px;
	}
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.menu-sticky-nav,
	.menu-hero-card,
	.menu-sticky-nums a,
	.page-menu .btn,
	.page-menu .btn-outline-on-dark {
		transition: none;
	}
}

/* HIN-179 (revert): SP かつ reduced-motion 環境ではスクロールイン演出を打ち消し、
   初期から完全表示する。複数枚・1 枚いずれも静的表示のみとなる。 */
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
	.menu-detail-photo-cluster > .menu-detail-photo-figure,
	.menu-detail.is-visible .menu-detail-photo-cluster > .menu-detail-photo-figure {
		opacity: 1;
		transform: none;
		transition: none;
	}
}