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

:root {
  /* 上に固定しているヘッダーの高さ。タブ列など、その下に貼り付けたいものが使う */
  --topbar-h:54px;
  /* 地は白。アプリの一覧と詳細だけ下の body.app-ground で水色にする。
     入力欄・値の箱・表の行など、地の上に乗るものは --surface(白)で塗る */
  --paper:#FFFFFF; --ground:#F4F5F7; --surface:#FFFFFF;
  /* 文字は細く薄いと読みにくいという声から、補足の灰色も一段濃くした(ユーザー指示 2026-09-28) */
  --ink:#111111; --ink-mid:#3B4148; --ink-soft:#5B636C;
  --rule:#DDE1E6; --rule-soft:#EBEEF1;
  /* 一覧の行の区切り。縞模様をやめた代わりに、白い行の上でも見える濃さにする */
  --rule-row:#CDD3DA;
  /* 本文の字体は OS の日本語フォント(Mac はヒラギノ、Windows はメイリオ)。
     Web フォントは Windows で細く薄く出るため(ユーザー指示 2026-09-28) */
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,"Yu Gothic UI",system-ui,sans-serif;
  --accent:#1B4FA8;
  --ok:#10664C; --warn:#8A5A00; --stop:#96301D;
}
/* アプリ(求職者・オーダー・事業者・営業所・成約管理)の一覧と詳細の地は、kintone のオーダーアプリ
   (テーマ BLUE)と同じ水色。白地に白い枠だと境目が分からないという声から(ユーザー指示 2026-09-28)。
   ほかの画面は白に戻した(同日)。編集中・状態の色(tone-*)はこの下で定義していて、そちらが勝つ */
body.app-ground{--paper:#E9F3FB; --ground:#DCEAF6; --rule:#C7D8E8; --rule-soft:#D9E6F2; --rule-row:#B5C7DA}
html:has(body.app-ground){background:#E9F3FB}
*{box-sizing:border-box}
html{background:var(--paper)}
/* 編集中は地を一段濃い水色にして、閲覧中とぱっと見で見分けられるようにする(ユーザー指示 2026-09-28)。
   保存バー・貼り付くタブも同じ地に乗せる。状態の色(tone-*)はこの下で定義していて、編集中でもそちらが勝つ */
body.editing{--paper:#D3E6F7; --ground:#C4DCF1; --rule:#AFC8E0; --rule-soft:#C4D8EC}
html:has(body.editing){background:#D3E6F7}
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:var(--sans);
  font-size:13px;line-height:1.75}
h1,h2,h3{font-family:var(--sans);margin:0;font-weight:700}
a{color:var(--accent)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;font-weight:500}
.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:var(--sans);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)}
.tt-badge{display:inline-block;min-width:16px;margin-left:5px;padding:0 5px;border-radius:9px;background:var(--stop,#c0392b);color:#fff;font-size:11px;font-weight:700;line-height:16px;text-align:center;vertical-align:1px}
.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)}
.btn.del-record{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;min-width:0;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}
/* 一覧(.tw)の見た目は付けず、狭い画面で表だけを横に送る枠 */
.xscroll{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-row);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;font-weight:500}
.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;font-weight:500}
.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}
/* 表の上のページ送り。表との間を詰める。一覧では件数の行の右端に並べる */
.pager.pager-top{margin-top:0;padding-top:0}
.rhead .pager-top{padding:0;flex-shrink:0;white-space:nowrap;gap:14px;margin-left:auto}

/* 詳細 */
.rec-head{padding-top:22px}
.rec-head.rec-head-rest{padding-top:0}
.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)}
/* 「一覧へ戻る」の行の右端に置く検索窓(shared/_record_search)。分割画面の中では行ごと出さない */
.crumb-search{float:right;display:flex;align-items:center;gap:6px;height:28px;width:300px;max-width:40%;padding:0 10px;
  box-sizing:border-box;border:1px solid var(--rule);border-radius:14px;background:var(--paper);margin-top:-3px}
.crumb-search:focus-within{border-color:var(--accent)}
.crumb-search input{border:0;outline:0;flex:1;min-width:0;font:inherit;font-size:12.5px;background:transparent;color:var(--ink)}
.crumb-search input::placeholder{color:var(--ink-soft)}
.crumb::after{content:"";display:block;clear:both}
.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:calc(var(--topbar-h) + var(--rec-stick-h, 0px));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}
/* 未読の印(求職者の詳細の「partnerメール」タブ)。ベルの件数と同じ赤 */
.unread-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#dc2626;margin:0 6px 1px 4px;vertical-align:middle}
.pm-unread .row-title{font-weight:700}
/* 逆提案: 担当の CPCS がまだ確認していない行(ユーザー指示 2026-10-13) */
.rp-unread td{background:#fff4e5}
.rp-unread td:first-child{box-shadow:inset 3px 0 0 #dc2626}
.rp-unread-label{color:#dc2626}
.rp-tab-chip{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:10px;background:#f59e0b;color:#fff;font-size:11.5px;font-weight:700;vertical-align:middle}
.rp-banner{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:10px 14px;border:1px solid #f59e0b;border-left-width:5px;border-radius:6px;background:#fffbeb;color:#92400e;text-decoration:none;font-size:13.5px}
.rp-banner b{font-size:14.5px}.rp-banner .go{margin-left:auto;font-size:12.5px;text-decoration:underline}
.rp-banner.unread{border-color:#dc2626;background:#fef2f2;color:#b91c1c}
.rp-unread-note{margin-left:10px;font-size:12.5px;font-weight:700;color:#dc2626}
.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}
/* 項目名が長くて2行に折り返すと、その項目だけ値が下にずれる。項目名の行と値の行を
   親のグリッドと共有(subgrid)して、同じ行に並ぶ項目の値の位置を揃える。
   中身が項目名と値の2つに決まっている詳細画面の dl だけに効かせる(編集画面の .f は
   入力欄のほかに注記やボタンが入る項目があり、行数が一定でない) */
.fields > dl.f,.pairwrap > dl.f{grid-row:span 2;display:grid;grid-template-rows:subgrid;row-gap:1px}
.fields > dl.f > dt,.pairwrap > dl.f > dt{margin-bottom:0}
.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}

/* 編集 */
/* 文字を入れる入力欄は型をひとつずつ並べず :is() でまとめる。並べると足し忘れて、その型だけ
   ブラウザ既定の黒枠で出てしまう(時刻・URL・電話・メールがそうなっていた。ユーザー指示 2026-09-18) */
.f input:is([type="text"],[type="search"],[type="url"],[type="tel"],[type="email"],[type="password"],[type="number"],[type="date"],[type="datetime-local"],[type="month"],[type="week"],[type="time"]),.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}
/* 表の中で貼り付く列・見出し(.st-fix の z-index 1〜3)がバーの上に出ないよう、それより上に重ねる */
.editbar{position:sticky;bottom:0;z-index:5;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-row{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}
/* ヘッダーの帯を行で分ける。1行ぶんで幅いっぱいを使い、次の行は必ず下に折り返す */
.hfrow{display:flex;flex-wrap:wrap;gap:6px 28px;width:100%}
.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,.fd-users-line .fd-kw-input{flex:1;min-width:150px}
.fd-chips{display:contents}
.fd-user-warn:empty{display:none}
.fd-user-chip,.fd-kw-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:var(--sans);font-size:12px;font-weight:700;
  color:var(--ink-mid);margin:0 0 10px;padding-bottom:5px;border-bottom:1px solid var(--rule-soft)}
/* 連絡サブテーブルの編集 */
/* サブテーブル(マッチング・連絡など)。行が増えると画面がどこまでも縦に伸びて、
   下の項目やボタンが遠くなり、見出しの列名も画面の外に出ていた(ユーザー指示 2026-09-19)。
   高さを画面の6割ほどまでにして表の中で縦スクロールさせ、見出しは上に貼り付ける。
   行が少ないうちは今までと同じ見た目(max-height なので縮まない) */
.tw.st-scroll{max-height:min(620px, 62vh);overflow-y:auto;resize:vertical}
/* 右下をつまんで表を縦に広げられるようにする(kintone の欄と同じつまみ。現場の要望 2026-10-06)。
   つまんで高さが決まったら、上の上限を外してどこまでも広げられるようにする */
.tw.st-scroll[style*="height"]{max-height:none}
/* メモを書いているあいだは上限を外し、全文を表の中のスクロールなしで見せる(shared/_record_scripts、ユーザー指示 2026-10-01) */
.tw.st-scroll.memo-open{max-height:none}
.tw.st-scroll > table > thead > tr > th{position:sticky;top:0;z-index:2;background:var(--paper);
  /* 下に流れていく行と重ならないよう、貼り付いた見出しの下に線を引く */
  box-shadow:inset 0 -1px 0 var(--rule)}
/* 1行が縦に長く、一度に4〜5行しか見えなかったので上下の余白を詰める(ユーザー指示 2026-09-19) */
.tw.st-scroll > table > tbody > tr > td,.tw.st-scroll > table > tbody > tr > th{padding-top:4px;padding-bottom:4px}
.tw.st-scroll .contact-edit td{padding-top:4px;padding-bottom:4px}
/* 横スクロールしても左に貼り付けておく列(マッチングのオーダー名。ApplicationHelper::SUBTABLE_FIXED_COLUMNS)。
   左の列はこの下にもぐる。右に線を引いて、流れていく列との境目を見せる */
.tw.st-scroll .st-fix{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:inset -1px 0 0 var(--rule)}
.tw.st-scroll > table > thead > tr > th.st-fix{z-index:3;background:var(--paper);box-shadow:inset -1px 0 0 var(--rule),inset 0 -1px 0 var(--rule)}
.tw.st-scroll > table > tbody > tr:hover > td.st-fix{background:var(--ground)}
/* 固定する列が2つあるとき、2つ目は1つ目(マッチングステータス .c-status)の幅のぶん右に貼り付ける */
.tw.st-scroll .st-fix-2{left:7.5em}
.tw.st-scroll.ops-left .contact-edit .st-fix-2{left:calc(52px + 7.5em)}
/* マッチングの表の列幅(ユーザー指示 2026-10-09)。文字が潰れない範囲で幅を詰め、1画面に多くの列を入れる。
   見出しは折り返して(2行まで)幅を決めさせず、長い値(オーダー名・NG理由)は幅を決めて折り返す */
.st-compact > thead > tr > th{white-space:normal;line-height:1.3;vertical-align:bottom}
/* 列の右の余白を 12px から 8px に(33列あるので合わせて130px ほど詰まる) */
.tw.st-scroll > table.st-compact > thead > tr > th,.tw.st-scroll > table.st-compact > tbody > tr > td{padding-right:8px}
/* 表は width:max-content なので、min-width だけでは見出しの長さで列が広がる。width を決めて、見出しを折り返させる */
.st-compact .c-xs{width:4.4em;min-width:4.4em}
.st-compact .c-id{width:5.8em;min-width:5.8em;white-space:nowrap}
.st-compact th.c-date,.st-compact td.c-date{width:6.2em;min-width:6.2em}
.st-compact td.c-date{white-space:nowrap}
.st-compact .c-status{width:7.5em;min-width:7.5em;max-width:7.5em;white-space:normal;overflow-wrap:anywhere}
.st-compact .c-name{width:15em;min-width:15em;max-width:15em;white-space:normal;overflow-wrap:anywhere}
.st-compact .c-text{width:9em;min-width:9em;max-width:9em;white-space:normal;overflow-wrap:anywhere}
/* サブテーブルの編集表(現場の要望 2026-10-08)。全サブテーブル共通。
   ＋ − は左端に置いて貼り付け(横スクロールしても押せる)、先頭列を固定している表(マッチングのオーダー名)は
   その右に貼り付ける。幅は詰めず、文字だけ少し小さくして収める */
.tw.st-scroll.ops-left .contact-edit{font-size:11.5px}
.tw.st-scroll.ops-left .contact-edit th{font-size:10.5px;white-space:normal;line-height:1.25;vertical-align:bottom}
.tw.st-scroll.ops-left .contact-edit input,.tw.st-scroll.ops-left .contact-edit select,
.tw.st-scroll.ops-left .contact-edit textarea{font-size:11.5px}
.tw.st-scroll.ops-left .contact-edit .row-ops{position:sticky;left:0;z-index:1;box-sizing:border-box;width:52px;min-width:52px;max-width:52px;padding:3px 4px;
  background:var(--surface);box-shadow:inset -1px 0 0 var(--rule)}
.tw.st-scroll.ops-left .contact-edit th.row-ops{z-index:3;background:var(--paper);
  box-shadow:inset -1px 0 0 var(--rule),inset 0 -1px 0 var(--rule)}
.tw.st-scroll.ops-left .contact-edit tbody > tr:hover > td.row-ops{background:var(--ground)}
.tw.st-scroll.ops-left .contact-edit .st-fix{left:52px}
.tw.st-scroll.ops-left .row-op{width:20px;height:20px;font-size:14px}
.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)}
/* 日付の欄は、列が詰まっても 2026/09/30 の全体と日付ボタンが見える幅を取る(2026/09/3 で切れていた。2026-10-09) */
.contact-edit input[type="date"]{min-width:118px}
.contact-edit select{width:100%;min-width:110px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
/* サブテーブルの複数選択。表の中の縦スクロールで切れないよう、開いた選択肢は行の中に広げる */
.contact-edit .st-multi{min-width:160px}
.contact-edit .st-multi[open]>.cklist{position:static;min-width:0;box-shadow:none;grid-template-columns:1fr;max-height:none}
.contact-edit .st-multi .cklist label{white-space:nowrap}
.contact-edit .st-multi .cklist input[type=checkbox]{width:auto;border:0;padding:0}
/* 行の右端の ＋ −(kintone の表と同じ。shared/_subtable_row_ops) */
.contact-edit th.row-ops,.contact-edit td.row-ops{width:1%;white-space:nowrap;padding-right:0}
.row-op{width:22px;height:22px;border-radius:50%;border:1px solid var(--rule-row);background:#fff;color:var(--ink-mid);
  font:600 15px/1 system-ui,sans-serif;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.row-op + .row-op{margin-left:4px}
.row-op.add:hover{border-color:var(--accent);color:var(--accent)}
.row-op.del:hover{border-color:var(--stop);color:var(--stop)}

/* 絞り込みのダイアログ */
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)}
/* AI チェックの指摘があるまま送るときの確かめ(pfConfirmFindings) */
dialog.pf-confirm-findings{border:0;border-radius:8px;padding:18px 20px;width:min(560px,92vw);box-shadow:0 8px 40px rgba(0,0,0,.18);
  background:var(--surface);color:var(--ink)}
dialog.pf-confirm-findings::backdrop{background:rgba(20,25,31,.35)}
dialog.pf-confirm-findings h3{margin:0 0 10px;font-size:15px;color:var(--stop)}
dialog.pf-confirm-findings ul{margin:0 0 10px;padding-left:18px;max-height:50vh;overflow:auto;line-height:1.7}
.pf-confirm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.pf-confirm-actions .btn.pri{padding:7px 18px}
.pf-confirm-actions .pf-confirm-go{font-size:12px;color:var(--ink-soft);margin-right:auto}
dialog.pf-confirm-findings p.sub{margin:0 0 10px;color:var(--stop);font-weight:600}
/* 依頼系のポップアップ(提案先探索・新規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:is([type="text"],[type="search"],[type="url"],[type="tel"],[type="email"],[type="password"],[type="number"],[type="date"],[type="datetime-local"],[type="month"],[type="week"],[type="time"]){
  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;position:sticky;bottom:0;background:var(--surface);z-index:2}
.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}
/* 一覧をその場で絞り込む小さな入力欄(名簿の「名前・グループで探す」など)。
   インラインの下線スタイルで書かれていて、ほかの入力欄と見た目が違っていた(ユーザー指示 2026-09-18) */
.list-filter{font:inherit;font-size:12.5px;color:var(--ink);border:1px solid var(--rule);
  border-radius:4px;padding:5px 8px;background:var(--paper)}
.list-filter:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);outline:0}
/* ダイアログの中の単独の入力欄(SMSの本文・ビューの名前)。.f に入っていないので枠が付かず、
   ブラウザ既定の見た目で浮いていた(ユーザー指示 2026-09-18) */
.fd-input{width:100%;box-sizing:border-box;font:inherit;font-size:13.5px;color:var(--ink);
  border:1px solid var(--rule);border-radius:4px;padding:5px 8px;background:var(--paper)}
