/*
 * HOTEL ELCIENT BRAND — Master Stylesheet
 *
 *  1. Design Tokens (:root)
 *  2. Global Resets
 *  3. Lenis Smooth Scroll
 *  4. Common Utilities (button, sec-heading)
 *  5. TopBar (Bottom-floating dock)
 *  6. Sidebar (Drawer)
 *  7. Layout — Hero / Sections
 *  8. Components — Hotel cards / Concept / About
 *  9. Footer
 * 10. Booking Modal
 */

/* ============================================
   1. DESIGN TOKENS — 京都/大阪と完全互換
   ============================================ */
:root {
  /* Brand Colors (Guideline BS-3 厳密値) */
  /* Pattern A/B 公式4色グラデ: orange → light → deep → white */
  --elcient-orange:       #F58345;  /* Pantone 3588 C — メイン */
  --elcient-orange-light: #FAA84A;  /* グラデ2色目 */
  --elcient-orange-deep:  #FDBA4D;  /* グラデ3色目 */
  --elcient-navy:         #00438E;  /* Pantone 288 C — サブ */
  --elcient-gold:         #B49A42;  /* Pantone 7754 C — サブ */
  --elcient-black:        #150201;  /* Process Black C */
  --elcient-white:        #FFFFFF;
  /* deprecated alias (旧名 — 削除予定) */
  --elcient-purple: var(--elcient-navy);
  --elcient-cream: #faf7f2;        /* セクション切替用クリーム (京都準拠) */
  --elcient-salmon: #fdf0eb;       /* ベース・主張色サーモン (京都準拠) */

  /* Site Colors — body=サーモン / セクション=クリーム の2色運用 */
  --wf-bg: var(--elcient-salmon);             /* default = TOP body と同じサーモン */
  --wf-placeholder: var(--elcient-cream, #faf7f2); /* image loading bg: brand cream（旧 #E8E8E8 灰色） */
  --wf-text: #150201;
  --wf-text-mid: #3D2B2A;
  --wf-text-light: #8A7D78;
  --wf-border: #E0DBD8;

  /* Layout */
  --nav-width: 0px;
  --site-gutter: 60px;
  --header-height: 80px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 9999px;

  /* Typography (BS-8 準拠) */
  --font-ja: "游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif;
  --font-ja-serif: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif;
  --font-en: "Jost", sans-serif;

  /* Type fixed */
  --text-xxs: 10px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 22px;

  /* Type fluid */
  --text-fluid-sm:   clamp(12px, 1.6vw, 14px);
  --text-fluid-base: clamp(14px, 2.2vw, 16px);
  --text-fluid-lg:   clamp(16px, 3vw, 22px);
  --text-fluid-xl:   clamp(22px, 4vw, 32px);
  --text-fluid-2xl:  clamp(32px, 5vw, 56px);
  --text-display:    clamp(57.6px, 5vw, 96px);

  /* ── Semantic Typography (大阪・京都ホテル tokens.md v5 完全準拠) ── */
  /* BS-8: 見出しのみ明朝、小見出し以下はゴシック */
  --font-display: var(--font-ja-serif);   /* 游明朝 — 見出し */
  --font-body:    var(--font-ja);         /* 游ゴシック — 本文・小見出し */

  --text-legal:      var(--text-xxs);    /* 10px 規約・脚注 */
  --text-caption:    var(--text-xs);     /* 12px キャプション・日付 */
  --text-button:     var(--text-sm);     /* 14px ボタン */
  --text-nav:        var(--text-sm);     /* 14px ナビ */
  --text-form-label: var(--text-sm);     /* 14px フォームラベル */
  --text-body:       var(--text-fluid-base);   /* 14-16 本文 */
  --text-lead:       var(--text-fluid-lg);     /* 16-22 リード */
  --text-subheading: var(--text-fluid-xl);     /* 22-32 小見出し（ゴシック） */
  --text-heading:    var(--text-fluid-2xl);    /* 32-56 セクション見出し（明朝） */
  --text-hero:       var(--text-display);      /* 57.6-96 ヒーロー（明朝） */

  /* ── Semantic Spacing ── */
  --space-vertical:   var(--space-4);
  --space-inline:     var(--space-3);
  --space-card-pad:   var(--space-6);
  --space-form-row:   var(--space-5);
  --space-section-x:  var(--space-fluid-gutter);
  --space-section-y:  var(--space-fluid-section);

  /* ── Semantic Radius / Duration / Easing ── */
  --radius-card:    var(--radius-md);
  --radius-button:  var(--radius-pill);
  --radius-input:   var(--radius-sm);

  --duration-hover: var(--dur-fast, 0.2s);
  --duration-modal: var(--dur-base, 0.3s);
  --duration-page:  var(--dur-slow, 0.6s);

  --easing-default: cubic-bezier(0.22, 1, 0.36, 1);
  --easing-snap:    cubic-bezier(0.33, 0, 0.2, 1);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-fluid-section: clamp(80px, 12vw, 160px);
  --space-fluid-gutter:  clamp(16px, 4vw, 32px);

  /* Border / Ring */
  --border-thin: 1px;
  --border-base: 2px;
  --ring-width: 3px;
  --ring-color: var(--elcient-orange);

  /* Brand assets */
  --logo-min-width: 160px;
  --gradient-brand-d: linear-gradient(135deg, #f58345, #faa84a, #fdba4d, #ffffff);
  --gradient-brand-soft: linear-gradient(135deg, rgba(245,131,69,0.06), rgba(253,186,77,0.03) 60%, transparent);

  /* Z-Index */
  --z-hero-copy: 20;
  --z-footer: 100;
  --z-top-bar: 300;
  --z-modal: 1000;

  /* Easing */
  --easing-main: cubic-bezier(0.22, 1, 0.36, 1);
  --easing-snappy: cubic-bezier(0.33, 0, 0.2, 1);

  /* Duration */
  --dur-fast: 0.2s;
  --dur-base: 0.3s;
  --dur-slow: 0.6s;

  /* Container */
  --container-narrow: 880px;
  --container-base: 1200px;
  --container-wide: 1440px;

  /* Line-height / Letter-spacing */
  --lh-tight: 1.3;
  --lh-base: 1.8;
  --lh-loose: 2.0;
  --ls-tight: 0;
  --ls-base: 0.04em;
  --ls-wide: 0.16em;

  /* Alpha */
  --alpha-5: 0.05;
  --alpha-10: 0.1;
  --alpha-20: 0.2;
  --alpha-40: 0.4;
  --alpha-60: 0.6;
  --alpha-80: 0.8;
}

/* ============================================
   2. GLOBAL RESETS
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--wf-bg);
  color: var(--wf-text);
}
/* ページ単位のベース色切替 (BaseLayout の data-base 属性で指定) */
body[data-base="salmon"] { --wf-bg: var(--elcient-salmon); }
body[data-base="cream"]  { --wf-bg: var(--elcient-cream); }
html, body {
  font-family: var(--font-ja);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
figure { padding: 0; }
hr { border: 0; border-top: 1px solid var(--wf-border); margin: var(--space-8) 0; }

/* Focus ring */
:focus-visible {
  outline: var(--ring-width) solid var(--ring-color);
  outline-offset: 2px;
}

/* ============================================
   3. LENIS SMOOTH SCROLL
   ============================================ */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* ============================================
   4. COMMON UTILITIES
   ============================================ */

/* Container helper */
.container {
  width: 100%;
  max-width: var(--container-base);
  padding-inline: var(--space-fluid-gutter);
  margin-inline: auto;
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

/* Section base — 京都パターン: 各セクションは自分の --wf-bg を持ち、
   .section--rounded-top の R 噛み込みも --wf-bg を参照する */
.section {
  position: relative;
  padding-block: var(--space-fluid-section);
  background: var(--wf-bg);
}
/* セクション色クラス: --wf-bg を上書きするだけで R 切り抜きも自動追従 */
.section--salmon { --wf-bg: var(--elcient-salmon); }
.section--cream  { --wf-bg: var(--elcient-cream); }
.section--white  { --wf-bg: var(--elcient-white); }

/* R-cutout pattern: 隣接セクションが上から「角Rで噛み込む」演出
   ホテルサイトの片側R思想に合わせ、左上のみ大きめのR。 */
.section--rounded-top {
  border-top-left-radius: clamp(40px, 6vw, 100px);
  border-top-right-radius: clamp(40px, 6vw, 100px);
  margin-top: calc(-1 * clamp(40px, 6vw, 100px));
  z-index: 2;
}
/* セクション上端を縁取る描き線。京都サイトの sec-heading__line と完全一致仕様
   (色/太さ/アニメーション)。両サイドR対応のため逆U字パスへ拡張。
   SVGとパスは main.js が動的に挿入 (.section-line) */
.section-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 120px;
  width: 100%;
  pointer-events: none;
  z-index: 4;
  overflow: visible;
}
.section-line path {
  fill: none;
  stroke: var(--elcient-black);
  stroke-width: 2;
  stroke-dasharray: var(--line-length);
  stroke-dashoffset: var(--line-length);
  transition: stroke-dashoffset 2.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
section.line-drawn .section-line path {
  stroke-dashoffset: 0;
}
@media (max-width: 767px) {
  .section-line { height: 66px; }
  .section-line path { transition: stroke-dashoffset 2s cubic-bezier(0.25, 0.1, 0.25, 1); }
}
/* 1段下のセクションが浮き上がる時のシャドウ（弱め） */
.section--rounded-top.section--shadow {
  box-shadow: 0 -8px 24px rgba(21, 2, 1, 0.04);
}

/* Section heading — center aligned per ElCient rule */
.sec-heading {
  text-align: center;
  margin-bottom: var(--space-16);
  position: relative;
}
/* 英語見出しは非表示。日本語タイトルのみで運用 */
.sec-heading__en { display: none; }
.sec-heading__ja {
  display: block;
  margin-top: 0;
  font-family: var(--font-ja-serif);
  font-size: clamp(28px, 4.2vw, 56px);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height:var(--lh-tight);
  color: var(--elcient-black);
}
/* 縦の細線 — タイポの下に伸びる装飾 */
.sec-heading__line {
  display: block;
  width: 1px;
  height: 56px;
  margin: var(--space-8) auto 0;
  background: linear-gradient(180deg, var(--elcient-orange), transparent);
}

/* ============================================
   下層ページ（baseColor="cream"）の装飾調整
   - セクション角Rは「左上のみ」（ホテルサイト思想に合わせる）
   - 上部描き線（section-line）は非表示
   - 見出し縦線（sec-heading__line）は非表示
   ============================================ */
body[data-base="cream"] .section--rounded-top {
  border-top-right-radius: 0;
  /* border-top-left-radius / margin-top / z-index は base ルールを継承 */
}
body[data-base="cream"] .section-line { display: none; }
body[data-base="cream"] .sec-heading__line { display: none; }

/* bp-hero の直後はフラット（ホテルサイト準拠：ヒーロー直下にRをつけない） */
.bp-hero + .section--rounded-top,
.bp-hero + .section--rounded-top.section--cream,
.bp-hero + .section--rounded-top.section--salmon {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
  z-index: auto;
}
.bp-hero + .section--rounded-top > .section-line { display: none; }

/* CTA buttons */
.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-width: 200px;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: background var(--dur-base) var(--easing-main), color var(--dur-base) var(--easing-main), transform var(--dur-base) var(--easing-main);
}
.c-button--primary {
  background: var(--elcient-orange);
  color: var(--elcient-white);
}
.c-button--primary:hover {
  background: var(--elcient-orange-light);
  transform: translateY(-2px);
}
.c-button--ghost {
  background: transparent;
  color: var(--elcient-black);
  border: var(--border-thin) solid var(--elcient-black);
}
.c-button--ghost:hover {
  background: var(--elcient-black);
  color: var(--elcient-white);
}
.c-button__arrow {
  display: inline-block;
  width: 16px;
  height: 16px;
}

/* Inline link with underline + arrow */
.c-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-en);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-wide);
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-base) var(--easing-main), opacity var(--dur-base) var(--easing-main);
}
.c-link:hover { color: var(--elcient-orange); }

/* ============================================
   5. TOPBAR + DRAWER — ホテル版1:1コピー
   （bottom floating dock + Booking modal + h-menu + u-drawer + 左サイドバー）
   ============================================ */
.top-bar {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  z-index: var(--z-top-bar);
  background: transparent;
  transition: transform 1s cubic-bezier(0.87, 0, 0.13, 1);
}
.top-bar__dock {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  padding: 10px 14px 10px 24px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50px;
  box-shadow: 0 20px 40px rgba(21, 2, 1, 0.08);
  transition: padding-top 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.top-bar.is-hidden { transform: translateX(-50%) translateY(0); }
.top-bar__logo { margin: 0; flex-shrink: 0; }
.top-bar__logo a { display: block; line-height: 0; }
.top-bar__logo img { height: 32px; width: auto; display: block; }
img.top-bar__logo-wordmark { display: none; }
img.top-bar__logo-full { display: none; }
img.top-bar__logo-emark { display: none; }

.top-bar__nav { display: flex; align-items: center; gap: 24px; }
.top-bar__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--elcient-black);
  text-decoration: none;
  padding: 4px 2px;
  white-space: nowrap;
}
.top-bar__nav-clip {
  display: inline-block;
  overflow: hidden;
  font-size: var(--text-sm);
  height: 1em;
  line-height: 1;
}
.top-bar__nav-roll {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: translate 0.45s cubic-bezier(0.5, 0, 0.24, 1);
  will-change: translate;
}
.top-bar__nav a:hover .top-bar__nav-roll,
.top-bar__nav a.is-active .top-bar__nav-roll { translate: 0 -1em; }
.top-bar__nav-en,
.top-bar__nav-ja {
  display: block;
  height: 1em;
  line-height: 1;
  white-space: nowrap;
}
.top-bar__nav-en {
  font-family: var(--font-en);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.top-bar__nav-ja {
  font-family: var(--font-ja);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
  color: var(--elcient-orange);
}
.top-bar__nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--elcient-orange);
  transition: width 0.45s var(--easing-main), left 0.45s var(--easing-main);
}
.top-bar__nav a:hover::after,
.top-bar__nav a.is-active::after { width: 100%; left: 0; }

/* CTA pill */
.top-bar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  box-sizing: border-box;
  flex-shrink: 0;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--elcient-black);
  background: transparent;
  border: 1px solid var(--elcient-black);
  border-radius: 50px;
  padding: 0 24px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: background 0.3s ease, color 0.3s ease;
}
.top-bar__cta-clip { display: inline-block; overflow: hidden; height: 1em; line-height: 1; font-size: 13px; }
.top-bar__cta-roll {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: translate 0.45s cubic-bezier(0.5, 0, 0.24, 1);
  will-change: translate;
}
.top-bar__cta-default,
.top-bar__cta-hover { display: block; height: 1em; line-height: 1; white-space: nowrap; }
.top-bar__cta-default { font-family: "Jost", sans-serif; letter-spacing: 0.14em; }
.top-bar__cta-hover { font-family: var(--font-ja); letter-spacing: 0.08em; }
.top-bar__cta:hover .top-bar__cta-roll { translate: 0 -1em; }
.top-bar__cta:hover {
  background: var(--elcient-orange);
  border-color: var(--elcient-orange);
  color: #fff;
}

