/* =========================================================
   就業規則ナビ — 案2 ステップウィザード型
   トークン(2026-07-28 更新): ブルー#0b57d0 / 墨#0f1720 / 背景#f6f8fb /
             アクセント レッド#c8102e / 和文=Noto Sans JP(本文400・見出し500〜900)
             ※ 実サイト調査(2026-07-28)でfreee等と同構成に統一
             ※「シグナル・フロー」デザイン言語（提案スライドと統一）
   ========================================================= */
:root {
  /* 2026-07-28 「シグナル・フロー」デザイン言語へ移行（提案スライドと統一） */
  --teal: #0b57d0;        /* 主色: ブルー */
  --teal-dark: #083f96;
  --teal-pale: #e8f0fd;
  --ink: #0f1720;
  --ink-soft: #5b6672;
  --bg: #f6f8fb;
  --card: #FFFFFF;
  --line: #dfe4ea;
  --gold: #c8102e;        /* 副アクセント: レッド */
  --gold-pale: #fbf3f4;
  --gold-ink: #7c1a24;
  --red: #c8102e;
  --red-pale: #fbf3f4;
  --jp: "Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  --serif: "Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  --num: "Noto Serif JP","Yu Mincho",serif;
  --radius: 2px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; }
body {
  font-family: var(--jp);
  background: var(--bg); color: var(--ink);
  padding-top:74px;line-height: 1.7; min-height: 100vh; display: flex; flex-direction: column;
}
button { font-family: inherit; font-size: inherit; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- ヘッダー ---------- */
.demo-site-hd{position:fixed;left:0;right:0;top:0;z-index:100;background:#fff;border-bottom:2px solid var(--teal)}
.demo-site-hd__in{width:min(100% - 48px,1280px);min-height:74px;margin:0 auto;display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.demo-site-logo{flex:none;color:var(--teal);font-size:1rem;font-weight:900;letter-spacing:.14em;text-decoration:none}
.demo-site-logo small{display:block;color:var(--ink-soft);font-size:.66rem;font-weight:500;letter-spacing:.1em}
.demo-site-menu{display:flex;align-items:center;justify-content:flex-end;gap:clamp(13px,1.5vw,23px);margin-left:auto}
.demo-site-menu a{color:var(--ink);font-size:.94rem;font-weight:700;text-decoration:none;white-space:nowrap}
.demo-site-menu a:hover,.demo-site-menu a[aria-current="page"]{color:var(--teal);text-decoration:underline;text-underline-offset:6px}
.demo-site-consult{flex:none;padding:12px 17px;background:var(--teal);color:#fff;font-size:.94rem;font-weight:700;text-decoration:none;white-space:nowrap}
.demo-nav-toggle{display:none}
@media(max-width:1180px){.demo-site-hd__in{position:relative;width:min(100% - 28px,1280px);min-height:68px;gap:10px}.demo-site-menu{position:absolute;left:-14px;right:-14px;top:100%;display:none;margin:0;padding:8px 14px 14px;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:2px solid var(--teal);box-shadow:0 18px 34px rgba(15,23,32,.16);max-height:calc(100dvh - 68px);overflow-y:auto}.demo-site-menu.is-open{display:flex}.demo-site-menu a{display:block;padding:14px 12px;border-top:1px solid var(--line);font-size:1rem;white-space:normal}.demo-site-menu a:first-child{border-top:0}.demo-site-consult{margin-left:auto}.demo-nav-toggle{display:flex;flex:0 0 44px;width:44px;height:44px;padding:0 9px;border:0;background:transparent;flex-direction:column;justify-content:center;gap:5px}.demo-nav-toggle span{display:block;width:100%;height:2px;background:var(--teal);transition:transform .2s,opacity .2s}.demo-nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}.demo-nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}.demo-nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}}
@media(max-width:560px){.demo-site-menu a{font-size:1rem}.demo-site-consult{padding:11px 12px;font-size:.88rem}}

/* 2026 editorial UI */
:root{--teal:#3157C8;--teal-dark:#24429B;--teal-pale:#E9EEFF;--ink:#24262B;--ink-soft:#686E78;--bg:#F2F1ED;--line:rgba(36,38,43,.11);--gold:#B23140;--gold-pale:#FCEBED}
.demo-site-hd{border-bottom:1px solid rgba(36,38,43,.1);background:rgba(250,249,246,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.demo-site-logo{color:#24262B;letter-spacing:.2em}.demo-site-consult{border-radius:999px;background:#24262B;box-shadow:0 8px 22px rgba(36,38,43,.15)}
.header{border-bottom:1px solid rgba(36,38,43,.11);background:rgba(255,255,255,.94)}
.btn-ghost,.btn-soumu{border-radius:999px}
.card,.result-card,.chat-shell,.bp-card,.modal-box{border-radius:18px!important;border-color:rgba(36,38,43,.11)!important;box-shadow:0 14px 36px rgba(36,38,43,.07)}
.sidebar{background:#ECEAE5}

.header {
  background: var(--card); border-bottom: 2px solid var(--teal);
  display: flex; align-items: center; gap: 14px; padding: 10px 20px;
  position: sticky; top: 74px; z-index: 30;
}
.brand { display: flex; align-items: baseline; gap: 8px; cursor: pointer; background: none; border: none; }
.brand .logo { font-weight: 900; font-size: 1.15rem; color: var(--teal); letter-spacing: .02em; }
.brand .sub { font-size: .72rem; color: var(--ink-soft); }
.stepbar { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; min-width: 0; overflow: hidden; }
.stepbar .st { display: flex; align-items: center; gap: 5px; font-size: .78rem; color: #9AA6AC; white-space: nowrap; }
.stepbar .st .dot {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid #C4CFD2;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--num); font-weight: 700; font-size: .72rem; background: #fff; color: #9AA6AC;
}
.stepbar .st.done .dot { background: var(--teal); border-color: var(--teal); color: #fff; }
.stepbar .st.done { color: var(--teal); }
.stepbar .st.now .dot { border-color: var(--gold); background: var(--gold); color: #fff; }
.stepbar .st.now { color: var(--ink); font-weight: 700; }
.stepbar .seg { width: 26px; height: 2px; background: #D5DDDF; }
.stepbar .seg.done { background: var(--teal); }
.header-actions { display: flex; gap: 8px; align-items: center; }
.btn-ghost {
  background: #fff; border: 1px solid var(--line); color: var(--ink-soft);
  border-radius: 8px; padding: 6px 12px; font-size: .82rem;
}
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
.btn-soumu {
  background: var(--gold); border: none; color: #fff; font-weight: 700;
  border-radius: 8px; padding: 7px 14px; font-size: .82rem;
  box-shadow: 0 2px 0 #C5851F;
}
.btn-soumu:hover { filter: brightness(1.05); }

/* ---------- レイアウト ---------- */
.layout { flex: 1; display: flex; max-width: 1120px; width: 100%; margin: 0 auto; }
.sidebar {
  flex: 0 0 232px; padding: 20px 16px; border-right: 1px solid var(--line);
  background: #F2F6F6;
}
.sidebar h3 { font-size: .8rem; color: var(--teal); letter-spacing: .08em; margin-bottom: 10px; }
.cond-list { display: flex; flex-direction: column; gap: 7px; }
.cond {
  background: #fff; border: 1px solid #CFE0E0; border-radius: 8px;
  padding: 7px 10px; font-size: .82rem; text-align: left; width: 100%;
  display: flex; align-items: center; gap: 7px; color: var(--ink);
}
.cond .ck { color: var(--teal); font-weight: 900; }
.cond .edit { margin-left: auto; color: #9AA6AC; font-size: .78rem; }
.cond:hover { border-color: var(--teal); }
.cond:hover .edit { color: var(--teal); }
.cond-empty { font-size: .78rem; color: #5E6B72; padding: 4px 2px; }
.sidebar .hint { margin-top: 12px; font-size: .72rem; color: #5E6B72; }
.main { flex: 1; padding: 28px 34px 60px; min-width: 0; }

/* ---------- ホーム ---------- */
.home-hello { font-size: 1.45rem; font-weight: 900; letter-spacing: .01em; }
.home-lead { color: var(--ink-soft); font-size: .92rem; margin: 6px 0 22px; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.tile {
  background: var(--card); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 20px 18px; text-align: left; transition: border-color .15s, transform .15s;
  display: flex; flex-direction: column; gap: 4px;
}
.tile:hover { border-color: var(--teal); transform: translateY(-2px); }
.tile .t-ico {
  width: 42px; height: 42px; border-radius: 9px; background: var(--teal-pale);
  color: var(--teal); display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.tile .t-ico svg { width: 24px; height: 24px; }
.tile.gold .t-ico { background: var(--gold-pale); color: var(--gold-ink); }
.tile b { font-size: 1.02rem; }
.tile span { font-size: .8rem; color: var(--ink-soft); }
.home-sec { margin-top: 30px; }
.home-sec h2 { font-size: .95rem; color: var(--teal); margin-bottom: 10px; letter-spacing: .04em; }
.faq-list { display: flex; flex-direction: column; gap: 6px; }
.faq-item {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 14px; text-align: left; font-size: .88rem; color: var(--ink);
  display: flex; gap: 10px; align-items: center;
}
.faq-item::before { content: "Q"; font-family: var(--num); font-weight: 700; color: var(--gold); }
.faq-item:hover { border-color: var(--teal); }
.hist-list { display: flex; flex-direction: column; gap: 6px; }
.hist-item {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 14px; text-align: left; font-size: .84rem; display: flex; gap: 10px; align-items: baseline;
}
.hist-item:hover { border-color: var(--teal); }
.hist-item .h-date { font-family: var(--num); color: #5E6B72; font-size: .76rem; white-space: nowrap; }
.hist-empty { font-size: .82rem; color: #5E6B72; }

/* ---------- ウィザード ---------- */
.q-count { font-family: var(--num); font-weight: 700; color: var(--gold); font-size: .9rem; letter-spacing: .06em; }
.q-title { font-size: 1.35rem; font-weight: 900; margin: 4px 0 4px; }
.q-help { color: var(--ink-soft); font-size: .88rem; margin-bottom: 20px; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; max-width: 640px; }
.choices.dense { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 9px; max-width: 720px; }
.choices.dense .choice { padding: 12px 8px; font-size: .92rem; }
.choice {
  background: #fff; border: 2px solid var(--teal); color: var(--teal);
  border-radius: var(--radius); padding: 18px 14px; font-size: 1.02rem; font-weight: 700;
  box-shadow: 0 3px 0 rgba(14,124,123,.25); transition: background .12s, transform .12s;
  text-align: center;
}
.choice small { display: block; font-weight: 400; font-size: .75rem; color: var(--ink-soft); margin-top: 2px; }
.choice:hover { background: var(--teal); color: #fff; transform: translateY(-1px); }
.choice:hover small { color: #D8ECEC; }
.inline-note {
  max-width: 640px; margin-top: 16px; background: var(--gold-pale);
  border-left: 4px solid var(--gold); border-radius: 0 8px 8px 0;
  padding: 9px 13px; font-size: .85rem; color: var(--gold-ink);
}
.inline-note b { color: var(--gold-ink); }
.field-row { display: flex; gap: 14px; flex-wrap: wrap; max-width: 640px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: .8rem; color: var(--ink-soft); font-weight: 700; }
.field input {
  font-family: var(--num); font-size: 1.05rem; padding: 10px 12px;
  border: 2px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
  min-width: 180px;
}
.field input:focus { outline: none; border-color: var(--teal); }
.wiz-nav { display: flex; gap: 10px; margin-top: 26px; max-width: 640px; }
.btn-back { background: none; border: 1px solid var(--line); color: var(--ink-soft); border-radius: 8px; padding: 9px 16px; font-size: .88rem; }
.btn-back:hover { border-color: var(--ink-soft); }
.btn-next {
  background: var(--teal); border: none; color: #fff; font-weight: 700;
  border-radius: 8px; padding: 10px 26px; font-size: .95rem; box-shadow: 0 3px 0 var(--teal-dark);
}
.btn-next:hover { filter: brightness(1.08); }
.btn-next:disabled { background: #B8C6C6; box-shadow: none; cursor: not-allowed; }

/* ---------- 結果画面 ---------- */
.result-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.badge-kubun {
  background: var(--teal); color: #fff; font-weight: 900; border-radius: 99px;
  padding: 5px 16px; font-size: .95rem;
}
.badge-kubun.off { background: var(--ink-soft); }
.result-sub { color: var(--ink-soft); font-size: .85rem; margin-bottom: 18px; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px;
}
.card.span2 { grid-column: 1 / -1; }
.card h3 {
  font-size: .82rem; color: var(--teal); letter-spacing: .06em; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.card h3 .copy-btn { margin-left: auto; }
.copy-btn {
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  font-size: .74rem; color: var(--ink-soft); padding: 3px 10px;
}
.copy-btn:hover { border-color: var(--teal); color: var(--teal); }
.pdf-btn { border-color: var(--teal); color: var(--teal); font-weight: 700; }
.pdf-btn:hover { background: var(--teal); color: #fff; }
.doc .d-pdf { background: none; border: none; color: var(--teal); font-size: .78rem; text-decoration: underline; padding: 0; font-weight: 700; }
.card-conc { border-left: 5px solid var(--teal); }
.card-conc .conc-text { font-size: 1.05rem; font-weight: 700; }
.total-num { font-family: var(--num); font-weight: 800; font-size: 2.3rem; color: var(--teal); line-height: 1.2; }
.total-num small { font-size: 1rem; color: var(--ink-soft); font-weight: 600; }
.breakdown { width: 100%; border-collapse: collapse; font-size: .88rem; }
.breakdown td { padding: 6px 4px; border-bottom: 1px solid #EDF2F2; }
.breakdown td:last-child { text-align: right; font-family: var(--num); font-weight: 600; }
.breakdown tr.total td { border-bottom: none; font-weight: 800; color: var(--teal); }
.breakdown .bd-note { font-size: .74rem; color: #5E6B72; font-family: var(--jp); font-weight: 400; }
.doc-list { display: flex; flex-direction: column; gap: 8px; }
.doc {
  display: flex; align-items: center; gap: 10px; background: #F7FAFA;
  border: 1px solid #E4ECEC; border-radius: 8px; padding: 8px 12px; font-size: .88rem;
}
.doc .d-name { font-weight: 700; }
.doc .d-when { color: var(--ink-soft); font-size: .78rem; }
.doc .d-due {
  margin-left: auto; font-family: var(--num); font-weight: 700; font-size: .82rem;
  background: var(--gold-pale); color: var(--gold-ink); border-radius: 6px; padding: 2px 10px; white-space: nowrap;
}
.doc .d-due.urgent { background: var(--red-pale); color: var(--red); }
.doc .d-kisai { background: none; border: none; color: var(--teal); font-size: .78rem; text-decoration: underline; padding: 0; }

/* タブ */
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--line); margin-top: 24px; }
.tab {
  background: none; border: none; padding: 9px 18px; font-size: .9rem; font-weight: 700;
  color: var(--ink-soft); border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.tab.on { color: var(--teal); border-bottom-color: var(--teal); }
.tab .tb-badge {
  background: var(--red); color: #fff; border-radius: 99px; font-size: .68rem;
  font-family: var(--num); padding: 1px 7px; margin-left: 5px; vertical-align: 1px;
}
.tabpane { padding: 18px 4px; }

/* 記載例 */
.kisai-block { margin-bottom: 16px; border-radius: 8px; }
.flash { animation: flashRing 1.5s ease; }
@keyframes flashRing {
  0%, 15% { box-shadow: 0 0 0 3px var(--gold); background: var(--gold-pale); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); background: transparent; }
}
.kisai-block h4 { font-size: .88rem; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.kisai-pre {
  background: #F5F8F8; border: 1px dashed #B8CCCC; border-radius: 8px;
  padding: 12px 14px; font-size: .86rem; white-space: pre-wrap; color: #33414B;
}

/* 根拠規程(原文と AI説明の分離スタイル) */
.kitei-card { border-left: 4px solid var(--ink); background: #F7F7F4; border-radius: 0 8px 8px 0; padding: 12px 16px; margin-bottom: 12px; }
.kitei-card .k-jo { font-weight: 700; font-size: .85rem; letter-spacing: .05em; }
.kitei-card .k-jo .k-tag {
  font-size: .68rem; background: var(--ink); color: #fff; border-radius: 4px;
  padding: 1px 7px; margin-left: 8px; letter-spacing: .1em; vertical-align: 1px;
}
.kitei-card .k-text { font-family: var(--serif); font-size: .9rem; color: #3A4046; margin-top: 5px; white-space: pre-wrap; }
.ai-note {
  background: var(--teal-pale); border-radius: 8px; padding: 10px 14px;
  font-size: .85rem; color: #0A4948; margin-bottom: 14px;
}
.ai-note::before { content: "AIによる説明: "; font-weight: 700; }

/* 要確認 */
.check-item {
  background: var(--gold-pale); border: 1px solid #EAD199; border-radius: 8px;
  padding: 12px 14px; font-size: .88rem; margin-bottom: 10px; color: var(--gold-ink);
}
.check-item b { display: block; margin-bottom: 2px; }
.check-none { color: var(--ink-soft); font-size: .88rem; }
.soumu-draft { margin-top: 14px; }
.soumu-draft h4 { font-size: .85rem; margin-bottom: 6px; }
.result-actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }

/* ---------- 規程検索 ---------- */
.search-row { display: flex; gap: 10px; max-width: 640px; margin-bottom: 8px; }
.search-row input {
  flex: 1; padding: 11px 14px; border: 2px solid var(--line); border-radius: 8px; font-size: .95rem;
}
.search-row input:focus { outline: none; border-color: var(--teal); }
.chip-row { display: flex; gap: 7px; flex-wrap: wrap; margin: 10px 0 18px; }
.chip {
  background: #fff; border: 1px solid var(--teal); color: var(--teal);
  border-radius: 99px; padding: 4px 13px; font-size: .8rem;
}
.chip:hover { background: var(--teal-pale); }
.search-note { font-size: .8rem; color: #5E6B72; margin-bottom: 12px; }

/* ---------- FAQ回答 ---------- */
.faq-q { font-size: 1.2rem; font-weight: 900; margin-bottom: 12px; }
.faq-a { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--teal); border-radius: var(--radius); padding: 16px 18px; font-size: .95rem; margin-bottom: 16px; }

/* ---------- チャットドロワー ---------- */
.chat-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  background: var(--teal); color: #fff; border: none; border-radius: 99px;
  padding: 12px 20px; font-weight: 700; font-size: .9rem;
  box-shadow: 0 4px 14px rgba(14,124,123,.4); display: flex; align-items: center; gap: 8px;
}
.chat-fab:hover { filter: brightness(1.08); }
.chat-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100%);
  background: #fff; border-left: 1px solid var(--line); z-index: 50;
  display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform .22s ease; box-shadow: -6px 0 24px rgba(0,0,0,.08);
}
.chat-drawer.open { transform: translateX(0); }
.chat-head {
  background: var(--teal); color: #fff; padding: 12px 16px; display: flex; align-items: center; gap: 10px;
}
.chat-head b { font-size: .95rem; }
.chat-head .ai-status {
  margin-left: 10px; font-size: .68rem; background: rgba(255,255,255,.18);
  border-radius: 99px; padding: 2px 9px; white-space: nowrap;
}
.chat-head .ai-status.on { background: var(--gold); color: #3a2a08; font-weight: 700; }
.chat-head .ai-gear { margin-left: auto; background: none; border: none; color: #fff; font-size: 1.05rem; line-height: 1; cursor: pointer; }
.chat-head .x { margin-left: 8px; background: none; border: none; color: #fff; font-size: 1.3rem; line-height: 1; }
.ai-settings { background: #EDF4F4; border-bottom: 1px solid var(--line); padding: 10px 14px; }
.ai-settings-lead { font-size: .76rem; color: var(--ink-soft); margin-bottom: 7px; line-height: 1.6; }
.ai-settings-row { display: flex; gap: 6px; }
.ai-settings-row input { flex: 1; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; font-size: .82rem; }
.ai-settings-row input:focus { outline: none; border-color: var(--teal); }
.ai-settings-row button { background: var(--teal); color: #fff; border: none; border-radius: 6px; padding: 0 14px; font-weight: 700; font-size: .82rem; }
.ai-settings-row2 { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.ai-link { background: none; border: none; color: var(--red); font-size: .74rem; text-decoration: underline; padding: 0; cursor: pointer; }
.ai-note-mini { font-size: .68rem; color: #5E6B72; }
.msg.thinking { color: var(--ink-soft); font-style: italic; }
.msg .ai-tag { display: block; font-size: .66rem; color: var(--teal); font-weight: 700; margin-bottom: 4px; letter-spacing: .04em; }
.chat-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #F5F8F8; }
.msg { max-width: 88%; border-radius: 12px; padding: 9px 13px; font-size: .87rem; }
.msg.ai { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg.user { background: var(--teal-pale); border-bottom-right-radius: 4px; align-self: flex-end; }
.msg .m-refs { margin-top: 8px; }
.msg .kitei-card { margin-bottom: 6px; padding: 8px 12px; }
.msg .kitei-card .k-text { font-size: .82rem; }
.msg-fallback { background: var(--gold-pale); border: 1px solid #EAD199; align-self: flex-start; max-width: 88%; border-radius: 12px; padding: 10px 13px; font-size: .87rem; color: var(--gold-ink); }
.msg-fallback .kisai-pre { margin-top: 8px; background: #fff; font-size: .8rem; }
.chat-quick { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 14px 0; background: #fff; border-top: 1px solid var(--line); }
.chat-input { display: flex; gap: 8px; padding: 10px 14px 6px; background: #fff; }
.chat-input input { flex: 1; padding: 10px 12px; border: 2px solid var(--line); border-radius: 8px; font-size: .9rem; }
.chat-input input:focus { outline: none; border-color: var(--teal); }
.chat-input button { background: var(--teal); color: #fff; border: none; border-radius: 8px; padding: 0 18px; font-weight: 700; }
.chat-demo-note { font-size: .7rem; color: #5E6B72; text-align: center; padding: 4px 0 8px; background: #fff; }

/* ---------- フッター ---------- */
.footer {
  border-top: 1px solid var(--line); background: #fff; padding: 9px 20px;
  display: flex; align-items: center; gap: 14px; font-size: .78rem; color: var(--ink-soft);
  position: sticky; bottom: 0; z-index: 20;
}
.demo-badge {
  background: var(--gold-pale); border: 1px solid #EAD199; color: var(--gold-ink);
  border-radius: 6px; padding: 3px 10px; font-weight: 700; font-size: .74rem; white-space: nowrap;
}
.footer .spacer { flex: 1; }

/* ---------- モーダル ---------- */
.modal-back {
  position: fixed; inset: 0; background: rgba(43,52,64,.45); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: #fff; border-radius: 12px; max-width: 620px; width: 100%;
  max-height: 84vh; overflow-y: auto; padding: 22px 24px;
}
.modal h3 { color: var(--teal); font-size: 1rem; margin-bottom: 12px; }
.modal .m-close { float: right; background: none; border: none; font-size: 1.4rem; color: var(--ink-soft); }

/* ---------- トースト ---------- */
.toast {
  position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%);
  background: var(--ink); color: #fff; border-radius: 8px; padding: 8px 18px;
  font-size: .85rem; z-index: 70; opacity: 0; transition: opacity .2s;
  pointer-events: none;
}
.toast.show { opacity: 1; }

/* ---------- 書類出力(A4帳票・印刷/PDF) ---------- */
#printRoot { display: none; }
.doc-page {
  color: #000; background: #fff;
  font-family: var(--jp);
  font-size: 10.5pt; line-height: 1.6;
}
.doc-demo {
  border: 1px solid #000; display: inline-block; padding: 2px 10px;
  font-size: 8.5pt; letter-spacing: .04em; margin-bottom: 10px;
}
.doc-title {
  font-family: var(--serif); font-size: 20pt; font-weight: 600;
  text-align: center; letter-spacing: .28em; margin: 6px 0 16px;
  border-bottom: 2px solid #000; padding-bottom: 8px;
}
.doc-h2 { font-size: 11pt; font-weight: 700; margin: 14px 0 5px; padding-left: 6px; border-left: 4px solid #000; }
.doc-meta, .doc-tbl, .doc-sign { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.doc-meta th, .doc-meta td, .doc-tbl th, .doc-tbl td, .doc-sign th, .doc-sign td {
  border: 1px solid #000; padding: 6px 9px; font-size: 10pt; vertical-align: top;
}
.doc-meta th, .doc-tbl th, .doc-sign th {
  background: #ECECEC; font-weight: 700; text-align: center; white-space: nowrap;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.doc-meta th { width: 14%; } .doc-meta td { width: 36%; }
.doc-tbl th { width: 20%; }
.doc-tbl.money th { width: auto; text-align: center; }
.doc-tbl.money td.num { text-align: right; font-family: var(--num); font-weight: 700; white-space: nowrap; width: 22%; }
.doc-tbl.money tr.sum td { font-weight: 800; background: #F6F6F6; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.doc-tbl td.tall { height: 3.2em; }
.doc-tbl td.blank, .doc-meta td.blank { background: #fff; }
.doc-sign td.sign { height: 4em; }
.doc-note { font-size: 8.5pt; margin: 4px 0 12px; }
.doc-foot { font-size: 8pt; color: #333; border-top: 1px solid #999; padding-top: 5px; margin-top: 14px; }

@media print {
  @page { size: A4; margin: 14mm; }
  body { background: #fff; display: block; }
  body > *:not(#printRoot) { display: none !important; }
  #printRoot { display: block !important; }
  .doc-page { page-break-after: always; }
  .doc-page:last-child { page-break-after: auto; }
  .doc-tbl, .doc-meta, .doc-sign { page-break-inside: avoid; }
}

/* ---------- モバイル ---------- */
.cond-toggle { display: none; }
@media (max-width: 860px) {
  .layout { flex-direction: column; }
  .sidebar {
    flex: none; border-right: none; border-bottom: 1px solid var(--line);
    padding: 10px 16px;
  }
  .cond-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none;
    font-size: .84rem; font-weight: 700; color: var(--teal); padding: 4px 0;
  }
  .sidebar .cond-wrap { display: none; margin-top: 8px; }
  .sidebar.open .cond-wrap { display: block; }
  .main { padding: 20px 16px 80px; }
  .tiles { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .stepbar { order: 3; flex-basis: 100%; justify-content: center; padding-top: 4px; }
  .stepbar:empty { display: none; }
  .stepbar .seg { width: 14px; }
  .stepbar .st { font-size: .7rem; }
  .header { padding: 8px 12px; flex-wrap: wrap; }
  .header-actions { margin-left: auto; }
  .btn-ghost, .btn-soumu { padding: 5px 9px; font-size: .74rem; }
  .home-hello { font-size: 1.2rem; }
  .q-title { font-size: 1.15rem; }
  .total-num { font-size: 1.9rem; }
  .tabs { overflow-x: auto; }
  .tab { white-space: nowrap; padding: 9px 12px; font-size: .84rem; }
  .chat-fab { bottom: 56px; right: 14px; padding: 10px 16px; }
  .footer { font-size: .68rem; padding: 7px 12px; }
}

/* ---------- 物品・備品モジュール(buppin.js) ---------- */
.bp-role { display: flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--ink-soft); }
.bp-role-tag { white-space: nowrap; }
.bp-role select {
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px;
  font-size: .8rem; background: #fff; color: var(--ink); max-width: 180px;
}
.bp-bell { position: relative; padding: 7px 10px; }
.bp-badge {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px;
  background: var(--red); color: #fff; border-radius: 999px;
  font-family: var(--num); font-size: .68rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}
.bp-st {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; white-space: nowrap;
}
.bp-st-pending { background: var(--gold-pale); color: var(--gold-ink); }
.bp-st-ok { background: var(--teal-pale); color: var(--teal-dark); }
.bp-st-warn { background: var(--red-pale); color: var(--red); }
.bp-st-ng { background: var(--red); color: #fff; }
.bp-st-off { background: #EDEFF1; color: var(--ink-soft); }
.bp-st-info { background: #E8EEF7; color: #33506E; }
.bp-id { font-family: var(--num); font-size: .74rem; color: #5E6B72; font-weight: 600; }
.bp-app-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; text-align: left; width: 100%;
}
.bp-app-row:hover { border-color: var(--teal); }
.bp-app-row.urgent { border-left: 4px solid var(--red); }
.bp-row-right { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.bp-route { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 6px; }
.bp-route-chip {
  padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--line);
  font-size: .8rem; font-weight: 700; color: var(--ink-soft); background: #fff;
}
.bp-route-chip.done { background: var(--teal); border-color: var(--teal); color: #fff; }
.bp-route-chip.now { border-color: var(--gold); background: var(--gold-pale); color: var(--gold-ink); }
.bp-route-arrow { color: #B9C4C8; font-weight: 700; }
.bp-preview { border-left: 5px solid var(--gold); margin-top: 14px; }
.bp-urgent-row { display: flex; align-items: center; gap: 7px; font-size: .9rem; font-weight: 700; color: var(--red); cursor: pointer; }
.bp-urgent-band {
  background: var(--red-pale); color: var(--red); font-weight: 700; font-size: .86rem;
  border-radius: 8px; padding: 8px 12px; margin-bottom: 10px;
}
.bp-approve-card.urgent { border: 1.5px solid var(--red); }
.bp-comment {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px; font-size: .88rem; margin-top: 10px;
  font-family: var(--jp);
}
.bp-comment:focus { outline: 2px solid var(--teal-pale); border-color: var(--teal); }
.bp-history { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 10px; }
.bp-history h4 { font-size: .82rem; color: var(--ink-soft); margin-bottom: 6px; }
.bp-hist-row { display: flex; gap: 10px; font-size: .8rem; padding: 3px 0; }
.bp-hist-at { font-family: var(--num); color: #5E6B72; white-space: nowrap; }
.bp-sum-row { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.bp-sum {
  flex: 1; min-width: 160px; background: var(--teal-pale); border-radius: var(--radius);
  padding: 12px 14px; display: flex; flex-direction: column;
}
.bp-sum small { font-size: .74rem; color: var(--teal-dark); }
.bp-sum b { font-family: var(--num); font-size: 1.5rem; color: var(--teal-dark); }
.bp-sum span { font-size: .74rem; color: var(--ink-soft); }
.bp-items th { text-align: left; font-size: .74rem; color: var(--ink-soft); font-weight: 700; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.bp-notif {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px;
  margin-bottom: 8px; cursor: pointer; background: #fff;
}
.bp-notif.unread { border-left: 4px solid var(--gold); background: var(--gold-pale); }
.bp-notif-head { display: flex; gap: 10px; align-items: baseline; font-size: .85rem; }
.bp-notif-acts { display: flex; gap: 8px; margin-top: 6px; }
.bp-mail { margin-top: 8px; }
.bp-mail-meta { font-size: .76rem; color: var(--ink-soft); margin-bottom: 4px; }
.field select {
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  font-size: .95rem; background: #fff; color: var(--ink); width: 100%;
  font-family: var(--jp);
}
@media (max-width: 720px) {
  .bp-role-tag { display: none; }
  .bp-role select { max-width: 120px; }
}
.bp-sub-h { font-size: .82rem; color: var(--ink-soft); margin: 12px 0 6px; }
.bp-month-row {
  display: flex; align-items: baseline; gap: 10px; font-size: .88rem;
  padding: 6px 2px; border-bottom: 1px dashed var(--line);
}
.bp-month-row b { margin-left: auto; font-family: var(--num); }
.bp-notified {
  background: var(--teal-pale); border-left: 4px solid var(--teal);
  border-radius: var(--radius); padding: 11px 14px; margin: 12px 0 4px;
  font-size: .9rem; color: var(--teal-dark);
}
.bp-notified-sub { display: block; font-size: .76rem; color: var(--ink-soft); margin-top: 2px; }

/* 物品モジュール: 出張ウィザード専用サイドバーを隠す(空白を作らない) */
.layout.no-side .sidebar { display: none; }
.layout.no-side .main { max-width: 1000px; margin: 0 auto; }

/* 他の承認者に滞留していることの提示 */
.bp-other-inbox {
  background: var(--gold-pale); border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: 12px 14px; margin-top: 14px;
  font-size: .9rem; color: var(--gold-ink); max-width: 760px;
}
.bp-other-inbox b { display: block; }

/* 台帳の内訳チップ */
.bp-count-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.bp-count {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 5px 13px; font-size: .8rem; color: var(--ink-soft);
}
.bp-count b { font-family: var(--num); font-size: .95rem; color: var(--ink); margin-left: 3px; }
button.bp-count:hover { border-color: var(--teal); color: var(--teal); }
.bp-count.total { background: var(--teal-pale); border-color: var(--teal-pale); color: var(--teal-dark); }
.bp-count.total b { color: var(--teal-dark); }

/* 履歴の種別タグ(出張/物品) */
.hist-item .h-tag {
  font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--teal-pale); color: var(--teal-dark); white-space: nowrap;
}
.hist-item .h-tag.gold { background: var(--gold-pale); color: var(--gold-ink); }

/* 経理区分の目安(第10条) */
.bp-tax {
  margin-top: 12px; border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: 11px 14px; background: #FFFDF8;
}
.bp-tax-head { font-size: .8rem; color: var(--ink-soft); font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bp-tax-label { background: var(--gold-pale); color: var(--gold-ink); border-radius: 999px; padding: 2px 11px; font-size: .84rem; }
.bp-tax-detail { font-size: .88rem; margin-top: 6px; }
.bp-tax-note { font-size: .74rem; color: var(--ink-soft); margin-top: 6px; line-height: 1.6; }

/* 承認の督促・滞留(第9条) */
.bp-st-overdue { background: #7A2E1B; color: #fff; }
.bp-overdue-band {
  background: #7A2E1B; color: #fff; font-weight: 700; font-size: .86rem;
  border-radius: 8px; padding: 8px 12px; margin-bottom: 10px;
}
.bp-stuck-card { border: 1.5px solid var(--red); }
.bp-stuck-lead { font-size: .88rem; color: var(--red); font-weight: 700; margin-bottom: 10px; }
.bp-stuck-card .bp-app-row { margin-bottom: 8px; }

/* 2026-08-20: 操作画面も小さな文字を使わず、PC幅を活用する */
.demo-site-hd__in{width:min(100% - 56px,1440px)}
.layout{max-width:1360px}
.layout.no-side .main{max-width:1180px}
.home-lead,.q-help,.result-sub,.faq-a,.field label,.choice small,.doc .d-when,.doc .d-pdf,.doc .d-kisai,.search-note,.footer{font-size:.9rem}
.sidebar h3,.sidebar button,.cond-empty,.sidebar .hint,.tile span,.home-sec h2,.hist-item,.hist-empty,.breakdown,.breakdown .bd-note,.bp-id,.bp-sub-h,.bp-month-row,.bp-notified-sub,.bp-tax-head,.bp-tax-note{font-size:.9rem}
.home-hello{font-size:1.75rem}.q-title{font-size:1.6rem}.tile b{font-size:1.12rem}
.choice,.field input,.field select,.btn-back,.btn-next,.tab,.search-row input{font-size:1rem}
@media(max-width:860px){
  .demo-site-hd__in{width:calc(100% - 28px)}
  .home-hello{font-size:1.45rem}.q-title{font-size:1.35rem}
  .stepbar .st,.btn-ghost,.btn-soumu,.tab,.footer{font-size:.88rem}
}

/* ワイド画面でも操作部品を本文幅の近くへまとめる */
.header{padding-left:max(20px,calc((100vw - 1360px)/2 + 20px));padding-right:max(20px,calc((100vw - 1360px)/2 + 20px))}
.footer{padding-left:max(20px,calc((100vw - 1360px)/2 + 20px));padding-right:max(20px,calc((100vw - 1360px)/2 + 20px))}
.chat-fab{right:max(22px,calc((100vw - 1360px)/2 + 22px))}
.demo-back-fixed{position:fixed;left:max(22px,calc((100vw - 1360px)/2 + 22px));bottom:64px;z-index:60}
.demo-back-fixed a{display:inline-flex;padding:10px 16px;border-radius:999px;background:#24262B;color:#FFF;font-size:14px;font-weight:800;text-decoration:none;box-shadow:0 8px 22px rgba(36,38,43,.22)}
.demo-back-fixed a:hover{background:var(--teal)}
@media(max-width:720px){.demo-back-fixed{left:14px;bottom:58px}.demo-back-fixed a{padding:9px 13px;font-size:14px}.chat-fab{right:14px}}

/* 操作画面でも小さすぎる文字をなくす（印刷帳票のpt指定は維持） */
html{font-size:17px}
.demo-site-menu a,.demo-site-consult{font-size:1rem}
.demo-site-logo small{font-size:.76rem}
.stepbar .st,.sidebar h3,.sidebar button,.cond-empty,.sidebar .hint,.tile span,.home-sec h2,
.hist-item,.hist-empty,.result-sub,.field label,.choice small,.doc .d-when,.doc .d-pdf,.doc .d-kisai,
.search-note,.footer,.bp-role,.bp-id,.bp-sub-h,.bp-month-row,.bp-notified-sub,.bp-tax-head,.bp-tax-note{font-size:.88rem}
.home-lead,.q-help,.faq-a,.breakdown,.tab,.search-row input,.msg,.chat-input input{font-size:1rem}
.demo-back-fixed a{font-size:15px}
@media(max-width:720px){html{font-size:16px}.demo-back-fixed a{font-size:15px}}

/* デモ操作画面も一段大きく表示 */
html{font-size:18px}
.demo-site-menu a,.demo-site-consult{font-size:1rem}
.home-lead,.q-help,.faq-a,.breakdown,.tab,.search-row input,.msg,.chat-input input{font-size:1rem}
@media(max-width:720px){html{font-size:17px}}
@media(min-width:721px){html{font-size:19px}}

/* 総務デモの携帯最適化 */
@media(max-width:720px){
  html,body{max-width:100%;overflow-x:hidden}
  h1,h2,h3,h4,p,a,b,span,button,label,td,th{overflow-wrap:anywhere;word-break:normal}
  img,svg,canvas,iframe{max-width:100%;height:auto}
  input,button,select,textarea{min-width:0;max-width:100%}
  .main,.home-grid,.tiles,.panel,.card{min-width:0}
  .chat{width:calc(100vw - 24px);max-width:none;right:12px;left:12px}
}
/* 2026-09-06 片岡さん「全てのフォントを明朝体に」: フォーム部品まで明朝 */
button,input,select,textarea,option{font-family:var(--jp)}