:root { --navy:#132a4a; --action:#1f4e8c; --bg:#f3f6fa; --card:#fff; --ink:#1c2b3a; --muted:#5f6f86; --line:#dce4ee; --soft:#edf4fc; font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif; color:var(--ink); background:var(--bg); }
* { box-sizing:border-box; }button,a,summary{-webkit-tap-highlight-color:transparent;transition:transform .08s ease,filter .08s ease}button:active,a:active,summary:active{transform:scale(.96);filter:brightness(.94)} html { scroll-behavior:smooth; } body { margin:0; font-size:16px; line-height:1.7; overflow-x:hidden; } .header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px max(24px,env(safe-area-inset-right)) 16px max(24px,env(safe-area-inset-left)); color:#fff; background:var(--navy); } .header > div { min-width:0; } h1,h2,h3,h4 { line-height:1.35; } .header h1 { margin:0; font-size:22px; } .eyebrow,.part-label { margin:0 0 2px; color:#c5d5e8; font-size:11px; font-weight:800; letter-spacing:.13em; } .header-actions { display:flex; gap:8px; } .text-button { min-height:40px; border:1px solid #aebfd3; border-radius:8px; padding:7px 11px; color:#fff; background:transparent; font:inherit; text-decoration:none; white-space:nowrap; } main { width:min(880px,100%); margin:auto; padding:28px 20px 64px; } .hero,.part,.toc { border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:0 2px 8px rgba(19,42,74,.07); } .hero { padding:24px; border-color:#c8d9ec; background:var(--soft); } .hero p { max-width:760px; margin:0; color:#314b69; } .hero .audience { margin-top:10px; font-size:14px; font-weight:700; } .toc { margin-top:18px; padding:0 20px; } .toc summary { padding:14px 0; color:var(--action); font-weight:800; cursor:pointer; } .toc nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 16px; padding:0 0 16px; } .toc a { color:var(--action); overflow-wrap:anywhere; } .part { margin-top:18px; padding:28px; } .part-label { color:var(--action); font-size:12px; } .part > h2 { margin:2px 0 22px; font-size:25px; } .part section { margin-top:30px; padding-top:6px; border-top:1px solid var(--line); } .part section:first-of-type { margin-top:0; border-top:0; } h3 { margin:0 0 12px; font-size:20px; } h4 { margin:20px 0 8px; font-size:17px; } p,li,dd { overflow-wrap:break-word; } ol,ul { padding-left:1.5em; } li + li { margin-top:5px; } table { width:100%; table-layout:fixed; border-collapse:collapse; margin:14px 0; background:#fff; font-size:14px; } th,td { padding:9px 10px; border:1px solid var(--line); text-align:left; vertical-align:top; overflow-wrap:anywhere; word-break:break-word; } th { background:#f4f8fc; } code { font-size:.92em; overflow-wrap:anywhere; } .table-scroll { margin:0 -1px; } .muted { color:var(--muted); font-size:14px; } .tip { margin:14px 0; padding:12px 14px; border-left:4px solid #5d8ec3; border-radius:8px; background:#edf4fc; color:#29445f; } .tip.strong { border-color:#c58d24; background:#fff5df; color:#62450d; } dl { margin:0; } dt { margin-top:14px; font-weight:800; } dt:first-child { margin-top:0; } dd { margin:2px 0 0; color:var(--muted); } .appendix table { font-size:14px; }
.quickstart { margin:20px 0 4px; padding:18px 20px; border:1px solid #c8d9ec; border-radius:12px; background:var(--soft); } .quickstart h3 { margin:0 0 10px; font-size:17px; } .quickstart ol { margin:0; padding-left:1.4em; } .quickstart li { margin-top:6px; } .quickstart .muted { margin:12px 0 0; }
.formula { margin:14px 0; padding:14px 16px; border:1px dashed #9db6d4; border-radius:10px; background:#f7fbff; color:#1c3a5e; font-weight:700; text-align:center; }
.faq-group { margin-top:26px; } .faq-group:first-of-type { margin-top:14px; } .faq-group h3 { margin:0 0 10px; font-size:17px; color:var(--action); } details.faq { margin:8px 0; border:1px solid var(--line); border-radius:10px; background:#fafcff; overflow:hidden; } details.faq summary { padding:12px 14px; font-weight:700; cursor:pointer; list-style:none; } details.faq summary::-webkit-details-marker { display:none; } details.faq[open] summary { border-bottom:1px solid var(--line); background:#eef4fb; } details.faq p { margin:0; padding:12px 14px; color:#33465e; }
@media (max-width:720px) { main { padding:18px 14px 44px; } .header { align-items:flex-start; padding:14px 16px; } .header h1 { font-size:19px; } .header-actions { flex-direction:column; } .text-button { text-align:center; } .hero,.part,.toc { border-radius:12px; } .hero,.part { padding:18px; } .toc { padding:0 16px; } .toc nav { grid-template-columns:1fr; } .part > h2 { font-size:22px; } table { font-size:13px; } th,td { padding:8px; } }
@media print { :root,body { background:#fff; color:#000; } .header { color:#000; background:#fff; border-bottom:1px solid #999; } .header-actions,.toc { display:none; } main { width:auto; max-width:none; padding:0; } .hero,.part { border:0; border-radius:0; box-shadow:none; } .hero { padding:12px 0; background:#fff; } .part { padding:16px 0; break-before:auto; } .part section,table,details.faq { break-inside:avoid; } details.faq { border:0; background:#fff; } details.faq p { padding:2px 0 8px; } a { color:#000; text-decoration:none; } }