: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-family-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-mono: 'Noto Sans Mono', monospace;
  --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);
}

/* ---------------------------------------------- 役割別の色 */
:root {
  --bg: var(--color-neutral-solid-gray-50);
  --surface: var(--color-neutral-white);
  --border: var(--color-neutral-solid-gray-200);
  --border-strong: var(--color-neutral-solid-gray-420);
  --text: var(--color-neutral-solid-gray-900);
  --text-sub: var(--color-neutral-solid-gray-700);
  --primary: var(--color-primitive-blue-900);
  --primary-hover: var(--color-primitive-blue-1000);
  --primary-bg: var(--color-primitive-blue-50);
  --error: var(--color-semantic-error-1);
  --error-bg: var(--color-primitive-red-50);
  --success: var(--color-semantic-success-2);
  --success-bg: var(--color-primitive-green-50);
  --warning: var(--color-primitive-orange-900);
  --warning-bg: var(--color-primitive-orange-50);
  --radius: 8px;
  --focus-ring: var(--color-primitive-yellow-700);
}

/* ---------------------------------------------- 基本 */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.4; margin: 0; }
p { margin: 0 0 8px; }

a { color: var(--primary); text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }

/* フォーカスは常に見えるようにする（キーボード操作への配慮） */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------------------------------------------- レイアウト */
/*
   コンテンツ幅（デジタル庁デザインシステムの12カラムグリッドに合わせる）
     溝 = 本文の文字サイズ（16px）の2倍 = 32px
     標準: 12列 × 56px + 溝 11 × 32px = 1024px（代理店側）
     広い: 12列 × 84px + 溝 11 × 32px = 1360px + 左右の余白32px = 1424px（管理画面）
   一覧表を扱う管理画面は広い方を使う。
*/
.wrap { max-width: 1024px; margin: 0 auto; padding: 24px 16px 64px; }
.wrap.wide { max-width: 1424px; padding-left: 32px; padding-right: 32px; }
.bar { padding-left: 24px; padding-right: 24px; }

.bar {
  background: var(--primary);
  color: var(--color-neutral-white);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.bar a { color: var(--color-neutral-white); }
.bar :focus-visible { outline-color: var(--color-neutral-white); }

.brand { font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.brand-logo { display: block; width: auto; }
.brand-logo.on-plate {
  background: var(--color-neutral-white);
  border-radius: 4px;
  padding: 4px 8px;
}

.brand-sub {
  font-size: 12px;
  font-weight: 400;
  padding: 2px 8px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 999px;
}

.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav-item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 16px;
}
.nav-item:hover { background: rgba(255,255,255,.15); color: var(--color-neutral-white); }
.nav-item.current {
  background: var(--color-neutral-white);
  color: var(--primary);
  font-weight: 700;
}
.nav .company { font-size: 14px; padding: 0 8px; opacity: .9; }
.btn-tertiary.on-bar { color: var(--color-neutral-white); min-height: 44px; padding: 0 12px; }
.btn-tertiary.on-bar:hover { background: rgba(255,255,255,.15); color: var(--color-neutral-white); }

.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

/* ---------------------------------------------- 面 */
.card, .panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.card { width: 100%; max-width: 440px; box-shadow: var(--elevation-1); }
.card h1 { font-size: 22px; margin-bottom: 4px; }
.card .sub { color: var(--text-sub); font-size: 14px; margin-bottom: 24px; }

.panel { margin-bottom: 24px; overflow-x: auto; }
.panel h2 { font-size: 20px; margin-bottom: 16px; }
.panel h3 { font-size: 17px; margin-bottom: 8px; }
.panel.warn { background: var(--warning-bg); border-color: var(--warning); }
.panel.warn h2 { color: var(--warning); }

/* ---------------------------------------------- フォーム */
label { display: block; font-size: 16px; font-weight: 700; margin: 16px 0 8px; }

input[type=text], input[type=password], input[type=email], input[type=search],
select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 16px;
  font-family: inherit;
  line-height: 1.5;
  background: var(--surface);
  color: var(--text);
}
textarea { min-height: 120px; resize: vertical; }
input[readonly] { background: var(--color-neutral-solid-gray-50); color: var(--text-sub); }
input[type=file] { font-size: 14px; }
input[type=checkbox] { width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; }

