/* =========================================================
   KYABEL — Host Gothic Royal
   ゴシック × 王室 × 夜の宮殿。黒い宝石を現代的に再構成する。
   構成: tokens / base / ornaments / placeholder / chrome /
         fullscreen menu / hero(章扉) / sections / chapters /
         pages / forms / overlays / footer / cta / responsive
   ========================================================= */

/* ---------- design tokens ---------- */
:root {
  --color-background: #0b0a10;
  --color-surface: #12101a;
  --color-surface-2: #171425;
  --color-text: #d9d7e0;
  --color-heading: #efedf4;
  --color-muted: #a5a1b4;
  --color-accent: #a9a9b5;          /* シルバー（罫線・装飾） */
  --color-royal: #3d2a63;           /* ディープパープル */
  --color-royal-bright: #6c53a8;
  --color-royal-text: #9a86d0; /* テキスト用アクセント 6.3:1（罫線・ホバー面は royal-bright を維持） */
  --color-navy: #1a2340;
  --color-line: rgba(169, 169, 181, .28);
  --color-line-dim: rgba(169, 169, 181, .14);

  --font-display: "Cinzel", "Noto Serif JP", serif;
  --font-body: "Noto Serif JP", serif;

  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4.5rem;
  --space-xl: 8rem;

  --container-width: 1120px;
  --cta-h: 64px;
  --header-h: 72px;
  --ease: cubic-bezier(.22, .8, .3, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-royal-bright); outline-offset: 3px; }

.skip-link {
  position: fixed; top: -100%; left: 16px; z-index: 500;
  padding: 10px 18px; background: var(--color-royal); color: #fff;
  font-size: 0.875rem; transition: top .2s;
}
.skip-link:focus { top: 12px; }

.container { max-width: var(--container-width); margin-inline: auto; padding-inline: clamp(20px, 4.5vw, 48px); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; color: var(--color-heading); line-height: 1.3; }

.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }

.text-link { color: var(--color-heading); border-bottom: 1px solid var(--color-line); padding-bottom: 2px; transition: border-color .3s, color .3s; }
.text-link:hover { color: #fff; border-color: var(--color-royal-bright); }

/* ---------- ornaments（王冠は使わず、菱形の端飾りで royal を示す） ---------- */
.orn { display: flex; align-items: center; gap: 14px; justify-content: center; color: var(--color-accent); }
.orn::before, .orn::after { content: ""; height: 1px; flex: 1 1 0; min-width: 0; max-width: 180px; background: linear-gradient(90deg, transparent, var(--color-line)); }
.orn::after { background: linear-gradient(90deg, var(--color-line), transparent); }
.orn__gem { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--color-accent); background: transparent; flex: none; }

