/* ============================================================
 * Site Header + Footer — LOUNGE 幸良(KOURA)
 * ============================================================ */

/* ------------------------------------------------------------
 * Header
 * ------------------------------------------------------------ */
.site-header {
  --header-ink: var(--color-text);
  --header-brand-en: var(--color-gold-strong);
  --header-hover: var(--color-gold-strong);
  --header-top-bg: linear-gradient(180deg, rgba(250, 248, 243, 0.56) 0%, rgba(250, 248, 243, 0.22) 62%, rgba(250, 248, 243, 0) 100%);
  --header-top-blur: blur(5px);
  --header-top-shadow: none;
  --header-cta-border: currentColor;
  --header-cta-hover-bg: var(--color-text);
  --header-cta-hover-color: var(--color-bg);

  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  padding-block: clamp(0.65rem, 1.3vw, 1rem);
  background: var(--header-top-bg);
  backdrop-filter: var(--header-top-blur);
  -webkit-backdrop-filter: var(--header-top-blur);
  box-shadow: var(--header-top-shadow);
  transition:
    background 0.4s var(--ease-out),
    padding-block 0.4s var(--ease-out),
    backdrop-filter 0.4s var(--ease-out),
    -webkit-backdrop-filter 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out);
}

.site-header--dark-kv[data-state="top"] {
  --header-ink: var(--color-bg);
  --header-brand-en: var(--color-vip-gold);
  --header-hover: var(--color-vip-gold);
  --header-top-bg: linear-gradient(180deg, rgba(10, 10, 11, 0.58) 0%, rgba(10, 10, 11, 0.24) 64%, rgba(10, 10, 11, 0) 100%);
  --header-top-blur: blur(5px);
  --header-cta-border: rgba(250, 248, 243, 0.72);
  --header-cta-hover-bg: rgba(250, 248, 243, 0.92);
  --header-cta-hover-color: var(--color-vip-bg);
}

.site-header--solid,
.site-header[data-state="scrolled"] {
  --header-ink: var(--color-text);
  --header-brand-en: var(--color-gold-strong);
  --header-hover: var(--color-gold-strong);
  --header-cta-border: var(--color-text);
  --header-cta-hover-bg: var(--color-text);
  --header-cta-hover-color: var(--color-bg);
  /* Scrolled state — readable surface over content sections. */
  background: rgba(250, 248, 243, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding-block: clamp(0.55rem, 1.1vw, 0.85rem);
  box-shadow: 0 1px 12px rgba(42, 39, 35, 0.06);
}

.site-header__inner {
  width: var(--container);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

/* --- Brand ----------------------------------------------- */
.site-header__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--header-ink);
  text-decoration: none;
  flex-shrink: 0;
}

.site-header__brand-en {
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: clamp(0.85rem, 1.05vw, 1rem);
  letter-spacing: 0.4em;
  color: var(--header-brand-en);
  padding-right: 0.4em;
}

.site-header__brand-jp {
  font-family: var(--font-brush-jp);
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  line-height: 1;
  color: var(--header-ink);
}

/* --- Nav -------------------------------------------------- */
.site-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.site-nav__item > a,
.site-nav__parent {
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--header-ink);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0.5rem 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color var(--dur) var(--ease-out);
}

/* Plain text links flip to gold-strong on hover. The CTA pill
 * (.site-nav__cta) is excluded so its own hover rule (inverted
 * background + cream text) can win without an !important. */
.site-nav__item > a:not(.site-nav__cta):hover,
.site-nav__parent:hover,
.site-nav__item > a:not(.site-nav__cta):focus-visible,
.site-nav__parent:focus-visible {
  color: var(--header-hover);
}

/* キーボードフォーカス時のみ可視リングを表示(マウスクリックでは出さない)。 */
.site-nav__item > a:not(.site-nav__cta):focus-visible,
.site-nav__parent:focus-visible {
  outline: 2px solid var(--color-gold-strong);
  outline-offset: 2px;
}

.site-nav__caret {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur) var(--ease-out);
}

