/* =============================================================================
   components.css — 部品の見た目（@layer components）
   Hair Make & Spa Tento-（旧サイト beauty_tcd054 の見た目を踏襲・2026-10-14 CJ）
   -----------------------------------------------------------------------------
   すべて tokens.css の意味トークンを参照する（生の値は書かない）。
   部品の対応: 黒い帯（ヘッダー・見出し箱・フッター）／白い帯のメニュー／
   全幅写真のヒーロー／四角いボタン（#333 → ホバーで焦げ茶）。
   02_conventions/css.md / accessibility.md 準拠。
   ============================================================================= */

@layer components {
  /* ====================== レイアウト共通 ====================== */
  .container {
    inline-size: 100%;
    max-inline-size: var(--layout-max-inline);
    margin-inline: auto;
    padding-inline: var(--layout-gutter);
  }

  .container--narrow {
    max-inline-size: 48rem;
  }

  .section {
    padding-block: var(--space-2xl);
  }

  .section--tight {
    padding-block: var(--space-xl);
  }

  .section--surface {
    background-color: var(--color-surface-2);
  }

  /* 黒い帯の区画（採用・行動の呼びかけ）。中の文字・リンクは反転色 */
  .section--band {
    background-color: var(--color-band-bg);
    color: var(--color-band-text);
  }

  .section--band :is(h2, h3, h4, strong) {
    color: var(--color-band-text);
  }

  .section--band :focus-visible {
    outline-color: var(--color-band-focus);
  }

  .serif {
    font-family: var(--font-serif);
    font-weight: var(--font-weight-heading);
    letter-spacing: var(--tracking-heading);
  }

  /* ====================== スキップリンク ====================== */
  .skip-link {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-start: var(--space-2xs);
    z-index: var(--z-toast);
    padding-block: var(--space-2xs);
    padding-inline: var(--space-sm);
    background-color: var(--color-band-text);
    color: var(--color-band-bg);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--motion-fast) var(--ease-standard);
  }

  .skip-link:focus-visible {
    transform: translateY(0);
  }

  /* ====================== ボタン ====================== */

  /* 旧サイトと同じ四角いボタン。#333 → ホバーで焦げ茶 */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-block-size: var(--size-7);
    padding-block: var(--space-2xs);
    padding-inline: var(--space-md);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    font-size: var(--text-base);
    line-height: var(--leading-tight);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color var(--motion-base) var(--ease-standard),
      color var(--motion-base) var(--ease-standard),
      border-color var(--motion-base) var(--ease-standard);
  }

  .button:hover {
    background-color: var(--color-primary-strong);
    color: var(--color-text-on-primary);
  }

  /* 黒帯の上: 白地に黒文字（主の行動） */
  .button--light {
    background-color: var(--color-band-text);
    color: var(--color-band-bg);
  }

  .button--light:hover {
    background-color: var(--color-band-accent);
    color: var(--color-band-bg);
  }

  /* 黒帯の上: 真鍮の枠線（もう一方の行動） */
  .button--line {
    background-color: transparent;
    border-color: var(--color-band-accent);
    color: var(--color-band-text);
  }

  .button--line:hover {
    background-color: var(--color-band-accent);
    color: var(--color-band-bg);
  }

  /* 白地の上の枠線ボタン */
  .button--outline {
    background-color: transparent;
    border-color: var(--color-text);
    color: var(--color-text);
  }

  .button--outline:hover {
    background-color: var(--color-text);
    color: var(--color-bg);
  }

  .button--wide {
    min-inline-size: min(18rem, 100%);
  }

  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-start: var(--space-lg);
  }

  .actions--center {
    justify-content: center;
  }

  /* ====================== サイトヘッダー ====================== */

  /* 黒い帯（ロゴ・2つの入口）＋白い帯（メニュー）。旧サイトと同じく上に留まる */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
  }

  .site-header__bar {
    background-color: var(--color-band-bg);
    color: var(--color-band-text);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    min-block-size: 4.5rem;
  }

  .site-logo {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--size-7);
    color: var(--color-band-text);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-heading);
    letter-spacing: var(--tracking-heading);
    text-decoration: none;
  }

  .site-logo:hover {
    color: var(--color-band-accent);
  }

  .site-header :focus-visible {
    outline-color: var(--color-band-focus);
  }

  .header-cta {
    display: flex;
    gap: var(--space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .header-cta .button {
    min-block-size: 2.75rem;
    font-size: var(--text-sm);
  }

  /* メニュー（白い帯・明朝・縦線区切り） */
  .global-nav {
    background-color: var(--color-bg);
    border-block-end: 1px solid var(--color-divider);
  }

  .nav-list {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav-list__item {
    flex: 1 1 0;
    max-inline-size: 9rem;
    border-inline-start: 1px solid var(--color-divider);
  }

  .nav-list__item:last-child {
    border-inline-end: 1px solid var(--color-divider);
  }

  .nav-list__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-block-size: 3.5rem;
    padding: var(--space-3xs) var(--space-2xs);
    color: var(--color-text);
    font-family: var(--font-serif);
    font-size: var(--text-md);
    font-weight: var(--font-weight-heading);
    line-height: var(--leading-tight);
    text-decoration: none;
    transition:
      background-color var(--motion-base) var(--ease-standard),
      color var(--motion-base) var(--ease-standard);
  }

  .nav-list__sub {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  .nav-list__link:hover {
    background-color: var(--color-primary-strong);
    color: var(--color-text-on-primary);
  }

  .nav-list__link:hover .nav-list__sub {
    color: var(--color-text-on-primary);
  }

  /* 現在地は色だけでなく下線でも示す */
  .nav-list__link[aria-current="page"] {
    box-shadow: inset 0 -3px 0 var(--color-link);
  }

  .nav-toggle {
    display: none;
  }

  /* ---- 狭い画面 ----
     - JS が動くときだけメニューを畳み、黒い全面リストで開く（旧サイトと同じ）。
     - 2つの入口は画面下に固定（親指の届く位置・常に見える）。 */
  @media (width <= 767px) {
    .site-header__inner {
      min-block-size: 3.5rem;
    }

    .site-logo {
      font-size: var(--text-md);
    }

    .header-cta {
      position: fixed;
      inset-inline: 0;
      inset-block-end: 0;
      z-index: var(--z-sticky);
      gap: 1px;
      background-color: var(--color-band-bg);
      box-shadow: var(--shadow-2);
    }

    .header-cta > li {
      flex: 1 1 0;
    }

    .header-cta .button {
      inline-size: 100%;
      min-block-size: 3.25rem;
      border-radius: 0;
    }

    .js .nav-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: var(--size-7);
      block-size: var(--size-7);
      padding: 0;
      border: 1px solid var(--color-band-muted);
      background-color: transparent;
      color: var(--color-band-text);
      cursor: pointer;
    }

    .nav-toggle__bars,
    .nav-toggle__bars::before,
    .nav-toggle__bars::after {
      display: block;
      inline-size: 1.25rem;
      block-size: 2px;
      background-color: currentcolor;
    }

    .nav-toggle__bars {
      position: relative;
    }

    .nav-toggle__bars::before,
    .nav-toggle__bars::after {
      content: "";
      position: absolute;
    }

    .nav-toggle__bars::before {
      inset-block-start: -6px;
    }

    .nav-toggle__bars::after {
      inset-block-start: 6px;
    }

    .nav-list {
      flex-wrap: wrap;
    }

    .nav-list__item {
      flex-basis: 25%;
      max-inline-size: none;
    }

    .nav-list__link {
      font-size: var(--text-base);
    }

    .js .global-nav:not(.is-open) {
      display: none;
    }

    .js .global-nav.is-open {
      background-color: var(--color-band-bg);
      border: 0;
    }

    .js .global-nav.is-open .nav-list {
      flex-direction: column;
      padding-block-end: var(--space-sm);
    }

    .js .global-nav.is-open .nav-list__item {
      border: 0;
      border-block-end: 1px solid var(--color-band-surface);
    }

    .js .global-nav.is-open .nav-list__link {
      flex-direction: row;
      justify-content: space-between;
      padding-inline: var(--layout-gutter);
      color: var(--color-band-text);
    }

    .js .global-nav.is-open .nav-list__sub {
      color: var(--color-band-muted);
    }
  }

  /* ====================== ヒーロー（トップ） ====================== */
  .hero {
    position: relative;
    display: grid;
    background-color: var(--color-band-bg);
    color: var(--color-band-text);
  }

  .hero > * {
    grid-area: 1 / 1;
  }

  .hero__media img {
    inline-size: 100%;
    block-size: min(78svb, 46rem);
    min-block-size: 26rem;
    object-fit: cover;
    object-position: 60% 25%;
    opacity: 82%;
  }

  /* 写真は透明度で重なり順が上がるため、文字側を position で前に出す */
  .hero__body {
    position: relative;
    align-self: end;
    padding-block: var(--space-2xl);
    background-image: linear-gradient(to top, oklch(0% 0 0deg / 70%), oklch(0% 0 0deg / 0%));
  }

  .hero__title {
    color: var(--color-band-text);
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-heading);
    letter-spacing: var(--tracking-heading);
  }

  /* 文節の途中で折り返さない（狭い画面でも「変わってる」が割れない） */
  .hero__title span {
    display: inline-block;
  }

  .hero__sub {
    margin-block: var(--space-sm) 0;
    color: var(--color-band-accent);
    font-size: var(--text-sm);
    letter-spacing: 0.2em;
  }

  .hero__lead {
    margin-block-start: var(--space-sm);
    color: var(--color-band-text);
  }

  .hero :focus-visible {
    outline-color: var(--color-band-focus);
  }

  /* ====================== 下層ページの見出し帯 ====================== */
  .page-header {
    position: relative;
    display: grid;
    background-color: var(--color-band-bg);
    color: var(--color-band-text);
  }

  .page-header > * {
    grid-area: 1 / 1;
  }

  .page-header__media img {
    inline-size: 100%;
    block-size: clamp(12rem, 30vw, 20rem);
    object-fit: cover;
    opacity: 55%;
  }

  .page-header__body {
    position: relative;
    align-self: center;
    padding-block: var(--space-xl);
  }

  .page-header__title {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    color: var(--color-band-text);
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-heading);
    letter-spacing: var(--tracking-heading);
  }

  .page-header__sub {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
  }

  .page-header__sub::before {
    content: "";
    display: block;
    inline-size: 2rem;
    block-size: 1px;
    margin-block-end: var(--space-2xs);
    background-color: var(--color-band-accent);
  }

  /* 記事など長い題名の見出し帯 */
  .page-header--text .page-header__title {
    font-size: var(--text-xl);
  }

  /* ====================== パンくず ====================== */
  .breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin: 0;
    padding-block: var(--space-xs);
    padding-inline: 0;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .breadcrumb__item + .breadcrumb__item::before {
    content: "/";
    margin-inline-end: var(--space-2xs);
  }

  /* ====================== 見出し箱（旧サイトの顔） ====================== */
  .section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md) var(--space-lg);
    margin-block-end: var(--space-lg);
  }

  .section-head > p {
    flex: 1 1 18rem;
    margin: 0;
  }

  .heading-box {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xs);
    inline-size: var(--heading-box-size);
    block-size: var(--heading-box-size);
    margin: 0;
    background-color: var(--color-band-bg);
    color: var(--color-band-text);
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-heading);
    line-height: 1.1;
    text-align: center;
  }

  .heading-box__sub {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
  }

  .heading-box__sub::after {
    content: "";
    display: block;
    inline-size: 2rem;
    block-size: 1px;
    margin: var(--space-2xs) auto 0;
    background-color: var(--color-band-accent);
  }

  /* 黒い帯の中では白い箱に反転 */
  .section--band .heading-box {
    background-color: var(--color-band-text);
    color: var(--color-band-bg);
  }

  /* 本文中の小見出し（明朝＋下線） */
  .title-line {
    margin-block: var(--space-xl) var(--space-md);
    padding-block-end: var(--space-2xs);
    border-block-end: 1px solid currentcolor;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-heading);
  }

  .title-line:first-child {
    margin-block-start: 0;
  }

  /* ====================== グリッドとカード ====================== */
  .grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* 3枚程度を並べるとき（余った列を作らず幅いっぱいに広げる） */
  .grid--fit {
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  }

  .grid--small {
    gap: var(--space-sm);
    grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 100%), 1fr));
  }

  .grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: var(--space-lg);
  }

  .card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    block-size: 100%;
    color: var(--color-text);
    text-decoration: none;
  }

  .card__media {
    overflow: hidden;
    background-color: var(--color-surface-2);
  }

  .card__media img {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--motion-base) var(--ease-standard);
  }

  .card__media--portrait img {
    aspect-ratio: 37 / 50;
  }

  .card__meta {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .card__title {
    margin: 0;
    color: var(--color-text-strong);
    font-size: var(--text-base);
    font-weight: 700;
    line-height: var(--leading-tight);
  }

  .card__text {
    margin: 0;
    font-size: var(--text-sm);
  }

  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-xs);
  }

  .tag-list li {
    padding-inline: var(--space-2xs);
    border: 1px solid var(--color-divider);
    color: var(--color-text-muted);
  }

  /* スタイルの「ポイント」（開閉） */
  .card details {
    font-size: var(--text-sm);
  }

  .card summary {
    cursor: pointer;
    color: var(--color-link);
  }

  /* ====================== 絞り込み（スタイル） ====================== */
  .filter {
    display: grid;
    gap: var(--space-xs);
    margin-block-end: var(--space-lg);
    padding: var(--space-sm);
    background-color: var(--color-surface-2);
  }

  .filter__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
  }

  .filter__label {
    min-inline-size: 4rem;
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .filter__button {
    min-block-size: 2.75rem;
    padding-inline: var(--space-sm);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: var(--text-sm);
    cursor: pointer;
  }

  .filter__button[aria-pressed="true"] {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
  }

  .filter__status {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  /* ====================== 写真と文章の段組 ====================== */
  .media-row {
    display: grid;
    gap: var(--space-lg);
    align-items: center;
  }

  @media (width >= 48rem) {
    .media-row {
      grid-template-columns: 1fr 1fr;
    }

    .media-row--reverse > :first-child {
      order: 2;
    }
  }

  .media-row img {
    inline-size: 100%;
  }

  .feature-number {
    display: block;
    color: var(--color-accent-line);
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    line-height: 1;
  }

  /* ====================== 数字（採用） ====================== */
  .stats {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    margin: 0;
  }

  .stats > div {
    padding-block-start: var(--space-sm);
    border-block-start: 1px solid var(--color-band-accent);
  }

  .stats dt {
    color: var(--color-band-muted);
    font-size: var(--text-sm);
  }

  .stats dd {
    margin: 0;
    color: var(--color-band-accent);
    font-family: var(--font-serif);
    font-size: var(--text-xl);
  }

  .stats__note {
    margin-block-start: var(--space-sm);
    color: var(--color-band-muted);
    font-size: var(--text-sm);
  }

  /* ====================== 表（料金・募集要項・店舗情報） ====================== */
  .price-table,
  .info-table {
    inline-size: 100%;
    margin-block-end: var(--space-lg);
    border-collapse: collapse;
  }

  .price-table caption,
  .info-table caption {
    padding-block-end: var(--space-2xs);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-heading);
    text-align: start;
  }

  .price-table :is(th, td),
  .info-table :is(th, td) {
    padding: var(--space-xs) var(--space-2xs);
    border-block-end: 1px solid var(--color-divider);
    text-align: start;
    vertical-align: top;
  }

  .price-table th {
    font-weight: 700;
  }

  .price-table td.price {
    white-space: nowrap;
    text-align: end;
    font-family: var(--font-serif);
    font-size: var(--text-md);
  }

  .price-table .price-table__desc {
    display: block;
    margin-block-start: var(--space-3xs);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 400;
  }

  .info-table th {
    inline-size: 9rem;
    background-color: var(--color-surface);
    font-weight: 700;
  }

  @media (width <= 35.99rem) {
    .info-table :is(th, td) {
      display: block;
      inline-size: auto;
    }

    .info-table td {
      border-block-end: 0;
    }
  }

  .note {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  /* ====================== 箇条書き・手順 ====================== */
  .check-list {
    padding-inline-start: 1.25em;
  }

  .check-list > * + * {
    margin-block-start: var(--space-2xs);
  }

  .steps {
    display: grid;
    gap: var(--space-sm);
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
  }

  .steps li {
    padding: var(--space-sm);
    border-block-start: 2px solid var(--color-accent-line);
    background-color: var(--color-surface);
    counter-increment: step;
  }

  .steps li::before {
    content: counter(step, decimal-leading-zero);
    display: block;
    color: var(--color-accent-line);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
  }

  /* ====================== 年表（活動実績） ====================== */
  .timeline {
    margin: 0;
    padding: 0;
    list-style: none;
    border-inline-start: 1px solid var(--color-accent-line);
  }

  .timeline > li {
    position: relative;
    padding-inline-start: var(--space-md);
    padding-block-end: var(--space-lg);
  }

  .timeline > li::before {
    content: "";
    position: absolute;
    inset-block-start: 0.6em;
    inset-inline-start: -0.3125rem;
    inline-size: 0.625rem;
    block-size: 0.625rem;
    background-color: var(--color-band-bg);
  }

  .timeline time {
    color: var(--color-text-muted);
    font-family: var(--font-serif);
  }

  .timeline h3 {
    margin-block: var(--space-3xs) var(--space-2xs);
    font-size: var(--text-md);
  }

  /* ====================== 記事本文 ====================== */
  .prose {
    max-inline-size: 46rem;
  }

  .prose :is(h2, h3, h4) {
    margin-block: var(--space-xl) var(--space-sm);
    font-family: var(--font-serif);
    font-weight: var(--font-weight-heading);
  }

  .prose h2 {
    padding-block-end: var(--space-2xs);
    border-block-end: 1px solid currentcolor;
    font-size: var(--text-lg);
  }

  .prose :is(h3, h4) {
    font-size: var(--text-md);
  }

  .prose figure,
  .prose picture {
    margin-block: var(--space-md);
  }

  .prose img {
    inline-size: auto;
    max-block-size: 40rem;
  }

  .prose figcaption {
    margin-block-start: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .prose blockquote {
    padding-inline-start: var(--space-sm);
    border-inline-start: 3px solid var(--color-divider);
    color: var(--color-text-muted);
  }

  .prose video {
    inline-size: 100%;
    max-inline-size: 30rem;
    background-color: var(--color-band-bg);
  }

  .article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-end: var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--color-divider);
  }

  .pager a {
    max-inline-size: 22rem;
  }

  /* ====================== スタッフ ====================== */
  .profile {
    display: grid;
    gap: var(--space-lg);
  }

  @media (width >= 48rem) {
    .profile {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      align-items: start;
    }
  }

  .profile__role {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .profile__name {
    margin-block: var(--space-3xs) var(--space-md);
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-heading);
  }

  .profile__crush {
    margin-block-end: var(--space-md);
    padding: var(--space-sm);
    background-color: var(--color-band-bg);
    color: var(--color-band-text);
  }

  .profile__crush dt {
    color: var(--color-band-accent);
    font-size: var(--text-sm);
  }

  .profile__crush dd {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--text-md);
  }

  /* ====================== 行動の呼びかけ（ページ末尾） ====================== */
  .cta-band {
    display: grid;
    gap: var(--space-lg);
  }

  @media (width >= 48rem) {
    .cta-band {
      grid-template-columns: 1fr 1fr;
    }
  }

  .cta-band__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-lg);
    border: 1px solid var(--color-band-accent);
  }

  .cta-band__item h2 {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-heading);
  }

  .cta-band__item p {
    margin: 0;
  }

  .cta-band__item .button {
    align-self: flex-start;
    margin-block-start: auto;
  }

  .cta-band__sub {
    font-size: var(--text-sm);
    color: var(--color-band-muted);
  }

  /* ====================== 地図 ====================== */
  .map-link {
    display: block;
    padding: var(--space-md);
    border: 1px solid var(--color-divider);
  }

  /* ====================== 中央寄せの単純ページ（404 など） ====================== */
  .center-prose {
    display: grid;
    gap: var(--space-md);
    justify-items: start;
    padding-block: var(--space-3xl);
  }

  /* ====================== サイトフッター ====================== */
  .site-footer {
    padding-block: var(--space-2xl) var(--space-lg);
    background-color: var(--color-band-bg);
    color: var(--color-band-text);
    font-size: var(--text-sm);
  }

  .site-footer :focus-visible {
    outline-color: var(--color-band-focus);
  }

  .site-footer__inner {
    display: grid;
    gap: var(--space-xl);
  }

  @media (width >= 48rem) {
    .site-footer__inner {
      grid-template-columns: 3fr 2fr;
    }
  }

  .site-footer__logo {
    margin-block-end: var(--space-sm);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-heading);
  }

  .site-footer address {
    margin-block-end: var(--space-sm);
    font-style: normal;
  }

  .site-footer__info {
    display: grid;
    gap: var(--space-3xs);
    margin: 0;
  }

  .site-footer__info div {
    display: flex;
    gap: var(--space-sm);
  }

  .site-footer__info dt {
    flex: none;
    min-inline-size: 4.5rem;
    color: var(--color-band-muted);
  }

  .site-footer__info dd {
    margin: 0;
  }

  .site-footer__cta {
    display: grid;
    gap: var(--space-xs);
    align-content: start;
  }

  .site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-block-start: var(--space-xl);
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--color-band-line);
    color: var(--color-band-muted);
  }

  .site-footer__bottom p {
    margin: 0;
  }

  /* 狭い画面: 画面下の固定ボタンにフッターが隠れないように */
  @media (width <= 767px) {
    .site-footer {
      padding-block-end: calc(var(--space-lg) + 3.25rem);
    }
  }

  /* ====================== フォーム（予約リクエスト・応募見学） ====================== */
  .form {
    display: grid;
    gap: var(--space-lg);
  }

  .form-field {
    display: grid;
    gap: var(--space-2xs);
  }

  .form-field > label,
  .form-group legend {
    font-weight: 700;
  }

  .form-group {
    display: grid;
    gap: var(--space-2xs);
    margin: 0;
    padding: 0;
    border: 0;
  }

  .form-group legend {
    margin-block-end: var(--space-2xs);
    padding: 0;
  }

  .badge-required,
  .badge-optional {
    display: inline-block;
    margin-inline-start: var(--space-2xs);
    padding-inline: var(--space-2xs);
    font-size: var(--text-xs);
    font-weight: 400;
    vertical-align: middle;
  }

  .badge-required {
    background-color: var(--color-band-bg);
    color: var(--color-band-text);
  }

  .badge-optional {
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
  }

  .form-control {
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: var(--space-2xs) var(--space-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  textarea.form-control {
    min-block-size: 8rem;
    resize: vertical;
  }

  .form-control[aria-invalid="true"] {
    border-color: var(--color-danger);
    border-width: 2px;
  }

  .form-hint {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .form-error {
    margin: 0;
    color: var(--color-danger);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .choice-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .choice-list label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-block-size: 2.75rem;
    cursor: pointer;
  }

  .choice-list input {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    accent-color: var(--color-primary);
  }

  .wish-row {
    display: grid;
    gap: var(--space-xs);
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  }

  .form-summary {
    padding: var(--space-sm);
    border: 2px solid var(--color-danger);
    background-color: var(--color-bg);
  }

  .form-summary h2 {
    margin-block-end: var(--space-2xs);
    color: var(--color-danger);
    font-size: var(--text-md);
  }

  .form-summary ul {
    margin: 0;
    padding-inline-start: 1.25em;
  }

  .form-consent {
    padding: var(--space-sm);
    background-color: var(--color-surface-2);
  }

  .form-submit {
    min-inline-size: min(20rem, 100%);
  }

  .form-submit[aria-busy="true"] {
    cursor: progress;
    opacity: 70%;
  }

  /* ハニーポット（人には見えない・読み上げない・Tab で到達しない） */
  .hp {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ====================== 詳細度の高い上書き（no-descending-specificity のため末尾に置く） ====================== */
  .section--band a:not(.button) {
    color: var(--color-band-text);
  }

  a.card:hover .card__media img {
    transform: scale(1.06);
  }

  a.card:hover .card__title {
    color: var(--color-link);
    text-decoration: underline;
  }

  .section--band .steps li {
    background-color: var(--color-band-surface);
  }

  .section--band .steps li::before {
    color: var(--color-band-accent);
  }

  .site-footer a:not(.button) {
    color: var(--color-band-text);
  }

  .site-footer a:not(.button):hover {
    color: var(--color-band-accent);
  }
}

/* ============================== utilities レイヤー ============================== */
@layer utilities {
  /* [hidden] を必ず効かせる（v13.0・F-148） */
  [hidden] {
    display: none;
  }

  .flow > * + * {
    margin-block-start: var(--space-sm);
  }

  .mbe-0 {
    margin-block-end: 0;
  }

  .center {
    text-align: center;
  }

  .text-muted {
    color: var(--color-text-muted);
  }

  .lead {
    font-size: var(--text-md);
  }
}