/* ---------- 画像プレースホルダー（黒宝石・紫光・宮殿の抽象） ---------- */
.ph {
  position: relative; width: 100%; overflow: hidden;
  display: grid; place-items: center;
  border: 1px solid var(--color-line-dim);
  background-color: var(--color-surface);
}
.ph[data-ratio="1x1"] { aspect-ratio: 1 / 1; }
.ph[data-ratio="4x5"] { aspect-ratio: 4 / 5; }
.ph[data-ratio="3x4"] { aspect-ratio: 3 / 4; }
.ph[data-ratio="2x3"] { aspect-ratio: 2 / 3; }
.ph[data-ratio="16x9"] { aspect-ratio: 16 / 9; }
.ph[data-ratio="3x2"] { aspect-ratio: 3 / 2; }
.ph[data-ratio="21x9"] { aspect-ratio: 21 / 9; }
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(115deg, transparent 0 14px, rgba(255, 255, 255, .015) 14px 15px),
    radial-gradient(120% 90% at 50% 110%, rgba(61, 42, 99, .55), transparent 60%),
    linear-gradient(180deg, #151222, #0b0a10);
}
.ph[data-tone="2"]::before {
  background:
    repeating-linear-gradient(60deg, transparent 0 18px, rgba(255, 255, 255, .012) 18px 19px),
    radial-gradient(100% 80% at 15% 0%, rgba(26, 35, 64, .8), transparent 62%),
    linear-gradient(200deg, #141826, #0b0a10);
}
.ph[data-tone="3"]::before {
  background:
    repeating-linear-gradient(150deg, transparent 0 12px, rgba(255, 255, 255, .018) 12px 13px),
    radial-gradient(120% 70% at 50% -10%, rgba(169, 169, 181, .22), transparent 55%),
    linear-gradient(180deg, #16141f, #0b0a10);
}
.ph[data-tone="4"]::before {
  background:
    repeating-linear-gradient(115deg, transparent 0 16px, rgba(255, 255, 255, .014) 16px 17px),
    radial-gradient(90% 90% at 85% 90%, rgba(61, 42, 99, .5), transparent 58%),
    radial-gradient(70% 70% at 10% 15%, rgba(26, 35, 64, .65), transparent 60%),
    linear-gradient(180deg, #131120, #0b0a10);
}
.ph[data-tone="5"]::before {
  background:
    repeating-linear-gradient(45deg, transparent 0 20px, rgba(255, 255, 255, .012) 20px 21px),
    radial-gradient(60% 60% at 50% 55%, rgba(108, 83, 168, .38), transparent 65%),
    linear-gradient(180deg, #100e1a, #0b0a10);
}
.ph::after {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid rgba(169, 169, 181, .12); pointer-events: none;
}
.ph__label {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-size: 0.75rem; letter-spacing: .22em;
  color: rgba(217, 215, 224, .78);
  padding: .5em 1.1em; border: 1px solid var(--color-line-dim);
  background: rgba(11, 10, 16, .55);
  max-width: calc(100% - 20px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center;
}

/* ---------- badges / tags / chips ---------- */
.badge {
  display: inline-block; padding: .28em .85em;
  font-size: 0.8125rem; letter-spacing: .16em; font-family: var(--font-display);
  border: 1px solid var(--color-line); color: var(--color-heading);
  background: rgba(11, 10, 16, .78);
}
.badge--today { border-color: var(--color-royal-bright); color: #cfc3ec; }
.badge--new { border-color: rgba(217, 215, 224, .6); }
.badge--pick { background: var(--color-royal); border-color: var(--color-royal); color: #fff; }

.tag {
  display: inline-block; margin: 0 .5em .5em 0; padding: .2em .9em;
  font-size: 0.875rem; letter-spacing: .1em; color: var(--color-muted);
  border: 1px solid var(--color-line-dim);
}
.tag--btn { transition: color .3s, border-color .3s, background .3s; }
.tag--btn:hover { color: var(--color-heading); border-color: var(--color-line); }
.tag--btn[aria-pressed="true"] { background: var(--color-royal); border-color: var(--color-royal); color: #fff; }

.day-chip {
  display: inline-grid; place-items: center; width: 2em; height: 2em; margin-right: .35em;
  border: 1px solid var(--color-line); font-size: 0.875rem; color: var(--color-heading);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block; min-height: 48px; padding: .8em 2.4em;
  font-family: var(--font-display); font-size: 0.875rem; letter-spacing: .22em;
  text-align: center; transition: background .35s, color .35s, border-color .35s;
}
.btn--solid { background: linear-gradient(135deg, var(--color-royal), var(--color-navy)); color: #fff; border: 1px solid var(--color-royal-bright); }
.btn--solid:hover { background: var(--color-royal-bright); }
.btn--line { border: 1px solid var(--color-line); color: var(--color-heading); }
.btn--line:hover { border-color: var(--color-royal-bright); color: #fff; }

/* ---------- loader（緞帳ではなく「章扉が左右に開く」） ---------- */
.loader {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
  background: var(--color-background);
}
.loader::before, .loader::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 51%;
  background: #080710; transition: transform .7s var(--ease);
}
.loader::before { left: 0; border-right: 1px solid var(--color-line-dim); }
.loader::after { right: 0; border-left: 1px solid var(--color-line-dim); }
.loader__logo {
  position: relative; z-index: 1; font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: .5em; padding-left: .5em;
  color: var(--color-heading); transition: opacity .4s;
}
.loader.is-done::before { transform: translateX(-101%); }
.loader.is-done::after { transform: translateX(101%); }
.loader.is-done .loader__logo { opacity: 0; }

/* ---------- header（上部ミニバー） ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 210;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: clamp(16px, 3vw, 36px);
  background: linear-gradient(180deg, rgba(11, 10, 16, .92), rgba(11, 10, 16, .75));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-line-dim);
}
.site-header__logo { display: flex; flex-direction: column; line-height: 1.3; }
.site-header__logo-en { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .42em; color: var(--color-heading); }
.site-header__logo-sub { font-size: 0.75rem; letter-spacing: .34em; color: var(--color-muted); }
.site-header__side { display: flex; align-items: center; gap: 22px; }
.site-header__tel { font-family: var(--font-display); letter-spacing: .12em; color: var(--color-heading); font-size: .95rem; }
.site-header__tel small { display: block; font-size: 0.8125rem; color: var(--color-muted); letter-spacing: .2em; }

.drawer-toggle {
  position: relative; width: 56px; height: 48px;
  display: grid; place-items: center;
}
.drawer-toggle__label {
  position: absolute; bottom: 1px; left: 0; right: 0;
  font-size: 0.8125rem; letter-spacing: .3em; text-align: center; color: var(--color-muted);
  font-family: var(--font-display);
}
.drawer-toggle__bar {
  display: block; width: 26px; height: 1px; background: var(--color-heading);
  margin: 3.5px auto; transition: transform .3s, opacity .3s;
}
.drawer-toggle[aria-expanded="true"] .drawer-toggle__bar:nth-child(1) { transform: translateY(4.5px) rotate(20deg); }
.drawer-toggle[aria-expanded="true"] .drawer-toggle__bar:nth-child(2) { opacity: 0; }
.drawer-toggle[aria-expanded="true"] .drawer-toggle__bar:nth-child(3) { transform: translateY(-4.5px) rotate(-20deg); }

/* ---------- 全画面メニュー（章目次型） ---------- */
.drawer { position: fixed; inset: 0; z-index: 300; visibility: hidden; }
.drawer[aria-hidden="false"] { visibility: visible; }
.drawer__overlay { position: absolute; inset: 0; background: rgba(5, 4, 9, .7); opacity: 0; transition: opacity .4s; }
.drawer[aria-hidden="false"] .drawer__overlay { opacity: 1; }
.drawer__inner {
  position: absolute; inset: 0; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center;
  gap: var(--space-md); padding: calc(var(--header-h) + 16px) 24px 48px;
  background:
    radial-gradient(90% 60% at 50% 110%, rgba(61, 42, 99, .35), transparent 65%),
    #0a0912;
  opacity: 0; transform: translateY(-2%); transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.drawer[aria-hidden="false"] .drawer__inner { opacity: 1; transform: none; }
.drawer__close { position: absolute; top: 14px; right: clamp(16px, 3vw, 36px); width: 48px; height: 48px; }
.drawer__close span { position: absolute; top: 50%; left: 50%; width: 26px; height: 1px; background: var(--color-heading); }
.drawer__close span:first-child { transform: translate(-50%, -50%) rotate(28deg); }
.drawer__close span:last-child { transform: translate(-50%, -50%) rotate(-28deg); }
.drawer__title { font-family: var(--font-display); font-size: 0.875rem; letter-spacing: .5em; color: var(--color-muted); }
.drawer__nav ul { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.drawer__nav a {
  display: flex; align-items: baseline; gap: 18px; padding: .48em 1em;
  transition: color .3s;
}
.drawer__nav .no { font-family: var(--font-display); font-size: .78rem; color: var(--color-royal-text); min-width: 2.4em; text-align: right; letter-spacing: .1em; }
.drawer__nav .en { font-family: var(--font-display); font-size: clamp(1.15rem, 2.6vw, 1.6rem); letter-spacing: .3em; color: var(--color-heading); }
.drawer__nav small { font-size: 0.8125rem; color: var(--color-muted); letter-spacing: .12em; }
.drawer__nav a:hover .en, .drawer__nav a[aria-current="page"] .en { color: var(--color-royal-text); }
.drawer__meta { text-align: center; color: var(--color-muted); font-size: 0.875rem; }
.drawer__meta .tel { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .14em; color: var(--color-heading); display: block; margin-bottom: .3em; }
.drawer__sns { display: flex; gap: 26px; justify-content: center; margin-top: var(--space-sm); }
.drawer__sns a { font-family: var(--font-display); font-size: 0.875rem; letter-spacing: .26em; color: var(--color-muted); padding: .6em .2em; }
.drawer__sns a:hover { color: var(--color-heading); }

/* ---------- mask（中央から左右へ開くリビール） ---------- */
.mask { display: inline-block; overflow: hidden; max-width: 100%; }
.mask__inner { display: inline-block; clip-path: inset(0 50% 0 50%); transition: clip-path 1s var(--ease) .15s; }
.is-in .mask__inner, .is-in.mask .mask__inner { clip-path: inset(0 0 0 0); }

[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- hero（章扉 CHAPTER 0） ---------- */
.hero {
  position: relative; min-height: 92vh;
  display: grid; place-items: center; text-align: center;
  padding: calc(var(--header-h) + 48px) 20px 72px;
  overflow: hidden;
  background:
    linear-gradient(rgba(4, 5, 10, .38), rgba(4, 5, 10, .82)),
    url("../images/hero-gothic-royal.webp") center / cover no-repeat;
}
.hero::after {
  content: ""; position: absolute; inset: 18px; pointer-events: none;
  border: 1px solid var(--color-line-dim);
}
.hero__inner { position: relative; z-index: 1; max-width: 860px; }
.hero__eyebrow { font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: .58em; padding-left: .58em; color: var(--color-royal-text); }
.hero__title {
  margin-top: .4em;
  font-size: clamp(3rem, 11vw, 7rem); letter-spacing: .18em; padding-left: .18em;
  font-weight: 500;
}
.hero__sub { font-family: var(--font-display); font-size: clamp(13px, 1.6vw,.85rem); letter-spacing: .5em; padding-left: .5em; color: var(--color-muted); margin-top: .8em; }
.hero .orn { margin-top: var(--space-md); }
.hero__tagline { margin-top: var(--space-md); font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--color-heading); letter-spacing: .14em; }
.hero__lead { margin-top: var(--space-sm); color: var(--color-muted); font-size: .92rem; }
.hero__scroll {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 0.75rem; letter-spacing: .44em; padding-left: .44em; color: var(--color-muted);
}
.hero__scroll::after {
  content: ""; display: block; width: 1px; height: 34px; margin: 10px auto 0;
  background: linear-gradient(180deg, var(--color-accent), transparent);
  animation: scroll-line 2.4s infinite var(--ease);
}
@keyframes scroll-line { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- sections / section head（中央揃え・章番号） ---------- */
.sec { padding-block: var(--space-xl); }
.sec--surface { background: linear-gradient(180deg, var(--color-surface) 0, var(--color-background) 100%); }
.sec-head { text-align: center; margin-bottom: var(--space-lg); }
.sec-head__no { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: .5em; padding-left: .5em; color: var(--color-royal-text); }
.sec-head__en { font-size: clamp(1.7rem, 4.6vw, 2.7rem); letter-spacing: .22em; margin-top: .35em; }
.sec-head__jp { font-size: 0.875rem; color: var(--color-muted); letter-spacing: .22em; margin-top: .6em; }
.sec-head .orn { margin-top: var(--space-sm); }
.sec-more {
  display: block; width: fit-content; margin: var(--space-lg) auto 0; padding: .7em 2.6em;
  font-family: var(--font-display); font-size: 0.875rem; letter-spacing: .3em;
  color: var(--color-heading); border: 1px solid var(--color-line);
  transition: border-color .3s, background .3s;
}
.sec-more:hover { border-color: var(--color-royal-bright); background: rgba(61, 42, 99, .25); }

/* ---------- concept ---------- */
.concept__frame { max-width: 720px; margin-inline: auto; text-align: center; }
.concept__copy { font-family: var(--font-display); font-size: clamp(1.2rem, 3vw, 1.7rem); letter-spacing: .24em; color: var(--color-heading); }
.concept__copy .jp { display: block; font-family: var(--font-body); font-size: .9rem; color: var(--color-muted); letter-spacing: .3em; margin-top: 1em; }
.concept__text { margin-top: var(--space-md); text-align: left; }

/* ---------- host-card（本日の出勤・出勤ページ） ---------- */
.today-strip, .sched-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: clamp(14px, 2.4vw, 26px);
}
.host-card { display: block; border: 1px solid var(--color-line-dim); background: var(--color-surface); transition: border-color .35s, transform .35s var(--ease); }
.host-card:hover { border-color: var(--color-royal-bright); transform: translateY(-4px); }
.host-card__photo { position: relative; }
.host-card__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; z-index: 1; }
.host-card__body { padding: 14px 16px 16px; border-top: 1px solid var(--color-line-dim); }
.host-card__name { font-family: var(--font-display); letter-spacing: .18em; color: var(--color-heading); }
.host-card__name span { display: block; font-family: var(--font-body); font-size: 0.875rem; color: var(--color-muted); letter-spacing: .2em; margin-top: .2em; }
.host-card__time { margin-top: .5em; font-size: 0.875rem; color: var(--color-muted); letter-spacing: .1em; }

/* ---------- pickup（注目ホスト・左右交互） ---------- */
.pickup-grid { display: grid; gap: var(--space-lg); }
.pickup {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 4vw, 56px); align-items: center;
  border: 1px solid var(--color-line-dim); padding: clamp(18px, 3vw, 40px);
  background: linear-gradient(160deg, rgba(61, 42, 99, .14), transparent 55%), var(--color-surface);
  transition: border-color .35s;
}
.pickup:hover { border-color: var(--color-royal-bright); }
.pickup--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pickup--rev .pickup__photo { order: 2; }
.pickup__no { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: .44em; color: var(--color-royal-text); }
.pickup__name { font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.2rem); letter-spacing: .2em; color: var(--color-heading); margin-top: .3em; }
.pickup__name span { font-family: var(--font-body); font-size: 0.875rem; color: var(--color-muted); letter-spacing: .26em; margin-left: 1.2em; }
.pickup__catch { margin-top: .9em; color: var(--color-text); letter-spacing: .1em; }
.pickup .chapter__link { margin-top: 1.6em; }

/* ---------- chapter（HOST一覧・章立て） ---------- */
.chapter { padding-block: var(--space-lg); border-top: 1px solid var(--color-line-dim); }
.chapter:first-of-type { border-top: 0; padding-top: 0; }
.chapter__head { text-align: center; margin-bottom: var(--space-md); }
.chapter__no { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: .5em; padding-left: .5em; color: var(--color-royal-text); }
.chapter__name { font-size: clamp(1.6rem, 4.2vw, 2.4rem); letter-spacing: .26em; margin-top: .3em; }
.chapter__ja { font-size: 0.875rem; color: var(--color-muted); letter-spacing: .3em; margin-top: .5em; }
.chapter__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 4vw, 60px); align-items: start;
}
.chapter--rev .chapter__grid > .chapter__photo { order: 2; }
.chapter__photo { position: relative; }
.chapter__photo .host-card__badges { top: 12px; left: 12px; }
.chapter__catch { font-size: 1.12rem; color: var(--color-heading); letter-spacing: .12em; }
.chapter__comment { margin-top: 1em; color: var(--color-text); font-size: .92rem; }
.chapter__meta { margin-top: 1.4em; display: grid; gap: .5em; }
.chapter__meta > div { display: flex; gap: 1.2em; align-items: baseline; }
.chapter__meta dt { font-family: var(--font-display); font-size: 0.875rem; letter-spacing: .3em; color: var(--color-muted); min-width: 4em; }
.chapter__meta dd { font-size: 0.875rem; }
.chapter__tags { margin-top: 1.2em; }
.chapter__link {
  display: inline-block; margin-top: 1.2em;
  font-family: var(--font-display); font-size: 0.875rem; letter-spacing: .3em;
  color: var(--color-heading); border-bottom: 1px solid var(--color-line);
  padding-bottom: .5em; transition: color .3s, border-color .3s;
}
.chapter__link:hover { color: var(--color-royal-bright); border-color: var(--color-royal-bright); }

/* ---------- poster（イベント＝映画ポスター風） ---------- */
.poster-grid, #event-posters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: clamp(16px, 3vw, 32px);
  align-items: start;
}
.poster { display: block; transition: transform .35s var(--ease); }
.poster:hover { transform: translateY(-5px); }
.poster__photo { border: 1px solid var(--color-line); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9); }
.poster__photo .ph::after { inset: 7px; }
.poster__date { margin-top: 1em; font-family: var(--font-display); font-size: 0.875rem; letter-spacing: .3em; color: var(--color-royal-text); }
.poster__title { margin-top: .35em; font-size: .95rem; color: var(--color-heading); letter-spacing: .08em; line-height: 1.6; }

/* ---------- news rows ---------- */
.news-list { display: grid; gap: 0; }
.news-row {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: clamp(10px, 2vw, 24px); align-items: center;
  padding: 1.1em .4em; border-bottom: 1px solid var(--color-line-dim);
  transition: background .3s;
}
.news-row:first-child { border-top: 1px solid var(--color-line-dim); }
.news-row:hover { background: rgba(61, 42, 99, .14); }
.news-row time { font-family: var(--font-display); font-size: 0.875rem; letter-spacing: .12em; color: var(--color-muted); }
.news-row__cat {
  font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: .2em;
  padding: .35em .9em; border: 1px solid var(--color-line-dim); color: var(--color-muted);
}
.news-row__cat--event { border-color: var(--color-royal-bright); color: #cfc3ec; }
.news-row__title { color: var(--color-heading); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-row__arrow { color: var(--color-muted); }
/* ニュース一覧グリッド内では行はフル幅に */
#news-list .news-row { grid-column: 1 / -1; }
#news-list { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: clamp(16px, 3vw, 32px); }
#news-list .empty-note { grid-column: 1 / -1; }

/* ---------- gallery ---------- */
.gallery-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2.4vw, 24px); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: clamp(14px, 2.6vw, 28px); }
.gallery__item { position: relative; display: block; width: 100%; text-align: left; }
.gallery__item .ph { transition: border-color .3s; }
.gallery__item:hover .ph { border-color: var(--color-royal-bright); }
.gallery__cat {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: .26em;
  padding: .4em 1em; background: rgba(11, 10, 16, .8); border: 1px solid var(--color-line-dim);
  color: var(--color-muted);
}

/* ---------- schedule ---------- */
.sched-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--color-line-dim); }
.sched-tabs__btn {
  padding: 1em .5em; text-align: center; font-family: var(--font-display);
  letter-spacing: .22em; font-size: 0.875rem; color: var(--color-muted);
  border-right: 1px solid var(--color-line-dim); min-height: 56px;
  transition: background .3s, color .3s;
}
.sched-tabs__btn:last-child { border-right: 0; }
.sched-tabs__btn small { display: block; font-family: var(--font-body); font-size: 0.8125rem; letter-spacing: .3em; margin-top: .3em; }
.sched-tabs__btn[aria-selected="true"] { background: linear-gradient(135deg, var(--color-royal), var(--color-navy)); color: #fff; }
.sched-day-label { font-family: var(--font-display); letter-spacing: .3em; color: var(--color-royal-bright); font-size: 0.875rem; margin-block: var(--space-md) var(--space-sm); text-align: center; }
.sched-week { margin-top: var(--space-md); }
.sched-week__day { display: flex; align-items: baseline; gap: 1em; font-size: 1rem; letter-spacing: .2em; border-bottom: 1px solid var(--color-line); padding-bottom: .5em; }
.sched-week__day span { font-size: 0.875rem; letter-spacing: .34em; color: var(--color-royal-bright); }
.sched-week__list { display: flex; flex-wrap: wrap; gap: 10px; padding-top: var(--space-sm); }
.sched-week__list a {
  display: inline-flex; align-items: baseline; gap: .8em; padding: .5em 1.1em;
  border: 1px solid var(--color-line-dim); font-family: var(--font-display); letter-spacing: .14em; font-size: 0.875rem;
  color: var(--color-heading); transition: border-color .3s;
}
.sched-week__list a:hover { border-color: var(--color-royal-bright); }
.sched-week__list small { font-family: var(--font-body); font-size: 0.875rem; color: var(--color-muted); }
.sched-note-box { margin-top: var(--space-lg); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-line-dim); color: var(--color-muted); font-size: 0.875rem; }

/* ---------- system（装飾罫のクラシック表組み） ---------- */
.sys-block { max-width: 780px; margin-inline: auto; }
.sys-block__title { text-align: center; font-size: 1.15rem; letter-spacing: .3em; margin-bottom: var(--space-sm); }
.sys-block__title small { display: block; font-family: var(--font-body); font-size: 0.8125rem; color: var(--color-muted); letter-spacing: .26em; margin-top: .5em; }
.sys-list { border-top: 1px double var(--color-line); border-bottom: 1px double var(--color-line); padding-block: .4em; }
.sys-list__row { display: flex; align-items: baseline; gap: 1em; padding: .9em .2em; }
.sys-list__row + .sys-list__row { border-top: 1px solid var(--color-line-dim); }
.sys-list__name { font-size: .9rem; color: var(--color-heading); letter-spacing: .06em; }
.sys-list__lead { flex: 1 1 0; min-width: 2em; border-bottom: 1px dotted rgba(169, 169, 181, .35); transform: translateY(-.35em); }
.sys-list__price { font-family: var(--font-display); letter-spacing: .1em; color: var(--color-heading); white-space: nowrap; }
.sys-list__price small { font-family: var(--font-body); color: var(--color-muted); font-size: 0.875rem; }
.sys-list__price--sm { font-size: 0.875rem; white-space: normal; }
.sys-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(14px, 2.6vw, 28px); }
.sys-meta__box { border: 1px solid var(--color-line-dim); padding: var(--space-md); background: var(--color-surface); }
.sys-meta__box h3 { font-size: 0.875rem; letter-spacing: .26em; margin-bottom: .9em; color: var(--color-heading); }
.sys-meta__box ul li { padding: .35em 0; font-size: .88rem; }
.sys-meta__strong { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .12em; color: var(--color-heading); }
.sys-meta__note { font-size: 0.875rem; color: var(--color-muted); }

/* 初回案内（FIRST GUIDE）
   アンカー遷移（system.html#first）で固定ヘッダーに隠れないよう scroll-margin を確保 */
.first-guide {
  scroll-margin-top: calc(var(--header-h) + 20px);
  border: 1px solid var(--color-royal-bright); position: relative;
  padding: clamp(24px, 4vw, 48px); text-align: center;
  background: linear-gradient(180deg, rgba(61, 42, 99, .22), transparent 70%), var(--color-surface);
}
.first-guide::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--color-line-dim); pointer-events: none; }
.first-guide__eyebrow { font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: .5em; padding-left: .5em; color: var(--color-royal-text); }
.first-guide__title { font-size: clamp(1.3rem, 3vw, 1.8rem); letter-spacing: .24em; margin-top: .4em; }
.first-guide__price { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: .1em; color: #fff; margin-top: .5em; }
.first-guide__text { margin-top: 1em; color: var(--color-muted); font-size: .88rem; max-width: 560px; margin-inline: auto; }
.first-guide__flow { margin-top: var(--space-md); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; position: relative; z-index: 1; }
.first-guide__step { border: 1px solid var(--color-line-dim); padding: 1.1em .9em; font-size: 0.875rem; background: rgba(11, 10, 16, .5); }
.first-guide__step b { display: block; font-family: var(--font-display); font-size: 0.875rem; letter-spacing: .3em; color: var(--color-royal-text); margin-bottom: .6em; font-weight: 500; }

/* ---------- filter / pager ---------- */
.filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.filter__btn {
  padding: .6em 1.6em; min-height: 44px; font-family: var(--font-display); font-size: 0.875rem;
  letter-spacing: .22em; color: var(--color-muted); border: 1px solid var(--color-line-dim);
  transition: color .3s, border-color .3s, background .3s;
}
.filter__btn:hover { color: var(--color-heading); border-color: var(--color-line); }
.filter__btn[aria-pressed="true"] { background: linear-gradient(135deg, var(--color-royal), var(--color-navy)); border-color: var(--color-royal-bright); color: #fff; }
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; justify-content: center; margin-bottom: var(--space-md); }
.filter-bar__sort { display: flex; align-items: center; gap: .8em; font-size: 0.875rem; letter-spacing: .2em; color: var(--color-muted); }
.filter-bar__count { font-family: var(--font-display); letter-spacing: .2em; color: var(--color-heading); font-size: 0.875rem; }
.tag-row { display: flex; flex-wrap: wrap; gap: 0; justify-content: center; margin-bottom: var(--space-lg); }
.pager { display: flex; gap: 10px; justify-content: center; margin-top: var(--space-lg); }
.pager__btn {
  min-width: 48px; min-height: 48px; border: 1px solid var(--color-line-dim);
  font-family: var(--font-display); letter-spacing: .1em; color: var(--color-muted);
  transition: border-color .3s, color .3s, background .3s;
}
.pager__btn:hover { border-color: var(--color-line); color: var(--color-heading); }
.pager__btn[aria-current="page"] { background: var(--color-royal); border-color: var(--color-royal-bright); color: #fff; }

.empty-note { text-align: center; color: var(--color-muted); padding: var(--space-lg) 1em; letter-spacing: .1em; }
.closed-note { text-align: center; border: 1px double var(--color-line); padding: var(--space-lg) var(--space-md); }
.closed-note__en { font-family: var(--font-display); letter-spacing: .34em; color: var(--color-royal-bright); font-size: .8rem; }
.closed-note__jp { font-size: 1.05rem; color: var(--color-heading); margin-top: .8em; letter-spacing: .2em; }
.closed-note__sub { font-size: 0.8125rem; color: var(--color-muted); margin-top: .6em; }

/* ---------- breadcrumb / page-head（章扉） ---------- */
.breadcrumb-wrap { padding-top: calc(var(--header-h) + 18px); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .4em; font-size: 0.875rem; letter-spacing: .2em; color: var(--color-muted); font-family: var(--font-display); }
.breadcrumb li + li::before { content: "/"; margin-right: .6em; color: var(--color-line); }
.breadcrumb a:hover { color: var(--color-heading); }
.page-head { text-align: center; padding-block: var(--space-lg) 0; }
.page-head__no { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: .56em; padding-left: .56em; color: var(--color-royal-bright); }
.page-head__title { font-size: clamp(2.2rem, 7vw, 4rem); letter-spacing: .24em; margin-top: .3em; }
.page-head__jp { color: var(--color-muted); font-size: 0.875rem; letter-spacing: .3em; margin-top: .8em; }
.page-head .orn { margin-top: var(--space-sm); }

/* ---------- cast detail ---------- */
.detail__chapter { text-align: center; font-family: var(--font-display); font-size: 0.875rem; letter-spacing: .5em; padding-left: .5em; color: var(--color-royal-bright); margin-bottom: var(--space-md); }
.detail__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.detail__main { cursor: zoom-in; }
.detail__subs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.detail__sub { display: block; width: 100%; }
.detail__sub .ph { transition: border-color .3s; }
.detail__sub:hover .ph { border-color: var(--color-royal-bright); }
.detail__badges { display: flex; gap: 8px; flex-wrap: wrap; }
.detail__name { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: .2em; margin-top: .3em; }
.detail__ja { color: var(--color-muted); letter-spacing: .3em; font-size: 0.875rem; margin-top: .5em; }
.detail__catch { font-size: 1.1rem; color: var(--color-heading); margin-top: 1.2em; letter-spacing: .1em; }
.detail__profile { margin-top: var(--space-md); border-top: 1px solid var(--color-line-dim); }
.detail__profile > div { display: flex; gap: 1.6em; padding: .8em .2em; border-bottom: 1px solid var(--color-line-dim); align-items: baseline; }
.detail__profile dt { font-family: var(--font-display); font-size: 0.875rem; letter-spacing: .3em; color: var(--color-muted); min-width: 6em; }
.detail__profile dd { font-size: .88rem; }
.detail__comment { margin-top: var(--space-md); }
.detail__tags { margin-top: var(--space-sm); }
.detail__sns { display: flex; gap: 12px; margin-top: var(--space-sm); }
.detail__sns a {
  display: inline-grid; place-items: center; min-width: 48px; min-height: 48px;
  border: 1px solid var(--color-line-dim); font-family: var(--font-display); font-size: 0.875rem; letter-spacing: .1em;
  transition: border-color .3s, color .3s;
}
.detail__sns a:hover { border-color: var(--color-royal-bright); color: #fff; }
.detail__diary { margin-top: var(--space-lg); border: 1px solid var(--color-line-dim); padding: var(--space-md); background: var(--color-surface); }
.detail__diary-title { font-size: .9rem; letter-spacing: .3em; margin-bottom: 1em; }
.diary__meta { font-family: var(--font-display); font-size: 0.875rem; color: var(--color-royal-bright); letter-spacing: .16em; }
.diary__title { font-size: 1rem; margin-top: .4em; letter-spacing: .08em; }
.diary__body { margin-top: .6em; font-size: .88rem; color: var(--color-text); }
.detail__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--space-lg); }
.detail__actions--center { justify-content: center; }
.detail-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--color-line-dim); margin-top: var(--space-xl); }
.detail-nav__link { display: flex; align-items: center; gap: 1em; padding: 1.2em 1.4em; font-family: var(--font-display); font-size: 0.875rem; letter-spacing: .24em; color: var(--color-muted); transition: background .3s, color .3s; }
.detail-nav__link small { display: block; font-size: 0.875rem; /* design-guide §1: 名前情報14px */ font-family: var(--font-body); letter-spacing: .16em; color: var(--color-heading); margin-top: .3em; }
.detail-nav__link--next { justify-content: flex-end; text-align: right; border-left: 1px solid var(--color-line-dim); }
.detail-nav__link:hover { background: rgba(61, 42, 99, .18); color: var(--color-heading); }