.hint { font-size: 14px; color: var(--text-sub); margin-top: 8px; }

/* ----------------------------------------------
   グループボタン（排他選択）
   選択肢が3つ程度で、選んだ状態を常に見せたい項目に使う
   ---------------------------------------------- */
.segmented { display: inline-flex; flex-wrap: wrap; }
.segmented__item { margin: 0; }
.segmented__item input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.segmented__item span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--border-strong);
  margin-left: -1px;
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
}
.segmented__item:first-child span { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
.segmented__item:last-child span { border-radius: 0 var(--radius) var(--radius) 0; }
.segmented__item span:hover { background: var(--primary-bg); color: var(--primary); }
.segmented__item input:checked + span {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--color-neutral-white);
  font-weight: 700;
  position: relative;
}
.segmented__item input:focus-visible + span {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  position: relative;
}

/* ----------------------------------------------
   トグルのグループ（複数選択）
   選んだものが押された状態で残る。チェックボックスの代わりに使う
   ---------------------------------------------- */
.toggle-group { display: inline-flex; flex-wrap: nowrap; }
.toggle-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  min-width: 0;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  margin-left: -1px;
  background: var(--surface);
  color: var(--text-sub);
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}
.toggle-item:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
.toggle-item:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.toggle-item:hover:not(:disabled) { background: var(--primary-bg); color: var(--primary); }
.toggle-item[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--color-neutral-white);
  font-weight: 700;
  position: relative;
}
.toggle-item:disabled { opacity: .55; cursor: not-allowed; }

/* ---------------------------------------------- ボタン（3階層） */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 96px;
  padding: 12px 24px;
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--color-neutral-white);
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}
button:hover, .btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--color-neutral-white); }
button:disabled { opacity: .5; cursor: not-allowed; }

form > button { width: 100%; margin-top: 24px; }

.btn-secondary {
  background: var(--surface);
  color: var(--primary);
  border-color: var(--primary);
}
.btn-secondary:hover { background: var(--primary-bg); color: var(--primary-hover); }

/* 一覧の行内操作など、重要度の低い操作 */
.btn-tertiary {
  min-height: 44px;
  min-width: 0;
  padding: 8px;
  background: none;
  border-color: transparent;
  color: var(--primary);
  text-decoration: underline;
  font-weight: 400;
}
.btn-tertiary:hover { background: var(--primary-bg); border-color: transparent; color: var(--primary-hover); }

/* ---------------------------------------------- 通知 */
.msg { margin-top: 16px; padding: 12px 16px; border-radius: var(--radius); font-size: 14px; display: none; }
.msg.error { display: block; background: var(--error-bg); color: var(--error); border: 1px solid var(--error); }
.msg.info { display: block; background: var(--primary-bg); color: var(--primary); border: 1px solid var(--primary); }

.banner-warn {
  margin-top: 24px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  color: var(--warning);
  font-size: 14px;
}

.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--color-neutral-white);
  font-size: 12px;
  font-weight: 700;
}
.badge.internal { background: var(--warning); }

/* ---------------------------------------------- 表 */
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { padding: 12px; border-bottom: 1px solid var(--border); text-align: left; font-size: 16px; vertical-align: middle; }
th { background: var(--color-neutral-solid-gray-50); font-size: 14px; color: var(--text-sub); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

/* ---------------------------------------------- 一覧・カード */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.card-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
  min-height: 88px;
}
.card-link:hover { border-color: var(--primary); background: var(--primary-bg); color: var(--text); }
.card-link strong { font-size: 17px; }
.card-link .count, .card-link .desc { font-size: 14px; color: var(--text-sub); }

.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 16px 0; border-bottom: 1px solid var(--border); }
.list li:last-child { border-bottom: 0; }

.meta { font-size: 14px; color: var(--text-sub); }
.memo { font-size: 16px; color: var(--text-sub); margin-top: 4px; }
.crumb { font-size: 14px; margin-bottom: 16px; }

