/* =========================================================
   1001 — Bar & Cafe  / LP styles
   ========================================================= */

:root {
  /* Palette — 確定値は「walnut」（2026-06-10 監査C4対応）。
     注: index.html の TWEAKS_DEFAULTS は palette:"amber" だが、const 宣言のため
     window に乗らず、tweaks.js は従来から walnut フォールバックで描画していた。
     つまり実際にレンダリングされ承認されてきた見た目は walnut。
     ここが配色の唯一のソース。tweaks.js は起動時に上書きしない（比較検討専用）。 */
  --ivory:        #f4ece0;
  --ivory-2:      #ebe1d1;
  --paper:        #fbf7ef;
  --walnut:       #3a261b;
  --walnut-2:     #2a1a12;
  --coffee:       #5d3b22;
  --amber:        #c98a3e;
  --amber-deep:   #a06623;
  --charcoal:     #1a1612;
  --moss:         #5a6b4e;
  --line:         rgba(58, 38, 27, 0.18);
  --line-strong:  rgba(58, 38, 27, 0.45);
  /* 明背景（paper）上で 4.5:1 を満たす amber 系テキスト色（監査C5対応） */
  --ws-1001-amber-text: #8a5717;

  /* Type */
  --serif-jp:  "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --serif-en:  "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans-jp:   "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --mono:      "JetBrains Mono", ui-monospace, monospace;

  /* Sizing */
  --max:       1320px;
  --gutter:    clamp(20px, 4vw, 56px);
}

/* Interior の「白→暗」連動用カスタムプロパティ。
   @property で型を宣言すると GSAP / CSS が値を“補間”できる（離散切替にならない）。
   initial-value は最終状態（暗背景・ivory 文字）= フォールバック時の安全側。 */
@property --int-dark { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --int-h    { syntax: "<color>";  inherits: true; initial-value: #f4ece0; }
@property --int-d    { syntax: "<color>";  inherits: true; initial-value: rgba(244, 236, 224, 0.72); }
@property --int-line { syntax: "<color>";  inherits: true; initial-value: rgba(201, 138, 62, 0.38); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--charcoal);
  font-family: var(--sans-jp);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* ページ下地(canvas)は暗色。フッターより下／Heroより上のオーバースクロール時に
   body の紙色が白く覗く不具合を防ぐ（2026-06-15）。body は従来どおり紙色のまま＝
   明背景セクションは無傷。overscroll-behavior でバウンス自体も抑制。 */
html { scroll-behavior: smooth; background: #100a05; overscroll-behavior-y: none; }
body { background: var(--paper); overscroll-behavior-y: none; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--walnut); color: var(--ivory); }

/* ------- Utility -------------------------------------- */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  font-family: var(--serif-en);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--amber);
  text-transform: uppercase;
}
.eyebrow::before {
  content: "—— ";
  letter-spacing: 0;
}

.h-display {
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: clamp(36px, 5.2vw, 72px);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--walnut-2);
  margin: 0;
}
.h-section {
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--walnut-2);
  margin: 0;
  /* 日本語の自然な改行: 句読点/語境界で折り返し、単語途中で分割しない */
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}
.h-en {
  font-family: var(--serif-en);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--amber);
  letter-spacing: 0.04em;
}

.body-jp {
  font-family: var(--sans-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 2.0;
  letter-spacing: 0.04em;
  color: #2b231d;
}

/* =========================================================
   HEADER (sticky over hero)
   ========================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  transition: background 0.4s ease, color 0.4s ease, padding 0.4s ease;
}
/* Hero stack only: blend with the underlying video for legibility.
   Scoped via :not(.is-scrolled) so the property never carries over
   into the scrolled state (theme bg/color would otherwise be undone
   by mix-blend-mode being interpolated). */
.site-header:not(.is-scrolled) {
  mix-blend-mode: difference;
  color: #eee2cc;
}
/* Scrolled state: solid translucent bar so logo/nav stay legible.
   Theme (dark/light) is set by JS via IntersectionObserver reading
   the data-theme attribute of the section currently under the header. */
.site-header.is-scrolled {
  /* !important is required: Chromium retained the difference / ivory values
     from the base .site-header rule despite higher specificity here. */
  mix-blend-mode: normal !important;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  padding: 14px var(--gutter);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.18);
  transition: background 0.5s ease, color 0.5s ease, padding 0.4s ease,
              box-shadow 0.5s ease, mix-blend-mode 0s linear 0s;
}
/* DARK theme (interior / drinks / visit / footer): walnut translucent + ivory text */
.site-header.is-scrolled.theme-dark {
  background: rgba(26, 17, 8, 0.88);
  color: var(--ivory) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}
.site-header.is-scrolled.theme-dark .brand,
.site-header.is-scrolled.theme-dark .brand .num,
.site-header.is-scrolled.theme-dark nav a { color: var(--ivory) !important; }
.site-header.is-scrolled.theme-dark nav a::after { background: var(--ivory); }

/* LIGHT theme (concept / master / faq): paper translucent + walnut text */
.site-header.is-scrolled.theme-light {
  background: rgba(252, 247, 238, 0.92);
  color: var(--walnut-2) !important;
  box-shadow: 0 2px 20px rgba(58, 38, 27, 0.10);
}
.site-header.is-scrolled.theme-light .brand,
.site-header.is-scrolled.theme-light .brand .num,
.site-header.is-scrolled.theme-light nav a { color: var(--walnut-2) !important; }
.site-header.is-scrolled.theme-light nav a::after { background: var(--walnut-2); }

/* Fallback when no theme class is applied yet (e.g. first paint) */
.site-header.is-scrolled:not(.theme-dark):not(.theme-light) {
  background: rgba(26, 17, 8, 0.88);
  color: var(--ivory) !important;
}
.site-header > * { pointer-events: auto; }
.site-header .brand {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 20px;
  letter-spacing: 0.12em;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.site-header .brand .num {
  font-family: var(--serif-jp);
  font-style: normal;
  font-size: 22px;
  letter-spacing: 0.04em;
}
.site-header nav {
  display: flex;
  align-items: center; /* タブ/Instagram/電話番号枠の縦位置を中央で統一（2026-06-15） */
  gap: 28px;
  font-size: 13px;
  letter-spacing: 0.16em;
  font-family: var(--sans-jp);
}
.site-header nav a {
  position: relative;
  padding-bottom: 4px;
}
.site-header nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right 0.3s ease;
}
.site-header nav a:hover::after { right: 0; }

@media (max-width: 1024px) {
  .site-header nav { display: none; }
}

/* =========================================================
   HERO — scroll-driven frames
   ========================================================= */
.hero {
  position: relative;
  height: 170vh; /* scroll length */
  height: 170lvh;
  background: #100a05;
}
.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  background: #100a05;
}
/* sections after hero must sit above the hero stack */
.concept,
.drinks,
.master,
.interior,
.visit,
.faq,
.site-footer {
  position: relative;
  z-index: 1;
}
/* Hero frame canvas (was .hero__img).
   Switched from <img>.src swap to <canvas>.drawImage to eliminate
   the flicker that occurred at frame boundaries during scroll. */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
/* Cocktail layer — same cover-fit as the canvas, sits directly on top of it.
   opacity is driven by JS in the last stretch of the FV scroll so the
   negroni fades in beside the coffee ("coffee by day → cocktail at night"). */
.hero__cocktail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* matches canvas drawImage cover math */
  object-position: center;
  display: block;
  opacity: 0;               /* JS raises this toward the end of the scroll */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: opacity;
}
.hero__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 55% 50%, transparent 35%, rgba(0,0,0,0.55) 100%),
    linear-gradient(to top, rgba(0,0,0,0.55), transparent 30%, transparent 70%, rgba(0,0,0,0.35));
  pointer-events: none;
}
.hero__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #100a05;
  z-index: 5;
  transition: opacity 0.6s ease;
}
.hero__loading.hidden { opacity: 0; pointer-events: none; }
.hero__loading .loader {
  font-family: var(--serif-en);
  font-style: italic;
  letter-spacing: 0.24em;
  color: var(--ivory);
  font-size: 13px;
}
.hero__loading .bar {
  margin-top: 12px;
  width: 220px;
  height: 1px;
  background: rgba(244, 236, 224, 0.18);
  position: relative;
  overflow: hidden;
}
.hero__loading .bar > span {
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--amber);
  transition: right 0.2s ease;
}

/* --- text overlays --- */
.hero__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 3;
}
.hero__text {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  padding: 0 var(--gutter);
  color: var(--ivory);
  max-width: 100%;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.hero__text.is-active {
  opacity: 1;
  transform: translateY(0);
}
.hero__text .eyebrow {
  color: rgba(244, 236, 224, 0.78);
  font-size: 12px;
  margin-bottom: 28px;
}
.hero__text .lead {
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: clamp(36px, 6.4vw, 96px);
  line-height: 1.35;
  letter-spacing: 0.04em;
  /* 2026-06-11 洗練修正: 明るいカップのハイライトに重なるフレームでも
     読めるよう、近距離の締めシャドウを追加（スクラブ中の可読性確保） */
  text-shadow: 0 2px 24px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.35);
  margin: 0;
  /* 明示 <br> のみで改行。読点等での自動折り返しを禁止して各行を1行に保つ */
  white-space: nowrap;
}
/* sub テキストも同じ方針で揃える */
.hero__text .sub {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}
.hero__text .lead .accent {
  color: var(--amber);
  font-style: italic;
  font-family: var(--serif-en);
  font-weight: 400;
  font-size: 0.85em;
  padding: 0 0.1em;
}
.hero__text .sub {
  margin-top: 28px;
  font-family: var(--sans-jp);
  font-size: 14px;
  line-height: 2.1;
  letter-spacing: 0.18em;
  color: rgba(244, 236, 224, 0.82);
  max-width: 420px;
  /* 2026-06-11 洗練修正: カップの明部に重なるフレームでの可読性確保 */
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6), 0 0 3px rgba(0, 0, 0, 0.4);
}

.hero__text--center { text-align: center; place-items: center; }
.hero__text--center .lead { text-align: center; }
.hero__text--center .sub { margin-left: auto; margin-right: auto; text-align: center; }

