/* =========================================================
   KYABEL VELVET SOCIETY (SITE 49)
   会員制ソーシャルクラブ / 映画的フルスクリーン章立て / 暗(ボルドー)
   ダークボルドー #3a1420 × ブラック #100d0f × ペールピンク #e8c7cd × シルバー #b9b6bd
   シグネチャ = CULTURE / DINING / MUSIC / PRIVATE ROOM の章切替（映画的クロスフェード）
   display = Bodoni Moda。静けさ・文化性・プライバシー。黒＋金に寄せず、ボルドー×ベルベット布の質感で。
   ========================================================= */

/* ---------- tokens ---------- */
:root {
  --bg: #100d0f;          /* ブラック */
  --bg-1: #17101300;
  --bordeaux: #3a1420;    /* ダークボルドー */
  --bordeaux-2: #4a1a2a;
  --bordeaux-deep: #280d16;
  --panel: #1a1015;       /* パネル面 */
  --panel-2: #22151b;     /* 一段明るい面 */
  --line: #3a2630;        /* 罫線 */
  --line-2: #55323f;
  --pink: #e8c7cd;        /* ペールピンク（見出し・アクセント） */
  --pink-soft: #f0dbdf;
  --silver: #b9b6bd;      /* シルバー（補足・罫） */
  --text: #ece2e4;        /* 本文（ボルドー地で高コントラスト） */
  --muted: #bdb2b6;       /* 補足（暗地で4.5:1以上） */
  --gold: #c9a86a;        /* ごく控えめな真鍮アクセント（面積小） */

  --sans: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --disp: "Bodoni Moda", "Didot", "Times New Roman", "Noto Serif JP", serif;

  --wrap: 1120px;
  --topbar-h: 56px;
  --mcta-h: 62px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.85;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--mcta-h) + env(safe-area-inset-bottom));
}
/* 背景: 静かなベルベットの襞（面全体・静止） */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(90,31,49,.42), transparent 60%),
    radial-gradient(90% 70% at 50% 120%, rgba(58,20,32,.34), transparent 62%),
    repeating-linear-gradient(90deg, rgba(233,199,205,.014) 0 2px, transparent 2px 46px);
  background-color: var(--bg);
}
@media (min-width: 960px) { body { padding-bottom: 0; } }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 1px; }
body.is-locked { overflow: hidden; }

/* ---------- 共通: eyebrow / 見出し ---------- */
.eyebrow {
  display: inline-block; font-family: var(--disp); font-style: italic;
  font-size: 14px; letter-spacing: .16em; color: var(--pink);
  opacity: .9; margin-bottom: 10px;
}
.eyebrow::before { content: "— "; color: var(--silver); opacity: .7; }

/* ---------- placeholder ---------- */
.ph { position: relative; overflow: hidden; margin: 0; background: var(--bordeaux-deep); border: 1px solid var(--line); }
.ph > img { width: 100%; height: 100%; object-fit: cover; }
.ph[data-ratio="16x9"] { aspect-ratio: 16 / 9; }
.ph[data-ratio="21x9"] { aspect-ratio: 21 / 9; }
.ph[data-ratio="3x2"] { aspect-ratio: 3 / 2; }
.ph[data-ratio="3x4"] { aspect-ratio: 3 / 4; }
.ph[data-ratio="2x3"] { aspect-ratio: 2 / 3; }
.ph[data-ratio="1x1"] { aspect-ratio: 1 / 1; }
.ph__label {
  position: absolute; left: 10px; bottom: 8px; z-index: 2;
  font-family: var(--disp); font-size: 11px; letter-spacing: .12em;
  color: var(--silver); opacity: 0; pointer-events: none;
}
.ph.is-broken { display: grid; place-content: center;
  background: repeating-linear-gradient(135deg, var(--bordeaux-deep) 0 12px, var(--panel) 12px 24px); }
