/* SITE 91 CABARET RESERVATION & VIP — components
   base / header / drawer / breadcrumb / button / card / table / tabs / chips /
   accordion / sheet(modal・SPは全画面ボトムシート) / lightbox / form / footer / 固定CTA */

/* ============ base ============ */
body {
  background: var(--c-ink);
  color: var(--c-cream);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
}

h1, h2, h3, h4 { font-weight: 600; line-height: var(--lh-heading); }
p { max-width: 76ch; }
a { text-underline-offset: 0.22em; }

/* 数字は必ずライニング数字＋等幅で（料金・時刻・電話が縦位置で揃うようにする） */
.num,
.table td.num,
.price__value,
.room-table td,
time { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }

:focus-visible {
  outline: 2px solid var(--c-brass-soft);
  outline-offset: 2px;
  border-radius: var(--r-s);
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -200px;
  z-index: 200;
  background: var(--c-brass);
  color: #14100A;
  padding: 12px 18px;
  border-radius: var(--r-s);
  font-weight: 700;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-3); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.stack > * + * { margin-top: var(--sp-5); }
.prose { color: var(--c-muted); }
.note { font-size: var(--fs-note); color: var(--c-muted); line-height: var(--lh-dense); }

/* ============ section ============ */
.section { padding-block: var(--section-y); border-top: 1px solid var(--c-line); }
.section--alt { background: var(--c-ink-2); }
.section--flush { border-top: 0; }

.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.sec-head__main { max-width: 68ch; }
.eyebrow {
  display: block;
  font-family: var(--f-serif);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-brass);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.sec-head__title { font-family: var(--f-serif); font-size: var(--fs-h2); letter-spacing: 0.01em; }
.sec-head__lead { margin-top: var(--sp-2); color: var(--c-muted); }

/* ============ header ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(17, 25, 37, 0.96);
  border-bottom: 1px solid var(--c-line);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header { backdrop-filter: blur(10px); }
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 8px var(--gutter);
  min-height: var(--header-h);
}
.brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  flex: none;
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
}
.brand__name { font-family: var(--f-serif); font-size: 1.1875rem; line-height: 1.2; letter-spacing: 0.03em; }
.brand__sub { font-size: var(--fs-note); letter-spacing: 0.08em; color: var(--c-brass); line-height: 1.2; }

.gnav { margin-inline-start: auto; min-width: 0; }
.gnav__list {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.1vw, 16px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.gnav__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-nav);
  text-decoration: none;
  white-space: nowrap;
  color: var(--c-cream);
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.gnav__link:hover { color: var(--c-brass-soft); border-bottom-color: var(--c-brass-soft); }
.gnav__link[aria-current="page"] { color: var(--c-brass); border-bottom-color: var(--c-brass); }

.header-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-s);
  color: var(--c-cream);
}
.burger span { display: block; position: relative; width: 20px; height: 2px; background: currentColor; }
.burger span::before,
.burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }

/* ============ drawer ============ */
.drawer-root {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(6, 9, 14, 0.74);
}
.drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 340px);
  background: var(--c-ink-2);
  border-left: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sp-6));
}
.drawer.is-open { transform: translateX(0); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--c-line);
}
.drawer__title { font-family: var(--f-serif); font-size: 1.0625rem; letter-spacing: 0.14em; }
.drawer__close,
.sheet__close {
  flex: none;
  width: 44px; height: 44px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-s);
  background: transparent;
  color: var(--c-cream);
  font-size: 1.25rem;
  line-height: 1;
}
.drawer__list { padding: var(--sp-2) var(--sp-5); }
.drawer__list a {
  display: flex; align-items: center;
  min-height: 52px;
  text-decoration: none;
  border-bottom: 1px solid var(--c-line);
}
.drawer__list a[aria-current="page"] { color: var(--c-brass); }
.drawer__contact { padding: var(--sp-4) var(--sp-5) 0; display: grid; gap: var(--sp-2); }
.drawer__meta { padding: var(--sp-4) var(--sp-5) 0; font-size: var(--fs-note); color: var(--c-muted); line-height: 1.7; }