.fd-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);outline:0}
.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)}
/* 一覧のセルから直すダイアログ(求職者)。入力欄は編集画面と同じ部品 */
.list-edit-dialog{max-width:560px;width:min(560px,92vw);border:1px solid var(--rule);border-radius:10px;padding:0}
.list-edit-dialog .le-head{padding:14px 18px;border-bottom:1px solid var(--rule);display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.list-edit-dialog .le-head strong{font-size:16px}
.list-edit-dialog .le-body{padding:12px 18px;display:flex;flex-direction:column;gap:10px}
.list-edit-dialog .le-body .f{width:100%}
.list-edit-dialog .le-foot{padding:10px 18px 14px;display:flex;gap:8px;justify-content:flex-end}
/* 地図のピンの凡例。色だけ出ていても何色が何なのか分からないので添える */
/* 地図の上に出しておく地点と半径の欄。半径を変えて見ることが多いので、
   「オーダーを検索する」を開かずにここで変えられるようにする(ユーザー指示 2026-09-19) */
.odmap-loc{margin-top:10px;gap:12px}
.odmap-loc .btn{padding:5px 12px}
.odmap-loc .sub{align-self:center}
.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 .w{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
.comment .cmt-acts{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:4px}
.cmt-act{border:0;background:none;color:var(--ink-soft);cursor:pointer;font:inherit;font-size:11px;padding:0 2px;
  white-space:nowrap}
.cmt-act:hover{color:var(--accent);text-decoration:underline}
/* 編集・削除は「⋯」のメニューにまとめる */
.cmt-menu{position:relative;display:inline-block}
.cmt-menu summary{list-style:none;font-size:14px;line-height:1;padding:0 4px;letter-spacing:1px}
.cmt-menu summary::-webkit-details-marker{display:none}
.cmt-menu-pop{position:absolute;right:0;top:100%;z-index:60;margin-top:2px;min-width:84px;padding:4px;
  background:var(--paper);border:1px solid var(--rule);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.cmt-menu-pop form{display:block;margin:0}
.cmt-menu-item{display:block;width:100%;text-align:left;border:0;background:none;font:inherit;font-size:12px;
  color:var(--ink);padding:5px 8px;border-radius:4px;cursor:pointer;white-space:nowrap}
.cmt-menu-item:hover{background:var(--accent-soft);color:var(--accent)}
.cmt-menu-item.cmt-del:hover{background:rgba(185,28,28,.06);color:var(--stop)}
/* ピン留めはピンのアイコン。留めているものは青で塗る */
.cmt-pin{display:inline-flex;align-items:center;align-self:center;padding:0 3px}
.cmt-pin:hover,.cmt-menu summary:hover{text-decoration:none}
.cmt-pin.on{color:var(--accent)}
.cmt-pins-h svg{vertical-align:-2px}
.cmt-edited{cursor:help;white-space:nowrap}
.cmt-edit-form{margin-top:4px}
.cmt-edit-btns{display:flex;gap:6px;margin-top:4px}
/* ピン留めしたコメント。ほかの人が書いても流れないよう、書く欄の下にまとめて薄い色の枠で出す */
.cmt-pins{margin-top:10px;padding:2px 10px;background:var(--accent-soft);border-radius:6px}
.cmt-pins-h{font-size:11px;font-weight:600;color:var(--accent);padding-top:6px}
.cmt-pins .comment:last-child{border-bottom:0}
/* 消したコメント。行は残し、誰がいつ消したかだけを薄く出す */
.comment.gone .b{color:var(--ink-soft);font-size:11.5px}
/* コメントに貼られた URL。長くても欄の幅で折り返す(狭いレールに出るので) */
.comment .b a{overflow-wrap:anywhere}
/* コメントの @メンション。書いた人・呼ばれた人の両方が一目で分かるように色を付ける */
.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-mirror)で描き、本物の文字は透明にしてカーソルだけ残す */
.cmt-box{--cmt-ink:var(--ink)}
.cmt-has-mirror>textarea{display:block;color:transparent;caret-color:var(--cmt-ink);position:relative;z-index:0}
.cmt-has-mirror>textarea::placeholder{color:var(--ink-soft)}
.cmt-mirror{position:absolute;box-sizing:border-box;margin:0;border:solid transparent;overflow:hidden;
  white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;color:var(--cmt-ink);pointer-events:none;z-index:1}
.cmt-mirror .cmt-mn{color:var(--accent)}
/* 「@」で出る担当者の候補。入力欄の真下に重ねる */
.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,.11);font-size:13px;font-weight:600}
/* 営業所の次回アクションが今日以降に入っている知らせ。黄色い地の上でも目立つよう濃い黄色にする */
.warnbar.ahead{color:#6B4E00;border-left-width:5px;border-left-color:#C99700;background:#FFE58F;font-size:13px}
/* 営業所の商談ステータスが契約を含む知らせ(地のオレンジに合わせる) */
.missing-goto{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.missing-goto:disabled{text-decoration:none;cursor:default}
.warnbar.contract{color:#8A4300;border-left-width:5px;border-left-color:#E07B1F;background:#FFD2A6;font-size:13px}
/* 新着の求人情報一覧の注意書き(契約から4ヶ月以内・覚書など)。薄い灰色だと見落とすので、黄色の地に濃い字で出す */
.ats-alert{margin-top:6px;padding:4px 8px;max-width:320px;white-space:normal;font-size:12px;font-weight:600;line-height:1.5;
  color:#6B4E00;background:#FFF3C4;border-left:4px solid #C99700;border-radius:3px}
.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}
/* 都道府県の複数選択の上の地方ボタン(shared/pref_areas)。押すとその地方の県をまとめて選ぶ */
.pref-areas{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.pref-area{font:inherit;font-size:12px;line-height:1.4;padding:2px 8px;border:1px solid var(--rule);border-radius:999px;
  background:var(--paper);color:var(--ink-mid);cursor:pointer;white-space:nowrap}
.pref-area:hover{border-color:var(--accent);color:var(--accent)}
.pref-area[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.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}
/* オーダーIDを指定して追加する: 足すオーダーを1件ずつ札にして並べる */
.od-chips{display:flex;flex-wrap:wrap;gap:6px}
.od-chips:empty{display:none}
.od-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 6px 3px 10px;border:1px solid var(--rule);
  border-radius:999px;background:var(--paper);font-size:12px;color:var(--ink)}
.od-chip .nm{color:var(--ink-mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.od-chip.miss{border-color:var(--stop)}
.od-chip.miss .nm{color:var(--stop)}
.od-chip button{border:0;background:none;padding:0 4px;color:var(--ink-soft);cursor:pointer;font-size:14px;line-height:1}
.od-chip button:hover{color:var(--stop)}
.od-kind{display:flex;gap:16px;font-size:13px}
.od-kind label{display:inline-flex;align-items:center;gap:4px;font-weight:normal}
.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)}
/* 条件を満たさず選べないあいだ(作成依頼のスカウト通知_セールス)。読み取り専用の欄(.f .ro)と同じ見た目にする */
.f.is-off .mselect>summary{pointer-events:none;cursor:default;color:var(--ink-mid);border-style:dashed;background:var(--ground)}
.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%;font:inherit;font-size:12.5px;
  color:var(--ink);border:1px solid var(--rule);border-radius:4px;padding:5px 8px;background:var(--paper)}
.sug-tools input[type=search]:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);outline:0}
.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}
/* 地図の全画面ボタン(map_fullscreen_button。記号だけ)。全画面のあいだは ✕ を目立たせて、閉じ方が分かるようにする */
.map-fs-btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.map-fs-btn.on:hover{background:var(--accent);color:#fff;opacity:.9}
/* 「広げる ⇄ 戻す」の記号ボタン。文字(拡大・全画面)だと幅を取って「拡 / 大」と折り返す */
.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:250;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}
/* 半径の外にあるオーダー。一覧にも件数にも入れず、地図に薄いピンで出すだけ
   (少し外にある良いオーダーに気づけるように。ユーザー指示 2026-09-19)。
   小さい点だと色が分からず見落とすので、中と同じピンを薄くする(ユーザー指示 2026-09-25) */
.odpin-out{opacity:.5}
.odmap-legend i.odlegend-out{opacity:.5}
/* 白いピン(その他の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)}
.odchip.pale{border-color:#9AA1AB}
.odpop{display:grid;gap:6px;font-size:12.5px;max-width:290px}
/* オーダー名はオーダー詳細へのリンク。Leaflet の薄い水色だとリンクと気づかれなかったので、
   アプリのリンク色の太字にする(ユーザー指示 2026-09-26) */
.odpop>a[href]{color:var(--accent);font-weight:700;font-size:13px}
.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}
/* 重なりの一覧は高さを決めてスクロールにする。全部を並べると吹き出しが地図より高くなり、
   Leaflet が吹き出しを収めようと地図を大きく動かして、見ていた場所から飛んでいた(ユーザー指示 2026-10-15) */
.odpop-list{display:grid;gap:6px;width:290px;max-width:100%;max-height:min(260px,30vh);overflow-y:auto;padding-right:4px}
.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-back{justify-self:start;border:none;background:none;cursor:pointer;padding:0;
  color:var(--accent);font-size:12px}
.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}
/* オーダー名・職種カテゴリは長いので幅を決めて省略する(全文は title) */
.hires-table .hires-od{max-width:22em;overflow:hidden;text-overflow:ellipsis}
.hires-table .hires-cat{max-width:11em;overflow:hidden;text-overflow:ellipsis}
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:250;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情報メモ×案件クローズメモ、書類回収の 添付×リンク×回収日)。
   列数は --pair-cols で変える(幅の指定を1か所にまとめ、狭い画面の1列化をそのまま効かせるため) */
.pairwrap{grid-column:1/-1;display:grid;grid-template-columns:var(--pair-cols,1fr 1fr);gap:18px 32px}
/* 書類回収の3列。kintone と同じく 添付を広く、回収日を狭く取る */
.pairwrap.cols3{--pair-cols:1.6fr 1.3fr 1fr}
/* 面接同席・労働条件書の4列。kintone のフォームの幅(196/256/193/148px)の比に合わせる */
.pairwrap.cols4{--pair-cols:196fr 256fr 193fr 148fr}
/* EU情報メモは少し広めに取る(半分だと変なところで折り返す)。
   案件クローズメモとは詳細・編集とも kintone と同じく2つ横並び(2026-10-13 修正依頼44) */
.pairwrap.wide-first{--pair-cols:1fr 1fr}
/* 半分の幅でも変なところで折り返さないよう、文字を小さくして1行に入る字数を増やす(ユーザー提案 2026-10-13) */
.pairwrap.wide-first dd.pretext,.pairwrap.wide-first textarea{font-size:12px;line-height:1.6;max-width:none}
.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}
/* 架電通知のメンション先グループ。モーダルは中身がはみ出すとスクロールになり、プルダウンが小さく切れていた。
   はみ出しを許し、プルダウンを白枠の下まで大きく伸ばす(ユーザー指摘 2026-10-06) */
#call-notify-dialog[open]{overflow:visible}
#call-notify-dialog .mselect[open]>.cklist{left:0;right:0;min-width:0;grid-template-columns:1fr;
  max-height:calc(100vh - 420px);overflow:auto}
