@import url("https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Shippori+Mincho:wght@500;700&display=swap");
:root {
  --bg: #faf8f4;
  --surface: #ffffff;
  --text: #25221e;
  --muted: #6b655c;
  --line: #ddd6ca;
  --accent: #a3323b;
  --field-line: #9a9184;
  --ok-bg: #edf5ec; --ok-line: #7fae79;
  --warn-bg: #fdf3dc; --warn-line: #d9a53a;
  --danger-bg: #fbe6e4; --danger-line: #cf5b52;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1917; --surface: #25221f; --text: #ece7df; --muted: #a59e93; --line: #3d3833; --accent: #e58a90; --field-line: #7d756a;
    --ok-bg: #20301f; --ok-line: #4f7a4a;
    --warn-bg: #3a2f14; --warn-line: #a17a22;
    --danger-bg: #3d1f1c; --danger-line: #a5463e;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  font-size: 18px; line-height: 1.8;
}
header.site, footer.site, main { max-width: 760px; margin: 0 auto; padding: 0 16px; }
header.site { padding-top: 16px; padding-bottom: 8px; font-size: 14px; }
header.site a { color: var(--muted); text-decoration: none; }
footer.site { padding: 32px 16px 48px; color: var(--muted); font-size: 13px; }
h1 { font-size: 26px; line-height: 1.4; margin: 16px 0 8px; }
h2 { font-size: 20px; margin: 40px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--line); }
h3 { font-size: 16px; margin: 24px 0 8px; }
a { color: var(--accent); }
.lead { color: var(--muted); margin: 0 0 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin: 16px 0; }
.fields { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 460px; }
.field label, .field .label { display: block; font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.field .row { display: flex; gap: 6px; align-items: center; }
input[type="number"], input[type="date"], select {
  font: inherit; color: inherit; background: var(--bg); border: 2px solid var(--field-line);
  border-radius: 8px; padding: 10px 12px; min-width: 0; width: 100%; min-height: 52px; font-size: 20px;
}
.field .row select, .field .row .unit { width: auto; flex: none; }
.field label.check { display: flex; align-items: center; gap: 10px; min-height: 52px; font-weight: normal; font-size: 18px; }
.check input { width: 26px; height: 26px; }
button {
  font: inherit; color: var(--accent); background: transparent; border: 1px solid var(--accent);
  border-radius: 8px; padding: 10px 16px; min-height: 48px; cursor: pointer;
}
button:hover { background: var(--accent); color: var(--surface); }
.notice { border-left: 4px solid; border-radius: 4px; padding: 10px 14px; margin: 16px 0 8px; }
.notice.ok { background: var(--ok-bg); border-color: var(--ok-line); }
.notice.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.notice.danger { background: var(--danger-bg); border-color: var(--danger-line); }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
td { font-variant-numeric: tabular-nums; }
table.result th { font-weight: normal; color: var(--muted); width: 46%; }
table.result td { font-weight: 600; font-size: 20px; }
table.result td small { font-weight: normal; font-size: 14px; color: var(--muted); }
table.grid th { font-size: 15px; white-space: nowrap; }
table.grid td { white-space: nowrap; }
table.grid td.wrap { white-space: normal; min-width: 220px; }
ul.shopping { list-style: none; padding: 0; margin: 0; }
ul.shopping li { padding: 6px 0; border-bottom: 1px solid var(--line); }
ul.shopping .qty { font-weight: 600; margin-left: 6px; }
.note { font-size: 14px; color: var(--muted); }
ul.sources { font-size: 14px; padding-left: 20px; }
ul.sources li { margin-bottom: 4px; overflow-wrap: anywhere; }
ul.pages { list-style: none; padding: 0; }
ul.pages li { margin: 12px 0; }
ul.pages a { font-size: 18px; font-weight: 600; }
input:focus, select:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
input::placeholder { color: var(--muted); opacity: .7; }
.hint { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.howto { margin: 0 0 16px; }
.step {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 8px;
  border-radius: 50%; background: var(--accent); color: var(--surface); font-size: 16px;
}
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.presets button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 68px; padding: 6px 10px; line-height: 1.3; font-size: 18px; }
.presets button small { font-size: 12px; }
.presets button[aria-pressed="true"] { background: var(--accent); color: var(--surface); }
h2.in-card { margin-top: 28px; }
.headline { margin: 0; font-size: 22px; }
.headline strong { font-size: 32px; color: var(--accent); }
.headline small { display: block; font-size: 15px; color: var(--muted); }
ol.steps { list-style: none; counter-reset: step; margin: 0 0 16px; padding: 0; }
ol.steps li { counter-increment: step; position: relative; padding: 0 0 20px 48px; border-left: 2px solid var(--line); margin-left: 17px; }
ol.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
ol.steps li::before {
  content: counter(step); position: absolute; left: -18px; top: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: var(--surface); display: flex; align-items: center; justify-content: center; font-weight: 600;
}
ol.steps li { padding-left: 28px; }
ol.steps .when { display: block; font-size: 15px; color: var(--accent); font-weight: 600; }
ol.steps strong { font-size: 20px; }
ol.steps p { margin: 4px 0 0; }
table.result th small { display: block; font-size: 14px; }
table.choice tr.on > * { background: var(--ok-bg); }
table.choice th small { display: block; font-weight: normal; font-size: 13px; color: var(--muted); }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin: 10px 0; }
.faq summary { cursor: pointer; padding: 14px 16px; font-weight: 600; min-height: 52px; }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq details > p, .faq details > ul { margin: 12px 16px; }
.faq details > ul { padding-left: 22px; }
.faq li { margin-bottom: 6px; }
.field.main label { font-size: 22px; }
.field.main input, .field.main select { font-size: 26px; min-height: 60px; }
table.buy th { color: var(--text); font-size: 20px; font-weight: 600; width: 34%; }
table.buy td { font-size: 26px; color: var(--accent); }
table.buy td small { display: block; color: var(--muted); }
.yield { margin: 12px 0 0; }