/* metadata corners */
.hero__meta {
  position: absolute;
  bottom: calc(32px + env(safe-area-inset-bottom));
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: rgba(244, 236, 224, 0.7);
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.2em;
  z-index: 4;
  pointer-events: none;
}
.hero__meta .scroll-hint {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero__meta .scroll-hint .line {
  display: inline-block;
  width: 48px;
  height: 1px;
  background: rgba(244, 236, 224, 0.6);
  position: relative;
  overflow: hidden;
}
.hero__meta .scroll-hint .line::after {
  content: "";
  position: absolute;
  width: 24px; height: 100%;
  background: var(--amber);
  left: -24px;
  animation: scrollline 2.4s ease-in-out infinite;
}
@keyframes scrollline {
  0% { left: -24px; }
  100% { left: 48px; }
}
.hero__meta .clock {
  font-family: var(--mono);
  font-style: normal;
  letter-spacing: 0.12em;
  color: rgba(244, 236, 224, 0.9);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero__meta .clock .dot {
  width: 6px; height: 6px;
  background: var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--amber);
}

/* progress rail along right edge */
.hero__progress {
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  height: 36vh;
  width: 1px;
  background: rgba(244, 236, 224, 0.18);
  z-index: 4;
}
.hero__progress > span {
  position: absolute;
  top: 0; left: -1px;
  width: 3px;
  height: 0%;
  background: var(--amber);
  transition: height 0.1s ease-out;
}
.hero__progress .ticks {
  position: absolute;
  left: -120px;
  top: -8px;
  width: 110px;
  height: calc(100% + 16px);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(244, 236, 224, 0.5);
}
.hero__progress .ticks span {
  position: absolute;
  right: 16px;
  white-space: nowrap;
  transform: translateY(-50%);
}
.hero__progress .ticks span::after {
  content: "";
  position: absolute;
  right: -16px; top: 50%;
  width: 8px; height: 1px;
  background: rgba(244, 236, 224, 0.4);
}
.hero__progress .ticks span.is-active {
  color: var(--amber);
}
.hero__progress .ticks span.is-active::after {
  background: var(--amber);
  width: 14px;
}

@media (max-width: 720px) {
  .hero__progress { display: none; }
  .hero__meta { font-size: 10px; }
}

/* 2026-06-11 洗練修正: 下端HUD（SCROLL TO ENTER / SKIP / 25:00 JST OMIYA）の
   窮屈な2行折返しを解消 — 字間・装飾線を圧縮し各ブロックを1行維持。
   装飾サフィックス「JST / OMIYA」は3要素が収まらない幅では畳む
   （375px 実測: 3子要素計367px > 容器335px / 481-520px帯も10px字では超過のため
     既存ブレークポイント 520px に揃えて適用） */
@media (max-width: 520px) {
  .hero__meta { font-size: 9px; letter-spacing: 0.14em; }
  .hero__meta .scroll-hint { gap: 8px; }
  .hero__meta .scroll-hint .line { width: 28px; }
  .hero__meta .scroll-hint span:last-child { white-space: nowrap; }
  .hero__meta .clock { gap: 6px; font-size: 11px; white-space: nowrap; }
  .hero__meta .clock span:last-child { display: none; }
}

@media (max-width: 480px) {
  /* FV lead「コーヒー、一杯から」を1行に収める（読点での折り返し防止）。
     clamp で 320px 級でも nowrap 見切れを防ぐ（監査M8） */
  .hero__text .lead { font-size: clamp(24px, 8vw, 30px); letter-spacing: 0.02em; }
}

/* =========================================================
   SECTION: Concept
   ========================================================= */
.section {
  padding: clamp(80px, 12vh, 160px) 0;
  position: relative;
}
.section--dark {
  background: var(--walnut-2);
  color: var(--ivory);
}
.section--ivory { background: var(--ivory); }

.concept {
  position: relative;
  background:
    radial-gradient(at top right, rgba(201, 138, 62, 0.07), transparent 55%),
    radial-gradient(at bottom left, rgba(60, 40, 28, 0.05), transparent 50%),
    var(--paper);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
/* 水紋アニメーション（inline SVG の <animate> で動く、JSなし） */
.concept__ripples {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.10;                    /* さらに薄く */
  mix-blend-mode: multiply;
}
/* アクセシビリティ: 動きを減らす設定の人には波紋を止める */
@media (prefers-reduced-motion: reduce) {
  .concept__ripples animate { display: none; }
  .concept__ripples { opacity: 0; }
}
.concept .container { position: relative; z-index: 1; }
.concept__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: stretch;
}
.concept__lede {
  display: flex;
  flex-direction: column;
}
.concept__lede h2 {
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.6;
  letter-spacing: 0.06em;
  margin: 24px 0 32px;
  color: var(--walnut-2);
}
.concept__lede .em {
  display: inline-block;
  padding: 0 2px;
  background: linear-gradient(to top, rgba(201, 138, 62, 0.22) 30%, transparent 30%);
}
.concept__body {
  position: relative;               /* 鳥イラスト背景のための stacking context */
  display: flex;
  flex-direction: column;
  margin-top: 56px;                 /* 左 h2 のテキスト本体と頭を揃える */
}
/* 鳥イラスト（Tail of cock）を右カラム背景に薄く・大きく配置 */
.concept__body::before {
  content: '';
  position: absolute;
  /* body 外側にも領域を広げて、鳥が大きくはみ出して見えるように */
  top: -40%;
  right: -25%;
  bottom: -40%;
  left: -10%;
  z-index: 0;
  background-image: url('uploads/interior-4.jpg');
  background-size: contain;          /* 拡大領域に合わせて全表示 = 約3倍サイズ */
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.18;                     /* 薄く */
  filter: saturate(0.18) contrast(0.92) brightness(1.05);
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* テキストは前面に */
.concept__body > * {
  position: relative;
  z-index: 1;
}
.concept__body p {
  margin: 0 0 1.4em;
  line-height: 2.1;
  letter-spacing: 0.05em;
  color: #322620;
}
.concept__body p:last-child { margin-bottom: 0; }

.concept__quote {
  margin: 32px 0 0;                 /* デフォルト margin-left リセット + 段落との余白 */
  padding: 32px 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 20px;
  line-height: 1.6;
  color: var(--coffee);
}
.concept__quote::before {
  content: "";
  display: block;
  width: 24px; height: 1px;
  background: var(--amber);
  margin-bottom: 18px;
}

/* Concept video — wrapper holds the frame rings (mask doesn't reach them) */
.concept__video-wrap {
  position: relative;
  margin: 44px 0 16px 25px;        /* 右に 25px シフト + 上下に額縁分の余白 */
  width: 100%;
  max-width: 264px;
  aspect-ratio: 1 / 1;
}
/* 内側リング（動画円の外周 8px に amber 細線） */
.concept__video-wrap::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(201, 138, 62, 0.5);
  pointer-events: none;
}
/* 外側リング（さらに 8px 外、薄い amber 細線） */
.concept__video-wrap::after {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1px solid rgba(201, 138, 62, 0.22);
  pointer-events: none;
}

/* 動画本体（円形クリップ + 外周フェード） */
.concept__video {
  margin: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  background: transparent;
  overflow: hidden;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 95%);
          mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 95%);
}
.concept__video__el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: calc(50% - 15px) center; /* 15px 左でガラス中央配置（確定） */
  display: block;
  transform: translateY(-25px) scale(1.5);  /* さらにクローズアップ */
  transform-origin: center center;
  /* 馴染ませ路線は撤回。動画として自然な見え方をキープ */
  filter: contrast(1.04) saturate(0.92) brightness(0.85);  /* 明度を少し落として落ち着き感 */
  opacity: 1.0;
}
/* hover で「もう一度再生」誘導 */
.concept__video-wrap {
  cursor: pointer;
}

@media (max-width: 820px) {
  .concept__grid { grid-template-columns: 1fr; gap: 32px; }
  .concept__body { overflow: hidden; }
  .concept__video-wrap { max-width: 220px; margin: 28px auto 16px; }
  .concept__quote { margin-top: 32px; }
}

/* =========================================================
   SECTION: Drinks
   ========================================================= */
.drinks {
  background: var(--walnut-2);
  color: var(--ivory);
  position: relative;
  overflow: hidden;
}
.drinks::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(201, 138, 62, 0.18), transparent 50%),
    radial-gradient(ellipse at 10% 90%, rgba(90, 107, 78, 0.12), transparent 55%);
  pointer-events: none;
}
.drinks > .container { position: relative; z-index: 1; }

.drinks__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 64px;
}
.drinks__head h2 { color: var(--ivory); }
.drinks__head .eyebrow { color: var(--amber); }
.drinks__head .note {
  font-family: var(--serif-en);
  font-style: italic;
  color: rgba(244, 236, 224, 0.6);
  font-size: 13px;
  letter-spacing: 0.16em;
  max-width: 340px;
  line-height: 1.7;
  text-align: right;
}
/* 2行目「フルメニューは...」が不自然な位置で折り返さないよう1行固定（2026-07-08） */
.ws-1001-note-nowrap { white-space: nowrap; }

/* --- Cocktail-focus viewer (fixed frame, cross-fade content swap) --- */
.drinks__viewer {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 24px);
}
.drinks__stage {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: 4px clamp(2px, 1vw, 16px);
}
/* The arch frame stays fixed — only the drink image + text cross-fade */
.cocktail__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 50% 50% 6px 6px / 34% 34% 6px 6px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(201, 138, 62, 0.12), transparent 62%),
    linear-gradient(160deg, #241a12, #14100b);
  box-shadow: 0 34px 80px -34px rgba(0, 0, 0, 0.9);
}
.cocktail__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.65s ease;
}
.cocktail__frame:hover img { transform: scale(1.04); }
.cocktail__frame--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(244, 236, 224, 0.14);
}
.cocktail__ph {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(244, 236, 224, 0.3);
  transition: opacity 0.65s ease;
}

/* fixed window: image + text fade out/in slowly, the frame never moves */
.cocktail__info {
  /* 説明文の行数が銘柄で変わると、center 揃えでは番号・タイトルが上下にズレて見える
     （ブラックルシアン=3行 / モスコミュール=2行 で約15px ジャンプ）。
     上揃え(flex-start)にして番号・タイトルの位置を全銘柄で固定する（2026-06-15）。
     min-height は全銘柄分を確保しているため枠の高さは一定＝下流のドット等も不動。 */
  min-height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: opacity 0.65s ease;
}
.drinks__stage.is-out .cocktail__img,
.drinks__stage.is-out .cocktail__ph,
.drinks__stage.is-out .cocktail__info { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .cocktail__frame img,
  .cocktail__ph,
  .cocktail__info { transition: none; }
}

