@charset "UTF-8";

/* ==========================================================================
   ちいさな一歩 / デザイントークン
   色・余白・角丸・影はすべてここで名前を付け、以降はトークン経由でのみ使う。

   方針:
   - 地は白。そこに生成りのやわらかいグラデーションを重ねて温度を出す。
   - 色相は暖色（黄み〜赤み）。無彩色の冷たさを画面に入れない。
   - 角は大きく丸め、影はぼかしを広くとって、輪郭をやわらかくする。
   - 動きは「状態が変わったこと」を伝える範囲にとどめ、必ず reduced-motion で止める。
   ========================================================================== */

@layer reset, base, layout, components, utilities;

:root {
  color-scheme: light;

  /* --- プリミティブ ------------------------------------------------------ */
  /* ニュートラルは黄み寄りの暖色。純グレーは福祉領域には硬すぎる。 */
  --warm-0:   oklch(1 0 0);
  --warm-25:  oklch(0.992 0.006 75);   /* 生成り */
  --warm-50:  oklch(0.980 0.010 72);
  --warm-100: oklch(0.960 0.014 68);
  --warm-600: oklch(0.510 0.020 58);
  --warm-900: oklch(0.245 0.018 48);   /* 墨に赤みを含ませた本文色 */

  /* 利用者家族向けの主色: 弁柄（べんがら）。落ち着いた赤茶。 */
  --bengara-500: oklch(0.475 0.118 38);
  --bengara-600: oklch(0.405 0.108 36);
  --bengara-50:  oklch(0.970 0.020 45);
  --bengara-100: oklch(0.935 0.038 45);
  /* グラデーションの明るい側に置く杏色。単色で文字色には使わない。 */
  --apricot-400: oklch(0.760 0.105 62);
  --apricot-200: oklch(0.905 0.055 66);

  /* 事業者向けの主色: 苔（こけ）。暖色寄りの深い緑。 */
  --moss-500: oklch(0.455 0.072 142);
  --moss-600: oklch(0.390 0.066 142);
  --moss-50:  oklch(0.968 0.020 142);
  --moss-100: oklch(0.930 0.036 142);
  --moss-200: oklch(0.885 0.048 130);

  --amber-500: oklch(0.690 0.135 68);
  --amber-700: oklch(0.470 0.105 62);
  --amber-50:  oklch(0.974 0.030 72);
  --red-500:   oklch(0.510 0.165 27);
  --red-50:    oklch(0.968 0.022 30);

  /* --- セマンティック（UIが参照してよいのはこちら） ---------------------- */
  --color-bg:          var(--warm-0);
  --color-surface:     var(--warm-0);
  --color-surface-2:   var(--warm-50);
  --color-band:        var(--warm-25);
  --color-text:        var(--warm-900);
  --color-text-muted:  var(--warm-600);
  --color-border:      oklch(0.245 0.018 48 / 0.13);
  --color-border-soft: oklch(0.245 0.018 48 / 0.07);

  --color-accent:       var(--bengara-500);
  --color-accent-hover: var(--bengara-600);
  --color-accent-fg:    var(--warm-0);
  --color-accent-soft:  var(--bengara-50);
  --color-accent-soft-2:var(--bengara-100);
  --color-accent-light: var(--apricot-400);
  --color-accent-mist:  var(--apricot-200);

  --color-success: oklch(0.470 0.080 142);
  --color-warning: var(--amber-500);
  --color-warning-ink: var(--amber-700);
  --color-warning-soft: var(--amber-50);
  --color-danger:  var(--red-500);
  --color-danger-soft: var(--red-50);
  --color-focus:   oklch(0.510 0.130 38);

  /* --- グラデーション ---------------------------------------------------
     単色の面を作らず、光が当たっているようにわずかな階調をつける。
     振れ幅は明度で0.02程度。派手に見せるためではなく、硬さを取るために使う。 */
  --grad-page:   linear-gradient(180deg, oklch(0.993 0.008 70) 0%, oklch(1 0 0) 38%);
  --grad-band:   linear-gradient(180deg, oklch(0.996 0.005 78) 0%, oklch(0.980 0.013 64) 100%);
  --grad-card:   linear-gradient(155deg, oklch(1 0 0) 0%, oklch(0.994 0.006 70) 100%);
  --grad-accent: linear-gradient(135deg, var(--bengara-600) 0%, var(--bengara-500) 55%, oklch(0.520 0.130 44) 100%);
  --grad-soft:   linear-gradient(135deg, var(--color-accent-soft) 0%, oklch(0.975 0.028 62) 100%);

  /* --- タイポグラフィ ---------------------------------------------------- */
  /* 欧文を先に置く。日本語フォントを先にすると英数字が間延びする。 */
  --font-sans:
    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
    'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP',
    'Yu Gothic UI', Meiryo, sans-serif;
  /* 見出しは明朝。読み物としての誠実さを字面で出す。 */
  --font-serif:
    'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Yu Mincho', YuMincho,
    'Noto Serif JP', 'Times New Roman', serif;

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 1rem;
  --text-lg:   1.0625rem;
  --text-xl:   1.1875rem;
  --text-2xl:  1.4375rem;
  --text-3xl:  1.8125rem;
  --text-4xl:  clamp(1.75rem, 1.2rem + 2.1vw, 2.625rem);

  /* --- 余白（4pxベース。任意の数字は使わない） -------------------------- */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;

  /* 角丸は大きめ。輪郭をやわらげ、緊張を画面から抜く。 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* 影はぼかしを広く、色は暖色。黒い影は画面を濁らせる。 */
  --shadow-soft:
    0 1px 2px oklch(0.35 0.05 45 / 0.04),
    0 6px 16px -8px oklch(0.35 0.05 45 / 0.10),
    0 18px 36px -20px oklch(0.35 0.05 45 / 0.16);
  --shadow-float:
    0 2px 4px oklch(0.35 0.05 45 / 0.05),
    0 12px 26px -10px oklch(0.35 0.05 45 / 0.14),
    0 32px 60px -28px oklch(0.35 0.05 45 / 0.22);
  --shadow-lift:
    0 4px 10px -4px oklch(0.35 0.05 45 / 0.14),
    0 18px 40px -16px oklch(0.35 0.05 45 / 0.24);

  --z-sticky: 200; --z-overlay: 300; --z-modal: 400;

  --container: 1120px;
  --container-prose: 42rem;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  /* わずかに行き過ぎて戻る。ふわりと着地させたい要素だけに使う。 */
  --ease-soft: cubic-bezier(0.34, 1.16, 0.64, 1);
  --dur-fast: 140ms;
  --dur-base: 300ms;
  --dur-slow: 620ms;
}

