/* はやぶさ採用管理｜見た目。モック（素材/モック.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だけに使う */
  --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}
/* ★上の帯には区分（タブ）を置かない（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)}
.row .main{flex:1;min-width:190px}
.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}

.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}
.callbar{position:sticky;top:0;z-index:5;background:var(--navy);color:#fff;border-radius:9px;padding:11px 13px;margin-bottom:10px;
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;box-shadow:0 4px 14px -6px rgba(18,33,60,.5)}
.cbn{font-size:15.5px;font-weight:700;flex:1;min-width:170px}
.cbn span{font-weight:400;font-size:13.5px;color:#BBD2EE;margin-left:6px}
.cbb{display:flex;gap:6px;flex-wrap:wrap}
.cbb .btn{min-height:38px}
.cbb .btn.g{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.34)}
.cbb .btn.g:hover{background:rgba(255,255,255,.26)}
.cbb .btn.d{background:rgba(255,255,255,.1);color:#FFC9C4;border-color:rgba(255,180,175,.5)}

/* ===== 折りたたみ ===== */
.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}
.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)}
.log .r .nt{color:var(--ink2)}
.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}
}

/* ===== 面接できる日時のカレンダー（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-06）。
 *   はみ出すと、下のマスを覆ってしまい、**空いているのになぞれなくなる。**
 *   長さは文字（「本社60分」）で分かるようにする。 */
.wk-s{position:absolute;inset:1px;display:flex;align-items:center;gap:4px;padding:0 5px;
      background:var(--sky-bg);border-left:3px solid var(--sky);border-radius:3px;
      font-size:11.5px;color:var(--sky-d);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}

/* お断りする小窓（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)}
/* カレンダーの中の面接（1週間のカレンダー） */
.ivchip{display:block;width:100%;appearance:none;border:0;cursor:pointer;text-align:left;
  background:var(--sky-bg);color:var(--sky-d);border-left:3px solid var(--sky);
  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-ln)}
.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）。 */
.dcard{padding:0}
.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}
@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}
.btn.sw.on{border-color:var(--sky-ln);color:var(--sky-d)}
.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)}