:root{
  --white:#FFFFFF; --base:#F4F9FC; --mint:#E6F5FA; --ink:#14295A;
  --blue:#1D4E9E; --aqua:#3BB9D3; --aqua-d:#1E8FAA; --amber:#F08A24;
  --line:#D6E6EE; --gray:#5F6B78; --warn:#D2554A;
  --sans:"Zen Kaku Gothic New",sans-serif; --hand:"Klee One",cursive;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:#E7F1F6;font-family:var(--sans);color:var(--ink);line-height:1.95;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
.wrap{max-width:720px;margin:0 auto;background:var(--white);box-shadow:0 0 30px rgba(20,41,90,.08);min-height:100vh}

/* header */
.hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--white);position:sticky;top:0;z-index:10}
.hd .brand{text-decoration:none;color:var(--ink);display:flex;flex-direction:column;line-height:1.2}
.hd .brand small{font-size:9.5px;font-weight:700;letter-spacing:.12em;color:var(--aqua-d)}
.hd .brand b{font-size:17px;font-weight:900;letter-spacing:.06em}
.hd .hcta{flex-shrink:0;text-decoration:none;background:var(--amber);color:#fff;font-size:11.5px;font-weight:900;padding:8px 12px;border-radius:6px;box-shadow:0 2px 0 #B8621A}

.crumb{font-size:10.5px;color:var(--gray);padding:12px 20px 0}
.crumb a{color:var(--gray)}

/* article */
article{padding:18px 20px 40px}
.cat{display:inline-block;font-size:10px;font-weight:900;letter-spacing:.12em;color:var(--aqua-d);border:1.5px solid var(--aqua-d);border-radius:999px;padding:0 10px}
article h1{font-size:22px;font-weight:900;line-height:1.55;margin:10px 0 8px}
.meta{font-size:10.5px;color:#8a95a3;margin-bottom:18px}
.lead{background:var(--base);border-left:4px solid var(--aqua);padding:14px 16px;font-size:13.5px;border-radius:0 8px 8px 0;margin-bottom:22px}
.toc{border:1px solid var(--line);border-radius:8px;padding:14px 18px;margin-bottom:30px}
.toc p{font-weight:900;font-size:13px;margin-bottom:4px}
.toc ol{padding-left:20px;font-size:12.5px}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--blue);text-decoration:underline}
article h2{font-size:18.5px;font-weight:900;line-height:1.6;margin:38px 0 14px;padding:10px 14px;background:var(--ink);color:#fff;border-radius:6px;scroll-margin-top:70px}
article h3{font-size:15.5px;font-weight:900;line-height:1.6;margin:24px 0 8px;padding-left:10px;border-left:4px solid var(--aqua)}
article p{font-size:14px;margin-bottom:14px}
article ul,article ol{font-size:14px;padding-left:22px;margin-bottom:14px}
article li{margin-bottom:4px}
article strong{background:linear-gradient(transparent 62%,rgba(59,185,211,.32) 62%)}
.box{border-radius:8px;padding:14px 16px;margin:18px 0;font-size:13.5px}
.box>b:first-child{display:block;font-size:13px;margin-bottom:4px}
.box p,.box ul{font-size:13.5px;margin-bottom:6px}
.box.point{background:var(--mint);border:1px solid #BFE4EF}
.box.point>b:first-child{color:var(--aqua-d)}
.box.caution{background:#FDF2F0;border:1px solid #F1CFC9}
.box.caution>b:first-child{color:var(--warn)}
table{width:100%;border-collapse:collapse;font-size:12.5px;margin:6px 0 18px}
th,td{border:1px solid var(--line);padding:9px 8px;line-height:1.55;text-align:left;vertical-align:top}
thead th{background:var(--ink);color:#fff;font-size:12px}
tbody th{background:var(--base);font-weight:700;width:30%}
.check li{list-style:none;position:relative;padding-left:24px}
.check li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:7px;border-left:2.5px solid var(--aqua-d);border-bottom:2.5px solid var(--aqua-d);transform:rotate(-45deg)}
.check{padding-left:0 !important}
.summary{border:2px solid var(--ink);border-radius:10px;padding:16px 18px;margin-top:34px}
.summary>b{display:block;font-size:15px;font-weight:900;margin-bottom:6px}
.note{font-size:11px;color:#8a95a3;margin-top:24px;line-height:1.8}

/* CTA */
.ctabox{margin:34px 0 0;background:linear-gradient(160deg,#54C0DC,#2FA6C4);border-radius:12px;padding:24px 18px;text-align:center;color:#fff}
.ctabox .t{font-family:var(--hand);font-weight:600;font-size:19px;line-height:1.7;margin-bottom:4px}
.ctabox .s{font-size:12px;margin-bottom:14px;opacity:.95}
.cta{display:block;text-align:center;text-decoration:none;background:var(--amber);color:#fff;font-weight:900;font-size:15.5px;padding:15px 12px;border-radius:8px;box-shadow:0 4px 0 #B8621A}
.cta small{display:block;font-size:10.5px;font-weight:700}
.ctabox .lp{display:inline-block;margin-top:12px;color:#fff;font-size:12px;font-weight:700}

/* related / list */
.rel{padding:6px 20px 40px}
.rel h2,.listhead h1{font-size:17px;font-weight:900;margin-bottom:12px}
.cards{list-style:none;display:grid;gap:10px}
.cards a{display:block;text-decoration:none;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:8px;padding:12px 14px;transition:border-color .2s}
.cards a:hover{border-color:var(--aqua)}
.cards .c{font-size:9.5px;font-weight:900;letter-spacing:.1em;color:var(--aqua-d)}
.cards b{display:block;font-size:13.5px;line-height:1.55}
.cards span{display:block;font-size:11px;color:var(--gray);margin-top:3px;line-height:1.6}
.listhead{padding:26px 20px 10px;text-align:center}
.listhead h1{font-size:22px;margin-bottom:4px}
.listhead p{font-size:12px;color:var(--gray)}
.listhead .eb{font-size:10.5px;font-weight:900;letter-spacing:.3em;color:var(--aqua-d)}
.list{padding:14px 20px 40px}

footer{background:var(--ink);color:#9fb0c9;font-size:10.5px;text-align:center;padding:22px 16px 30px;line-height:2}
footer a{color:#cfe0f2}
@media (min-width:600px){article h1{font-size:26px}article{padding:22px 34px 48px}.rel,.list{padding-left:34px;padding-right:34px}}
.ctabox .sub{display:block;margin-top:12px;color:#fff;font-size:11.5px;text-decoration:none}
.ctabox .sub b{text-decoration:underline;margin-left:4px}
.hd nav{display:flex;gap:6px;flex-shrink:0}
.hd .hbook{text-decoration:none;color:var(--blue);border:1.5px solid var(--blue);font-size:11.5px;font-weight:900;padding:7px 10px;border-radius:6px}
@media (max-width:340px){.hd .hbook{display:none}}