/* ============ buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 11px 20px;
  border-radius: var(--r-s);
  border: 1px solid transparent;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn--primary { background: var(--c-brass); color: #14100A; }
.btn--primary:hover { background: var(--c-brass-soft); }
.btn--wine { background: var(--c-wine); color: var(--c-cream); border-color: var(--c-line-strong); }
.btn--wine:hover { background: var(--c-wine-deep); }
.btn--outline { background: transparent; color: var(--c-cream); border-color: var(--c-line-strong); }
.btn--outline:hover { border-color: var(--c-brass); color: var(--c-brass-soft); }
.btn--ghost { background: transparent; color: var(--c-muted); border-color: transparent; text-decoration: underline; }
.btn--sm { min-height: 44px; padding: 9px 14px; font-size: var(--fs-label); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  color: var(--c-brass);
  text-decoration: underline;
}
.link-arrow::after { content: "→"; }
.link-arrow:hover { color: var(--c-brass-soft); }

/* ============ breadcrumb ============ */
.breadcrumb { border-bottom: 1px solid var(--c-line); background: var(--c-ink-2); }
.breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
  font-size: var(--fs-note); color: var(--c-muted);
}
.breadcrumb li { display: flex; align-items: center; gap: 4px; }
.breadcrumb li + li::before { content: "/"; color: var(--c-line-strong); }
.breadcrumb a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: 2px; text-decoration: underline; color: var(--c-muted);
}
.breadcrumb a:hover { color: var(--c-brass-soft); }
.breadcrumb [aria-current="page"] { color: var(--c-cream); }

/* ============ page head ============ */
.page-head { padding-block: clamp(28px, 4.4vw, 52px); border-bottom: 1px solid var(--c-line); }
.page-head__title { font-family: var(--f-serif); font-size: var(--fs-h1); line-height: var(--lh-tight); }
.page-head__lead { margin-top: var(--sp-4); color: var(--c-muted); font-size: var(--fs-body-lg); }

/* ============ status dot ============ */
.state {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px 12px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-s);
  background: rgba(12, 18, 27, 0.8);
  font-size: var(--fs-note);
  font-weight: 600;
  width: fit-content;
  line-height: 1.4;
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-muted); flex: none; }
.dot--on { background: var(--c-ok); }

/* ============ card / grid ============ */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-m);
  overflow: hidden;
}
.grid { display: grid; gap: var(--sp-4); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* person card */
.person {
  display: flex; flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-m);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}
.person:hover { border-color: var(--c-brass); }
.person__media { position: relative; aspect-ratio: 3 / 4; background: var(--c-ink-2); }
.person__media img { width: 100%; height: 100%; object-fit: cover; }
.person__badge {
  position: absolute; left: 8px; top: 8px;
  padding: 4px 9px;
  border-radius: var(--r-s);
  background: var(--c-wine);
  color: var(--c-cream);
  font-size: var(--fs-note);
  font-weight: 700;
  border: 1px solid var(--c-line-strong);
}
.person__badge--new { background: var(--c-brass); color: #14100A; border-color: transparent; }
.person__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: grid; gap: 5px; }
.person__name { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.person__role { font-size: var(--fs-note); color: var(--c-brass); }
.person__time { font-size: var(--fs-body); }
.person__time span { color: var(--c-muted); }
.tag-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.tag {
  font-size: var(--fs-note);
  color: var(--c-muted);
  border: 1px solid var(--c-line);
  border-radius: var(--r-s);
  padding: 2px 8px;
  line-height: 1.5;
}

/* ============ tabs / segmented / chips ============ */
.tabs {
  display: flex; gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.tab {
  flex: none;
  min-height: 48px;
  padding: 10px 16px;
  background: transparent;
  color: var(--c-cream);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-s);
  font-size: var(--fs-label);
  font-weight: 600;
  white-space: nowrap;
}
.tab[aria-selected="true"] { background: var(--c-brass); color: #14100A; border-color: var(--c-brass); }
.tab[aria-selected="true"]::before { content: "● "; font-size: 0.7em; vertical-align: 0.15em; }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--r-s);
  border: 1px solid var(--c-line-strong);
  background: transparent;
  color: var(--c-cream);
  font-size: var(--fs-label);
}
.chip[aria-pressed="true"] { background: var(--c-wine); border-color: var(--c-brass); }
.chip[aria-pressed="true"]::before { content: "✓ "; }