.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
}
.chip:hover { background: var(--primary-bg); border-color: var(--primary); color: var(--primary); }
.chip.current { background: var(--primary); border-color: var(--primary); color: var(--color-neutral-white); }

.breadcrumb { margin-bottom: 16px; font-size: 14px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 4px; }
.breadcrumb a,
.breadcrumb [aria-current="page"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 4px;
}
.breadcrumb [aria-current="page"] { color: var(--text-sub); }
.breadcrumb-sep { color: var(--color-neutral-solid-gray-420); }
.links { margin-top: 24px; font-size: 16px; text-align: center; }

.search { display: flex; gap: 8px; margin-bottom: 24px; }
.search input { flex: 1; }
.search button { margin-top: 0; width: auto; }

details { margin-top: 16px; }
summary { cursor: pointer; font-size: 16px; color: var(--primary); padding: 8px 0; min-height: 44px; display: flex; align-items: center; }

/* ---------------------------------------------- 問い合わせ */
.assignee-list { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 16px; }
.assignee-item { display: inline-flex; align-items: center; margin: 0; font-weight: 400; min-height: 44px; }

.msg-item { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; background: var(--surface); }
.msg-item.admin { background: var(--primary-bg); border-color: var(--color-primitive-blue-200); }
.msg-item.internal { background: var(--warning-bg); border-color: var(--warning); }
.msg-head { font-size: 14px; margin-bottom: 8px; }
.msg-body { white-space: pre-wrap; }
.attach { margin: 12px 0 0; padding-left: 20px; font-size: 14px; }

/* ---------------------------------------------- 管理画面の編集行 */
.inline-form { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 16px; align-items: end; }
.inline-form button { margin-top: 0; width: auto; }
.inline-form label { margin-top: 0; font-size: 14px; }

.row-head { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.row-head input { flex: 1; min-width: 200px; }
.row-head button { flex-shrink: 0; }

/* 入力欄の中に操作を置く（URLを別タブで開く等） */
.input-with-action { position: relative; display: flex; flex: 1; min-width: 200px; }
.input-with-action input { width: 100%; padding-right: 48px; }
.url-open {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  color: var(--primary);
}
.url-open:hover { background: var(--primary-bg); }
.url-open[hidden] { display: none; }
.row-actions a { margin-right: 16px; display: inline-block; padding: 10px 0; }
.file-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.file-field__name { font-size: 14px; color: var(--text-sub); }
.file-field__name.is-selected { color: var(--text); font-weight: 700; }

.divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 24px 0 16px;
}
.section-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-sub);
  margin: 0 0 12px;
}

.file-block { padding-bottom: 24px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.file-block:last-of-type { border-bottom: 0; }

code {
  font-family: var(--font-family-mono);
  background: var(--color-neutral-solid-gray-50);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
  word-break: break-all;
}

/* ---------------------------------------------- 一覧の並び替え・行内操作 */
.sortable tr.dragging { opacity: .4; }
.drag-cell { width: 40px; padding-right: 0; }
.drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 44px;
  color: var(--text-sub);
  cursor: grab;
}
.drag-handle:active { cursor: grabbing; }

/* アイコン選択のボタンとモーダル */
.icon-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  min-width: 48px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
}
.icon-picker:hover { background: var(--primary-bg); border-color: var(--primary); color: var(--text); }
.icon-picker [data-icon-preview] { display: inline-flex; }


.icon-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: 80vh;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--elevation-4);
  color: var(--text);
}
.icon-dialog::backdrop { background: rgba(0, 0, 0, .4); }
.icon-dialog__head {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.icon-dialog__head h2 { font-size: 18px; margin: 0; white-space: nowrap; }
.icon-dialog__head input[type=search] { flex: 1; min-width: 0; }

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 8px;
  padding: 16px 24px 24px;
  overflow-y: auto;
  max-height: calc(80vh - 84px);
}
.icon-option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 56px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}
.icon-option:hover { background: var(--primary-bg); border-color: var(--primary); color: var(--primary); }
.icon-option[aria-pressed="true"] {
  border-color: var(--primary);
  border-width: 2px;
  background: var(--primary-bg);
  color: var(--primary);
}

