/* キマル — 画面のスタイル
 *
 * ★方向B「夜明け」★（2026-08-28 オーナー確定。設計の正＝kimaru_ui_3directions.html の db- 節）
 * 「夜明け」を色相でなく明度の物語で組む。
 *
 *   1. サイドバーが夜（墨 #1D1A16）、コンテンツが夜明け後の紙（生成り #F4F1EA）
 *   2. ブランド橙 #E8641E は彩度を落とした操作色「暁 #A54A1B」へ翻訳する。
 *      原色 #E8641E は「地平線」グラデ専用で、文字に使わない
 *   3. ★赤 #CC2424 はエラー専用★ ブランド色とエラー色を混ぜない。
 *      成功=緑／失敗=赤を色体系で分離する（2026-08-24 の
 *      「失敗を成功の色で描いた」事故を、色の設計で再発不能にする）
 *   4. 「地平線」＝暁グラデの短線は3か所限定
 *      （h1直下・サイドバー脚・ログイン入口）。増殖させない
 *
 * ★値は全部トークン（--k-*）に置く★
 * 色・級数・余白・角丸・罫線は :root の1か所で決まる。今後の色替えは1か所で済む。
 * 級数は7段（12/13/14/16/20/22/28）。本文は14pxを最小にする。
 * 押せるものはタップ領域40px。数値は tabular-nums で桁を揃える。
 *
 * ★旧変数名（--bg --line --ok --danger 等）は互換エイリアスとして残す★
 * 個別テンプレートのインラインstyleが var(--ok) 等を直接参照している
 * （revenue.html・analytics.html ほか多数）。消すと色が消える。
 *
 * ★HTML のクラス名は1つも変えていない★
 * 画面側には役割ごとの出し分けが書き込まれているので、
 * 見た目のためにテンプレートへ手を入れない。
 */

:root {
  /* ---- 色トークン ---- */
  --k-bg: #F4F1EA;            /* 生成り（地） */
  --k-surface: #FFFFFF;       /* 面 */
  --k-surface-2: #FAF8F2;     /* 沈めた面（ボード列・表ヘッダ帯） */
  --k-ink: #221F1B;           /* 墨（本文） */
  --k-ink-2: #4A453D;         /* 墨2（ラベル・見出し補助） */
  --k-ink-3: #6A6458;         /* 墨3（出典・補足） */
  --k-line: #E5E0D5;          /* 罫線 */
  --k-line-strong: #CFC8BA;   /* 罫線強（表ヘッダ下・入力枠） */
  --k-dawn: #A54A1B;          /* 暁（文字・操作。白上5.8:1） */
  --k-dawn-deep: #8F421A;     /* 暁・深（hover / 淡地上の文字） */
  --k-dawn-bright: #E8641E;   /* 暁・鮮（地平線グラデ専用。文字に使わない） */
  --k-dawn-soft: #F9E6D8;     /* 暁・淡（チップ地） */
  --k-night: #1D1A16;         /* 夜（サイドバー） */
  --k-night-2: #26221C;       /* 夜・hover */
  --k-night-text: #D9D2C4;    /* 夜上の文字 */
  --k-night-muted: #8E8574;   /* 夜上のラベル */
  --k-night-dawn: #F0965A;    /* 夜上の暁（active） */
  --k-danger: #CC2424;        /* ★エラー専用。他の用途に使わない★ */
  --k-danger-text: #9E1E1E;   /* エラー文字（淡地上） */
  --k-danger-soft: #FAECEA;
  --k-ok: #2F6B4C;            /* 成功 */
  --k-ok-text: #275B41;
  --k-ok-soft: #E9F1EC;
  --k-warn-text: #7C5310;     /* 注意 */
  --k-warn-soft: #F6EEDC;
  --k-warn-line: #D9BC7A;

  /* ---- 形トークン ---- */
  --k-r-card: 10px;
  --k-r-ctl: 8px;
  --k-r-badge: 4px;
  --k-r-pill: 999px;
  --k-shadow: 0 1px 2px rgba(34, 31, 27, .04), 0 12px 28px -20px rgba(34, 31, 27, .18);
  --k-shadow-sm: 0 1px 2px rgba(34, 31, 27, .05);
  --k-horizon: linear-gradient(90deg, #E8641E 0%, #F0965A 55%, rgba(240, 150, 90, 0) 100%);

  /* ---- 字トークン ---- */
  --k-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
            "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", sans-serif;

  /* ---- 旧変数名の互換エイリアス（★消さない★） ----
     個別テンプレートのインラインstyleが参照している。
     値を変えるときは上のトークンを変える。ここは写像だけ。 */
  --bg: var(--k-bg);
  --surface: var(--k-surface);
  --surface-2: var(--k-surface-2);
  --line: var(--k-line);
  --line-strong: var(--k-line-strong);
  --text: var(--k-ink);
  --muted: var(--k-ink-3);
  --accent: var(--k-dawn);
  --accent-deep: var(--k-dawn-deep);
  --accent-soft: var(--k-dawn-soft);
  --accent-line: rgba(165, 74, 27, .38);
  --ok: var(--k-ok-text);
  --ok-soft: var(--k-ok-soft);
  --warn: var(--k-warn-text);
  --warn-soft: var(--k-warn-soft);
  --danger: var(--k-danger);
  --danger-soft: var(--k-danger-soft);
  --dark: var(--k-night);
  --dark-2: var(--k-night-2);
  --dark-line: rgba(255, 255, 255, .08);
  --dark-text: var(--k-night-text);
  --dark-muted: var(--k-night-muted);
  --radius: var(--k-r-card);
  --radius-sm: var(--k-r-ctl);
  --shadow: var(--k-shadow-sm);
  --shadow-lift: var(--k-shadow);
  --serif: var(--k-sans);   /* 明朝は廃止。参照が残っても崩れないよう同じ書体へ */
  --sans: var(--k-sans);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--k-bg);
  color: var(--k-ink);
  font-family: var(--k-sans);
  font-size: 14px;              /* ★本文14pxを最小にする★ */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--k-dawn); text-decoration: none; }