.site-nav__item--has-children:hover .site-nav__caret,
.site-nav__item--has-children:focus-within .site-nav__caret,
.site-nav__parent[aria-expanded="true"] .site-nav__caret {
  transform: translateY(1px) rotate(-135deg);
}

/* --- Submenu (Seats) ------------------------------------- */
.site-nav__item--has-children {
  position: relative;
}

.site-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  position: absolute;
  top: 100%;
  left: 50%;
  /* ティッカー行（backdrop-filter で重なり文脈を作る）より前面に出す。 */
  z-index: 5;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(250, 248, 243, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-line);
  min-width: 8.5rem;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.site-nav__item--has-children:hover .site-nav__sub,
.site-nav__item--has-children:focus-within .site-nav__sub,
.site-nav__parent[aria-expanded="true"] + .site-nav__sub {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.site-nav__sub li a {
  display: block;
  padding: 0.5rem 1.25rem;
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
  white-space: nowrap;
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

.site-nav__sub li a:hover,
.site-nav__sub li a:focus-visible {
  color: var(--color-gold-strong);
  background: rgba(201, 169, 97, 0.07);
  outline: none;
}

/* --- CTA --------------------------------------------------- */
/* ヘッダーCTAは「ボタン」として少し格上げ: ゴールド枠・やや厚めの余白・
 * 角丸とゴールドのhover下地で、上品な範囲でクリック可能性を強調する。 */
.site-nav__cta {
  padding: 0.5rem 1.15rem !important;
  border: 1px solid var(--color-gold, #c9a961);
  border-radius: 2px;
  color: var(--header-ink);
  letter-spacing: 0.22em;
  font-size: 0.8rem;
  transition:
    background var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.site-nav__cta:hover,
.site-nav__cta:focus-visible {
  background: var(--color-gold, #c9a961);
  color: #1f1c19;
  border-color: var(--color-gold, #c9a961);
  box-shadow: 0 2px 12px rgba(201, 169, 97, 0.28);
}

/* 基底 .site-nav__item > a (詳細度 0,1,1) の transition:color が
 * .site-nav__cta (0,1,0) を上書きし、hover 時に background/border-color が
 * 即時変化(=他リンクより速く見える)していた。同等以上の詳細度で背景・枠線も
 * var(--dur) で遷移させ、他のナビ項目とアニメーション速度を揃える。 */
.site-nav__item > a.site-nav__cta {
  transition:
    background var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

/* --- Mobile toggle ---------------------------------------- */
.site-header__toggle {
  display: none;
  /* スマホ基準の最小タップ領域 44x44px を確保(線の視覚サイズは 24px のまま)。 */
  width: auto;
  height: 44px;
  min-width: 5rem;
  min-height: 44px;
  background: transparent;
  border: 0;
  padding: 0 0 0 0.35rem;
  position: relative;
  cursor: pointer;
  z-index: 60;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  color: var(--header-ink);
  font-family: var(--font-serif-en);
  font-size: 0.78rem;
  font-style: italic;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.82s var(--ease-out);
}

.site-header__toggle-text::before {
  content: "Menu";
}

.site-header__toggle-text {
  display: inline-block;
  min-width: 3.8em;
  color: currentColor;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-text::before {
  content: "Close";
}

.site-header__toggle-mark {
  position: relative;
  width: 18px;
  height: 18px;
  display: block;
  color: var(--color-gold-strong);
}

.site-header__toggle-line {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition:
    transform 0.82s var(--ease-out),
    opacity 0.82s var(--ease-out),
    background 0.82s var(--ease-out);
}

.site-header__toggle-line:nth-child(1) {
  transform: translateY(-3px);
}

.site-header__toggle-line:nth-child(2) {
  transform: translateY(3px);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-line:nth-child(1) {
  transform: translateY(0) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-line:nth-child(2) {
  transform: translateY(0) rotate(-45deg);
}

.site-header__toggle:focus {
  outline: none;
}

.site-header__toggle:focus-visible .site-header__toggle-line {
  background: var(--color-gold-strong);
}

/* --- Backdrop (mobile) ------------------------------------ */
.site-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(42, 39, 35, 0.55);
  opacity: 0;
  pointer-events: none;
  z-index: 48;
  transition: opacity 0.4s var(--ease-out);
}

body.is-nav-open .site-nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* --- Mobile breakpoint ------------------------------------ */
@media (max-width: 880px) {
  .site-header__toggle {
    display: inline-flex;
  }

  /* モバイルではインライン nav を隠し、別マークアップの SP オーバーレイ(.sp-menu)が担う。 */
  .site-header__nav {
    display: none;
  }

  html.is-nav-open,
  body.is-nav-open {
    overflow: hidden;
  }

  .site-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    width: 100%;
  }

  .site-nav__item {
    width: 100%;
  }

  .site-nav__item > a,
  .site-nav__parent {
    width: 100%;
    font-size: 0.95rem;
    padding: 0.6rem 0;
    justify-content: space-between;
    color: var(--color-text);
  }

  .site-nav__sub {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    margin-top: 0.5rem;
    padding: 0 0 0 1rem;
    min-width: 0;
    text-align: left;
    display: none;
  }

  .site-nav__parent[aria-expanded="true"] + .site-nav__sub {
    display: block;
    /* デスクトップ用の translateX(-50%) を打ち消す(残ると左へずれて見切れる)。 */
    transform: none;
  }

  .site-nav__sub li a {
    text-align: left;
    padding-inline: 0;
    padding-block: 0.55rem;
    font-size: 0.85rem;
  }

  .site-nav__cta {
    width: 100%;
    /* 他のナビ項目(左揃え・左padding 0)と左端を揃える。center + 左padding 1rem だと
     * CONTACT だけ左に余白が空いて見えるため、左揃え＋左右 padding を 0 にする。 */
    text-align: left;
    padding-inline: 0 !important;
    margin-top: 0.5rem;
    color: var(--color-text);
    border-color: var(--color-text);
  }

  .site-nav__cta:hover,
  .site-nav__cta:focus-visible {
    background: var(--color-text);
    border-color: var(--color-text);
    color: var(--color-bg);
  }

  body.is-nav-open .site-header__toggle-line {
    background: var(--color-text);
  }
}

/* ------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------ */
.site-footer {
  background: var(--color-surface);
  color: var(--color-text);
  padding-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--color-line);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 880px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: start;
  }
}

/* --- Brand area ------------------------------------------- */
.site-footer__brand-area {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.site-footer__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--color-text);
}

.site-footer__brand-en {
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0.4em;
  /* 明るいフッター地(--color-surface)上で読ませるラベルのためAA適合色を使用。 */
  color: var(--color-gold-text);
  padding-right: 0.4em;
}

.site-footer__brand-jp {
  font-family: var(--font-brush-jp);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--color-text);
}

.site-footer__tagline {
  font-family: var(--font-serif-jp);
  font-size: 0.92rem;
  letter-spacing: 0.16em;
  color: var(--color-text-mute);
  margin: 0;
}

.site-footer__sns {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-footer__sns-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}

.site-footer__sns-link:hover,
.site-footer__sns-link:focus-visible {
  color: var(--color-gold-strong);
  outline: none;
}

.site-footer__sns-link--line:hover,
.site-footer__sns-link--line:focus-visible {
  color: #06c755;
}

/* --- Info list -------------------------------------------- */
.site-footer__info {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.site-footer__info-row {
  display: grid;
  grid-template-columns: 6em 1fr;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.3rem;
  border-bottom: 1px solid var(--color-line);
}

.site-footer__info-row:last-child {
  border-bottom: 0;
}

.site-footer__info-row dt {
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* 明るいフッター地上で読ませるラベルのためAA適合色を使用。 */
  color: var(--color-gold-text);
  margin: 0;
}

.site-footer__info-row dd {
  font-family: var(--font-serif-jp);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  line-height: 1.7;
  margin: 0;
}

.site-footer__info-row dd a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.site-footer__info-row dd a:hover {
  color: var(--color-gold-strong);
  border-bottom-color: var(--color-gold);
}

/* --- Nav -------------------------------------------------- */
.site-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.5rem;
}

.site-footer__nav a {
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  color: var(--color-gold-strong);
}

/* キーボードフォーカス時のみ可視リングを表示。 */
.site-footer__nav a:focus-visible {
  outline: 2px solid var(--color-gold-strong);
  outline-offset: 2px;
}

/* --- Bottom ----------------------------------------------- */
.site-footer__bottom {
  padding-block: 1.5rem;
  border-top: 1px solid var(--color-line);
  text-align: center;
}

.site-footer__copy {
  margin: 0;
  font-family: var(--font-serif-en);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--color-text-mute);
}

/* 日本語+地名の内部リンク行（全ページ共通フッター・SEO内部リンク強化）。 */
.site-footer__seo-links {
  margin: 0 0 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  justify-content: center;
  font-family: var(--font-sans-jp);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

.site-footer__seo-links a {
  color: var(--color-text-mute);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}

.site-footer__seo-links a:hover,
.site-footer__seo-links a:focus-visible {
  color: var(--color-gold-strong);
}

/* Override style.css legacy footer block */
.site-footer {
  padding-bottom: 0;
}

/* ------------------------------------------------------------
 * Main content offset
 * Hero (front page) reaches the very top; other pages get a top
 * spacer so the fixed header does not cover their content.
 * ------------------------------------------------------------ */
body:not(.home) .site-main {
  padding-top: clamp(4.5rem, 8vw, 6rem);
}

/* ============================================================
 * Shared CTA button (.koura-cta)
 *
 * Each detail page (concept / floor / access / vip / recruit)
 * declares page-scoped tokens (--cta-ink, --cta-gold, --cta-bg)
 * that this base reads via var(...). The page can therefore
 * stay light or invert dark (VIP) without re-declaring the
 * whole button.
 * ============================================================ */
.koura-cta {
  --cta-ink:   var(--color-ink,   #1f1c19);
  --cta-gold:  var(--color-gold,  #c9a961);
  --cta-bg:    var(--color-cream, #faf8f3);

  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95rem 1.8rem;
  border: 1px solid var(--cta-ink);
  background: transparent;
  font-family: var(--font-serif-jp);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-decoration: none;
  color: var(--cta-ink);
  transition:
    background var(--hover-dur, 640ms) var(--hover-ease, var(--ease-out, ease)),
    color var(--hover-dur, 640ms) var(--hover-ease, var(--ease-out, ease)),
    border-color var(--hover-dur, 640ms) var(--hover-ease, var(--ease-out, ease));
}

.koura-cta:focus-visible {
  outline: 2px solid var(--cta-gold);
  outline-offset: 3px;
}

.koura-cta--line {
  background: #06803a;
  border-color: #06803a;
  color: #fff;
}

.koura-cta--line:hover {
  background: #05702f;
  border-color: #05702f;
  color: #fff;
}

.koura-cta--tel:hover {
  background: var(--cta-ink);
  color: var(--cta-bg);
}

.koura-cta--ig {
  background: var(--cta-gold);
  border-color: var(--cta-gold);
  color: var(--cta-ink);
}

.koura-cta--ig:hover {
  background: var(--cta-ink);
  border-color: var(--cta-ink);
  color: var(--cta-bg);
}

.koura-cta svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .concept-cta__buttons,
  .floor-cta__buttons,
  .vip-cta__buttons,
  .access-cta__buttons,
  .recruit-entry__quick {
    flex-direction: column;
    align-items: stretch;
  }
  .concept-cta__buttons .koura-cta,
  .floor-cta__buttons .koura-cta,
  .vip-cta__buttons .koura-cta,
  .access-cta__buttons .koura-cta,
  .recruit-entry__quick .koura-cta {
    justify-content: center;
    width: 100%;
  }
}

/* ============================================================
 * 全ページ共通の常設コンバージョンCTAバー(.koura-cta-bar)
 * モバイル(≤768px)のみ画面下に固定表示。各ページの個別バーを統合。
 * 旧 .access-mobile-cta / .contact-mobile-cta / .recruit-mobile-cta の代替。
 * ============================================================ */
.koura-cta-bar {
  /* デスクトップでは非表示(ヘッダーCTA・各セクションの導線で十分)。 */
  display: none;
}

.koura-cta-bar__btn {
  flex: 1;
  /* 狭いSP(320〜390px)でもラベルが折り返さず1行に収まるよう min-width を解放。 */
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 52px;
  padding: 0.5em 0.5em;
  font-family: var(--font-serif-jp);
  font-weight: 500;
  /* 画面幅に応じて文字を縮め、狭幅でも1行を維持。 */
  font-size: clamp(0.72rem, 3vw, 0.92rem);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: filter 0.25s var(--ease-out, ease);
}

/* ラベルは常に1行。万一はみ出す場合の保険として省略記号を付与。 */
.koura-cta-bar__btn span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.koura-cta-bar__btn svg {
  flex-shrink: 0;
}

/* お電話: 暗地 + ゴールド系の上品な文字(白で 4.5:1 以上を確保)。 */
.koura-cta-bar__btn--tel {
  background: #1a1814;
  color: #f0dca6;
}

/* LINE: 視認性確保のためブランド緑をやや濃く調整(#06803a)。白文字で
 * 約 5:1 を確保し、通常テキストの WCAG AA(4.5:1)を満たす。
 * (LINE 公式 #06c755 は白文字で約 2.26:1 と AA 非適合のため。) */
.koura-cta-bar__btn--line {
  background: #06803a;
  color: #fff;
}

/* Instagram DM: ゴールドの地 + 暗い墨文字でコントラストを確保。 */
.koura-cta-bar__btn--dm {
  background: var(--color-gold, #c9a961);
  color: #1f1c19;
}

.koura-cta-bar__btn:hover,
.koura-cta-bar__btn:focus-visible {
  filter: brightness(1.06);
  outline: none;
}

.koura-cta-bar__btn:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255, 245, 214, 0.7);
}

@media (max-width: 768px) {
  .koura-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    gap: 1px;
    background: rgba(8, 8, 10, 0.4);
    box-shadow: 0 -6px 20px rgba(8, 8, 10, 0.2);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* 常設バーに本文・フッターが隠れないよう、全ページ共通で下部余白を確保。
   * (旧 body:has(.access-page){padding-bottom} 等のページ別指定をグローバル化) */
  body {
    padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .koura-cta-bar__btn {
    transition: none;
  }
}

/* ============================================================
 * SP fullscreen menu (mobile only)
 * 右からのスライドで開閉し、主要導線は横組みリストで自然な読み順に整える。
 * ============================================================ */
.sp-menu {
  display: none;
}

@media (max-width: 880px) {
  .sp-menu {
    --sp-menu-duration: 0.82s;
    display: block;
    position: fixed;
    inset: 0;
    z-index: 49; /* ヘッダー(.site-header z-index:50)より下、旧バックドロップ(z-index:48)より上 */
    transform: translateX(100%);
    pointer-events: none;
    transition: transform var(--sp-menu-duration) var(--ease-out);
    will-change: transform;
    background:
      radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.7), transparent 40%),
      radial-gradient(circle at 92% 88%, rgba(255, 255, 255, 0.5), transparent 42%),
      linear-gradient(150deg, var(--color-bg) 0%, var(--color-surface) 100%);
  }

  .sp-menu.is-open {
    pointer-events: auto;
    transform: translateX(0);
  }

  .sp-menu__corner {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-gold);
    opacity: 0.9;
    pointer-events: none;
  }
  .sp-menu__corner--tr { top: 16px; right: 16px; border-left: 0; border-bottom: 0; }
  .sp-menu__corner--bl { bottom: 16px; left: 16px; border-right: 0; border-top: 0; }

  .sp-menu__inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: clamp(1.25rem, 3.4vh, 2rem);
    padding: clamp(7.25rem, 15vh, 8.75rem) 8vw max(4.5rem, calc(env(safe-area-inset-bottom, 0px) + 3.5rem));
  }

  /* 副次ナビ：主導線の下に控えめにまとめる */
  .sp-menu__sub {
    order: 2;
    width: min(100%, 25rem);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 0.75rem;
    max-width: none;
  }
  .sp-menu__sub-link {
    position: relative;
    min-width: 0;
    width: auto;
    min-height: 44px;
    text-decoration: none;
    text-align: center;
    color: var(--color-text);
    opacity: 0;
    transform: translateY(10px);
  }
  .sp-menu__sub-en {
    font-family: var(--font-serif-en);
    font-style: italic;
    font-size: clamp(0.86rem, 3vw, 1rem);
    letter-spacing: 0.1em;
  }
  .sp-menu__sub-jp {
    display: block;
    font-family: var(--font-serif-jp);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    color: var(--color-text-mute);
    margin-top: 0.16rem;
  }
  .sp-menu__sub-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 1px;
    background: var(--color-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease-out);
  }
  .sp-menu__sub-link:hover::after,
  .sp-menu__sub-link:focus-visible::after {
    transform: scaleX(1);
  }
  .sp-menu__cta {
    grid-column: 1 / -1;
    justify-self: center;
    min-width: min(100%, 15rem);
    margin-top: 1rem;
    padding: 0.9em 1.5em;
    border: 1px solid var(--color-gold);
  }
  .sp-menu__cta .sp-menu__sub-en {
    font-style: normal;
    font-family: var(--font-serif-jp);
    letter-spacing: 0.18em;
    color: var(--color-gold-strong);
  }
  .sp-menu__cta .sp-menu__sub-jp { display: none; }
  .sp-menu__cta::after { display: none; }

  /* 主要ナビ：SPでは読みやすい横組みに戻し、中央に重心を作る */
  .sp-menu__main {
    order: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 23rem);
    height: auto;
    margin-inline: auto;
  }
  .sp-menu__rule {
    position: absolute;
    top: -1.1rem;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
    transform: scaleY(0);
    transform-origin: center;
  }
  .sp-menu__item,
  .sp-menu__item-trigger {
    width: 100%;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-items: start;
    gap: 1rem;
    overflow: visible;
    text-decoration: none;
    text-align: left;
    color: var(--color-text);
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(201, 169, 97, 0.25);
    min-height: clamp(3.75rem, 8.2vh, 4.25rem);
    padding: 0.55rem 0;
    font: inherit;
    cursor: pointer;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
  }
  .sp-menu__main > .sp-menu__item {
    opacity: 0;
    transform: translateY(12px);
  }
  .sp-menu__item-trigger:focus-visible,
  .sp-menu__item:focus-visible,
  .sp-menu__sub-link:focus-visible,
  .sp-menu__subsub a:focus-visible {
    outline: 1px solid var(--color-gold);
    outline-offset: 0.35rem;
  }
  .sp-menu a:focus,
  .sp-menu button:focus {
    outline: none;
  }
  .sp-menu a:focus-visible,
  .sp-menu button:focus-visible {
    outline: 1px solid var(--color-gold);
    outline-offset: 0.35rem;
  }
  .sp-menu .sp-menu__item:focus-visible,
  .sp-menu .sp-menu__item-trigger:focus-visible {
    outline: none !important;
  }
  .sp-menu__item:focus-visible .sp-menu__en,
  .sp-menu__item-trigger:focus-visible .sp-menu__en {
    color: var(--color-gold-strong);
  }
  .sp-menu__item--has-sub {
    display: block;
    padding: 0;
    border-bottom: 1px solid rgba(201, 169, 97, 0.25);
  }
  .sp-menu__item--has-sub .sp-menu__item-trigger {
    grid-template-columns: 1fr auto auto;
    border-bottom: 0;
  }
  .sp-menu__en {
    font-family: var(--font-serif-en);
    font-style: italic;
    font-size: clamp(1.85rem, 8.6vw, 2.55rem);
    letter-spacing: 0.05em;
    line-height: 1;
    display: inline-block;
    will-change: transform;
  }
  .sp-menu__jp {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--font-serif-jp);
    font-size: clamp(0.62rem, 2.2vw, 0.72rem);
    letter-spacing: 0.16em;
    color: var(--color-text-mute);
    white-space: nowrap;
    margin-top: 0;
  }
  .sp-menu__btn .sp-menu__en::after {
    content: "";
    display: none;
  }
  .sp-menu__item-trigger::after {
    content: "+";
    align-self: center;
    grid-column: 3;
    grid-row: 1;
    font-family: var(--font-serif-en);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--color-gold-strong);
  }
  .sp-menu__item-trigger[aria-expanded="true"]::after {
    content: "-";
  }
  .sp-menu__subsub {
    writing-mode: horizontal-tb;
    display: none;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0.2rem 0 0.85rem;
    margin: 0;
  }
  .sp-menu__subsub.is-open { display: flex; }
  .sp-menu__subsub a {
    font-family: var(--font-serif-en);
    font-style: italic;
    font-size: 0.88rem;
    letter-spacing: 0.16em;
    color: var(--color-text);
    text-decoration: none;
    padding: 0.42rem 0.85rem;
    border: 1px solid rgba(201, 169, 97, 0.35);
  }

  /* 落款「幸」 */
  .sp-menu__seal {
    position: absolute;
    right: 7vw;
    bottom: 7vh;
    width: 48px;
    height: 48px;
    display: none;
    place-items: center;
    font-family: var(--font-serif-jp);
    font-size: 1.4rem;
    color: #fff;
    background: linear-gradient(145deg, #b0463a, #8d2f27);
    box-shadow: 0 6px 16px rgba(141, 47, 39, 0.3);
    border-radius: 6px;
    opacity: 0;
    transform: scale(0.9);
  }

  /* メニュー展開中：ヘッダー地を透過し、ブランド/トグルを暗色に */
  body.is-nav-open .site-header {
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-color: transparent !important;
  }
  body.is-nav-open .site-header__brand { color: var(--color-text); }
  body.is-nav-open .site-header__brand-en { color: var(--color-gold-strong); }
  body.is-nav-open .site-header__toggle {
    color: var(--color-text);
  }
  .sp-menu.is-open .sp-menu__main > .sp-menu__item,
  .sp-menu.is-open .sp-menu__sub-link {
    animation: sp-menu-text-in 0.74s var(--ease-out) both;
  }
  .sp-menu.is-open .sp-menu__main > .sp-menu__item:nth-child(2) { animation-delay: 0.16s; }
  .sp-menu.is-open .sp-menu__main > .sp-menu__item:nth-child(3) { animation-delay: 0.26s; }
  .sp-menu.is-open .sp-menu__main > .sp-menu__item:nth-child(4) { animation-delay: 0.36s; }
  .sp-menu.is-open .sp-menu__main > .sp-menu__item:nth-child(5) { animation-delay: 0.46s; }
  .sp-menu.is-open .sp-menu__sub-link:nth-child(1) { animation-delay: 0.56s; }
  .sp-menu.is-open .sp-menu__sub-link:nth-child(2) { animation-delay: 0.64s; }
  .sp-menu.is-open .sp-menu__sub-link:nth-child(3) { animation-delay: 0.72s; }
  .sp-menu.is-open .sp-menu__sub-link:nth-child(4) { animation-delay: 0.84s; }

  body.is-nav-open .sp-menu__corner--tr {
    display: none;
  }
}