/* ---------- article（news detail） ---------- */
.article { max-width: 760px; margin-inline: auto; }
.article__meta { display: flex; align-items: center; gap: 1.2em; justify-content: center; }
.article__meta time { font-family: var(--font-display); letter-spacing: .14em; color: var(--color-muted); font-size: 0.875rem; }
.article__title { text-align: center; font-size: clamp(1.4rem, 3.4vw, 2rem); letter-spacing: .12em; margin-top: .8em; line-height: 1.6; }
.article__photo { margin-top: var(--space-md); }
.article__photo--poster { max-width: 400px; margin-inline: auto; }
.article__body { margin-top: var(--space-md); }
.article__nav { display: flex; justify-content: space-between; gap: 1em; margin-top: var(--space-lg); padding-top: var(--space-sm); border-top: 1px solid var(--color-line-dim); font-size: 0.875rem; flex-wrap: wrap; }

/* ---------- access ---------- */
.access__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.access__table { border-top: 1px solid var(--color-line-dim); }
.access__table > div { display: flex; gap: 1.4em; padding: 1em .2em; border-bottom: 1px solid var(--color-line-dim); align-items: baseline; }
.access__table dt { font-family: var(--font-display); font-size: 0.875rem; letter-spacing: .3em; color: var(--color-royal-bright); min-width: 6.5em; }
.access__table dd { font-size: .9rem; }
.tel-link { color: var(--color-heading); }
.route { counter-reset: step; display: grid; gap: 0; }
.route li { position: relative; padding: 1em 0 1em 3.4em; border-bottom: 1px solid var(--color-line-dim); font-size: .9rem; }
.route li::before {
  counter-increment: step; content: counter(step, upper-roman);
  position: absolute; left: .2em; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-size: 0.875rem; letter-spacing: .1em; color: var(--color-royal-bright);
  min-width: 2.4em;
}

