/* =========================================================
   KYABEL / GINZA HERITAGE (SITE 45)
   会員紹介制 高級クラブ・左右固定型・中央680px・暗（墨黒×象牙）
   質感=木と紙と真鍮：墨黒の漆地／象牙の和紙パネル／欅の古木ブラウン／磨いた真鍮の細線。
   display=Zen Antique／本文=Noto Serif JP。
   シグネチャ=年表（縦の真鍮軸）が左レール目次と連動する章スクロール。
   「黒＋金だけの高級感」を回避：情報ブロックは象牙紙パネルで、紙と木の比重を高く。
   ========================================================= */

/* ---------- tokens ---------- */
:root {
  --ink: #211f1c;          /* 墨黒（基調の地） */
  --ink-2: #2a2621;        /* 一段明るい墨（面・境界） */
  --ink-3: #17150f;        /* 一段暗い墨（フッター等） */
  --paper: #f1ecdf;        /* 象牙（和紙パネル・暗地の本文色） */
  --paper-2: #e8e0cd;      /* 紙の陰（カード分割） */
  --paper-3: #ded3ba;      /* 紙の枠・帯 */
  --wood: #6d4e35;         /* 古木ブラウン（紙上の補足・框） */
  --wood-2: #543a26;       /* 濃い古木 */
  --brass: #9c7f45;        /* 真鍮（面・装飾・細線） */
  --brass-hi: #c3a765;     /* 明るい真鍮（暗地の文字・ラベル・4.5:1確保） */

  --on-dark: #f1ecdf;      /* 暗地の本文（象牙・高コントラスト） */
  --on-dark-mut: #b3a88f;  /* 暗地の補足（墨地で約7:1・14px以上で使用） */
  --on-paper: #211f1c;     /* 紙上の本文 */
  --on-paper-mut: #6d4e35; /* 紙上の補足（象牙で約6:1） */

  --line-d: rgba(241, 236, 223, 0.16);  /* 暗地の細線 */
  --line-p: rgba(33, 31, 28, 0.14);      /* 紙上の細線 */
  --brass-line: rgba(156, 127, 69, 0.55);

  --main: 680px;
  --rail-left: 264px;
  --rail-right: 296px;
  --shell-max: 1408px;

  --display: "Zen Antique", "Noto Serif JP", serif;
  --serif: "Noto Serif JP", "Zen Antique", serif;

  --topbar-h: 56px;
  --mcta-h: 60px;
  --ease: cubic-bezier(.2, .6, .32, 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(--serif);
  font-size: 16px;
  line-height: 1.85;
  color: var(--on-dark);
  background: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--mcta-h) + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) { body { padding-bottom: 0; } }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; border-radius: 1px; }
body.is-locked { overflow: hidden; }

