/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --color-primitive-blue-50: #e8f1fe;
  --color-primitive-blue-100: #d9e6ff;
  --color-primitive-blue-200: #c5d7fb;
  --color-primitive-blue-300: #9db7f9;
  --color-primitive-blue-400: #7096f8;
  --color-primitive-blue-500: #4979f5;
  --color-primitive-blue-600: #3460fb;
  --color-primitive-blue-700: #264af4;
  --color-primitive-blue-800: #0031d8;
  --color-primitive-blue-900: #0017c1;
  --color-primitive-blue-1000: #00118f;
  --color-primitive-blue-1100: #000071;
  --color-primitive-blue-1200: #000060;
  --color-primitive-light-blue-50: #f0f9ff;
  --color-primitive-light-blue-100: #dcf0ff;
  --color-primitive-light-blue-200: #c0e4ff;
  --color-primitive-light-blue-300: #97d3ff;
  --color-primitive-light-blue-400: #57b8ff;
  --color-primitive-light-blue-500: #39abff;
  --color-primitive-light-blue-600: #008bf2;
  --color-primitive-light-blue-700: #0877d7;
  --color-primitive-light-blue-800: #0066be;
  --color-primitive-light-blue-900: #0055ad;
  --color-primitive-light-blue-1000: #00428c;
  --color-primitive-light-blue-1100: #00316a;
  --color-primitive-light-blue-1200: #00234b;
  --color-primitive-cyan-50: #e9f7f9;
  --color-primitive-cyan-100: #c8f8ff;
  --color-primitive-cyan-200: #99f2ff;
  --color-primitive-cyan-300: #79e2f2;
  --color-primitive-cyan-400: #2bc8e4;
  --color-primitive-cyan-500: #01b7d6;
  --color-primitive-cyan-600: #00a3bf;
  --color-primitive-cyan-700: #008da6;
  --color-primitive-cyan-800: #008299;
  --color-primitive-cyan-900: #006f83;
  --color-primitive-cyan-1000: #006173;
  --color-primitive-cyan-1100: #004c59;
  --color-primitive-cyan-1200: #003741;
  --color-primitive-green-50: #e6f5ec;
  --color-primitive-green-100: #c2e5d1;
  --color-primitive-green-200: #9bd4b5;
  --color-primitive-green-300: #71c598;
  --color-primitive-green-400: #51b883;
  --color-primitive-green-500: #2cac6e;
  --color-primitive-green-600: #259d63;
  --color-primitive-green-700: #1d8b56;
  --color-primitive-green-800: #197a4b;
  --color-primitive-green-900: #115a36;
  --color-primitive-green-1000: #0c472a;
  --color-primitive-green-1100: #08351f;
  --color-primitive-green-1200: #032213;
  --color-primitive-lime-50: #ebfad9;
  --color-primitive-lime-100: #d0f5a2;
  --color-primitive-lime-200: #c0f354;
  --color-primitive-lime-300: #ade830;
  --color-primitive-lime-400: #9ddd15;
  --color-primitive-lime-500: #8cc80c;
  --color-primitive-lime-600: #7eb40d;
  --color-primitive-lime-700: #6fa104;
  --color-primitive-lime-800: #618e00;
  --color-primitive-lime-900: #507500;
  --color-primitive-lime-1000: #3e5a00;
  --color-primitive-lime-1100: #2c4100;
  --color-primitive-lime-1200: #1e2d00;
  --color-primitive-yellow-50: #fbf5e0;
  --color-primitive-yellow-100: #fff0b3;
  --color-primitive-yellow-200: #ffe380;
  --color-primitive-yellow-300: #ffd43d;
  --color-primitive-yellow-400: #ffc700;
  --color-primitive-yellow-500: #ebb700;
  --color-primitive-yellow-600: #d2a400;
  --color-primitive-yellow-700: #b78f00;
  --color-primitive-yellow-800: #a58000;
  --color-primitive-yellow-900: #927200;
  --color-primitive-yellow-1000: #806300;
  --color-primitive-yellow-1100: #6e5600;
  --color-primitive-yellow-1200: #604b00;
  --color-primitive-orange-50: #ffeee2;
  --color-primitive-orange-100: #ffdfca;
  --color-primitive-orange-200: #ffc199;
  --color-primitive-orange-300: #ffa66d;
  --color-primitive-orange-400: #ff8d44;
  --color-primitive-orange-500: #ff7628;
  --color-primitive-orange-600: #fb5b01;
  --color-primitive-orange-700: #e25100;
  --color-primitive-orange-800: #c74700;
  --color-primitive-orange-900: #ac3e00;
  --color-primitive-orange-1000: #8b3200;
  --color-primitive-orange-1100: #6d2700;
  --color-primitive-orange-1200: #541e00;
  --color-primitive-red-50: #fdeeee;
  --color-primitive-red-100: #ffdada;
  --color-primitive-red-200: #ffbbbb;
  --color-primitive-red-300: #ff9696;
  --color-primitive-red-400: #ff7171;
  --color-primitive-red-500: #ff5454;
  --color-primitive-red-600: #fe3939;
  --color-primitive-red-700: #fa0000;
  --color-primitive-red-800: #ec0000;
  --color-primitive-red-900: #ce0000;
  --color-primitive-red-1000: #a90000;
  --color-primitive-red-1100: #850000;
  --color-primitive-red-1200: #620000;
  --color-primitive-magenta-50: #f3e5f4;
  --color-primitive-magenta-100: #ffd0ff;
  --color-primitive-magenta-200: #ffaeff;
  --color-primitive-magenta-300: #ff8eff;
  --color-primitive-magenta-400: #f661f6;
  --color-primitive-magenta-500: #f137f1;
  --color-primitive-magenta-600: #db00db;
  --color-primitive-magenta-700: #c000c0;
  --color-primitive-magenta-800: #aa00aa;
  --color-primitive-magenta-900: #8b008b;
  --color-primitive-magenta-1000: #6c006c;
  --color-primitive-magenta-1100: #500050;
  --color-primitive-magenta-1200: #3b003b;
  --color-primitive-purple-50: #f1eafa;
  --color-primitive-purple-100: #ecddff;
  --color-primitive-purple-200: #ddc2ff;
  --color-primitive-purple-300: #cda6ff;
  --color-primitive-purple-400: #bb87ff;
  --color-primitive-purple-500: #a565f8;
  --color-primitive-purple-600: #8843e1;
  --color-primitive-purple-700: #6f23d0;
  --color-primitive-purple-800: #5c10be;
  --color-primitive-purple-900: #5109ad;
  --color-primitive-purple-1000: #41048e;
  --color-primitive-purple-1100: #30016c;
  --color-primitive-purple-1200: #21004b;
  --color-neutral-white: #ffffff;
  --color-neutral-black: #000000;
  --color-neutral-solid-gray-50: #f2f2f2;
  --color-neutral-solid-gray-100: #e6e6e6;
  --color-neutral-solid-gray-200: #cccccc;
  --color-neutral-solid-gray-300: #b3b3b3;
  --color-neutral-solid-gray-400: #999999;
  --color-neutral-solid-gray-420: #949494;
  --color-neutral-solid-gray-500: #7f7f7f;
  --color-neutral-solid-gray-536: #767676;
  --color-neutral-solid-gray-600: #666666;
  --color-neutral-solid-gray-700: #4d4d4d;
  --color-neutral-solid-gray-800: #333333;
  --color-neutral-solid-gray-900: #1a1a1a;
  --color-neutral-opacity-gray-50: rgba(0, 0, 0, 0.05);
  --color-neutral-opacity-gray-100: rgba(0, 0, 0, 0.1);
  --color-neutral-opacity-gray-200: rgba(0, 0, 0, 0.2);
  --color-neutral-opacity-gray-300: rgba(0, 0, 0, 0.3);
  --color-neutral-opacity-gray-400: rgba(0, 0, 0, 0.4);
  --color-neutral-opacity-gray-420: rgba(0, 0, 0, 0.42);
  --color-neutral-opacity-gray-500: rgba(0, 0, 0, 0.5);
  --color-neutral-opacity-gray-536: rgba(0, 0, 0, 0.54);
  --color-neutral-opacity-gray-600: rgba(0, 0, 0, 0.6);
  --color-neutral-opacity-gray-700: rgba(0, 0, 0, 0.7);
  --color-neutral-opacity-gray-800: rgba(0, 0, 0, 0.8);
  --color-neutral-opacity-gray-900: rgba(0, 0, 0, 0.9);
  --font-weight-400: 400;
  --font-weight-700: 700;
  --font-family-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-mono: 'Noto Sans Mono', monospace;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-17: 1.0625rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-22: 1.375rem;
  --font-size-24: 1.5rem;
  --font-size-26: 1.625rem;
  --font-size-28: 1.75rem;
  --font-size-32: 2rem;
  --font-size-36: 2.25rem;
  --font-size-45: 2.8125rem;
  --font-size-48: 3rem;
  --font-size-57: 3.5625rem;
  --font-size-64: 4rem;
  --line-height-100: 1;
  --line-height-120: 1.2;
  --line-height-130: 1.3;
  --line-height-140: 1.4;
  --line-height-150: 1.5;
  --line-height-160: 1.6;
  --line-height-170: 1.7;
  --line-height-175: 1.75;
  --border-radius-4: 0.25rem;
  --border-radius-6: 0.375rem;
  --border-radius-8: 0.5rem;
  --border-radius-12: 0.75rem;
  --border-radius-16: 1rem;
  --border-radius-24: 1.5rem;
  --border-radius-32: 2rem;
  --border-radius-full: 624.9375rem;
  --elevation-1: 0 2px 8px 1px rgba(0,0,0,0.1), 0 1px 5px 0 rgba(0,0,0,0.3);
  --elevation-2: 0 2px 12px 2px rgba(0,0,0,0.1), 0 1px 6px 0 rgba(0,0,0,0.3);
  --elevation-3: 0 4px 16px 3px rgba(0,0,0,0.1), 0 1px 6px 0 rgba(0,0,0,0.3);
  --elevation-4: 0 6px 20px 4px rgba(0,0,0,0.1), 0 2px 6px 0 rgba(0,0,0,0.3);
  --elevation-5: 0 8px 24px 5px rgba(0,0,0,0.1), 0 2px 10px 0 rgba(0,0,0,0.3);
  --elevation-6: 0 10px 30px 6px rgba(0,0,0,0.1), 0 3px 12px 0 rgba(0,0,0,0.3);
  --elevation-7: 0 12px 36px 7px rgba(0,0,0,0.1), 0 3px 14px 0 rgba(0,0,0,0.3);
  --elevation-8: 0 14px 40px 7px rgba(0,0,0,0.1), 0 3px 16px 0 rgba(0,0,0,0.3);
  --color-semantic-success-1: var(--color-primitive-green-600);
  --color-semantic-success-2: var(--color-primitive-green-800);
  --color-semantic-error-1: var(--color-primitive-red-800);
  --color-semantic-error-2: var(--color-primitive-red-900);
  --color-semantic-warning-yellow-1: var(--color-primitive-yellow-700);
  --color-semantic-warning-yellow-2: var(--color-primitive-yellow-900);
  --color-semantic-warning-orange-1: var(--color-primitive-orange-600);
  --color-semantic-warning-orange-2: var(--color-primitive-orange-800);
  --color-key-50: var(--color-primitive-blue-50);
  --color-key-100: var(--color-primitive-blue-100);
  --color-key-200: var(--color-primitive-blue-200);
  --color-key-300: var(--color-primitive-blue-300);
  --color-key-400: var(--color-primitive-blue-400);
  --color-key-500: var(--color-primitive-blue-500);
  --color-key-600: var(--color-primitive-blue-600);
  --color-key-700: var(--color-primitive-blue-700);
  --color-key-800: var(--color-primitive-blue-800);
  --color-key-900: var(--color-primitive-blue-900);
  --color-key-1000: var(--color-primitive-blue-1000);
  --color-key-1100: var(--color-primitive-blue-1100);
  --color-key-1200: var(--color-primitive-blue-1200);
}