/* ============ table ============ */
.table-wrap { overflow-x: auto; }
.table { min-width: 560px; font-size: var(--fs-body); }
.table caption {
  text-align: left; font-size: var(--fs-note); color: var(--c-muted);
  padding-bottom: var(--sp-2);
}
.table th,
.table td {
  border-bottom: 1px solid var(--c-line);
  padding: 12px var(--sp-3);
  text-align: left;
  line-height: var(--lh-dense);
  vertical-align: top;
}
.table thead th {
  background: var(--c-surface-2);
  font-weight: 600;
  border-bottom-color: var(--c-line-strong);
  white-space: nowrap;
}
.table tbody th { font-weight: 600; white-space: nowrap; }
.table td.num { text-align: right; white-space: nowrap; }

/* ============ definition list ============ */
.def {
  display: grid; gap: 0;
  border-top: 1px solid var(--c-line);
}
.def > div {
  display: grid;
  grid-template-columns: 8.5em 1fr;
  gap: var(--sp-4);
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
}
.def dt { font-size: var(--fs-note); color: var(--c-brass); padding-top: 2px; }
.def dd { margin: 0; font-size: var(--fs-body); line-height: var(--lh-dense); }
.def dd a { color: var(--c-cream); text-decoration: underline; }

/* ============ accordion ============ */
.acc { border-top: 1px solid var(--c-line); }
.acc__item { border-bottom: 1px solid var(--c-line); }
.acc__btn {
  width: 100%;
  min-height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: 12px 2px;
  background: transparent;
  border: 0;
  color: var(--c-cream);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  text-align: left;
  line-height: var(--lh-heading);
}
.acc__btn .mark {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid var(--c-brass);
  border-radius: var(--r-s);
  color: var(--c-brass);
  font-size: 0.9rem;
  line-height: 1;
}
.acc__btn[aria-expanded="true"] .mark::before { content: "−"; }
.acc__btn[aria-expanded="false"] .mark::before { content: "＋"; }
.acc__panel { padding: 0 2px var(--sp-5); }
.acc__panel > * + * { margin-top: var(--sp-3); }

/* ============ callout / notice ============ */
.callout {
  border: 1px solid var(--c-line-strong);
  border-left: 4px solid var(--c-brass);
  border-radius: var(--r-s);
  background: var(--c-surface);
  padding: var(--sp-4);
  line-height: var(--lh-dense);
}
.callout__title { font-weight: 700; margin-bottom: 4px; }
.callout--warn { border-left-color: var(--c-warn); }
.callout p { max-width: none; }

.notice-list { display: grid; gap: 6px; font-size: var(--fs-note); color: var(--c-muted); }
.notice-list li { padding-left: 1.1em; position: relative; line-height: 1.6; }
.notice-list li::before { content: "―"; position: absolute; left: 0; color: var(--c-brass); }

.empty {
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-m);
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  color: var(--c-muted);
  display: grid;
  gap: var(--sp-3);
  justify-items: center;
}
.empty__title { font-size: var(--fs-h3); color: var(--c-cream); }
.empty p { max-width: 60ch; }

/* ============ sheet（モーダル / SPは全画面ボトムシート） ============ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(6, 9, 14, 0.78);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet {
  --sheet-pad: var(--sp-5);
  position: relative;
  width: 100%;
  max-width: 640px;
  /* SPは全画面ボトムシート（上端に閉じる余白を残す） */
  height: calc(100dvh - 40px);
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  background: var(--c-ink-2);
  border: 1px solid var(--c-line-strong);
  border-bottom: 0;
  border-radius: var(--r-m) var(--r-m) 0 0;
  box-shadow: var(--sh-2);
  transform: translateY(24px);
  opacity: 0.001;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
}
.sheet.is-open { transform: none; opacity: 1; }
.sheet__head {
  flex: none;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sheet-pad);
  border-bottom: 1px solid var(--c-line);
}
.sheet__title { font-family: var(--f-serif); font-size: var(--fs-h3); }
/* フォームをシートの縦フレックスに参加させる（これが無いと本文が高さを持たず、
   スクロール領域が効かずに操作行が画面外へはみ出す） */