/* LangRail — 左サイド縦レール（ホテルサイト統一） */
.lang-switch {
  position: absolute;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--elcient-white);
  text-shadow: 0 1px 8px rgba(21, 2, 1, 0.35);
  pointer-events: auto;
}
.lang-switch a {
  color: inherit;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.25s ease;
  padding: 2px 0;
}
.lang-switch a.is-active {
  opacity: 1;
  border-bottom: 1px solid currentColor;
}
@media (hover: hover) and (pointer: fine) {
  .lang-switch a:hover { opacity: 1; }
}
/* Option C: 左サイド縦レール（フルネーム） */
.lang-switch--c {
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 14px;
  padding: 16px 14px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 30px rgba(21, 2, 1, 0.18);
  color: var(--elcient-black);
  text-shadow: none;
  font-family: var(--font-ja);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
}
.lang-switch--c .lang-switch__icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  opacity: 0.85;
  margin-bottom: 2px;
}
.lang-switch--c .lang-switch__icon svg { width: 100%; height: 100%; }
.lang-switch--c a {
  opacity: 0.8;
  padding: 0;
  line-height: 1.2;
  white-space: nowrap;
  font-weight: 500;
}
.lang-switch--c a.is-active {
  opacity: 1;
  border-bottom: none;
  color: var(--elcient-orange);
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .lang-switch--c a:hover { opacity: 1; }
}
@media (max-width: 767px) {
  .lang-switch--c { display: none; }
}

/* Lang switcher (TopBar 内 SP 用 globe) — ホテルサイト統一: PC 非表示 / SP のみ */
.top-bar__lang { display: none; }
@media (max-width: 767px) {
  .top-bar__lang {
    display: block;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
  }
  .top-bar__lang-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--elcient-black);
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
  }
  .top-bar__lang-trigger svg { width: 24px; height: 24px; opacity: 0.85; }
  .top-bar__lang-trigger[aria-expanded="true"] {
    background: rgba(21, 2, 1, 0.06);
  }
  .top-bar__lang-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: -6px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    min-width: 86px;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(21, 2, 1, 0.08);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(21, 2, 1, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 10;
    display: flex;
    flex-direction: column;
  }
  .top-bar__lang.is-open .top-bar__lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .top-bar__lang-menu li { margin: 0; }
  .top-bar__lang-menu a {
    display: block;
    padding: 8px 16px;
    color: var(--elcient-black);
    text-decoration: none;
    font-family: var(--font-en);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    opacity: 0.6;
    text-align: center;
    transition: opacity 0.2s ease, background 0.2s ease;
  }
  .top-bar__lang-menu a.is-active {
    opacity: 1;
    color: var(--elcient-orange);
    font-weight: 700;
  }
  .top-bar__lang-menu a:active { background: rgba(21, 2, 1, 0.04); }
}

/* Hamburger trigger */
.top-bar__menu-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.top-bar__menu-icon { display: flex; flex-direction: column; gap: 5px; width: 20px; }
.top-bar__menu-icon span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--elcient-black);
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}
.top-bar__menu-trigger:hover .top-bar__menu-icon span { background: var(--elcient-orange); }

/* ── Booking Modal ── */
.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.booking-modal.is-open { opacity: 1; visibility: visible; }
.booking-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(21, 2, 1, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.booking-modal__card {
  position: relative;
  background: var(--wf-bg);
  border-radius: var(--radius-lg);
  padding: 48px 32px 32px;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 24px 64px rgba(21, 2, 1, 0.25);
  transform: translateY(16px);
  transition: transform 0.4s var(--easing-main);
}
.booking-modal__brand {
  display: flex;
  justify-content: center;
  margin: 0 0 20px;
}
.booking-modal__brand img {
  display: block;
  width: auto;
  height: auto;
  max-width: 180px;
  max-height: 36px;
  object-fit: contain;
}
.booking-modal.is-open .booking-modal__card { transform: translateY(0); }
.booking-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--wf-text-light);
  transition: color 0.3s ease;
}
.booking-modal__close:hover { color: var(--elcient-black); }
.booking-modal__title {
  font-family: var(--font-ja-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--wf-text);
  text-align: center;
  margin: 0 0 28px;
}
/* 「対象施設」スタイル — 写真カード縦並び */
.booking-modal__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.booking-modal__card-link {
  display: block;
  text-decoration: none;
  color: var(--elcient-black);
}
.booking-modal__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 12px;
  margin: 0 0 16px;
  background: var(--elcient-cream);
}
.booking-modal__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.booking-modal__card-link:hover .booking-modal__photo img {
  transform: scale(1.04);
}
.booking-modal__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(138, 125, 120, 0.2);
  margin-bottom: 12px;
}
.booking-modal__num {
  font-family: var(--font-en);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--elcient-orange);
  grid-row: 1 / 3;
  align-self: center;
  line-height: 1;
}
.booking-modal__en {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--elcient-orange);
}
.booking-modal__ja {
  font-family: var(--font-ja-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--elcient-black);
}
.booking-modal__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ja);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--elcient-orange);
  transition: gap 0.3s ease;
}
.booking-modal__card-link:hover .booking-modal__cta { gap: 12px; }
.booking-modal__cta span { transition: transform 0.3s ease; }
.booking-modal__card-link:hover .booking-modal__cta span { transform: translateX(2px); }

/* SP: モーダル全体を縮小 + スクロール許容（実機で2件目が見切れる対策） */
@media (max-width: 767px) {
  .booking-modal__card {
    padding: 28px 18px 18px;
    width: calc(100% - 24px);
    max-width: 360px;
    max-height: 88svh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .booking-modal__close {
    top: 8px;
    right: 8px;
    padding: 6px;
  }
  .booking-modal__brand {
    margin: 0 0 12px;
  }
  .booking-modal__brand img {
    max-width: 132px;
    max-height: 26px;
  }
  .booking-modal__title {
    font-size: 13px;
    letter-spacing: 0.08em;
    margin: 0 0 16px;
  }
  .booking-modal__list {
    gap: 14px;
  }
  .booking-modal__photo {
    aspect-ratio: 16 / 9;
    margin: 0 0 10px;
    border-radius: 10px;
  }
  .booking-modal__meta {
    column-gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 8px;
  }
  .booking-modal__num {
    font-size: 22px;
  }
  .booking-modal__en {
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .booking-modal__ja {
    font-size: 12px;
  }
  .booking-modal__cta {
    font-size: 12px;
  }
}

/* ── Top bar mobile ── */
@media (max-width: 767px) {
  :root { --sp-header-h: 80px; }
  .top-bar {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    transform: none;
    padding-top: env(safe-area-inset-top, 0px);
    /* SP: ホテルサイトと同じクリーム背景に統一 */
    background: var(--elcient-cream);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(21, 2, 1, 0.06);
  }
  .top-bar.is-hidden { transform: none; }
  .top-bar__dock {
    position: relative;
    width: 100%;
    padding: 12px 16px;
    gap: 12px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    height: var(--sp-header-h);
  }
  .top-bar__logo {
    position: absolute;
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-right: 0;
  }
  img.top-bar__logo-mark { display: none; }
  img.top-bar__logo-wordmark { display: none; }
  img.top-bar__logo-emark { display: none; }
  img.top-bar__logo-full { display: block; height: 44px; width: auto; }
  .top-bar__nav { display: none; }
  .top-bar__cta { display: none; }
  .top-bar__menu-trigger {
    position: absolute;
    right: 16px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
  }
  .top-bar__menu-icon { width: 26px; gap: 6px; }
  .top-bar__menu-icon span { height: 2px; }
  body { padding-top: calc(var(--sp-header-h) + env(safe-area-inset-top, 0px)); }
}

/* ── h-menu close button (PCのみ表示) ── */
.h-menu{position:fixed;bottom:36px;right:32px;z-index:304;width:48px;height:48px;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;background:none;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s ease}
html.menu-is-open .h-menu{opacity:1;pointer-events:auto;transition-delay:.9s}
.h-menu .lines{display:flex;flex-direction:column;gap:5px;width:22px}
.h-menu .lines .line{display:block;width:100%;height:1.5px;background:var(--elcient-black);transition:transform .3s ease,opacity .3s ease}
html.menu-is-open .h-menu .lines .line:first-child{transform:translateY(6.5px) rotate(45deg)}
html.menu-is-open .h-menu .lines .line:nth-child(2){opacity:0}
html.menu-is-open .h-menu .lines .line:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (hover:hover){.h-menu:hover{opacity:0.6}}
@media only screen and (max-width:767px){.h-menu{right:8px;width:48px}}

/* ── Menu overlay (CSS-only animation, GSAP無し版) ── */
.u-drawer{
  position:fixed;
  z-index:301;
  inset:0;
  width:100%;
  height:100vh;
  height:100svh;
  background-color:var(--elcient-cream);
  display:block;
  clip-path:inset(100% 0% 0% 0%);
  -webkit-clip-path:inset(100% 0% 0% 0%);
  pointer-events:none;
  visibility:hidden;
  transition:clip-path 1.1s cubic-bezier(0.83,0,0.17,1),
             -webkit-clip-path 1.1s cubic-bezier(0.83,0,0.17,1),
             visibility 0s linear 1.1s;
}
html.menu-is-open .u-drawer{
  clip-path:inset(0% 0% 0% 0%);
  -webkit-clip-path:inset(0% 0% 0% 0%);
  pointer-events:auto;
  visibility:visible;
  transition:clip-path 1.1s cubic-bezier(0.83,0,0.17,1),
             -webkit-clip-path 1.1s cubic-bezier(0.83,0,0.17,1),
             visibility 0s linear 0s;
}
.u-drawer_inner{scrollbar-width:none;height:100%;width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;position:relative;flex-direction:row-reverse;overflow-y:hidden}
.u-drawer_inner::-webkit-scrollbar{display:none}
@media only screen and (orientation:portrait){.u-drawer_inner{display:flex;flex-direction:column-reverse;overflow-y:hidden}}
.u-drawer_fadeIn{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.55s ease, transform 0.55s ease;
}
html.menu-is-open .u-drawer_fadeIn{
  opacity:1;
  transform:translateY(0);
  transition-delay:0.55s;
}
html.menu-is-open .u-drawer_fadeIn:nth-child(2){transition-delay:0.6s}
html.menu-is-open .u-drawer_fadeIn:nth-child(3){transition-delay:0.65s}
html.menu-is-open .u-drawer_fadeIn:nth-child(4){transition-delay:0.7s}
html.menu-is-open .u-drawer_fadeIn:nth-child(5){transition-delay:0.75s}
html.menu-is-open body{overflow:hidden}
.u-drawer_img{width:50%;position:relative;height:100%;overflow:hidden;transform:translate3d(0,0,0)}
@media only screen and (orientation:portrait){.u-drawer_img{width:100%;height:40svh;flex-shrink:0}}
/* ドロワー画像エリア — 大阪梅田ラウンジ */
.u-drawer_bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background: url('/images/drawer-lounge-768w.webp') center/cover no-repeat;
}
@media (min-width: 1280px){
  .u-drawer_bg{
    background-image: url('/images/drawer-lounge.webp');
  }
}
@media (max-width: 767px){
  .u-drawer_bg{
    background-image: url('/images/drawer-lounge-480w.webp');
  }
}
.u-drawer_txt{width:50%;height:100%;display:flex;justify-content:center;align-items:center}
@media only screen and (orientation:portrait){.u-drawer_txt{width:100%;flex:1;display:flex;justify-content:center;align-items:flex-start;padding:4vw 0 calc(env(safe-area-inset-bottom,0px) + 12px);min-height:0}}
.u-drawer_txt_inner{text-align:left;width:100%;max-width:540px;margin:0 auto;padding:0 32px;box-sizing:border-box}
@media only screen and (orientation:portrait){.u-drawer_txt_inner{max-width:none;padding:0 6vw;text-align:center}}
.u-drawer_brand{display:flex;justify-content:center;align-items:center;margin:0 0 36px;width:100%}
.u-drawer_brand img{display:block;width:auto;height:auto;max-width:240px;max-height:96px;object-fit:contain}
@media only screen and (orientation:portrait){.u-drawer_brand{display:none}}
.u-drawer_nav{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 56px;width:100%}
.u-drawer_nav li{line-height:1}
@media only screen and (orientation:portrait){.u-drawer_nav{gap:2px 16px;max-width:none;margin:0;text-align:left}}
.u-drawer_nav li a{display:inline-flex;align-items:baseline;gap:8px;padding:16px 0 14px;font-family:var(--font-en);font-size:26px;letter-spacing:0.06em;font-weight:700;text-transform:uppercase;color:var(--elcient-black);text-decoration:none;position:relative;transition:color 0.35s ease;border-bottom:1px solid rgba(20,18,16,0.08)}
.u-drawer_nav li a .nav-ja{font-family:var(--font-ja);font-size:var(--text-sm);letter-spacing:0.04em;font-weight:400;color:var(--wf-text-light);white-space:nowrap;transition:color 0.35s ease}
.u-drawer_nav li a::after{content:'';position:absolute;left:0;bottom:-1px;width:0;height:1.5px;background:var(--elcient-orange);transition:width 0.5s cubic-bezier(0.22,1,0.36,1)}
@media screen and (max-height:800px){.u-drawer_nav li a{font-size:2.5vh;padding:1.7vh 0 1.4vh}}
@media only screen and (orientation:portrait){.u-drawer_nav li a{font-size:4vw;padding:8px 0 6px}}
@media only screen and (orientation:portrait){.u-drawer_nav li a .nav-ja{font-size:2.8vw}}
@media (hover:hover){.u-drawer_nav li a:hover{color:var(--elcient-orange)}.u-drawer_nav li a:hover .nav-ja{color:var(--elcient-orange)}.u-drawer_nav li a:hover::after{width:100%}}
.u-drawer_nav-clip{display:inline-block;overflow:hidden;height:1em;line-height:1;vertical-align:bottom}
.u-drawer_nav-roll{display:flex;flex-direction:column;transition:translate 0.5s cubic-bezier(0.5,0,0.24,1);will-change:translate}
.u-drawer_nav-en{display:flex;align-items:center;height:1em;line-height:1;white-space:nowrap}
.u-drawer_nav li a .u-drawer_nav-roll > .nav-ja{display:flex;align-items:center;height:1em;line-height:1;font-family:var(--font-ja);font-size:1em;font-weight:700;letter-spacing:0.08em;color:inherit}
@media (hover:hover){.u-drawer_nav li a:hover .u-drawer_nav-roll{translate:0 -1em}}
@media only screen and (orientation:portrait){
  .u-drawer_nav-clip,.u-drawer_nav-roll{display:contents}
  .u-drawer_nav-en{display:inline;height:auto;line-height:inherit}
  .u-drawer_nav li a .u-drawer_nav-roll > .nav-ja{display:inline;height:auto;line-height:inherit}
  .u-drawer_nav li a{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
  .u-drawer_nav li a .nav-ja,
  .u-drawer_nav li a .u-drawer_nav-roll > .nav-ja{
    font-size:2.2vw;
    font-weight:400;
    color:var(--wf-text-light);
    letter-spacing:0.04em;
  }
}
.u-drawer_footer{display:flex;align-items:center;justify-content:center;gap:32px;padding-top:28px}
@media only screen and (orientation:portrait){.u-drawer_footer{flex-direction:column-reverse;padding-top:2vw;gap:10px}}
.u-drawer_linkArea{padding-top:44px;display:flex;flex-direction:column;align-items:center;gap:16px}
@media only screen and (orientation:portrait){.u-drawer_linkArea{padding-top:4vw;gap:10px}}
.u-drawer_linkArea .rp-cta-btn__brand{display:none}
.u-drawer_linkArea .rp-cta-btn__text{position:relative;border-bottom:none;padding-bottom:5px}
.u-drawer_linkArea .rp-cta-btn:hover .rp-cta-btn__text{border-bottom:none}
.u-drawer_linkArea .rp-cta-btn__text::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:rgba(20,18,16,0.3);transition:width 0.55s cubic-bezier(0.22,1,0.36,1),background-color 0.5s ease}
.u-drawer_linkArea .rp-cta-btn:hover .rp-cta-btn__text::after{width:calc(100% + 16px);background:var(--elcient-orange)}
.u-drawer_linkArea .rp-cta-btn__arrow{width:58px;height:58px}
.u-drawer_linkArea .rp-cta-btn__arrow svg{width:15px;height:14px}
.u-drawer_linkArea .rp-cta-btn__ja{font-size:1.1rem}
.u-drawer_linkArea .rp-cta-btn__en{font-size:0.85rem;letter-spacing:0.18em}
@media only screen and (orientation:portrait){.u-drawer_linkArea .rp-cta-btn__arrow{width:40px;height:40px;margin-left:12px;flex-shrink:0}
.u-drawer_linkArea .rp-cta-btn__arrow svg{width:11px;height:10px}
.u-drawer_linkArea .rp-cta-btn__ja{font-size:0.95rem}
.u-drawer_linkArea .rp-cta-btn__en{font-size:0.72rem}
.u-drawer_linkArea .rp-cta-btn{position:relative;gap:0}
.u-drawer_linkArea .rp-cta-btn:hover{transform:translateX(2px)}}
.u-drawer_contact{text-align:center;color:var(--wf-text-light);font-family:var(--font-ja);font-size:var(--text-xs);line-height:1.6}
.u-drawer_contact a{color:var(--elcient-black);text-decoration:none}
.u-drawer_contact .tel{font-family:var(--font-en);font-size:20px;letter-spacing:0.06em;font-weight:400;display:block}
@media (max-width: 767px) {
  html.menu-is-open .top-bar{z-index:303}
  html.menu-is-open .top-bar__menu-icon span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  html.menu-is-open .top-bar__menu-icon span:nth-child(2){opacity:0}
  html.menu-is-open .top-bar__menu-icon span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .h-menu{display:none}
}
@media (min-width: 768px) {
  html.menu-is-open .top-bar{
    transform:translateX(-50%) translateY(calc(100% + 40px));
    pointer-events:none;
  }
  .h-menu{left:75%;right:auto;bottom:40px;transform:translateX(-50%)}
}
html.menu-is-open body>header{transition:filter .3s ease,opacity .3s ease;filter:blur(10px);opacity:.3;pointer-events:none}

/* ── Left sidebar nav (display:none をベースにし、必要時のみ表示) ── */
body > header { display: none; }
body > header .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 24px 0;
  position: relative;
}
body > header .inner .brandmark {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--nav-width);
  height: var(--header-height, 80px);
  z-index: var(--z-brandmark, 200);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 4px;
}
body > header .inner .brandmark img { width: 36px; height: auto; }
body > header .inner nav { display: none; }
body > header .inner nav .menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
}
body > header .inner nav .menu > li > a {
  font-weight: 500;
  font-feature-settings: "palt";
  letter-spacing: 0.12em;
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  font-family: var(--font-en);
  font-size: var(--text-xxs);
  text-transform: uppercase;
  color: var(--wf-text);
  transition: color 0.2s ease;
  writing-mode: vertical-rl;
}
@media (hover: hover) and (pointer: fine) {
  body > header .inner nav .menu > li > a:hover { color: var(--elcient-orange); }
}
body > header .inner #menu-btn { display: none; }
body > header.scroll,
body > header.fixed { position: fixed; top: 0; left: 0; opacity: 1; }