.cocktail__no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(244, 236, 224, 0.62); /* 0.5→0.62: 4.5:1確保（監査H12） */
  margin-bottom: 18px;
}
.cocktail__title {
  font-family: var(--serif-jp);
  font-size: clamp(26px, 2.9vw, 40px);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.25;
  color: var(--ivory);
  margin: 0 0 8px;
  text-wrap: balance;
}
.cocktail__en {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: 0.16em;
  color: var(--amber);
  margin-bottom: 24px;
}
.cocktail__desc {
  font-family: var(--sans-jp);
  font-size: 14px;
  line-height: 2.1;
  letter-spacing: 0.05em;
  color: rgba(244, 236, 224, 0.78);
  margin: 0 0 30px;
  max-width: 30em;
}
.cocktail__price {
  font-family: var(--serif-en);
  font-size: 20px;
  color: rgba(244, 236, 224, 0.92);
  letter-spacing: 0.08em;
  border-top: 1px dashed rgba(244, 236, 224, 0.2);
  padding-top: 18px;
  display: inline-flex;
  gap: 18px;
  align-items: baseline;
  /* 説明文の行数が銘柄で変わっても価格行が動かないよう、枠(min-height 350)の
     下端へ固定（2026-06-15）。上=番号/タイトル(flex-start)、下=価格 で両端固定。
     align-self:flex-start で inline-flex でも幅は内容ぶんに保つ。 */
  margin-top: auto;
  align-self: flex-start;
}
.cocktail__price small {
  font-family: var(--sans-jp);
  font-size: 12px;
  color: rgba(244, 236, 224, 0.62); /* 0.4→0.62: 暗背景で4.5:1確保（監査H12） */
  letter-spacing: 0.1em;
}

.drinks__nav {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(244, 236, 224, 0.25);
  background: rgba(20, 16, 11, 0.6);
  color: var(--ivory);
  font-family: var(--serif-en);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  z-index: 2;
}
.drinks__nav:hover {
  background: rgba(201, 138, 62, 0.2);
  border-color: var(--amber);
  transform: scale(1.08);
}

.drinks__dots {
  margin-top: clamp(28px, 3.5vw, 40px);
  display: flex;
  justify-content: center;
  gap: 12px;
}
.drinks__dot {
  /* 当たり判定 28px（WCAG 2.5.8 の最低24px超・2026-06-10 監査H6対応）。
     視覚ドットは ::before の 8px で従来の見た目を維持する */
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.drinks__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(244, 236, 224, 0.35);
  background: transparent;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.drinks__dot:hover::before { border-color: var(--amber); }
.drinks__dot:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 50%;
}
.drinks__dot.is-on::before {
  background: var(--amber);
  border-color: var(--amber);
  transform: translate(-50%, -50%) scale(1.15);
}

.drinks__footer {
  margin-top: clamp(32px, 4vw, 48px);
  display: flex;
  justify-content: center;
}

@media (max-width: 760px) {
  .drinks__stage {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .cocktail__frame {
    aspect-ratio: 4 / 5;
    max-width: 340px;
    margin: 0 auto;
  }
  .cocktail__info { min-height: 380px; }
  .drinks__nav { width: 44px; height: 44px; font-size: 17px; }
  .drinks__head { flex-direction: column; align-items: flex-start; }
  .drinks__head .note { text-align: left; }
}

/* =========================================================
   SECTION: Master
   ========================================================= */
.master {
  background: var(--ivory);
  position: relative;
  overflow: hidden;
}
.master__grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.master__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(135deg, var(--coffee), var(--walnut-2));
  border-radius: 2px;
  overflow: hidden;
}
/* aspect-ratio 非対応ブラウザ（古いWebView/IEモード等）でも 4:5 枠を保つ
   padding-hack フォールバック。枠が潰れて写真が横伸びする報告への堅牢化（2026-06-21）。
   写真も枠も 4:5 なので、枠さえ確実に 4:5 なら object-fit 非対応でも歪まない。 */
.master__portrait::before {
  content: "";
  display: block;
  padding-top: 125%; /* 高さ = 幅 × 5/4 = 4:5 */
}
@supports (aspect-ratio: 4 / 5) {
  .master__portrait::before { content: none; }
}
.master__portrait .placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(244, 236, 224, 0.4);
  font-family: var(--serif-en);
  font-style: italic;
  letter-spacing: 0.16em;
}
.master__portrait .ph-label {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  border-top: 1px solid rgba(244, 236, 224, 0.3);
  padding-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(244, 236, 224, 0.55);
  display: flex;
  justify-content: space-between;
}
.master__portrait .frame-no {
  position: absolute;
  top: 20px;
  left: 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(244, 236, 224, 0.5);
}
.master__portrait .frame-no::before {
  content: "■ ";
  color: var(--amber);
}
/* 実ポートレート写真（2026-06-21 店主写真受領）。4:5枠を cover で充填 */
.master__portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 25% center;
  display: block;
}
/* ph-label（MASTER OF 1001 / SINCE 2014）の可読性確保のための下部スクリム */
.master__portrait-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  background: linear-gradient(to top, rgba(20, 16, 11, 0.78), rgba(20, 16, 11, 0));
  pointer-events: none;
}
/* 「店名の由来は、創業日。」のひとことアクセント */
.master__copy .ws-1001-master-origin {
  margin-top: 1.6em;
  font-family: var(--serif-jp);
  font-size: 16px;
  color: var(--ws-1001-amber-text, #8a5717);
  letter-spacing: 0.06em;
}
.master__copy h2 { margin-bottom: 24px; }
.master__copy .name {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 28px;
  color: var(--amber);
  margin-bottom: 4px;
}
.master__copy .name-jp {
  font-family: var(--serif-jp);
  font-size: 18px;
  color: var(--walnut-2);
  letter-spacing: 0.1em;
  margin-bottom: 32px;
}
.master__copy p {
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: 0.05em;
  margin: 0 0 1.3em;
  color: #322620;
}
.master__timeline {
  margin-top: 40px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.master__timeline .row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  align-items: baseline;
}
.master__timeline .y {
  font-family: var(--serif-en);
  font-style: italic;
  color: var(--amber);
  font-size: 18px;
}
.master__timeline .e {
  font-family: var(--sans-jp);
  font-size: 14px;
  color: #322620;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

@media (max-width: 820px) {
  .master__grid { grid-template-columns: 1fr; }
  /* 1カラム化で max-width 360px に絞った際、左寄りにならないよう中央寄せ
     （2026-06-15: margin:0 auto 抜けで左に張り付いていた）。
     ⚠️ width:100% 必須: portrait の中身は position:absolute で実体が無く、
        grid 上で margin:auto だけ付けると内容幅0に潰れる→width:100%で定幅を与える。 */
  .master__portrait { width: 100%; max-width: 360px; margin: 0 auto; }
}

/* =========================================================
   SECTION: Interior gallery
   ========================================================= */
.interior {
  /* 下地は paper(白)。暗背景は ::before レイヤーの opacity を 0→1 にして重ねる。
     --int-dark の既定は 1（@property initial）= 暗。JS が効く時だけ js-scroll-fade で 0 に。 */
  background: var(--paper);
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vh, 44px) 0 clamp(20px, 2.5vh, 36px);
  gap: clamp(14px, 1.8vh, 24px);
}
/* JS（GSAP + motion 許可）が効く時だけ、白からスタートさせる。
   付かなければ既定値（暗・ivory）のまま = フォールバック安全側。 */
.interior.js-scroll-fade {
  --int-dark: 0;
  --int-h: var(--walnut-2);
  --int-d: #322620;
  --int-line: rgba(60, 40, 28, 0.22);
}
/* 「光の入る、夜の場所」コンセプト: 暗背景 + ペンダント光源。スクロールで透明度フェード */
.interior::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--int-dark);
  background:
    /* 中央上 メインペンダント (暖色強め) */
    radial-gradient(ellipse 40% 30% at 50% 18%, rgba(255, 198, 130, 0.20), transparent 70%),
    /* 左上 サブ光源 */
    radial-gradient(ellipse 28% 24% at 14% 16%, rgba(255, 188, 110, 0.12), transparent 72%),
    /* 右上 サブ光源 */
    radial-gradient(ellipse 28% 24% at 86% 20%, rgba(255, 188, 110, 0.14), transparent 72%),
    /* 中央下 窓辺の薄い反射 */
    radial-gradient(ellipse 60% 18% at 50% 95%, rgba(201, 138, 62, 0.10), transparent 78%),
    /* ベース暗色 (深いコーヒー寄りの walnut) */
    radial-gradient(ellipse 100% 100% at center, #1c1612 0%, #0a0705 100%);
}
/* コンテンツは暗レイヤーより前面へ */
.interior > .container,
.interior__gallery { position: relative; z-index: 1; }
/* テキスト・装飾は --int-* で背景と同期して補間（白→暗どちらでも可読） */
.interior .eyebrow {
  color: var(--int-d);
}
.interior h2,
.interior .h-section {
  color: var(--int-h);
}
/* SEATS テーブル: 罫線・文字も背景に同期 */
.interior .seats-table {
  border-color: var(--int-line);
}
.interior .seats-label {
  color: var(--int-h);
  border-bottom-color: var(--int-line);
}
.interior .seats-table li {
  color: var(--int-d);
}
.interior .seats-table li span:last-child {
  color: var(--amber);
}
.interior .seats-table li.seats-total {
  border-top-color: var(--int-line);
}
/* キャプション overlay は元から ivory なので維持、glow を強化 */
.interior .tile[data-caption]::after {
  text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 0 12px rgba(201, 138, 62, 0.25);
}
.interior > .container {
  flex: 0 0 auto;                    /* head は固有高さ */
}
.interior__head {
  display: flex;
  align-items: flex-end;             /* 見出しブロックと desc を下端で揃える */
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 0;
}
.interior__head .desc {
  max-width: 380px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--int-d);                /* 背景に同期して白→暗で補間 */
  letter-spacing: 0.05em;
}
/* === 新 Interior layout: 上段 (MOV-01 + SEATS + MOV-02) + 下段 IMG×5 === */
.interior__gallery {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vh, 18px);
  padding: 0 var(--gutter);
}
.interior__top {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(12px, 1.6vh, 18px);
  align-items: stretch;
}
.interior__top-right {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vh, 18px);
}
.interior__mov-main {
  aspect-ratio: 2 / 1;               /* 16:9 より高さ圧縮し下段に余白を確保（見切れ防止） */
}
.interior__mov-sub {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.interior__bottom {
  display: flex;
  gap: clamp(10px, 1.4vh, 14px);
}
.interior__bottom .tile {
  flex: 1 1 0;
  aspect-ratio: 4/3;
}

/* SEATS テーブル（額装的、罫線で囲み） */
.seats-table {
  background: transparent;
  border: 1px solid rgba(60, 40, 28, 0.22);
  padding: clamp(14px, 1.6vh, 20px) clamp(16px, 1.8vw, 24px);
  flex: 0 0 auto;
}
.seats-label {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--coffee);
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(60, 40, 28, 0.18);
}
.seats-table ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.seats-table li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  font-family: var(--serif-en);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  color: #322620;
}
.seats-table li span:last-child {
  color: var(--amber);
  font-weight: 500;
}
.seats-table li.seats-total {
  border-top: 1px solid rgba(60, 40, 28, 0.18);
  margin-top: 4px;
  padding-top: 8px;
}