.sheet > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sheet-pad);
}
/* 操作行はシート内スクロール領域の下端へ貼り付け、入力が長くても常に押せるようにする */
.sheet__foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: var(--sp-4) calc(var(--sheet-pad) * -1) calc(var(--sheet-pad) * -1);
  padding: var(--sp-3) var(--sheet-pad) calc(env(safe-area-inset-bottom, 0px) + var(--sp-4));
  border-top: 1px solid var(--c-line);
  background: var(--c-ink-2);
}
.sheet__foot .btn { flex: 1 1 180px; }
@media (min-width: 768px) {
  .overlay { align-items: center; padding: var(--sp-5); }
  .sheet {
    height: auto;
    max-height: min(86vh, 780px);
    border-bottom: 1px solid var(--c-line-strong);
    border-radius: var(--r-m);
  }
  .sheet__foot { padding-bottom: var(--sp-4); }
}
@media (max-width: 479px) {
  .sheet { --sheet-pad: var(--sp-4); }
}

/* ============ lightbox ============ */
.lightbox {
  position: relative;
  width: 100%;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--sp-3) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + var(--sp-4));
  opacity: 0.001;
  transition: opacity var(--dur) var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.lightbox__count { font-size: var(--fs-note); color: var(--c-muted); }
.lightbox__stage { display: grid; place-items: center; min-height: 0; padding: var(--sp-3) 0; }
.lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-s); }
.lightbox__foot { display: grid; gap: var(--sp-2); justify-items: center; }
.lightbox__caption { text-align: center; font-size: var(--fs-body); }
.lightbox__nav { display: flex; gap: var(--sp-2); }
.lightbox__nav button {
  min-width: 64px; min-height: 48px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-s);
  background: transparent;
  color: var(--c-cream);
}

/* ============ form ============ */
.form { display: grid; gap: var(--sp-4); }
.field { display: grid; gap: 5px; }
.field__label { font-size: var(--fs-label); font-weight: 600; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.field__req { font-size: var(--fs-note); background: var(--c-wine); color: var(--c-cream); border-radius: var(--r-s); padding: 1px 7px; font-weight: 700; }
.field__opt { font-size: var(--fs-note); border: 1px solid var(--c-line-strong); color: var(--c-muted); border-radius: var(--r-s); padding: 1px 7px; }
.field__hint { font-size: var(--fs-note); color: var(--c-muted); line-height: 1.6; }
.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-s);
  color: var(--c-cream);
  font-size: var(--fs-body);
}
.textarea { min-height: 120px; line-height: 1.7; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: #8E96A3; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--c-brass); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--c-alert); }
.field__error {
  font-size: var(--fs-note);
  color: var(--c-alert);
  line-height: 1.6;
  display: flex; gap: 6px; align-items: flex-start;
}
.field__error::before { content: "！"; font-weight: 700; }

.checkline { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: 44px; }
.checkline input { width: 24px; height: 24px; margin-top: 4px; flex: none; accent-color: var(--c-brass); }
.checkline label { font-size: var(--fs-body); line-height: var(--lh-dense); }

.form-error {
  border: 1px solid var(--c-alert);
  border-radius: var(--r-s);
  background: rgba(235, 168, 168, 0.1);
  padding: var(--sp-3) var(--sp-4);
}
.form-error__title { font-weight: 700; margin-bottom: 4px; }
.form-error ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.form-error a { color: var(--c-cream); }

.stepper { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); list-style: none; padding: 0; }
.stepper__item {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-note);
  color: var(--c-muted);
  border: 1px solid var(--c-line);
  border-radius: var(--r-s);
  padding: 5px 10px;
}
.stepper__num {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: inherit;
  line-height: 1;
}
.stepper__item[aria-current="step"] { color: var(--c-brass); border-color: var(--c-brass); font-weight: 700; }
.stepper__item[data-done="true"] { color: var(--c-cream); }
.stepper__item[data-done="true"] .stepper__num::before { content: "✓"; }