.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-row:has(.att-img){align-items:flex-end}
.att-img img{display:block;max-width:min(100%,520px);max-height:360px;border:1px solid var(--rule);border-radius:4px;background:#fff}
.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)}
/* 数字と見出しは右寄せ(桁がそろって読みやすい。現場の要望 2026-10-19)。行の見出しは左のまま */
.mt-table thead th:not(:first-child),.mt-table tbody td{text-align:right;padding:6px 0 6px 28px}
/* 提案・打診など時刻を持たない指標は、時間帯の折れ線ではなく今日の件数の横棒で出す */
.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-row);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(--surface);text-align:left;z-index:1;font-weight:600}
.dash-table thead .dt-label{z-index:3}
/* 表の中身は白(ユーザー指示 2026-09-28)。ALL 列は色でなく太字と左右の太い線で分ける */
.dash-table td{background:var(--surface)}
.dash-table .dt-all{background:var(--surface);font-weight:700;border-left:2px solid var(--rule-row);border-right:2px solid var(--rule-row)}
.dash-table .dt-rate td,.dash-table .dt-rate th{color:var(--ink-soft)}
.dash-table.dt-only-count tr.dt-rate,.dash-table.dt-only-rate tbody tr:not(.dt-rate){display:none}
/* 目標タブ。月次の予実と展開率を横に並べ、狭い画面では縦に落とす */
.goal-grid{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
.goal-grid>.tw{max-width:100%;overflow-x:auto}
.tw .goal-table,.goal-table{width:auto;min-width:0}
/* 数字が詰まって見えないよう、ほかの表より余白を広めにとる(ユーザー指示 2026-09-25) */
.dash-table.goal-table th,.dash-table.goal-table td{padding:7px 16px}
.goal-table .goal-in{width:84px;text-align:right;font:inherit;padding:2px 4px;border:1px solid var(--rule);border-radius:4px;background:var(--paper,#fff);color:var(--ink)}
.goal-table .goal-short{color:var(--stop)}
.goal-table .goal-off{color:var(--ink-soft);background:var(--ground)}
.goal-table .goal-now{background:var(--accent-soft,#eef3fb)}
.goal-list td,.goal-list th{text-align:left}
.goal-list td.goal-num{text-align:right}
/* シートのタブにあたる「月次目標・半期目標・成約実績一覧」 */
.goal-tabs{display:flex;gap:4px;margin-top:14px;border-bottom:1px solid var(--rule)}
.goal-tabs a{padding:6px 14px;font-size:13px;color:var(--ink-soft);text-decoration:none;border:1px solid transparent;border-bottom:0;border-radius:6px 6px 0 0;margin-bottom:-1px}
.goal-tabs a.on{color:var(--ink);font-weight:600;background:var(--paper,#fff);border-color:var(--rule)}
.goal-range{margin-top:12px}
.goal-range a{padding:5px 12px;font-size:12.5px;color:var(--accent);text-decoration:none}
.goal-range a+a{border-left:1px solid var(--accent)}
.goal-range a.on{background:var(--accent);color:#fff}
/* シート上の「名前・対象月・営業日…」の行 */
.goal-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin:12px 0 0;font-size:13px}
.goal-meta>div{display:flex;gap:8px;align-items:baseline}
.goal-meta dt{color:var(--ink-soft);font-size:11.5px}
.goal-meta dd{margin:0;font-weight:600}
.goal-edit{margin-top:12px}
.goal-edit>summary{font-size:12.5px;color:var(--accent);cursor:pointer}
/* 1つの表の中の区切り(予実｜展開率｜翌日からの指標) */
.goal-table .goal-sep{border-left:2px solid var(--rule)}
/* 月次予実管理の3つの表のあいだ(シートのD列・J列)。線も背景も無しで空ける */
.dash-table.goal-month .goal-gap{border:0;background:transparent;width:28px;min-width:28px;padding:0}
.dash-table.goal-month tbody tr:nth-child(odd) .goal-gap{background:transparent}
.goal-table .goal-input{background:#fdecea}
.goal-table select.goal-in{width:84px;text-align:right}
.goal-table select.goal-rate{width:auto;min-width:84px}
/* 展開率の目標は候補つきの数の入力(小数点1桁まで) */
.goal-table input.goal-rate{width:96px}
.goal-table .goal-pct{margin-left:2px;color:var(--ink-soft)}
.goal-table .goal-rate-group th{background:var(--ground);font-weight:600}
.goal-week tbody+tbody .goal-week-head>*{border-top:2px solid var(--rule)}
.goal-week .goal-week-head th{background:var(--ground);font-weight:600}
/* SL目標・RA目標。金額の目標は桁が多いので欄を広く。年度の推移は12か月＋累計・年度計が横に並ぶので詰め、
   指標・区分の列は横に送っても残す */
.goal-table .goal-in.goal-yen{width:110px}
.dash-table.role-goal th,.dash-table.role-goal td{padding:4px 8px;font-size:12.5px}
.role-goal .rg-metric{position:sticky;left:0;z-index:2;width:104px;min-width:104px;background:var(--paper,#fff);vertical-align:top}
.role-goal .rg-kind{position:sticky;left:104px;z-index:2;width:48px;min-width:48px;background:var(--paper,#fff)}
.role-goal thead .rg-metric,.role-goal thead .rg-kind{z-index:3}
.role-goal tbody tr.rg-first+tr+tr+tr.rg-first>*{border-top:2px solid var(--rule)}
.dash-table.role-goal .dt-rate td.goal-short{color:var(--stop)}
.dash-table.role-goal-people th,.dash-table.role-goal-people td{padding:5px 10px}
/* ヨミ表の目次。表を全部開くと画面が数千pxになるので、上に貼り付いたまま見出しへ飛べるようにする
   (ユーザー指示 2026-09-19)。節そのものは details で畳める */
.fc-toc{position:sticky;top:var(--topbar-h);z-index:50;display:flex;gap:10px;align-items:center;
  flex-wrap:wrap;padding:8px 0;margin-top:14px;background:var(--paper);border-bottom:1px solid var(--rule)}
/* 目次(z-index:50)より上に出さないと、担当者などの絞り込みを開いたときに下半分が目次に隠れる。
   上に貼り付くタブ(60)と上部バー(200)よりは下にしておく */
.dash-filters .mselect[open]>.cklist{z-index:55}
.fc-toc-links{display:flex;gap:6px;flex-wrap:wrap}
.fc-toc-link{display:inline-flex;align-items:baseline;gap:5px;font-size:12.5px;color:var(--ink-mid);
  text-decoration:none;border:1px solid var(--rule);border-radius:999px;padding:3px 10px;background:var(--paper)}
.fc-toc-link:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.fc-toc-link b{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-weight:600}
.fc-toc-all{margin-left:auto;border:0;background:none;color:var(--accent);font:inherit;
  font-size:12.5px;cursor:pointer}
.fc-toc-all:hover{text-decoration:underline}
/* ヨミ表の内訳(シートの円グラフの代わり)。切り口ごとに提案・打診・成約の3本の帯と、割合の表。
   色は項目の多い順に1〜7番、残りの「その他」は灰色。帯の間は2pxあけて境目を見えるようにする */
.fc-bd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:28px 36px}
@media (max-width:520px){.fc-bd-grid{grid-template-columns:1fr}}
.fc-bd h4{font-size:14px;margin:0 0 10px}
.fc-bd-bars{display:grid;gap:6px;margin-bottom:12px}
.fc-bd-row{display:grid;grid-template-columns:7.5em 1fr;align-items:center;gap:10px}
.fc-bd-stage{font-size:12.5px;color:var(--ink-mid);white-space:nowrap}
.fc-bd-stage b{margin:0 2px 0 6px;color:var(--ink);font-variant-numeric:tabular-nums}
/* 帯の中に項目名と割合を書く。地の色で読める文字色を分ける(青・橙・緑・紫は白、水色・黄・桃・灰は黒) */
.fc-bd-bar{display:flex;gap:2px;height:24px;border-radius:4px;overflow:hidden;background:var(--rule-soft)}
.fc-bd-seg{flex-basis:0;min-width:2px;overflow:hidden;white-space:nowrap;
  padding:0 6px;font-size:11.5px;font-weight:600;line-height:24px;color:#fff;transition:opacity .12s}
.fc-bd .s1{background:#2a78d6}.fc-bd .s2{background:#eb6834}.fc-bd .s3{background:#1baf7a}
.fc-bd .s4{background:#eda100}.fc-bd .s5{background:#e87ba4}.fc-bd .s6{background:#008300}
.fc-bd .s7{background:#4a3aa7}.fc-bd .s0{background:#b4b8bd}
.fc-bd-seg.s3,.fc-bd-seg.s4,.fc-bd-seg.s5,.fc-bd-seg.s0{color:#111}
/* マウスを乗せた項目だけを濃く(ほかは薄く)する */
.fc-bd[data-hl] .fc-bd-seg:not(.on){opacity:.28}
.fc-bd[data-hl] .fc-bd-table tr[data-k]:not(.on){opacity:.45}
.fc-bd-table tr[data-k]{transition:opacity .12s}
/* 表は既定で min-width:860px なので、2列に並べる箱に収まるよう外す */
.fc-bd-table{width:100%;min-width:0;border-collapse:collapse;font-size:12.5px}
.fc-bd-table th,.fc-bd-table td{padding:4px 6px;border-bottom:1px solid var(--rule-soft);font-size:12.5px;letter-spacing:0}
.fc-bd-table thead th{color:var(--ink-soft);font-weight:600;text-align:right;border-bottom:1px solid var(--rule)}
.fc-bd-table tbody th{text-align:left;font-weight:500;color:var(--ink)}
.fc-bd-table td{text-align:right;width:5.5em;white-space:nowrap}
.fc-bd-table td small{display:inline-block;min-width:2.8em;margin-left:4px;color:var(--ink-soft)}
.fc-bd-key{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.fc-bd-more{margin-top:6px;border:0;background:none;padding:0;color:var(--accent);font:inherit;font-size:12.5px;cursor:pointer}
.fc-bd-more:hover{text-decoration:underline}
/* 目次から飛んだときに、上の帯と目次で見出しが隠れないようにする */
[data-fc-sec]{scroll-margin-top:calc(var(--topbar-h) + 52px)}
/* ヨミ表の案件一覧。表の中でスクロールさせず全件を並べるので、
   担当者が変わる位置の区切り線で行を追えるようにする。1行おきの色分けはやめて白一色(ユーザー指示 2026-09-28) */
.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}
/* 職種カテゴリは長いので1行に収め、押すと全部出す */
.case-table .fc-fold{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.case-table .fc-fold.open{white-space:normal;overflow:visible}
/* 見出しを押して並べ替える */
.case-table th.fc-sort{cursor:pointer;user-select:none}
.case-table th.fc-sort:hover{color:var(--accent)}
.case-table th[data-dir=asc]::after{content:" ▲";font-size:10px}
.case-table th[data-dir=desc]::after{content:" ▼";font-size:10px}
/* 担当者ごとの色(複数の担当者が並ぶとき)。色相は行ごとに --oh で渡す */
/* 担当の列は横スクロールで貼り付くので、半透明のままだと下を通る列の文字が透けて重なる。同じ色を白地の上に重ねて不透明にする */
.case-table th.fc-owner{background:linear-gradient(hsl(var(--oh) 70% 50% / .16),hsl(var(--oh) 70% 50% / .16)),var(--surface);box-shadow:inset 4px 0 0 hsl(var(--oh) 60% 45%)}
/* 一覧共通の指定(.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}
/* ヨミ表の期間(開始月〜終了月)と、よく使う期間のボタン */
.fc-period{display:inline-flex;align-items:center;gap:6px;color:var(--ink-mid)}
.fc-presets{display:flex;gap:6px;flex-wrap:wrap;align-self:flex-end;padding-bottom:3px}
.fc-preset{font-size:12.5px;color:var(--ink-mid);text-decoration:none;border:1px solid var(--rule);border-radius:999px;
  padding:3px 10px;background:var(--paper)}
.fc-preset:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.fc-preset.on{border-color:var(--accent);background:var(--accent-soft,#eef3fb);color:var(--accent);font-weight:600}
/* 絞り込みの並び(領域・チーム・担当者の選択肢と、内訳・月)は横に並ぶので、
   選択肢(.mselect>summary)と同じ大きさの枠付きボックスに揃える。
   .f の入力欄スタイルに負けないよう .dash-filters .f も並べて書く(ユーザー指示 2026-09-18) */
.dash-filters select,.dash-filters .f select,.dash-filters input,.dash-filters .f input:is([type="text"],[type="search"],[type="url"],[type="tel"],[type="email"],[type="password"],[type="number"],[type="date"],[type="datetime-local"],[type="month"],[type="week"],[type="time"]){
  font:inherit;font-size:12.5px;color:var(--ink);border:1px solid var(--rule);border-radius:4px;
  background:var(--paper);padding:4px 8px;outline:0;max-width:190px;width:auto}
.dash-filters select:focus,.dash-filters .f select:focus,.dash-filters input:focus,.dash-filters .f input:focus{
  border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
/* 中身(文字・プルダウンの印・日付の時計)で高さが変わるので、3種とも同じ高さに固定する */
.dash-filters select,.dash-filters .f select,.dash-filters input:not([type=checkbox]),
.dash-filters .f input:not([type=checkbox]),.dash-filters .mselect>summary{
  height:30px;box-sizing:border-box;line-height:1.4}
.dash-filters .mselect>summary{display:flex;align-items:center;border-radius:4px;background:var(--paper)}
/* プルダウンの中の選択肢(チェック・ラジオ)には入力欄の枠や高さを付けず、印と名前を横に並べる。
   ラジオ(CPCS目標の担当者)に高さ30pxの枠が付き、名前が下の行に落ちていた */
.dash-filters .cklist label{display:flex;gap:6px;align-items:center;color:var(--ink);font-size:12.5px;margin:0}
.dash-filters .cklist input:is([type=checkbox],[type=radio]){height:auto;width:auto;max-width:none;padding:0;
  margin:0;border:0;box-shadow:none;flex:none}
/* ログインボタン。押せることが分かる見た目にする */
.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-card .tc-old{font-size:14px;font-weight:500;color:var(--ink-soft);margin-left:2px}
.dr-items{margin-top:12px;font-size:12.5px}
.dr-items>summary{cursor:pointer;color:var(--accent)}
.dr-item-row{display:flex;gap:6px;align-items:center;margin-top:6px}
.dr-item-row input[type=text]{flex:1;min-width:0;padding:4px 6px;border:1px solid var(--rule);border-radius:4px;font:inherit}
.dr-mini{padding:2px 7px;border:1px solid var(--rule);border-radius:4px;background:#fff;cursor:pointer}
.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-cat+.hintq{margin:0 8px 0 -4px}
.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;gap:10px;align-items:center;padding-left:6px}
.task-done-form{display:flex}
/* まとめて完了にするときのチェック(丸の左) */
.task-pick{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--accent)}
.task-pick-sp{width:16px}
/* チェックは「まとめて選ぶ」のときだけ。ふだんは完了の丸だけ(並ぶと見分けにくい)。選んでいる間は丸と入れ替える */
.task-pick,.task-pick-sp{display:none}
.task-list.picking .task-pick{display:inline-block}
.task-list.picking .task-pick-sp{display:inline-block}
.task-list.picking .task-done-form,.task-list.picking .task-done.off{display:none}
.task-pick-toggle{margin-top:6px}
.task-bulk-bar{margin-top:4px}
.task-bulk-bar label{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.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)。黒地は読みにくいと言われたので白地に濃い字で出し、
   話が2つ以上なら行頭に点を付けて話の切れ目を見せる。折り返しは文節で切る(「確/認します」にしない) */
.help-pop{position:fixed;z-index:400;max-width:min(400px,calc(100vw - 24px));padding:10px 14px;background:#fff;color:var(--ink);
  border:1px solid var(--rule);border-radius:8px;font-size:13px;line-height:1.6;
  box-shadow:0 8px 24px rgba(0,0,0,.18);word-break:auto-phrase;text-wrap:pretty}
.help-pop .help-line+.help-line{margin-top:4px}
.help-pop.multi .help-line{position:relative;padding-left:14px}
.help-pop.multi .help-line::before{content:"";position:absolute;left:2px;top:.68em;width:5px;height:5px;
  border-radius:50%;background:var(--accent)}
.help-pop .help-line:empty{height:.4em}
.help-pop .help-line:empty::before{display:none}
.help-pop .help-head{font-weight:600}
.help-pop[hidden]{display:none}
.help-pop a{color:var(--accent);text-decoration:underline}
.help-pop .help-line+a{display:block;margin-top:8px;padding-top:6px;border-top:1px solid var(--rule-soft)}
/* サイドバーのボタンは全部同じ形・同じ高さ。主要なものだけ塗りつぶす
   (枠付きだけ角が四角く、上下の余白も違っていた。ユーザー指示 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}
/* 採用管理アプリのアカウント。ID・パスワード・補足情報は「…」で切らずに折り返す。長い補足情報は押すと全文を開く */
.ats-table td{vertical-align:top;overflow:visible;text-overflow:clip}
.ats-table td .mono{overflow-wrap:anywhere}
.ats-note{white-space:pre-line;overflow-wrap:anywhere;line-height:1.55}
.ats-note-more>summary{cursor:pointer;list-style:none}
.ats-note-more>summary::-webkit-details-marker{display:none}
.ats-note-toggle{color:var(--accent);margin-left:6px;white-space:nowrap}
.ats-note-toggle::after{content:"全文を見る"}
.ats-note-more[open] .ats-note-head{display:none}
.ats-note-more[open] .ats-note-toggle::after{content:"閉じる"}
.ats-note-more[open]>summary{float:right;margin-left:6px}
/* 履歴・更新タブ */
.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}
/* 条件を外すボタン。丸い22pxの的は、選択肢がたくさん並んで背が高くなった行では狙いにくく、
   何件も外すのに1つずつ狙う必要があった。行の高さいっぱいの縦の棒にして、
   同じあたりを続けて押せば次々に外せるようにする(ユーザー指示 2026-09-19) */
.fd-row.cond .fd-del{align-self:stretch;width:26px;height:auto;min-height:36px;border-radius:6px;
  border:1px solid var(--rule);font-size:15px;display:flex;align-items:center;justify-content:center}
.fd-row.cond .fd-del:hover{background:var(--stop-soft,#fbeaea);border-color:var(--stop);color:var(--stop)}
.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}
/* 長い URL が枠からはみ出さないよう、リンクは枠の幅で省略する(クリックはそのまま効く) */
.f .ro{overflow:hidden;overflow-wrap:anywhere}
.f .ro a{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.f .lk-tag{font-size:10.5px;font-weight:500;color:var(--accent);border:1px solid var(--accent);border-radius:3px;padding:0 4px;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:calc(var(--topbar-h) + var(--rec-stick-h, 0px))}
/* 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%}
/* partnerメールの添付ファイル。PDF・画像は「ここで見る」で中身を出す */
.pm-att{border-top:1px solid var(--rule);padding:8px 0}
.pm-att:first-of-type{border-top:0}
.pm-att-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}
.pm-att-row .sp{flex:1}
.pm-att-ext{font-size:10.5px;padding:1px 6px;border:1px solid var(--rule);border-radius:3px;color:var(--ink-mid)}
.pm-att-name{overflow-wrap:anywhere;min-width:0}
.pm-att-preview>summary{cursor:pointer;font-size:12px;margin-top:4px}
.pm-att-preview iframe{display:block;width:100%;max-width:900px;height:70vh;margin-top:6px;border:1px solid var(--rule);border-radius:6px;background:#fff}
.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}
/* 求職者詳細の架電要約。要約を最初から出し、右上のボタンで ヒアリングメモ・音声FB に切り替える(ラジオだけで切り替える) */
.cs2{border-bottom:1px solid var(--rule-soft);padding:8px 0 10px}
.cs2-r{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.cs2-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12.5px}
.cs2-seg{margin-left:auto;display:inline-flex;border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.cs2-l{padding:2px 10px;font-size:12px;color:var(--ink-soft);cursor:pointer;user-select:none;background:#fff}
.cs2-l+.cs2-l{border-left:1px solid var(--rule)}
.cs2-l:hover{background:var(--rule-soft)}
.cs2-l.off{color:var(--rule-row);cursor:default;background:#fff;text-decoration:line-through}
.cs2-l.off:hover{background:#fff}
.cs2-p{display:none;margin-top:6px;font-size:13.5px}
.cs2-r-s:checked~.cs2-panes .cs2-p-s,.cs2-r-h:checked~.cs2-panes .cs2-p-h,.cs2-r-v:checked~.cs2-panes .cs2-p-v{display:block}
.cs2-r-s:checked~.cs2-head .cs2-l-s,.cs2-r-h:checked~.cs2-head .cs2-l-h,.cs2-r-v:checked~.cs2-head .cs2-l-v{background:var(--ink);color:#fff}
/* 架電要約の場面のタグ。上の帯で選んだタグの行だけを出す(:has で切り替える) */
.cst-r{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.cst-bar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:4px 0 6px}
.cst-l{padding:2px 10px;font-size:12px;color:var(--ink-soft);border:1px solid var(--rule);border-radius:999px;cursor:pointer;user-select:none;background:#fff}
.cst-l:hover{background:var(--rule-soft)}
.cs-list:has(.cst-r-all:checked) .cst-l-all,.cs-list:has(.cst-r-active:checked) .cst-l-active,.cs-list:has(.cst-r-proposal:checked) .cst-l-proposal,.cs-list:has(.cst-r-proposal_ok:checked) .cst-l-proposal_ok,.cs-list:has(.cst-r-documents:checked) .cst-l-documents,.cs-list:has(.cst-r-schedule:checked) .cst-l-schedule,.cs-list:has(.cst-r-interview:checked) .cst-l-interview,.cs-list:has(.cst-r-result:checked) .cst-l-result,.cs-list:has(.cst-r-joining:checked) .cst-l-joining,.cs-list:has(.cst-r-trouble:checked) .cst-l-trouble{background:var(--ink);color:#fff;border-color:var(--ink)}
/* タグを足したら CallSummaryTags::TAGS と、ここの並びの両方に足す(test/lib/call_summary_tags_test.rb で確かめている) */
.cs-list:has(.cst-r-active:checked) .cs2:not(.t-active),.cs-list:has(.cst-r-proposal:checked) .cs2:not(.t-proposal),.cs-list:has(.cst-r-proposal_ok:checked) .cs2:not(.t-proposal_ok),.cs-list:has(.cst-r-documents:checked) .cs2:not(.t-documents),.cs-list:has(.cst-r-schedule:checked) .cs2:not(.t-schedule),.cs-list:has(.cst-r-interview:checked) .cs2:not(.t-interview),.cs-list:has(.cst-r-result:checked) .cs2:not(.t-result),.cs-list:has(.cst-r-joining:checked) .cs2:not(.t-joining),.cs-list:has(.cst-r-trouble:checked) .cs2:not(.t-trouble){display:none}
/* 録音の再生。スマホでも押しやすい高さで、横幅いっぱいまで */
.cs2-audio{display:block;width:100%;max-width:520px;height:36px;margin-top:6px}
/* 録音の下の「全文」「共有リンク」ボタン。押せると分かるよう枠のあるボタンにする */
.cs2-tools{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin-top:6px}
.cs2-btn{font:inherit;font-size:12.5px;padding:3px 12px;border:1px solid var(--rule);border-radius:6px;background:#fff;color:var(--accent);cursor:pointer}
.cs2-btn:hover{background:var(--rule-soft)}
.cs2-btn[aria-expanded=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.cs2-btn:disabled{opacity:.6;cursor:default}
/* 通話の行の右上の「⋯」。押すと右寄せで操作の一覧が開く */
.cs2-more{position:relative}
.cs2-more>summary{list-style:none;cursor:pointer;padding:0 8px;font-size:16px;line-height:24px;border:1px solid var(--rule);border-radius:6px;background:#fff;color:var(--ink-soft);user-select:none}
.cs2-more>summary::-webkit-details-marker{display:none}
.cs2-more>summary:hover,.cs2-more[open]>summary{background:var(--rule-soft);color:var(--ink)}
.cs2-more-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:20;width:300px;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--rule);
  border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.12);padding:10px 12px;font-size:12.5px}
.cs2-more-h{font-weight:600;margin-bottom:6px}
.cs2-more-pop form{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.cs2-more-pop select,.cs2-more-pop input[type=text]{width:100%}
/* 通話の全文。社内の人は青、相手は赤みの見出し(amptalk と同じ見分け方)。言葉に当たったところに色を付ける */
.cs2-tr-body{margin-top:6px;font-size:12.5px}
.cs2-pane{margin-top:6px;font-size:13px;padding:8px 10px;border:1px solid var(--rule-soft);border-radius:6px;white-space:pre-wrap}
.tr-bar{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.tr-q{width:260px;max-width:100%}
.tr-list{max-height:420px;overflow-y:auto;border:1px solid var(--rule);border-radius:6px}
.tr-line{display:block;padding:6px 10px;border-bottom:1px solid var(--rule-soft);cursor:pointer;font-size:13px}
.tr-line:hover{background:var(--rule-soft)}
.tr-h{display:block;font-size:11.5px;color:#2b5fa8;margin-bottom:1px}
.tr-other .tr-h{color:#b4405a}
.tr-x mark{background:#fff27a;padding:0}
.tr-line.tr-playing{background:#eef4ff}
.cs2-tag{font-size:11px;padding:0 7px;border-radius:999px;background:var(--rule-soft);color:var(--ink-mid);white-space:nowrap}
/* 架電メモは長いので、右下をつまんで横にも広げられるようにする。
   広げなくても雛形(【連絡目的/結果】…【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;height:44px;min-height:44px;line-height:1.6;outline:0}
/* 架電メモだけは、雛形(【連絡目的/結果】…)が4行ぶん見える高さのまま(ユーザー指示 2026-09-11) */
[data-subtable="company_calls"] .contact-edit textarea.st-memo{height:88px;min-height:88px}
/* 書いているあいだは広げる。ふだんは2行ぶんで、1行の背を低く保つ(ユーザー指示 2026-09-19) */
.contact-edit textarea.st-memo:focus{border-bottom-color:var(--accent);height:120px;min-height:120px}
/* かんたん表示: カードを出し、タブと本文は「すべての項目を見る」を押すまで隠す(サイドバーの操作は残す) */
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:is([type="text"],[type="search"],[type="url"],[type="tel"],[type="email"],[type="password"],[type="number"],[type="date"],[type="datetime-local"],[type="month"],[type="week"],[type="time"]),.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}
/* 見出しは上に貼り付けるので、大きすぎないようにする(ユーザー指示 2026-10-01) */
.rec-title h2{font-size:20px}
/* タブ: 選択中は太字+下線、未選択は薄く。タブ列の下に余白 */
.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}
/* タブの帯で、架電メモのタブのすぐ右に付ける小さな「↓最新」(shared/_jump_latest_tab)。
   タブの間隔(gap)を詰めて、そのタブの付属に見えるようにする */
.tabs .tb-latest{margin-left:-18px;padding:1px 7px;border:1px solid var(--accent);border-radius:999px;background:var(--paper);
  color:var(--accent);font-size:11px;font-weight:600;line-height:1.5;white-space:nowrap;cursor:pointer}
.tabs .tb-latest:hover{background:var(--accent);color:#fff}
@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) + var(--rec-stick-h, 0px) + 46px);
  max-height:calc(100dvh - var(--topbar-h) - var(--rec-stick-h, 0px) - 64px);overflow-y:auto;scrollbar-width:thin}
.side::-webkit-scrollbar{width:4px}
.side::-webkit-scrollbar-thumb{background:var(--rule);border-radius:2px}
/* 編集画面の右の「できること」を押した結果。画面を離れないので、右下に数秒だけ出す(shared/_record_scripts) */
.side-toast{position:fixed;right:20px;bottom:84px;z-index:60;display:flex;flex-direction:column;gap:8px;
  max-width:min(420px,calc(100vw - 40px))}
.side-toast .flash{border-radius:8px;border:1px solid var(--rule);box-shadow:0 6px 24px rgba(20,25,31,.18);
  font-size:13px;padding:10px 14px}
/* オーダーの一括更新の進み具合(shared/_bulk_update_progress)。右下の P-AI と重ならないよう、下の真ん中に出す */
.bu-progress{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:250;width:min(420px,calc(100vw - 180px));
  padding:10px 14px;background:var(--paper);border:1px solid var(--rule);border-radius:8px;box-shadow:0 6px 24px rgba(20,25,31,.18);font-size:13px}
.bu-progress-head{display:flex;align-items:center;gap:8px}
.bu-progress-head .sp{flex:1}
.bu-progress-more,.bu-progress-close{border:0;background:none;padding:0 2px;font:inherit;color:var(--accent);cursor:pointer}
.bu-progress-close{color:var(--ink-soft);font-size:15px;line-height:1}
.bu-progress-bar{margin-top:7px;height:6px;border-radius:3px;background:var(--ground);overflow:hidden}
.bu-progress-bar > span{display:block;height:100%;width:0;background:var(--accent);transition:width .4s ease}
.bu-progress[data-state="done"]{color:var(--ok)}
.bu-progress[data-state="done"] .bu-progress-bar > span{background:var(--ok)}
.bu-progress[data-state="partial"],.bu-progress[data-state="stopped"]{color:var(--stop)}
.bu-progress[data-state="partial"] .bu-progress-bar > span,.bu-progress[data-state="stopped"] .bu-progress-bar > span{background:var(--stop)}
@media (max-width:600px){.bu-progress{left:12px;right:90px;transform:none;width:auto}}
.side[data-pane="comments"] > .blk:not(.cmt-blk){display:none}
.side[data-pane="other"] > .cmt-blk{display:none}
.side-switch-row{display:flex;gap:6px;align-items:stretch;position:sticky;top:0;z-index:2;margin-bottom:12px}
.side-switch{flex:1;display:flex;
  border:1px solid var(--rule);border-radius:999px;overflow:hidden;background:var(--paper)}
/* 右の欄ごと隠す(ユーザー指示 2026-10-16)。隠すと細い帯だけ残して本文を広げる。
   ダイアログはレールの直下にあるので消さない(隠していても開ける) */
.side-hide{flex:none;width:28px;border:1px solid var(--rule);border-radius:999px;background:var(--paper);
  color:var(--ink-mid);font:inherit;font-size:15px;line-height:1;cursor:pointer;padding:0}
.side-hide:hover,.side-show:hover{color:var(--accent);border-color:var(--accent)}
.side-show{display:none}
body:not(.odsplit-open) .body.side-off{grid-template-columns:minmax(0,1fr) 30px;gap:16px}
body:not(.odsplit-open) .side[data-hidden] > *:not(.side-show):not(dialog){display:none}
body:not(.odsplit-open) .side[data-hidden] > .side-show{display:flex;flex-direction:column;align-items:center;gap:8px;
  width:30px;padding:10px 0;border:1px solid var(--rule);border-radius:10px;background:var(--paper);
  color:var(--ink-mid);font:inherit;font-size:12px;cursor:pointer}
.side-show-arrow{font-size:15px;line-height:1}
.side-show-label{writing-mode:vertical-rl;letter-spacing:.08em}
/* 分割表示では見出しで畳む仕組みがあるので、隠すボタンは出さない */
body.odsplit-open .side-hide{display:none}
@media (max-width:820px){
  body:not(.odsplit-open) .body.side-off{grid-template-columns:minmax(0,1fr);gap:0}
  body:not(.odsplit-open) .side[data-hidden]{display:block}
  body:not(.odsplit-open) .side[data-hidden] > .side-show{flex-direction:row;width:100%;padding:8px 12px;margin-bottom:14px}
  .side-show-label{writing-mode:horizontal-tb}
  .side-show-arrow{transform:rotate(-90deg)}
}
.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:12px;color:var(--ink-mid);font-weight:600;border-bottom:2px solid var(--rule-row);padding-bottom:9px}
td{padding-top:12px;padding-bottom:12px}
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:is([type="text"],[type="search"],[type="url"],[type="tel"],[type="email"],[type="password"],[type="number"],[type="date"],[type="datetime-local"],[type="month"],[type="week"],[type="time"]),.f select,.f textarea{
  border:1px solid var(--rule);border-radius:4px;padding:5px 8px;background:var(--paper)}
/* 日付・時刻の欄は中の印(カレンダー・時計)の分だけ背が高くなるので、高さを揃える */
.f input:is([type="text"],[type="search"],[type="url"],[type="tel"],[type="email"],[type="password"],[type="number"],[type="date"],[type="datetime-local"],[type="month"],[type="week"],[type="time"]),.f select{height:36px;box-sizing:border-box}
.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:is([type="text"],[type="search"],[type="url"],[type="tel"],[type="email"],[type="password"],[type="number"],[type="date"],[type="datetime-local"],[type="month"],[type="week"],[type="time"]),.f.req-empty select,.f.req-empty textarea{
  border-color:var(--stop);background:rgba(150,48,29,.05)}
/* 次回アクションの日時(日付・時・分に分けた入力。shared/_quarter_datetime)。
   編集画面の列はいちばん狭いと 200px。3つの欄が 230px 要るままだと、列が狭くなる画面幅のときだけ
   分が次の行に落ちていたので、余白を詰めて 200px に収め、折り返さない(2026-09-30) */
.qdt{display:inline-flex;align-items:center;gap:2px;flex-wrap:nowrap}
.f .qdt input,.f .qdt select{width:auto;flex:0 0 auto}
.f .qdt[data-qdt] input[type="date"]{padding-inline:4px}
/* 時・分は数字2桁ぶんの幅に揃える。分の選択肢に「1分単位」の見出しを足すと、
   欄がその見出しの幅まで広がって分だけ次の行に落ちていた(2026-09-26) */
.f .qdt[data-qdt] select{width:calc(2ch + 10px);padding-inline:3px;text-align:center;text-align-last:center}
.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}
.req-check{margin:0 0 12px;padding:10px 12px;border-radius:6px;background:var(--ground);border:1px solid var(--rule);font-size:12.5px}
.req-check-head{font-weight:600;margin-bottom:4px}
.req-check-list{margin:0;padding:0;list-style:none}
.req-check-list li{padding:3px 0;line-height:1.6}
.req-check-kind{display:inline-block;margin-right:6px;padding:0 6px;border-radius:4px;font-size:11px;background:#FFE58F;color:#6B4E00}
.req-check-ack{display:block;margin-top:8px;font-weight:600}
.req-check-ack[hidden]{display:none}
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}
/* partnerメール: 左に保存した検索と検索履歴(ユーザー要望 2026-09-29) */
.pm-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:24px;margin-top:16px;align-items:start}
.pm-side{position:sticky;top:12px;font-size:12.5px}
.pm-side h3{font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--ink-soft);margin:6px 0 6px}
.pm-side-empty{margin:0;font-size:11.5px}
.pm-sq{display:flex;align-items:center;gap:4px;padding:3px 4px;border-radius:4px}
.pm-sq:hover,.pm-sq.cur{background:var(--ground)}
.pm-sq-q{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);text-decoration:none}
.pm-sq-q:hover{color:var(--accent);text-decoration:underline}
.pm-sq-f{display:contents}
.pm-sq-star{flex:0 0 16px;text-align:center;color:#C98A00}
.pm-sq-pin,.pm-sq-x{border:0;background:none;padding:0 2px;cursor:pointer;font:inherit;line-height:1}
.pm-sq-pin{color:var(--ink-soft)}
.pm-sq-pin:hover{color:#C98A00}
.pm-sq-x{color:var(--ink-soft);visibility:hidden}
.pm-sq:hover .pm-sq-x,.pm-sq-x:focus{visibility:visible}
.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アシスタント(β) */
/* 詳細・編集の「一番上に戻る」(shared/_back_to_top)。右下の P-AI(bottom 22px・高さ56px)と、
   編集画面の下に貼り付く保存の帯(.editbar)に重ならないよう、その上に出す */
.to-top{position:fixed;right:22px;bottom:90px;z-index:290;padding:7px 14px;border:1px solid var(--rule);border-radius:999px;
  background:var(--paper);color:var(--ink-mid);font:inherit;font-size:12.5px;cursor:pointer;box-shadow:0 4px 14px rgba(20,25,31,.14);
  transition:opacity .2s,transform .2s}
.to-top:hover{color:var(--accent);border-color:var(--accent)}
.to-top[hidden]{display:none}
.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}}

/* 背景色プラグインの移植(オーダーの編集・新規。config/field_colors.yml)。
   赤=必ず入れる項目、水色=求人票(新提案TPL_送付用)に出る文面。kintone の画面と同じ色分け。
   編集画面の白い入力欄(body.editing .f input… {background:#fff})より強くするため body.editing から書く。
   以前は .f.fc-pink だけで書いていて白に負け、色が出ていなかった(現場の声 2026-10-15)。
   水色は編集中の地(#D3E6F7)と見分けられるよう、緑寄りの水色＋濃い枠にする */
:root{--fc-req:#F8D7DC;--fc-req-line:#DE97A3;--fc-job:#C6EEF7;--fc-job-line:#5DB8D3}
body.editing .f.fc-pink :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select,textarea,.ms,.mselect>summary,.ro,.cklist){
  background:var(--fc-req);border-color:var(--fc-req-line)}
body.editing .f.fc-blue :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select,textarea,.ms,.mselect>summary,.ro,.cklist){
  background:var(--fc-job);border-color:var(--fc-job-line)}
body.editing .f:is(.fc-pink,.fc-blue) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select,textarea):focus{background:#fff;border-color:var(--accent)}
/* 必須の空欄(.req-empty)の赤枠も同じく白い入力欄に負けて消えていた。色分けの枠より後ろに置いて赤枠を勝たせる */
body.editing .f.req-empty :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select,textarea){border-color:var(--stop)}
/* 色の見方(オーダー編集の上に出す) */
.fcol-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 12px;font-size:12.5px;color:var(--ink-mid)}
.fcol-legend .fcol-chip{display:inline-flex;align-items:center;gap:6px}
.fcol-legend .fcol-chip::before{content:"";width:22px;height:14px;border-radius:3px;border:1px solid}
.fcol-legend .fcol-req::before{background:var(--fc-req);border-color:var(--fc-req-line)}
.fcol-legend .fcol-job::before{background:var(--fc-job);border-color:var(--fc-job-line)}

/* 編集画面: 選択式の項目が「ただの入力欄」に見えないようにする(プルダウン・ラジオ・チェックボックス) */
.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}
}
/* ラベルが長いボタン(書類に関する依頼など)は、いつも折り返して全部見せる */
.side-actions .btn.wrap{white-space:normal;overflow:visible;text-align:left;justify-content:space-between;gap:6px}


/* 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-wiki{font-size:12px;white-space:nowrap}
.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-label の input の全幅指定を戻す) */
.rd-choices{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:6px;color:var(--ink);font-size:13px}
.rd-choices label{display:flex;align-items:center;gap:6px;cursor:pointer}
.rd-label .rd-choices input{display:inline-block;width:auto;margin:0;padding:0}
.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}
.rc-when{margin:0;padding-left:18px;font-size:12.5px;color:var(--ink-soft);line-height:1.6}

/* オーダー検索の分割表示。求職者の詳細を左に残したまま、右半分で探す */
.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-row{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)}
/* ロゴは大文字で太く、字間を少し空けて強く見せる。17px は大きすぎた(ユーザー指示 2026-10-05) */
.brand{font-weight:800;letter-spacing:.04em}
.top .brand{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)}
/* 「普通免許が必要なオーダーも出しますか？」 */
dialog.drv-confirm{border:0;border-radius:10px;padding:18px 22px;width:min(440px,92vw)}
dialog.drv-confirm::backdrop{background:rgba(20,25,31,.35)}
dialog.drv-confirm .fd-head h2{font-size:15px}
.drv-confirm-actions{display:grid;gap:8px}
/* NG日を入れる前の「CLへ選考終了の連絡をしましたか？」 */
dialog.cl-notice{border:0;border-radius:10px;padding:18px 22px;width:min(440px,92vw)}
dialog.cl-notice::backdrop{background:rgba(20,25,31,.35)}
dialog.cl-notice .fd-head{padding:0}
dialog.cl-notice .fd-head h2{font-size:15px;margin:0 0 10px}
.cl-notice-orders{margin:0 0 16px;padding-left:1.2em;font-size:13px;max-height:200px;overflow:auto}
.cl-notice-actions{display:flex;gap:8px;justify-content:flex-end}
/* 提案／先打診の切り替え(施工管理のEU担当者の求職者だけ) */
.seg{display:inline-flex;border:1px solid var(--accent);border-radius:6px;overflow:hidden;background:var(--paper)}
.seg button{border:0;background:none;padding:5px 12px;font-size:12.5px;color:var(--accent);cursor:pointer}
.seg button+button{border-left:1px solid var(--accent)}
.seg button.on{background:var(--accent);color:#fff}
.seg button:disabled{color:var(--ink-soft);cursor:not-allowed}
/* 検索結果から足したあとの「次のステップ」 */
dialog.next-step{border:0;border-radius:10px;padding:18px 22px;width:min(480px,92vw)}
dialog.next-step::backdrop{background:rgba(20,25,31,.35)}
dialog.next-step .fd-head h2{font-size:15px}
.next-step-actions{display:grid;gap:8px}
.next-step-actions .btn:disabled{opacity:.45;cursor:not-allowed}
.sm-pick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 5px;padding:2px 10px;border:1px dashed var(--rule);border-radius:6px;line-height:1.4}
/* マッチングの下の操作行(メールで打診・提案用メッセージ・面接案内・打診前の確認)は、1行を細くする(ユーザー指示 2026-10-07) */
.sm-pick .btn{padding:2px 6px;min-height:0;line-height:1.4}
.sm-pick .sub{font-size:12px}
.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}
/* 事業者の値で絞る欄(業種・契約書回収日・RA担当者。shared/_ej_company_fields)。場所・更新の行の下に、新しい行から並べる。
   他社求人の画面(.ej-bar)は横並びの欄なので1行ぶん取り、オーダー検索・企業検索(.cs-ej)は格子の1列目から始める */
.ej-cofields{flex-basis:100%;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end}
.ej-cofields .f{display:flex;flex-direction:column;gap:3px;min-width:150px;flex:0 0 auto}
.ej-cofields .f>label{font-size:11px;color:var(--ink-soft)}
.ej-cofields select,.ej-cofields input:is([type="date"],[type="number"]){font:inherit;font-size:13.5px;padding:6px 8px;border:1px solid var(--rule);border-radius:3px;background:#fff}
.ej-cofields .cs-ind-box{display:flex;gap:10px;align-items:center;border:1px solid var(--rule);border-radius:3px;background:#fff;
  padding:4px 8px;min-height:34px;min-width:240px;font-size:13px;color:var(--ink)}
.ej-cofields .mselect>summary{min-width:180px;font-size:13px;color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:3px;padding:7px 8px}
.ej-cofields .ej-co-date,.ej-cofields .ej-co-date .cs-range{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;white-space:nowrap}
.ej-cofields .ej-co-date .cs-range[hidden]{display:none}
.ej-cofields .ej-co-date input[type="date"]{width:150px}
.csearch .cs-ej .ej-cofields{grid-column:1/-1}
.ej-seg button,.ej-seg a{display:inline-block;border:1px solid var(--rule);background:#fff;font:inherit;font-size:12px;padding:2px 10px;cursor:pointer;color:var(--ink-mid);text-decoration:none}
.ej-seg :first-child{border-radius:3px 0 0 3px}.ej-seg :last-child{border-radius:0 3px 3px 0;margin-left:-1px}
.ej-seg button.on,.ej-seg a.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}
/* 他社求人の一覧は1件を2行ほどに収める。長い名前・給与は1行で切って「…」、全文は title と「詳細」で見る */
.ej-one{display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 表の既定の最小幅(860px)だと、地図と並べたときに右の列がはみ出す */
.sug-table[data-ej-table]{min-width:0}
.sug-table[data-ej-table] td.sug-name{min-width:0}
.sug-table td.ej-srcs{white-space:normal}
.ej-srcs>div{max-width:150px}
.ej-srcs .ej-src{max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:top}
.sug-table td.ej-co{min-width:0}
.ej-co .ej-one{max-width:160px}
.ej-more{font-size:11px;margin-top:1px}
.ej-more summary{cursor:pointer;color:var(--accent);list-style:none;display:inline}
.ej-more summary::-webkit-details-marker{display:none}
.ej-more summary::before{content:"▸ "}
.ej-more[open] summary::before{content:"▾ "}
.ej-more-body{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:4px 0 2px;max-width:420px;
  white-space:normal;color:var(--ink-mid);line-height:1.5}
.ej-more-body dt{color:var(--ink-soft)}
.ej-more-body dd{margin:0}
.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}
/* 新着の求人情報一覧の「日別」タブ(ats_jobs/_daily)と、行の「結果」 */
.ats-daily th.num{text-align:right}.ats-daily th.grp{text-align:center;border-bottom:1px solid var(--rule-soft)}
.ats-daily tr.off-day td{background:var(--ground)}.ats-daily tfoot td{border-top:2px solid var(--rule-soft)}
/* 日別: 0 は点だけ・列のまとまりは縦の線・作成と修正は地の色・未対応は注意の色・計は横の棒(ユーザー指示 2026-10-09) */
.ats-daily td.num,.ats-daily th.num{min-width:3.2em}
.ats-daily .zero{color:var(--ink-faint,#c4c4c4)}
.ats-daily .g{border-left:1px solid var(--rule-soft)}
.ats-daily .hl{background:color-mix(in srgb,var(--accent) 7%,transparent);font-weight:600}
.ats-daily td.warn{color:var(--stop);font-weight:600}
.ats-daily td.tot{white-space:nowrap}.ats-daily td.tot .bar{display:inline-block;height:6px;border-radius:3px;background:color-mix(in srgb,var(--accent) 35%,transparent);margin-right:6px;vertical-align:middle}
.ats-daily-sum{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.ats-daily-sum>div{border:1px solid var(--rule-soft);border-radius:8px;padding:6px 12px;min-width:90px;display:flex;flex-direction:column}
.ats-daily-sum b{font-size:18px}.ats-daily-sum .hl{background:color-mix(in srgb,var(--accent) 7%,transparent)}.ats-daily-sum .warn b{color:var(--stop)}
.ats-result{display:inline-block;font-size:11px;padding:0 6px;border-radius:9px;background:#eee;color:var(--ink-mid);margin-right:4px}
/* 「ATSに未掲載（明日もう一度）」で保留にした・保留が明けた通知(誰が飛ばしたか分かるように) */
.ats-snooze{margin-top:6px;padding:2px 8px;max-width:320px;white-space:normal;font-size:12px;font-weight:600;line-height:1.5;
  color:#1f4f9c;background:#e6f1ff;border-left:4px solid #5b8fd6;border-radius:3px}
.ats-result.created{background:#e4f7e9;color:#1d6b3a}.ats-result.modified{background:#e6f1ff;color:#1f4f9c}.ats-result.flag{background:#fff3d6;color:#8a5a00}
.sug-table tr.ej-hit td{background:#fff6cc}
.sug-toggle.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* オーダー一覧: 配信していない行。白い行より明らかに濃い灰色にして見分ける。
   紹介停止・無効は赤っぽく(事業者一覧の紹介停止・契約無効の行も同じ赤。決まりは OrderDeliveryTone)。
   白い行(:where)や hover より優先させるため 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}
/* 事業者・営業所のオーダーの表(records/_related_table)と、表の中に混ざるオーダー名(order_tone_attrs)も同じ色 */
/* 見出しで並べ替えられる列(事業者の詳細の「オーダー」)。押せる見出しは文字色をそのままにして、印で分かるようにする */
th.sortable a{color:inherit;text-decoration:none;white-space:nowrap}
th.sortable a:hover{color:var(--accent)}
th.sortable .mark{margin-left:3px;font-size:10px;color:var(--ink-soft)}
th.sortable.on .mark{color:var(--accent)}
.rel-orders tr.row-stop a{color:var(--ink-soft)}.rel-orders tr.row-invalid a{color:#7a3030}
.od-tone{border-radius:3px;padding:0 4px}.od-tone.row-stop{background:#d9d9d9}.od-tone.row-stop a{color:var(--ink-soft)}
.od-tone.row-invalid{background:#f3d4d4}.od-tone.row-invalid a{color:#7a3030}
/* 営業所一覧: 商談ステータスが無効・接触禁止の行は上の 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-head.rec-head-rest{padding-top:0}
  .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:is([type="text"],[type="search"],[type="url"],[type="tel"],[type="email"],[type="password"],[type="number"],[type="date"],[type="datetime-local"],[type="month"],[type="week"],[type="time"]),.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}
  .tabs .tb-latest{margin-left:-8px}
  .body{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:12px}
  .pinned{grid-template-columns:minmax(0,1fr)}
  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:minmax(0,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}
  .to-top{right:14px;bottom:76px}
  .ai-panel{right:0;left:0;bottom:0;width:auto;max-height:82vh;border-radius:12px 12px 0 0}
  .mselect[open]>.cklist{max-width:calc(100vw - 16px)}
  /* partnerメール: 保存した検索・履歴は一覧の上に積む。× は触って消せるように常に出す */
  .pm-layout{grid-template-columns:1fr;gap:12px}
  .pm-side{position:static}
  .pm-sq-x{visibility:visible}
  /* partnerメール: 列を並べると件名の列が狭くて行が縦に伸びるので、1通を1枚にまとめる */
  .tw > .pm-table,.pm-table > tbody{display:block;min-width:0}
  .pm-table thead{display:none}
  .pm-table tr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--rule-soft)}
  /* 一覧の行リンクの左の余白(.tw > table:has(tr.rowlink) … :first-child)より強くして、日付も左に揃える */
  .tw > .pm-table > tbody > tr.rowlink > td:nth-child(n){display:block;padding:0;border:0}
  .pm-table td:nth-child(n+3){grid-column:1/-1}
  /* ベルが左端に来るので、ベル基準だと一覧が画面の左外に出る。画面の幅いっぱいに出す */
  .notif-drop{position:fixed;left:8px;right:8px;top:52px;width:auto;max-height:calc(100dvh - 68px)}
  .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}
  /* クイックフィルタを一覧の上に横並びで出す(広い画面では隠す)。多いときは横にスクロール */
  .list-wrap > .qf-chips{order:-1;display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;margin:0 -2px;-webkit-overflow-scrolling:touch}
  .qf-chips a{flex:0 0 auto;padding:6px 12px;border:1px solid var(--rule);border-radius:999px;background:var(--paper);
    font-size:13px;white-space:nowrap;text-decoration:none;color:inherit}
  .qf-chips a.on{border-color:var(--accent);color:var(--accent);font-weight:600}
  .rail-resize{display:none}
  .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;flex:1 1 320px;resize:none;overflow:hidden;line-height:1.5}

/* 一覧のサブテーブル: 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-preview th[draggable]{cursor:grab}
.ex-preview th.ex-dragging{opacity:.4}
.ex-preview th.ex-drop-before{box-shadow:inset 3px 0 0 var(--accent)}
.ex-preview th.ex-drop-after{box-shadow:inset -3px 0 0 var(--accent)}
.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) + var(--rec-stick-h, 0px) + 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:4px 18px;flex-wrap:wrap;align-items:center;margin:0 0 6px}
.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:8px 12px 2px;border:1px solid var(--rule);border-radius:8px;background:var(--ground);margin-top:8px}
.csearch .cs-tier .sform-h{margin:0 0 4px}
.csearch .cs-scope{display:block;font-size:11.5px;color:var(--ink-soft);font-weight:400;margin-top:2px}
.csearch .cs-grid{gap:6px 16px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
/* 検索パネルはぎゅっと詰める(ユーザー指示 2026-09-25)。欄は auto-fill で左から詰めて並べ、
   1つしかない段でも横いっぱいに伸ばさない(auto-fit だと空いた列が消えて、1つの欄が端まで伸びていた)。
   入力欄も少し低くする。.f select(36px)と同じ強さに負けないよう .csearch .f で書く */
.csearch .f input:is([type="text"],[type="search"],[type="number"],[type="date"]),.csearch .f select{height:32px}
.csearch .f.cs-wide,.csearch .f.cs-text{grid-column:span 2}
/* 「◯ 〜 ◯ 万円」が1つの欄に収まるよう、数字の欄は細くする(幅は各欄の style で決めているので上書きする) */
.csearch .cs-range input[type="number"]{width:80px!important}
/* 半径は中心を決める欄(住所・駅)とは役割が違うので、薄く囲って見分ける(ユーザー指示 2026-09-10)。
   以前は1行使って囲っていたが、詰めるため住所・駅と同じ並びに置く(ユーザー指示 2026-09-25) */
@media (max-width:640px){.csearch .f.cs-wide,.csearch .f.cs-text{grid-column:auto}}
.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) */
.cs-kw{display:flex;flex-direction:column;gap:6px}
.cs-kw-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 8px}
.cs-kw-main{flex:1 1 auto;min-width:0}
/* 「かつ」は欄の上に1行で出す。左に置く列を取ると、最初の欄の左が半端に空いていた(ユーザー指示 2026-09-26) */
.cs-kw-op{flex:0 0 100%;font-size:12px;color:var(--ink-mid)}
.cs-kw-op:empty{display:none}
.cs-kw-row>[data-kw-del]{padding-top:2px}
.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}
/* 入力の欄は枠の中の1部品なので、ほかのフォームの入力欄の枠・高さ(.sform .f input など)が付かないようにする */
.cs-kw .cs-kw-box input[type=text]{flex:1 1 140px;min-width:120px;height:auto;border:0;outline:0;box-shadow:none;background:transparent;padding:0;font-size:12.5px}
.cs-kw .cs-kw-box input[type=text]:focus{border:0;box-shadow:none}
.cs-kw-box:focus-within{border-color:var(--accent)}
/* 他社求人の探す欄では、キーワードの欄を1行ぶんの幅で置く(欄を足すと縦に伸びるので、ほかの欄と並べない) */
.csearch .cs-ej .f.ej-kw{grid-column:1/-1}
.ej-field.ej-kw{flex:1 1 100%}
.ej-field.ej-kw .cs-kw{color:var(--ink);font-size:12.5px}
.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}
.cs-kw-chip button{border:0;background:transparent;padding:0 2px;line-height:1;font-size:12px;color:var(--ink-mid);cursor:pointer}
.cs-kw-or{font-size:11px;color:var(--ink-mid)}
.cs-kw-sug{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 2px;font-size:12px;color:var(--ink-mid)}
.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}
.cs-kw-sug-btn:hover{border-style:solid;background:var(--ground)}
.cs-kw-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.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:4px 0;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:8px 0 4px}
.csearch .mselect.multi>summary{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csearch .f input:is([type="text"],[type="search"],[type="url"],[type="tel"],[type="email"],[type="password"],[type="number"],[type="date"],[type="datetime-local"],[type="month"],[type="week"],[type="time"]),.csearch .f select{max-width:100%}
/* この画面は select と選択肢(.mselect>summary)が 12.5px で、文字を入れる欄だけ 13.5px で
   高さがずれていた。横に並ぶので同じ大きさに揃える(ユーザー指示 2026-09-18) */
.csearch .f input:is([type="text"],[type="search"],[type="url"],[type="tel"],[type="email"],[type="password"],[type="number"],[type="date"],[type="datetime-local"],[type="month"],[type="week"],[type="time"]){font-size:12.5px;padding:5px 8px}

/* ---- 一覧の横幅を広げる(2026-09-08 現場の指摘: 一度に多くの列を見たい) ---- */
/* 両サイドの余白と左レールの幅を詰め、レールは畳めるようにする */
/* レイアウトの <style> が .page を 1360px に収めているので、一覧だけは画面いっぱいに使う */
.page.page-list{max-width:none;padding:0 14px 80px}
/* 詳細・編集も一覧と同じく画面の幅いっぱいに使う(kintone と同じ。表の横スクロールを減らす。ユーザー要望 2026-09-29) */
.page.page-record{max-width:none}
.page-list .list-wrap{grid-template-columns:var(--rail-w,150px) 1fr;gap:20px}
/* レールの右端(一覧との隙間)をドラッグして幅を変える。長いビュー名を読めるようにするため */
.page-list .rail{position:relative;min-width:0}
.qf-chips{display:none}
.rail-resize{position:absolute;top:0;bottom:0;right:-14px;width:8px;cursor:col-resize;touch-action:none;z-index:1}
.rail-resize::after{content:"";position:absolute;top:0;bottom:0;left:3px;width:2px;border-radius:1px;background:transparent;transition:background .15s}
.rail-resize:hover::after,.list-wrap.rail-resizing .rail-resize::after{background:var(--rule)}
.list-wrap.rail-resizing{cursor:col-resize;user-select:none}
.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}
/* 一覧の列幅を変えるつまみ(見出しの右端)。見出しに載せたときだけ線を出す */
.rec-table > thead > tr > th{position:relative}
.col-resize{position:absolute;top:0;bottom:0;right:0;width:9px;cursor:col-resize;touch-action:none;z-index:1}
.col-resize::after{content:"";position:absolute;top:2px;bottom:6px;right:3px;width:2px;border-radius:1px;background:transparent;transition:background .15s}
.rec-table > thead > tr > th:hover .col-resize::after{background:var(--rule)}
.col-resize:hover::after,.col-resize.on::after{background:var(--accent)}
.rec-table.col-resizing,.rec-table.col-resizing *{cursor:col-resize;user-select:none}
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}
/* 段の見出しは左の列に置いて、見出しだけの行を作らない(ユーザー指示 2026-09-25)。
   見出しの補足は「?」に入れる(左の列は狭いので、文を置くと何行にも折り返す) */
.csearch .cs-sub{display:grid;grid-template-columns:108px minmax(0,1fr);column-gap:12px;align-items:start;
  margin:0 0 6px;padding:6px 10px 4px;border-left:3px solid var(--accent-line,#b9c8e6);background:var(--paper)}
.csearch .cs-sub>:not(.cs-sub-h){grid-column:2}
.csearch .cs-sub-h{margin:0;padding-top:2px;font-size:12px;font-weight:700;color:var(--ink)}
@media (max-width:640px){
  .csearch .cs-sub{grid-template-columns:minmax(0,1fr)}
  .csearch .cs-sub>:not(.cs-sub-h){grid-column:1}
  .csearch .cs-sub-h{margin-bottom:4px}
}
/* 企業検索: オーダーの条件は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}
/* オーダー検索の「普通免許が必要なオーダーも出しますか？」。送る前の確認(.sm-confirm)と同じ見た目で小さく */
.od-ask{width:min(420px,92vw);padding:0;border:1px solid var(--rule);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.od-ask::backdrop{background:rgba(0,0,0,.35)}
.od-ask-in{padding:16px 18px}
.od-ask h3{margin:0 0 6px;font-size:15px}
.od-ask .sub{margin:0}
.od-ask-btns{display:flex;gap:8px;margin-top:14px}
/* 「出さない」も押せるものに見えるよう枠を付ける(.btn だけだと文字のリンクに見える) */
.od-ask-btns .btn:not(.pri){padding:6px 17px;border:1px solid var(--accent);border-radius:3px}
.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}
/* grid-template-rows:minmax(0,1fr) が無いと、中身が長いときに行が伸びてダイアログの外
   (決定ボタンの下)にはみ出す。行を親の高さに収めて、中を overflow:auto でスクロールさせる
   (職種と項目を1つの欄で選ぶダイアログで出た。ユーザー報告 2026-09-18) */
.cs-ind-body{display:grid;grid-template-columns:220px 1fr;grid-template-rows:minmax(0,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;min-height:0;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;min-height:0;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)}
/* 大分類 → 中分類 で選ぶ画面の「名前で探す」欄。免許・資格のように選択肢が多いとき、
   どの大分類にあるか分からなくても見つけられるようにする(ユーザー指示 2026-09-19) */
.cs-ind-search{display:flex;gap:10px;align-items:center;padding:10px 18px;border-bottom:1px solid var(--rule-soft)}
.cs-ind-search input{font:inherit;font-size:13px;border:1px solid var(--rule);border-radius:4px;
  padding:5px 10px;width:320px;background:var(--paper);outline:0}
.cs-ind-search input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
/* 分類ごとの一言(「不問」の選び方など) */
.cs-ind-note{margin:8px 0 0;line-height:1.6}
.cs-ind-dialog:has(.cs-ind-search) .cs-ind-body{max-height:calc(88vh - 180px)}

.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}
/* 一覧(オーダー一覧・オーダー検索)では ID の列の幅を変えずに横1行に並べ、隣のオーダー名の列の下まではみ出させる
   (ユーザー指示 2026-09-30)。縦に積むと行が高くなり、ふつうに横に並べると ID の列がバッジ3つぶんまで広がる。
   バッジのかかる左の3列だけ下を1行ぶん空けて、オーダー名の文字と重ならないようにする。
   全部の列を空けると、ほかの列で決まっている行の高さまで伸びる */
tr:has(td .cell .obadges) > td:nth-child(-n+3){padding-bottom:30px}
td:has(> .cell > .obadges),td:has(> .cell-wrap > .cell > .obadges){position:relative}
td .cell .obadges{position:absolute;left:10px;bottom:7px;flex-wrap:nowrap;white-space:nowrap;margin:0;z-index:1}
/* オーダーの詳細の見出しの下(勤務地・職種の並びの下)に出す実績タグと打診方法の札 */
.rec-badges{margin-top:6px}
/* 詳細: 名前〜ボタンをスクロールしても上に貼り付ける(オーダー・事業者・営業所・成約管理・求職者。動きは shared/_record_scripts)。
   高さは --rec-stick-h でタブ・右のレールに渡す。貼り付いている間だけ下に影を付ける */
.rec-stick{position:sticky;top:var(--topbar-h);z-index:61;background:var(--paper);padding:10px 0 8px}
/* 上の余白は固定の箱が持つので、パンくずの下は詰める(上端にいるときの見た目を変えない) */
.rec-head:has(+ .rec-stick) .crumb{margin-bottom:0}
/* 求職者の詳細は、パンくずの行(右端の検索窓つき)も貼り付く箱の中に置く。上端の見た目は変えない */
.rec-stick > .crumb{margin-bottom:6px}
.rec-head:has(+ .rec-stick > .crumb){padding-top:12px}
/* 編集画面は名前の下に合計架電回数などを並べて貼り付けるので、貼り付ける高さを抑える */
.rec-stick .headfields{margin-top:4px;padding:5px 12px;gap:2px 24px}
.rec-stick h2{margin:0}
/* 固定する高さを抑えるため、右のボタンは折り返さず1行目に置き、左の所在地・連絡先などのほうを折り返す */
@media (min-width:761px){
  .rec-stick .rec-title{flex-wrap:nowrap}
  .rec-stick .rec-title > :first-child{min-width:0}
  .rec-stick .rec-title > :not(:first-child){flex-shrink:0}
  .rec-stick .meta{row-gap:6px}
}
.rec-stick.stuck{box-shadow:0 6px 8px -6px rgba(20,25,31,.18)}
/* スマホでは画面の多くを取ってしまうので貼り付けない */
@media (max-width:760px){.rec-stick{position:static}}
/* 所在地・職種・配信と札を1行に並べる */
.rec-line{display:flex;align-items:center;gap:6px 20px;flex-wrap:wrap;margin-top:8px}
.rec-line > .meta,.rec-line > .rec-badges{margin-top:0}
/* オーダーの詳細の CL窓口・打診前_確認担当者。見落とさないよう大きな赤字 */
/* 打診の前に必ず見る担当者(CL窓口・確認担当者)。事業者の上のバーはオーダーと同じ赤字、タブの中は赤い地。
   既存の --stop は茶色寄りで赤く見えないので、タブの中だけ純粋な赤にする */
.hf.hot .k,.hf.hot .v{color:var(--stop);font-weight:700}
.hf.hot .v{font-size:16px}
.f.hot{background:#fcd2cf;border-radius:6px;padding:8px 10px}
dl.f.hot dt,.f.hot > label{color:#c4160a;font-weight:700}
dl.f.hot dd{color:#c4160a;font-weight:700;font-size:16px}
.rec-contacts{display:flex;gap:4px 16px;flex-wrap:wrap;margin-top:6px;color:var(--stop);font-size:16px;font-weight:700}

/* ---- 施工管理技士のヒアリングメモ(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:is([type="text"],[type="search"],[type="url"],[type="tel"],[type="email"],[type="password"],[type="number"],[type="date"],[type="datetime-local"],[type="month"],[type="week"],[type="time"]),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}
/* 他社求人・ハロワを探す は、どの幅でも地図を上・一覧を下に(ユーザー指示 2026-09-26)。
   一覧が幅いっぱいになるので、求人名・会社の省略も広げる */
.sug-layout.ej-layout{grid-template-columns:minmax(0,1fr);gap:16px}
.sug-layout.ej-layout>.sug-map{grid-column:1;grid-row:1}
.sug-layout.ej-layout>.sug-map:not(.full){position:static}
.sug-layout.ej-layout>.sug-list{grid-column:1;grid-row:2}
.ej-layout .sug-map:not(.full) #odmap{height:48vh;min-height:320px}
.ej-layout .ej-one{max-width:480px}
/* 他社求人の地図のピンの中身(_pin)。求人ごとに区切り、長いときはポップアップの中で送る */
.ej-pop{max-width:340px;max-height:380px;overflow:auto}
.ej-pop .ej-one{max-width:320px}
.ej-pop-job{border-top:1px solid var(--rule-soft);padding-top:6px}
.ej-pop .ej-more-body{font-size:11.5px;max-width:none}
.ej-pop-back{font-size:11.5px;padding:0 0 4px}
/* 他社求人の求人ごとの表。項目ごとの列を1行に収め、長い値は切る(全文は title と「詳細」) */
.ej-jobs td{white-space:nowrap;vertical-align:top}
.ej-cell{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ej-cell.src{max-width:120px}.ej-cell.co{max-width:160px}.ej-cell.job{max-width:220px}.ej-cell.pay{max-width:160px}
.ej-cell.loc{max-width:160px}.ej-cell.emp{max-width:70px}
.ej-jobs td,.ej-jobs th{padding-left:6px;padding-right:6px}
.ej-jobs .ej-src{margin-right:0}
.ej-jobs .ej-more-body{white-space:normal;min-width:360px}
/* 他社求人の「近隣の求職者」ポップアップ */
.ejn-open{background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer;white-space:nowrap}
.ejn-open:hover{text-decoration:none}
.ejn-dialog{border:0;border-radius:10px;padding:0;width:min(1100px,95vw);max-height:90vh;display:none;flex-direction:column}
.ejn-dialog[open]{display:flex}
.ejn-dialog::backdrop{background:rgba(20,25,31,.35)}
.ejn-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid var(--rule)}
.ejn-body{padding:10px 16px 14px;overflow:auto;min-height:120px}
.ejn-filters{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin-bottom:10px}
.ejn-filters select{max-width:280px}
.ejn-f{display:inline-flex;gap:8px;align-items:center;font-size:13px}
.ejn-label{font-weight:600}
.ejn-table td,.ejn-table th{white-space:nowrap;padding-left:6px;padding-right:6px}
.ejn-go{font-weight:700;text-decoration:none;padding:0 6px}
/* 仕事内容の「続きを読む」。全文は改行をそのまま出し、長ければその中で送る */
.ej-readmore{border:none;background:none;padding:0;font:inherit;color:var(--accent);cursor:pointer;text-decoration:underline}
.ej-readmore:disabled{color:var(--ink-soft);cursor:default;text-decoration:none}
.ej-body-text.full{display:block;white-space:pre-line;max-height:260px;overflow:auto}
/* 検索したあとに畳む条件フォーム */
.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}
/* 事業者名の横の「営業所」。事業者と営業所のどちらへも1回で飛べるようにする(ユーザー要望 2026-09-28) */
.follow-table a.follow-office{margin-left:8px;padding:0 5px;border:1px solid var(--rule);border-radius:3px;font-size:11px;color:var(--ink-soft);text-decoration:none}
.follow-table a.follow-office:hover{color:var(--accent);border-color:var(--accent)}
.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}

/* 候補者を検索する: キーワードがどこに当たったかを、その人の行の下に抜き書きで出す。
   hover に関わらず同じ見え方にしたいので 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}

/* ---- 上のタブごとの色と、長文の枠(ユーザー指示 2026-09-18「視認性が悪い」) ---- */
/* 求職者=青、オーダー=オレンジ、事業者=濃いめの青、営業所=緑、成約管理=うすい紫。
   地の色は変えず、色は部分的に付ける(ユーザー指示 2026-09-18)。
   営業所は黄・オレンジ・赤をレコードの色(tone-*)で使っているので、その3色は避ける。
   :where() で詳細度を 0 にしてあるので、あとから足す色があれば普通の指定で上書きできる */
:where(body.app-eu){--app-color:#2F6FD0}
:where(body.app-od){--app-color:#D9822B}
:where(body.app-co){--app-color:#17406F}
:where(body.app-bo){--app-color:#2C8F67}
:where(body.app-cc){--app-color:#7E5BC4}  /* うすい紫。文字にも使うので、白地で読める濃さにする */
/* 見ているアプリのタブを、その色のうすいピルにする(ユーザー指示 2026-09-18)。
   タブが動かないよう、選んでいないタブにも同じ余白を持たせる。
   色を決めていない画面(ダッシュボードなど)は今までどおりアクセント色 */
.top .tabs-top{gap:4px}
.top .tt{padding:7px 12px;border-radius:999px}
/* ヘッダーの項目が増えて(ワークフロー)、1440px より狭い画面でロゴと名前が折り返し、右端が切れていた。
   ロゴと名前は折り返さず、項目の左右の余白を詰める(2026-10-01) */
.top .brand,.top .who-btn{flex:none;white-space:nowrap}
@media (max-width:1440px){.top .tt{padding:7px 8px}}
.top .tt.on{box-shadow:none;color:var(--app-color,var(--accent));
  background:color-mix(in srgb, var(--app-color,var(--accent)) 12%, transparent)}
/* 長文の項目(打診手段メモ・打診用コメントなど)は枠で囲む。地続きに並ぶと
   どこからどこまでが1項目か分からず、読み飛ばしていた */
.f dd.pretext:not(.empty){border:1px solid var(--rule);border-radius:8px;padding:10px 12px}
/* 長文は2列ぶんの幅を取る。kintone の欄の幅をそのまま使うと1列(約200px)に収まり、
   打診手段メモのような長い文章が10文字ほどで折り返されて読めなかった。
   1列しか並ばない狭い画面では横にはみ出すので、広いときだけ */
@media (min-width:1000px){.fields>.f:has(dd.pretext):not(.wide){grid-column:span 2}}
/* ただし横に広げすぎると目が戻れなくなるので、1行は40字ほどで折り返す。
   幅いっぱい(1000px超・70字ほど)だった長文も、ここで同じ幅にそろう(ユーザー指示 2026-09-18) */
.f dd.pretext{max-width:42em}
/* 打診で読み込む長文(その他打診要件・経験メモ)は kintone のときの幅に近づけて広めに(現場の要望 2026-10-15) */
.f.broad dd.pretext,.f.broad textarea{max-width:64em}
/* 1行の項目は、値の下に細い罫線を引いて区切る(ユーザー指示 2026-09-18)。
   項目名と値の結びつきと、どこまでがその値かが分かる。
   長文は枠で囲んであるので引かない。ファイルの項目(中に追加フォームがある)も外す */
.f dd:not(.pretext):not(:has(form)){border-bottom:1px solid var(--rule);padding-bottom:4px}
/* タブより上に固定している長文(打診要件_概要・新提案TPL_送付用)も、左の線だけでなく枠で囲む。
   長く読む文なので、水色の地ではなく白抜きにする(ユーザー指示 2026-09-28) */
.pinned .pf{border:1px solid var(--rule);border-left:3px solid var(--accent-line);
  border-radius:8px;padding:12px 14px;background:var(--surface)}
.pinned .pf h4{margin-bottom:6px}
/* 注意・重要事項は提案前に必ず見てほしいので、打診要件_概要の上(右列の先頭)に黄色で目立たせる(ユーザー指示 2026-10-13) */
.pinned .pf-stack{display:flex;flex-direction:column;gap:14px;min-width:0}
.pf.pf-caution{border:1px solid #C99700;border-left-width:5px;border-radius:8px;padding:12px 14px;background:#FFF8DB;margin-top:14px}
.pinned .pf-stack .pf.pf-caution{margin-top:0}
.pf.pf-caution h4{color:#6B4E00;font-weight:700;font-size:13px}
/* オーダー上部の打診要件_概要。見出しを左に細く、項目は横に流す。打診を絞る条件は赤字 */
.nreq{display:grid;gap:0}
.nreq-sec{display:grid;grid-template-columns:4.5em 1fr;gap:10px;padding:6px 0;border-top:1px solid var(--rule-soft)}
.nreq-sec:first-child{border-top:0;padding-top:0}
.nreq-h{font-size:11.5px;color:var(--ink-soft);padding-top:1px}
.nreq-b{min-width:0}
/* 項目は元の概要と同じく1行に1つ「項目：値」で縦に並べる(横に流すと経験・未経験などの書き分けが崩れる。現場の要望 2026-10-15) */
.nreq-kvs{display:grid;gap:2px 0}
.nreq-kv{display:flex;flex-wrap:wrap;gap:0 6px;align-items:baseline}
.nreq-kv .k{font-size:11.5px;color:var(--ink-mid)}
.nreq-kv .k::after{content:"："}
.nreq-note{margin:0;line-height:1.6;white-space:pre-wrap}
.nreq-kv.gap,.nreq-note.gap{margin-top:10px}

.nreq .caution,.nreq .caution .v{color:var(--stop);font-weight:600}
.nreq-kv.caution .k{color:var(--stop)}
/* 求職者を決めて見るとき、その人が外れていそうな条件(提案先検索と同じ照合)は塗って目立たせる */
.nreq-misses{margin:0 0 8px;padding:6px 10px;font-size:12.5px;font-weight:600;color:var(--stop);
  background:var(--stop-soft,#fbeaea);border-left:3px solid var(--stop)}
.nreq .miss{background:var(--stop-soft,#fbeaea);color:var(--stop);font-weight:600;padding:1px 6px;border-radius:4px}
.nreq .miss .k,.nreq .miss .v{color:var(--stop)}
.nreq-miss-tag{margin-left:6px;padding:0 5px;font-size:10.5px;font-weight:700;color:#fff;background:var(--stop);
  border-radius:3px;white-space:nowrap}
.nreq-h .nreq-miss-tag{display:block;width:max-content;margin:3px 0 0}
/* 情報が足りず判定できない条件は黄(明らかに外れる赤と分ける) */
.nreq-misses.unsure{color:var(--warn);background:#fdf4de;border-left-color:var(--warn)}
.nreq .unsure{background:#fdf4de;color:var(--warn);font-weight:600;padding:1px 6px;border-radius:4px}
.nreq .unsure .k,.nreq .unsure .v{color:var(--warn)}
.nreq .nreq-miss-tag.soft{background:var(--warn);color:#fff;padding:0 5px}
/* 新提案TPL_送付用。提案ページと同じ分け方(＠大見出し・【】中見出し・■☆小見出し・箇条書き)で詰めて出す。
   固定欄の項目名(.pinned .pf h4)や項目の並び(.fields)の書き方が掛からないよう、.pinned .pf から当てる */
.tpldoc{line-height:1.7}
.tpldoc > :first-child{margin-top:0}
.pinned .pf .tpldoc h2.sec{margin:16px 0 6px;padding:3px 8px;font-size:13px;font-weight:700;color:var(--ink);
}
.pinned .pf .tpldoc h3{margin:12px 0 4px;padding-bottom:2px;font-size:13px;font-weight:700;color:var(--ink);
  border-bottom:1px solid var(--rule-soft)}
.pinned .pf .tpldoc h4{margin:8px 0 2px;font-size:13px;font-weight:600;color:var(--ink-mid)}
.tpldoc .para{margin:0 0 .5em;white-space:pre-wrap}
.tpldoc .list{margin:0 0 .5em;padding-left:1.2em}
.tpldoc .note{margin:0 0 .5em;font-size:12px;color:var(--ink-mid)}
.tpldoc .note::before{content:"※"}
.pinned .pf .tpldoc .fields{margin:0 0 .5em;display:grid;grid-template-columns:1fr;gap:1px}
.tpldoc .fields .row{display:grid;grid-template-columns:4.5em 1fr;gap:10px}
.tpldoc .fields dt{font-size:11.5px;color:var(--ink-soft)}
.tpldoc .fields dd{margin:0;overflow-wrap:anywhere}
/* ダッシュボードの目次(SL・RAタブ)。見出しへ飛ぶリンクを横に並べる(ユーザー指示 2026-09-22) */
.dash-toc{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-top:12px;font-size:12.5px}
.dash-toc a{color:var(--ink-mid);text-decoration:none;border-bottom:1px dotted var(--rule)}
.dash-toc a:hover{color:var(--ink)}
.group[id]{scroll-margin-top:70px}
/* OD活用率の日付の範囲(開始〜終了)は1つの欄として並べる */
.od-range{display:inline-flex;gap:4px;align-items:center;color:var(--ink-soft)}

/* 空の日付欄は「年/月/日」を出さず白いままにする(shared/_date_empty が .date-empty を付ける)。触っている間は出す */
input.date-empty:not(:focus)::-webkit-datetime-edit{color:transparent}
/* OD別の一覧(ユーザー指示 2026-09-24)。列が多いので、行も列も詰めて横スクロールを減らす。
   見出しは折り返し、長い文字は切って title で出す */
.dash-table.od-list{font-size:12px;line-height:1.35}
.dash-table.od-list th,.dash-table.od-list td{padding:2px 6px;text-align:left;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.dash-table.od-list thead th{white-space:normal;vertical-align:bottom;min-width:4.5em;max-width:5.5em;font-size:11px}
.dash-table.od-list td.mono{text-align:right}
/* 契約成果獲得者とオーダー名は横に流しても残す。オーダー名を1列目の幅だけずらして止めるので、1列目の幅は決め打ち */
.dash-table.od-list :is(th,td):is(.od-acq,.od-order-name){position:sticky;background:var(--paper,#fff)}
.dash-table.od-list :is(th,td).od-acq{left:0;width:112px;min-width:112px;max-width:112px}
.dash-table.od-list :is(th,td).od-order-name{left:112px;max-width:300px;box-shadow:inset -1px 0 var(--rule)}
.dash-table.od-list.no-acq :is(th,td).od-order-name{left:0}
.dash-table.od-list tbody td:is(.od-acq,.od-order-name){z-index:1}
.dash-table.od-list thead th:is(.od-acq,.od-order-name){z-index:3}
/* OD別の一覧の色づけ(スプレッドシートの条件付き書式と同じ)。
   残日数が0以下=期限切れ、配信を止めた行はグレーにする */
.dash-table.od-list tr.od-expired td{background:#dcdcdc}
.dash-table.od-list tr.od-stopped td{background:#efefef}

/* ---- kintone に寄せた配色(ユーザー指示 2026-09-28) ----
   地は水色(:root の --paper)。その上に乗るものを白や灰色の箱にして、境目を見えるようにする。
   閲覧中の値は kintone の詳細画面と同じく灰色の枠付きの箱、編集中の入力欄は白。
   上のナビは kintone のヘッダーと同じく白のまま */
.top{background:var(--surface)}
/* 同じ行の隣が2行でも箱は伸ばさない(align-self)。状態の色(停止・無効など)の地でも同じ灰色 */
.f dd:not(.pretext):not(:has(form)),.f dd.pretext{align-self:start;
  background:#EEEEEE;border:1px solid #C9D1D9;border-radius:4px;padding:2px 8px;min-height:24px}
.f dd.pretext:not(.empty){border:1px solid #C9D1D9;border-radius:4px;padding:8px 11px}
.headfields{background:var(--surface);border:1px solid var(--rule)}
/* タブより上の情報は、どのアプリでも白抜きにする(ユーザー指示 2026-09-28)。
   固定表示の項目(.pinbox)・成約の帯・成約管理の説明を、ヘッダーの識別項目と同じ白いカードに */
.pinbox{margin-top:10px;padding:10px 14px;background:var(--surface);border:1px solid var(--rule);border-radius:8px}
.pinbox > .pinfields:first-child{margin-top:0;padding-top:0}
.contract-strip,.rec-head > .blk{background:var(--surface)}
/* ショートカットのキーも地から浮かせる */
.shortcut-bar kbd{background:var(--surface)}
.side .blk{background:var(--surface)}
.subgroup h4{background:var(--surface)}
/* 一覧の行は kintone の一覧と同じく白。1行おきの色分けはしない(ユーザー指示 2026-09-28)。
   :where() で詳細度を下げ、行の色(停止・無効など)を上書きしない。
   白い行の端に文字が貼り付かないよう、左端の列だけ内側に余白を取る */
:where(.tw > table > tbody > tr) > td{background:var(--surface)}
.tw > table:has(> tbody > tr.rowlink) > * > tr > :first-child{padding-left:10px}

/* 検索フォームは白抜きにする(ユーザー指示 2026-09-28)。水色の地の一覧の上でも、入れる欄の並びが地から浮くように。
   フォームの中では地の色(--paper)を白に置き換え、入力欄・選択欄・段もまとめて白にする。
   段(.cs-sub)は白いカードの中で左の線と下の罫線で区切る */
.csearch,.sform form{--paper:var(--surface)}
.csearch .cs-tier,.sform form>.fields{background:var(--surface)}
/* 見出しと欄を並べるだけのフォーム(過去実績・オーダー提案の条件)も、欄ごとの箱ではなく白いカード1枚にする。
   箱の間に水色の地が挟まって見づらかった(ユーザー指示 2026-09-29)。2つ目からの見出しの上の罫線で区切る */
.sform form:has(>.fields){background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:2px 14px 14px}
.sform form>.fields{border:0;border-radius:0;padding:0 0 4px;background:none}
.sform form:has(>.fields)>.sform-h:first-of-type{margin-top:10px}
.sform form:has(>.fields)>.sform-h ~ .sform-h{border-top:1px solid var(--rule-soft);padding-top:12px;margin-top:12px}
.csearch .cs-sub{border-bottom:1px solid var(--rule-soft)}

/* AI の下書きに読ませた原本(左)と、文章を足して作り直す入力欄(右)。下書きの結果と新規作成の画面の上に出す */
.ai-src{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#fff;border:1px solid var(--rule);border-radius:4px;margin:14px 0 26px}
.ai-src-col{padding:14px 18px 16px}
.ai-src-col+.ai-src-col{border-left:1px solid var(--rule-soft)}
.ai-src h3{font-size:13px;margin:0 0 8px}
.ai-src-list{list-style:none;margin:0;padding:0;font-size:13px}
.ai-src-list li{display:flex;gap:12px;align-items:baseline;padding:5px 0;border-top:1px solid var(--rule-soft)}
.ai-src-list li:first-child{border-top:0}
.ai-src-kind{flex:0 0 5.5em;font-size:11.5px;color:var(--ink-soft)}
.ai-src-list a,.ai-src-list li>span:last-child{min-width:0;overflow-wrap:anywhere}
.ai-src-text{flex:1;min-width:0}
.ai-src-text>summary{cursor:pointer;color:var(--accent)}
.ai-src-text>div{white-space:pre-wrap;max-height:16em;overflow:auto;margin-top:6px;padding:8px 10px;font-size:12.5px;
  color:var(--ink-mid);background:#F7F8FA;border:1px solid var(--rule-soft);border-radius:3px}
.ai-src textarea{width:100%;box-sizing:border-box}
.ai-src-actions{display:flex;gap:12px;align-items:center;margin-top:8px}
@media (max-width:820px){
  .ai-src{grid-template-columns:minmax(0,1fr)}
  .ai-src-col+.ai-src-col{border-left:0;border-top:1px solid var(--rule-soft)}
}

/* 年がおかしい日付(0011年など)が入っている日付欄(shared/_date_year_guard) */
input.date-year-bad{border-color:var(--warn) !important;background:#FDECEC !important}
/* 一覧の上の「◯◯検索で絞っています」。条件を1つずつ、塗った丸で出す(リンクと見分けが付くように) */
.cond-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px;font-size:12.5px}
.cond-chips .lead{color:var(--ink-mid);font-weight:700;margin-right:2px}
.cond-chip{display:inline-flex;align-items:center;gap:2px;max-width:100%;padding:2px 4px 2px 10px;border-radius:999px;
  border:1px solid var(--accent-line,#b9c8e6);background:var(--accent-soft,#eef3fb);color:var(--accent)}
.cond-chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px}
.cond-chip .x{color:var(--ink-soft);text-decoration:none;padding:0 5px;font-size:13px}
.cond-chip .x:hover{color:var(--stop)}
.cond-chips .clear{color:var(--ink-soft);margin-left:4px}
.cond-chips .clear:hover{color:var(--stop)}

/* オートコール(求職者一覧の右に出す。end_users/_auto_call) */
.auto-call{position:fixed;top:var(--topbar-h);right:0;bottom:0;z-index:55;width:440px;max-width:100vw;
  display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--rule);
  box-shadow:-6px 0 24px rgba(20,25,31,.12)}
.auto-call[hidden]{display:none}
.auto-call .ac-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--rule)}
.auto-call .ac-head .btn{font-size:18px;line-height:1}
.auto-call .ac-ctrl{display:flex;flex-direction:column;gap:8px;padding:12px;border-bottom:1px solid var(--rule)}
.auto-call .ac-row{display:flex;align-items:center;gap:14px}
.auto-call .btn.pri.stop{background:var(--stop)}
.auto-call .btn.pri:disabled{opacity:.5;cursor:default}
.auto-call .ac-limit{font-size:12.5px;color:var(--ink-mid)}
.auto-call .ac-limit input{width:64px;margin:0 2px 0 6px}
.auto-call .ac-bar{height:4px;border-radius:2px;background:var(--rule-soft);overflow:hidden}
.auto-call .ac-bar i{display:block;height:100%;width:100%;background:var(--accent)}
.auto-call .ac-msg{font-size:12.5px;color:var(--ink-mid)}
.auto-call .ac-msg.ok{color:var(--ok)}
.auto-call .ac-msg.stop{color:var(--stop);font-weight:600}
.auto-call .ac-alert{font-size:12.5px;font-weight:600;color:var(--stop);border:1px solid var(--stop);border-radius:6px;padding:6px 10px;background:var(--paper)}
.auto-call .ac-list{flex:1;min-height:120px;overflow:auto}
.auto-call .ac-list table{width:100%;min-width:0;table-layout:fixed;border-collapse:collapse;font-size:12.5px}
.auto-call .ac-list th:nth-child(2){width:140px}
.auto-call .ac-list th:nth-child(3){width:150px}
.auto-call .ac-list th{position:sticky;top:0;background:var(--surface);text-align:left;font-size:11.5px;font-weight:500;
  color:var(--ink-soft);padding:6px 10px;border-bottom:1px solid var(--rule)}
.auto-call .ac-list td{padding:6px 10px;border-bottom:1px solid var(--rule-soft);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auto-call .ac-list tr.cur td{background:#E8EEF8}
/* 電話番号の横のコピー */
.auto-call .ac-copy{border:0;background:none;color:var(--ink-soft);cursor:pointer;font-size:15px;line-height:1;padding:2px 4px;margin-left:2px}
.auto-call .ac-copy:hover{color:var(--accent)}
.auto-call .ac-copy.ng{color:var(--stop)}
/* 過去成約ありで飛ばす人 */
.auto-call .ac-list tr.ac-skip td{color:var(--ink-soft)}
.auto-call .ac-chip{display:inline-block;padding:1px 9px;border-radius:999px;background:var(--rule-soft);color:var(--ink-mid);font-size:11.5px}
.auto-call .ac-chip.ok{background:#DDF1E8;color:var(--ok)}
.auto-call .ac-chip.warn{background:#FFF1BF;color:var(--warn)}
.auto-call .ac-chip.stop{background:#FBE3E3;color:var(--stop)}
/* ドライバーの未着手で架電11回以上(長期化するか決めてもらう人) */
.auto-call .ac-list tr.ac-review td{background:#FFF6D6}
.auto-call .ac-list tr.ac-review.cur td{background:#F6E7AE}
.auto-call .ac-count{margin-left:6px;color:var(--warn);font-size:11px;font-weight:600}
.auto-call .btn.ac-fix{font-size:11.5px;margin-left:6px}
/* 使われていない番号。押し間違えないよう、ほかのボタンと離して下の行に文字だけで出す */
.auto-call .ac-invalid{display:block;margin-top:4px;padding:0;border:0;background:none;color:var(--ink-soft);font-size:11px;text-decoration:underline;cursor:pointer}
.auto-call .ac-invalid:hover{color:var(--stop)}
.auto-call .ac-invalid-dialog{width:min(360px,92vw);border:1px solid var(--rule);border-radius:10px;padding:0}
.auto-call .ac-invalid-dialog form{display:flex;flex-direction:column;gap:8px;padding:16px 18px}
.auto-call .ac-invalid-who{font-size:14px;font-weight:600}
.auto-call .ac-invalid-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.auto-call .ac-fail{color:var(--stop);font-size:11px;margin-top:2px;white-space:normal}
.auto-call .ac-embed{height:480px;flex:none;border-top:1px solid var(--rule)}
.auto-call .ac-embed iframe{width:100%;height:100%;border:0}

/* ---- 求人・スカウト作成(/job-creation) ---- */
/* スカウトをまとめる候補の組。どこまでが同じ組か分かるよう枠で囲む */
.jc-group { border: 2px solid #93c5fd; border-radius: 8px; background: #f0f7ff; padding: 10px 12px; }
.jc-group-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.jc-group-table { width: 100%; border-collapse: collapse; background: #fff; }
.jc-group-table th, .jc-group-table td { padding: 6px 8px; border-top: 1px solid #e2e8f0; text-align: left; vertical-align: top; font-size: 13px; }
.jc-group-table th { background: #f8fafc; font-weight: 600; color: #475569; border-top: none; }
/* 確認のポップアップ(ブラウザの確認ダイアログの代わり) */
.jc-dialog { border: 1px solid #cbd5e1; border-radius: 10px; padding: 18px 20px; max-width: 440px; box-shadow: 0 10px 30px rgba(15,23,42,.25); }
.jc-dialog::backdrop { background: rgba(15,23,42,.35); }
.jc-dialog p { margin: 0 0 14px; line-height: 1.7; }
.jc-dialog-btns { display: flex; justify-content: flex-end; gap: 8px; }
/* 作成依頼の備考欄 */
.jc-note { background: #fffbeb; border-left: 3px solid #f59e0b; padding: 4px 8px; margin: 2px 0 6px; font-size: 13px; }
/* まとめ候補の「作成依頼なし」 */
.jc-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 11.5px; }
/* 「AIで精査する」の結果 */
.jc-check { font-size: 13px; color: var(--ink-mid, #334155); }
/* 成約書類の確認(contract_doc_reviews) */
.cdr-form input[type=url],.cdr-form textarea{width:100%;box-sizing:border-box;font:inherit}
.cdr-result{margin-top:10px}
.cdr-arrow{color:var(--ink-soft)}
.cdr-titles{margin:8px 0 10px;padding:8px 10px;border:1px solid var(--rule);border-radius:6px;background:var(--ground)}
.cdr-title-row{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:3px 0;font-size:12.5px}
.cdr-title-row code{word-break:break-all}
.cdr-title-row .btn{flex:none}
.cdr-returned{margin:0 0 14px;padding:10px 14px;border:1px solid var(--stop);border-left-width:5px;border-radius:6px;background:var(--stop-soft);color:var(--stop)}
.cdr-returned-head{font-weight:700;margin-bottom:4px}
.cdr-returned-head span{font-weight:400;font-size:12px}
.cdr-returned .cdr-body{color:var(--stop);font-weight:600}
.cdr-pick-row{display:flex;gap:8px;align-items:flex-start;padding:8px 4px;border-top:1px solid var(--rule-soft);cursor:pointer;line-height:1.6}
.cdr-pick-row:first-of-type{border-top:0}
.cdr-pick-row input{margin-top:5px}
.cdr-pick-row .cdr-status{margin-left:6px}
[data-cdr-row][hidden]{display:none}
.cdr-form [data-cdr-send]:disabled{opacity:.45;cursor:not-allowed}
.cdr-cand{display:flex;gap:6px;align-items:flex-start;margin:0 0 6px;line-height:1.5;cursor:pointer}
.cdr-cand input{margin-top:3px}
.cdr-cand a{margin-left:4px}
.cdr-ok{color:var(--ok)}
.cdr-ng{color:var(--stop)}
.cdr-sources{margin:4px 0 0;padding-left:18px}
.cdr-compare{width:100%;min-width:0;border-collapse:collapse;margin:8px 0;font-size:12px;table-layout:fixed}
.cdr-compare th:first-child{width:9em}
.cdr-compare th:last-child,.cdr-compare td:last-child{width:3.5em;white-space:nowrap}
.cdr-compare td{overflow-wrap:anywhere}
.cdr-compare th,.cdr-compare td{border-top:1px solid var(--rule);padding:4px 6px;text-align:left;vertical-align:top}
.cdr-compare thead th{font-weight:600;color:var(--ink-mid)}
.cdr-compare tr.r-ng td{background:var(--stop-soft);color:var(--stop)}
.cdr-compare tr.r-ok td:last-child{color:var(--ok)}
.cdr-cols{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:14px;align-items:start}
@media (max-width:900px){.cdr-cols{grid-template-columns:1fr}}
.cdr-cols .group{margin-bottom:14px}
/* 請求書の作成依頼: freee に請求書を作る欄 */
.fi-form{display:grid;gap:8px}
.fi-row{display:grid;grid-template-columns:7em minmax(0,1fr);gap:8px;align-items:start}
.fi-row>span:first-child{color:var(--ink-soft);padding-top:4px}
.fi-row input[type=text],.fi-row textarea{width:100%;box-sizing:border-box;font:inherit}
.fi-form>button{justify-self:start}
.fi-amount{display:flex;gap:8px;align-items:center}
.fi-partner{display:grid;gap:6px}
.fi-search{display:flex;gap:6px}
.fi-search input{flex:1;min-width:0}
.fi-results{display:flex;flex-direction:column;gap:2px;max-height:180px;overflow:auto}
.fi-hit{text-align:left;background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:4px 8px;cursor:pointer;font:inherit}
.fi-hit:hover{border-color:var(--accent)}
.cdr-docs{margin:6px 0;padding-left:18px;line-height:1.8;word-break:break-all}
.cdr-findings label{cursor:pointer}
.cdr-history{margin:6px 0;padding-left:18px}
.cdr-history li{margin-bottom:8px}
.cdr-history .a-return b,.cdr-history .a-return{color:var(--stop)}
.cdr-history .a-approve{color:var(--ok)}
.cdr-body{white-space:pre-wrap;color:var(--ink);margin-top:2px}
.cdr-status{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:10px;font-size:12px;font-weight:600;background:var(--ground);border:1px solid var(--rule)}
.cdr-status.s-waiting{background:#FFF4D6;color:#6B4E00}
.cdr-status.s-returned{background:var(--stop-soft);color:var(--stop)}
.cdr-status.s-approved{background:var(--ok-soft);color:var(--ok)}

/* 新しい行の頭から始める項目(KintoneLayout::Field::ROW_START_COLUMNS。年収の手動入力の min・max を同じ行に) */
.fields > .f.row-start{grid-column-start:1}
/* ワークフロー(workflows#index) */
/* 状態のタブは上に貼り付く(z-index 60・白地)ので、絞り込みのプルダウンがその下に隠れないよう上に重ねる */
.wf-filters{position:relative;z-index:70}
.wf-sides{display:inline-flex;margin-top:14px;border:1px solid var(--rule);border-radius:999px;overflow:hidden}
.wf-side{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;font-size:13px;color:var(--ink-mid);text-decoration:none}
.wf-side + .wf-side{border-left:1px solid var(--rule)}
.wf-side.on{background:var(--accent);color:#fff;font-weight:600}
.wf-side:not(.on):hover{background:var(--accent-soft,#eef3fb)}
.wf-side .badge{font-size:11px}
.tabs .tb.wf-alert{color:var(--stop)}
.wf-section{margin-top:10px}

/* 名簿のコードを選ぶ欄の、ひらがな・漢字検索の候補(shared/_record_scripts。探すのは UserSearch) */
.kana-users{position:fixed;z-index:1000;background:var(--paper);border:1px solid var(--rule);border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.12);max-height:240px;overflow:auto}
.kana-users[hidden]{display:none}
.kana-users button{display:block;width:100%;text-align:left;padding:6px 10px;border:0;background:none;font:inherit;cursor:pointer;color:var(--ink)}
.kana-users button:hover{background:var(--ground)}

/* 日報(タスク管理) */
.dr-box{margin:16px 0;border:1px solid var(--rule);border-radius:6px;background:var(--paper);padding:10px 14px}
.dr-box>summary{cursor:pointer;font-weight:600;font-size:13.5px}
.dr-box[open]>summary{margin-bottom:10px}
.dr-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.dr-form{display:flex;flex-direction:column;gap:4px}
.dr-form textarea{width:100%;box-sizing:border-box;font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--rule);border-radius:4px;resize:vertical}
.dr-l{font-size:12px;color:var(--ink-mid);margin-top:8px}
.dr-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.dr-history{margin-left:auto;font-size:12.5px}
.dr-preview{white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:12.5px;line-height:1.6;
  background:#fff;border:1px solid var(--rule);border-radius:4px;padding:10px 12px;margin:4px 0 0;max-height:640px;overflow:auto}
.dr-dialog{max-width:440px;width:min(440px,92vw);border:1px solid var(--rule);border-radius:10px;padding:18px 20px}
.dr-dialog ul{margin:6px 0 10px;padding-left:20px;font-size:13px}
.dr-list{display:flex;flex-direction:column;gap:18px;margin-top:12px;max-width:760px}
.dr-item h3{font-size:14px;margin:0 0 4px}
.dr-item .dr-preview{max-height:none}
/* 日報の欄の右の文面。左の入力欄の列と高さをそろえ(文面の長さで欄が伸びないよう、大きさを中身から決めない)、
   はみ出す分は中でスクロールする。入力欄ではないと分かるよう、薄いグレーの地にする(ユーザー指示 2026-10-06) */
.dr-view{display:flex;flex-direction:column;contain:size;min-height:360px}
.dr-view .dr-preview{flex:1;min-height:0;max-height:none;margin-top:4px;overflow:auto;
  background:var(--ground);color:var(--ink-mid);border-style:dashed;cursor:default}
@media (max-width:820px){.dr-view{contain:none;min-height:0}.dr-view .dr-preview{max-height:420px}}
.dr-pages{display:flex;gap:18px;margin:18px 0}
@media (max-width:820px){.dr-panel{grid-template-columns:1fr}}

/* ファイルの添付欄(ドラッグ＆ドロップ。shared/_file_drop) */
.dz{display:block;position:relative;border:1.5px dashed var(--rule,#C8D3E0);border-radius:8px;background:#fff;padding:12px 14px;cursor:pointer;text-align:center}
.dz .dz-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dz .dz-hint{font-size:12.5px;color:var(--ink-mid,#5A6B7F)}
.dz .dz-names{display:block;margin-top:4px;font-size:12.5px;font-weight:600;word-break:break-all}
.dz.over{border-color:var(--accent,#2A4FA0);background:#EEF3FF}
.dz.has-files{border-style:solid}

/* 変更履歴の差分(長い文は変わった箇所だけ強調) */
.hd{margin:3px 0 4px;padding:6px 8px;background:var(--bg-soft,#f6f7f9);border-radius:6px;line-height:1.7;white-space:pre-wrap;word-break:break-all}
.hd-del{background:#fde2e2;color:#a12626;text-decoration:line-through}
.hd-ins{background:#d9f2df;color:#1c6b34;text-decoration:none}
.hd-skip{color:var(--ink-soft,#888);padding:0 2px}

/* 営業所の「名刺から入れる」(records/_business_card_dialog。2026-10-09) */
.bcard-pick{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px;border:2px dashed var(--rule);border-radius:8px}
.bcard-pick.over{border-color:var(--accent,#2b7bd8);background:var(--hover,rgba(43,123,216,.06))}
.bcard-body{display:grid;grid-template-columns:240px 1fr;gap:16px;margin-top:12px;align-items:start}
.bcard-img{width:100%;border:1px solid var(--rule);border-radius:6px}
/* 営業所の新規作成から引き継いだときは画像が無いので、欄を全幅にする */
.bcard-body:has(> img[hidden]){grid-template-columns:1fr}
.bcard-slots{display:flex;flex-wrap:wrap;gap:4px 16px}
.bcard-slots label{font-weight:normal;display:flex;align-items:center;gap:4px}
.gh:has([data-business-card-open]){display:flex;align-items:center;gap:10px}
.bcard-filled{background:#fff6c8 !important;transition:background .6s}
@media (max-width:640px){.bcard-body{grid-template-columns:1fr}.bcard-img{max-width:280px}.bcard .fields{grid-template-columns:1fr !important}.bcard-pick .sub{display:none}}
/* 新規作成の「手入力／名刺から読み込む」(records/_entry_choice)。一覧の切り替えと同じ形をボタンで */
.unit-toggle button.chip{border:0;font:inherit;cursor:pointer}
.unit-toggle button.chip:not(.set){background:none}

/* 担当者の「特徴・注意点」。最初の1行だけを出し、押すと全部を開く(first_line_fold。ユーザー指示 2026-10-09) */
.fold1>summary{cursor:pointer;list-style:none;display:flex;gap:6px;align-items:baseline;min-width:0}
.fold1>summary::-webkit-details-marker{display:none}
.fold1>summary::after{content:"続き";flex:none;font-size:11px;color:var(--accent)}
.fold1[open]>summary::after{content:"閉じる"}
.fold1 .fold1-lead{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;max-width:32ch}
.fold1[open] .fold1-lead{display:none}
.fold1-all{white-space:pre-wrap;margin-top:2px}
/* 事業者の成約実績の内訳(勤務地別・職種別)。数字の列は見出しも右にそろえる */
[data-breakdown] th.num{text-align:right}

/* APIトークン: アプリごとのカード。トークンは1行ずつ、権限は押せる札、発行は下の行にまとめる */
.tk-page{max-width:900px}
.tk-card{background:var(--surface);border:1px solid var(--rule);border-radius:10px;margin:0 0 14px;overflow:hidden}
.tk-head{display:flex;align-items:baseline;gap:10px;padding:10px 16px;background:var(--ground);border-bottom:1px solid var(--rule)}
.tk-head h3{margin:0;font-size:15px}
.tk-app,.tk-count{font-size:12px;color:var(--ink-soft)}
.tk-count{margin-left:auto}
.tk-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 16px;border-bottom:1px solid var(--rule-soft)}
.tk-main{flex:1 1 260px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tk-meta{font-size:12px;color:var(--ink-soft)}
.tk-meta code{font-family:ui-monospace,Menlo,monospace}
.tk-used{font-size:12px;color:var(--ink-soft)}
.tk-used.on{color:var(--ok)}
.tk-perms,.tk-new{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tk-pill{cursor:pointer}
.tk-pill input{position:absolute;opacity:0;pointer-events:none}
.tk-pill span{display:inline-block;padding:3px 11px;border:1px solid var(--rule);border-radius:999px;font-size:12px;color:var(--ink-soft);background:var(--paper)}
.tk-pill input:checked + span{background:#E8F0FB;border-color:var(--accent);color:var(--accent);font-weight:600}
.tk-pill input:focus-visible + span{outline:2px solid var(--accent);outline-offset:1px}
.tk-del{margin:0}
.tk-del button{border:0;background:none;color:var(--stop);font:inherit;font-size:12px;cursor:pointer;padding:4px 6px}
.tk-del button:hover{text-decoration:underline}
.tk-none{margin:0;padding:14px 16px;font-size:13px;color:var(--ink-soft)}
.tk-new{padding:10px 16px;background:var(--ground)}
.tk-new input[type=text]{flex:1 1 220px;max-width:300px;padding:6px 10px;border:1px solid var(--rule);border-radius:6px;font:inherit;font-size:13px}
.tk-issue{border:0;border-radius:6px;background:var(--accent);color:#fff;font:inherit;font-size:13px;font-weight:600;padding:6px 16px;cursor:pointer;margin-left:auto}

/* ---- 詰めた表示(ユーザー指示 2026-10-15): 同じ画面で見える情報を増やし、スクロールを減らす ---- */
body{line-height:1.55}
.body{padding-top:14px}
.gh{margin-bottom:10px;padding-bottom:5px}
.gh h3{font-size:14px}
.fields{gap:8px 24px}
.f dd{line-height:1.45}
.subgroup h4{padding:4px 10px;margin-bottom:10px}
/* カテゴリ(見出し)の切れ目だけは広めに空ける。詰めすぎて区切りが見えなかった(ユーザー指示 2026-10-19) */
.group{margin-bottom:40px}
.subgroup{margin-bottom:32px}
/* オーダー名・基本情報の帯 */
.rec-head{padding-top:12px}
.rec-title h2{font-size:17px;line-height:1.35}
.meta{margin-top:4px;gap:6px 16px;font-size:12px}
.headfields{margin-top:8px;padding:6px 12px;gap:2px 22px}
.tabs{margin-top:12px}
.tb{padding:7px 0}
.pinbox{margin-top:6px;padding:6px 12px}
/* 提案_打診求職者一覧の開閉 */
.mi-fold>summary{cursor:pointer;color:var(--accent);font-size:12.5px;padding:4px 0;margin-bottom:8px}

/* 文字のように見えるボタン(DM送信履歴のクリエイティブIDなど。押すとポップアップが開く) */
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--accent, #1B4FA8); cursor: pointer; text-decoration: underline; }
/* 事業者の統合(company_merges/show) */
.merge-target{display:flex;gap:10px;align-items:center;margin-top:14px;font-size:13px}
.tw > .merge-table{width:auto;min-width:0}
.merge-table th,.merge-table td{text-align:left;padding:6px 18px 6px 0;border-bottom:1px solid var(--rule-soft);font-size:13px}
.merge-table tbody th{font-weight:500;color:var(--ink-soft);white-space:nowrap}