/* 墨地に薄い古木の縦木目（真鍮でなく木の質感で高級感を出す） */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 62% 0%, rgba(156, 127, 69, 0.10), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(109, 78, 53, 0.10) 46px 47px);
  opacity: .8;
}

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

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 12px 24px;
  font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: .06em;
  border: 1px solid var(--brass); border-radius: 0;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s;
  text-align: center;
}
.btn--brass { background: var(--brass); color: #1b160c; border-color: var(--brass); }
.btn--brass:hover { background: var(--brass-hi); border-color: var(--brass-hi); }
.btn--ghost { background: transparent; color: var(--on-dark); border-color: var(--brass-line); }
.btn--ghost:hover { border-color: var(--brass-hi); background: rgba(195, 167, 101, .08); }
.btn--block { width: 100%; }
.btn--sm { min-height: 44px; padding: 10px 16px; font-size: 14px; letter-spacing: .04em; }
/* 紙パネル上のゴーストボタン */
.rbox .btn--ghost, .form .btn--ghost, .confirm .btn--ghost, .price-hidden .btn--ghost { color: var(--wood-2); border-color: var(--brass-line); }
.rbox .btn--ghost:hover, .form .btn--ghost:hover { background: rgba(156, 127, 69, .1); border-color: var(--wood); }

/* ---------- placeholder figure ---------- */
.ph { position: relative; overflow: hidden; background: var(--ink-2); display: block; margin: 0; }
figure.ph { margin: 0; }
.ph::before { content: ""; display: block; }
.ph[data-ratio="4x5"]::before { padding-top: 125%; }
.ph[data-ratio="3x4"]::before { padding-top: 133.33%; }
.ph[data-ratio="1x1"]::before { padding-top: 100%; }
.ph[data-ratio="3x2"]::before { padding-top: 66.66%; }
.ph[data-ratio="16x9"]::before { padding-top: 56.25%; }
.ph[data-ratio="21x9"]::before { padding-top: 42.85%; }
.ph > img, .ph > svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph__label {
  position: absolute; left: 10px; bottom: 8px; z-index: 2;
  font-family: var(--display); font-size: 11px; letter-spacing: 1.5px;
  color: var(--paper); opacity: .5;
}
.ph.is-broken, .hero__fig.is-broken { background: repeating-linear-gradient(45deg, var(--ink-2) 0 12px, #322c22 12px 24px); }
.ph.is-broken > img, .hero__fig.is-broken > img { display: none; }

/* ============================================================
   モバイルヘッダー（左レール → topbar/drawer）
   ============================================================ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  height: var(--topbar-h);
  background: rgba(23, 21, 15, .92);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid var(--brass-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: 2px; background: var(--paper); transition: transform .3s, opacity .3s; }
.topbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.topbar__logo { font-family: var(--display); font-size: 19px; letter-spacing: .10em; color: var(--paper); text-align: center; line-height: 1.1; }
.topbar__logo span { display: block; font-size: 10px; letter-spacing: .12em; color: var(--brass-hi); font-family: var(--serif); }
.topbar__reserve {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px;
  font-size: 14px; font-weight: 600; letter-spacing: .04em;
  background: var(--brass); color: #1b160c;
}
@media (min-width: 1024px) { .topbar { display: none; } }

/* ---------- ドロワー ---------- */
.drawer {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(10, 9, 6, .55);
  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(86vw, 344px);
  background: var(--ink-2);
  border-right: 2px solid var(--brass);
  padding: calc(env(safe-area-inset-top) + 26px) 26px calc(env(safe-area-inset-bottom) + 26px);
  overflow-y: auto;
  transform: translateX(-100%); transition: transform .34s var(--ease);
  display: flex; flex-direction: column; gap: 22px;
}
.drawer[aria-hidden="false"] .drawer__panel { transform: translateX(0); }
.drawer__brand { font-family: var(--display); font-size: 25px; letter-spacing: .04em; color: var(--paper); line-height: 1.2; }
.drawer__brand span { display: block; font-family: var(--serif); font-size: 11px; letter-spacing: .10em; color: var(--brass-hi); margin-top: 8px; }
.drawer__nav { display: flex; flex-direction: column; }
.drawer__nav a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 2px; min-height: 48px; border-bottom: 1px solid var(--line-d);
}
.drawer__nav .en { font-family: var(--display); font-size: 17px; letter-spacing: .02em; color: var(--paper); min-width: 128px; }
.drawer__nav .ja { font-size: 14px; color: var(--on-dark-mut); }
.drawer__info { font-size: 14px; color: var(--on-dark); line-height: 1.8; }
.drawer__tel { font-family: var(--display); font-size: 22px; letter-spacing: .02em; color: var(--brass-hi); display: inline-block; margin-bottom: 6px; }

/* ============================================================
   固定レール・シェル
   ============================================================ */
.shell { padding: var(--topbar-h) 16px 0; }
.shell__grid { display: block; max-width: var(--main); margin: 0 auto; }
.rail { display: none; }

/* ============================================================
   メイン
   ============================================================ */
.main { min-width: 0; }

/* ---------- HERO ---------- */
.hero { padding: 26px 0 10px; }
.hero__eyebrow {
  display: inline-block; font-family: var(--serif); font-size: 12px; letter-spacing: .14em;
  color: var(--brass-hi); border: 1px solid var(--brass-line); padding: 5px 12px; margin-bottom: 18px;
}
.hero__logo {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(38px, 11.5vw, 70px); line-height: 1.02; letter-spacing: .02em; color: var(--paper);
}
.hero__logo small { display: block; font-family: var(--serif); font-size: clamp(14px, 3.6vw, 18px); letter-spacing: .18em; color: var(--brass-hi); margin-top: 14px; font-weight: 500; }
.hero__copy {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(22px, 6vw, 30px); line-height: 1.5; color: var(--paper);
  margin-top: 24px; padding-left: 16px; border-left: 2px solid var(--brass);
}
.hero__sub { margin-top: 18px; font-size: 16px; line-height: 1.9; color: var(--on-dark); max-width: 38em; }
.hero__open { margin-top: 16px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.hero__fig { position: relative; overflow: hidden; margin-top: 26px; border: 1px solid var(--brass-line); background: var(--ink-2); }
.hero__fig::before { content: ""; display: block; padding-top: 66.66%; }
.hero__fig > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 営業バッジ */
.open-dot { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--on-dark); }
.open-dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--brass); }
.open-dot--on::before { background: #6fae7e; box-shadow: 0 0 0 3px rgba(111, 174, 126, .2); }
.open-dot--off { color: var(--on-dark-mut); }
.open-dot--off::before { background: var(--wood); }

/* ---------- section 共通 ---------- */
.sec { padding: 40px 0; border-top: 1px solid var(--line-d); }
.sec:first-of-type { border-top: 0; }
.sec-head { margin-bottom: 22px; }
.sec-head__en {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 13px; letter-spacing: .16em; color: var(--brass-hi);
}
.sec-head__en::before { content: ""; width: 26px; height: 1px; background: var(--brass); }
.sec-head__ja { font-family: var(--display); font-size: clamp(25px, 6.4vw, 32px); font-weight: 400; color: var(--paper); line-height: 1.3; margin-top: 8px; }
.sec-lead { font-size: 16px; line-height: 1.95; color: var(--on-dark); margin-top: 4px; max-width: 40em; }
.sec-fig { margin-top: 20px; border: 1px solid var(--brass-line); }
.sec-more { margin-top: 24px; }
.note { font-size: 14px; color: var(--on-dark-mut); line-height: 1.7; margin-top: 14px; }

/* ---------- PHILOSOPHY ---------- */
.pillar-list { margin-top: 22px; display: grid; gap: 14px; }
.pillar {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: center;
  background: var(--paper); border: 1px solid var(--paper-3); padding: 18px 20px;
}
.pillar__k {
  font-family: var(--display); font-size: 40px; color: var(--brass); line-height: 1;
  width: 72px; height: 72px; display: grid; place-content: center;
  border: 1px solid var(--brass-line);
}
.pillar__en { font-family: var(--display); font-size: 12px; letter-spacing: .14em; color: var(--wood); }
.pillar__title { font-family: var(--display); font-size: 19px; font-weight: 400; color: var(--on-paper); margin: 2px 0 6px; }
.pillar__body { font-size: 15px; line-height: 1.85; color: var(--on-paper); }

/* ---------- MAMA ---------- */
.mama { margin-top: 6px; display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 24px; align-items: start; }
.mama__fig { border: 1px solid var(--brass-line); }
.mama__tx { background: var(--paper); border: 1px solid var(--paper-3); padding: 22px 24px; }
.mama__role { font-family: var(--display); font-size: 12px; letter-spacing: .1em; color: var(--wood); }
.mama__name { font-family: var(--display); font-size: 24px; color: var(--on-paper); margin: 4px 0 14px; }
.mama__name small { font-size: 14px; color: var(--on-paper-mut); font-family: var(--serif); margin-left: 10px; letter-spacing: .04em; }
.mama__greet { font-size: 15px; line-height: 1.95; color: var(--on-paper); margin-bottom: 10px; }
.mama__words { font-family: var(--display); font-size: 17px; color: var(--wood-2); margin-top: 6px; border-top: 1px solid var(--paper-3); padding-top: 12px; }

.hosts { margin-top: 22px; }
.hosts__lead { font-size: 15px; color: var(--on-dark-mut); line-height: 1.8; margin-bottom: 14px; }
.hosts__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.host { background: var(--paper); border: 1px solid var(--paper-3); display: flex; flex-direction: column; }
.host .ph { border-bottom: 1px solid var(--paper-3); }
.host__tx { padding: 12px 14px 16px; }
.host__name { font-family: var(--display); font-size: 16px; color: var(--on-paper); line-height: 1.3; }
.host__name small { display: block; font-size: 12px; color: var(--on-paper-mut); font-family: var(--serif); margin-top: 2px; }
.host__role { font-family: var(--display); font-size: 12px; letter-spacing: .06em; color: var(--wood); margin: 6px 0 6px; }
.host__cm { font-size: 14px; line-height: 1.7; color: var(--on-paper); }

/* ---------- HISTORY（年表＝シグネチャ） ---------- */
.history { position: relative; margin-top: 24px; }
.history::before {
  content: ""; position: absolute; left: 61px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(180deg, var(--brass), rgba(156, 127, 69, .25));
}
.era { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 22px; padding: 4px 0 30px; position: relative; }
.era:last-child { padding-bottom: 4px; }
.era__mark { position: relative; text-align: right; padding-right: 4px; }
.era__year { font-family: var(--display); font-size: 20px; color: var(--brass-hi); letter-spacing: .02em; }
.era__dot {
  position: absolute; right: -8px; top: 8px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--brass); z-index: 1;
}
.is-era-current .era__dot, .era.is-current .era__dot { background: var(--brass); box-shadow: 0 0 0 4px rgba(156, 127, 69, .22); }
.era__body { background: var(--paper); border: 1px solid var(--paper-3); padding: 16px 20px 18px; }
.era__era { font-family: var(--display); font-size: 12px; letter-spacing: .12em; color: var(--wood); }
.era__title { font-family: var(--display); font-size: 19px; font-weight: 400; color: var(--on-paper); margin: 4px 0 10px; line-height: 1.35; }
.era__fig { border: 1px solid var(--paper-3); margin: 10px 0 12px; }
.era__text { font-size: 15px; line-height: 1.9; color: var(--on-paper); }