.confirm { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.confirm__row {
  display: grid; grid-template-columns: 9em 1fr;
  gap: var(--sp-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--c-line);
}
.confirm__key { font-size: var(--fs-note); color: var(--c-muted); }
.confirm__val { margin: 0; word-break: break-word; }

/* ページ内に直接置くフォーム（contact / recruit）の操作行 */
.form-foot {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
}
.form-foot .btn { flex: 1 1 200px; }
.empty__act { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }

/* ============ footer ============ */
.site-footer {
  border-top: 1px solid var(--c-line);
  background: #0D141E;
  padding-block: var(--sp-7) var(--sp-5);
  margin-top: var(--section-y);
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-6); }
.footer-brand__name { font-family: var(--f-serif); font-size: 1.3125rem; letter-spacing: 0.04em; }
.footer-brand__sub { font-size: var(--fs-note); color: var(--c-brass); margin-top: 2px; }
.footer-info { font-size: var(--fs-note); color: var(--c-muted); line-height: 1.8; margin-top: var(--sp-3); display: grid; grid-template-columns: 5em 1fr; gap: 2px var(--sp-3); }
.footer-info dt { color: var(--c-muted); }
.footer-info dd { margin: 0; }
.footer-info a { color: var(--c-cream); text-decoration: underline; }
.footer-demo { margin-top: var(--sp-4); font-size: var(--fs-note); color: var(--c-muted); line-height: 1.7; }
.footer-title { font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--c-brass); margin-bottom: var(--sp-2); }
.footer-nav { display: grid; gap: 0; }
.footer-nav a {
  display: flex; align-items: center; min-height: 44px;
  font-size: var(--fs-note); color: var(--c-muted); text-decoration: none;
}
.footer-nav a:hover { color: var(--c-brass-soft); text-decoration: underline; }
.footer-bottom {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-note);
  color: var(--c-muted);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2);
}

/* ============ 固定CTA（SP） ============ */
.cta-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-cta);
  background: rgba(17, 25, 37, 0.98);
  border-top: 1px solid var(--c-line-strong);
  /* バー本体の高さは 罫線1px + padding上下3px + タップ領域48px = 55px。
     safe-area は下 padding へ加算するのみでバー高は変えない。 */
  padding: var(--cta-pad) var(--sp-2) calc(env(safe-area-inset-bottom, 0px) + var(--cta-pad));
}
.cta-bar__list { display: grid; grid-template-columns: 1.45fr 1fr 1fr; gap: 5px; list-style: none; margin: 0; padding: 0; }
.cta-bar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: var(--cta-tap);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-s);
  text-decoration: none;
  font-size: var(--fs-note);
  font-weight: 600;
  line-height: 1.2;
  padding: 2px 3px;
  text-align: center;
}
.cta-bar__item { font-size: var(--fs-note); }
.cta-bar__item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cta-bar__item--primary { background: var(--c-brass); color: #14100A; border-color: var(--c-brass); }

/* ============ motion ============ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============ noscript ============ */
.noscript-note { background: var(--c-surface); border-bottom: 1px solid var(--c-brass); }
.noscript-note__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-4) var(--gutter);
  font-size: var(--fs-note);
  line-height: 1.7;
}
.noscript-note dl { display: grid; grid-template-columns: 7em 1fr; gap: 4px var(--sp-3); margin: var(--sp-2) 0; }
.noscript-note dt { color: var(--c-brass); }
.noscript-note dd { margin: 0; }

/* ============ 単独リンクのタップ領域（44px）をまとめて確保 ============ */
a.tag,
.checkline a,
.def dd a,
.footer-info a,
.prose a,
.acc__panel a,
.callout a,
.sec-head__lead a,
.page-head__lead a,
.hero__fact dd a,
.note a { display: inline-flex; align-items: center; min-height: 44px; }
a.tag { padding: 3px 11px; }
/* 行内リンクを44pxにしても行間が跳ねないよう、行の基準は本文行間のまま保つ */
.checkline a,
.def dd a,
.footer-info a,
.prose a,
.acc__panel a,
.callout a,
.sec-head__lead a,
.page-head__lead a,
.hero__fact dd a,
.note a { margin-block: -10px; vertical-align: middle; }