:root { --fg:#222; --muted:#666; --accent:#d6336c; --blue:#1971c2; --bg:#fbf8f3; --card:#fff; --line:#e6dfd3; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; color:var(--fg); background:var(--bg); line-height:1.7; }
header.site, main, footer.site { max-width: 980px; margin: 0 auto; padding: 0 16px; }
header.site { padding-top: 24px; }
h1 { font-size: 1.6rem; margin: 0 0 8px; } h1 small { font-size: .55em; color: var(--accent); border:1px solid var(--accent); border-radius: 999px; padding: 1px 10px; vertical-align: middle; }
h2 { font-size: 1.2rem; margin: 0 0 12px; display:flex; align-items:center; gap:10px; }
.num { display:inline-flex; width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; align-items:center; justify-content:center; font-size:.95rem; flex:none; }
.lead { margin: 0 0 8px; }
.badges { list-style:none; padding:0; margin:8px 0 16px; display:flex; flex-wrap:wrap; gap:6px; }
.badges li { background:#eef6ee; border:1px solid #c7e0c7; border-radius:999px; padding:2px 12px; font-size:.85rem; }
.badges li.warn { background:#fff4e0; border-color:#f0c987; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin: 0 0 16px; }
.card.accent { border-color: var(--blue); box-shadow: 0 0 0 2px #e7f1fb inset; }
.presets { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.presets button { border:1px solid var(--line); background:#fff; border-radius:10px; padding:8px 12px; cursor:pointer; font:inherit; min-height:44px; }
.presets button[aria-pressed="true"] { border-color:var(--accent); background:#fff0f5; font-weight:700; }
.field { display:block; margin: 8px 0; } .field .how { display:block; font-size:.82rem; color:var(--muted); font-weight:400; }
input[type=number], input[type=text], select { font:inherit; padding:8px 10px; border:1px solid #bbb; border-radius:8px; width: 9em; min-height:44px; }
input[type=text] { width:100%; }
.hint { color:var(--muted); font-size:.88rem; margin: 6px 0; }
.measure { display:grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 16px; align-items:start; }
.diagram { margin:0; } .diagram svg { width:100%; height:auto; background:#faf6ef; border-radius:10px; border:1px solid var(--line); }
.inputs { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 4px 16px; }
.modes { border:1px solid var(--line); border-radius:8px; margin:0 0 10px; } .modes label { display:block; margin:4px 0; }
.row { display:flex; flex-wrap:wrap; gap: 8px 20px; align-items:center; } .inline { display:inline-flex; gap:8px; align-items:center; }
.summary { list-style:none; padding:0; margin:0 0 10px; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.92rem; }
.summary li { background:#f5f1ea; border-radius:8px; padding:2px 10px; }
.summary li.alert { background:#fff4e0; }
.preview { border:1px solid var(--line); border-radius:10px; overflow:auto; max-height: 560px; background:#fff; padding:6px; }
.preview svg { width:100%; height:auto; max-height: 540px; display:block; margin:0 auto; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin: 12px 0; }
button.primary, button.secondary, a.btn { font:inherit; border-radius:10px; padding:10px 18px; min-height:44px; cursor:pointer; border:1px solid var(--accent); text-decoration:none; display:inline-flex; align-items:center; }
button.primary { background:var(--accent); color:#fff; font-weight:700; } button.secondary, a.btn { background:#fff; color:var(--accent); }
button:disabled { opacity:.5; cursor:not-allowed; }
.error { background:#ffe8e8; border:1px solid #f5a3a3; border-radius:8px; padding:8px 12px; color:#8a1c1c; }
.print-notes { font-size:.9rem; color:#444; padding-left: 1.2em; }
.steps { padding-left: 1.4em; } .steps li { margin: 8px 0; } .steps input { margin-right: 6px; transform: scale(1.2); }
table.check { border-collapse: collapse; width:100%; font-size:.88rem; margin: 10px 0; }
table.check th, table.check td { border:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; }
table.check thead th { background:#f5f1ea; } table.check caption { text-align:left; color:var(--muted); font-size:.85rem; padding-bottom:4px; }
.fb { border:1px solid var(--line); border-radius:8px; margin: 8px 0; } .fb label { margin-right: 14px; display:inline-block; min-height: 32px; }
textarea { width:100%; font:inherit; border:1px solid #bbb; border-radius:8px; padding:8px; }
footer.site { padding-bottom: 40px; color:#444; font-size:.88rem; } footer.site h2 { font-size:1rem; }
details.tips { margin-top: 8px; }
@media (max-width: 680px) { .measure { grid-template-columns: 1fr; } h1 { font-size: 1.3rem; } }
.operator { margin: 4px 0 8px; color: var(--muted); font-size: .9rem; }
details.legal-fold { margin: 8px 0; }
/* スマホ: 比較表は「場所ごとのカード」に縦積み（列が細くなって 1 文字ずつ改行されるのを防ぐ） */
@media (max-width: 680px) {
  table.check, table.check tbody, table.check tr, table.check th, table.check td { display:block; width:100%; box-sizing:border-box; }
  table.check caption { display:block; width:100%; }
  table.check thead { position:absolute; left:-9999px; }
  table.check tr { border:1px solid var(--line); border-radius:8px; margin: 0 0 10px; overflow:hidden; }
  table.check tbody th { background:#f5f1ea; border:0; border-bottom:1px solid var(--line); }
  table.check td { border:0; border-top:1px solid #eee; }
  table.check td:first-of-type { border-top:0; }
  table.check td::before { content: attr(data-label) "： "; font-weight:700; color:var(--muted); }
}
/* 法務ページ */
.legal main h2 { font-size: 1.2rem; margin-top: 1.6em; } .legal main h3 { font-size: 1rem; margin-top: 1.2em; }
.legal table { border-collapse: collapse; width:100%; font-size:.88rem; display:block; overflow-x:auto; }
.legal th, .legal td { border:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; }