/* SienaCore モック 共通の見た目。配色は v1 static/style.css を下敷きにした */
:root{
  --navy:#1c2536; --blue:#2f6bed; --blue-hover:#2558d6; --blue-soft:#eef3fe;
  --bg:#f6f8fc; --paper:#ffffff; --text:#1c2536; --muted:#667085;
  --border:#e6e9f0; --flag:#d92d20; --flag-soft:#fef3f2; --warn:#d97706; --warn-soft:#fffaeb;
  --green:#12805c; --green-soft:#ecfdf3;
  --slate:#3d4a64; --slate-hover:#2d374b;
  --field:#f2f6fe; --field-line:#d4e0f7;
  /* 🔴 表の 色（2026-08-28）── 見本は table-guide.html */
  --t-line:#e9e9e7;   /* 横の 罫線 */
  --t-vline:#f1f1ef;  /* 縦の 罫線 ── 横より さらに 薄く */
  --t-head:#f5f5f3;   /* 見出しの 下地 */
  --t-head2:#eaeae7;  /* 2段の 見出しの 2段目 */
  --t-ink:#37352f; --t-dim:#787774;
  --t-hover:#f7f7f5;  /* 触っている 行 */
  --t-sel:#eaf0fb;    /* 合計の 行 */
  --t-neg:#b3504a;    /* マイナス ── 目にやさしい 赤 */
  --t-sub:#faf9f7; --t-sub2:#f3f1ee;   /* 内訳の 行 */
  --t-rule2:#cfcecb;                    /* 合計の 上下の 線 */
  --t-div:#b9b8b4;                      /* 止めた 1列目の 境目 */
  --t-acc:#ececea; --t-acc2:#dcdcd8;    /* 開け閉めの 印 */
  --t-bar:#a9a8a4; --t-bar-bg:#eceae7;  /* 横の スクロールバー */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:"Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;font-size:15px;line-height:1.6;
  display:flex;flex-direction:column;min-height:100vh}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* どの仕様の画面か（モックの断り。製品の画面ではない帯）
   ── 画面の一番下に DEV モードとして出す（mock.js の SIENA.dev が body の末尾へ移す） */