a:hover { color: var(--k-dawn-deep); text-decoration: underline; }

/* 押せるものは、押せると分かるようにする(見た目のために消さない) */
a:focus-visible, button:focus-visible,
.btn:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--k-dawn);
  outline-offset: 2px;
}

/* 数値の桁を縦に揃える */
.num, .money, .stat-value, .pager-count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ---------------------------------------------------------------- 骨格 */
.layout { display: flex; min-height: 100vh; }

/* ★左は夜★ 墨色。下端だけ夜明け前の空へわずかに温まる。 */
.sidebar {
  width: 228px;
  flex: 0 0 228px;
  background: linear-gradient(180deg, var(--k-night) 0%, var(--k-night) 82%, #2A1E14 100%);
  color: var(--k-night-text);
  border-right: 1px solid rgba(255, 255, 255, .08);
  padding: 24px 0 18px;
  display: flex;
  flex-direction: column;
}

.brand { padding: 0 18px 16px; margin-bottom: 10px; position: relative; }
/* 屋号の下は細い区切りだけ。地平線はここには置かない（脚に1本）。 */
.brand::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 0;
  height: 1px; background: rgba(255, 255, 255, .08);
}
.brand-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #F3EEE3;
  line-height: 1.3;
}
.brand-org {
  font-size: 12px; color: var(--k-night-muted); margin-top: 4px;
  line-height: 1.4;
}

.nav-group { padding: 2px 10px; }
.nav-label {
  font-size: 12px; color: var(--k-night-muted); letter-spacing: .08em;
  padding: 12px 10px 4px; font-weight: 600;
}
.nav a {
  display: flex; align-items: center;
  min-height: 40px;             /* ★タップ領域40px★ */
  padding: 4px 12px 4px 9px;
  border-left: 3px solid transparent;
  border-radius: 0 var(--k-r-ctl) var(--k-r-ctl) 0;
  color: var(--k-night-text); font-size: 14px;
  transition: background .2s ease, color .2s ease;
}
.nav a:hover {
  background: var(--k-night-2); color: #F3EEE3; text-decoration: none;
}
/* 開いている画面にだけ、暁が差す。 */
.nav a.active {
  background: rgba(232, 100, 30, .10);
  border-left-color: var(--k-dawn-bright);
  color: var(--k-night-dawn); font-weight: 600;
}

.sidebar-foot {
  margin-top: auto; padding: 14px 18px 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px; color: var(--k-night-muted);
}
/* ★地平線（サイドバー脚）★ 3か所限定の1つ目。 */
.sidebar-foot::before {
  content: ""; display: block; width: 56px; height: 2px;
  background: var(--k-horizon); border-radius: 2px; margin-bottom: 8px;
}
.sidebar-foot .strong { color: var(--k-night-text); font-weight: 600; }
.sidebar-foot .btn {
  background: transparent; border-color: rgba(255, 255, 255, .18);
  color: var(--k-night-muted);
}
.sidebar-foot .btn:hover {
  background: rgba(255, 255, 255, .06); color: var(--k-night-text);
  border-color: rgba(255, 255, 255, .3);
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  /* ★半透明のぼかし(backdrop-filter)は使わない★
     見た目の得は小さいのに、スクロール中の再描画が崩れることがある。 */
  background: var(--k-surface);
  border-bottom: 1px solid var(--k-line);
  padding: 10px 32px;
  min-height: 60px;
  display: flex; align-items: center; gap: 14px;
  position: sticky; top: 0; z-index: 20;
}
.topbar .crumbs {
  font-size: 13px; color: var(--k-ink-3);
}
.topbar .spacer { flex: 1; }