/* tile キャプション overlay（全 tile 共通） */
.tile[data-caption] { position: relative; }
.tile[data-caption]::after {
  content: attr(data-caption);
  position: absolute;
  bottom: 10px;
  left: 14px;
  color: #f4ecde;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  z-index: 2;
  pointer-events: none;
  opacity: 0.88;
}
.tile {
  position: relative;
  background: linear-gradient(135deg, var(--coffee), var(--walnut-2));
  overflow: hidden;
  border-radius: 2px;
}
.tile img,
.tile .ph,
.tile .tile__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.tile .tile__video {
  display: block;
  background: #0b0807;
}
/* 全体色味統一: Concept video と同じ filter を Interior の video/img にも適用 */
.tile .tile__video,
.tile img {
  filter: contrast(1.04) saturate(0.92) brightness(0.96);
}
.tile {
  cursor: pointer;                  /* hover で再生再開を誘導（video tileのみ実効） */
}

.tile .ph {
  display: grid;
  place-items: center;
  color: rgba(244, 236, 224, 0.45);
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.16em;
}
.tile .ph .num {
  position: absolute;
  bottom: 16px;
  left: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(244, 236, 224, 0.6);
}
.tile .ph .num::before { content: "▸ "; color: var(--amber); }

/* 旧 bento span 設定は削除（新 layout で interior__top/bottom 直接制御） */

@media (max-width: 820px) {
  .interior__top { grid-template-columns: 1fr; }
  .interior__bottom { flex-wrap: wrap; }
  .interior__bottom .tile { flex: 1 1 calc(50% - 7px); }
  /* 見出し + desc を縦並びに、見出しを最大幅で表示（左カラム圧縮による強制改行を防ぐ） */
  .interior__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .interior__head .desc {
    max-width: 100%;
    font-size: 13.5px;
  }
  /* fixed-header の高さぶん section 上部に余白を確保（eyebrow との重なり防止） */
  .interior { padding-top: clamp(72px, 11vh, 104px); }
}

/* =========================================================
   SECTION: Hours / Map
   ========================================================= */
.visit {
  background: var(--walnut-2);
  color: var(--ivory);
  /* 2026-06-11 洗練修正: 旧 margin-top の紙色の帯（暗→暗の間に白い線）を廃止し、
     Drinks と連続する暗ブロックに。境界はヘアラインで静かに区切る */
  border-top: 1px solid rgba(244, 236, 224, 0.12);
}
.visit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
}
.visit__info {
  padding: clamp(48px, 7vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.visit__info h2 { color: var(--ivory); margin-bottom: 32px; }
.visit__info .eyebrow { color: var(--amber); }

.visit__hours {
  margin-top: 32px;
  border-top: 1px solid rgba(244, 236, 224, 0.14);
  display: grid;
  grid-template-columns: 1fr;
}
.visit__hours .row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(244, 236, 224, 0.1);
  align-items: baseline;
}
.visit__hours .row .day {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 16px;
  color: var(--amber);
  letter-spacing: 0.12em;
}
.visit__hours .row .time {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ivory);
  white-space: nowrap;       /* iPhone で "17:00 / — / 25:00" と縦折り返しされるのを防ぐ */
}
.visit__hours .row .tag {
  font-family: var(--sans-jp);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(244, 236, 224, 0.55);
}
.visit__hours .row.is-today {
  background: rgba(201, 138, 62, 0.08);
  padding-left: 14px;
  padding-right: 14px;
  border-bottom-color: rgba(201, 138, 62, 0.3);
}
.visit__hours .row.is-today .day::before {
  content: "● ";
  color: var(--amber);
  font-style: normal;
}

.visit__address {
  margin-top: 40px;
  font-family: var(--sans-jp);
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.06em;
  color: rgba(244, 236, 224, 0.85);
}
.visit__address strong {
  display: block;
  font-family: var(--serif-jp);
  font-size: 18px;
  font-weight: 500;
  color: var(--ivory);
  margin-bottom: 6px;
  letter-spacing: 0.1em;
}
.visit__address .station {
  margin-top: 8px;
  color: rgba(244, 236, 224, 0.65);
}

/* Charge / Bottle Keep extras (visit info) */
.visit__extras {
  margin-top: 28px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.extras__item {
  flex: 1 1 0;
  min-width: 160px;
  padding: 18px 22px;
  border: 1px solid rgba(201, 138, 62, 0.35);
  background: rgba(201, 138, 62, 0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.extras__label {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--amber);
}
.extras__val {
  font-family: var(--serif-jp);
  font-size: 22px;
  font-weight: 500;
  color: var(--ivory);
  letter-spacing: 0.06em;
}
.extras__note {
  font-family: var(--sans-jp);
  font-size: 11px;
  color: rgba(244, 236, 224, 0.55);
  letter-spacing: 0.06em;
}

/* Make the whole map clickable → Google Maps */
.visit__map-link {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: filter 0.4s ease;
}
.visit__map-link:hover { filter: brightness(1.1); }
.visit__map-link:hover .visit__map-cta { background: var(--amber); color: var(--walnut-2); border-color: var(--amber); }

.visit__map-cta {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(26, 17, 8, 0.85);
  border: 1px solid rgba(201, 138, 62, 0.6);
  color: var(--ivory);
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.16em;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.visit__map-cta .arr {
  font-style: normal;
  color: var(--amber);
  transition: color 0.3s ease;
}
.visit__map-link:hover .visit__map-cta .arr { color: var(--walnut-2); }

.visit__map {
  position: relative;
  background: #1a1108;
  overflow: hidden;
  height: 100%;
  min-height: 560px;
}

/* === 実地図 (Leaflet + OpenStreetMap) — 2026-06-24 手描きSVGから刷新 === */
.visit__map-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #e9e3d8;
}
/* フィルターなし＝地図本来の色（道路網がはっきり見える初期状態・CEO要望で復帰） */
.visit__map-canvas .leaflet-tile,
.visit__map-canvas .leaflet-tile-pane img {
  filter: none;
}
.visit__map-canvas .leaflet-container { background: #241710; font-family: inherit; }
.visit__map-canvas .leaflet-control-attribution {
  background: rgba(26, 17, 8, 0.66);
  color: rgba(244, 236, 224, 0.5);
  font-size: 9px;
  padding: 1px 6px;
  letter-spacing: 0.02em;
}
.visit__map-canvas .leaflet-control-attribution a { color: rgba(230, 176, 106, 0.78); }
.visit__map-canvas .leaflet-div-icon { background: transparent; border: none; }
.visit__map-canvas .leaflet-marker-icon { overflow: visible; }
/* 地図全体クリックで Google マップへ */
.visit__map-overlay { position: absolute; inset: 0; z-index: 600; display: block; }
/* ピン本体 */
.map-mark {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.map-mark--venue {
  width: 15px; height: 15px;
  background: #e6b06a;
  box-shadow: 0 0 0 4px rgba(201, 138, 62, 0.28), 0 0 16px 3px rgba(230, 176, 106, 0.7);
  animation: mapPinPulse 2.4s ease-in-out infinite;
}
.map-mark--station {
  width: 12px; height: 12px;
  background: rgba(244, 236, 224, 0.92);
  border: 2px solid #c98a3e;
  box-shadow: 0 0 0 3px rgba(26, 17, 8, 0.5);
}
@keyframes mapPinPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(201, 138, 62, 0.28), 0 0 14px 2px rgba(230, 176, 106, 0.6); }
  50%      { box-shadow: 0 0 0 9px rgba(201, 138, 62, 0.07), 0 0 22px 5px rgba(230, 176, 106, 0.85); }
}
@media (prefers-reduced-motion: reduce) { .map-mark--venue { animation: none; } }
/* ピンの旗ラベル */
.map-flag {
  position: absolute;
  left: 50%; bottom: calc(100% + 9px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: "Shippori Mincho B1", serif;
  font-size: 11px; letter-spacing: 0.08em;
  padding: 4px 9px;
  background: rgba(26, 17, 8, 0.92);
  color: #f4ece0;
  border: 1px solid rgba(201, 138, 62, 0.6);
  border-radius: 2px;
  pointer-events: none;
}
.map-flag::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(201, 138, 62, 0.6);
}
.map-flag--venue { font-size: 12px; color: #f4ece0; border-color: rgba(201, 138, 62, 0.85); }
.map-flag--station { color: #e6b06a; }
/* 控えめな大ランドマーク（点 + 小ラベル） */
.map-dot {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(120, 88, 56, 0.95); border: 1.5px solid rgba(255, 244, 224, 0.85);
}
.map-flag--landmark {
  font-size: 10px; letter-spacing: 0.06em;
  padding: 2px 7px; bottom: calc(100% + 6px);
  background: rgba(40, 27, 16, 0.8); color: rgba(255, 240, 220, 0.92);
  border-color: rgba(201, 138, 62, 0.45);
}
/* 下向きフラグ（近接ランドマークの上下振り分け・2026-07-10 マロウド/マルイ重なり対策） */
.map-flag--down {
  bottom: auto;
  top: calc(100% + 6px);
}
.map-flag--down::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: rgba(201, 138, 62, 0.6);
}
.map-flag--landmark.map-flag--down::after {
  border-bottom-color: rgba(201, 138, 62, 0.45);
}
/* 右横フラグ（徒歩ルートとの被り回避・2026-07-10 マルイ用） */
.map-flag--right {
  bottom: auto;
  left: calc(100% + 8px);
  top: 50%;
  transform: translate(0, -50%);
}
.map-flag--right::after {
  top: 50%;
  left: auto;
  right: 100%;
  transform: translate(0, -50%);
  border: 4px solid transparent;
  border-top-color: transparent;
  border-right-color: rgba(201, 138, 62, 0.6);
}
.map-flag--landmark.map-flag--right::after {
  border-right-color: rgba(201, 138, 62, 0.45);
}
/* 左横フラグ（徒歩ルートとの被り回避・2026-07-10 マロウド用） */
.map-flag--left {
  bottom: auto;
  left: auto;
  right: calc(100% + 8px);
  top: 50%;
  transform: translate(0, -50%);
}
.map-flag--left::after {
  top: 50%;
  left: 100%;
  right: auto;
  transform: translate(0, -50%);
  border: 4px solid transparent;
  border-top-color: transparent;
  border-left-color: rgba(201, 138, 62, 0.6);
}
.map-flag--landmark.map-flag--left::after {
  border-left-color: rgba(201, 138, 62, 0.45);
}
/* 経路の足跡アニメーション（駅→店の順に光って進む） */
.map-step {
  position: absolute; left: 50%; top: 50%;
  display: block; width: 4px; height: 6px; border-radius: 50% 50% 48% 48%;
  background: #c1842f;
  opacity: 0.28;
  animation: stepGlow 9s linear infinite;
  will-change: opacity, filter;
}
@keyframes stepGlow {
  0%   { opacity: 0.28; filter: none; }
  6%   { opacity: 1;    filter: drop-shadow(0 0 3px #e6b06a) drop-shadow(0 0 5px #c98a3e); }
  16%  { opacity: 0.72; filter: none; }
  30%  { opacity: 0.28; filter: none; }
  100% { opacity: 0.28; filter: none; }
}
@media (prefers-reduced-motion: reduce) { .map-step { animation: none; opacity: 0.55; } }
/* 地図の帰属表示（OSM/CARTO規約遵守・控えめ） */
.visit__map-attr {
  position: absolute; left: 8px; bottom: 5px; z-index: 700;
  font-size: 8px; letter-spacing: 0.02em; color: rgba(40, 30, 18, 0.5);
  pointer-events: none;
}

/* hand-drawn map styling (legacy SVG — 現在は未使用) */
.visit__map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.visit__map .pin {
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--amber);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6px rgba(201, 138, 62, 0.2), 0 0 30px rgba(201, 138, 62, 0.6);
  animation: pulse 2s ease-in-out infinite;
  z-index: 2;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(201, 138, 62, 0.2), 0 0 30px rgba(201, 138, 62, 0.6); }
  50%      { box-shadow: 0 0 0 14px rgba(201, 138, 62, 0.05), 0 0 50px rgba(201, 138, 62, 0.8); }
}
.visit__map .pin-label {
  position: absolute;
  top: calc(50% - 32px);
  left: 50%;
  transform: translate(-50%, -100%);
  font-family: var(--serif-jp);
  color: var(--ivory);
  font-size: 14px;
  letter-spacing: 0.12em;
  background: rgba(26, 17, 8, 0.85);
  padding: 8px 14px;
  border: 1px solid rgba(201, 138, 62, 0.4);
  white-space: nowrap;
  z-index: 2;
}
.visit__map .pin-label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 1px;
  height: 18px;
  background: rgba(201, 138, 62, 0.5);
}
.visit__map .label {
  position: absolute;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(244, 236, 224, 0.5);
}
.visit__map .station-mark {
  position: absolute;
  width: 18px; height: 18px;
  border: 1.5px solid var(--ivory);
  background: var(--walnut-2);
  border-radius: 50%;
}
.visit__map .station-mark::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--ivory);
  border-radius: 50%;
}

