/*
Theme Name: naoto.K
Theme URI: https://naotok.tokyo
Author: eSTACK
Description: naoto.K（神田錦町・和×フレンチ）公式サイトテーマ。デザインプロトタイプ（React 版トップページ）からの移植。Hero は町の灯り＝安堵をテーマに夜のファサード文様・組子・ランタングローで構成。Hero 以外は名刺調のクリーム地＋同系色パターンを基調とする。
Version: 1.6.6
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: naotok
*/

/* ══════════════════════════════════════════════════════════════
   0. Design tokens（BRAND パレット）
   ══════════════════════════════════════════════════════════════ */
:root {
	--ink: #1a1612;
	--paper: #f4ede0;
	--paper-hi: #faf5ea;
	--crimson: #8a1f1f;
	--crimson-deep: #6b1818;
	--lantern: #c8924d;      /* 町の灯り（Hero など暗い背景用） */
	--lantern-deep: #8a5f2a; /* 名刺調の明るい紙面でもAA基準(4.5:1)を満たす深い金 */
	--kiriko: #3a4b5a;       /* 江戸切子の藍 */
	--warm-gray: #6b5f52;
	--hair: rgba(26, 22, 18, 0.12);
	--night: #0a0806;

	--font-en: "Cormorant Garamond", serif;
	--font-jp: "Shippori Mincho", "Noto Serif JP", serif;
	--font-mono: "JetBrains Mono", ui-monospace, monospace;

	--banner-h: 72px;
	--rail-w: 116px;
}

/* ══════════════════════════════════════════════════════════════
   1. Base（プロトタイプのシェル HTML より）
   ══════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* html が地色を持ち、body は透過（z-index:-1 のファサード層を塗り潰さないため） */
html { background: var(--paper); scroll-behavior: smooth; }
body {
	background: transparent;
	font-family: var(--font-jp);
	color: var(--ink);
}

a { color: inherit; }
img { max-width: 100%; }

/* アンカー遷移時、固定バナーの下に見出しが隠れないように */
section[id] { scroll-margin-top: calc(var(--banner-h) + 8px); }
@media (max-width: 899px) {
	section[id] { scroll-margin-top: 64px; }
}

::selection { background: var(--crimson); color: var(--paper-hi); }

/* Hero の白文字を、映像/静景/墨の上でも読みやすくするための影 */
.hero {
	text-shadow: 0 1px 9px rgba(10, 8, 6, 0.55), 0 0 1px rgba(10, 8, 6, 0.4);
}

/* Hero 以外：名刺の花菱パターン（写真）の上に墨色文字が乗るため、
   模様との境目をぼかす、ごく薄い明るい縁取りを入れて可読性を上げる */
.news, .this-month, .concept, .chef, .building, .interior, .access,
.site-footer, .entry-shell {
	text-shadow: 0 0 6px rgba(255, 255, 255, 0.85), 0 1px 2px rgba(255, 255, 255, 0.7);
}

@keyframes scrollCue {
	0%   { transform: scaleY(0.2); transform-origin: top; opacity: 0; }
	40%  { transform: scaleY(1);   transform-origin: top; opacity: 1; }
	60%  { transform: scaleY(1);   transform-origin: bottom; opacity: 1; }
	100% { transform: scaleY(0.2); transform-origin: bottom; opacity: 0; }
}
@keyframes railSlideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes reserveDropIn { from { transform: translateY(-120%); } to { transform: translateY(0); } }

/* ══════════════════════════════════════════════════════════════
   2. Utilities
   ══════════════════════════════════════════════════════════════ */