/* ---------- recruit ---------- */
.recruit-hero { position: relative; }
.recruit-hero__copy {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;
  font-family: var(--font-display); font-size: clamp(1.2rem, 3.6vw, 2rem);
  letter-spacing: .3em; padding-left: .3em; color: #fff; text-align: center;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .8); pointer-events: none;
}
.merits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: clamp(14px, 2.6vw, 28px); }
.merit { border: 1px solid var(--color-line-dim); padding: var(--space-md); background: var(--color-surface); }
.merit__no { font-family: var(--font-display); font-size: 1.2rem; color: var(--color-royal-bright); letter-spacing: .1em; }
.merit__title { font-size: 1rem; letter-spacing: .12em; margin-top: .6em; }
.merit__body { margin-top: .8em; font-size: 1rem; color: var(--color-text); }

/* ---------- accordion ---------- */
.acc { border: 1px solid var(--color-line-dim); border-bottom: 0; }
.acc:last-child { border-bottom: 1px solid var(--color-line-dim); }
.acc__heading { margin: 0; }
.acc__btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1em; padding: 1.1em 1.3em; text-align: left; font-size: .92rem; color: var(--color-heading); min-height: 56px; transition: background .3s; }
.acc__btn:hover { background: rgba(61, 42, 99, .14); }
.acc__icon { position: relative; width: 14px; height: 14px; flex: none; }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: var(--color-accent); transition: transform .3s; }
.acc__icon::after { transform: rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: rotate(0deg); }
.acc__panel { padding: 0 1.3em 1.2em; color: var(--color-text); font-size: .88rem; }