/**
 * dads-semantic.css — DADS 意味的エイリアス層（役割ベーストークン）
 * ─────────────────────────────────────────────────────────────
 * これは「公式トークンではない」。公式 @digital-go-jp/design-tokens
 * (dist/tokens.css, v2.0.1, MIT) の primitive / key / semantic / neutral 変数を、
 * 実装で使いやすい役割名（text / surface / border / state ...）へ写像した便宜層。
 *
 * 原則:
 *  - 値はすべて公式 var(--color-*) / var(--font-*) / var(--border-radius-*) / var(--elevation-*) を参照し、
 *    独自の hex 値は新規定義しない（=捏造しない）。
 *  - 役割の割当は DADS 基本デザイン（カラー / 余白 / アクセシビリティ）の指針と、
 *    ops-hub(src/ui/styles.html) の実証、および下記コントラスト検証に基づく。
 *  - 必ず dads-tokens.css（公式）の後に読み込む。
 *
 * 出典:
 *  - 公式トークン: @digital-go-jp/design-tokens v2.0.1 (dist/tokens.css), MIT
 *  - カラー指針 : https://design.digital.go.jp/dads/foundations/color/
 *  - a11y指針  : https://design.digital.go.jp/dads/foundations/color/accessibility/
 *                （本文 4.5:1 / 大文字(24px or 18px太字) 3:1 / 非テキスト・フォーカス 3:1。JIS X 8341-3:2016, WCAG 2.1/2.2）
 *  - 余白指針  : https://design.digital.go.jp/dads/foundations/spacing/（基準8px・主要 8/24/64）
 *
 * コントラスト検証（白 #ffffff 背景）:
 *  - solid-gray-900 #1a1a1a … 本文。十分（>15:1）
 *  - solid-gray-700 #4d4d4d … 補助テキスト。約 8.9:1（AA本文可）
 *  - solid-gray-536 #767676 … 白背景で本文に使える最小グレー。約 4.55:1（AA本文ぎりぎり可）
 *  - solid-gray-420 #949494 … 約 3.0:1（本文不可。非テキスト/境界・無効表示の最小）
 *  - solid-gray-300 #b3b3b3 … 約 2.1:1（装飾的区切り線のみ。意味のある境界には使わない）
 */