.btn-sm {
  min-height: 40px;
  min-width: 0;
  padding: 6px 12px;
  font-size: 14px;
}
.btn-danger {
  background: var(--surface);
  border-color: var(--error);
  color: var(--error);
}
.btn-danger:hover { background: var(--error-bg); border-color: var(--error); color: var(--error); }
.row-actions { white-space: nowrap; }
.row-actions button + button { margin-left: 8px; }

/* ----------------------------------------------
   アイコン（Ionicons / MIT）
   線の色と太さは文字色に合わせる
   ---------------------------------------------- */
.icon {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 32px;
  vertical-align: -0.15em;
}
.icon [stroke-width] { stroke-width: inherit; }
/* 塗りで描かれている図形は文字色で塗る */
.icon path[fill]:not([fill="none"]),
.icon circle[fill]:not([fill="none"]) { fill: currentColor; stroke: none; }

/* テキストと並ぶときの間隔 */
.nav-item, .card-link strong, .list a, summary, .crumb a, .msg-item .attach li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
button .icon, .btn .icon, .btn-tertiary .icon { margin-right: 8px; }
/* アイコンだけのボタンは余白を左右で等しくする */
.icon-picker .icon,
.icon-option .icon,
.drag-handle .icon,
.url-open .icon { margin-right: 0; }
.attach li { display: flex; align-items: center; gap: 6px; }

/* ----------------------------------------------
   ファイルアップロード／ドロップエリア
   （デジタル庁デザインシステムのサンプル実装に準拠）
   https://github.com/digital-go-jp/design-system-example-components-html
   ---------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.dads-form-control-label__label { display: block; font-weight: 700; margin-bottom: 8px; }
.dads-form-control-label__requirement { font-weight: 400; font-size: 14px; color: var(--text-sub); margin-left: 8px; }
.dads-form-control-label__support-text { font-size: 14px; color: var(--text-sub); margin: 0 0 8px; }

.dads-file-upload { display: block; line-height: 1.7; overflow-wrap: anywhere; }
.dads-file-upload__input { display: none; }

.dads-file-upload__drop-area {
  border: 1px solid var(--color-neutral-solid-gray-536);
  border-radius: var(--radius);
  background-color: var(--color-neutral-solid-gray-50);
  padding: 32px;
}
.dads-file-upload[data-has-error="true"] .dads-file-upload__drop-area { border-color: var(--error); }
.dads-file-upload__drop-area[data-dragover="true"] {
  outline: 4px solid var(--color-semantic-success-1);
  outline-offset: -4px;
  background-color: var(--color-primitive-green-50);
}

.dads-file-upload__button-area { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.dads-file-upload__button-area button { flex-shrink: 0; }
.dads-file-upload__button-area p { margin: 0; width: 0; flex-grow: 1; min-width: 12em; font-size: 16px; }

.dads-file-upload__select-summary { margin: 8px 0 0; font-size: 14px; color: var(--text-sub); }
.dads-file-upload__select-summary:empty { margin-top: 0; }

.dads-file-upload__error-messages { margin: 8px 0 0; padding: 0; list-style: none; }
.dads-file-upload__error-messages:empty { margin-top: 0; }
.dads-file-upload__error-messages > li { color: var(--color-semantic-error-2); font-size: 14px; }

.dads-file-upload__expand-drop-area { margin: 32px 0 -8px; }
.dads-file-upload__expand-drop-area label { display: flex; align-items: center; font-weight: 400; font-size: 14px; margin: 0; }

.dads-file-upload__empty-message { margin: 16px 0 0; font-size: 14px; color: var(--text-sub); }

.dads-file-upload__file-list { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: file-item; }
.dads-file-upload__file-item { display: flex; align-items: baseline; gap: 8px; counter-increment: file-item; }
.dads-file-upload__file-item + .dads-file-upload__file-item { margin-top: 4px; }
.dads-file-upload__file-marker { width: 32px; flex-shrink: 0; }
.dads-file-upload__file-marker::before { content: counter(file-item) "."; }
.dads-file-upload__file-info { flex: 1; min-width: 0; }
.dads-file-upload__file-info > p { margin: 0; }
.dads-file-upload__file-name { margin-right: 16px; font-weight: 700; }
.dads-file-upload__file-meta { color: var(--color-neutral-solid-gray-600); font-size: 14px; }
.dads-file-upload__remove-button { order: -1; flex-shrink: 0; min-width: 48px; min-height: 30px; }

.dads-file-upload__viewport-overlay[hidden] { display: none; }
.dads-file-upload__viewport-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .5);
}
.dads-file-upload__viewport-overlay-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 32px 48px;
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 20px;
  font-weight: 700;
}

/* ----------------------------------------------
   スイッチ（デジタル庁デザインシステムのサンプル実装に準拠）
   https://github.com/digital-go-jp/design-system-example-components-html
   ---------------------------------------------- */