/* ---------- forms ---------- */
.form-note { border: 1px solid var(--color-royal-bright); border-left-width: 4px; padding: 1em 1.4em; font-size: 0.875rem; color: var(--color-text); background: rgba(61, 42, 99, .14); }
.form { margin-top: var(--space-md); }
.form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(14px, 2.4vw, 24px); }
.form__row { margin-top: var(--space-sm); }
.form__grid .form__row { margin-top: 0; }
.form__label { display: block; font-size: 0.875rem; letter-spacing: .18em; color: var(--color-heading); margin-bottom: .6em; }
.req { display: inline-block; margin-left: .8em; padding: .1em .7em; font-size: 0.875rem; letter-spacing: .16em; color: #cfc3ec; border: 1px solid var(--color-royal-bright); }
.form__input, .form__select, .form__textarea {
  width: 100%; min-height: 50px; padding: .7em 1em;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-line-dim); font: inherit; letter-spacing: .04em;
  transition: border-color .3s;
}
.form__textarea { min-height: 140px; resize: vertical; }
.form__input:focus, .form__select:focus, .form__textarea:focus { outline: none; border-color: var(--color-royal-bright); }
.form__select { appearance: none; background-image: linear-gradient(45deg, transparent 49%, var(--color-accent) 50%, transparent 60%); background-repeat: no-repeat; background-position: right 1.1em center; background-size: 10px 10px; }
.form__check { display: flex; gap: .9em; align-items: flex-start; font-size: 0.875rem; padding: .4em 0; cursor: pointer; }
.form__check input { width: 20px; height: 20px; margin-top: .3em; accent-color: var(--color-royal-bright); flex: none; }
.form__actions { margin-top: var(--space-md); text-align: center; }
.confirm { border: 1px double var(--color-line); padding: clamp(20px, 3.6vw, 44px); background: var(--color-surface); }
.confirm__title { text-align: center; font-size: 1.1rem; letter-spacing: .26em; }
.confirm__note { text-align: center; font-size: 0.875rem; color: var(--color-muted); margin-top: .8em; }
.confirm__list { margin-top: var(--space-md); border-top: 1px solid var(--color-line-dim); }
.confirm__row { display: flex; gap: 1.4em; padding: .9em .2em; border-bottom: 1px solid var(--color-line-dim); }
.confirm__row dt { font-size: 0.875rem; letter-spacing: .16em; color: var(--color-muted); min-width: 9em; }
.confirm__row dd { font-size: .9rem; overflow-wrap: anywhere; }
.confirm__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: var(--space-md); }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: 20px; visibility: hidden; }
.modal[aria-hidden="false"] { visibility: visible; }
.modal__overlay { position: absolute; inset: 0; background: rgba(5, 4, 9, .78); opacity: 0; transition: opacity .3s; }
.modal[aria-hidden="false"] .modal__overlay { opacity: 1; }
.modal__panel {
  position: relative; max-width: 480px; width: 100%; max-height: 85vh; overflow-y: auto;
  background: var(--color-surface-2); border: 1px solid var(--color-line);
  padding: clamp(28px, 5vw, 44px);
  opacity: 0; transform: translateY(12px); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.modal[aria-hidden="false"] .modal__panel { opacity: 1; transform: none; }
.modal__eyebrow { font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: .5em; color: var(--color-royal-bright); }
.modal__title { font-size: 1.2rem; letter-spacing: .2em; margin-top: .6em; }
.modal__text { margin-top: 1em; font-size: .88rem; }
.modal__panel .btn { margin-top: var(--space-md); }
.modal__close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; }
.modal__close span { position: absolute; top: 50%; left: 50%; width: 20px; height: 1px; background: var(--color-heading); }
.modal__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.modal__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 330; visibility: hidden; }
.lb[aria-hidden="false"] { visibility: visible; }
.lb__overlay { position: absolute; inset: 0; background: rgba(5, 4, 9, .88); opacity: 0; transition: opacity .3s; }
.lb[aria-hidden="false"] .lb__overlay { opacity: 1; }
.lb__panel { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(16px, 4vw, 56px); }
.lb__stage { width: min(920px, 100%); max-height: 78vh; display: grid; place-items: center; }
.lb__stage .ph { max-height: 78vh; }
.ph--lb[data-ratio="16x9"], .ph--lb[data-ratio="3x2"] { width: 100%; }
.ph--lb[data-ratio="4x5"], .ph--lb[data-ratio="3x4"], .ph--lb[data-ratio="2x3"], .ph--lb[data-ratio="1x1"] { width: min(440px, 100%); }
.lb__counter { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-family: var(--font-display); letter-spacing: .3em; font-size: 0.875rem; color: var(--color-muted); }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: 1px solid var(--color-line); background: rgba(11, 10, 16, .7); transition: border-color .3s; }
.lb__nav:hover { border-color: var(--color-royal-bright); }
.lb__nav--prev { left: clamp(8px, 2vw, 28px); }
.lb__nav--next { right: clamp(8px, 2vw, 28px); }
.lb__nav span { position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; border-top: 1px solid var(--color-heading); border-left: 1px solid var(--color-heading); }
.lb__nav--prev span { transform: translate(-30%, -50%) rotate(-45deg); }
.lb__nav--next span { transform: translate(-70%, -50%) rotate(135deg); }
.lb__close { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border: 1px solid var(--color-line); background: rgba(11, 10, 16, .7); }
.lb__close span { position: absolute; top: 50%; left: 50%; width: 20px; height: 1px; background: var(--color-heading); }
.lb__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.lb__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- CTA band（FINALE） ---------- */
.cta-band {
  padding-block: var(--space-xl);
  text-align: center;
  background:
    radial-gradient(70% 90% at 50% 120%, rgba(61, 42, 99, .5), transparent 65%),
    var(--color-surface);
  border-top: 1px solid var(--color-line-dim);
}
.cta-band__title { font-size: clamp(1.8rem, 5vw, 2.8rem); letter-spacing: .26em; }
.cta-band__text { margin-top: var(--space-sm); color: var(--color-muted); font-size: .9rem; }
.cta-band__tel { font-family: var(--font-display); font-size: clamp(1.6rem, 4.6vw, 2.4rem); letter-spacing: .12em; color: var(--color-heading); }
.cta-band__hours { color: var(--color-muted); font-size: 0.875rem; letter-spacing: .14em; }
.cta-band__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: var(--space-md); }