:root {
  /* ============================================================
   * キーカラー（ブランド）— 既定は公式 DADS Blue。プロジェクトで上書き可。
   *  上書き例: :root{ --key:#378BCA; --key-hover:#2f78b0; --key-active:#286795; --key-ink:#1b4f7a; --key-weak:#eaf3fb; }
   * ============================================================ */
  --key: var(--color-key-900);            /* #0017c1 公式キー(Blue-900) 面の基準 */
  --key-hover: var(--color-key-1000);     /* #00118f */
  --key-active: var(--color-key-1100);    /* #000071 */
  --key-ink: var(--color-key-1000);       /* #00118f 文字色としてのキー（リンク等・白背景でAA） */
  --key-weak: var(--color-key-100);       /* #d9e6ff 選択/淡い面 */
  --key-weaker: var(--color-key-50);      /* #e8f1fe 最も淡い面 */
  --on-key: var(--color-neutral-white);   /* キー面上の文字 */

  /* ============================================================
   * テキスト
   * ============================================================ */
  --text: var(--color-neutral-solid-gray-900);            /* #1a1a1a 本文 */
  --text-secondary: var(--color-neutral-solid-gray-700);  /* #4d4d4d 補助 */
  --text-muted: var(--color-neutral-solid-gray-536);      /* #767676 白背景での本文最小(AA) */
  --text-disabled: var(--color-neutral-solid-gray-420);   /* #949494 無効表示（非テキスト相当） */
  --text-on-fill: var(--color-neutral-white);             /* 濃色面上の文字 */

  /* ============================================================
   * 面・背景
   * ============================================================ */
  --bg: var(--color-neutral-solid-gray-50);   /* #f2f2f2 ページ背景 */
  --surface: var(--color-neutral-white);      /* #ffffff カード/パネル/入力 */
  --surface-2: var(--color-neutral-solid-gray-50); /* #f2f2f2 副次面/ホバー */
  --surface-hover: var(--color-neutral-solid-gray-50);
  --scrim: var(--color-neutral-opacity-gray-420);  /* rgba(0,0,0,.42) モーダル/ドロワーの覆い */

  /* ============================================================
   * 境界線（非テキストは 3:1 が必要）
   * ============================================================ */
  --border: var(--color-neutral-solid-gray-300);        /* #b3b3b3 装飾的区切り（カード/テーブル罫） */
  --border-subtle: var(--color-neutral-solid-gray-100); /* #e6e6e6 さらに淡い区切り */
  --border-strong: var(--color-neutral-solid-gray-536); /* #767676 入力等インタラクティブ要素の輪郭(3:1確保) */

  /* ============================================================
   * セマンティック（状態色）
   *  -1 系は面/アイコン向け、-2 系はテキスト向け（より濃く 4.5:1 寄り）。bg は淡色面。
   * ============================================================ */
  --success: var(--color-semantic-success-1);             /* green-600 #259d63 */
  --success-strong: var(--color-semantic-success-2);      /* green-800 #197a4b（テキスト向け） */
  --success-bg: var(--color-primitive-green-50);          /* #e6f5ec */

  --danger: var(--color-semantic-error-1);                /* red-800 #ec0000 */
  --danger-strong: var(--color-semantic-error-2);         /* red-900 #ce0000（テキスト向け） */
  --danger-bg: var(--color-primitive-red-50);             /* #fdeeee */

  --warning: var(--color-semantic-warning-orange-1);      /* orange-600 #fb5b01 */
  --warning-strong: var(--color-semantic-warning-orange-2); /* orange-800 #c74700（テキスト向け） */
  --warning-bg: var(--color-primitive-orange-50);         /* #ffeee2 */

  --caution: var(--color-semantic-warning-yellow-1);      /* yellow-700 #b78f00 */
  --caution-strong: var(--color-semantic-warning-yellow-2); /* yellow-900 #927200 */
  --caution-bg: var(--color-primitive-yellow-50);         /* #fbf5e0 */

  /* info: DADS に公式の "info" セマンティックは無い。機能カラーの Light Blue を慣例的に割当（派生）。 */
  --info: var(--color-primitive-light-blue-700);          /* #0877d7 */
  --info-strong: var(--color-primitive-light-blue-900);   /* #0055ad（テキスト向け） */
  --info-bg: var(--color-primitive-light-blue-50);        /* #f0f9ff */

  /* リンク（機能カラー）: 既定 Blue-1000、訪問済 Magenta-900（DADS リンク配色の Style1 に準拠） */
  --link: var(--color-primitive-blue-1000);               /* #00118f */
  --link-visited: var(--color-primitive-magenta-900);     /* #8b008b */

  /* ============================================================
   * 角丸（公式 border-radius を役割名に）
   * ============================================================ */
  --radius-sm: var(--border-radius-4);    /* .25rem */
  --radius: var(--border-radius-8);       /* .5rem 既定 */
  --radius-lg: var(--border-radius-12);   /* .75rem カード/モーダル */
  --radius-xl: var(--border-radius-16);   /* 1rem */
  --radius-pill: var(--border-radius-full); /* 全丸 */

  /* ============================================================
   * エレベーション（公式 elevation-1..8 をそのまま利用）
   *  代表的な使い分けのエイリアス。
   * ============================================================ */
  --shadow-sm: var(--elevation-1);
  --shadow: var(--elevation-2);
  --shadow-lg: var(--elevation-4);
  --shadow-xl: var(--elevation-6);

  /* ============================================================
   * 余白（派生・8px基準）
   *  DADS公式は「基準8px / 主要スケール 8・24・64」を定義（名前付きトークンは無し）。
   *  実装に必要な中間値を補った実用スケール。★=DADS公式アンカー。
   * ============================================================ */
  --space-3xs: 4px;    /* 0.5× 半ステップ（補助） */
  --space-2xs: 8px;    /* ★ 1× 基準 */
  --space-xs: 12px;    /* 1.5×（補助） */
  --space-sm: 16px;    /* 2× */
  --space-md: 24px;    /* ★ 3× */
  --space-lg: 32px;    /* 4× */
  --space-xl: 48px;    /* 6× */
  --space-2xl: 64px;   /* ★ 8× */

  /* ============================================================
   * タイポグラフィ（公式 font-size / line-height / font-family を役割名に）
   *  weight は公式が 400/700 のみ。本文行間は DADS の長文向け 1.7/1.75 を採用。
   * ============================================================ */
  --font-sans: var(--font-family-sans);   /* 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif */
  --font-mono: var(--font-family-mono);   /* 'Noto Sans Mono', monospace */
  --weight-regular: var(--font-weight-400);
  --weight-bold: var(--font-weight-700);

  --fs-caption: var(--font-size-14);   /* .875rem 注釈/メタ */
  --fs-body: var(--font-size-16);      /* 1rem 本文 */
  --fs-body-lg: var(--font-size-18);   /* 1.125rem */
  --fs-h6: var(--font-size-16);
  --fs-h5: var(--font-size-18);
  --fs-h4: var(--font-size-20);
  --fs-h3: var(--font-size-24);
  --fs-h2: var(--font-size-28);
  --fs-h1: var(--font-size-32);
  --fs-display: var(--font-size-45);

  --lh-tight: var(--line-height-130);  /* 見出し（小） */
  --lh-heading: var(--line-height-150);/* 見出し（大） */
  --lh-body: var(--line-height-170);   /* 本文（DADS長文向け） */
  --lh-relaxed: var(--line-height-175);

  /* ============================================================
   * フォーカスインジケータ（非テキスト 3:1。キーカラーの2px輪郭＋白の隙間） *
   * ============================================================ */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--key);
  --focus-outline: 2px solid var(--key);
}