/* ---------- HOSPITALITY ---------- */
.steps { margin-top: 22px; display: grid; gap: 12px; counter-reset: step; }
.step {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start;
  background: var(--paper); border: 1px solid var(--paper-3); padding: 16px 20px;
}
.step::before {
  counter-increment: step; content: counter(step);
  font-family: var(--display); font-size: 18px; color: #1b160c;
  width: 44px; height: 44px; display: grid; place-content: center;
  background: var(--brass); align-self: start;
}
.step__title { font-family: var(--display); font-size: 18px; font-weight: 400; color: var(--on-paper); margin-bottom: 4px; }
.step__body { font-size: 15px; line-height: 1.85; color: var(--on-paper); }

/* ---------- ROOMS ---------- */
.rooms { margin-top: 22px; display: grid; gap: 18px; }
.room { background: var(--paper); border: 1px solid var(--paper-3); }
.room .ph { border-bottom: 1px solid var(--paper-3); }
.room__tx { padding: 14px 20px 18px; }
.room__name { font-family: var(--display); font-size: 20px; color: var(--on-paper); display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.room__cap { font-family: var(--serif); font-size: 14px; color: var(--wood); font-weight: 600; white-space: nowrap; }
.room__body { font-size: 15px; line-height: 1.85; color: var(--on-paper); margin-top: 6px; }

/* ---------- MEMBERSHIP / FIRST VISIT ---------- */
.ways { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.way { background: var(--paper); border: 1px solid var(--paper-3); padding: 18px 20px; }
.way__title { font-family: var(--display); font-size: 17px; font-weight: 400; color: var(--on-paper); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--paper-3); }
.way__body { font-size: 14px; line-height: 1.8; color: var(--on-paper); }
.mem-note { margin-top: 16px; font-size: 14px; line-height: 1.8; color: var(--on-dark-mut); }

/* 料金 */
.price { margin-top: 26px; border-top: 1px solid var(--brass-line); padding-top: 22px; }
.price__h { font-family: var(--display); font-size: 20px; font-weight: 400; color: var(--paper); margin-bottom: 14px; display: flex; align-items: baseline; gap: 12px; }
.price__h .en { font-size: 12px; letter-spacing: .14em; color: var(--brass-hi); }
.price-hidden { background: var(--paper); border: 1px solid var(--paper-3); padding: 22px 24px; }
.price-hidden__h { font-family: var(--display); font-size: 21px; color: var(--on-paper); margin-bottom: 10px; }
.price-hidden__b { font-size: 15px; line-height: 1.9; color: var(--on-paper); margin-bottom: 18px; }
.price-lead { font-size: 14px; line-height: 1.8; color: var(--on-dark-mut); margin-bottom: 14px; }
.ptbl { border: 1px solid var(--paper-3); background: var(--paper); }
.ptbl__head, .ptbl__row { display: grid; grid-template-columns: minmax(0, 1fr) 6em 9em; gap: 12px; align-items: center; padding: 12px 18px; }
.ptbl__head { background: var(--paper-2); border-bottom: 1px solid var(--paper-3); font-family: var(--display); font-size: 13px; color: var(--wood-2); }
.ptbl__row { border-bottom: 1px solid var(--line-p); }
.ptbl__row:last-child { border-bottom: 0; }
.ptbl__row b { font-size: 15px; font-weight: 600; color: var(--on-paper); display: block; }
.ptbl__row small { font-size: 13px; color: var(--on-paper-mut); display: block; margin-top: 2px; }
.ptbl__row .u { font-size: 14px; color: var(--on-paper-mut); }
.ptbl__row .p { font-family: var(--display); font-size: 17px; color: var(--wood-2); text-align: right; }
.pextra { margin-top: 12px; display: grid; gap: 6px; }
.pextra > div { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 12px; font-size: 15px; padding: 6px 2px; border-bottom: 1px dotted var(--line-d); }
.pextra dt { color: var(--on-dark-mut); }
.pextra dd { color: var(--on-dark); font-weight: 600; }
.pcaut { margin-top: 14px; display: grid; gap: 6px; }
.pcaut li { font-size: 14px; line-height: 1.7; color: var(--on-dark-mut); padding-left: 16px; position: relative; }
.pcaut li::before { content: "※"; position: absolute; left: 0; color: var(--brass-hi); }

/* ---------- CONTACT フォーム ---------- */
.form { display: grid; gap: 16px; margin-top: 10px; border: 1px solid var(--paper-3); background: var(--paper); padding: 20px; }
.form__row { display: flex; flex-direction: column; gap: 6px; }
.form__row--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form__label { font-size: 14px; font-weight: 600; color: var(--on-paper); }
.form__label .req { font-size: 12px; color: #1b160c; background: var(--brass); padding: 1px 7px; margin-left: 8px; font-family: var(--serif); font-weight: 600; }
.form__field {
  min-height: 48px; padding: 12px 14px; font-size: 16px; font-family: var(--serif);
  border: 1px solid var(--paper-3); background: #fbf8f0; color: var(--on-paper);
}
.form__field:focus-visible { border-color: var(--wood); outline-color: var(--wood); }
textarea.form__field { min-height: 100px; resize: vertical; line-height: 1.7; }
.form__note { font-size: 13px; color: var(--on-paper-mut); line-height: 1.75; }
.form__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.confirm { border: 1px solid var(--brass); background: var(--paper); padding: 20px; margin-top: 10px; }
.confirm__h { font-family: var(--display); font-size: 19px; color: var(--on-paper); margin-bottom: 14px; }
.confirm__list { display: grid; gap: 8px; margin-bottom: 18px; }
.confirm__row { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 12px; font-size: 14px; border-bottom: 1px solid var(--line-p); padding-bottom: 8px; }
.confirm__row dt { color: var(--on-paper-mut); }
.confirm__row dd { color: var(--on-paper); }

/* ---------- ACCESS ---------- */
.access-info { display: grid; gap: 8px; margin-bottom: 20px; }
.access-info > div { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 14px; font-size: 15px; padding: 6px 0; border-bottom: 1px dotted var(--line-d); }
.access-info dt { color: var(--on-dark-mut); font-size: 14px; }
.access-info dd { color: var(--on-dark); }
.access-info a { color: var(--brass-hi); border-bottom: 1px solid var(--brass-line); }
.access__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.access__fig { border: 1px solid var(--brass-line); }
.access__steps { display: grid; gap: 12px; counter-reset: acc; }
.access__steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.8; color: var(--on-dark); }
.access__steps li::before {
  counter-increment: acc; content: counter(acc);
  font-family: var(--display); font-size: 13px; color: var(--brass-hi);
  width: 26px; height: 26px; display: grid; place-content: center; border: 1px solid var(--brass-line);
}
.access__note { margin-top: 14px; font-size: 14px; color: var(--on-dark-mut); line-height: 1.8; }

/* ---------- RECRUIT ---------- */
.recs { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rec { background: var(--paper); border: 1px solid var(--paper-3); padding: 18px 20px; }
.rec__title { font-family: var(--display); font-size: 17px; font-weight: 400; color: var(--on-paper); margin-bottom: 8px; }
.rec__body { font-size: 14px; line-height: 1.8; color: var(--on-paper); }
.rec-note { margin-top: 16px; font-size: 14px; line-height: 1.8; color: var(--on-dark-mut); }

/* ---------- footer ---------- */
.site-footer { border-top: 2px solid var(--brass); margin-top: 24px; padding: 34px 0 44px; }
.site-footer__logo { font-family: var(--display); font-size: 26px; color: var(--paper); letter-spacing: .04em; }
.site-footer__tag { font-family: var(--serif); font-size: 12px; letter-spacing: .1em; color: var(--brass-hi); margin-top: 6px; }
.site-footer__info { margin: 22px 0; display: grid; gap: 8px; }
.site-footer__info > div { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 12px; font-size: 14px; }
.site-footer__info dt { color: var(--on-dark-mut); }
.site-footer__info dd { color: var(--on-dark); }
.site-footer__info a { color: var(--brass-hi); }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0; }
.site-footer__nav a { font-size: 14px; color: var(--on-dark-mut); font-family: var(--display); letter-spacing: .04em; }
.site-footer__nav a:hover { color: var(--brass-hi); }
.site-footer__demo { font-size: 14px; color: var(--on-dark-mut); line-height: 1.75; border-top: 1px solid var(--line-d); padding-top: 18px; }
.site-footer__copy { font-size: 13px; color: var(--on-dark-mut); font-family: var(--display); margin-top: 12px; letter-spacing: .04em; }

/* ============================================================
   モバイル要約（右レール → トップ要約）／右レール共通ボックス
   ============================================================ */
.msum { margin: 22px 0 4px; display: grid; gap: 14px; }
.rbox { background: var(--paper); border: 1px solid var(--paper-3); padding: 16px 18px; }
.rbox__h { font-family: var(--display); font-size: 16px; color: var(--on-paper); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--paper-3); }
.rbox__b { font-size: 14px; line-height: 1.8; color: var(--on-paper); }
.rbox--cta { border-color: var(--brass); }
.rbox__act { margin-top: 12px; display: grid; gap: 8px; }
.rbox__map { border: 1px solid var(--paper-3); margin: 4px 0 10px; }