.pattern-fill {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.facade-pattern {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.lantern-glow {
	position: absolute;
	pointer-events: none;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, var(--lantern) 0%, transparent 65%);
	mix-blend-mode: screen;
	filter: blur(4px);
}

/* スクロール出現（reveal.jsx の移植。表示は JS が .is-shown を付与） */
.reveal {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
	transition:
		opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
.reveal.is-shown { opacity: 1; transform: none; will-change: auto; }

/* 縦書き（Vertical Kanji） */
.vertical-kanji {
	writing-mode: vertical-rl;
	font-family: var(--font-jp);
	line-height: 1.4;
	font-weight: 400;
}

/* セクションラベル（EN — 線 — 和文） */
.section-label {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 36px;
}
.section-label__en {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	color: #a8452c;
	font-weight: 500;
}
.section-label__line { width: 36px; height: 1px; background: #a8452c; }
.section-label__jp {
	font-family: var(--font-jp);
	font-size: 12px;
	letter-spacing: 0.35em;
	color: rgba(26, 22, 18, 0.82);
}

/* 画像プレースホルダー（写真差し替え前提の枠） */
.image-placeholder {
	width: 100%;
	background: repeating-linear-gradient(135deg, #ece2cd, #ece2cd 2px, #e4d8c0 2px, #e4d8c0 4px);
	color: rgba(26, 22, 18, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* 言語別表示制御 */
html[data-lang="en"] .lang-jp-only { display: none !important; }
html[data-lang="jp"] .lang-en-only { display: none !important; }
.i18n-hide-empty:empty { display: none; }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	clip-path: inset(50%);
	overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   3. 全体レイアウト＋名刺調の紙面背景（Hero を除く）
   ══════════════════════════════════════════════════════════════ */
.site {
	width: 100%;
	color: var(--ink);
	padding-left: calc(var(--rail-w) + 28px);
	padding-top: var(--banner-h);
}

/* 名刺調の紙面基調（Hero を除く全セクションの背後に敷く）
   実際の名刺写真からシームレス化したタイル画像を敷き、その下に紙色のグラデーションを重ねる */
.site-backdrop {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: var(--paper);
	background-image:
		var(--site-backdrop-tile, none),
		radial-gradient(120% 110% at 35% 0%, var(--paper-hi) 0%, var(--paper) 55%, #ece2cd 100%);
	background-repeat: repeat, no-repeat;
	background-size: auto, cover;
}
.site-backdrop__scrim {
	position: absolute;
	inset: 0;
	/* 画面全体を均一に薄く明るくして、模様の上でも文字が読めるコントラストを確保する */
	background: rgba(250, 245, 234, 0.62);
}

/* ══════════════════════════════════════════════════════════════
   4. 予約バナー（最上部固定）
   ══════════════════════════════════════════════════════════════ */
.site-banner {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: var(--banner-h);
	z-index: 130;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	padding: 0 32px;
	background: linear-gradient(90deg, #3d0d0d 0%, #8a1f1f 30%, #6b1818 100%);
	border-bottom: 1px solid rgba(244, 237, 224, 0.2);
	color: var(--paper-hi);
	box-shadow: 0 8px 28px rgba(10, 8, 6, 0.45);
	animation: reserveDropIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
.site-banner__title {
	font-family: var(--font-jp);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.16em;
}
.site-banner__body {
	font-family: var(--font-jp);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	line-height: 1.5;
	color: rgba(250, 245, 234, 0.78);
	margin-top: 3px;
}
.site-banner__ctas { display: flex; gap: 10px; flex-shrink: 0; }
.btn-banner-online {
	display: inline-block;
	appearance: none;
	border: none;
	text-decoration: none;
	background: var(--paper-hi);
	color: var(--crimson-deep);
	padding: 11px 22px;
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	font-weight: 600;
	transition: background 0.25s;
	white-space: nowrap;
	cursor: pointer;
}
.btn-banner-online:hover { background: #fff; }

/* ── 予約サイト選択サブメニュー（OMAKASE / TableCheck） ────────── */
.reserve-menu { position: relative; display: inline-flex; }
.reserve-menu__list {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 200px;
	background: rgba(10, 8, 6, 0.94);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
	border: 1px solid rgba(244, 237, 224, 0.16);
	box-shadow: 0 16px 36px rgba(10, 8, 6, 0.45);
	padding: 6px;
	flex-direction: column;
	gap: 2px;
	z-index: 140;
	display: none;
}
/* [hidden] 属性が付いていない（＝開いている）ときだけ表示 */
.reserve-menu__list:not([hidden]) { display: flex; }
.reserve-menu__item {
	display: block;
	padding: 12px 16px;
	color: var(--paper-hi);
	text-decoration: none;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
	transition: background 0.2s, color 0.2s;
	white-space: nowrap;
}
.reserve-menu__item:hover { background: rgba(244, 237, 224, 0.1); color: var(--lantern); }
.btn-banner-inquiry {
	display: inline-block;
	text-decoration: none;
	border: 1px solid rgba(250, 245, 234, 0.5);
	color: var(--paper-hi);
	background: transparent;
	padding: 11px 20px;
	font-family: var(--font-jp);
	font-size: 11px;
	letter-spacing: 0.22em;
	transition: all 0.25s;
	white-space: nowrap;
}
.btn-banner-inquiry:hover { background: rgba(250, 245, 234, 0.12); }

/* ══════════════════════════════════════════════════════════════
   5. 左レール（縦ナビ・900px 以上）
   ══════════════════════════════════════════════════════════════ */
.nav-rail {
	position: fixed;
	top: calc(var(--banner-h) + 14px);
	left: 16px;
	bottom: 24px;
	width: var(--rail-w);
	z-index: 100;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 0 16px;
	background: transparent;
	animation: railSlideIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
	/* レールは常にクリーム地（site-backdrop）の上に置かれるため、
	   ページ先頭からスクロール後まで一貫して墨色で表示する */
	color: var(--ink);
	text-shadow: 0 1px 6px rgba(255, 255, 255, 0.6), 0 0 1px rgba(255, 255, 255, 0.4);
	transition: color 0.3s ease, text-shadow 0.3s ease;
}
/* Hero を通り過ぎると JS が .is-light を付与する。
   現在は既定と同じ配色（＝スクロール前後で見え方は変わらない）。
   将来ヒーローをレールの真下まで全面表示する場合に備えて定義を残す。 */
.nav-rail.is-light {
	color: var(--ink);
	text-shadow: 0 1px 6px rgba(255, 255, 255, 0.6), 0 0 1px rgba(255, 255, 255, 0.4);
}
.nav-rail.is-light .nav-rail__anchor { color: rgba(26, 22, 18, 0.72); }
.nav-rail.is-light .nav-rail__anchor:hover { color: var(--ink); }
.nav-rail.is-light .nav-rail__num { color: var(--lantern-deep); }
.nav-rail.is-light .nav-rail__sep { background: rgba(26, 22, 18, 0.18); }
.nav-rail.is-light .rail-socials a { color: rgba(26, 22, 18, 0.75); }
.nav-rail.is-light .rail-socials a:hover { color: var(--lantern-deep); }
.nav-rail.is-light .lang-toggle button { color: rgba(26, 22, 18, 0.4); }
.nav-rail.is-light .lang-toggle__sep { color: rgba(26, 22, 18, 0.4); }
.nav-rail.is-light .lang-toggle [data-lang-set] { color: rgba(26, 22, 18, 0.4); }
html[data-lang="jp"] .nav-rail.is-light .lang-toggle [data-lang-set="jp"],
html[data-lang="en"] .nav-rail.is-light .lang-toggle [data-lang-set="en"] { color: var(--ink); }
.nav-rail__logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
	flex-shrink: 0;
}
.nav-rail__logo-img { width: 110px; height: auto; display: block; }

.nav-rail__anchors {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin: 20px 0;
	width: 100%;
	overflow-y: auto;
	scrollbar-width: none;
}
.nav-rail__anchors::-webkit-scrollbar { width: 0; height: 0; }

.nav-rail__anchor {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	color: rgba(26, 22, 18, 0.72);
	text-decoration: none;
	font-family: var(--font-en);
	font-size: 12.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 500;
	transition: color 0.2s;
	white-space: nowrap;
	padding: 2px 0;
	max-width: 100%;
	flex-shrink: 0;
}
.nav-rail__anchor:hover { color: var(--ink); }
.nav-rail__num {
	font-size: 9px;
	letter-spacing: 0.1em;
	color: var(--lantern-deep);
	opacity: 0.85;
	font-style: italic;
}

.nav-rail__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}
.nav-rail__sep { width: 22px; height: 1px; background: rgba(26, 22, 18, 0.18); }

/* SNS アイコン（レール／ドロワー共用） */
.rail-socials {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.rail-socials a {
	color: rgba(244, 237, 224, 0.95); /* モバイルドロワー（暗い背景）用の既定 */
	transition: color 0.2s;
	display: flex;
}
.rail-socials a:hover { color: var(--lantern); }
/* 左レールはクリーム地の上に乗るため墨色で描く（白のままだと背景に沈む） */
.nav-rail .rail-socials a {
	color: rgba(26, 22, 18, 0.82);
	filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.75));
}
.nav-rail .rail-socials a:hover { color: var(--lantern-deep); }

/* 言語トグル */
.lang-toggle {
	font-family: var(--font-en);
	font-size: 10px;
	letter-spacing: 0.35em;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	user-select: none;
}
.lang-toggle button {
	appearance: none;
	border: none;
	background: transparent;
	padding: 4px 2px;
	color: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	font: inherit;
	letter-spacing: inherit;
}
.lang-toggle__sep { color: rgba(255, 255, 255, 0.4); margin: 0 6px; }
html[data-lang="jp"] .lang-toggle [data-lang-set="jp"],
html[data-lang="en"] .lang-toggle [data-lang-set="en"] { color: #fff; }

/* 国旗アイコン版 */
.lang-toggle--flags button { padding: 3px; line-height: 0; }
.lang-toggle__flag {
	width: 22px;
	height: auto;
	display: block;
	border-radius: 2px;
	outline: 1px solid rgba(255, 255, 255, 0.25);
	outline-offset: -0.5px;
	opacity: 0.4;
	transition: opacity 0.25s ease;
}
.lang-toggle--flags button:hover .lang-toggle__flag { opacity: 0.75; }
html[data-lang="jp"] .lang-toggle [data-lang-set="jp"] .lang-toggle__flag,
html[data-lang="en"] .lang-toggle [data-lang-set="en"] .lang-toggle__flag { opacity: 1; }
.nav-rail .lang-toggle button,
.nav-rail .lang-toggle__sep,
.nav-rail .lang-toggle [data-lang-set] { color: rgba(26, 22, 18, 0.45); }
html[data-lang="jp"] .nav-rail .lang-toggle [data-lang-set="jp"],
html[data-lang="en"] .nav-rail .lang-toggle [data-lang-set="en"] { color: var(--ink); }
.nav-rail .lang-toggle__flag { outline-color: rgba(26, 22, 18, 0.2); }

/* ══════════════════════════════════════════════════════════════
   6. モバイルトップナビ（900px 未満）
   ══════════════════════════════════════════════════════════════ */
.mobile-nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: all 0.35s ease;
	color: #fff;
	gap: 16px;
}
.mobile-nav.is-scrolled,
.mobile-nav.is-open {
	padding-top: 14px;
	padding-bottom: 14px;
	background: rgba(10, 8, 6, 0.82);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
	border-bottom-color: rgba(244, 237, 224, 0.08);
}
.mobile-nav__left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mobile-nav__logo {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	flex-shrink: 0;
}
.mobile-nav__logo-img { height: 36px; width: auto; display: block; }
.mobile-nav__left .lang-toggle--flags { flex-shrink: 0; }

.mobile-nav__right { display: flex; align-items: center; gap: 16px; }
.mobile-nav__reserve {
	appearance: none;
	padding: 10px 22px;
	border: 1px solid var(--crimson);
	color: #fff;
	background: var(--crimson);
	text-decoration: none;
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	transition: all 0.25s;
	white-space: nowrap;
	cursor: pointer;
}
.mobile-nav__reserve:hover { background: var(--crimson-deep); border-color: var(--crimson-deep); }

/* モバイルの予約サブメニューはドロワーに隠れないよう手前に */
.reserve-menu--mobile .reserve-menu__list { z-index: 150; }

.mobile-nav__burger {
	appearance: none;
	border: none;
	background: transparent;
	width: 32px;
	height: 28px;
	padding: 0;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
}
.mobile-nav__burger span {
	display: block;
	height: 1px;
	background: #fff;
	transition: transform 0.25s, opacity 0.15s;
}
.mobile-nav.is-open .mobile-nav__burger span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.mobile-nav.is-open .mobile-nav__burger span:nth-child(2) { opacity: 0; }
.mobile-nav.is-open .mobile-nav__burger span:nth-child(3) { transform: translateY(-3px) rotate(-45deg); }

.mobile-nav__drawer {
	position: absolute;
	top: 100%; left: 0; right: 0;
	background: rgba(10, 8, 6, 0.92);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
	border-bottom: 1px solid rgba(244, 237, 224, 0.08);
	padding: 24px 20px 28px;
	display: none;
	flex-direction: column;
	gap: 18px;
}
.mobile-nav.is-open .mobile-nav__drawer { display: flex; }
.mobile-nav__drawer a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.35em;
	text-transform: uppercase;
}
.mobile-nav__drawer-foot {
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid rgba(244, 237, 224, 0.12);
}
.mobile-nav__drawer-foot .rail-socials { flex-direction: row; gap: 22px; }

@media (prefers-reduced-motion: reduce) {
	.nav-rail, .site-banner, .btn-banner-online { animation: none !important; }
	.reveal { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto; }
}

/* ══════════════════════════════════════════════════════════════
   7. HERO
   ══════════════════════════════════════════════════════════════ */
.hero {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 720px;
	overflow: hidden;
	background: var(--night);
	color: #fff;
}
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media-base {
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 80% at 50% 32%, #2c2318 0%, #160f0a 56%, #0a0806 100%);
}
.hero__media--image .hero__media-base {
	background: radial-gradient(120% 70% at 50% 30%, #2a221a 0%, #120e0a 60%, #0a0806 100%);
}
.hero__still {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.82;
}
.hero__media--sumi { background: #0d0a07; }
.hero__media--sumi svg { opacity: 0.55; width: 100%; height: 100%; }

.hero__video-frame {
	position: absolute;
	top: 50%; left: 50%;
	width: 177.77vh;
	height: 56.25vw;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%) scale(1.2);
	border: 0;
	pointer-events: none;
	opacity: 1;
	transition: opacity 1.8s ease;
}
.hero__video-el {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none; /* 自己ホスト動画は元々コントロールを持たないが、念のため操作不可に */
}
.hero__clip-indicator {
	position: absolute;
	right: 22px; bottom: 24px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 7px;
}
.hero__clip-indicator i {
	width: 14px; height: 2px;
	background: rgba(255, 255, 255, 0.35);
	transition: all 0.6s ease;
}
.hero__clip-indicator i.is-active { width: 26px; background: var(--lantern); }

.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,8,6,0.45) 0%, rgba(10,8,6,0.55) 60%, rgba(10,8,6,0.85) 100%);
}

.hero__corner {
	position: absolute;
	width: 220px; height: 220px;
	z-index: 2;
	color: var(--lantern);
	overflow: hidden;
}
.hero__corner--tl {
	top: 0; left: 0;
	opacity: 0.45;
	-webkit-mask-image: linear-gradient(135deg, #000 30%, transparent 75%);
	mask-image: linear-gradient(135deg, #000 30%, transparent 75%);
}
.hero__corner--br {
	bottom: 0; right: 0;
	opacity: 0.4;
	-webkit-mask-image: linear-gradient(315deg, #000 30%, transparent 75%);
	mask-image: linear-gradient(315deg, #000 30%, transparent 75%);
}

.hero__vertical { position: absolute; z-index: 2; }
.hero__vertical--l { left: 40px; top: 24%; }
.hero__vertical--l .vertical-kanji { font-size: 13px; letter-spacing: 0.6em; color: rgba(255, 255, 255, 0.65); }
.hero__vertical--r { right: 40px; bottom: 20%; }
.hero__vertical--r .vertical-kanji { font-size: 11px; letter-spacing: 0.55em; color: rgba(200, 146, 77, 0.55); }

.hero__center {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.hero__logo-mark {
	margin: 0 0 36px;
	line-height: 0;
	/* 最初の2秒は中央に表示 → その後 上段へ移動して縮小（forwards で移動後を維持） */
	animation: heroLogoToTop 1.2s cubic-bezier(0.4, 0, 0.2, 1) 2s forwards;
	will-change: transform;
}
.hero__logo-mark img {
	width: clamp(220px, 26vw, 420px);
	height: auto;
	filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.45));
}
@keyframes heroLogoToTop {
	to { transform: translateY(-34vh) scale(0.62); }
}
.hero__divider {
	width: 60px; height: 1px;
	background: rgba(255, 255, 255, 0.45);
	margin-bottom: 28px;
	/* ロゴ移動に合わせて2秒後にフェードアウト */
	animation: heroDividerFade 0.8s ease 2s forwards;
}
@keyframes heroDividerFade {
	to { opacity: 0; }
}
/* アニメーションを控える設定の環境では動かさない */
@media (prefers-reduced-motion: reduce) {
	.hero__logo-mark, .hero__divider { animation: none; }
}
.hero__tagline {
	font-family: var(--font-jp);
	font-size: 16px;
	letter-spacing: 0.4em;
	color: rgba(255, 255, 255, 0.9);
	text-align: center;
	line-height: 2.1;
}
.hero__scroll-cue {
	position: absolute;
	bottom: 36px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.hero__scroll-label {
	font-family: var(--font-en);
	font-size: 10px;
	letter-spacing: 0.5em;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
}
.hero__scroll-line {
	width: 1px;
	height: 48px;
	background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0));
	animation: scrollCue 2s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════
   8. NEWS
   ══════════════════════════════════════════════════════════════ */
.news {
	background: transparent;
	color: var(--ink);
	padding: 110px 0 40px;
	position: relative;
}
.news__inner { max-width: 1100px; margin: 0 auto; padding: 0 80px; }
.news__heading {
	text-align: center;
	margin: 0 0 48px;
	font-family: var(--font-en);
	font-size: 40px;
	font-weight: 400;
	letter-spacing: 0.34em;
	color: rgba(26, 22, 18, 0.88);
}
.news__list { border-top: 1px solid rgba(26, 22, 18, 0.14); }
.news__item {
	display: grid;
	grid-template-columns: 180px 1fr auto;
	gap: 28px;
	align-items: baseline;
	padding: 22px 6px;
	border-bottom: 1px solid rgba(26, 22, 18, 0.14);
	text-decoration: none;
	color: var(--ink);
	transition: background 0.2s;
}
.news__item:hover { background: rgba(200, 146, 77, 0.1); }
.news__date {
	font-family: var(--font-en);
	font-size: 15px;
	letter-spacing: 0.08em;
	color: var(--lantern-deep);
}
.news__title {
	font-family: var(--font-jp);
	font-size: 15px;
	letter-spacing: 0.05em;
	line-height: 1.7;
	color: rgba(26, 22, 18, 0.86);
}
.news__arrow { font-size: 14px; color: var(--lantern-deep); opacity: 0.85; }

/* ══════════════════════════════════════════════════════════════
   9. THIS MONTH（今月のメニュー）
   ══════════════════════════════════════════════════════════════ */
.this-month {
	position: relative;
	background: transparent;
	color: var(--ink);
	border-top: 1px solid rgba(26, 22, 18, 0.1);
	border-bottom: 1px solid rgba(26, 22, 18, 0.1);
	padding: 60px 0;
	overflow: hidden;
}
.this-month__corner {
	position: absolute;
	top: 0; right: 0;
	width: 200px; height: 130px;
	color: var(--lantern-deep);
	opacity: 0.4;
	-webkit-mask-image: linear-gradient(225deg, #000 30%, transparent 75%);
	mask-image: linear-gradient(225deg, #000 30%, transparent 75%);
}
.this-month__inner {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 80px;
	display: grid;
	grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr);
	gap: 64px;
	align-items: start; /* 左のタイトルを上揃えにし、右カラムの上端に合わせて上部に表示 */
}
.this-month__inner > .reveal:first-child { padding-top: 8px; }
.this-month__eyebrow-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.this-month__eyebrow {
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	color: var(--lantern-deep);
	font-weight: 500;
}
.this-month__eyebrow-line { width: 28px; height: 1px; background: var(--lantern-deep); }
.this-month__title {
	font-family: var(--font-jp);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: 0.06em;
	margin: 0;
}
.this-month__lead {
	font-family: var(--font-jp);
	font-size: 13.5px;
	line-height: 1.95;
	letter-spacing: 0.06em;
	color: rgba(26, 22, 18, 0.82);
	margin: 0 0 22px;
}

.menu-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.menu-card {
	background: rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(168, 118, 57, 0.3);
	padding: 22px 24px 20px;
	display: flex;
	flex-direction: column;
}
.menu-card__tag {
	font-family: var(--font-en);
	font-size: 10px;
	letter-spacing: 0.45em;
	text-transform: uppercase;
	color: var(--lantern-deep);
	font-weight: 500;
	margin-bottom: 8px;
}
.menu-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}
.menu-card__title {
	font-family: var(--font-jp);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--ink);
	white-space: nowrap;
}
.menu-card__period {
	font-family: var(--font-en);
	font-style: italic;
	font-size: 12px;
	color: rgba(26, 22, 18, 0.7);
	letter-spacing: 0.08em;
}
/* 期間が空のときは要素ごと消す（回り込みで余白が生じ写真位置がずれるのを防ぐ） */
.menu-card__period:empty { display: none; }
.menu-card .image-placeholder { aspect-ratio: 16 / 10; }
.menu-card__photo {
	aspect-ratio: 16 / 10;
	width: 100%;
	height: auto;
	overflow: hidden;
	border: 1px solid rgba(168, 118, 57, 0.28);
	background: rgba(200, 146, 77, 0.14);
	flex-shrink: 0; /* 写真の高さを一定に保ち、3枚のカードでサイズを揃える */
}
.menu-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-card__link {
	display: inline-block;
	margin-top: auto; /* カード下端に固定し、タイトル行数が違っても3枚のリンク位置を揃える */
	padding-top: 18px;
	align-self: flex-start;
	max-width: 100%;
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lantern-deep);
	text-decoration: none;
	font-weight: 500;
	border-bottom: 1px solid var(--lantern-deep);
	padding-bottom: 2px;
	white-space: nowrap;
}

.course-box {
	margin-top: 24px;
	background: rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(168, 118, 57, 0.3);
	padding: 26px 30px;
}
.course-box__eyebrow {
	font-family: var(--font-en);
	font-size: 10px;
	letter-spacing: 0.45em;
	text-transform: uppercase;
	color: var(--lantern-deep);
	font-weight: 500;
	margin-bottom: 8px;
}
.course-box__name {
	font-family: var(--font-jp);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--ink);
}
.course-box__name-en {
	font-family: var(--font-en);
	font-style: italic;
	font-size: 13px;
	color: rgba(26, 22, 18, 0.85);
	letter-spacing: 0.08em;
	margin-top: 4px;
}
.course-box__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	margin-top: 24px;
}
.course-item { padding-left: 24px; border-left: 1px solid rgba(26, 22, 18, 0.13); }
.course-item__fr {
	font-family: var(--font-en);
	font-size: 24px;
	font-style: italic;
	letter-spacing: 0.02em;
	color: var(--ink);
}
.course-item__label {
	font-family: var(--font-jp);
	font-size: 12px;
	color: rgba(26, 22, 18, 0.85);
	letter-spacing: 0.22em;
	margin-top: 4px;
}
.course-item__price {
	font-family: var(--font-en);
	font-size: 24px;
	font-weight: 400;
	color: var(--ink);
	letter-spacing: 0.04em;
	margin-top: 18px;
}
.course-item__price small { font-size: 13px; opacity: 0.6; margin-left: 6px; }
.course-item__plates {
	font-family: var(--font-en);
	font-size: 11px;
	font-style: italic;
	color: rgba(26, 22, 18, 0.85);
	letter-spacing: 0.1em;
	margin-top: 6px;
}
.this-month__note {
	font-family: var(--font-jp);
	font-size: 11px;
	color: rgba(26, 22, 18, 0.85);
	letter-spacing: 0.14em;
	margin-top: 12px;
	line-height: 1.8;
}

/* ══════════════════════════════════════════════════════════════
   10. CONCEPT
   ══════════════════════════════════════════════════════════════ */
.concept {
	position: relative;
	background: transparent;
	color: var(--ink);
	padding: 160px 0;
	overflow: hidden;
}
.concept__bg-kanji {
	position: absolute;
	top: 80px; right: -40px;
	font-family: var(--font-jp);
	font-size: 420px;
	color: var(--ink);
	opacity: 0.04;
	line-height: 0.85;
	font-weight: 500;
	pointer-events: none;
}
.concept__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 80px;
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: 96px;
	position: relative;
}
.concept__title {
	font-family: var(--font-jp);
	font-size: 44px;
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: 0.08em;
	margin: 0 0 18px;
	color: var(--ink);
}
.concept__title .hl { color: var(--lantern-deep); }
.concept__tagline-en {
	font-family: var(--font-en);
	font-size: 14px;
	font-style: italic;
	color: rgba(26, 22, 18, 0.68);
	letter-spacing: 0.08em;
	line-height: 1.6;
}
.concept__body {
	font-family: var(--font-jp);
	font-size: 16px;
	line-height: 2.2;
	letter-spacing: 0.08em;
	color: rgba(26, 22, 18, 0.92);
}
.concept__body p { margin: 0 0 28px; }
.concept__body p:last-child { margin-bottom: 36px; }

.concept__about {
	padding: 24px 28px;
	margin-bottom: 36px;
	border-left: 2px solid var(--lantern-deep);
	background: rgba(200, 146, 77, 0.08);
}
.concept__about-label {
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	color: var(--lantern-deep);
	margin-bottom: 10px;
	font-weight: 500;
}
.concept__about-body {
	margin: 0;
	font-family: var(--font-en);
	font-size: 14.5px;
	line-height: 1.85;
	letter-spacing: 0.02em;
	color: rgba(26, 22, 18, 0.92);
}

.concept__sig { display: flex; flex-direction: column; align-items: flex-end; }
.concept__sig-name {
	width: 180px;
	opacity: 0.92;
}
.concept__sig-name img {
	width: 100%;
	height: auto;
	display: block;
}
.concept__sig-line { width: 110px; height: 1px; background: var(--ink); opacity: 0.35; margin-top: 6px; }
.concept__sig-role {
	font-family: var(--font-jp);
	font-size: 11px;
	letter-spacing: 0.3em;
	color: rgba(26, 22, 18, 0.68);
	margin-top: 10px;
}
.concept__sig-role-en {
	font-family: var(--font-en);
	font-style: italic;
	font-size: 12px;
	color: rgba(26, 22, 18, 0.68);
	letter-spacing: 0.08em;
	margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════
   11. CHEF
   ══════════════════════════════════════════════════════════════ */
.chef {
	background: transparent;
	color: var(--ink);
	position: relative;
	overflow: hidden;
}
.chef__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 92vh;
}
.chef__media { position: relative; overflow: hidden; }
.chef__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 15%;
}
.chef__vertical-name { position: absolute; right: 32px; top: 48px; }
.chef__vertical-name .vertical-kanji {
	font-size: 16px;
	letter-spacing: 0.55em;
	color: rgba(255, 255, 255, 0.9);
	opacity: 0.95;
	/* 写真の上に直接乗るため、背景テーマに関わらず視認性を確保 */
	text-shadow: 0 1px 10px rgba(10, 8, 6, 0.65), 0 0 2px rgba(10, 8, 6, 0.5);
}
.chef__media-fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 70%, var(--paper) 100%);
}
.chef__text {
	padding: 120px 88px 120px 80px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.chef__name {
	font-family: var(--font-en);
	font-size: 56px;
	font-weight: 300;
	letter-spacing: 0.04em;
	margin: 0 0 6px;
	color: var(--ink);
}
.chef__reading {
	font-family: var(--font-jp);
	font-size: 14px;
	letter-spacing: 0.35em;
	color: rgba(26, 22, 18, 0.75);
	margin-bottom: 40px;
}
.chef__body {
	font-family: var(--font-jp);
	font-size: 15px;
	line-height: 2.1;
	letter-spacing: 0.06em;
	color: rgba(26, 22, 18, 0.9);
	max-width: 540px;
}
.chef__body p { margin: 0 0 20px; }
.chef__body p:last-child { margin-bottom: 0; }
.chef__bio-en {
	max-width: 540px;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid rgba(26, 22, 18, 0.12);
	font-family: var(--font-en);
	font-style: italic;
	font-size: 14px;
	line-height: 1.85;
	letter-spacing: 0.02em;
	color: rgba(26, 22, 18, 0.82);
}
.chef__timeline {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid rgba(26, 22, 18, 0.14);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 40px;
	max-width: 540px;
}
.chef__tl-item { display: flex; gap: 16px; align-items: baseline; }
.chef__tl-year {
	font-family: var(--font-en);
	font-size: 15px;
	color: var(--lantern-deep);
	letter-spacing: 0.08em;
	min-width: 52px;
	font-weight: 500;
}
.chef__tl-body { min-width: 0; }
.chef__tl-label {
	font-family: var(--font-jp);
	font-size: 13px;
	color: rgba(26, 22, 18, 0.9);
	letter-spacing: 0.05em;
}
.chef__tl-en {
	font-family: var(--font-en);
	font-style: italic;
	font-size: 11.5px;
	color: rgba(26, 22, 18, 0.5);
	letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════════════
   12. BUILDING（町の灯り）
   ══════════════════════════════════════════════════════════════ */
.building {
	position: relative;
	background: transparent;
	color: var(--ink);
	padding: 160px 0;
	overflow: hidden;
}
.building__inner {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 80px;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 96px;
	align-items: center;
}
.building__title {
	font-family: var(--font-jp);
	font-size: 44px;
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: 0.08em;
	margin: 0 0 14px;
	color: var(--ink);
}
.building__title .hl { color: var(--lantern-deep); }
.building__tagline-en {
	font-family: var(--font-en);
	font-style: italic;
	font-size: 15px;
	letter-spacing: 0.08em;
	color: rgba(26, 22, 18, 0.82);
	margin-bottom: 38px;
}
.building__body1, .building__body2 {
	font-family: var(--font-jp);
	font-size: 15px;
	line-height: 2.1;
	letter-spacing: 0.08em;
	max-width: 460px;
}
.building__body1 { color: rgba(26, 22, 18, 0.9); margin: 0 0 22px; }
.building__tagline-en:empty { display: none; margin: 0; }
.building__tagline-en:empty + .building__body1 { margin-top: 38px; }
.building__body1 strong { color: var(--lantern-deep); font-weight: 500; }
.building__body2 { color: rgba(26, 22, 18, 0.88); margin: 0; }

.building__panel {
	position: relative;
	aspect-ratio: 4 / 5;
	max-width: 460px;
	justify-self: end;
	width: 100%;
}
.building__panel-inner {
	position: absolute;
	inset: 0;
	border: 1px solid rgba(200, 146, 77, 0.4);
	background: radial-gradient(120% 100% at 50% 110%, #34250f 0%, #1c140b 55%, #120e08 100%);
	overflow: hidden;
}
.building__panel .facade--panel {
	-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,1) 75%);
	mask-image: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,1) 75%);
}
.building__panel-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.building__brief {
	position: absolute;
	left: 28px; right: 28px; bottom: 28px;
	padding: 22px 24px;
	background: rgba(20, 16, 12, 0.78);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-left: 2px solid var(--lantern);
	font-family: var(--font-en);
	font-style: italic;
	font-size: 13.5px;
	line-height: 1.75;
	letter-spacing: 0.02em;
	color: rgba(244, 237, 224, 1);
}

