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

@layer components {
  /* ====================== レイアウト共通 ====================== */

  /* 中央寄せコンテナ（左右ガター付き・論理プロパティ）。
     コンテナクエリの基準面を兼ねる（@container は祖先コンテナを参照するため、
     部品自身ではなくここに container-type を置く）。 */
  .container {
    container-type: inline-size;
    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);
  }

  /* ====================== サイトヘッダ／ナビ ======================
     会社案内の文法: 中央ロゴ＋英字社名の2段組（design-base.md レイアウト規定）。
     FCサイト（左ロゴ・右ナビの1段スティッキー）と意図的に differentiating。 */
  .site-header {
    background-color: var(--color-bg);
    border-block-end: 1px solid var(--color-border);
  }

  .site-header__brand {
    padding-block: var(--space-md) var(--space-xs);
    text-align: center;
  }

  /* ロゴ（リンク・中央。四つ葉マーク付きの正式ロゴ画像） */
  .site-logo {
    display: inline-flex;
    align-items: center;

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

  .site-logo img {
    inline-size: auto;
    block-size: clamp(2.5rem, 2.2rem + 1.2vw, 3.25rem);
  }

  .site-nav {
    background-color: var(--color-surface);
    border-block-start: 1px solid var(--color-border);
  }

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

  .site-nav .nav-list {
    justify-content: center;
  }

  .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-xs);
    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);
  }

  /* ディスプレイ型ヒーロー（トップ用）。
     2000年代アップルの文法: 巨大な中央揃え見出し＋短いリード＋大きな写真。 */
  .hero-display {
    padding-block: var(--space-2xl) 0;
    text-align: center;
  }

  .hero-display__title {
    margin-block-end: var(--space-sm);
    font-size: var(--text-3xl);
    letter-spacing: 0.04em;
    line-height: 1.3;
  }

  .hero-display__lead {
    max-inline-size: 46ch;
    margin-inline: auto;
    font-size: var(--text-md);
  }

  .hero-display .hero__actions {
    justify-content: center;
  }

  .hero-display__photo {
    margin-block-start: var(--space-xl);
  }

  .hero-display__photo img {
    inline-size: 100%;
    border-radius: var(--radius-card);
  }

  /* 実績の帯（罫線区切りのファクト） */
  .fact-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2xs) var(--space-lg);
    margin-block: var(--space-md) 0;
    padding-block: var(--space-xs);
    border-block: 1px solid var(--color-border);
  }

  .fact {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
  }

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

  .fact__value {
    color: var(--color-primary-strong);
    font-family: var(--font-heading);
    font-size: var(--text-md);
  }

  /* ====================== 帯（バンド）のリズム ======================
     白 → 淡灰 → 濃緑 を交互に。全般が白く沈まないためのメリハリ。 */
  .section--alt {
    background-color: var(--color-surface);
    border-block: 1px solid var(--color-border);
  }

  /* 濃緑のステートメント帯（大きな一文で語る） */
  .statement {
    padding-block: var(--space-3xl);
    background-color: var(--color-bg-inverse);
    text-align: center;
  }

  .statement__text {
    margin-block-end: var(--space-md);
    color: var(--color-text-inverse);
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    letter-spacing: 0.06em;
    line-height: 1.5;
    word-break: auto-phrase; /* 日本語の文節折り返し（対応ブラウザのみ） */
  }

  .statement__link {
    color: var(--color-link-inverse);
    font-size: var(--text-md);
  }

  .statement__link:hover {
    color: var(--color-text-inverse);
  }

  .statement__sign {
    margin: 0;
    color: var(--color-link-inverse);
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
  }

  /* ====================== 読みもの（代表メッセージ等） ====================== */

  /* 冒頭の大きな一文 */
  .display-quote {
    margin: 0;
    color: var(--color-text-strong);
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-align: center;
    text-wrap: balance;
    word-break: auto-phrase; /* 日本語の文節折り返し（対応ブラウザのみ） */
  }

  /* 人物プロフィール帯（写真＋リード） */
  .profile {
    display: grid;
    gap: var(--space-lg);
    align-items: center;
  }

  .profile__photo img {
    inline-size: 100%;
    max-inline-size: 15rem;
    border-radius: var(--radius-card);
  }

  .profile__name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-md);
  }

  @media (width >= 48em) {
    .profile {
      grid-template-columns: 14rem 1fr;
      gap: var(--space-xl);
    }
  }

  /* 本文の読み幅（1カラムの読みもの） */
  .prose {
    max-inline-size: 42rem;
    margin-inline: auto;
  }

  .prose h2 {
    margin-block: var(--space-xl) var(--space-sm);
    padding-inline-start: var(--space-sm);
    border-inline-start: var(--size-1) solid var(--color-primary);
    font-size: var(--text-lg);
  }

  /* 本文から引き抜いた一文（プルクオート） */
  .pull-quote {
    margin-block: var(--space-xl);
    margin-inline: 0;
    padding-block: var(--space-md);
    border-block: 1px solid var(--color-border);
    text-align: center;
  }

  .pull-quote p {
    max-inline-size: none;
    margin: 0;
    color: var(--color-primary-strong);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    letter-spacing: 0.04em;
    line-height: 1.7;
    word-break: auto-phrase; /* 日本語の文節折り返し（対応ブラウザのみ） */
  }

  /* ====================== 章番号つきの見出し ====================== */
  .sec-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    margin-block-end: var(--space-lg);
    padding-block-end: var(--space-2xs);
    border-block-end: 1px solid var(--color-border);
  }

  .sec-head__num {
    margin: 0;
    color: var(--color-teal-100);
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .sec-head__label {
    display: grid;
    gap: var(--space-3xs);
  }

  .sec-head__en {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .sec-head h2 {
    margin: 0;
    font-size: var(--text-2xl);
  }

  /* ====================== 罫線リスト型の事業一覧 ====================== */
  .biz-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: biz;
    border-block-start: 1px solid var(--color-border);
  }

  .biz-list__item {
    display: grid;
    gap: var(--space-sm);
    padding-block: var(--space-lg);
    border-block-end: 1px solid var(--color-border);
    counter-increment: biz;
  }

  .biz-list__item::before {
    content: counter(biz, decimal-leading-zero);
    color: var(--color-teal-100);
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    line-height: 1;
  }

  .biz-list__item h3 {
    margin-block-end: var(--space-2xs);
  }

  .biz-list__img img {
    inline-size: 100%;
    border-radius: var(--radius-md);
  }

  @media (width >= 48em) {
    .biz-list__item {
      grid-template-columns: 4rem 1fr 16rem;
      gap: var(--space-lg);
      align-items: start;
    }
  }

  /* ====================== 罫線リスト型のページリンク ====================== */
  .link-rows {
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-start: 1px solid var(--color-border);
  }

  .link-rows__item {
    border-block-end: 1px solid var(--color-border);
  }

  .link-row {
    display: grid;
    gap: var(--space-3xs) var(--space-sm);
    padding-block: var(--space-sm);
    color: var(--color-text);
    text-decoration: none;
  }

  .link-row:hover {
    background-color: var(--color-surface);
  }

  .link-row__title {
    color: var(--color-link);
    font-family: var(--font-heading);
    font-size: var(--text-md);
  }

  .link-row:hover .link-row__title {
    color: var(--color-link-hover);
    text-decoration: underline;
  }

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

  @media (width >= 48em) {
    .link-row {
      grid-template-columns: 12rem 1fr auto;
      align-items: baseline;
    }
  }

  /* ====================== ページ内ヒーローイメージ（一覧ページ等） ====================== */
  .page-hero {
    margin: 0 0 var(--space-lg);
  }

  .page-hero img {
    inline-size: 100%;
    border-radius: var(--radius-card);
  }

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

  /* 図表の白プレート（拠点数推移グラフ等） */
  .chart-plate {
    margin: var(--space-lg) 0 0;
  }

  .chart-plate svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
    padding: var(--space-md);
    background-color: var(--color-gray-0);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }

  /* ====================== 組織図（全幅の白プレート） ====================== */
  .org-chart {
    margin: var(--space-lg) 0 0;
  }

  .org-chart picture {
    display: block;
    padding: var(--space-md);
    background-color: var(--color-gray-0); /* 図版は白地の上で見せる（ダークでも白プレート） */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }

  .org-chart img {
    inline-size: 100%; /* viewBox付きSVGをコンテナ幅いっぱいに拡大表示 */
  }

  .org-chart__caption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-sm);
    margin-block-start: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  /* 「看護のチカラ」題字（旧サイトから継承した筆致SVG） */
  .rinen-daiji {
    margin-block: var(--space-sm) var(--space-2xs);
  }

  .rinen-daiji img {
    inline-size: min(60cqi, 20rem);
  }

  /* ====================== 3本柱（経営理念など） ======================
     罫線で仕切った等幅3カラム。カードの箱ではなく、線とタイポでまとめる。 */
  .pillars {
    display: grid;
    gap: var(--space-lg);
    margin-block-start: var(--space-lg);
    padding: 0;
    list-style: none;
  }

  .pillar + .pillar {
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid var(--color-border);
  }

  .pillar__fig {
    margin: 0 0 var(--space-sm);
    padding: var(--space-2xs);
    background-color: var(--color-gray-0); /* 図版は白地の上で見せる（ダークでも白プレート） */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .pillar__num {
    display: block;
    margin-block-end: var(--space-3xs);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .pillar__title {
    margin-block-end: var(--space-2xs);
    font-size: var(--text-md);
  }

  .pillar p {
    margin: 0;
  }

  @container (min-width: 56rem) {
    .pillars {
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
    }

    .pillar {
      padding-inline: var(--space-lg);
    }

    .pillar + .pillar {
      padding-block-start: 0;
      border-block-start: none;
      border-inline-start: 1px solid var(--color-border);
    }

    .pillar:first-child {
      padding-inline-start: 0;
    }

    .pillar:last-child {
      padding-inline-end: 0;
    }
  }

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

  /* 親（.container）の幅で適応させるためコンテナクエリを使う（css.md §3）。 */
  .card-grid {
    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);
  }

  .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__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-bg-inverse);
    color: var(--color-text-inverse);
    font-size: var(--text-sm);
  }

  .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
  }

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

  .site-footer .nav-list__link {
    color: var(--color-link-inverse);
  }

  .site-footer .nav-list__link:hover {
    background-color: var(--color-bg-inverse-2);
    color: var(--color-text-inverse);
  }

  .site-footer__copy {
    color: var(--color-link-inverse);
  }

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

  /* ====================== カードの列数（コンテナクエリ） ====================== */
  @container (min-width: 36rem) {
    .card-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @container (min-width: 56rem) {
    .card-grid {
      grid-template-columns: repeat(4, 1fr);
    }

    .card-grid--3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* ====================== 下層ページの見出し（淡灰の帯＋短い下線） ====================== */
  .page-header {
    padding-block: var(--space-2xl) var(--space-xl);
    background-color: var(--color-surface);
    border-block-end: 1px solid var(--color-border);
  }

  .page-header__title {
    margin-block-end: var(--space-3xs);
  }

  .page-header__title::after {
    content: "";
    display: block;
    inline-size: var(--size-8);
    block-size: var(--size-1);
    margin-block-start: var(--space-xs);
    background-color: var(--color-primary);
  }

  .page-header__sub {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* ====================== ニュース一覧 ====================== */
  .news-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-start: 1px solid var(--color-border);
  }

  .news-list__item {
    border-block-end: 1px solid var(--color-border);
  }

  .news-list__link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2xs) var(--space-sm);
    padding-block: var(--space-sm);
    color: var(--color-text);
    text-decoration: none;
  }

  .news-list__link:hover {
    background-color: var(--color-surface);
  }

  .news-list__date {
    min-inline-size: 7rem;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
  }

  .news-list__title {
    color: var(--color-link);
  }

  .news-list__link:hover .news-list__title {
    color: var(--color-link-hover);
    text-decoration: underline;
  }

  /* タグ（記事の種別） */
  .tag {
    display: inline-block;
    padding-block: 0;
    padding-inline: var(--space-xs);
    background-color: var(--color-primary-weak);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-primary-strong);
    font-size: var(--text-sm);
    white-space: nowrap;
  }

  /* ====================== 記事（ニュース個別） ====================== */
  .article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    margin-block-end: var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .article-body > figure {
    margin-block: var(--space-lg);
  }

  .article-body img {
    border-radius: var(--radius-md);
  }

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

  .article-footer {
    margin-block-start: var(--space-xl);
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--color-border);
  }

  /* ====================== 会社概要の表 ====================== */
  .info-table {
    inline-size: 100%;
    border-collapse: collapse;
    margin-block-end: var(--space-md);
  }

  .info-table caption {
    text-align: start;
    margin-block-end: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

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

  .info-table th {
    inline-size: 10rem;
    color: var(--color-text-strong);
    font-weight: 700;
    white-space: nowrap;
  }

  /* ====================== 沿革（タイムライン） ====================== */
  .timeline {
    margin: 0;
    padding: 0;
    list-style: none;
    border-inline-start: 2px solid var(--color-primary);
  }

  .timeline__item {
    position: relative;
    padding-block-end: var(--space-md);
    padding-inline-start: var(--space-md);
  }

  .timeline__item::before {
    content: "";
    position: absolute;
    inset-block-start: 0.45em;
    inset-inline-start: calc(-1 * var(--space-2xs) + 1px);
    inline-size: var(--size-3);
    block-size: var(--size-3);
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
  }

  .timeline__date {
    display: block;
    color: var(--color-primary-strong);
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-variant-numeric: tabular-nums;
  }

  .timeline__body {
    margin: 0;
  }

  /* ====================== 写真つき紹介（組織・事業） ====================== */
  .media-row {
    display: grid;
    gap: var(--space-md);
    align-items: start;
    margin-block: var(--space-lg);
  }

  .media-row__img img {
    inline-size: 100%;
    border-radius: var(--radius-card);
  }

  /* 人物ポートレートなど、控えめに見せたい写真の幅上限 */
  .media-row__img--compact {
    max-inline-size: 15rem;
  }

  @container (min-width: 44rem) {
    .media-row {
      grid-template-columns: 2fr 3fr;
    }
  }

  /* ====================== フォーム ====================== */
  .form {
    display: grid;
    gap: var(--space-md);
    max-inline-size: 44rem;
  }

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

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

  .field__req,
  .field__opt {
    margin-inline-start: var(--space-2xs);
    padding-inline: var(--space-2xs);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 400;
  }

  .field__req {
    background-color: var(--color-danger);
    color: var(--color-gray-0);
  }

  .field__opt {
    background-color: var(--color-surface-2);
    color: var(--color-text-muted);
  }

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

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

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

  /* ハニーポット（スパム対策・視覚的に隠す） */
  .form__hp {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

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

  .form__consent input {
    flex-shrink: 0; /* 狭幅でも24px角を維持（ターゲットサイズ確保） */
    inline-size: var(--size-5);
    block-size: var(--size-5);
  }

  /* 小さめ文中リンクのタップ領域を24px以上に広げる（見た目の行間は変えない） */
  .form__consent a,
  .field__hint a,
  .form__purpose a,
  .org-chart__caption a {
    display: inline-block;
    padding-block: var(--space-3xs);
    margin-block: calc(-1 * var(--space-3xs));
  }

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

  /* ====================== 行動導線の帯（CTA） ====================== */
  .cta-band {
    display: grid;
    gap: var(--space-md);
    justify-items: start;
    padding: var(--space-lg);
    background-color: var(--color-primary-weak);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }

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

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

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

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

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

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