/* ============================================================
   モバイル固定CTA（HIGH CLUB: VISIT / CONTACT / ACCESS）
   ============================================================ */
.mcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  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: var(--ink-3); border-top: 2px solid var(--brass);
}
.mcta__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--paper); min-height: var(--mcta-h);
  border-right: 1px solid rgba(241, 236, 223, .14);
}
.mcta__btn:last-child { border-right: 0; }
.mcta__ic { font-size: 17px; line-height: 1; color: var(--brass-hi); }
.mcta__t { font-size: 12px; font-family: var(--display); letter-spacing: .1em; }
@media (min-width: 1024px) { .mcta { display: none; } }

/* page top */
.page-top {
  position: fixed; right: 16px; bottom: calc(var(--mcta-h) + 16px + env(safe-area-inset-bottom)); z-index: 80;
  width: 46px; height: 46px; display: grid; place-content: center;
  background: var(--ink-2); border: 1px solid var(--brass-line);
  font-family: var(--display); font-size: 11px; color: var(--brass-hi);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.page-top.is-show { opacity: 1; visibility: visible; }
@media (min-width: 1024px) { .page-top { bottom: 20px; } }

/* ============================================================
   共通モーダル
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 220; display: none; place-content: center; padding: 20px; }
.modal.is-open { display: grid; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(10, 9, 6, .58); }
.modal__panel { position: relative; z-index: 1; width: min(440px, 100%); background: var(--paper); border: 1px solid var(--brass); padding: 26px; }
.modal__title { font-family: var(--display); font-size: 21px; color: var(--on-paper); margin-bottom: 10px; }
.modal__body { font-size: 15px; line-height: 1.85; color: var(--on-paper); }
.modal__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.modal__close-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-content: center; font-size: 22px; color: var(--on-paper); }

/* reveal */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .drawer__panel { transition: none !important; }
}