/* ── rp-cta-btn (drawer内CTAで使用) ── */
.rp-cta-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.55s var(--easing-main);
}
.rp-cta-btn:hover { transform: translateX(2px); }
.rp-cta-btn__brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 26px;
  padding-right: 14px;
  border-right: 1px solid rgba(20, 18, 16, 0.18);
  box-sizing: border-box;
}
.rp-cta-btn__brand img { width: 86px; height: 26px; display: block; object-fit: contain; user-select: none; }
.rp-cta-btn__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 0;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(20, 18, 16, 0.45);
  transition: border-color 0.5s ease;
}
.rp-cta-btn:hover .rp-cta-btn__text { border-bottom-color: var(--elcient-orange); }
.rp-cta-btn__en {
  font-family: var(--font-en);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--elcient-orange);
  line-height: 1;
}
.rp-cta-btn__ja {
  font-family: var(--font-ja);
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  color: #1a1714;
  line-height: 1.2;
  white-space: nowrap;
}
.rp-cta-btn__arrow {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(20, 18, 16, 0.55);
  background: transparent;
  overflow: hidden;
  transition: border-color 0.5s ease, background 0.55s var(--easing-main), transform 0.55s var(--easing-main);
}
.rp-cta-btn__arrow svg {
  width: 14px;
  height: 13px;
  fill: #1a1714;
  position: relative;
  z-index: 2;
  transition: transform 0.55s var(--easing-main), fill 0.5s ease;
}
.rp-cta-btn__arrow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--elcient-orange);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.65s var(--easing-main);
  z-index: 1;
}
.rp-cta-btn:hover .rp-cta-btn__arrow {
  border-color: var(--elcient-orange);
  background: transparent;
  transform: scale(1.06);
}
.rp-cta-btn:hover .rp-cta-btn__arrow::before { transform: scale(1); }
.rp-cta-btn:hover .rp-cta-btn__arrow svg { transform: translateX(3px); fill: #fff; }

/* ============================================
   7. HERO + COMMON SECTIONS
   ============================================ */
/* Brand hero — 共通基本（CONCEPT/NEWS/MEMBERSHIP等の下層も含む）
   雰囲気は大阪/京都に寄せつつ、ブランド固有はBS-3 6分割パターン＋ブランドオレンジ */
.brand-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--space-fluid-section) var(--space-fluid-gutter) var(--space-24);
  background: var(--wf-bg);
  overflow: hidden;
}
/* media: 任意の背景画像（下層ヒーロー用） */
.brand-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.brand-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.94);
}
.brand-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(252, 250, 247, 0.7) 95%);
  z-index: 1;
}
.brand-hero__content {
  position: relative;
  z-index: var(--z-hero-copy);
  max-width: var(--container-base);
  margin-inline: auto;
  width: 100%;
}

/* TOP専用 — 京都/大阪のヒーロー横スクロールを踏襲 (実写未着のためグラデパネルで動きを表現) */
.brand-hero--mv {
  align-items: center;
  background: var(--wf-bg);
  min-height: 100vh;
  padding-block: 0;
  overflow: hidden;
}
/* 4パネル無限横スクロール (Kyoto/Osaka .mv .mv-row 同等) */
.brand-hero__mv-row {
  position: absolute;
  inset: 24px 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.brand-hero__mv-track {
  display: flex;
  gap: 10px;
  width: max-content;
  height: 100%;
  padding-inline: 5px;
  animation: mv-scroll 90s linear infinite;
}
.brand-hero__mv-panel {
  flex-shrink: 0;
  height: 100%;
  aspect-ratio: 9 / 8;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: clamp(24px, 3vw, 48px);
  box-shadow: 0 12px 32px -16px rgba(184, 78, 30, 0.18);
}
/* ガイドライン Pattern A/B 公式4色グラデ:
   #F58345 → #FAA84A → #FDBA4D → #FFFFFF
   各パネルは同じ4色を採用し、角度のみ変えて連続性を出す */
.brand-hero__mv-panel--1 {
  background: linear-gradient(135deg,
    var(--elcient-orange)       0%,
    var(--elcient-orange-light) 35%,
    var(--elcient-orange-deep)  70%,
    var(--elcient-white)        100%);
  color: #fff;
}
.brand-hero__mv-panel--2 {
  background: linear-gradient(225deg,
    var(--elcient-orange)       0%,
    var(--elcient-orange-light) 35%,
    var(--elcient-orange-deep)  70%,
    var(--elcient-white)        100%);
  color: var(--elcient-orange);
}
.brand-hero__mv-panel--3 {
  background: linear-gradient(180deg,
    var(--elcient-orange)       0%,
    var(--elcient-orange-light) 35%,
    var(--elcient-orange-deep)  70%,
    var(--elcient-white)        100%);
  color: #fff;
}
.brand-hero__mv-panel--4 {
  background: linear-gradient(45deg,
    var(--elcient-white)        0%,
    var(--elcient-orange-deep)  30%,
    var(--elcient-orange-light) 65%,
    var(--elcient-orange)       100%);
  color: var(--elcient-orange);
}
.brand-hero__mv-panel-meta {
  font-family: var(--font-en);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  opacity: 0.85;
  display: block;
  margin-bottom: 8px;
}
.brand-hero__mv-panel-label {
  font-family: var(--font-ja-serif);
  font-size: clamp(32px, 4.2vw, 64px);
  letter-spacing: 0.08em;
  font-weight: 500;
  line-height: 1.15;
}
@keyframes mv-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* コピー可読性のためのクリーム・ヴェール (左 → 透過) */
.brand-hero--mv .brand-hero__decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--wf-bg) 0%, rgba(253,240,235,0.92) 28%, rgba(253,240,235,0.55) 50%, transparent 75%),
    linear-gradient(180deg, transparent 0%, transparent 78%, rgba(253,240,235,0.85) 100%);
}
.brand-hero--mv .brand-hero__content {
  position: relative;
  z-index: var(--z-hero-copy);
  max-width: var(--container-base);
  margin-inline: auto;
  padding-inline: var(--space-fluid-gutter);
  width: 100%;
}
.brand-hero--mv .brand-hero__copy {
  font-size: clamp(48px, 7vw, 104px);
  max-width: 14em;
}
.brand-hero--mv .brand-hero__lead {
  max-width: 28em;
}

/* ヒーロー下部の細いブランドチッカー (色帯ではなく文字帯) */
.brand-hero__ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
  height: 56px;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, transparent 0%, rgba(245,131,69,0.06) 50%, transparent 100%);
  border-top: 1px solid rgba(245,131,69,0.18);
  border-bottom: 1px solid rgba(245,131,69,0.18);
}
.brand-hero__ticker-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  white-space: nowrap;
  width: max-content;
  animation: hero-ticker 50s linear infinite;
  padding-left: var(--space-8);
}
.brand-hero__ticker-item {
  font-family: var(--font-en);
  font-size: var(--text-sm);
  letter-spacing: 0.32em;
  color: var(--elcient-orange);
  text-transform: uppercase;
  flex-shrink: 0;
}
.brand-hero__ticker-item:first-letter,
.brand-hero__ticker-item {
  font-weight: 400;
}
.brand-hero__ticker-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--elcient-orange);
  opacity: 0.55;
  flex-shrink: 0;
}
@keyframes hero-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 767px) {
  .brand-hero { min-height: 80vh; padding-bottom: var(--space-16); }
  .brand-hero--mv {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top: 0;
    padding-bottom: var(--space-24);
    gap: var(--space-12);
    overflow: hidden;
  }
  /* SP: スクロール帯はヒーロー上部の固定高バンドへ */
  .brand-hero--mv .brand-hero__mv-row {
    position: relative;
    inset: auto;
    height: 48vh;
    flex-shrink: 0;
    margin: 12px;
  }
  .brand-hero__mv-track { animation-duration: 60s; gap: 8px; padding-inline: 4px; }
  .brand-hero__mv-panel {
    aspect-ratio: 4 / 5;
    border-radius:var(--radius-lg);
    padding: 16px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .brand-hero__mv-panel-meta { margin-bottom: 6px; }
  .brand-hero__mv-panel-label { font-size: clamp(24px, 7vw, 36px); }
  /* SP: ヴェール解除 (帯の下にコピーが来るので不要) */
  .brand-hero--mv .brand-hero__decor { display: none; }
  .brand-hero--mv .brand-hero__content {
    position: relative;
    padding-block: var(--space-12) var(--space-8);
    padding-inline: var(--space-fluid-gutter);
  }
  .brand-hero--mv .brand-hero__copy { font-size: clamp(36px, 9vw, 56px); }
  .brand-hero__ticker { height: 44px; position: relative; }
  .brand-hero__ticker-item { font-size: var(--text-xs); }
}
.brand-hero__content {
  position: relative;
  z-index: var(--z-hero-copy);
  max-width: var(--container-base);
  margin-inline: auto;
  width: 100%;
}
.brand-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-en);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-wide);
  color: var(--elcient-orange);
  margin-bottom: var(--space-5);
}
.brand-hero__copy {
  font-family: var(--font-ja-serif);
  font-size: clamp(48px, 7vw, 104px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--elcient-black);
  margin-bottom: var(--space-8);
}
.brand-hero__copy em {
  font-style: normal;
  color: var(--elcient-orange);
  font-feature-settings: "palt";
}
.brand-hero__lead {
  max-width: 540px;
  font-size: var(--text-fluid-base);
  line-height: var(--lh-loose);
  color: var(--wf-text-mid);
}
.brand-hero__signature {
  margin-top: var(--space-12);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-family: var(--font-en);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  color: var(--wf-text-light);
}
.brand-hero__signature::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--wf-text-light);
}

/* ============================================
   8. COMPONENTS
   ============================================ */

/* Hotel Cards (TOP / HOTELS共通) */
.hotel-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
@media (max-width: 767px) {
  .hotel-cards { grid-template-columns: 1fr; }
}
.hotel-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--elcient-white);
  transition: transform var(--dur-slow) var(--easing-main), box-shadow var(--dur-slow) var(--easing-main);
}
.hotel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(21, 2, 1, 0.12);
}
.hotel-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}
.hotel-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--easing-main);
}
.hotel-card:hover .hotel-card__media img { transform: scale(1.04); }
/* 写真未入稿時のプレースホルダー: ブランドオレンジのグラデ + マーク */
.hotel-card__media--placeholder {
  background: linear-gradient(135deg, #f58345 0%, #faa84a 45%, #fdba4d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hotel-card--kyoto .hotel-card__media--placeholder {
  background: linear-gradient(135deg, #fdba4d 0%, #ffe7d6 45%, var(--elcient-cream) 100%);
}
.hotel-card__media-mark {
  font-family: var(--font-en);
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: 0.32em;
  font-weight: 300;
  color: var(--elcient-white);
  text-shadow: 0 2px 12px rgba(21, 2, 1, 0.18);
  text-transform: uppercase;
}
.hotel-card--kyoto .hotel-card__media-mark {
  color: var(--elcient-orange);
  text-shadow: 0 2px 12px rgba(245, 131, 69, 0.25);
}
.hotel-card__body {
  padding: var(--space-8);
}
.hotel-card__city {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  color: var(--elcient-orange);
  margin-bottom: var(--space-2);
}
.hotel-card__name {
  font-family: var(--font-ja-serif);
  font-size: var(--text-fluid-lg);
  font-weight: 500;
  line-height: var(--lh-tight);
  margin-bottom: var(--space-3);
}
.hotel-card__name-en {
  display: block;
  font-family: var(--font-en);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: var(--ls-wide);
  color: var(--wf-text-light);
  margin-top: var(--space-1);
  text-transform: uppercase;
}
.hotel-card__desc {
  font-size: var(--text-sm);
  line-height: var(--lh-loose);
  color: var(--wf-text-mid);
  margin-bottom: var(--space-5);
}
.hotel-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-6);
  font-size: var(--text-xs);
  color: var(--wf-text-light);
}
.hotel-card__meta dt {
  display: inline;
  margin-right: 6px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-family: var(--font-en);
}
.hotel-card__meta dd { display: inline; margin: 0; color: var(--wf-text-mid); }
.hotel-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-en);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-wide);
  color: var(--elcient-orange);
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}
.hotel-card__cta::after {
  content: "→";
  display: inline-block;
  transition: transform var(--dur-base) var(--easing-main);
}
.hotel-card:hover .hotel-card__cta::after { transform: translateX(4px); }

/* Concept value cards (3-up) */
.concept-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
@media (max-width: 767px) {
  .concept-values { grid-template-columns: 1fr; }
}
.concept-value {
  text-align: center;
  padding: var(--space-8);
}
.concept-value__num {
  display: block;
  font-family: var(--font-en);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-wide);
  color: var(--elcient-orange);
  margin-bottom: var(--space-4);
}
.concept-value__title {
  font-family: var(--font-ja-serif);
  font-size: var(--text-fluid-xl);
  font-weight: 500;
  margin-bottom: var(--space-4);
}
.concept-value__desc {
  font-size: var(--text-sm);
  line-height: var(--lh-loose);
  color: var(--wf-text-mid);
}