/* ── デザイン監修（建築家プロフィール） ─────────────────── */
.building__designer {
	position: relative;
	max-width: 1280px;
	margin: 64px auto 0;
	padding: 0 80px;
}
.building__designer-inner {
	max-width: 900px;
	padding-top: 40px;
	border-top: 1px solid rgba(168, 118, 57, 0.32);
}
.building__designer-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin-bottom: 16px;
}
.building__designer-label {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-shrink: 0;
}
.building__designer-label-en {
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--lantern-deep);
	font-weight: 500;
}
.building__designer-label-jp {
	font-family: var(--font-jp);
	font-size: 11px;
	letter-spacing: 0.24em;
	color: rgba(26, 22, 18, 0.55);
}
.building__designer-name {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 14px;
}
.building__designer-name-main {
	font-family: var(--font-jp);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--ink);
}
.building__designer-role {
	font-family: var(--font-en);
	font-style: italic;
	font-size: 13px;
	letter-spacing: 0.06em;
	color: rgba(26, 22, 18, 0.6);
}
.building__designer-intro {
	font-family: var(--font-jp);
	font-size: 14.5px;
	line-height: 1.9;
	letter-spacing: 0.04em;
	color: rgba(26, 22, 18, 0.86);
	margin: 0 0 18px;
}
.building__designer-toggle {
	display: inline-block;
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--lantern-deep);
	font-weight: 500;
	cursor: pointer;
	border-bottom: 1px solid var(--lantern-deep);
	padding-bottom: 2px;
	list-style: none;
	transition: opacity 0.2s ease;
}
.building__designer-toggle:hover { opacity: 0.7; }
.building__designer-toggle::-webkit-details-marker { display: none; }
.building__designer-toggle::after {
	content: ' +';
	font-family: var(--font-en);
}
.building__designer-more[open] .building__designer-toggle::after { content: ' −'; }
.building__designer-block { margin-top: 22px; }
.building__designer-block-label {
	font-family: var(--font-en);
	font-size: 10px;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--lantern-deep);
	font-weight: 500;
	margin-bottom: 8px;
}
.building__designer-block-body {
	font-family: var(--font-jp);
	font-size: 13px;
	line-height: 1.95;
	letter-spacing: 0.03em;
	color: rgba(26, 22, 18, 0.72);
	margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   13. INTERIOR（設え）
   ══════════════════════════════════════════════════════════════ */
.interior {
	background: transparent;
	color: var(--ink);
	padding: 160px 0 0;
}
.interior__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 80px 80px;
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 96px;
	align-items: center;
}
.interior__title {
	font-family: var(--font-jp);
	font-size: 40px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.08em;
	margin: 0 0 16px;
	color: var(--ink);
}
.interior__tagline-en {
	font-family: var(--font-en);
	font-style: italic;
	font-size: 14px;
	letter-spacing: 0.08em;
	color: rgba(26, 22, 18, 0.75);
}
.interior__tagline-en:empty { display: none; }
.interior__body {
	font-family: var(--font-jp);
	font-size: 15px;
	line-height: 2.1;
	letter-spacing: 0.08em;
	color: rgba(26, 22, 18, 0.88);
	margin: 0;
	max-width: 560px;
}
.interior__photo { display: block; width: 100%; height: auto; }