/* ============================================================
   左右レール中身
   ============================================================ */
.rail-left { display: flex; flex-direction: column; gap: 22px; }
.rl-logo { font-family: var(--display); font-size: 24px; color: var(--paper); line-height: 1.1; letter-spacing: .03em; }
.rl-logo small { display: block; font-family: var(--serif); font-size: 11px; letter-spacing: .1em; color: var(--brass-hi); margin-top: 6px; }
.rl-tag { font-size: 14px; color: var(--on-dark-mut); line-height: 1.7; margin-top: 10px; }
.rl-est { font-size: 13px; color: var(--on-dark-mut); margin-top: 8px; font-family: var(--display); letter-spacing: .04em; }

.rl-chapters { display: flex; flex-direction: column; border-top: 1px solid var(--line-d); }
.rl-chapters a {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: baseline; gap: 10px;
  padding: 11px 2px; border-bottom: 1px solid var(--line-d); min-height: 44px;
  transition: color .2s;
}
.rl-chapters .num { font-family: var(--display); font-size: 12px; color: var(--brass-line); }
.rl-chapters .ja { font-size: 15px; color: var(--on-dark); }
.rl-chapters .en { font-family: var(--display); font-size: 11px; letter-spacing: .06em; color: var(--on-dark-mut); }
.rl-chapters a:hover .ja { color: var(--brass-hi); }
.rl-chapters a.is-current .ja { color: var(--brass-hi); }
.rl-chapters a.is-current .num { color: var(--brass-hi); }
.rl-chapters a.is-current { border-left: 2px solid var(--brass); padding-left: 8px; margin-left: -10px; }