/* 事業者向けの面では主色だけ差し替える。構造は同じで、色で文脈を切り替える。 */
[data-audience='business'] {
  --color-accent:       var(--moss-500);
  --color-accent-hover: var(--moss-600);
  --color-accent-soft:  var(--moss-50);
  --color-accent-soft-2: var(--moss-100);
  --color-accent-light: oklch(0.660 0.075 138);
  --color-accent-mist:  var(--moss-200);
  --color-focus:        oklch(0.470 0.080 142);
  --grad-accent: linear-gradient(135deg, var(--moss-600) 0%, var(--moss-500) 55%, oklch(0.505 0.080 138) 100%);
  --grad-soft:   linear-gradient(135deg, var(--moss-50) 0%, oklch(0.972 0.026 130) 100%);
}

/* 画面遷移をつなぐ。未対応ブラウザでは通常の遷移になる。 */
@view-transition { navigation: auto; }

/* ==========================================================================
   ベース
   ========================================================================== */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  img, svg { display: block; max-width: 100%; height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  ul[class], ol[class] { list-style: none; padding: 0; }
}

@layer base {
  body {
    min-height: 100dvh;
    background: var(--grad-page) var(--color-bg) no-repeat;
    background-attachment: fixed;
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.9;               /* 日本語は行間を広めに */
    overflow-wrap: anywhere;        /* 長いURL・法人名のはみ出し防止 */
    text-underline-offset: 0.25em;
  }

  h1, h2, h3, h4 {
    line-height: 1.5;
    font-feature-settings: 'palt' 1;  /* 約物の空きを詰める。見出しだけに適用 */
    text-wrap: balance;
  }
  /* h1・h2は明朝。h3以下は情報のラベルなのでゴシックのまま。 */
  h1, h2 {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 0.02em;
    /* 見出しは文節で折り返す。「足りていな／い地域」のような切れ方を避ける。
       auto-phrase 未対応のブラウザでは通常の禁則処理にフォールバックする。 */
    overflow-wrap: normal;
    word-break: auto-phrase;
    line-break: strict;
  }
  h1 { font-size: var(--text-4xl); line-height: 1.45; }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); font-weight: 600; letter-spacing: 0.01em; }
  h4 { font-size: var(--text-lg); font-weight: 600; }
  p { text-wrap: pretty; }

  a { color: var(--color-accent); text-decoration-thickness: 1px; }
  a:hover { color: var(--color-accent-hover); }

  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  ::selection { background: var(--color-accent-soft-2); }

  .tabular { font-variant-numeric: tabular-nums; }
}

/* ==========================================================================
   レイアウト
   ========================================================================== */