/* Comparison table (HOTELS) */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--elcient-white);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.compare-table th,
.compare-table td {
  padding: var(--space-5);
  text-align: center;
  border-bottom: 1px solid var(--wf-border);
  font-size: var(--text-sm);
}
.compare-table thead th {
  background: var(--elcient-cream);
  font-family: var(--font-en);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--elcient-black);
}
.compare-table th:first-child,
.compare-table td:first-child {
  text-align: left;
  background: rgba(245,131,69,0.04);
  font-weight: 500;
  color: var(--wf-text-mid);
}

/* ============================================
   NEWS VISUAL (TOP) — 京都サイトNewsVisualと同構造
   左: 画像付き2カード（縦半分ずつスパン）
   右: テキストリスト4件
   ============================================ */
/* PC: ホテル(大阪/京都)準拠 — 100vh フルセクション + flex:1 list で 1fr 行高さ確保
   SP: 下部の @media (max-width: 767px) で min-height/flex を打ち消し flex column に戻す */
.news-visual {
  position: relative;
  padding: 0;
  background: var(--elcient-cream);
  min-height: calc(100vh - var(--header-height));
  overflow: clip;
  display: flex;
  flex-direction: column;
}
.news-visual > .news-visual__heading,
.news-visual > .sec-heading {
  flex-shrink: 0;
}
.news-visual-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 40px 1fr 1fr;
  grid-auto-flow: dense;
  gap: 0 56px;
  padding: 0 80px 0 var(--site-gutter);
  flex: 1;
  min-height: 0;
}

/* 子ラッパーを透過してグリッド直接制御 */
.news-cards { display: contents; }
.news-list  { display: contents; }

/* ── 左カラム: 画像付きカード（各2行スパン） ── */
.news-card {
  grid-column: 1;
  grid-row: span 2;
  display: flex;
  gap: 16px;
  text-decoration: none;
  color: var(--wf-text);
  align-items: flex-end;
  border-bottom: 1px solid var(--wf-border);
  padding: 20px 0;
}
.news-card:first-child {
  padding-top: 0;
  grid-row: 1 / 3;
}
.news-card:last-child {
  grid-row: 4 / 6;
}
.news-card-img {
  width: 48%;
  flex-shrink: 0;
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--wf-placeholder);
}
.news-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.news-card:hover .news-card-img img {
  transform: scale(1.04);
}
.news-card-body {
  flex: 1;
}
/* News shared styles (card / list) */
.news-card-date,
.news-list-date {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
}
.news-card-date-day {
  font-family: var(--font-en);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  color: var(--wf-text);
  letter-spacing: normal;
}
.news-card-date-year,
.news-list-date-year {
  font-family: var(--font-en);
  font-size: var(--text-xxs);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--wf-text-light);
  margin-right: 4px;
}
.news-card-cat,
.news-list-cat {
  font-family: var(--font-en);
  font-size: var(--text-xxs);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--elcient-orange);
  border: 1px solid rgba(245,131,69,0.3);
  background: transparent;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}
.news-card-title,
.news-list-title {
  font-family: var(--font-ja);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
}

/* ── 右カラム: テキストリスト（各1行） ── */
.news-list-item {
  grid-column: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  text-decoration: none;
  color: var(--wf-text);
  border-bottom: 1px solid var(--wf-border);
  padding-bottom: 16px;
  transition: background 0.3s;
  letter-spacing: normal;
}
.news-list-item:nth-child(3) {
  grid-row: 4;
}
.news-list-item:nth-child(4) {
  grid-row: 5;
}
.news-list-date-day {
  font-family: var(--font-en);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  color: var(--wf-text);
  letter-spacing: normal;
}
.news-list-body {
  flex: 1;
}
.news-list-item:hover .news-list-title {
  color: var(--elcient-orange);
}
.news-list-arrow {
  font-family: var(--font-en);
  font-size: var(--text-sm);
  color: var(--wf-text-light);
  flex-shrink: 0;
  padding-top: 4px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s, transform 0.3s;
  letter-spacing: normal;
}
.news-list-item:hover .news-list-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--elcient-orange);
}

/* ── View All ── */
.news-visual-more {
  text-align: center;
  margin-top: 60px;
  padding-bottom: 24px;
}
@media (max-width: 767px) {
  /* 大阪サイト準拠の SP 上書き — line 6326-6388 と同等 */
  .news-visual {
    min-height: auto;
    padding-bottom: 60px;
  }
  .news-visual-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 calc(var(--site-gutter) + 12px);
  }

  /* カード（画像付き） */
  .news-card {
    flex-direction: row;
    gap: 16px;
    padding: 20px 0;
    align-items: flex-start;
    grid-column: auto;
    grid-row: auto;
  }
  .news-card-img {
    width: 100px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
  }
  .news-card-date {
    gap: 4px;
    margin-bottom: 6px;
  }
  .news-card-date-day {
    font-size: var(--text-base);
    font-weight: 400;
  }
  .news-card-title {
    font-size: var(--text-sm);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* リスト（テキストのみ） */
  .news-list-item {
    grid-column: auto;
    grid-row: auto;
    padding: 16px 0;
    align-items: center;
  }
  .news-list-date {
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
  }
  .news-list-date-day {
    font-size: var(--text-base);
    font-weight: 400;
  }
  .news-list-title {
    font-size: var(--text-sm);
    line-height: 1.6;
  }
  .news-list-arrow { opacity: 1; transform: none; }
}

/* Membership banner — クリーム基調・no dark themes */
.membership-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background:
    linear-gradient(135deg, rgba(245,131,69,0.92), rgba(253,186,77,0.85) 60%, rgba(255,255,255,0.95)),
    var(--elcient-cream);
  color: var(--elcient-black);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 320px;
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.membership-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 写真未入稿時のプレースホルダー */
.membership-banner__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.45), rgba(253,186,77,0.18));
}
.membership-banner__media-mark {
  font-family: var(--font-en);
  font-size: clamp(24px, 3vw, 40px);
  letter-spacing: 0.32em;
  font-weight: 300;
  color: var(--elcient-white);
  text-shadow: 0 2px 12px rgba(21,2,1,0.2);
  text-transform: uppercase;
}
.membership-banner__body {
  padding: var(--space-12);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.membership-banner__eyebrow {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  color: var(--elcient-white);
  margin-bottom: var(--space-4);
}
.membership-banner__title {
  font-family: var(--font-ja-serif);
  font-size: var(--text-fluid-xl);
  color: var(--elcient-white);
  margin-bottom: var(--space-5);
}
.membership-banner__desc {
  font-size: var(--text-sm);
  line-height: var(--lh-loose);
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: var(--space-8);
}
.membership-banner .c-button--primary {
  background: var(--elcient-white);
  color: var(--elcient-orange);
}
.membership-banner .c-button--primary:hover {
  background: var(--elcient-black);
  color: var(--elcient-white);
}
@media (max-width: 767px) {
  .membership-banner { grid-template-columns: 1fr; }
  .membership-banner__body { padding: var(--space-8); }
}

/* About — story sections */
.about-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.about-story__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.about-story__media img { width: 100%; height: 100%; object-fit: cover; }
.about-story__body h3 {
  font-family: var(--font-ja-serif);
  font-size: var(--text-fluid-xl);
  margin-bottom: var(--space-5);
}
.about-story__body p {
  font-size: var(--text-sm);
  line-height: var(--lh-loose);
  color: var(--wf-text-mid);
}
.about-story:nth-child(even) {
  direction: rtl;
}
.about-story:nth-child(even) > * { direction: ltr; }
@media (max-width: 767px) {
  .about-story,
  .about-story:nth-child(even) { grid-template-columns: 1fr; direction: ltr; gap: var(--space-6); }
}

/* ============================================
   9. FOOTER — ホテルサイト同一仕様（CSS 1:1コピー）
   ============================================ */
.footer {
  position: relative;
  z-index: var(--z-footer);
}
.footer-orange {
  position: relative;
  background: var(--elcient-orange);
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.footer-deco {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 85%;
  height: auto;
  pointer-events: none;
  z-index: 1;
}
.footer-deco--sp {
  display: none;
}
.footer-deco-mid--sp {
  display: none;
}

/* ── 情報エリア ── */
.footer-info {
  padding: 0 var(--space-fluid-gutter);
}
.footer-info__inner {
  max-width: var(--container-base);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 2.3fr);
  column-gap: 56px;
  padding: 48px 0 60px;
  position: relative;
  z-index: 2;
}

/* ── 左カラム: ブランドステートメントパネル ── */
.footer-info__hotel {
  display: flex;
  flex-direction: column;
  color: var(--elcient-black);
  /* PC版: 右カラムのブランドロゴ分の上余白を確保してタイトルの頭を EXPLORE 線に揃える */
  padding-top: calc(640px * (246 / 1200) + 80px);
}
.footer-info__brand {
  margin: 0 0 18px;
}
.footer-info__brand--sp-only {
  display: none;
}
.footer-info__brand img {
  display: block;
  width: clamp(180px, 14vw, 240px);
  height: auto;
}
.footer-info__brand--main {
  align-self: stretch;
  margin: 0 0 18px;
}
.footer-info__brand--main img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}
.footer-info__name {
  font-family: var(--font-ja-serif);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  margin: 0 0 22px;
}
.footer-info__lead {
  font-family: var(--font-ja);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.7;
  color: var(--elcient-black);
  margin: 0 0 16px;
  letter-spacing: var(--ls-base);
}
.footer-info__statement {
  font-family: var(--font-ja);
  font-size: var(--text-xs);
  line-height: 1.85;
  color: rgba(0, 0, 0, 0.7);
  margin: 0;
}

/* 右カラム: EXPLORE + INFORMATION */
.footer-info__main {
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.footer-section {
  display: flex;
  flex-direction: column;
}
.footer-section__label {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.footer-section__label::after {
  content: '';
  flex: 1;
  height: 4px;
  background: var(--elcient-black);
}

/* EXPLORE: 5列×2行のアイコン付きナビ（ホテル版と同一） */
.footer-explore {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 18px;
  row-gap: 28px;
}
.footer-explore a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--elcient-black);
  text-decoration: none;
}
.footer-explore__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(252, 250, 247, 0.55);
  color: var(--elcient-black);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.footer-explore__icon svg {
  width: 24px;
  height: 24px;
}
.footer-explore__text {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
}
.footer-explore__text--2line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.35;
}
.footer-explore__text--2line > span { display: block; }
.footer-explore a:hover .footer-explore__icon {
  background: var(--elcient-black);
  color: #fcf8f0;
}

.footer-info__ext {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.85em;
  font-family: var(--font-en);
  opacity: 0.55;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.footer-explore a:hover .footer-info__ext,
.footer-information a:hover .footer-info__ext {
  opacity: 1;
  transform: translate(2px, -2px);
}

/* INFORMATION: 5列コンパクトリンク（ホテル版と同一） */
.footer-information {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 24px;
  row-gap: 10px;
}
.footer-information a {
  font-family: var(--font-ja);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-base);
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.72);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer-information a::before {
  content: '›';
  font-family: var(--font-en);
  font-weight: 500;
  color: rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}
.footer-information a:hover {
  color: var(--elcient-black);
}

/* HOTELS バンド — OSAKA | BRAND | KYOTO 3カラム（ホテル版と同一） */
.footer-hotels-band {
  max-width: var(--container-base);
  margin: 48px auto 0;
  padding: 0 var(--space-fluid-gutter);
  position: relative;
  z-index: 2;
}
.footer-hotels-band__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 10px;
  align-items: stretch;
}
.footer-hotels-band__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  color: var(--elcient-black);
  text-decoration: none;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(0,0,0,0.1);
  overflow: hidden;
  transition: background 0.4s var(--easing-main),
              border-color 0.35s ease,
              transform 0.4s var(--easing-main),
              box-shadow 0.4s ease;
}
.footer-hotels-band__card:hover {
  background: rgba(255,255,255,0.26);
  border-color: rgba(0,0,0,0.3);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(20,18,16,0.1);
}
.footer-hotels-band__card-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.footer-hotels-band__card-en {
  font-family: var(--font-en);
  font-size: clamp(10px, 0.78vw, 11.5px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.footer-hotels-band__card-en > span { display: block; }
.footer-hotels-band__card-ja {
  font-family: var(--font-ja);
  font-size: clamp(13px, 1.02vw, 15.5px);
  font-weight: 600;
  letter-spacing: var(--ls-base);
  line-height: 1.4;
  display: flex;
  flex-direction: column;
}
.footer-hotels-band__card-ja > span {
  display: block;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(0,0,0,0.28);
  transition: text-decoration-color 0.3s ease;
}
.footer-hotels-band__card:hover .footer-hotels-band__card-ja > span {
  text-decoration-color: var(--elcient-black);
}
.footer-hotels-band__card:hover .footer-hotels-band__card-ja {
  text-decoration-color: var(--elcient-black);
}
.footer-hotels-band__card-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  align-self: flex-start;
  margin-top: 2px;
  color: rgba(0,0,0,0.45);
  transition: color 0.3s ease, transform 0.35s var(--easing-main);
}
.footer-hotels-band__card:hover .footer-hotels-band__card-icon {
  color: var(--elcient-black);
  transform: translate(3px, -3px);
}

/* 中央BRAND: ロゴ・中央揃え */
.footer-hotels-band__card--brand {
  justify-content: center;
  gap: 20px;
  padding: 16px 26px;
}
.footer-hotels-band__card-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.footer-hotels-band__card-logo img {
  display: block;
  width: clamp(120px, 11vw, 156px);
  height: auto;
}

/* コピーライト */
.footer-copy {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: rgba(0,0,0,0.5);
  text-align: center;
  margin: 28px 0 0;
  padding-bottom: 30px;
  position: relative;
  z-index: 2;
}

/* 関西電力ロゴ帯 */
.footer-bottom {
  background: #fff;
  padding: 12px var(--space-fluid-gutter) 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-bottom__logo img {
  height: 20px;
  width: auto;
}

/* HOTELS バンド SP（ホテル版と同一） */
@media (max-width: 767px) {
  .footer-hotels-band {
    margin-top: 32px;
  }
  .footer-hotels-band__inner {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .footer-hotels-band__card {
    padding: 18px 20px;
    justify-content: center;
    text-align: center;
  }
  .footer-hotels-band__card-text {
    align-items: center;
  }
  .footer-hotels-band__card-en {
    display: none;
  }
  .footer-hotels-band__card-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: 0;
    transform: translateY(-50%);
  }
  .footer-hotels-band__card--brand {
    order: -1;
    padding: 18px 20px;
  }
}

/* SP（〜767px）: ホテル版と同一仕様 */
@media (max-width: 767px) {
  .footer-orange {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }

  /* 単一カラム化 */
  .footer-info__inner {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    column-gap: 0;
    row-gap: 0;
    padding: 32px 0 20px;
  }

  /* ── 左: ブランドステートメント ── */
  .footer-info__hotel {
    padding-top: 0;
    padding-bottom: 28px;
    color: var(--elcient-black);
    align-items: center;
    text-align: center;
  }

  /* SP専用：ブランドロゴ（上部） */
  .footer-info__brand {
    margin: 0;
  }
  .footer-info__brand img {
    width: 200px;
    filter: none;
  }
  .footer-info__brand--sp-only {
    display: block;
    margin: 0 auto 24px;
    padding-bottom: 0;
    border-bottom: 0;
    width: 100%;
    text-align: center;
  }
  .footer-info__brand--sp-only img {
    margin: 0 auto;
    width: min(78%, 300px);
    height: auto;
  }

  .footer-info__name {
    color: var(--elcient-black);
    font-size:var(--text-lg);
    font-weight: 700;
    white-space: normal;
    margin: 22px 0 18px;
  }
  .footer-info__lead {
    color: var(--elcient-black);
    font-size: var(--text-sm);
    line-height: 1.7;
    margin-bottom: 14px;
  }
  .footer-info__statement {
    font-size: 12.5px;
    line-height:var(--lh-base);
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  }

  /* ── 右: EXPLORE + INFORMATION ── */
  .footer-info__main {
    gap: 32px;
    padding-top: 28px;
  }
  .footer-info__brand--main {
    display: none;
  }
  .footer-section__label {
    font-size: var(--text-xs);
    letter-spacing: 0.22em;
    margin-bottom: 18px;
    gap: 14px;
  }

  /* EXPLORE: SPは2列ピルカード（ホテル版と同一） */
  .footer-explore {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    column-gap: 10px;
    row-gap: 10px;
  }
  .footer-explore a {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(252, 250, 247, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
  }
  .footer-explore__icon {
    width: 34px;
    height: 34px;
    background: transparent;
    flex-shrink: 0;
  }
  .footer-explore__icon svg {
    width: 20px;
    height: 20px;
  }
  .footer-explore__text {
    font-size: var(--text-xs);
    letter-spacing: var(--ls-base);
    text-align: left;
    white-space: normal;
    line-height: 1.2;
  }

  /* INFORMATION: SPは2列コンパクト */
  .footer-information {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 14px;
    row-gap: 10px;
  }
  .footer-information a {
    font-size:var(--text-xs);
    padding: 0;
    white-space: normal;
    gap: 6px;
    line-height: 1.45;
  }

  .footer-copy {
    font-size:var(--text-xxs);
    padding-bottom: 20px;
    margin-top: 24px;
  }

  .footer-deco:not(.footer-deco--sp) {
    display: none;
  }
  .footer-deco--sp {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
  }
  .footer-info__main {
    position: relative;
  }
  .footer-deco-mid--sp {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    max-width: none;
    height: auto;
    z-index: 0;
    pointer-events: none;
  }
  .footer-info__main > :not(.footer-deco-mid--sp) {
    position: relative;
    z-index: 1;
  }
}

/* (Booking modal CSSは TopBar セクションへ移動済み) */

/* ============================================
  11. NEW BRAND COMPONENTS (リニューアル準拠)
   ============================================ */

/* ============================================
   HERO PICKUP — Shimizu 構造踏襲
   ヒーロー右辺を縦に占有するパネル：
   PICKUPラベル + ▼▲ナビ ／ カード = リード + 大タイトル + 大画像
   ブランドガイド準拠：cream ベース + brand-orange アクセント
   ============================================ */
.hero-pickup {
  position: absolute;
  top: 0;
  right: 40px;
  z-index: 8;
  width: clamp(300px, 24vw, 360px);
  max-height: min(820px, calc(100vh - 100px));
  background: var(--elcient-cream);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 22px 48px -22px rgba(20, 2, 1, 0.4);
  display: flex;
  flex-direction: column;
  padding: 28px 26px 32px;
}
.hero-pickup__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: clamp(18px, 2vh, 26px);
  border-bottom: 1px solid rgba(20, 2, 1, 0.1);
}
.hero-pickup__label {
  font-family: var(--font-en);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--elcient-black);
}
.hero-pickup__nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-pickup__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(20, 2, 1, 0.35);
  border-radius: 2px;
  color: var(--elcient-black);
  cursor: pointer;
  transition: color var(--dur-base) var(--easing-main),
              border-color var(--dur-base) var(--easing-main),
              background var(--dur-base) var(--easing-main);
}
.hero-pickup__nav-btn svg {
  width: 12px;
  height: 8px;
}
.hero-pickup__nav-btn:hover {
  color: var(--elcient-orange);
  border-color: var(--elcient-orange);
  background: rgba(245, 131, 69, 0.06);
}