.content { padding: 28px 32px 64px; max-width: 1340px; width: 100%; }

/* ---------------------------------------------------------------- 部品 */
/* 紙が1枚浮く影は1種だけ。 */
.card {
  background: var(--k-surface); border: 1px solid var(--k-line);
  border-radius: var(--k-r-card); box-shadow: var(--k-shadow);
  margin-bottom: 24px; overflow: hidden;
}
.card-head {
  padding: 14px 20px; border-bottom: 1px solid var(--k-line);
  display: flex; align-items: center; gap: 12px;
}
.card-title {
  font-size: 16px; font-weight: 700; letter-spacing: .01em;
}
.card-body { padding: 20px; }
.card-body.tight { padding: 0; }

h1 {
  font-size: 22px; font-weight: 700; letter-spacing: .01em;
  margin: 0 0 8px; line-height: 1.4; text-wrap: balance;
}
h2 {
  font-size: 16px; font-weight: 700; letter-spacing: .01em;
  margin: 32px 0 12px;
}

/* ★地平線（h1直下）★ 3か所限定の2つ目。章はこの短線で分ける。 */
.page-head { margin: 4px 0 22px; }
.page-head h1 { margin-bottom: 0; }
.page-head h1::after {
  content: ""; display: block; width: 64px; height: 2px;
  background: var(--k-horizon); border-radius: 2px; margin: 8px 0 6px;
}
.page-sub { color: var(--k-ink-3); font-size: 13px; }

.muted { color: var(--k-ink-3); }
.strong { font-weight: 700; }
.small { font-size: 13px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.grid { display: grid; gap: 14px; }
/* ★最小幅を欲張らない★
   広げすぎると、4つ並ぶはずのタイルが3+1に折り返して間延びする。 */
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

/* 数字のタイル。小さなラベルと、大きな数字。 */
.stat { padding: 16px 20px 14px; }
.stat-label {
  font-size: 12px; color: var(--k-ink-2);
  letter-spacing: .04em; font-weight: 600;
}
.stat-value {
  /* ★金額を折り返させない★
     「1,440,000円」が2行になると桁を読み違える。
     大きさは画面幅に合わせて縮め、折り返しは禁止する。 */
  font-size: clamp(22px, 2.2vw, 28px);
  white-space: nowrap;
  font-weight: 700; letter-spacing: .01em;
  margin-top: 6px; line-height: 1.35;
}
.stat-value.money { font-variant-numeric: tabular-nums; }
.stat-note { font-size: 12px; color: var(--k-ink-3); margin-top: 6px; }

/* バッジ。状態の色は「意味」にだけ使う（良い=緑/注意=黄/危険=赤）。 */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: var(--k-r-badge);
  font-size: 12px; font-weight: 500; white-space: nowrap;
  line-height: 1.6;
  background: var(--k-surface); color: var(--k-ink-2);
  border: 1px solid var(--k-line-strong);
}
.badge-accent { background: #FCF4EC; color: var(--k-dawn-deep); border-color: rgba(165, 74, 27, .45); }
.badge-ok { background: var(--k-ok-soft); color: var(--k-ok-text); border-color: rgba(47, 107, 76, .35); }
.badge-warn { background: var(--k-warn-soft); color: var(--k-warn-text); border-color: var(--k-warn-line); }
.badge-danger { background: var(--k-danger-soft); color: var(--k-danger-text); border-color: rgba(204, 36, 36, .35); }

/* Indeed応募タブの行の色分け（2026-09-29）。意味にだけ使う。 */
.row-danger { background: var(--k-danger-soft); }
.row-warn { background: var(--k-warn-soft); }
.input-sm { padding: 4px 10px; font-size: 13px; height: auto; }

/* ボタン。★タップ領域40px★ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 4px 18px;
  border-radius: var(--k-r-ctl);
  border: 1px solid var(--k-line-strong); background: var(--k-surface);
  color: var(--k-ink); font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: inherit; line-height: 1.5;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover {
  background: var(--k-surface-2); border-color: var(--k-line-strong);
  text-decoration: none; color: var(--k-ink);
}
.btn-primary {
  background: var(--k-dawn); border-color: var(--k-dawn); color: #fff;
}
.btn-primary:hover {
  background: var(--k-dawn-deep); border-color: var(--k-dawn-deep); color: #fff;
}
.btn-sm { padding: 2px 14px; font-size: 13px; }
/* 控えめなボタン（枠なし）。partners の削除ボタン等が使う。 */
.btn-quiet { border-color: transparent; background: transparent; color: var(--k-ink-3); }
.btn-quiet:hover { background: var(--k-surface-2); color: var(--k-ink); }
.btn[disabled], .btn.disabled {
  opacity: .4; cursor: not-allowed; pointer-events: none;
}

/* 入力。★高さ40px・文字14px★ */
.input, .select, .textarea {
  width: 100%; min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--k-line-strong);
  border-radius: var(--k-r-ctl); background: var(--k-surface); color: var(--k-ink);
  font-size: 14px; font-family: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.textarea { line-height: 1.7; }
.input:focus, .select:focus, .textarea:focus {
  outline: 2px solid rgba(165, 74, 27, .4);
  outline-offset: 1px;
  border-color: var(--k-dawn);
  box-shadow: none;
}
.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px;
  color: var(--k-ink-2);
}
.field .help { font-size: 12px; color: var(--k-ink-3); margin-top: 5px; }
.field .err { font-size: 13px; color: var(--k-danger-text); margin-top: 5px; font-weight: 600; }

