/* 業務システムの見た目の試作。飾りを減らし、線と表で構成する */
.ad { --accent:#0b3a82; --accent-soft:#e8eef7; --bg:#f1f3f5; --line:#c9ced6; --ink:#1a1a1c; --muted:#555b65; background:#fff; font-size:14px; line-height:1.55; display:block; height:auto; }
.ad h1, .ad h2, .ad p { margin:0; }
.ad-top { display:flex; justify-content:space-between; align-items:center; height:44px; padding:0 16px; background:var(--accent); color:#fff; }
.ad-top strong { font-size:15px; font-weight:700; }
.ad-top__r { font-size:12.5px; } .ad-top__r a { color:#fff; }
.ad-title { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding-bottom:8px; border-bottom:2px solid var(--ink); }
.ad-title h1 { font-size:20px; } .ad-title p { color:var(--muted); font-size:13px; }
.ad h2 { font-size:14px; font-weight:700; }
.ad section { display:grid; gap:6px; min-width:0; margin:0; }
.ad .changes { margin:0; padding-left:18px; font-size:13px; }
.ad .shape { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:end; margin:0; padding:0; background:none; border-radius:0; }
.ad .shape h2 { width:auto; align-self:center; margin-right:6px; }
.ad .shape label { display:flex; align-items:center; gap:5px; color:var(--ink); font-size:13px; }
.ad .shape select, .ad td select { min-height:30px; border:1px solid #8a919c; border-radius:2px; font-size:13.5px; background:#fff; }
.ad table { font-size:13px; border:1px solid var(--line); }
.ad th, .ad td { padding:5px 8px; border:1px solid var(--line); }
.ad thead th { background:var(--bg); color:var(--ink); font-size:12.5px; }
.ad td.stops { min-width:220px; line-height:1.45; }
.ad #rows tr:hover td { background:#f6f8fa; }
.ad #rows tr.is-selected td { background:var(--accent-soft); }
.ad .date-btn { font-size:13px; white-space:nowrap; }
.ad .on-map { font-size:11px; }
.ad .slots { padding:0; gap:0; border:1px solid #8a919c; border-radius:2px; background:#fff; }
.ad .slots button { min-height:26px; padding:0 7px; border-radius:0; border-right:1px solid var(--line); font-size:12.5px; color:var(--ink); }
.ad .slots button:last-child { border-right:0; }
.ad .slots button:hover { background:var(--bg); color:var(--ink); }
.ad .slots button[aria-pressed="true"] { background:var(--accent); color:#fff; }
.ad .skip-btn { font-size:12.5px; color:var(--accent); white-space:nowrap; }
.ad .seg { display:inline-flex; padding:0; gap:0; border:1px solid #8a919c; border-radius:2px; background:#fff; }
.ad .seg button { min-height:26px; padding:0 10px; border:0; border-radius:0; background:#fff; font-size:12.5px; color:var(--ink); box-shadow:none; }
.ad .seg button[aria-pressed="true"] { background:var(--accent); color:#fff; font-weight:400; box-shadow:none; }
.ma-sechead { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.ad #plan-map { border-radius:0; border:1px solid var(--line); }
.ad .map-legend { border-radius:0; box-shadow:none; border:1px solid var(--line); font-size:12px; font-weight:400; }
.ad .plan-why__list { gap:0; margin:0; max-height:none; border-top:1px solid var(--line); }
.ad .plan-why__list li { padding:4px 0; border-bottom:1px solid var(--line); font-size:13px; }
.ad .plan-why__list span { font-size:12px; }
.ad .pin { border-radius:50%; }
.ad .foot-actions { margin:0; padding-top:10px; }
.ad .foot-actions .next-plan { min-height:36px; padding:0 20px; border-radius:2px; background:var(--accent); font-size:14px; }
.ad .toast { border-radius:2px; }
/* 案A：左メニュー、表と地図を左右に */
.ad-body { display:grid; grid-template-columns:150px minmax(0,1fr); min-height:calc(100vh - 44px); }
.ad-side { display:grid; align-content:start; background:var(--bg); border-right:1px solid var(--line); }
.ad-side a { padding:10px 14px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); font-size:13.5px; }
.ad-side a[aria-current="page"] { background:#fff; font-weight:700; box-shadow:inset 3px 0 0 var(--accent); }
.ad-main { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,400px); gap:18px; max-width:1400px; padding:14px 16px; }
.ad-left { display:grid; gap:14px; align-content:start; min-width:0; }
.ad-a .ad-right { position:sticky; top:10px; align-self:start; }
.ad-a #plan-map { height:320px; }
.ad-a .ad-right .plan-why__list { max-height:calc(100vh - 430px); overflow-y:auto; }
/* 案B：上タブ、帳票のように1列で読む */
.ad-tabs { display:flex; gap:0; padding:0 16px; border-bottom:1px solid var(--line); background:var(--bg); }
.ad-tabs a { padding:9px 18px; color:var(--ink); text-decoration:none; font-size:13.5px; }
.ad-tabs a[aria-current="page"] { background:#fff; font-weight:700; box-shadow:inset 0 3px 0 var(--accent); }
.ad-doc { display:grid; gap:14px; max-width:1100px; margin:0 auto; padding:16px; }
.ad-cond { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
.ad-b .ma-map { grid-template-columns:minmax(0,3fr) minmax(260px,2fr); }
.ad-b .ma-sechead { grid-column:1 / -1; }
.ad-b #plan-map { height:280px; }
.ad-b .plan-why__list { max-height:280px; overflow-y:auto; border-top:0; }
.ad-b .shape { flex-direction:column; align-items:flex-start; }
@media (max-width:900px) { .ad-body, .ad-main, .ad-cond, .ad-b .ma-map { grid-template-columns:minmax(0,1fr); } .ad-side { display:flex; flex-wrap:wrap; border-right:0; } .ad-a .ad-right { position:static; } }
.ad .seg { flex:none; } .ad .seg button { white-space:nowrap; } .ad .ma-sechead h2 { min-width:0; }
.ad-b .shape h2 { align-self:flex-start; margin:0; }
.ad-b .ad-cond { align-items:start; }
.ad-b .shape { display:grid; grid-template-columns:repeat(2, max-content); justify-content:start; gap:8px 18px; }
.ad-b .shape h2 { grid-column:1 / -1; }

/* メモ扱いの情報は控えめに */
.ad .memo { gap:2px; }
.ad .memo h2 { color:var(--muted); font-size:12px; font-weight:400; }
.ad .memo .changes { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:0 14px; padding:0; list-style:none; color:var(--muted); font-size:12px; }
/* 各画面への展開 */
.ad-fill { display:flex; flex-direction:column; height:100vh; }
.ad-fill .ad-body { flex:1; min-height:0; }
.ad-fill .stage { height:100%; }
.ad .panel { top:0; left:0; bottom:0; border-radius:0; box-shadow:none; border-right:1px solid var(--line); }
.ad .panel h1 { font-size:17px; }
.ad .seg--four, .ad .controls .seg { display:grid; }
.ad .rank[aria-current="true"] { box-shadow:inset 3px 0 0 var(--accent); }
.ad .tag, .ad .actions button { border-radius:2px; }
.ad .console { border-radius:0; box-shadow:none; border:1px solid var(--line); border-left:3px solid var(--accent); }
.ad .to-plan { border-radius:2px; }
.ad .ad-page { width:auto; max-width:1100px; margin:0; padding:14px 16px; border:0; border-radius:0; background:none; }
.ad .ad-page h1 { font-size:20px; }
.ad .ad-page h2 { margin:18px 0 6px; }
.ad .ad-page .lead { margin-top:6px; font-size:14px; }
.ad .print, .ad .toggle, .ad .next-plan { border-radius:2px; }
.ad .print { min-height:32px; }
.ad .stats { gap:0; margin-top:12px; border:1px solid var(--line); }
.ad .stat { border-radius:0; background:none; padding:8px 12px; border-right:1px solid var(--line); }
.ad .stat:last-child { border-right:0; }
.ad .stat span { font-size:12.5px; }
.ad .stat b { color:var(--ink); font-size:22px; }
.ad .saved.demo-note { margin-top:8px; }
.ad .foot-actions { border-top:1px solid var(--line); }
.ad-home .home { max-width:900px; padding:24px 16px; }
.ad-home h1 { font-size:20px; padding-bottom:8px; border-bottom:2px solid var(--ink); }
.ad-home .home__cards { margin-top:14px; gap:0; border:1px solid var(--line); }
.ad-home .home__card { border:0; border-right:1px solid var(--line); border-radius:0; }
.ad-home .home__card:last-child { border-right:0; }
.ad-home .home__card:hover { background:var(--accent-soft); }
.ad-home .home__card b { font-size:15px; }
@media (max-width:640px) { .ad-home .home__card { border-right:0; border-bottom:1px solid var(--line); } .ad .stats { grid-template-columns:1fr 1fr; } }
@media print { .ad-top, .ad-side { display:none; } .ad-body { display:block; } }
/* スマホの画面 */
.ad-lite { --accent:#0b3a82; --accent-soft:#e8eef7; --line:#c9ced6; }
.ad-lite .role { padding:0; background:none; color:var(--muted); font-weight:400; }
.ad-lite .m-primary, .ad-lite .m-ghost, .ad-lite .stepper button, .ad-lite .m-picked, .ad-lite .m-thanks, .ad-lite .m-card input, .ad-lite textarea { border-radius:3px; }
.ad-lite label span, .ad-lite .chip { border-radius:3px !important; }