/**
 * dads-base.css — DADS デザインシステム 基盤CSS（リセット/タイポ/レイアウト/ユーティリティ）
 * すべての値は役割トークン（dads-semantic.css）経由 = 公式 @digital-go-jp/design-tokens に帰着。
 * 読み込み順: dads-tokens.css → dads-semantic.css → dads-base.css → dads-components.css
 * フォント: 'Noto Sans JP' / 'Noto Sans Mono' を別途 <link>（profiles/*-profile.md 参照）。
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 見出し（公式サイズ＋700） */
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-sm); font-weight: var(--weight-bold); color: var(--text); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-tight); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-tight); }
h6 { font-size: var(--fs-h6); line-height: var(--lh-tight); }
p { margin: 0 0 var(--space-sm); }

/* リンク（機能カラー・下線） */
a { color: var(--link); text-underline-offset: 2px; }
a:visited { color: var(--link-visited); }
a:hover { text-decoration-thickness: 2px; }

code, kbd, samp, pre { font-family: var(--font-mono); }

/* フォーカス可視（非テキスト3:1。キーボード操作時のみ） */
:focus-visible { outline: var(--focus-outline); outline-offset: 2px; border-radius: var(--radius-sm); }
:focus:not(:focus-visible) { outline: none; }

/* スクロールバー（細く控えめ・全体） */
* { scrollbar-width: thin; scrollbar-color: var(--color-neutral-opacity-gray-300) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: var(--color-neutral-opacity-gray-300); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--color-neutral-opacity-gray-500); background-clip: padding-box; }