/* 表。縦線を引かず、横の細線だけで組む。★thは12pxまで上げて読ませる★ */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--k-line); }
th {
  font-size: 12px; color: var(--k-ink-2); font-weight: 600;
  background: var(--k-surface-2); white-space: nowrap; letter-spacing: .04em;
  padding-top: 9px; padding-bottom: 9px;
  border-bottom: 1px solid var(--k-line-strong);
}
tbody tr { transition: background .18s ease; }
tbody tr:hover { background: var(--k-surface-2); }
tbody tr:last-child td { border-bottom: 0; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

/* 空の状態 */
.empty {
  padding: 64px 24px; text-align: center; color: var(--k-ink-3);
  font-size: 14px;
}
.board-empty { padding: 8px 2px; }

/* 通知帯。★赤=エラー専用／成功=緑。失敗を成功の色で描かない★ */
.alert {
  padding: 11px 16px; border-radius: var(--k-r-ctl); margin-bottom: 16px;
  border: 1px solid var(--k-line);
  font-size: 14px; background: var(--k-surface);
}
.alert-ok {
  background: var(--k-ok-soft); color: var(--k-ok-text);
  border-color: rgba(47, 107, 76, .25);
  box-shadow: inset 3px 0 0 var(--k-ok);
}
.alert-warn, .alert-warning {
  background: var(--k-warn-soft); color: var(--k-warn-text);
  border-color: rgba(217, 188, 122, .6);
  box-shadow: inset 3px 0 0 var(--k-warn-text);
}
.alert-danger, .alert-error {
  background: var(--k-danger-soft); color: var(--k-danger-text);
  border-color: rgba(204, 36, 36, .25);
  box-shadow: inset 3px 0 0 var(--k-danger);
}
/* ※.alert-error / .alert-warning は partners/board.html・rule_list.html 等が
   使っているのに未定義で、失敗が無色で出ていた（2026-08-28 実測）。
   テンプレートを触らず、CSS側で危険・注意と同じ見た目に束ねる。 */

/* ------------------------------------------------------------ 求人カード */
.job-card {
  background: var(--k-surface); border: 1px solid var(--k-line);
  border-radius: var(--k-r-card); padding: 24px 26px; margin-bottom: 16px;
  box-shadow: var(--k-shadow-sm);
  transition: box-shadow .22s ease, border-color .22s ease;
}
.job-card:hover {
  border-color: rgba(165, 74, 27, .45);
  box-shadow: var(--k-shadow);
}
.job-title {
  font-size: 16px; font-weight: 700; margin-bottom: 4px; line-height: 1.5;
}
.job-company { font-size: 13px; color: var(--k-ink-3); }
.job-meta { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0; }
.job-salary {
  font-size: 16px; font-weight: 700; color: var(--k-ok-text);
  font-variant-numeric: tabular-nums;
}
.job-excerpt {
  font-size: 13px; color: var(--k-ink-3); margin-top: 10px; line-height: 1.8;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 絞り込み */
.filters {
  background: var(--k-surface); border: 1px solid var(--k-line);
  border-radius: var(--k-r-card); padding: 18px 20px; margin-bottom: 22px;
  box-shadow: var(--k-shadow-sm);
}
.filters .row > * { flex: 0 0 auto; }
.filters .grow { flex: 1 1 220px; }

/* 選考ボード */
.board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; }
.board-col { flex: 0 0 250px; }
.board-col-head {
  font-size: 13px; font-weight: 700; padding: 10px 14px;
  background: var(--k-surface); border: 1px solid var(--k-line);
  border-bottom: 0;
  border-radius: var(--k-r-card) var(--k-r-card) 0 0;
  display: flex; justify-content: space-between; align-items: center;
}
.board-col-body {
  background: var(--k-surface-2); border: 1px solid var(--k-line); border-top: 0;
  border-radius: 0 0 var(--k-r-card) var(--k-r-card);
  padding: 10px; min-height: 110px;
}
.board-item, .board-card {
  background: var(--k-surface); border: 1px solid var(--k-line);
  border-radius: var(--k-r-ctl); padding: 12px 14px; margin-bottom: 10px;
  font-size: 13px; box-shadow: var(--k-shadow-sm);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.board-item:hover, .board-card:hover {
  border-color: rgba(165, 74, 27, .45); box-shadow: var(--k-shadow);
}
.board-item .t { font-weight: 700; }

/* 選考の進み具合。細い帯。通過した段だけ上辺に暁。 */
.steps { display: flex; gap: 3px; margin: 20px 0; flex-wrap: wrap; }
.step {
  flex: 1 1 0; min-width: 70px; text-align: center; font-size: 12px;
  padding: 9px 6px; border-radius: 0;
  background: var(--k-surface); color: var(--k-ink-3);
  border: 1px solid var(--k-line); border-top: 2px solid var(--k-line-strong);
}
.step.done {
  background: var(--k-surface); color: var(--k-dawn-deep);
  border-color: var(--k-line); border-top-color: var(--k-dawn); font-weight: 600;
}

/* 履歴 */
.timeline {
  border-left: 1px solid var(--k-line-strong); padding-left: 26px; margin-left: 8px;
}
.timeline-item { position: relative; padding-bottom: 24px; }
.timeline-item::before {
  content: ""; position: absolute; left: -30px; top: 10px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--k-dawn); border: 2px solid var(--k-bg);
}

/* ログイン。ここは「入口」。★地平線★ 3か所限定の3つ目。 */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(880px 540px at 50% -10%, #FBF9F3 0%, transparent 66%),
    linear-gradient(168deg, #F4F1EA 0%, #E9E4D8 100%);
}
.login-card {
  width: 100%; max-width: 430px; background: var(--k-surface);
  border: 1px solid var(--k-line); border-radius: var(--k-r-card);
  padding: 52px 44px 44px; box-shadow: var(--k-shadow);
  position: relative; overflow: hidden;
}
/* 上辺に夜明けの線を1本通す。 */
.login-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 3px; background: var(--k-horizon);
}
.login-brand { text-align: center; margin-bottom: 32px; }
.login-brand .n {
  font-size: 26px; font-weight: 700; letter-spacing: .18em;
  text-indent: .18em;            /* 字間を空けた分の右余りを打ち消す */
  line-height: 1.4;
}
.login-brand .n::after {
  content: ""; display: block; width: 34px; height: 2px;
  background: var(--k-dawn); border-radius: 2px; margin: 16px auto 0;
}
.login-brand .d {
  font-size: 13px; color: var(--k-ink-3); margin-top: 14px;
}

@media (max-width: 820px) {
  .layout { flex-direction: column; }
  .sidebar {
    width: 100%; flex: none; border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08); padding-top: 18px;
  }
  .content { padding: 24px 18px 48px; }
  .topbar { padding: 10px 18px; }
  h1 { font-size: 20px; }
  th, td { padding: 10px 12px; }
  .card-head, .card-body { padding-left: 16px; padding-right: 16px; }
  .stat { padding: 16px 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ------------------------------------------------- 紹介料と返戻金(条件) */
/* ★エージェントが推薦するかを決める材料★
   ここが見えないと使われないので、求人票でいちばん目立たせる。 */
.terms {
  display: flex; gap: 0; flex-wrap: wrap; margin-top: 18px;
  border: 1px solid var(--k-line); border-radius: var(--k-r-card); overflow: hidden;
  background: var(--k-surface);
}
.terms-item {
  flex: 1 1 160px; padding: 14px 18px;
  border-right: 1px solid var(--k-line);
}
.terms-item:last-child { border-right: 0; }
.terms-label {
  font-size: 12px; color: var(--k-ink-2); font-weight: 600; letter-spacing: .04em;
}
.terms-value {
  font-size: 20px; font-weight: 700; margin-top: 4px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.terms-value.fee { color: var(--k-ok-text); }
.terms-note { font-size: 12px; color: var(--k-ink-3); margin-top: 3px; }

/* 目立たせる帯(求人詳細の上部)。上辺の暁で格を付ける（塗らない）。 */
.terms-hero {
  background: var(--k-surface);
  border: 1px solid var(--k-line); border-top: 2px solid var(--k-dawn);
  border-radius: 0 0 var(--k-r-card) var(--k-r-card);
  padding: 22px 26px; margin-bottom: 24px;
  display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start;
}
.terms-hero .h-label {
  font-size: 12px; color: var(--k-ink-2); font-weight: 600; letter-spacing: .04em;
}
.terms-hero .h-value {
  font-size: 28px; font-weight: 700; color: var(--k-ok-text);
  font-variant-numeric: tabular-nums; line-height: 1.3; margin-top: 4px;
  white-space: nowrap;
}
.terms-hero .h-sub { font-size: 13px; color: var(--k-ink-3); }

/* 返戻金の段階 */
.refund-tiers { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.refund-tier {
  font-size: 12px; padding: 3px 12px; border-radius: var(--k-r-badge);
  background: var(--k-warn-soft); color: var(--k-warn-text); font-weight: 600;
  border: 1px solid var(--k-warn-line);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------- 見出しの中の絞り込み(2026-08-12) */
/* ★絞り込みを見出しへ移す★（オーナー指示5）
   表の上に積み上がっていたボタン列を消し、押す場所を列そのものへ移す。
   details/summary なので、スクリプトが動かなくても開く。 */
.th-menu { position: relative; display: inline-block; }
.th-menu > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--k-ink-2); font-size: 12px; font-weight: 600; letter-spacing: .04em;
  padding: 2px 0;
}
.th-menu > summary::-webkit-details-marker { display: none; }
.th-menu > summary:hover { color: var(--k-ink); }
.th-menu-caret { font-size: 9px; opacity: .55; letter-spacing: 0; }
/* 絞り込み中の印。閉じていても効いていることが分かるように。 */
.th-menu-dot { color: var(--k-dawn); font-size: 8px; letter-spacing: 0; }
.th-menu-body {
  position: absolute; z-index: 40; top: 100%; left: 0; margin-top: 6px;
  min-width: 190px; max-height: 340px; overflow-y: auto;
  background: var(--k-surface); border: 1px solid var(--k-line-strong);
  border-radius: var(--k-r-ctl); box-shadow: var(--k-shadow);
  padding: 6px 0;
}
.th-menu-body a {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 14px; font-size: 13px;
  color: var(--k-ink); white-space: nowrap; font-weight: 400;
}
.th-menu-body a:hover { background: var(--k-surface-2); text-decoration: none; }
.th-menu-body a.active { font-weight: 600; box-shadow: inset 3px 0 0 var(--k-dawn); }
.th-menu-count { color: var(--k-ink-3); font-variant-numeric: tabular-nums; }
/* 右端の列のメニューが画面の外へ出ないようにする */
th:last-child .th-menu-body, th:nth-last-child(2) .th-menu-body {
  left: auto; right: 0;
}

/* ------------------------------------------- スマホ幅(2026-08-12 指示6) */
/* ★既存のPC表示を壊さない★ 追加するのは狭い幅の指定だけ。
   375px（iPhone の実幅）で、横に飛び出す要素を作らないことが目的。 */
@media (max-width: 560px) {
  /* 横スクロールは表の中だけで起こす。ページ全体を横に流さない。 */
  html, body { overflow-x: hidden; }

  /* 左のメニューは、上に畳んで横並びにする。
     縦に228px積むと、本文が1画面ぶん下へ落ちる。 */
  .sidebar { padding: 14px 0 12px; }
  .nav-group { padding: 2px 10px; }
  .nav-label { padding: 8px 8px 4px; }
  .nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .nav a {
    min-height: 40px; padding: 4px 12px;
    font-size: 13px; border-left-width: 2px;
    border-radius: var(--k-r-ctl);
  }
  .brand { padding: 0 16px 12px; margin-bottom: 8px; }
  .brand::after { left: 16px; right: 16px; }
  .brand-name { font-size: 15px; }
  .sidebar-foot { padding: 12px 16px 0; }

  .content { padding: 18px 12px 40px; }
  .topbar { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
  .crumbs { font-size: 12px; }
  h1 { font-size: 20px; }
  .page-sub { font-size: 12px; }

  /* 1列に落とす。2列のままだと、どちらの列も読めない幅になる。 */
  .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 12px; }

  .card-head, .card-body { padding-left: 12px; padding-right: 12px; }
  .card-head { flex-wrap: wrap; gap: 6px; }
  .stat { padding: 14px 12px; }
  .stat-value { font-size: 22px; }

  th, td { padding: 10px 10px; font-size: 12px; }
  /* ★列を潰さず、表ごと横に送らせる★
     375px に列を全部押し込むと、1文字ずつ縦に割れて読めなくなる。
     読める幅を保ったまま、表の中だけを横スクロールさせる。
     .table-wrap を持たない小さな表（選考の段階など）は対象外。 */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .table-wrap > table { min-width: 820px; }

  /* 入力欄が親からはみ出さない。iOS は16px未満で勝手に拡大する。 */
  .input, .select, .textarea { max-width: 100%; font-size: 16px; }
  .filters { padding: 14px 12px; }
  .row { flex-wrap: wrap; }
  .btn { font-size: 13px; }

  /* 選考ボードの列は、指で送れる幅にする。 */
  .board-col { flex: 0 0 78vw; }

  /* 見出しのメニューは、画面の外へ出さない。 */
  .th-menu-body { min-width: 160px; max-width: 74vw; }
}

/* やることの操作列。「完了」「対応済み」を横に並べたまま保つ(2026-08-12) */
.row.nowrap { flex-wrap: nowrap; }
.row.nowrap .btn { white-space: nowrap; }

/* -------------------------------- 企業名から企業詳細へ(2026-08-19 オーナー要望) */
/* ★指で押せる大きさを確保する★
   選考ボードのカードは企業名・職種・候補者名・ボタンが数px の間隔で
   縦に並ぶ。企業名をそのままリンクにすると、375px ではすぐ下の
   候補者名リンクと当たり判定が近づく。縦の余白を足して間を空ける。
   inline-block にしないと padding が縦方向に効かない。

   ★狭い幅の指定は、この下の 560px の節にまとめて置く★
   ここに新しく @media (max-width: 560px) を足さないこと。
   ページ送りのテストが「ファイル内で最後の 560px の節」を読むので、
   後ろに別の節を足すと、そのテストが空振りする（2026-08-19 実際に落ちた）。 */
.company-link {
  display: inline-block;
  padding: 2px 0 3px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--k-line-strong);
}
.company-link:hover { color: var(--k-dawn); border-bottom-color: var(--k-dawn); }

/* ------------------------- 見込み利益（2026-08-19 オーナー指示） */
/* ★確定粗利ではない★ 文言はテンプレート側で「見込み」と書いている。
   ここは置き場所だけ。探すボタンの右に置き、狭い幅では下へ落とす。 */
.board-profit { flex: 1 1 220px; min-width: 0; line-height: 1.5; }

/* ------------------------------------------- ページ送り(2026-08-12 指示) */
/* ★1,000人規模でも横に崩れないこと★
   ページ番号を全部並べると、100個のボタンが折り返して画面を埋める。
   並べる数はビュー側で「先頭・…・前後2・…・最終」に絞ってある。 */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 12px 16px; border-top: 1px solid var(--k-line);
}
.pager-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pager-nav .btn { min-width: 40px; text-align: center; }
.pager-current {
  background: var(--k-dawn); color: #fff; border-color: var(--k-dawn);
  cursor: default;
}
.pager .btn.disabled { opacity: .38; pointer-events: none; }
.pager-gap { color: var(--k-ink-3); padding: 0 2px; }
.pager-count { font-variant-numeric: tabular-nums; }
.pager-per { display: flex; align-items: center; gap: 6px; }
.pager-per a { color: var(--k-ink-3); }
.pager-current-per { font-weight: 700; color: var(--k-ink); }

/* ------------------------- Indeed応募（推薦前の対応）画面A〜F（2026-09-29 設計書第5版 §3） */
/* ★ここは全幅の指定だけ★ 狭い幅の指定は、この下の最後の 560px の節の中に置く。
   ★全画面の .btn（40px）は変えない★ 44px は .prerec-page の配下だけ（下の節）。
   ★色は必ず文字と一緒に出す★ 色だけの印をここで作らない（テンプレートが「赤：」を書く）。 */
.prerec-result .card-body > p { margin: 6px 0; }
.prerec-periods, .prerec-views { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.prerec-funnel {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 2px;
  font-size: 16px; line-height: 1.5;
}
.prerec-funnel a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  font-weight: 700;
}
.prerec-arrow { color: var(--k-ink-3); }
.prerec-worst { color: var(--danger); }
.prerec-stall {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; margin: 12px 0;
}
.prerec-stall-item {
  display: flex; flex-direction: column; gap: 4px; min-height: 44px;
  padding: 10px; border: 1px solid var(--k-line); border-radius: var(--k-r-ctl);
  background: #fff; color: inherit; text-decoration: none;
}
.prerec-stall-item.level-red { border-color: rgba(204, 36, 36, .45); }
.prerec-mine { display: block; }
/* 警告の文字は長い（「赤：面談したのに希望条件が未確認」）。折り返して枠の外へ出さない。 */
.prerec-page .badge { white-space: normal; max-width: 100%; }
.prerec-card.prerec-red { border-left: 4px solid var(--danger); }
/* 再コールの時刻を過ぎて記録なし（2026-09-30）＝赤の文字 */
.prerec-callback-missed { color: var(--k-danger-text); font-weight: 600; }
.prerec-error { outline: 2px solid var(--danger); outline-offset: -2px; }
.prerec-card-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.prerec-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: flex-start; }
.prerec-inline { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 0; }
.prerec-actions .prerec-inline { margin: 0; }
.prerec-form, .prerec-more { display: inline-block; max-width: 100%; }
.prerec-form[open], .prerec-more[open] { display: block; width: 100%; }
.prerec-page summary { list-style: none; cursor: pointer; }
.prerec-page summary::-webkit-details-marker { display: none; }
.prerec-form form {
  display: flex; flex-direction: column; gap: 6px; margin-top: 6px;
  padding: 10px; border: 1px solid var(--k-line); border-radius: var(--k-r-ctl);
}
.prerec-form label { display: flex; flex-direction: column; gap: 4px; }
.prerec-page label.prerec-check { flex-direction: row; align-items: center; gap: 6px; }
.prerec-sensitive { color: var(--k-warn-text); }
.prerec-bars { margin-top: 8px; }
.prerec-bar-row {
  display: grid; grid-template-columns: 120px minmax(0, 1fr);
  gap: 2px 8px; align-items: center; margin-bottom: 6px;
}
.prerec-bar-row .small { grid-column: 2; }
.prerec-bar { height: 12px; background: var(--k-line); border-radius: 6px; overflow: hidden; }
.prerec-bar span { display: block; height: 100%; background: var(--k-dawn); }
.prerec-board { padding-bottom: 72px; }
.prerec-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 20;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.prerec-setting-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
  padding: 8px 0; border-bottom: 1px solid var(--k-line);
}
.prerec-setting-row label { display: flex; flex-direction: column; gap: 4px; }
.prerec-inline-edit { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.prerec-table td { vertical-align: top; }
.prerec-log { padding: 6px 0; border-bottom: 1px solid var(--k-line); }
.prerec-more-fields { margin-top: 12px; }

@media (max-width: 560px) {
  /* 375px でも横へ飛び出さない。3段に落として、指で押せる大きさを保つ。 */
  .pager { padding: 12px; justify-content: center; text-align: center; }
  .pager-count, .pager-per { width: 100%; justify-content: center; }
  .pager-nav { justify-content: center; }
  .pager-nav .btn { min-width: 40px; padding: 4px 9px; }

  /* ★企業名リンクを指で押せる高さにする★(2026-08-19)
     実測 375px で 31.5px しか無く、押せる大きさの目安(40px前後)を
     下回っていた。上下の余白で 41.5px まで上げる。 */
  .company-link { padding: 11px 0 12px; }
  /* 企業名リンクの直下にくる候補者名リンクとの間を空ける。 */
  .board-item .t { margin-top: 4px; }

  /* ★見込み利益は、探すボタンの横ではなく下へ落とす★(2026-08-19)
     375px では「探す」と同じ行に収まらず、ボタンの右で3行に折り返して
     読みにくかった。狭い幅では1行ぶん使って、左そろえで出す。 */
  .board-profit { flex: 1 1 100%; }

  /* ★推薦元の経路は、狭い幅では表をやめて縦に積む★(2026-08-19)
     375px では表が820pxあり、いちばん押したい「保存」ボタンが
     横スクロールの先に隠れていた。**押せる場所が見えないのは
     押せないのと同じ。** 1社1ブロックにして、選ぶ→保存を縦に並べる。 */
  /* ★820px の下限を、この表だけ外す★
     .table-wrap > table { min-width: 820px } が上（820px以下の節）で
     効いている。縦積みにしても、その下限が残っていると横スクロールは
     消えない。**display を変えただけでは直らない。** */
  .table-wrap > table.route-table { min-width: 0; }
  .route-table, .route-table tbody, .route-table tr, .route-table td {
    display: block; width: 100%;
  }
  .route-table thead { display: none; }
  .route-table tr {
    padding: 12px 0; border-bottom: 1px solid var(--k-line);
  }
  .route-table td { border: 0; padding: 3px 0; }
  .route-table select { max-width: 100%; }

  /* ★Indeed応募（推薦前の対応）画面A〜F（2026-09-29）★
     ★ここに置く理由★ 新しい 560px の節を足すと、ページ送りのテストが
     「最後の 560px の節」を読んで空振りする（上の注意書きと同じ）。 */
  /* 結果の1ブロックを最初の1画面に：この画面だけ、左のメニューを本文の後ろへ回す。
     メニューを上に積むと、結果が1画面ぶん下へ落ちる（オーナーは最上部だけ見る）。 */
  .layout.prerec-layout .main { order: -1; }
  /* 押せる所は44px以上。★全画面の .btn（40px）は変えない★ この画面の配下だけ。 */
  .prerec-page .btn, .prerec-page .btn-sm, .prerec-page .input,
  .prerec-page .select, .prerec-page label.prerec-check { min-height: 44px; }
  .prerec-stall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prerec-funnel { font-size: 15px; }
  .prerec-bar-row { grid-template-columns: minmax(0, 1fr); }
  .prerec-bar-row .small { grid-column: 1; }
  .prerec-fab { right: 12px; bottom: 12px; }

  /* ★表をカードに積む（table.mobile-cards）★ 1行目＝警告と名前、2行目＝段階、…
     型は上の route-table と同じ。★820px の下限を外さないと横スクロールは消えない★ */
  .table-wrap > table.mobile-cards { min-width: 0; }
  table.mobile-cards, table.mobile-cards tbody,
  table.mobile-cards tr, table.mobile-cards td { display: block; width: 100%; }
  table.mobile-cards thead { display: none; }
  table.mobile-cards tr { padding: 10px 12px; border-bottom: 1px solid var(--k-line); }
  table.mobile-cards td { border: 0; padding: 3px 0; }
  table.mobile-cards td[data-label]::before {
    content: attr(data-label) "："; color: var(--k-ink-3); font-size: 12px;
  }
  table.mobile-cards .input, table.mobile-cards .select { max-width: 100%; }
}