.hero-pickup__viewport {
  position: relative;
  flex: 1;
  margin-top: 22px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.hero-pickup__viewport::-webkit-scrollbar { display: none; }
.hero-pickup__track {
  display: flex;
  flex-direction: column;
}
.hero-pickup__card {
  display: block;
  text-decoration: none;
  color: var(--elcient-black);
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(20, 2, 1, 0.12);
  transition: opacity var(--dur-base) var(--easing-main);
}
.hero-pickup__card + .hero-pickup__card { padding-top: 28px; }
.hero-pickup__card:last-child { border-bottom: none; padding-bottom: 8px; }
.hero-pickup__card:hover { opacity: 0.85; }

.hero-pickup__lead {
  margin: 0;
  font-family: var(--font-ja);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--elcient-black);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  line-height: 1.7;
}
.hero-pickup__title {
  margin: 10px 0 16px;
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.04em;
}

.hero-pickup__media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(20, 2, 1, 0.04);
  border-radius: 6px;
}
.hero-pickup__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--easing-main);
}
.hero-pickup__card:hover .hero-pickup__media img { transform: scale(1.04); }

@media (max-width: 767px) {
  /* SP: ヒーロー直下のスロットへ移動（JSで親付け替え） */
  .hero-pickup {
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    padding: 18px 16px 8px;
    background: var(--elcient-cream);
  }
  .hero-pickup__head {
    padding-bottom: 14px;
  }
  .hero-pickup__viewport {
    margin-top: 12px;
    overflow: visible;
  }
  .hero-pickup__track {
    display: block;
  }
  .hero-pickup__card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(20, 2, 1, 0.08);
  }
  .hero-pickup__card + .hero-pickup__card { padding-top: 14px; }
  .hero-pickup__card:last-child { border-bottom: none; padding-bottom: 8px; }
  .hero-pickup__lead {
    display: none;
  }
  .hero-pickup__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
  }
  .hero-pickup__media {
    order: -1;
    flex: 0 0 88px;
    width: 88px;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
  }
  /* SP ではPC側ナビを非表示にしてシンプルなリスト表示にする */
  .hero-pickup__nav { display: none; }
}
.hero-ticker__label {
  flex-shrink: 0;
  font-family: var(--font-en);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  color: var(--elcient-orange);
  padding-right: var(--space-5);
  border-right: 1px solid rgba(21, 2, 1, 0.15);
}
.hero-ticker__track {
  flex: 1;
  display: flex;
  gap: var(--space-8);
  overflow: hidden;
  white-space: nowrap;
}
.hero-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--wf-text-mid);
  transition: color var(--dur-base) var(--easing-main);
}
.hero-ticker__item:hover { color: var(--elcient-orange); }
.hero-ticker__item time { font-family: var(--font-en); color: var(--wf-text-light); }
.hero-ticker__cat {
  font-family: var(--font-en);
  font-size: var(--text-xxs);
  letter-spacing: var(--ls-wide);
  color: var(--elcient-orange);
}
@media (max-width: 1024px) {
  .hero-ticker__track { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 767px) {
  .hero-ticker { padding: var(--space-3) var(--site-gutter); gap: var(--space-3); }
  .hero-ticker__label { padding-right: var(--space-3); font-size: var(--text-xxs); }
  .hero-ticker__track { gap: var(--space-5); }
}

/* Brand statement — 詩的本文・段落の連なり */
.brand-statement {
  font-family: var(--font-ja-serif);
  font-size: var(--text-fluid-lg);
  line-height: var(--lh-loose);
  color: var(--wf-text-mid);
}
.brand-statement p {
  margin-bottom: var(--space-8);
  text-align: left;
}
.brand-statement p:last-child { margin-bottom: 0; }
.brand-statement p:first-child::first-letter {
  font-size: 1.4em;
  color: var(--elcient-orange);
  margin-right: 2px;
}

/* Brand statement lead — TOP内 抜粋表示用 */
.brand-statement-lead {
  font-family: var(--font-ja-serif);
  font-size: var(--text-fluid-lg);
  line-height: var(--lh-loose);
  color: var(--wf-text-mid);
}
.brand-statement-lead em {
  font-style: normal;
  color: var(--elcient-orange);
  font-weight: 500;
}

/* Brand hero — concept variant (静かな全画面) */
.brand-hero--concept {
  align-items: center;
  text-align: center;
}
.brand-hero--concept .brand-hero__content {
  text-align: center;
}
.brand-hero--concept .brand-hero__copy {
  font-size: var(--text-display);
  margin-inline: auto;
  max-width: 12em;
}

/* Brand hero — typographic variant (写真なし・下層共通)
   2色運用に合わせて、装飾は --wf-bg と相性のいい淡いブランドオレンジの曲面 */
.brand-hero--type {
  position: relative;
  background: var(--wf-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--space-fluid-section);
}
.brand-hero--type .brand-hero__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(245,131,69,0.12) 0%, transparent 38%),
    radial-gradient(circle at 88% 78%, rgba(253,186,77,0.10) 0%, transparent 42%);
}
.brand-hero--type .brand-hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--container-narrow);
  padding-inline: var(--space-fluid-gutter);
}
.brand-hero--type .brand-hero__copy {
  font-size: clamp(36px, 5.2vw, 76px);
  margin-inline: auto;
}
.brand-hero--type .brand-hero__lead {
  margin-inline: auto;
}

/* ─── Document list (pamphlet / release / bestrate 共通) ─── */
.c-doc-list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.c-doc-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6) var(--space-7);
  background: var(--elcient-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--wf-border);
  text-decoration: none;
  color: var(--elcient-black);
  transition: border-color var(--dur-base) var(--easing-main),
              box-shadow var(--dur-base) var(--easing-main);
}
.c-doc-row:hover {
  border-color: var(--elcient-orange);
  box-shadow: 0 4px 16px -8px rgba(245, 131, 69, 0.25);
}
.c-doc-row__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 96px;
}
.c-doc-row__date {
  font-family: var(--font-en);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  color: var(--wf-text-mid);
}
.c-doc-row__tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-en);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  color: var(--elcient-orange);
  border: 1px solid var(--elcient-orange);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}
.c-doc-row__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.c-doc-row__title {
  font-family: var(--font-ja-serif);
  font-size: var(--text-fluid-base);
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}
.c-doc-row__desc {
  font-size: var(--text-xs);
  color: var(--wf-text-light);
  margin: 0;
}
.c-doc-row__cta {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  color: var(--elcient-orange);
  white-space: nowrap;
}
@media (max-width: 767px) {
  .c-doc-row { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-5); }
  .c-doc-row__cta { justify-self: flex-end; }
}

/* ─── SDGs pillar pill list ─── */
.sdgs-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
}
.sdgs-pill {
  font-family: var(--font-ja);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--elcient-orange);
  background: rgba(245, 131, 69, 0.08);
  border: 1px solid rgba(245, 131, 69, 0.3);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

/* Narrative — 写真なしバリアント (CONCEPTで使用) */
.narrative--no-media {
  grid-template-columns: minmax(280px, 360px) 1fr;
  grid-template-rows: auto;
}
.narrative--no-media .narrative__body {
  grid-column: 2;
  grid-row: 1;
}
@media (max-width: 767px) {
  .narrative--no-media {
    grid-template-columns: 1fr;
  }
  .narrative--no-media .narrative__body {
    grid-column: 1;
  }
}

/* Narrative — CONCEPT 3章本体 */
.narrative {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  grid-template-rows: auto 1fr;
  gap: var(--space-12) var(--space-16);
  align-items: start;
}
.narrative__header {
  grid-column: 1;
  grid-row: 1 / span 2;
  padding-top: var(--space-4);
}
.narrative__num {
  display: block;
  font-family: var(--font-en);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  color: var(--elcient-orange);
  margin-bottom: var(--space-3);
}
.narrative__en {
  font-family: var(--font-en);
  font-size: var(--text-fluid-lg);
  font-weight: 300;
  letter-spacing: var(--ls-base);
  color: var(--wf-text-mid);
  margin-bottom: var(--space-4);
}
.narrative__title {
  font-family: var(--font-ja-serif);
  font-size: var(--text-fluid-2xl);
  font-weight: 500;
  line-height: 1.4;
  color: var(--elcient-black);
  word-break: keep-all;
  overflow-wrap: normal;
}
.narrative__body {
  grid-column: 2;
  grid-row: 1;
}
.narrative__body p {
  font-family: var(--font-ja-serif);
  font-size: var(--text-fluid-base);
  line-height: var(--lh-loose);
  color: var(--wf-text-mid);
  margin-bottom: var(--space-6);
}
.narrative__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.narrative__keywords li {
  padding: 6px 14px;
  background: rgba(245, 131, 69, 0.08);
  color: var(--elcient-orange);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-base);
  border-radius: var(--radius-pill);
}
.narrative__media {
  grid-column: 2;
  grid-row: 2;
  margin: var(--space-6) 0 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.narrative__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1024px) {
  .narrative { grid-template-columns: 1fr; }
  .narrative__header { grid-column: 1; grid-row: 1; padding-top: 0; }
  .narrative__body { grid-column: 1; grid-row: 2; }
  .narrative__media { grid-column: 1; grid-row: 3; margin-top: 0; }
}

/* Features grid — TOP 04. エルシエントの特長 */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.feature-card {
  background: var(--elcient-white);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid var(--wf-border);
  transition: transform var(--dur-base) var(--easing-main), border-color var(--dur-base) var(--easing-main);
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--elcient-orange);
}
.feature-card__en {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  color: var(--elcient-orange);
  margin-bottom: var(--space-3);
}
.feature-card__ja {
  font-family: var(--font-ja-serif);
  font-size: var(--text-fluid-lg);
  font-weight: 500;
  margin-bottom: var(--space-4);
  color: var(--elcient-black);
}
.feature-card__desc {
  font-size: var(--text-sm);
  line-height: var(--lh-loose);
  color: var(--wf-text-mid);
}
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .features-grid { grid-template-columns: 1fr; }
}

/* Hotel card accent — 新規追加 (各ホテルの「灯し方」表現) */
.hotel-card__accent {
  display: inline-block;
  margin: var(--space-2) 0 var(--space-5);
  padding: 4px 12px;
  background: rgba(245, 131, 69, 0.08);
  color: var(--elcient-orange);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-base);
  border-radius: var(--radius-pill);
}

/* ============================================
  12. P-NEWS — 下層 /news/ 京都editorial構造の移植
   ============================================ */
.p-news {
  --p-news-ink: var(--elcient-black);
  --p-news-line: rgba(21, 2, 1, .14);
  --p-news-muted: rgba(21, 2, 1, .55);
  --p-news-orange: var(--elcient-orange);
  padding: clamp(56px, 9vw, 140px) 0 clamp(120px, 15vw, 220px);
}
.p-news__inner {
  width: min(1320px, 92%);
  margin: 0 auto;
}

/* Filters */
.p-news__filters {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.6vw, 20px);
  margin-bottom: clamp(48px, 6vw, 80px);
}
.p-news__filter-row {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  flex-wrap: wrap;
  justify-content: center;
}
.p-news__filter-label {
  color: rgba(21, 2, 1, .7);
  font: 600 13px/1 var(--font-en);
  letter-spacing: .2em;
  text-transform: uppercase;
  padding-right: clamp(12px, 1.2vw, 18px);
  border-right: 1px solid rgba(21, 2, 1, .28);
}
.p-news__filter-mobile { display: none; }
.p-news__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.p-news__pill {
  appearance: none;
  background: transparent;
  color: var(--elcient-orange);
  border: 1.5px solid rgba(245, 131, 69, .6);
  border-radius: var(--radius-pill);
  padding: 12px 22px 13px;
  cursor: pointer;
  font: 600 13px/1 var(--font-en);
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .4s ease, color .4s ease, border-color .4s ease;
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  white-space: nowrap;
}
.p-news__pill-count {
  font: 500 12px/1 var(--font-en);
  letter-spacing: .06em;
  color: var(--elcient-orange);
  font-feature-settings: 'tnum' 1;
}
.p-news__pill[aria-selected="true"] .p-news__pill-count { color: #fff; }
.p-news__pill:hover {
  background: rgba(245, 131, 69, .08);
}
.p-news__pill[aria-selected="true"] {
  background: var(--elcient-orange);
  color: #fff;
  border-color: var(--elcient-orange);
}

/* mobile */
.p-news__select-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}
.p-news__select-label {
  font: 600 10.5px/1 var(--font-en);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(21, 2, 1, .55);
}
.p-news__select-wrap { position: relative; display: block; width: 100%; }
.p-news__select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 13px 40px 13px 16px;
  background: #fff;
  border: 1px solid rgba(21, 2, 1, .18);
  border-radius: 10px;
  color: var(--elcient-black);
  font: 500 14px/1.2 var(--font-ja);
  letter-spacing: .04em;
  cursor: pointer;
}
@media (max-width: 720px) {
  .p-news__filter-row--desktop { display: none; }
  .p-news__filters { gap: 14px; align-items: stretch; }
  .p-news__filter-mobile {
    display: flex;
    gap: 12px;
    align-items: stretch;
    width: 100%;
  }
}