/* ══════════════════════════════════════════════════════════════
   14. ACCESS
   ══════════════════════════════════════════════════════════════ */
.access {
	background: transparent;
	color: var(--ink);
	padding: 160px 0;
}
.access__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 80px;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 96px;
}
.access__title {
	font-family: var(--font-jp);
	font-size: 40px;
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: 0.08em;
	margin: 0 0 48px;
}
.access__rows { display: flex; flex-direction: column; gap: 28px; }
.access__row {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(26, 22, 18, 0.14);
}
.access__row-label {
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.45em;
	color: var(--lantern-deep);
	text-transform: uppercase;
	font-weight: 500;
}
.access__row-jp {
	font-family: var(--font-jp);
	font-size: 11px;
	letter-spacing: 0.3em;
	color: rgba(26, 22, 18, 0.75);
	margin-top: 6px;
}
.access__row-main {
	font-family: var(--font-jp);
	font-size: 15px;
	letter-spacing: 0.06em;
	line-height: 1.8;
	color: var(--ink);
}
.access__row-tel {
	display: block;
	text-decoration: none;
	color: inherit;
}
.access__row-tel:hover .access__row-main { text-decoration: underline; }
.access__row-sub {
	font-family: var(--font-jp);
	font-size: 14px;
	letter-spacing: 0.06em;
	line-height: 1.8;
	color: rgba(26, 22, 18, 0.88);
}
.access__map { display: flex; flex-direction: column; }
.access__map iframe {
	flex: 1;
	width: 100%;
	min-height: 480px;
	border: 0;
	filter: grayscale(0.15) contrast(1.02);
}
.access__map-link {
	display: inline-block;
	margin-top: 14px;
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(26, 22, 18, 0.85);
	text-decoration: none;
	border-bottom: 1px solid rgba(168, 118, 57, 0.55);
	padding-bottom: 2px;
	align-self: flex-start;
}