/* ---------- footer（紋章的・中央揃え） ---------- */
.site-footer { border-top: 1px solid var(--color-line-dim); padding: var(--space-xl) 0 0; text-align: center; }
.site-footer__logo { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: .5em; padding-left: .5em; color: var(--color-heading); }
.site-footer__tagline { margin-top: .8em; color: var(--color-muted); font-size: 0.875rem; letter-spacing: .3em; }
.site-footer .orn { margin-top: var(--space-md); }
.site-footer__info { margin-top: var(--space-md); font-style: normal; font-size: 0.875rem; color: var(--color-text); display: grid; gap: .3em; }
.site-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .2em 1.6em; margin-top: var(--space-md); }
.site-footer__nav a { font-family: var(--font-display); font-size: 0.875rem; letter-spacing: .26em; color: var(--color-muted); padding: .6em .2em; transition: color .3s; }
.site-footer__nav a:hover, .site-footer__nav a[aria-current="page"] { color: var(--color-heading); }
.site-footer__sns { display: flex; justify-content: center; gap: 1.8em; margin-top: var(--space-sm); }
.site-footer__sns a { font-family: var(--font-display); font-size: 0.875rem; letter-spacing: .26em; color: var(--color-muted); padding: .6em .2em; }
.site-footer__sns a:hover { color: var(--color-heading); }
.site-footer__colophon {
  margin-top: var(--space-lg); padding: 1.4em clamp(20px, 4vw, 48px);
  padding-right: max(76px, 6vw); /* 固定ページトップボタンとの重なり回避 */
  border-top: 1px solid var(--color-line-dim);
  font-size: 0.875rem; color: var(--color-muted); display: grid; gap: .4em; text-align: left;
}