/* Year group */
.p-news__year-group + .p-news__year-group {
  margin-top: clamp(96px, 12vw, 160px);
}
.p-news__year-head {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 24px;
  align-items: baseline;
  margin-bottom: clamp(32px, 4vw, 56px);
  padding-bottom: 18px;
}
.p-news__year-display {
  font: 300 clamp(64px, 11vw, 140px)/0.9 var(--font-en);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--elcient-black);
}
.p-news__year-meta {
  font: 400 10px/1 var(--font-en);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(21,2,1,0.55);
  padding-bottom: 8px;
}

/* Rows */
.p-news__rows { list-style: none; padding: 0; margin: 0; }
.p-news__row { position: relative; }
.p-news__row-link {
  position: relative;
  display: grid;
  grid-template-columns: 160px 1fr 220px 36px;
  column-gap: clamp(24px, 3vw, 48px);
  align-items: center;
  padding: clamp(26px, 3vw, 38px) 0;
  text-decoration: none;
  color: var(--elcient-black);
  transition: color .35s ease;
}
.p-news__row-line {
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: rgba(21,2,1,0.14);
}
.p-news__rows .p-news__row:last-child .p-news__row-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(21,2,1,0.14);
}
.p-news__row-date {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-en);
  white-space: nowrap;
}
.p-news__row-md {
  font-weight: 300;
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1;
  color: var(--elcient-black);
}
.p-news__row-dot {
  display: inline-block;
  transform: translateY(-.12em);
  margin: 0 .04em;
  color: var(--elcient-orange);
}
.p-news__row-y {
  font-weight: 400;
  font-size:var(--text-xxs);
  letter-spacing: .32em;
  color: rgba(21,2,1,0.55);
  text-transform: uppercase;
}
.p-news__row-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.p-news__row-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.p-news__row-hotel {
  font: 500 10.5px/1 var(--font-en);
  letter-spacing: .12em;
  padding: 5px 10px 6px;
  color: var(--elcient-orange);
  background: transparent;
  border: 1px solid rgba(245,131,69,0.4);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.p-news__row-cat {
  font: 600 11px/1 var(--font-ja);
  letter-spacing: .08em;
  padding: 5px 12px 6px;
  color: #fff;
  background: rgba(21,2,1,0.55);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.p-news__row-cat[data-cat="info"]       { background: rgba(21,2,1,0.55); }
.p-news__row-cat[data-cat="stay"]       { background: var(--elcient-purple); }
.p-news__row-cat[data-cat="event"]      { background: var(--elcient-gold); }
.p-news__row-cat[data-cat="restaurant"] { background: var(--elcient-orange); }
.p-news__row-cat[data-cat="sdgs"]       { background: #2d7a4f; }
.p-news__row-title {
  margin: 0;
  font-family: var(--font-ja);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.85;
  letter-spacing: .04em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .35s ease;
}
.p-news__row-link:hover .p-news__row-title { color: var(--elcient-orange); }
.p-news__row-thumb {
  position: relative;
  aspect-ratio: 5/3;
  overflow: hidden;
  background: #eadfc9;
  border-radius: 10px;
}
.p-news__row-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2,0,.15,1);
}
.p-news__row-link:hover .p-news__row-thumb img { transform: scale(1.06); }
.p-news__row-thumb.no-img {
  background: linear-gradient(180deg, #eadfc9 0%, #e0d4ba 100%);
}
.p-news__row-thumb.no-img::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(21,2,1,0.1);
}
.p-news__row-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: rgba(21,2,1,0.55);
  font-family: var(--font-en);
  transition: transform .45s cubic-bezier(.7,0,.2,1), color .3s ease;
  justify-self: end;
  flex-shrink: 0;
}
.p-news__row-link:hover .p-news__row-arrow {
  transform: translateX(8px);
  color: var(--elcient-orange);
}

