/* 顧客対応台 全体のデザイン（最後に読み込む統一レイヤー）
   主色はロゴの青 #0B6B55、橙はロゴの弧の色だけ。そのほかは白・黒・灰。
   ここを変えると、全ページの色・角丸・余白がそろって変わります。 */
:root{
  --blue:#0B6B55;--blue-d:#095A48;--tint:#E2F2EE;--tint2:#ACD8CB;
  --org:#FF7A1F;--org2:#FFB02E;--org3:#FFB02E;--grad:linear-gradient(90deg,#F04A24,#FF7A1F 50%,#FFB02E);
  --ink:#0E1821;--soft:#5A6678;--faint:#8A94A5;--nav:#0E1821;
  --line:#DDE3EC;--line2:#E8ECF2;--line3:#EDF2F7;--field:#C5CEDB;--bd:#CBD3DF;--mist:#F5F7FA;
  --bg:#F5F7FA;--card:#fff;--red:#8A5400;--green:#1B6B4A;
  --r:10px;--rb:8px;--rk:8px;--rc:10px;--h-ctl:38px;--h-sm:30px;
  --ring:0 0 0 3px rgba(57,73,171,.22);--shadow:0 1px 2px rgba(16,24,40,.05);--sh1:0 1px 2px rgba(16,24,40,.05);--sh2:0 8px 24px -12px rgba(16,24,40,.25);
  --sb:#1B2536;--sb-t:#C6D0E0;--sb-m:#7C889D;--sb-on:rgba(255,255,255,.12);--sb-h:rgba(255,255,255,.07);
}
body{background:var(--bg);color:var(--ink);font-size:14px;line-height:1.65}
a{color:var(--blue)}a:hover{color:var(--blue-d)}