.ph.is-broken > img { display: none; }
.ph.is-broken .ph__label { opacity: .8; position: static; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 12px 26px;
  font-family: var(--disp); font-size: 15px; font-weight: 500; letter-spacing: .05em;
  border: 1px solid transparent; border-radius: 2px;
  transition: transform .2s var(--ease), box-shadow .3s, background .3s, color .3s, border-color .3s;
  text-align: center; line-height: 1.3;
}
.btn--solid { background: var(--pink); color: #2a0f18; }
.btn--solid:hover { background: var(--pink-soft); transform: translateY(-1px); box-shadow: 0 8px 26px rgba(233,199,205,.16); }
.btn--ghost { background: transparent; color: var(--pink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--pink); background: rgba(233,199,205,.06); }
.btn--block { width: 100%; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ============================================================
   モバイルヘッダー
   ============================================================ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120; height: var(--topbar-h);
  background: rgba(16,13,15,.82); backdrop-filter: saturate(130%) blur(12px);
  border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top);
}
.topbar__inner { height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
.topbar__toggle { width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; }
.topbar__toggle span { display: block; width: 22px; height: 1.5px; background: var(--pink); transition: transform .3s, opacity .3s; }
.topbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.topbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.topbar__logo { font-family: var(--disp); font-size: 17px; font-weight: 500; letter-spacing: .14em; color: var(--pink); }
.topbar__cta {
  min-height: 40px; display: inline-flex; align-items: center; padding: 0 16px;
  font-family: var(--disp); font-size: 13px; letter-spacing: .06em;
  border: 1px solid var(--line-2); color: var(--pink); border-radius: 2px;
}
@media (min-width: 960px) { .topbar { display: none; } }

/* ---------- skip link ---------- */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 300; background: var(--pink); color: #2a0f18;
  padding: 10px 16px; font-size: 14px; font-weight: 600; transform: translateY(-160%); transition: transform .2s;
}
.skip-link:focus { transform: translateY(0); }

/* ============================================================
   ドロワー
   ============================================================ */
.drawer { position: fixed; inset: 0; z-index: 200; background: rgba(8,5,7,.66); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.drawer[aria-hidden="false"] { opacity: 1; visibility: visible; }
.drawer__panel {
  position: absolute; top: 0; left: 0; bottom: 0; width: min(88vw, 358px);
  background: var(--panel); border-right: 1px solid var(--line);
  padding: calc(env(safe-area-inset-top) + 26px) 24px calc(env(safe-area-inset-bottom) + 26px);
  overflow-y: auto; transform: translateX(-100%); transition: transform .34s var(--ease);
  display: flex; flex-direction: column; gap: 18px;
}
.drawer[aria-hidden="false"] .drawer__panel { transform: translateX(0); }
.drawer__brand { font-family: var(--disp); font-size: 24px; font-weight: 500; letter-spacing: .1em; line-height: 1.15; color: var(--pink); }
.drawer__brand span { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: .04em; color: var(--muted); margin-top: 6px; }
.drawer__nav { list-style: none; display: flex; flex-direction: column; }
.drawer__nav a { display: flex; align-items: baseline; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--line); }
.drawer__nav a .en { font-family: var(--disp); font-size: 15px; letter-spacing: .08em; color: var(--pink); min-width: 116px; }
.drawer__nav a .ja { font-size: 13px; color: var(--muted); }
.drawer__nav a[aria-current="page"] { background: rgba(233,199,205,.06); }
.drawer__nav a[aria-current="page"] .en { color: var(--pink-soft); }
.drawer__info { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.drawer__tel { font-family: var(--disp); font-size: 22px; color: var(--pink); letter-spacing: .04em; }
.drawer__sns { display: flex; gap: 14px; }
.drawer__sns a { font-family: var(--disp); font-size: 13px; letter-spacing: .08em; color: var(--silver); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }

/* ============================================================
   デスクトップ上部バー
   ============================================================ */
.deckbar { display: none; }
@media (min-width: 960px) {
  .deckbar {
    display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 120;
    background: rgba(16,13,15,.6); backdrop-filter: saturate(130%) blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .deckbar__inner { max-width: var(--wrap); margin: 0 auto; height: 68px; display: flex; align-items: center; gap: 28px; padding: 0 28px; }
  .deckbar__logo { font-family: var(--disp); font-size: 20px; letter-spacing: .12em; color: var(--silver); }
  .deckbar__logo b { color: var(--pink); font-weight: 500; }
  .deckbar__nav { margin-left: auto; display: flex; gap: 22px; }
  .deckbar__nav a { font-family: var(--disp); font-size: 14px; letter-spacing: .08em; color: var(--muted); position: relative; padding: 4px 0; transition: color .25s; }
  .deckbar__nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--pink); transition: width .28s var(--ease); }
  .deckbar__nav a:hover { color: var(--pink); }
  .deckbar__nav a:hover::after { width: 100%; }
  .deckbar__cta { min-height: 42px; padding: 0 20px; font-family: var(--disp); font-size: 14px; letter-spacing: .06em; border: 1px solid var(--line-2); color: var(--pink); border-radius: 2px; transition: background .25s, border-color .25s; }
  .deckbar__cta:hover { background: rgba(233,199,205,.07); border-color: var(--pink); }
}

/* ============================================================
   HERO（映画的フルスクリーン）
   ============================================================ */