.dads-switch-on-off { display: inline-flex; align-items: center; }

.dads-switch-on-off__button {
  --switch-track-bg: var(--color-neutral-white);
  --switch-track-border: var(--color-neutral-solid-gray-600);
  --switch-thumb: var(--color-neutral-solid-gray-800);
  position: relative;
  flex-shrink: 0;
  min-width: 0;
  min-height: 0;
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.dads-switch-on-off__button:hover { background: none; }

.dads-switch-on-off__button:focus-visible {
  outline: 4px solid var(--color-neutral-black);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-primitive-yellow-300);
  border-radius: 9999px;
}

/* 押しやすいように操作領域を広げる */
.dads-switch-on-off__button::before { position: absolute; inset: -4px 0; content: ""; }

.dads-switch-on-off__track {
  position: relative;
  display: flex;
  width: 56px;
  border-radius: 9999px;
  border: 2px solid var(--switch-track-border);
  background-color: var(--switch-track-bg);
  padding: 4px;
}

.dads-switch-on-off__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--switch-thumb);
}

.dads-switch-on-off__icon { display: none; width: 24px; height: 24px; color: var(--color-neutral-white); }

.dads-switch-on-off__button[aria-checked="true"] {
  --switch-track-bg: var(--color-key-50);
  --switch-track-border: var(--color-key-900);
  --switch-thumb: var(--color-key-900);
}
.dads-switch-on-off__button[aria-checked="true"] .dads-switch-on-off__thumb { margin-left: auto; }
.dads-switch-on-off__button[aria-checked="true"] .dads-switch-on-off__icon { display: block; }

.switch-field { display: flex; align-items: center; gap: 12px; }
.switch-field .state { font-size: 16px; }

@media (forced-colors: active) {
  .dads-switch-on-off__track { border-color: ButtonText; }
  .dads-switch-on-off__thumb { background-color: ButtonText; }
  .dads-switch-on-off__icon { color: Canvas; }
  .dads-switch-on-off__button[aria-checked="true"] .dads-switch-on-off__track { border-color: Highlight; }
  .dads-switch-on-off__button[aria-checked="true"] .dads-switch-on-off__thumb { background-color: Highlight; }
}

/* ----------------------------------------------
   画面が広いときのフォーム
   項目名と入力欄を 1:3 で横並びにする。縦積みのままだと
   PCでは1項目あたりの縦幅が大きくなり、視線移動が増えるため。
   ログイン画面（.card）は幅が狭いので縦積みのままとする。
   ---------------------------------------------- */
