/* =============================================================================
   components.css — 最小コンポーネント（@layer components）
   -----------------------------------------------------------------------------
   ヘッダ／ナビ／ボタン／カード／フッター等の見た目。すべて tokens.css の
   意味トークンを参照します（生のマジックナンバーは書きません）。
   設計方式は「素直な単一クラス中心」（過剰な抽象化をしない）。
   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);
  }

  /* セクションの上下余白 */
  .section {
    padding-block: var(--space-2xl);
  }

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

  /* ====================== スキップリンク ====================== */

  /* 通常は画面外に隠し、キーボードでフォーカスされたら左上に出現させる。
     accessibility.md §2.4（2.4.1）。 */
  .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-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-md);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--motion-fast) var(--ease-standard);
  }

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

  /* ====================== サイトヘッダ／ナビ ====================== */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    background-color: var(--color-bg);
    border-block-end: 1px solid var(--color-border);
  }

  .site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    padding-block: var(--space-xs);
  }

  /* ロゴ（リンク） */
  .site-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--color-text-strong);
    font-size: var(--text-md);
    font-weight: 700;
    text-decoration: none;

    /* タップ領域確保（24px 以上） */
    min-block-size: var(--size-7);
  }

  .site-logo__mark {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    color: var(--color-primary); /* ロゴ SVG は currentColor で追従 */
  }

  /* グローバルナビ */
  .nav-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-list__link {
    display: inline-flex;
    align-items: center;

    /* タップ領域: 高さ 24px 以上を確保（accessibility.md §2.3） */
    min-block-size: var(--size-7);
    padding-block: var(--space-3xs);
    padding-inline: var(--space-2xs);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
  }

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

  /* 現在地（aria-current="page"）を色だけでなく下線でも示す */
  .nav-list__link[aria-current="page"] {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 0.3em;
    text-decoration-thickness: 2px;
  }

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

  /* a でも button でも同じ見た目にできる汎用クラス。
     タップ領域は最小 24px、主要操作は 44px 目安（accessibility.md §2.3）。 */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-block-size: var(--size-7); /* 48px */
    min-inline-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);
    font-weight: 600;
    line-height: var(--leading-tight);
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color var(--motion-fast) var(--ease-standard),
      border-color var(--motion-fast) var(--ease-standard);
  }

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

  /* 副ボタン（枠線） */
  .button--secondary {
    background-color: transparent;
    border-color: var(--color-border);
    color: var(--color-link);
  }

  .button--secondary:hover {
    background-color: var(--color-surface-2);
    color: var(--color-link-hover);
  }

  /* ====================== ヒーロー ====================== */
  .hero {
    padding-block: var(--space-3xl);
    background-color: var(--color-primary-weak);
    border-block-end: 1px solid var(--color-border);
  }

  .hero__title {
    margin-block-end: var(--space-sm);
    max-inline-size: 24ch;
  }

  .hero__lead {
    max-inline-size: 60ch;
    font-size: var(--text-md);
    color: var(--color-text);
  }

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

  /* ====================== カード ====================== */

  /* 親の幅で適応させるためコンテナクエリを使う（css.md §3）。 */
  .card-grid {
    container-type: inline-size;
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr;
    margin-block-start: var(--space-lg);
    list-style: none;
    padding: 0;
  }

  .card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    block-size: 100%;
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
    transition:
      transform var(--motion-base) var(--ease-standard),
      box-shadow var(--motion-base) var(--ease-standard);
  }

  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
  }

  .card__icon {
    inline-size: var(--size-6);
    block-size: var(--size-6);
    color: var(--color-primary); /* アイコン SVG は currentColor で追従 */
  }

  .card__title {
    margin-block: var(--space-2xs) 0;
  }

  /* カード内の強調数値（市場データ等） */
  .card__fig {
    margin: 0;
    color: var(--color-primary-ink);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: var(--leading-tight);
  }

  /* カード内の出典（小さく下部に） */
  .card__source {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  /* 図版（説明図） */
  .figure-diagram {
    margin: 0;
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
  }

  .figure-diagram img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  .figure-diagram figcaption {
    margin-block-start: var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: center;
  }

  /* 動画埋め込み（16:9・レスポンシブ） */
  .video-frame {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-2);
    background-color: var(--color-primary-weak);
  }

  .video-frame iframe {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
  }

  .card__text {
    margin: 0;
    color: var(--color-text);
  }

  /* ====================== 連絡先・問い合わせ導線 ====================== */
  .contact {
    display: grid;
    gap: var(--space-md);
    padding: var(--space-lg);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }

  .contact__list {
    display: grid;
    gap: var(--space-2xs);
    margin: 0;
  }

  .contact__list div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }

  .contact__list dt {
    min-inline-size: 6rem;
    font-weight: 700;
    color: var(--color-text-strong);
  }

  .contact__list dd {
    margin: 0;
  }

  /* ====================== サイトフッタ ====================== */
  .site-footer {
    margin-block-start: var(--space-3xl);
    padding-block: var(--space-xl);
    background-color: var(--color-surface-2);
    border-block-start: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .site-footer a {
    color: var(--color-link);
  }

  /* ====================== 補助テキスト ====================== */
  .lead {
    font-size: var(--text-md);
    color: var(--color-text);
    word-break: auto-phrase;
  }

  .hero-cover__lead,
  .hero-cover__title {
    word-break: auto-phrase;
  }

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

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

  /* ====================== ボタン追加バリエーション ====================== */

  /* 主CV（個別相談）用。濃い緑で白文字（コントラスト確保） */
  .button--cta {
    background-color: var(--color-cta-bg);
    color: var(--color-cta-text);
    border-color: transparent;
    font-weight: 700;
  }

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

  /* 大きめ（ヒーローの主行動） */
  .button--lg {
    min-block-size: var(--size-8);
    padding-inline: var(--space-lg);
    font-size: var(--text-md);
  }

  /* ヘッダー右端の常設CTA */
  .site-header__cta {
    margin-inline-start: auto;
  }

  /* 狭幅：ロゴ＋CTAを上段、ナビを下段全幅に整える（JSなしのモバイル対応） */
  @media (width < 48rem) {
    .site-header__cta {
      order: 2;
    }

    .site-header__inner > nav {
      order: 3;
      flex-basis: 100%;
    }

    .site-header .nav-list {
      justify-content: flex-start;
    }
  }

  /* ====================== セクション見出し ====================== */
  .section--alt {
    background-color: var(--color-bg-alt);
  }

  .section__head {
    max-inline-size: 60ch;
    margin-block-end: var(--space-lg);
  }

  .section__head--center {
    margin-inline: auto;
    text-align: center;
  }

  .eyebrow {
    display: inline-block;
    margin-block-end: var(--space-2xs);
    color: var(--color-primary-ink);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
  }

  /* ====================== ヒーロー（メディア併置） ====================== */
  .hero__eyebrow {
    display: inline-block;
    margin-block-end: var(--space-xs);
    color: var(--color-primary-ink);
    font-weight: 700;
  }

  .hero__inner {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
  }

  @media (width >= 48rem) {
    .hero__inner {
      grid-template-columns: 1.1fr 0.9fr;
    }
  }

  .hero__media {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-2);
    background-color: var(--color-primary-weak);
  }

  .hero__media img {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

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

  /* ====================== 汎用グリッド ====================== */
  .grid {
    display: grid;
    gap: var(--space-md);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .grid--cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }

  .grid--halves {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  }

  /* ====================== 実績カウンタ ====================== */
  .stats {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-block-start: 3px solid var(--color-accent);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
    text-align: center;
  }

  .stat__num {
    color: var(--color-primary-ink);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: var(--leading-tight);
  }

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

  /* ====================== ステップ（開業までの流れ） ====================== */
  .steps {
    display: grid;
    gap: var(--space-md);
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: step;
  }

  .step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-sm);
    align-items: start;
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }

  .step::before {
    counter-increment: step;
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--size-6);
    block-size: var(--size-6);
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-pill);
    font-weight: 700;
  }

  .step__title {
    margin-block: 0 var(--space-3xs);
  }

  .step__text {
    margin: 0;
    color: var(--color-text);
  }

  /* ====================== チェック箇条書き ====================== */
  .list-check {
    display: grid;
    gap: var(--space-xs);
    padding: 0;
    margin-block: var(--space-sm);
    list-style: none;
  }

  .list-check li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-xs);
    align-items: start;
  }

  .list-check li::before {
    content: "";
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin-block-start: 0.2em;

    /* チェックマーク（緑の着色SVGを背景に）。形と色はアイコントークンに内包 */
    background: var(--icon-check) center / contain no-repeat;
  }

  /* ====================== 帯状CTA ======================
     締めのCTAは「区切りの淡い緑」ではなく塗りのブランド緑＋白文字にして、
     直前が section--alt（＝bg-alt は primary-weak と同値の淡い緑）でも埋もれず
     明確なアクション帯として立たせる。文字は on-primary で 4.5:1 を確保。 */
  .cta-band {
    padding-block: var(--space-2xl);
    background-color: var(--color-primary-strong);
    color: var(--color-text-on-primary);
    text-align: center;
  }

  .cta-band__title {
    margin-block-end: var(--space-xs);
    color: var(--color-text-on-primary);
  }

  .cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin-block-start: var(--space-md);
  }

  /* 帯色に映えるようボタンを反転（主＝白地に緑／副＝白枠のゴースト）。
     on-primary はテーマで反転するのでライト/ダーク両対応。 */
  .cta-band .button--cta {
    background-color: var(--color-text-on-primary);
    color: var(--color-primary-strong);
  }

  .cta-band .button--cta:hover {
    background-color: color-mix(in oklch, var(--color-text-on-primary) 88%, var(--color-primary-strong));
    color: var(--color-primary-strong);
  }

  .cta-band .button--secondary {
    background-color: transparent;
    border-color: color-mix(in oklch, var(--color-text-on-primary) 60%, transparent);
    color: var(--color-text-on-primary);
  }

  .cta-band .button--secondary:hover {
    background-color: color-mix(in oklch, var(--color-text-on-primary) 15%, transparent);
    color: var(--color-text-on-primary);
  }

  /* ====================== タグ（脇役ターゲット等） ====================== */
  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .tag {
    display: inline-block;
    padding-block: var(--space-3xs);
    padding-inline: var(--space-sm);
    background-color: var(--color-accent);
    color: var(--color-text-strong);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 500;
  }

  /* ====================== フォーム ====================== */
  .form {
    display: grid;
    gap: var(--space-md);
    max-inline-size: var(--layout-max-narrow);
    padding: var(--space-lg);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }

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

  .field__label {
    font-weight: 700;
    color: var(--color-text-strong);
  }

  .field__req {
    margin-inline-start: var(--space-2xs);
    padding-block: 0.1em;
    padding-inline: var(--space-2xs);
    background-color: var(--color-danger);
    color: var(--color-gray-0);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
  }

  .field__opt {
    margin-inline-start: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 400;
  }

  .field input,
  .field textarea,
  .field select {
    inline-size: 100%;
    min-block-size: var(--size-7);
    padding-block: var(--space-2xs);
    padding-inline: var(--space-sm);
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

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

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

  /* 同意チェック（初期OFF・ポリシーリンク併置） */
  .form__consent {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-xs);
    align-items: start;
    padding: var(--space-sm);
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-md);
  }

  .form__consent input {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin-block-start: 0.15em;
  }

  .form__purpose {
    padding: var(--space-sm);
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--text-sm);
  }

  /* ハニーポット（人間には隠す。スパム誘引用） */
  .form__hp {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
  }

  /* ====================== カレンダー埋め込み ====================== */
  .calendar-embed {
    inline-size: 100%;
    min-block-size: 32rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
  }

  /* ====================== 本文（ポリシー等の長文） ====================== */
  .prose {
    max-inline-size: var(--layout-max-narrow);
  }

  .prose h2 {
    margin-block: var(--space-xl) var(--space-sm);
  }

  .prose h3 {
    margin-block: var(--space-lg) var(--space-2xs);
  }

  .prose ul,
  .prose ol {
    padding-inline-start: var(--space-lg);
  }

  .prose li {
    margin-block-end: var(--space-2xs);
  }

  /* ====================== 汎用ヘルパ ====================== */
  .callout {
    padding: var(--space-md);
    background-color: var(--color-bg-alt);
    border-inline-start: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
  }

  .lede-media {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .lede-media img {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* ====================== ロゴ画像 ====================== */
  .site-logo__img {
    block-size: 2.25rem;
    inline-size: auto;
  }

  .site-logo__tag {
    padding-inline-start: var(--space-2xs);
    margin-inline-start: var(--space-2xs);
    border-inline-start: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
  }

  /* ====================== カバーヒーロー（大判画像＋見出し重ね＋下にテキスト） ====================== */
  .hero-cover__media {
    position: relative;
    isolation: isolate;
    background-color: var(--color-primary-weak);
  }

  .hero-cover__img {
    display: block;
    inline-size: 100%;
    block-size: clamp(20rem, 46vw, 34rem);
    object-fit: cover;
  }

  .hero-cover__overlay {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding-block: var(--space-2xl) var(--space-lg);
    background: linear-gradient(
      to top,
      oklch(28% 0.03 168deg / 85%),
      oklch(28% 0.03 168deg / 45%) 45%,
      oklch(28% 0.03 168deg / 0%)
    );
  }

  .hero-cover__eyebrow {
    display: inline-block;
    margin-block-end: var(--space-2xs);
    color: var(--color-gray-0);
    font-weight: 700;
  }

  .hero-cover__title {
    max-inline-size: 22ch;
    color: var(--color-gray-0);
    font-size: var(--text-3xl);
    text-shadow: 0 1px 10px oklch(20% 0.02 168deg / 55%);
  }

  .hero-cover__below {
    padding-block: var(--space-xl);
  }

  .hero-cover__lead {
    max-inline-size: 60ch;
    font-size: var(--text-md);
  }

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

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

  /* ====================== 画像＋文の左右組み（サブページ・訴求帯） ====================== */
  .split {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
  }

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

    .split--rev .split__media {
      order: 2;
    }
  }

  .split__media {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-2);
  }

  .split__media img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .split__body > :first-child {
    margin-block-start: 0;
  }

  /* 二段CTA（主：個別相談／副：資料請求）の並び */
  .cta-duo {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-start: var(--space-md);
  }

  /* ====================== タイムライン（開業スケジュール） ====================== */
  .timeline {
    display: grid;
    gap: var(--space-md);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .timeline__item {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: var(--space-md);
    align-items: start;
  }

  @media (width < 36rem) {
    .timeline__item {
      grid-template-columns: 1fr;
      gap: var(--space-2xs);
    }
  }

  .timeline__when {
    padding-block-start: var(--space-sm);
    color: var(--color-primary-ink);
    font-weight: 700;
  }

  .timeline__card {
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-inline-start: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
  }

  .timeline__card h3 {
    margin-block: 0 var(--space-3xs);
  }

  .timeline__card p {
    margin: 0;
  }

  /* ====================== 拠点ショーケース ====================== */
  .station-grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .station-grid li {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    transition:
      transform var(--motion-base) var(--ease-standard),
      box-shadow var(--motion-base) var(--ease-standard);
  }

  .station-grid li:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
  }

  .station-grid img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
  }

  /* 自然比率の丸角メディア（人物ポートレート等） */
  .media-round {
    margin: 0;
    max-inline-size: 22rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-1);
  }

  .media-round img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  /* 代表メッセージ（写真＋本文の横組み） */
  .message-grid {
    display: grid;
    gap: var(--space-lg);
    align-items: start;
  }

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

  /* ====================== 装飾つき eyebrow ====================== */
  .eyebrow::before {
    content: "";
    display: inline-block;
    inline-size: 1.75rem;
    block-size: 2px;
    margin-inline-end: var(--space-2xs);
    vertical-align: middle;
    background-color: var(--color-accent);
  }

  .section__head--center .eyebrow::before {
    display: none;
  }

  /* 見出し内アイコン付きカード */
  .card__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    margin-block-end: var(--space-2xs);
    background-color: var(--color-primary-weak);
    color: var(--color-primary-ink);
    border-radius: var(--radius-md);
  }

  .card__ico svg {
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }

  /* ====================== 3つの看護のチカラ ====================== */
  .power-grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .power {
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    transition:
      transform var(--motion-base) var(--ease-standard),
      box-shadow var(--motion-base) var(--ease-standard);
  }

  .power:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
  }

  .power__media {
    aspect-ratio: 3 / 2;
    background-color: var(--color-primary-weak);
  }

  .power__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  .power__head {
    padding: var(--space-md) var(--space-md) 0;
  }

  .power__head img {
    inline-size: 100%;
    max-inline-size: 15rem;
    block-size: auto;
  }

  .power__body {
    padding: var(--space-sm) var(--space-md) var(--space-md);
  }

  .power__body p {
    margin: 0;
  }

  /* ====================== エビデンス図（グラフ＋出典） ====================== */
  .evidence-grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .evidence {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
  }

  .evidence__chart {
    background-color: var(--color-gray-0);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
  }

  .evidence__chart img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  .evidence__stat {
    color: var(--color-primary-ink);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: var(--leading-tight);
  }

  .evidence__label {
    color: var(--color-text-strong);
    font-weight: 700;
  }

  .evidence__source {
    margin-block-start: auto;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  /* ====================== リッチフッター ====================== */
  .site-footer__inner {
    display: grid;
    gap: var(--space-lg);
    align-items: start;
  }

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

  .site-footer__logo {
    block-size: 2.5rem;
    inline-size: auto;
    margin-block-end: var(--space-sm);
  }

  .site-footer__addr {
    margin: 0;
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
  }

  .nav-list--footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3xs);
  }

  @media (width >= 30rem) {
    .nav-list--footer {
      flex-flow: row wrap;
      column-gap: var(--space-md);
    }
  }

  .site-footer__copy {
    margin: 0;
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  /* ====================== FAQ（カテゴリ別アコーディオン・JSなし） ====================== */

  /* 読みやすい幅に収めて中央寄せ */
  .faq-groups {
    max-inline-size: var(--layout-max-narrow);
    margin-inline: auto;
  }

  .faq-group + .faq-group {
    margin-block-start: var(--space-xl);
  }

  .faq-group__title {
    margin-block: 0 var(--space-sm);
    padding-block-end: var(--space-2xs);
    border-block-end: 2px solid var(--color-accent);
    color: var(--color-text-strong);
    font-size: var(--text-lg);
  }

  .faq-list {
    display: grid;
    gap: var(--space-sm);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .faq-item {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
    overflow: hidden;
  }

  /* 質問（クリックで開閉） */
  .faq-item__q {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    font-weight: 700;
    color: var(--color-text-strong);
    cursor: pointer;
    list-style: none; /* 既定マーカーを消す（Firefox） */
    transition: background-color var(--motion-fast) var(--ease-standard);
  }

  .faq-item__q::-webkit-details-marker {
    display: none; /* 既定マーカーを消す（WebKit） */
  }

  .faq-item__q:hover {
    background-color: var(--color-surface-2);
  }

  /* 先頭の「Q」バッジ */
  .faq-item__q::before {
    content: "Q";
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: var(--size-6);
    block-size: var(--size-6);
    background-color: var(--color-primary-weak);
    color: var(--color-primary-ink);
    border-radius: var(--radius-pill);
    font-weight: 700;
  }

  /* 質問テキスト（余白を占有し、文節で折り返す） */
  .faq-item__q span {
    flex: 1;
    word-break: auto-phrase;
    line-break: strict;
  }

  /* 右端の開閉シェブロン */
  .faq-item__q::after {
    content: "";
    flex: none;
    inline-size: 0.6em;
    block-size: 0.6em;
    border-inline-end: 2px solid var(--color-text-muted);
    border-block-end: 2px solid var(--color-text-muted);
    transform: rotate(45deg);
    transition: transform var(--motion-fast) var(--ease-standard);
  }

  .faq-item[open] .faq-item__q::after {
    transform: rotate(-135deg);
  }

  /* 回答 */
  .faq-item__a {
    padding-block: 0 var(--space-md);
    padding-inline: var(--space-md);
    color: var(--color-text);
  }

  .faq-item__a > :first-child {
    margin-block-start: 0;
  }

  .faq-item__a p {
    margin-block: 0 var(--space-xs);
  }

  .faq-item__a p:last-child {
    margin-block-end: 0;
  }
}

/* ============================== utilities レイヤー ============================== */

/* 最後段。意図的にちょっとした上書きをしたいとき用（最小限）。 */
@layer utilities {
  .flow > * + * {
    margin-block-start: var(--space-sm);
  }

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

  .mbs-sm {
    margin-block-start: var(--space-sm);
  }

  .mbs-md {
    margin-block-start: var(--space-md);
  }

  .mbs-lg {
    margin-block-start: var(--space-lg);
  }

  .u-center {
    text-align: center;
  }

  /* 文節をまとめて、語の途中での改行を防ぐ（日本語見出しの折り返し制御）。
     行はこの単位の境界でのみ折り返る。狭幅でも収まる長さの文節に付ける。 */
  .nb {
    white-space: nowrap;
  }
}