/* はやぶさ採用管理｜見た目。モック（素材/モック.html）から取ってきたもの。
   紺・水色・黄／明るい画面のみ／Murecho（はやぶさ警備転職と同じ） */
:root{
  /* ---- 黒と赤の2色。明るい画面のみ（ダークは使わない） ----
     2026-10-08 社長指示「はやぶさ採用の資料を参考に赤っぽい感じに」。
     赤 #D10008 は、はやぶさ採用のロゴから色を取り出したもの（確認済み）。
     ⚠️ 名前（navy/sky）は画面のあちこちから呼ばれているので変えない。中身だけ入れ替える。 */
  --navy:#1C1C1C;        /* 黒：構造・見出し */
  --navy-d:#000000;      /* 黒（濃） */
  --navy-l:#3A3A3A;      /* 黒（淡）：押したとき */
  --sky:#D10008;         /* 赤：選択中・進行中・主ボタン */
  --sky-d:#A30007;       /* 赤（文字用） */
  --sky-bg:#FDEBEC;      /* 赤（背景） */
  --sky-ln:#F3C0C2;
  --sun:#F2B705;         /* 黄：要対応・注意 */
  --sun-d:#8A6100;       /* 黄（文字用） */
  --sun-bg:#FFF3D0;      /* 黄（背景） */
  --sun-ln:#EFD79A;
  --sun-bg2:#FFFAEA;     /* 黄（うすい背景） */
  --ng:#B3261E;          /* 赤：連絡NGだけに使う */
  /* ★届いた道の色（2026-11-03 社長「LINEかSMSかわかるようにして。色とかアイコンで」）。札・やりとりの線・連絡の道の1行・切り替えのボタンは、ここだけを見る */
  --ch-line:#06C755;     /* LINEの緑（印・線） */
  --ch-line-d:#04783A;   /* LINEの緑（文字用。白地で読める濃さ） */
  --ch-line-bg:#E8F8EF;  /* LINEの緑（うすい背景） */
  --ch-sms:var(--navy);  /* SMS（印・文字・線） */
  --ch-sms-bg:var(--soft2);
  --ch-unk:var(--sun-d); /* LINE（未確認）：注意の黄 */
  --ch-unk-bg:var(--sun-bg);
  /* 緑：いま自動で動いていることだけに使う（2026-10-14 社長
     「送付中を緑で停止中をグレーにする」）。
     ⚠️ 赤（--sky）は「選択中・進行中・主ボタン」で使い切っているので、
       自動送信の「動いている」を赤にすると、押せるものと見分けがつかなかった。 
     LINE＝LINEの緑（--ch-line）。届いた道の印にだけ使う（2026-11-03 社長「色で分かるように」） */
  --go:#1E7A3C;          /* 緑（文字用） */
  --ng-bg:#FDECEA; --ng-ln:#F0BDB8;

  --page:#F7F7F8; --card:#FFFFFF; --soft:#FAFAFB; --soft2:#F0F0F2;
  --ink:#1C1C1C; --ink2:#5F5F62; --ink3:#8E8E92;
  --line:#E3E3E6; --line2:#CDCDD1;
  /* 旧名の互換（画面のあちこちから呼ばれているので必ず定義する） */
  --crit:var(--sun-d); --warn:var(--sun-d); --ok:var(--sky-d); --okline:var(--sky-ln);
  /* ★フォントはメイリオ（2026-10-08 社長指示「フォントは普通にして」「メイリオにして」）。
     それまでは Murecho（はやぶさ警備転職と同じ見た目のフォント）だった。 */
  --fb:Meiryo,"Hiragino Kaku Gothic ProN","Yu Gothic Medium","Noto Sans JP",sans-serif;
  --fn:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{color-scheme:light}
/* ★2026-10-06 社長「文字サイズを少しあげて欲しい」。18px未満の文字をすべて+1pxした。
 *   読み手は中高年の方が多く、現場でも開く。見出し（18px以上）は元のまま。 */
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--fb);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;text-wrap:balance}
input,select,textarea{font-family:inherit;font-size:15px;padding:9px 11px;border:1px solid var(--line2);border-radius:7px;background:#fff;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sky);outline-offset:1px;border-color:var(--sky)}
input[type=checkbox]{width:auto;accent-color:var(--sky)}
label.l{font-size:13px;color:var(--ink2);display:block;margin-bottom:5px;font-weight:700}

/* 上の帯 */
.demo{background:var(--sun-bg);border-bottom:2px solid var(--sun);padding:10px 18px}
.demo .in{max-width:1280px;margin:0 auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.demo .t{font-size:13.5px;color:var(--sun-d);font-weight:700}
.demo .rs{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto;align-items:center}
.rb{font-size:13px;padding:5px 11px;border-radius:999px;border:1px solid var(--line2);background:#fff;color:var(--ink2);width:auto;font-weight:600}
.rb:hover{border-color:var(--sky);color:var(--sky-d)}
.rb[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.rst{font-size:12.5px;padding:5px 10px;border-radius:6px;border:1px solid var(--ng-ln);background:#fff;color:var(--ng);width:auto;font-weight:700}

/* ===== 上＝大きな区分／左＝その中の項目（2026-10-08 社長指示「一般的にして」）=====
   それまでは左に全部を縦に積んでいた。よくある管理画面の形に合わせる。 */
.app{max-width:1280px;margin:0 auto;min-height:calc(100vh - 46px);display:flex;flex-direction:column}
.app>.body{display:flex;flex:1;min-height:0}

/* 上の帯（白地・細い線で区切る。Googleの管理画面を参考＝2026-10-08 社長指示。
   ⚠️ 色は他社のものを使わず、ファルコンの紺を差し色にする） */
.top{display:flex;align-items:stretch;background:#fff;color:var(--ink);
  border-bottom:1px solid var(--line);gap:0}
/* ★ロゴは画面のいちばん左に置く（2026-10-08 社長指示）。
   左の余白を詰めて、下の左メニューの左端とそろえる。 */
.top .brand{display:flex;flex-direction:column;justify-content:center;
  padding:9px 16px 9px 12px;border:0;margin:0;flex:none;min-width:200px}
.top .brand .lg{display:block;height:28px;width:auto}
.top .brand .sb{font-size:12px;color:var(--ink2);margin-top:3px}
.top .brand .sb .unyou{margin-left:8px;font-size:11px;color:var(--ink3);letter-spacing:.06em}
/* ★上の帯には区分（タブ）を置かない（2026-10-08 社長決定）。
   項目は12個なので左1本で足りる。ここは、ロゴと右側を離すための空きだけ。 */
.top .tabs{flex:1;min-width:0}
.topr{display:flex;align-items:center;gap:10px;padding:0 16px;flex:none}
.topr select{width:auto;max-width:200px;font-size:13px;padding:6px 8px;border-radius:7px;
  border:1px solid var(--line2);background:#fff;color:var(--ink)}
.topr .who{font-size:12px;color:var(--ink2);line-height:1.3;white-space:nowrap}
.topr .who b{display:block;color:var(--ink);font-size:13px;font-weight:700}
.topr .who i{font-style:normal}
.topr .rb{width:auto}

/* ===== 左メニュー（紺） ===== */
/* 左の項目（白地。選んでいるものだけ、うすい水色の丸みで示す＝Googleの管理画面を参考） */
aside{width:228px;flex:none;background:#fff;border-right:1px solid var(--line);
  padding:12px 8px 40px;display:flex;flex-direction:column;color:var(--ink)}
.mgrp{font-size:11px;letter-spacing:.14em;color:#8FAED6;padding:13px 18px 5px;font-weight:700}
.mi{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:transparent;
  padding:9px 14px;font-size:14.5px;color:var(--ink2);border-radius:999px}
.mi:hover{background:var(--soft2);color:var(--ink)}
.mi[aria-current="true"]{background:var(--sky-bg);color:var(--sky-d);font-weight:700}
.mi .ic{width:19px;text-align:center;font-size:15px;flex:none}
.mi .bg{margin-left:auto;font-family:var(--fn);font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--sun);color:#5A4000}
.mi .bg.q{background:var(--soft2);color:var(--ink2)}

main{flex:1;min-width:0;padding:24px 28px 70px;background:var(--page)}
.head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
h2{font-size:21px;font-weight:700;color:var(--navy)}
.hint{font-size:13.5px;color:var(--ink3);margin-bottom:18px}
.flash{border:1px solid var(--sky-ln);background:var(--sky-bg);color:var(--sky-d);padding:12px 14px;border-radius:8px;font-size:14px;margin-bottom:16px;line-height:1.75;border-left:4px solid var(--sky)}
.flash .x{float:right;border:0;background:transparent;color:var(--sky-d);font-size:18px;padding:0 2px;width:auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:14px}
.card h3{font-size:14.5px;font-weight:700;margin-bottom:11px;color:var(--navy)}
.card.acc{border-color:var(--sky-ln);background:var(--sky-bg)}
.card.warn{border-color:var(--sun-ln);background:var(--sun-bg)}
.card.ok{border-color:var(--sky-ln);background:var(--sky-bg)}
.card.crit{border-color:var(--sun);background:var(--sun-bg);border-left:4px solid var(--sun)}

.grp{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:8px;margin:18px 0 8px;color:var(--navy)}
.grp:first-of-type{margin-top:0}
.pip{width:8px;height:8px;border-radius:50%;flex:none}
.pip.c{background:var(--sun)}.pip.w{background:var(--sun-ln)}.pip.o{background:var(--sky)}
.n{font-family:var(--fn);font-size:12px;color:var(--ink3);font-weight:400}

/* ★一覧の1行（2026-10-11 作り直し）
 * 社長のデザインのルール＝**枠で囲まない。角丸四角形のカードを並べない。
 *   区切りは「余白」と「極めてシンプルな直線」。**
 * 🔴 作り直す前は、1行ずつが角丸＋枠＋色つきの面だった。
 *   20行並ぶと**色の壁**になり、どれが急ぎか分からなくなる。
 * → 枠と角丸をやめ、下の細い線1本で区切る。急ぎ・要対応は**左の細い線**だけで示す。
 * ⚠️ 色の面は、社長が決めた2つだけ残す
 *   ①要対応（うすい黄）②条件から外れた方（うすい灰）。 */
.row{display:flex;align-items:center;gap:12px;padding:14px 13px 14px 16px;background:#fff;
     border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;flex-wrap:wrap;position:relative}
.row:last-of-type{border-bottom:0}
.row::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;background:transparent}
.row.c{background:var(--sun-bg2)}
.row.c::before{background:var(--sun)}
.row.w::before{background:var(--sun-ln)}
.row.o::before{background:var(--sky)}
.row.x{opacity:.82}
.row.x::before{background:var(--ink3)}
/* 条件から外れた方は、**行の背景だけ**をうすい灰色に（2026-10-11 社長指示）。
   「要対応の黄色」と並べたときに、ひと目で区別がつく。 */
.row.gray{background:#E8E8EB}
.row.gray::before{background:var(--ink3)}
/* 🔴 **お名前の行は、折り返させずに1行で読めるだけの幅を確保する**（2026-10-20）。
   📌 フェーズの札を足したら、**お名前・お住まい・札が3行に分かれた。**
     カードは「左＝中身／右＝ボタン」の横並びで、ボタン側が487px取るため、
     中身が212pxしか残っていなかった（画面で測った）。
   ★390px＝「田中 和彦　28歳・神奈川県 川崎市　追いかけ中」が1行に収まる幅（実測385px）。
     足りないときは `.row` の折り返しが効いて、**ボタンがまるごと下の行へ落ちる。**
     ボタンが下に来た形は、もともと一部のカードでそうなっていて読みやすい。 */
.row .main{flex:1;min-width:390px}
.nm2{font-size:15.5px;font-weight:700}
.nm2 span{font-weight:400;color:var(--ink2);font-size:13.5px;margin-left:6px}
.meta{font-size:13px;color:var(--ink2);margin-top:2px}
.meta em{font-style:normal;font-weight:700;color:var(--sun-d)}
.acts{display:flex;gap:5px;flex:none;flex-wrap:wrap}
/* ★主なボタンは赤（ブランドの色）。見出しは黒のまま＝2026-10-08 社長指示 */
.btn{font-size:13.5px;padding:7px 14px;border-radius:7px;border:1px solid var(--sky);background:var(--sky);color:#fff;white-space:nowrap;font-weight:700;width:auto}
.btn:hover{background:var(--sky-d);border-color:var(--sky-d)}
.btn.g{background:#fff;color:var(--ink);border-color:var(--line2);font-weight:600}
.btn.g:hover{border-color:var(--sky);color:var(--sky-d);background:var(--sky-bg)}
.btn.d{background:#fff;color:var(--ng);border-color:var(--ng-ln)}
.btn.sm{font-size:12.5px;padding:5px 10px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:focus-visible,.rb:focus-visible,.mi:focus-visible,.slot:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.choice{width:100%;border-top:1px dashed var(--line2);margin-top:10px;padding-top:10px}
.choice .q{font-size:13px;color:var(--ink2);margin-bottom:7px}
.cb{display:flex;gap:5px;flex-wrap:wrap}

.chip{display:inline-block;font-size:12.5px;font-weight:700;padding:2px 9px;border-radius:999px;border:1px solid}
.chip.c{color:var(--sun-d);background:var(--sun-bg);border-color:var(--sun-ln)}
.chip.w{color:var(--sun-d);background:var(--sun-bg2);border-color:var(--sun-ln)}
.chip.o{color:var(--sky-d);background:var(--sky-bg);border-color:var(--sky-ln)}
.chip.n{color:var(--ink2);background:var(--soft2);border-color:var(--line2)}
.chip.k{color:#fff;background:var(--navy);border-color:var(--navy)}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:9px}
.tile{background:#fff;border:1px solid var(--line);border-radius:9px;padding:13px 10px;text-align:center}
.tile.hi{background:var(--sky-bg);border-color:var(--sky-ln)}
.tile.al{background:var(--sun-bg);border-color:var(--sun)}
.tile .v{font-family:var(--fn);font-variant-numeric:tabular-nums;font-size:23px;font-weight:700;line-height:1.15;color:var(--navy)}
.tile.hi .v{color:var(--sky-d)}.tile.al .v{color:var(--sun-d)}
.tile .k{font-size:12px;color:var(--ink2);margin-top:3px}

table{border-collapse:collapse;width:100%;font-size:14px;background:#fff}
th{text-align:left;font-size:11.5px;letter-spacing:.05em;color:#fff;font-weight:700;padding:8px 9px;background:var(--navy);white-space:nowrap}
th:first-child{border-radius:7px 0 0 0}th:last-child{border-radius:0 7px 0 0}
td{padding:10px 9px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr.clk:hover{background:var(--sky-bg);cursor:pointer}
tbody tr:nth-child(even){background:var(--soft)}
tbody tr:nth-child(even).clk:hover{background:var(--sky-bg)}
td.num{font-family:var(--fn);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.scroll{overflow-x:auto;border-radius:7px}

.frm{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:11px}
.frm .wide{grid-column:1/-1}
/* ⚠️ 赤い3pxの線はやめた（2026-10-11）。画面を横切る太い線は、区切りとして強すぎる
   （デザインのルール＝区切りは余白と極めてシンプルな直線）。 */
.fbar{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:13px;}
.fbar>div{flex:1;min-width:130px}
.fbar .fb{flex:none}

.slots{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.slot{font-size:14px;padding:9px 13px;border-radius:7px;border:1px solid var(--sky);background:var(--sky-bg);color:var(--sky-d);font-weight:700;width:auto}
.slot:hover{background:var(--sky);color:#fff}
.slot.taken{border-color:var(--line2);background:var(--soft2);color:var(--ink3);text-decoration:line-through;font-weight:400;cursor:default}
.todo{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.todo:last-child{border-bottom:0}
.todo input{margin-top:5px}
.todo .who{margin-left:auto;font-size:12px;color:var(--ink3);white-space:nowrap;text-align:right}
.log{font-family:var(--fn);font-size:12.5px;line-height:1.85}
.log div{padding:5px 0;border-bottom:1px solid var(--line);color:var(--ink2)}
.log div:last-child{border-bottom:0}
.log b{color:var(--navy);font-weight:700}
.empty{color:var(--ink3);font-size:14px;padding:18px 0;text-align:center}
.note{font-size:13px;color:var(--ink3);border-left:3px solid var(--sun);padding-left:13px;line-height:1.85;margin-top:16px;background:var(--sun-bg2);padding:10px 13px;border-radius:0 6px 6px 0}
pre.out{background:var(--soft2);border:1px solid var(--line2);border-radius:8px;padding:13px;font-family:var(--fn);font-size:12.5px;line-height:1.7;overflow-x:auto;white-space:pre;margin:10px 0 0}

/* ★小窓が開いている間、後ろのページを止める（2026-10-09 社長
   「開いて閉じたらスクロールがすすんじゃっている」。実機で 300→542 を再現）
   scrollbar-gutter:stable ＝ 止めた瞬間に横幅がガタつかないようにする */
/* ★誰が確認中かの帯（2026-10-11 社長「だれに確認中なのか、誰ボールなのか」） */
.ballbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 13px;margin-bottom:10px;background:var(--sun-bg);border-left:3px solid var(--sun-ln);
  font-size:13px;color:var(--sun-d)}

/* ★いま何を待っている方かの帯（2026-10-11 社長「何か確認中の方はそのことがわかるようにしてほしい」） */
.machi{display:inline-block;margin-top:6px;padding:4px 11px;font-size:12.5px;font-weight:700;
  border-left:3px solid var(--sky-ln);background:var(--sky-bg);color:var(--sky-d)}
.machi.warn{border-left-color:var(--sun-ln);background:var(--sun-bg);color:var(--sun-d)}

/* ★やりとりの日付の帯（2026-10-11 社長「メッセージの履歴がわかりにくい」）
   時刻だけだと、いつのやりとりか分からない。日が変わるところに日付を入れる。 */
.daysep{display:flex;align-items:center;gap:12px;margin:16px 0 10px;
  font-size:12px;color:var(--ink3);white-space:nowrap}
.daysep::before,.daysep::after{content:"";flex:1;border-top:1px solid var(--line)}

/* ★個別ページの頭に、応募日・入口・再応募などを並べる（2026-10-11 社長
   「個別ページに応募日とか、再応募の履歴とかメッセージの履歴とかがわかりにくい」） */
.dmeta{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:8px;font-size:12.5px;color:var(--ink2)}
.dmeta b{color:var(--ink);font-weight:700;margin-right:5px}
.dmeta .warn{color:var(--sun-d)}
/* 応募の履歴 */
.hist{margin-top:8px}
.hrow2{padding:9px 0;border-top:1px solid var(--line)}
.hrow2:first-child{border-top:0}
.hrow2 b{margin-right:10px}
.hrow2 span{color:var(--ink2);font-size:13px}
/* 電話番号を直す欄 */

/* ★架電の小窓：電話番号の直し・メモ・次にかける日（2026-10-11 社長指示） */
.callfix,.callnote{padding:12px 0;border-top:1px solid var(--line)}
.callfix .l,.callnote .l{display:block;font-size:12.5px;color:var(--ink2);margin-bottom:5px}
.fixrow{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.fixrow input{flex:1;min-width:160px}
.fixrow input[type=date]{flex:0 0 auto;min-width:150px}
.callnote .h{margin-top:6px}

html{scrollbar-gutter:stable}
html.nosc{overflow:hidden}
/* ★overscroll-behavior:contain ＝ 小窓の中でスクロールしても、後ろのページを動かさない
   （2026-10-09 社長「開いて閉じたらスクロールがすすんじゃっている」） */
/* ★カードの見出しと、その横のボタン（2026-10-12 社長「メモを残すのは一番上のボタンから」）。
   区切りは余白だけ（枠を足さない＝デザインのルール1）。 */
.chead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.chead h3{margin:0}

/* ★ほかの会社にも応募している方（2026-10-12）。ファルコンの人だけに出る。 */
.ocrow .h{display:block;margin-top:3px;font-weight:400}

/* ★日程を移している最中の案内と、移す先のマス（2026-10-13 社長
   「カレンダー上で変更できるようにして」）。
   ⚠️ 移動中だと**ひと目で分かる**ようにする。ふだんと同じ見た目だと、
     マスを押したときに何が起きるか分からない。 */
.movebar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--sun-bg,#fff8e1);border-left:3px solid var(--sun,#f5a623);
  padding:10px 14px;margin:10px 0;line-height:1.7}
.movebar .h{display:block;color:var(--ink3);font-size:12.5px}
/* 「ここに移せます」のマス（2026-10-15 社長「空き枠にしか移動できないようにしてほしい」）
   🔴 **面接の続き（.wk-c.cont）と同じ色にしない。**
     どちらも薄い赤だったため、**移せるマスが予約済みに見えていた。**
     移せるマスは緑にして、ひと目で区別がつくようにする。 */
.wk-c.moveto{background:#E8F5EC;cursor:pointer}
.wk-c.moveto:hover{background:var(--go);opacity:.85}
/* 🔴 **押せるようにする**（2026-10-18 社長「木村さんの日程を変更したいのに、反映されない」）。
 *   📌 **ずっと押せていなかった。** `.wk-s` には `pointer-events:none`（帯は見せるだけ）が
 *     かかっていて、除外は `.wk-s button`（子孫）だけ。ところが**この帯そのものが
 *     `<button class="wk-s moveto">`** なので、子孫セレクタに当たらず
 *     **マウスを受け付けないボタン**になっていた。
 *   ⚠️ **押しても何も起きないので、壊れていることに気づけない。**
 *     本番の記録にも「移した」が1件も残っていなかった。 */
.wk-s.moveto{width:100%;border:0;background:#E8F5EC;color:var(--go);font-weight:700;
  cursor:pointer;text-align:left;pointer-events:auto}
.wk-s.moveto:hover{background:var(--go);color:#fff}

/* ★お返事の「対応済み」の印（2026-10-13）。未返信（赤）と見分けがつくよう、落ち着いた色に */
.tg.done{background:var(--soft2);color:var(--ink3)}

.ovl{position:fixed;inset:0;background:rgba(18,33,60,.5);display:flex;align-items:flex-start;justify-content:center;padding:36px 16px;overflow-y:auto;overscroll-behavior:contain;z-index:50}
.ovl .box{background:#fff;border:1px solid var(--line2);border-radius:12px;max-width:640px;width:100%;padding:22px;box-shadow:0 20px 50px -20px rgba(18,33,60,.4)}
.ovl h3{font-size:18px;font-weight:700;margin-bottom:3px;color:var(--navy)}
.ovl .cl{float:right;border:0;background:transparent;font-size:22px;color:var(--ink3);width:auto;line-height:1}
@media(max-width:860px){main{padding:18px 14px 60px}}


/* ===== 今日やること：作業カード ===== */
.qhd{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.qb{background:var(--sun);color:#4A3600;font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px}
.qc{font-size:13.5px;color:var(--ink2)}
/* ★今日やること（2026-10-11 作り直し）
 * 社長のデザインのルール＝**過剰な枠線を使わない。角丸四角形のカードを並べない。
 *   区切りは「十分な余白」と「極めてシンプルな直線」だけ。**
 * 🔴 作り直す前は、1件ずつが角丸＋枠＋黄色い面のカードだった。
 *   急ぎが5件あると**画面が黄色の壁になり、どれが急ぎか分からなくなる。**
 * → 枠と角丸をやめ、下の細い線1本で区切る。急ぎは**左の細い線と見出しの色**だけで示す。 */
.q{background:#fff;border:0;border-bottom:1px solid var(--line);border-radius:0;
   padding:17px 4px 17px 16px;margin:0;display:flex;gap:16px;align-items:center;
   flex-wrap:wrap;position:relative}
.q:last-of-type{border-bottom:0}
.q.p1{background:#fff}
.q.p1::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;background:var(--sun)}
/* ★やることのまとまりの見出し。線ではなく「余白」で区切る */
.qg{margin:34px 0 0;padding:0 0 10px;border-bottom:1px solid var(--line2)}
.qg:first-of-type{margin-top:18px}
.qg h3{font-size:17px;font-weight:700;color:var(--navy);letter-spacing:.04em}
.qg h3 span{margin-left:12px;font-size:13.5px;font-weight:400;color:var(--ink3);letter-spacing:0}
.qgd{font-size:13.5px;color:var(--ink3);margin-top:4px}
.qmore{padding:14px 0 2px}
.qm{flex:1;min-width:220px}
.qt{font-size:16.5px;font-weight:700;color:var(--navy);line-height:1.4}
.q.p1 .qt{color:var(--sun-d)}
.qn{font-size:15px;font-weight:700;margin-top:3px}
.qn span{font-weight:400;color:var(--ink2);font-size:13.5px;margin-left:6px}
.qw{font-size:13.5px;color:var(--ink2);margin-top:2px}
.qa{display:flex;gap:7px;flex-wrap:wrap;flex:none}
.btn.big{font-size:15px;padding:11px 20px;border-radius:9px;min-height:44px}

/* ===== 通話中：結果ボタンを上に固定 ===== */
.callwrap{background:var(--soft);border-radius:10px;padding:12px;margin-top:12px}
/* 電話をかけている間の帯（2026-10-15 社長「黒背景がわかりにくい。メモ欄と一緒にして」）
   📌 それまでは黒地に白文字で、**中の文字も押せるものも読み取りにくかった。**
     デザインのルール（白地・黒文字・差し色1色・角丸ほぼなし・枠で囲わない）にも反していた。
   ⚠️ 区切りは**下の線1本と余白**だけ。囲まない。
   ⚠️ `sticky` は残す。通話中ずっと見えていることが、この帯の仕事。 */
.callbar{position:sticky;top:0;z-index:5;background:#fff;color:var(--ink);
  border-bottom:2px solid var(--navy);padding:14px 2px 13px;margin-bottom:14px;
  display:block}
.cbn{font-size:16px;font-weight:700;margin-bottom:12px}
.cbn span{font-weight:400;font-size:13.5px;color:var(--ink2);margin-left:6px}
.cbb{display:flex;gap:6px;flex-wrap:wrap}
.cbb .btn{min-height:38px}
/* ★この電話のメモ（結果のボタンの上）。話しながら打つので、幅を広く取る */
.cbnote{margin-bottom:12px}
.cbnrow{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.cbnrow input{min-height:40px}
/* ★架電のメモは複数行で、**横もいっぱいに使う**
   （2026-10-15 社長「架電のメモ欄小さいので複数行にして」）。
   通話しながら打つので、打った先から見えなくならないように。
   ⚠️ 横に何かを並べると、ここが数文字の幅に潰れる（実際に潰れた）。メモは1行を独り占めする。
   ⚠️ 手で縦だけ伸ばせるようにする（横に伸ばすと小窓の形が崩れる）。 */
.cbnmemo{display:block;margin-bottom:10px}
.cbnrow textarea{display:block;width:100%;min-height:84px;resize:vertical;
  font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:inherit;line-height:1.7;box-sizing:border-box}
.cbh{font-size:12px;color:var(--ink3);margin-top:8px}

/* ===== 折りたたみ ===== */
.acc2{border:1px solid var(--line);border-radius:9px;background:#fff;margin-bottom:8px;overflow:hidden}
.acc2.on{border-color:var(--sky-ln)}
.ah{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#fff;border:0;padding:13px 15px;font-size:14.5px;font-weight:700;color:var(--navy);text-align:left;min-height:46px}
.ah:hover{background:var(--sky-bg)}
.acc2.on .ah{background:var(--sky-bg);border-bottom:1px solid var(--sky-ln)}
.ah i{font-style:normal;font-size:18px;color:var(--sky-d);font-weight:700}
.ab{padding:14px 15px}

/* ===== 入社手続きのタブ ===== */
.jtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.jt{background:#fff;border:1px solid var(--line2);border-radius:999px;padding:9px 16px;font-size:14.5px;
  color:var(--ink2);font-weight:600;min-height:42px}
.jt:hover{border-color:var(--sky);color:var(--sky-d)}
.jt.on{background:var(--navy);border-color:var(--navy);color:#fff}
.jt span{font-family:var(--fn);font-size:12.5px;margin-left:7px;opacity:.85}

/* ===== 触りやすさ ===== */
.btn,.slot,.rb,.mi,.sec,.jt,.ah{min-height:40px}
.slot{min-height:44px;font-size:15px}
@media(max-width:640px){
  .q{padding:14px}
  .qa{width:100%}
  .qa .btn.big{flex:1}
  .callbar{position:static}
}

/* ---- 3つの段 ---- */
.secs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.sec{text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;border-top:4px solid var(--line2);width:100%}
.sec:hover{border-top-color:var(--sky)}
.sec.on{border-top-color:var(--navy);background:var(--sky-bg);border-color:var(--sky-ln)}
.sec .sn{font-size:14px;font-weight:700;color:var(--navy)}
.sec .sv{font-family:var(--fn);font-size:27px;font-weight:700;color:var(--navy);line-height:1.2}
.sec .sv span{font-size:13px;font-weight:400;color:var(--ink2);margin-left:3px}
.sec .sa{font-size:12.5px;font-weight:700;color:var(--sun-d);margin-top:2px}
.sec .sa.ok{color:var(--sky-d);font-weight:400}

/* ---- カレンダー ---- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.ch{text-align:center;font-size:12.5px;font-weight:700;color:var(--ink2);padding:4px 0}
.ch.sun{color:var(--ng)} .ch.sat{color:var(--sky-d)}
.cd{min-height:74px;border:1px solid var(--line);border-radius:7px;padding:5px;background:#fff;cursor:pointer;position:relative}
.cd:hover{border-color:var(--sky);background:var(--sky-bg)}
.cd:hover .add{opacity:1}
.cd.out{background:var(--soft);border-color:transparent;cursor:default}
.cd.sun .dn{color:var(--ng)} .cd.sat .dn{color:var(--sky-d)}
.cd .dn{font-family:var(--fn);font-size:13px;font-weight:700;color:var(--ink2)}
.cd .ev{font-size:11.5px;background:var(--sky-bg);border:1px solid var(--sky-ln);color:var(--sky-d);border-radius:4px;padding:1px 4px;margin-top:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:700}
.cd .ev.tk{background:var(--navy);border-color:var(--navy);color:#fff}
.cd .add{position:absolute;right:5px;bottom:3px;font-size:15px;color:var(--sky);opacity:0;font-weight:700}
@media(max-width:640px){.cd{min-height:58px}.cd .ev{font-size:10px}}

/* ---- 通話中の画面 ---- */
.callhd{background:var(--navy);color:#fff;padding:9px 13px;border-radius:8px;font-size:14.5px;margin-bottom:10px}
.callhd b{font-size:16px}
.cbox{border:1px solid var(--line);border-radius:8px;padding:12px 13px;margin-bottom:9px;background:#fff}
.cbox.warnbox{border-color:var(--sun);background:var(--sun-bg2)}
.ct{font-size:13.5px;font-weight:700;color:var(--navy);margin-bottom:8px}
.cs{font-size:12.5px;color:var(--ink2);margin-top:8px;line-height:1.7}
.cs2{font-weight:400;color:var(--ink3);font-size:12.5px}
.talk{background:var(--sky-bg);border-left:3px solid var(--sky);border-radius:0 7px 7px 0;padding:11px 13px;font-size:15px;line-height:1.95}
.applied{background:var(--navy);color:#fff;border-radius:7px;padding:10px 12px;font-size:14px}
.applied b{font-size:15.5px}
.hrow{display:flex;gap:10px;align-items:center;margin-bottom:7px;flex-wrap:wrap}
.hrow label{font-size:13.5px;color:var(--ink2);min-width:230px;font-weight:600}
.hrow input{flex:1;min-width:190px}
.hrow.star label{color:var(--sun-d)}
.hrow.star input{border-color:var(--sun);background:var(--sun-bg2)}
.chk{display:block;font-size:14px;padding:5px 0;color:var(--ink)}
.chk input{margin-right:7px}

/* ---- 作り込みぶん ---- */
.bars{display:flex;align-items:flex-end;gap:10px;height:104px;padding:8px 4px 0}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%}
.bar .b{width:100%;max-width:38px;background:var(--sky);border-radius:5px 5px 0 0;margin-top:auto;min-height:3px;position:relative}
.bar .b.hi{background:var(--navy)}
.bar .b span{position:absolute;top:-19px;left:0;right:0;text-align:center;font-family:var(--fn);font-size:12px;font-weight:700;color:var(--ink2)}
.bar .lb{font-size:12px;color:var(--ink3);white-space:nowrap}
.tl{position:relative;padding-left:20px}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line2)}
.tl .it{position:relative;padding:7px 0;font-size:13.5px;color:var(--ink2)}
.tl .it::before{content:"";position:absolute;left:-19px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--sky);border:2px solid #fff}
.tl .it.now::before{background:var(--sun)}
.tl .it b{color:var(--ink);font-weight:700}
.prog{height:9px;background:var(--soft2);border-radius:999px;overflow:hidden;margin-top:6px}
.prog i{display:block;height:100%;background:var(--sky);border-radius:999px}
.prog i.done{background:var(--navy)}
.match{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:7px;background:#fff;margin-top:6px;flex-wrap:wrap}
.match .sc{font-family:var(--fn);font-size:13px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--sky-bg);color:var(--sky-d);border:1px solid var(--sky-ln);flex:none}
.match .sc.top{background:var(--navy);color:#fff;border-color:var(--navy)}
.crumb{font-size:12.5px;color:var(--ink3);margin-bottom:2px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px;margin-top:4px}
.kv dt{color:var(--ink3);font-size:12.5px;white-space:nowrap}
.kv dd{margin:0;font-weight:600}

/* ===== チャット（2026-09-02 追加） ===== */
.chat{display:flex;flex-direction:column;gap:0}
.chattabs{display:flex;gap:6px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.chattabs button{border:0;background:transparent;padding:9px 14px;font-size:14px;font-weight:700;color:var(--ink2);border-bottom:3px solid transparent;width:auto}
.chattabs button[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--sky)}
.chattabs button .bg{margin-left:6px;font-family:var(--fn);font-size:11.5px;padding:1px 7px;border-radius:999px;background:var(--soft2);color:var(--ink2)}
.stream{display:flex;flex-direction:column;gap:10px;padding:4px 0 14px;max-height:52vh;overflow-y:auto}
.msg{display:flex;flex-direction:column;gap:3px;max-width:76%}
.msg .bub{padding:10px 13px;border-radius:12px;font-size:15px;line-height:1.75;white-space:pre-wrap;word-break:break-word}
.msg .sig{font-size:12px;color:var(--ink3);font-family:var(--fn)}
.msg.them{align-self:flex-start}
.msg.them .bub{background:#fff;border:1px solid var(--line)}
.msg.me{align-self:flex-end;align-items:flex-end}
.msg.me .bub{background:var(--sky-bg);border:1px solid var(--sky-ln);color:var(--ink)}
.chat .send{display:flex;gap:8px;align-items:flex-end;border-top:1px solid var(--line);padding-top:12px}
.chat .send textarea{min-height:46px;max-height:160px;resize:vertical;line-height:1.7}
.chat .send .btn{flex:none;padding:11px 18px}
.chat .why{font-size:13px;color:var(--ink2);margin-bottom:10px;padding:9px 12px;border-left:3px solid var(--sky);background:var(--sky-bg);border-radius:0 6px 6px 0}
.chat .why.warn{border-left-color:var(--sun);background:var(--sun-bg);color:var(--sun-d)}

/* 応募者の詳細（開く） */
.back{border:0;background:transparent;color:var(--sky-d);font-size:14px;font-weight:700;padding:0 0 10px;width:auto}
.detail{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
/* ★左＝応募者の情報、右＝操作とやりとり（2026-10-11 社長「これはみぎ」＝SMSのやりとりを右へ）。
   📌 並べた順に左右へ振り分ける作りだと、カードが1つ増えただけで左右が入れ替わる
     （実際にSMSが左に落ちた）。**どちらの列かを決め打ちにする。** */
.detail>.dcard{grid-column:1;grid-row:1/span 99}
.detail>*:not(.dcard){grid-column:2}
@media (max-width:900px){.detail>.dcard,.detail>*:not(.dcard){grid-column:1;grid-row:auto}}
@media (max-width:900px){.detail{grid-template-columns:1fr}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14.5px}
.kv dt{color:var(--ink2)}
.kv dd{margin:0;color:var(--ink);font-weight:500}

/* 求職者の画面 */
.sk{max-width:640px;margin:0 auto;padding:20px 16px 40px}
.sk .hd{padding:14px 0 16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.sk .hd .co{font-size:13.5px;color:var(--ink2)}
.sk .hd .ti{font-size:19px;font-weight:700;color:var(--navy);margin-top:3px}

/* 左メニューの入れ物（PCでは縦のまま） */
.mrow{display:flex;flex-direction:column}

/* ===== スマホ（2026-09-02 修正）=====
   左メニューが縦に伸びて画面の上半分を占領し、本文まで1画面スクロールが要る状態だった。
   お客さんの採用担当と隊長はスマホで見るので、上の帯に畳む。 */
@media (max-width:768px){
  .app{min-height:0}
  /* 上の帯＝1行目にサービス名と人、2行目に区分（横スクロール） */
  .top{flex-wrap:wrap;position:sticky;top:0;z-index:20}
  .top .brand{min-width:0;flex:1;padding:9px 14px;flex-direction:row;align-items:center;gap:9px}
  .top .brand .lg{height:22px;flex:none}
  .top .brand .sb{font-size:12.5px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .topr{padding:0 12px;gap:8px}
  .topr select{max-width:124px;font-size:12px}
  /* ★会社を選ぶ欄があるときは、左上の会社名は重複。狭い画面では隠す
     （出したままだと「株」だけ見えて、かえって分からない） */
  .top:has(#pickco) .brand .sb{display:none}
  .topr .who{display:none}

  /* 左の項目は、上の帯のすぐ下に横並び */
  .app>.body{flex-direction:column}
  aside{width:auto;flex:none;padding:0;position:sticky;top:0;z-index:19}
  aside{border-right:0;border-bottom:1px solid var(--line);padding:0}
  .mrow{flex-direction:row;gap:0;overflow-x:auto}
  .mrow .mi{flex:1;justify-content:center;border-radius:0;border-bottom:3px solid transparent;
            padding:11px 8px;white-space:nowrap;font-size:14px}
  .mrow .mi[aria-current="true"]{background:var(--sky-bg);border-bottom-color:var(--sky)}
  .mrow .mi .bg{margin-left:6px}

  main{padding:16px 14px 60px}
  h2{font-size:19px}
  .row,.q{flex-wrap:wrap}
  .qa{width:100%;margin-top:8px}
  .qa .btn{flex:1}
  .acts{width:100%;margin-top:8px}
  .acts .btn{flex:1}
  .secs{grid-template-columns:1fr 1fr}
  .fbar{grid-template-columns:1fr}
  .stream{max-height:46vh}
  .chattabs button{padding:9px 8px;font-size:13px}
  .msg{max-width:88%}
  .detail{gap:12px}
}

/* ===== 入社書類（2026-09-09 3区分）===== */
.dline{display:flex;align-items:center;gap:14px;padding:14px 15px;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--line2);margin-bottom:7px;flex-wrap:wrap}
.dline.c{border-left-color:var(--sun);background:var(--sun-bg2)}
.dline.w{border-left-color:var(--sun-ln)}
.dline.o{border-left-color:var(--sky)}
.dline .who{flex:1;min-width:180px}
.dline .who .nm2{font-size:15.5px;font-weight:700}
.dline .who .sub{font-size:13px;color:var(--ink2);margin-top:2px}
.dline .stop{flex:1.4;min-width:230px;font-size:14px}
.dline .stop b{color:var(--sun-d)}
.dline .stop .todo{font-size:13px;color:var(--ink2);margin-top:2px}
.dline .cnt{font-family:var(--fn);font-size:13px;color:var(--ink2);flex:none;text-align:right;min-width:74px}
.dline .cnt .bar{height:4px;background:var(--soft2);margin-top:5px;width:74px}
.dline .cnt .bar i{display:block;height:4px;background:var(--sky)}
.dline .cnt .bar i.done{background:var(--sky-d)}
.dline .go{flex:none}

/* 1人ぶんの明細 */
.dgrp{margin:18px 0 8px;display:flex;align-items:baseline;gap:10px}
.dgrp .t{font-size:15px;font-weight:700;color:var(--navy)}
.dgrp .d{font-size:13px;color:var(--ink2)}
.drow{display:grid;grid-template-columns:1fr auto auto;gap:10px 14px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line)}
.drow .nm{font-size:15px}
.drow .nm .w{display:block;font-size:13px;color:var(--ink2);margin-top:1px}
.drow .st{font-size:13px;font-family:var(--fn);color:var(--ink3);white-space:nowrap;text-align:right}
.drow .st b{color:var(--sky-d);font-family:var(--fb)}
.drow .bt{display:flex;gap:5px}
.drow.yet{background:linear-gradient(90deg,var(--sun-bg2),transparent 60%)}
.drow.watch .nm{font-weight:700}
.drow.watch .nm::after{content:"要注意";font-size:11.5px;font-weight:700;color:var(--sun-d);
  border:1px solid var(--sun-ln);padding:1px 6px;margin-left:8px;vertical-align:2px}
@media (max-width:768px){
  .drow{grid-template-columns:1fr;gap:6px}
  .drow .st{text-align:left}
  .dline .cnt{text-align:left}
}

/* ===== 管理する画面（2026-09-09 追加）===== */
.fld{margin-bottom:13px}
.fld.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld label.l{margin-bottom:5px}
.fld .h{font-size:12.5px;color:var(--ink3);margin-top:4px}
.formcard{max-width:640px}
.formcard .btns{display:flex;gap:8px;margin-top:6px}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th,.tbl td{text-align:left;padding:11px 12px 11px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl th{font-size:12.5px;color:var(--ink3);font-weight:700;letter-spacing:.08em;white-space:nowrap}
.tbl td.a{text-align:right;white-space:nowrap}
.tbl td .btn{margin-left:5px}
.tbl tr.off td{opacity:.78}
/* ★表が窮屈なときの崩れを止める（2026-10-15 社長「レイアウト崩れ・padding」）。
 *   🔴 直した中身＝① お名前の横の印が、名前の長さで横に並んだり下に落ちたりして
 *     **行ごとにバラバラだった** → **いつも名前の下**に置いて揃える。
 *     ② メールアドレスと状態の札が**途中で改行**されていた → 折り返さない。
 *     ③ それでも入りきらない画面幅のときは、**表だけ横に動かせる**ようにする
 *        （画面全体が横に伸びると、左メニューまでずれる）。 */
.tblwrap{overflow-x:auto}
.tbl td.nm b{display:block}                      /* 名前は必ず1行目 */
.tbl td.nm .chip{margin-top:4px}                 /* 印はその下。行ごとに動かさない */
.tbl td.nm,.tbl td.ml,.tbl td.st{white-space:nowrap}
.tbl td.ml{color:var(--ink2)}
/* ★列の間と、表の左右の余白（2026-10-15 社長「左によりすぎなので、マージンパディングちゃんとして」）。
 *   🔴 **いちばん左の列にも余白を入れる。** 前は左が 0 だったので、
 *     見出しの黒い帯の中で文字が**左端に張り付いて**いた。
 *   ⚠️ 右端も同じ。ボタンが端に触れていると、押し間違えやすい。 */
.tbl th,.tbl td{padding:13px 18px}
.tbl th:first-child,.tbl td:first-child{padding-left:16px}
.tbl th:last-child,.tbl td:last-child{padding-right:16px}
/* ⚠️ ユーザーの表だけは、操作のボタンが4つ並ぶ（画面を見る・パスワード・止める・削除）。
 *   `td.a` の既定（1行に押し込む）のままだと**右のボタンが画面の外に切れて押せない。**
 *   見た目より「全部押せること」を取り、ここだけ折り返しを許す。 */
/* ★面接の設定の画面（§7）。
 *   区切りは**余白と見出しだけ**。まとまりの中にさらに枠を入れない（デザインのルール1）。 */
.ivh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.ivh h3{font-size:15px;font-weight:700;letter-spacing:.06em;margin:0}
/* ⚠️ **`.ivrow` という名前は使わない。** 面接の一覧の行が既に使っていて、
 *   同じ名前で書くと**そちらの見た目を壊す**（赤い縦線が設定の行にも出た・2026-10-15 実際に起きた）。 */
.ivgrid{display:flex;flex-direction:column}
.ivcrow{display:flex;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.ivcrow:last-child{border-bottom:0}
.ivcrow .l{flex:0 0 220px;color:var(--ink3);font-size:13.5px}
.ivcrow .v{font-weight:700}
.ivdot{display:inline-block;width:11px;height:11px;border-radius:999px;margin-right:7px;
  vertical-align:-1px}
.usu{color:var(--ink3)}
@media(max-width:640px){ .ivcrow{flex-direction:column;gap:3px} .ivcrow .l{flex:none} }

/* ★その人にできることの小窓（一覧の「…」から開く）。ボタンは縦に、幅いっぱい。 */
.mdacts{display:flex;flex-direction:column;gap:8px}
.mdacts .btn{width:100%;justify-content:center}
.mdacts .h{font-size:12.5px;color:var(--ink3);line-height:1.8}
.tempbox{border:1px solid var(--sun-ln);background:var(--sun-bg);padding:14px 16px;margin-bottom:14px}
.tempbox .t{font-size:13.5px;font-weight:700;color:var(--sun-d);margin-bottom:6px}
.tempbox .p{font-family:var(--fn);font-size:22px;letter-spacing:.12em;color:var(--ink);
  background:#fff;border:1px solid var(--sun-ln);padding:10px 14px;display:inline-block}
.tempbox .n{font-size:13px;color:var(--sun-d);margin-top:8px;line-height:1.8}
/* 左メニューのゆるい区切り（タブではなく、ただの見出し） */
.mgrp2{font-size:11px;letter-spacing:.12em;color:var(--ink3);padding:14px 14px 5px;font-weight:700}
.mgrp2:not(:first-child){margin-top:6px;border-top:1px solid var(--line);padding-top:14px}
@media (max-width:768px){
  .fld.two{grid-template-columns:1fr}
  .tbl,.tbl thead,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block}
  .tbl thead{display:none}
  .tbl tr{border-bottom:1px solid var(--line2);padding:10px 0}
  .tbl td{border:0;padding:3px 0}
  .tbl td.a{text-align:left;margin-top:8px}
  .mgrp2{display:none}
}

/* ===== 書類の写真（2026-09-09 追加）===== */
.shots{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.shot{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:7px 10px;font-size:13.5px}
.shot .ic{font-size:16px}
.shot .nm{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot .mt{color:var(--ink3);font-family:var(--fn);font-size:12px}
.shot button{border:0;background:transparent;padding:2px 4px;font-size:13px;width:auto;color:var(--sky-d);font-weight:700}
.shot button.x{color:var(--ng)}
.camrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.camrow label.btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.camrow input[type=file]{display:none}
.upnote{font-size:12.5px;color:var(--ink3);margin-top:6px}

/* ===== 面接シート（iPad・2026-09-09）=====
   指で押す前提。文字も押すところも大きく。
   ⚠️ クラス名は .sgrp / .sfl。モックの .grp（横並び）・.fl とぶつかるため。 */
.sheet{max-width:720px;margin:0 auto;padding:24px 20px 120px}
.sheet .hd{padding:8px 0 20px;border-bottom:1px solid var(--line);margin-bottom:24px}
.sheet .hd .ti{font-size:24px;font-weight:700;color:var(--navy)}
.sheet .hd .ld{font-size:16px;color:var(--ink2);margin-top:8px;line-height:1.9}
.sheet .sgrp{margin-bottom:32px}
.sheet .sgrp>.gn{font-size:18px;font-weight:700;color:var(--navy);padding-bottom:8px;
  border-bottom:1px solid var(--line);margin-bottom:16px}
.sheet .sgrp>.gh{font-size:14px;color:var(--ink2);margin:-10px 0 14px}
.sheet .sfl{margin-bottom:18px}
.sheet .sfl>label{display:block;font-size:16px;font-weight:700;margin-bottom:7px;color:var(--ink)}
.sheet .sfl .hint{font-size:14px;color:var(--ink3);margin-top:5px}
.sheet input,.sheet select,.sheet textarea{font-size:18px;padding:14px 14px;border-radius:0;
  border:1px solid var(--line2)}
.sheet textarea{min-height:90px}
/* 選ぶボタン（ラジオ・チェックの代わり。指で押しやすく） */
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick button{font-size:17px;padding:13px 20px;border:1px solid var(--line2);background:#fff;
  color:var(--ink);width:auto;font-weight:500}
.pick button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
.pick button:active{transform:scale(.98)}
.sheet .rep{border-left:3px solid var(--line);padding-left:16px;margin-bottom:20px}
.sheet .rep .rn{font-size:14px;color:var(--ink3);margin-bottom:10px;font-weight:700}
.sheet .q{font-size:17px;line-height:1.9;margin-bottom:10px}
.sheet .qbox{padding:20px 0;border-bottom:1px solid var(--line)}
.sheet .sign{border:1px solid var(--line2);background:var(--soft);padding:16px;margin-bottom:12px}
.sheet .sign .sb{font-size:15px;line-height:1.9;color:var(--ink2);margin-bottom:12px}
.sheet .go{position:sticky;bottom:0;background:var(--page);padding:16px 0;border-top:1px solid var(--line)}
.sheet .go .btn{width:100%;padding:18px;font-size:18px}
.sheet .done{text-align:center;padding:60px 20px}
.sheet .done .mk{font-size:44px}
.sheet .done .tx{font-size:19px;font-weight:700;color:var(--navy);margin-top:16px}
.sheet .done .sb{font-size:16px;color:var(--ink2);margin-top:10px;line-height:1.9}
@media (max-width:600px){ .sheet{padding:16px 14px 100px} .sheet .hd .ti{font-size:20px} }

/* ===== 面接官の入力（面接しながら押す）===== */
.iv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:16px;align-items:start}
@media (max-width:980px){.iv{grid-template-columns:1fr}}
.iv .who dl{margin:0}
.iv .scale{display:grid;grid-template-columns:1fr auto;gap:10px 14px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line)}
.iv .scale .nm{font-size:15px}
.iv .pick button{font-size:15px;padding:9px 13px}
.iv .big button{font-size:16px;padding:12px 18px;font-weight:700}
.jobs{font-size:14px}
.jobs .j{padding:7px 0;border-bottom:1px solid var(--line)}
.jobs .j b{font-weight:700}
.jobs .j span{color:var(--ink2);margin-left:8px}

/* ===== 面接の一覧・架電のログ（2026-09-10）===== */
.daybar{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 16px}
.daybar button{font-size:14px;padding:8px 14px;border:1px solid var(--line2);background:#fff;
  color:var(--ink2);width:auto;font-weight:600}
.daybar button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.ivrow{display:flex;align-items:center;gap:14px;padding:13px 15px;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--sky);margin-bottom:7px;flex-wrap:wrap}
.ivrow.done{border-left-color:var(--line2);opacity:.85}
.ivrow.miss{border-left-color:var(--sun)}
.ivrow .tm{font-family:var(--fn);font-size:16px;font-weight:700;color:var(--navy);min-width:96px}
.ivrow .who{flex:1;min-width:150px}
.ivrow .who .nm2{font-size:15.5px;font-weight:700}
.ivrow .who .sub{font-size:13px;color:var(--ink2);margin-top:2px}
.ivrow .st{font-size:13px}
.log{font-size:14px}
.log .r{display:grid;grid-template-columns:96px 78px 1fr auto;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.log .r .d{font-family:var(--fn);color:var(--ink3);font-size:13px}
.log .r .res{font-weight:700}
.log .r .res.ng{color:var(--ng)}
.log .r .res.ok{color:var(--sky-d)}
/* ★メモは縮んでよい。`min-width:0` が無いと、長いメモが列を押し広げて
   **右はしの担当者名が外へ押し出される**（2026-10-15 社長「UI きれてる」）。 */
.log .r .nt{color:var(--ink2);min-width:0;overflow-wrap:anywhere}
/* ★メモの改行をそのまま出す（2026-10-15 メモ欄を複数行にしたため） */
.log .r .nt{white-space:pre-wrap}
.log .r .by{font-size:12.5px;color:var(--ink3);white-space:nowrap}
.hist{border-left:2px solid var(--line);padding-left:14px;margin:10px 0}
.hist .h1{font-size:13.5px;color:var(--ink2);padding:6px 0}
.hist .h1 b{color:var(--ink)}
.hist .h1.moved{color:var(--sun-d)}
@media (max-width:768px){
  .log .r{grid-template-columns:1fr;gap:3px}
  .ivrow .tm{min-width:auto}
}
/* ★カードが細いときは、1行に並べず縦に積む（2026-10-15 社長「UI きれてる」）。
   📌 画面が広くても、詳細は2列なので**左のカードは細い。**
     横に4つ並べたままだと、メモが数文字幅になって縦に長く伸びる（画面で確認）。
   ⚠️ 使えないブラウザでは、これまでどおり横並びのまま（壊れない）。 */
@container (max-width:560px){
  .log .r{grid-template-columns:1fr;gap:2px;padding:12px 0}
  .log .r .by{text-align:right}
  /* ★メモが無い回では、その欄ごと消す。
     縦に積むと、空の欄がそのまま**ぽっかり空いた余白**になる（画面で確認）。
     ⚠️ `:empty` は中に改行があると効かないので、画面側で印（`nothing`）を付けている。 */
  .log .r .nt.nothing{display:none}
}

/* ===== 面接できる日時のカレンダー（2026-09-28 社長「カレンダーのような画面にする」） =====
   ★枠で囲いすぎない。区切りは細い線と余白だけ（CLAUDE.md デザインのルール1）。 */
.scalbar{display:flex;align-items:center;gap:12px;margin:16px 0 8px}
.scalbar b{font-size:16px;letter-spacing:.06em}
.scal{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.scal .sh{padding:6px 4px;text-align:center;font-size:12px;color:var(--ink3);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#FAFCFE}
.scal .sh:first-child,.scal .scell:nth-child(7n+8){color:var(--ng)}
.scell{min-height:74px;padding:4px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.scell.out{background:#FAFBFC}
.scell .sd{font-size:13px;color:var(--ink2);margin-bottom:3px}
.scell .sd span{font-size:11px;color:var(--ink3);margin-left:3px}
.schip{display:flex;align-items:center;gap:4px;font-size:12px;line-height:1.5;
  padding:2px 3px;margin-bottom:2px;background:var(--sky-bg);border-left:2px solid var(--sky)}
.schip b{font-weight:700}
.schip span{color:var(--ink2)}
.schip i{font-style:normal;color:var(--sky-d);font-weight:700;margin-left:auto}
.schip button{border:0;background:none;color:var(--ink3);cursor:pointer;
  font-size:14px;line-height:1;padding:0 2px}
/* ★ボタンは2つ並ぶ（面接官を決める「…」／消す「×」）。右へ寄せるのは1つ目だけ。
 *   両方に margin-left:auto を付けると、あいだが開いて別のものに見える。 */
.schip button:first-of-type{margin-left:auto}
.schip button:hover{color:var(--ng)}
.schip.taken{background:#EFF4F8;border-left-color:var(--ink3)}
@media (max-width:760px){
  .scell{min-height:56px}
  .scell .sd span{display:none}
  .schip span{display:none}
}

/* ===== 聞き取り項目（会社情報・現場） 2026-09-30 =====
   ★デザインのルール（CLAUDE.md）：枠で囲まない。区切りは余白と1本の線だけ */
.cgrp{padding:22px 0;border-top:1px solid var(--line)}
.cgrp:first-of-type{border-top:none;padding-top:4px}
.cgh{font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--navy);margin-bottom:14px}
.cghead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.cghead h3{margin:0}
.cghead .done{font-size:13px;font-weight:700;color:var(--sky-d)}
.cghead .todo{font-size:13px;color:var(--ink2)}
.cghead .todo b{color:var(--sun-d)}

/* 面接の拠点 */
.baselist{margin:8px 0}
.baserow{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.baserow .s{font-size:13px;color:var(--ink2);margin-left:10px;font-weight:400}
.baseadd{display:flex;gap:10px;align-items:center;margin-top:12px}
.baseadd input{flex:1}

/* 面接を手で入れる */
.ivnew{padding:4px 0}
.ivnew .chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ivnew input{margin-top:4px}

/* ファルコンだけのメモ（2026-09-30）★お客さまには出ない欄だと、一目で分かるようにする */
.falcononly{border-left:3px solid var(--navy)}
.falcononly h3{color:var(--navy)}

/* 「この人の画面を見る」最中の帯（2026-10-05）
   ★どの画面にいても必ず目に入るように、いちばん上に出す */
.seebar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 16px;margin-bottom:16px;
  background:var(--navy);color:#fff;font-size:14.5px;letter-spacing:.04em}
.seebar b{font-weight:700}
.seebar .btn{margin-left:auto;background:#fff;color:var(--navy);border-color:#fff}

/* ===== 面接できる日時：週表示（2026-10-06 社長指示）=====
 *   区切りは線を足さず、余白と細い直線だけで表す（デザインの決まり） */
.segs{display:inline-flex;border:1px solid var(--line2);border-radius:7px;overflow:hidden}
.seg{border:0;background:#fff;color:var(--ink2);font-size:13px;font-weight:700;padding:5px 14px;width:auto}
.seg.on{background:var(--navy);color:#fff}
.wk{display:grid;grid-template-columns:52px repeat(7,1fr);
    border-top:1px solid var(--line);border-left:1px solid var(--line);user-select:none;touch-action:none}
.wk-h{padding:7px 4px;text-align:center;font-size:13px;color:var(--ink2);font-weight:700;
      border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#FAFBFC}
.wk-h.today{color:var(--sky-d)}
.wk-h span{font-size:11px;color:var(--ink3);margin-left:3px}
.wk-t{font-size:11.5px;color:var(--ink3);text-align:right;padding:0 6px;
      border-right:1px solid var(--line);border-bottom:1px solid var(--line);line-height:26px;height:26px}
/* ★マスは button。div だと画面の押し判定（closest('button')）に拾われない（2026-10-07） */
.wk-c{height:26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
      cursor:pointer;position:relative;padding:0;margin:0;background:#fff;
      width:100%;display:block;border-top:0;border-left:0;border-radius:0}
button.wk-c:hover{background:var(--sky-bg)}
.wk-c.past{background:#FAFBFC;cursor:default}
.wk-c.pick{background:var(--sky-bg)}
.wk-c.has{cursor:default}
.wk-c.cont{background:var(--sky-bg);cursor:default}
/* ★空いている枠の続きはグレー（予約の続きだけ赤にする／2026-10-13 社長指示） */
.wk-c.cont.free{background:var(--soft2)}
/* ⚠️ 枠の見た目は、**自分のマスからはみ出させない**（2026-10-06）。
 *   はみ出すと、下のマスを覆ってしまい、**空いているのになぞれなくなる。**
 *   長さは文字（「本社60分」）で分かるようにする。 */
/* ★空いている枠はグレー、予約が入っているものは赤（2026-10-13 社長
 *   「カレンダーなんだけど、空きはグレーで、予約済みは赤がいいんじゃないかな」）。
 *   🔴 それまでは**どちらも同じ薄い赤**で、ひと目では見分けがつかなかった。 */
.wk-s{position:absolute;inset:1px;display:flex;align-items:center;gap:4px;padding:0 5px;
      background:var(--soft2);border-left:3px solid var(--line2);border-radius:3px;
      font-size:11.5px;color:var(--ink2);overflow:hidden;
      pointer-events:none}
.wk-s button{pointer-events:auto}
.wk-s.taken{background:#F3F4F6;border-left-color:var(--ink3);color:var(--ink2)}
.wk-s b{font-weight:700;white-space:nowrap}
.wk-s i{font-style:normal;font-size:11px;margin-left:auto}
.wk-s button{border:0;background:transparent;color:var(--ink3);font-size:14px;
             padding:0 2px;width:auto;line-height:1}
.wk-s button:first-of-type{margin-left:auto}
@media(max-width:760px){
  .wk{grid-template-columns:42px repeat(7,1fr)}
  .wk-h,.wk-s{font-size:11px}
}

/* ログイン画面のロゴ（2026-10-08 社長指示「ロゴもいれる」） */
.brand2 .lg2{display:block;height:34px;width:auto;margin:0 auto 10px}

/* ===== ほかの会社へのご紹介の小窓（public/refer.js・2026-10-08） ===== */
.rfov{position:fixed;inset:0;background:rgba(28,28,28,.45);display:flex;align-items:flex-start;justify-content:center;
  padding:48px 16px;overflow-y:auto;overscroll-behavior:contain;z-index:50}
.rfbox{background:#fff;width:100%;max-width:620px;padding:28px 28px 24px;border-radius:4px;
  position:relative}
/* ★小窓を閉じるバツは、右上（2026-10-12 社長
   「モーダル系の閉じるボタンは右上にバツボタンを用意して」）。
   ⚠️ 枠も背景も付けない（デザインのルール1＝区切りは余白と線だけ）。
   ⚠️ 押しやすさのため、見た目は小さくても当たりは44px確保する。 */
.rfx{position:absolute;top:10px;right:10px;width:44px;height:44px;
  border:0;background:transparent;color:var(--ink3);font-size:26px;line-height:1;
  font-weight:400;padding:0;cursor:pointer;border-radius:4px}
.rfx:hover{color:var(--ink);background:var(--soft2)}
/* ★見出しがバツに重ならないよう、右に逃がす */
.rfbox h3{padding-right:44px}
.rfbox h3{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:16px}
.rfco{padding:14px 0;border-top:1px solid var(--line)}
.rfco:last-of-type{border-bottom:1px solid var(--line);margin-bottom:16px}
.rfnm{font-weight:700;margin-bottom:6px}
.rfsite{display:flex;gap:10px;align-items:flex-start;padding:6px 0;cursor:pointer;line-height:1.7}
.rfsite input,.rfok input{width:auto;margin:5px 0 0}
.rfsite .h{display:block;font-size:12.5px;color:var(--ink3)}
.rfok{display:flex;gap:10px;align-items:flex-start;font-weight:700;cursor:pointer;line-height:1.7}
.rferr{margin-top:12px;color:var(--ng);font-weight:700}
/* 応募者の詳細の見出し（2026-10-09 社長「消すボタンは右上におく」） */
.dhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.dhead .hint{margin:0;flex:1;min-width:200px}

/* 対象外の方（連絡NG・見送り・不採用・辞退）はグレーに（2026-10-09 社長指示）
   ★消すのではなく、**動かさない方だと分かる**ようにする。押せば中は見られる。 */
/* 条件から外れた方（2026-10-11 社長「グレーにするのは、黄色いところの背景だけで。
   文字とか項目は他といっしょにする」）。
   ★**文字は薄くしない。** 読みにくくなるだけで、情報は同じだけ要る。
     区別は**行の背景**（下の .row.gray）でつける。 */
.main.off{}

/* 応募者カードの帯（2026-10-09 社長「薄い文字じゃなくてわかりやすくしてほしい」）
   ★灰色の小さな字をやめ、読める大きさで。区切りは枠ではなく余白と色の濃さで表す。 */
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.tg{font-size:12.5px;font-weight:700;color:var(--ink);background:var(--soft2);
    padding:3px 9px;border-radius:999px;line-height:1.6}
.tg.st{background:var(--sky-bg);color:var(--sky-d)}
.tg.ago{background:transparent;color:var(--ink2);padding-left:2px}

/* フェーズの札（2026-10-20 社長「このカテゴリにして、フェーズがわかるようにして
   最寄駅の隣に移動して」）。お名前・お住まいの隣に、短い言葉で1つだけ。
   ⚠️ 枠線は付けない（デザインのルール1）。濃さだけで区切る。 */
.ph{display:inline-block;font-size:12px;font-weight:700;margin-left:8px;
    padding:2px 9px;border-radius:999px;background:var(--soft2);color:var(--ink2);
    vertical-align:1px;letter-spacing:.02em;
    /* ⚠️ **札を折り返させない。** 「追いかけ　中」と割れると読めない */
    white-space:nowrap}
/* 🔴 **名前の行は「かたまりごと」に折り返す**（2026-10-20 画面で見つけた）。
   📌 フェーズの札を足したら、**「神奈川県 川／崎市」「応募者／27」と
     文字の途中で割れた。** 追いかけ中のカードは右にボタンが並ぶため、
     お名前の欄が212pxしかない（画面で測った）。
   ★お名前・お住まい・札を、それぞれ1かたまりとして扱う。
     幅が足りなければ、かたまりごと次の行へ送る（途中では割らない）。 */
.nm2{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:2px}
.nm2 span{white-space:nowrap;margin-left:0}
.ph{margin-left:0}
.ph.oi{background:var(--soft2);color:var(--ink)}           /* 追いかけ中＝いま動いている */
.ph.yari{background:var(--sun-bg);color:var(--sun-d)}      /* やり取り中＝人が返す番 */
.ph.tome,.ph.sagasu,.ph.mio{background:transparent;color:var(--ink3);padding-left:0}  /* 止まっている */
/* 🔴 **差し色を使うのはここだけ**（CLAUDE.md のデザインのルール＝連絡NGに限る）。
   ほかのフェーズにも使うと、**本当に危ないものが埋もれる。**
   ⚠️ 変数の名前は `--sky`（空）だが、いまの中身は**ファルコンの赤**（#A30007）。
     名前はブランドを変えたときの名残で、**色は赤**。名前で判断しない。 */
.ph.ng{background:var(--sky-bg);color:var(--sky-d);font-weight:800}

/* お断りする小窓（public/decline.js・2026-10-08） */
.dcsec{padding:16px 0;border-top:1px solid var(--line)}
.dcsec:last-of-type{border-bottom:1px solid var(--line)}
.dcsec textarea{width:100%}

/* 面接官を決める小窓（public/slotedit.js・2026-10-08） */
.slesec{padding:16px 0;border-top:1px solid var(--line)}
.slesec:last-of-type{border-bottom:1px solid var(--line)}
.slerow{display:flex;gap:10px;align-items:center;padding:7px 0;cursor:pointer;line-height:1.7}
.slerow input{width:auto;margin:0}

/* 面接の日程を入れる小窓（public/ivbook.js・2026-10-08） */
.ivbsec{padding:14px 0;border-top:1px solid var(--line)}
.ivbh{font-weight:700;margin-bottom:10px}
/* ★日ごとの区切りをはっきりさせる（2026-10-09）
   🔴 日付を左に置いて時刻を右に折り返していたので、ボタンが縦に並ぶと
     **どこで日が変わるのか分からず、1日ずれた予約が入った。**
     日付は時刻の**上**に置き、日ごとに線で区切る。 */
.ivbday{padding:11px 0;border-top:1px solid var(--line2)}
.ivbday:first-of-type{border-top:0;padding-top:2px}
.ivbd{font-weight:700;color:var(--navy);margin-bottom:7px}
.ivbday .chips{display:flex;flex-wrap:wrap;gap:6px}
/* ★いま選んでいる日時。登録ボタンのすぐ上に出す */
.ivbpick{margin-top:14px;padding:11px 13px;background:var(--sky-bg);
  border-left:3px solid var(--sky-ln);font-size:.95em}
.ivbpick b{font-size:1.1em;color:var(--navy)}


/* この方のことを直す小窓（public/candfix.js・2026-10-11） */
.fxrow{margin-bottom:14px}
.fxrow input{width:100%}
.fxrow .h{margin-top:4px}
.fxok{margin-top:10px;color:var(--navy);font-size:13px}

/* 電話番号（2026-10-11 社長「ツールの電話番号がボタン押しにくい」「押したらtobiraひらくよ」）
   ★押すとトビラが開く。細いリンクだと押しづらいので、**大きく・押せる範囲を広く**する。 */
.telbig{display:inline-block;font-family:var(--fn);font-size:19px;font-weight:700;
  color:var(--navy);text-decoration:none;letter-spacing:.02em;
  padding:3px 10px;margin:-3px -10px;border-radius:6px}
.telbig:hover{background:var(--sky-bg);text-decoration:underline}

/* 薄く見せるとき（2026-10-11 社長「グレーアウトしている人が暗すぎる」）
   ★.6 や .5 だと文字が読めない。0.78〜0.85 までにとどめる。 */

/* フェーズのタブ（2026-10-11 社長「今の段階っていうのはフェーズって書いてタブにしてほしい」）
   ★プルダウンだと開かないと人数が見えない。タブなら、どこに何人いるかが一目で分かる。
   ⚠️ 区切りは下の細い線だけ。枠で囲まない（デザインのルール1）。 */
.ptab{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line2);margin:14px 0 0}
.pt{appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:14px;color:var(--ink2);font-weight:600;letter-spacing:.02em;
  padding:9px 14px 10px;margin-bottom:-1px;border-bottom:2px solid transparent;white-space:nowrap}
.pt:hover{color:var(--navy);background:var(--bg2)}
.pt span{display:inline-block;margin-left:7px;font-family:var(--fn);font-size:13px;
  color:var(--ink3);font-weight:700}
.pt.on{color:var(--navy);border-bottom-color:var(--navy)}
.pt.on span{color:var(--navy)}
.pt.al span{color:var(--sky-d)}
.pt.al span::after{content:"●";font-size:8px;margin-left:3px;vertical-align:2px}
@media (max-width:700px){.ptab{overflow-x:auto;flex-wrap:nowrap}.pt{padding:9px 11px 10px;font-size:13px}}

/* 録音を聞く（2026-10-11 社長指示）。384件ぶん入っていたのに本文に埋もれていた */
.rok{display:inline-block;margin-left:8px;font-size:12.5px;font-weight:700;
  color:var(--sky-d);text-decoration:none;white-space:nowrap}
.rok:hover{text-decoration:underline}
/* 通話の長さ。時刻の下に小さく */
.log .r .d em{display:block;font-style:normal;font-size:11px;color:var(--ink3);font-weight:400}

/* 左メニューの折りたたみ（2026-10-11）
   ★ふだん使うのは「採用」の5つだけ。設定とファルコン専用は畳んでおく。
     📌 Airワーク採用管理はメニューが4つしかない（CLAUDE.mdの原則2）。 */
.mfold{margin-top:6px}
.mfold>summary{list-style:none;cursor:pointer;font-size:11.5px;font-weight:700;
  color:var(--ink3);letter-spacing:.08em;padding:8px 14px 6px;user-select:none}
.mfold>summary::-webkit-details-marker{display:none}
.mfold>summary::before{content:"▸ ";font-size:10px;color:var(--ink3)}
.mfold[open]>summary::before{content:"▾ "}
.mfold>summary:hover{color:var(--navy)}

/* 1週間のカレンダー（2026-10-11 社長「面接画面はカレンダーが一週間分みれるようにする
   カレンダービューで」）。★予定と空き枠の両方を出す。片方だけだと「空いているか」が分からない。
   ⚠️ クラス名は `ivw-`。`.wk-` は**面接枠を入れる週の格子**で、別物。混ぜると列が壊れる（実際に踏んだ）。
   ⚠️ 区切りは細い線だけ。カードで囲まない（デザインのルール1）。 */
.ivwh{display:flex;align-items:center;gap:10px;margin:14px 0 10px;flex-wrap:wrap}
.ivwh b{font-size:15px;color:var(--navy);letter-spacing:.04em}
.ivw{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line2);
  border:1px solid var(--line2)}
.ivwd{background:#fff;min-height:116px;padding:7px 6px 9px;min-width:0}
.ivwd.we{background:var(--bg2)}
/* ★今日は、背景を赤くすると面接の赤とぶつかる。上の線だけで示す */
.ivwd.today{background:#fff;box-shadow:inset 0 3px 0 var(--sky)}
.ivwdh{font-family:var(--fn);font-size:17px;font-weight:700;color:var(--navy);margin-bottom:6px}
.ivwdh span{font-family:inherit;font-size:11px;font-weight:400;color:var(--ink3);margin-left:1px}
.ivwd.today .ivwdh{color:var(--sky-d)}
/* ★黒でベタ塗りすると重い（2026-10-11 社長「黒っていうのがどうかな」）。
   塗りはうすく、**左の線だけで状態を示す**。デザインのルール1（枠線より余白と直線）に合わせる。 */
.ivwiv{display:block;width:100%;text-align:left;appearance:none;cursor:pointer;
  background:#fff;color:var(--ink);border:0;border-left:3px solid var(--sky);
  font-family:inherit;font-size:11.5px;line-height:1.4;
  padding:4px 6px;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ivwiv b{display:block;font-family:var(--fn);font-size:12.5px;font-weight:700;color:var(--sky-d)}
.ivwiv:hover{background:var(--sky-bg)}
/* 終わった面接はうすく、来なかった方は黄（要対応の色） */
.ivwiv.done{border-left-color:var(--line2);color:var(--ink3)}
.ivwiv.done b{color:var(--ink3)}
.ivwiv.miss{border-left-color:var(--sun)}
.ivwiv.miss b{color:var(--sun-d)}
.ivwfree{font-size:11px;color:var(--sky-d);font-weight:700;margin-top:3px}
.ivwno{font-size:12px;color:var(--line2)}
@media (max-width:760px){.ivw{grid-template-columns:repeat(2,minmax(0,1fr))}.ivwd{min-height:84px}}

/* 面接官のアイコン（2026-10-11 社長「一覧画面に面接官も表示させる。アイコンで」）
   ★名前をそのまま並べると行が折り返す。頭文字の丸にして、title に名前を入れる。 */
.ivwho{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;
  margin-left:5px;border-radius:50%;background:var(--sky-bg);color:var(--sky-d);
  font-size:11.5px;font-weight:700;vertical-align:2px;cursor:default;border:1px solid var(--sky-ln)}
/* ★ご連絡の約束の日を過ぎた方（2026-10-13 社長「赤く出して急かせる」）。
 *   区切りは**左の線と、ごく薄い背景だけ**。枠では囲まない（デザインのルール1）。 */
.q.late{border-left:3px solid var(--sky);background:var(--sky-bg)}
.q.late .qt{color:var(--sky-d)}

/* ★文面をえらぶ小窓（2026-10-13 社長「さらにモーダルで文面を見ながら選べるように」）。
 *   送信の小窓の上に重なるので、背面より前に出す。
 *   区切りは**余白と細い線だけ**。1つ1つを枠で囲まない（デザインのルール1）。 */
.cspickov{z-index:70}
.cspicks{max-height:62vh;overflow-y:auto;padding-right:4px}
.cspick{display:block;width:100%;text-align:left;border:0;background:transparent;
  padding:12px 12px 14px;border-left:2px solid var(--line);border-radius:0;
  font-family:inherit;cursor:pointer;margin-bottom:6px}
.cspick:hover{background:var(--soft)}
.cspick.on{border-left-color:var(--sky);background:var(--sky-bg)}
.cspn{font-size:14px;font-weight:700;color:var(--ink)}
.cspd{font-size:12px;font-weight:400;color:var(--ink3);margin-left:8px}
.cspt{font-size:13px;line-height:1.75;color:var(--ink2);white-space:pre-wrap;margin-top:5px}

/* ★手で送る小窓の「これまでのやりとり」（2026-10-13 社長
 *   「同じ画面でLINEとSMSの両方のやりとりを確認できるようにして」）。
 *   区切りは**余白と左線だけ**。枠で囲まない（デザインのルール1）。 */
.cshist{max-height:200px;overflow-y:auto;padding-right:4px}
.csmsg{padding:7px 0 7px 10px;border-left:2px solid var(--line2);margin-bottom:8px}
.csmsg.in{border-left-color:var(--sky)}
.cst{font-size:14px;line-height:1.7;white-space:pre-wrap}
.csm{font-size:12px;color:var(--ink3);margin-top:3px}

/* カレンダーの中の面接（1週間のカレンダー） */
.ivchip{display:block;width:100%;appearance:none;border:0;cursor:pointer;text-align:left;
  background:var(--sky);color:#fff;border-left:3px solid var(--navy-d);
  font-family:inherit;font-size:11.5px;font-weight:700;line-height:1.3;padding:3px 5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:100%}
.ivchip:hover{background:var(--sky-d)}
.ivchip.done{background:var(--soft2);color:var(--ink3);border-left-color:var(--line2)}
.ivchip.miss{background:var(--sun-bg);color:var(--sun-d);border-left-color:var(--sun)}

/* 見送りの中の理由のタブ（2026-10-11 社長指示）。フェーズのタブの下に、一段小さく出す */
.ptab.sub{border-bottom:0;margin:10px 0 0;gap:0}
.ptab.sub .pt{font-size:13px;padding:6px 11px 7px;border-bottom:0;border-radius:14px;margin-bottom:0}
.ptab.sub .pt.on{background:var(--soft2);color:var(--navy)}
.ptab.sub .pt span{font-size:12px;margin-left:5px}

/* 応募者の詳細＝Salesforce型のまとまり（2026-10-11 社長「詳細ページはこのSalesforceを参考に！」）
   ★情報を意味のまとまりで区切り、各項目の鉛筆でその場で直せる。
   ⚠️ 区切りは細い線と余白だけ。まとまりの中にカードを入れ子にしない（デザインのルール1）。 */
/* 🔴 **カードの余白をゼロにしたので、中身に自分で余白を持たせる**（2026-10-15 社長
   「UI きれてる padding margin」）。
   📌 `.dsec`（畳めるまとまり）は `.dbody` が 18px を持っているので大丈夫だったが、
     その下に直に置いた「電話の記録」は**余白ゼロでカードの端に貼りつき、
     右はしの担当者名が切れていた**（社長の画面で発覚）。
   ★まとまりの中と同じ 18px にそろえる。 */
.dcard{padding:0;
  /* ★このカードの「中の幅」で見た目を切り替えられるようにする（下の @container）。
     画面の幅ではなく**カードの幅**で判断したい。詳細は2列なので、画面が広くても
     左のカードは細いことがある（実際に、電話の記録のメモが数文字幅に潰れた）。 */
  container-type:inline-size}
.dcard>h3{margin:0;padding:16px 18px 8px}
.dcard>.log,.dcard>.empty{padding-left:18px;padding-right:18px}
.dcard>.log{padding-bottom:14px}
.dsec{border-bottom:1px solid var(--line)}
.dsec:last-child{border-bottom:0}
.dsec>summary{list-style:none;cursor:pointer;padding:12px 18px;font-size:13.5px;font-weight:700;
  color:var(--navy);letter-spacing:.04em;background:var(--soft);user-select:none}
.dsec>summary::-webkit-details-marker{display:none}
.dsec>summary::before{content:"▸ ";font-size:10px;color:var(--ink3)}
.dsec[open]>summary::before{content:"▾ "}
.dsec>summary:hover{background:var(--soft2)}
.dbody{padding:4px 18px 14px}
.drow{display:grid;grid-template-columns:132px minmax(0,1fr);gap:10px;align-items:baseline;
  padding:7px 0;border-bottom:1px solid var(--line)}
.drow:last-child{border-bottom:0}
.dk{font-size:12.5px;color:var(--ink2)}
.dd{font-size:14px;color:var(--ink);min-width:0;word-break:break-word}
.dv{white-space:pre-wrap}
/* 鉛筆。ふだんは薄く、その行にマウスを乗せるとはっきり出す */
.pen{appearance:none;border:0;background:transparent;cursor:pointer;color:var(--line2);
  font-size:13px;padding:1px 5px;margin-left:5px;border-radius:4px;vertical-align:1px}
.drow:hover .pen{color:var(--ink3)}
.pen:hover{background:var(--sky-bg);color:var(--sky-d)}
.edit{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.edit input,.edit select{padding:5px 8px;font-size:14px;max-width:230px}
@media (max-width:620px){.drow{grid-template-columns:1fr;gap:2px}.dk{font-size:12px}}

/* カードのどこを押しても開く（2026-10-11 社長指示）。押せることが分かる見た目にする */
[data-cardopen]{cursor:pointer}
.row:hover{background:var(--soft)}
.row.gray:hover{background:#E0E0E4}
.row.c:hover{background:#FFF6DC}

/* 応募者のひと目で分かる数字（2026-10-11 社長指示）
   ★応募回数・面接予約回数・電話回数（通電○／不在×）・SMS送信回数。
   ⚠️ かけた電話と話せた回数は分ける。混ぜるとお客さまに出せない数字になる。 */
.dnum{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--line);background:var(--soft)}
.dn{flex:1;min-width:84px;padding:11px 10px 12px;text-align:center;border-right:1px solid var(--line)}
.dn:last-child{border-right:0}
.dnv{font-family:var(--fn);font-size:20px;font-weight:700;color:var(--navy);line-height:1.1}
.dnk{font-size:11.5px;color:var(--ink2);margin-top:3px}
.dns{font-size:11px;color:var(--sky-d);font-weight:700;margin-top:2px}

/* お返事の一覧（2026-10-11 社長「SMS未返信ボックスも用意してほしい」）
   ★本文をそのまま見せる。開かなくても中身が分かることが大事。 */
.ibtext{margin-top:7px;padding:9px 12px;background:var(--soft);border-left:3px solid var(--line2);
  font-size:14px;line-height:1.75;white-space:pre-wrap;word-break:break-word}
.row.c .ibtext{background:var(--sun-bg2);border-left-color:var(--sun)}

/* ★名前のないまとまり（いまは「数字で見る」だけ）。上に余白を置いて、ふだん使うものと分ける */
.msolo{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

/* ★選考の進捗＝横棒（2026-10-11 社長「数字を横棒に」）。
   縦棒だと、応募が多いほど他の棒が潰れて読めなくなる。 */
.hbars{display:flex;flex-direction:column;gap:9px}
.hbar{display:flex;align-items:center;gap:12px}
.hbn{width:112px;flex:none;font-size:13.5px;color:var(--ink2);text-align:right}
.hbt{flex:1;display:flex;align-items:center;gap:9px;min-width:0}
.hbf{height:22px;background:var(--sky);border-radius:2px;min-width:2px}
.hbf.hi{background:var(--navy)}
.hbt b{font-size:15px;font-variant-numeric:tabular-nums}
.hbr{width:46px;flex:none;text-align:right;font-size:13px;color:var(--ink3)}
.hbr.low{color:var(--sun-d);font-weight:700}
@media(max-width:560px){.hbn{width:84px;font-size:12.5px}}

/* ★スマホでの「数字で見る」。上の帯の続きとして並べる。
   ⚠️ **この指定は、上の .msolo より後ろに置くこと。** 前に置くと、あとの指定に負けて効かない
     （2026-10-11、実際に効かずに画面で気づいた）。
   ⚠️ .mi は幅いっぱいの作りなので、幅も戻す。戻さないと**1項目で1行を占める**。 */
@media (max-width:768px){
  .msolo{margin-top:0;padding-top:0;border-top:0}
  .mrow.msolo .mi{flex:none;width:auto;justify-content:flex-start}
}

/* ★面接前日の確認電話（2026-10-12 社長指示）。小窓の中のまとまり。
   ⚠️ 枠で囲まない。上に細い線1本と余白で区切る（デザインのルール1）。 */
.dsec2{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.dsec2h{font-size:14px;font-weight:700;color:var(--navy);letter-spacing:.04em;
        display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.rmlog{font-size:13px;color:var(--ink2);line-height:1.8;margin-bottom:10px}
.rmlog b{color:var(--navy)}
.rmbox{display:flex;flex-wrap:wrap;gap:6px}
.rmbox input{flex:1 1 100%}
.tg.ok2{background:var(--sky-bg);color:var(--sky-d);border:0}

/* ★社内メモ（2026-10-12 社長「先方からのSMSみたいな見せ方はNG」）。
   🔴 吹き出しにしない。左右にも寄せない。**やりとりとは別物だと一目で分かる形。** */
.note1{margin:8px 0;padding:9px 12px;background:var(--soft2);border-left:3px solid var(--ink3);
       font-size:13.5px;line-height:1.75;color:var(--ink)}
.note1 .nl{display:inline-block;font-size:11.5px;font-weight:700;color:var(--ink2);
           letter-spacing:.08em;margin-right:8px}
.note1 .nt{white-space:pre-wrap}
.note1 .nb{display:block;font-size:12px;color:var(--ink3);margin-top:3px}
/* 社内メモの入力欄の見出し */
.note-h{margin:14px 0 6px;font-size:13.5px;font-weight:700;color:var(--navy)}
.note-h span{margin-left:9px;font-weight:400;font-size:12.5px;color:var(--ink3)}

/* ★LINEのひもづけ（2026-10-12 社長「レコメンド出して接続できる画面を」）。
   ⚠️ 枠で囲まない。区切りは余白と細い線（デザインのルール1）。 */
.lohd{display:flex;align-items:center;gap:12px}
.loic{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;background:var(--soft2)}
.loic.none{display:flex;align-items:center;justify-content:center;font-size:10px;
           color:var(--ink3);font-weight:700}
.locand{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.loh{font-size:13px;font-weight:700;color:var(--ink2);letter-spacing:.04em;margin-bottom:6px}
.lorow{display:flex;align-items:center;justify-content:space-between;gap:12px;
       padding:9px 0;border-bottom:1px solid var(--line)}
.lorow:last-child{border-bottom:0}
/* 応募者の「LINE」の欄から紐づける小窓（2026-11-02）。1行＝1つのLINE。押す当たりは行ぜんぶ */
.lorow.lhrow{justify-content:flex-start;cursor:pointer;min-height:44px}
.lorow.lhrow input[type=radio]{margin:0;width:18px;height:18px;min-height:0;flex:0 0 18px;padding:0}
.lorow.lhrow > div{flex:1 1 auto;min-width:0}
@media(max-width:640px){.lorow{flex-wrap:wrap}.lorow .btn{width:100%}}

/* ★面接官ごとの状況（2026-10-12 社長指示） */
.sbnum{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;margin-top:5px;
       font-size:13px;color:var(--ink2)}
.sbnum b{font-size:17px;color:var(--navy);font-variant-numeric:tabular-nums;margin-right:3px}
.sbnum .ng b{color:var(--sun-d)}
.sbwait{margin-top:7px;font-size:13px;color:var(--ink2);line-height:2}

/* ★有効な応募の条件（2026-10-11 社長指示） */
.vlist{margin:6px 0 10px;padding-left:1.2em;font-size:13.5px;color:var(--ink);line-height:1.9}
.vlr{display:block;padding:4px 0;font-size:14px}
.vlr input{width:auto;margin-right:7px}

/* ★自動の追いかけのスイッチ（2026-10-12 社長「一覧画面でスイッチできるように」）。
   止まっていることが、ひと目で分かる色にする。 */
.btn.sw{font-size:12.5px;padding:5px 11px}
/* ★押せるほうの「送付中」も緑にそろえる（2026-10-14 社長指示）。
   札（.sw.fuda）と色が違うと、同じ「送付中」が2色あるように見える。 */
.btn.sw.on{border-color:#BFE0CB;color:var(--go)}
.btn.sw.off{background:var(--soft2);color:var(--ink2);border-color:var(--line2)}
/* ★止まっている理由。**ボタンの下に1行で置く**（2026-10-12 画面を見て直した）。
   ボタンと横に並べると、理由が3行に折り返してボタンを押し込み、読みにくかった。
   `.acts` は flex-wrap なので、幅100%にすると自然に次の行へ落ちる。 */
.swy{color:var(--ink3)}

/* 追いかけの札（2026-10-14 社長「全ての候補者にこれ表示して
   『追いかけ自動送付中』『追いかけ自動送付停止中』」）
   ⚠️ **押せる人はボタン、押せない人はこの札**。見た目で区別がつくようにする
     （「直らないボタンは、嘘のボタン」）。
   ⚠️ 枠線で囲わない（デザインのルール1）。色と文字だけで示す。 */
.sw.fuda { display:inline-block; font-size:12px; letter-spacing:.04em;
           padding:4px 0; background:none; border:none; cursor:default; }
/* ★「送付中」を緑、「停止中」をグレー（2026-10-14 社長指示）。
   📌 はじめ送付中を赤にしたが、赤は「選択中・進行中・主ボタン」で使っているので
     **押せるものと見分けがつかなかった。** 緑は自動送信が動いていることだけに使う。 */
.sw.fuda.on  { color:var(--go); font-weight:700; }
.sw.fuda.off { color:var(--ink3); }

/* リンクの見た目をしたボタン（2026-10-14）。
   ⚠️ この画面のクリックは button しか拾わないので、押せるものは必ず button にする。
     `<a>` にすると**見た目はリンクなのに押しても何も起きない**。 */
.aslink { background:none; border:none; padding:0; font:inherit; color:var(--sky-d);
          text-decoration:underline; cursor:pointer; }
.aslink:hover { color:var(--navy); }

/* 送る直前に「どの会社から送るか」（2026-10-14 社長「誤操作が発生してしまいそうで」）
   ⚠️ 枠で囲わない（デザインのルール1）。下の線1本と余白で区切る。
     ここで気づけなければ、よその会社の名前でSMSが飛ぶ。 */
.csfrom { font-weight:700; letter-spacing:.04em; padding:0 0 10px;
          margin:-6px 0 12px; border-bottom:1px solid var(--line); }

/* 「いま見ている会社」の見出し（2026-10-14 社長「誤操作が発生してしまいそうで」）
   ⚠️ プルダウンだけだと、何を選んでいるのか・それが何を意味するのかが分からない。 */
.cohere { font-size:11.5px; color:var(--ink3); letter-spacing:.04em; margin-right:6px; }
#pickco { font-weight:700; }

/* ★面接カレンダー（§2・2026-10-15）。
 *   区切りは余白と細い線だけ。面接官の色は、サーバーが決めたものをそのまま使う。 */
.calbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-bottom:16px}
.calbar-l,.calbar-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.calnow{font-size:15px;letter-spacing:.04em;margin-left:6px}
.pick.sm button{font-size:13px;padding:6px 14px}
.calstaff{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px;font-size:13px;color:var(--ink2)}
.calsx{display:inline-flex;align-items:center}

/* 週 */
.cw{display:grid;grid-template-columns:58px repeat(7,1fr);border-top:1px solid var(--line)}
.cw-h{padding:9px 4px;text-align:center;font-size:12.5px;color:var(--ink3);font-weight:700;
  border-bottom:1px solid var(--line)}
.cw-h span{display:block;font-size:11px;font-weight:400}
.cw-h.today{color:var(--sky-d)}
.cw-t{font-size:11px;color:var(--ink3);text-align:right;padding:0 6px 0 0;height:26px;line-height:26px}
.cw-c{height:26px;border-bottom:1px solid var(--line);border-left:1px solid var(--line);
  position:relative}
.cw-iv,.cw-ak{width:100%;height:100%;border:0;text-align:left;padding:0 5px;font-size:11.5px;
  line-height:26px;overflow:hidden;white-space:nowrap;cursor:pointer;display:block}
.cw-iv{color:#fff;font-weight:700}
.cw-iv.cont,.cw-ak.cont{border-top:0}
.cw-ak{border-left:3px solid;color:var(--ink2)}
/* 面接枠のマス（開始時刻ごと）：空き＝水色／入れない＝灰色（2026-10-29） */
.cw-ms{width:100%;height:100%;border:0;border-left:3px solid;text-align:left;padding:0 5px;font-size:11.5px;
  line-height:26px;overflow:hidden;white-space:nowrap;cursor:pointer;display:block}
.cw-ms.ake{background:#dff1fb;color:#14506e;font-weight:600}
.cw-ms.no{background:#e4e6ea;color:#8a8f98;cursor:default}
.cw-fix{display:block;width:100%;border:0;background:none;color:var(--ink3);font-size:11px;text-align:left;padding:0 5px;cursor:pointer;text-decoration:underline}
.calrule{font-size:13px;color:var(--ink3);margin:0 0 8px}
.cw-plus{position:absolute;inset:0;width:100%;height:100%;border:0;background:none;
  color:var(--ink3);font-size:14px;opacity:0;cursor:pointer}
.cw-c:hover .cw-plus{opacity:1;background:var(--soft2)}

/* 月 */
.cm{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--line)}
.cm-h{padding:8px 4px;text-align:center;font-size:12px;color:var(--ink3);font-weight:700;
  border-bottom:1px solid var(--line)}
.cm-c{min-height:92px;border-bottom:1px solid var(--line);border-left:1px solid var(--line);
  padding:5px 5px 7px}
.cm-c.off{background:var(--soft2);opacity:.6}
.cm-c.today .cm-d{color:var(--sky-d);font-weight:700}
.cm-d{font-size:12px;color:var(--ink2);display:flex;align-items:center;justify-content:space-between;
  margin-bottom:4px}
.cm-plus{border:0;background:none;color:var(--ink3);cursor:pointer;font-size:13px;opacity:0;padding:0 3px}
.cm-c:hover .cm-plus{opacity:1}
.cm-iv{display:block;width:100%;border:0;color:#fff;font-size:11px;padding:2px 5px;margin-bottom:2px;
  text-align:left;overflow:hidden;white-space:nowrap;cursor:pointer}
.cm-more,.cm-ak{font-size:11px;color:var(--ink3)}

/* 小窓の中 */
.calrow{display:flex;align-items:center;gap:8px}
.calrow input{flex:1}
.calwd{display:flex;gap:12px;flex-wrap:wrap}
.caltime{display:flex;flex-wrap:wrap;gap:5px;max-height:220px;overflow-y:auto;padding:2px}
.caltx{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;padding:4px 9px;
  border:1px solid var(--line2);cursor:pointer;white-space:nowrap}
.caltx.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
.caltx input{display:none}
@media(max-width:640px){
  .cw{grid-template-columns:44px repeat(7,1fr)}
  .cw-plus{opacity:1}
  .cm-plus{opacity:1}
  .cm-c{min-height:70px}
}
/* ★同じ時刻に2人以上いたら、横に並べる（1人だけ出すと、もう1人が画面から消える） */
.cw-in{display:flex;height:100%;gap:1px}
.cw-in > *{flex:1;min-width:0}
.cw-in.many .cw-iv,.cw-in.many .cw-ak{font-size:10px;padding:0 2px}

/* 🔴 移動中の「枠の無いマス」（2026-10-18 社長「これ作動しない」）。
 *   空き枠（.moveto）と**同じ色にしない。** 押さえてある時間と見分けがつかなくなる。
 *   ⚠️ 2026-10-15 に `.moveto` と `.cont` が同じ色で取り違えた例がある。薄い点線で「置けるが空きではない」を表す。 */
.wk-c.movefree{background:transparent;border:1px dashed var(--line);cursor:pointer}
.wk-c.movefree:hover{background:var(--sky-l);border-style:solid}

/* 🔴 読み込み中の目じるし（2026-10-18 社長「遅い時はローディング画面を出して」）。
 *   ★デザインの決まりどおり、**枠で囲まない。** 上に細い線が1本流れるだけ＋小さな一言。
 *   ★画面をふさがない（`pointer-events:none`）。読んでいる途中の邪魔をしない。
 *   ⚠️ `#root` の外に置くので、画面の描き直しでは消えない。消すのは `.on` を外したときだけ。 */
#loading{position:fixed;inset:0 0 auto 0;z-index:9999;pointer-events:none;
  opacity:0;transition:opacity .15s ease}
#loading.on{opacity:1}
#loading .bar{height:3px;background:var(--sky);
  animation:loadbar 1.1s ease-in-out infinite}
/* ⚠️ 上に寄せすぎると、画面の見出し（会社名・お名前）に重なって読みにくい。
 *   見出しの下に出す（2026-10-18 画面を見て直した）。 */
#loading .msg{position:absolute;top:64px;left:50%;transform:translateX(-50%);
  font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ink);
  background:#fff;padding:8px 18px}
@media (max-width:760px){ #loading .msg{top:52px} }
@keyframes loadbar{0%{width:8%}50%{width:70%}100%{width:98%}}
@media (prefers-reduced-motion:reduce){ #loading .bar{animation:none;width:100%} }

/* ===== キックオフ（戦略シートをツールに・2026-10-20）。区切りは余白と細い直線だけ ===== */
.kosec{margin:0 0 40px;padding:0 0 30px;border-bottom:1px solid var(--line)}
.kosec:last-of-type{border-bottom:0}
.kosec .cghead{align-items:center;margin-bottom:12px}
.kosec .cghead h3{margin:0}
.koact{margin-left:auto}
.kotodo{font-size:13px;color:var(--ink2)}
.kopre{white-space:pre-wrap;font-size:13px;line-height:1.75;color:var(--ink2);padding:10px 0;border-top:1px solid var(--line)}
/* 見るだけの項目（お客さまには入力欄にしない・2026-10-20） */
.rov{white-space:pre-wrap;padding:6px 0;color:var(--ink);line-height:1.8}

/* ===== 私のタスク・チーム（public/task.js・2026-10-21 段2） =====
   ⚠️ 囲まない。区切りは余白と線1本だけ（デザインのルール1） */
.tkg{position:relative;padding-right:80px}
.tkg .tkteam{position:absolute;right:0;top:0}
/* 担当が止まっている方（2026-10-21 修正4-④）。見出しは余白で区切る */
.tkst{margin-top:28px}
.tkst h4{margin:0 0 4px;font-size:15px;font-weight:700;color:var(--navy);letter-spacing:.04em}
.tkst h4 span{margin-left:12px;font-size:13.5px;font-weight:400;color:var(--ink3);letter-spacing:0}
.tke{padding:14px 2px;color:var(--ink3);font-size:14px}
.tg.tklate{background:transparent;color:var(--sky-d);padding-left:6px}
.tmrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.tmrow .tmm{flex:1;min-width:180px}

/* ===== 自動のSMS（public/jishasms.js・2026-10-21 段4）。区切りは余白と線だけ ===== */
.jssw{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.jssw .jssn{min-width:7em}
.jssw b{min-width:5em}
.jssw b.on{color:var(--sky-d)}
.jsstbl td{vertical-align:middle}
.jssline{padding:6px 0;line-height:1.9}
.jssex{white-space:pre-wrap;line-height:1.8;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:14px;word-break:break-all}
#jsstext{width:100%;font-size:15px;line-height:1.8}
.jsrrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}
.jsrrow input[type=number]{width:5.5em}
.jsrrow select{width:auto;max-width:100%}
.jsrck{display:block;padding:6px 0}

/* ===== 2026-10-21 お客さまの画面の使いやすさ（社長「全部やって」）。区切りは余白と線1本だけ ===== */
/* 今日やること（応募者一覧のいちばん上） */
.tdy{margin:18px 0 0}
.tdy h3{font-size:17px;font-weight:700;color:var(--navy);letter-spacing:.04em}
.tdr{display:flex;gap:30px;flex-wrap:wrap;padding:6px 0 4px;border-bottom:1px solid var(--line2)}
.tdb{appearance:none;border:0;background:transparent;display:flex;align-items:baseline;gap:8px;
  padding:6px 0 7px;margin-bottom:-1px;border-bottom:2px solid transparent;font-size:15px;color:var(--ink);font-weight:600}
.tdb b{font-family:var(--fn);font-size:26px;line-height:1.2;color:var(--sky-d)}
.tdb.z b{color:var(--ink3)}
.tdb:hover{color:var(--navy)}
.tdb.on{border-bottom-color:var(--navy)}
/* 私のタスクが0件のとき（1行） */
.tkone{display:flex;align-items:center;gap:12px;margin:10px 0 0;padding:4px 0 8px;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink2)}
.tkone b{margin-left:10px;font-weight:400;color:var(--ink3)}
.tkone .tkteam{margin-left:auto}
/* 絞り込みボタンはスマホだけ */
.fbtn{display:none}
/* 詳細の一番上の1行（次の連絡日・担当・メモ） */
.dstrip{display:flex;flex-wrap:wrap;gap:6px 28px;align-items:center;padding:10px 0 12px;margin:2px 0 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dstrip .ds{appearance:none;border:0;background:transparent;padding:4px 0;font-size:15px;color:var(--ink);text-align:left}
.dstrip .ds i{font-style:normal;font-size:12.5px;color:var(--ink3);margin-right:8px;font-weight:700}
.dstrip .ds b{font-weight:700;border-bottom:1px solid var(--line2)}
.dstrip .ds:hover b{border-bottom-color:var(--navy)}
.dstrip .ds.memo{margin-left:auto;font-weight:700;color:var(--sky-d)}
.dsec>summary .dedit{float:right;margin-top:-4px}
@media (max-width:700px){
  .fbtn{display:inline-flex;margin:12px 0 8px}
  .fbar.fold{display:none}
  .row{flex-wrap:wrap;padding-right:12px}
  .row .main{min-width:0;flex:1 1 100%}
  .row .acts{flex:1 1 100%}
  .tg{white-space:normal}
  .tdr{gap:18px}
  .dstrip .ds.memo{margin-left:0}
}
.dedit{text-align:right;margin:-4px 0 4px}

.dstrip a.ds{text-decoration:none;font-weight:700;color:var(--sky-d);padding:4px 0}
.dstrip a.ds:hover{text-decoration:underline}
.dtop{display:flex;align-items:center;justify-content:space-between;gap:8px 20px;flex-wrap:wrap}
.dtop .pass{flex:1 1 auto;min-width:0}
.dtanto{display:flex;align-items:center;gap:8px;font-size:15px;margin-left:auto}
.dtanto i{font-style:normal;font-size:12.5px;color:var(--ink3);font-weight:700}
.dtanto b{font-weight:700}
.dtanto.unset b{background:var(--sun-bg);color:var(--sun-d);padding:2px 10px}
.tav{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:700;appearance:none;border:0;padding:0;line-height:1;white-space:nowrap}
.tav.big{width:44px;height:44px;font-size:15px;cursor:pointer}
.tav.sm{width:24px;height:24px;font-size:10.5px;margin-left:6px;vertical-align:middle}
.tav.unset{background:transparent;color:var(--ink3);border:1.5px dashed var(--ink3)}
.tav.sm.unset{border-width:1px}
@media (max-width:768px){.dtanto{order:-1;width:100%;margin-left:0}}
.routebtn{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;text-decoration:none}
.drow.droute .dk{min-height:0}
a.maplk{display:inline-block;margin:4px 0 8px;font-size:12.5px;font-weight:700;color:var(--sky-d);text-decoration:none}
a.maplk:hover{text-decoration:underline}
a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}

/* ★いまどの会社を見ているか（2026-10-21 社長「URL開いた時に他社の開かれるの分かりにくい」）。
   会社の名前を大きく出す。ファルコンの人には、会社ごとに決まった色の線（上の線・名前の横の線）を添える。 */
.top .brand .sb{font-size:15px;font-weight:700;color:var(--navy);letter-spacing:.04em;margin-top:4px}
.top .brand .sb.conm{border-left:4px solid var(--co);padding-left:8px}
.top.fal{border-top:4px solid var(--co)}

/* =====================================================================
   2026-10-22 見た目の刷新（社長「文字が薄くて醜い」）
   ・文字を濃く：本文はほぼ黒（#1a1a1a）、補足は濃い灰色（#555より薄くしない）
   ・字を一回り大きく：本文15〜16px／字間0.06em／行間 本文1.9
   ・色を減らす：札は「うすい灰＋濃い字」にそろえる。行全体を黄色で塗らない（要対応は左の細い線だけ）
   ・枠の中に枠を入れない／角丸の多用をやめる（区切りは余白と細い線）
   ⚠️ 後ろに書いたものが勝つ。ここより下に打ち消しを足さないこと。
   ===================================================================== */
:root{
  --ink:#1a1a1a; --ink2:#444; --ink3:#555;
  --line:#dcdcdf; --line2:#bdbdc2;
}
body{font-size:15.5px;line-height:1.9;letter-spacing:.06em}
input,select,textarea{font-size:15.5px;border-radius:3px;letter-spacing:.04em}
label.l{font-size:14px;color:var(--ink2)}
h2{font-size:22px;letter-spacing:.06em}
.hint{font-size:14.5px;color:var(--ink3);line-height:1.9}
.h{color:var(--ink3)}
.btn{font-size:14.5px;border-radius:3px;letter-spacing:.06em}
.btn.sm{font-size:14px;padding:5px 11px}
.card{border-radius:0;border-width:0 0 1px 0;border-color:var(--line);padding:18px 0;background:transparent}
.card .card{border:0;padding:12px 0}
.tbl{font-size:15px}
.tbl th{font-size:13.5px;color:var(--ink3)}
.chip{font-size:13px;font-weight:600;border-radius:2px;color:var(--ink);background:var(--soft2);border-color:var(--line2)}
.chip.c,.chip.w,.chip.o,.chip.n,.chip.k{color:var(--ink);background:var(--soft2);border-color:var(--line2)}
.chip.k{background:#fff}
.chip.ng,.chip.c.ngc{color:var(--ng);border-color:var(--ng-ln)}
.flash{border-radius:0}
.tempbox{border-radius:0}

/* 左メニュー：折りたたまない。見出しは小さい字、項目は並べるだけ */
aside{width:216px;padding:14px 10px 40px}
aside .mh{font-size:12.5px;color:var(--ink3);letter-spacing:.1em;padding:16px 14px 4px;font-weight:700}
aside .mh:first-of-type{padding-top:4px}
aside .mrow{display:flex;flex-direction:column;margin:0}
.mi{border-radius:3px;font-size:15px;color:var(--ink);padding:8px 14px;gap:8px}
.mi .ic{display:none}
.mi[aria-current="true"]{background:var(--soft2);color:var(--ink);font-weight:700;box-shadow:inset 3px 0 0 var(--sky)}
.mi .bg{background:#fff;color:var(--ink);border:1px solid var(--line2);border-radius:2px;font-weight:600}
.mswitch{margin:0 6px 10px;padding:8px 10px;border:1px solid var(--line2);background:#fff;color:var(--ink);font-size:14px;border-radius:3px;text-align:left;font-weight:700}
.mswitch:hover{border-color:var(--ink)}
.kanrico{margin:0 0 12px;font-size:13px;color:var(--ink2);letter-spacing:.04em}
.kanrico b,.kanrico span{color:var(--ink)}
.zenshahere{font-size:13px;font-weight:700;letter-spacing:.08em;margin-right:8px}
.kanritag{display:inline-block;margin-right:8px;padding:0 7px;border:1px solid var(--ink);color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.08em}

/* 応募者の一覧：検索1つ・タブ5つ・1人3行 */
.lbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0 8px}
.lbar .lq{flex:1;min-width:220px;max-width:460px}
.vsw{margin-left:auto;display:inline-flex;border:1px solid var(--line2)}
.vb{border:0;background:#fff;color:var(--ink);padding:6px 14px;font-size:14px;min-height:36px}
.vb+.vb{border-left:1px solid var(--line2)}
.vb.on{background:var(--ink);color:#fff;font-weight:700}
.fbar{border:0;border-radius:0;padding:4px 0 10px;background:transparent}
.ptab{margin:6px 0 4px}
.pt{font-size:15px;color:var(--ink2);padding:10px 16px 11px}
.pt.on{color:var(--ink);font-weight:700;border-bottom-color:var(--sky)}
.pt span{font-size:14px;color:var(--ink3)}
.pt.on span{color:var(--ink)}
.orow{position:relative;display:flex;gap:16px;align-items:center;padding:14px 12px 14px 18px;border-bottom:1px solid var(--line)}
.orow::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;background:transparent}
.orow.al::before{background:var(--sun)}
.orow .ob{flex:1;min-width:0;cursor:pointer}
.orow .o1{font-size:16.5px;color:var(--ink);display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.orow .o1 b{font-weight:700}
.orow .oa{font-size:14.5px;color:var(--ink2)}
/* 右端：段階のラベル1つ＋担当（2026-10-28 社長）。折り返したときも右に寄せる */
.orow .oright{margin-left:auto;display:flex;align-items:baseline;gap:4px 16px;flex-wrap:wrap;justify-content:flex-end;font-size:14.5px;color:var(--ink2)}
.orow .ostop{font-size:12.5px;color:var(--ink3);margin-left:-8px}
.orow .otanto.unset{color:var(--ink3)}
/* 2行目：3つのまとまりを余白で区切る（点でつながない・2026-10-28） */
.orow .o2{font-size:14.5px;color:var(--ink2);line-height:1.7;display:flex;flex-wrap:wrap;gap:0 24px}
.orow .o2>span:empty{display:none}
.orow .o2 .iv{color:var(--ink);font-weight:700}
.orow .o2 .ngt,.orow .o1 .ngt{color:var(--ng);font-weight:700}
.orow .o3{font-size:15px;color:var(--sky-d);font-weight:700}
.orow .o3::before{content:"次：";color:var(--ink3)}
.orow .o3.end::before{content:"終了理由：";color:var(--ink3)}
.orow .o4{font-size:14px;color:var(--ink);font-weight:700}
.orow.off .o1,.orow.off .o3{color:var(--ink2)}
.orow .oact{display:flex;gap:8px;align-items:center;flex:none}
.orow .omore{min-width:40px;font-weight:700;letter-spacing:0}
.orow .ph{font-size:13px;background:transparent;color:var(--ink2);border:0;padding:0;font-weight:600}
.orow .ph.yari,.orow .ph.oi{color:var(--ink)}
.empty{padding:30px 0}

/* カンバン（見るだけ。枠を使わず、余白と細い線で区切る） */
.kanban{display:flex;gap:0;overflow-x:auto;margin-top:14px;align-items:flex-start}
.kcol{flex:0 0 220px;padding:0 16px;border-left:1px solid var(--line)}
.kcol:first-child{border-left:0;padding-left:0}
.kh{font-size:14.5px;font-weight:700;color:var(--ink);padding:4px 0 8px;border-bottom:2px solid var(--ink);display:flex;justify-content:space-between}
.kh span{font-weight:400;color:var(--ink3)}
.kcard{position:relative;padding:11px 0 11px 10px;border-bottom:1px solid var(--line);cursor:pointer}
.kcard.al::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;background:var(--sun)}
.kcard:hover{background:var(--soft)}
.k1{font-size:15.5px;font-weight:700;color:var(--ink)}
.k2{font-size:14px;color:var(--ink2)}
.k3{font-size:14px;color:var(--ink)}

/* 選考のパス（個人ページの上。見るだけ） */
.pass{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:8px 0 14px}
.ps{position:relative;padding:7px 22px 7px 28px;font-size:14.5px;color:var(--ink3);background:var(--soft2);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%);margin-left:-10px;letter-spacing:.04em}
.ps:first-child{margin-left:0;padding-left:18px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%)}
.ps.done{background:#d9d9dd;color:var(--ink)}
.ps.now{background:var(--ink);color:#fff;font-weight:700}
.pku{margin-left:2px}
.pend{margin-left:14px;font-size:14.5px;font-weight:700;color:var(--ng)}

/* 札をそろえる（既存の .tg・.ph の色を減らす） */
.tg,.tg.st{background:transparent;color:var(--ink2);border:0;padding:0 8px 0 0;font-size:14px;font-weight:600}
.tg.st{color:var(--ink)}
.tg.ng{color:var(--ng)}
.tg.far,.tg.warn,.tg.iv,.tg.ok{background:transparent;color:var(--ink)}

/* 行全体を黄色で塗らない：要対応は左の細い線だけ */
.row.c{background:#fff}
.row.gray{background:#fff}
.row.gray .nm2,.row.gray .tags{color:var(--ink2)}

/* スマホ：カンバンは出さない（リストだけ） */
@media (max-width:767px){
  body{font-size:15px}
  .vsw,.kanban{display:none}
  .orow{flex-wrap:wrap;gap:8px;padding:12px 8px 12px 14px}
  .orow .oact{width:100%}
  .lbar .lq{min-width:0;flex-basis:100%;max-width:none}
}
@media (max-width:768px){
  /* スマホ：左メニューは上の帯に1本の横並び（見出しは出さず、項目を並べるだけ） */
  aside{width:auto;display:flex;flex-direction:row;align-items:stretch;overflow-x:auto;padding:0}
  aside .mh{display:none}
  aside .mrow{flex:none;flex-direction:row;overflow:visible}
  aside .mrow .mi{flex:none}
  .mswitch{flex:none;margin:4px 6px;white-space:nowrap}
  .mi[aria-current="true"]{box-shadow:none}
  .mrow .mi[aria-current="true"]{background:var(--soft2);border-bottom-color:var(--ink)}
}

/* =====================================================================
   2026-10-22（後半）応募者の詳細を、一覧と同じ考え方にそろえる／レイアウト崩れ6点の直し
   ===================================================================== */
/* ① 回数の欄：枠と灰色の塗りをやめ、余白と細い線だけ。5つが1段にそろう（4列で1つ落ちていた） */
.dnum{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:0;background:transparent;border:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 6px}
.dn{min-width:0;border-right:0;padding:14px 8px;text-align:left}
.dnv{font-size:22px;color:var(--ink)}
.dnk{font-size:13.5px;color:var(--ink2)}
.dns{font-size:13px;color:var(--ink)}
/* ③ 「操作」のボタン：同じ幅の格子。目立つのは1つだけ（.btn）、残りは控えめ（.btn.g） */
.opgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:8px 10px}
.opgrid .btn{width:100%;justify-content:center;text-align:center;min-height:42px;white-space:normal}
.opgrid .btn.g{border-color:var(--line2);color:var(--ink2);font-weight:600}
/* ② やりとり：黄色の帯が最後の吹き出しに重ならない（吹き出しの下に余白を取り、帯は流れの中に置く） */
.stream{margin-bottom:14px;padding-bottom:18px}
.why{position:static;clear:both;margin:14px 0 0}
/* ④ 画面の上：ファルコンの人は会社の選択だけを大きく出す（会社名の二重表示をやめる） */
.top .brand .sb:empty{display:none}
.topr select{border-left:4px solid var(--co,var(--line2))}
/* ⑥ 左メニューの下の灰色の帯：高さいっぱいに白を伸ばす */
.app{min-height:100vh}
aside{align-self:stretch}
/* 補足の文字は濃く（薄い灰色をやめる） */
.hint,.h,.dnk,.meta,.tg,.k2{color:var(--ink2)}
.h{font-size:13.5px}
@media (max-width:768px){
  /* ⑤ スマホ：上の帯は流れに置き（固定しない）、名前の行を隠さない。会社の選択は幅いっぱいに */
  .top{position:static;flex-wrap:wrap}
  .topr{flex:1 1 100%;min-width:0;padding:0 12px 8px}
  .topr select{max-width:none;flex:1;min-width:0}
  aside{position:sticky;top:0}
  .opgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .topr .cohere{display:none}
  .topr select{flex:1 1 0;min-width:0;max-width:none;font-size:14px}
}

/* SMSの日ごとの件数と費用（数字で見る・2026-10-22）。表は線と余白だけ（枠で囲まない） */
.smsdnav{display:flex;align-items:center;gap:14px;margin:0 0 10px}
.smsdnav b{font-size:16px}
.smsdt{max-width:560px}
.smsdt th.r,.smsdt td.r{text-align:right}
.smsdt .z{color:var(--ink3)}
.smsdt tr.sum td{font-weight:700;border-top:2px solid var(--ink);border-bottom:0}
.smsdt tbody tr,.smsdt tbody tr:nth-child(even),.smsdt tbody tr:nth-child(odd){background:transparent}
.smsdt td{padding-top:7px;padding-bottom:7px}
.smsdt thead,.smsdt thead tr,.smsdt thead th{background:transparent;color:var(--ink2);border-radius:0}
.smsdt thead th{border-bottom:2px solid var(--ink);font-weight:700}

/* =====================================================================
   2026-10-22（スマホの最適化）375px 幅で、全画面を実際に開いて操作できる形にする
   ・横にスクロールしない（はみ出す表・格子は、その中だけで動く）
   ・押す場所は44px以上／本文15px以上
   ・表は縦に積む（見出しは各行の頭に出す）
   ・上の帯と左メニューはたたみ、「メニュー」ボタンで開く
   ・小窓は画面いっぱい。×は右上で、押しやすい大きさ
   ・応募者の詳細は、操作ボタンを上、情報を下
   ⚠️ このブロックは最後に置く（後ろに書いたものが勝つ）。
   ===================================================================== */
@media (max-width:768px){
  html,body{max-width:100%;overflow-x:hidden}
  body{font-size:15.5px}
  main{padding:14px 14px 80px;min-width:0}
  /* 本文15px以上（小さい文字を15pxにそろえる） */
label.l,
.demo .t,
.rb,
.rst,
.top .brand .sb,
.top .brand .sb .unyou,
.topr select,
.topr .who,
.topr .who b,
.mgrp,
.mi,
.mi .bg,
.hint,
.flash,
.card h3,
.grp,
.n,
.nm2 span,
.meta,
.btn,
.btn.sm,
.choice .q,
.chip,
.tile .k,
table,
th,
.todo,
.todo .who,
.log,
.empty,
.note,
pre.out,
.ballbar,
.machi,
.daysep,
.dmeta,
.hrow2 span,
.movebar .h,
.qb,
.qc,
.qg h3 span,
.qgd,
.qn span,
.qw,
.cbn span,
.cbh,
.ah,
.jt,
.jt span,
.sec .sn,
.sec .sv span,
.sec .sa,
.ch,
.ct,
.cs,
.cs2,
.applied,
.hrow label,
.chk,
.bar .b span,
.bar .lb,
.tl .it,
.match .sc,
.crumb,
.kv,
.kv dt,
.chattabs button,
.chattabs button .bg,
.msg .sig,
.chat .why,
.back,
.sk .hd .co,
.mrow .mi,
.dline .who .sub,
.dline .stop,
.dline .stop .todo,
.dline .cnt,
.dgrp .d,
.drow .nm .w,
.drow .st,
.drow.watch .nm::after,
.fld .h,
.tbl,
.tbl th,
.ivcrow .l,
.mdacts .h,
.tempbox .t,
.tempbox .n,
.mgrp2,
.shot,
.shot .mt,
.shot button,
.upnote,
.sheet .sgrp>.gh,
.sheet .sfl .hint,
.sheet .rep .rn,
.jobs,
.daybar button,
.ivrow .who .sub,
.ivrow .st,
.log .r .d,
.log .r .by,
.hist .h1,
.cgh,
.cghead .done,
.cghead .todo,
.baserow .s,
.seebar,
.seg,
.rfsite .h,
.tg,
.ph,
.fxok,
.pt,
.pt span,
.rok,
.log .r .d em,
.mfold>summary,
.mfold>summary::before,
.cspn,
.cspd,
.cspt,
.cst,
.csm,
.ivchip,
.ptab.sub .pt,
.ptab.sub .pt span,
.dsec>summary,
.dsec>summary::before,
.dk,
.dd,
.pen,
.edit input,
.edit select,
.ibtext,
.hbn,
.hbr,
.dsec2h,
.rmlog,
.note1,
.note1 .nl,
.note1 .nb,
.note-h,
.note-h span,
.loic.none,
.loh,
.sbnum,
.sbwait,
.vlist,
.vlr,
.btn.sw,
.sw.fuda,
.cohere,
.pick.sm button,
.cm-h,
.cm-d,
.cm-plus,
.cm-iv,
.cm-more,
.cm-ak,
#loading .msg,
.kotodo,
.kopre,
.tkst h4 span,
.tke,
.jssex,
.tkone,
.dstrip .ds i,
a.maplk,
aside .mh,
.mswitch,
.kanritag,
.vb,
.orow .oa,
.orow .o2,
.orow .o4,
.orow .ph,
.kh,
.k2,
.k3,
.ps,
.pend,
.tg.st,
.h{font-size:15px}
  /* 押す場所は44px以上 */
  .btn,.btn.sm,.rb,.mi,.pt,.vb,.mswitch,.mbtn,.omore,.back,.rfx,.tdb,select,
  input:not([type=checkbox]):not([type=radio]):not([type=date]):not([type=file]),textarea{min-height:44px}
  .btn,.btn.sm,.rb,.mbtn,.omore{padding-left:14px;padding-right:14px;display:inline-flex;align-items:center;justify-content:center}
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
  label.chk,.rfsite{min-height:44px;display:flex;align-items:center;gap:8px}
  /* 上の帯と左メニューはたたむ。「メニュー」で開く */
  .top{flex-wrap:wrap;position:sticky;top:0;z-index:30;padding:0}
  .top .brand{flex:1;min-width:0;padding:6px 12px}
  .top .brand .sb{display:none}
  .mbtn{display:inline-flex;margin:6px 12px 6px 0;border:1px solid var(--line2);background:#fff;color:var(--ink);font-weight:700;border-radius:3px}
  .app:not(.menuopen) .topr,.app:not(.menuopen) aside{display:none}
  .app.menuopen .topr{display:flex;flex:1 1 100%;flex-wrap:wrap;padding:8px 12px 12px;border-top:1px solid var(--line);background:#fff;gap:10px}
  .app.menuopen .topr select{flex:1 1 100%;max-width:none;width:100%}
  .app.menuopen .topr .who{display:block;flex:1}
  .app.menuopen aside{display:flex;flex-direction:column;position:static;width:100%;padding:6px 12px 14px;background:#fff;
    border-bottom:1px solid var(--line);max-height:none;overflow:visible}
  .app.menuopen aside .mrow{flex-direction:column}
  .app.menuopen aside .mh{display:block}
  .app.menuopen aside .mi{width:100%;justify-content:flex-start;padding:10px 12px}
  .app.menuopen aside .mi .bg{margin-left:auto}
  .app>.body{display:block}
  /* 表は縦に積む（見出しは各行の頭に出す。JS が td に data-l を付ける） */
  .tbl:not(.smsdt){display:block}
  .tbl:not(.smsdt) thead{display:none}
  .tbl:not(.smsdt) tbody,.tbl:not(.smsdt) tr{display:block;width:100%}
  .tbl:not(.smsdt) tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .tbl:not(.smsdt) td{display:flex;gap:12px;justify-content:space-between;align-items:baseline;border:0;padding:3px 0;white-space:normal;text-align:right}
  .tbl:not(.smsdt) td::before{content:attr(data-l);flex:none;color:var(--ink2);font-weight:700;text-align:left;max-width:45%}
  .tbl:not(.smsdt) td:not([data-l])::before{display:none}
  .tbl:not(.smsdt) td:first-child{text-align:left;font-weight:700}
  .tbl:not(.smsdt) td.a{justify-content:flex-end;flex-wrap:wrap}
  .tblwrap{overflow-x:visible}
  .smsdt{max-width:100%}
  /* 🔴 上の古い「表を縦に積む」規則（.tbl,...{display:block}）を、この表だけ戻す。列が6つあっても横に並べる */
  .smsdt{display:table;width:100%;table-layout:auto}
  .smsdt thead{display:table-header-group}.smsdt tbody{display:table-row-group}
  .smsdt tr{display:table-row}
  .smsdt th,.smsdt td{display:table-cell;padding-left:3px;padding-right:3px;font-size:11.5px;white-space:normal;vertical-align:bottom}
  .smsdt td{vertical-align:middle}
  /* 週・月のカレンダーは、その中だけで横に動く（ページは動かない） */
  .cw{grid-template-columns:48px repeat(var(--n,7),minmax(76px,1fr))!important;overflow-x:auto;min-width:0}
  .scal{grid-template-columns:repeat(7,minmax(0,1fr))}
  .scal .scell{min-width:0;overflow:hidden}
  .scal,.cw{max-width:100%}
  /* 小窓は画面いっぱい。×は右上で大きく */
  .rfov,.ovl{padding:0;align-items:stretch}
  .rfbox,.ovl .box{max-width:none;width:100%;min-height:100%;border-radius:0;padding:64px 16px 24px;box-shadow:none}
  .rfx,.ovl .cl{position:fixed;top:8px;right:8px;width:48px;height:48px;font-size:30px;background:#fff;z-index:60;border:1px solid var(--line2)}
  .rfbox h3,.ovl h3{padding-right:56px}
  .rfbox .btns,.rfbox .mdacts{display:flex;flex-direction:column;gap:10px}
  .rfbox .btns .btn,.rfbox .mdacts .btn{width:100%}
  /* 応募者の詳細：操作ボタンを上、情報を下 */
  .detail{display:flex;flex-direction:column;gap:0}
  .detail>*{order:3}
  .detail>.opcard{order:0}
  .detail>.dcard{order:1}
  .detail>.ovl,.detail>.rfov{order:9}
  .opgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opgrid .btn{min-height:48px}
  .dnum{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* 一覧・パス・タブ */
  .pass{overflow-x:auto;flex-wrap:nowrap;max-width:100%;padding-bottom:4px}
  .pass .ps,.pass .pend{flex:none;white-space:nowrap}
  .ptab{overflow-x:auto;flex-wrap:nowrap;max-width:100%}
  .pt{flex:none;white-space:nowrap}
  .lbar .lq{flex:1 1 100%}
  .orow .oact{width:100%}
  .orow .oact .btn:not(.omore){flex:1}
  .kanban,.vsw{display:none!important}
  .head{gap:8px}
  .head h2{font-size:20px}
  pre,code,.sheet,.stream{max-width:100%;overflow-x:auto}
  img,video,canvas{max-width:100%;height:auto}
}
@media (min-width:769px){.mbtn{display:none}}
@media (max-width:768px){ .mbtn{font-size:15px} }

.furiwakeband{background:#c62828;color:#fff;padding:10px 14px;margin:0 0 12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:14px}
.furiwakeband .btn{margin-left:auto}
.chip.cxo{color:var(--sun-d);background:var(--sun-bg);border-color:var(--sun-ln)}
.orow .o2 .chip.cxo{background:transparent;border:0;padding:0;font-weight:600}

/* ===== 管理画面の「型」（2026-10-27 社長決定：Slackの管理画面の作りに寄せる）=====
 * 手本＝keibi-tool/参考画面/Slack管理画面_設定と権限_20261027.webp。部品は public/slpart.js。
 * ★寸法はここの変数だけが持つ（1か所）。文字の大きさは4段（24／16／14／13）だけ。足さない。
 * ★区切りは 1px の薄い線と余白だけ。カード・影・塗りつぶしは使わない（デザインのルール1）。 */
:root{
  --sl-w:960px;              /* 本文の幅（中央1列） */
  --sl-fs-title:24px;        /* ページの見出し */
  --sl-fs-name:16px;         /* 設定の名前 */
  --sl-fs-body:14px;         /* 本文・タブ */
  --sl-fs-aux:13px;          /* 補助・ボタン */
  --sl-lh:1.7;               /* 行間 */
  --sl-ink:#1d1c1d;          /* 本文の黒に近い灰 */
  --sl-ink2:#616061;         /* 説明の灰 */
  --sl-line:#e8e8e8;         /* 区切りの線（1px） */
  --sl-btn-line:#c4c4c4;     /* 枠だけのボタンの線 */
  --sl-pad:24px;             /* 行の上下の余白 */
}
.slpage{max-width:var(--sl-w);margin:0 auto;padding:8px 0 96px;color:var(--sl-ink);font-size:var(--sl-fs-body);line-height:var(--sl-lh)}
.slhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.slhead h2{font-size:var(--sl-fs-title);font-weight:700;line-height:1.4;margin:0;color:var(--sl-ink)}
.sldesc{font-size:var(--sl-fs-body);color:var(--sl-ink2);margin-top:8px}
.slhr{flex:none}
.sltabs{display:flex;gap:28px;border-bottom:1px solid var(--sl-line);margin-top:28px;overflow-x:auto}
.sltab{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 0;font-size:var(--sl-fs-body);line-height:var(--sl-lh);color:var(--sl-ink2);white-space:nowrap}
.sltab[aria-selected="true"]{color:var(--sl-ink);font-weight:700;border-bottom-color:var(--sl-ink)}
.sltab .slcnt{margin-left:6px;font-size:var(--sl-fs-aux);font-weight:700;color:var(--sun-d)}
.slsec{margin-top:40px}
.slsech{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:8px;border-bottom:1px solid var(--sl-line);font-size:var(--sl-fs-body);font-weight:700;color:var(--sl-ink2)}
.slsecnote{margin-top:8px}
.slrow{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sl-pad);padding:var(--sl-pad) 0;border-bottom:1px solid var(--sl-line)}
.slmain{flex:1;min-width:0}
.slname{font-size:var(--sl-fs-name);font-weight:700;line-height:1.5;color:var(--sl-ink)}
.slval{margin-top:4px;font-size:var(--sl-fs-body);color:var(--sl-ink2);white-space:pre-wrap;word-break:break-word}
.slval.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.slnote{margin-top:4px;font-size:var(--sl-fs-aux);color:var(--sl-ink2)}
.slupd{margin-top:4px;font-size:12px;color:var(--ink3)}
.slblank{display:inline-block;padding:0 8px;background:var(--sun-bg2);color:var(--sun-d);font-weight:700;font-size:var(--sl-fs-aux)}
.slact{flex:none;display:flex;align-items:center;gap:8px}
.slbtn{font-size:var(--sl-fs-aux);line-height:1.5;padding:4px 12px;border:1px solid var(--sl-btn-line);border-radius:4px;background:#fff;color:var(--sl-ink);font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer}
.slbtn:hover{border-color:var(--sl-ink)}
.slmsg{margin-top:16px;font-size:var(--sl-fs-body);color:var(--sky-d)}
.slmain .tag,.slval .tag{font-size:var(--sl-fs-aux)}
.slval a,.slnote a{color:#1264a3}
/* 小窓の中の文字も同じ4段（openModal に cls:'slm' を渡す） */
.rfbox.slm{max-width:640px}
.rfbox.slm h3{font-size:var(--sl-fs-name);color:var(--sl-ink)}
.rfbox.slm label.l{font-size:var(--sl-fs-body);color:var(--sl-ink);font-weight:700}
.rfbox.slm input,.rfbox.slm select,.rfbox.slm textarea{font-size:var(--sl-fs-body)}
.rfbox.slm .h,.rfbox.slm .hint{font-size:var(--sl-fs-aux);color:var(--sl-ink2)}
.rfbox.slm .btn{font-size:var(--sl-fs-aux)}
@media (max-width:640px){
  .slrow{flex-direction:column;gap:12px}
  .slhead{flex-direction:column}
  .slsech{flex-wrap:wrap}
}

/* 未入力の項目を黄色で目立たせる（2026-10-27 社長）。色は「要対応＝黄」の変数だけ。赤は使わない・枠線やカードは足さない */
.fld.blank input,.fld.blank textarea,.fld.blank select,.fld.bad input,.fld.bad textarea,.fld.bad select{background:var(--sun-bg2)}
.fld .miniy{display:none;margin-left:8px;font-size:11px;font-weight:700;color:var(--sun-d);letter-spacing:.04em}
.fld.blank .miniy.mi-blank,.fld.bad .miniy.mi-bad{display:inline}
.fld .shapeline{display:none;color:var(--sun-d)}
.fld.bad .shapeline{display:block}

/* ===== 会社情報：書いて保存（2026-10-27 社長）===== */
/* 行の中の入力欄。名前の下に置く（右側ではなく値の位置） */
.slctl{margin-top:8px}
.slctl input,.slctl select,.slctl textarea{width:100%;max-width:560px;font-size:var(--sl-fs-body);padding:7px 10px;border:1px solid var(--sl-btn-line);border-radius:4px;background:#fff;color:var(--sl-ink);letter-spacing:.02em}
.slctl input[type="number"]{width:112px}
.slctl input[type="date"]{width:200px}
.slctl input[type="checkbox"]{width:auto;margin-right:6px}
.slctl .slpair{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.slctl .slchecks{display:flex;flex-wrap:wrap;gap:8px 24px}
.slctl .chk{display:inline-flex;align-items:center;font-size:var(--sl-fs-body);color:var(--sl-ink)}
.slctl .nearin .h{font-size:var(--sl-fs-aux);color:var(--sl-ink2)}
/* 未入力・形のずれは黄色（fld と同じ決まり） */
.slin.blank input,.slin.blank textarea,.slin.blank select,.slin.bad input,.slin.bad textarea,.slin.bad select{background:var(--sun-bg2)}
.slin .miniy{display:none;margin-left:8px;font-size:var(--sl-fs-aux);font-weight:700;color:var(--sun-d);letter-spacing:.04em}
.slin.blank .miniy.mi-blank,.slin.bad .miniy.mi-bad{display:inline}
.slin .shapeline{display:none;color:var(--sun-d)}
.slin.bad .shapeline{display:block}
/* 保存の帯：画面の下に固定（線だけ・影なし） */
.slsave{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#fff;border-top:1px solid var(--sl-line)}
.slsavein{max-width:var(--sl-w);margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:flex-end;gap:16px}
.slsavemsg{flex:1;font-size:var(--sl-fs-aux);color:var(--sl-ink2);white-space:pre-wrap}
.slsavemsg.ng{color:var(--sun-d);font-weight:700}
.slmain-btn{background:var(--sl-ink);color:#fff;border-color:var(--sl-ink);padding:8px 28px;font-size:var(--sl-fs-body)}
.slmain-btn:disabled{background:#fff;color:#a0a0a0;border-color:var(--sl-line);cursor:default}
@media (min-width:769px){.slsave{left:228px}}

/* 上のタブ（2026-10-27 社長：選んでいるタブをもっと分かりやすく） */
.sltabs{gap:4px 32px;flex-wrap:wrap;overflow-x:visible}
.sltab{font-size:15px;font-weight:400;color:var(--sl-ink2);padding:12px 0;border-bottom-width:3px}
.sltab[aria-selected="true"]{color:var(--sl-ink);font-weight:700;border-bottom-color:var(--sky)}
.sltab .slcnt{margin-left:8px;font-size:12px;font-weight:700;padding:0 6px;background:var(--sun-bg2);color:var(--sun-d)}

/* ===== 小窓の入力欄は枠からはみ出さない（2026-10-28 社長）===== */
.rfbox textarea,.rfbox input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),.rfbox select{box-sizing:border-box;width:100%;max-width:100%}
.rfbox input[type="number"]{width:112px}

/* ===== 文面の小窓（public/tplmodal.js・2026-10-28 社長）。枠・影は使わず、線と余白だけ ===== */
.rfbox.tplm{max-width:720px}
.tplm .tplmd{margin:-6px 0 12px}
.tplm .tplmh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--sl-line);font-size:var(--sl-fs-body);font-weight:700;color:var(--sl-ink2)}
.tplm .tplmfull{white-space:pre-wrap;word-break:break-word;font-size:var(--sl-fs-body);line-height:var(--sl-lh);color:var(--sl-ink)}
.tplm .tplmread{margin-bottom:6px}
.tplm .tplmta{display:block;min-height:140px;line-height:var(--sl-lh);resize:none;overflow:hidden;padding:10px 12px;border:1px solid var(--sl-btn-line);border-radius:4px}
.tplm .tplmslots{display:flex;flex-wrap:wrap;gap:8px}
.tplm .tplmwhen{color:var(--ink3)}
.tplm .tplmadd{margin-bottom:10px}
.tplm .tplmng{color:var(--sun-d)}
.tplm .kopre{margin:6px 0}

/* ===== タスクをふる（public/tasks.js・2026-10-28 社長）。枠・影は使わず、線と余白だけ ===== */
.tsksec{margin:14px 0 6px}
.tskh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:6px;border-bottom:1px solid var(--line);font-size:15px;font-weight:700;color:var(--ink2)}
.tskrow{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;padding:10px 0;border-bottom:1px solid var(--line)}
.tskrow .tsktxt{flex:1 1 280px;font-size:15px;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.tskrow .tskmeta{flex:1 1 100%;order:3;font-size:13px;color:var(--ink3)}
.tskrow.done .tsktxt{color:var(--ink3);text-decoration:line-through}
.tskmark{color:var(--sun-d)}
.qg h3 .tskadd{margin-left:16px;font-weight:400;vertical-align:middle}
.q .qw.smsline{color:var(--ink2)}
.q .qw.smsline.ret{color:var(--sky-d);font-weight:700}

/* ===== 現場の表（2026-10-28 社長）。枠・影・角丸は使わず、線と余白だけ ===== */
.stfilter{display:flex;align-items:center;gap:12px;margin:12px 0 8px}
.stfilter input{width:100%;max-width:320px}
.stwrap{overflow-x:auto}
.sttbl{width:100%;border-collapse:collapse;font-size:14px;line-height:1.7}
.sttbl th{text-align:left;font-size:13px;letter-spacing:0;font-weight:700;color:var(--ink2);background:transparent;padding:8px 12px 8px 0;border-bottom:1px solid var(--line2);white-space:nowrap}
.sttbl thead,.sttbl thead tr{background:transparent}
.sttbl td{vertical-align:top;padding:12px 12px 12px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.sttbl .stname{min-width:150px}
.sttbl .stdesc{min-width:220px;max-width:340px;white-space:pre-wrap;word-break:break-word}
.sttbl .sthours{min-width:120px;white-space:pre-wrap}
.sttbl .stclamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sttbl .stmore{font-size:12.5px;color:var(--sky-d)}
.sttbl .stneed{color:var(--sun-d)}
.sttbl .stnone{color:var(--ink3);padding:18px 0}
.sttbl tr.longd{cursor:pointer}
.sttbl .maplk{display:block;font-size:12.5px}
.rfbox.sitem{max-width:1100px}
.callbar .sitebtn{margin-left:14px}

/* ===== はやぶさチームの画面（終了者一覧・2026-11-01 社長「背景は青」）=====
 * 採用代行の画面と一目で見分けるため、背景だけ薄い青にする。区切りは余白と1pxの線だけ（枠で囲まない）。文字は 24/16/14/13 の4段 */
body:has(.app.teambg){background:#DDEBF7}
.app.teambg{background:#DDEBF7}
.app.teambg main{background:transparent}
.tpage{padding:8px 0 96px;color:var(--sl-ink);font-size:14px;line-height:1.7}
.tpage .slhead{align-items:baseline}
.tcount{font-size:14px;color:var(--sl-ink2)}
.tfil{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:24px 0 16px;padding-bottom:16px;border-bottom:1px solid #cddcec}
.tfil select,.tfil input{width:auto;max-width:220px;font-size:13px;padding:4px 6px;background:#fff;border:1px solid #c4cfdb;border-radius:4px}
.tfil input[type=date]{width:140px}
.tfil .tf{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--sl-ink2);white-space:nowrap}
.tfil input[type=number]{width:64px}
.tgrid{display:block}
.tgrid.open{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,420px);gap:24px;align-items:start}
.tlist{min-width:0;overflow-x:auto}
.ttab{width:100%;border-collapse:collapse;font-size:13px}
.ttab td:first-child b{white-space:nowrap}
.tgrid.open .ttab{min-width:560px}
.ttab th{text-align:left;font-weight:700;color:var(--sl-ink2);background:transparent;padding:8px 8px;border-bottom:1px solid #cddcec;white-space:nowrap}
.ttab td{background:#fff}
.ttab td{padding:12px 8px;border-bottom:1px solid #dbe6f1;vertical-align:top}
.trow{cursor:pointer}
.trow:hover td,.trow.on td{background:#F5F9FD}
.tsub{margin-left:8px;font-size:13px;color:var(--sl-ink2);font-weight:400}
.tmk{display:inline-block;font-size:12px;font-weight:700;padding:0 6px;margin:0 4px 4px 0;color:#1d4f80;background:#d8e8f7}
.tmk.warn{color:var(--sun-d);background:var(--sun-bg)}
.tmk.ng{color:#fff;background:var(--ng)}
.tside{position:relative;background:#fff;padding:24px;border-left:1px solid #cddcec}
.tside h3{font-size:16px;margin:0 32px 8px 0}
.tside .rfx{position:absolute;top:8px;right:8px}
.tmarks{margin-bottom:12px}
.tbtns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.tside .kv{margin-top:16px}
.tsec{margin-top:28px;padding-bottom:6px;border-bottom:1px solid var(--sl-line);font-weight:700;font-size:14px;color:var(--sl-ink2)}
.tco{margin-top:16px}
.tcoh{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px;font-size:14px}
.tcoh .slbtn{margin-left:auto}
.tev{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:13px}
.tev .td{color:var(--sl-ink2)}
.tev .tk{font-weight:700}
.tev .tt{grid-column:1 / -1;white-space:pre-wrap;word-break:break-word}
.tev .tt:empty{display:none}
.tev .tb{grid-column:1 / -1;color:var(--sl-ink2);font-size:12px}
.tev .tb:empty{display:none}
@media (max-width:900px){
  .tgrid.open{display:block}
  .tside{border-left:0;border-top:1px solid #cddcec;margin-top:24px;padding:16px}
  .ttab thead{display:none}
  .ttab tr{display:block;padding:12px 0;border-bottom:1px solid #dbe6f1}
  .ttab td{display:block;padding:2px 0;border:0;white-space:normal;word-break:break-word}
  .ttab,.ttab tbody{display:block;width:100%}
  .tgrid.open .ttab{min-width:0}
  .tfil .tf{flex-wrap:wrap;white-space:normal}
  .tfil input[type=date]{width:130px}
}

/* ===== 差し込む（2026-11-02）。小さなメニュー。枠は1本の細い線だけ（デザインのルール1） ===== */
.sashirow{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sashi{position:relative;display:inline-flex;align-items:center;gap:8px}
.sashim{position:absolute;left:0;top:100%;margin-top:4px;z-index:40;background:#fff;border:1px solid var(--line2);
  min-width:240px;max-width:calc(100vw - 32px);padding:4px 0;display:flex;flex-direction:column}
.sashim[hidden]{display:none}
.sashii{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;background:none;border:0;
  border-radius:0;padding:10px 14px;min-height:44px;font-size:14px;color:var(--ink);font-weight:600;cursor:pointer}
.sashii:hover:not(:disabled){background:var(--bg2,#f4f6f9)}
.sashii:disabled{color:var(--ink3);cursor:default;font-weight:400}
.sashiw{font-size:12px;color:var(--ink3);font-weight:400}
.sashin{font-size:13px;color:var(--ink2)}

/* ★届いた道の印と色（2026-11-03 社長「LINEかSMSかわかるようにして。色とかアイコンで」）。⚠️ 面接官ごとの面接の一覧より前に置く（あちらの見張りはファイルの終わりまでを見る） */
/* ★札に印と色（2026-11-03）。枠で囲まず、うすい背景だけ。行の高さを崩さないよう line-height:1・上下の余白は1px */
.mlabel{display:inline-flex;align-items:center;gap:3px;line-height:1;padding:1px 6px 1px 4px;border-radius:3px;vertical-align:1px;white-space:nowrap;
  font-size:11.5px;color:var(--ink3);letter-spacing:.06em;font-weight:600}   /* ★札の指定はここ1か所（後ろで上書きしない・2026-11-03 CTOレビュー） */
/* 札と時刻は1つのかたまり（スマホで時刻だけ次の行に落ちない。名前の後ろで折り返すのは可） */
.sigt{white-space:nowrap;display:inline-block}
.mic{flex:none;display:inline-block}
.mic-faded{opacity:.4}
.ml-line{color:var(--ch-line-d);background:var(--ch-line-bg)}
.ml-line .mic-line,.ml-unk .mic-line{color:var(--ch-line)}
.ml-sms,.ml-fb{color:var(--ch-sms);background:var(--ch-sms-bg)}
.ml-fb .mic-line{color:var(--ch-line)}
.ml-unk{color:var(--ch-unk);background:var(--ch-unk-bg)}
/* やりとりの1通の左端に、届いた道の色の細い線（関数 道の線 の1か所。応募者の画面の吹き出しだけ。架電のあとの小窓は受信＝水色・送信＝灰色の線のまま） */
.msg.mv-line .bub{box-shadow:inset 3px 0 0 var(--ch-line)}
.msg.mv-sms .bub,.msg.mv-fb .bub{box-shadow:inset 3px 0 0 var(--ch-sms)}
.msg.mv-unk .bub{box-shadow:inset 3px 0 0 var(--sun)}
/* ★その方へ、いま何で届くか（2026-11-02）。1行だけ。印と色は札と同じ（2026-11-03） */
.mroute{font-size:13px;color:var(--ink2);margin:10px 0 0;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.mroute.mr-line{color:var(--ch-line-d)}
.mroute .mic-line{color:var(--ch-line)}
.mroute.mr-sms .mic-sms{color:var(--ch-sms)}
.mroute.mr-fb .mic-sms{color:var(--ch-sms)}
/* ブロック中は注意の黄（赤は連絡NGだけ） */
.mroute.warn{color:var(--sun-d);font-weight:700}
/* ★SMS／LINEの切り替えのボタン（応募者の画面・架電のあとの小窓）。選んでいるほうを、その道の色で塗る */
.btn.chb{display:inline-flex;align-items:center;gap:5px}
.btn.chb-line .mic-line{color:var(--ch-line)}
.btn.chb-sms .mic-sms{color:var(--ch-sms)}
.btn.chb-line[aria-pressed="true"]{background:var(--ch-line-bg);color:var(--ch-line-d);border-color:var(--ch-line);font-weight:700}
.btn.chb-sms[aria-pressed="true"]{background:var(--ch-sms);color:var(--card);border-color:var(--ch-sms);font-weight:700}
.btn.chb-sms[aria-pressed="true"] .mic-sms{color:var(--card)}
.btn.chb[disabled]{opacity:.45}
/* ★応募者ではないLINE（2026-11-03）。ボタンを横に並べ、外したLINEは折りたたみ。枠は足さない */
.lobtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.loign{margin-top:16px}
.loign summary{cursor:pointer;font-size:13px;color:var(--ink2);font-weight:700;padding:6px 0}
.lhrow .lhign{margin-left:auto;flex:none}
/* 面接官ごとの面接の一覧（2026-10-27 社長）。カード・赤い線・影は使わない。区切りは薄い線と余白だけ */
.sbrow{display:grid;grid-template-columns:150px 1fr 1fr 80px;align-items:center;gap:var(--sl-pad);padding:12px 0}
.sbrow .sbwhen{font-size:var(--sl-fs-body);color:var(--sl-ink)}
.sbrow .sbplace{font-size:var(--sl-fs-body);color:var(--sl-ink2)}
.sbrow .sbst{font-size:var(--sl-fs-aux);color:var(--sl-ink2)}
.sbrow .sbst.ng{color:var(--sun-d);font-weight:700}
.sblink{background:none;border:0;padding:0;font:inherit;font-size:var(--sl-fs-body);font-weight:700;color:var(--sl-ink);text-decoration:underline;cursor:pointer;text-align:left}
@media (max-width:640px){.sbrow{grid-template-columns:1fr 1fr}}
.slpage.tdlist{padding:0 0 24px}

/* ===== 面接の結果の札・取消の面接を薄く出す・LINE面接の印（2026-10-28）=====
   ★札は小さな文字だけ。枠で囲まない（デザインのルール1） */
.fuda{display:inline-block;margin-left:5px;font-size:10px;font-weight:700;opacity:.95;white-space:nowrap}
.fuda.l{margin:0 4px 0 0;opacity:.85}
.cw-iv.faded,.cm-iv.faded{opacity:.42}
.ivhist{display:block;font-size:13px;line-height:1.9}
.ivhist .fuda{color:var(--ink2);margin-left:8px;font-size:12px}
.ivhist.gone{opacity:.55}

button.ivhist{background:none;border:0;padding:0;text-align:left;cursor:pointer;color:inherit;font:inherit;font-size:13px;line-height:1.9;width:100%}

/* LINE連携の数（会社ごと・2026-11-01）と、一覧の行のLINEの印（ファルコンだけ） */
.losum{font-size:16px;font-weight:700;margin:4px 0 10px}
.oline{color:var(--ink2)}
.smsng{font-size:12.5px;color:var(--sun-d);font-weight:700;margin:4px 0 2px}
/* SMSが届かない番号の札（2026-11-02）。札は灰色にそろえているが、これは注意の黄（cxo と同じ扱い。赤は連絡NGだけ） */
.chip.smsngc{color:var(--sun-d);background:var(--sun-bg);border-color:var(--sun-ln)}
/* ★応募者の画面：SMS／LINEの切り替え（2026-11-02）。LINEがひもづいている方だけ出る。選んでいるほうが塗り、もう一方は白 */
.mdch{display:flex;gap:6px;align-items:center;margin:12px 0 8px}
.mdch .btn{min-width:64px}
/* ★届いた道の札（SMS／LINE／LINE→SMS・2026-11-02）。枠で囲まない小さな文字 */