/* ---- 手ざわり: 紙、明朝の見出し、手書きふうのメモ ---- */
:root { --paper: #fffdf3; --rule: #c9d3dc; --tape: rgba(214, 160, 150, .55); --hand: "Klee One", "Yu Kyokasho", "UD Digi Kyokasho N-R", "Hiragino Maru Gothic ProN", sans-serif; }
@media (prefers-color-scheme: dark) { :root { --paper: #2c2924; --rule: #4a4640; --tape: rgba(170, 110, 105, .5); } }
body { background-image: radial-gradient(rgba(120, 100, 70, .07) 1px, transparent 1px); background-size: 5px 5px; }
h1, h2, h3, header.site a { font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif; font-weight: 700; letter-spacing: .04em; }
h1 { font-size: 30px; }
h1::before { content: ""; display: inline-block; width: 22px; height: 22px; margin-right: 10px; border-radius: 50% 46% 52% 48%; background: var(--accent); vertical-align: -1px; }
h2 { border-bottom: 0; padding-bottom: 0; font-size: 23px; }
h2::after { content: ""; display: block; width: 3.2em; height: 0; margin-top: 4px; border-bottom: 3px solid var(--accent); border-radius: 2px; transform: rotate(-1deg); }
h3 { font-size: 19px; }
.card { border-radius: 3px; border-color: var(--line); box-shadow: 2px 3px 0 rgba(90, 70, 40, .08); padding: 20px 18px; }
input[type="number"], input[type="date"], select, button { border-radius: 4px; }
.memo {
  position: relative; margin: 34px 2px 28px; padding: 26px 18px 16px; background: var(--paper);
  box-shadow: 1px 2px 6px rgba(60, 45, 20, .22); transform: rotate(-.5deg); font-family: var(--hand);
}
.memo::before { content: ""; position: absolute; top: -13px; left: 50%; width: 110px; height: 26px; margin-left: -55px; background: var(--tape); transform: rotate(1.5deg); }
.memo h2 { margin: 0 0 6px; font-family: var(--hand); font-weight: 600; letter-spacing: .1em; }
.memo h2::after { display: none; }
.memo th, .memo td { border-bottom: 1px solid var(--rule); padding: 10px 6px; }
.memo table.buy th { font-size: 21px; }
.memo table.buy td { font-size: 30px; line-height: 1.3; }
.memo table.buy td small { font-size: 15px; }
.memo .notice { font-family: inherit; font-size: 16px; }
.memo .yield { font-size: 17px; }
ol.steps li::before { background: var(--surface); color: var(--accent); border: 2px solid var(--accent); font-family: var(--hand); border-radius: 50% 47% 52% 48%; }
ol.steps strong { font-family: "Shippori Mincho", "Yu Mincho", serif; }
ol.steps .when { font-family: var(--hand); }
.qa { margin: 22px 0; padding-bottom: 14px; border-bottom: 2px dotted var(--line); }
.qa h3 { margin: 0 0 6px; }
.qa h3::before { content: "問"; display: inline-block; margin-right: 8px; padding: 0 6px; font-size: 14px; color: var(--surface); background: var(--accent); border-radius: 2px; vertical-align: 2px; }
.qa p, .qa ul { margin: 6px 0; }
.qa ul { padding-left: 22px; }
table.grid thead th { border-bottom: 2px solid var(--text); }
.modes { margin-bottom: 20px; }
.modes button { flex: 1 1 150px; min-height: 56px; font-size: 18px; font-weight: 600; }
footer.site { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 16px; }
footer.site a { color: var(--muted); margin-right: 20px; display: inline-block; padding: 8px 0; }