/* ===== 左のメニュー ===== */
.app{grid-template-columns:228px minmax(0,1fr)}
.app .side{background:var(--sb);border:0;box-shadow:none;padding:18px 12px 14px;gap:0}
.app .side .brand{display:flex;align-items:center;gap:10px;padding:2px 10px 18px}
.app .side .brand b{font-size:21px;font-weight:700;color:#fff;letter-spacing:.02em;line-height:1}
.app .side .brand span{font-size:12px;color:var(--sb-m);letter-spacing:.14em}
.app .side nav{display:flex;flex-direction:column;gap:1px}
.app .side nav a{display:flex;align-items:center;gap:11px;height:38px;padding:0 10px;border:0;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--sb-t);text-decoration:none;position:relative;background:none}
.app .side nav a svg{opacity:.85;width:18px;height:18px}
.app .side nav a:hover{background:var(--sb-h);color:#fff}
.app .side nav a.on{background:var(--sb-on);color:#fff;font-weight:700;box-shadow:none}
.app .side nav a.on::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:#7BC4AE}
.app .side nav a.on svg{opacity:1}
.app .side nav .sep{display:none}
.app .side nav .ngrp,.app .side nav .nitems{border:0;margin:0;padding:0}
.app .side nav .ngrp{margin-top:14px}
.app .side nav .ngrp.pins{margin-top:12px}
.app .side nav .nhead{display:flex;align-items:center;justify-content:space-between;width:100%;height:26px;margin:0 0 2px;padding:0 10px;border:0;background:none;color:var(--sb-m);font:600 11px/1 Inter,"Noto Sans JP",sans-serif;letter-spacing:.1em;text-transform:none;cursor:pointer;text-align:left}
.app .side nav .nhead.static{cursor:default}
.app .side nav .nhead:hover{color:#B7C2D6}
.app .side nav .nhead svg{width:12px;height:12px;opacity:.7;transition:transform .15s}
.app .side nav .ngrp.closed .nhead svg{transform:rotate(-90deg)}
.app .side nav .ngrp.closed .nitems{display:none}
.app .side nav a.navmenu{margin-top:14px;height:34px;font-size:12.5px;color:var(--sb-m)}
.app .side .count{margin-left:auto;min-width:20px;padding:1px 6px;border-radius:10px;background:var(--org);color:#fff;font:700 11.5px/18px Inter,sans-serif;text-align:center}
.app .side .newwrap{padding:0 0 6px}
.app .side .newmenu>.btn{width:100%;height:40px;border-radius:8px;background:var(--blue);border:0;color:#fff;font-size:13.5px;font-weight:700;box-shadow:none;transform:none}
.app .side .newmenu>.btn:hover{background:#4ECBA8;box-shadow:none;transform:none}
.app .side .newmenu>.btn svg{color:var(--org2)}
.app .side .me{margin-top:auto;padding:14px 10px 0;border-top:1px solid rgba(255,255,255,.1);font-size:12px;line-height:1.6;color:var(--sb-m)}
.app .side .me *{color:inherit}

/* ===== 上の帯・検索 ===== */
.app .topbar{left:228px;height:52px;background:rgba(245,247,250,.92);border:0;box-shadow:0 1px 0 var(--line2)}
.gsearch input{height:36px!important;border-radius:8px!important;border:1px solid var(--line)!important;background:#fff;font-size:13.5px;box-shadow:none!important}
.gsearch input:focus{border-color:var(--blue)!important;box-shadow:var(--ring)!important}

/* ===== ページの見出し ===== */
.view{padding:72px clamp(1rem,2.6vw,2.2rem) 56px;max-width:1360px}
h1{font-size:22px;line-height:1.35;font-weight:700;margin:0 0 14px;letter-spacing:.01em}
h2{font-size:15px;font-weight:700}h3{font-size:13.5px}
.pagehead{margin-bottom:16px;gap:12px}
.pagehead h1::after{display:none}
.pagehead p{font-size:13px;color:var(--soft);margin:3px 0 0}

/* ===== 関連タブ：下線タイプ ===== */
.hubtabs{display:flex;gap:0;width:100%;padding:0;margin:0 0 16px;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;overflow-x:auto;scrollbar-width:none}
.hubtabs a{display:inline-flex;align-items:center;height:40px;padding:0 16px;margin-bottom:-1px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;box-shadow:none;font-size:13.5px;font-weight:600;color:var(--soft);white-space:nowrap}
.hubtabs a:hover{color:var(--ink);background:none}
.hubtabs a.on{color:var(--blue);border-bottom-color:var(--blue);background:none;box-shadow:none}

/* ===== ボタン ===== */
.btn{height:var(--h-ctl);padding:0 16px;border-radius:8px;font-size:13.5px;font-weight:600;letter-spacing:0;background:var(--blue);border:1px solid var(--blue);color:#fff;transform:none;box-shadow:none;transition:background .15s,border-color .15s}
.btn:hover:not(:disabled){background:var(--blue-d);border-color:var(--blue-d);color:#fff;transform:none;box-shadow:none}
.btn.sm{height:var(--h-sm);padding:0 11px;font-size:12.5px;border-radius:7px}
.btn.ghost{background:#fff;border:1px solid var(--bd);color:var(--ink)}
.btn.ghost:hover:not(:disabled){background:var(--mist);border-color:#B5BFCE;color:var(--ink)}
.btn.ghost.active{background:var(--tint);border-color:var(--blue);color:var(--blue)}
.btn.danger{background:#fff;border:1px solid #E3B5A6;color:var(--red)}
.btn.go{background:var(--blue);color:#fff}
.btn.go:hover{background:var(--blue-d);color:#fff}
.tbl td .btn.sm:not(.ghost):not(.danger){background:#fff;border:1px solid var(--bd);color:var(--ink)}
.tbl td .btn.sm:not(.ghost):not(.danger):hover{background:var(--mist)}
.pagehead .bar>.btn,.pagehead .bar>a.btn,.pagehead .bar>.newmenu{flex:0 0 auto}
.pagehead .bar>.newmenu>.btn{width:auto}

/* ===== 入力 ===== */
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{border:1px solid var(--bd);border-radius:8px;font-size:13.5px}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:var(--ring);outline:0}
input[type=checkbox],input[type=radio]{accent-color:var(--blue)}

/* ===== カード・表 ===== */
.card{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:16px 18px}
.card.flush{padding:0;overflow-x:auto;overflow-y:hidden}
.tbl,.doc-tbl,.bk-tbl{border-collapse:collapse}
.tbl th,table thead th,.listhead{background:var(--mist);color:var(--soft);font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;border-bottom:1px solid var(--line)}
.tbl td{border-bottom:1px solid var(--line2);padding:10px 12px;vertical-align:middle}
.tbl tbody tr:hover td{background:#F6F9FC}
.lrow{border-bottom:1px solid var(--line2)}
.lrow:hover{background:#F6F9FC}
.badge,.chip,.chip2{border-radius:6px}
.seg .segb,.step{border-radius:7px}

/* 書類一覧の上段（集計期間・絞り込み・タブ）：すっきり1つの塊に */
.bk-per{margin:4px 0 12px;gap:10px;color:var(--soft)}
.bk-seg{border-color:var(--bd);border-radius:8px}
.bk-seg button,.bk-seg a{font-size:12.5px}
.bk-listtabs{border-bottom:1px solid var(--line);margin:0}

/* ===== 通知・その他 ===== */
.due.late{color:var(--red)}
.toast{border-radius:8px}
:focus-visible{outline:0;box-shadow:var(--ring)}

@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .app .topbar{left:0}
  .view{padding-top:64px}
}

/* ===== 仕上げ ===== */
.app .side{overflow-y:auto}
.app .side nav,.app .side .me,.app .side .brand,.app .side nav>*{flex:none}
.app .side .brand{flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;text-align:left}
.app .side .brand .brand-g{display:inline-block!important;font-size:24px!important;color:#fff!important}
.app .side .me{background:none;position:static;margin-top:auto}
.app .side nav .newwrap{margin-bottom:8px}
.card.flush table{width:100%}
.card.flush .tbl td{white-space:normal;overflow-wrap:anywhere}
.card.flush .tbl td.td-r,.card.flush .tbl td .btn{white-space:nowrap}
.card.flush .tbl th{white-space:nowrap}

/* ===== 書類一覧の上段 ===== */
.app .side .me{position:sticky;bottom:0;background:var(--sb);padding-bottom:4px}
.bk-head{margin-bottom:10px}
.bk-ttl{color:var(--ink)}.bk-ttl h1{font-size:22px;font-weight:700;color:var(--ink)}.bk-ttl svg{color:var(--soft)}
.bk-guide{color:var(--soft);font-size:13px;margin-left:8px}
.bk-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 12px}
.bk-tools .bk-per{margin:0}
.bk-tools .bk-filterbar{padding:0;border:0;gap:8px}
.bk-tools .bk-fbtn{color:var(--ink);padding:0 12px}
.bk-tools .menubtn>.btn,.bk-tools .bk-filterbar .btn{height:var(--h-sm)}
.bk-seg button{border:0;background:#fff;color:var(--soft);padding:5px 14px;font-size:12.5px;cursor:pointer}
.bk-seg button.on{background:var(--blue);color:#fff}
.bk-tabrow{border-bottom:1px solid var(--line);margin-top:2px}
.bk-tabs2 button{border:0;border-bottom:2px solid transparent;border-radius:0;background:none;padding:10px 20px;font-size:13.5px;font-weight:600;color:var(--soft);margin-bottom:-1px}
.bk-tabs2 button:hover{color:var(--ink)}
.bk-tabs2 button.on{background:none;border-color:transparent;border-bottom-color:var(--blue);color:var(--blue)}
.bk-ctl,.bk-ctls .newmenu>button{color:var(--soft)!important;font-size:12.5px!important}
.bk-panel{border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;overflow-x:auto;background:#fff}
.bk-tools .bk-seg{border-color:var(--bd)}
.bk-panel table{width:100%}
.bk-panel td,.bk-panel th{white-space:normal;overflow-wrap:anywhere}
.bk-panel th{white-space:nowrap}
.bk-panel td.td-r,.bk-panel td .btn{white-space:nowrap}
.bk-panel{overflow:hidden}
.bk-list td:nth-child(2){width:280px;max-width:280px}
.bk-list td:nth-child(3){max-width:200px}
.bk-list td:nth-child(2) *{white-space:normal!important;overflow-wrap:anywhere}
.bk-list td:nth-child(3) *{white-space:normal!important}

/* 旧タブ（案件など）も下線タイプに */
.utabs{display:flex;gap:0;border-bottom:1px solid var(--line)!important;background:none;margin:0 0 14px}
.utabs .utab,.utab{background:none!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;padding:10px 18px!important;font-size:13.5px!important;font-weight:600!important;color:var(--soft)!important;margin-bottom:-1px!important}
.utabs .utab:hover{color:var(--ink)!important}
.utabs .utab.on,.utab.on{background:none!important;color:var(--blue)!important;border-bottom-color:var(--blue)!important}
.utab .n{background:var(--line3);color:var(--soft)}
.utab.on .n{background:var(--tint);color:var(--blue)}
.bk-panel table.bk-list{width:auto;min-width:100%}
.bk-list td:nth-child(2){min-width:250px}
.bk-list td:nth-child(3){min-width:150px}
.bk-list td:nth-child(n+4){white-space:nowrap}
.bk-list td:nth-child(3){padding-right:24px}

/* ===== 左のメニュー：明るい配色・細め・たためる ===== */
:root{--sb:#fff;--sw:208px}
.app{grid-template-columns:var(--sw) minmax(0,1fr)}
.app .topbar{left:var(--sw)}
.app .side{background:#fff;border-right:1px solid var(--line);padding:14px 10px 10px}
.app .side .brand b,.app .side .brand .brand-g{color:var(--blue)!important}
.app .side .brand span{color:var(--soft)}
.app .side nav a{color:#334155;height:36px;font-size:13px;padding:0 9px;gap:10px}
.app .side nav a:hover{background:#F1F4F9;color:var(--ink)}
.app .side nav a.on{background:var(--tint);color:var(--blue);box-shadow:none}
.app .side nav a.on::before{left:-10px;background:var(--blue)}
.app .side nav a svg{opacity:.8}.app .side nav a.on svg{opacity:1}
.app .side nav .nhead{color:#8A94A5}
.app .side nav .nhead:hover{color:var(--ink)}
.app .side .me{background:#fff;border-top:1px solid var(--line2);color:var(--soft)}
.app .side .newmenu>.btn{background:var(--blue);color:#fff;height:38px}
.app .side .newmenu>.btn:hover{background:var(--blue-d)}
.app .side nav a.navmenu{color:#8A94A5}

/* 開閉ボタン */
.sbtoggle{position:absolute;top:14px;right:10px;width:30px;height:30px;border:0;border-radius:7px;background:none;color:#8A94A5;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.sbtoggle:hover{background:#F1F4F9;color:var(--ink)}
.app .side{position:sticky}
.app .side .brand{padding-right:36px}

/* 並べ替え（ドラッグ）の目印 */
.app .side nav a[draggable=true]{cursor:grab}
.app .side nav a.dragging,.app .side nav .ngrp.dragging{opacity:.45}
.app .side nav a.drop-b{box-shadow:0 -2px 0 0 var(--blue)}
.app .side nav a.drop-a{box-shadow:0 2px 0 0 var(--blue)}
.app .side nav .ngrp.drop-b{box-shadow:0 -2px 0 0 var(--blue)}
.app .side nav .nhead[draggable=true]{cursor:grab}

/* たたんだ状態：アイコンと件数だけ */
body.sb-mini{--sw:60px}
body.sb-mini .app .side{padding:12px 8px;overflow-x:hidden}
body.sb-mini .app .side .brand{justify-content:center;padding:2px 0 6px}
body.sb-mini .app .side .brand span{display:none}
body.sb-mini .sbtoggle{position:static;margin:0 auto 8px}
body.sb-mini .app .side nav a{justify-content:center;padding:0;gap:0}
body.sb-mini .app .side nav a>span:not(.count){display:none}
body.sb-mini .app .side nav a>span[style]{display:inline-flex!important}
body.sb-mini .app .side .count{position:absolute;top:1px;right:3px;min-width:16px;padding:0 4px;font-size:10px;line-height:15px;margin:0}
body.sb-mini .app .side nav .nhead{height:10px;margin:6px 8px;padding:0;border-top:1px solid var(--line2);font-size:0;pointer-events:none}
body.sb-mini .app .side nav .nhead svg{display:none}
body.sb-mini .app .side nav .ngrp{margin-top:2px}
body.sb-mini .app .side nav .ngrp.closed .nitems{display:block}
body.sb-mini .app .side .newmenu>.btn{padding:0;font-size:0;width:100%}
body.sb-mini .app .side .newmenu>.btn svg{margin:0}
body.sb-mini .app .side nav a.navmenu span:not([style]){display:none}
body.sb-mini .app .side .me{display:none}
body.sb-mini .app .side nav a.on::before{left:-8px}
.app .side .brand b::first-letter{color:var(--blue)}