/* ===== アプリシェル ===== */
.app-header {
  position: sticky; top: 0; z-index: 40; height: 56px;
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 0 var(--space-md);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: var(--space-2xs); font-weight: var(--weight-bold); font-size: var(--fs-body-lg); white-space: nowrap; }
.brand .sub { font-size: var(--fs-caption); color: var(--text-muted); font-weight: var(--weight-regular); }
.header-spacer { flex: 1 1 auto; }
.header-tools { display: flex; align-items: center; gap: var(--space-xs); }

/* タブバー（role=tablist と併用） */
.tabbar { display: flex; gap: var(--space-3xs); margin-left: var(--space-xs); }
.tab {
  appearance: none; border: 0; background: transparent; cursor: pointer; font-family: inherit;
  height: 36px; padding: 0 var(--space-sm); border-radius: var(--radius-pill);
  color: var(--text-secondary); font-weight: var(--weight-bold); font-size: var(--fs-caption);
  display: inline-flex; align-items: center; gap: var(--space-2xs);
}
.tab:hover { background: var(--surface-2); color: var(--text); }
.tab[aria-selected="true"] { background: var(--key-weak); color: var(--key-ink); }

/* 検索ボックス */
.searchbox { position: relative; display: inline-flex; align-items: center; }
.searchbox input {
  height: 40px; width: 220px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 0 var(--space-xs) 0 38px; font-size: var(--fs-body); font-family: inherit; background: var(--surface); color: var(--text);
}
.searchbox input:focus { border-color: var(--key); outline: none; box-shadow: 0 0 0 3px var(--key-weak); }
.searchbox .m-icon { position: absolute; left: 10px; color: var(--text-muted); pointer-events: none; }