/* ══════════════════════════════════════════════════════════════
   15. FOOTER
   ══════════════════════════════════════════════════════════════ */
.site-footer {
	background: transparent;
	color: var(--ink);
	padding: 0 80px 56px;
}
.site-footer__band {
	position: relative;
	height: 36px;
	color: var(--lantern-deep);
	overflow: hidden;
	margin: 0 -80px 64px;
}
.site-footer__grid {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	column-gap: 120px;
	row-gap: 40px;
	padding-bottom: 56px;
	border-bottom: 1px solid rgba(26, 22, 18, 0.12);
}
.site-footer__grid > div:first-child { flex: 0 0 320px; }
.site-footer__grid > div:last-child { flex: 0 1 auto; }
.site-footer__brand-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.site-footer__logo-img { width: 150px; height: auto; display: block; }
.site-footer__tagline {
	font-family: var(--font-jp);
	font-size: 12px;
	line-height: 2;
	letter-spacing: 0.1em;
	color: rgba(26, 22, 18, 0.85);
}
.site-footer__col-title {
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.45em;
	color: var(--crimson);
	text-transform: uppercase;
	margin-bottom: 22px;
	font-weight: 500;
}
.site-footer__links {
	display: grid;
	grid-template-columns: repeat(4, auto);
	column-gap: 32px;
	row-gap: 12px;
}
.site-footer__links a {
	color: rgba(26, 22, 18, 0.8);
	text-decoration: none;
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.15em;
}

