* { box-sizing: border-box; }
body { font-family: "Segoe UI", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif; margin: 0; color: #222; background: #f7f7f8; line-height: 1.75; }
nav { background: #1a2332; color: #fff; padding: 0 16px; position: sticky; top: 0; z-index: 10; }
nav ul { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; padding: 0; }
nav a { color: #cfd8e6; text-decoration: none; display: block; padding: 12px 14px; font-size: 14px; }
nav a:hover, nav a.cur { color: #fff; background: #2a3a55; }
main { max-width: 940px; margin: 0 auto; padding: 24px 20px 80px; }
h1 { font-size: 26px; border-bottom: 3px solid #2a6fd4; padding-bottom: 8px; }
h2 { font-size: 20px; margin-top: 48px; padding: 8px 12px; background: #e8eefb; border-left: 6px solid #2a6fd4; }
h3 { font-size: 16px; margin-top: 28px; color: #17406e; }
.card { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 16px 20px; margin: 14px 0; }
.steps { counter-reset: s; padding-left: 0; list-style: none; }
.steps li { counter-increment: s; margin: 10px 0; padding-left: 34px; position: relative; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: #2a6fd4; color: #fff; text-align: center; line-height: 24px; font-size: 13px; font-weight: bold; }
.warn { background: #fff8e6; border-left: 6px solid #f0a800; padding: 10px 14px; margin: 12px 0; border-radius: 4px; }
.warn::before { content: "注意点 "; font-weight: bold; color: #9a6a00; }
.tip { background: #e9f7ee; border-left: 6px solid #2ea35c; padding: 10px 14px; margin: 12px 0; border-radius: 4px; }
.tip::before { content: "コツ "; font-weight: bold; color: #1d7a42; }
.formula { background: #eef2f8; font-family: Consolas, monospace; padding: 10px 14px; border-radius: 6px; margin: 10px 0; font-size: 15px; }
table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 14px; }
th, td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
th { background: #eef2f8; }
svg.diagram { display: block; margin: 14px auto; background: #fff; border: 1px solid #e2e2e2; border-radius: 6px; max-width: 100%; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } }
.toc a { display: inline-block; margin: 4px 8px 4px 0; padding: 6px 12px; background: #fff; border: 1px solid #ccd; border-radius: 6px; text-decoration: none; color: #2a4a80; font-size: 14px; }
.toc a:hover { background: #e8eefb; }
.badge { display: inline-block; background: #2a6fd4; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-right: 6px; vertical-align: middle; }
.q { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 12px 16px; margin: 10px 0; }
.q .a { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #bbb; color: #155a30; }
.q input { margin-top: 8px; }
.q input:checked ~ .a { display: block; }
.q label { cursor: pointer; color: #2a6fd4; font-size: 13px; margin-left: 6px; }