@layer layout {
  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-5);
  }
  @media (min-width: 768px) { .container { padding-inline: var(--space-8); } }

  .prose { max-width: var(--container-prose); }

  .stack > * + * { margin-top: var(--space-4); }
  .stack-lg > * + * { margin-top: var(--space-8); }
  .stack-sm > * + * { margin-top: var(--space-2); }

  .section { padding-block: var(--space-12); }
  @media (min-width: 768px) { .section { padding-block: var(--space-16); } }
  .section--tight { padding-block: var(--space-8); }
  /* 生成りの帯。境目を線で切らず、階調で溶かす。 */
  .section--band {
    position: relative;
    background: var(--grad-band);
  }
  .section--band::before,
  .section--band::after {
    content: ''; position: absolute; inset-inline: 0; height: var(--space-8);
    pointer-events: none;
  }
  .section--band::before { top: calc(var(--space-8) * -1); background: linear-gradient(180deg, transparent, oklch(0.996 0.005 78)); }
  .section--band::after { bottom: calc(var(--space-8) * -1); background: linear-gradient(180deg, oklch(0.980 0.013 64), transparent); }

  .cluster { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  .cluster--lg { gap: var(--space-4); }

  .grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--space-5);
  }

  .split {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1fr;
  }
  @media (min-width: 900px) {
    .split { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--space-12); }
    .split--wide-right { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  }

  .sticky-side { position: sticky; top: var(--space-6); }
}

/* ==========================================================================
   コンポーネント
   ========================================================================== */

