[hidden]{display:none!important}
/* p-force の画面スタイル。
   囲みで区切らず、余白と細い横罫だけで情報を分ける。 */

:root {
  /* 上に固定しているヘッダーの高さ。タブ列など、その下に貼り付けたいものが使う */
  --topbar-h:54px;
  --paper:#FFFFFF; --ground:#FAFAFA;
  --ink:#1A1A1A; --ink-mid:#5A5F66; --ink-soft:#8B9199;
  --rule:#E6E8EB; --rule-soft:#F0F1F3;
  --accent:#1B4FA8;
  --ok:#10664C; --warn:#8A5A00; --stop:#96301D;
}
*{box-sizing:border-box}
html{background:var(--paper)}
/* 編集中は地をうすい水色にして、閲覧中と見分けられるようにする(項目の枠・保存バーも同じ地に乗せる) */
body.editing{--paper:#F6FBFF; --ground:#EAF3FB; --rule:#CBDEEE; --rule-soft:#E1EDF7}
body.editing .rec-head::after{content:"編集中";margin-left:10px;padding:2px 8px;border-radius:999px;
  background:#1B6FB8;color:#fff;font-size:11px;font-weight:700;vertical-align:3px}
/* 詳細の地の色(ユーザー指示 2026-09-11)。オーダー: 配信後に停止は灰色、配信でも配信後に停止でもないものは赤。
   事業者: 紹介停止・契約無効は赤。営業所: 商談ステータスが無効・接触禁止は赤、契約を含むものはオレンジ、
   ほかの人の次回アクションが今日以降に入っているものは黄色。
   編集中の水色と同じく変数ごと差し替えて、項目の枠も同じ地に乗せる */
body.tone-stop{--paper:#EFEFEF; --ground:#E4E4E4; --rule:#D2D2D2; --rule-soft:#E0E0E0}
body.tone-void{--paper:#FCEEEE; --ground:#F6DDDD; --rule:#E8C4C4; --rule-soft:#F1D6D6}
body.tone-ahead{--paper:#FFFAE3; --ground:#FFF1BF; --rule:#EEDB95; --rule-soft:#F6E8B4}
body.tone-contract{--paper:#FFF3E8; --ground:#FFE2C6; --rule:#F2C79E; --rule-soft:#F8D8B8}
html:has(body.tone-stop){background:#EFEFEF}
html:has(body.tone-void){background:#FCEEEE}
html:has(body.tone-ahead){background:#FFFAE3}
html:has(body.tone-contract){background:#FFF3E8}
/* オーダーの詳細: オーダー名の下の事業者へのリンク。押せると分かるよう枠付きにする */
.rec-company-link{display:inline-flex;align-items:center;gap:4px;margin:4px 0 2px;padding:2px 12px;border:1px solid var(--accent-line,#b9c8e6);
  border-radius:999px;background:var(--paper);color:var(--accent);font-size:12.5px;font-weight:500;text-decoration:none}
.rec-company-link:hover{background:var(--accent-soft,#eef3fb)}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans JP",system-ui,sans-serif;
  font-size:13px;line-height:1.75;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"IBM Plex Sans JP",sans-serif;margin:0;font-weight:700}
a{color:var(--accent)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.sub{color:var(--ink-soft);font-size:11.5px}

/* 上部のナビ */
.top{display:flex;align-items:center;gap:22px;padding:0 28px;height:50px;
  border-bottom:1px solid var(--rule)}
.brand{font-family:"IBM Plex Sans JP",sans-serif;font-weight:700;font-size:14px;letter-spacing:-.01em;color:inherit;text-decoration:none}
.brand:hover{text-decoration:none;opacity:.8}
.brand em{font-style:normal;color:var(--accent)}
/* 幅が足りないときはタブを横スクロールで逃がす。はみ出させると通知・名前と重なって読めなくなる */
.tabs-top{display:flex;gap:20px;min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs-top::-webkit-scrollbar{display:none}
/* 幅が足りないときに1文字ずつ縦に折り返さないよう、縮ませず折り返さない */
.tt{color:var(--ink-soft);font-size:13px;text-decoration:none;padding:15px 0;white-space:nowrap;flex:0 0 auto}
.tt.on{color:var(--ink);font-weight:500;box-shadow:inset 0 -2px 0 var(--accent)}
.top .sp{flex:1}
.who{display:flex;align-items:center;gap:10px;color:var(--ink-mid);font-size:12px}
.logout{background:none;border:0;color:var(--ink-soft);font:inherit;font-size:12px;cursor:pointer;padding:0}
.logout:hover{color:var(--ink)}
.flash{padding:10px 28px;font-size:12.5px;border-bottom:1px solid var(--rule)}
.flash.alert{color:var(--stop)}
.flash.notice{color:var(--ok)}
.page{padding:0 28px 80px}

/* 一覧 */
.list-wrap{display:grid;grid-template-columns:176px 1fr;gap:40px;padding-top:26px}
.rail h3{font-size:11px;letter-spacing:.06em;color:var(--ink-soft);font-weight:500;margin:0 0 10px}
.vi{display:flex;align-items:center;gap:8px;padding:4px 0;color:var(--ink-mid);
  font-size:13px;text-decoration:none}
.vi:hover{color:var(--ink)}
.vi.on{color:var(--ink);font-weight:500}
.vi .n{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-soft)}
.main{min-width:0}
.sfield{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--rule);padding:0 0 9px}
.sfield:focus-within{border-bottom-color:var(--accent)}
.sfield input{border:0;outline:0;flex:1;font:inherit;font-size:14px;background:transparent;color:var(--ink)}
.sfield input::placeholder{color:var(--ink-soft)}
.chips{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:12px;min-height:20px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-mid);text-decoration:none}
.chip .x{color:var(--ink-soft)}
.chip:hover .x{color:var(--stop)}
.rhead{display:flex;align-items:baseline;gap:14px;margin:26px 0 10px}
.rcount{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink-mid)}
.rcount b{font-size:20px;color:var(--ink);font-weight:600}
.rcount.range{font-size:12.5px;color:var(--ink-soft)}
.rcount.range a{color:var(--accent);text-decoration:none}
.rhead .sp{flex:1}

/* 表 */
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:860px}
th{font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--ink-soft);
  text-align:left;padding:0 14px 8px 0;border-bottom:1px solid var(--rule);white-space:nowrap}
td{padding:11px 14px 11px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top;font-size:13px}
tbody tr:hover td{background:var(--ground)}
th:last-child,td:last-child{padding-right:0}
.od{font-family:"IBM Plex Mono",monospace;font-size:12.5px}
.nm{display:block}
.state{font-size:12.5px;white-space:nowrap}
.state.ok{color:var(--ok)}
.state.warn{color:var(--warn)}
.state.stop{color:var(--stop)}
.state.mute{color:var(--ink-soft)}
.state.info{color:var(--accent)}
td.num{text-align:right;font-family:"IBM Plex Mono",monospace}
.pager{display:flex;gap:20px;align-items:center;margin-top:22px;font-size:13px}
.pager .cur{color:var(--ink-soft);font-family:"IBM Plex Mono",monospace}

/* 詳細 */
.rec-head{padding-top:22px}
.crumb{font-size:12px;color:var(--ink-soft);margin-bottom:10px}
.crumb a{text-decoration:none}
/* 詳細の左上に出す「一覧へ戻る」。パンくずより先に目に入るよう、押せる形にする */
.crumb .backlink{display:inline-block;margin-right:10px;padding:2px 9px;border:1px solid var(--rule);
  border-radius:999px;color:var(--ink-mid);background:var(--paper)}
.crumb .backlink:hover{border-color:var(--ink-soft);color:var(--ink)}
.rec-title{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.rec-title h2{font-size:23px;line-height:1.4}
.rec-title .sp{flex:1}
.meta{display:flex;gap:20px;flex-wrap:wrap;margin-top:8px;color:var(--ink-mid);font-size:12.5px}
.meta b{color:var(--ink);font-weight:500}
.btn{border:0;background:none;color:var(--accent);font:inherit;font-size:13px;
  padding:6px 0;cursor:pointer;text-decoration:none}
.btn:hover{text-decoration:underline}
.btn.pri{background:var(--accent);color:#fff;padding:7px 18px;border-radius:3px}
.btn.pri:hover{background:#163F86;text-decoration:none}
.btn.quiet{color:var(--ink-mid)}
.tabs{display:flex;gap:20px;align-items:center;margin-top:20px;
  border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:thin;
  position:sticky;top:var(--topbar-h);z-index:60;background:var(--paper)}
.tabs::-webkit-scrollbar{height:4px}
.tabs::-webkit-scrollbar-thumb{background:var(--rule);border-radius:2px}
.tb{padding:9px 0;font-size:13px;color:var(--ink-soft);cursor:pointer;background:none;
  border:0;font-family:inherit;white-space:nowrap;flex:0 0 auto}
.tb.on{color:var(--ink);font-weight:500;box-shadow:inset 0 -2px 0 var(--accent)}
.tb .badge{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-soft);margin-left:5px}
.viewtoggle{display:flex;gap:10px;margin-left:auto;align-items:center;flex:0 0 auto;
  padding-left:20px;position:sticky;right:0;background:var(--paper)}
.vt{border:0;background:none;color:var(--ink-soft);font:inherit;font-size:12px;cursor:pointer;padding:0}
.vt.on{color:var(--ink);font-weight:500}
/* 全項目表示でもタブは上に固定で残し、押すとその区切りへスクロールする。光っているタブ=いま見えている区切り */
body.allmode .tb{opacity:1}
.body{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:48px;padding-top:24px}
.group{margin-bottom:34px}
.gh{margin-bottom:14px}
.gh h3{font-size:13px}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px 32px}
.f{min-width:0}
.f dt,.f label{display:block;font-size:11.5px;color:var(--ink-soft);margin-bottom:1px}
.f dd{margin:0;font-size:13.5px;word-break:break-word}
.f dd.empty{color:var(--ink-soft)}
.f.wide{grid-column:1/-1}
/* 項目が数個しかないまとまり(編集画面のヘッダー・固定表示)。auto-fit だと列が伸びて
   隣どうしの項目が画面の端まで離れるので、列幅は増やさず空きは余らせる */
.fields.fixed-cols{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
/* 次回アクションの「クリア」。入力欄と同じ高さに揃うよう、ラベルの分だけ空けて置く */
.f.na-clear{align-self:start}
.f.na-clear .btn{padding:5px 14px}
.note{color:var(--ink-mid);line-height:1.9;white-space:pre-line}
.side h3{font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--ink-soft);margin:0 0 10px}
.side .blk{margin-bottom:30px}
.side .row{padding:6px 0;border-bottom:1px solid var(--rule-soft);font-size:12.5px}
.side .row:last-child{border-bottom:0}
.side .row .w{color:var(--ink-soft);font-size:11.5px}

/* 編集 */
.f input[type="text"],.f input[type="date"],.f input[type="number"],.f select,.f textarea{
  width:100%;font:inherit;font-size:13.5px;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--rule);padding:2px 0;outline:0}
.f textarea{resize:vertical;min-height:68px;line-height:1.8}
.f input:focus,.f select:focus,.f textarea:focus{border-bottom-color:var(--accent)}
.f select{appearance:none;cursor:pointer}
.editbar{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--rule);
  padding:14px 0;display:flex;align-items:center;gap:18px;margin-top:10px;flex-wrap:wrap}
/* 横にオーダー検索を並べると幅が半分になる。ボタンは縮ませず、入りきらなければ行を折り返す
   (縮ませると「取り消す」が1文字ずつ縦に並ぶ) */
.editbar > .btn,.editbar > input[type=submit]{flex:0 0 auto;white-space:nowrap}
.editbar .sp{flex:1}
.editbar .sub{min-width:0}
.errors{color:var(--stop);font-size:12.5px;margin:12px 0}
.errors ul{margin:4px 0 0;padding-left:18px}

@media (max-width:1080px){
  .list-wrap{grid-template-columns:1fr;gap:24px}
  .page{padding:0 18px 60px}
  .top{padding:0 18px;gap:16px}
  /* 画面を左右に2分割して使うと、詳細は700〜1000px程度になる。ここで右レール
     (p-chat・アクション・リファラル案内・レコード操作・コメント)を下に回すと、
     タブの中身の何千px下に行って見つからなくなる。幅を詰めてでも右に残す */
  .body{grid-template-columns:minmax(0,1fr) 210px;gap:24px}
}
/* 2列にすると本文が狭すぎる幅では1列にするが、レールは本文の上に出す(下だと届かない)。
   カードは横に並べて、本文が押し下がる分を抑える */
@media (max-width:820px){
  .body{grid-template-columns:minmax(0,1fr);gap:0}
  .body > .side{order:-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:0 16px;align-items:start;position:static;max-height:none;overflow:visible}
  .side-switch{grid-column:1/-1}
}

/* 絞り込みの追加 */
.addfilter{display:inline-flex;gap:8px;align-items:center}
.addfilter select,.addfilter input{font:inherit;font-size:12.5px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule);padding:2px 0;outline:0}
.addfilter select{max-width:170px}
.addfilter input{width:110px}
.addfilter select:focus,.addfilter input:focus{border-bottom-color:var(--accent)}
.f .ro{font-size:13.5px;color:var(--ink-mid);padding:2px 0;border-bottom:1px solid var(--rule-soft)}

/* ヘッダーに出す識別用の項目 */
.headfields{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:14px}
.hf{display:flex;gap:8px;align-items:baseline;font-size:12.5px;min-width:0}
.hf .k{color:var(--ink-soft);font-size:11.5px;white-space:nowrap}
.hf .v{color:var(--ink)}

/* サブテーブルのキー操作の案内 */
.shortcut-note{margin-bottom:14px;font-size:12.5px;color:var(--ink-mid)}
.shortcut-note .t{display:block;font-size:11px;color:var(--ink-soft);margin-bottom:4px}
.shortcut-note .row{padding:2px 0;border:0}
.shortcut-note .w{display:inline-block;min-width:18px;font-family:"IBM Plex Mono",monospace;
  color:var(--ink);font-weight:600}
/* タブの上に出すショートカットの案内 */
.shortcut-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:14px;
  font-size:12px;color:var(--ink-soft)}
.shortcut-bar .t{font-size:11px;letter-spacing:.04em}
.shortcut-bar .k{white-space:nowrap}
/* 使えないショートカット(色の付いた営業所の P キー)。薄くして線を引き、理由は title で出す */
.shortcut-bar .k.off{opacity:.55;text-decoration:line-through;cursor:help}
.shortcut-bar kbd{display:inline-block;min-width:18px;padding:0 5px;border:1px solid var(--rule);border-bottom-width:2px;
  border-radius:4px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;color:var(--ink);
  text-align:center;line-height:1.5;background:var(--paper)}
/* 一覧のツールボタン(絞り込む・並び替え・表示列)。効いているものは塗りつぶし */
.tools{display:inline-flex;gap:6px;flex-wrap:wrap}
.tool{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--rule);border-radius:999px;
  background:var(--paper);color:var(--ink-mid);font:inherit;font-size:12.5px;cursor:pointer}
.tool:hover{border-color:var(--accent);color:var(--accent)}
.tool.on{background:var(--accent);border-color:var(--accent);color:#fff}
.tool .n{display:inline-block;padding:0 6px;border-radius:999px;font-size:11px;background:rgba(255,255,255,.22)}
.tool:not(.on) .n{background:var(--rule-soft,#eef1f5);color:var(--ink-soft)}
.fd-flash{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px;transition:outline-color .8s}
/* 絞り込みのユーザー項目: コード/グループ名のチップ */
.fd-users{display:flex;flex-direction:column;gap:4px;min-width:240px}
.fd-users-line{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.fd-users-line .fd-user-input{flex:1;min-width:150px}
.fd-chips{display:contents}
.fd-user-warn:empty{display:none}
.fd-user-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:var(--rule-soft,#eef1f5);font-size:12.5px;font-family:"IBM Plex Mono",monospace}
.fd-chip-x{border:0;background:none;color:var(--ink-soft);cursor:pointer;font-size:13px;padding:0 2px}
.fd-me-btn{align-self:flex-start}
/* 日付条件の選択(日付を指定・今日から・今週…) */
.fd-date{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.fd-offset{display:inline-flex;gap:4px;align-items:center}
/* オーダーからの逆マッチ(一覧のツールバー) */
.om-form{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;padding:4px 8px;border:1px dashed var(--rule);border-radius:8px}
/* 複数行のメモは改行をそのまま出す */
.f dd.pre{white-space:pre-wrap;line-height:1.7}
.fields.ungrouped{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule-soft)}
/* 畳んだセクションの中の元の区分け */
.subgroup{margin-bottom:26px}
.subgroup h4{font-family:"IBM Plex Sans JP",sans-serif;font-size:12px;font-weight:700;
  color:var(--ink-mid);margin:0 0 10px;padding-bottom:5px;border-bottom:1px solid var(--rule-soft)}
/* 連絡サブテーブルの編集 */
.contact-edit{width:100%;min-width:0;margin-bottom:12px}
.contact-edit th{font-size:11px;padding:0 10px 6px 0}
.contact-edit td{padding:5px 10px 5px 0;border-bottom:1px solid var(--rule-soft)}
.contact-edit input{width:100%;font:inherit;font-size:13px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule);padding:2px 0;outline:0}
.contact-edit input:focus{border-bottom-color:var(--accent)}

/* 絞り込みのダイアログ */
dialog[data-filter-dialog]{border:0;border-radius:6px;padding:0;width:min(920px,94vw);
  box-shadow:0 8px 40px rgba(0,0,0,.18)}
dialog[data-filter-dialog]::backdrop{background:rgba(20,25,31,.35)}
/* 依頼系のポップアップ(提案先探索・新規CL開拓)は入力欄が読める幅にする */
dialog[data-proposal-dialog],dialog[data-find-cl-dialog]{border:0;border-radius:10px;padding:0;width:min(760px,92vw)}
dialog[data-proposal-dialog] .fields textarea,dialog[data-proposal-dialog] .fields input[type=text]{width:100%;box-sizing:border-box}
dialog[data-proposal-dialog] textarea{min-height:140px}
dialog[data-proposal-dialog]::backdrop,dialog[data-find-cl-dialog]::backdrop{background:rgba(20,25,31,.35)}
.fd-head{display:flex;align-items:center;padding:18px 24px 0}
.fd-head h2{font-size:18px;flex:1}
.fd-close{border:0;background:none;font-size:20px;color:var(--ink-soft);cursor:pointer}
.fd-section{padding:16px 24px 8px}
.fd-section h3{font-size:11.5px;color:var(--ink-soft);font-weight:500;margin-bottom:10px}
.fd-row{display:flex;gap:10px;align-items:center;margin-bottom:9px;flex-wrap:wrap}
.fd-row select,.fd-row input[type=text],.fd-row input[type=number],.fd-row input[type=date]{
  font:inherit;font-size:12.5px;color:var(--ink);border:1px solid var(--rule);
  border-radius:4px;padding:5px 8px;background:var(--paper)}
.fd-field{max-width:200px}
.fd-op{max-width:190px}
.fd-val{display:inline-flex;gap:8px;align-items:center}
.fd-today{font-size:12px;color:var(--ink-mid);display:inline-flex;gap:4px;align-items:center}
.fd-del{border:0;background:var(--ground);color:var(--ink-soft);width:22px;height:22px;
  border-radius:50%;cursor:pointer;font-size:13px;line-height:1}
.fd-del:hover{color:var(--stop)}
.fd-logic{display:flex;gap:22px;margin-top:12px;font-size:12.5px;color:var(--ink-mid)}
.fd-actions{display:flex;gap:14px;align-items:center;padding:16px 24px 20px;
  border-top:1px solid var(--rule);margin-top:10px}
.fd-actions .sp{flex:1}
.logic-word{font-size:11px;color:var(--ink-soft)}
tr.rowlink{cursor:pointer}
tr.rowlink:hover td{background:var(--accent-soft,#eef3fb)}
tr.rowlink:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
tr.rowlink .row-title{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
tr.rowlink:hover .row-title{color:var(--accent);border-bottom-color:var(--accent)}

/* 一覧で自分が担当の行を見つけやすくする。ユーザー項目に入っている自分の名前だけ太く大きく出す */
.cell b.me,td b.me,.f dd b.me,.hf .v b.me{font-weight:700;font-size:1.08em;color:var(--ink)}
.copybtn{border:0;background:var(--ground);color:var(--accent);font-size:11px;
  border-radius:3px;padding:1px 8px;cursor:pointer;margin-left:4px}
.copybtn:hover{background:var(--rule-soft)}
/* コピーボタンの隣に出す、スカウトページのURLそのもの。長いので折り返して全部見せる */
.scout-url{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-mid);
  word-break:break-all;align-self:center}
.scout-url:hover{color:var(--accent)}
.tt.disabled{opacity:.4;cursor:default}

/* 保存ビューのレール */
.vi-list{display:flex;flex-direction:column}
.vi-row{display:flex;align-items:center;gap:4px}
/* ドラッグで並び替えるための持ち手。行に触れたときだけ見せる(ふだんは名前だけを読ませる) */
.vi-grip{flex:0 0 auto;width:10px;font-size:11px;line-height:1;color:transparent;cursor:grab;user-select:none}
.vi-row:hover .vi-grip{color:var(--ink-soft)}
.vi-row.dragging{opacity:.45;cursor:grabbing}
.vi-row .vi{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vi-del{border:0;background:none;color:var(--ink-soft);cursor:pointer;font-size:11px;padding:0 2px}
.vi-del:hover{color:var(--stop)}

/* グラフ */
.chart{margin:22px 0 6px;max-width:720px}
.bar-row{display:flex;align-items:center;gap:10px;padding:3px 0;font-size:12.5px}
.bar-label{width:180px;text-align:right;color:var(--ink-mid);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.bar-track{flex:1;background:var(--rule-soft);border-radius:2px;height:14px}
.bar{display:block;height:100%;background:var(--accent);border-radius:2px;min-width:2px}
.bar-n{width:70px;text-align:right}
.fd-colsearch{font:inherit;font-size:12.5px;border:0;border-bottom:1px solid var(--rule);
  padding:4px 0;outline:0;width:220px;margin-bottom:8px}
.fd-colsearch:focus{border-bottom-color:var(--accent)}
.fd-columns{max-height:180px;overflow-y:auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2px 14px}
.fd-col{font-size:12px;color:var(--ink-mid);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;cursor:pointer}
/* 選んだ列の並び。掴んで動かすと、一覧に出る順(左から)が変わる */
.fd-order{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;padding:8px;
  border:1px dashed var(--rule);border-radius:8px;background:var(--ground);min-height:38px}
.fd-ord{display:inline-flex;align-items:center;gap:5px;padding:3px 6px 3px 4px;font-size:12px;
  background:var(--paper);border:1px solid var(--rule);border-radius:6px;cursor:grab;user-select:none}
.fd-ord.dragging{opacity:.45;cursor:grabbing}
.fd-ord-grip{color:var(--ink-soft);font-size:11px;letter-spacing:-1px}
.fd-ord-x{border:0;background:none;color:var(--ink-soft);font:inherit;font-size:13px;
  line-height:1;cursor:pointer;padding:0 1px}
.fd-ord-x:hover{color:var(--stop)}
/* 一覧から直せるセル。ペンを出して、押せる(直せる)ことを見て分かるようにする。
   ふだんは薄く、行に乗せると濃くなる。ペンは1クリック、セルはダブルクリックで開く */
.cell-wrap{display:flex;align-items:center;gap:4px;min-width:0}
.cell-wrap>.cell{min-width:0}
.cell-edit{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;padding:0;border:0;border-radius:4px;background:none;
  color:var(--ink-soft);opacity:.4;cursor:pointer}
tr:hover .cell-edit{opacity:.85}
.cell-edit:hover,.cell-edit:focus-visible{opacity:1;color:var(--accent);background:var(--accent-soft)}
/* 地図のピンの凡例。色だけ出ていても何色が何なのか分からないので添える */
.odmap-legend{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:11.5px;color:var(--ink-mid)}
.odmap-legend span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.odmap-legend i{width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,.18)}
/* 一覧の色の凡例(件数の横。shared/_tone_legend)。上の地図の凡例と同じ見た目で、色見本と短い言葉を1行に並べる。
   行の色の見本は、一覧の行の色(tbody tr.row-* td)と同じ宣言で塗る。詳しい説明は title(マウスを乗せると出る) */
.tone-legend{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center;font-size:11.5px;color:var(--ink-mid)}
.tone-legend .tl-g{display:inline-flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.tone-legend .tl-g b{font-weight:600;color:var(--ink-soft)}
.tone-legend .tl-i{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;cursor:help}
.tone-legend i{width:14px;height:10px;border-radius:2px;border:1px solid rgba(0,0,0,.18)}
.tone-legend i.state{width:16px;border-radius:999px;border-color:currentColor}
.comment{padding:8px 0;border-bottom:1px solid var(--rule-soft);font-size:12.5px}
.comment .w{color:var(--ink-soft);font-size:11px}
.comment .b{white-space:pre-wrap;line-height:1.7}
/* コメントの @メンション。書いた人・呼ばれた人の両方が一目で分かるように色を付ける */
.comment .mention{color:var(--accent);background:var(--accent-soft);border-radius:3px;
  padding:0 3px;font-weight:600}
.cmt-box{position:relative}
.cmt-input{width:100%;font:inherit;font-size:12.5px;border:1px solid var(--rule);
  border-radius:4px;padding:6px 8px}
/* 「@」で出る担当者の候補。入力欄の真下に重ねる */
.cmt-suggest{position:absolute;left:0;right:0;top:100%;z-index:80;margin-top:2px;
  background:var(--paper);border:1px solid var(--rule);border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:240px;overflow-y:auto;padding:4px}
.cmt-sg{display:block;width:100%;text-align:left;border:0;background:none;font:inherit;
  font-size:12.5px;padding:5px 8px;cursor:pointer;border-radius:4px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.cmt-sg:hover,.cmt-sg.on{background:var(--accent-soft);color:var(--accent)}
/* 同姓が多いので、候補の名前の右に所属を薄く添える */
.cmt-sg-h{margin-left:6px;font-size:11px;color:var(--ink-soft)}
.warnbar{margin-top:12px;padding:8px 12px;font-size:12.5px;color:var(--warn);
  border-left:3px solid var(--warn);background:var(--ground)}
/* 架電・連絡NGなど、行動を止める警告は赤で強く出す */
.warnbar.stop{color:var(--stop,#B91C1C);border-left-width:5px;
  border-left-color:var(--stop,#B91C1C);background:rgba(185,28,28,.06);font-size:13px}
/* 営業所の次回アクションが今日以降に入っている知らせ。黄色い地の上でも目立つよう濃い黄色にする */
.warnbar.ahead{color:#6B4E00;border-left-width:5px;border-left-color:#C99700;background:#FFE58F;font-size:13px}
/* 営業所の商談ステータスが契約を含む知らせ(地のオレンジに合わせる) */
.warnbar.contract{color:#8A4300;border-left-width:5px;border-left-color:#E07B1F;background:#FFD2A6;font-size:13px}
.req{color:var(--warn);font-weight:600}
/* 項目名の横に出す「必須」。値そのものと見間違えないよう、小さな枠付きの札にする */
.f dt .req,.f label .req,.hf .k .req{font-size:10px;padding:0 3px;border:1px solid var(--warn);border-radius:3px;
  letter-spacing:.02em;vertical-align:1px}
/* 項目名の横に出す「任意」。必須(.req)と対で、書かなくても送れる項目だと分かるようにする */
.f dt .opt-tag,.f label .opt-tag{font-size:10px;font-weight:600;padding:0 3px;border:1px solid var(--rule);
  border-radius:3px;color:var(--ink-mid);letter-spacing:.02em;vertical-align:1px}
/* 必須なのに入っていない値(詳細画面)。「未入力」を薄い灰色で流さず、赤で出す */
.f dd.req-missing,.hf .v.req-missing,.pinfields .hf .v.req-missing{color:var(--stop);font-weight:600}
/* タブの見出しに出す「必須」。中を開かなくても、必ず入れる項目があると分かるようにする。
   まだ空が残っているまとまりは赤(.miss) */
.tb .req{font-size:10px;font-weight:600;padding:0 3px;margin-left:4px;border:1px solid var(--warn);
  border-radius:3px;vertical-align:1px}
.tb .req.miss{color:var(--stop);border-color:var(--stop)}
.cklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 16px;
  max-height:260px;overflow-y:auto;padding:8px 0;border-top:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);font-size:13px}
.cklist label{display:flex;gap:6px;align-items:center;color:var(--ink)}
/* 連動プルダウンで、上の選択(領域・チーム)の範囲に居なくなった選択肢。
   名前での絞り込みが inline の display を書き戻すので、!important で消したままにする */
.cklist label.opt-off{display:none!important}
.localbadge{font-size:11px;padding:2px 8px;color:var(--warn);border:1px solid var(--warn);
  white-space:nowrap}
.fields.stack{grid-template-columns:1fr}
.pinned{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:14px 32px;align-items:start}
.pinned .pf{border-left:3px solid var(--rule-soft);padding-left:12px}
.pinned .pf h4{margin:0 0 4px;font-size:12px;color:var(--ink-soft);font-weight:500}
.pinned .pf pre{margin:0;white-space:pre-wrap;font:inherit;font-size:13px}
.fd-multi{display:inline-block;vertical-align:top;min-width:260px}
.fd-multi-search{width:100%;box-sizing:border-box;margin-bottom:4px}
.fd-multi-list{max-height:170px;overflow-y:auto;border:1px solid var(--rule-soft);
  padding:6px 8px;display:grid;gap:2px;font-size:12.5px}
.fd-multi-list .fd-opt{display:flex;gap:6px;align-items:center}
.userlist{display:grid;gap:0}
.urow{display:grid;grid-template-columns:160px 1fr 1fr 70px auto;gap:10px;align-items:center;
  padding:6px 0;border-bottom:1px solid var(--rule-soft);margin:0}
.urow.uhead{font-size:11px;letter-spacing:.06em;color:var(--ink-soft);border-bottom:1px solid var(--rule)}
.u-disable-form{display:inline;margin:-30px 0 0 0;text-align:right}
.u-disable{background:none;border:none;color:var(--ink-soft);font-size:11px;cursor:pointer;
  text-decoration:underline;padding:0}
.sgrid{display:grid;gap:0;margin-top:6px}
.scard{padding:14px 0;border-bottom:1px solid var(--rule-soft)}
.sc-head{display:flex;gap:10px;align-items:baseline}
.sc-title{font-size:14.5px;font-weight:600}
.sc-done{font-size:11px;color:var(--ok,#1a7f4b);white-space:nowrap}
.sc-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-mid);margin-top:3px}
.sc-actions{margin-top:8px}
.sform{margin-top:14px;border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);padding:10px 0}
.sform>summary{cursor:pointer;font-size:13px;color:var(--ink-mid)}
.mselect{position:relative}
.mselect>summary{cursor:pointer;font-size:12.5px;border:1px solid var(--rule);padding:4px 8px;
  list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mselect[open]>.cklist{position:absolute;z-index:30;background:var(--paper,#fff);
  border:1px solid var(--rule);padding:8px;min-width:240px;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.sug-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px;margin-top:8px}
.sug-list{min-width:0;overflow-x:auto}
@media (max-width:1100px){.sug-layout{grid-template-columns:1fr}}
.sug-table{width:100%;border-collapse:collapse;font-size:12.5px}
.sug-table th{text-align:left;font-size:11px;color:var(--ink-soft);font-weight:500;
  padding:4px 10px 4px 0;border-bottom:1px solid var(--rule)}
.sug-table td{padding:5px 10px 5px 0;border-bottom:1px solid var(--rule-soft);white-space:nowrap;vertical-align:middle}
/* 名前の列も上限を決める。他社求人の求人タイトルのように長いものがあると、
   この列だけで表が横に広がっていた(ユーザー指示 2026-09-17) */
.sug-table td.sug-name{white-space:normal;min-width:220px;max-width:360px}
/* オーダー検索の結果。kintone と同じ項目を全部出すと横に長いので、
   表は中身の幅まで伸ばし、はみ出した分は .sug-list の横スクロールで見る。
   1列が長くなりすぎないよう頭出しで切り、全体は title(マウスを乗せると出る)で読む */
.sug-table.sug-wide{width:max-content;min-width:100%}
.sug-table.sug-wide td{max-width:220px;overflow:hidden;text-overflow:ellipsis}
/* 折り返して読ませる列(AIのコメントなど)は、横に長い一覧でも切らずに出す */
.sug-table.sug-wide td.wrapcell,.sug-table.sug-wide td.wrapcell-w{overflow:visible;text-overflow:clip}
.sug-table.sug-wide td.wrapcell{max-width:260px}
.sug-table.sug-wide td.wrapcell-w{max-width:420px}
/* 「見つかりませんでした」のような、表いっぱいに出す行は切らない */
.sug-table.sug-wide td[colspan]{max-width:none;overflow:visible}
.sug-table td.num{text-align:right}
/* 項目名を押すと昇順・降順に並べ替える。いま何で並んでいるかは▲▼で示す */
.sug-table th[data-sort-index]{cursor:pointer;user-select:none}
.sug-table th[data-sort-index]:hover{color:var(--ink)}
.sug-table th[data-dir="asc"]::after{content:"▲";margin-left:3px}
.sug-table th[data-dir="desc"]::after{content:"▼";margin-left:3px}
.sug-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 8px}
.sug-tools input[type=search]{width:260px;max-width:100%}
.sug-table td.sug-name .sub{margin-left:6px;font-size:11px}
.sug-child td{background:var(--ground,#fafafa)}
.sug-exp{width:34px}
/* 提案(と一括選択)は表の左端に貼り付けて、横にスクロールしても押せるようにする
   (右端に置いていたら、右まで動かさないと押せなかった。ユーザー指示 2026-09-16)。
   行の色(--pin-soft)は透明のことがあるので、下に地色を敷いてから重ねる(下の列が透けないように) */
.sug-table th.sug-fix,.sug-table td.sug-fix{position:sticky;z-index:2;background:var(--paper)}
.sug-table th.sug-fix-1,.sug-table td.sug-fix-1{left:0;width:30px;padding-right:6px}
.sug-table th.sug-fix-2,.sug-table td.sug-fix-2{left:30px}
.sug-table tr.sug-row td.sug-fix,.sug-table tr.pr-row td.sug-fix{
  background:linear-gradient(var(--pin-soft,transparent),var(--pin-soft,transparent)),var(--paper)}
.sug-toggle{border:1px solid var(--rule);background:none;cursor:pointer;font-size:11px;padding:1px 6px}
/* 一覧の「提案」。行に色が付いたぶん、文字だけだと押せることに気づけない。
   枠の付いた丸ボタンにして、押すと何が起きるボタンなのかを見て分かるようにする */
.btn.sug-btn{font-size:11.5px;font-weight:600;padding:3px 14px;white-space:nowrap;
  color:var(--accent);background:var(--paper,#fff);
  border:1px solid var(--accent);border-radius:999px}
.btn.sug-btn:hover{background:var(--accent);color:#fff;text-decoration:none}
.btn.sug-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sug-map{position:sticky;top:12px;align-self:start}
#odmap{width:100%;height:70vh;min-height:420px;border:1px solid var(--rule-soft)}
.sug-map-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.sug-map-head .btn,.sug-map-head .icon-btn{margin-left:auto}
/* 「広げる ⇄ 戻す」の記号ボタン。文字(拡大・全画面)だと幅を取って「拡 / 大」と折り返す */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:30px;height:30px;padding:0;line-height:0;cursor:pointer;
  border:1px solid var(--rule);border-radius:6px;background:var(--paper,#fff);color:var(--ink-mid)}
.icon-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft,#eef3fb)}
.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sug-map.full{position:fixed;inset:0;z-index:200;background:var(--paper,#fff);padding:14px;margin:0}
.sug-map.full #odmap{height:calc(100vh - 60px);min-height:0}
/* 1列になる幅(分割表示の中を含む)では、地図を一覧の上に出す。
   下にあると一覧を最後まで送らないと地図に辿り着けない */
@media (max-width:1100px){
  .sug-map:not(.full){order:-1;position:static}
  #odmap{height:44vh;min-height:280px}
}
/* 行ごとの色。地図のピンと同じ色を左の帯と薄い地色にして、一覧と地図を見比べやすくする */
.sug-table tr.sug-row td{background:var(--pin-soft,transparent)}
.sug-table tr.sug-row td:first-child{box-shadow:inset 4px 0 0 var(--pin,transparent)}
.sug-table tr.sug-row:hover td{background:var(--pin-soft,transparent);box-shadow:inset 0 0 0 999px rgba(0,0,0,.02)}
.sug-table tr.sug-row:hover td:first-child{box-shadow:inset 4px 0 0 var(--pin,transparent),inset 0 0 0 999px rgba(0,0,0,.02)}
/* 提案済みの行は、色より「もう出した」ことが分かるほうが先 */
.sug-table tr.sug-row.sug-proposed td,.sug-table tr.sug-row.sc-proposed td{background:#f6f7f9}

/* 合うオーダーが無いときの次の一手。やりたいこと(ニーズ)ごとに分けて出す */
.need-cards{margin:14px 0 4px}
.need-h{margin:0 0 8px;font-size:13px;color:var(--ink-mid);font-weight:600}
.need-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.need{border:1px solid var(--rule-soft);border-radius:8px;padding:12px 14px;background:var(--ground,#fafafa)}
.need-t{font-size:13px;font-weight:600;margin-bottom:4px}
.need .sub{margin:0 0 10px}
/* カードの中では押せることが分かりにくいので、枠を付ける(.btn は既定では文字だけ) */
.need .btn{display:inline-block;border:1px solid var(--accent-line,#b9c8e6);border-radius:6px;
  padding:6px 14px;background:var(--paper,#fff)}
.need .btn:hover{background:var(--accent-soft,#eef3fb);text-decoration:none}
.odpin{background:none;border:none}
/* 一覧の行に付ける、地図のピンと同じ色・文字の丸(odmap-legend と対応する) */
.odchip{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:18px;height:18px;border-radius:50%;color:#fff;font-size:10.5px;font-weight:700;
  line-height:1;border:1px solid rgba(0,0,0,.18);vertical-align:middle}
.odpin-body{width:34px;height:34px;border-radius:50%;color:#fff;font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.odpin-tail{width:0;height:0;margin:0 auto;border-left:7px solid transparent;
  border-right:7px solid transparent;border-top:10px solid #FF914D}
/* 入れた住所の中心のピン。文字は入れず、白い枠と中の白い丸で「ここ」を指す(ユーザー指示 2026-09-17) */
.odpin-center .odpin-body{border:2.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.odpin-center .odpin-body::after{content:"";width:9px;height:9px;border-radius:50%;background:#fff}
.odmap-legend i.odlegend-center{box-shadow:inset 0 0 0 2px #fff}
/* 白いピン(その他のOD)。地図の地色に溶けないよう、枠を付ける */
.odpin-body.pale{border:1px solid #9AA1AB;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.odpop-mini.pale{border:1px solid rgba(0,0,0,.25)}
.odpop{display:grid;gap:6px;font-size:12.5px;max-width:290px}
.odpop-desc{margin:0;white-space:pre-wrap;font:inherit;font-size:11.5px;max-height:180px;
  overflow-y:auto;border-top:1px solid #eee;padding-top:6px}
.odpop-item{display:flex;gap:6px;align-items:center;border:none;background:none;cursor:pointer;
  text-align:left;font-size:12px;padding:3px 0;width:100%}
.odpop-mini{flex:0 0 20px;width:20px;height:20px;border-radius:50%;color:#fff;font-size:11px;
  display:flex;align-items:center;justify-content:center}
.listtop{display:flex;gap:16px;align-items:center}
.listtop-search{flex:1;min-width:0}
.btn.create{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff;
  padding:9px 20px;border-radius:3px;font-size:13px;font-weight:500;white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.08)}
.btn.create .plus{font-size:15px;line-height:1;font-weight:400}
.btn.create:hover{background:#163F86;text-decoration:none}
tr.row-grey td{background:#ececec;color:var(--ink-soft)}
/* 配信していないオーダーの行(関連レコード・提案先探索の結果)。一覧の行と同じ灰色にそろえる */
tr.row-stopped td{background:var(--ground);color:var(--ink-soft)}
tr.row-stopped a{color:var(--ink-soft)}
/* 表の中に混ざるオーダー名(CL担当者・マッチングサブテーブル)は文字だけ灰色にする */
.od-stopped,.od-stopped a{color:var(--ink-soft)}
.st-filter{margin-bottom:6px}
/* サブテーブル(架電メモなど)の改行を含む値。1行に潰さず、改行のまま読めるようにする */
td.st-pre{white-space:pre-wrap;line-height:1.7;min-width:360px;max-width:640px}
/* メモが主役のサブテーブル(事業者の架電メモ)。表だとメモが細い1列に押し込まれて
   1件読むのに横スクロールが要るので、見出し1行 + メモ全幅のまとまりで出す */
.memolist{display:grid;gap:10px}
.memorow{border:1px solid var(--rule-soft);border-radius:6px;padding:10px 14px;background:var(--paper)}
.mr-head{display:flex;flex-wrap:wrap;gap:2px 16px;align-items:baseline;
  padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--rule-soft)}
.mr-head .mr-k{color:var(--ink-soft);font-size:11px;margin-right:6px}
.mr-head .mr-v{font-size:13px}
.mr-body{font-size:13.5px;max-width:78ch}
/* 長いメモの「続きを読む」。開くと残りが冒頭の続きとして出る */
.mr-more>summary{cursor:pointer;list-style:none;font-size:12.5px;color:var(--accent);margin-top:4px}
.mr-more>summary::-webkit-details-marker{display:none}
.mr-more[open] .mr-more-open,.mr-more:not([open]) .mr-more-close{display:none}
.mr-more[open]>summary{margin-bottom:4px}
.relrow-grey{color:var(--ink-soft)}
/* 成約EU一覧。列が多いので横スクロールにして、列は潰さない */
.hires-table{font-size:12px;border-collapse:collapse;width:max-content;min-width:100%}
.hires-table th{text-align:left;font-size:10.5px;color:var(--ink-soft);font-weight:500;
  padding:2px 8px 2px 0;border-bottom:1px solid var(--rule)}
.hires-table td{padding:3px 8px 3px 0;border-bottom:1px solid var(--rule-soft);white-space:nowrap}
label.opt{color:#2E6BD6}
.hintq{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
  margin-left:5px;border:1px solid var(--rule);border-radius:50%;font-size:10px;
  color:var(--ink-soft);cursor:help;vertical-align:1px}
.odpin-body.eu-pin{background:#1E3A8A;font-size:12px;width:44px;height:44px;border:3px solid #fff;box-shadow:0 0 0 3px #1E3A8A,0 4px 12px rgba(0,0,0,.35)}
.odpin.eu-marker{text-align:center}
.odpin.eu-marker .odpin-tail{border-top-color:#1E3A8A;border-left-width:9px;border-right-width:9px;border-top-width:12px}
.eu-marker-label{display:inline-block;margin-top:2px;padding:1px 6px;border-radius:9px;background:#1E3A8A;color:#fff;font-size:11px;font-weight:700;white-space:nowrap}
.odpop-propose{font-size:12px;padding:4px 12px;border-radius:3px}
/* オーダーマップ。地図の上に凡例と「全画面にする」を並べ、全画面では画面いっぱいに広げる */
.odmap-box{margin-top:12px}
.odmap-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.odmap-head .icon-btn{margin-left:auto}
.odmap-box #odmap{width:100%;height:min(62vh,640px);min-height:420px;border:1px solid var(--rule-soft)}
.odmap-box.full{position:fixed;inset:0;z-index:200;background:var(--paper,#fff);padding:14px;margin:0;
  display:flex;flex-direction:column}
.odmap-box.full #odmap{flex:1;height:auto;min-height:0}
.sform-h{margin:16px 0 2px;font-size:12px;letter-spacing:.06em;color:var(--ink-soft);font-weight:500}
.tpl-bar{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.tpl-bar select{max-width:220px}
.u-table{width:100%;border-collapse:collapse;font-size:13px}
.u-table th{text-align:left;font-size:11px;letter-spacing:.06em;color:var(--ink-soft);
  font-weight:500;padding:6px 14px 6px 0;border-bottom:1px solid var(--rule)}
.u-table td{padding:7px 14px 7px 0;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
/* グループ一覧: 幅いっぱいに固定し、メンバーは折り返す。操作はグループ名の下 */
.g-table{table-layout:fixed}
.g-table td{vertical-align:top;padding-top:12px;padding-bottom:12px}
.g-head .g-name{font-weight:600;word-break:break-all}
.g-head .g-add{display:flex;gap:6px;margin-top:8px}
.g-head .g-del{border:0;background:none;color:var(--ink-soft);font-size:11.5px;padding:0;margin-top:6px;cursor:pointer}
.g-head .g-del:hover{color:var(--stop);text-decoration:underline}
.g-members{white-space:normal;line-height:1.9}
.g-members .chip{margin:0 10px 2px 0}
.g-more-btn{border:0;background:none;color:var(--accent);font-size:12px;cursor:pointer;padding:0 4px}
.g-more-btn:hover{text-decoration:underline}
.u-inactive td{color:var(--ink-soft)}
.u-editrow td{background:var(--ground);padding:12px 14px}
.u-editform{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.ms{display:flex;flex-wrap:wrap;gap:5px;align-items:center;border-bottom:1px solid var(--rule);
  padding:2px 0;min-height:26px}
.ms-chip{display:inline-flex;gap:4px;align-items:center;font-size:12px;background:var(--ground);
  border:1px solid var(--rule);padding:1px 6px;white-space:nowrap}
.ms-del{border:0;background:none;cursor:pointer;color:var(--ink-soft);font-size:12px;padding:0}
.ms-input{border:0;outline:0;flex:1;min-width:120px;font:inherit;background:transparent;color:var(--ink)}
.ms>.ms-input{flex-basis:100%}
/* 横並び指定されたフィールドの組(EU情報メモ×案件クローズメモ) */
.pairwrap{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:18px 32px}
.pairwrap>.f{grid-column:auto}
@media (max-width:760px){.pairwrap{grid-template-columns:1fr}}
input.bad-choice{border-bottom-color:var(--warn);color:var(--warn)}
.mselect.wideopt>summary{white-space:normal;line-height:1.5;min-height:24px}
.lk{display:flex;gap:8px;align-items:center}
.lk input{flex:0 0 160px}
.urlwrap{display:flex;gap:8px;align-items:center}
.urlwrap input{flex:1 1 auto;min-width:0}
.urlwrap .url-open{font-size:11.5px;white-space:nowrap}
.vi-import{margin:14px 0}
.vi-import>summary{font-size:11px;letter-spacing:.06em;color:var(--ink-soft);cursor:pointer}
.vi-import-list{max-height:320px;overflow-y:auto}
.att-row{display:flex;gap:10px;align-items:center;padding:2px 0}
.att-form{display:flex;gap:8px;align-items:center;margin-top:4px}

/* ダッシュボード */
.rt-counters{display:flex;gap:26px;flex-wrap:wrap;margin-top:4px}
/* 提案・面接設定の「今日 / 今月」。日ごとの棒グラフは細かすぎて読めなかったので、数字の表にした */
.mt-table{border-collapse:collapse;margin-top:8px;font-size:13px}
.mt-table th,.mt-table td{padding:6px 18px 6px 0;text-align:left;white-space:nowrap}
.mt-table thead th{font-size:11.5px;color:var(--ink-soft);font-weight:500;border-bottom:1px solid var(--rule)}
.mt-table tbody th{font-size:11.5px;color:var(--ink-soft);font-weight:600;border-bottom:1px solid var(--rule-soft)}
.mt-table tbody td{font-size:22px;font-weight:600;border-bottom:1px solid var(--rule-soft)}
/* 提案・打診など時刻を持たない指標は、時間帯の折れ線ではなく今日の件数の横棒で出す */
.rt-bars{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.rt-bar{display:flex;align-items:center;gap:10px;font-size:12.5px}
.rt-bar-k{flex:0 0 160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-bar-t{flex:1 1 auto;height:12px;background:var(--ground);border-radius:6px;overflow:hidden}
.rt-bar-t i{display:block;height:100%;border-radius:6px}
.rt-bar b{flex:0 0 64px;text-align:right}
.rt-c .k{display:block;font-size:11.5px;color:var(--ink-soft)}
.rt-c b{font-size:26px;font-weight:600}
.rt-key{color:var(--c)}
.dash-table{border-collapse:collapse;font-size:12.5px;min-width:100%}
.dash-table th,.dash-table td{border:1px solid var(--rule-soft);padding:5px 9px;text-align:right;white-space:nowrap}
.dash-table thead th{position:sticky;top:0;background:var(--paper,#fff);z-index:2;font-weight:600}
.dash-table .dt-label{position:sticky;left:0;background:var(--paper,#fff);text-align:left;z-index:1;font-weight:600}
.dash-table thead .dt-label{z-index:3}
.dash-table .dt-all{background:var(--ground);font-weight:600}
.dash-table .dt-rate td,.dash-table .dt-rate th{color:var(--ink-soft)}
/* ヨミ表の案件一覧。表の中でスクロールさせず全件を並べるので、
   1行おきの色分けと担当者が変わる位置の区切り線で行を追えるようにする */
.case-table tbody tr:nth-child(even) td,.case-table tbody tr:nth-child(even) th{background:var(--ground)}
.case-table tbody tr:hover td,.case-table tbody tr:hover th{background:var(--accent-soft,#eef3fb)}
.case-table tbody tr.grp td,.case-table tbody tr.grp th{border-top:2px solid var(--rule)}
/* 見出しの寄せは本文と同じにする。右寄せは金額(.num)だけで、あとは左(ユーザー指示 2026-09-16) */
.case-table th,.case-table td{text-align:left;white-space:normal;vertical-align:top}
.case-table .num{text-align:right;white-space:nowrap}
.case-table .nw{white-space:nowrap}
/* 長い列(オーダー・職種カテゴリ・EU職種・NG理由)は幅を決めて折り返し、横スクロールを減らす。
   オーダー名は「_」区切りで単語の切れ目が無いので anywhere で折る */
.case-table .cw{max-width:150px;overflow-wrap:anywhere}
.case-table .cw-s{max-width:120px}
/* 一覧共通の指定(.tw > table ...)だと左の余白が 0 で、文字が枠にくっついて見える。
   案件の表は左を少し空ける(ユーザー指示 2026-09-17) */
.tw > .case-table > thead > tr > th,.tw > .case-table > tbody > tr > th,
.tw > .case-table > tbody > tr > td{padding-left:8px}
.dash-filters{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;margin-top:12px;
  padding:10px 0;border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.dash-filters .f label{display:block;font-size:11px;color:var(--ink-soft);margin-bottom:2px}
.dash-filters select,.dash-filters input{font:inherit;font-size:13px;border:0;
  border-bottom:1px solid var(--rule);background:transparent;color:var(--ink);
  padding:3px 2px;outline:0;max-width:190px}
.dash-filters select:focus,.dash-filters input:focus{border-bottom-color:var(--accent)}
/* ログインボタン。押せることが分かる見た目にする */
.login-btn{width:100%;border:1px solid var(--rule);background:var(--paper);border-radius:8px;
  padding:12px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.08);transition:background .12s,box-shadow .12s}
.login-btn:hover{background:var(--ground);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.login-btn:active{box-shadow:inset 0 1px 3px rgba(0,0,0,.1)}
/* 右上のユーザーメニュー */
.who-menu{position:relative}
.who-btn{display:flex;align-items:center;gap:8px;border:0;background:none;font:inherit;
  font-size:12px;color:var(--ink-mid);cursor:pointer;padding:6px 2px}
.who-btn:hover{color:var(--ink)}
.who-caret{font-size:10px;color:var(--ink-soft)}
/* Google アカウントの写真(Gmail と同じ丸いアイコン) */
.who-btn .av-photo{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none}
.who-drop{position:absolute;right:0;top:calc(100% + 6px);background:var(--paper);
  border:1px solid var(--rule);border-radius:8px;box-shadow:0 6px 22px rgba(0,0,0,.1);
  min-width:150px;padding:6px;z-index:200}
.who-item{display:block;width:100%;text-align:left;padding:8px 10px;font:inherit;font-size:13px;
  color:var(--ink);text-decoration:none;border:0;background:none;cursor:pointer;border-radius:5px;
  box-sizing:border-box}
.who-item:hover{background:var(--ground)}
.who-logout{color:var(--stop)}
/* かんたん表示(らくらくホン方針): 文字とボタンを大きく、ノイズを畳む */
.mode-toggle{border:1px solid var(--rule);background:var(--paper);border-radius:14px;
  font:inherit;font-size:11.5px;color:var(--ink-mid);padding:3px 10px;cursor:pointer;
  display:inline-flex;gap:6px;align-items:center}
.mode-toggle .mt-state{font-weight:700;color:var(--ink-soft)}
.mode-toggle.on{border-color:var(--accent);color:var(--accent)}
.mode-toggle.on .mt-state{color:var(--accent)}
body.simple{font-size:14.5px}
body.simple .f dt,body.simple .f label{font-size:12.5px}
body.simple .f dd{font-size:15px}
body.simple .btn.pri{padding:10px 24px;font-size:14.5px}
body.simple .btn{font-size:14.5px}
body.simple .tb{font-size:14px;padding:12px 0}
body.simple td{font-size:14px;padding-top:13px;padding-bottom:13px}
body.simple .f[data-minor]{display:none}
body.simple .group.show-minor .f[data-minor]{display:block}
.minor-toggle{display:none}
body.simple .minor-toggle{display:inline-block;border:1px dashed var(--rule);background:none;
  border-radius:6px;color:var(--ink-soft);font:inherit;font-size:12.5px;cursor:pointer;
  padding:7px 14px;margin-top:12px}
.minor-toggle:hover{color:var(--ink)}
/* ホーム(今日やること) */
.task-cards{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}
.task-card{display:flex;flex-direction:column;gap:2px;min-width:130px;padding:14px 16px;
  border:1px solid var(--rule);border-radius:10px;text-decoration:none;color:var(--ink);
  background:var(--paper)}
.task-card:hover{background:var(--ground)}
.task-card.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.task-card .tc-n{font-family:"IBM Plex Mono",monospace;font-size:24px;font-weight:600}
.task-card .tc-label{font-size:11.5px;color:var(--ink-soft)}
.task-empty{padding:60px 0;text-align:center}
.task-list{display:flex;flex-direction:column}
.task-row{display:flex;gap:18px;align-items:center;padding:13px 4px;
  border-bottom:1px solid var(--rule-soft)}
.task-row:hover{background:var(--ground)}
.task-main{min-width:0;flex:1}
.task-cat{display:inline-block;font-size:10.5px;color:var(--accent);border:1px solid var(--accent);
  border-radius:9px;padding:0 8px;margin-right:8px;vertical-align:1px}
.task-name{font-size:14.5px;font-weight:600;text-decoration:none}
.task-details{font-size:12.5px;color:var(--ink-mid);margin-top:2px;white-space:pre-wrap}
/* 長い本文は冒頭だけ出し、押すと改行つきの全文を開く(Gmail未返信のメール本文など) */
.task-more{white-space:normal}
.task-more>summary{cursor:pointer;list-style:none}
.task-more>summary::-webkit-details-marker{display:none}
.task-more-open,.task-more-close{color:var(--accent);white-space:nowrap}
.task-more-open{margin-left:6px}
.task-more[open] .task-more-lead,.task-more[open] .task-more-open,.task-more:not([open]) .task-more-close{display:none}
.task-more-body{white-space:pre-wrap;line-height:1.7;margin-top:4px;color:var(--ink)}
.task-actions{display:flex;gap:10px;align-items:center;flex:0 0 auto}
/* 左端の丸いチェック(一般的なタスク管理ツールと同じ形)。マウスを乗せるとチェック印が出て、押すと確認のうえ完了にする */
.task-check{flex:0 0 auto;display:flex;align-items:center;padding-left:6px}
.task-done-form{display:flex}
.task-done{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;
  border:2px solid var(--ink-soft);border-radius:50%;background:var(--paper);color:transparent;cursor:pointer;
  font:inherit;line-height:1;transition:border-color .12s,background .12s,color .12s}
.task-done::after{content:"✓";font-size:13px;font-weight:700}
.task-done:hover,.task-done:focus-visible{border-color:var(--accent);color:var(--accent);outline:none}
.task-done:active{background:var(--accent);color:#fff}
.task-done.off{border-color:var(--rule);cursor:not-allowed}
.task-done.off:hover{color:transparent}
body.simple .task-name{font-size:16px}
body.simple .task-card .tc-n{font-size:28px}
/* 詳細画面サイドバーの操作ボタン: 同じ幅・同じ形で縦に並べる */
.side-actions{display:flex;flex-direction:column;gap:6px}
.side-actions .btn,.side-actions .side-form{width:100%;box-sizing:border-box;text-align:center;display:block}
.side-actions .side-form .btn{width:100%}

/* ---- 修正点対応(2026-09) ---- */
/* タブの上に固定表示する項目。行ごとに横並び */
/* タブの上の固定表示。項目名と値を横に並べ(ヘッダーの項目と同じ形)、1行に収める。
   入りきらないときだけ折り返す */
.pinfields{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px;margin-top:10px;padding-top:10px}
.pinfields.ungrouped{margin-top:16px;padding-top:14px}
.pinfields+.pinfields{border-top:1px dashed var(--rule-soft)}
.pinfields .hf{max-width:100%}
.pinfields .hf .v{word-break:break-word}
.pinfields .hf .v.empty{color:var(--ink-soft)}
/* 成約管理の日付(求職者のタブ上) */
.contract-strip{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;margin-top:12px;padding:8px 12px;
  border-left:3px solid var(--ok);background:var(--ground);font-size:12.5px}
.contract-strip>.k{color:var(--ok);font-size:11px;letter-spacing:.06em;font-weight:600}
.contract-strip .hf .k{margin-right:6px}
/* 重複レコードの畳んだ1行 */
.dup-strip{margin-top:12px}
.dup-strip.sub{padding:4px 0;border-top:1px solid var(--rule-soft)}
/* ボタン横の「?」: 押すと説明が出る */
span.hintq{font:inherit;font-size:10px;line-height:1;background:none;padding:0;width:15px;height:15px;
  margin-left:6px;cursor:help;flex:0 0 auto;vertical-align:1px}
.btn.pri .hintq{border-color:rgba(255,255,255,.7);color:#fff}
.btn:not(.pri) .hintq{border-color:var(--accent);color:var(--accent)} /* 枠だけのボタンでも丸が見えるように */
/* 説明は1行1つの話。改行をそのまま出し、行の間を少し空けて読みやすくする(ユーザー指示 2026-09-15) */
.help-pop{position:fixed;z-index:400;max-width:340px;padding:10px 12px;background:var(--ink);color:#fff;
  border-radius:8px;font-size:12.5px;line-height:1.65;box-shadow:0 8px 24px rgba(0,0,0,.25);
  /* 1行1つの話。長い行が折り返しても、どこから次の話かが分かるようにぶら下げる */
  white-space:pre-line;padding-left:24px;text-indent:-12px}
.help-pop[hidden]{display:none}
/* サイドバーのボタンは全部同じ形・同じ高さ。主要なものだけ塗りつぶす
   (枠付きだけ角が四角く、上下の余白も違っていた。ユーザー指示 2026-09-17「並び方を揃えて」) */
.side-actions .btn,.side-actions .btn:not(.pri){border-radius:6px;
  display:inline-flex;justify-content:center;align-items:center;min-height:34px}
.side-actions .btn:not(.pri){border:1px solid var(--accent);background:var(--paper,#fff)}
.side-actions .btn:hover{text-decoration:none;background:var(--accent-soft,#eef3fb)}
.side-actions .btn.pri:hover{background:#163F86}
/* OD検索ダイアログ: 検索を主役に */
.od-primary{padding:14px 16px;border:1px solid var(--accent);border-radius:8px;background:var(--accent-soft,#eef3fb)}
/* 提案_打診求職者一覧 */
.mi-head{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-bottom:14px}
.mi-filter{display:inline-flex;gap:8px;align-items:center}
.mi-filter input{font:inherit;font-size:12.5px;border:1px solid var(--rule);border-radius:4px;padding:4px 8px}
.mi-table{font-size:12px;min-width:0}
.mi-table th{font-size:10.5px;padding:2px 10px 4px 0}
.mi-table td{padding:5px 10px 5px 0;white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
/* 履歴・更新タブ */
.hist-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:40px}
@media (max-width:900px){.hist-grid{grid-template-columns:1fr}}
/* 一覧のチップ型ボタン(ビューを保存・担当者を割り振る)は押せることが分かる形に */
button.chip{border:1px solid var(--accent);border-radius:999px;background:var(--paper);color:var(--accent);
  padding:3px 12px;font:inherit;font-size:12.5px;cursor:pointer}
button.chip:hover{background:var(--accent-soft,#eef3fb)}
a.chip.tool-link{border:1px solid var(--rule);border-radius:999px;padding:3px 12px;color:var(--ink-mid)}
.rail .rail-links{display:flex;flex-direction:column;gap:2px;margin-top:6px}
/* 左レールのリンクで、但し書きを下の行に小さく出すもの(書き出しの「いまの絞り込み」。2026-09-15) */
.rail .rail-links .rail-link-2{display:block;line-height:1.4}
.rail .rail-links .rail-link-2 .sub{display:block;font-size:11px;color:var(--ink-soft)}
/* 絞り込みダイアログ: 上が切れないよう画面内に収め、条件は1行ずつ縦に */
dialog[data-filter-dialog]{max-height:92vh;overflow-y:auto;margin:auto}
.fd-row.cond{display:grid;grid-template-columns:auto auto 1fr auto;gap:8px 10px;align-items:start;
  padding:8px 10px;border:1px solid var(--rule-soft);border-radius:8px;background:var(--ground)}
.fd-row.cond .fd-field{font-weight:600;background:var(--paper);border-color:var(--accent-line,#b9c8e6)}
.fd-row.cond .fd-op{background:var(--rule-soft);border-color:var(--rule);color:var(--ink-mid);border-radius:999px}
.fd-row.cond .fd-val{flex-wrap:wrap;min-width:0}
.fd-row.cond .fd-del{align-self:center}
.fd-key{font-size:10.5px;color:var(--ink-soft);display:block;margin-bottom:2px;letter-spacing:.04em}
@media (max-width:760px){.fd-row.cond{grid-template-columns:1fr 1fr;} .fd-row.cond .fd-val{grid-column:1/-1}}
/* オーダー起点で検索(一覧ツールバー): ずれないよう1行に揃える */
.om-form{align-items:center}
.om-form .om-id{display:inline-flex;flex-direction:column;position:relative}
.om-form .om-name{position:absolute;top:100%;left:0;font-size:11px;white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis}
/* 編集画面: ルックアップで自動で入る項目は灰色にして触れないことを示す */
.f .ro.lookup-copy{background:var(--ground);border-bottom-style:dashed;padding-left:6px;border-radius:3px}
.f .ro .lk-note{font-size:10.5px;color:var(--ink-soft);margin-left:6px}
/* かんたん表示: カード型 */
body.simple .simple-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:22px}
body.simple .scard-s{border:1px solid var(--rule);border-radius:12px;padding:16px 18px;background:var(--paper)}
body.simple .scard-s h3{font-size:14px;margin-bottom:10px;color:var(--ink-mid)}
body.simple .scard-s .f dt{font-size:12.5px}
body.simple .scard-s .f dd{font-size:16px}
body.simple .scard-s .fields{grid-template-columns:1fr;gap:12px}
body.simple .simple-hide{display:none!important}
body.simple .simple-more{margin-top:26px}
body.simple .simple-more>summary{cursor:pointer;font-size:14.5px;color:var(--accent);padding:12px 0;list-style:none;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
body.simple .side-actions .btn{font-size:15px;padding:12px 16px}
body.simple .tabs{position:static}
/* 全項目表示ではタブが行き先の目次になるので、かんたん表示でも上に固定したままにする
   (かんたん表示だけのときは1つの区切りしか出ないので、固定しなくてよい) */
body.simple.allmode .tabs{position:sticky;top:var(--topbar-h)}
/* AIオーダー検索: 1行の入力に */
.ai-box{display:flex;gap:8px;align-items:center}
.ai-box textarea{flex:1;min-height:34px;height:34px;resize:vertical;font:inherit;font-size:13px;
  border:1px solid var(--rule);border-radius:4px;padding:6px 8px}
.ai-box textarea:focus{height:auto;min-height:60px}
/* 求職者のオーダー検索: 条件を全部入れた文章が初期値なので、最初から広く出す */
.ai-box.tall{align-items:flex-start}
.ai-box.tall textarea{height:132px;min-height:132px}
.ai-box.tall strong{padding-top:8px}
.ai-box-btns{display:flex;flex-direction:column;gap:6px;max-width:250px}
.ai-box-btns .btn{font-size:12.5px;text-align:center;line-height:1.5}
#aimap{width:100%;height:360px;border:1px solid var(--rule-soft);margin-top:10px}
/* partnerメールの本文 */
.mail-body{max-width:900px;line-height:1.8;font-size:13.5px;overflow-x:auto}
.mail-body img{max-width:100%}
.mail-body blockquote{border-left:3px solid var(--rule);margin:8px 0;padding-left:12px;color:var(--ink-mid)}
/* 架電要約(連絡タブ) */
.cs-row{border-bottom:1px solid var(--rule-soft);padding:6px 0}
.cs-row>summary{cursor:pointer;display:flex;gap:12px;align-items:baseline;font-size:12.5px;list-style:none}
.cs-row>summary .cs-lead{color:var(--ink-mid);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-row[open]>summary .cs-lead{display:none}
.cs-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 28px;padding:8px 0 6px 12px}
.cs-body .f dd{white-space:pre-wrap}
/* 架電メモは長いので、右下をつまんで横にも広げられるようにする。
   広げなくても雛形(【連絡目的/結果】…【OD情報の更新/追加 ※更新対象のオーダーIDを記載※】)が1行ずつ見える幅と4行ぶんの高さを最初から取る */
.contact-edit textarea.st-memo{width:100%;min-width:480px;font:inherit;font-size:12.5px;border:0;border-bottom:1px solid var(--rule);
  background:transparent;resize:both;min-height:88px;line-height:1.6;outline:0}
.contact-edit textarea.st-memo:focus{border-bottom-color:var(--accent)}
/* かんたん表示: カードを出し、タブと本文は「すべての項目を見る」を押すまで隠す(サイドバーの操作は残す) */
body.simple:not(.simple-all) .shortcut-bar,body.simple:not(.simple-all) .tabs,
body.simple:not(.simple-all) .pane>section{display:none}
body.simple .simple-more-bar{display:flex;justify-content:center;margin:18px 0 6px}
body.simple .simple-more-bar .btn{border:1px dashed var(--accent);border-radius:8px;padding:10px 22px;font-size:14px}
/* タブ上の固定表示(打診要件_概要・新提案TPL)は空行の多い雛形で縦に伸びるので、高さを抑えてスクロールに */
.pinned .pf pre{overflow:visible}
/* OD検索の条件フォーム: 場所・希望条件・属性・職種別をカードで区切り、入力欄に枠を付けて見分けやすく */
.sform{border:0;padding:0}
.sform>summary{display:inline-block;border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:5px 14px;
  font-size:13px;list-style:none;margin:10px 0}
.sform>summary::-webkit-details-marker{display:none}
.sform .sform-h{font-size:12.5px;color:var(--ink);font-weight:700;margin:16px 0 6px;letter-spacing:0}
.sform form>.fields{padding:12px 14px 6px;border:1px solid var(--rule);border-radius:8px;background:var(--ground)}
.sform .f label{font-size:11px}
.sform .f input[type=text],.sform .f input[type=number],.sform .f select{border:1px solid var(--rule);border-radius:4px;
  padding:5px 8px;background:var(--paper)}
/* 選ぶ欄だと分かるように ▾ を出す(.f select は appearance:none で矢印が消えるため)。
   上の background 一括指定に消されないよう、この位置に置く */
.f select.pick-arrow{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%238a8f98'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;padding-right:20px}
.sform .f input:focus{border-color:var(--accent)}
.sform .mselect>summary{background:var(--paper);border-radius:4px;padding:5px 8px}
.sform .f:has(input:not(:placeholder-shown)) label,.sform .f:has(.mselect>summary:not(:empty)) label{color:var(--ink)}

/* ---- メリハリ(2026-09-03): 見出し・区切り・ボタンの強弱をはっきりさせる ---- */
:root{--accent-soft:#eef3fb;--accent-line:#b9c8e6;--ok-soft:#e6f4ec;--stop-soft:#fbeaea}
h2{letter-spacing:-.01em}
.rec-title h2{font-size:26px}
/* タブ: 選択中は太字+下線、未選択は薄く。タブ列の下に余白 */
.tabs{gap:24px;margin-top:22px;padding-bottom:0}
.tb{font-size:13.5px;padding:11px 0;color:var(--ink-mid)}
.tb:hover{color:var(--ink)}
.tb.on{color:var(--accent);font-weight:700;box-shadow:inset 0 -3px 0 var(--accent)}
/* 本文の各セクション: 見出しを大きく、小見出しは帯にして区切る */
.group{margin-bottom:40px}
.gh{margin-bottom:18px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.gh h3{font-size:16px}
/* 架電メモの見出しのすぐ右に「最新の情報を確認する」。押すといちばん新しい行までスクロールし、その行を少し光らせる。
   見落とさないよう青い枠と薄い青の地の丸いボタンにする(ユーザー指示 2026-09-11「もうちょい目立たせたい」) */
.gh:has([data-jump-latest]){display:flex;align-items:center;gap:14px}
.gh .btn.jump-latest{border:1px solid var(--accent);background:var(--accent-soft,#eef3fb);color:var(--accent);
  font-weight:600;padding:4px 14px;border-radius:999px;white-space:nowrap}
.gh .btn.jump-latest:hover{background:var(--accent);color:#fff;text-decoration:none}
@keyframes st-latest{from{background:#fff1bf}to{background:transparent}}
.memorow.st-latest,tr.st-latest td{animation:st-latest 2.4s ease-out}
.subgroup{margin-bottom:30px}
.subgroup h4{font-size:12.5px;color:var(--ink);background:var(--ground);padding:6px 10px;border:0;border-left:3px solid var(--accent);border-radius:0 4px 4px 0;margin-bottom:12px}
/* 項目: ラベルと値の差をつける。
   薄すぎて読めないという声があったので、項目名は中間色＋やや太字にする
   (編集画面は地がクリーム色でさらに沈むので、そこだけもう一段濃くする) */
.f dt,.f label{font-size:11.5px;color:var(--ink-mid);font-weight:500;letter-spacing:.02em}
body.editing .f dt,body.editing .f label{color:var(--ink);font-weight:600}
.f dd{font-size:14px;line-height:1.6}
.f dd.empty{color:#b3b8bf;font-size:12.5px}
/* ヘッダーの識別項目は薄い帯に */
.headfields{margin-top:16px;padding:10px 14px;background:var(--ground);border-radius:8px;gap:6px 30px}
/* サイドバー: ブロックをカードに */
.side .blk{padding:14px 16px;border:1px solid var(--rule);border-radius:10px;margin-bottom:16px;background:var(--paper)}
.side h3{font-size:11px;color:var(--ink-mid);margin-bottom:10px}
/* サイドバー: 「その他」と「コメント」をボタンで切り替える。レールごと画面に貼り付けて、
   スクロールしてもコメントが出たままになるようにする(ユーザー指示 2026-09-14)。
   切り替えは中身を消さずに出し分けるだけなので、レールの中のダイアログ(次回アクションなど)は
   どちらを選んでいても開ける。タブの帯(sticky)に隠れないよう、その下に付ける */
.side{align-self:start;position:sticky;top:calc(var(--topbar-h) + 46px);
  max-height:calc(100dvh - var(--topbar-h) - 64px);overflow-y:auto;scrollbar-width:thin}
.side::-webkit-scrollbar{width:4px}
.side::-webkit-scrollbar-thumb{background:var(--rule);border-radius:2px}
.side[data-pane="comments"] > .blk:not(.cmt-blk){display:none}
.side[data-pane="other"] > .cmt-blk{display:none}
.side-switch{display:flex;position:sticky;top:0;z-index:2;margin-bottom:12px;
  border:1px solid var(--rule);border-radius:999px;overflow:hidden;background:var(--paper)}
.ss{flex:1;padding:6px 0;border:0;background:var(--paper);color:var(--ink-mid);
  font:inherit;font-size:12px;cursor:pointer}
.ss.on{background:var(--accent);color:#fff}
/* 編集画面は右のコメントぶんだけ本文が狭くなる。新規作成はまだコメントが無いので1列に戻す */
.body.one-col{grid-template-columns:minmax(0,1fr)}
/* 一覧: ヘッダー行と行の区切りを強く、行の高さに余裕 */
th{font-size:11.5px;color:var(--ink-mid);font-weight:600;border-bottom:1px solid var(--rule);padding-bottom:9px}
td{padding-top:12px;padding-bottom:12px}
tbody tr:nth-child(even) td{background:var(--ground)}
tr.rowlink:hover td{background:var(--accent-soft)}
.rcount b{font-size:22px}
/* 一覧のツールバー: 操作ボタンを1段に、控えめな文字リンクは薄く */
.chips{gap:12px;margin-top:14px}
.tool{padding:6px 13px;font-weight:500}
.btn.create{padding:10px 22px}
/* 上部ナビ: 選択中を強く */
.top{height:54px;background:var(--paper);box-shadow:0 1px 0 var(--rule)}
.tt{font-size:13.5px;padding:17px 0}
.tt.on{font-weight:700;color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
/* 警告は目に入るように */
.warnbar{border-radius:6px;font-weight:500}
/* 編集画面 */
.editbar{box-shadow:0 -6px 16px rgba(0,0,0,.05)}
.f input[type="text"],.f input[type="date"],.f input[type="number"],.f input[type="datetime-local"],.f select,.f textarea{
  border:1px solid var(--rule);border-radius:4px;padding:5px 8px;background:var(--paper)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
/* 業務として必ず入れる項目(config/required_fields.yml)。空のあいだだけ枠と地を赤くする。
   入れたらその場で戻す(shared/_record_scripts の req-empty)。保存は止めない */
.f.req-empty input[type="text"],.f.req-empty input[type="date"],.f.req-empty input[type="number"],
.f.req-empty input[type="datetime-local"],.f.req-empty select,.f.req-empty textarea{
  border-color:var(--stop);background:rgba(150,48,29,.05)}
/* 次回アクションの日時(日付・時・分に分けた入力。shared/_quarter_datetime) */
.qdt{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.f .qdt input,.f .qdt select{width:auto;flex:0 0 auto}
.f .ro{border:1px dashed var(--rule);border-radius:4px;padding:5px 8px;background:var(--ground)}
dialog[data-scout-request-dialog]{border:0;border-radius:10px;padding:0;width:min(820px,94vw);max-height:92vh;overflow-y:auto}
dialog[data-scout-request-dialog]::backdrop{background:rgba(20,25,31,.35)}
dialog[data-scout-request-dialog] .fields textarea,dialog[data-scout-request-dialog] .fields input[type=text]{width:100%;box-sizing:border-box}
/* kintone で幅の狭かった項目(数値・フラグ)は入力欄も狭く */
.f.narrow input[type="text"],.f.narrow input[type="number"],.f.narrow select{max-width:140px}
/* 一覧: 列が多くても潰れないよう最小幅を取り、横スクロールに。1行は3行分までで打ち切る(全文はマウスオーバー) */
.tw table{width:max-content;min-width:100%}
th.col{min-width:120px;max-width:260px}
th.col-wide{min-width:280px;max-width:420px}
td .cell{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.55;max-width:420px}
/* 1つのセルに長い値が入ると、その列だけ伸びて表が横に広がっていた(AIオーダー検索の手数料が
   1200px 超、partnerメールの件名も同じ)。幅を決めて折り返す(ユーザー指示 2026-09-17)。
   .sug-table td の nowrap より後に置いて、こちらを効かせる。
   折り返しただけだと今度は行が縦に伸びるので、補足(.sub)は2行までにして、全文は title で見せる。
   min-width が無いと、列の取り合いで1文字ずつの細い列まで潰れるので下限も決める */
td.wrapcell,td.wrapcell-w{white-space:normal;overflow-wrap:anywhere}
td.wrapcell{width:200px;min-width:140px;max-width:260px}
td.wrapcell-w{width:320px;min-width:200px;max-width:420px}
/* 2行に詰めるのは中身(div・span)だけにする。td そのものを -webkit-box にすると
   セルとしての表示が壊れ、行の色が塗られない白い帯がセルの下に残っていた(2026-09-17 のユーザー報告) */
.clamp2,td.wrapcell .sub,td.wrapcell-w .sub{display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
/* partnerメールの一覧。.tw table の既定(width:max-content)だと冒頭の文で表が横に広がるので、
   列の幅を決め打ちにして、件名・冒頭が残りの幅を使うようにする(ユーザー指示 2026-09-17) */
.tw > .pm-table{table-layout:fixed;width:100%;min-width:720px}
.tw > .pm-table td{overflow-wrap:anywhere}
/* AIおまかせ(β)のキャリアプラン案 */
.beta{display:inline-block;margin-left:5px;padding:0 6px;border-radius:999px;background:var(--warn);color:#fff;font-size:10px;font-weight:700;vertical-align:1px}
.ai-plans-h{font-size:13.5px;margin:12px 0 8px}
.ai-plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:14px}
.ai-plan{border:1px solid var(--accent-line,#b9c8e6);border-radius:10px;padding:12px 14px;background:var(--accent-soft,#eef3fb);font-size:12.5px;line-height:1.7}
.ai-plan-t{font-weight:700;font-size:14px;margin-bottom:4px;color:var(--accent)}
.ai-plan-talk{margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--paper);border:1px solid var(--accent-line,#b9c8e6);font-size:12.5px}
.ai-plan-talk .copybtn{margin-left:6px;font-size:11px}
/* 一覧の見出しクリックで並べ替え */
th.sortable .th-sort{color:inherit;text-decoration:none;display:inline-flex;gap:4px;align-items:center}
th.sortable .th-sort:hover{color:var(--accent)}
.sort-mark{color:var(--accent);font-size:9px}
/* 右下のAIアシスタント(β) */
.ai-fab{position:fixed;right:22px;bottom:22px;z-index:300;width:56px;height:56px;border-radius:50%;border:0;color:#fff;
  background:linear-gradient(135deg,#1B4FA8 0%,#4F63E8 55%,#8B5CF6 100%);
  font:inherit;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 8px 22px rgba(79,99,232,.4);display:flex;align-items:center;justify-content:center;gap:2px;
  transition:transform .15s,box-shadow .15s}
.ai-fab .beta{position:absolute;right:-4px;top:-4px;margin:0;font-size:9px;padding:1px 5px;border:2px solid var(--paper)}
.ai-fab .ai-icon{transition:transform .15s}
.ai-fab:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(79,99,232,.5)}
.ai-fab:hover .ai-icon{transform:scale(1.08)}
.ai-head-icon{display:inline-flex;color:var(--accent)}
.ai-panel{position:fixed;right:22px;bottom:88px;z-index:300;width:min(420px,92vw);max-height:min(70vh,640px);display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--rule);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.18);overflow:hidden}
.ai-panel-head{display:flex;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--rule)}
.ai-panel-head .sub{flex:1;font-size:11px}
.ai-panel-body{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px;background:var(--ground)}
.ai-msg{font-size:12.5px;line-height:1.7;padding:8px 12px;border-radius:10px;max-width:96%;white-space:normal}
.ai-msg-bot{background:var(--paper);border:1px solid var(--rule);align-self:flex-start}
.ai-msg-me{background:var(--accent);color:#fff;align-self:flex-end}
.ai-wait{color:var(--ink-soft);font-style:normal}
.ai-h{font-weight:700;margin-top:6px}
.ai-li{padding-left:14px;position:relative}
.ai-li::before{content:"・";position:absolute;left:0}
.ai-sugs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
/* 画面をまたいで残したやりとりの区切り(どの画面で聞いたか) */
.ai-ctx{align-self:center;flex:0 0 auto;line-height:1.6;font-size:11px;color:var(--ink-soft);background:var(--ground);
  padding:1px 10px;border:1px solid var(--rule);border-radius:999px;white-space:nowrap;
  max-width:96%;overflow:hidden;text-overflow:ellipsis}
.ai-clear{font:inherit;font-size:11px;color:var(--ink-soft);background:none;border:0;cursor:pointer;padding:2px 4px}
.ai-clear:hover{color:var(--ink);text-decoration:underline}
.ai-panel-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--rule);align-items:flex-end}
.ai-panel-form textarea{flex:1;font:inherit;font-size:12.5px;border:1px solid var(--rule);border-radius:6px;padding:6px 8px;resize:none}
@media (max-width:760px){.ai-panel{right:8px;left:8px;width:auto}}

/* 背景色プラグインの移植(編集画面)。桃色=打診・求人票に必須の入力項目、水色=求人票にそのまま載る文面。
   後から足した編集画面の入力欄スタイル(.f input[type="text"] など)と強さが同じなので、
   必ず後ろに来るようこのファイルの最後に置く。type付きの指定も並べて確実に勝たせる */
.f.fc-pink input,.f.fc-pink input[type="text"],.f.fc-pink input[type="date"],.f.fc-pink input[type="number"],
.f.fc-pink input[type="datetime-local"],.f.fc-pink textarea,.f.fc-pink select,.f.fc-pink .ms,
.f.fc-pink .mselect>summary,.f.fc-pink .ro,.f.fc-pink .cklist{background:#f8d7dc}
.f.fc-blue input,.f.fc-blue input[type="text"],.f.fc-blue input[type="date"],.f.fc-blue input[type="number"],
.f.fc-blue input[type="datetime-local"],.f.fc-blue textarea,.f.fc-blue select,.f.fc-blue .ms,
.f.fc-blue .mselect>summary,.f.fc-blue .ro,.f.fc-blue .cklist{background:#c9ecf5}
.f.fc-pink input:focus,.f.fc-pink textarea:focus,.f.fc-pink select:focus,
.f.fc-blue input:focus,.f.fc-blue textarea:focus,.f.fc-blue select:focus{background:var(--paper)}

/* 編集画面: 選択式の項目が「ただの入力欄」に見えないようにする(プルダウン・ラジオ・チェックボックス) */
.pick{position:relative;display:block}
.pick input{width:100%;padding-right:26px !important;box-sizing:border-box;cursor:pointer;
  background-image:none}
.pick .pick-caret{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  pointer-events:none;font-size:11px;color:var(--ink-soft)}
.pick input:focus{cursor:text}
/* 都道府県・市区町村のプルダウン。他の入力欄と同じ幅・高さに揃える */
.pick-sel{width:100%;box-sizing:border-box}
/* 免許・資格: 入力欄の右に「候補から足す」プルダウンを並べる */
.pick-add{display:flex;gap:6px;align-items:center}
.pick-add input{flex:1 1 auto;min-width:0}
/* 「＋ 候補から追加」は、入力欄ではなく押せるボタンに見えるようにする
   (同じ見た目の枠が2つ並んでいて、右も入力欄だと思われていた。ユーザー指示 2026-09-17) */
.pick-add .pick-add-sel{flex:0 0 auto;max-width:46%;padding:3px 10px;cursor:pointer;
  color:var(--accent);font-weight:600;background:var(--paper,#fff);
  border:1px solid var(--accent);border-radius:999px}
.pick-add .pick-add-sel:hover{background:var(--accent-soft,#eef3fb)}
.pick-add .pick-add-sel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pick-add .pick-add-sel option{color:var(--ink);font-weight:400}
/* 複数選択(チェックボックス)は枠+▾+選択件数で、押せることと複数選べることを見せる */
.mselect.multi>summary{position:relative;padding-right:24px;border-radius:4px;background:var(--paper);
  color:var(--ink);min-height:26px;display:flex;align-items:center}
.mselect.multi>summary::after{content:"▾";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:11px;color:var(--ink-soft)}
.mselect.multi[open]>summary{border-color:var(--accent)}
.mselect.multi>summary:hover{border-color:var(--accent-line,#b9c8e6)}

/* 右のアクションボタンは1行に収める(「次回アクションを登録する」等が折り返していた)。
   長いラベルでも枠からはみ出さないよう、内側で縮めて収める */
.side-actions .btn{white-space:nowrap;font-size:12.5px;line-height:1.4;padding:8px 10px;
  display:flex;align-items:center;justify-content:center;gap:2px;overflow:hidden;max-width:100%}
.side-actions .btn .hintq{flex:0 0 auto;margin-left:4px}
/* 枠の線のぶんだけ内側を詰めて、塗りつぶしのボタンと同じ高さに見せる */
.side-actions .btn:not(.pri){padding:7px 9px}
/* 画面を2分割して使うとレールは210pxまで狭まる。そこでは1行に収めると文字が切れるので、
   折り返して全部見せる(この指定より後に書かないと nowrap が勝つ) */
@media (max-width:1080px){
  .side-actions .btn{white-space:normal;overflow:visible}
}


/* AIで履歴書の下書きを作るダイアログ */
.rd-dialog{border:0;border-radius:12px;padding:0;width:min(820px,94vw);max-height:92vh;overflow-y:auto}
.rd-dialog::backdrop{background:rgba(20,25,31,.35)}
.rd-head{display:flex;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--rule)}
.rd-head .sub{flex:1;font-size:11.5px}
.rd-body{padding:14px 16px}
.rd-label{display:block;font-size:12px;color:var(--ink-soft);margin-bottom:12px}
.rd-label input,.rd-label textarea{display:block;width:100%;box-sizing:border-box;margin-top:4px;font:inherit;
  font-size:13px;border:1px solid var(--rule);border-radius:4px;padding:6px 8px}
.rd-progress{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 0}
.rd-note{border:1px solid var(--accent-line,#b9c8e6);background:var(--accent-soft,#eef3fb);border-radius:8px;
  padding:8px 12px;margin-bottom:10px;font-size:12.5px}
.rd-note.warn{border-color:#e8c39a;background:#fdf3e7}
.rd-note.ok{border-color:#a8d5ba;background:var(--ok-soft,#e6f4ec)}
.rd-note ul{margin:4px 0 0;padding-left:18px}
.rd-more{margin-top:6px}
.rd-more>summary{cursor:pointer;font-size:12.5px;color:var(--accent)}
.rd-actions{display:flex;gap:10px;align-items:center;padding:12px 16px;border-top:1px solid var(--rule)}
.rd-actions .sp{flex:1}

/* 履歴書の作り方を選ぶダイアログ */
.rc-dialog{width:min(520px,94vw)}
.rc-opt{display:flex;flex-direction:column;gap:5px;margin-bottom:18px}
.rc-opt .btn{align-self:flex-start;text-align:left}
.rc-opt .btn[disabled]{opacity:.5;cursor:not-allowed}

/* オーダー検索の分割表示。求職者の詳細を左に残したまま、右半分で探す */
.odsplit{position:fixed;top:0;right:0;width:min(52vw,900px);height:100vh;z-index:210;
  background:var(--paper);border-left:1px solid var(--rule);box-shadow:-6px 0 18px rgba(20,25,31,.10);
  display:flex;flex-direction:column}
.odsplit[hidden]{display:none}
/* 全画面。求職者の画面は下に残したまま、オーダー検索だけを画面いっぱいに広げる */
.odsplit.full{width:100vw;left:0;border-left:0}
.odsplit iframe{flex:1;width:100%;border:0}
.ods-head{display:flex;gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--rule)}
.ods-head .sp{flex:1}
body.odsplit-open{padding-right:min(52vw,900px)}
body.odsplit-open.odsplit-full{padding-right:0;overflow:hidden}
/* 横に並べると左半分は実質「狭い画面」になる。@media は画面の幅で効くので分割表示では拾えず、
   1920pxの画面でも左は500px程度しかない。開いている間だけスマホと同じ畳み方をして、
   上のナビが1文字ずつ折り返す(書式が崩れる)のを防ぐ */
body.odsplit-open{--topbar-h:46px}
body.odsplit-open .top{height:auto;min-height:46px;padding:6px 14px;gap:12px;flex-wrap:wrap}
body.odsplit-open .nav-toggle{display:inline-flex;order:3}
body.odsplit-open .top .sp{order:2}
body.odsplit-open .top .mode-toggle{display:none}
body.odsplit-open .top .who-menu{order:4}
body.odsplit-open .tabs-top{display:none;order:9;flex-basis:100%;flex-direction:column;gap:0;
  border-top:1px solid var(--rule);margin-top:4px;padding-bottom:4px}
body.odsplit-open .top.nav-open .tabs-top{display:flex}
body.odsplit-open .tt{padding:11px 4px;border-bottom:1px solid var(--rule-soft)}
body.odsplit-open .tt.on{box-shadow:inset 3px 0 0 var(--accent);padding-left:10px}
body.odsplit-open .page{padding:12px 16px 60px}
/* オーダー検索を横に開くと、左は500〜900px程度になる。1列にするが、右レールは本文の上に出す
   (下に回すと、タブの中身の何千px下に行って見つからない)。カードは横に並べる */
@media (max-width:1800px){
  body.odsplit-open .body{grid-template-columns:minmax(0,1fr);gap:0}
  body.odsplit-open .body > .side{order:-1;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 16px;align-items:stretch;
    position:static;max-height:none;overflow:visible}
  /* 「できること / コメント」の切り替えは全幅に。1列ぶんだけだと、その右か下に空きができる
     (ユーザー指示 2026-09-17「並び方を揃えて」) */
  body.odsplit-open .body > .side > .side-switch{grid-column:1/-1}
  /* ただし開いたままだと、カードが2列に並んで見に来たプロフィールが下へ押し出される。
     見出しだけ出して畳んでおき、押したときに開く(ユーザー指示 2026-09-16)。
     ダイアログはレールの中にあるので、畳んでいても開けるように隠さない */
  body.odsplit-open .body > .side > .ods-rail-toggle{display:block;grid-column:1/-1;width:100%;
    text-align:left;appearance:none;background:var(--ground);border:1px solid var(--rule);border-radius:8px;
    padding:8px 12px;margin-bottom:14px;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer}
  body.odsplit-open .body > .side > .ods-rail-toggle::before{content:"▶ ";font-size:11px}
  body.odsplit-open .body > .side.ods-open > .ods-rail-toggle::before{content:"▼ "}
  body.odsplit-open .body > .side:not(.ods-open) > *:not(.ods-rail-toggle):not(dialog){display:none}
}
/* 分割表示のときだけ出す見出し(横に並べていないときはレールがそのまま見えている) */
.ods-rail-toggle{display:none}
/* 埋め込み(分割表示の中身)は横幅が狭いので、余白と地図を詰める */
body.embedded{--topbar-h:0px}
body.embedded .page{padding:10px 14px}
body.embedded .rec-head .crumb{display:none}
/* 横に並べると検索文の入る幅が200px程度しか残らないので、見出し・入力・検索ボタンを縦に積む */
body.embedded .ai-box{flex-wrap:wrap;align-items:stretch}
body.embedded .ai-box > strong{flex:1 1 100%;padding-top:0}
body.embedded .ai-box textarea{flex:1 1 100%}
body.embedded .ai-box-btns{flex:1 1 100%;max-width:none}
@media (max-width:900px){
  .odsplit{width:100vw}
  body.odsplit-open{padding-right:0}
}

/* URL の項目。文字列をそのまま出すと横に長いので、ホスト名だけの短いリンクにする */
.url-link{white-space:nowrap}
/* 詳細画面の項目・上の見出しの項目は横に並ぶので、URL をそのまま出すと隣の項目に重なる。項目の幅で折り返す */
.f dd .url-link,.hf .v .url-link{white-space:normal;overflow-wrap:anywhere}
/* 空白の無い長い文字(メモ・コメント・メール本文に貼られた URL など)が枠からはみ出さないよう、
   はみ出すときだけ途中で折り返す。表の列幅の計算は変えない(break-word は最小幅に効かない) */
body{overflow-wrap:break-word}
.url-link::after{content:"↗";font-size:10px;margin-left:2px;color:var(--ink-soft)}
/* 発信させない電話番号(色の付いた営業所)。リンクにせず押せない見た目にし、理由は title で出す */
.tel-off{color:var(--ink-soft);cursor:not-allowed}

/* 項目名や行のとなりに置く、別のレコード・画面へ飛ぶ小さなリンク
   (マッチングサブテーブル→選考管理画面、SEOでの応募求人→応募元のオーダー) */
.sm-link{margin-left:8px;font-size:11.5px;padding:1px 6px;border:1px solid var(--accent-line,#b9c8e6);
  border-radius:999px;white-space:nowrap;text-decoration:none}
.sm-link:hover{background:var(--accent-soft);text-decoration:none}

/* 詳細のサブテーブルにある「行を追加」 */
.st-add{margin:0 0 8px}

/* 使い方ガイド(Wiki) */
.wiki{max-width:1040px}
.wiki-hero{padding:6px 0 18px;border-bottom:1px solid var(--rule-soft);margin-bottom:20px}
.wiki-hero h2{margin:0 0 4px}
.wiki-ask{margin-top:14px}
.wiki-ask-row{display:flex;gap:8px;align-items:center}
.wiki-ask input{flex:1;font:inherit;font-size:13.5px;border:1px solid var(--rule);border-radius:6px;padding:9px 12px}
.wiki-ask input:focus{border-color:var(--accent);outline:0;box-shadow:0 0 0 2px var(--accent-soft)}
.wiki-ans{margin-top:10px;padding:12px 14px;border:1px solid var(--accent-line,#b9c8e6);
  background:var(--accent-soft,#eef3fb);border-radius:8px;font-size:13.5px;line-height:1.9}
.wiki-cat{margin-bottom:26px}
.wiki-cat h3{font-size:14px;margin:0 0 10px}
.wiki-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.wiki-card{display:block;border:1px solid var(--rule);border-radius:10px;padding:14px 16px;text-decoration:none;
  color:var(--ink);background:var(--paper);transition:border-color .12s,box-shadow .12s}
.wiki-card:hover{border-color:var(--accent);box-shadow:0 3px 12px rgba(0,0,0,.06);text-decoration:none}
.wiki-card-t{display:block;font-weight:700;font-size:13.5px;margin-bottom:4px;color:var(--accent)}
.wiki-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:36px;margin-top:14px}
@media (max-width:900px){.wiki-layout{grid-template-columns:1fr}}
.wiki-body{font-size:14px;line-height:1.95;min-width:0}
.wiki-body h1{font-size:22px;margin:0 0 14px}
.wiki-body h2{font-size:16px;margin:26px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--rule-soft)}
.wiki-body h3{font-size:14px;margin:18px 0 6px}
.wiki-body ol,.wiki-body ul{padding-left:22px;margin:8px 0}
.wiki-body li{margin:4px 0}
.wiki-body p{margin:8px 0}
.wiki-body code{background:var(--ground);padding:1px 5px;border-radius:4px;font-size:12.5px}
.wiki-body blockquote{margin:10px 0;padding:8px 14px;border-left:3px solid var(--accent-line,#b9c8e6);
  background:var(--accent-soft,#eef3fb);color:var(--ink)}
.wiki-body img{display:block;max-width:100%;border:1px solid var(--rule);border-radius:8px;margin:10px 0}
.wiki-body table{border-collapse:collapse;margin:10px 0;font-size:13px}
.wiki-body th,.wiki-body td{border:1px solid var(--rule);padding:6px 10px;text-align:left}
.wiki-side h4{font-size:11.5px;color:var(--ink-soft);margin:16px 0 6px;letter-spacing:.04em}
.wiki-side ul{list-style:none;padding:0;margin:0}
.wiki-side li{margin:4px 0;font-size:12.5px}
.wiki-side a.on{font-weight:700;color:var(--accent)}

/* ---- 一覧の上部を整理する(2026-09-04) ---- */
/* 絞り込み・並び替え・表示列は1つのまとまりに見せる。効いているものは薄い塗りで示す(青一色で並べない) */
.tools{gap:0;border:1px solid var(--rule);border-radius:999px;overflow:hidden;background:var(--paper)}
.tools .tool{border:0;border-radius:0;padding:7px 14px;color:var(--ink-mid);background:transparent}
.tools .tool + .tool{border-left:1px solid var(--rule)}
.tools .tool:hover{background:var(--ground);color:var(--accent)}
.tools .tool.on{background:var(--accent-soft,#eef3fb);color:var(--accent);font-weight:700}
.tools .tool.on .n{background:var(--accent);color:#fff}
.tools .tool:not(.on) .n{background:var(--rule-soft,#eef1f5);color:var(--ink-soft)}
/* 一覧の上の副次的な操作(マップ・ビュー保存)は控えめに */
.chips > .btn,.chips > .chip{border:0;background:none;color:var(--accent);padding:6px 4px;font-size:12.5px}
.chips > .btn:hover,.chips > .chip:hover{background:none;text-decoration:underline}
/* AI検索は独立した箱にして、一覧の操作と混ざらないようにする */
.group > .ai-box{padding:0}
.ai-box{padding:12px 14px;border:1px solid var(--accent-line,#b9c8e6);border-radius:10px;
  background:var(--accent-soft,#eef3fb);align-items:center}
.ai-box > strong{color:var(--accent)}
.ai-box textarea{background:var(--paper)}
/* kintone へ飛ぶボタン(外部リンクだと分かるように枠と矢印を付ける) */
.kintone-link{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--rule);border-radius:6px;
  padding:6px 12px;color:var(--ink-mid);font-size:12.5px;background:var(--paper)}
.kintone-link:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;background:var(--ground)}
.kintone-link svg{opacity:.8}

/* Wiki の p-AI 質問欄 */
.wiki-ask-label{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.wiki-ask-label strong{font-size:13px;color:var(--accent)}
.wiki-ask-label .sub{font-size:11.5px}
.wiki-ask-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  color:#fff;background:linear-gradient(135deg,#1B4FA8 0%,#4F63E8 55%,#8B5CF6 100%)}
.wiki-ask-send{background:linear-gradient(135deg,#1B4FA8 0%,#4F63E8 55%,#8B5CF6 100%);border:0}
.wiki-ask-send:hover{background:linear-gradient(135deg,#163F86 0%,#4353d8 55%,#7c4ce0 100%)}

/* ヘッダーは上に固定して、スクロールしても切り替えられるようにする */
.top{position:sticky;top:0;z-index:200;background:var(--paper);
  box-shadow:0 1px 0 var(--rule),0 2px 10px rgba(0,0,0,.03)}

/* 「項目を選んで探す」は控えめなリンクにする(AI検索を主役にする) */
.sform > summary.sform-link{display:inline;border:0;border-radius:0;padding:0;color:var(--ink-soft);
  font-size:12.5px;text-decoration:underline;background:none}
.sform > summary.sform-link:hover{color:var(--accent)}

/* ヘッダーの文字を太くして読みやすくする */
.top .tt{font-weight:600;color:var(--ink-mid)}
.top .tt.on{font-weight:700;color:var(--accent)}
.top .tt:hover{color:var(--ink)}
.top .brand{font-weight:700;font-size:15px}
.top .who-btn{font-weight:600}
.top .mode-toggle{font-weight:600}

/* 数値項目の単位(円・%・名など)を入力欄の横に出す */
.numunit{display:flex;align-items:center;gap:6px}
.numunit input{flex:1;min-width:0}
.numunit-mark{flex:0 0 auto;color:var(--ink-soft);font-size:12.5px}

/* 架電サマリー帯(ホーム・タスク管理で共用)。1枚の帯に区切り線で収める */
.call-sum{display:flex;flex-wrap:wrap;margin:10px 0 4px;padding:0;border:1px solid var(--rule);border-radius:10px;background:#fff}
.call-sum .cs-item{flex:1;min-width:180px;padding:12px 18px;border-right:1px solid var(--rule-soft)}
.call-sum .cs-item:last-child{border-right:0}
.call-sum .cs-zoom{flex:1.4;min-width:260px}
.call-sum .cs-label{color:var(--ink-soft);font-size:12.5px;font-weight:600}
.call-sum .cs-num{font-size:26px;font-weight:700;line-height:1.3}
.call-sum .cs-zoom .cs-num{font-size:22px;line-height:1.5}
.call-sum .cs-unit{font-size:13px;font-weight:400;margin-left:2px}
.call-sum .cs-cap{color:var(--ink-soft);font-size:12px}
/* ホームでは同じ帯を大きく出す */
.call-sum.lg{margin:0 0 18px;border-radius:12px}
.call-sum.lg .cs-item{min-width:220px;padding:20px 26px}
.call-sum.lg .cs-zoom{min-width:340px}
.call-sum.lg .cs-label{font-size:14px}
.call-sum.lg .cs-num{font-size:46px;line-height:1.15;margin-top:4px}
.call-sum.lg .cs-zoom .cs-num{font-size:38px;line-height:1.3}
.call-sum.lg .cs-unit{font-size:18px}
.call-sum.lg .cs-cap{font-size:13px;margin-top:4px}
@media (max-width:760px){
  .call-sum.lg .cs-item{flex:1 1 100%;min-width:0;border-right:0;border-bottom:1px solid var(--rule-soft);padding:14px 16px}
  .call-sum.lg .cs-item:last-child{border-bottom:0}
  .call-sum.lg .cs-num{font-size:34px}
  .call-sum.lg .cs-zoom .cs-num{font-size:26px}
}

/* ホーム */
.home-head{padding:6px 0 14px}
.home-head h2{margin:0 0 4px}
.home-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
@media (max-width:960px){.home-layout{grid-template-columns:1fr}}
.home-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.home-card{display:flex;flex-direction:column;gap:4px;border:1px solid var(--rule);border-radius:10px;padding:14px 16px;text-decoration:none;color:inherit;background:#fff;min-height:96px}
.home-card:hover{border-color:var(--accent);box-shadow:0 3px 12px rgba(0,0,0,.06);text-decoration:none}
.home-card-t{font-weight:700;font-size:14px;color:var(--accent)}
.home-side{border:1px solid var(--rule);border-radius:10px;padding:14px 16px;background:#fff}
.home-side h3{margin:0 0 6px;font-size:14px}
.home-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.home-tasks{list-style:none;padding:0;margin:8px 0 0}
.home-tasks li{padding:7px 0;border-top:1px solid var(--rule-soft);font-size:13px}
.home-tasks li .state{font-size:11px;margin-right:6px}
.fd-field-bad{border-color:#dc2626!important;background:#fef2f2}
.pretext .para{margin:0 0 .7em;white-space:pre-wrap;line-height:1.7}
.pretext .para:last-child{margin-bottom:0}
.pinned .pf .pretext{font-size:13px}

/* お知らせ(ベル) */
.notif{position:relative;margin-right:6px}
.notif-btn{position:relative;background:none;border:1px solid var(--rule);border-radius:16px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-mid);cursor:pointer}
.notif-btn:hover{border-color:var(--accent);color:var(--accent)}
.notif-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#dc2626;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.notif-drop{position:absolute;right:0;top:38px;width:360px;max-height:70vh;overflow:auto;background:#fff;border:1px solid var(--rule);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:60}
.notif-head{padding:10px 14px;border-bottom:1px solid var(--rule-soft);display:flex;gap:8px;align-items:baseline}
.notif-item{display:block;padding:10px 14px;border-bottom:1px solid var(--rule-soft);color:inherit;text-decoration:none;font-size:13px}
.notif-item:hover{background:var(--ground);text-decoration:none}
.notif-item.unread{background:#eef4ff}
.notif-item .state{font-size:11px;margin-right:4px}
.sug-proposed td,.sc-proposed td{color:var(--ink-soft);background:#f6f7f9}
.sug-proposed a,.sc-proposed a{color:var(--ink-soft)}
.bulk-bar{display:flex;gap:10px;align-items:center;margin:0 0 10px;padding:8px 12px;border:1px solid var(--accent-line,#b9c8e6);border-radius:8px;background:#eef4ff;font-size:13px;flex-wrap:wrap}
/* 選んだ中に対象が無いボタン(何も選んでいない・先打診OKが0件)は、押せないことが見て分かるようにする */
.bulk-bar .btn[disabled],.bulk-bar .btn:disabled{opacity:.45;cursor:not-allowed}
.bulk-bar .btn.pri:disabled{background:var(--ink-soft,#9aa0a6);border-color:var(--ink-soft,#9aa0a6)}
.sm-pick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px;padding:8px 12px;border:1px dashed var(--rule);border-radius:8px}
.sm-card.sm-sent{opacity:.6}
.popup-dialog{width:min(1000px,96vw);height:min(860px,92vh);padding:0;border:1px solid var(--rule);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.popup-dialog::backdrop{background:rgba(0,0,0,.35)}
.popup-dialog iframe{width:100%;height:100%;border:0;border-radius:12px}
.popup-close{position:absolute;top:8px;right:10px;z-index:2;background:#fff;border:1px solid var(--rule);border-radius:50%;width:30px;height:30px;font-size:16px;cursor:pointer}
.sm-nav{display:flex;gap:10px;align-items:center;margin:0 0 12px}
/* メール打診: まとめて送る / 1社ずつ の切り替え */
.sm-mode{display:flex;gap:18px;align-items:center;margin:0 0 12px;padding:8px 12px;
  border:1px solid var(--rule);border-radius:6px;background:var(--ground,#fafafa);font-size:13px}
.sm-mode label{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.sm-bulk .mi-table td{vertical-align:top}
/* メール打診: 宛先・Cc のチップ入力 */
.addr-box{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-height:34px;padding:5px 6px;
  border:1px solid var(--rule);border-radius:4px;background:var(--paper);cursor:text}
.addr-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft,#eef3fb)}
.addr-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:2px 4px 2px 9px;
  border:1px solid var(--accent-line,#b9c8e6);border-radius:999px;background:var(--accent-soft,#eef3fb);
  font-size:12.5px;line-height:1.7;word-break:break-all}
.addr-chip.bad{border-color:#e0b4ac;background:#fbeeec;color:var(--stop)}
.addr-x{border:0;background:none;padding:0 3px;font-size:14px;line-height:1;color:var(--ink-soft);cursor:pointer}
.addr-x:hover{color:var(--stop)}
.addr-input{flex:1 1 180px;min-width:120px;border:0;outline:none;padding:3px 2px;font:inherit;font-size:13.5px;background:transparent}
.addr-cands{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:5px}
.addr-cand{padding:1px 9px;border:1px dashed var(--rule);border-radius:999px;background:var(--paper);
  font:inherit;font-size:12px;color:var(--accent);cursor:pointer}
.addr-cand:hover:not(:disabled){background:var(--accent-soft,#eef3fb)}
.addr-cand:disabled{color:var(--ink-soft);cursor:default;opacity:.55}
/* メール打診: 長い打診手段メモを畳む */
.f dd .pre{white-space:pre-wrap;line-height:1.7}
.clamp{position:relative;max-height:8.5em;overflow:hidden}
.clamp.open{max-height:none}
.clamp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.4em;
  background:linear-gradient(rgba(255,255,255,0),var(--paper))}
.clamp.open::after{display:none}
.clamp-more{margin-top:4px;border:0;background:none;padding:0;font:inherit;font-size:12.5px;color:var(--accent);cursor:pointer}
.clamp-more:hover{text-decoration:underline}
/* メール打診: 確認のボタン(ダイアログの中) */
.sm-ask-btns{display:flex;gap:8px}
/* メール打診: 添付(選んだ書類を、送る事業者すべてに同じように付ける) */
.sm-files{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.sm-files .chip{cursor:pointer}
.sm-drop{padding:14px 12px;text-align:center;font-size:13px;cursor:default}
.sm-drop p{margin:0 0 6px}
.sm-drop select{font:inherit;font-size:12.5px;padding:4px 6px;border:1px solid var(--rule);border-radius:3px;background:var(--paper)}
/* ボタンの行。幅が足りないときは折り返す(縮めて縦書きにしない) */
.sm-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.sm-actions .btn{flex:0 0 auto;white-space:nowrap}
.sm-actions .sub{flex:1 1 220px;min-width:140px}
/* メール打診: 送る前に中身を見せる確認 */
.sm-confirm{width:min(680px,92vw);max-height:88vh;padding:0;border:1px solid var(--rule);border-radius:10px;
  box-shadow:0 12px 40px rgba(0,0,0,.25)}
.sm-confirm::backdrop{background:rgba(0,0,0,.35)}
.sm-confirm-in{padding:16px 18px}
.sm-confirm h3{margin:0 0 10px;font-size:15px}
.sm-confirm .f{display:flex;gap:10px;margin:0 0 4px;font-size:13px}
.sm-confirm .f dt{flex:0 0 5em;margin:0;color:var(--ink-soft)}
.sm-confirm .f dd{margin:0;min-width:0;overflow-wrap:anywhere}
.sm-confirm .pre{max-height:34vh;overflow:auto;margin:10px 0 0;padding:10px;border:1px solid var(--rule);
  border-radius:6px;background:var(--ground,#fafafa);font-size:12.5px;white-space:pre-wrap;line-height:1.7}
textarea.bad{border-color:var(--stop);box-shadow:0 0 0 2px #f6dedb}
.sfield .sfield-go{flex:0 0 auto;margin-left:6px;padding:4px 10px;font-size:12px;color:var(--ink-mid);border-color:var(--rule)}

/* 他社求人・ハロワを探す */
.ej-bar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;padding:12px 14px;border:1px solid var(--rule-soft);border-radius:6px;background:var(--ground,#fafafa)}
.ej-field{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--ink-soft);min-width:150px}
.ej-field.grow{flex:1 1 260px}
.ej-field input,.ej-field select{font:inherit;font-size:13.5px;padding:6px 8px;border:1px solid var(--rule);border-radius:3px;background:#fff;min-width:0}
.ej-bar .btn.pri{align-self:flex-end;padding:8px 22px}
.ej-media{flex-basis:100%;font-size:12px}
.ej-media summary{cursor:pointer;color:var(--ink-mid);list-style:none}
.ej-media summary::before{content:"▸ ";}
.ej-media[open] summary::before{content:"▾ ";}
.ej-media-list{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;align-items:center}
.ej-media-list label{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.ej-media-list i,.ej-src i,.ej-chip i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:middle}
.ej-head{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:14px}
.ej-sum{font-size:13px}
.ej-chips{display:flex;flex-wrap:wrap;gap:4px}
.ej-chip{border:1px solid var(--rule);background:#fff;border-radius:12px;padding:1px 9px;font:inherit;font-size:11.5px;cursor:pointer;color:var(--ink-soft);opacity:.55}
.ej-chip.on{opacity:1;color:var(--ink)}
.ej-chip b{font-weight:600}
.ej-tools{margin-left:auto;display:flex;gap:14px;align-items:center;font-size:12px}
.ej-check{display:inline-flex;gap:4px;align-items:center;cursor:pointer}
.ej-seg button{border:1px solid var(--rule);background:#fff;font:inherit;font-size:12px;padding:2px 10px;cursor:pointer;color:var(--ink-mid)}
.ej-seg button:first-child{border-radius:3px 0 0 3px}.ej-seg button:last-child{border-radius:0 3px 3px 0;margin-left:-1px}
.ej-seg button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.ej-src{display:inline-block;margin-right:8px;font-size:11.5px;white-space:nowrap}
.ej-status{display:inline-block;font-size:11px;padding:0 6px;border-radius:9px;background:#eee;color:var(--ink-mid);margin-left:4px}
.ej-status.ok{background:#e6f1ff;color:#1f4f9c}.ej-status.ng{background:#fde2e2;color:#a12626}.ej-status.new{background:#e4f7e9;color:#1d6b3a}
.sug-table tr.ej-hit td{background:#fff6cc}
.sug-toggle.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* オーダー一覧: 配信していない行。縞模様(var(--ground))より明らかに濃い灰色にして見分ける。
   紹介停止・無効は赤っぽく(事業者一覧の紹介停止・契約無効の行も同じ赤。決まりは OrderDeliveryTone)。
   tbody tr:nth-child(even) td より優先させるため tbody を付ける */
.tone-legend i.row-stop,tbody tr.row-stop td{background:#d9d9d9;color:var(--ink-soft)}
.tone-legend i.row-invalid,tbody tr.row-invalid td{background:#f3d4d4;color:#7a3030}
tbody tr.row-stop .row-title{color:var(--ink-soft);border-bottom-color:#aaa}
tbody tr.row-invalid .row-title{color:#7a3030;border-bottom-color:#c98a8a}
tbody tr.row-stop:hover td{background:#cfd8e8}
tbody tr.row-invalid:hover td{background:#e9c3c3}
/* 営業所一覧: 商談ステータスが無効・接触禁止の行は上の row-invalid の赤、契約を含む行はオレンジ、
   ほかの人の次回アクションが今日以降に入っている行は黄色。
   事業者一覧: 契約書回収日が入っている行は同じオレンジの地(row-contracted。文字の色は変えずオレンジにするだけ)、
   他社エージェント求人・未契約のオーダーだけの行も同じ黄色
   (赤は上の row-invalid。決まりは営業所が BranchOfficeTone、事業者が CompanyListTone) */
.tone-legend i.row-contract,tbody tr.row-contract td{background:#ffd9b3;color:#7a3d00}
tbody tr.row-contract .row-title{color:#7a3d00;border-bottom-color:#e0a36b}
tbody tr.row-contract:hover td{background:#ffc999}
.tone-legend i.row-contracted,tbody tr.row-contracted td{background:#ffd9b3}
tbody tr.row-contracted:hover td{background:#ffc999}
.tone-legend i.row-ahead,tbody tr.row-ahead td{background:#fff1bf}
tbody tr.row-ahead:hover td{background:#ffe58f}

/* 事業者の一覧の「事業者ごと／CL担当者ごと」。いま出している方を塗る */
.unit-toggle{display:inline-flex;border:1px solid var(--rule);border-radius:999px;overflow:hidden}
.unit-toggle .chip{padding:3px 12px;color:var(--ink-mid)}
.unit-toggle .chip.set{background:var(--accent);color:#fff}
.unit-toggle .chip:not(.set):hover{background:var(--accent-soft,#eef3fb)}
/* CL担当者ごとの一覧: 特徴・注意点は長いので4行で切る(全文はマウスを乗せると出る。事業者の詳細でも読める) */
.cl-features{min-width:200px;max-width:280px}
/* CL担当者ごとの一覧: 最初の画面で電話番号・メールまで見えるよう、長い文字の列は幅を決めて折り返す(2026-09-11) */
.cl-table{min-width:0}
.cl-table .cl-w{max-width:160px;white-space:normal;overflow-wrap:anywhere}
.cl-table .cl-co{max-width:200px}
.cl-table .cl-nowrap{white-space:nowrap}
.cl-table .cl-orders{max-width:220px}
.cl-table .cl-orders > div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-features > div{white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* サブテーブルの自動で入る列(ルックアップのコピー先・計算式) */
.contact-edit .st-ro{color:var(--ink-soft);background:#f1f1f1;padding:5px 8px;border-radius:3px;font-size:12.5px;min-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
/* オーダーIDの候補 */
.oid-suggest{position:absolute;z-index:300;background:#fff;border:1px solid var(--rule);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:280px;overflow-y:auto;padding:4px}
.oid-suggest button{display:block;width:100%;text-align:left;border:0;background:none;font:inherit;font-size:12.5px;padding:6px 10px;cursor:pointer;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oid-suggest button:hover,.oid-suggest button.on{background:var(--accent-soft,#eef3fb)}
.oid-suggest b{font-family:var(--mono,monospace);margin-right:8px}
/* 添付ファイルのドロップ枠 */
.dropzone{border:1.5px dashed var(--rule);border-radius:8px;padding:10px 12px;cursor:pointer;background:#fafafa;transition:border-color .15s,background .15s}
.dropzone.over{border-color:var(--accent);background:var(--accent-soft,#eef3fb)}
.dropzone input[type="file"]{display:block;margin-bottom:4px}
.dropzone .dz-hint{font-size:12px;color:var(--ink-soft)}
.dropzone .dz-list{margin-top:4px}

/* ===== スマホ(〜760px) ===== */
.nav-toggle{display:none;border:1px solid var(--rule);background:var(--paper);border-radius:6px;font-size:18px;line-height:1;padding:4px 9px;cursor:pointer;color:var(--ink-mid)}
@media (max-width:760px){
  html{-webkit-text-size-adjust:100%}
  :root{--topbar-h:46px}
  .top{height:auto;min-height:46px;padding:6px 12px;gap:10px;flex-wrap:wrap}
  .nav-toggle{display:inline-flex;order:3}
  .top .sp{order:2}
  .top .mode-toggle{display:none}
  .top .who-menu{order:4}
  .who-btn{font-size:0;gap:0}
  .who-btn .av{font-size:12px}
  .who-caret{display:none}
  .tabs-top{display:none;order:9;flex-basis:100%;flex-direction:column;gap:0;border-top:1px solid var(--rule);margin-top:4px;padding-bottom:4px}
  .top.nav-open .tabs-top{display:flex}
  .tt{padding:11px 4px;font-size:14.5px;border-bottom:1px solid var(--rule-soft)}
  .tt.on{box-shadow:inset 3px 0 0 var(--accent);padding-left:10px}
  .flash{padding:8px 12px}
  .page{padding:0 12px 90px}
  .list-wrap{padding-top:10px;gap:14px}
  .rec-head{padding-top:12px}
  .rec-title{gap:8px}
  .rec-title h2{font-size:18px}
  .rhead{flex-wrap:wrap;gap:8px;margin:14px 0 8px}
  .fields,.fields.fixed-cols{grid-template-columns:1fr;gap:12px 16px}
  /* 1列に並ぶときは、入力欄と高さを合わせるための空ラベルは要らない */
  .f.na-clear label{display:none}
  .pairwrap{grid-template-columns:1fr}
  .f input[type="text"],.f input[type="date"],.f input[type="number"],.f input[type="time"],.f input[type="datetime-local"],.f select,.f textarea,
  .contact-edit input,.contact-edit textarea,.ej-field input,.ej-field select,.ai-panel-form textarea{font-size:16px}
  .btn.pri{padding:10px 18px;font-size:14px}
  .tools{flex-wrap:wrap}
  .tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -12px;padding:0 12px}
  .tw table{min-width:640px}
  .contact-edit .st-ro{max-width:160px}
  .shortcut-bar{display:none}
  .tabs{gap:14px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .body{grid-template-columns:1fr;gap:20px;padding-top:12px}
  dialog:not(.popup-dialog){width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:0}
  .popup-dialog{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;margin:0;border-radius:0;border:0}
  .popup-dialog iframe{border-radius:0}
  .home-layout,.sug-layout,.wiki-layout,.hist-grid{grid-template-columns:1fr}
  .home-cards{grid-template-columns:1fr 1fr}
  .sug-map{position:static}
  #odmap{height:52vh;min-height:280px}
  .ej-bar{padding:10px}
  .ej-field,.ej-field.grow{min-width:100%;flex-basis:100%}
  .ej-bar .btn.pri{width:100%}
  .ej-head{gap:8px}
  .ej-tools{margin-left:0}
  .ai-fab{right:14px;bottom:14px;width:50px;height:50px}
  .ai-panel{right:0;left:0;bottom:0;width:auto;max-height:82vh;border-radius:12px 12px 0 0}
  .om-form{width:100%}
  .sm-nav,.sm-mode{flex-wrap:wrap}
  /* 一覧: 左のクイックフィルタは一覧の下に回し、畳んで出す */
  .list-wrap{display:flex;flex-direction:column}
  .list-wrap > .rail{order:2;margin-top:24px;padding-top:12px;border-top:1px solid var(--rule)}
  .list-wrap > .rail .blk{margin-bottom:16px}
  .listtop{flex-wrap:wrap;gap:8px}
  .listtop-search{flex:1 1 100%}
  .listtop-search .sfield{width:100%}
  .btn.create{width:100%;justify-content:center}
}

/* 架電メモの AI 要点 */
.cms{border:1px solid var(--rule-soft);border-left:3px solid var(--accent);border-radius:6px;padding:12px 16px;background:var(--ground,#fafafa)}
/* 枠が既にアクセントの縦棒を持っているので、中の見出しは帯にしない(縦棒が二重に見えていた) */
.cms h4{margin:0 0 8px;padding:0;font-size:12.5px;background:none;border:0;border-radius:0;color:var(--ink)}
.cms .cms-body{font-size:13px;line-height:1.75;white-space:pre-wrap;max-width:76ch}
.cms .cms-body.sub{line-height:1.6}
.cms [data-omi-meta]:empty,.cms [data-cms-meta]:empty{display:none}

/* タスクのコメント */
.task-comment{display:flex;gap:6px;align-items:center;margin-top:4px;flex-wrap:wrap}
.task-comment-opt{font:inherit;font-size:12px;border:1px solid var(--rule);border-radius:3px;padding:2px 6px;background:#fff;color:var(--ink-mid)}
.task-comment-body{font:inherit;font-size:12.5px;border:0;border-bottom:1px solid var(--rule);padding:2px 4px;min-width:220px}

/* 一覧のサブテーブル: kintone と同じく、見出し付きの小さな表を入れ子で出す */
.td-st{vertical-align:top;padding:4px 8px}
.st-wrap{max-width:560px;overflow-x:auto}
.st-nest{border-collapse:collapse;font-size:11.5px;width:max-content;min-width:100%}
.st-nest th{font-size:10.5px;font-weight:500;color:var(--ink-soft);background:var(--ground,#fafafa);border:1px solid var(--rule-soft);padding:2px 6px;white-space:nowrap;letter-spacing:.02em}
.st-nest td{border:1px solid var(--rule-soft);padding:2px 6px;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--ink-mid)}
/* 書き出しの項目選び(左の一覧から押して右に足す) */
.ex-pick{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ex-list{border:1px solid var(--rule-soft);border-radius:6px;max-height:420px;overflow-y:auto;padding:6px}
.ex-group{font-size:11px;color:var(--ink-soft);letter-spacing:.04em;margin:10px 4px 4px;display:flex;justify-content:space-between;align-items:center}
.ex-group:first-child{margin-top:2px}
.ex-item{display:block;width:100%;text-align:left;border:0;background:none;padding:4px 8px;font-size:12.5px;color:var(--ink);cursor:pointer;border-radius:4px}
.ex-item:hover{background:var(--accent-soft,#eef3fb)}
.ex-item .ex-check{display:inline-block;width:14px;height:14px;border:1px solid var(--rule);border-radius:3px;margin-right:8px;vertical-align:-2px;background:var(--paper)}
.ex-item.on{color:var(--accent)}
.ex-item.on .ex-check{background:var(--accent);border-color:var(--accent);position:relative}
.ex-item.on .ex-check::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ex-list-wide{max-height:300px}
.ex-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 8px}
/* ファイルの見本: 選んだ列を見出しに、先頭数件の値を出す */
.ex-preview-wrap{overflow-x:auto;border:1px solid var(--rule-soft);border-radius:6px}
.ex-preview{border-collapse:collapse;font-size:12px;width:max-content;min-width:100%}
.ex-preview th{background:var(--ground,#fafafa);border-bottom:1px solid var(--rule);border-right:1px solid var(--rule-soft);padding:6px 8px;text-align:left;white-space:nowrap;font-weight:500;vertical-align:top}
.ex-preview td{border-bottom:1px solid var(--rule-soft);border-right:1px solid var(--rule-soft);padding:5px 8px;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis;color:var(--ink-mid)}
.ex-th{display:flex;align-items:center;gap:6px}
.ex-th-ops button{border:0;background:none;color:var(--ink-soft);cursor:pointer;padding:0 2px;font-size:12px}
.ex-th-ops button:hover:not(:disabled){color:var(--accent)}
.ex-th-ops button:disabled{opacity:.3;cursor:default}
.ex-mini{border:0;background:none;color:var(--accent);font-size:11px;cursor:pointer;padding:0 4px}
.ex-mini:hover{text-decoration:underline}
.ex-sel{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;font-size:12.5px;border-bottom:1px solid var(--rule-soft)}
.ex-sel-ops button{border:0;background:none;color:var(--ink-soft);cursor:pointer;padding:0 4px;font-size:12px}
.ex-sel-ops button:hover{color:var(--accent)}
@media (max-width:760px){.ex-pick{grid-template-columns:1fr}}
.fd-col-group{grid-column:1/-1;font-size:11px;color:var(--ink-soft);letter-spacing:.04em;margin-top:10px;padding-top:6px;border-top:1px solid var(--rule-soft)}
/* 全項目表示でタブから区切りへ飛ぶとき、上に固定したタブの下に見出しが来るよう余白を空ける */
[data-panel]{scroll-margin-top:calc(var(--topbar-h) + 58px)}
/* 開閉できる見出し: 押せることが分かるよう矢印を付ける(▶ 閉じている / ▼ 開いている) */
.sform > summary.sform-toggle{cursor:pointer;list-style:none;color:var(--accent);font-weight:500}
.sform > summary.sform-toggle::-webkit-details-marker{display:none}
.sform > summary.sform-toggle::before{content:"▶ ";font-size:11px}
.sform[open] > summary.sform-toggle::before{content:"▼ "}

/* ---- 企業を検索する(営業所・事業者。ビズリーチの検索条件の企業版、3段) ---- */
.csearch{margin:6px 0 14px}
/* オーダー検索の A(文章で探す) / B(条件で絞る) のタブ */
.csearch .cs-tabs{display:flex;gap:6px;margin-top:10px;border-bottom:1px solid var(--rule)}
.csearch .cs-tab{appearance:none;background:none;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer}
.csearch .cs-tab:hover{color:var(--ink)}
.csearch .cs-tab.on{background:var(--ground);border-color:var(--rule);color:var(--ink);margin-bottom:-1px}
.csearch .cs-loc-modes{display:flex;gap:18px;flex-wrap:wrap;margin:2px 0 10px}
.csearch .cs-loc-modes label{display:inline-flex;align-items:baseline;gap:6px;font-size:12.5px;color:var(--ink)}
.csearch .cs-loc-modes .sub{font-size:11.5px}
.csearch .cs-tier{padding:10px 14px 4px;border:1px solid var(--rule);border-radius:8px;background:var(--ground);margin-top:10px}
.csearch .cs-tier .sform-h{margin:2px 0 8px}
.csearch .cs-scope{display:block;font-size:11.5px;color:var(--ink-soft);font-weight:400;margin-top:2px}
.csearch .cs-grid{gap:12px 24px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
/* 半径は「中心を決める4つ(都道府県・市区町村・郵便番号・駅)」とは役割が違うので、
   同じ並びに見えないよう1行使って囲う(ユーザー指示 2026-09-10)。
   下の .csearch .f input/select と同じ強さの指定に負けないよう .f を付けて書く */
.csearch .f.cs-radius{grid-column:1/-1;margin-top:4px;padding:8px 12px;border:1px solid var(--accent-line,#b9c8e6);
  border-left-width:4px;border-radius:6px;background:var(--ground)}
.csearch .f.cs-radius > label{color:var(--ink);font-weight:600}
.csearch .f.cs-radius select{max-width:220px}
.csearch .f.cs-radius .sub{display:block;margin-top:4px;font-size:11.5px}
/* キーワード検索は1行使って、前の欄(職種)の下に置く */
.csearch .f.cs-text{grid-column:1/-1}
.csearch .f.cs-text input[type=text]{max-width:520px;width:100%}
.csearch .cs-ej{display:grid;gap:10px 20px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end}
.csearch .cs-ej .cs-go{grid-column:1/-1;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.csearch .cs-range{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px}
/* 入力欄の右に出す単位(万円・%・歳)。数字とセットで読めるよう、ラベルではなく欄のとなりに置く */
.csearch .cs-unit{color:var(--ink-mid);font-size:12.5px;white-space:nowrap}
/* 含む言葉: 1つの欄の中は「または」(言葉はチップにして並べる)、欄を足すと「かつ」。
   OR・AND や括弧は書かせず、言い換えは候補を押して足す(2026-09-14) */
.csearch .cs-kw{display:flex;flex-direction:column;gap:6px}
.csearch .cs-kw-row{display:flex;align-items:flex-start;gap:8px}
.csearch .cs-kw-main{flex:1 1 auto;min-width:0}
.csearch .cs-kw-op{flex:0 0 28px;font-size:12px;color:var(--ink-mid);text-align:right;padding-top:8px}
.csearch .cs-kw-row>[data-kw-del]{padding-top:2px}
.csearch .cs-kw-box{display:flex;flex-wrap:wrap;align-items:center;gap:6px;border:1px solid var(--rule);border-radius:4px;background:var(--paper);padding:5px 8px;min-height:32px}
.csearch .cs-kw-box input[type=text]{flex:1 1 140px;min-width:120px;border:0;outline:0;background:transparent;padding:0;font-size:12.5px}
.csearch .cs-kw-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 7px;border-radius:3px;background:var(--ground);font-size:12.5px}
.csearch .cs-kw-chip button{border:0;background:transparent;padding:0 2px;line-height:1;font-size:12px;color:var(--ink-mid);cursor:pointer}
.csearch .cs-kw-or{font-size:11px;color:var(--ink-mid)}
.csearch .cs-kw-sug{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 2px;font-size:12px;color:var(--ink-mid)}
.csearch .cs-kw-sug-btn{border:1px dashed var(--rule);background:transparent;border-radius:3px;padding:1px 7px;font-size:12px;color:var(--ink);cursor:pointer}
.csearch .cs-kw-sug-btn:hover{border-style:solid;background:var(--ground)}
.csearch .cs-kw-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-left:36px}
.csearch .cs-checks label{display:inline-flex;align-items:center;gap:4px;margin-right:12px;font-size:12.5px;color:var(--ink)}
/* 作るリスト: オーダーIDの行の下に1行を使って置き、選択肢は折り返さず横に並べる(ユーザー指示 2026-09-15)。
   狭い画面では入りきらないので、そのときだけ横スクロールにする(折り返して2段にしない) */
.csearch .cs-ej .f.cs-list{grid-column:1/-1}
.csearch .cs-checks-1line{display:flex;align-items:center;flex-wrap:nowrap;overflow-x:auto;gap:0}
.csearch .cs-checks-1line label{white-space:nowrap;margin-right:18px;flex:0 0 auto}
.csearch .cs-checks-1line label:last-child{margin-right:0}
.csearch .cs-exclude{display:flex;align-items:flex-start;gap:6px;margin:10px 0 6px;font-size:12.5px;color:var(--ink)}
.csearch .cs-exclude input{margin-top:3px}
.csearch .cs-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0 4px}
.csearch .mselect.multi>summary{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csearch .f input[type=text],.csearch .f select{max-width:100%}

/* ---- 一覧の横幅を広げる(2026-09-08 現場の指摘: 一度に多くの列を見たい) ---- */
/* 両サイドの余白と左レールの幅を詰め、レールは畳めるようにする */
/* レイアウトの <style> が .page を 1360px に収めているので、一覧だけは画面いっぱいに使う */
.page.page-list{max-width:none;padding:0 14px 80px}
.page-list .list-wrap{grid-template-columns:150px 1fr;gap:20px}
.list-wrap.rail-hidden{grid-template-columns:1fr}
.list-wrap.rail-hidden .rail{display:none}
.rail-toggle{flex:0 0 auto;width:30px;height:30px;border:1px solid var(--rule);border-radius:6px;background:var(--paper);
  color:var(--ink-soft);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.rail-toggle:hover{color:var(--accent);border-color:var(--accent)}
.list-wrap.rail-hidden .rail-toggle{color:var(--accent)}
/* 列の最小幅とセルの余白を詰める(入れ子のサブテーブルには掛けない)。人の名前の列は短いので狭く */
.tw > table > thead > tr > th{padding-right:12px}
.tw > table > tbody > tr > td{padding:9px 12px 9px 0}
th.col{min-width:96px;max-width:240px}
th.col-name{min-width:96px;max-width:150px}
@media (max-width:1080px){.page.page-list{padding:0 12px 60px}}

/* ---- グラフ(kintone のグラフ機能。一覧とは別の画面) ---- */
a.tool{text-decoration:none}
.tools a.tool:hover{text-decoration:none}
.vi-chart{font-size:11px;margin-right:2px}
.page-chart .rec-head{padding-top:18px}
.chart-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.chart-top h2{font-size:20px;margin-right:6px}
.chart-top .sp{flex:1}
/* kintone と同じく左上のプルダウンで種類・積み上げを切り替える */
.chart-top select{font:inherit;font-size:12.5px;color:var(--accent);border:1px solid var(--rule);border-radius:4px;
  padding:6px 10px;background:var(--paper);cursor:pointer}
.chart-top > .chip{border:0;background:none;color:var(--accent);font:inherit;font-size:12.5px;cursor:pointer;padding:6px 4px}
.chart-top > .chip:hover{text-decoration:underline}
.chart-meta{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:18px;font-size:13.5px}
.chart-empty{margin-top:40px;padding:40px 20px;text-align:center;border:1px dashed var(--rule);border-radius:10px;color:var(--ink-mid)}
.chart-empty p{margin:0 0 16px}
.chart-canvas{margin-top:14px;padding:16px 12px 8px;border:1px solid var(--rule);border-radius:6px;background:#fff;overflow-x:auto}
.chart-canvas-in{position:relative;height:100%}
.chart-hint{margin:6px 0 0}
.lc-scroll{overflow-x:auto;margin-top:16px}
.lc-table{width:auto;min-width:0;font-size:12.5px}
.lc-table th,.lc-table td{padding:6px 16px 6px 0;white-space:nowrap}
.lc-table th.num,.lc-table td.num{text-align:right;font-family:"IBM Plex Mono",monospace}
.lc-table tfoot td{border-top:1px solid var(--rule);border-bottom:0;font-weight:500}
/* グラフの設定ダイアログ */
.fd-lab{width:72px;flex:0 0 auto;font-size:12.5px;color:var(--ink-mid)}
.fd-types{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px}
.fd-radio{font-size:12.5px;color:var(--ink-mid);display:inline-flex;gap:4px;align-items:center;margin-right:6px}
.csearch .cs-sub{margin:4px 0 12px;padding:8px 12px 2px;border-left:3px solid var(--accent-line,#b9c8e6);background:var(--paper)}
.csearch .cs-sub-h{margin:0 0 8px;font-size:12px;font-weight:700;color:var(--ink)}
.csearch .cs-sub-h .sub{font-weight:400;margin-left:8px}
/* 企業検索: オーダーの条件は1つの文で組み立てる(ユーザー指示 2026-09-11)。「1つも無い」のときは枠を赤くして、除いていると分かるようにする */
.csearch .cs-od{margin:4px 0 10px;padding:10px 12px;border:1px solid var(--rule);border-radius:6px}
.csearch .cs-od-sentence{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px;font-size:13px;color:var(--ink)}
/* 企業検索のセレクトは、欄の中でも文の中でも同じ見た目にそろえる(ユーザー指示 2026-09-14)。
   文の中のものは .f の外にあって .sform .f select の枠が当たらず、素のままで浮いていた。
   .f 配下にも当たる強さで書き、appearance:none で消える矢印は ▾ を背景に描いて戻す */
.csearch .f select,.csearch .cs-od-sentence select,.csearch .cs-range select{
  appearance:none;cursor:pointer;font:inherit;font-size:12.5px;color:var(--ink);
  border:1px solid var(--rule);border-radius:4px;padding:5px 22px 5px 8px;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%238a8f98'/%3E%3C/svg%3E") no-repeat right 8px center}
.csearch .cs-od-sentence select,.csearch .cs-range select{width:auto}
.csearch .cs-od-summary{margin:8px 0 0;padding:6px 10px;border-radius:4px;background:var(--ground);font-size:12.5px;color:var(--ink-mid)}
.csearch .cs-od.cs-od-not{border-color:#E8C4C4}
.csearch .cs-od.cs-od-not [data-cs-od-has]{color:var(--stop);border-color:var(--stop)}
.csearch .cs-od.cs-od-not .cs-od-summary{background:var(--stop-soft,#fbeaea);color:var(--stop)}
/* くわしく検索(抽出した経歴。使う人だけ開く): 条件で絞るの中に畳んで置く */
.csearch .cs-more{margin:8px 0 4px;border-top:1px dashed var(--rule);padding-top:8px}
.csearch .cs-more>summary{cursor:pointer;list-style:none;color:var(--accent);font-weight:600;font-size:12.5px}
.csearch .cs-more>summary::-webkit-details-marker{display:none}
.csearch .cs-more>summary::before{content:"\25b6 ";font-size:10px}
.csearch .cs-more[open]>summary::before{content:"\25bc "}
.csearch .cs-more>summary .cs-scope{margin-top:3px}
.csearch .cs-ind-box{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1px solid var(--rule);border-radius:4px;background:var(--paper);padding:5px 8px;min-height:32px}
.csearch .cs-ind-names{font-size:12.5px;flex:1 1 auto;min-width:0}
.cs-ind-dialog{width:min(960px,94vw);max-height:88vh;border:0;border-radius:10px;padding:0;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.cs-ind-dialog::backdrop{background:rgba(0,0,0,.35)}
.cs-ind-head{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--rule);font-size:16px}
.cs-ind-body{display:grid;grid-template-columns:220px 1fr;min-height:420px;max-height:calc(88vh - 120px)}
.cs-ind-majors{list-style:none;margin:0;padding:6px 0;border-right:1px solid var(--rule);overflow:auto;background:var(--ground)}
.cs-ind-majors li{padding:9px 16px;font-size:13px;cursor:pointer}
.cs-ind-majors li:hover{background:var(--accent-soft)}
.cs-ind-majors li.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.cs-ind-groups{overflow:auto;padding:12px 20px}
.cs-ind-gh{display:flex;align-items:center;gap:6px;padding:8px 0 6px;border-bottom:1px solid var(--rule);font-size:13.5px;margin-top:8px}
.cs-ind-gh.cs-ind-all{border-bottom:2px solid var(--accent-line,#b9c8e6);margin-top:0}
.cs-ind-items{display:flex;flex-wrap:wrap;gap:6px 18px;padding:8px 0 4px}
.cs-ind-items label{display:inline-flex;align-items:center;gap:4px;font-size:13px;white-space:nowrap}
.cs-ind-foot{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:10px 18px;border-top:1px solid var(--rule)}

.fd-radio input:disabled + *,.fd-radio:has(input:disabled){opacity:.45}

/* オーダー一覧の実績バッジ(夜間に数えた提案・打診・面接・成約から付ける) */
.obadges{display:flex;gap:5px;flex-wrap:wrap;margin-top:3px}
.obadges .state{font-size:11px;line-height:1.5;padding:0 6px;border-radius:999px;border:1px solid currentColor}
/* オーダーの詳細の見出しの下(勤務地・職種の並びの下)に出す実績タグと打診方法の札 */
.rec-badges{margin-top:6px}

/* ---- 施工管理技士のヒアリングメモ(hearing-memo) ---- */
/* 編集画面の入力欄をこのポップアップへ移して使うので、中身は .fields のまま並ぶ */
.hm-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.hm-dlg{width:min(880px,94vw);max-height:88vh;padding:0;border:1px solid var(--rule,#ddd);border-radius:10px}
.hm-dlg::backdrop{background:rgba(0,0,0,.35)}
.hm-dlg > form{display:flex;flex-direction:column;max-height:88vh}
.hm-head{display:flex;gap:10px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--rule,#eee)}
.hm-head strong{font-size:16px}
.hm-x{margin-left:auto;background:none;border:0;font-size:20px;line-height:1;cursor:pointer;color:var(--ink-soft)}
.hm-jobs{display:flex;gap:6px;flex-wrap:wrap;padding:12px 18px 0}
.hm-jobs .hm-job.on{background:var(--accent-soft);border-color:var(--accent-line,#b9c8e6);color:var(--accent);font-weight:600}
.hm-note{padding:10px 18px 0}
.hm-body{flex:1;overflow:auto;padding:12px 18px}
.hm-sec + .hm-sec{margin-top:18px}
.hm-sec h4{font-size:13px;margin:0 0 8px;padding-bottom:5px;border-bottom:1px solid var(--rule-soft,#eee)}
.hm-foot{display:flex;gap:10px;align-items:center;padding:12px 18px;border-top:1px solid var(--rule,#eee)}
.hm-foot .sp{flex:1}

/* ---- マッチングサブテーブルの「スカウトページ」列 ---- */
/* オーダーを開かずにURLをコピーできるようにした列。折り返さず1行に収める */
.st-scout{white-space:nowrap}
.st-scout .sm-link{margin-left:6px}

/* ---- マッチングサブテーブルの「採用管理」(ATS) ---- */
/* 打診方法が採用管理のオーダーは、オーダー名のとなりにATSのリンクと「?」を出し、
   「?」を押すとその行の下にログインID・パスワードが出る */
.ats-slot{white-space:nowrap}
button.hintq{font:inherit;font-size:10px;line-height:1;background:none;padding:0;width:15px;height:15px;
  margin-left:6px;cursor:pointer;flex:0 0 auto;vertical-align:1px;color:var(--ink-soft)}
button.hintq[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.ats-cred{display:block;white-space:normal;max-width:560px;margin-top:4px;font-size:11.5px;line-height:1.8}
.ats-cred .ats-acc{display:block}
.ats-cred .k{margin:0 4px 0 8px;color:var(--ink-soft);font-size:10.5px}
.ats-cred .sub{display:block;font-size:10.5px}
.ats-cred .sm-link{margin-left:6px}

/* ---- 編集画面の視認性(ユーザー指示 2026-09-10) ----
   「直せるところ」はグレーの枠付きの入力ボックス、「押すところ」は青、と見た目で分ける。
   編集中は地が水色で --rule も水色に振ってあるので、枠には地に埋もれないグレーを別に持つ */
body.editing{--field-line:#B6BBC3}
body.editing .f input[type="text"],body.editing .f input[type="date"],body.editing .f input[type="number"],
body.editing .f input[type="datetime-local"],body.editing .f input[type="time"],body.editing .f input[type="email"],
body.editing .f input[type="tel"],body.editing .f select,body.editing .f textarea,
body.editing .contact-edit input,body.editing .contact-edit select,
body.editing .contact-edit textarea,body.editing .contact-edit textarea.st-memo{
  border:1px solid var(--field-line);border-radius:4px;background:#fff;padding:5px 8px}
body.editing .f input:focus,body.editing .f select:focus,body.editing .f textarea:focus,
body.editing .contact-edit input:focus,body.editing .contact-edit select:focus,
body.editing .contact-edit textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
/* 直せない項目(計算式・自動で入る列)は、枠を点線＋灰色の地にして入力欄と見分ける */
body.editing .f .ro,body.editing .contact-edit .st-ro{
  border:1px dashed var(--field-line);background:#F2F3F5;color:var(--ink-mid)}
/* 押すところは青。保存(.pri)はそのまま塗り、それ以外は青の枠 */
body.editing .btn:not(.pri),.copybtn{
  border:1px solid var(--accent-line);border-radius:999px;background:#fff;color:var(--accent);
  padding:5px 14px;line-height:1.4}
body.editing .btn:not(.pri):hover,.copybtn:hover{background:var(--accent-soft);text-decoration:none}
/* 消す・取り消すだけは、押し間違えないよう青くしない */
body.editing .btn[data-cancel],body.editing .btn[data-remove-row]{
  border-color:var(--rule);color:var(--ink-mid);background:var(--ground)}
body.editing .btn[data-cancel]:hover,body.editing .btn[data-remove-row]:hover{
  background:var(--rule-soft);color:var(--ink)}
.copybtn{font-size:11px;padding:3px 10px}

/* ---- 検索結果: 地図を先に(ユーザー指示 2026-09-10) ---- */
/* HTML では地図 → 一覧の順に置いてある(狭い画面・分割表示では地図から見えるようにするため)。
   広い画面では今までどおり、左に一覧・右に地図を並べる */
.sug-layout>.sug-list{grid-column:1;grid-row:1}
.sug-layout>.sug-map{grid-column:2;grid-row:1}
@media (max-width:1100px){
  .sug-layout>.sug-list,.sug-layout>.sug-map{grid-column:1;grid-row:auto}
}
/* 地図に出せるオーダーが無いときは地図ごと出さないので、一覧を幅いっぱいに */
.sug-layout:not(:has(.sug-map)){grid-template-columns:1fr}
/* 検索したあとに畳む条件フォーム */
.csearch-fold{margin:8px 0}
.csearch-fold>summary{cursor:pointer}

/* 押したことが分かるようにする(data-busy)。文字の前にくるくるを出し、押せない見た目にする */
.is-busy{cursor:progress;opacity:.75;pointer-events:none}
.is-busy::before{content:"";display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:busy-spin .8s linear infinite}
@keyframes busy-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.is-busy::before{animation:none}}

/* ダッシュボードの「担当CL進捗」(CompanyFollow)。接触が止まっている事業者の行を、
   経過日数に応じて 薄黄(契約日以降やり取りなし) → 黄 → オレンジ → 赤 で塗る。
   黄・オレンジ・赤は事業者一覧の row-ahead / row-contracted / row-invalid と同じ色 */
.follow-table{border-collapse:collapse;font-size:12.5px;min-width:100%}
/* .tw > table > tbody > tr > td の padding(9px)より強くして、行を詰める */
.tw > .follow-table > thead > tr > th,.tw > .follow-table > tbody > tr > td,.follow-table th,.follow-table td{border-bottom:1px solid var(--rule-soft);padding:2px 9px;text-align:left;white-space:nowrap;vertical-align:middle;line-height:1.4;font-size:12.5px}
.follow-table thead th{position:sticky;top:0;background:var(--paper,#fff);z-index:2;font-weight:600;font-size:11.5px;color:var(--ink-soft)}
.follow-table th.num,.follow-table td.num{text-align:right}
.follow-table td.memo{white-space:normal;min-width:200px}
.follow-table textarea{font:inherit;font-size:12.5px;line-height:1.4;width:100%;min-width:200px;height:22px;border:1px solid transparent;border-bottom-color:var(--rule);background:transparent;padding:1px 4px;resize:vertical;display:block}
.follow-table textarea:focus{outline:none;border-color:var(--accent);background:var(--paper,#fff)}
.follow-table textarea.ok{border-color:#2e9e5b}
.follow-table textarea.ng{border-color:#b3261e;background:#fbe9e7}
.tone-legend i.fl-untouched,tbody tr.fl-untouched td{background:#fffbe0}
.tone-legend i.fl-yellow,tbody tr.fl-yellow td{background:#fff1bf}
.tone-legend i.fl-orange,tbody tr.fl-orange td{background:#ffd9b3}
.tone-legend i.fl-red,tbody tr.fl-red td{background:#f3d4d4}
tbody tr.fl-untouched textarea,tbody tr.fl-yellow textarea,tbody tr.fl-orange textarea,tbody tr.fl-red textarea{background:rgba(255,255,255,.55)}

/* 過去実績から探す(/past-results)。成約手数料の分布は小さな横棒で */
.pr-fee{margin:10px 0 4px;padding:10px 12px;border:1px solid var(--rule-soft);border-radius:8px;max-width:600px}
.pr-fee h4{margin:0 0 6px;font-size:12.5px}
.pr-bar{display:grid;grid-template-columns:100px 1fr 44px;gap:8px;align-items:center;font-size:12px;margin:2px 0}
.pr-bar-track{display:block;height:10px;background:var(--rule-soft);border-radius:5px;overflow:hidden}
.pr-bar-fill{display:block;height:100%;background:var(--accent)}
.pr-bar-n{text-align:right}
.pr-table td{white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}

/* 候補者を検索する: キーワードがどこに当たったかを、その人の行の下に抜き書きで出す。
   縞模様(tbody tr:nth-child(even))に関わらず同じ見え方にしたいので tbody を付けて上書きする。
   出どころ(EU情報メモ・職歴など)は先に小さく置き、当たった言葉だけ黄色にする */
tbody tr.hit-row td{background:var(--ground);border-top:0;padding:2px 10px 8px}
tbody tr.hit-row:hover td{background:var(--ground)}
tbody tr.hit-row .hit{display:block;font-size:12px;color:var(--ink-mid);line-height:1.6;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
tbody tr.hit-row .hit b{display:inline-block;min-width:11em;margin-right:8px;font-weight:600;
  font-size:11px;color:var(--ink-soft)}
tbody tr.hit-row mark{background:#ffe680;color:inherit;padding:0 1px;border-radius:2px}