/* フッターの「ご予約」サブメニュー（header と同じ .reserve-menu を再利用） */
.reserve-menu--footer { display: inline-flex; }
.reserve-menu--footer .reserve-menu__list { top: calc(100% + 6px); left: 0; right: auto; }
.site-footer__reserve-toggle {
	appearance: none;
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
	color: rgba(26, 22, 18, 0.8);
	text-decoration: none;
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.15em;
	cursor: pointer;
	text-align: left;
	transition: color 0.2s;
}
.site-footer__reserve-toggle:hover { color: var(--lantern-deep); }
.site-footer__bottom {
	max-width: 1280px;
	margin: 0 auto;
	padding-top: 32px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.25em;
	color: rgba(26, 22, 18, 0.45);
}
.site-footer__legal { display: flex; gap: 28px; }

/* ══════════════════════════════════════════════════════════════
   16. 投稿（お知らせ）ページ／一覧 — 夜のエディトリアル
   ══════════════════════════════════════════════════════════════ */
.entry-shell {
	max-width: 820px;
	margin: 0 auto;
	padding: 72px 32px 120px;
	color: var(--ink);
}
.entry-shell--list { max-width: 1000px; }
.entry-back {
	display: inline-block;
	margin-bottom: 40px;
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--lantern-deep);
	text-decoration: none;
	border-bottom: 1px solid rgba(168, 118, 57, 0.55);
	padding-bottom: 2px;
}
.entry-date {
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.12em;
	color: var(--lantern-deep);
	margin-bottom: 14px;
}
.entry-title {
	font-family: var(--font-jp);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: 0.06em;
	margin: 0 0 48px;
	color: var(--ink);
}
.entry-content {
	font-family: var(--font-jp);
	font-size: 15px;
	line-height: 2.2;
	letter-spacing: 0.06em;
	color: rgba(26, 22, 18, 0.9);
}
.entry-content p { margin: 0 0 1.8em; }
.entry-content h2, .entry-content h3 {
	font-family: var(--font-jp);
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--ink);
	margin: 2.2em 0 1em;
}
.entry-content h2 { font-size: 22px; padding-left: 14px; border-left: 2px solid var(--lantern-deep); }
.entry-content h3 { font-size: 18px; }
.entry-content a { color: var(--lantern-deep); }
.entry-content img { height: auto; }
.entry-content blockquote {
	margin: 2em 0;
	padding: 18px 24px;
	border-left: 2px solid var(--lantern-deep);
	background: rgba(200, 146, 77, 0.08);
}
.entry-content strong { color: var(--lantern-deep); font-weight: 500; }
.entry-content hr {
	border: none;
	border-top: 1px solid rgba(26, 22, 18, 0.14);
	margin: 2.5em 0;
}