/* === footprint trail animation: each step glows in sequence (station → venue) ===
   IMPORTANT: do NOT set CSS transform / transform-box / transform-origin here.
   Position & rotation are set on the SVG <use> via the attribute `transform`,
   and any CSS transform interaction would override those and wreck the layout. */
.visit__map .map-footprint {
  fill: #e6b06a;
  opacity: 0.22;
  animation: footprintGlow 10s linear infinite;
  /* animation-delay is set inline by JS per step index */
  will-change: opacity, filter;
}
@keyframes footprintGlow {
  0%   { opacity: 0.22; filter: none; }
  8%   { opacity: 1;    filter: drop-shadow(0 0 3px #e6b06a) drop-shadow(0 0 6px #c98a3e); }
  18%  { opacity: 0.85; filter: drop-shadow(0 0 2px rgba(230,176,106,0.6)); }
  30%  { opacity: 0.22; filter: none; }
  100% { opacity: 0.22; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .visit__map .map-footprint { animation: none; opacity: 0.55; }
}

@media (max-width: 820px) {
  .visit__grid { grid-template-columns: 1fr; }
  /* スマホでは slice 縮小で SVG 文字が潰れるため、地図を高くして実効スケールを上げる
     （2026-06-15: 360px→520px。文字も SVG 側で拡大済み）。 */
  .visit__map { min-height: 520px; }
  /* address: 長文住所が容器幅を超えても安全に折り返す */
  .visit__address { overflow-wrap: anywhere; word-break: normal; }
  .visit__address p, .visit__address strong { overflow-wrap: anywhere; }
  /* fixed-header の高さぶん section 上部に余白を確保（eyebrow との重なり防止） */
  .visit__info { padding-top: clamp(80px, 12vh, 110px); }
}

/* iPhone 系: 営業時間 row を 2段組 (day+time 上段 / tag 下段) にして
   時刻 nowrap でも tag が画面外にはみ出さないようにする */
@media (max-width: 520px) {
  .visit__hours .row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "day time"
      "tag tag";
    column-gap: 14px;
    row-gap: 4px;
    align-items: baseline;
  }
  .visit__hours .row .day  { grid-area: day;  white-space: nowrap; }
  .visit__hours .row .time { grid-area: time; text-align: right; font-size: 13px; }
  .visit__hours .row .tag  { grid-area: tag;  text-align: right; font-size: 10.5px; }
}

/* =========================================================
   SECTION: FAQ
   ========================================================= */
.faq {
  background: var(--paper);
  padding: clamp(80px, 12vh, 160px) 0;
}
.faq__head { text-align: center; margin-bottom: 64px; }
.faq__head h2 { color: var(--walnut-2); }
.faq__list {
  max-width: 820px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 8px 28px 0;
  display: grid;
  grid-template-columns: 50px 1fr 30px;
  gap: 24px;
  align-items: baseline;
  position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .q {
  font-family: var(--serif-en);
  font-style: italic;
  color: var(--amber);
  font-size: 22px;
  letter-spacing: 0.08em;
}
.faq__item summary .question {
  font-family: var(--serif-jp);
  font-size: 18px;
  font-weight: 500;
  color: var(--walnut-2);
  letter-spacing: 0.06em;
  line-height: 1.6;
}
.faq__item summary .toggle {
  width: 24px; height: 24px;
  position: relative;
  justify-self: end;
}
.faq__item summary .toggle::before,
.faq__item summary .toggle::after {
  content: "";
  position: absolute;
  background: var(--walnut-2);
}
.faq__item summary .toggle::before { top: 11px; left: 0; right: 0; height: 1px; }
.faq__item summary .toggle::after  { top: 0; bottom: 0; left: 11px; width: 1px; transition: transform 0.3s ease; }
.faq__item[open] summary .toggle::after { transform: rotate(90deg); }

.faq__answer {
  padding: 0 8px 32px 74px;
  font-size: 14px;
  line-height: 2.0;
  letter-spacing: 0.05em;
  color: #322620;
}
.faq__answer p { margin: 0 0 1em; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--walnut-2);
  color: var(--ivory);
  padding: clamp(64px, 8vh, 96px) 0 32px;
}
.site-footer .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}
.site-footer .brand-block {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 28px;
  letter-spacing: 0.08em;
}
.site-footer .brand-block .num {
  font-family: var(--serif-jp);
  font-style: normal;
  font-size: 36px;
  display: block;
  margin-bottom: 6px;
  letter-spacing: 0.06em;
}
.site-footer .brand-block .tag {
  display: block;
  margin-top: 14px;
  font-family: var(--sans-jp);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(244, 236, 224, 0.6);
}
.site-footer .col h4,
.site-footer .col h2 { /* 見出しレベル整理で h4→h2 に変更（監査H5）。見た目は従来通り */
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 14px;
  color: var(--amber);
  letter-spacing: 0.18em;
  margin: 0 0 18px;
}
.site-footer .col p, .site-footer .col a {
  display: block;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: rgba(244, 236, 224, 0.8);
  margin: 0 0 6px;
}
.site-footer .copyright {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(244, 236, 224, 0.12);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(244, 236, 224, 0.62); /* 0.45→0.62: 4.5:1確保（監査H12） */
}
@media (max-width: 720px) {
  .site-footer .container { grid-template-columns: 1fr; }
  /* copyright の3要素が横並びで折り返して潰れるため、モバイルは縦並び（各要素1行）に */
  .site-footer .copyright { flex-direction: column; gap: 6px; align-items: flex-start; }
}

/* =========================================================
   Tweaks panel
   ========================================================= */
.tweaks {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  background: var(--walnut-2);
  color: var(--ivory);
  border: 1px solid rgba(244, 236, 224, 0.2);
  width: 280px;
  padding: 20px;
  font-family: var(--sans-jp);
  font-size: 12px;
  display: none;
  border-radius: 4px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.tweaks.is-open { display: block; }
.tweaks h3 {
  margin: 0 0 16px;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--amber);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tweaks h3 .close {
  cursor: pointer;
  font-family: inherit;
  background: none;
  border: none;
  padding: 0;
  font-size: 18px;
  font-style: normal;
  color: rgba(244, 236, 224, 0.6);
}
.tweaks .group { margin-bottom: 18px; }
.tweaks .label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(244, 236, 224, 0.55);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.tweaks .opts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tweaks .opts button {
  background: transparent;
  border: 1px solid rgba(244, 236, 224, 0.2);
  color: var(--ivory);
  padding: 8px 10px;
  font-size: 11px;
  font-family: var(--sans-jp);
  letter-spacing: 0.06em;
  cursor: pointer;
  flex: 1;
  transition: all 0.2s ease;
}
.tweaks .opts button:hover { border-color: var(--amber); }
.tweaks .opts button.is-active {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--walnut-2);
}
.tweaks input[type=range] {
  width: 100%;
  accent-color: var(--amber);
}

/* =========================================================
   FULL-PAGE SCROLL SNAP (2026-05-24 導入)
   Apple/Linear 型の「1セクション = 1画面」+ セクション境で snap。
   - Hero は内部 scroll-driven (band 1→2→3 切替) を保護するため snap-align: none
   - Concept/Interior/Master/Drinks/Visit/FAQ/Footer は先頭 snap
   - Drinks/Master/FAQ は内容量で 1viewport を超えるが、その場合も
     先頭で snap し、内部スクロールは自由（scroll-snap-stop: always）
   - iOS Safari の動的アドレスバー対応に 100svh を併記
   ========================================================= */
/* =========================================================
   FULL-PAGE LAYOUT + DYNAMIC SNAP (2026-05-24 案C)
   - 各セクションが画面いっぱい (min-height: 100vh / 100svh)
   - scroll-snap-align: start を各 section に付与
   - scroll-snap-type は section-snap.js が IntersectionObserver で
     Hero 表示中は 'none'、Hero を抜けたら 'y mandatory' に動的切替
   - これにより Hero scroll-driven と snap mandatory の干渉を回避
   ========================================================= */
.section,
.visit {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  /* scroll-snap-align は維持（将来 GSAP ScrollTrigger.snap で参照する可能性、
     かつ単独では副作用なし）。CSS scroll-snap-type は section-snap.js 側で
     現在は無効化中（同ファイル冒頭のログ参照）。 */
  scroll-snap-align: start;
}

/* 短いコンテンツのセクションは天地中央寄せで間延びを意図的にデザイン化。
   既に内容が 1viewport を超える長尺セクション (Drinks/Master 等) では、
   justify-content: center により上下に余白が追加されるが、min-height: 100vh は
   コンテンツに応じて伸びるので問題なし。 */
.section,
.visit {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 820px) {
  .section,
  .visit {
    justify-content: flex-start;
  }
}

/* =========================================================
   ws-1001 — P0 追加（2026-06-10 監査対応）
   電話CTA（Hero band3 / Sticky / テキストリンク）+ 税込注記
   既存クラスへの上書きなし・スコープ付きクラスのみ
   ========================================================= */

/* --- CTA コンポーネント（アンバー電話ボタン: Hero / Banquet / Closing 共用）---
   in-flow の縦並びアンバーボタンを 1 部品に集約。置き場所ごとの差分（余白・影・
   pointer-events）は --modifier で足すだけ。新規 CTA は
   `<a class="ws-1001-cta ws-1001-cta--xxx"><span class="ws-1001-cta__label">…</span>
    <span class="ws-1001-cta__num">…</span></a>` で再利用できる。
   ※ Sticky（固定・横並び）と Map（ゴースト枠）は構造が別物のため別クラスのまま。 */
.ws-1001-cta {
  --ws-1001-cta-bg: var(--amber);
  --ws-1001-cta-bg-hover: var(--amber-deep);
  --ws-1001-cta-ink: #1a1108; /* 暗ウッド ink（amber 上で約7:1 を確保） */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 48px;
  background: var(--ws-1001-cta-bg);
  color: var(--ws-1001-cta-ink);
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.3s ease, transform 0.3s cubic-bezier(.16, 1, .3, 1);
}
.ws-1001-cta:hover { background: var(--ws-1001-cta-bg-hover); transform: translateY(-2px); }
.ws-1001-cta:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
.ws-1001-cta__label {
  font-family: var(--sans-jp);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.16em;
}
.ws-1001-cta__num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
}
@media (prefers-reduced-motion: reduce) {
  .ws-1001-cta { transition: none; }
}