/* 左レール：年表ミニ目次（現在の年を灯す＝シグネチャ） */
.rl-history { border: 1px solid var(--line-d); background: rgba(241, 236, 223, .03); padding: 14px 16px; }
.rl-hist__h { font-family: var(--display); font-size: 12px; letter-spacing: .12em; color: var(--brass-hi); margin-bottom: 8px; }
.rl-hist__list { position: relative; display: grid; gap: 2px; }
.rl-hist__list::before { content: ""; position: absolute; left: 3px; top: 12px; bottom: 12px; width: 1px; background: var(--brass-line); }
.rl-hist__list a { display: grid; grid-template-columns: 16px auto minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 7px 2px 7px 0; min-height: 40px; position: relative; }
.rl-hist__list a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); border: 1.5px solid var(--brass-line); margin-left: 0; align-self: center; }
.rl-hist__list .yr { font-family: var(--display); font-size: 14px; color: var(--on-dark-mut); }
.rl-hist__list .er { font-size: 13px; color: var(--on-dark-mut); }
.rl-hist__list a:hover .yr, .rl-hist__list a:hover .er { color: var(--brass-hi); }
.rl-hist__list a.is-current::before { background: var(--brass); border-color: var(--brass); box-shadow: 0 0 0 3px rgba(156, 127, 69, .25); }
.rl-hist__list a.is-current .yr { color: var(--brass-hi); }
.rl-hist__list a.is-current .er { color: var(--paper); }

