:root{
  --text:#22252a; --muted:#5c6470; --line:#d9dde3; --bg:#f6f7f9;
  --card:#ffffff; --accent:#1f5fa6; --accent-dark:#174a82;
  --warn-bg:#fff8e6; --warn-line:#e5cf8a;
  --radius:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--text); background:var(--bg);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  line-height:1.7; font-size:16px;
}
a{color:var(--accent)}
a:hover{color:var(--accent-dark)}
.wrap{max-width:760px; margin:0 auto; padding:0 16px}
header.site{
  background:var(--card); border-bottom:1px solid var(--line);
}
header.site .wrap{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding-top:14px; padding-bottom:14px;
}
.logo{font-size:22px; font-weight:700; color:var(--text); text-decoration:none}
.tagline{color:var(--muted); font-size:13px}
main{padding:24px 0 40px}
h1{font-size:26px; line-height:1.4; margin:0 0 12px}
h2{font-size:20px; margin:32px 0 10px; padding-bottom:4px; border-bottom:2px solid var(--line)}
h3{font-size:17px; margin:20px 0 6px}
p{margin:8px 0}
.lead{font-size:17px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; margin:16px 0;
}
.card h2,.card h3{border-bottom:none; margin-top:0; padding-bottom:0}
ul.tools{list-style:none; margin:0; padding:0}
ul.tools li{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; margin:12px 0;
}
ul.tools .t-name{font-size:18px; font-weight:700}
ul.tools .t-desc{color:var(--muted); font-size:14px; margin-top:4px}
.badge{
  display:inline-block; font-size:12px; font-weight:700; line-height:1;
  padding:4px 8px; border-radius:999px; vertical-align:middle; margin-left:8px;
}
.badge-live{background:#e2f2e4; color:#22602c; border:1px solid #a9d3ae}
.badge-soon{background:#eef0f3; color:var(--muted); border:1px solid var(--line)}
.note{
  background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:var(--radius);
  padding:14px 16px; margin:16px 0; font-size:14px;
}
.note strong{display:block; margin-bottom:4px}
.small{font-size:13px; color:var(--muted)}
table.formula{border-collapse:collapse; width:100%; margin:10px 0; font-size:15px}
table.formula th, table.formula td{border:1px solid var(--line); padding:8px 10px; text-align:left}
table.formula th{background:#eef2f7}
label.field{display:block; font-weight:700; margin:14px 0 6px}
input[type="number"], input[type="text"]{
  width:100%; font-size:20px; padding:12px; border:1px solid #b9c0c9; border-radius:8px;
  background:#fff; color:var(--text);
}
fieldset.mode{border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px; margin:14px 0}
fieldset.mode legend{font-weight:700; padding:0 6px}
fieldset.mode label{display:block; margin:8px 0; font-weight:400; cursor:pointer}
fieldset.mode .hint{margin-left:24px}
button.calc{
  display:block; width:100%; margin:18px 0 6px; padding:14px;
  font-size:18px; font-weight:700; color:#fff; background:var(--accent);
  border:none; border-radius:8px; cursor:pointer;
}
button.calc:hover{background:var(--accent-dark)}
.result{
  display:none; background:#eef6ee; border:1px solid #b7d8b7; border-radius:var(--radius);
  padding:16px 18px; margin:16px 0;
}
.result.show{display:block}
.result dl{margin:0}
.result .row{display:flex; justify-content:space-between; gap:16px; padding:6px 0; border-bottom:1px dashed #b7d8b7}
.result .row:last-child{border-bottom:none}
.result dt{color:var(--muted)}
.result dd{margin:0; font-weight:700; font-size:18px; white-space:nowrap}
.result .row.total dd{font-size:22px}
.error{display:none; color:#a4261f; font-weight:700; margin:10px 0}
.error.show{display:block}
footer.site{
  border-top:1px solid var(--line); background:var(--card);
  color:var(--muted); font-size:13px; padding:20px 0 28px;
}
footer.site p{margin:4px 0}
.crumb{font-size:13px; color:var(--muted); margin-bottom:8px}
@media (max-width:480px){
  h1{font-size:22px}
  .result dd{font-size:16px}
  .result .row.total dd{font-size:19px}
}