/* modifier: Hero band3 主CTA
   親 .hero__text は pointer-events:none のため、is-active（バンド表示中）の時だけ
   クリック可能にする。非アクティブ帯の透明ボタン誤タップを構造的に防ぐ。 */
.ws-1001-cta--hero {
  position: absolute;
  bottom: max(12vh, 90px);
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0;
  padding: 13px 38px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  white-space: nowrap;
}
.hero__text.is-active .ws-1001-cta--hero { pointer-events: auto; }
/* hover時：基底 .ws-1001-cta:hover の transform:translateY(-2px) が中央寄せの translateX(-50%) を
   打ち消してボタンが右へ飛ぶのを防ぐ。.ws-1001-cta と常に併用するため二重クラスで詳細度を上げ、
   ソース順の後勝ち依存をやめて確実に勝たせる（過去にこのルールが本番へ未反映で横飛びが再発したため）。 */
.ws-1001-cta.ws-1001-cta--hero:hover { transform: translateX(-50%) translateY(-2px); }
/* reduced-motion: 浮き(translateY)も消して中央寄せのみ＝「動きを減らす」設定を尊重。
   基底は @media reduced-motion で transition:none のため、hover の -2px が瞬間移動で残る。
   それを抑えるため transform 自体を中央寄せだけに上書きする（Codex round-17 指摘 LOW）。
   ※ 2109 と同詳細度なので順序で勝たせるため必ずこの後ろに置く。 */
@media (prefers-reduced-motion: reduce) {
  .ws-1001-cta.ws-1001-cta--hero:hover { transform: translateX(-50%); }
}

/* modifier: 貸切・宴会バナー CTA */
.ws-1001-cta--banquet {
  padding: 14px 36px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* modifier: Closing 締めCTA */
.ws-1001-cta--closing {
  padding: 15px 44px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
}

/* --- 本文中の電話番号リンク（Visit / Footer） --- */
.ws-1001-tel-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(230, 176, 106, 0.55);
  padding-bottom: 1px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.ws-1001-tel-link:hover { color: var(--amber); border-color: var(--amber); }

/* Hero band3 主CTA は .ws-1001-cta--hero（上の CTA コンポーネント）で定義。 */

/* --- Sticky 電話CTA（モバイル限定） --- */
.ws-1001-sticky-tel {
  --ws-1001-cta-bg: var(--amber);
  --ws-1001-cta-bg-hover: var(--amber-deep);
  --ws-1001-cta-ink: #1a1108; /* amber 上で約7:1（base と同 ink） */
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 60;
  display: none; /* PC では非表示（モバイルのみ） */
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  min-height: 52px;
  padding: 14px 18px;
  background: var(--ws-1001-cta-bg);
  color: var(--ws-1001-cta-ink);
  text-decoration: none;
  border-radius: 3px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
  transition: transform 0.45s cubic-bezier(.16, 1, .3, 1), opacity 0.45s ease;
}
.ws-1001-sticky-tel__label {
  font-family: var(--sans-jp);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.12em;
}
.ws-1001-sticky-tel__num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
}
/* Hero 滞在中 / フッター最下部表示中は画面外へ退避（JSが付与。JS不発時は常時表示でCV導線を確保） */
.ws-1001-sticky-tel.is-hero-view,
.ws-1001-sticky-tel.is-footer-view {
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 720px) {
  .ws-1001-sticky-tel { display: flex; }
  /* Sticky バーがページ末尾の表示（Charge等の法定表示・copyright）を恒久遮蔽しない
     ための逃げ余白（実効バー約80px + bottom12px + 余裕）。
     旧実装は body padding-bottom だったが、紙色(body 背景)の帯がフッター下に覗くため、
     暗色フッター自身の下 padding に移設した（2026-06-15）。 */
  .site-footer { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
}

/* --- 明背景セクションの amber 系テキスト（WCAG 1.4.3 対応・監査C5） ---
   amber #e0a04e は paper 上で 2.1:1 しかないため、明背景（data-theme="light"）
   では --ws-1001-amber-text（#8a5717 ≈ 5.7:1）に差し替える。
   暗背景セクションの amber は 5.7:1 確保済みのため対象外。 */
[data-theme="light"] .eyebrow { color: var(--ws-1001-amber-text); }
.master__copy .name { color: var(--ws-1001-amber-text); }
.master__timeline .y { color: var(--ws-1001-amber-text); }
.faq summary .q { color: var(--ws-1001-amber-text); }

/* --- Drinks 税込注記 --- */
.ws-1001-price-note {
  margin: 20px 0 0;
  text-align: center;
  font-family: var(--sans-jp);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(244, 236, 224, 0.66); /* 暗背景上で 4.5:1 以上 */
}

/* --- スキップリンク（キーボード操作時のみ表示・監査M6対応） --- */
.ws-1001-skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--walnut-2);
  color: var(--ivory);
  font-family: var(--sans-jp);
  font-size: 14px;
  letter-spacing: 0.1em;
  border-radius: 3px;
  transform: translateY(-200%);
}
.ws-1001-skip:focus-visible {
  transform: none;
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* --- FV 業態・場所の常設1行（監査H4対応） --- */
.ws-1001-hero-place {
  position: absolute;
  top: 92px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--sans-jp);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: rgba(244, 236, 224, 0.88);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  z-index: 4;
  pointer-events: none;
}

/* --- Hero band 2/3 の lead は h1→p に降格（監査H5）。
       既存リセットで h1 は margin 0 のため、p も 0 に揃えて
       バンド間のレイアウト差をゼロにする --- */
.hero__overlay p.lead {
  margin-block: 0;
}