.rail-right { display: block; }
.rail-right__inner { display: flex; flex-direction: column; gap: 16px; }

/* ============================================================
   レスポンシブ：レール出現（自然高 sticky・overflow-y:auto 禁止）
   ============================================================ */
/* >=1024: 左レール出現（2カラム）。右レール情報はモバイル要約に残す */
@media (min-width: 1024px) {
  .shell { padding: 44px 24px 0; }
  .shell__grid {
    display: grid;
    grid-template-columns: var(--rail-left) minmax(0, 1fr);
    gap: 30px; max-width: 1000px; align-items: start;
  }
  .rail { display: block; }
  .rail-right { display: none; }
  .rail-left { position: sticky; top: 24px; align-self: start; }
  .main { max-width: var(--main); }
}
/* >=1300: 右レール出現（3カラム）。モバイル要約は退場 */
@media (min-width: 1300px) {
  .shell__grid {
    grid-template-columns: var(--rail-left) minmax(0, var(--main)) var(--rail-right);
    justify-content: center; max-width: var(--shell-max); gap: 34px;
  }
  .rail-right { display: block; position: sticky; top: 24px; align-self: start; }
  .msum { display: none; }
}
/* 1024〜1299 のあいだ左レール幅を詰める */
@media (min-width: 1024px) and (max-width: 1299px) {
  :root { --rail-left: 224px; }
}
@media (max-width: 1023px) {
  .rail { display: none !important; }
}

/* ---- 中間・小画面調整 ---- */
@media (max-width: 720px) {
  .access__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .mama { grid-template-columns: minmax(0, 1fr); }
  .mama__fig { max-width: 300px; }
  .ways, .recs { grid-template-columns: minmax(0, 1fr); }
  .hosts__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .form__row--2 { grid-template-columns: minmax(0, 1fr); }
  .ptbl__head, .ptbl__row { grid-template-columns: minmax(0, 1fr) auto; }
  .ptbl__head span:nth-child(2), .ptbl__row .u { display: none; }
}
@media (max-width: 400px) {
  .hosts__row { grid-template-columns: minmax(0, 1fr); }
  .host { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
  .host .ph { border-bottom: 0; border-right: 1px solid var(--paper-3); }
}

/* ============================================================
   下層ページ共通（page head / prose / recruit / company / faq）
   ※ 追加クラスのみ。index の既存クラスは変更しない。
   ============================================================ */
.phead { padding: 26px 0 8px; }
.phead__eyebrow {
  display: inline-block; font-family: var(--serif); font-size: 12px; letter-spacing: .14em;
  color: var(--brass-hi); border: 1px solid var(--brass-line); padding: 5px 12px; margin-bottom: 16px;
}
.phead__title { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 8vw, 46px); line-height: 1.12; letter-spacing: .03em; color: var(--paper); }
.phead__title small { display: block; font-family: var(--serif); font-size: 14px; letter-spacing: .14em; color: var(--brass-hi); margin-top: 12px; font-weight: 500; }
.phead__lead { margin-top: 16px; font-size: 16px; line-height: 1.95; color: var(--on-dark); max-width: 40em; }
.phead__fig { margin-top: 22px; border: 1px solid var(--brass-line); }