@keyframes sp-menu-text-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 520px) {
  .sp-menu__inner {
    gap: clamp(1rem, 2.6vh, 1.5rem);
    padding: clamp(6.25rem, 13vh, 7.25rem) 6vw max(3.5rem, calc(env(safe-area-inset-bottom, 0px) + 2.5rem));
  }
  .sp-menu__sub {
    gap: 0.68rem 0.55rem;
  }
  .sp-menu__sub-en {
    font-size: 0.88rem;
  }
  .sp-menu__main {
    width: 100%;
  }
  .sp-menu__en {
    font-size: clamp(1.75rem, 8.4vw, 2.35rem);
  }
  .sp-menu__jp {
    font-size: 0.6rem;
  }
  .sp-menu__seal {
    right: 6vw;
    bottom: 6vh;
    width: 42px;
    height: 42px;
    font-size: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 演出を切り、即時表示/非表示へ縮退。 */
  .sp-menu,
  .site-header__toggle,
  .site-header__toggle-line {
    transition: none !important;
  }
  .sp-menu__main > .sp-menu__item,
  .sp-menu__sub-link,
  .sp-menu__en,
  .sp-menu__sub-link,
  .sp-menu__rule,
  .sp-menu__corner {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
 * 営業状況＋お知らせ ティッカー（ヘッダー2段目・フェード切替の一行）
 *
 * 固定ヘッダーの2段目として全ページに常時表示。テキストは自己完結の
 * 淡いピルに載せ、light-kv / dark-kv / solid いずれのヘッダー上でも
 * 視認できるようにする（行全体を中央寄せ）。
 * ============================================================ */
/* .site-header は flex-row（display:flex は style.css 側で指定）。
   flex-wrap で、100%幅のティッカーを2段目へ回り込ませる。 */
.site-header {
  flex-wrap: wrap;
}

.site-header__ticker {
  flex: 0 0 100%;
  width: 100%;
  margin-top: clamp(0.35rem, 0.9vw, 0.6rem);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 1.4em;
  transition: opacity 0.25s var(--ease-out, ease-out), visibility 0.25s var(--ease-out, ease-out);
}

/* ヘッダーのサブメニュー（Seats）が開いている間はティッカーを畳んで衝突を避ける。
   開閉判定は header.js が has-submenu-open クラスで付与（:has() のライブ適用は
   一部エンジンで不安定なため、クラス方式に統一）。 */
.site-header.has-submenu-open .site-header__ticker {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.koura-ticker__line {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  max-width: 100%;
  padding: 0.3em 1em;
  border-radius: 999px;
  /* dark-KV ヘッダー上でも金文字が AA(4.5:1) を満たすよう、ほぼ不透明に。 */
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(42, 39, 35, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px -13px rgba(42, 39, 35, 0.5);
  font-family: var(--font-sans-jp);
  font-size: clamp(0.72rem, 1.5vw, 0.82rem);
  line-height: 1.3;
  letter-spacing: 0.03em;
  color: var(--color-text);
  will-change: opacity;
}

.koura-ticker__text {
  min-width: 0; /* flex item の min-width:auto を解除し、長文で ellipsis を効かせる。 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.koura-ticker__dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-text-mute);
  flex: none;
}

/* 営業中 — 金のドット＋脈動／文字も金へ */
.koura-ticker--open .koura-ticker__dot {
  background: var(--color-gold-strong);
  box-shadow: 0 0 0 0.26em rgba(176, 142, 63, 0.16);
  animation: koura-ticker-pulse 2.6s var(--ease-out, ease-out) infinite;
}

.koura-ticker--open .koura-ticker__text {
  color: var(--color-gold-text);
  font-weight: 500;
}

/* 開店前 — 金のドット（脈動なし） */
.koura-ticker--before .koura-ticker__dot {
  background: var(--color-gold);
}

/* 調整中（公開前） — 控えめな金のドット（脈動なし）。 */
.koura-ticker--adjusting .koura-ticker__dot {
  background: var(--color-gold);
}

@keyframes koura-ticker-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(176, 142, 63, 0.32); }
  70%  { box-shadow: 0 0 0 0.7em rgba(176, 142, 63, 0); }
  100% { box-shadow: 0 0 0 0 rgba(176, 142, 63, 0); }
}

/* SPメニュー展開中はティッカーを隠してヘッダーをすっきりさせる。 */
body.is-nav-open .site-header__ticker {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 768px) {
  .site-header__ticker {
    margin-top: 0.3rem;
  }
  .koura-ticker__line {
    padding: 0.28em 0.85em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .koura-ticker--open .koura-ticker__dot {
    animation: none;
  }
  .koura-ticker__line {
    transition: none !important;
  }
  /* サブメニュー開閉時のティッカー退避フェードも無効化。 */
  .site-header__ticker {
    transition: none;
  }
}