.hero { position: relative; min-height: 92svh; display: flex; align-items: flex-end; overflow: hidden; padding-top: var(--topbar-h); }
@media (min-width: 960px) { .hero { min-height: 100svh; align-items: center; padding-top: 68px; } }
.hero__bg { position: absolute; inset: 0; margin: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg.is-broken { background: linear-gradient(160deg, var(--bordeaux), var(--bg)); }
.hero__bg.is-broken img { display: none; }
.hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(16,13,15,.5) 0%, rgba(16,13,15,.15) 30%, rgba(16,13,15,.66) 78%, rgba(16,13,15,.92) 100%),
    radial-gradient(90% 80% at 20% 90%, rgba(40,13,22,.7), transparent 60%);
}
.hero__inner { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; width: 100%; padding: 0 22px 68px; }
@media (min-width: 960px) { .hero__inner { padding: 0 28px; } }
.hero__eyebrow { display: inline-block; font-family: var(--disp); font-style: italic; font-size: 14px; letter-spacing: .14em; color: var(--pink); margin-bottom: 14px; }
.hero__logo {
  font-family: var(--disp); font-weight: 500; letter-spacing: .04em; line-height: .98; color: var(--pink-soft);
  font-size: clamp(38px, 10.5vw, 104px);
}
.hero__logo-k { display: block; font-size: clamp(13px, 2.6vw, 18px); letter-spacing: .5em; color: var(--silver); margin-bottom: 12px; font-weight: 400; }
.hero__copy { font-family: var(--disp); font-style: italic; font-size: clamp(17px, 3vw, 24px); color: var(--pink); margin-top: 18px; }
.hero__sub { max-width: 46ch; font-size: 15px; color: var(--text); margin-top: 12px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
.hero__meta div { display: flex; flex-direction: column; gap: 2px; }
.hero__meta dt { font-family: var(--disp); font-size: 11px; letter-spacing: .16em; color: var(--silver); }
.hero__meta dd { font-size: 14px; color: var(--text); }
.hero__scroll { position: absolute; z-index: 3; right: 22px; bottom: 22px; display: none; flex-direction: column; align-items: center; gap: 8px; color: var(--silver); }
@media (min-width: 960px) { .hero__scroll { display: inline-flex; } }
.hero__scroll-l { font-family: var(--disp); font-size: 11px; letter-spacing: .2em; }
.hero__scroll-a { width: 1px; height: 44px; background: linear-gradient(var(--silver), transparent); position: relative; overflow: hidden; }
.hero__scroll-a::after { content: ""; position: absolute; top: -50%; left: 0; width: 1px; height: 50%; background: var(--pink); animation: scrolldot 1.9s var(--ease) infinite; }
@keyframes scrolldot { 0% { top: -50%; } 60%,100% { top: 100%; } }
@media (prefers-reduced-motion: reduce) { .hero__scroll-a::after { animation: none; top: 0; } }

/* ============================================================
   章切替（シグネチャ）
   ============================================================ */
.chapters { max-width: var(--wrap); margin: 0 auto; padding: clamp(56px, 9vw, 100px) 22px clamp(40px, 6vw, 72px); }
@media (min-width: 960px) { .chapters { padding-left: 28px; padding-right: 28px; } }
.chapters__head { max-width: 62ch; margin-bottom: 30px; }
.chapters__title { font-family: var(--disp); font-weight: 500; font-size: clamp(26px, 5vw, 46px); line-height: 1.14; color: var(--pink-soft); letter-spacing: .02em; }
.chapters__lead { font-size: 15px; color: var(--muted); margin-top: 14px; max-width: 52ch; }
.chapters__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
@media (min-width: 720px) { .chapters__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ch-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px 16px; border: 1px solid var(--line); background: rgba(26,16,21,.5);
  border-radius: 3px; transition: border-color .28s, background .28s, transform .2s var(--ease);
}
.ch-tab__no { font-family: var(--disp); font-size: 12px; letter-spacing: .12em; color: var(--silver); opacity: .8; }
.ch-tab__en { font-family: var(--disp); font-size: 17px; letter-spacing: .08em; color: var(--text); }
.ch-tab__ja { font-size: 12px; color: var(--muted); }
.ch-tab:hover { border-color: var(--line-2); background: rgba(34,21,27,.7); }
.ch-tab[aria-selected="true"] { border-color: var(--pink); background: rgba(58,20,32,.6); }
.ch-tab[aria-selected="true"] .ch-tab__en { color: var(--pink-soft); }
.ch-tab[aria-selected="true"] .ch-tab__no { color: var(--pink); opacity: 1; }

.chapters__stage { position: relative; min-height: clamp(520px, 76svh, 720px); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--bordeaux-deep); }
.ch-panel { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility .7s; display: flex; align-items: flex-end; }
.ch-panel.is-active { opacity: 1; visibility: visible; position: relative; }
@media (prefers-reduced-motion: reduce) { .ch-panel { transition: none; } }
.ch-panel__bg { position: absolute; inset: 0; margin: 0; z-index: 0; }
.ch-panel__bg img { width: 100%; height: 100%; object-fit: cover; }
.ch-panel__bg.is-broken { background: linear-gradient(160deg, var(--bordeaux), var(--bg)); }
.ch-panel__bg.is-broken img { display: none; }
.ch-panel__veil { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(16,13,15,.2) 0%, rgba(16,13,15,.2) 34%, rgba(16,13,15,.78) 82%, rgba(16,13,15,.95) 100%),
              linear-gradient(90deg, rgba(40,13,22,.78) 0%, transparent 66%); }