/* パンくず */
.crumb { font-size: 13px; color: var(--on-dark-mut); margin-top: 4px; font-family: var(--display); letter-spacing: .04em; }
.crumb a { color: var(--brass-hi); }
.crumb a:hover { text-decoration: underline; }

/* サブ見出し（ページ内 h2/h3） */
.sub-head { font-family: var(--display); font-size: clamp(20px, 5vw, 25px); font-weight: 400; color: var(--paper); margin-bottom: 14px; display: flex; align-items: baseline; gap: 12px; }
.sub-head .en { font-size: 12px; letter-spacing: .14em; color: var(--brass-hi); font-family: var(--display); }
.sub-head3 { font-family: var(--display); font-size: 18px; font-weight: 400; color: var(--paper); margin: 4px 0 10px; }

/* 紙パネル・本文プロース（privacy / company / 説明ブロック） */
.panel { background: var(--paper); border: 1px solid var(--paper-3); padding: 22px 24px; }
.prose { color: var(--on-paper); }
.prose h3 { font-family: var(--display); font-size: 18px; font-weight: 400; color: var(--on-paper); margin: 22px 0 8px; }
.prose h3:first-child { margin-top: 0; }
.prose p { font-size: 15px; line-height: 1.95; margin-bottom: 12px; }
.prose ul { display: grid; gap: 8px; margin: 4px 0 14px; }
.prose ul li { font-size: 15px; line-height: 1.85; padding-left: 18px; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: .75em; width: 6px; height: 6px; background: var(--brass); }
.prose__updated { font-size: 13px; color: var(--on-paper-mut); margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--paper-3); }

/* 定義リスト（会社概要・条件表） */
.deflist { background: var(--paper); border: 1px solid var(--paper-3); }
.deflist > div { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--line-p); font-size: 15px; }
.deflist > div:last-child { border-bottom: 0; }
.deflist dt { color: var(--on-paper-mut); font-weight: 600; }
.deflist dd { color: var(--on-paper); line-height: 1.8; }

/* 広い表は内部スクロール（第1波教訓③） */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--paper-3); }
.table-wrap .ptbl { border: 0; min-width: 460px; }

/* 採用ページ */
.rec-block { margin-top: 12px; }
.rec-hero { background: var(--paper); border: 1px solid var(--paper-3); padding: 22px 24px; }
.rec-hero__catch { font-family: var(--display); font-size: clamp(20px, 5vw, 26px); color: var(--wood-2); line-height: 1.5; margin-bottom: 12px; }
.rec-hero__body { font-size: 15px; line-height: 1.95; color: var(--on-paper); }
.merit { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.merit span { background: var(--paper); border: 1px solid var(--paper-3); padding: 12px 16px; font-size: 14px; color: var(--on-paper); display: flex; align-items: center; gap: 8px; }
.merit span::before { content: "◇"; color: var(--brass); }

/* FAQ（details/summary） */
.faq { display: grid; gap: 10px; margin-top: 8px; }
.faq details { background: var(--paper); border: 1px solid var(--paper-3); }
.faq summary { list-style: none; cursor: pointer; padding: 14px 44px 14px 18px; position: relative; font-size: 15px; font-weight: 600; color: var(--on-paper); min-height: 48px; display: flex; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; font-family: var(--display); color: var(--brass); margin-right: 10px; }
.faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--wood); }
.faq details[open] summary::after { content: "–"; }
.faq__a { padding: 0 18px 16px 40px; font-size: 15px; line-height: 1.9; color: var(--on-paper); }

/* 会員 / first visit 補助 */
.callout { margin-top: 20px; background: rgba(156, 127, 69, .08); border: 1px solid var(--brass-line); padding: 18px 20px; }
.callout__h { font-family: var(--display); font-size: 17px; color: var(--paper); margin-bottom: 8px; }
.callout__b { font-size: 14px; line-height: 1.85; color: var(--on-dark); }
.callout .btn { margin-top: 14px; }

/* 相互リンクの次アクション */
.pager { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 560px) {
  .merit { grid-template-columns: minmax(0, 1fr); }
  .deflist > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}