/* =========================================================
   見本の画面の見た目
   ・業務の画面＝その会社の色（紺）。金茶は線とロゴの印だけ。注意は赤
   ・表紙＝弊社からの送付状（弊社の緑と cv-ink の選ぶカード）
   ・角の丸み＝面4px・部品3px・札2px（弊社の業務ツールの基準）
   ・左に色の縦線を引いた囲み・角丸の四角に入れたアイコン・見出しの短い下線は使わない
   ・文字を薄くする動き（opacity）は使わない
   ========================================================= */
:root {
  /* 会社の色（既定＝紺）。3案の画面の「カスタマイズできる項目」で配色を選ぶと、
     js/customize.js が --navy の系列（下の8つ）だけを CSSOM で差し替える。見積書の用紙は .paper で紺に固定 */
  --navy: #1E3A5F;
  --navy-2: #2C5282;
  --navy-soft: #E9EEF4;
  --navy-line: #C9D3E0;  /* 工程表の現場の枠 */
  --navy-decor: #BFD3EC; /* 色が満ちた3案のカードの番号 */
  --navy-tint: #F8FAFC;  /* 一覧の行に触れたとき */
  --navy-tint-2: #FAFBFD; /* 工程表の本日の列 */
  --navy-focus: rgba(44, 82, 130, .35);
  /* 書体。--font-body だけを明朝に差し替える。数字・札・入力欄は --font-ui（ゴシックのまま） */
  --font-gothic: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: var(--font-gothic);
  --font-ui: var(--font-gothic);
  --gold: #C8862F;
  --gold-ink: #94601F; /* 小さな金茶の文字用（白地で 5:1 以上） */
  --alert: #A83F3F;
  --alert-soft: #F7ECEC;
  --ink: #1F2A37;
  --muted: #5B6573;
  --rule: #E2E5EA;
  --bg: #F5F6F8;
  --white: #fff;
  --ph: #5F6570; /* 入力例の文字（白地 約5.9:1・赤い未入力欄 約5:1） */
  --r-face: 4px;
  --r-part: 3px;
  --r-tag: 2px;
  --nav-w: 232px;
  /* HP の動きの部品（cv-line・cv-motion の写し）の色を、会社の色（--navy の系列）に替える。配色を選ぶと一緒に変わる */
  --cv-line-ink: var(--navy-2);
  --cv-line: var(--navy-2);
  --cv-line-base: var(--navy-line);
  --cv-row-bg: var(--navy-tint);
  --cv-row-go-on: var(--navy);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px; line-height: 1.6; letter-spacing: .01em;
}
/* Safari（auto-phrase が効かない）だけ、最後の行が1〜2文字にならないように折る（「ク／ロス」「。」だけの行が出た・WebKit 26.4 で確認）。
   Chrome・Edge は句の切れ目で折る指定が効いているので変えない */
@supports not (word-break: auto-phrase) { body { text-wrap: pretty; } }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.ph { display: inline-block; }
/* 長い文（app.js の pp）：Chrome・Edge は句の切れ目で折る（auto-phrase）。Safari は日本語の通常の折り方で行を埋める
   （句読点でだけ折る keep-all にすると、収まらない句の後ろで短い行が残るため。表の中の keep-all もここで外す） */
.pw { word-break: normal; line-break: strict; overflow-wrap: anywhere; }
@supports (word-break: auto-phrase) { .pw { word-break: auto-phrase; } }
.nb { white-space: nowrap; } /* 語の途中で折らない語（app.js の KEEP_RE・10/25） */
.num { text-align: right; font-variant-numeric: tabular-nums; font-family: "Inter", "Noto Sans JP", sans-serif; }
.nowrap { white-space: nowrap; }
.muted { color: var(--muted); }
.link { color: var(--navy-2); }
.sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
::placeholder { color: var(--ph); opacity: 1; }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px; border: 1px solid #C9CFD8; border-radius: var(--r-part);
  background: var(--white); color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: var(--navy); color: var(--navy); }
.btn:disabled { color: #A5ACB6; border-color: var(--rule); cursor: default; }
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn-ghost:hover { border-color: transparent; color: var(--navy); }
.btn-xl { min-height: 52px; padding: 0 26px; font-size: 16px; font-weight: 700; }
.btn-sm { min-height: 30px; padding: 0 10px; font-size: 13px; }
.btn:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 2px; }
/* 主なボタン＝HP の #3（cv-motion の cv-btn）。地が下からせり上がり、文字が1字ずつ入れ替わる。色は会社の色（紺の系列）のまま。
   cvb-main＝紺の地に白字（新しいお問い合わせを登録・段階の更新・登録・印刷・1日延ばす）／cvb-soft＝淡い紺の地に紺の字（見積書を出力）
   cvb-xl＝大きいボタン／cvb-sm＝表の見出しに置く小さいボタン。文字は cv-motion.js が1字ずつに分ける（窓の中は openModal が渡す） */
