:root{
  --ink:#16181d; --sub:#666c75; --bg:#f7f7f5; --card:#fff;
  --line:#dcdee2; --navy:#1b3a68; --red:#c0392b;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.9; font-size:16px;}
.wrap{max-width:760px; margin:0 auto; padding:0 18px;}

header.site{background:#fff; border-bottom:1px solid var(--line);}
header.site .wrap{display:flex; align-items:center; gap:12px; padding:14px 18px; max-width:900px;}
.logomark{width:34px; height:34px; background:var(--ink); color:#fff; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:17px; flex-shrink:0; text-decoration:none;}
.logotype{line-height:1.3;}
.logotype b{font-size:16px; letter-spacing:.04em; display:block; color:var(--ink);}
.logotype span{font-size:10px; color:var(--sub); letter-spacing:.14em;}
header.site a{text-decoration:none;}

.crumbs{max-width:760px; margin:0 auto; padding:12px 18px 0; font-size:12px; color:var(--sub);}
.crumbs a{color:var(--navy);}

article{background:#fff; border:1px solid var(--line); padding:34px 30px; margin:14px auto 0; max-width:760px;}
article h1{font-size:26px; line-height:1.5; letter-spacing:.01em; margin-bottom:10px;}
article .lead{color:var(--sub); font-size:14.5px; margin-bottom:8px;}
article .meta{font-size:12px; color:var(--sub); border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:24px;}
article h2{font-size:19px; margin:36px 0 12px; padding-left:12px; border-left:4px solid var(--navy); line-height:1.5;}
article h3{font-size:16px; margin:26px 0 8px;}
article p{margin-bottom:16px;}
article ul, article ol{margin:0 0 16px 22px;}
article li{margin-bottom:7px;}
article strong{font-weight:800;}

.toc{background:#fafaf8; border:1px solid var(--line); padding:16px 20px; margin-bottom:28px;}
.toc b{display:block; font-size:13px; letter-spacing:.08em; margin-bottom:8px;}
.toc ol{margin:0 0 0 20px; font-size:14px;}
.toc a{color:var(--navy);}

.note{background:#f4f4f1; border:1px solid var(--line); border-left:3px solid var(--ink);
  padding:14px 16px; font-size:14px; margin:20px 0; color:#3c4046;}
.notetag{display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.1em; color:#fff;
  background:var(--ink); padding:1px 8px; margin-right:8px; vertical-align:1px;}

.tblwrap{overflow-x:auto; margin:18px 0;}
table{border-collapse:collapse; width:100%; font-size:14px; background:#fff;}
th, td{border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top;}
th{background:#f4f4f1; font-size:12.5px; font-weight:700; color:#3c4046;}

.steps{list-style:none; counter-reset:st; margin:0 0 20px;}
.steps li{counter-increment:st; position:relative; padding:0 0 16px 44px; border-bottom:1px solid var(--line); margin-bottom:16px;}
.steps li:last-child{border-bottom:none;}
.steps li::before{content:counter(st,decimal-leading-zero); position:absolute; left:0; top:0;
  font-size:19px; font-weight:800; color:var(--navy); font-family:Arial,sans-serif;}
.steps b{display:block; margin-bottom:3px;}

.cta{border:1px solid var(--line); border-top:3px solid var(--navy); padding:20px; background:#fff; margin:28px 0;}
.cta b{display:block; font-size:16px; margin-bottom:6px;}
.cta p{font-size:14px; color:#3c4046; margin-bottom:12px;}
.cta a.btn{display:block; text-align:center; background:var(--navy); color:#fff; padding:14px;
  font-size:15px; font-weight:800; text-decoration:none;}

.related{background:#fff; border:1px solid var(--line); padding:22px 24px; margin:18px auto 0; max-width:760px;}
.related b{display:block; font-size:13px; letter-spacing:.08em; margin-bottom:10px;}
.related ul{list-style:none; margin:0;}
.related li{border-top:1px solid var(--line); padding:11px 0;}
.related a{color:var(--navy); font-weight:700; text-decoration:none; font-size:14.5px;}
.related a:hover{text-decoration:underline;}

footer{padding:28px 18px 44px; color:var(--sub); font-size:11.5px; line-height:1.9;
  border-top:1px solid var(--line); margin-top:36px; background:#fff;}
footer .wrap{max-width:760px;}
footer a{color:var(--sub);}

@media (max-width:600px){
  article{padding:24px 18px; border-left:none; border-right:none;}
  article h1{font-size:21px;}
  body{font-size:15.5px;}
}