/* ---------- 固定CTA（横長バー・紫グラデ） ---------- */
.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: var(--cta-h);
  background: linear-gradient(135deg, #2c1e4a, var(--color-royal) 55%, var(--color-navy));
  border-top: 1px solid var(--color-royal-bright);
}
.cta-bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 0.875rem; letter-spacing: .12em; color: #efedf4;
  border-right: 1px solid rgba(255, 255, 255, .12);
}
.cta-bar a:last-child { border-right: 0; }
.cta-bar svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.cta-bar__primary { background: rgba(255, 255, 255, .1); }

/* ---------- page top ---------- */
.page-top {
  position: fixed; right: 18px; bottom: calc(var(--cta-h) + 14px); z-index: 190;
  width: 48px; height: 48px; border: 1px solid var(--color-line);
  background: rgba(11, 10, 16, .8);
  opacity: 0; pointer-events: none; transition: opacity .3s, border-color .3s;
}
.page-top:hover { border-color: var(--color-royal-bright); }
.page-top.is-visible { opacity: 1; pointer-events: auto; }
.page-top span { position: absolute; top: 55%; left: 50%; width: 12px; height: 12px; border-top: 1px solid var(--color-heading); border-left: 1px solid var(--color-heading); transform: translate(-50%, -50%) rotate(45deg); }