.ch-panel__body { position: relative; z-index: 2; padding: clamp(24px, 4vw, 46px); max-width: 620px; }
.ch-panel__no { font-family: var(--disp); font-size: 12px; letter-spacing: .22em; color: var(--silver); }
.ch-panel__en { font-family: var(--disp); font-size: clamp(13px, 2.4vw, 16px); letter-spacing: .3em; color: var(--pink); margin-top: 8px; }
.ch-panel__ja { font-family: var(--disp); font-weight: 500; font-size: clamp(28px, 6vw, 52px); line-height: 1.08; color: var(--pink-soft); margin-top: 6px; }
.ch-panel__lead { font-family: var(--disp); font-style: italic; font-size: clamp(16px, 2.6vw, 21px); color: var(--pink); margin-top: 14px; }
.ch-panel__text { font-size: 15px; color: var(--text); margin-top: 12px; max-width: 44ch; }
.ch-panel__points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 18px; }
.ch-panel__points li { font-size: 12.5px; letter-spacing: .02em; color: var(--silver); border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 13px; background: rgba(16,13,15,.4); }
.chapters__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.chapters__prev, .chapters__next { min-height: 44px; padding: 8px 16px; font-family: var(--disp); font-size: 14px; letter-spacing: .06em; color: var(--pink); border: 1px solid var(--line-2); border-radius: 2px; transition: background .25s, border-color .25s; }
.chapters__prev:hover, .chapters__next:hover { background: rgba(233,199,205,.06); border-color: var(--pink); }
.chapters__count { font-family: var(--disp); font-size: 13px; letter-spacing: .1em; color: var(--silver); }

/* ============================================================
   セクション共通
   ============================================================ */