.app-main { padding: var(--space-md); max-width: 1448px; margin: 0 auto; }

/* ===== レイアウト・ユーティリティ ===== */
.row { display: flex; gap: var(--space-xs); align-items: center; }
.stack { display: flex; flex-direction: column; gap: var(--space-sm); }
.wrap { flex-wrap: wrap; }
.spread { justify-content: space-between; }
.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.small { font-size: var(--fs-caption); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ローディング / 空状態 */
.loading { display: grid; place-items: center; min-height: 40vh; color: var(--text-muted); gap: var(--space-xs); }
.spinner { width: 28px; height: 28px; border: 3px solid var(--key-weak); border-top-color: var(--key); border-radius: 50%; animation: dads-spin .8s linear infinite; }
@keyframes dads-spin { to { transform: rotate(360deg); } }
.empty { padding: var(--space-2xl); text-align: center; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media (max-width: 1024px) {
  .searchbox input { width: 160px; }
  .brand .sub { display: none; }
}

/**
 * dads-components.css — DADS デザインシステム コンポーネントCSS
 * 値は役割トークン（dads-semantic.css）経由 = 公式トークンに帰着。
 * 読み込み順: dads-tokens.css → dads-semantic.css → dads-base.css → dads-components.css
 * 出典/原型: DADS コンポーネント(design.digital.go.jp/dads/components/) ＋ ops-hub src/ui/components.html(実証)。
 */

/* ===== ボタン（DADS: primary / secondary / tertiary(text) / danger） ===== */
.btn {
  appearance: none; font-family: inherit; font-size: var(--fs-body); font-weight: var(--weight-bold);
  cursor: pointer; height: 40px; padding: 0 var(--space-sm); border-radius: var(--radius);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  transition: background .12s, border-color .12s, box-shadow .12s; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(.5px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
/* primary = キーカラー塗り */
.btn-primary { background: var(--key); border-color: var(--key); color: var(--on-key); }
.btn-primary:hover { background: var(--key-hover); border-color: var(--key-hover); }
.btn-primary:active { background: var(--key-active); }
/* secondary = 既定(.btn の輪郭)。明示用エイリアス */
.btn-secondary { background: var(--surface); border-color: var(--key); color: var(--key-ink); }
.btn-secondary:hover { background: var(--key-weaker); }
/* tertiary / text = 枠なし */
.btn-ghost, .btn-text { background: transparent; border-color: transparent; color: var(--key-ink); }
.btn-ghost:hover, .btn-text:hover { background: var(--key-weak); }
/* danger */
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-key); }
.btn-danger:hover { background: var(--danger-strong); border-color: var(--danger-strong); }
/* サイズ / アイコンのみ */
.btn-sm { height: 32px; padding: 0 var(--space-xs); font-size: var(--fs-caption); }
.btn-lg { height: 48px; padding: 0 var(--space-md); font-size: var(--fs-body-lg); }
.btn-icon { width: 40px; padding: 0; }
.btn-icon.btn-sm { width: 32px; }

/* ===== バッジ（状態ラベル・先頭ドット） ===== */
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-caption); font-weight: var(--weight-bold);
  padding: 3px 10px; border-radius: var(--radius-pill); line-height: 1.4; white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tone-key { background: var(--key-weak); color: var(--key-ink); }
.tone-success { background: var(--success-bg); color: var(--success-strong); }
.tone-warning { background: var(--warning-bg); color: var(--warning-strong); }
.tone-caution { background: var(--caution-bg); color: var(--caution-strong); }
.tone-danger { background: var(--danger-bg); color: var(--danger-strong); }
.tone-info { background: var(--info-bg); color: var(--info-strong); }
.tone-neutral { background: var(--color-neutral-solid-gray-100); color: var(--text-secondary); }

/* ===== チップ（入力済みタグ等） ===== */
.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-caption); font-weight: var(--weight-bold);
  padding: 3px 10px; border-radius: var(--radius-pill); background: var(--caution-bg); color: var(--caution-strong);
}