@layer components {

  /* --- ヘッダー -------------------------------------------------------- */
  .site-header {
    position: sticky; top: 0; z-index: var(--z-sticky);
    background: color-mix(in oklab, var(--color-surface) 82%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--color-border-soft);
    transition: box-shadow var(--dur-base) var(--ease-out),
                background var(--dur-base) var(--ease-out);
  }
  /* 少しでもスクロールしたら、ヘッダーが紙から浮く（app.js が付ける） */
  .site-header[data-stuck='true'] {
    background: color-mix(in oklab, var(--color-surface) 92%, transparent);
    box-shadow: var(--shadow-soft);
  }
  .site-header__inner {
    display: flex; align-items: center; gap: var(--space-6);
    min-height: 66px; padding-block: var(--space-2);
  }
  .brand {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-serif);
    font-weight: 600; font-size: var(--text-lg); letter-spacing: 0.06em;
    color: var(--color-text);
    text-decoration: none; white-space: nowrap;
  }
  .brand__mark {
    display: inline-grid; place-items: center;
    width: 30px; height: 30px; border-radius: 40% 60% 58% 42% / 55% 42% 58% 45%;
    background: var(--grad-accent); color: var(--color-accent-fg);
    box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--color-accent) 55%, transparent);
    font-family: var(--font-serif);
    font-size: var(--text-sm); font-weight: 600; letter-spacing: 0;
    transition: transform var(--dur-base) var(--ease-soft);
  }
  .brand:hover .brand__mark { transform: rotate(-6deg) scale(1.06); }
  .brand__sub {
    font-family: var(--font-sans);
    font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.04em;
    color: var(--color-text-muted);
  }

  .site-nav { display: none; margin-inline-start: auto; }
  .site-nav ul { display: flex; gap: var(--space-1); list-style: none; padding: 0; }
  .site-nav a {
    position: relative;
    display: block; padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 500;
    color: var(--color-text); text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .site-nav a:hover { background: var(--color-accent-soft); color: var(--color-accent-hover); }
  /* 現在地は色だけでなく下の点でも示す（色覚に依存させない） */
  .site-nav a[aria-current='page'] { color: var(--color-accent); background: var(--color-accent-soft); }
  .site-nav a[aria-current='page']::after {
    content: ''; position: absolute; inset-inline: 50%; bottom: 2px;
    width: 4px; height: 4px; margin-inline-start: -2px;
    border-radius: var(--radius-full); background: var(--color-accent);
  }
  @media (min-width: 900px) { .site-nav { display: block; } }

  .audience-switch {
    margin-inline-start: auto;
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm);
  }
  @media (min-width: 900px) { .audience-switch { margin-inline-start: 0; } }

  /* モバイル: 主要導線を下部タブに出す（ハンバーガーの奥に隠さない） */
  .tabbar {
    position: fixed; inset-inline: var(--space-3); bottom: var(--space-3);
    z-index: var(--z-sticky);
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: color-mix(in oklab, var(--color-surface) 90%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a {
    position: relative;
    display: grid; place-items: center; gap: 2px;
    min-height: 56px; padding-block: var(--space-2);
    border-radius: var(--radius-lg);
    font-size: var(--text-xs); font-weight: 500;
    color: var(--color-text-muted); text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  }
  .tabbar a[aria-current='page'] { color: var(--color-accent); background: var(--color-accent-soft); }
  .tabbar a:active { transform: scale(0.96); }
  .tabbar svg { width: 20px; height: 20px; transition: transform var(--dur-base) var(--ease-soft); }
  .tabbar a[aria-current='page'] svg { transform: translateY(-1px) scale(1.08); }
  @media (min-width: 900px) { .tabbar { display: none; } }
  @media (max-width: 899px) { body { padding-bottom: 96px; } }

  /* --- ボタン ---------------------------------------------------------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 46px; padding: var(--space-2) var(--space-6);
    border: 1px solid transparent; border-radius: var(--radius-full);
    font-size: var(--text-base); font-weight: 600; line-height: 1.5;
    letter-spacing: 0.02em;
    text-decoration: none; cursor: pointer;
    transition: transform var(--dur-base) var(--ease-soft),
                box-shadow var(--dur-base) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  }
  .btn:active { transform: translateY(1px) scale(0.985); }
  .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.5; pointer-events: none; }

  .btn--primary {
    background: var(--grad-accent); color: var(--color-accent-fg);
    box-shadow: 0 6px 18px -8px color-mix(in oklab, var(--color-accent) 70%, transparent);
  }
  .btn--primary:hover {
    color: var(--color-accent-fg);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -10px color-mix(in oklab, var(--color-accent) 75%, transparent);
  }
  .btn--secondary {
    background: var(--color-surface); color: var(--color-text); border-color: var(--color-border);
    box-shadow: var(--shadow-soft);
  }
  .btn--secondary:hover {
    background: var(--color-surface); color: var(--color-accent-hover);
    border-color: color-mix(in oklab, var(--color-accent) 35%, transparent);
    transform: translateY(-2px); box-shadow: var(--shadow-lift);
  }
  .btn--ghost { background: transparent; color: var(--color-accent); }
  .btn--ghost:hover { background: var(--color-accent-soft); }
  .btn--lg { min-height: 54px; padding-inline: var(--space-8); font-size: var(--text-lg); }
  .btn--block { width: 100%; }

  /* --- カード ---------------------------------------------------------- */
  .card {
    background: var(--grad-card);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-soft);
    transition: transform var(--dur-base) var(--ease-soft),
                box-shadow var(--dur-base) var(--ease-out);
  }
  .card--pad-sm { padding: var(--space-5); }
  /* リンクになっているカードだけ持ち上げる。動かないものは動かさない。 */
  a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }

  /* --- バッジ ---------------------------------------------------------- */
  .badge {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: 3px var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-surface-2); color: var(--color-text);
    font-size: var(--text-xs); font-weight: 600; line-height: 1.7;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .badge--accent { background: var(--grad-soft); color: var(--color-accent-hover); }
  .badge--success { background: color-mix(in oklab, var(--color-success) 12%, transparent); color: var(--color-success); }
  .badge--warning { background: var(--color-warning-soft); color: var(--color-warning-ink); }
  .badge--danger  { background: var(--color-danger-soft); color: var(--color-danger); }
  .badge--outline { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-muted); }

  /* --- 出典・更新日の表示 ---------------------------------------------
     変動情報には必ず更新日を添える、という制約をコンポーネントとして固定する。 */
  .source-note {
    display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
    font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.8;
  }
  .source-note a { color: inherit; text-decoration: underline; }
  .source-note a:hover { color: var(--color-accent); }

  .freshness {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-xs); color: var(--color-text-muted);
  }
  .freshness::before {
    content: ''; width: 7px; height: 7px; border-radius: var(--radius-full);
    background: var(--color-success);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-success) 18%, transparent);
  }
  .freshness--stale::before {
    background: var(--color-warning);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-warning) 20%, transparent);
  }
  .freshness--old::before {
    background: var(--color-danger);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-danger) 20%, transparent);
  }

  /* --- スコア表示 ------------------------------------------------------ */
  .score { display: flex; align-items: baseline; gap: var(--space-2); }
  .score__value {
    font-size: var(--text-3xl); font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  }
  .score__unit { font-size: var(--text-sm); color: var(--color-text-muted); }

  .meter {
    --meter-fill: var(--grad-accent);
    position: relative; height: 8px; border-radius: var(--radius-full);
    background: var(--color-surface-2); overflow: hidden;
    border: 1px solid var(--color-border-soft);
  }
  .meter__bar {
    position: absolute; inset-block: 0; inset-inline-start: 0;
    background: var(--meter-fill); border-radius: inherit;
    /* 画面に入ったときに左から伸びる（app.js が幅を戻す） */
    transition: width var(--dur-slow) var(--ease-out);
  }
  .meter--warning { --meter-fill: linear-gradient(90deg, var(--amber-500), oklch(0.760 0.120 78)); }
  .meter--danger  { --meter-fill: linear-gradient(90deg, var(--red-500), oklch(0.580 0.150 32)); }
  .meter--success { --meter-fill: linear-gradient(90deg, var(--color-success), oklch(0.560 0.080 148)); }

  .breakdown { display: grid; gap: var(--space-4); }
  .breakdown__row { display: grid; gap: var(--space-1); }
  .breakdown__head {
    display: flex; justify-content: space-between; gap: var(--space-3);
    font-size: var(--text-sm); font-weight: 600;
  }
  .breakdown__detail { font-size: var(--text-xs); color: var(--color-text-muted); }

  /* --- 事業所カード（リスト行型。カードグリッドにしない） -------------- */
  .facility-list { display: grid; gap: var(--space-3); }
  .facility-item {
    display: grid; gap: var(--space-4);
    background: var(--grad-card);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-soft);
    transition: transform var(--dur-base) var(--ease-soft),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  }
  .facility-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); }
  .facility-item:has(input:checked) {
    border-color: color-mix(in oklab, var(--color-accent) 45%, transparent);
    box-shadow: var(--shadow-float), 0 0 0 3px color-mix(in oklab, var(--color-accent) 14%, transparent);
  }
  @media (min-width: 720px) {
    .facility-item { grid-template-columns: minmax(0, 1fr) 176px; align-items: start; }
  }
  .facility-item__main { min-width: 0; }
  .facility-item__name {
    font-size: var(--text-lg); font-weight: 700; line-height: 1.6;
    margin-bottom: var(--space-1);
  }
  .facility-item__name a { color: var(--color-text); text-decoration: none; }
  .facility-item__name a:hover { color: var(--color-accent); text-decoration: underline; }
  .facility-item__meta { font-size: var(--text-sm); color: var(--color-text-muted); }
  .facility-item__side { display: grid; gap: var(--space-3); padding-top: var(--space-1); }
  @media (min-width: 720px) {
    .facility-item__side {
      border-inline-start: 1px solid var(--color-border-soft);
      padding-inline-start: var(--space-4);
    }
  }

  /* 選択チェック（まとめて問い合わせ用）はタップ領域を広く取る */
  .select-check {
    display: flex; align-items: center; gap: var(--space-2);
    min-height: 44px; padding: var(--space-1) var(--space-3);
    margin-inline-start: calc(var(--space-3) * -1);
    border-radius: var(--radius-full); cursor: pointer;
    font-size: var(--text-sm); font-weight: 600;
    transition: background var(--dur-fast) var(--ease-out);
  }
  .select-check:hover { background: var(--color-accent-soft); }
  .select-check input { width: 20px; height: 20px; accent-color: var(--color-accent); }

  /* --- データテーブル -------------------------------------------------- */
  .table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
  }
  table.data {
    width: 100%; border-collapse: collapse; background: var(--color-surface);
    font-size: var(--text-sm);
  }
  table.data th, table.data td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-soft);
    text-align: start; vertical-align: top; line-height: 1.8;
  }
  table.data thead th {
    position: sticky; top: 0;
    background: var(--grad-band);
    font-weight: 600; font-size: var(--text-xs); color: var(--color-text-muted);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  table.data tbody tr:last-child td { border-bottom: none; }
  table.data td.num, table.data th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
  table.data tbody tr { transition: background var(--dur-fast) var(--ease-out); }
  table.data tbody tr:hover { background: var(--color-accent-soft); }

  /* --- フォーム -------------------------------------------------------- */
  .field { display: grid; gap: var(--space-2); }
  .field + .field { margin-top: var(--space-5); }
  .field__label { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.02em; }
  .field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
  .field__error { font-size: var(--text-sm); color: var(--color-danger); font-weight: 600; }
  .req { color: var(--color-danger); font-size: var(--text-xs); margin-inline-start: var(--space-1); }

  input[type='text'], input[type='email'], input[type='tel'], input[type='search'],
  select, textarea {
    width: 100%; min-height: 48px;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
  }
  textarea { min-height: 128px; line-height: 1.9; resize: vertical; }
  input:hover, select:hover, textarea:hover { border-color: color-mix(in oklab, var(--color-accent) 35%, var(--color-border)); }
  input:focus-visible, select:focus-visible, textarea:focus-visible {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-focus) 16%, transparent);
    outline: none;
  }
  .field:has(input[aria-invalid='true']) input,
  .field:has(select[aria-invalid='true']) select { border-color: var(--color-danger); }

  fieldset { border: none; padding: 0; margin: 0; }
  fieldset + fieldset { margin-top: var(--space-8); }
  legend { font-size: var(--text-sm); font-weight: 600; padding: 0; margin-bottom: var(--space-3); }

  .choice-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
  .choice {
    display: flex; align-items: flex-start; gap: var(--space-2);
    min-height: 44px; padding: var(--space-4);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-surface); cursor: pointer;
    font-size: var(--text-sm); line-height: 1.7;
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                transform var(--dur-base) var(--ease-soft),
                box-shadow var(--dur-base) var(--ease-out);
  }
  .choice:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
  .choice:has(input:checked) {
    border-color: color-mix(in oklab, var(--color-accent) 45%, transparent);
    background: var(--grad-soft);
  }
  .choice input { margin-top: 4px; accent-color: var(--color-accent); width: 18px; height: 18px; flex-shrink: 0; }

  .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* --- 状態表示 -------------------------------------------------------- */
  .empty-state {
    display: grid; gap: var(--space-4); justify-items: start;
    padding: var(--space-10) var(--space-6);
    background: var(--grad-band); border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-xl);
  }
  .alert {
    display: grid; gap: var(--space-2);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--grad-band);
    font-size: var(--text-sm); line-height: 1.85;
  }
  .alert--warning {
    background: linear-gradient(135deg, var(--color-warning-soft), oklch(0.982 0.020 80));
    border-color: color-mix(in oklab, var(--color-warning) 32%, transparent);
  }
  .alert--danger {
    background: linear-gradient(135deg, var(--color-danger-soft), oklch(0.980 0.015 36));
    border-color: color-mix(in oklab, var(--color-danger) 28%, transparent);
  }
  .alert__title { font-weight: 700; }

  .skeleton {
    background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-surface) 50%, var(--color-surface-2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: var(--radius-md);
  }
  @keyframes shimmer { to { background-position: -200% 0; } }

  /* --- パンくず -------------------------------------------------------- */
  .breadcrumb { font-size: var(--text-xs); color: var(--color-text-muted); }
  .breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; padding: 0; }
  .breadcrumb li + li::before { content: '／'; margin-inline-end: var(--space-1); opacity: 0.55; }
  .breadcrumb a { color: inherit; }

  /* --- 記事本文 -------------------------------------------------------- */
  .rich > * + * { margin-top: var(--space-4); }
  .rich h2 { margin-top: var(--space-10); }
  .rich h3 { margin-top: var(--space-8); }
  .rich ul, .rich ol { padding-inline-start: 1.4em; }
  .rich li + li { margin-top: var(--space-2); }
  .rich :is(ul, ol) { line-height: 1.9; }

  /* --- 手順リスト（受給者証の申請の流れなど） -------------------------- */
  .steps { counter-reset: step; display: grid; gap: var(--space-4); }
  .steps li {
    counter-increment: step;
    display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-4);
    align-items: start; line-height: 1.8;
  }
  .steps li::before {
    content: counter(step);
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
    background: var(--grad-soft); color: var(--color-accent-hover);
    font-size: var(--text-sm); font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* --- 索引一覧（サービス種別など、同格の項目を並べる） ----------------- */
  .index-list { display: grid; gap: var(--space-2); }
  @media (min-width: 700px) { .index-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1000px) { .index-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .index-item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    min-height: 56px; padding: var(--space-3) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-full);
    color: var(--color-text); text-decoration: none;
    transition: transform var(--dur-base) var(--ease-soft),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  }
  .index-item:hover {
    color: var(--color-accent-hover);
    border-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
    transform: translateY(-2px); box-shadow: var(--shadow-soft);
  }
  .index-item__body { display: grid; gap: 0; min-width: 0; }
  .index-item__name { font-weight: 600; line-height: 1.5; }
  .index-item__law { line-height: 1.6; }
  .index-item__count { flex-shrink: 0; }

  /* --- 地域索引（都道府県ごとの市区町村リンク） ------------------------- */
  .area-index {
    display: grid; gap: var(--space-6);
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  }
  .area-index__pref {
    padding: var(--space-5);
    background: var(--grad-card);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
  }
  .area-index__name {
    font-size: var(--text-base); font-weight: 700;
    padding-bottom: var(--space-3);
    border-bottom: 2px solid color-mix(in oklab, var(--color-accent) 30%, transparent);
  }
  .area-index__list { display: grid; gap: var(--space-1); list-style: none; padding: 0; margin-top: var(--space-3); }
  .area-index__list a {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
    min-height: 40px; padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text); text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .area-index__list a:hover { background: var(--color-accent-soft); color: var(--color-accent-hover); }

  /* --- 順位つき一覧（受け皿が足りていない地域など） --------------------- */
  .rank-list { display: grid; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
  .rank-pair { display: grid; gap: var(--space-8); }
  @media (min-width: 860px) { .rank-pair { grid-template-columns: 1fr 1fr; gap: var(--space-10); } }
  .rank-item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center; gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--grad-card);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    transition: transform var(--dur-base) var(--ease-soft),
                box-shadow var(--dur-base) var(--ease-out);
  }
  .rank-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); }
  .rank-item__no {
    display: grid; place-items: center;
    width: 2rem; height: 2rem;
    border-radius: 48% 52% 45% 55% / 55% 48% 52% 45%;
    background: var(--grad-soft);
    font-family: var(--font-serif);
    font-size: var(--text-sm); color: var(--color-accent-hover);
    letter-spacing: 0;
  }
  .rank-item__body { display: grid; gap: 2px; min-width: 0; }
  .rank-item__name {
    font-size: var(--text-lg); font-weight: 700; color: var(--color-text);
    text-decoration: none; line-height: 1.5;
  }
  .rank-item__name:hover { color: var(--color-accent); text-decoration: underline; }
  .rank-item__sub { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.7; }
  .rank-item__value {
    display: grid; justify-items: end; gap: 0;
    font-size: var(--text-2xl); font-weight: 700; line-height: 1.2;
  }
  .rank-item__unit { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); }

  /* --- 偏差値マップ ---------------------------------------------------- */
  .map-grid {
    display: grid; gap: var(--space-3);
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  }
  .map-cell {
    display: grid; gap: var(--space-1);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
    text-decoration: none; color: var(--color-text);
    transition: transform var(--dur-base) var(--ease-soft),
                box-shadow var(--dur-base) var(--ease-out);
  }
  .map-cell:hover { transform: translateY(-4px) scale(1.015); box-shadow: var(--shadow-float); color: var(--color-text); }
  .map-cell__name { font-size: var(--text-sm); font-weight: 600; }
  .map-cell__value { font-size: var(--text-2xl); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
  .map-cell__sub { font-size: var(--text-xs); color: var(--color-text-muted); }
  /* 数値は色だけでなく必ず数字とラベルを併記する */
  .map-cell[data-level='5'] { background: linear-gradient(155deg, color-mix(in oklab, var(--color-success) 20%, white), color-mix(in oklab, var(--color-success) 9%, white)); }
  .map-cell[data-level='4'] { background: linear-gradient(155deg, color-mix(in oklab, var(--color-success) 11%, white), color-mix(in oklab, var(--color-success) 4%, white)); }
  .map-cell[data-level='3'] { background: var(--grad-card); }
  .map-cell[data-level='2'] { background: linear-gradient(155deg, color-mix(in oklab, var(--color-warning) 16%, white), color-mix(in oklab, var(--color-warning) 6%, white)); }
  .map-cell[data-level='1'] { background: linear-gradient(155deg, color-mix(in oklab, var(--color-danger) 15%, white), color-mix(in oklab, var(--color-danger) 5%, white)); }

  .legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-xs); }
  .legend span { display: inline-flex; align-items: center; gap: var(--space-1); }
  .legend i { width: 16px; height: 16px; border-radius: var(--radius-sm); border: 1px solid var(--color-border-soft); }

  /* --- 固定CTAバー（選択中の事業所をまとめて問い合わせ） ---------------- */
  .cta-bar {
    position: fixed; inset-inline: var(--space-3); z-index: var(--z-overlay);
    bottom: var(--space-3);
    background: color-mix(in oklab, var(--color-surface) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
    padding: var(--space-3) var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom));
    transform: translateY(150%);
    transition: transform var(--dur-base) var(--ease-soft);
  }
  .cta-bar[data-visible='true'] { transform: translateY(0); }
  .cta-bar__inner { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
  .cta-bar__count { font-size: var(--text-sm); font-weight: 600; }
  .cta-bar .btn { margin-inline-start: auto; }
  @media (max-width: 899px) { .cta-bar { bottom: 96px; } }

  /* --- KPI --------------------------------------------------------------*/
  .kpi-row {
    display: grid; gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  }
  .kpi { display: grid; gap: var(--space-1); }
  .kpi__label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.06em; }
  .kpi__value { font-size: var(--text-2xl); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
  .kpi__note { font-size: var(--text-xs); color: var(--color-text-muted); }

  /* --- 開閉 ------------------------------------------------------------ */
  details.disclosure {
    border: 1px solid var(--color-border-soft); border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
  }
  details.disclosure + details.disclosure { margin-top: var(--space-2); }
  details.disclosure > summary {
    display: flex; align-items: center; gap: var(--space-2);
    min-height: 48px; padding: var(--space-3) var(--space-5);
    font-weight: 600; cursor: pointer; list-style: none;
    transition: background var(--dur-fast) var(--ease-out);
  }
  details.disclosure > summary:hover { background: var(--color-accent-soft); }
  details.disclosure > summary::-webkit-details-marker { display: none; }
  details.disclosure > summary::after {
    content: '＋'; margin-inline-start: auto; color: var(--color-text-muted); font-weight: 400;
    transition: transform var(--dur-base) var(--ease-soft);
  }
  details.disclosure[open] > summary::after { content: '−'; transform: rotate(180deg); }
  details.disclosure > :not(summary) { padding: 0 var(--space-5) var(--space-5); }

  /* --- フッター -------------------------------------------------------- */
  .site-footer {
    margin-top: var(--space-16);
    border-top: 1px solid var(--color-border-soft);
    background: var(--grad-band);
    padding-block: var(--space-12) var(--space-8);
    font-size: var(--text-sm);
  }
  .site-footer h2 {
    font-family: var(--font-sans);
    font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.06em;
    margin-bottom: var(--space-3);
  }
  .site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
  .site-footer a {
    color: var(--color-text-muted); text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .site-footer a:hover { color: var(--color-accent); text-decoration: underline; }
  .footer-grid {
    display: grid; gap: var(--space-8);
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  }

  /* --- ヒーロー ---------------------------------------------------------
     やわらかい光のかたまりを2つ置き、ゆっくり呼吸させる。
     いずれも装飾なので aria からは見えず、reduced-motion では止まる。 */
  .hero {
    position: relative; isolation: isolate; overflow: hidden;
    padding-block: var(--space-12) var(--space-16);
  }
  .hero::before, .hero::after {
    content: ''; position: absolute; z-index: -1;
    border-radius: 50%;
    pointer-events: none;
  }
  /* 画面外に出たら止める。ずっと合成し続けるとバッテリーを食う（app.js が切り替える）。 */
  .hero[data-animate='false']::before,
  .hero[data-animate='false']::after { animation-play-state: paused; }
  .hero::before {
    inset-block-start: -22%; inset-inline-start: -12%;
    width: min(58vw, 640px); aspect-ratio: 1;
    background: radial-gradient(circle at 42% 38%,
      color-mix(in oklab, var(--color-accent-mist) 70%, transparent) 0%,
      color-mix(in oklab, var(--color-accent-mist) 28%, transparent) 42%,
      transparent 70%);
    animation: drift-a 26s var(--ease-out) infinite alternate;
  }
  .hero::after {
    inset-block-start: 8%; inset-inline-end: -18%;
    width: min(52vw, 560px); aspect-ratio: 1;
    background: radial-gradient(circle at 55% 45%,
      color-mix(in oklab, var(--color-accent-soft-2) 85%, transparent) 0%,
      color-mix(in oklab, var(--color-accent-soft) 55%, transparent) 45%,
      transparent 72%);
    animation: drift-b 32s var(--ease-out) infinite alternate;
  }
  @keyframes drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(4%, 6%, 0) scale(1.10); }
  }
  @keyframes drift-b {
    from { transform: translate3d(0, 0, 0) scale(1.06); }
    to   { transform: translate3d(-5%, 8%, 0) scale(0.96); }
  }
  .hero__grid { display: grid; gap: var(--space-8); align-items: start; }
  @media (min-width: 960px) {
    .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); }
  }
  /* 見出しの肩に短い朱の罫。装飾ではなく、話の始まりを示す約物として置く。 */
  .hero h1::before {
    content: ''; display: block;
    width: 56px; height: 4px; margin-bottom: var(--space-5);
    border-radius: var(--radius-full);
    background: var(--grad-accent);
  }
  .hero__lead { font-size: var(--text-lg); color: var(--color-text-muted); line-height: 1.95; }
  .hero__stats {
    display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-8);
    padding-top: var(--space-6); margin-top: var(--space-8);
    border-top: 1px solid var(--color-border-soft);
  }
  /* ヒーロー内の検索カードは、この画面の主役なので一段強く浮かせる */
  .hero .card { box-shadow: var(--shadow-float); border-radius: var(--radius-xl); }
}

/* ==========================================================================
   スクロールに合わせた登場（JSがある場合だけ）
   ========================================================================== */

@layer components {
  .js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
  }
  .js-reveal [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms),
      transform var(--dur-slow) var(--ease-soft) var(--reveal-delay, 0ms);
  }
}

@layer utilities {
  .muted { color: var(--color-text-muted); }
  .small { font-size: var(--text-sm); }
  .xs { font-size: var(--text-xs); }
  .bold { font-weight: 700; }
  .center { text-align: center; }
  .nowrap { white-space: nowrap; }
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .clamp-2 {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .divider { height: 1px; background: var(--color-border-soft); border: none; }
}

/* 動きを減らす設定では、装飾の動きを全部止める。登場アニメも無効にする。 */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
}