:root{
  --ink:#243447;
  --ink-soft:#5a6a7a;
  --bg:#f4f8fc;
  --bg-alt:#ffffff;
  --line:#d5e0ea;
  --sky:#3b82c4;
  --sky-deep:#2563a8;
  --sky-soft:#e8f2fa;
  --warm:#fff7e8;
  --ok:#e8f6ee;
  --ok-line:#2f7d4a;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN",sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.85;font-size:1.05rem;
}
a{color:var(--sky-deep);}
.site-header{background:#fff;padding:12px 20px;border-bottom:1px solid var(--line);}
.site-header a{color:var(--ink-soft);font-size:.85rem;font-weight:700;letter-spacing:.04em;text-decoration:none;}
.wrap{max-width:720px;margin:0 auto;padding:28px 22px 64px;}
.brand{
  display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.06em;
  color:var(--sky-deep);border:1px solid #b7d0e6;background:var(--sky-soft);
  padding:6px 16px;margin-bottom:16px;border-radius:999px;
}
h1{font-size:clamp(1.3rem,3.8vw,1.8rem);font-weight:700;line-height:1.45;margin-bottom:16px;}
h2{font-size:1.15rem;font-weight:700;margin:32px 0 12px;color:var(--ink);}
h2 .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;margin-right:8px;border-radius:50%;
  background:var(--sky-deep);color:#fff;font-size:.85rem;
}
.cap{color:var(--ink-soft);margin-bottom:18px;}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 28px;}
.flow div{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:12px 10px;text-align:center;font-size:.85rem;font-weight:700;
}
.flow span{display:block;color:var(--sky-deep);font-size:.75rem;font-weight:700;margin-bottom:4px;}
.box,.ok,.warn{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;margin:12px 0;
}
.ok{background:var(--ok);border-color:#b7dcc4;}
.warn{background:var(--warm);border-color:#ead9b0;}
.box h3{font-size:1rem;margin:16px 0 8px;color:var(--sky-deep);}
.box h3:first-child{margin-top:0;}
.box img{display:block;width:100%;height:auto;border-radius:8px;margin:12px 0;border:1px solid var(--line);}
.box p + p{margin-top:12px;}
.box ol,.box ul,.ok ul{margin:8px 0 0 1.2em;}
.box li,.ok li{margin:8px 0;}
code{background:var(--sky-soft);padding:2px 7px;border-radius:4px;font-size:.92em;}
pre{
  background:#243447;color:#eef5fb;padding:14px 16px;border-radius:10px;
  overflow-x:auto;font-size:.95rem;margin:10px 0;
}
.note{font-size:.88rem;color:var(--ink-soft);margin-top:14px;line-height:1.75;}
.faq{margin-top:8px;}
.faq details{
  border:2px solid #9ec0dc;border-radius:12px;margin-bottom:10px;background:#fff;overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:14px 16px;font-weight:700;
  background:var(--sky-soft);display:flex;justify-content:space-between;gap:12px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"▼";font-size:.75rem;color:var(--sky-deep);}
.faq details[open] summary{border-bottom:1px solid var(--line);background:#dff0ff;}
.faq details[open] summary::after{content:"▲";}
.faq .a{padding:14px 16px;color:var(--ink-soft);}
.faq .hint{display:block;font-size:.8rem;font-weight:500;color:var(--ink-soft);margin-top:4px;}
footer{background:#fff;color:var(--ink-soft);text-align:center;padding:28px 20px 48px;font-size:.85rem;border-top:1px solid var(--line);}
footer a{color:var(--sky-deep);text-decoration:none;font-weight:700;}
@media(max-width:560px){.flow{grid-template-columns:1fr 1fr;}}