@media (min-width: 768px) {
  .panel form:not(.inline-form) {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 4px 24px;
    align-items: start;
  }
  /* 項目名は入力欄の1行目に高さを合わせる */
  .panel form:not(.inline-form) > label {
    grid-column: 1;
    margin: 0;
    padding-top: 12px;
    text-align: left;
  }
  .panel form:not(.inline-form) > input,
  .panel form:not(.inline-form) > select,
  .panel form:not(.inline-form) > textarea,
  .panel form:not(.inline-form) > .hint,
  .panel form:not(.inline-form) > .msg,
  .panel form:not(.inline-form) > .switch-field,
  .panel form:not(.inline-form) > button {
    grid-column: 2;
  }
  .panel form:not(.inline-form) > .switch-field { padding-top: 10px; }
  .panel form:not(.inline-form) > .hint { margin-top: 4px; margin-bottom: 12px; }
  .panel form:not(.inline-form) > button {
    justify-self: start;
    width: auto;
    margin-top: 16px;
  }
  /* 添付ファイルのように、項目名と入力欄が一体になっている部品は横幅いっぱいに置く */
  .panel form:not(.inline-form) > .dads-form-control-label { grid-column: 1 / -1; }

  /* チェックボックスなど、項目名の中に入力欄があるものは横幅いっぱいに置く */
  .panel form:not(.inline-form) > label:has(input) {
    grid-column: 1 / -1;
    padding-top: 8px;
    font-weight: 400;
  }
}

/* ---------------------------------------------- 画面が狭いとき */
@media (max-width: 767px) {
  /* 画面が狭いときは余白を詰める（ブレイクポイントは768px） */
  .wrap.wide { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 640px) {
  .inline-form { grid-template-columns: 1fr; }
  .inline-form button { width: 100%; }
  th, td { padding: 8px; font-size: 14px; }
}


/* ------------------------------------------------------------
   1. ブランドカラー
   ロゴから抽出した色。ここを変えると、ボタン・リンク・
   選択中のメニューなど、青を使っている箇所がまとめて変わる。
   ------------------------------------------------------------ */
:root {
  --brand-blue: #0858d0;        /* 基本の青（ロゴの円弧） */
  --brand-blue-hover: #0246ad;  /* ホバー時の濃い青 */
  --brand-blue-light: #eef4fd;  /* 背景に敷く薄い青 */
  --brand-navy: #203858;        /* ロゴの濃紺 */

  /* 共通スタイル側の役割変数を上書きする */
  --primary: var(--brand-blue);
  --primary-hover: var(--brand-blue-hover);
  --primary-bg: var(--brand-blue-light);
}

/* ------------------------------------------------------------
   2. ヘッダー
   マニュアルサイトに合わせ、白背景＋濃い文字にする。
   ------------------------------------------------------------ */
.bar {
  background: var(--color-neutral-white);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding: 8px 24px;
}
.bar a { color: var(--text); }
.bar :focus-visible { outline-color: var(--focus-ring); }

.brand { gap: 12px; color: var(--text); }
.brand-logo { height: 28px; }
.brand-sub {
  color: var(--text-sub);
  border-color: var(--border-strong);
  font-weight: 700;
}

.nav-item { color: var(--text-sub); font-weight: 700; }
.nav-item:hover { background: var(--brand-blue-light); color: var(--brand-blue); }
.nav-item.current {
  background: var(--brand-blue-light);
  color: var(--brand-blue);
}
.nav .company { color: var(--text-sub); }

/* ヘッダー内のログアウトはリンクの見た目に戻す */
.btn-tertiary.on-bar { color: var(--brand-blue); }
.btn-tertiary.on-bar:hover { background: var(--brand-blue-light); color: var(--brand-blue-hover); }

/* ------------------------------------------------------------
   3. ボタンとリンク
   ------------------------------------------------------------ */
button, .btn { border-color: var(--brand-blue); background: var(--brand-blue); }
button:hover, .btn:hover { background: var(--brand-blue-hover); border-color: var(--brand-blue-hover); }

a { color: var(--brand-blue); }
a:hover { color: var(--brand-blue-hover); }

/* ------------------------------------------------------------
   4. 見出し・カード
   ------------------------------------------------------------ */
.card-link:hover { border-color: var(--brand-blue); }
.msg-item.admin { background: var(--brand-blue-light); border-color: #c7dbf7; }

/* ------------------------------------------------------------
   5. ログイン画面
   ヘッダーが無いため、ロゴをカードの上に置く。
   ------------------------------------------------------------ */
.auth-brand { display: flex; justify-content: center; margin-bottom: 24px; }
.auth-brand img { height: 36px; width: auto; }