.cv-btn.cvb-main, .cv-btn.cvb-soft {
  --cv-btn-bg: var(--navy); --cv-btn-fg: #fff; --cv-btn-bg-hov: var(--navy-2); --cv-btn-fg-hov: #fff;
  min-height: 36px; padding: 0 16px; border-radius: var(--r-part); font-size: 14px; font-weight: 700; white-space: nowrap;
}
.cv-btn.cvb-soft { --cv-btn-bg: var(--navy-soft); --cv-btn-fg: var(--navy); --cv-btn-bg-hov: var(--navy); --cv-btn-fg-hov: #fff; }
.cv-btn.cvb-xl { min-height: 52px; padding: 0 26px; font-size: 16px; }
.cv-btn.cvb-sm { min-height: 30px; padding: 0 12px; font-size: 13px; }
.cv-btn.cvb-main:focus-visible, .cv-btn.cvb-soft:focus-visible { outline-color: var(--navy-2); outline-offset: 2px; }

/* ---------- 札 ---------- */
.badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: var(--r-tag); font-family: var(--font-ui);
  font-size: 11px; font-weight: 700; line-height: 1.6; background: var(--navy-soft); color: var(--navy); white-space: nowrap; vertical-align: 1px;
}
.badge-alert { background: var(--alert); color: #fff; }
.badge-now { background: var(--navy); color: #fff; margin-left: 0; }
.badge-stage { margin-left: 0; }
.badge-stage.s0, .badge-stage.s1, .badge-stage.s2 { background: var(--navy-soft); color: var(--navy); }
.badge-stage.s3 { background: #FBF1E4; color: #8A5615; }
.badge-stage.s4 { background: var(--navy); color: #fff; }
.badge-stage.s5 { background: #EEF0F2; color: var(--muted); }

/* =========================================================
   業務の画面の外枠（左のメニュー＋上の帯）
   ========================================================= */
.app { display: flex; min-height: 100vh; }
.nav {
  position: fixed; inset: 0 auto 0 0; width: var(--nav-w); z-index: 30;
  background: var(--navy); color: #fff; display: flex; flex-direction: column; padding: 16px 12px; overflow-y: auto;
}
.nav-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; border-bottom: 1px solid rgba(255,255,255,.14); margin-bottom: 12px; }
.nav-brand .mark {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: var(--r-part);
  color: var(--gold); font-weight: 700; font-size: 17px; font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
}
.nav-brand b { display: block; font-size: 15px; letter-spacing: .04em; }
.nav-brand small { display: block; font-size: 11px; color: rgba(255,255,255,.72); }
.nav-group { margin-bottom: 14px; }
.nav-group-label { font-size: 11px; color: rgba(255,255,255,.6); padding: 4px 10px; letter-spacing: .08em; }
.nav-item { display: block; margin: 0 -12px; padding: 9px 22px; font-size: 14px; color: rgba(255,255,255,.9); }
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.active { background: rgba(255,255,255,.22); color: #fff; font-weight: 700; }
.nav-cover { margin-top: auto; border-top: 1px solid rgba(255,255,255,.14); padding-top: 14px; color: rgba(255,255,255,.8); }
.nav-foot { font-size: 11px; color: rgba(255,255,255,.62); padding: 10px 10px 0; line-height: 1.6; }
.nav-scrim { display: none; }

.main { flex: 1; min-width: 0; margin-left: var(--nav-w); display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; height: 46px; display: flex; align-items: center; gap: 12px;
  padding: 0 24px; background: var(--white); border-bottom: 1px solid var(--rule);
}
.menu-btn { display: none; width: 36px; height: 36px; border: 1px solid var(--rule); border-radius: var(--r-part); background: #fff; font-size: 18px; cursor: pointer; }
.topbar-title { font-weight: 700; font-size: 14px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-sample {
  margin-left: auto; flex: none; font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; color: var(--gold-ink);
  border: 1px solid var(--gold); border-radius: var(--r-tag); padding: 2px 8px; white-space: nowrap;
}
.page { padding: 24px 28px 64px; max-width: 1240px; width: 100%; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: .03em; line-height: 1.4; }
.page-sub { margin-top: 4px; font-size: 13px; color: var(--muted); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 面 ---------- */
.panel { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-face); padding: 18px 20px; margin-bottom: 16px; }
.panel.flush { padding: 0; overflow: hidden; }
.panel-title { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--ink); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.panel.flush > .panel-title { margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--rule); }
.panel-sub { font-size: 12px; font-weight: 400; color: var(--muted); }
.panel-btn { margin-left: auto; align-self: center; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cols > .panel { margin-bottom: 16px; }
.empty { padding: 28px 20px; color: var(--muted); text-align: center; }
.lead { margin: 0 0 10px; font-size: 14px; color: var(--ink); }

/* ---------- ホーム ---------- */
.lead-action {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-face); padding: 20px 22px; margin-bottom: 16px;
}
.lead-action p { margin: 0; flex: 1; min-width: 260px; font-size: 13px; color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.stat {
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-face); padding: 14px 16px; min-height: 92px;
}
a.stat:hover { border-color: var(--navy); }
.stat-k { font-size: 12px; color: var(--muted); line-height: 1.5; }
.stat-v { font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1.1; font-family: "Inter", "Noto Sans JP", sans-serif; font-variant-numeric: tabular-nums; }
.stat-v.num { text-align: left; font-size: 22px; }
.stat-v small { font-size: 13px; font-weight: 500; margin-left: 3px; color: var(--muted); font-family: "Noto Sans JP", sans-serif; }
.stat.is-alert { border-color: var(--alert); }
.stat.is-alert .stat-v, .stat.is-alert .stat-k { color: var(--alert); }
/* 押せる集計のカード：止まった状態でも右端に › を置き、押せない金額のカードと見分ける。乗せると › が右へ（cv-motion の cv-row） */
a.stat { position: relative; padding-right: 36px; }
a.stat:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 2px; }
/* 「›」の字形は文字の箱の中で下寄りに描かれるため、箱を中心に置くと字が約3px下に見える（2026-10-25 Codex の見た目の審査）→ 0.12em 上げる */
.stat .cv-row-go { position: absolute; right: 14px; top: 50%; translate: 0 calc(-50% - .12em); font-size: 22px; color: var(--navy-2); }
.stat.is-alert .cv-row-go { color: var(--alert); }

.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--rule); border-radius: var(--r-part); overflow: hidden; }
.flow li + li { border-left: 1px solid var(--rule); }
.flow a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 20px; }
.flow a:hover { background: var(--navy-soft); }
.flow a:focus-visible { outline: 2px solid var(--navy-2); outline-offset: -2px; }
.flow .cv-row-go { position: absolute; right: 10px; top: 50%; translate: 0 calc(-50% - .12em); font-size: 18px; color: var(--navy-2); }
.flow-n { font-size: 22px; font-weight: 700; color: var(--navy); font-family: "Inter", "Noto Sans JP", sans-serif; line-height: 1.2; }
.flow-n small { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 2px; font-family: "Noto Sans JP", sans-serif; }
.flow-k { font-size: 12.5px; color: var(--ink); white-space: nowrap; }

.due { list-style: none; margin: 0; padding: 0; }
.due li + li { border-top: 1px solid var(--rule); }
/* 期日の近い予定の行＝一覧の行（HP の #5・cv-row）。行に乗せると地が淡くなり、予定の名前の下線が伸び、右端の › が右へ */
.due a { display: grid; grid-template-columns: 196px 1fr auto; gap: 12px; padding: 10px 10px; margin: 0 -10px; align-items: baseline; border-radius: var(--r-part); }
.due a:focus-visible { outline: 2px solid var(--navy-2); outline-offset: -2px; }
.due-date { font-size: 13px; color: var(--muted); white-space: nowrap; }
.due-date.is-late { color: var(--alert); font-weight: 700; }
.due-body b { display: inline; font-size: 14px; }
.cv-row-go { color: var(--muted); font-size: 18px; line-height: 1; }
.due .cv-row-go { align-self: center; }
.due-body span { display: block; font-size: 12px; color: var(--muted); }

.week { display: flex; flex-direction: column; }
.week-day { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 8px 0; }
.week-day + .week-day { border-top: 1px solid var(--rule); }
.week-day.is-today .week-date { color: var(--navy); font-weight: 700; }
.week-date { font-size: 12.5px; color: var(--muted); white-space: nowrap; padding-top: 2px; }
.week-date .badge { display: block; width: max-content; margin: 3px 0 0; }
.week-items { min-width: 0; }
.week-item { display: block; padding: 2px 0; }
.week-item + .week-item { margin-top: 4px; }
.week-item b { font-size: 13.5px; }
.week-item span { display: block; font-size: 12px; color: var(--muted); }
.week-item:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 2px; border-radius: var(--r-tag); }
/* 押せる文字の下線（cv-line）は、行・リンク全体に焦点が当たったとき・押した瞬間にも伸ばす（部品は文字そのものの焦点だけを見るため） */
.cv-line-row:is(:active, :focus-visible, :focus-within) .cv-line { background-size: 100% 1.5px, 100% 1px; }
.week-none { font-size: 12.5px; color: var(--muted); padding-top: 2px; }

/* ---------- 一覧 ---------- */
.search { display: flex; gap: 8px; margin-bottom: 12px; }
.search input { flex: 1; max-width: 420px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid #CBD2DB; border-radius: var(--r-part);
  font-size: 13px; color: var(--ink); background: #fff; white-space: nowrap;
}
.chip span { font-size: 12px; color: var(--muted); font-family: "Inter", sans-serif; }
.chip:hover { border-color: var(--navy); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip.on span { color: rgba(255,255,255,.85); }

/* 看板／表の切り替え（一覧の見出しの右） */
.seg { margin-left: auto; align-self: center; display: inline-flex; border: 1px solid #C9CFD8; border-radius: var(--r-part); overflow: hidden; }
.seg-btn { min-height: 30px; padding: 0 14px; border: 0; background: #fff; color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.seg-btn + .seg-btn { border-left: 1px solid #C9CFD8; }
.seg-btn[aria-pressed="true"] { background: var(--navy); color: #fff; font-weight: 700; }
@media (hover: hover) { .seg-btn[aria-pressed="false"]:hover { color: var(--navy); background: var(--navy-tint); } }
.seg-btn:focus-visible { outline: 2px solid var(--navy-2); outline-offset: -2px; }

/* 看板：6つの段階の列に案件のカード。列は同じ幅で、カードを押すと案件の詳細へ */
.board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 14px 16px 16px; align-items: start; }
.board-col { min-width: 0; background: #F7F8FA; border: 1px solid var(--rule); border-radius: var(--r-part); }
.board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin: 0; padding: 9px 10px; border-bottom: 1px solid var(--rule); font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.board-n { font-family: "Inter", "Noto Sans JP", sans-serif; font-size: 12px; font-weight: 500; color: var(--muted); }
.board-cards { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.board-card { display: block; padding: 9px 10px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-part); }
.board-card:hover { border-color: var(--navy); }
.board-card:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 1px; }
.board-card > b { display: inline; font-size: 13.5px; color: var(--ink); }
.bc-work { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); word-break: keep-all; overflow-wrap: anywhere; }
.bc-next { display: block; margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--rule); font-size: 12px; line-height: 1.5; color: var(--ink); }
.bc-next > span { display: block; word-break: keep-all; overflow-wrap: anywhere; }
.bc-next .bc-k { font-size: 11px; color: var(--muted); }
.bc-next.is-late > span:not(.bc-k) { color: var(--alert); font-weight: 700; }
.board-none { margin: 0; padding: 6px 2px; font-size: 12px; color: var(--muted); }
@supports (word-break: auto-phrase) { .bc-work, .bc-next > span { word-break: auto-phrase; } }

table { border-collapse: collapse; }
.grid { width: 100%; font-size: 13.5px; }
.grid th, .grid td { padding: 10px 14px; text-align: left; vertical-align: middle; }
.grid thead th { background: #F7F8FA; font-size: 12px; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--rule); white-space: nowrap; }
.grid tbody td { border-bottom: 1px solid var(--rule); }
.grid tbody tr:last-child td { border-bottom: 0; }
.grid th.num, .grid td.num { text-align: right; }
.grid tfoot td { padding: 7px 14px; font-size: 13px; }
.grid tfoot tr:first-child td { border-top: 1px solid var(--rule); }
.grid tfoot td:first-child { text-align: right; color: var(--muted); }
.grid tfoot td.lbl { text-align: right; color: var(--muted); }
.grid tfoot .total td { font-weight: 700; font-size: 14.5px; color: var(--navy); border-top: 1px solid var(--rule); white-space: nowrap; }
.grid td.num { white-space: nowrap; }
/* 短い札や表の中の語を、語の途中で折らない（Chrome は文節で、Safari は句読点で折る。はみ出すときだけ任意の位置で折る） */
.src td, .sched-item span, .grid td, .plain li > span, .stat-k, .cv-aside-line span, .due-body span, .week-item span, .file-why { word-break: keep-all; overflow-wrap: anywhere; }
/* Safari：keep-all で収まらない句は任意の位置で折れ、「ユニットバス／の」と1字だけ残った（WebKit で確認）。行の長さをそろえて1字の行を避ける */
@supports not (word-break: auto-phrase) { .sched-item span { text-wrap: balance; } }
@supports (word-break: auto-phrase) {
  body { word-break: auto-phrase; }
  .src td, .sched-item span, .grid td, .plain li > span, .stat-k, .cv-aside-line span, .due-body span, .week-item span, .file-why { word-break: auto-phrase; }
}
.hscroll-hint { display: none; margin: 0; padding: 8px 16px 0; font-size: 12.5px; color: var(--muted); }
.req { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: var(--r-tag); font-family: var(--font-ui); background: var(--alert); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.6; vertical-align: 1px; }
.grid tr[data-go] { cursor: pointer; }
/* 行に乗せたときの地の色・右端の › は cv-motion の cv-row（色は :root の --cv-row-bg） */
.grid tr[data-go]:focus-visible { outline: 2px solid var(--navy-2); outline-offset: -2px; }
.grid .cv-row-go { width: 34px; padding-left: 0; padding-right: 14px; text-align: right; }
.grid td.is-late { color: var(--alert); font-weight: 700; }
.grid td.is-late .sub { color: var(--alert); font-weight: 500; }

/* 案件の詳細の見積：数量と単価の入力欄。表の行の高さと右寄せの数字の並びを変えないよう、低く細い枠にする */
.est tbody td { padding-top: 6px; padding-bottom: 6px; }
.est-q { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; }
.est .est-in {
  height: 28px; padding: 0 6px; border: 1px solid #D3D9E1; border-radius: var(--r-tag); background: #fff;
  font-family: "Inter", "Noto Sans JP", sans-serif; font-size: 13.5px; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink);
}
.est .est-in-q { width: 4.2em; }
.est .est-in-p { width: 7.4em; }
.est .est-in:hover { border-color: var(--navy-2); }
.est .est-in:focus { outline: 2px solid var(--navy-focus); outline-offset: 0; border-color: var(--navy-2); }
.est-note { border-top: 1px solid var(--rule); }
/* 段階F：数量・単価を変えた行（変える前と比べられるように） */
.est tbody tr.is-changed td { background: #FBF3DF; }

/* ---------- 案件の詳細 ---------- */
.stepper { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
/* まだ進んでいない段階は白地に枠だけ、済んだ段階は面で塗る（色の濃さだけに頼らず、済み・今・これからを見分ける） */
.stepper li { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; border: 1px solid #DCE1E8; border-radius: var(--r-part); background: #FFFFFF; color: var(--muted); }
.stepper li.done { border-color: var(--navy-soft); background: var(--navy-soft); color: var(--navy); }
.stepper li.now { border-color: var(--navy); background: var(--navy); color: #fff; }
.st-n { font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.st-k { font-size: 13px; font-weight: 700; white-space: nowrap; }
.advance { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.advance p { margin: 0; flex: 1; min-width: 240px; font-size: 13px; color: var(--muted); }

.kv { width: 100%; font-size: 13.5px; }
.kv th { width: 7.5em; padding: 7px 10px 7px 0; text-align: left; font-weight: 500; color: var(--muted); vertical-align: top; white-space: nowrap; }
.kv td { padding: 7px 0; }
.kv tr + tr th, .kv tr + tr td { border-top: 1px solid var(--rule); }

.next-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--rule); }
.next-big span { font-size: 13px; color: var(--muted); }
.next-big b { font-size: 17px; color: var(--navy); }
.next-big.is-late span, .next-big.is-late b { color: var(--alert); }
.next-big .badge { margin-left: 0; }
.mini-title { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.memo { margin: 0; font-size: 13.5px; }

.plain { list-style: none; margin: 0; padding: 0; }
.plain li { display: flex; gap: 12px; padding: 7px 0; font-size: 13.5px; }
.plain li + li { border-top: 1px solid var(--rule); }
.plain li > span:not(.when) { min-width: 0; }
.plain li > span:nth-child(2) { flex: 1; }
.plain .when { flex: none; width: 9.5em; color: var(--muted); font-size: 12.5px; white-space: nowrap; padding-top: 1px; }

/* ---------- 工程表 ---------- */
.hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sched { min-width: 900px; table-layout: fixed; }
.sched th, .sched td { border-right: 1px solid var(--rule); vertical-align: top; }
.sched th:last-child, .sched td:last-child { border-right: 0; }
.sched thead th.is-today { background: var(--navy); color: #fff; }
.sched tbody td.is-today { background: var(--navy-tint-2); }
.sched-crew { width: 150px; }
.sched tbody th.sched-crew { background: #FBFBFC; font-weight: 400; border-bottom: 1px solid var(--rule); }
.sched tbody tr:last-child th.sched-crew { border-bottom: 0; }
.sched-crew b { display: block; font-size: 13.5px; white-space: nowrap; }
.sched-crew span { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.sched td { padding: 8px; height: 64px; }
/* 現場の札＝ボタン（押すと「1日延ばす」の窓）。見た目は前の札のまま */
.sched-item {
  display: block; width: 100%; margin: 0; padding: 6px 8px; border: 1px solid var(--navy-line); border-radius: var(--r-part); background: var(--navy-soft);
  font: inherit; text-align: left; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sched-item + .sched-item { margin-top: 8px; } /* 同じ日の別の案件の札は、横の札どうしと同じくらい離して区切りを見せる */
.sched-item b { display: block; font-size: 12.5px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-item > span { display: block; font-size: 11.5px; color: var(--ink); line-height: 1.45; } /* 直下だけ（中の句 .ph まで縦に積むと句ごとに改行される・10/25） */
.sched-item:hover { border-color: var(--navy); }
.sched-item:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 1px; }
/* 職人・協力業者の名前＝その方の画面（スマートフォン）へのリンク（HP の #1・cv-line） */
.sched-crew-link { display: inline-block; color: var(--navy-2); }
.sched-crew-link:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 2px; border-radius: var(--r-tag); }
.sched-crew .sched-crew-link b { display: inline; }
/* 2週間（12稼働日）：6日ずつの表を上下に並べ、それぞれの上に期間の見出しを置く */
.sched-block { margin: 0; padding: 10px 20px 8px; font-size: 13px; font-weight: 700; color: var(--navy); background: #FBFBFC; border-bottom: 1px solid var(--rule); }
.sched-block.is-next { border-top: 1px solid var(--rule); margin-top: 18px; }

/* ---------- 職人・協力業者の画面（スマートフォン） ----------
   スマートフォンの幅の1列。日付ごとのカードに、現場名・作業・場所・連絡先の担当。色の縦線・四角に入れたアイコンは使わない */
.crew-phone { max-width: 420px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-face); overflow: hidden; }
.crew-top { padding: 16px 18px 12px; background: var(--navy); color: #fff; }
.crew-h { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: .02em; }
.crew-sub { margin: 4px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .86); }
.crew-days { list-style: none; margin: 0; padding: 0; }
.crew-day { padding: 12px 18px 14px; border-bottom: 1px solid var(--rule); }
.crew-date { font-size: 13px; font-weight: 700; color: var(--navy); }
.crew-date .badge { margin-left: 6px; }
.crew-day.is-off { padding-bottom: 10px; }
.crew-day.is-off .crew-date { color: var(--muted); font-weight: 500; }
.crew-none { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.crew-job { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--navy-line); border-radius: var(--r-part); background: var(--navy-tint); }
.crew-site { display: block; font-size: 14.5px; color: var(--ink); }
.crew-kv { margin: 6px 0 0; display: grid; gap: 3px; }
.crew-kv > div { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); gap: 8px; font-size: 13px; line-height: 1.55; }
.crew-kv dt { color: var(--muted); }
.crew-kv dd { margin: 0; color: var(--ink); }
.crew-foot { margin: 0; padding: 12px 18px 14px; font-size: 12.5px; color: var(--muted); background: #FBFBFC; }
/* 段階F：地図・電話・確認の印（色の縦線や四角のアイコンは使わない） */
.crew-map { display: inline-block; margin-left: 8px; font-size: 12.5px; color: var(--navy-2); }
.crew-tel { color: var(--navy-2); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.crew-ackbox { padding: 14px 18px 4px; }
.crew-ack { width: 100%; }
.crew-ack-done { margin: 0; padding: 10px 12px; border: 1px solid var(--navy-line); border-radius: var(--r-part); background: var(--navy-tint); font-size: 13.5px; font-weight: 700; color: var(--navy); text-align: center; }
.sched-crew .sched-ack { display: inline-block; margin-top: 3px; padding: 0 6px; border-radius: var(--r-tag); background: var(--navy-soft); color: var(--navy); font-size: 11px; font-weight: 700; line-height: 1.6; }

/* ---------- 現在お使いの表（想定） ---------- */
.legend-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.dup-key { display: inline-block; padding: 1px 8px; border-radius: var(--r-tag); background: #FBEFD9; color: #7A4B0F; font-size: 12px; font-weight: 700; }
.files { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.file { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-face); overflow: hidden; display: flex; flex-direction: column; }
.file-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #F3F5F2; border-bottom: 1px solid var(--rule); }
.file-head b { font-size: 14px; font-family: "Inter", "Noto Sans JP", sans-serif; }
.file-tag { flex: none; font-size: 11px; font-weight: 700; color: #1D6F42; border: 1px solid #9CC6AD; border-radius: var(--r-tag); padding: 1px 6px; }
.mini { width: 100%; font-size: 12.5px; }
.mini th, .mini td { border: 1px solid #DDE1E6; padding: 5px 8px; text-align: left; white-space: nowrap; }
.mini tr > :first-child { border-left: 0; }
.mini tr > :last-child { border-right: 0; }
.mini thead th { background: #F6F7F8; font-weight: 700; color: var(--muted); border-top: 0; }
.mini .dup { background: #FDF4E3; }
.mini thead .dup { background: #FBEFD9; color: #7A4B0F; }
.file-why { margin: auto 0 0; padding: 10px 14px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--rule); }
.file-why > span:not(.ph) { display: inline-block; margin-right: 8px; font-size: 11px; font-weight: 700; color: var(--navy); } /* 見出しの札だけ（文末の句 .ph まで太字にしない・10/25） */
.join p { margin: 0 0 14px; }
.join p:last-child { margin-bottom: 0; } /* 末尾のボタンを外したため（10/25・次の画面へは .tour の次へ） */
.join-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- ご覧いただく順序の前へ・次へ（各画面の末尾・app.js の tourNav） ---------- */
.tour { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--rule); }
.tour-k { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.tour-k b { margin: 0 3px 0 10px; font-family: "Inter", "Noto Sans JP", sans-serif; font-size: 16px; color: var(--navy); }
.tour-end { flex-basis: 100%; order: 3; margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--ink); }
.tour-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.tour-acts .tour-prev { min-height: 52px; padding: 0 18px; }
.tour-end + .tour-acts { order: 4; margin-left: 0; }

/* ---------- この先の進め方 ---------- */
.corr { table-layout: fixed; }
.corr th:nth-child(1) { width: 33%; }
.corr th:nth-child(2) { width: 22%; }
.corr th:nth-child(4) { width: 196px; } /* 写真の行の「3案のどれにも足せます（範囲は…）」が2行で入る幅 */
.corr td:nth-child(3) { color: var(--navy); font-weight: 500; }
.corr .badge { margin-left: 0; }
.corr-talk { display: block; font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--navy); }
.next-lead { max-width: 62em; line-height: 1.8; margin-bottom: 16px; }
.steps-next { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.steps-next li { display: flex; gap: 12px; padding: 16px 14px 16px 0; }
.steps-next li + li { padding-left: 16px; border-left: 1px solid var(--rule); }
.steps-next .sn { flex: none; font-family: "Inter", sans-serif; font-weight: 600; font-size: 20px; color: var(--gold); line-height: 1.2; }
.steps-next b { display: block; font-size: 14.5px; color: var(--navy); }
.steps-next p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.contact { margin: 0; font-size: 14px; line-height: 1.9; }
.next-ask { margin: 0 0 8px; font-size: 14.5px; font-weight: 700; line-height: 1.8; color: var(--navy); }
.next-p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.8; color: var(--ink); }
.next-p:last-child { margin-bottom: 0; }
/* 弊社について：写真（左）と代表の経歴・メッセージ（右）→ 罫線1本 → 支援の実績・事業内容・所在地の3行。
   写真は細い枠だけ。色の縦線・色の地の囲み・角丸の大きい面は使わない */
.about-top { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.about-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--rule); border-radius: var(--r-part); background: var(--bg); }
.about-main p { margin: 0; }
.about-role { font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.about-name { margin-top: 2px !important; font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: .08em; }
.about-career { margin-top: 6px !important; font-size: 13px; line-height: 1.75; color: var(--muted); }
.about-quote { margin-top: 4px !important; font-size: 16px; font-weight: 700; line-height: 1.75; color: var(--ink); }
.about-src { margin-top: 18px !important; font-size: 12px; color: var(--muted); }   /* 10/25：前置きとして引用の前に出す */
.about-stance { margin-top: 12px !important; font-size: 14px; line-height: 1.85; color: var(--ink); }
.about-dl { margin: 20px 0 0; border-top: 1px solid var(--rule); }
.about-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.about-row:last-child { border-bottom: 0; padding-bottom: 0; }
.about-row dt { font-size: 12.5px; font-weight: 700; color: var(--muted); padding-top: 2px; }
.about-row dd { margin: 0; min-width: 0; font-size: 13.5px; line-height: 1.8; color: var(--ink); }
.about-row dd p { margin: 0; }
.about-record { font-size: 14.5px; font-weight: 700; color: var(--navy); }
.about-clients { margin-top: 6px !important; }
.about-clients-k { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
.about-fine { margin-top: 6px !important; font-size: 12px; color: var(--muted); }
.about-svc { margin: 0; padding: 0; list-style: none; }
.about-svc li { position: relative; padding-left: 1em; }
.about-svc li::before { content: "・"; position: absolute; left: 0; top: 0; }
.about-url { margin-top: 4px !important; }
.about-url a { color: var(--navy-2); font-weight: 700; }
.about-url a:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 2px; }

/* ---------- 御社へのご提案（3案） ----------
   並び＝冒頭の位置づけ → 御社の経営の論点（仮説）→ 3案のカード → 導入にあたってのご負担と弊社の対応
   → お打ち合わせの後の作り直し → カスタマイズ → よくあるご質問 → 30分のお打ち合わせの申し込み（原稿 v2 の A〜E・J）。
   カードは読むためのカード（article）。押して選ぶ作りにはしない（3案は組み合わせられるため）。
   3枚は大きさ・色・並びをそろえ、優劣や推奨の印は付けない。
   並べ方は置き場所の幅で決める（3枚が横に入る幅＝横に3つ／それより狭い＝縦） */
.plans-intro { margin: 0 0 18px; }
.plans-to { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--ink); }
.plans-intro .lead { max-width: 62em; line-height: 1.8; }

/* 論点の番号の印（論点の表と、カードの「関わる論点」で同じ形）。四角に入れず、細い輪だけにする */
.issue-no {
  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--navy-2); border-radius: 50%;
  color: var(--navy-2); font-family: var(--font-ui); font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
/* 表の上の添え書きと、表の下の注記（面の端まで線を引かない面＝flush の中） */
.panel-lead { margin: 0; padding: 12px 20px 4px; font-size: 13.5px; line-height: 1.75; color: var(--muted); }
.panel-note { margin: 0; padding: 12px 20px 14px; border-top: 1px solid var(--rule); font-size: 13px; line-height: 1.75; color: var(--muted); }

/* 御社の経営の論点（仮説） */
.issues-tbl { table-layout: fixed; }
.issues-tbl th:nth-child(1) { width: 30%; }
.issues-tbl th:nth-child(3) { width: 25%; }
.issues-tbl th:nth-child(4) { width: 96px; }
.issues-tbl td { vertical-align: top; line-height: 1.75; }
.issue-head { display: flex; align-items: flex-start; gap: 10px; }
.issue-head .issue-no { margin-top: 1px; }
.issue-head b { min-width: 0; font-size: 14px; line-height: 1.65; color: var(--navy); }
.issue-src { margin: 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.65; color: var(--muted); }
.issue-src li + li { margin-top: 4px; }
.issue-plans { font-weight: 700; color: var(--navy); white-space: nowrap; }

/* 3案のカード */
.plans-wrap { container-type: inline-size; margin-bottom: 16px; }
.plans-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@container (min-width: 780px) {
  .plans-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
.plan { display: flex; flex-direction: column; min-width: 0; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-face); overflow: hidden; }
.plan-body { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 18px 14px; }
.plan-head { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.plan-no { flex: none; display: inline-flex; align-items: baseline; gap: 1px; color: var(--navy-2); line-height: 1; font-family: var(--font-ui); }
.plan-no-k { font-size: 14px; font-weight: 700; }
.plan-no-n { font-size: 30px; font-weight: 300; font-variant-numeric: tabular-nums; }
.plan-name { display: block; min-width: 0; font-size: 16.5px; font-weight: 700; line-height: 1.45; color: var(--navy); letter-spacing: .02em; text-wrap: balance; }
.plan-sec { display: flex; flex-direction: column; gap: 4px; }
.plan-k { display: block; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.plan-issues { display: flex; gap: 6px; }
.plan-text { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink); }
.plan-cans { margin: 0; padding: 0; list-style: none; }
.plan-can { display: block; position: relative; padding-left: 1em; font-size: 13.5px; line-height: 1.65; color: var(--ink); }
.plan-can::before { content: "・"; position: absolute; left: 0; top: 0; }
.plan-shot-sec { margin-top: auto; } /* 3枚の見本の高さを横でそろえる */
.plan-shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--r-part); background: var(--bg); }
.plan-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* 見本画像が画面に入ったときに、中心から四角く開き、中の画像は2倍から縮んで収まる（HP の #12・c-scale-in の時間と曲線）。
   is-reveal は app.js の revealShots が付ける（動きを減らす設定・「動き 控えめ」・埋め込みでは付けない）。
   開き終えたら clip-path を外す（backwards＝終わった後は元の状態） */
.plans-grid.is-reveal .plan:not(.is-shot-in) .plan-shot { clip-path: inset(100%); }
.plans-grid.is-reveal .plan.is-shot-in:not(.is-shot-done) .plan-shot { animation: cv-scale-in 1.2s cubic-bezier(.16, 1, .3, 1) backwards; }
.plans-grid.is-reveal .plan.is-shot-in:not(.is-shot-done) .plan-shot img { animation: cv-scale-in-img 1s cubic-bezier(.16, 1, .3, 1) backwards; }
@keyframes cv-scale-in { from { clip-path: inset(100%); } to { clip-path: inset(0); } }
@keyframes cv-scale-in-img { from { transform: scale(2); } to { transform: none; } }
/* 「この案の詳細」＝押せる文字の下線（HP の #1・cv-line）。リンクのどこに乗せても下線が左から伸びる。
   案2だけ「職人・協力業者の画面」を2本目に置く（縦に積む。高さは app.js の alignPlans が3枚でそろえる） */
.plan-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 2px 18px 16px; }
.plan-more { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--navy-2); }
.plan-more svg { flex: none; transition: transform .2s cubic-bezier(.2,.7,.2,1); }
.plan-more:focus-visible { outline: 2px solid var(--navy-2); outline-offset: -2px; }
@media (hover: hover) { .plan-more:hover svg { transform: translateX(3px); } }
/* 置き場所が中くらい（タブレットの縦など）は1枚ずつ縦に並べ、カードの中は文と見本を左右に */
@container (min-width: 560px) and (max-width: 779px) {
  .plan-body { display: grid; grid-template-columns: minmax(0, 1fr) 42%; column-gap: 22px; row-gap: 14px; align-content: start; }
  .plan-body > * { grid-column: 1; }
  .plan-body > .plan-shot-sec { grid-column: 2; grid-row: 1 / span 5; margin-top: 0; }
}

/* 導入にあたってのご負担と、弊社の対応 */
.plans-cmp { table-layout: fixed; }
.plans-cmp th:nth-child(1) { width: 30%; }
.plans-cmp td { vertical-align: top; line-height: 1.75; }
.plans-cmp td:first-child b { display: block; font-size: 14px; color: var(--navy); }

/* お打ち合わせの後、御社の表に合わせて作り直します */
.remake-tbl { table-layout: fixed; }
.remake-tbl th:nth-child(1) { width: 20%; }
.remake-tbl td { vertical-align: top; line-height: 1.75; }
.remake-tbl td:first-child b { font-size: 13.5px; color: var(--ink); }
.remake-tbl td:nth-child(3) { color: var(--navy); font-weight: 500; }

/* よくあるご質問 */
.faq-list { margin: 0; }
.faq-item { display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr); gap: 6px 24px; padding: 14px 20px; border-bottom: 1px solid var(--rule); }
.faq-item:last-child { border-bottom: 0; }
.faq-item dt { font-size: 14px; font-weight: 700; line-height: 1.65; color: var(--navy); }
.faq-item dd { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--ink); }

/* お打ち合わせのお申し込みの案内の帯（3案の画面の末尾）。申し込みの経路は「3案をお送りしたメールへのご返信」の1本なので、
   ボタン・入力欄は置かない。会社の色（紺の系列）の帯に白字。色の縦線・四角に入れたアイコンは使わない */
.plans-band { margin: 4px 0 0; padding: 20px 24px 22px; background: var(--navy); color: #fff; border-radius: var(--r-face); }
.plans-band-h { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .03em; }
.plans-band-p { margin: 8px 0 0; max-width: 52em; font-size: 14.5px; line-height: 1.85; color: rgba(255, 255, 255, .94); }

/* ---------- カスタマイズできる項目（代表例）（3案の画面・js/customize.js） ----------
   選ぶボタンは2層。選んだボタンは押した点から会社の色が満ち、選んでいる間は満ちたまま残す。
   触れただけ（ホバー）では満たさない（選んだボタンと見分けがつかなくなるため）。枠と文字の色だけ変える */
.cz-lead { margin: 0 0 16px; font-size: 13.5px; color: var(--muted); }
.cz-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
.cz-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cz-k { flex: none; width: 6.4em; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.cz-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
/* 工程表の期間の行の後ろの「工程表で確認」（期間は工程表の画面で切り替わるため） */
.cz-link { margin-left: 8px; font-size: 13px; font-weight: 700; color: var(--navy-2); white-space: nowrap; }
.cz-link:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 2px; border-radius: var(--r-tag); }
.cz-opt {
  position: relative; isolation: isolate; overflow: hidden; margin: 0; padding: 0;
  border: 1px solid #C9CFD8; border-radius: var(--r-part); background: var(--white); color: var(--ink);
  font-size: 14px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cz-l { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px; white-space: nowrap; }
.cz-over {
  position: absolute; inset: 0; pointer-events: none; background: var(--navy); color: #fff;
  clip-path: circle(0px at var(--x, 50%) var(--y, 50%));
  transition: clip-path .42s cubic-bezier(.22, .8, .24, 1);
}
.cz-opt[aria-pressed="true"] { border-color: var(--navy); }
.cz-opt[aria-pressed="true"] .cz-over { clip-path: circle(var(--r, 200px) at var(--x, 50%) var(--y, 50%)); }
@media (hover: hover) { .cz-opt[aria-pressed="false"]:hover { border-color: var(--navy); color: var(--navy); } }
.cz-opt:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 2px; }
.cz-sw { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--sw, transparent); }
.cz-over .cz-sw { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9); }
.cz-opt[data-v="gothic"] .cz-l { font-family: var(--font-gothic); }
.cz-opt[data-v="mincho"] .cz-l { font-family: var(--font-mincho); }
.cz-note { display: none; margin: 0; font-size: 13px; color: var(--muted); align-self: center; }
.cz-msg { margin: 12px 0 0; font-size: 13px; font-weight: 700; color: var(--alert); }
.cz-msg:empty { display: none; }
.cz-fine { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 12.5px; line-height: 1.8; color: var(--muted); }
/* 指の端末（ホバーが無い）ではレーザーポインターが出ないので、カーソルの行の代わりに注記を出す */
@media (hover: none) {
  .cz-row-cursor { display: none; }
  .cz-note { display: block; }
}
@media screen and (max-width: 960px) { .cz-rows { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
@media screen and (max-width: 720px) {
  .cz-row { align-items: flex-start; }
  .cz-k { padding-top: 12px; }
  .cz-l { min-height: 42px; padding: 0 13px; } /* 押せる面は枠を含めて 44px */
}
/* 書体を明朝にしたとき：数字（番号）はゴシックのまま。見出しのかなは customize.js が字ごとに詰める（.kp） */
.cv-ink-num { font-family: var(--font-ui); }
/* 字ごとの負の余白で中身の幅が狭く測られ、横に空きがあるのに句の最後の1字だけ次の行に落ちる（「見積明細から／の」）のを防ぐ。
   句（.ph）と、flex の見出しの塊（.kp-run）の中では折らない。並びの子は残りの幅まで広げる。.kp があるときだけ効く */
.ph:has(.kp), .kp-run { white-space: nowrap; }
.page-head > div:has(.kp), .steps-next li > div:has(.kp) { flex: 1 1 auto; min-width: 0; }

/* 動き「控えめ」＝動きを減らす設定（prefers-reduced-motion）と同じ扱い。色は一瞬で切り替わる */
:root[data-cz-motion="calm"] .cv-ink-over,
:root[data-cz-motion="calm"] .cz-over,
:root[data-cz-motion="calm"] .nav,
:root[data-cz-motion="calm"] .plan-more svg { transition: none; }
:root[data-cz-motion="calm"] .cv-stagger > *,
:root[data-cz-motion="calm"] .toast { animation: none; }
/* HP の動きの部品（cv-motion・cv-line）と見本画像の開き方も止め、最後の状態をすぐ出す */
:root[data-cz-motion="calm"] .cv-btn,
:root[data-cz-motion="calm"] .cv-btn::before,
:root[data-cz-motion="calm"] .cv-btn-txt,
:root[data-cz-motion="calm"] .cv-btn-ch,
:root[data-cz-motion="calm"] .cv-btn-ico,
:root[data-cz-motion="calm"] tr.cv-row > td,
:root[data-cz-motion="calm"] .cv-row:not(tr),
:root[data-cz-motion="calm"] .cv-row-go > span,
:root[data-cz-motion="calm"] .cv-count-col,
:root[data-cz-motion="calm"] .cv-line { transition: none !important; }
:root[data-cz-motion="calm"] .plans-grid .plan-shot,
:root[data-cz-motion="calm"] .plans-grid .plan-shot img { animation: none !important; clip-path: none !important; }
/* レーザーポインター（laser.js）：残光を出さず、点と輪の大きさの変化を一瞬にする。輪が点を追う遅れは laser.js の中にあり、ここからは止められない */
:root[data-cz-motion="calm"] .lp-trail { visibility: hidden; }
:root[data-cz-motion="calm"] .lp-dot i,
:root[data-cz-motion="calm"] .lp-ring i { transition: none; }
@media (prefers-reduced-motion: reduce) { /* :root を付けて、後ろに書いた .nav・.toast の動きより強くする */
  :root .cz-over, :root .nav, :root .plan-more svg { transition: none; }
  :root .toast { animation: none; }
  :root .plans-grid .plan-shot, :root .plans-grid .plan-shot img { animation: none !important; clip-path: none !important; }
}

/* ---------- 入力の窓 ---------- */
.modal-back { position: fixed; inset: 0; z-index: 60; background: rgba(15, 25, 40, .48); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; overflow-y: auto; }
.modal { width: 100%; max-width: 620px; background: #fff; border-radius: var(--r-face); box-shadow: 0 12px 40px rgba(10,20,40,.25); display: flex; flex-direction: column; }
.modal.wide { max-width: 860px; }
.modal.small { max-width: 460px; }
.modal-back.is-small { align-items: flex-start; padding-top: 14vh; }
.delay-p { margin: 14px 0 0; font-size: 13.5px; line-height: 1.8; color: var(--ink); }
/* 段階F：ずらした先の重なり（淡い地の囲み。色の縦線は使わない） */
.delay-clash { margin-top: 12px; padding: 10px 14px; border-radius: var(--r-part); background: #FBF1E4; }
.delay-clash-h { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: #8A5615; }
.delay-clash ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.delay-clash li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.6; }
.delay-clash .when { flex: none; min-width: 7.5em; font-weight: 700; color: #8A5615; }
.delay-clash-n { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.delay-ok { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.form-note { margin: -8px 0 18px; font-size: 12.5px; color: var(--muted); }
.opt { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid #C5CCD6; border-radius: var(--r-tag); font-family: var(--font-ui); color: var(--muted); font-size: 10.5px; font-weight: 700; line-height: 1.5; vertical-align: 1px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.modal-head h3 { margin: 0; font-size: 16px; color: var(--navy); }
.modal-body { padding: 18px; }
.modal-foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.modal-foot .right { margin-left: auto; display: flex; gap: 8px; }
.modal-foot .muted { font-size: 12.5px; }
.sec-k { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.sec-k + .form-grid { margin-bottom: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.field.full { grid-column: 1 / -1; }
.field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
input, select {
  width: 100%; height: 38px; padding: 0 10px; border: 1px solid #C5CCD6; border-radius: var(--r-part);
  background: #fff; color: var(--ink); font: inherit; font-family: var(--font-ui); font-size: 14px;
}
input:focus, select:focus { outline: 2px solid var(--navy-focus); outline-offset: 0; border-color: var(--navy-2); }
input.is-empty { border-color: var(--alert); background: var(--alert-soft); }
.form-err { margin: 14px 0 0; font-size: 13px; color: var(--alert); font-weight: 700; }
.kv.inherit td { color: var(--muted); }

/* ---------- 見積書（A4） ---------- */
.paper-wrap { background: #E9EBEE; padding: 18px; border-radius: var(--r-part); overflow-x: auto; }
/* 用紙は「カスタマイズできる項目」の配色・書体に関わらず、紺とゴシックで固定する（印刷の体裁を変えない） */
.paper {
  --navy: #1E3A5F; font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  width: 210mm; min-height: 297mm; margin: 0 auto; background: #fff; color: #111; padding: 18mm 16mm 14mm;
  box-shadow: 0 2px 10px rgba(0,0,0,.12); font-size: 10.5pt; line-height: 1.6; position: relative;
}
.paper-top { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--navy); padding-bottom: 8px; margin-bottom: 16px; }
.paper-top h2 { margin: 0; font-size: 22pt; letter-spacing: .4em; font-weight: 700; color: var(--navy); }
.paper-meta { text-align: right; font-size: 9.5pt; }
.paper-row { display: flex; justify-content: space-between; gap: 14mm; margin-bottom: 14px; }
.paper-to { flex: 1; }
.to-name { font-size: 15pt; font-weight: 700; border-bottom: 1px solid #333; padding-bottom: 3px; margin-bottom: 8px; }
.pkv { font-size: 10pt; margin-bottom: 10px; }
.pkv th { text-align: left; font-weight: 400; color: #555; padding: 2px 14px 2px 0; white-space: nowrap; }
.pkv td { padding: 2px 0; }
.paper-sum { display: flex; justify-content: space-between; align-items: baseline; border: 1.5px solid var(--navy); padding: 7px 12px; }
.paper-sum span { font-size: 10pt; }
.paper-sum b { font-size: 16pt; font-family: "Inter", "Noto Sans JP", sans-serif; }
.paper-from { flex: none; width: 72mm; display: flex; align-items: flex-start; gap: 3mm; font-size: 9.5pt; line-height: 1.8; padding-top: 4px; }
.paper-from-t { flex: 1; min-width: 0; }
.paper-from b { font-size: 11pt; }
/* 社印の枠（押印する欄。見本では空欄） */
.paper-seal { flex: none; width: 19mm; height: 19mm; margin-top: 1mm; border: 1px solid #999; display: grid; place-items: center; }
.paper-seal span { font-size: 7.5pt; color: #888; letter-spacing: .2em; }
.ptable { width: 100%; font-size: 9.5pt; margin-bottom: 12px; }
.ptable th, .ptable td { border: 1px solid #999; padding: 4px 7px; }
.ptable thead th { background: #EEF1F5; font-weight: 700; text-align: center; }
.ptable td.num, .ptable th.num { text-align: right; }
.ptable tfoot td:first-child { text-align: right; }
.ptable tfoot .total td { font-weight: 700; }
.paper-note { font-size: 9.5pt; border: 1px solid #999; padding: 6px 9px; min-height: 22mm; }
.paper-end { text-align: right; margin-top: 10px; font-size: 10pt; }
.paper-foot { position: absolute; left: 0; right: 0; bottom: 8mm; text-align: center; font-size: 8.5pt; color: #777; }

/* ---------- 知らせ（位置だけ動かす） ---------- */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--ink); color: #fff; padding: 11px 16px; border-radius: var(--r-part); font-size: 13.5px; box-shadow: 0 6px 20px rgba(0,0,0,.2); animation: toast-in .32s cubic-bezier(.2,.7,.2,1) both; }
@keyframes toast-in { from { transform: translateY(14px); } to { transform: none; } }

/* =========================================================
   表紙（弊社からの送付状）
   ========================================================= */
body.is-cover { background: #F4F3F1; }
.cover { min-height: 100vh; padding: 56px 24px 72px; }
.cover-in { max-width: 820px; margin: 0 auto; }
.cover-to { font-size: 17px; font-weight: 700; color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid #CFCBC5; display: inline-block; }
.cover-title { margin: 28px 0 14px; font-size: 30px; font-weight: 700; line-height: 1.45; color: var(--cvx-struct); letter-spacing: .03em; text-wrap: balance; }
.cover-lead { margin: 0 0 40px; font-size: 15px; line-height: 1.9; color: #3E423F; }
.cover-sec { margin-top: 36px; }
.cover-sec h2 { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--cvx-struct); letter-spacing: .06em; }
.src { width: 100%; background: #fff; border: 1px solid var(--cvx-rule); border-radius: var(--r-face); border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 13.5px; }
.src th, .src td { padding: 11px 14px; text-align: left; vertical-align: top; }
.src thead th { font-size: 12px; color: var(--cvx-muted); font-weight: 700; background: #FAFAF8; border-bottom: 1px solid var(--cvx-rule); white-space: nowrap; }
.src tbody tr + tr td { border-top: 1px solid var(--cvx-rule); }
.src td:first-child { font-weight: 700; color: var(--cvx-struct); width: 30%; }
.cover .cv-ink { border-radius: var(--r-face); }

/* =========================================================
   幅の狭い画面（タブレット・スマホ）
   ========================================================= */
@media screen and (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 960px) {
  .cols, .files { grid-template-columns: 1fr; }
  /* 1列にしたときは、枠の下の余白（16px）だけで間を取る（行の間隔と重なって 32px になり、ほかの枠の間 16px と不ぞろいだった＝Codex 3回目・10/25） */
  .cols { row-gap: 0; }
  .steps-next { grid-template-columns: 1fr; }
  .steps-next li { padding: 14px 0; }
  .steps-next li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .about-top { grid-template-columns: 220px minmax(0, 1fr); gap: 20px; }
}
@media screen and (max-width: 860px) {
  /* 影はメニューを開いたときだけ付ける（隠れている間に付けると、画面の左端に影が薄く出る） */
  .nav { transform: translateX(-100%); transition: transform .26s cubic-bezier(.2,.7,.2,1); }
  body.nav-open .nav { transform: none; box-shadow: 4px 0 24px rgba(0,0,0,.2); }
  body.nav-open .nav-scrim { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(15,25,40,.4); }
  .main { margin-left: 0; }
  .menu-btn { display: inline-grid; place-items: center; flex: none; }
  .topbar { padding: 0 12px; }
  .page { padding: 18px 16px 56px; }
  .flow { grid-template-columns: repeat(3, 1fr); }
  .flow li:nth-child(4) { border-left: 0; }
  .flow li:nth-child(n+4) { border-top: 1px solid var(--rule); }
  .stepper { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 720px) {
  body { font-size: 15px; }
  input, select { font-size: 16px; height: 42px; }
  .page-head h1 { font-size: 20px; }
  .page-actions { width: 100%; }
  .page-actions .btn, .page-actions .cv-btn { flex: 1; }
  /* 前へ・次へ：幅の狭い画面では縦に並べ、次へを上に置く（読み終えた親指の位置に次へが来る） */
  .tour-acts { width: 100%; flex-direction: column-reverse; align-items: stretch; margin-left: 0; }
  .tour-acts .btn, .tour-acts .cv-btn { width: 100%; }
  .lead-action { padding: 16px; gap: 12px; }
  .lead-action .btn-xl, .lead-action .cv-btn { width: 100%; }
  .lead-action p { min-width: 0; }
  .stat-v, .stat-v.num { font-size: 22px; }
  .stat-k { min-height: 3em; }
  .hscroll-hint { display: block; }
  /* 見積：幅の狭い画面では、品名を1行目に置き、2行目に「数量 × 単価 ＝ 金額」を並べる
     （4列のままでは品名の列が狭く「塗装」だけの行ができ、3桁の数量が欄からはみ出したため）。欄の字は 16px（iPhone で押したときに拡大しない） */
  .est, .est tbody, .est tfoot { display: block; width: 100%; }
  .est thead { display: none; }
  .est tbody tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "name name name" "q p a"; align-items: center; gap: 6px 8px; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
  .est tbody tr:last-child { border-bottom: 0; }
  .est tbody td { display: block; padding: 0; border: 0; }
  .est tbody td:nth-child(1) { grid-area: name; font-size: 14px; font-weight: 700; color: var(--navy); }
  .est tbody td:nth-child(2) { grid-area: q; }
  .est tbody td:nth-child(3) { grid-area: p; display: flex; align-items: center; gap: 6px; }
  .est tbody td:nth-child(3)::before { content: "×"; color: var(--muted); }
  .est tbody td:nth-child(4) { grid-area: a; font-weight: 700; }
  /* 変えた行の色は行全体に付ける（欄ごとに付けると、2段に組んだ行で色が途切れた＝Codex 3回目・10/25） */
  .est tbody tr.is-changed { background: #FBF3DF; }
  .est tbody tr.is-changed td { background: transparent; }
  .est .est-in { height: 36px; padding: 0 6px; font-size: 16px; }
  .est .est-in-q { width: 3.4em; }
  .est .est-in-p { width: 5.6em; }
  .est-q { gap: 4px; font-size: 13px; }
  .est tfoot tr { display: flex; justify-content: space-between; align-items: baseline; padding: 0 14px; }
  .est tfoot tr:first-child { border-top: 1px solid var(--rule); }
  .grid.est tfoot tr td { display: block; padding: 7px 0; border: 0; }
  .grid.est tfoot tr td.pad { display: none; }
  .est tfoot tr.total { border-top: 1px solid var(--rule); }
  .due a { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
  .due .due-date, .due .due-body { grid-column: 1; }
  .due .cv-row-go { grid-column: 2; grid-row: 1 / span 2; }
  .week-day { grid-template-columns: 1fr; gap: 4px; }
  .week-date .badge { display: inline-block; margin: 0 0 0 6px; }
  .search input { max-width: none; }
  .advance .btn-xl, .advance .cv-btn { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .modal-back { padding: 0; align-items: stretch; }
  .modal { max-width: none; border-radius: 0; min-height: 100%; }
  .modal-foot .right { margin-left: 0; width: 100%; }
  .modal-foot .right .btn, .modal-foot .right .cv-btn { flex: 1; min-height: 44px; }
  /* 小さな窓（1日延ばす）は、スマートフォンでも画面いっぱいに広げない */
  .modal-back.is-small { padding: 12vh 12px 12px; align-items: flex-start; }
  .modal.small { min-height: 0; border-radius: var(--r-face); }
  /* 看板：列を横に送る。一覧の見出しの切り替えは押せる面を大きく */
  .board { grid-template-columns: repeat(6, 236px); padding: 12px 16px 16px; }
  .seg-btn { min-height: 40px; padding: 0 16px; font-size: 14px; }
  /* 職人・協力業者の画面：幅いっぱいに */
  .crew-phone { max-width: none; }
  .crew-top, .crew-day, .crew-foot { padding-left: 16px; padding-right: 16px; }
  /* 工程表の期間の行：「工程表で確認」は選ぶボタンの下に */
  .cz-link { margin-left: 0; flex-basis: 100%; padding: 6px 0; }
  .panel-btn { margin-left: 0; }
  .plain .when { width: 8.6em; }

  /* 3案 */
  .plan-body { padding: 16px 16px 14px; }
  .panel-lead { padding: 12px 16px 4px; }
  .panel-note { padding: 12px 16px 14px; }
  .faq-item { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  .plans-band { padding: 18px 16px 20px; }
  .plans-band-p { font-size: 15px; }
  .plan-links { padding: 2px 16px 16px; }
  /* 弊社について：写真を上に置き、表の見出しも上に積む */
  .about-top { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .about-row { grid-template-columns: minmax(0, 1fr); }
  .about-quote { font-size: 15.5px; }

  /* 一覧の表はカードにする */
  .to-cards thead { display: none; }
  .to-cards, .to-cards tbody, .to-cards tr, .to-cards td { display: block; width: 100%; }
  .to-cards tr { padding: 12px 16px; border-bottom: 1px solid var(--rule); }
  .to-cards tbody tr:last-child { border-bottom: 0; }
  .to-cards tbody td { border: 0; padding: 3px 0; display: grid; grid-template-columns: 6.5em 1fr; gap: 8px; text-align: left; }
  .to-cards tbody td::before { content: attr(data-label); font-size: 12px; color: var(--muted); padding-top: 1px; }
  .to-cards tbody td:first-child { display: block; padding-bottom: 6px; }
  .to-cards tbody td:first-child::before { content: none; }
  .to-cards td.num { text-align: left; }
  .to-cards td > .badge { justify-self: start; align-self: center; }
  .to-stack tbody td { display: block; }
  .to-stack tbody td::before { display: block; margin-bottom: 1px; }
  .to-stack tbody td + td { margin-top: 6px; }
  /* カードにした一覧の行（cv-row）：地の色は行全体に付ける（セルごとだと縞に見える）。右端の › は出さない */
  .to-cards td.cv-row-go { display: none; }
  .to-cards tr.cv-row > td { --cv-row-bg: transparent; }
  .to-cards tr.cv-row { transition: background-color .25s cubic-bezier(.55, .05, .22, .99); }
  .to-cards tr.cv-row:is(:hover, :active, :focus-within) { background-color: var(--navy-tint); }

  /* 工程表は横に送る。続きがある間だけ右端を薄く */
  .hscroll.has-more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
  .sched { min-width: 760px; }
  .sched-crew { width: 118px; }

  /* 現在お使いの表も横に送る */
  .file .mini { display: block; overflow-x: auto; }

  /* 表紙 */
  .cover { padding: 36px 16px 56px; }
  .cover-title { font-size: 23px; margin-top: 22px; }
  .cover-lead { font-size: 14.5px; margin-bottom: 28px; }
  .src thead { display: none; }
  .src, .src tbody, .src tr, .src td { display: block; width: 100%; }
  .src tbody tr { padding: 12px 14px; }
  .src tbody tr + tr { border-top: 1px solid var(--cvx-rule); }
  .src tbody tr + tr td { border-top: 0; }
  .src td { padding: 2px 0; }
  .src td:first-child { width: auto; padding-bottom: 4px; }
  .src td:not(:first-child)::before { content: attr(data-label); display: block; font-size: 11.5px; color: var(--cvx-muted); }
  .src td + td { margin-top: 6px; }
  .cv-ink-layer { gap: 14px; padding: 18px 16px; }
  .cv-ink-num { width: 38px; font-size: 26px; }
  .cv-ink-title { font-size: 16.5px; }

  .paper-wrap { padding: 10px; }
}

/* =========================================================
   印刷（見積書だけを A4 で）
   ========================================================= */
@page { size: A4; margin: 0; }
@media print {
  body { background: #fff; }
  body[data-print="estimate"] #root,
  body[data-print="estimate"] .toasts,
  body[data-print="estimate"] .modal-head,
  body[data-print="estimate"] .modal-foot { display: none !important; }
  body[data-print="estimate"] .modal-back { position: static; background: none; padding: 0; overflow: visible; display: block; }
  body[data-print="estimate"] .modal { box-shadow: none; max-width: none; border-radius: 0; }
  body[data-print="estimate"] .modal-body,
  body[data-print="estimate"] .paper-wrap { padding: 0; background: none; overflow: visible; }
  body[data-print="estimate"] .paper { box-shadow: none; margin: 0; width: 210mm; height: 297mm; min-height: 0; zoom: 1 !important; }
  .nav, .topbar, .nav-scrim { display: none; }
  .main { margin-left: 0; }
  .lp-dot, .lp-ring, .lp-trail { display: none !important; } /* レーザーポインターを用紙に写さない */
}