/* ══════════════════════════════════════════════════════════════
   17. Responsive
   ══════════════════════════════════════════════════════════════ */

/* 今月のメニュー: 入れ子カラムが収まらない幅では縦積み */
@media (max-width: 1099px) {
	.this-month__inner {
		grid-template-columns: 1fr;
		gap: 28px;
		align-items: start;
	}
	.menu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 900px 未満: レール／バナー → モバイルトップナビ */
@media (max-width: 899px) {
	.site { padding-left: 0; padding-top: 0; }
	.site-banner, .nav-rail { display: none; }
	.mobile-nav { display: flex; }

	/* ヒーロー動画: スマホでは横長映像をトリミングせず、画面幅に合わせて全体表示（上下は地色になじませる） */
	/* 自己ホスト mp4（<video>）の場合 */
	.hero__video-el { object-fit: contain; }
	/* YouTube 埋め込み（<iframe>）の場合: 画面幅=16:9 で中央配置し、トリミングせず全体表示 */
	.hero__video-frame {
		width: 100vw;
		height: 56.25vw;   /* 100vw × 9/16 */
		min-width: 0;
		min-height: 0;
		transform: translate(-50%, -50%) scale(1);
	}

	.news__inner, .this-month__inner, .concept__inner,
	.building__inner, .interior__inner, .access__inner { padding-left: 24px; padding-right: 24px; }

	.concept, .building, .access { padding: 96px 0; }
	.interior { padding: 96px 0 0; }
	.news { padding: 88px 0 32px; }

	.concept__inner, .building__inner, .interior__inner, .access__inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.building__panel { justify-self: start; }
	.building__designer { padding: 0 24px; margin-top: 48px; }
	.building__designer-name-main { font-size: 20px; }

	.chef__grid { grid-template-columns: 1fr; min-height: 0; }
	.chef__media { height: 64vh; min-height: 380px; }
	.chef__media-fade { background: linear-gradient(180deg, transparent 60%, var(--paper) 100%); }
	.chef__text { padding: 64px 24px 88px; }

	.concept__title, .building__title { font-size: 30px; }
	.interior__title, .access__title { font-size: 27px; }
	.chef__name { font-size: 40px; }
	.concept__bg-kanji { font-size: 260px; top: 40px; }
	.concept__sig-name { width: 120px; }

	.news__heading { font-size: 30px; margin-bottom: 32px; }

	.site-footer { padding: 0 24px 48px; }
	.site-footer__band { margin: 0 -24px 48px; }
	.site-footer__grid { flex-direction: column; row-gap: 32px; }
	.site-footer__grid > div:first-child {
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.site-footer__bottom { flex-direction: column; gap: 12px; text-align: center; }

	.access__map iframe { min-height: 360px; }

	.entry-shell { padding-top: 104px; }
}

@media (max-width: 759px) {
	.menu-cards { grid-template-columns: 1fr; }
	.hero__vertical { display: none; }
	.hero__logo-mark img { width: clamp(180px, 42vw, 280px); }
	.hero { min-height: 640px; }
}

@media (max-width: 700px) {
	.news__item { grid-template-columns: 1fr auto; row-gap: 6px; }
	.news__date { grid-column: 1 / -1; font-size: 13px; }
}

@media (max-width: 560px) {
	.course-box__grid { grid-template-columns: 1fr; gap: 20px; }
	.chef__timeline { grid-template-columns: 1fr; }
	.site-footer__links { grid-template-columns: repeat(2, auto); column-gap: 24px; }
	.access__row { grid-template-columns: 110px 1fr; gap: 16px; }
}

/* 狭い端末（Android 360px 前後）: ヘッダーが詰まり、国旗が RESERVE ボタンに隠れるのを防ぐためコンパクト化 */
@media (max-width: 430px) {
	.mobile-nav { padding-left: 14px; padding-right: 14px; gap: 8px; }
	.mobile-nav__left { gap: 8px; }
	.mobile-nav__logo-img { height: 30px; }
	.mobile-nav__right { gap: 10px; }
	.mobile-nav__reserve { padding: 8px 12px; letter-spacing: 0.14em; font-size: 10px; }
	.mobile-nav__left .lang-toggle__flag { width: 20px; }
	.mobile-nav__left .lang-toggle__sep { margin: 0 4px; }
}