/* ===== カード / パネル ===== */
.card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-pad { padding: var(--space-md); }
.section-title { font-size: var(--fs-caption); font-weight: var(--weight-bold); color: var(--text-secondary); letter-spacing: .02em; margin: 0 0 var(--space-2xs); }

/* ツールバー / セグメント / セレクト */
.toolbar { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-sm); }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 3px; }
.seg button { appearance: none; border: 0; background: transparent; font-family: inherit; font-size: var(--fs-caption); font-weight: var(--weight-bold); color: var(--text-secondary); padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--key-ink); box-shadow: var(--shadow-sm); }
.select { height: 40px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); font-family: inherit; font-size: var(--fs-body); padding: 0 var(--space-xs); color: var(--text); }
.select:focus { border-color: var(--key); outline: none; box-shadow: 0 0 0 3px var(--key-weak); }

/* ===== フォーム ===== */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-xs); }
.field > label { font-size: var(--fs-caption); font-weight: var(--weight-bold); color: var(--text-secondary); }
.field .req { color: var(--danger-strong); margin-left: 2px; }
.field input[type="text"], .field input[type="date"], .field input[type="email"], .field input[type="number"], .field input[type="search"], .field input[type="tel"], .field select, .field textarea {
  border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 9px 11px; font-family: inherit;
  font-size: var(--fs-body); color: var(--text); background: var(--surface); width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; line-height: var(--lh-body); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--key); outline: none; box-shadow: 0 0 0 3px var(--key-weak); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--danger); }
.field .help { font-size: var(--fs-caption); color: var(--text-muted); }
.field .error { font-size: var(--fs-caption); color: var(--danger-strong); font-weight: var(--weight-bold); }
.field-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px var(--space-xs); font-size: var(--fs-body); }
.kv dt { color: var(--text-muted); font-weight: var(--weight-bold); }
.kv dd { margin: 0; color: var(--text); }

/* トグルスイッチ（label で input をラップ。キーボード操作はネイティブ） */
.switch { display: inline-flex; align-items: center; gap: var(--space-2xs); cursor: pointer; }
.switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch .track { flex: none; width: 40px; height: 22px; border-radius: var(--radius-pill); background: var(--color-neutral-solid-gray-420); position: relative; transition: background .15s; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .15s; }
.switch input:checked + .track { background: var(--key); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: var(--focus-outline); outline-offset: 2px; }
.switch input:disabled + .track { opacity: .5; cursor: not-allowed; }