.specref{background:var(--navy);color:#cfd8ea;font-size:13px;padding:12px 18px;min-height:44px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  order:99}
.specref b{color:#fff;font-weight:700}
.specref a{color:#9db8f5}
.specref .devtag{background:var(--warn);color:#fff;font-size:12px;font-weight:800;border-radius:4px;
  padding:1px 7px;letter-spacing:.06em;flex:none}

/* 枠組み */
.app{display:flex;flex:1}
.sidebar{width:252px;flex:none;background:var(--paper);border-right:1px solid var(--border);padding:12px 10px;
  /* 🔴 画面を 縦に 送っても 動かない（✅ 内海さんの 裁定 2026-09-05 束114「スクロールに引っ張られないように」）── 上に 貼り付け、長ければ 中で 送る */
  position:sticky;top:0;align-self:flex-start;max-height:100vh;overflow-y:auto;box-sizing:border-box}
.sidebar a{display:block;padding:8px 12px;border-radius:8px;color:var(--text);font-size:14.5px}
.sidebar a:hover{background:var(--blue-soft);text-decoration:none}
.sidebar a.on{background:var(--blue-soft);color:var(--blue);font-weight:700}
.sidebar hr{border:none;border-top:1px solid var(--border);margin:10px 6px}
.main{flex:1;min-width:0;padding:20px 24px;display:flex;flex-direction:column}
.app .main > .foot{margin-top:auto;margin-bottom:0}

/* グローバルヘッダ ── 左上に SienaCore のロゴ、右上に ユーザー名 と ログアウト */
.topbar{display:flex;align-items:center;gap:14px;background:var(--paper);border-bottom:1px solid var(--border);padding:14px 22px;font-size:14px;min-height:60px}
.topbar .sp{flex:1}
.topbar a{color:var(--muted)}
.topbar .brand{display:inline-flex;align-items:center;color:var(--navy);font-weight:800;font-size:17px}
.topbar .brand:hover{text-decoration:none;opacity:.8}
.logo-mark{height:28px;width:auto;display:block}
/* ロゴと 中身を すこし 離す（2026-08-26） */
.topbar .brand{margin-right:14px}
.topbar .user{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--text)}
.topbar .acct{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
/* いまの プラン名 ── オーナーにだけ 出る（2026-08-26） */
.topbar .plan{font-size:12.5px;font-weight:700;color:var(--slate);background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:3px 10px}
/* 契約アカウント ── 🔴 オーナーにだけ 出る */
.topbar .contract{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--blue)}
.topbar .badge{flex:none}
.topbar .logout{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--muted)}

/* 🔴 連結モードの サイドバー ── 個社（白）と ひと目で 分ける（2026-08-26 の 指示）。
   個社モードは これまでの まま。連結のときだけ 紫に する */
.modechip{display:flex;align-items:center;gap:6px;margin:0 0 8px;padding:6px 10px;border-radius:8px;
  background:#ece5fd;color:#5b34b8;font-size:12.5px;font-weight:800;letter-spacing:.02em}
.modechip .mi{font-size:15px}
/* 🔴 契約アカウントの サイドバー ── 白のまま（2026-08-26 の 指示で 色を やめた）。
   いま 開いている ところだけ 光らせる */
/* 🔴 サイドバーの 色は 白のまま（2026-08-26 の 指示で 紫の 背景を やめた）。
   分かるようにするのは 2つだけ ──
   ・上の「連結モード」の 印（薄い紫）
   ・モードの 切り替えボタンを【行き先の 色】に する
     個社にいるとき → 連結へ 行くボタンは 薄い紫
     連結にいるとき → 個社へ 行くボタンは 薄い青 */
.switcher.mode .swbtn{background:var(--paper);color:var(--muted);border-color:var(--border)}
.switcher.mode .swbtn:hover{background:#f7f5ff;color:#5b34b8;border-color:#e3dbfb}
.switcher.mode.open .swbtn{background:#ece5fd;color:#5b34b8;border-color:#d9cdfb}
body.groupmode .switcher.mode .swbtn:hover{background:var(--blue-soft);color:var(--blue);border-color:#dbe6fd}
body.groupmode .switcher.mode.open .swbtn{background:#dbe7fe;color:var(--blue);border-color:#c7d7fb}

/* ③ 連結モードでは、いま 開いている 画面の 色も 薄い紫 */
body.groupmode .sidebar a.on{background:#ece5fd;color:#5b34b8}
body.groupmode .sidebar a:hover{background:#f4f0ff}
/* ④ 連結モードでは アイコンと 束の 下線も 紫（2026-08-26。切り替えボタンは 行き先の 色のまま） */
body.groupmode .sidebar .mi{color:#5b34b8}
body.groupmode .sidebar .switcher.mode .swbtn .mi{color:inherit}
body.groupmode .sidebar .switcher .swname .mi{color:#5b34b8}
body.groupmode .navgrp-h{border-bottom-color:#5b34b8}

/* 🔴 運営（スーパーアドミン）の 画面（岩崎さんの 裁定 2026-09-03）
   ⚠️ 利用者の 画面と 取り違えると 事故に なるので、色を はっきり 変える。
      紫＝連結 ／ 青＝個社 に 対して、運営は 深い 緑 */
body.adminmode .sidebar a.on{background:#d5efea;color:#0b6b60}
body.adminmode .sidebar a:hover{background:#effaf8}
body.adminmode .sidebar .mi{color:#0b6b60}
.modechip.admin{background:#d5efea;color:#0b6b60}
.badge.adm{background:#0b6b60;color:#fff}

/* サイドバーの上（会社・年度・連結モード） */
.sidetop{padding:2px 2px 4px;margin:0 0 6px}
.switcher{position:relative;margin:0 0 4px}
/* モードの切り替え（連結 ⇄ 個社）── 控えめに。⚠️ 2026-08-26 に 下の罫線を やめた */
.switcher.mode{margin:0 0 10px}
.switcher .swbtn{display:flex;align-items:center;gap:7px;width:100%;text-align:left;font:inherit;font-size:12.5px;font-weight:400;
  color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:8px;
  padding:6px 10px;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.switcher .swbtn .mi{font-size:16px;opacity:.8}
.switcher .swbtn .swbtn-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.switcher .swbtn .tri{margin-left:auto;opacity:.7}
.switcher .swbtn:hover{background:var(--bg);color:var(--text);border-color:#d5dae4}
/* いまの会社（連結なら 組み方）── サイドバーで いちばん目立たせる。
   名前が長くなっても 切り替えアイコンが ずれないように、横に並べて置く */
.switcher.co{display:flex;align-items:center;gap:6px;margin:0 0 4px}
.switcher .swname{flex:1;min-width:0;display:flex;align-items:flex-start;gap:9px;padding:8px 8px 8px 10px;border-radius:9px;
  font-weight:800;font-size:15px;line-height:1.4;color:var(--navy)}
.switcher .swname .mi{font-size:21px;color:var(--blue);flex:none;margin-top:1px}
.switcher .swname .swname-t{min-width:0;overflow-wrap:anywhere}
.switcher .swname:hover{background:var(--blue-soft);text-decoration:none}
.switcher.co .swico{position:static;flex:none;align-self:center;font:inherit;line-height:1;
  border:1px solid var(--border);background:var(--paper);color:var(--muted);border-radius:8px;padding:6px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.switcher .swico:hover{background:var(--blue-soft);color:var(--blue);border-color:#c7d7fb}
.swmenu{display:none;position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--paper);
  border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(16,24,40,.14);padding:4px;margin-top:2px}
.switcher.open .swmenu{display:block}
.swmenu a{display:block;padding:6px 10px;border-radius:6px;font-size:14px}
.swmenu a:hover{background:var(--blue-soft);text-decoration:none}

/* サイドバーの上位リンク（ダッシュボード・事業計画書） */
.sidebar a.top{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14.5px;padding:9px 12px;
  transition:background .12s,color .12s}
.sidebar a.top .mi{color:var(--muted);font-size:20px;flex:none;transition:color .12s}
.sidebar a.top:hover .mi,.sidebar a.top.on .mi{color:var(--blue)}
.navsec{font-size:12.5px;font-weight:700;color:var(--muted);padding:12px 12px 4px;letter-spacing:.04em}

/* アコーディオン ── 右に □＋（閉じている）／□−（開いている） */
.navgrp{margin:2px 0 0}
.navgrp-h{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font:inherit;font-size:12.5px;font-weight:700;
  letter-spacing:.03em;color:var(--muted);background:none;border:none;border-radius:8px 8px 0 0;
  /* 🔴 開け閉めできると 分かるように、濃い青の 細い 線を 下に 引く（2026-08-26） */
  border-bottom:1px solid var(--blue);
  padding:8px 10px 7px 12px;cursor:pointer;transition:background .12s,color .12s}
.navgrp-h .navgrp-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navgrp-h .mi{flex:none;font-size:17px;color:#c3cad6;transition:color .12s}
.navgrp-h:hover{background:var(--bg);color:var(--text)}
.navgrp-h:hover .mi{color:var(--blue)}
.navgrp .ic-shut{display:none}
.navgrp:not(.open) .ic-open{display:none}
.navgrp:not(.open) .ic-shut{display:inline-flex}
/* 開け閉めを なめらかに（grid の 0fr→1fr） */
.navgrp-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease}
.navgrp.open .navgrp-b{grid-template-rows:1fr}
.navgrp-i{overflow:hidden}
.navgrp-b a{position:relative;margin:1px 0 1px 20px;padding:7px 12px 7px 14px;border-left:1px solid var(--border);border-radius:0 8px 8px 0}
.navgrp-b a:hover{border-left-color:#c7d7fb}
.navgrp-b a.on{border-left-color:var(--blue)}

/* メインコンテンツの並べ方（決めごと）
   ① タイトル h1 → ② 説明文 p.sub → ③ 中身の .card → ④ 画面の いちばん下に 手引き .tip */
/* ⚠️ 🔴 2026-09-02 まで「.cols の 中に 左=コンテンツ ／ 右=説明 .col-side」と 書いていました。
   手引きの 置き場所は【画面の いちばん下】です（2026-08-26 岩崎さんの 指示）。
   .cols / .col-side は まだ 使う 画面が ある ので 残します。 */
/* 見出しの上の 戻り道（パンくず） */
.back{font-size:13px;margin:0 0 6px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.back a{color:var(--muted)}
h1{font-size:21px;margin:0 0 4px}
.sub{color:var(--muted);font-size:13.5px;margin:0 0 16px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.col-main{min-width:0}
.col-side{min-width:0;position:sticky;top:16px}
.col-side .card,.col-side .tip{margin:0 0 14px}
.col-side h2{font-size:14px}
.col-side .tbl th,.col-side .tbl td{white-space:normal}
@media (max-width:1180px){.cols{grid-template-columns:1fr}.col-side{position:static}}

/* 部品 */
.card{background:var(--paper);border:1px solid var(--border);border-radius:10px;padding:16px 18px;margin:0 0 16px;
  overflow-x:auto}   /* 表が はみ出したら 囲みの中で 横に送る */
/* 🔴 中身が【表だけ】の 囲みは 内余白を なくす（2026-08-28 内海さんの指示）
   ── 囲みの 縁と 表の 縁が 二重に 見えるのを やめる。かわりに 薄い 影を 落とす。
   ⚠️ 表の ほかに 見出し・道具の 並び・入力欄が ある 囲みには 付けない */
.card.flush{padding:0;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 6px 16px -6px rgba(16,24,40,.10)}
/* 角は 囲みが 切るので、表の 見出しの 角丸は 消す */
.card.flush .tbl thead th:first-child,.card.flush .tbl thead th:last-child{border-radius:0}
/* いちばん下の 罫線は 囲みの 縁と 重なるので 引かない */
.card.flush .tbl tbody tr:last-child td{border-bottom:none}
/* 表の 下に 置く ひとこと（説明）は 内余白を 戻す */
.card.flush > p{padding:0 16px 14px;margin:12px 0 0}
/* 🔴 1列目だけ 左に 余白を 残す（2026-08-28 内海さんの指示）
   ── 囲みの 内余白を 消したので、名前が 縁に くっついて 見える */
.card.flush .tbl th:first-child,.card.flush .tbl td:first-child{padding-left:15px}

.card h2{font-size:16px;margin:0 0 10px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.toolbar .sp{flex:1}
/* 🔴 ラベル ＋ プルダウン（2026-08-28 内海さんの指示）
   ── いきなり プルダウンだと 何を 選ぶ ところか 分からない */
.fld{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;max-width:100%}  /* SIE-655 ── 狭い 幅では 選択肢を 折り返す（08「狭い 幅でも 横に はみ出さない」） */
.fld > label{font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.fld > .btn + .btn{margin-left:6px}
/* 入れるところ ── うっすら色を敷いて「ここに入れる」と分かるようにする */
select,textarea,input[type=text],input[type=number],input[type=date],input[type=month],input[type=password]{
  font:inherit;padding:6px 9px;border:1px solid var(--field-line);border-radius:7px;background:var(--field);color:var(--text)}
select:focus,textarea:focus,input:focus{outline:2px solid var(--blue);outline-offset:-1px;background:var(--paper)}
input[disabled],select[disabled],input[readonly].ghost{background:var(--bg);border-color:var(--border);color:var(--muted)}

/* ラジオ・チェック ── 同じ色みで揃える */
input[type=radio],input[type=checkbox]{appearance:none;-webkit-appearance:none;margin:0 4px 0 0;
  width:17px;height:17px;flex:none;vertical-align:-3px;cursor:pointer;
  border:1px solid var(--field-line);background:var(--field);transition:background .12s,border-color .12s}
input[type=radio]{border-radius:50%}
input[type=checkbox]{border-radius:5px}
input[type=radio]:hover,input[type=checkbox]:hover{border-color:#a9c4f8}
input[type=radio]:checked,input[type=checkbox]:checked{background:var(--blue);border-color:var(--blue)}
input[type=radio]:checked::after{content:"";display:block;width:7px;height:7px;border-radius:50%;background:#fff;margin:4px auto 0}
input[type=checkbox]:checked::after{content:"";display:block;width:5px;height:9px;margin:1px auto 0;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
input[type=radio]:focus-visible,input[type=checkbox]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
label:has(input[type=radio]),label:has(input[type=checkbox]){display:inline-flex;align-items:center;gap:2px;color:var(--text)}
label{font-size:13.5px;color:var(--muted)}
/* ふつうのボタン ── 色を敷いて 文字は白（白地のボタンは使わない） */
.btn{display:inline-block;font:inherit;font-size:14.5px;font-weight:700;padding:7px 14px;border-radius:8px;
  border:1px solid var(--slate);background:var(--slate);color:#fff;cursor:pointer;transition:background .12s,border-color .12s}
.btn:hover{background:var(--slate-hover);border-color:var(--slate-hover)}
/* ボタンの色は 文字の意味で決める（README の表が正）
   青 = 作る・登録する・送る ／ スレート = 開く・見にいく・直す ／ 緑 = 足す・追加
   橙 = アーカイブ・使わなくする ／ 赤 = 消す・削除・外す ／ 薄グレー = キャンセル・閉じる */
.btn.p{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700}
.btn.p:hover{background:var(--blue-hover);border-color:var(--blue-hover)}
.btn.add{background:var(--green);border-color:var(--green)}
.btn.add:hover{background:#0d6b4d;border-color:#0d6b4d}
.btn.warn{background:var(--warn);border-color:var(--warn)}
.btn.warn:hover{background:#b45309;border-color:#b45309}
.btn.line{background:var(--paper);border-color:var(--blue);color:var(--blue);font-weight:700}
.btn.line:hover{background:var(--blue-soft);border-color:var(--blue)}
.btn.ghost{background:#98a2b3;border-color:#98a2b3}
.btn.ghost:hover{background:#8792a3;border-color:#8792a3}
.btn.danger{background:var(--flag);border-color:var(--flag);color:#fff;font-weight:700}
.btn.danger:hover{background:#b42318;border-color:#b42318}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.s{font-size:13.5px;padding:4px 10px}

.tabs{display:flex;gap:2px;border-bottom:2px solid var(--border);margin:0 0 14px}
.tabs button{font:inherit;font-size:14.5px;padding:8px 16px;border:none;background:none;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px}
.tabs button.on{color:var(--blue);font-weight:700;border-bottom-color:var(--blue)}
/* 🔴 大きい タブ class="tabs big"（2026-08-28 内海さんの指示）
   ── その画面の【主役の 切り替え】のときだけ 使う（事業計画書の PL・BS・CF）。
      ふつうの タブは 上の まま */
.tabs.big{display:inline-flex;gap:4px;border-bottom:none;margin:0 0 18px;
  background:linear-gradient(180deg,#eef1f7,#e7ebf4);
  border:1px solid #dbe1ec;border-radius:14px;padding:5px;
  box-shadow:inset 0 1px 2px rgba(16,24,40,.06)}
.tabs.big button{display:flex;flex-direction:column;align-items:center;gap:1px;
  font-size:19px;font-weight:800;letter-spacing:.08em;line-height:1.15;
  padding:8px 34px 9px;border:none;border-radius:10px;margin:0;color:#8a94a6;
  transition:background .16s,color .16s,box-shadow .16s,transform .12s}
.tabs.big button small{font-size:10.5px;font-weight:700;letter-spacing:.06em;
  opacity:.72;line-height:1.2}
.tabs.big button:hover:not(.on){background:rgba(255,255,255,.72);color:var(--text)}
.tabs.big button:active{transform:translateY(1px)}
.tabs.big button.on{
  background:linear-gradient(180deg,#4b82f3,#2558d6);color:#fff;
  box-shadow:0 2px 5px rgba(37,88,214,.35),0 0 0 1px rgba(37,88,214,.5) inset;
  text-shadow:0 1px 1px rgba(16,24,40,.22)}
.tabs.big button.on small{opacity:.9}
.tabs.big button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* 🔴 主役の 切り替えを 横に 並べる（2026-08-28 内海さんの指示）
   ── 事業計画書は【PL・BS・CF】と【シナリオ】を 同じ 大きさで 並べる */
.switchrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px}
.switchrow .tabs.big{margin:0}
/* シナリオの ほうは 選んだものを 緑に して、表の 切り替えと 見分ける */
.tabs.big.scen button.on{
  background:linear-gradient(180deg,#2f9e75,#12805c);
  box-shadow:0 2px 5px rgba(18,128,92,.32),0 0 0 1px rgba(18,128,92,.5) inset}
/* 🔴 高さは PL・BS・CF と 同じ（2026-08-28 内海さんの指示）── 横だけ すこし 詰める */
.tabs.big.scen button{padding-left:20px;padding-right:20px}
.pane{display:none}
/* 🔴 切り替えたときに すっと 出す（2026-08-28 内海さんの指示） */
.pane.on{display:block;animation:paneIn .24s cubic-bezier(.2,.7,.3,1) both}
@keyframes paneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* 選んだ タブが すこし 跳ねる */
.tabs.big button.on{animation:tabPop .22s cubic-bezier(.2,.8,.3,1)}
@keyframes tabPop{0%{transform:scale(.94)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
/* 🔴 動きが つらい人には 出さない（ブラウザの 設定に 従う） */
@media (prefers-reduced-motion: reduce){
  .pane.on,.tabs.big button.on{animation:none}
}

/* ══ 🔴 表（2026-08-28 内海さんの指示で 全画面に 広げた）════════
   見本と 説明は docs/mockups/table-guide.html。決まりの 正は 08 ファイル構造。
   ⚠️ 罫線は まとめません（separate）── 角丸を 出すため。
      マスごとに【下と 右にだけ】線を 引くので 二重には なりません */
table.tbl{border-collapse:separate;border-spacing:0;width:100%;
  background:var(--paper);font-size:14px;color:var(--t-ink)}
.tbl th,.tbl td{
  border:none;
  border-bottom:1px solid var(--t-line);
  border-right:1px solid var(--t-vline);
  padding:7px 10px;height:34px;text-align:left;white-space:nowrap;vertical-align:middle}
.tbl th:last-child,.tbl td:last-child{border-right:none}
/* 見出し ── どのマスも 同じ 薄いグレー。太字。すべて 中央揃え。両端は 角丸 */
.tbl thead th{background:var(--t-head);color:var(--t-dim);font-weight:700;font-size:12.5px;text-align:center}
.tbl thead th.n{text-align:center}
.tbl thead th:first-child{border-top-left-radius:8px}
.tbl thead th:last-child{border-top-right-radius:8px}
.tbl thead tr + tr th{background:var(--t-head2)}
.tbl thead th .mi{font-size:14px;vertical-align:-3px;margin-right:5px;color:#9b9a97}
.tbl tbody tr:hover td{background:var(--t-hover)}
/* 🔴 金額 ── Inter・桁揃え。9億が 切れない 幅を 確かめてから 使う */
.tbl td.n,.tbl td.in input{
  font-family:"SienaNum",-apple-system,"Segoe UI","Yu Gothic UI",sans-serif;
  font-variant-numeric:tabular-nums;font-size:14px;letter-spacing:.01em}
.tbl th.n{font-variant-numeric:tabular-nums}
.tbl td.n{text-align:right}
.tbl td.yes,.tbl td.no{text-align:center;font-weight:600}
.tbl td.yes{color:var(--green)}
.tbl td.no{color:var(--t-dim);font-weight:400}
.tbl tr.total td{font-weight:600;background:var(--t-sel)}
.tbl tr.total:hover td{background:var(--t-sel)}
.tbl tr.sub td{color:var(--t-dim)}
.tbl td.w{white-space:normal;line-height:1.6}
.tbl td.in{padding:0}
.tbl td.in input{border:none;border-radius:0;width:100%;min-width:88px;text-align:right;
  padding:7px 10px;height:34px;background:transparent;color:var(--t-ink)}
.tbl td.in input:focus{outline:2px solid var(--blue);outline-offset:-2px;background:#fff}
/* 🔴 最初に 入れる 表（開始残高）は 入力欄に 見せる（2026-08-26） */
.tbl td.in.edit input{background:var(--field);border:1px solid var(--field-line);border-radius:5px;
  height:26px;margin:3px 5px;width:calc(100% - 10px);padding:3px 8px}
/* 🔴 金額の 欄は −999,999,999（実測 120px）が 入る 幅。
   件数の 欄（客数など）は 88px の まま ── 広げると 12か月が 1画面に 入らない */
.tbl.money td.in input,.tbl td.in.edit input{min-width:120px}
.tbl td.first{font-weight:500}
.tbl td.first .mi{font-size:15px;vertical-align:-3px;margin-right:6px;color:#9b9a97}

/* ── 🔴 金額の 表 class="tbl money" ── 横の 罫線を 引かない（いちばん下だけ）／
   内訳に 薄い 下地 ／ 合計は 上下に 罫線＋下地で すこし 目立たせる ── */
.tbl.money tbody td{border-bottom:none}
.tbl.money tbody tr:last-child td{border-bottom:1px solid var(--t-line)}
.tbl.money tbody tr.sub td{background:var(--t-sub)}
.tbl.money tbody tr.sub:hover td{background:var(--t-sub2)}
.tbl.money tbody tr.total td{border-top:1px solid var(--t-rule2);border-bottom:1px solid var(--t-rule2);
  background:var(--t-sel);font-weight:700}
.tbl.money tbody tr.total:hover td{background:var(--t-sel)}
/* マイナスは 記号を 残したまま 赤（色だけで 意味を 出さない） */
.neg{color:var(--t-neg)}

/* ── 開け閉めの 印 ── ⚠️ 三角は 字ではなく 線で 描く（字だと 箱の中で 下に ずれる） */
.acc{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;margin-right:8px;vertical-align:-5px;
  color:var(--t-dim);cursor:pointer;border-radius:5px;background:var(--t-acc);border:none;padding:0;
  transition:background .12s,color .12s,transform .12s}
.acc::before{content:"";width:0;height:0;
  border-left:6px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;
  margin-left:2px;transition:transform .15s}
.acc[aria-expanded="true"]::before{transform:rotate(90deg);margin:2px 0 0 0}
.acc:hover{background:var(--t-acc2);color:var(--t-ink)}
.acc:active{transform:scale(.92)}
.acc:focus-visible{outline:2px solid var(--blue);outline-offset:1px}

/* ── 🔴 横に長い表 class="tbl frozen" ── 1列目を 止める。幅は 変えない ──
   ⚠️ 段を 限る。そうしないと 2段の 見出しの【2段目の 1つ目】にも 当たる */
.tbl.frozen thead tr:first-child th:first-child,.tbl.frozen tbody td:first-child{
  position:sticky;left:0;z-index:2;
  width:200px;min-width:200px;max-width:200px;border-right:none}
.tbl.frozen thead tr:first-child th:first-child{z-index:3;background:var(--t-head)}
.tbl.frozen tbody td:first-child{background:var(--paper)}
.tbl.frozen tbody tr.sub td:first-child{background:var(--t-sub)}
.tbl.frozen tbody tr.total td:first-child{background:var(--t-sel)}
.tbl.frozen tbody tr:hover td:first-child{background:var(--t-hover)}
.tbl.frozen tbody tr.total:hover td:first-child{background:var(--t-sel)}
/* 🔴 止めた 境目の 太い 縦線 ── ⚠️ マスの border では【横に すべらせると 消えます】
   （右の マスが 上に 乗るため。border でも 影でも 同じ ── 実測ずみ）。
   だから【マスの 中に 帯を 描く】 */
.tbl.frozen thead tr:first-child th:first-child::after,
.tbl.frozen tbody td:first-child::after{
  content:"";position:absolute;top:0;bottom:0;right:0;width:2px;
  background:var(--t-div);pointer-events:none}

/* ── 横の スクロールバーを 目立たせる ── */
.wrap{overflow-x:auto;scrollbar-width:auto;scrollbar-color:var(--t-bar) var(--t-bar-bg);padding-bottom:2px}
.wrap::-webkit-scrollbar{height:14px}
.wrap::-webkit-scrollbar-track{background:var(--t-bar-bg);border-radius:8px}
.wrap::-webkit-scrollbar-thumb{background:var(--t-bar);border-radius:8px;border:3px solid var(--t-bar-bg)}
.wrap::-webkit-scrollbar-thumb:hover{background:#8b8a86}

/* ── 🔴 月が 横に 並ぶ 表 ── 決算月で 区切って 期ごとに 1段・列幅は 揃える（ふつう 12列。2026-09-01 内海さんの 裁定）
   横に すべらせない（.wrap で 囲まない）。年度が 増えると 段が 下に 増える。
   描くのは mock.js の SIENA.fy ── 1か所。基礎KPI だけは 表が 手書きなので class を 足して 同じ 見た目に */
.fy{margin:0 0 16px}
/* 🔴 月の 見出しの 行を 上に 止める（✅ 内海さんの 裁定 2026-09-05 束113 ──「縦の日付とか固定しないと下にスクロールしたら
   いつの何の話してんのかわからなくなる」）── 月が 横に 並ぶ 表（.fy-tbl）と 横に 長い 表（.frozen）の 全部。
   ⚠️ 止まるのは【送っている 箱】の 中だけ。横に 送る 箱（.wrap ／ .fy-scroll）は 箱の 外の 送りでは 止まらないので、
      箱の 高さを 窓の 70% に して 箱の 中で 送る（基礎KPI と 同じ 作り）。SIENA.fy の 段の 入れもの（.fy-box）も 同じ。
   横に 送る 表の 名前の 列は 左に 止める（.frozen ── 上の 決まりの まま）。角の マスは 上にも 左にも 止める */
.tbl.fy-tbl thead th,.tbl.frozen thead tr:first-child th{position:sticky;top:0;z-index:3;background:var(--t-head)}
.tbl.frozen thead tr:first-child th:first-child{z-index:4}
.wrap:has(.tbl.frozen),.fy-box{max-height:70vh;overflow:auto}
/* 段の 題（2027年3月期）も 上に 止め、見出しの 行は その 下に（束122。⚠️ 束113 では 見出しの 行だけ 止まり、題は 抜けていた） */
.fy-box .fy-h{position:sticky;top:0;z-index:4;background:var(--paper);margin:0;padding:6px 2px;height:30px;box-sizing:border-box}
.fy-box .tbl.fy-tbl thead th{top:30px}   /* .fy-box ＝ SIENA.fy が 描いた 段の 入れもの（.card.flush の overflow:hidden の 中でも 箱の 中なら 止まる） */
.fy-scroll{overflow-x:auto;padding-bottom:2px}   /* 数字が 切れるほど 狭いときだけ 横に すべる（切らない） */
.fy:last-child{margin-bottom:0}
.fy-h{display:flex;align-items:baseline;gap:10px;margin:0 0 6px;padding:0 2px}
.fy-h b{font-size:14px}
.fy-h span{color:var(--muted);font-size:12px}
.card.flush .fy-h{padding:10px 12px 0}
.tbl.fy-tbl{width:100%;table-layout:fixed;font-size:12.5px}
/* 🔴 表の 中の 名前は 1行 ── 収まらなければ 末尾を「…」で 省略。全文は マウスを 乗せると 出る（title）。列を 広げない・2行に しない・別の 場所に 逃がさない（08。✅ 内海さん 2026-09-08 束191）。
   ⚠️ 束188 まで 名前の 欄は 折り返していた（white-space:normal） */
.tbl.fy-tbl th:first-child,.tbl.fy-tbl td:first-child{width:var(--fy-nm,160px);max-width:var(--fy-nm,160px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl.fy-tbl td:first-child span.small{display:block;overflow:hidden;text-overflow:ellipsis}   /* 添え書き（開始残高から など）は 2行目。口（a）は 同じ 行 */
.tbl td.nm,.tbl .ellip{max-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 🔴 名前の 列は 詰まる（ふだん 160px。数字が 入りきらない 幅では 96px まで 詰めて、月の 列に 幅を 譲る
   ── 2026-09-02 岩崎さんの 裁定「名前の列を詰めて収める」）。詰めた 名前は 折り返す ── 省略しない。
   幅を 決めるのは mock.js の fyAll（--fy-nm を 段の 入れもの 1つに 置くので、段どうしの ツラは 揃う）。
   残りの 12列は 等分。基礎KPI の 手書きの 表は --fy-nm が 無いので 160px の まま */
.tbl.fy-tbl th.n,.tbl.fy-tbl td.n,.tbl.money.fy-tbl td.n,.tbl.money.fy-tbl th.n{white-space:nowrap;font-size:12px;padding-left:3px;padding-right:4px}
.tbl.fy-tbl td.in{padding-left:0;padding-right:0}
.tbl.fy-tbl th.fy-none,.tbl.fy-tbl td.fy-none{background:transparent;border-bottom-color:transparent;border-right-color:transparent}  /* 短い 期の 余った 枠 ── 何も 描かない */
.tbl.fy-tbl td.in input,.tbl.money.fy-tbl td.in input{width:100%;min-width:0;font-size:12px;padding-left:3px;padding-right:4px}
/* ⚠️ 8桁の 金額（11,857,143）は 12px で 73px ── 月の 列は 75px 要る。12列で 900px。
   名前の 列を 96px まで 詰めても、表に 渡せる 幅が 996px を 下回る ところでは 12列は 収まらない
   （幅 1366 で 修正メモの 欄を 開くと 673px しか 残らない）。そこは 横に すべる ── 数字は 切らない。
   9億（−999,999,999）は どの 幅でも 入らない ── 08 の「9億が 切れない 幅」との 折り合いは 内海さんの 裁定待ち（2026-09-01） */

/* 🔴 月の 見出しの 見分け（2026-08-28 内海さんの案）
   ── いま どこまでが 済んだ 月かを、見出しだけで 分かるようにする。
   🔴 色だけで 意味を 出さない ── かならず 言葉を 添える（.mstate）
      事業計画書・連結  実績 ／ 今月 ／ 計画
      基礎KPI          過去 ／ 現在 ／ 未来（KPI に 実績の 取り込みは 無いため）
   ⚠️ 今月の 枠は【マスの 内側】に 描く ── 外に 足すと その列だけ 幅が ずれる */
/* 🔴 過ぎた月は 下地を 濃く・字を 薄く ／ これからの月は 下地を 薄く・字を 濃く
   （内海さんの指示 2026-08-28）── 未来に 対して 予測する 仕組みなので、
     過去より【これからの月】が 目立つように する。
   ⚠️ 2026-08-28 の 昼まで 逆でした（過去の 字が 濃く、これからの 字が 薄い） */
.tbl thead th.m-past{background:#e6e6e2;color:#9b9a95;font-weight:600}
.tbl thead th.m-next{background:#fbfbfa;color:#37352f}
.tbl thead th.m-now{background:#eaf0fd;color:#1f4fbf;
  box-shadow:inset 0 0 0 2px var(--blue);border-radius:6px}
.tbl thead th .mstate{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;
  margin-top:1px;opacity:.85}
.tbl thead th.m-now .mstate{opacity:1}
body.dark .tbl thead th.m-past{background:#2b3549;color:#78839a}
body.dark .tbl thead th.m-next{background:#1d2532;color:#e7ecf5}
body.dark .tbl thead th.m-now{background:#1f2c44;color:#9dbcff}

/* ── 表の 中の 札（chip）と 人（who） ── */
.chip{display:inline-block;font-size:12px;line-height:1.7;border-radius:4px;padding:1px 8px;
  font-weight:500;white-space:nowrap}
.chip.gray{background:#e3e2e0;color:#32302c}
.chip.red{background:#ffe2dd;color:#5d1715}
.chip.yellow{background:#fdecc8;color:#402c1b}
.chip.green{background:#dbeddb;color:#1c3829}
.chip.blue{background:#d3e5ef;color:#183347}
.chip .dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;vertical-align:1px}
.chip.gray .dot{background:#91918e}
.chip.blue .dot{background:#337ea9}
.chip.green .dot{background:#448361}
.who{display:inline-flex;align-items:center;gap:6px;font-size:13.5px}
.who .av{width:18px;height:18px;border-radius:50%;background:#e3e2e0;color:#5f5e5b;
  font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}

.badge{display:inline-block;font-size:12.5px;font-weight:700;border-radius:999px;padding:2px 9px}
.badge.flag{background:var(--flag-soft);color:var(--flag)}
/* 欠品・不足の 添え書き ── 月末在庫の 0 の 下に（−N）。小さく、うるさくない 赤（内海さん 2026-09-09 束219） */
.lack{display:block;font-size:10.5px;line-height:1.25;font-weight:500;color:#b5645c;margin-top:1px}
/* 発注の 印 ── 発注が 要る 月の 月末在庫の セル（束220）。小さな 印（未発注 ／ 発注済）。押すと 発注の 小窓 */
/* 🔴 印は セルの 右上に、通知の 印のように（✅ 内海さん 2026-09-09 束225「セル内に収めることに拘らず、セルの右上にちょこんと通知バッジみたいに」）── 数の 並びを 崩さない */
.tbl td:has(> .badge.tiny),.tbl td.hasb{position:relative}
/* 🔴 印は セルの 右上（内海さん 2026-09-09「右上に戻して」）── 印を 持つ セルは 上に 余白を 取り、印が 数字と 重ならないように する。行は その分だけ 少し 高くなる */
/* 印の 文字は 10.5px ── 9px だと 潰れて 読めなかった（内海さん 2026-09-09「バッジ自体をもう少し大きくしてみるとか？」） */
/* 🔴 セルの 外 ── 右上の 角に またがる 通知の 印（内海さん 2026-09-09「セルから外して」）。セルの 余白は 変えない ── 数字の 位置は 動かない */
/* z-index は 月の 見出し（sticky・3）より 上に ── 最初の 行の 印が 見出しに 隠れて 潰れていた（内海さん 2026-09-09「日付行につぶされてる？」） */
.badge.tiny{position:absolute;top:-9px;right:-1px;z-index:5;margin:0;font-size:10.5px;padding:1px 7px;line-height:1.35;font-weight:600;cursor:pointer;background:var(--paper);white-space:nowrap;box-shadow:0 0 0 1px var(--paper)}
.badge.flag.tiny{color:#b5645c;border:1px solid #e6cbc6}
.badge.ok.tiny{color:#4f8a5b;border:1px solid #cfe3d3}
td.cell-order{background:var(--warn-soft)}
/* ── 🔴 月の 表の「内容」の 列（束225 ── ソフトウェア仮勘定の 表に 倣う）── 名前の 列の 右に 止める。品目ごとの 区切りは 太い 線（tr.g1） */
.tbl.fy-tbl.fy-it th:nth-child(2),.tbl.fy-tbl.fy-it td:nth-child(2){position:sticky;left:var(--fy-nm,160px);z-index:2;width:96px;min-width:96px;max-width:96px;background:var(--paper);white-space:nowrap;font-size:12px;color:var(--t-dim);overflow:hidden;text-overflow:ellipsis}
.tbl.fy-tbl.fy-it thead th:nth-child(2){z-index:3;background:var(--t-head);color:var(--t-dim)}
.tbl.fy-tbl.fy-it tbody tr.sub td:nth-child(2){background:var(--t-sub)}
.tbl.fy-tbl.fy-it tbody tr.total td:nth-child(2){background:var(--t-sel);color:var(--text)}
.tbl.fy-tbl.fy-it tbody tr:hover td:nth-child(2){background:var(--t-hover)}
.tbl.fy-tbl.fy-it tbody tr.total:hover td:nth-child(2){background:var(--t-sel)}
.tbl.fy-tbl.fy-it thead tr:first-child th:first-child::after,.tbl.fy-tbl.fy-it tbody td:first-child::after{display:none}
.tbl.fy-tbl.fy-it thead tr:first-child th:nth-child(2)::after,.tbl.fy-tbl.fy-it tbody td:nth-child(2)::after{content:"";position:absolute;top:0;bottom:0;right:0;width:2px;background:var(--t-div);pointer-events:none}
.tbl tbody tr.g1 td{border-top:2px solid var(--t-rule2)}
.tbl.fy-tbl.fy-it tbody td.it b{color:var(--text)}
/* 一覧の 横の 罫線（固定資産の 一覧など ── 内海さん 2026-09-09「罫線も無くて非常に見づらい」）── money の 表でも 行ごとに 線を 引く */
.tbl.money.lines tbody td{border-bottom:1px solid var(--t-line)}
body.dark .lack{color:#d9948c}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.fy-tbl .badge[data-overrun]{display:block;width:max-content;box-sizing:border-box;text-align:left}
.fy-tbl .badge[data-overrun]>span{display:block;white-space:nowrap}
.badge.ok{background:var(--green-soft);color:var(--green)}
.badge.dim{background:var(--bg);color:var(--muted)}

/* ようこそボード ── はじめの支度が 済むまで ダッシュボードの一番上に出る */
.welcome{border-color:#c7d7fb;background:var(--blue-soft);counter-reset:t}
/* ようこそボードの中は 束が2つでも 番号を通しで振る（1〜8） */
.welcome .todo{counter-reset:none}
.wel-h{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin:0 0 14px}
.wel-h .sp{flex:1}
.welcome h2{display:flex;align-items:center;gap:8px;margin:0 0 2px}
.welcome h2 .mi{color:var(--warn)}
.wel-g{min-width:150px}
.wel-sec{background:var(--paper);border:1px solid var(--border);border-radius:9px;padding:13px 15px;margin:0 0 12px}
.wel-sec h3{display:flex;align-items:center;gap:7px;font-size:14px;margin:0 0 6px}
.wel-sec h3 .mi{color:var(--muted)}
.wel-warn{background:var(--warn-soft);border:1px solid #fbdba7;border-radius:8px;
  padding:9px 12px;font-size:13.5px;margin:0 0 10px}

/* 困ったときは ── 右下のヘルプへの 案内。3つ横に並べる */
.help3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.h3i{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);
  border-radius:9px;padding:12px 14px;cursor:pointer;text-decoration:none}
.h3i:hover{background:var(--blue-soft);border-color:#c7d7fb;text-decoration:none}
.h3i .mi{color:var(--blue);margin:0 0 4px}
.h3i b{font-size:14px}
@media (max-width:900px){.help3{grid-template-columns:1fr}}

/* 順番に片づける一覧 ── 済んだものは ✓、まだのものは 番号 */
.todo{list-style:none;counter-reset:t;margin:0;padding:0}
.todo li{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--border)}
.todo li:first-child{border-top:none}
.todo .no{counter-increment:t;flex:none;width:24px;height:24px;border-radius:999px;
  background:var(--bg);border:1px solid var(--border);color:var(--muted);
  font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.todo .no::before{content:counter(t)}
.todo li.done .no{background:var(--green-soft);border-color:#a6e6c8;color:var(--green)}
.todo li.done .no::before{content:"✓"}
.todo li.now .no{background:var(--blue);border-color:var(--blue);color:#fff}
.todo .t{flex:1;min-width:0;font-size:14.5px;font-weight:700}
.todo li.done .t{font-weight:400;color:var(--muted)}
.todo .t span{display:block;font-size:12.5px;font-weight:400;color:var(--muted)}
.todo .t .mk{display:inline-block;font-size:10px;font-weight:400}
.todo li > .btn,.todo li > .badge{flex:none}
@media (max-width:700px){.todo li{align-items:flex-start;flex-wrap:wrap}}

/* 表の中の 鍵・つなぎ先など、そのまま写す文字 */
.mono-in{font-family:Consolas,"BIZ UDGothic",monospace;font-size:13px;color:var(--muted);
  background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:2px 7px;white-space:nowrap}

/* 行き先だけが並ぶ 一覧（マニュアルの目次など） */
.lnk{list-style:none;margin:0;padding:0}
.lnk li{border-top:1px solid var(--border)}
.lnk li:first-child{border-top:none}
.lnk a{display:block;padding:8px 0;font-size:14px}

/* 使っている量（人数など）を 上限と並べて 見せる帯 */
.gauge{height:10px;border-radius:999px;background:var(--border);overflow:hidden;margin:8px 0 6px}
.gauge i{display:block;height:100%;background:var(--blue);border-radius:999px}
.gauge.near i{background:var(--warn)}
.gauge-n{display:flex;align-items:baseline;gap:8px}
.gauge-n b{font-size:22px;line-height:1.2}

.danger-box{border-color:#fecdca}
.danger-box h2{color:var(--flag)}
.note{background:var(--warn-soft);border:1px solid #fedf89;border-radius:8px;padding:10px 14px;font-size:14px;margin:0 0 14px}
.confirm{background:var(--flag-soft);border:1px solid #fecdca;border-radius:8px;padding:12px 14px;font-size:14px;margin:0 0 14px}
/* 入れ違いの欄 ── 赤枠にして 下に一行出す */
input.ng,select.ng,textarea.ng{border-color:var(--flag);background:var(--flag-soft)}
input.ng:focus,select.ng:focus,textarea.ng:focus{outline-color:var(--flag)}
.ng-msg{display:flex;align-items:center;gap:5px;color:var(--flag);font-size:13px;margin:4px 0 0}
.ng-msg .mi{font-size:16px}
.err{display:none;background:var(--flag-soft);border:1px solid #fecdca;border-radius:8px;
  padding:8px 12px;font-size:13px;color:var(--flag);margin:10px 0 14px}
.err.on{display:block}
.okbox{background:var(--green-soft);border:1px solid #a6f4c5;border-radius:8px;padding:10px 14px;font-size:14px;margin:0 0 14px}

/* 読み込み中 ── 小窓の中や 表の上に出す */
.spin{display:inline-block;width:26px;height:26px;border-radius:50%;
  border:3px solid var(--border);border-top-color:var(--blue);animation:spin .8s linear infinite}
.spin.s{width:17px;height:17px;border-width:2px}
@keyframes spin{to{transform:rotate(360deg)}}
.loadbox{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:34px 0;color:var(--muted);font-size:14px}
.loadline{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}

/* 画面ぜんぶを覆う 読み込み中 ── 送信・切り替えのあいだ 触らせない */
/* 🔴 印の ついた 画面を 開いたときの 枠 ── 題の 上に 出す（2026-08-26 の 指示） */
.firstbox{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;padding:12px 14px;
  border-radius:10px;font-size:13.5px;line-height:1.7}
.firstbox b.h{display:block}
.firstbox.need{background:var(--flag-soft);border:1px solid #fecdca;color:#7a271a}
.firstbox.need b.h{color:var(--flag)}
.firstbox.rec{background:var(--warn-soft);border:1px solid #fde68a;color:#7c4a03}
.firstbox.rec b.h{color:var(--warn)}
.firstbox .mk{margin:3px 0 0}

/* 🔴 はじめての ときに 出す 印（2026-08-26）
   ● 赤丸 ＝ かならず 入れる ／ ▲ 黄三角 ＝ 入れた ほうが よい */
.mk{display:inline-block;margin-left:6px;font-size:10px;line-height:1;vertical-align:1px;
  font-family:"Hiragino Sans","Yu Gothic UI",sans-serif}
.mk.need{color:var(--flag)}
.mk.rec{color:var(--warn);font-size:9px}
.navgrp-h .mk{margin-left:5px}
.legend{display:inline-flex;align-items:center;gap:14px;font-size:12px;color:var(--muted)}
.legend b{font-weight:700;color:var(--text)}

/* 🔴 画面が 変わるとき ── 覆わない。上に 細い 帯が 走るだけ（2026-08-26） */
.pageload{position:fixed;top:0;left:0;height:3px;width:8%;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,var(--blue),#7ea6f8);
  box-shadow:0 0 10px rgba(47,107,237,.5);border-radius:0 3px 3px 0;
  transition:width .5s cubic-bezier(.2,.7,.3,1),opacity .3s ease}
.pageload.go{width:78%}
.pageload.done{width:100%;opacity:0;transition:width .18s linear,opacity .3s ease .12s}
body.pageloading{cursor:progress}
body.pageloading .main{opacity:.68;transition:opacity .35s ease}
@media (prefers-reduced-motion:reduce){
  .pageload{transition:opacity .2s ease}.pageload.go{width:78%}
  body.pageloading .main{opacity:1;transition:none}
}
.overlay.busy{align-items:center;justify-content:center;background:rgba(16,24,40,.35)}
.busybox{background:var(--paper);border-radius:12px;padding:28px 36px;min-width:250px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  box-shadow:0 20px 60px rgba(16,24,40,.3);color:var(--text);font-size:14px;text-align:center}
.busybox .spin{width:30px;height:30px;border-width:3px}
.busybox .sub2{color:var(--muted);font-size:12.5px}

/* モーダル */
.overlay{display:none;position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:40;align-items:flex-start;justify-content:center;padding:6vh 16px}
.overlay.open{display:flex}
.modal{background:var(--paper);border-radius:12px;max-width:860px;width:100%;max-height:86vh;overflow:auto;box-shadow:0 20px 60px rgba(16,24,40,.3)}
.modal .mh{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border)}
.modal .mh h3{font-size:16px;margin:0;flex:1}
.modal .mh button{font-size:19px;border:none;background:none;cursor:pointer;color:var(--muted)}
.modal .mb{padding:16px 18px}
/* SIE-672/673 ── 小窓の 中身が 窓から はみ出さない（08「狭い 幅でも 横に はみ出さない」）。
   ① .frm に 直に 置いた input・select（width:340px など）も 列の 幅に 収める
   ② 小窓の 中の 表は 表だけが 横に すべる（.wrap と 同じ）── 窓全体や 画面を 横に 広げない
   ③ 表の 見出しは 折り返してよい（振替伝票の 明細の 見出しが 重なる） */
.modal .frm{grid-template-columns:170px minmax(0,1fr)}  /* 1fr は 中身（width:340px の 欄）より 縮まない ── minmax(0,1fr) で 縮める */
.modal .frm>*{min-width:0}
.modal .frm>input,.modal .frm>select,.modal .frm>textarea{max-width:100%;box-sizing:border-box}
.modal .frm>div>select,.modal .frm>div>input,.modal .frm>div>textarea{max-width:100%;box-sizing:border-box}
.modal .ympick{flex-wrap:wrap;max-width:100%}
.modal .ympick .ym-y,.modal .ympick .ym-m{max-width:100%}
.modal .mb .wrap{min-width:0;max-width:100%}
.modal .mb{min-width:0}
.modal table.tbl thead th{white-space:normal}
.modal .mf{padding:12px 18px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}
/* 小窓のボタンの並び ── 左に「キャンセル／閉じる」、右に実行するボタン（2026-09-02 岩崎さんの指示） */
.modal .mf .lft{margin-right:auto}
/* 開始残高は本文だけをスクロールし、操作欄を窓内へ残す。 */
.modal.opening-modal{display:flex;flex-direction:column;overflow:hidden}
.opening-modal>.mh,.opening-modal>.mf,.opening-modal>form>.mf{flex:none}
.opening-modal>form{display:flex;flex-direction:column;min-height:0;overflow:hidden;margin:0}
.opening-modal>.mb,.opening-modal>form>.mb{min-height:0;overflow:auto}
.opening-modal .mf{flex-wrap:wrap}
/* 画面の中（小窓の外）の ボタンの並びも 同じ（2026-09-02 岩崎さんの指示「こちらすべてに対して適用したい」） */
.acts{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin:14px 0 0}
.acts .lft{margin-right:auto}
/* 🔴 年・月の プルダウン（2026-09-02 岩崎さんの 指示「入力の揺れをなくしたい」） */
.ympick{display:inline-flex;gap:6px;align-items:center}
.ympick select{min-width:0}
.ympick .ym-y{width:84px}
.ympick .ym-m{width:72px}

.frm{display:grid;grid-template-columns:170px 1fr;gap:10px 14px;align-items:center}
.frm>div{min-width:0}  /* SIE-656 ── 欄の 列は 中身より 縮める。select・input は 列の 幅に 収める（08「狭い 幅でも 横に はみ出さない」） */
.frm>div>select,.frm>div>input{max-width:100%}
.frm .full{grid-column:1/-1}

.mono{font-family:Consolas,"BIZ UDGothic",monospace;font-size:13.5px;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 14px;white-space:pre-wrap}
.muted{color:var(--muted)}
.small{font-size:13px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.kpi-num{font-size:25px;font-weight:800;font-variant-numeric:tabular-nums}
.tree{list-style:none;padding:0;margin:0}
.tree li{padding:5px 8px;border-radius:6px;cursor:pointer}
.tree li.on{background:var(--blue-soft);color:var(--blue);font-weight:700}
.tree .lv1{padding-left:22px}
.tree .lv2{padding-left:40px}
.fold{cursor:pointer;user-select:none}
.fold .tri{display:inline-block;width:14px;transition:transform .1s}
.fold.open .tri{transform:rotate(90deg)}
/* 説明・Tips の囲み（本文の表と見分けがつく色） */
.tip{background:var(--blue-soft);border:1px solid #c7d7fb;border-radius:10px;padding:14px 16px;margin:0 0 16px;overflow-x:auto}
/* 🔴 説明の 題は 青（2026-08-28 内海さんの指示。スタイルガイドの .tip に 合わせた） */
.tip h2{color:var(--blue);font-size:15px;margin:0 0 8px}
.tip > b:first-child{color:var(--blue);font-size:15px;display:block;margin:0 0 8px}
.tip h2{font-size:15px;margin:0 0 8px;color:var(--blue)}
.tip .tbl{background:transparent}
.tip .tbl th{background:#e3ecfd}

/* フッター ── 全画面に置く */
.foot{background:transparent;padding:1px 2px;margin:12px 0 0;min-height:17px;
  display:flex;gap:2px 18px;flex-wrap:wrap;align-items:center;line-height:1.15;font-size:13px;color:var(--muted)}
.foot .mi{font-size:14px}
.foot .foot-links{display:flex;gap:14px;flex-wrap:wrap}
.foot a{color:var(--muted)}
.foot .foot-copy{margin-left:auto}
body > .foot{background:transparent;padding:1px 22px;margin:auto 0 20px}

/* だれとして登録するのか（オーナー／招待）を 見せる帯 */
.whois{display:flex;align-items:flex-start;gap:10px;background:var(--green-soft);border:1px solid #a6f4c5;
  border-radius:9px;padding:11px 13px;margin:0 0 14px;font-size:13.5px;line-height:1.5}
.whois.invited{background:var(--warn-soft);border-color:#fedf89}
.whois .badge{flex:none;margin-top:2px}
.steps{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--muted);
  font-size:12.5px;margin:-8px 0 14px}
.steps b{color:var(--blue)}
.steps .mi{color:var(--border)}

/* ログイン系（枠の外にフッターを出す画面） */
.authpage{max-width:420px;width:100%;margin:5vh auto 32px;flex:none}
.authpage .legal{text-align:center;margin:14px 0 0}
.authpage .frm{grid-template-columns:1fr;gap:2px}
.authpage .frm input{width:100%}
.authpage .frm label{margin:8px 0 0}
.authpage .brand-big{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 4px}
.authpage .brand-big img{height:44px;width:auto}
.authpage .brand-big span{font-size:25px;font-weight:800;color:var(--navy)}
.sso{display:flex;flex-direction:column;gap:8px}
.sso a{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;border-radius:8px;
  border:1px solid var(--border);background:var(--paper);color:var(--text);font-size:14.5px;font-weight:700}
.sso a:hover{background:var(--bg);text-decoration:none}
.sso .g-ico,.sso .l-ico{width:18px;height:18px;border-radius:4px;display:inline-block;flex:none}
.sso .l-ico{background:#06c755;color:#fff;font-size:12px;font-weight:800;text-align:center;line-height:18px}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin:14px 0}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--border)}


/* 🔴 金額の 字形 ── Google Fonts の Inter を【数字と 記号だけ】同梱（外部を読まない）。
   入っているのは 0〜9 と , . − - ¥ ( ) % だけ。日本語は 入っていない。
   ⚠️ かならず font-variant-numeric:tabular-nums と 一緒に 使う（付けないと 桁が ずれる） */
@font-face{
  font-family:"SienaNum";
  font-weight:400 700;font-style:normal;font-display:swap;
  src:url("num-inter.e8d5f62a2200.woff2") format("woff2");
}

/* アイコンフォント ── Material Symbols Rounded を「使う字だけ」同梱（外部を読まない）。
   使い方: <span class="mi">settings</span> */
@font-face{
  font-family:"Material Symbols Rounded";
  font-style:normal;font-weight:400;font-display:block;
  src:url("material-symbols.2ad48be24909.woff2?v=9") format("woff2");
}
.mi{font-family:"Material Symbols Rounded";font-weight:400;font-style:normal;font-size:19px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  white-space:nowrap;word-wrap:normal;direction:ltr;
  -webkit-font-feature-settings:"liga";font-feature-settings:"liga";-webkit-font-smoothing:antialiased;user-select:none}
.mi.s{font-size:17px}
.mi.l{font-size:23px}
/* ボタン・リンクの中では アイコンと字を 上下中央でならべる */
.btn:has(.mi),.sso a,.swbtn,.swico,.navgrp-h,.memo-tab,.memo-h button,.memo-it button,.foot-links a{display:inline-flex;align-items:center;gap:6px}
.btn:has(.mi){justify-content:center}

/* 箇所を選んでいるあいだ */
body.picking, body.picking *{cursor:crosshair !important}
body.picking .memo, body.picking .memo *{cursor:auto !important}
.pick-hit{outline:2px solid var(--flag) !important;outline-offset:1px;background:var(--flag-soft) !important}
.memo-spot{display:flex;align-items:center;gap:6px;margin:0 0 8px;flex-wrap:wrap}
.memo-spot .spot-t{flex:1;min-width:0;font-size:12.5px;color:var(--muted);
  background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:5px 9px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.memo-spot .spot-t.on{color:var(--flag);border-color:#fecdca;background:var(--flag-soft);font-weight:700}
.memo-it .spot{display:block;font-size:11.5px;color:var(--flag);font-weight:700;margin:0 0 2px}

/* 右下のヘルプ ── どの画面にも出る。マニュアル ／ チャット ／ お問い合わせ */
.helpfab{position:fixed;right:22px;bottom:22px;z-index:50;display:inline-flex;align-items:center;gap:7px;
  font:inherit;font-size:14px;font-weight:700;color:#fff;background:var(--blue);
  border:none;border-radius:999px;padding:11px 18px 11px 15px;cursor:pointer;
  box-shadow:0 6px 20px rgba(47,107,237,.35)}
.helpfab:hover{background:#2559cf}
.helpfab .mi{font-size:21px}
body.help-open .helpfab .helpfab-t{display:none}
body.help-open .helpfab{padding:11px 13px}
body.memo-open .helpfab{right:362px}
.helppanel{position:fixed;right:22px;bottom:78px;z-index:51;width:330px;max-width:calc(100vw - 44px);
  background:var(--paper);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 14px 40px rgba(16,24,40,.18);overflow:hidden;
  display:none;flex-direction:column;max-height:min(560px,calc(100vh - 110px))}
body.help-open .helppanel{display:flex}
body.memo-open .helppanel{right:362px}
.help-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border)}
.help-h h3{font-size:15px;margin:0;flex:1}
.help-h button{font:inherit;border:none;background:none;cursor:pointer;color:var(--muted);padding:2px;line-height:1}
.help-menu{padding:8px;overflow-y:auto}
body.help-chat .help-menu{display:none}
.help-it{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  font:inherit;color:var(--text);background:none;border:none;border-radius:9px;
  padding:11px 12px;cursor:pointer;text-decoration:none}
.help-it:hover{background:var(--blue-soft);text-decoration:none}
.help-it > .mi{color:var(--blue);flex:none}
.help-it .mi.s{color:var(--muted);margin-left:auto;flex:none}
.help-t{display:flex;flex-direction:column;min-width:0}
.help-t b{font-size:14px}
.help-t span{font-size:12.5px;color:var(--muted)}
/* 🔴 body に付ける印は help-chat、枠そのものは help-chatbox。
   同じ名前にすると body 自身に当たって 画面が消える（2026-08-25 に やらかした） */
.help-chatbox{display:none;flex-direction:column;min-height:0;flex:1}
body.help-chat .help-chatbox{display:flex}
.help-back{padding:8px 10px 0}
.help-back button{font:inherit;font-size:12.5px;color:var(--muted);background:none;border:none;
  cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:2px}
.help-log{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.help-log p{margin:0;display:flex}
.help-log p span{font-size:13.5px;line-height:1.55;border-radius:12px;padding:8px 11px;max-width:88%}
.help-log p.bot span{background:var(--bg);border:1px solid var(--border)}
.help-log p.me{justify-content:flex-end}
.help-log p.me span{background:var(--blue);color:#fff}
.help-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0}
.help-chips .chip{font:inherit;font-size:12.5px;color:var(--blue);background:var(--paper);
  border:1px solid #c7d7fb;border-radius:999px;padding:5px 11px;cursor:pointer}
.help-chips .chip:hover{background:var(--blue-soft)}
.help-say{display:flex;gap:6px;padding:8px 12px;border-top:1px solid var(--border)}
.help-say input{flex:1;min-width:0;font:inherit;font-size:13.5px;padding:8px 10px;
  border:1px solid var(--field-line);border-radius:8px;background:var(--field)}
.help-note{margin:0;padding:0 12px 10px;font-size:12px;color:var(--muted)}
body.help-chat .help-f{display:none}
.help-f{padding:9px 14px;border-top:1px solid var(--border);background:var(--bg);
  font-size:12px;color:var(--muted)}
@media print{.helpfab,.helppanel{display:none}}

/* 右サイドバー ── 画面をまたいで残る 修正メモ（PC 前提。DEV 用の道具） */
.memo{position:fixed;top:0;right:0;bottom:0;width:340px;z-index:60;background:var(--paper);
  /* DEV の道具なので 中だけ 暗くする */
  --paper:#1b2231; --bg:#141922; --border:#2c3547; --text:#e7ecf5; --muted:#98a3b8;
  --blue:#7aa5ff; --blue-soft:#1f2c44; --field:#222b3c; --field-line:#36415a;
  --flag:#f08074; --flag-soft:#33201d; --slate:#41506d; --slate-hover:#4d5e7f;
  color:var(--text);
  border-left:1px solid var(--border);box-shadow:-8px 0 28px rgba(16,24,40,.10);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .16s ease}
body.memo-open{padding-right:340px}
body.memo-open .memo{transform:none}
.memo-tab{position:fixed;top:50%;transform:translateY(-50%);right:0;z-index:61;display:flex;align-items:center;gap:6px;
  font:inherit;font-size:13.5px;font-weight:700;color:#fff;background:var(--navy);
  border:none;border-radius:8px 0 0 8px;padding:9px 12px 9px 10px;cursor:pointer;box-shadow:0 4px 14px rgba(16,24,40,.2)}
.memo-tab:hover{background:#2b3852}
body.memo-open .memo-tab{right:340px}
.memo-tab .cnt{background:var(--warn);border-radius:999px;padding:0 6px;font-size:12px;min-width:18px;text-align:center}
.memo-tab .cnt:empty{display:none}
.memo-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border)}
.memo-h h3{font-size:15px;margin:0;flex:1}
.memo-h button{font:inherit;border:none;background:none;cursor:pointer;color:var(--muted);padding:2px}
.memo-now{padding:10px 14px 0;font-size:12.5px;color:var(--muted);word-break:break-all}
.memo-in{padding:8px 14px 12px;border-bottom:1px solid var(--border)}
.memo-in textarea{width:100%;height:84px;font:inherit;font-size:14px;padding:8px 10px;resize:vertical;
  border:1px solid var(--border);border-radius:8px;background:var(--paper);color:var(--text)}
.memo-in textarea:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.memo-list{flex:1;overflow:auto;padding:6px 14px 14px}
.memo-grp{margin:10px 0 0}
.memo-grp h4{font-size:12.5px;margin:0 0 4px;color:var(--muted);font-weight:700;word-break:break-all}
.memo-grp.here h4{color:var(--blue)}
.memo-it{display:flex;gap:6px;align-items:flex-start;font-size:14px;padding:6px 8px;border-radius:8px;background:var(--bg);margin:0 0 4px}
.memo-it p{margin:0;flex:1;white-space:pre-wrap;word-break:break-word}
.memo-it button{border:none;background:none;cursor:pointer;color:var(--muted);padding:0;line-height:1}
.memo-it button:hover{color:var(--flag)}
.memo-f{border-top:1px solid var(--border);padding:10px 14px;display:flex;gap:8px;align-items:center}
.memo-f .sp{flex:1}
.memo-empty{color:var(--muted);font-size:13.5px;padding:14px 0}
.memo-md{width:100%;height:0;opacity:0;position:absolute;pointer-events:none}

/* 暗いメモの中の 見た目の調整 */
.memo h3{color:var(--text)}
.memo .btn{border-color:var(--slate)}
.memo textarea{color:var(--text)}
.memo .memo-grp h4{color:var(--muted)}
.memo .memo-grp.here h4{color:var(--blue)}
.memo-it{background:var(--bg);color:var(--text)}
@media print{.memo,.memo-tab{display:none}body.memo-open{padding-right:0}}



/* 開発資料（モック一覧）だけ 暗い地色にする。製品の画面では使わない */
body.dark{
  --text:#e7ecf5; --muted:#98a3b8;
  --bg:#141922; --paper:#1b2231; --border:#2c3547;
  --blue:#7aa5ff; --blue-hover:#8fb4ff; --blue-soft:#1f2c44;
  --field:#222b3c; --field-line:#36415a;
  --green:#5fd39b; --green-soft:#16311f;
  --warn:#e0a44a; --warn-soft:#332612;
  --flag:#f08074; --flag-soft:#33201d;
  --slate:#41506d; --slate-hover:#4d5e7f;
}
body.dark h1,body.dark h2,body.dark h3,body.dark b{color:var(--text)}
body.dark .tip{border-color:#2f4570}
body.dark .note{border-color:#4a3a16}
body.dark .confirm{border-color:#4a2521}
body.dark .okbox{border-color:#1d4b30}
body.dark .sw{border-color:#3a465c}
body.dark .tbl tr.total td{background:#22314c}
/* 🔴 表の 色も 暗い地色に 合わせる（2026-08-28）
   ⚠️ ここを 足し忘れていて、モック一覧の 表が【暗い地に 暗い字】で 読めませんでした */
body.dark{
  --t-line:#2c3547; --t-vline:#252d3d;
  --t-head:#222b3c; --t-head2:#2a3448;
  --t-ink:#e7ecf5; --t-dim:#98a3b8;
  --t-hover:#212a3a; --t-sel:#22314c;
  --t-neg:#f08074;
  --t-sub:#1e2635; --t-sub2:#232c3d;
  --t-rule2:#3a465c;
  --t-div:#48566f;
  --t-acc:#2c3547; --t-acc2:#3a465c;
  --t-bar:#4a5670; --t-bar-bg:#222b3c;
}

/* スタイルガイドの 見本 */
.sw{display:inline-block;width:44px;height:22px;border-radius:5px;border:1px solid var(--border)}
.icons{display:flex;flex-wrap:wrap;gap:10px 14px;margin:0}
.icons span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);
  background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:5px 9px}
.icons span .mi{color:var(--navy);font-size:19px}
code{background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:1px 5px;font-size:13px;
  font-family:Consolas,"BIZ UDGothic",monospace}

/* 規約・ポリシーなどの 読みもの画面 */
.docbar{background:var(--paper);border-bottom:1px solid var(--border);padding:12px 22px;display:flex;align-items:center}
.docbar .brand{display:inline-flex;align-items:center}
.doc{max-width:820px;margin:0 auto}
.doc h2{font-size:16px;margin:28px 0 8px;padding:0 0 6px;border-bottom:1px solid var(--border)}
.doc h2:first-of-type{margin-top:16px}
.doc p{margin:0 0 10px}
.doc ol,.doc ul{margin:0 0 10px;padding-left:1.4em}
.doc li{margin:0 0 4px}
.doc .date{color:var(--muted);font-size:13px}

@media (max-width:900px){.app{display:block}.sidebar{width:auto;position:static}.grid2,.grid3{grid-template-columns:1fr}.foot .foot-copy{margin-left:0}
  body.memo-open{padding-right:0}.memo{width:min(340px,86vw)}body.memo-open .memo-tab{right:min(340px,86vw)}}

/* 🔴 狭い 幅（岩崎さんの 裁定 2026-09-03 ── 2つとも 直す）
   2026-09-03 の 通し点検（68枚 × 幅3つ ＝ 204通り）で、390px で 56枚が 横に はみ出していた。
   🔴 原因は 2つ だけ ──
     ① ヘッダーが 折り返さない  49枚。全部 きっちり +127px（ログアウトが 画面の 外）
     ② 本文の 枠が 縮まない      7枚。max-width を 持った main が body の 直下に あり、
        margin:0 auto の せいで 中身の 幅（1100px など）の まま 固まっていた
        ⚠️ 同じ 形が ほかに 11枚 あり、中身が 狭いので 表に 出ていないだけ だった
   ⚠️ ここで やるのは【横に はみ出さない】ところまで。スマホ用に 作り替えは しない
      （表が 横に すべるのは いままでどおり ── 08「収まるなら すべらせない、切れるときだけ すべる」）*/

/* ② 本文の 枠 ── 画面より 広く ならない
   🔴 body は 縦並びの 箱で、main に margin:0 auto が 付いていると
      中身の 幅（1100px など）の まま 固まり、狭い 画面から はみ出す。
      width:100% を 与えると、狭いときは 画面の 幅・広いときは max-width が 効く。
   ⚠️ 枠の 指定は 画面の 中に 直に 書いてあるので、max-width:100% では 勝てない */
.main:not(.authpage){max-width:100%}  /* ログイン系（.authpage）は 420px の まま ── 2026-09-16 岩崎さん「MAXの横幅を決めてほしい」 */
body > .main{width:100%;box-sizing:border-box}

@media (max-width:700px){
  /* 狭い列では指定した上限と列幅の小さい方に収める。通常幅の欄は引き伸ばさない。 */
  .modal .frm>div>select,.modal .frm>div>input,.modal .frm>div>textarea{width:100%}
  /* ① ヘッダー ── 折り返す。詰め物（.sp）は 折り返すと 邪魔なので 高さを 持たせない */
  .topbar{flex-wrap:wrap;gap:8px 12px;padding:10px 14px}
  .topbar .sp{flex:0 0 100%;height:0}
  .topbar a,.topbar .badge,.topbar .plan,.topbar .acct{white-space:nowrap}
  /* 本文の 余白を 詰める ── 横幅を 中身に 回す */
  .main{padding:14px 12px}
}

/* 🔴 業種テンプレートが入れた「仮の数字」(2026-08-28 の指示)
   ── 触ったら 普通の数字になる。件数は 出さない(印だけ) */
.req{display:inline-block;font-size:11px;font-weight:700;color:var(--flag);background:var(--flag-soft);
  border:1px solid #fecdca;border-radius:999px;padding:0 7px;vertical-align:1px}
.btn.disabled{opacity:.45;pointer-events:none}
.tmpl-sample{color:#c4736c;font-style:italic;font-weight:700}
td.in input.tmpl{color:#c4736c;font-style:italic}
td.auto.tmpl{color:#c4736c;font-style:italic}

/* 🔴 契約の 状態（2026-09-01 岩崎さんの 指示）── お試し切れ ／ 未払 ／ 解約
   帯は 画面のいちばん上。止めた 部品は 薄くして 押せなくする */
.statebar{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;padding:12px 14px;
  border-radius:8px;font-size:13.5px;line-height:1.65}
.statebar b.h{display:block}
.statebar .mk{margin:3px 0 0;font-size:11px;line-height:1.5}
.statebar > div{flex:1}
.statebar .btn{flex:none;align-self:center}
.statebar.warn{background:var(--warn-soft);border:1px solid #fde68a;color:#7c4a03}
.statebar.warn b.h,.statebar.warn .mk{color:var(--warn)}
.statebar.stop{background:var(--flag-soft);border:1px solid #fecdca;color:#7a271a}
.statebar.stop b.h,.statebar.stop .mk{color:var(--flag)}

/* 開けない 画面の かわりに 出す 1枚 */
.statelock{max-width:620px}
.statelock h2{margin:0 0 8px}
.statelock p{margin:0;color:var(--muted);font-size:14px}
.st-hide{display:none !important}

/* 止まった 入れるところ・ボタン ── 押せないことが 見て 分かる形にする */
.st-off{opacity:.5;cursor:not-allowed}
input.st-off,select.st-off,textarea.st-off{background:#f1f1ef;color:var(--t-dim)}

/* 行き先を 閉じた リンク（未払・解約） */
.sidebar a.off,.topbar a.off,.main a.off{color:var(--muted);opacity:.45;pointer-events:none;cursor:not-allowed}
.sidebar .switcher.off,.sidebar .navgrp.off{opacity:.45;pointer-events:none}

/* DEV 帯の 切り替え ── 製品の 画面には 出ない */
/* 🔴 立場の 切り替え（2026-09-03）は 契約の 状態と 同じ 見た目。
   ⚠️ 同じ .statepick に すると mock.js が「もう ある」と 見て 契約の 状態の 切り替えを 出さない */
.specref .rolepick,.specref .statepick{display:inline-flex;align-items:center;gap:6px;color:#cfd8ea}
.specref .rolepick select,.specref .statepick select{font:inherit;font-size:12px;padding:2px 6px;border-radius:6px;
  border:1px solid #46536e;background:#2a3550;color:#eaf0fb}

/* 2026-09-04 束90 ── 全画面レビューの 軽 18・20 */
.app .main{padding-bottom:96px}                           /* 右下の ヘルプの 浮きボタンに 手引き・表の 端が 隠れない */
.frm > div > span.small.muted{display:block;margin:4px 0 0}  /* 欄の 添え書きは 欄の 下に 1行（文の 途中で 折り返さない） */

/* 2026-09-04 束92 ── 通しの 目視: 右下の ヘルプと メモが 表の 右端・ボタン・説明文を 隠していた（8画面）。ヘルプは 丸い 印だけ、メモは 下に 寄せる */
.helpfab{padding:11px 13px}
.helpfab .helpfab-t{display:none}
.memo-tab{top:auto;bottom:86px;transform:none;z-index:39}
/* 閉じた開発メモは業務小窓の背面。開いたメモの操作と箇所選択は前面に残す。 */
body.memo-open .memo-tab{z-index:61}
/* 🔴 hidden を 付けた 段（調整済 ／ 調整の 段）は 見せない ── .capcard の display:flex が hidden に 勝っていた（束233。⚠️ 束222 から 販売管理台帳でも 両方 見えていた） */
.capcard[hidden],.modal [hidden]{display:none!important}
/* finance（束237）── 欄の 横の 知らせ（赤）: 押せない 理由を その場で 見せる（借入額 0 ／ 費用 ＞ 借入額 ／ 製品の 名前・完成の 形が 空） */
.fl-err{color:var(--flag);font-weight:600}
.fl-err:empty{display:none}

/* 内訳・資産が 入っている 行の ボタン（03:779-781）── 色だけ 変える。文言は そのまま */
.btn.done{border-color:#a6e6c8;background:var(--green-soft);color:var(--green)}

/* 2026-09-30 岩崎さんの 修正メモ（/tax-settings/ から）──
   ① サイドバーの 白い 背景を 画面の 一番下まで 伸ばす（中身が 短くても 途中で 切れない）。上に 貼り付く 動きは そのまま
   ② フッターは 固定しない ── 中身の 最後に 置き、中身が 短い 画面では 画面の 下端から 16px 浮かせる。
      画面の 途中を 見ている ときは 見えない（岩崎さんの 指示「画面が途中の場合はフッターは見えない」）。
      右下の ヘルプの 丸と 重ならない よう 右を 空ける
   ⚠️ それまで サイドバーは 中身の 高さで 切れ、フッターは 画面の 下端から 96px 上に あった。
      一度 下に 貼り付く 形（sticky）に したが、本文に 重なるので やめた */
.sidebar{align-self:stretch}  /* 高さは 残りの 画面いっぱい（上の 帯の ぶん 引く）。長い 画面では 元の max-height:100vh で 止まり 上に 貼り付く */
.app .main{padding-bottom:16px}
.app .main > .foot{margin-top:auto;padding-right:72px}
@media (max-width:900px){.app .main{padding-bottom:96px}.app .main > .foot{padding-right:2px}}  /* 狭い 幅は 右下の ヘルプが 本文に かからない よう 下を 空ける（前の まま） */

/* 台帳の独立額と帳簿の比較。狭い画面では項目単位で折り返す。 */
.ledger-comparison{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}
.ledger-comparison form{display:inline-flex;margin:0}.ledger-comparison b{white-space:nowrap}