.sec { max-width: var(--wrap); margin: 0 auto; padding: clamp(52px, 8vw, 92px) 22px; }
@media (min-width: 960px) { .sec { padding-left: 28px; padding-right: 28px; } }
.sec-head { max-width: 62ch; margin-bottom: 30px; }
.sec-head__t { font-family: var(--disp); font-weight: 500; font-size: clamp(24px, 4.4vw, 40px); line-height: 1.16; color: var(--pink-soft); letter-spacing: .02em; }
.sec-head__lead { font-size: 15px; color: var(--muted); margin-top: 12px; max-width: 54ch; }
.sec-more { margin-top: 28px; }
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- MEMBERSHIP ---------- */
.sec--membership { border-top: 1px solid var(--line); }
.mem { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
@media (min-width: 900px) { .mem { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 40px; align-items: start; } }
.mem__card-ph { border-radius: 4px; }
.mem__card-note { font-size: 14px; color: var(--muted); margin-top: 14px; }
.mem__tiers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px) { .mem__tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tier { position: relative; border: 1px solid var(--line); border-radius: 4px; padding: 22px 18px; background: rgba(26,16,21,.5); display: flex; flex-direction: column; }
.tier--feat { border-color: var(--pink); background: rgba(58,20,32,.42); }
.tier__flag { position: absolute; top: -11px; left: 16px; font-family: var(--disp); font-size: 11px; letter-spacing: .1em; color: #2a0f18; background: var(--pink); padding: 2px 10px; border-radius: 999px; }
.tier__en { font-family: var(--disp); font-size: 20px; letter-spacing: .1em; color: var(--pink-soft); }
.tier__ja { font-size: 13px; color: var(--silver); margin-bottom: 10px; }
.tier__sum { font-size: 14px; color: var(--text); }
.tier__benes { list-style: none; margin: 14px 0; display: flex; flex-direction: column; gap: 7px; }
.tier__benes li { position: relative; padding-left: 18px; font-size: 13.5px; color: var(--muted); }
.tier__benes li::before { content: "◇"; position: absolute; left: 0; color: var(--pink); font-size: 11px; top: 2px; }
.tier__note { font-size: 12px; color: var(--silver); margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); }
.mem__fee { margin-top: 26px; }
.fee { border: 1px solid var(--line); border-radius: 4px; padding: 22px; background: rgba(16,13,15,.4); }
.fee__h { font-family: var(--disp); font-size: 14px; letter-spacing: .12em; color: var(--pink); display: flex; align-items: center; gap: 12px; }
.fee__state { font-family: var(--sans); font-size: 11px; letter-spacing: .04em; color: var(--silver); border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 10px; }
.fee__state--open { color: #2a0f18; background: var(--pink); border-color: var(--pink); }
.fee__list { margin: 14px 0 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 640px) { .fee__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.fee__list div { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .fee__list div { border-bottom: 0; } }
.fee__list dt { font-size: 12px; letter-spacing: .08em; color: var(--silver); }
.fee__list dd { font-size: 16px; color: var(--text); }
.fee__note { font-size: 12.5px; color: var(--muted); }

/* ---------- CONCIERGE ---------- */
.sec--concierge { border-top: 1px solid var(--line); }
.conc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
@media (min-width: 860px) { .conc { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 44px; align-items: center; } }
.conc__ph { border-radius: 4px; }
.conc__title { font-family: var(--disp); font-weight: 500; font-style: italic; font-size: clamp(22px, 4vw, 34px); line-height: 1.2; color: var(--pink-soft); }
.conc__text { font-size: 15px; color: var(--text); margin-top: 14px; max-width: 52ch; }
.conc__services { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 22px; }
@media (min-width: 560px) { .conc__services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.conc-svc { border-left: 1px solid var(--line-2); padding: 4px 0 4px 16px; }
.conc-svc__t { font-family: var(--disp); font-size: 15px; letter-spacing: .04em; color: var(--pink); }
.conc-svc__b { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ---------- ROOMS ---------- */
.sec--rooms { border-top: 1px solid var(--line); }
.rooms { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 720px) { .rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.room { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: rgba(26,16,21,.4); display: flex; flex-direction: column; }
.room__ph .ph { border: 0; border-bottom: 1px solid var(--line); }
.room__body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.room__name { font-family: var(--disp); font-weight: 500; font-size: 20px; letter-spacing: .06em; color: var(--pink-soft); line-height: 1.2; }
.room__name span { display: block; font-family: var(--sans); font-size: 12px; letter-spacing: 0; color: var(--silver); margin-top: 2px; }
.room__spec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.room__spec div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.room__spec dt { font-size: 12px; letter-spacing: .08em; color: var(--silver); }
.room__spec dd { font-size: 14px; color: var(--text); }
.room__price { color: var(--pink) !important; font-family: var(--disp); letter-spacing: .02em; }
.room__feat { font-size: 13px; color: var(--muted); }

/* ---------- MENU ---------- */
.sec--menu { border-top: 1px solid var(--line); }
.menu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
@media (min-width: 760px) { .menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; } }
.menu-group__h { font-family: var(--disp); font-size: 15px; letter-spacing: .12em; color: var(--pink); padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.menu-list { margin-top: 6px; }
.menu-row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.menu-row__n { display: block; font-size: 15px; color: var(--text); }
.menu-row__d { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.menu-row__p { flex-shrink: 0; font-family: var(--disp); font-size: 14px; color: var(--pink); letter-spacing: .02em; white-space: nowrap; }
.menu-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--silver); margin-top: 4px; }

/* ---------- EVENTS ---------- */
.sec--events { border-top: 1px solid var(--line); }
.events { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 760px) { .events { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ev { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: rgba(26,16,21,.4); display: flex; flex-direction: column; }
.ev__poster { position: relative; }
.ev__poster .ph { border: 0; border-bottom: 1px solid var(--line); }
.ev__invite { position: absolute; top: 10px; right: 10px; font-family: var(--disp); font-size: 11px; letter-spacing: .08em; color: var(--pink-soft); background: rgba(16,13,15,.72); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 11px; }
.ev__body { padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.ev__type { font-family: var(--disp); font-size: 12px; letter-spacing: .18em; color: var(--silver); }
.ev__title { font-family: var(--disp); font-weight: 500; font-size: 20px; color: var(--pink-soft); line-height: 1.25; }
.ev__when { font-size: 14px; color: var(--text); }
.ev__cap { font-size: 12.5px; color: var(--pink); }
.ev__text { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ---------- 会員ストーリー ---------- */
.sec--stories { border-top: 1px solid var(--line); }
.stories { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 820px) { .stories { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.story { border: 1px solid var(--line); border-radius: 4px; padding: 24px 20px; background: rgba(58,20,32,.24); display: flex; flex-direction: column; gap: 14px; }
.story__q { position: relative; }
.story__q::before { content: "“"; font-family: var(--disp); font-size: 54px; line-height: .6; color: var(--pink); opacity: .4; display: block; margin-bottom: 6px; }
.story__ask { font-family: var(--disp); font-style: italic; font-size: 15px; color: var(--pink); margin-bottom: 8px; }
.story__ans { font-size: 14px; color: var(--text); line-height: 1.9; }
.story__cap { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.story__attr { font-size: 13px; color: var(--pink-soft); }
.story__since { font-family: var(--disp); font-size: 12px; letter-spacing: .06em; color: var(--silver); }
.stories__note { grid-column: 1 / -1; font-size: 12.5px; color: var(--silver); margin-top: 4px; }

/* ---------- 予約/入会/ゲスト 図解 ---------- */
.sec--paths { border-top: 1px solid var(--line); }
.paths { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 760px) { .paths { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.path { border: 1px solid var(--line); border-radius: 4px; padding: 22px 20px; background: rgba(26,16,21,.5); position: relative; }
.path--join { border-color: var(--line-2); background: rgba(58,20,32,.36); }
.path__head { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.path__en { font-family: var(--disp); font-size: 18px; letter-spacing: .16em; color: var(--pink-soft); }
.path__ja { font-size: 13px; color: var(--silver); }
.path__who { font-size: 12px; color: var(--pink); margin-top: 4px; }
.path__steps { list-style: none; display: flex; flex-direction: column; gap: 0; }
.path__step { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; position: relative; }
.path__step:not(:last-child)::after { content: ""; position: absolute; left: 12.5px; top: 30px; bottom: -2px; width: 1px; background: var(--line-2); }
.path__num { flex-shrink: 0; width: 26px; height: 26px; display: grid; place-content: center; font-family: var(--disp); font-size: 13px; color: var(--pink); border: 1px solid var(--line-2); border-radius: 50%; background: var(--bg); position: relative; z-index: 1; }
.path__label { font-size: 13.5px; color: var(--text); padding-top: 2px; }
.path__note { font-size: 12px; color: var(--muted); margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.paths__foot { font-size: 13px; color: var(--silver); margin-top: 20px; text-align: center; }

/* ---------- RESERVATION フォーム ---------- */
.sec--reserve { border-top: 1px solid var(--line); }
.rform { max-width: 720px; }
.rform__seg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 8px; }
@media (min-width: 560px) { .rform__seg { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rform__seg-item { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 3px; font-size: 14px; color: var(--muted); cursor: pointer; transition: border-color .25s, background .25s, color .25s; }
.rform__seg-item input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.rform__seg-item:has(input:checked) { border-color: var(--pink); background: rgba(58,20,32,.5); color: var(--pink-soft); }
.rform__seg-item:has(input:focus-visible) { outline: 2px solid var(--pink); outline-offset: 2px; }
.rform__hint { font-size: 13px; color: var(--silver); margin: 4px 0 18px; min-height: 1.8em; }
.rform__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 560px) { .rform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rform__field { display: flex; flex-direction: column; gap: 6px; }
.rform__field--full { grid-column: 1 / -1; }
.rform__field[hidden] { display: none; }
.rform__field label { font-size: 13px; color: var(--silver); display: flex; align-items: center; gap: 8px; }
.rform__field .req { font-size: 10px; letter-spacing: .04em; color: var(--pink); border: 1px solid var(--line-2); border-radius: 2px; padding: 1px 6px; }
.rform__field.is-emph label { color: var(--pink); }
.rform input, .rform select, .rform textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; font: inherit; font-size: 15px;
  color: var(--text); background: rgba(16,13,15,.5); border: 1px solid var(--line-2); border-radius: 3px;
  transition: border-color .2s;
}
.rform textarea { min-height: 88px; resize: vertical; line-height: 1.7; }
.rform input:focus, .rform select:focus, .rform textarea:focus { border-color: var(--pink); outline: none; }
.rform input[aria-invalid="true"] { border-color: #e08a9a; }
.rform__err { font-size: 12.5px; color: #f0a6b2; min-height: 1em; }
.rform__err:empty { min-height: 0; }
.rform__check { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 6px; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.rform__check input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; accent-color: var(--pink); flex-shrink: 0; }
.rform__check a { color: var(--pink); border-bottom: 1px solid var(--line-2); }
.rform__check .req { font-size: 10px; color: var(--pink); border: 1px solid var(--line-2); border-radius: 2px; padding: 1px 6px; margin-left: 6px; }
.rform__actions { margin-top: 18px; }
.rform__demo { font-size: 12.5px; color: var(--silver); margin-top: 14px; }
.rform__done, .dform__done { max-width: 720px; border: 1px solid var(--pink); border-radius: 4px; padding: 30px 26px; background: rgba(58,20,32,.4); }
.rform__done-en, .dform__done-en { font-family: var(--disp); font-style: italic; font-size: 13px; letter-spacing: .12em; color: var(--pink); }
.rform__done-t, .dform__done-t { font-family: var(--disp); font-weight: 500; font-size: 24px; color: var(--pink-soft); margin: 6px 0 10px; }
.rform__done-b, .dform__done-b { font-size: 14px; color: var(--text); margin-bottom: 20px; }

/* ---------- ACCESS ---------- */
.sec--access { border-top: 1px solid var(--line); }
.access { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
@media (min-width: 860px) { .access { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; } }
.access__map { border-radius: 4px; }
.access__info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.access__info div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.access__info dt { font-family: var(--disp); font-size: 12px; letter-spacing: .08em; color: var(--silver); }
.access__info dd { font-size: 14px; color: var(--text); }
.access__info a { color: var(--pink); }
.access__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.access__age { font-size: 12.5px; color: var(--silver); margin-top: 18px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 3px; background: rgba(16,13,15,.4); }

/* ---------- RECRUIT ---------- */
.sec--recruit { max-width: var(--wrap); margin: 0 auto; padding: clamp(40px, 6vw, 72px) 22px clamp(56px, 8vw, 96px); }
@media (min-width: 960px) { .sec--recruit { padding-left: 28px; padding-right: 28px; } }
.recruit { border: 1px solid var(--line-2); border-radius: 5px; padding: clamp(28px, 5vw, 52px); background: radial-gradient(120% 140% at 100% 0%, rgba(58,20,32,.6), rgba(26,16,21,.5)); }
.recruit__title { font-family: var(--disp); font-weight: 500; font-size: clamp(22px, 4vw, 34px); line-height: 1.2; color: var(--pink-soft); margin: 4px 0 12px; }
.recruit__body { font-size: 15px; color: var(--text); max-width: 60ch; }
.recruit__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.recruit__chips span { font-size: 12.5px; color: var(--silver); border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 14px; }
.recruit__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ============================================================
   下層ページ共通
   ============================================================ */
.page-head { max-width: var(--wrap); margin: 0 auto; padding: calc(var(--topbar-h) + 34px) 22px clamp(20px, 4vw, 34px); border-bottom: 1px solid var(--line); }
@media (min-width: 960px) { .page-head { padding: calc(68px + 48px) 28px 34px; } }
.page-head__t { font-family: var(--disp); font-weight: 500; font-size: clamp(28px, 6vw, 54px); line-height: 1.08; color: var(--pink-soft); letter-spacing: .02em; margin-top: 4px; }
.page-head__lead { font-size: 15px; color: var(--muted); margin-top: 14px; max-width: 58ch; }
.page-head__crumb { font-family: var(--disp); font-size: 12px; letter-spacing: .08em; color: var(--silver); margin-bottom: 12px; }
.page-head__crumb a { color: var(--silver); border-bottom: 1px solid var(--line-2); }
.page-head__crumb a:hover { color: var(--pink); }

/* 章のフル展開（concept） */
.chfull-wrap { max-width: var(--wrap); margin: 0 auto; padding: clamp(40px, 6vw, 72px) 22px; display: flex; flex-direction: column; gap: clamp(40px, 7vw, 84px); }
@media (min-width: 960px) { .chfull-wrap { padding-left: 28px; padding-right: 28px; } }
.chfull { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: center; }
@media (min-width: 860px) { .chfull { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 44px; }
  .chfull:nth-child(even) .chfull__ph { order: 2; } }
.chfull__ph { border-radius: 4px; }
.chfull__no { font-family: var(--disp); font-size: 12px; letter-spacing: .22em; color: var(--silver); }
.chfull__en { font-family: var(--disp); font-size: clamp(14px, 2.4vw, 17px); letter-spacing: .3em; color: var(--pink); margin-top: 6px; }
.chfull__ja { font-family: var(--disp); font-weight: 500; font-size: clamp(26px, 5vw, 44px); line-height: 1.1; color: var(--pink-soft); margin-top: 4px; }
.chfull__lead { font-family: var(--disp); font-style: italic; font-size: clamp(16px, 2.6vw, 21px); color: var(--pink); margin-top: 12px; }
.chfull__text { font-size: 15px; color: var(--text); margin-top: 12px; max-width: 50ch; }
.chfull__points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 18px; }
.chfull__points li { font-size: 12.5px; color: var(--silver); border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 13px; background: rgba(16,13,15,.4); }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq__item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.faq__q { font-family: var(--disp); font-size: 16px; letter-spacing: .02em; color: var(--pink-soft); position: relative; padding-left: 26px; }
.faq__q::before { content: "Q"; position: absolute; left: 0; top: 0; font-family: var(--disp); font-size: 15px; color: var(--pink); }
.faq__a { font-size: 14px; color: var(--muted); margin-top: 8px; padding-left: 26px; position: relative; }
.faq__a::before { content: "A"; position: absolute; left: 0; top: 0; font-family: var(--disp); font-size: 15px; color: var(--silver); }

/* 広い表は内部スクロール（教訓③） */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 4px; }
.ctable { width: 100%; border-collapse: collapse; min-width: 560px; }
.ctable th, .ctable td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; }
.ctable thead th { font-family: var(--disp); font-size: 12px; letter-spacing: .08em; color: var(--pink); background: rgba(58,20,32,.4); white-space: nowrap; }
.ctable tbody th { font-family: var(--disp); color: var(--pink-soft); font-weight: 500; white-space: nowrap; }
.ctable td { color: var(--text); }
.ctable tr:last-child th, .ctable tr:last-child td { border-bottom: 0; }

/* 文章ページ（privacy 等） */
.prose { max-width: 72ch; }
.prose h2 { font-family: var(--disp); font-weight: 500; font-size: clamp(19px, 3vw, 24px); color: var(--pink-soft); margin: 30px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 15px; color: var(--text); margin-bottom: 12px; }
.prose ul { margin: 0 0 14px 1.2em; }
.prose li { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.prose__meta { font-size: 13px; color: var(--silver); margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); }

/* 汎用情報カードグリッド（access 補助・contact 窓口 等） */
.infocards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .infocards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.infocard { border: 1px solid var(--line); border-radius: 4px; padding: 20px 18px; background: rgba(26,16,21,.4); }
.infocard__t { font-family: var(--disp); font-size: 16px; letter-spacing: .04em; color: var(--pink-soft); }
.infocard__b { font-size: 13.5px; color: var(--muted); margin-top: 8px; }

/* ---------- FOOTER ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--bordeaux-deep); padding: clamp(40px, 6vw, 64px) 22px 40px; }
@media (min-width: 960px) { .site-footer { padding-left: 28px; padding-right: 28px; } }
.site-footer > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.site-footer__logo { font-family: var(--disp); font-size: 22px; letter-spacing: .1em; color: var(--pink); }
.site-footer__tag { font-size: 13px; color: var(--silver); margin-top: 4px; }
.site-footer__info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 26px auto; }
@media (min-width: 720px) { .site-footer__info { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.site-footer__info div { display: flex; flex-direction: column; gap: 3px; }
.site-footer__info dt { font-family: var(--disp); font-size: 11px; letter-spacing: .12em; color: var(--silver); }
.site-footer__info dd { font-size: 13.5px; color: var(--text); }
.site-footer__info a { color: var(--pink); }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.site-footer__nav a { font-family: var(--disp); font-size: 13px; letter-spacing: .06em; color: var(--muted); transition: color .2s; }
.site-footer__nav a:hover { color: var(--pink); }
.site-footer__demo { font-size: 12px; color: var(--silver); max-width: 72ch; }
.site-footer__copy { font-size: 12px; color: var(--muted); margin-top: 12px; }

/* ---------- モバイル固定CTA ---------- */
.mcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; height: calc(var(--mcta-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: rgba(16,13,15,.92); backdrop-filter: saturate(140%) blur(12px); border-top: 1px solid var(--line-2);
}
.mcta__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--pink); }
.mcta__btn + .mcta__btn { border-left: 1px solid var(--line); }
.mcta__ic { font-size: 16px; line-height: 1; color: var(--pink); }
.mcta__t { font-family: var(--disp); font-size: 11px; letter-spacing: .12em; color: var(--silver); }
.mcta__btn:active { background: rgba(58,20,32,.6); }
@media (min-width: 960px) { .mcta { display: none; } }

/* ---------- page top ---------- */
.page-top {
  position: fixed; right: 16px; bottom: calc(var(--mcta-h) + 14px + env(safe-area-inset-bottom)); z-index: 108;
  width: 46px; height: 46px; display: grid; place-content: center; border-radius: 50%;
  font-family: var(--disp); font-size: 11px; letter-spacing: .06em; color: var(--pink);
  background: rgba(26,16,21,.9); border: 1px solid var(--line-2);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s, visibility .3s, transform .3s;
}
.page-top.is-show { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 960px) { .page-top { bottom: 22px; } }

/* ---------- モーダル ---------- */
.modal { position: fixed; inset: 0; z-index: 260; display: none; }
.modal.is-open { display: block; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(8,5,7,.7); backdrop-filter: blur(3px); }
.modal__panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 480px); background: var(--panel); border: 1px solid var(--line-2); border-radius: 5px;
  padding: 30px 26px 24px;
}
.modal__close-x { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; font-size: 22px; color: var(--silver); }
.modal__title { font-family: var(--disp); font-weight: 500; font-size: 22px; color: var(--pink-soft); margin-bottom: 12px; padding-right: 30px; }
.modal__body { font-size: 14px; color: var(--text); }
.modal__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }