/* 共通レイアウト — 現行Swing版の配色・操作感を踏襲(04_mockup.html より)
   v4.15 見た目の点検(tests/qa/visual_audit.py): 白文字の下地色は白との比 4.5 以上(primary #2a76b3・success #1e8449・danger #d63f2f・warning #b35a12・info #128068・secondary #65747f)、
   白地の補助文字は #5b6b82 / #66718a、文字は 11.5px 以上(ガント・時刻表の札の中だけ 11px)に揃えた */
:root{
  --navy:#1E2749;        /* PANEL_COLOR / SIDEBAR_BG */
  --navy-dark:#161C37;   /* TITLE_BAR_BG */
  --nav-fg:#C8D2FF;
  --nav-hover:#3C508C;
  --primary:#2a76b3; --success:#1b7d44; --danger:#d63f2f;   /* v4.22 success を少し濃く(#1e8449 は薄灰 #f7f9fc の上で比 4.47 と 4.5 に届かなかった) */
  --secondary:#65747f; --info:#128068; --warning:#b35a12;
  --navy-panel:#27325F; /* 入力フォームの背景(サイドバーより一段明るく) */
}
*{box-sizing:border-box;margin:0;padding:0;font-family:"Meiryo","メイリオ",sans-serif;}
body{display:flex;height:100vh;overflow:hidden;background:#f0f2f5;}

/* ===== サイドバー ===== */
.sidebar{width:var(--side-w,172px);background:var(--navy);color:var(--nav-fg);display:flex;flex-direction:column;flex-shrink:0;position:relative;}   /* v4.57 幅は --side-w(html の style。OptUi が 170〜400 に収める)。既定 172px は今までと同じ */
.sidebar .home-btn{display:block;margin:8px 6px 4px;padding:9px 0;text-align:center;font-weight:bold;font-size:13px;
  color:#fff;background:#3478BE;border-radius:6px;cursor:pointer;text-decoration:none;}
.sidebar .home-btn:hover{background:#489CDC;}
.nav-scroll{flex:1;overflow-y:auto;padding:4px 6px;}
.nav-group{border-top:1px solid rgba(200,210,255,.25);margin:6px 2px;padding-top:6px;
  font-size:12.5px;color:rgba(200,210,255,.78);letter-spacing:2px;}   /* v4.51 見やすさ 11.5px → 12.5px */
.nav-btn{display:block;width:100%;padding:8px 10px;margin:2px 0;font-size:13px;text-align:left;
  color:var(--nav-fg);background:transparent;border:none;border-radius:6px;cursor:pointer;text-decoration:none;}
.nav-btn:hover{background:var(--nav-hover);color:#fff;}
.nav-btn.active{background:#fff;color:var(--navy);font-weight:bold;}
/* v4.53 「★ よく使う」にもある項目は、グループの中では薄く(消さない。押せば今までどおり開く)。メニューの検索の結果では薄くしない */
.nav-items .nav-btn.nav-dup{opacity:.55;}
.nav-items .nav-btn.nav-dup:hover, .nav-items .nav-btn.nav-dup:focus-visible{opacity:1;}
.nav-search-hits .nav-btn.nav-dup{opacity:1;}

/* サイドバーの見出しをたたむ/開く(10/9 土方様向けの整理) */
.nav-group.nav-tgl{cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;}
.nav-group.nav-tgl:hover{color:#fff;}
.nav-group .tg{font-size:11.5px;transition:transform .15s;}
.nav-group.nav-tgl.closed .tg{transform:rotate(-90deg);}
.nav-items.closed{display:none;}
.sidebar-bottom{border-top:1px solid rgba(200,210,255,.25);padding:6px;}
.sidebar-bottom .nav-btn{text-align:center;background:#34495E;color:#fff;font-size:12px;}
/* v4.16 かんたん表示: くわしい項目(.nav-adv)は隠し、グループ末尾の「もっと見る ▾」(.nav-more)で開く(.more-open)。今いる画面の項目はサーバー側で nav-adv を付けない */
.nav-items .nav-btn.nav-adv{display:none;}
/* v4.47 会社の設定で「使わない」にした項目・グループ(「もっと見る」でも出さない。メニューの検索では当たる) */
.nav-off, .nav-items.more-open .nav-btn.nav-off{display:none !important;}
.nav-items.more-open .nav-btn.nav-adv{display:block;}
.nav-more{display:block;padding:5px 10px 4px;font-size:12.5px;color:var(--nav-fg);text-decoration:none;cursor:pointer;letter-spacing:1px;}
.nav-more:hover{color:#fff;text-decoration:underline;}
.nav-items.more-open .nav-more{display:none;}
/* v4.16 サイドバー下の「表示: かんたん ▸ すべて」(自分だけの設定の切り替え) */
.sidebar-bottom.nav-mode{margin:0;}
.nav-mode-btn{display:block;width:100%;padding:6px 4px;border:1px solid rgba(200,210,255,.35);border-radius:6px;background:transparent;color:var(--nav-fg);font-size:11.5px;cursor:pointer;letter-spacing:1px;white-space:nowrap;}
.nav-mode-btn:hover{background:var(--nav-hover);color:#fff;}
.nav-mode-btn .on{color:#fff;font-weight:bold;text-decoration:underline;}

/* ===== メイン ===== */
.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.titlebar{background:var(--navy-dark);border-bottom:2px solid var(--primary);color:#fff;
  padding:10px 18px;display:flex;align-items:center;justify-content:space-between;}
.titlebar h1{font-size:16px;font-weight:bold;}
.titlebar .userbox{font-size:12.5px;color:#C8D2FF;display:flex;align-items:center;gap:10px;}
/* 会社名は常に色付きバッジで表示(別会社のアカウントに切り替わっていても気づけるように) */
.titlebar .tenant-badge{color:#fff;padding:4px 12px;border-radius:12px;font-weight:bold;font-size:13px;white-space:nowrap;
  max-width:260px;overflow:hidden;text-overflow:ellipsis;}
.titlebar .user-name{white-space:nowrap;}
/* 紺地の上の丸ボタン(ログアウト・モード切替) */
.pill{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff;border-radius:12px;padding:4px 14px;font-size:12.5px;cursor:pointer;}
.pill:hover{background:rgba(255,255,255,.12);}
.titlebar .logout-btn{border-color:#3C508C;color:#C8D2FF;padding:3px 12px;font-size:12px;}
.titlebar .logout-btn:hover{background:var(--nav-hover);color:#fff;}
.content{flex:1;overflow:auto;padding:14px;}

/* ===== フラッシュメッセージ ===== */
.flash{padding:9px 14px;border-radius:6px;margin-bottom:10px;font-size:12.5px;color:#fff;}
.flash.ok{background:var(--success);} .flash.ng{background:var(--danger);}
/* 案内の帯(.flash.guide・JSはfragments.html ⑩-2): 右上の「✕ 閉じる」と、閉じたあとの1行リンク */
.flash.guide{position:relative;padding-right:92px;line-height:1.8;}
.flash.guide .guide-close{position:absolute;top:6px;right:8px;background:rgba(255,255,255,.14);color:#dfe6ff;border:1px solid rgba(255,255,255,.3);
  border-radius:12px;padding:2px 10px;font-size:12px;cursor:pointer;line-height:1.5;}
.flash.guide .guide-close:hover{background:rgba(255,255,255,.28);color:#fff;}
.guide-open{display:inline-block;margin:0 0 8px;font-size:12.5px;color:#3c5a99;text-decoration:none;}
.guide-open:hover{text-decoration:underline;}
@media print{.guide-open,.flash.guide .guide-close{display:none !important;}}
/* v4.51 見やすさ: 画面の使い方の帯(.flash.guide の .g-more を持つもの)は、白地の .pagedesc にそろえ、ふだんは最初の太字の1行+「くわしく ▾」だけ。
   開いた・たたんだは画面ごとに覚える(JS は fragments.html ⑩-2)。JS が動かないときは全部出す(html.gjs のときだけたたむ) */
.flash.guide.g-light{background:#f5f7fb;border:1px solid #dde3ee;color:#2d3748;padding:7px 12px;padding-right:12px;font-size:12.5px;line-height:1.8;}
.flash.guide.g-light b{color:#1E2749;}
.flash.guide.g-light a{color:#1f5f8f;}
html.gjs .flash.guide.g-light:not(.g-open) .g-more{display:none;}
.flash.guide .g-tgl{background:none;border:1px solid #cbd2e0;color:#3c5a99;border-radius:10px;padding:1px 10px;font-size:12px;cursor:pointer;margin-left:8px;white-space:nowrap;line-height:1.5;vertical-align:baseline;}
.flash.guide .g-tgl:hover{background:#eaf2fb;}
.flash.guide .g-tgl:focus-visible{outline:2px solid #2a76b3;outline-offset:1px;}
@media print{.flash.guide .g-tgl{display:none !important;} html.gjs .flash.guide.g-light .g-more{display:inline !important;}}
/* v4.04 はじめの5歩の帯・今日の仕事・行のキーボード操作 */
.flash.guide.onboard{background:#2c3a6b;}
.flash.guide.onboard ol.steps{margin:6px 0 4px 18px;padding:0;line-height:1.9;}
.flash.guide.onboard ol.steps li a{color:#9ecdf3;font-weight:bold;text-decoration:none;}
.flash.guide.onboard ol.steps li.done{color:#9fb3d9;text-decoration:line-through;}
.flash.guide.onboard ol.steps li.done a{color:#9fb3d9;}
.flash.guide.onboard ol.steps li.next{font-weight:bold;color:#fff;}
.flash.guide.onboard ol.steps li.next::after{content:"　→ ここから";color:#ffd27f;font-weight:normal;}
/* v4.48 はじめの5歩のあとの「作る(工程)を使うなら」の3歩(番号は ol の番号だけ。文字の「1」は付けない) */
.flash.guide.onboard .make-steps{margin:6px 0 4px;padding-top:6px;border-top:1px dashed rgba(255,255,255,.3);}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;}
.quick a{background:#fff;border:1px solid #cbd2e0;color:#1E2749;border-radius:18px;padding:7px 14px;font-size:12.5px;text-decoration:none;font-weight:bold;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.quick a:hover{background:#eaf2fb;border-color:#2a76b3;}
.flash.guide.stephint{background:#1f6f4a;}
table.grid tbody tr:focus{outline:2px solid #2a76b3;outline-offset:-2px;background:#eaf2fb;}


/* ===== フォームパネル(紺・白ラベル) ===== */
.form-panel{background:var(--navy-panel);border-radius:8px;padding:12px 14px;color:#fff;}
/* 紺パネルの中のファイル選択: 選んだファイル名が白地に白文字で見えなくなる事故防止(10/8 土方様「ファイルを選んでも何も起きない」) */
.form-panel input[type="file"]{color:#1f2937;background:#fff;border-radius:4px;padding:4px 6px;}
.form-panel input[type="file"]::file-selector-button{margin-right:8px;}
/* 一覧画面の「検索モード / 入力モード」(data-listui付きフォーム。JSはfragments.html) */
.form-panel.lm-search .entry-only{display:none !important;}
.form-panel.lm-entry .search-only{display:none !important;}
.lm-bar{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap;}
.lm-bar .lm-title{font-size:13.5px;font-weight:bold;}
.lm-bar .lm-btn.lm-new{background:var(--success);border-color:var(--success);}
.lm-bar .lm-hint{font-size:12px;color:#C8D2FF;}
.adv-toggle{display:none;}
.form-panel.lm-entry .adv-toggle{display:none !important;}   /* 入力モードでは詳細条件ボタンは無意味 */
.form-panel[data-listui]{scroll-margin-top:56px;}            /* スマホの固定タイトルバーに隠れない */
.form-grid{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:flex-end;}
.field{display:flex;flex-direction:column;gap:3px;}
.field label{font-size:13px;color:#fff;}   /* v4.51 見やすさ 12.5px → 13px */
/* 必須項目マーク(統一ルール: 必須=赤い*) */
.req{color:#ff8a80;font-weight:bold;margin-left:2px;}
.field input,.field select,.form-panel .fld{padding:6px 8px;border:1px solid #aab;border-radius:4px;font-size:13.5px;background:#fff;}   /* v4.51 .fld = .field の外に置いた検索の欄も同じ見た目に */
.ymd{display:flex;gap:3px;align-items:center;font-size:12px;color:#fff;}
.ymd select{width:62px;}
.ymd select:first-of-type{width:84px;}   /* v4.48.2 年(4桁)が切れないように(社長 10/29 請求書の画面) */
.btn-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.btn{padding:7px 18px;border:none;border-radius:5px;color:#fff;font-size:13px;font-weight:bold;cursor:pointer;}
.btn:hover{filter:brightness(1.12);}
.btn.primary{background:var(--primary);} .btn.success{background:var(--success);}
.btn.danger{background:var(--danger);}
/* 二次ボタン(戻る・検索・印刷など)は薄く: 登録・保存(success/primary/warning)を目立たせる(2026-10-09) */
.btn.secondary{background:#eef1f5;color:#34495e;font-weight:normal;box-shadow:inset 0 0 0 1px #c5ccd8;}
.btn.secondary:hover{filter:none;background:#e1e7ef;}
/* ボタンが一列に7個以上並ぶ行(と .btn-row.many)は、削除・破棄を右端へ寄せ、赤は控えめに(白地に赤字) */
.btn-row.many > .btn.danger, .btn-row.many > form:has(> .btn.danger),
.btn-row:has(> :nth-child(7)) > .btn.danger, .btn-row:has(> :nth-child(7)) > form:has(> .btn.danger){order:90;margin-left:auto;}
.btn-row.many .btn.danger, .btn-row:has(> :nth-child(7)) .btn.danger{background:#fff;color:#c0392b;font-weight:normal;box-shadow:inset 0 0 0 1px #e6b0aa;}
.btn-row.many .btn.danger:hover, .btn-row:has(> :nth-child(7)) .btn.danger:hover{filter:none;background:#fdecea;}
.btn.warning{background:var(--warning);}  /* .btn.info は廃止(青は primary に統一・2026-09-08)。v4.53 からボタンには使わない(下のきまり) */
/* ===== v4.53 ボタンの色のきまり(全画面で同じ意味の色にする) =====
   緑  .btn.success         = 保存・登録・確定(受注へ変換・一括締め・照合を確定 など、データを残す操作)。1つのフォームに主役の緑は1つまで
   青  .btn.primary         = 印刷・PDF・移動/開く(別の画面・別の窓を開く、読み込んで一覧を出す など)
   灰  .btn.secondary       = 検索・クリア・戻る・補助の操作
   白地に赤枠 .btn.danger-outline = 削除・外す・取消(右端へ。印刷/PDF のすぐ隣に置かない)。押したときの confirm() はそのまま
   赤  .btn.danger          = 削除以外の、取り返しのつかない上書き(単価の上書きなど)だけ
   橙  は状態の札(.st.wait など)だけ。ボタンには使わない
   AI の読み直し(料金がかかる)は .btn.secondary.ai-cost(灰に ⚠ の印) */
.btn.danger-outline{background:#fff;color:#c0392b;font-weight:normal;box-shadow:inset 0 0 0 1px #d9867c;}
.btn.danger-outline:hover{filter:none;background:#fdecea;}
.btn.ai-cost::before{content:"⚠ ";color:#b35a12;font-weight:bold;}
/* 削除は行の右端へ(印刷/PDF・保存から離す)。フォームで包んだ削除ボタンも同じ */
.btn-row > .btn.danger-outline, .btn-row > form:has(> .btn.danger-outline){order:90;margin-left:auto;}
.btn-row > form:has(> .btn.danger-outline) ~ .btn.danger-outline, .btn-row > form:has(> .btn.danger-outline) ~ form:has(> .btn.danger-outline),
.btn-row > .btn.danger-outline ~ .btn.danger-outline, .btn-row > .btn.danger-outline ~ form:has(> .btn.danger-outline){margin-left:0;}
.btn-sep{width:1px;background:rgba(255,255,255,.35);margin:0 4px;}
/* v4.51 見やすさ: 行の中の小さいボタン(保存・削除・行を足すなど)。2px 8px・12px だと押しにくかった。並んだボタンの間は 12px 空ける(保存と削除の押しまちがい防止) */
.btn.sm{padding:5px 12px;font-size:12.5px;min-height:30px;line-height:1.3;}
.btn.sm + .btn.sm, .btn.sm + form:has(.btn.sm), form:has(> .btn.sm) + .btn.sm, form:has(> .btn.sm) + form:has(.btn.sm){margin-left:12px;}
.row-btns{display:inline-flex;gap:12px;align-items:center;flex-wrap:wrap;}
/* v4.51 見やすさ: フォームの中の長い「※」の説明は「入力のきまり」でたたむ(文はそのまま) */
details.hint{margin:8px 0;font-size:12.5px;line-height:1.7;}
details.hint > summary{cursor:pointer;display:inline-block;color:#9ecdf3;font-size:12.5px;padding:2px 0;list-style:none;}
details.hint > summary::-webkit-details-marker{display:none;}
details.hint > summary::before{content:"ⓘ ";}
details.hint > summary::after{content:" ▾";font-size:11.5px;}
details.hint[open] > summary::after{content:" ▴";}
details.hint > summary:hover{text-decoration:underline;}
details.hint > .hint-body{margin-top:4px;padding:6px 10px;border-left:3px solid rgba(158,205,243,.5);}
/* 白地(紺パネルの外)に置いたとき */
.hint.on-light > summary{color:#1f5f8f;} .hint.on-light > .hint-body{color:#4a5568;border-left-color:#cbd2e0;}
/* v4.51 見やすさ: 検索の欄の日付が空のときの「指定なし」(ブラウザの yyyy/mm/dd・----年--月 の代わりに読む) */
.field .range-none, .ymd .range-none{font-size:12px;color:#C8D2FF;margin-left:6px;font-weight:normal;white-space:nowrap;}
/* v4.53 期間の欄(から 〜 まで)を 1 つの欄の中に横に並べる */
.range-pair{display:flex;align-items:center;gap:6px;font-size:13px;color:#fff;flex-wrap:wrap;}
.range-pair input{padding:6px 8px;border:1px solid #aab;border-radius:4px;font-size:13.5px;background:#fff;}
.ymd .ymd-or{font-size:12px;color:#C8D2FF;margin:0 2px 0 6px;white-space:nowrap;}
.form-panel.lm-entry .range-none, .form-panel.lm-entry .ymd-or{display:none !important;}

/* ===== テーブル ===== */
/* v4.51 見やすさ: 表の枠は高さを決めない(画面全体で縦に送る)。前は max-height:calc(100vh - 340px) の枠の中にもう1本スクロールがあり、表が小さく二重のスクロールになっていた。
   枠は overflow を持たない(=見出しの sticky が .content の縦スクロールに付く)。横に収まらない広い表は、枠ごと広がって .content(画面の下端)の横スクロールで送る。
   max-height を書いた枠(ホームの納期リスト・納品書作成の受注の追加など、わざと高さを決めた所)は、これまでどおり枠の中でスクロールする */
.table-wrap{background:#fff;border-radius:8px;margin-top:12px;box-shadow:0 1px 4px rgba(0,0,0,.12);
  width:fit-content;min-width:100%;}
.table-wrap[style*="max-height:"]:not([style*="max-height:none"]):not([style*="max-height: none"]):not(.tw-open), .table-wrap.cmp-wrap{overflow:auto;width:auto;}
.table-wrap.tw-open{max-height:none !important;}   /* v4.51 レビュー: 高さを決めた枠を「すべて見る」で開いたとき(ホームの納期リスト) */
.table-wrap > table.grid > thead > tr:first-child > th:first-child{border-top-left-radius:8px;}
.table-wrap > table.grid > thead > tr:first-child > th:last-child{border-top-right-radius:8px;}
table.grid{border-collapse:collapse;width:100%;font-size:13.5px;white-space:nowrap;line-height:1.45;}   /* v4.51 見やすさ 12.5px → 13.5px */
table.grid th.num, table.grid thead th.num{text-align:right;}   /* v4.51 数の列は見出しも右に寄せる */
.num{font-variant-numeric:tabular-nums;}
/* 長い取引先名・品名は折り返して、PC幅(1366px)で横スクロールが出にくくする */
table.grid td.wrap{white-space:normal;min-width:6em;max-width:200px;overflow-wrap:anywhere;}
/* v4.85 取引先名・品名など、長い字が入る大事な列(td.wrap.wide)は 12 文字より細くしない。表が画面より広いとき、6 文字幅まで縮んで 1 行が 7〜8 段になっていた(受注管理・在庫一覧)。
   全部の td.wrap に掛けると、折り返す列が多い表(不良一覧)や、短い字の列(置き場)まで広がるので、列を選んで付ける */
table.grid td.wrap.wide{min-width:12em;max-width:260px;}
/* 詳細列の表示切替(table.grid[data-coltoggle]。既定は隠す・localStorageに記憶) */
.col-bar{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:#567;}
/* 白地の軽いボタン(詳細列切替・ステータス候補・日別リスト) */
.lite-btn,.col-bar button,.st-pop button,.day-list a{background:#fff;border:1px solid #cbd2e0;color:#345;border-radius:12px;padding:4px 12px;cursor:pointer;font-size:12px;}
.lite-btn:hover,.col-bar button:hover,.st-pop button:hover,.day-list a:hover{background:#eaf2fb;}
.col-bar + .table-wrap{margin-top:6px;}
.col-bar .bulk-del{background:#fff;color:#c0392b;border:1px solid #d9867c;font-weight:bold;margin-right:auto;}   /* v4.53 削除は白地に赤枠(ボタンの色のきまり) */
.col-bar .bulk-del:hover{background:#fdecea;}
.col-bar .bulk-slip{background:var(--success);color:#fff;border:none;font-weight:bold;margin-right:auto;}
.col-bar .bulk-slip:hover{background:#176a3a;}
.col-bar .bulk-del + .bulk-slip{margin-left:8px;} .col-bar .bulk-del:not([style*="none"]) ~ .bulk-slip{margin-right:auto;}
.bulk-cb{width:16px;height:16px;cursor:pointer;vertical-align:middle;}
table.grid td.bulk-col{cursor:pointer;}
table.grid.cols-compact .col-detail{display:none;}
/* v4.02 列の表示切替(列番号で隠す)+「列を選ぶ」の小窓 */
table.grid .col-hid{display:none !important;}
/* v4.52 画面ごとの並び: 横に長い表の右端の操作の列(今回納品数・作成など)を右に固定。枠(.table-wrap)の中で横に送っても見える */
table.grid th.act-r, table.grid td.act-r{position:sticky;right:0;}
table.grid td.act-r{background:#fff;box-shadow:-4px 0 6px -3px rgba(0,0,0,.18);z-index:1;}
table.grid tbody tr:nth-child(even) td.act-r{background:#f7f9fc;} table.grid tbody tr:hover td.act-r{background:#eaf2fb;}
table.grid thead th.act-r{z-index:2;box-shadow:-4px 0 6px -3px rgba(0,0,0,.3);}
.form-panel table.grid:has(th.act-r){overflow:clip;}   /* 紺パネルの中の表の overflow:hidden は sticky を止めるので、角の切り取りだけの clip に */
.col-bar .col-pick.on{border-color:#2a76b3;color:#1a6fb5;}
.col-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:30;background:#fff;border:1px solid #cbd2e0;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.18);min-width:240px;max-width:360px;font-size:12.5px;color:#234;text-align:left;}
.col-pop-head{padding:8px 12px 4px;font-weight:bold;color:#345;}
.col-pop-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;padding:4px 12px;max-height:50vh;overflow:auto;}
.col-pop-list label{display:flex;align-items:center;gap:4px;white-space:nowrap;cursor:pointer;padding:2px 0;}
.col-pop-foot{display:flex;gap:6px;justify-content:flex-end;padding:8px 12px;border-top:1px solid #e4e7ef;}
/* v4.02 画面の一行説明 */
.pagedesc{display:flex;align-items:center;gap:10px;background:#f5f7fb;border:1px solid #dde3ee;color:#4a5568;font-size:12.5px;padding:6px 12px;border-radius:6px;margin:0 0 10px;}
.pagedesc span{flex:1;}
.pagedesc button{background:none;border:1px solid #cbd2e0;color:#5b6b82;border-radius:10px;padding:1px 10px;font-size:12px;cursor:pointer;}
.pagedesc button:hover{background:#eaf2fb;}
@media print{.pagedesc,.col-bar{display:none !important;}}
/* ステータス直接変更 */
.st.clickable{cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.12);}
.st.clickable:hover{filter:brightness(1.15);}
.st-pop{position:absolute;background:#fff;border:1px solid #cbd2e0;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.22);padding:6px;z-index:30;display:flex;flex-direction:column;gap:3px;min-width:130px;}
.st-pop .st-pop-title{font-size:12px;color:#5b6b82;padding:2px 6px;}
.st-pop button{border-radius:5px;padding:5px 10px;font-size:12.5px;text-align:left;color:#333;}
.st-pop button.cur{font-weight:bold;background:#f0f2f5;}
.links a{color:var(--primary);text-decoration:none;margin-right:6px;font-size:12px;}
/* v4.52 画面ごとの並び: 表のすぐ上の、状態で絞るタブ(押すとその状態だけ) */
.st-tabs{display:flex;flex-wrap:wrap;gap:4px;align-items:flex-end;margin:12px 0 0;border-bottom:2px solid var(--navy);padding-left:2px;}
.st-tabs .st-tabs-lbl{font-size:12.5px;color:#345;margin-right:6px;padding-bottom:6px;}
.st-tabs a{display:inline-block;padding:6px 14px;font-size:13px;color:#1E2749;background:#eef1f5;border:1px solid #cbd2e0;border-bottom:none;border-radius:6px 6px 0 0;text-decoration:none;}
.st-tabs a:hover{background:#e1e7ef;}
.st-tabs a.cur{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:bold;}
.st-tabs a.late-tab:not(.cur){color:#b03a2e;}
.st-tabs + .flash, .st-tabs + .table-wrap{margin-top:0;border-top-left-radius:0;}
.st-tabs + .flash{border-radius:0;margin-bottom:0;}
.links a:hover{text-decoration:underline;}
tr.late .links a, tr.soon .links a, table.grid tbody tr.late td a, table.grid tbody tr.soon td a{color:#1f5f8f;}   /* v4.15 超過・間近の色付き行(薄赤・薄橙)の上のリンクは濃い青(比 4.5 以上)。v4.22 .links 以外のリンクも */
table.grid tbody tr.late td a.ok, table.grid tbody tr.soon td a.ok, table.grid tbody tr.late td .ok, table.grid tbody tr.soon td .ok{color:#176b3c;}   /* v4.22 色付き行の上の緑(完 1/1 など) */
table.grid thead th{position:sticky;top:0;background:var(--navy);color:#fff;padding:8px 10px;text-align:left;font-weight:normal;z-index:1;}
/* 列見出しクリックで並び替え(fragments.htmlの共通JS) */
table.grid thead th.sortable{cursor:pointer;user-select:none;white-space:nowrap;}
table.grid thead th.sortable:hover{background:#2c3a6b;}
table.grid thead th.sort-asc::after{content:" ▲";font-size:11.5px;color:#9ecdf3;}
table.grid thead th.sort-desc::after{content:" ▼";font-size:11.5px;color:#9ecdf3;}
table.grid tbody td{padding:8px 10px;border-bottom:1px solid #e4e7ef;}
/* 紺パネル(color:#fff)内に表を置いても文字が消えないよう、セルの文字色は常に明示 */
table.grid tbody td{color:#333;}
/* 紺パネル(.form-panel/details)の中に置いた表は白地にする(紺地に濃い文字で読めなくなる事故防止) */
.form-panel table.grid{background:#fff;border-radius:6px;overflow:hidden;}
table.grid tbody tr{cursor:pointer;}
table.grid tbody tr:nth-child(even){background:#f7f9fc;}   /* 薄い縞で行を追いやすく(hover・選択・超過の色が優先) */
table.grid tbody tr:hover{background:#eaf2fb;}
table.grid tbody tr.selected{background:#d6e9f9;}
table.grid tbody tr.late td{background:#fdecea;}
table.grid tbody tr.late td, table.grid tbody tr.soon td{--danger:#b03a2e; --success:#176b3c; --primary:#1f5f8f;}   /* v4.15 薄赤・薄橙の行の上では赤い字を濃く(比 4.5 以上)。var(--danger) を使う字・枠に効く */
table.grid tbody tr.soon td{background:#fef5e7;}
/* 納期セルの「⚠」(超過=赤・3日以内=橙)。色だけに頼らない印(白黒印刷・色覚の違い向け) */
.due-mark{margin-left:4px;font-size:12px;color:#c0392b;cursor:help;}
tr.soon .due-mark{color:#9a6309;}
.num{text-align:right;}
.st{padding:2px 8px;border-radius:9px;font-size:12px;color:#fff;}
.st.working{background:var(--primary);} .st.done{background:var(--secondary);}
.st.wait{background:var(--warning);}    .st.cancel{background:#65747f;}
.st.st-err{background:#fff;color:#b03a2e;box-shadow:inset 0 0 0 1.5px #c0392b;font-weight:bold;}   /* v4.52 エラーは赤い枠の札(灰色の「破棄」と見分ける) */

/* ===== ホーム ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;}
.card{background:var(--navy);color:#fff;border-radius:8px;padding:16px;}
a.card-link{display:block;text-decoration:none;cursor:pointer;transition:filter .1s, transform .1s;}
a.card-link:hover{filter:brightness(1.25);transform:translateY(-1px);}
.card .t{font-size:12px;color:#C8D2FF;} .card .v{font-size:26px;font-weight:bold;margin-top:6px;}
.card .s{font-size:12px;margin-top:4px;color:#9fb0e8;}

/* ===== 納期カレンダー(ホーム) ===== */
.cal-wrap{background:#fff;border-radius:8px;margin-top:14px;padding:12px 14px;box-shadow:0 1px 4px rgba(0,0,0,.12);}
.cal-head{display:flex;align-items:center;gap:14px;margin-bottom:8px;flex-wrap:wrap;}
.cal-title{font-size:14px;font-weight:bold;color:var(--navy);}
.cal-nav{font-size:12px;color:var(--primary);text-decoration:none;padding:4px 10px;border:1px solid #cfd8ea;border-radius:5px;}
.cal-nav:hover{background:#eaf2fb;}
.cal-legend{font-size:12px;color:#567;margin-left:auto;display:flex;gap:10px;align-items:center;}
table.cal{border-collapse:collapse;width:100%;table-layout:fixed;}
table.cal th{background:var(--navy);color:#fff;font-weight:normal;font-size:12px;padding:5px 0;text-align:center;}
table.cal th:first-child{color:#ff9e93;} table.cal th:last-child{color:#9ecdf3;}
table.cal td{border:1px solid #e4e7ef;vertical-align:top;height:74px;padding:3px 4px;font-size:12px;}
table.cal td.blank{background:#f6f7fa;}
table.cal td.today{background:#fff8e1;outline:2px solid var(--warning);outline-offset:-2px;}
.cal-day{font-size:12px;color:#345;font-weight:bold;margin-bottom:2px;}
.chip{display:block;margin:1px 0;padding:1px 5px;border-radius:4px;color:#fff;font-size:11.5px;
  text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chip:hover{filter:brightness(1.15);}
.chip-order{background:var(--primary);}
.chip-purchase{background:var(--info);}
.chip-late{background:var(--danger);}
.cal-legend .chip,.day-list .chip{display:inline-block;padding:1px 7px;}
table.cal td.hasitems{cursor:pointer;} table.cal td.hasitems:hover{background:#eaf2fb;}
table.cal td.picked{outline:2px solid var(--primary);outline-offset:-2px;}
.day-list{margin-top:10px;border-top:1px solid #e4e7ef;padding-top:8px;}
.day-list .dl-head{font-size:12.5px;font-weight:bold;color:var(--navy);margin-bottom:4px;}
.day-list a{display:block;padding:5px 8px;border-radius:5px;text-decoration:none;color:#333;font-size:12.5px;margin:3px 0;}
.day-list .chip{margin-right:6px;}
.flash.okline{padding:6px 14px;font-size:12.5px;}
.flash .flash-btn{background:#fff;color:#c0392b;padding:4px 12px;border-radius:12px;font-size:12px;text-decoration:none;font-weight:bold;white-space:nowrap;}

/* ===== 納期リスト(ホーム) ===== */
.deadline-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;}
@media (max-width:1100px){.deadline-grid{grid-template-columns:1fr;}}
.dl-title{font-size:13px;font-weight:bold;color:var(--navy);}
.deadline-grid .table-wrap{margin-top:6px;}
.deadline-grid > *{min-width:0;}
.deadline-grid .table-wrap{overflow-x:auto;width:auto;}   /* v4.51 レビュー: 「すべて見る」で開いたあとも、広い表は枠の中で横に送る */   /* v4.51 2列の中の表が広くても列の幅を押し広げない(枠の中で横に送る) */

/* ===== プレースホルダ/ログイン ===== */
.placeholder{background:#fff;border-radius:8px;padding:40px;text-align:center;color:#5b6b82;
  font-size:13px;box-shadow:0 1px 4px rgba(0,0,0,.12);}
body.login-page{display:flex;align-items:center;justify-content:center;background:var(--navy);}

/* ===== スマホ・タブレット対応 ===== */
.menu-btn{display:none;background:transparent;border:1px solid #3C508C;color:#C8D2FF;border-radius:6px;
  font-size:17px;padding:2px 10px;cursor:pointer;margin-right:10px;}
.menu-btn{min-width:44px;min-height:44px;}   /* v4.51 見やすさ: スマホで押しやすい大きさ(44px 四方) */
.nav-overlay{display:none;}
@media (max-width:820px){
  body{height:auto;min-height:100vh;overflow:auto;}
  /* サイドバーは左からスライドするドロワーに */
  .sidebar{position:fixed;left:-200px;top:0;bottom:0;z-index:60;transition:left .18s ease;width:172px;order:0;
    box-shadow:2px 0 12px rgba(0,0,0,.35);}   /* v4.57 スマホ幅では、自分で変えた幅(--side-w)・位置は使わない(引き出しの幅は 172px のまま) */
  .sidebar.open{left:0;}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;}
  body.nav-open .nav-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:50;}
  .main{width:100%;}
  .titlebar{position:sticky;top:0;z-index:40;padding:8px 10px;}
  .titlebar h1{font-size:14px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .titlebar .userbox{gap:6px;min-width:0;flex-shrink:1;}
  .titlebar .logout-btn{padding:3px 8px;white-space:nowrap;}
  .user-name{display:none;} /* 狭い画面ではユーザー名を省略(会社名バッジは残す) */
  .titlebar .tenant-badge{font-size:12px;padding:3px 8px;max-width:96px;overflow:hidden;text-overflow:ellipsis;}
  .content{padding:10px 8px;}
  /* 入力欄は横幅いっぱいに(inline styleの固定幅を上書き)。年月セレクト等の入れ子は除く */
  .form-grid{gap:8px 10px;}
  .field{width:100%;}
  .field>input,.field>select{width:100% !important;}
  /* 表は横スクロール(画面の高さ制限は解除) */
  .table-wrap{max-height:none;overflow-x:auto;-webkit-overflow-scrolling:touch;width:auto;min-width:0;}   /* v4.51 スマホは枠の中で横に送る(画面全体は横に動かさない) */
  .cards{grid-template-columns:repeat(2,1fr);gap:8px;}
  .card{padding:12px;} .card .v{font-size:20px;}
  table.cal td{height:52px;padding:2px;}
  .chip{font-size:11.5px;padding:1px 4px;text-align:center;}
  .chip .chip-label{display:none;} /* スマホは「受/仕」だけ表示し、日付タップで下に一覧を出す */
  /* 検索モードでは主要条件だけ表示し、「詳細条件」で残りを開く */
  .form-panel.lm-search .field.adv{display:none;}
  .form-panel.lm-search.adv-open .field.adv{display:flex;}
  .adv-toggle{display:inline-block;}
  .btn{padding:8px 14px;}
  table.grid .col-m-hide{display:none;}
  .titlebar h1 + .help{display:none;}   /* v4.02 狭い画面では見出し横の「?」を出さない(説明は本文の帯で) */   /* ID・残など補助列(詳細列の切替とは別に、狭い画面では常に隠す) */
}
/* v4.48(探索レビュー 10/29) スマホ(幅430px以下): 画面名が1〜2文字に切れていた → 会社名バッジは色の丸だけ(押さなくても title で会社名)・検証/閲覧専用の印は短く・
   ログアウトはメニュー(☰)の下へ(fragments.html の titlebar がサイドバーに .nav-logout を足す)・画面名は2行まで折り返す */
.sidebar .nav-logout{display:none;}
@media (max-width:430px){
  .titlebar{padding:6px 8px;}
  .menu-btn{margin-right:6px;padding:2px 8px;}
  .titlebar h1{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.25;font-size:13.5px;word-break:break-all;}
  .titlebar .userbox{gap:4px;flex-shrink:0;}
  .titlebar .tenant-badge .tb-long{display:none;}
  .titlebar .tenant-badge{padding:2px 6px;font-size:11.5px;}
  .titlebar .co-badge{width:14px;height:14px;min-width:14px;padding:0;font-size:0;border-radius:50%;}
  .titlebar .logout-form{display:none !important;}
  .sidebar .nav-logout{display:block;}
  /* v4.51 見やすさ: 指で押す小さいボタンは高さ 40px 以上 */
  .pagedesc button, .lite-btn, .col-bar button, .pill, .btn.sm, .flash.guide .g-tgl{min-height:40px;}
  /* v4.53 残りの小さい操作(ホームの「たたむ」・案内の帯の「✕ 閉じる」・サイドバーの「✎ 編集」・カレンダーの前月/次月・説明を見る)も 40px 以上 */
  .flw-tgl, .flash.guide .guide-close, .sidebar .nav-group a, .cal-nav, .guide-open{min-height:40px;display:inline-flex;align-items:center;}
  .menu-btn{min-width:44px;min-height:44px;}
}
.login-card{background:#fff;border-radius:10px;padding:34px 38px;width:340px;box-shadow:0 6px 24px rgba(0,0,0,.35);}
.login-card h1{font-size:17px;color:var(--navy);text-align:center;margin-bottom:4px;}
.login-card .sub{font-size:12px;color:#5b6b82;text-align:center;margin-bottom:20px;}
.login-card label{display:block;font-size:12px;color:#345;margin:10px 0 4px;}
.login-card input{width:100%;padding:8px 10px;border:1px solid #bcc5d8;border-radius:5px;font-size:13px;}
.login-card .btn{width:100%;margin-top:18px;padding:10px;}
.login-error{background:#fdecea;color:#c0392b;font-size:12px;padding:8px 10px;border-radius:5px;margin-bottom:6px;}

/* v4.35 担当の欄(担当者マスタから選ぶ小窓) */
input.wpick{cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235b6b82'/%3E%3C/svg%3E") no-repeat right 6px center;padding-right:18px !important;}
.wpick-pop{position:absolute;z-index:3000;background:#fff;border:1px solid #aab4c8;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.18);padding:8px 10px;min-width:220px;max-width:360px;color:#1E2749;font-size:14px;}
.wpick-h{font-weight:bold;font-size:12.5px;color:#5b6b82;margin-bottom:4px;}
.wpick-list{max-height:260px;overflow:auto;display:flex;flex-direction:column;gap:2px;}
.wpick-list label{display:flex;align-items:center;gap:8px;padding:6px 6px;border-radius:6px;cursor:pointer;white-space:nowrap;} .wpick-list label:hover{background:#eef2fb;}
.wpick-list input[type=checkbox]{width:20px;height:20px;}
.wpick-none,.wpick-warn{font-size:12px;color:#8a5a00;background:#fff4d6;border-radius:6px;padding:6px 8px;margin-top:4px;white-space:normal;}
.wpick-f{display:flex;justify-content:space-between;gap:8px;margin-top:8px;}

/* v4.39 メニューを探す(サイドバー) */
.nav-search{margin:4px 6px 2px;}
.nav-search input{width:100%;padding:7px 9px;border:1px solid rgba(200,210,255,.45);border-radius:6px;background:rgba(255,255,255,.08);color:#fff;font-size:12.5px;}
.nav-search input::placeholder{color:#aab4d6;}
.nav-search input:focus{outline:none;background:#fff;color:#1E2749;}
.nav-search-none{font-size:11.5px;color:#ffd48a;padding:4px 2px;line-height:1.5;}
nav.searching .nav-group, nav.searching .nav-items, nav.searching .nav-more, nav.searching > .nav-btn{display:none !important;}
.nav-search-hits .nav-btn{display:block;}

/* ===== v4.58 入力欄をたたむ(fragments.html のタイトルバーの JS)。入力欄(form.form-panel[data-fold])の右上の「入力欄をたたむ ▴ / 入力欄を開く ▾」。
   たたむ=html[data-fold="1"] のとき中身を隠す(値は残る)。一覧の「検索/入力モード」の帯(.lm-bar)は残す(「＋ 新規登録」で開ける)。PC 幅だけ・印刷では出さない ===== */
.form-panel[data-fold]{position:relative;}
.fold-tgl{position:absolute;top:-9px;right:12px;z-index:3;background:var(--navy-panel);color:#C8D2FF;border:1px solid rgba(200,210,255,.45);border-radius:9px;padding:1px 10px;font-size:11.5px;line-height:14px;cursor:pointer;white-space:nowrap;}
.fold-tgl:hover{background:var(--nav-hover);color:#fff;}
.fold-tgl.in-bar{position:static;margin-left:auto;}
.fold-note{display:none;font-size:12px;color:#C8D2FF;}
@media (min-width:821px){
  html[data-fold="1"] .form-panel[data-fold] > :not(.lm-bar):not(.fold-tgl):not(.fold-note){display:none !important;}
  html[data-fold="1"] .form-panel[data-fold] > .fold-note{display:inline;}
  html[data-fold="1"] .form-panel[data-fold] > .lm-bar{margin-bottom:0;}
  html[data-fold="1"] .form-panel[data-fold]:not([data-listui]){padding:5px 14px;display:flex;justify-content:space-between;align-items:center;gap:8px;}
  html[data-fold="1"] .form-panel[data-fold]:not([data-listui]) > .fold-tgl{position:static;order:2;}
}
/* v4.86 スマホ幅: 一覧の上の検索・入力欄は、はじめはたたむ(html[data-mfold="1"]。fragments.html)。一覧がすぐ見える。ボタンは指で押せる大きさ */
@media (max-width:820px){
  .fold-note{display:none !important;}
  /* v4.87 スマホ: 検索・取込の箱([data-msec])をはじめにたたむ(JS が .msec-tgl を足し、.msec-closed を付ける)。.m-keep は、たたんでも見せる */
  button.msec-tgl{display:block;width:100%;min-height:40px;margin:0 0 6px;background:#fff;border:1px solid #cbd2e0;border-radius:8px;color:#2a4a6b;font-size:14px;cursor:pointer;}
  .msec-closed > *:not(.msec-tgl):not(.m-keep):not(.m-keep-wrap){display:none !important;}
  .msec-closed > .m-keep-wrap > *:not(.m-keep){display:none !important;}   /* 箱の中の 1 段下にある「＋ 新規登録」を、たたんでも見せる(取引先管理) */
  .msec-closed > .msec-tgl{margin-bottom:0;} .msec-closed > .m-keep{margin-bottom:6px !important;}
  /* v4.87 スマホで押しにくい小さいボタン(高さ 20〜22px)を 36px に: 入荷管理の「保存」「入荷」・発送/引取・在庫一覧の行のボタン・ガントの「上の欄を開く」・請求書の「回収不能にする」 */
  /*   .btn.sm は外す(430px 以下で 40px にする前からの決まりに、詳細度で勝ってしまう)。リンク型(a)は inline だと高さが効かないので inline-flex に */
  .mini-btn:not(.sm), .btn.mini, button.mini, a.mini, .gfold-btn, table.grid td a.btn:not(.sm), table.grid td button.btn:not(.sm), .btn[style*="padding:3px 10px"]{min-height:36px;padding-top:7px;padding-bottom:7px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;}
  .fold-tgl.pc-only, .fold-note.pc-only{display:none !important;}
  .fold-tgl, .fold-tgl.in-bar{position:static;display:block;margin:0 0 0 auto;min-height:40px;padding:6px 14px;font-size:14px;line-height:1.3;border-radius:20px;}
  form.form-panel[data-fold]:not([data-listui]) > .fold-tgl{margin:0 0 8px auto;}
  html[data-mfold="1"] form.form-panel[data-fold] > :not(.lm-bar):not(.fold-tgl){display:none !important;}
  html[data-mfold="1"] form.form-panel[data-fold] > .lm-bar{margin-bottom:0;}
  html[data-mfold="1"] form.form-panel[data-fold] > .lm-bar .lm-hint{display:none;}
  html[data-mfold="1"] form.form-panel[data-fold] > .lm-bar :is(.lm-title,.adv-toggle){display:none;}   /* たたんでいる間は「＋ 新規登録」と「🔍 条件を開く」の 2 つだけ(1 行に収める) */
  html[data-mfold="1"] form.form-panel[data-fold]:not([data-listui]){padding:8px 14px;display:flex;align-items:center;gap:8px;}
  html[data-mfold="1"] form.form-panel[data-fold]:not([data-listui]) > .fold-tgl{margin:0 0 0 auto;order:2;flex:none;}
  html[data-mfold="1"] form.form-panel[data-fold]:not([data-listui]) > .fold-note{display:inline !important;font-size:13px;}
}
@media print{.fold-tgl,.fold-note{display:none !important;}}

/* ===== v4.57 メニューの幅と位置(OptUi・fragments.html のサイドバーの JS)。PC 幅(821px〜)だけ。スマホは今までどおり ☰ で開く引き出し(下の @media が勝つ) ===== */
/* 幅: 内側の縁の 6px(3px はメニュー側・3px は本文側)をつまむ。ふだんは見えない(既定の見た目を変えない)。つまんでいる間と、縁に乗せたときだけ細い線 */
.side-grip{position:absolute;top:0;bottom:0;right:-3px;width:6px;cursor:col-resize;z-index:5;touch-action:none;}   /* レビュー(10/31): ペン・タッチでなぞってもパンにしない */
.side-grip::after{content:'';position:absolute;left:2px;top:0;bottom:0;width:2px;background:#9ecdf3;opacity:0;transition:opacity .15s;}
.side-grip:hover::after, body.side-resizing .side-grip::after{opacity:.9;}
body.side-resizing, body.side-resizing *{cursor:col-resize !important;user-select:none !important;}
/* サイドバーの下の「位置: 左 ▸ 右 ▸ 上」(自分だけの設定)と、押すと出る小窓 */
.sidebar-bottom.nav-pos{position:relative;}
.pos-pop{position:absolute;left:4px;right:4px;bottom:calc(100% + 2px);z-index:80;background:#fff;color:#234;border:1px solid #cbd2e0;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.25);padding:8px 10px;font-size:12.5px;letter-spacing:0;}
.pos-pop .pp-h{font-weight:bold;color:#345;margin-bottom:6px;}
.pos-pop .pp-row{display:flex;gap:4px;margin-bottom:6px;}
.pos-pop .pp-row button{flex:1;background:#fff;border:1px solid #cbd2e0;color:#345;border-radius:6px;padding:5px 0;font-size:12.5px;cursor:pointer;white-space:nowrap;}
.pos-pop .pp-row button:hover{background:#eaf2fb;}
.pos-pop .pp-row button.on{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:bold;}
.pos-pop .pp-w{display:block;width:100%;background:#fff;border:1px solid #cbd2e0;color:#345;border-radius:6px;padding:5px 0;font-size:12px;cursor:pointer;white-space:nowrap;}
.pos-pop .pp-w:hover{background:#eaf2fb;} .pos-pop .pp-w:disabled{opacity:.45;cursor:default;}
.pos-pop .pp-note{font-size:11.5px;color:#66718a;margin-top:6px;line-height:1.5;white-space:normal;}
.pos-pop .pp-sub{font-size:11.5px;color:#66718a;margin:2px 0 3px;}   /* v4.59 小窓の中の小見出し(縮尺・メニューの位置) */
.pos-pop .pp-row.pp-scale button{padding:5px 0;font-size:11.5px;}
/* ===== v4.59 縮尺(OptUi・html[data-scale])。メニューと本文を同じ比で zoom。PC 幅だけ・印刷は 100% ===== */
@media (min-width:821px){
  html[data-scale="80"] .sidebar, html[data-scale="80"] .main{zoom:.8;}
  html[data-scale="90"] .sidebar, html[data-scale="90"] .main{zoom:.9;}
  html[data-scale="110"] .sidebar, html[data-scale="110"] .main{zoom:1.1;}
  html[data-scale="125"] .sidebar, html[data-scale="125"] .main{zoom:1.25;}
}
@media print{.sidebar,.main{zoom:1 !important;}}
/* ===== v4.60 別の窓で開く(fragments.html のタイトルバーの JS)。?win=1 の窓(html[data-win="1"])はメニューとタイトルバーを隠し、上に細い帯(.win-bar)。
   開く側: 伝票の画面の見出しの横の「⧉ 別の窓」(.win-open-btn)・一覧の行の ⧉(.win-open)・別の窓が保存した知らせ(.win-saved-bar)。スマホ幅・印刷では出さない ===== */
html[data-win="1"] .sidebar, html[data-win="1"] .titlebar, html[data-win="1"] .nav-overlay{display:none !important;}
.win-bar{display:flex;align-items:center;gap:10px;padding:6px 12px;background:var(--navy-dark);color:#fff;border-bottom:2px solid var(--primary);font-size:13px;}
.win-bar .win-title{font-weight:bold;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.win-bar .win-close{background:transparent;border:1px solid #3C508C;color:#C8D2FF;border-radius:12px;padding:3px 12px;font-size:12px;cursor:pointer;white-space:nowrap;}
.win-bar .win-close:hover{background:var(--nav-hover);color:#fff;}
.win-open-btn{margin-left:10px;background:transparent;border:1px solid #3C508C;color:#C8D2FF;border-radius:12px;padding:2px 10px;font-size:12px;cursor:pointer;white-space:nowrap;vertical-align:2px;}
.win-open-btn:hover{background:var(--nav-hover);color:#fff;}
table.grid td .win-open{margin-left:4px;color:#8a94a6;text-decoration:none;font-size:12px;opacity:.55;cursor:pointer;}
table.grid tr:hover td .win-open, table.grid td .win-open:hover{opacity:1;color:var(--primary);}
.win-saved-bar{margin:0 0 8px;padding:6px 10px;background:#fff4d6;border:1px solid #e0c060;border-radius:6px;font-size:12.5px;color:#5c4400;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.win-saved-bar button{background:#fff;border:1px solid #cbd2e0;color:#345;border-radius:12px;padding:3px 12px;font-size:12px;cursor:pointer;}
.win-saved-bar .wsb-reload{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:bold;}
@media (max-width:820px){.win-open-btn, table.grid td .win-open{display:none !important;}}
@media print{.win-bar, .win-open-btn, table.grid td .win-open, .win-saved-bar{display:none !important;}}
@media (min-width:821px){
  /* 右: メニューを右に(flex の order)。つまむ縁は左に */
  html[data-sidepos="right"] .sidebar{order:2;}
  html[data-sidepos="right"] .side-grip{right:auto;left:-3px;}
  /* 上(横並び): 本文を縦に並べ、メニューは 1 行の帯。グループは見出しだけ出し、乗せる/押すと項目が下に開く(JS がグループを .nav-top-g で包む) */
  html[data-sidepos="top"] body{flex-direction:column;}
  html[data-sidepos="top"] .sidebar{width:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:0 6px;min-height:40px;z-index:45;box-shadow:0 2px 6px rgba(0,0,0,.25);}
  html[data-sidepos="top"] .side-grip{display:none;}
  html[data-sidepos="top"] .main{min-height:0;}
  html[data-sidepos="top"] .sidebar .home-btn{margin:3px 8px 3px 0;padding:6px 12px;}
  html[data-sidepos="top"] .nav-scroll{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:2px;overflow:visible;padding:0;}
  html[data-sidepos="top"] .nav-search{position:relative;margin:2px 8px 2px 0;width:170px;}
  html[data-sidepos="top"] .nav-search-hits, html[data-sidepos="top"] .nav-search-none{position:absolute;top:100%;left:0;z-index:90;background:var(--navy);min-width:260px;padding:6px;border-radius:0 0 8px 8px;box-shadow:0 8px 20px rgba(0,0,0,.35);}
  html[data-sidepos="top"] .nav-search-hits:empty{display:none;}
  html[data-sidepos="top"] .nav-top-g{position:relative;}
  html[data-sidepos="top"] .nav-top-g > .nav-group{border-top:none;margin:0;padding:9px 10px;cursor:pointer;border-radius:6px;letter-spacing:1px;white-space:nowrap;display:flex;align-items:center;gap:4px;}
  html[data-sidepos="top"] .nav-top-g > .nav-group:hover, html[data-sidepos="top"] .nav-top-g.open > .nav-group{background:var(--nav-hover);color:#fff;}
  html[data-sidepos="top"] .nav-top-g.has-active > .nav-group{color:#fff;box-shadow:inset 0 -2px 0 #fff;}
  html[data-sidepos="top"] .nav-top-g > .nav-group .tg{transform:none !important;font-size:10px;}
  html[data-sidepos="top"] .nav-top-g > .nav-group a{color:rgba(200,210,255,.75);}
  html[data-sidepos="top"] .nav-top-dd{display:none;position:absolute;top:100%;left:0;z-index:90;background:var(--navy);min-width:230px;padding:6px;border-radius:0 0 8px 8px;box-shadow:0 8px 20px rgba(0,0,0,.35);}
  html[data-sidepos="top"] .nav-top-g.open > .nav-top-dd, html[data-sidepos="top"] .nav-top-g:hover > .nav-top-dd{display:block;}
  html[data-sidepos="top"] .nav-top-g.dd-right > .nav-top-dd{left:auto;right:0;}   /* レビュー(10/31): 右寄りのグループは右にそろえて画面の外に出さない */
  html[data-sidepos="top"] .nav-top-dd .nav-items{display:block !important;}   /* 「たたむ」は横並びでは使わない(開く/閉じるは乗せる/押す) */
  html[data-sidepos="top"] .nav-top-dd .nav-items.nav-off{display:none !important;}
  html[data-sidepos="top"] .nav-top-dd .nav-btn{white-space:nowrap;}
  html[data-sidepos="top"] .nav-top-g.nav-off{display:none;}
  html[data-sidepos="top"] nav.searching .nav-top-g{display:none !important;}
  html[data-sidepos="top"] .sidebar-bottom{border-top:none;padding:2px 4px;}
  html[data-sidepos="top"] .sidebar-bottom.nav-mode, html[data-sidepos="top"] .sidebar-bottom.nav-pos{margin:0;}
  html[data-sidepos="top"] .sidebar-bottom.nav-pos{margin-left:auto;}
  html[data-sidepos="top"] .nav-mode-btn{padding:6px 8px;}
  html[data-sidepos="top"] .pos-pop{left:auto;right:0;bottom:auto;top:calc(100% + 2px);min-width:220px;}
}
@media (max-width:820px){.side-grip, .sidebar-bottom.nav-pos{display:none !important;}}   /* スマホ幅では幅も位置も変えない(今までどおり) */

/* v4.41.1 押せないボタン(前/次の端など)は薄くして、押せるボタンと見分けられるように */
.btn:disabled, .btn[disabled]{opacity:.4;cursor:not-allowed;filter:grayscale(.4);}
/* v4.55 会社で隠す入力欄(OptFields)。値は持ったまま出さない(種別で隠す typeFields などの style より強く) */
.fld-off{display:none !important;}
.fld-off-note{font-size:12px;color:#7d5a00;background:#fff4d6;border:1px solid #e8c873;border-radius:5px;padding:4px 10px;margin:6px 0;line-height:1.6;}

/* ===== v4.69 入力欄の見た目: 紺の帯をやめて白いカードに(社長 11/5「デザイン性」)。紺はメニュー・タイトル・表の見出しだけ。
   色つきの地を指定した欄(再チェック中・警告など)は今までどおり。個々の画面に書いた「紺地用の明るい文字色」は、ここでまとめて濃い色に読み替える ===== */
:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)){background:#fff !important;color:#1E2749 !important;border:1px solid #dde2ec;box-shadow:0 1px 2px rgba(30,39,73,.05);}
:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) :is(.field label,.ymd,.lm-title){color:#1E2749;}
:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) :is(.lm-hint,.range-none,.ymd-or,.fold-note){color:#5b6b82;}
:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) .req{color:#c0392b;}
:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) .pill:not(.lm-new){color:#34495e;border-color:#c5ccd8;}
:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) .pill:not(.lm-new):hover{background:#eef1f5;}
:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) details.hint > summary{color:#1f5f8f;}
:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) details.hint > .hint-body{color:#4a5568;border-left-color:#cbd2e0;}
:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) a:not(.btn):not([style*="color"]){color:#1f6fb2;}
.form-panel[data-fold]:not([style*="background"]) .fold-tgl{background:#fff;color:#34495e;border-color:#c5ccd8;}
:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) [style*="color:#C8D2FF" i]:not([style*="background"]):not(.btn),:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) [style*="color:#9fb0e8" i]:not([style*="background"]):not(.btn),:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) [style*="color:#ccd" i]:not([style*="background"]):not(.btn){color:#5b6b82 !important;}
:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) [style*="color:#9ecdf3" i]:not([style*="background"]):not(.btn),:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) [style*="color:#7fc4ff" i]:not([style*="background"]):not(.btn){color:#1f6fb2 !important;}
:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) [style*="color:#ffd76e" i]:not([style*="background"]):not(.btn),:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) [style*="color:#f9e795" i]:not([style*="background"]):not(.btn),:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) [style*="color:#ffd166" i]:not([style*="background"]):not(.btn),:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) [style*="color:#ffe9b3" i]:not([style*="background"]):not(.btn),:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) [style*="color:#ffd27f" i]:not([style*="background"]):not(.btn){color:#8a5a00 !important;}
:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) [style*="color:#7bed9f" i]:not([style*="background"]):not(.btn){color:#1b7d44 !important;}
:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) [style*="color:#ff8a80" i]:not([style*="background"]):not(.btn),:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) [style*="color:#ff9e93" i]:not([style*="background"]):not(.btn){color:#c0392b !important;}
:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) [style*="color:#fff;" i]:not([style*="background"]):not(.btn),:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) [style*="color:#ffffff" i]:not([style*="background"]):not(.btn),:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) [style*="color:white" i]:not([style*="background"]):not(.btn){color:#1E2749 !important;}
/* 紺地の小さな札(取込者・金額の表示など)も、薄い地に濃い文字へ */
:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) [style*="background:#0f1430" i]{background:#eef1f7 !important;color:#1E2749;}
/* 書類の種類などの知らせの帯も、紺をやめて薄い青に */
.flash[style*="background:#2c3a6b" i]{background:#eaf2fb !important;color:#1E2749;border:1px solid #cfe0f2;}
:is(.form-panel:not([style*="background"]),.sec:not(.row):not(.btn-row)) .btn-sep{background:#dde2ec;}
/* v4.73 確かめの小窓(button[data-ask])。はじめに選ばれているのは「戻って直す」 */
.kanri-ask-bg{position:fixed;inset:0;background:rgba(20,28,55,.45);z-index:3000;display:flex;align-items:center;justify-content:center;padding:16px;}
.kanri-ask{background:#fff;color:#1E2749;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:18px 20px;max-width:440px;width:100%;}
.kanri-ask-msg{font-size:14.5px;line-height:1.7;white-space:pre-line;margin-bottom:14px;}
.kanri-ask-row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
.kanri-ask-row .btn{padding:9px 18px;font-size:14px;}
.kanri-ask-row .btn:focus{outline:3px solid #f0c040;outline-offset:2px;}
/* v4.73 取引先の注意(取引先マスタの「登録のときに出す注意」) */
.flash.cp-notice{background:#fff4d6;color:#5c3b00;border:2px solid #e0a800;font-size:14px;}
.flash.cp-notice b{margin-right:6px;}
/* v4.73 回収不能の請求書(一覧の行は灰色・状態は灰色の札) */
.st.lost{background:#5b6470;color:#fff;}
tr.inv-lost td{color:#6b7380;background:#f1f2f4;}

/* ===================================================================================================
   v4.74 見た目の見直し(社長の依頼 11/7「デザイン性・見やすさ・フォント・色合いを全画面で」)。全 54 画面の写真から直す点を洗い出して、共通の所をここでまとめて直す。
   ・フォント: 日本語は Windows に最初から入っている BIZ UDPゴシック(字の形がはっきり)、英字と数字は Segoe UI(BIZ UDPゴシックの数字は 2 割ほど幅が広く、金額・電話番号の欄で切れたため)。iPhone・Mac はヒラギノ、Android は Noto。Webフォントは読み込まない(表示を遅くしない)
   ・文字の大きさは 5 段階(12 / 13 / 14 / 16 / 20px)。11〜11.5px は使わない(ガント・時刻表の札の中は別)
   ・色は意味で 6 つ: 青=進行中・開く / 緑=完了・保存 / 橙=待ち・注意 / 赤=遅れ・エラー / 灰=終わり・取消 / 紫=外注
   ・現場の画面(/shop)は大きいボタン・大きい字のまま(手袋で押すため。shop.html の中の指定が勝つ)
   =================================================================================================== */
:root{
  --font:"Segoe UI","BIZ UDPGothic","BIZ UDPゴシック","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP","Meiryo","メイリオ",sans-serif;
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px;
  --c-run:#2a76b3; --c-done:#1b7d44; --c-wait:#b35a12; --c-late:#c0392b; --c-end:#65747f; --c-ext:#7d3c98;
  --link:#1f6fb2;
}
*{font-family:var(--font);}
body{line-height:1.6;color:#22293a;-webkit-font-smoothing:antialiased;}
input,select,textarea,button{font-family:inherit;}
/* 本文のリンクは同じ青(ブラウザの既定の #0000EE をなくす)。クラスの付いたリンクは今までどおり(:where で強さを 0 にしてある) */
:where(.content) a{color:var(--link);}
:where(.content) a:hover{color:#174f80;}

/* 文字の大きさ */
table.grid{font-size:var(--fs-md);line-height:1.5;}
table.grid thead th{font-weight:600;letter-spacing:.02em;}
.field label{font-size:var(--fs-sm);}
.btn{font-size:var(--fs-md);}
.st{font-size:var(--fs-xs);line-height:1.5;display:inline-block;}
.pagedesc,.flash{font-size:13.5px;line-height:1.65;}
.nav-btn{font-size:var(--fs-md);}
.nav-group{font-size:var(--fs-sm);}
.titlebar h1{font-size:17px;margin-right:auto;}   /* 見出しのすぐ右に「?」「⧉ 別の窓」を寄せる(バーの真ん中に浮いていた) */
.titlebar .userbox{font-size:var(--fs-sm);}

/* 部品の高さをそろえる: 入力欄・選ぶ欄・検索の欄のボタンは 36px */
.field input:not([type=checkbox]):not([type=radio]),.field select,.form-panel .fld{min-height:36px;}
.field .btn:not(.sm),.btn-row .btn:not(.sm){min-height:36px;}

/* 状態の札: 意味で 6 色・色だけに頼らない(完了は ✓) */
.st.working{background:var(--c-run);}
.st.done{background:var(--c-done);}
.st.done::before{content:"✓ ";}
.st.wait{background:var(--c-wait);}
.st.cancel{background:var(--c-end);}
.st.ext{background:var(--c-ext);}
.st.k-scan-delivery{background:#5b6b82;color:#fff;}   /* 帳票アーカイブ「原本(客先の指定伝票)」: 地の色が無く、白い地に白い字だった */

/* リンクの形をしたボタンに下線を出さない(予定表の「前・次・今日」など) */
.msec-tgl{display:none;}   /* v4.87 PC では出さない(スマホの幅だけ) */
a.btn{text-decoration:none;text-align:center;}   /* v4.87 スマホの全幅のボタンで、リンク型だけ字が左に寄っていた */

/* 明るさの差が足りなかった所 */
table.grid td .win-open{color:#5b6b82;opacity:.8;}

/* サイドバー: 「★ よく使う」にもある項目は、薄くせず字の色だけ控えめに(押せない項目に見えていた)・今の画面で 2 本光らせない */
.nav-items .nav-btn.nav-dup{opacity:1;color:#9fb0e8;}
.nav-items .nav-btn.nav-dup.active{background:transparent;color:#fff;font-weight:bold;box-shadow:inset 3px 0 0 #fff;}
.nav-scroll:has(> .nav-btn.active) .nav-items .nav-btn.active{background:transparent;color:#fff;font-weight:bold;box-shadow:inset 3px 0 0 #fff;}   /* 上の「★ よく使う」で光っているときは、グループの方は左の線だけ */

/* 失敗ではない知らせ(設定が無い など)は、赤の全面ではなく薄い黄色の帯 */
.flash.note{background:#fff4d6;color:#5c4400;border:1px solid #f0c040;}

/* スマホ */
@media (max-width:767px){
  .field input:not([type=checkbox]):not([type=radio]),.field select,.form-panel .fld,.field .btn:not(.sm),.btn-row .btn:not(.sm){min-height:44px;}
  table.grid{font-size:var(--fs-sm);}
}

/* v4.74 ホームなどの数字のカード: 紺・赤・橙・紫の全面塗りをやめ、白地に左の太い線と数字の色で意味を出す(写真で 3 色が混ざって重かった) */
.cards .card{background:#fff;color:#1E2749;border:1px solid #dde3ee;border-left:5px solid #1E2749;box-shadow:0 1px 3px rgba(20,30,60,.06);}
.cards .card .t{color:#4a5568;font-size:var(--fs-sm);font-weight:600;}
.cards .card .v{color:#1E2749;}
.cards .card .s{color:#5b6b82;font-size:var(--fs-xs);opacity:1;}
.cards a.card-link:hover{filter:none;background:#f5f8fd;}
.cards a.card-link[style*="#c0392b"]{background:#fff !important;border-left-color:#c0392b;}
.cards a.card-link[style*="#c0392b"] .v,.cards a.card-link[style*="#c0392b"] .s.s-alert{color:#b03a2e !important;}
.cards a.card-link[style*="#9a6309"]{background:#fff !important;border-left-color:#b35a12;}
.cards a.card-link[style*="#9a6309"] .v,.cards a.card-link[style*="#9a6309"] .s.s-alert{color:#9a4a0e !important;}
.cards a.card-link[style*="#6c3483"]{background:#fff !important;border-left-color:#7d3c98;}
.cards a.card-link[style*="#6c3483"] .v,.cards a.card-link[style*="#6c3483"] .s.s-alert{color:#6c3483 !important;}
.cards a.card-link[style*="background"] .t{color:#4a5568 !important;}
.cards a.card-link[style*="background"] .s{color:#5b6b82 !important;}

/* v4.74 長い品名・工程は 1 行で切って「…」(行の高さがばらばらになっていた)。続きは指を置くと出る(title) */
table.grid td.clip1{max-width:16em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* v4.76 「ほかの様式で印刷 ▾」(納品書) */
details.print-more{display:inline-block;position:relative;}
details.print-more > summary{list-style:none;cursor:pointer;}
details.print-more > summary::-webkit-details-marker{display:none;}
.print-more-list{position:absolute;z-index:40;top:calc(100% + 4px);left:0;max-width:calc(100vw - 32px);background:#fff;border:1px solid #cbd2e0;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.18);padding:6px;min-width:300px;display:flex;flex-direction:column;}
.print-more-list a{display:block;padding:8px 10px;border-radius:6px;color:#1E2749;text-decoration:none;font-size:13.5px;white-space:nowrap;}
.print-more-list a:hover{background:#eaf2fb;}

/* v4.77 スマホの幅の一覧はカードの形(table.grid.m-cards は JS が付ける。見出しは各マスの data-label) */
@media (max-width:767px){
  table.grid.m-cards{white-space:normal;}
  table.grid.m-cards thead{display:none;}
  table.grid.m-cards, table.grid.m-cards tbody, table.grid.m-cards tbody tr{display:block;width:100%;}
  table.grid.m-cards tbody tr{background:#fff !important;border:1px solid #dde3ee;border-radius:8px;margin:0 0 8px;padding:6px 12px;box-shadow:0 1px 2px rgba(20,30,60,.05);}
  table.grid.m-cards tbody tr.late{box-shadow:inset 4px 0 0 #c0392b;}
  table.grid.m-cards tbody td{display:flex;gap:10px;align-items:baseline;border:none;padding:3px 0;background:transparent !important;text-align:left;position:static;box-shadow:none;}
  /* v4.87 カードでは、取引先名・品名の幅の上限(PC の表の 200px・260px)を外す。右が空いているのに 100px ほどで 2〜5 段に折れていた */
  table.grid.m-cards tbody td.wrap{max-width:none;min-width:0;}
  table.grid.m-cards tbody td.act{flex-wrap:wrap;}   /* 入荷管理の「入荷」の欄(日付・数量・ボタン・打ち切り・履歴)は、入りきらなければ折り返す */
  table.grid.m-cards[data-tbl="counterparties"] tbody td:empty{display:none;}   /* v4.89 取引先のカード: 電話・E-Mail・住所・備考が空の行は、見出しだけ並べない */
  table.grid.m-cards tbody td::before{content:attr(data-label);flex:0 0 7em;color:#5b6b82;font-size:12px;}
  table.grid.m-cards tbody td[data-label=""]::before{display:none;}
  table.grid.m-cards tbody td[data-label=""]:empty{display:none;}
  table.grid.m-cards tbody td.num{justify-content:flex-start;}
  table.grid.m-cards .col-hid{display:none !important;}
}

/* v4.77 工程の画面の「開く・印刷 ▾」: パソコンではボタンをそのまま横に並べる(開け閉めのボタンは出さない)。スマホではたたんで、押すと開く */
.acts-more, .acts-more .acts-more-body{display:contents;}
.acts-more .acts-tgl{display:none;}
@media (max-width:767px){ .acts-more{display:block;width:100%;} .acts-more .acts-tgl{display:inline-block;} .acts-more .acts-more-body{display:none;} .acts-more.open .acts-more-body{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;} }

/* v4.78 ホームの「新しくなったこと」 */
.whatsnew{background:#fff;border:1px solid #b9d3ee;border-left:5px solid #2a76b3;border-radius:8px;padding:10px 14px;margin:0 0 12px;font-size:13.5px;color:#1E2749;}
.whatsnew .wn-head{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.whatsnew .wn-close{margin-left:auto;background:none;border:1px solid #cbd2e0;border-radius:12px;padding:2px 12px;font-size:12.5px;color:#5b6b82;cursor:pointer;}
.whatsnew ul{margin:0;padding-left:1.2em;line-height:1.8;}
.whatsnew .wn-more{display:none;}
/* v4.90 スマホでは、はじめの 3 行だけ(2 画面分あって、ホームのボタンが下に押されていた)。「もっと見る ▾」で全部 */
@media (max-width:820px){.whatsnew:not(.wn-all) ul li:nth-child(n+4){display:none;} .whatsnew:has(li:nth-child(4)) .wn-more{display:inline-block;margin-top:4px;background:none;border:none;color:#1f6fb2;font-size:13px;padding:6px 0;cursor:pointer;} .whatsnew.wn-all .wn-more{display:none !important;}}
.whatsnew .wn-voice{display:inline-block;background:#e8f5ec;color:#176b3c;border-radius:10px;padding:0 8px;font-size:12px;margin-right:4px;}
@media (max-width:767px){ .form-grid > .field{margin-left:0 !important;} }   /* v4.77 パソコン向けの左の余白(style の margin-left)で、スマホのボタンが左にずれていた */
@media (max-width:767px){ .print-more-list{left:auto;right:0;min-width:0;width:calc(100vw - 32px);} .print-more-list a{white-space:normal;} }