/* --- Drinks「フルメニューを見る」リンク（旧 inline style をクラス化・監査M13の一部） --- */
.ws-1001-menu-link {
  color: var(--amber);
  font-family: var(--sans-jp);
  font-size: 15px;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 4px;
}
.ws-1001-menu-link span {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 14px;
}
.ws-1001-menu-link:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

/* --- モバイルnav: ハンバーガー + ドロワー（監査H3対応） --- */
.ws-1001-nav-toggle {
  display: none; /* PC では従来の nav を表示 */
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.ws-1001-nav-toggle__bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
}
@media (max-width: 1024px) {
  .ws-1001-nav-toggle { display: flex; }
}

.ws-1001-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 70; /* Sticky CTA (60) より前面 */
  background: rgba(26, 17, 8, 0.97);
  color: var(--ivory);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center; /* 内容が画面より高い時は上揃えへ退避＝見切れ防止 */
  gap: 8px;
  padding: calc(72px + env(safe-area-inset-top)) var(--gutter) calc(48px + env(safe-area-inset-bottom));
  overflow-y: auto; /* 低い画面でリンク/電話/SNSが切れないようスクロール可に */
}
.ws-1001-mobile-nav[hidden] { display: none; }
.ws-1001-mobile-nav__close {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  right: 14px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(244, 236, 224, 0.35);
  border-radius: 50%;
  background: transparent;
  color: var(--ivory);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.ws-1001-mobile-nav__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ws-1001-mobile-nav__links a {
  display: block;
  padding: 12px 28px; /* 44px 以上のタップ領域 */
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 22px;
  letter-spacing: 0.18em;
}
.ws-1001-mobile-nav__tel {
  margin-top: 28px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 48px;
  padding: 13px 36px;
  background: var(--ws-1001-cta-bg, var(--amber));
  color: #1a1108;
  border-radius: 2px;
}
.ws-1001-mobile-nav__tel-label {
  font-family: var(--sans-jp);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.14em;
}
.ws-1001-mobile-nav__tel-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
}
/* ドロワー表示中はページスクロールを止める（Lenis ページは JS 側でも stop） */
html.ws-1001-nav-open,
html.ws-1001-nav-open body { overflow: hidden; }

/* --- フォーカス可視（新設CTAのみ・既存に波及させない） --- */
.ws-1001-nav-toggle:focus-visible,
.ws-1001-mobile-nav__close:focus-visible,
.ws-1001-mobile-nav__links a:focus-visible,
.ws-1001-mobile-nav__tel:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.ws-1001-sticky-tel:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 3px;
}
.ws-1001-tel-link:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

/* =========================================================
   ws-1001 — 洗練修正（2026-06-11 デザインレビュー対応）
   nav電話 / Conceptプルクォート / Master実証ファクト / FAQ罫 / Skip intro
   既存クラスへの上書きなし・スコープ付きクラスのみ
   ========================================================= */

/* --- デスクトップnav右端の電話導線（HIGH-2: FV初画面のCV導線確保）
       .site-header nav a (0,1,2) より強いセレクタで padding / 下線を確実に上書き --- */
/* phone icon for nav tel */
.ws-1001-nav-tel__icon {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 5px;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.11-.27 11.72 11.72 0 003.69.59 1 1 0 011 1v3.61a1 1 0 01-1 1A17.14 17.14 0 013 3.49a1 1 0 011-1h3.62a1 1 0 011 1 11.72 11.72 0 00.59 3.69 1 1 0 01-.27 1.11z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.11-.27 11.72 11.72 0 003.69.59 1 1 0 011 1v3.61a1 1 0 01-1 1A17.14 17.14 0 013 3.49a1 1 0 011-1h3.62a1 1 0 011 1 11.72 11.72 0 00.59 3.69 1 1 0 01-.27 1.11z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.site-header nav .ws-1001-nav-tel {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  padding: 7px 14px;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: 0.92;
  transition: color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}
.site-header nav .ws-1001-nav-tel::after { display: none; } /* nav a 共通の下線アニメは枠線と重複するため無効 */
.site-header nav .ws-1001-nav-tel:hover { color: var(--amber); border-color: var(--amber); opacity: 1; }
.site-header nav .ws-1001-nav-tel:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* --- Concept 核フレーズのプルクォート（MEDIUM-3: 段落の視線の止まり場） --- */
.ws-1001-concept-pull {
  display: block;
  margin-top: 14px;
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: var(--walnut-2);
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* --- Master 実証ファクト行（HIGH-1 暫定: 右カラムの視覚的重量を補う）
       全項目が確認済み事実のみ（SINCE 2014 = 店舗公式ロゴ裏付け） --- */
.ws-1001-master-facts {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: clamp(24px, 3vw, 48px);
  flex-wrap: wrap;
}
.ws-1001-master-facts .item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ws-1001-master-facts .k {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--ws-1001-amber-text);
}
.ws-1001-master-facts .v {
  font-family: var(--serif-jp);
  font-size: 17px;
  font-weight: 500;
  color: var(--walnut-2);
  letter-spacing: 0.08em;
}

/* --- FAQ 見出し下の短いアンバー罫（LOW-2: 他セクションの装飾語彙を移植） --- */
.ws-1001-faq-rule::after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--ws-1001-amber-text);
  margin: 26px auto 0;
}

/* --- Hero skip intro（M2対応: 長尺スクラブの離脱防止・静かな逃げ道） --- */
.ws-1001-hero-skip {
  pointer-events: auto;
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(244, 236, 224, 0.66); /* 暗背景上 4.5:1 以上（監査H12 と同水準） */
  padding: 12px 16px;  /* タップ領域確保（視覚サイズは margin で相殺） */
  margin: -12px -16px;
  transition: color 0.3s ease;
}
.ws-1001-hero-skip:hover { color: var(--amber); }
.ws-1001-hero-skip:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* --- reduced-motion: 新設分の遷移停止 --- */
@media (prefers-reduced-motion: reduce) {
  .ws-1001-nav-tel,
  .ws-1001-hero-skip {
    transition: none;
  }
}

/* --- reduced-motion: 新設分のアニメ・遷移を停止 + 既存の網羅漏れ補完（監査M3） --- */
@media (prefers-reduced-motion: reduce) {
  .ws-1001-sticky-tel,
  .ws-1001-tel-link {
    transition: none;
  }
  /* SCROLL TO ENTER の無限ラインアニメ停止 */
  .hero__meta .scroll-hint .line::after {
    animation: none !important;
  }
  /* アンカージャンプの滑走を止める */
  html { scroll-behavior: auto; }
}

/* =========================================================
   ws-1001 — 英字主役の大見出し（2026-06-11 のってぃ選択「英字主役オンリー」）
   方向: 品格×大胆さ・海外系（design-credo 信条6/4）。
   h2 を英字一語（Interior/Master/Drinks/Access）に置換し、Cormorant Garamond の
   大きなイタリックで主役級に。eyebrow は通し番号のみ。color は各セクションの既存
   ルールに委ねる（light=walnut-2 / interior=--int-h / drinks・visit=ivory）ため、
   ここでは font 系のみ上書き（詳細度 .h-section と同点・記述順で後勝ち）。
   ========================================================= */
.ws-1001-h-en {
  font-family: var(--serif-en);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(46px, 6vw, 88px);
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

/* --- button 要素のフォント統一（2026-06-11）---
   <button> はブラウザ既定で Arial を継ぐ。テキスト/記号を持ちうる装飾ボタンに
   inherit を当て、ページ全体を意図した4フォント体系（serif-jp / serif-en /
   sans-jp / mono）に完全統一する。drinks__nav は既に serif-en 指定済みのため対象外。 */
.ws-1001-nav-toggle,
.ws-1001-mobile-nav__close,
.drinks__dot {
  font-family: inherit;
}

/* =========================================================
   ws-1001 — 店名ロゴ（透過PNG・黒線画／背景の明暗で白黒自動反転）2026-06-13
   ヘッダー左上＋フッターのテキスト店名をロゴ画像に置換。黒線画なので
   暗背景では invert で白へ、明背景ではそのまま黒。width/height 属性で
   アスペクト比固定（CLS防止）、CSS は表示高さのみ指定。
   ========================================================= */
.ws-1001-logo {
  display: block;
  width: auto;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
}
.ws-1001-logo--header { height: 56px; } /* 2026-06-15 拡大（旧 40px：小さすぎ） */
.ws-1001-logo--footer { height: 76px; opacity: 0.95; }

/* ヘッダー左上ロゴのリンク（menu）の体裁 */
.site-header .brand a { display: inline-flex; align-items: center; }

/* --- ヘッダーロゴの色追従 ---
   site-header の mix-blend-mode（Hero上 difference）が画像に乗ると反転色で
   破綻するため、ロゴには normal を明示して filter で色を制御する。 */
.site-header .ws-1001-logo--header {
  mix-blend-mode: normal;
  transition: filter 0.4s ease;
}
/* Hero上（未スクロール）＝暗い写真背景 → 白ロゴ */
.site-header:not(.is-scrolled) .ws-1001-logo--header {
  filter: invert(1) brightness(1.85);
}
/* スクロール後・明背景セクション（concept/master/faq）→ 黒ロゴ */
.site-header.is-scrolled.theme-light .ws-1001-logo--header {
  filter: none;
}
/* スクロール後・暗背景セクション（interior/drinks/visit）→ 白ロゴ */
.site-header.is-scrolled.theme-dark .ws-1001-logo--header {
  filter: invert(1) brightness(1.85);
}
/* テーマ未確定のフォールバック → 暗背景想定で白 */
.site-header.is-scrolled:not(.theme-dark):not(.theme-light) .ws-1001-logo--header {
  filter: invert(1) brightness(1.85);
}

/* menu.html ヘッダーは常に明背景固定（is-scrolled が付かない静的ページ）。
   :not(.is-scrolled) の白反転が効くと紙背景で消えるため黒ロゴに固定する。
   !important は静的ヘッダーを動的反転ルールより確実に優先する意図的指定。 */
.ws-1001-header-static .ws-1001-logo--header {
  filter: none !important;
}

/* --- フッターロゴ（常に暗背景）→ 白ロゴ --- */
.site-footer .ws-1001-logo--footer {
  filter: invert(1) brightness(1.85);
}

/* モバイル: 細いバーで窮屈にならないようロゴをやや小さく */
@media (max-width: 720px) {
  .ws-1001-logo--header { height: 46px; } /* 2026-06-15 拡大（旧 34px） */
  .ws-1001-logo--footer { height: 64px; }
}

/* =========================================================
   ws-1001 — 貸切・宴会バナー（ソファ席・2026-06-13）
   Interior 末尾に中央寄せで1枚。親が flex column のため align-self:center で
   全幅化を止め、max-width で控えめに（煩雑回避）。
   ========================================================= */
.ws-1001-banquet {
  /* position:relative + z-index:1 で Interior の ::before 暗幕（z-index:0）より前面に固定。
     これが無いと暗幕に隠れ、hover 時だけ img の transform で前面化＝
     「ホバーしないと出てこない」不具合になっていた（2026-06-15 根治）。 */
  position: relative;
  z-index: 1;
  display: block;
  align-self: center;
  width: 100%;
  max-width: 720px;
  margin: clamp(20px, 3vh, 40px) auto 0;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}
.ws-1001-banquet img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.7);
}
/* ホバー / フォーカス / タップ(is-revealed) で暗転＋CTA を表示。
   いきなり tel: 発信させず、明示ボタンを踏ませる（誤発信防止）。 */