/* ---------- responsive ---------- */
@media (min-width: 768px) {
  .cta-bar { display: none; }
  .page-top { bottom: 22px; }
  body { padding-bottom: 0; }
}
@media (max-width: 767px) {
  body { padding-bottom: var(--cta-h); }
  .cta-bar { display: grid; }
  .site-header__tel { display: none; }
  .chapter__grid, .detail__grid, .access__grid { grid-template-columns: minmax(0, 1fr); }
  .chapter--rev .chapter__grid > .chapter__photo { order: 0; }
  .pickup, .pickup--rev { grid-template-columns: minmax(0, 1fr); }
  .pickup--rev .pickup__photo { order: 0; }
  .chapter__photo { max-width: 420px; margin-inline: auto; width: 100%; }
  .detail-nav { grid-template-columns: minmax(0, 1fr); }
  .detail-nav__link--next { border-left: 0; border-top: 1px solid var(--color-line-dim); }
  .sys-list__row { flex-wrap: wrap; }
  .sys-list__lead { display: none; }
  .sys-list__price { margin-left: auto; }
  .confirm__row { flex-direction: column; gap: .2em; }
  .hero { min-height: 88vh; }
  .site-footer__colophon { padding-right: clamp(20px, 4vw, 48px); padding-bottom: .5em; }
  .page-top { bottom: calc(var(--cta-h) + 14px); }
}
@media (max-width: 599px) {
  .ph__label { white-space: normal; line-height: 1.5; font-size: 0.75rem; }
  /* 大型ディスプレイ英字は狭幅でトラッキングを絞り、1行維持と非あふれを両立する */
  .page-head__title { letter-spacing: .12em; }
  .sec-head__en { letter-spacing: .1em; }
  .cta-band__title { letter-spacing: .14em; }
  .concept__copy { font-size: 1.05rem; letter-spacing: .14em; }
  .hero__title { letter-spacing: .12em; padding-left: .12em; }
  .detail__name { letter-spacing: .12em; }
  .today-strip, .sched-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-row { grid-template-columns: auto minmax(0, 1fr); row-gap: .3em; }
  .news-row__title { grid-column: 1 / -1; white-space: normal; }
  .news-row__arrow { display: none; }
  .sched-tabs__btn { letter-spacing: .1em; font-size: 0.875rem; }
}
@media (min-width: 1440px) {
  :root { --container-width: 1200px; }
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .mask__inner { clip-path: inset(0 0 0 0); }
  .hero__scroll::after { animation: none; }
}


/* ==================================================================
   design-guide.md 適用ブロック（可読性・操作性の最低基準）
   - 世界観・配色・レイアウトは変更しない。寸法・ウェイトのみ。
   - 根拠: design-guide.md §7(ウェイト) §8(操作領域) §10(分類A是正)
   ================================================================== */
/* ボタン・ピル型UI: タップ領域44px（§8） */
.btn, .tag--btn, .filter__btn, .pager__btn, .sec-more, .recruit-switch, .chapter__link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* インラインリンク: タッチ環境で44px、PCでも行箱を確保（§8） */
.tel-link, .text-link, .breadcrumb a, .site-footer__nav a, .site-footer__sns a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
@media (max-width: 767px) {
  .tel-link, .text-link, .breadcrumb a, .site-footer__nav a, .site-footer__sns a { min-height: 44px; }
}
/* チェックボックス行: 44px確保（§8） */
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
.form__check { min-height: 44px; display: flex; align-items: center; }
/* ボタンのウェイト（§7: 500以上） */
.btn, .cta-bar a, button[type="submit"] { font-weight: 500; }
/* 出勤情報・定休日表示は装飾例外にしない（§2） */
.badge--today { font-size: 14px; }
.closed-note__sub { font-size: 14px; }