@media (max-width: 1024px) {
  .p-news__row-link { grid-template-columns: 140px 1fr 180px 28px; }
}
@media (max-width: 720px) {
  .p-news__row-link {
    grid-template-columns: 120px 1fr 14px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "thumb meta arrow"
      "thumb body arrow";
    column-gap: 14px;
    row-gap: 6px;
    padding: 18px 0 20px;
    align-items: start;
  }
  .p-news__row-thumb {
    grid-area: thumb;
    width: 120px;
    aspect-ratio: 3/2;
    border-radius: 8px;
    align-self: center;
  }
  .p-news__row-date {
    grid-area: meta;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
  .p-news__row-md {
    font-size: 14px !important;
    font-weight: 500;
  }
  .p-news__row-y { font-size: 10.5px; }
  .p-news__row-body {
    grid-area: body;
    gap: 4px;
  }
  .p-news__row-cat,
  .p-news__row-hotel { font-size:var(--text-xxs); padding: 4px 9px 5px; }
  .p-news__row-title {
    font-size: 13px !important;
    line-height: 1.45 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .p-news__row-arrow { grid-area: arrow; align-self: center; }
}

.p-news__empty {
  text-align: center;
  padding: 120px 0;
  color: rgba(21,2,1,0.55);
  font-family: var(--font-ja);
  letter-spacing: .08em;
}

/* ============================================
  Responsive top-level adjustments
   ============================================ */
@media (max-width: 767px) {
  :root {
    --site-gutter: 20px;
  }
  .brand-hero { min-height: 80vh; padding-bottom: calc(var(--space-16) + 60px); }
}

/* SP専用 改行（PCでは無視） */
.sp-br { display: none; }
@media (max-width: 767px) { .sp-br { display: inline; } }
.pc-br { display: inline; }
@media (max-width: 767px) { .pc-br { display: none; } }

/* ============================================
   BP-HERO — 下層ページ共通ヒーロー（ホテル版1:1コピー）
   オレンジ地 + 三角クリップで開く hero-bg、右下にタイトル
   ============================================ */
.bp-hero {
  position: relative;
  height: 50vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: hidden;
  margin: 0;
  background: var(--elcient-orange);
  border-radius: 0;
}
.bp-hero__band {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  will-change: clip-path;
}
.bp-hero__band > span {
  position: absolute;
  inset: 0;
  display: block;
  background: url('/images/brand/hero-bg.webp') center / 100% 100% no-repeat;
}
.bp-hero__band--top {
  clip-path: polygon(0 0, 0 0, 0 100%);
  -webkit-clip-path: polygon(0 0, 0 0, 0 100%);
  animation: bpHeroRevealTop 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
.bp-hero__band--bottom {
  clip-path: polygon(100% 0, 100% 100%, 100% 100%);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 100% 100%);
  animation: bpHeroRevealBottom 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
@keyframes bpHeroRevealTop {
  0%   {
    clip-path: polygon(0 0, 0 0, 0 100%);
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
  }
}
@keyframes bpHeroRevealBottom {
  0%   {
    clip-path: polygon(100% 0, 100% 100%, 100% 100%);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 100% 100%);
  }
  100% {
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }
}
.bp-hero__content {
  position: relative;
  z-index: 1;
  text-align: right;
  padding: 0 48px 60px 0;
}
.bp-hero__title {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(57.6px, 5vw, 96px);
  letter-spacing: 0.25em;
  line-height: 1;
  margin: 0 -0.25em 0 0;
  color: #fff;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(16px);
  animation: bpHeroFadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
}
.bp-hero__title-jp {
  display: block;
  font-family: var(--font-ja);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.4vw, 1.6rem);
  letter-spacing: 0.18em;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 -0.18em 1.2rem 0;
  opacity: 0;
  transform: translateY(14px);
  animation: bpHeroFadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
}
.bp-hero__lead {
  text-align: left;
  opacity: 0;
  transform: translateY(14px);
  animation: bpHeroFadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards;
}
.bp-hero__desc {
  opacity: 0;
  transform: translateY(14px);
  animation: bpHeroFadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}
@keyframes bpHeroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bp-hero__band--top {
    animation: none;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
  }
  .bp-hero__band--bottom {
    animation: none;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }
  .bp-hero__title,
  .bp-hero__lead,
  .bp-hero__desc {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
.bp-hero__intro {
  display: none;
}

/* SP: タイトル右下、リード/説明文を左上へ（ホテル準拠の 100svh） */
@media (max-width: 767px) {
  .bp-hero {
    margin: 0;
    height: 100svh;
    border-radius: 0;
    padding: 0 24px 60px;
    align-items: flex-end;
    justify-content: flex-end;
    position: relative;
  }
  .bp-hero__content {
    position: relative;
    text-align: right;
    padding: 0;
  }
  .bp-hero__title {
    font-size: clamp(34px, 9vw, 56px);
    letter-spacing: 0.08em;
    margin: 0 -0.08em 0 0;
    text-align: right;
    color: #fff;
    word-break: keep-all;
    overflow-wrap: normal;
    white-space: nowrap;
    max-width: 100%;
    line-height: 1.15;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  }
  .bp-hero__title-jp {
    font-size: 1.1rem;
    letter-spacing: 0.14em;
    margin: 0 -0.14em 0.7rem 0;
    text-align: right;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  }
  .bp-hero__intro {
    display: block;
    position: absolute;
    top: 120px;
    left: 24px;
    right: auto;
    margin: 0;
    padding: 0;
    width: 70%;
    z-index: 2;
    text-align: left;
  }
  .bp-hero__lead {
    font-family: var(--font-ja-serif); /* 見出し（ヒーローリード）: 游明朝 */
    font-size: clamp(1.6rem, 6.2vw, 2.4rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.6;
    color: #fff;
    margin: 0;
    white-space: nowrap;
  }
  .bp-hero__desc {
    font-size: 0.85rem;
    line-height: 2;
    color: rgba(255, 255, 255, 0.7);
    margin: 16px 0 0;
    letter-spacing: var(--ls-base);
  }
}

/* ============================================
   Brand Pages — 共通ユーティリティ
   （Concept / Membership / 今後のページで共有）
   ============================================ */
.cp-eyebrow{display:inline-flex;align-items:center;gap:16px;font-family:var(--font-en);font-style:italic;font-weight:400;font-size:11px;letter-spacing:0.4em;text-transform:uppercase;color:var(--elcient-orange);margin-bottom:24px}
.cp-eyebrow::before{content:"";width:48px;height:1px;background:linear-gradient(90deg,transparent 0%,var(--elcient-orange) 100%)}
.cp-eyebrow--center{display:flex;justify-content:center}
.cp-eyebrow--center::after{content:"";width:48px;height:1px;background:linear-gradient(90deg,var(--elcient-orange) 0%,transparent 100%)}

/* Each Hotel カード（複数ページで共有） */
.cp-hotels{padding:160px 0 200px;background:var(--elcient-cream);position:relative;isolation:isolate}
.cp-hotels::before{content:"";position:absolute;inset:clamp(32px,4vw,64px) clamp(16px,2.4vw,40px);background:var(--elcient-salmon);border-radius:clamp(20px,2.4vw,36px);z-index:-1}
.cp-hotels__head{text-align:center;max-width:680px;margin:0 auto 96px;padding:0 32px}
.cp-hotels__head .cp-eyebrow{margin:0 auto 24px}
.cp-hotels__title{font-family:var(--font-ja-serif);font-weight:500;font-size:clamp(36px,4.4vw,56px);line-height:1.5;letter-spacing:0.08em;color:var(--elcient-black);margin:0}
.cp-hotels__lead{font-family:var(--font-ja);margin:24px 0 0;font-size:15px;line-height:2;color:rgba(20,18,16,0.55);letter-spacing:0.04em}
.cp-hotels__grid{max-width:1320px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1fr 1fr;gap:32px}
.cp-hotel-card{position:relative;display:block;text-decoration:none;color:var(--elcient-black);transition:transform .8s cubic-bezier(.22,1,.36,1)}
.cp-hotel-card:hover{transform:translateY(-8px)}
.cp-hotel-card__photo{position:relative;aspect-ratio:5/6;overflow:hidden;background:var(--elcient-orange);border-radius:var(--radius-lg)}
.cp-hotel-card__photo img{width:100%;height:100%;object-fit:cover;transition:transform 8s ease-out, filter .6s}
.cp-hotel-card:hover .cp-hotel-card__photo img{transform:scale(1.04);filter:brightness(1.04)}
.cp-hotel-card__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(20,18,16,0.4) 100%);border-radius:var(--radius-lg);pointer-events:none}
.cp-hotel-card__city{position:absolute;left:0;right:0;bottom:48px;text-align:center;color:#fff;z-index:2;font-family:var(--font-en);font-weight:300;font-size:clamp(40px,4vw,64px);letter-spacing:0.32em}
.cp-hotel-card__num{position:absolute;top:36px;left:36px;color:rgba(255,255,255,0.9);font-family:var(--font-en);font-size:var(--text-xs);letter-spacing:0.32em;text-transform:uppercase;z-index:2}
.cp-hotel-card__num::before{content:"";display:inline-block;width:24px;height:1px;background:#fff;vertical-align:middle;margin-right:12px}
.cp-hotel-card__body{padding:32px 8px 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;position:relative}
.cp-hotel-card__name{font-family:var(--font-ja-serif);font-weight:500;font-size:24px;line-height:1.5;letter-spacing:0.04em;margin:0}
.cp-hotel-card__name-en{font-family:var(--font-en);font-style:italic;font-size:13px;color:rgba(20,18,16,0.55);font-weight:300;display:block;margin-top:6px;letter-spacing:0.04em}
.cp-hotel-card__accent{font-family:var(--font-ja-serif);font-size:var(--text-sm);color:var(--elcient-navy);margin:14px 0 0;letter-spacing:0.06em}
.cp-hotel-card__cta{font-family:var(--font-en);font-size:var(--text-xs);letter-spacing:0.18em;text-transform:uppercase;font-weight:500;color:var(--elcient-black);display:inline-flex;align-items:center;gap:8px;border-bottom:1px solid var(--elcient-black);padding-bottom:6px;transition:color .3s, border-color .3s}
.cp-hotel-card:hover .cp-hotel-card__cta{color:var(--elcient-orange);border-color:var(--elcient-orange)}
.cp-hotel-card__cta::after{content:"→";transition:transform .35s}
.cp-hotel-card:hover .cp-hotel-card__cta::after{transform:translateX(4px)}

@media (max-width:1024px){
  .cp-hotels__grid{grid-template-columns:1fr;gap:24px}
}
@media (max-width:767px){
  .cp-hotels{padding:64px 0 80px}
  .cp-hotels__head{margin-bottom:32px;padding:0 24px}
  .cp-hotels__title{font-size:clamp(22px,6vw,28px);letter-spacing:0.04em;white-space:nowrap}
  .cp-hotels__lead{font-size:13.5px;line-height:1.9;margin:18px 0 0}
  /* SP: 2カラム横並び */
  .cp-hotels__grid{grid-template-columns:1fr 1fr;gap:12px;padding:0 16px}
  .cp-hotel-card__photo{aspect-ratio:4/5;border-radius:14px}
  .cp-hotel-card__photo::after{border-radius:14px}
  .cp-hotel-card__city{bottom:18px;font-size:18px;letter-spacing:0.18em}
  .cp-hotel-card__num{top:14px;left:14px;font-size:9px;letter-spacing:0.22em}
  .cp-hotel-card__num::before{width:14px;margin-right:6px}
  .cp-hotel-card__body{padding:14px 4px 0;gap:10px}
  .cp-hotel-card__name{font-size:14px;line-height:1.45;letter-spacing:0.02em}
  .cp-hotel-card__name-en{font-size:10.5px;margin-top:4px;letter-spacing:0.02em}
  .cp-hotel-card__accent{font-size:11.5px;margin:8px 0 0;letter-spacing:0.04em}
  .cp-hotel-card__cta{font-size:10.5px;letter-spacing:0.14em;padding-bottom:4px;gap:6px}
}

/* ============================================
   共通FAQコンポーネント — ホテル側 .faq-item パターン1:1
   全ページ統一。Q+/-アイコン、ヘアライン下線、Jost Q label。
   ============================================ */
.faq-list{list-style:none;padding:0;margin:0;max-width:880px;margin-inline:auto;border-top:1px solid var(--wf-border)}
/* regulation セクション内では H2 下線を二重化しないため上罫を抑制 */
.regulation__section .faq-list,
.faq-list--bare{border-top:0}
.faq-list > li{margin:0}
.faq-item{border-bottom:1px solid var(--wf-border);padding:24px 0;display:block}
.faq-item > .faq-q{list-style:none;cursor:pointer}
.faq-item > .faq-q::-webkit-details-marker{display:none}
.faq-q{
  font-family:var(--font-body);
  font-size:var(--text-base);
  letter-spacing:var(--ls-base);
  color:var(--wf-text);
  display:flex;align-items:flex-start;gap:16px;
  position:relative;
  padding-right:40px;
  line-height:1.7;
}
.faq-q::before{
  content:"Q";
  font-family:var(--font-en);
  font-weight:500;
  font-size:var(--text-base);
  color:var(--elcient-orange);
  flex-shrink:0;
  line-height:1.7;
}
.faq-q::after{
  content:"";position:absolute;right:4px;top:50%;
  width:14px;height:14px;
  background:
    linear-gradient(currentColor,currentColor) center/14px 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 14px no-repeat;
  color:var(--wf-text);
  transform:translateY(-50%) rotate(0deg);
  transition:transform 0.5s var(--easing-default);
}
.faq-item[open] .faq-q::after{transform:translateY(-50%) rotate(45deg)}
.faq-a{
  font-family:var(--font-body);
  font-size:var(--text-base);
  letter-spacing:var(--ls-base);
  line-height:1.85;
  color:var(--wf-text);
  margin:14px 0 0;
  padding:0 40px 4px 32px;
  position:relative;
}
.faq-a::before{
  content:"A";
  position:absolute;left:0;top:0;
  font-family:var(--font-en);font-weight:500;font-size:var(--text-base);
  color:var(--elcient-navy);
  line-height:1.85;
}

/* セクション包み（共通） */
.faq-section{padding:140px var(--space-section-x);background:var(--elcient-cream)}
.faq-section--alt{background:var(--elcient-salmon)}
.faq-section__head{text-align:center;max-width:680px;margin:0 auto 64px}
.faq-section__head .cp-eyebrow{margin:0 auto 24px}
.faq-section__title{
  font-family:var(--font-display);font-weight:500;
  font-size:var(--text-heading);line-height:1.4;letter-spacing:0.06em;
  color:var(--elcient-black);margin:0;
}
@media (max-width:767px){
  .faq-section{padding:80px 24px}
}

/* ============================================
   Concept-style 編集誌レイアウト — 共有
   （Concept / Bestrate / 今後のエディトリアル系で再利用）
   ============================================ */
/* INTRO split + poem */
.cp-intro{padding:140px 32px 180px;position:relative;background:var(--elcient-cream);overflow:hidden}
.cp-intro::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#F58345 0%,#FAA84A 35%,#FDBA4D 70%,#FFFFFF 100%)}
.cp-intro__inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:120px;align-items:start}
.cp-intro__left{position:sticky;top:120px}
.cp-intro__prop{font-family:var(--font-display);font-weight:500;font-size:var(--text-heading);line-height:1.6;letter-spacing:0.08em;color:var(--elcient-black);margin:0 0 32px}
.cp-intro__prop em{font-style:normal;color:var(--elcient-orange)}
.cp-intro__prop-en{font-family:var(--font-en);font-style:italic;font-weight:300;font-size:18px;color:var(--elcient-navy);letter-spacing:0.04em;margin:0}
.cp-intro__poem{font-family:var(--font-display);font-weight:400;font-size:17px;line-height:2.5;letter-spacing:0.08em;color:var(--elcient-black)}
.cp-stanza{margin-bottom:40px}
.cp-stanza:last-of-type{margin-bottom:0}
.cp-lit{color:var(--elcient-orange)}
.cp-intro__closer{font-family:var(--font-display);font-style:italic;font-size:19px;color:var(--elcient-navy);line-height:1.9;border-left:2px solid var(--elcient-orange);padding-left:24px;margin:48px 0 0}

/* CHAPTER — Sticky photo + body */
.cp-chapter{padding:120px 48px;position:relative}
.cp-chapter--01{background:var(--elcient-cream)}
.cp-chapter--02{background:var(--elcient-salmon)}
.cp-chapter--03{background:var(--elcient-cream)}
.cp-chapter__inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;max-width:1320px;margin:0 auto;align-items:start}
.cp-chapter--reverse .cp-photo-wrap{order:2}
.cp-photo-wrap{position:sticky;top:120px}
.cp-photo{position:relative;overflow:hidden;background:var(--elcient-orange);border-radius:var(--radius-lg);aspect-ratio:4/5}
.cp-photo img{width:100%;height:100%;object-fit:cover;transition:transform 8s ease-out}
.cp-photo:hover img{transform:scale(1.04)}
.cp-photo::after{content:"";position:absolute;inset:auto auto 0 0;width:35%;height:6px;background:linear-gradient(90deg,#F58345,#FAA84A,#FDBA4D,#FFFFFF);border-bottom-left-radius:var(--radius-lg)}
.cp-text{padding:24px 0 80px}
.cp-num{font-family:var(--font-en);font-weight:300;font-size:clamp(80px,10vw,160px);line-height:0.9;color:var(--elcient-orange);letter-spacing:-0.04em;margin-bottom:24px}
.cp-num small{display:block;font-size:11px;font-weight:500;letter-spacing:0.32em;text-transform:uppercase;color:rgba(20,18,16,0.55);margin-top:18px}
.cp-en{font-family:var(--font-en);font-style:italic;font-weight:300;font-size:var(--text-lg);color:var(--elcient-navy);margin:0 0 32px;letter-spacing:0.04em}
.cp-title{font-family:var(--font-display);font-weight:500;font-size:var(--text-heading);line-height:1.5;letter-spacing:0.08em;margin:0 0 48px;color:var(--elcient-black)}
.cp-title em{font-style:normal;color:var(--elcient-orange)}
.cp-conj{display:block;font-size:0.55em;color:rgba(20,18,16,0.55);font-weight:400;margin-bottom:8px;letter-spacing:0.2em}
.cp-body{font-family:var(--font-body);font-size:15.5px;line-height:2.15;letter-spacing:0.06em;color:var(--elcient-black);max-width:520px}
.cp-body p{margin:0 0 28px}
.cp-body p:last-child{margin-bottom:0}
.cp-verse{font-family:var(--font-display);font-size:18px;line-height:2.1;letter-spacing:0.08em;color:var(--elcient-black);padding-left:20px;border-left:2px solid var(--elcient-orange);margin-bottom:36px}
.cp-verse p{margin:0 0 6px}
.cp-closing{font-family:var(--font-display);font-style:italic;font-size:17px;color:var(--elcient-navy);margin-top:32px;line-height:1.9;letter-spacing:0.06em}
.cp-keys{margin:40px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px;max-width:520px}
.cp-keys li{font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:0.12em;color:var(--elcient-orange);background:rgba(245,131,69,0.07);border:1px solid rgba(245,131,69,0.22);padding:6px 14px;border-radius:99px}

@media (max-width:1024px){
  .cp-intro__inner{grid-template-columns:1fr;gap:64px}
  .cp-intro__left{position:static}
  .cp-chapter__inner{grid-template-columns:1fr;gap:48px}
  .cp-chapter--reverse .cp-photo-wrap{order:0}
  .cp-photo-wrap{position:static}
  .cp-photo{aspect-ratio:4/3}
  .cp-text{padding:32px 0 0}
}
@media (max-width:767px){
  .cp-intro{padding:96px 24px 120px}
  .cp-chapter{padding:80px 24px}
  .cp-num{font-size:80px}
  .cp-title{font-size:32px}
}

/* ============================================
   編集誌的ディテール — Concept-style 強化（共通）
   ============================================ */

/* INTRO の縦罫線（控えめなヘアライン） */
.cp-intro--ruled .cp-intro__inner{position:relative}
.cp-intro--ruled .cp-intro__inner::before{
  content:"";position:absolute;left:50%;top:8%;bottom:8%;width:1px;
  background:rgba(20,18,16,0.08);
  pointer-events:none;
}
@media (max-width:1024px){
  .cp-intro--ruled .cp-intro__inner::before{display:none}
}

/* （章番号の色帯・ドロップキャップは過剰だったため撤去） */

/* プレース画像のラベル（編集誌風に磨く） */
.cp-photo--placeholder .cp-photo__label{font-size:9px;letter-spacing:0.4em;font-weight:500;opacity:0.7}
.cp-photo--placeholder .cp-photo__name{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(20px,2.2vw,28px);letter-spacing:0.05em;line-height:var(--lh-tight)}
.cp-photo--placeholder .cp-photo__ratio{font-size:9px;letter-spacing:0.32em;opacity:0.55;margin-top:4px;font-weight:500}

/* （プルクオートも過剰だったため撤去） */

/* ============================================
   c-button-line — ホテル側1:1（下線＋矢印） 共通
   ============================================ */
.c-button-line{
  display:inline-flex;align-items:center;
  padding:0 14px 6px 7px;
  position:relative;
  font-family:var(--font-en);font-size:var(--text-base);
  line-height:1.5;color:var(--elcient-black);text-decoration:none;
  transition:opacity 0.6s cubic-bezier(0.33,1,0.68,1);
}
.c-button-line::after{
  content:"";display:block;width:100%;height:1px;
  background-color:var(--elcient-black);
  position:absolute;bottom:0;left:0;
}
.c-button-line:hover{opacity:0.6;color:var(--elcient-orange)}
.c-button-line__arrow{
  display:inline-block;width:12px;height:11px;margin-left:14px;
  transition:padding-left 0.6s cubic-bezier(0.33,1,0.68,1);
}
.c-button-line__arrow svg{width:100%;height:100%;fill:var(--elcient-black);transition:fill 0.6s cubic-bezier(0.33,1,0.68,1)}
.c-button-line:hover .c-button-line__arrow{padding-left:10px}
.c-button-line:hover .c-button-line__arrow svg{fill:var(--elcient-orange)}

/* === ロールクリップ（中央領域：ナビ⇔フォーム） ===
   ナビ行は通常レイアウトでクリップの幅を確定、フォーム行は absolute で重ねる */
.dock-roll {
  order: 0;
  position: relative;
  overflow: hidden;
  height: 42px;
  min-width: 0;
}
.dock-roll__inner {
  position: relative;
  height: 42px;
}
.dock-roll__nav-row {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 42px;
  white-space: nowrap;
  transition: transform 0.55s cubic-bezier(0.5, 0, 0.24, 1), opacity 0.4s ease;
}
.dock-roll__form-row {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  height: 42px;
  white-space: nowrap;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.5, 0, 0.24, 1), opacity 0.4s ease;
}
.top-bar__dock.is-search-expanded .dock-roll__nav-row {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.top-bar__dock.is-search-expanded .dock-roll__form-row {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
/* === フォーム本体 === */
.sc-form {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}
.sc-form__field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 23px;
  border-radius:var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.sc-form__field + .sc-form__field {
  border-left: 1px solid rgba(21, 2, 1, 0.08);
  border-radius: 0 12px 12px 0;
}
.sc-form__field:first-of-type { padding-left: 4px; }
.sc-form__field:hover {
  background: rgba(245, 131, 69, 0.06);
}
.sc-form__field:focus-within {
  background: rgba(245, 131, 69, 0.08);
}
.sc-form__field:hover + .sc-form__field,
.sc-form__field:focus-within + .sc-form__field { border-left-color: transparent; }
.sc-form__label {
  font-family: var(--font-ja);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: rgba(21, 2, 1, 0.55);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.sc-form__field:hover .sc-form__label,
.sc-form__field:focus-within .sc-form__label {
  color: var(--elcient-orange, #f58345);
}
/* カスタム日付ボタン（type=date inputをhidden化、表示はbutton） */
.sc-date {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  font-family: var(--font-ja);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--elcient-black, #150201);
  font-weight: 600;
  padding: 0;
  outline: none;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1.2;
}
.sc-date__value { line-height: 1; }
.sc-date__weekday {
  font-family: var(--font-ja);
  font-size:var(--text-xxs);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(21, 2, 1, 0.55);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.sc-form__field:hover .sc-date__weekday,
.sc-form__field:focus-within .sc-date__weekday {
  color: var(--elcient-orange, #f58345);
}
.sc-form__field input[type="date"] {
  min-width: 78px;
}
.sc-form__field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.45;
  cursor: pointer;
  width: 12px;
  height: 12px;
  padding: 0;
  margin-left: 2px;
  transition: opacity 0.2s ease;
}
.sc-form__field:hover input[type="date"]::-webkit-calendar-picker-indicator,
.sc-form__field:focus-within input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 1;
}
.sc-form__field:hover input[type="date"]::-webkit-calendar-picker-indicator,
.sc-form__field:focus-within input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 1;
}
/* カスタムselect：trigger button */
.sc-form__field--select { position: relative; }
.sc-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  margin: 0;
}
.sc-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  padding: 0 16px 0 0;
  font-family: var(--font-ja);
  font-size: 13px;
  letter-spacing: 0.03em;
  font-weight: 600;
  color: var(--elcient-black, #150201);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  position: relative;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  outline: none;
}
.sc-select__caret {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  pointer-events: none;
  color: rgba(21, 2, 1, 0.55);
  transition: transform 0.2s ease, color 0.2s ease;
}
.sc-form__field:hover .sc-select__caret,
.sc-select[aria-expanded="true"] .sc-select__caret {
  color: var(--elcient-orange, #f58345);
}
.sc-select[aria-expanded="true"] .sc-select__caret {
  transform: translateY(-50%) rotate(180deg);
}

/* カスタムselect：dropdown menu */
.sc-select__menu {
  list-style: none;
  margin: 0;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(21, 2, 1, 0.08);
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(21, 2, 1, 0.14), 0 2px 6px rgba(21, 2, 1, 0.05);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.sc-select__menu li { padding: 0; margin: 0; }
.sc-select__menu[hidden] { display: none; }
.sc-select__menu li { list-style: none; }
.sc-select__option {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  padding: 7px 14px;
  font-family: var(--font-ja);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--elcient-black, #150201);
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
  font-variant-numeric: tabular-nums;
}
.sc-select__option:hover {
  background: rgba(245, 131, 69, 0.08);
}
.sc-select__option[aria-selected="true"] {
  background: rgba(245, 131, 69, 0.12);
  color: var(--elcient-orange, #f58345);
  font-weight: 600;
}

/* === 子供（カウンタ式ポップオーバー） === */
.sc-kids-popover {
  background: #fff;
  border: 1px solid rgba(21, 2, 1, 0.08);
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(21, 2, 1, 0.14), 0 2px 6px rgba(21, 2, 1, 0.05);
  padding: 14px 16px 14px;
  min-width: 280px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sc-kids-popover[hidden] { display: none; }
.sc-kids-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(21, 2, 1, 0.06);
}
.sc-kids-row:last-of-type { border-bottom: none; }
.sc-kids-row__text { display: flex; flex-direction: column; gap: 2px; }
.sc-kids-row__label {
  font-family: var(--font-ja);
  font-size: 13px;
  font-weight: 600;
  color: var(--elcient-black, #150201);
  letter-spacing: 0.04em;
}
.sc-kids-row__note {
  font-family: var(--font-ja);
  font-size: 10.5px;
  color: rgba(21, 2, 1, 0.55);
  letter-spacing: 0.04em;
}
.sc-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sc-counter__btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(21, 2, 1, 0.18);
  background: #fff;
  color: var(--elcient-black, #150201);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  padding: 0;
}
.sc-counter__btn svg { width: 14px; height: 14px; }
.sc-counter__btn:hover {
  background: var(--elcient-orange, #f58345);
  border-color: var(--elcient-orange, #f58345);
  color: #fff;
}
.sc-counter__num {
  min-width: 22px;
  text-align: center;
  font-family: var(--font-en);
  font-size:var(--text-sm);
  font-weight: 700;
  color: var(--elcient-black, #150201);
  font-variant-numeric: tabular-nums;
}
.sc-kids-apply {
  margin-top: 4px;
  border: none;
  border-radius: 999px;
  background: var(--elcient-orange, #f58345);
  color: #fff;
  font-family: var(--font-ja);
  font-size:var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 10px 0;
  cursor: pointer;
  transition: background 0.2s ease;
}
.sc-kids-apply:hover { background: #e07336; }

/* === カスタムカレンダー === */
.sc-cal {
  width: 312px;
  background: #fff;
  border: 1px solid rgba(21, 2, 1, 0.08);
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(21, 2, 1, 0.14), 0 2px 6px rgba(21, 2, 1, 0.05);
  padding: 14px 14px 12px;
  z-index: 1000;
  font-family: var(--font-ja);
}
.sc-cal[hidden] { display: none; }
.sc-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.sc-cal__heading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.sc-cal__target {
  font-family: var(--font-ja);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--elcient-orange, #f58345);
  text-transform: uppercase;
}
.sc-cal__title {
  font-family: var(--font-ja);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--elcient-black, #150201);
  text-align: center;
}
.sc-cal__nav {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(21, 2, 1, 0.12);
  background: #fff;
  color: rgba(21, 2, 1, 0.7);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sc-cal__nav svg { width: 14px; height: 14px; }
.sc-cal__nav:hover {
  background: var(--elcient-orange, #f58345);
  border-color: var(--elcient-orange, #f58345);
  color: #fff;
}
.sc-cal__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.sc-cal__wk {
  text-align: center;
  font-family: var(--font-ja);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(21, 2, 1, 0.55);
  padding: 6px 0;
}
.sc-cal__wk--sun { color: #d04a3b; }
.sc-cal__wk--sat { color: #2f6fd1; }
.sc-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.sc-cal__day {
  aspect-ratio: 1 / 1;
  width: 100%;
  border: none;
  background: transparent;
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--elcient-black, #150201);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-variant-numeric: tabular-nums;
  transition: background 0.15s ease, color 0.15s ease;
}
.sc-cal__day--out { visibility: hidden; cursor: default; }
.sc-cal__day--sun:not(.sc-cal__day--disabled):not(.sc-cal__day--selected) { color: #d04a3b; }
.sc-cal__day--sat:not(.sc-cal__day--disabled):not(.sc-cal__day--selected) { color: #2f6fd1; }
.sc-cal__day--disabled {
  color: rgba(21, 2, 1, 0.25);
  cursor: not-allowed;
}
.sc-cal__day--today {
  box-shadow: inset 0 0 0 1px rgba(245, 131, 69, 0.5);
}
.sc-cal__day:hover:not(:disabled):not(.sc-cal__day--selected) {
  background: rgba(245, 131, 69, 0.12);
  color: var(--elcient-orange, #f58345);
}
.sc-cal__day--selected {
  background: var(--elcient-orange, #f58345);
  color: #fff;
  font-weight: 700;
}

/* 日付セル：日付＋曜日 */
.sc-form__date-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.sc-form__weekday {
  font-family: var(--font-ja);
  font-size:var(--text-xxs);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(21, 2, 1, 0.55);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.sc-form__field:hover .sc-form__weekday,
.sc-form__field:focus-within .sc-form__weekday {
  color: var(--elcient-orange, #f58345);
}

/* 泊数バッジ */
.sc-form__nights {
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 4px 11px;
  margin: 0 7px;
  border-radius: 999px;
  background: rgba(245, 131, 69, 0.1);
  font-family: var(--font-en);
  color: var(--elcient-orange, #f58345);
  line-height: 1;
}
.sc-form__nights-num {
  font-size:var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sc-form__nights-unit {
  font-family: var(--font-ja);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* フォーム右端：検索する + 法人会員 のグループ */
.sc-form__tail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* === 共通pill：検索する / 法人会員 / 閉じる の3兄弟 === */
.sc-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  height: 34px;
  min-width: 110px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-ja);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.sc-pill__icon { width: 13px; height: 13px; flex-shrink: 0; }
.sc-pill__text { line-height: 1; }

/* primary：橙フィル */
.sc-pill--primary {
  background: var(--elcient-orange, #f58345);
  color: #fff;
  box-shadow: 0 2px 8px rgba(245, 131, 69, 0.28);
}
.sc-pill--primary:hover {
  background: #e07336;
  box-shadow: 0 4px 12px rgba(245, 131, 69, 0.42);
}

/* ghost-orange：橙アウトライン */
.sc-pill--ghost-orange {
  border-color: rgba(245, 131, 69, 0.4);
  color: var(--elcient-orange, #f58345);
}
.sc-pill--ghost-orange:hover {
  background: rgba(245, 131, 69, 0.1);
  border-color: var(--elcient-orange, #f58345);
}

/* === 右固定: トグルボタン（閉時=空室検索/橙、開時=閉じる/ゴースト） === */
.sc-action {
  order: 10;
  position: relative;
  /* 閉時のデフォルト：primary（橙フィル） */
  background: var(--elcient-orange, #f58345);
  color: #fff;
  box-shadow: 0 2px 8px rgba(245, 131, 69, 0.28);
}
.sc-action:hover {
  background: #e07336;
  box-shadow: 0 4px 12px rgba(245, 131, 69, 0.4);
}
.sc-action__face {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.sc-action__face--close {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}
/* 開時：sc-action を ghost-neutral に変身 */
.top-bar__dock.is-search-expanded .sc-action {
  background: transparent;
  color: rgba(21, 2, 1, 0.7);
  border-color: rgba(21, 2, 1, 0.18);
  box-shadow: none;
}
.top-bar__dock.is-search-expanded .sc-action:hover {
  background: rgba(21, 2, 1, 0.05);
  color: var(--elcient-black, #150201);
  border-color: rgba(21, 2, 1, 0.3);
  box-shadow: none;
}
.top-bar__dock.is-search-expanded .sc-action__face--open {
  opacity: 0;
  transform: scale(0.92);
}
.top-bar__dock.is-search-expanded .sc-action__face--close {
  opacity: 1;
  transform: scale(1);
}

/* sc-close 廃止：sc-action がトグル（空室検索 ⇄ 閉じる）として両役を担う */

/* === 展開時：ロールでナビ非表示にロールするためdisplay制御不要 === */

/* === タブレット未満：検索CTAをドック内から非表示 === */
/* SP用：dock-roll の高さ/幅制限を解除（PC roll演出用の制約はSPで不要） */
@media (max-width: 767px) {
  .dock-roll {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .dock-roll__inner, .dock-roll__nav-row {
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  /* body[data-nav="o"] の白い背景を SP では強制的に上書き */
  body[data-nav="o"] .top-bar__dock,
  body .top-bar__dock {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
  }
}

/* SP専用：下部固定の予約CTA（横長フルワイド／常時表示） */
.sc-sp-cta {
  display: none;
}
@media (max-width: 767px) {
  .sc-sp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    z-index: 1300;
    min-height: 56px;
    padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px));
    border: none;
    border-radius: 0;
    background: var(--elcient-orange, #f58345);
    color: #fff;
    font-family: var(--font-ja);
    font-size:var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.18em;
    cursor: pointer;
    box-shadow: 0 -4px 12px rgba(21, 2, 1, 0.08);
    white-space: nowrap;
    border-radius: 18px 0 0 0;
    transition: background 0.25s ease;
  }
  .sc-sp-cta__face {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .sc-sp-cta__face--corp { display: none; }
  .sc-sp-cta.is-corp .sc-sp-cta__face--default { display: none; }
  .sc-sp-cta.is-corp .sc-sp-cta__face--corp { display: inline-flex; }
  .sc-sp-cta.is-corp {
    background: var(--elcient-cream, var(--elcient-cream));
    color: var(--elcient-orange, #f58345);
    border-top: 1.5px solid var(--elcient-orange, #f58345);
    border-left: 1.5px solid var(--elcient-orange, #f58345);
    border-right: none;
    border-bottom: none;
    box-shadow: none;
    border-radius: 18px 0 0 0;
  }
  /* 左側の縦ボーダーは18pxのカーブ部分のみ見せて、その下はクリームで塗りつぶし */
  .sc-sp-cta.is-corp::after {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 0;
    width: 2px;
    background: var(--elcient-cream, var(--elcient-cream));
    pointer-events: none;
  }
  .sc-sp-cta svg { width: 16px; height: 16px; }
  .sc-sp-cta__text { line-height: 1; }
  /* CTA分の下マージンを body に確保 */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  /* メニュー開いている時はSPCTAも退避 */
  html.menu-is-open .sc-sp-cta { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
}

/* === SP検索シート === */
.sc-sp-sheet { display: none; }
@media (max-width: 767px) {
  .sc-sp-sheet {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1200;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.55s ease, visibility 0s linear 0s;
  }
  .sc-sp-sheet[hidden] {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.55s ease, visibility 0s linear 0.55s;
  }
  .sc-sp-sheet__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    background: rgba(21, 2, 1, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  /* CTA背後のカーブ領域はCTA自身の cream bg でカバーされるので不要 */
  .sc-sp-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--elcient-cream, var(--elcient-cream));
    border-radius: 20px 0 0 0;
    padding: 16px 20px calc(16px + 56px + env(safe-area-inset-bottom, 0px));
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transform: translateY(0);
    transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .sc-sp-sheet[hidden] .sc-sp-sheet__panel {
    transform: translateY(100%);
  }
  .sc-sp-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 4px;
  }
  .sc-sp-sheet__title {
    font-family: var(--font-ja);
    font-size:var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--elcient-black, #150201);
  }
  .sc-sp-sheet__close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(21, 2, 1, 0.12);
    background: transparent;
    color: rgba(21, 2, 1, 0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }
  .sc-sp-sheet__close svg { width: 12px; height: 12px; }
  .sc-sp-segment {
    display: flex;
    gap: 6px;
    padding: 4px;
    background: rgba(21, 2, 1, 0.04);
    border-radius: 999px;
    margin-bottom: 4px;
  }
  .sc-sp-segment__btn {
    flex: 1;
    padding: 10px 12px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(21, 2, 1, 0.6);
    font-family: var(--font-ja);
    font-size:var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }
  .sc-sp-segment__btn.is-active {
    background: #fff;
    color: var(--elcient-orange, #f58345);
    box-shadow: 0 2px 6px rgba(21, 2, 1, 0.06);
  }
  .sc-sp-sheet__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .sc-sp-sheet__body[hidden] { display: none; }
  .sc-sp-grid { display: grid; gap: 6px; }
  .sc-sp-grid--2 { grid-template-columns: 1fr 1fr; }
  .sc-sp-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
  .sc-sp-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid rgba(21, 2, 1, 0.08);
    border-radius:var(--radius-md);
    cursor: pointer;
    font-family: var(--font-ja);
    text-align: left;
    transition: border-color 0.15s ease;
    min-width: 0;
  }
  .sc-sp-cell:hover { border-color: rgba(245, 131, 69, 0.4); }
  .sc-sp-cell__label {
    font-size:var(--text-xxs);
    color: rgba(21, 2, 1, 0.55);
    letter-spacing: 0.1em;
  }
  .sc-sp-cell__value {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--elcient-black, #150201);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
  }
  .sc-sp-cell__weekday {
    font-size:var(--text-xxs);
    font-weight: 500;
    color: rgba(21, 2, 1, 0.55);
  }
  .sc-sp-sheet__foot {
    padding-top: 4px;
  }
  .sc-sp-submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    border: none;
    border-radius: 999px;
    background: var(--elcient-orange, #f58345);
    color: #fff;
    font-family: var(--font-ja);
    font-size:var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.16em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(245, 131, 69, 0.32);
  }
  .sc-sp-submit svg { width: 16px; height: 16px; }
}

@media (max-width: 1279px) {
  .sc-form, .sc-action { display: none !important; }
}


/* Tripla Bot のカラーカスタマイズは CM 側（cm.tripla.ai）で設定する */



/* ドロワー：予約の確認・変更・キャンセル リンク */
.u-drawer_reservation-link {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 0;
  font-family: var(--font-ja);
  font-size:var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--elcient-orange, #f58345);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 131, 69, 0.4);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.u-drawer_reservation-link:hover {
  color: var(--elcient-black, #150201);
  border-color: var(--elcient-black, #150201);
}






/* ROOMS パネル：アメニティ関連リンク */
.rp-panel__amenities-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.rp-panel__amenities-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ja);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--elcient-orange, #f58345);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid rgba(245, 131, 69, 0.3);
  align-self: flex-start;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.rp-panel__amenities-link:hover {
  color: var(--elcient-black, #150201);
  border-color: var(--elcient-black, #150201);
}



/* ROOMS パネル開時：背景スクロール抑止（body/htmlロック） */
html:has(body.rp-open),
body.rp-open {
  overflow: hidden !important;
  touch-action: none;
  overscroll-behavior: contain;
}



/* SP予約CTA: ヒーロー表示中は隠す。スクロールで下からふわっと出現 */
@media (max-width: 767px) {
  .sc-sp-cta {
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  }
  .sc-sp-cta.is-hidden-by-hero {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }
}

/* SP: シート展開中にカレンダー / セレクト / 子供ポップオーバーをシートより上に表示 */
@media (max-width: 767px) {
  .sc-cal,
  .sc-select__menu,
  .sc-kids-popover { z-index: 1400; }
}

/* SP予約シート開時はTriplaチャットボットを非表示（必要時のみ） */
body.sc-sp-sheet-open #tripla-app,
body.sc-sp-sheet-open #tripla-chat-circle-icon,
body.sc-sp-sheet-open #tripla-icon-message,
body.sc-sp-sheet-open .triplabot-icon-container {
  display: none !important;
}


/* ブランドサイト: ナビがフォームより広い場合の隙間補填 */
.sc-form__field {
  flex: 1 1 auto;
  min-width: 0;
}


/* ============================================
   i18n: 非 JA で日本語前提の white-space:nowrap を解除
   英文・長い翻訳テキストの横はみ出しを防ぐ
   ============================================ */
html:not([lang="ja"]) .br-promise__title span,
html:not([lang="ja"]) .br-open__tag span,
html:not([lang="ja"]) .cn-intro__title,
html:not([lang="ja"]) .cn-ch02__title,
html:not([lang="ja"]) .mb-intro__title,
html:not([lang="ja"]) .br-open__tag {
  white-space: normal;
}

/* i18n: 非 JA の release ページで JA 日本語タイトルを視覚的に弱める
   (PDF 本体が日本語であることは languageNote で明示済) */
html:not([lang="ja"]) .rl-release__title {
  font-size: 12px;
  color: rgba(20, 2, 1, 0.5);
  line-height: 1.55;
  letter-spacing: 0.04em;
}