/* ===== テーブル ===== */
.table-wrap { overflow: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface); }
table.grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-body); }
table.grid thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); text-align: left; font-weight: var(--weight-bold); color: var(--text-secondary); padding: 12px var(--space-xs); border-bottom: 1px solid var(--border); white-space: nowrap; }
table.grid thead th.sortable { cursor: pointer; user-select: none; }
table.grid thead th .arrow { color: var(--key); margin-left: 4px; }
table.grid tbody td { padding: 11px var(--space-xs); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
table.grid tbody tr { cursor: pointer; }
table.grid tbody tr:hover { background: var(--key-weaker); }
table.grid tbody tr.selected { background: var(--key-weak); }
table.grid tbody tr:focus-within { background: var(--key-weaker); }

/* ミニ進捗バー */
.miniprog { display: flex; align-items: center; gap: var(--space-2xs); min-width: 128px; }
.miniprog .bar { flex: 1; height: 6px; border-radius: 4px; background: var(--color-neutral-solid-gray-100); overflow: hidden; }
.miniprog .bar > i { display: block; height: 100%; background: var(--key); border-radius: 4px; }
.miniprog .pct { font-size: var(--fs-caption); color: var(--text-muted); width: 36px; text-align: right; }

/* ステッパー（フェーズ進行） */
.stepper { display: flex; gap: 0; overflow-x: auto; padding: var(--space-2xs) 0; }
.step { flex: 1 0 auto; min-width: 96px; display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 4px; }
.step::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--border); }
.step:first-child::before { display: none; }
.step.done::before, .step.current::before { background: var(--key); }
.step .dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; z-index: 1; background: var(--surface); border: 2px solid var(--border); color: var(--text-muted); font-size: var(--fs-caption); font-weight: var(--weight-bold); }
.step.done .dot { background: var(--key); border-color: var(--key); color: var(--on-key); }
.step.current .dot { border-color: var(--key); color: var(--key-ink); box-shadow: 0 0 0 4px var(--key-weak); }
.step .lbl { margin-top: 6px; font-size: var(--fs-caption); font-weight: var(--weight-bold); text-align: center; color: var(--text-secondary); }
.step.current .lbl { color: var(--key-ink); }

/* ===== アラート ===== */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); font-size: var(--fs-body); border: 1px solid transparent; }
.alert.success { background: var(--success-bg); color: var(--success-strong); border-color: var(--success); }
.alert.warning { background: var(--warning-bg); color: var(--warning-strong); border-color: var(--warning); }
.alert.danger { background: var(--danger-bg); color: var(--danger-strong); border-color: var(--danger); }
.alert.info { background: var(--info-bg); color: var(--info-strong); border-color: var(--info); }

/* ===== ドロワー（右からのスライドパネル） ===== */
.drawer-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 50; opacity: 0; pointer-events: none; transition: opacity .18s; }
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(880px, 96vw); background: var(--bg); z-index: 51; box-shadow: var(--shadow-xl); transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column; }
.drawer.open { transform: none; }
.drawer-head { background: var(--surface); border-bottom: 1px solid var(--border); padding: var(--space-sm) var(--space-md); display: flex; align-items: flex-start; gap: var(--space-xs); }
.drawer-body { overflow: auto; padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }

/* ===== モーダル ===== */
.modal-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 60; display: none; align-items: flex-start; justify-content: center; padding: 6vh 16px; }
.modal-scrim.open { display: flex; }
.modal { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); width: min(720px, 96vw); max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; }
.modal-head { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: var(--space-xs); }
.modal-head h2 { margin: 0; font-size: var(--fs-h4); }
.modal-body { padding: var(--space-md); overflow: auto; }
.modal-foot { padding: var(--space-xs) var(--space-md); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: var(--space-2xs); }

/* ===== トースト ===== */
.toast-host { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: var(--space-2xs); align-items: center; }
.toast { background: var(--color-neutral-solid-gray-900); color: var(--color-neutral-white); padding: 11px 16px; border-radius: var(--radius); font-size: var(--fs-body); font-weight: var(--weight-bold); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .18s; }
.toast.show { opacity: 1; transform: none; }
.toast.success { background: var(--success-strong); }
.toast.danger { background: var(--danger-strong); }

/* ===== タブパネル ===== */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ===== アイコン（Material Symbols Outlined — DADSに無い汎用UIアイコンの補完） ===== */
.m-icon {
  font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 20px;
  line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr;
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  -webkit-font-smoothing: antialiased; font-feature-settings: 'liga'; user-select: none;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.m-icon.sm { font-size: 18px; }
.m-icon.lg { font-size: 24px; }
.m-icon.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }

/* ローカルDADS SVGアイコン（currentColor 継承で着色） */
.dads-icon { width: 1.25em; height: 1.25em; display: inline-flex; vertical-align: middle; }
.dads-icon svg { width: 100%; height: 100%; fill: currentColor; }

@media (max-width: 720px) {
  .field-row2 { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; }
}

/* ====================================================
 * Fulfill Group ブランドカラー上書き
 * #0F6E56 on white: contrast ratio ≈ 8.4:1 (WCAG AA/AAA ✓)
 * ==================================================== */
/* ロゴ青 (#2070c0 / #004090) より抽出
 * #1460B0 on white: contrast ratio ≈ 6.3:1 (WCAG AA ✓)
 * #0A4080 on white: contrast ratio ≈ 9.0:1 (WCAG AAA ✓) */
:root {
  --key:        #1460B0;
  --key-hover:  #0F509A;
  --key-active: #0A4080;
  --key-ink:    #0A4080;
  --key-weak:   #DEEDF8;
  --key-weaker: #EDF4FC;
}