.ws-1001-banquet__overlay {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--gutter); right: var(--gutter);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vh, 18px);
  background: rgba(20, 12, 6, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, background 0.4s ease;
}
.ws-1001-banquet:hover .ws-1001-banquet__overlay,
.ws-1001-banquet:focus-within .ws-1001-banquet__overlay,
.ws-1001-banquet.is-revealed .ws-1001-banquet__overlay {
  opacity: 1;
  pointer-events: auto;
  background: rgba(20, 12, 6, 0.58);
}
.ws-1001-banquet__text {
  font-family: var(--serif-jp);
  color: var(--ivory);
  font-size: clamp(15px, 2.4vw, 19px);
  letter-spacing: 0.14em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
/* 貸切バナー CTA は .ws-1001-cta--banquet（CTA コンポーネント）で定義。 */
@media (prefers-reduced-motion: reduce) {
  .ws-1001-banquet__overlay { transition: none; }
}

/* =========================================================
   ws-1001 — ギャラリーページへの導線（Interior 末尾・2026-06-15）
   暗背景の Interior 末尾に中央寄せ。position:relative;z-index:1 で ::before 暗幕より前面。
   ========================================================= */
.ws-1001-gallery-link {
  position: relative;
  z-index: 1;
  align-self: center;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: clamp(30px, 5vh, 56px) auto 0;
  padding: 18px 40px;
  text-decoration: none;
  color: var(--ivory);
  border: 1px solid rgba(201, 138, 62, 0.4);
  border-radius: 2px;
  transition: border-color .3s ease, background .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.ws-1001-gallery-link:hover {
  border-color: var(--amber);
  background: rgba(201, 138, 62, 0.08);
  transform: translateY(-2px);
}
.ws-1001-gallery-link:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.ws-1001-gallery-link__en {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: .08em;
  color: #e6b06a;
}
.ws-1001-gallery-link__jp {
  font-family: var(--sans-jp);
  font-size: 13px;
  letter-spacing: .14em;
  color: rgba(244, 236, 224, .82);
}
.ws-1001-gallery-link__arrow {
  font-family: var(--serif-en);
  color: var(--amber);
  margin-top: 2px;
  transition: transform .3s ease;
}
.ws-1001-gallery-link:hover .ws-1001-gallery-link__arrow { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .ws-1001-gallery-link,
  .ws-1001-gallery-link__arrow { transition: none; }
}

/* =========================================================
   ws-1001 — Closing CTA（最後の一押し・2026-06-15）
   FAQ(明)→Footer(暗) の橋渡し。来店導線の締め。
   背景は walnut-2（フッター walnut よりわずかに深く＝段差で分離）。
   主CV=電話(amber ボタン・hero-cta の pointer-events 罠を避け独立実装)。
   副=アクセス導線(text link で強度を下げ主CV1本を維持)。
   ========================================================= */
.ws-1001-closing {
  background: var(--walnut-2);
  color: var(--ivory);
  padding: clamp(64px, 12vh, 130px) var(--gutter);
  text-align: center;
  border-top: 1px solid rgba(201, 138, 62, 0.18);
}
.ws-1001-closing__inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ws-1001-closing__eyebrow {
  margin: 0 0 14px;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: clamp(14px, 2.4vw, 18px);
  letter-spacing: 0.08em;
  color: var(--amber);
}
.ws-1001-closing__title {
  margin: 0 0 18px;
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: clamp(28px, 6vw, 46px);
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.ws-1001-closing__lead {
  margin: 0 0 36px;
  font-family: var(--sans-jp);
  font-size: clamp(14px, 3.4vw, 16px);
  line-height: 2;
  color: rgba(244, 236, 224, 0.82);
}
/* Closing 締めCTA は .ws-1001-cta--closing（CTA コンポーネント）で定義。 */
.ws-1001-closing__sub {
  margin-top: 22px;
  font-family: var(--sans-jp);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(244, 236, 224, 0.7);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 138, 62, 0.4);
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.ws-1001-closing__sub:hover { color: var(--amber); border-color: var(--amber); }
@media (prefers-reduced-motion: reduce) {
  .ws-1001-closing__sub { transition: none; }
}

/* =========================================================
   ws-1001 — Instagram / SNS リンク（2026-06-13）
   ヘッダーナビ=アイコンのみ（currentColor で背景テーマに追従）。
   モバイルドロワー=アイコン＋ラベル。フッター=アイコン＋@handle。
   ========================================================= */
.site-header nav .ws-1001-sns {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  opacity: 0.9;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.site-header nav .ws-1001-sns::after { display: none; } /* nav a 共通の下線アニメを無効 */
.site-header nav .ws-1001-sns:hover { opacity: 1; color: var(--amber); }
.site-header nav .ws-1001-sns:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.site-header nav .ws-1001-sns svg { display: block; }

.ws-1001-mobile-nav__sns {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ivory);
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.12em;
  opacity: 0.92;
}
.ws-1001-mobile-nav__sns svg { display: block; }
.ws-1001-mobile-nav__sns:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.site-footer .ws-1001-footer-sns {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(244, 236, 224, 0.8);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  transition: color 0.3s ease;
}
.site-footer .ws-1001-footer-sns:hover { color: var(--amber); }
.site-footer .ws-1001-footer-sns:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.site-footer .ws-1001-footer-sns svg { display: block; }

@media (prefers-reduced-motion: reduce) {
  .ws-1001-banquet img,
  .site-header nav .ws-1001-sns,
  .site-footer .ws-1001-footer-sns { transition: none; }
}

/* =========================================================
   LINE WebView viewport stability
   =========================================================
   LINE の上部バナー表示/非表示で viewport height が変動しても、LINE 内だけは
   初回の 1vh 相当値を JS で --line-stable-vh に固定して縦方向の拡大縮小を止める。
   JS が動く前/失敗時は svh をフォールバックにする。 */
html.is-line {
  --line-safe-vh: 1vh;
  scroll-behavior: auto;
}
@supports (height: 100svh) {
  html.is-line { --line-safe-vh: 1svh; }
}

html.is-line,
html.is-line body,
html.is-line main,
html.is-line .hero,
html.is-line .section,
html.is-line .visit,
html.is-line .faq,
html.is-line .site-footer {
  overflow-anchor: none;
}

html.is-line .section,
html.is-line .visit,
html.is-line .faq,
html.is-line .site-footer {
  contain: layout style;
}

html.is-line .hero,
html.is-line .hero__stage {
  height: 100vh;
  height: 100svh;
  height: calc(var(--line-safe-vh) * 100);
}

html.is-line .hero__stage {
  position: relative;
}

html.is-line .hero__stage canvas {
  will-change: transform;
}

html.is-line .section,
html.is-line .visit {
  min-height: 100vh;
  min-height: 100svh;
  min-height: calc(var(--line-safe-vh) * 100);
}

html.is-line .section,
html.is-line .visit,
html.is-line .faq {
  scroll-snap-align: unset;
}

html.is-line .hero__progress {
  height: 36vh;
  height: 36svh;
  height: calc(var(--line-safe-vh) * 36);
}

html.is-line .concept,
html.is-line .master,
html.is-line .drinks,
html.is-line .faq {
  padding: clamp(80px, calc(var(--line-safe-vh) * 12), 160px) 0;
}

html.is-line .interior {
  padding: clamp(24px, calc(var(--line-safe-vh) * 3), 44px) 0 clamp(20px, calc(var(--line-safe-vh) * 2.5), 36px);
  gap: clamp(14px, calc(var(--line-safe-vh) * 1.8), 24px);
}

html.is-line .interior__gallery,
html.is-line .interior__top,
html.is-line .interior__top-right {
  gap: clamp(12px, calc(var(--line-safe-vh) * 1.6), 18px);
}

html.is-line .interior__bottom {
  gap: clamp(10px, calc(var(--line-safe-vh) * 1.4), 14px);
}

html.is-line .seats-table {
  padding: clamp(14px, calc(var(--line-safe-vh) * 1.6), 20px) clamp(16px, 1.8vw, 24px);
}

@media (max-width: 820px) {
  html.is-line .interior { padding-top: clamp(72px, calc(var(--line-safe-vh) * 11), 104px); }
  html.is-line .visit__info { padding-top: clamp(80px, calc(var(--line-safe-vh) * 12), 110px); }
}

html.is-line .site-footer {
  padding: clamp(64px, calc(var(--line-safe-vh) * 8), 96px) 0 32px;
}

@media (max-width: 720px) {
  html.is-line .site-footer {
    padding-bottom: calc(160px + env(safe-area-inset-bottom));
  }
}

html.is-line .ws-1001-banquet {
  margin: clamp(20px, calc(var(--line-safe-vh) * 3), 40px) auto 0;
}

html.is-line .ws-1001-banquet__overlay {
  gap: clamp(12px, calc(var(--line-safe-vh) * 2), 18px);
}

html.is-line .ws-1001-gallery-link {
  margin: clamp(30px, calc(var(--line-safe-vh) * 5), 56px) auto 0;
}

html.is-line .ws-1001-closing {
  padding: clamp(64px, calc(var(--line-safe-vh) * 12), 130px) var(--gutter);
}