:root{
  --ink:#0B111C; --panel:#161F30; --panel2:#1F2B41;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.15);
  --tx:#E8ECF3; --tx2:#AEBCD0; --tx3:#6B7A92; --ai:#5EE7D0; --amb:#FBBF24;
}
*{box-sizing:border-box; margin:0; padding:0}
body{background:var(--ink); color:var(--tx);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif;
  line-height:1.9; -webkit-font-smoothing:antialiased; padding:0 18px 64px; font-size:16px}
.wrap{max-width:720px; margin:0 auto}
a{color:var(--ai); text-decoration:none}
a:hover{text-decoration:underline}
header.site{display:flex; align-items:center; justify-content:space-between;
  padding:18px 2px 10px; border-bottom:1px solid var(--line); margin-bottom:14px}
.logo{font-size:18px; font-weight:700; letter-spacing:-.02em; color:var(--tx)}
.logo b{color:var(--amb)}
.navlink{font-size:13px; color:var(--tx2)}
.crumb{font-size:12px; color:var(--tx3); margin:4px 2px 18px}
.crumb a{color:var(--tx2)}
h1{font-size:25px; font-weight:800; line-height:1.5; letter-spacing:-.01em; margin:6px 2px 10px}
.lead{font-size:15px; color:var(--tx2); margin:0 2px 26px; line-height:1.85}
article h2{font-size:20px; font-weight:700; margin:34px 2px 12px; padding-top:8px; border-top:1px solid var(--line)}
article h3{font-size:16px; font-weight:700; color:var(--tx); margin:22px 2px 8px}
article p{margin:0 2px 15px; color:var(--tx)}
article ul{margin:4px 2px 16px; padding-left:2px; list-style:none}
article li{position:relative; padding:4px 0 4px 18px; color:var(--tx)}
article li::before{content:''; position:absolute; left:2px; top:14px; width:5px; height:5px; border-radius:99px; background:var(--ai)}
b,strong{color:#fff; font-weight:700}
.box{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:15px 17px; margin:20px 0}
.box .bt{font-size:13px; font-weight:700; color:var(--ai); margin-bottom:6px}
.box p{font-size:14px; color:var(--tx2); margin:0}
.tie{background:#121a2b; border:1px solid var(--ai); border-radius:14px; padding:16px 18px; margin:28px 0}
.tie .bt{font-size:14px; font-weight:700; color:var(--ai); margin-bottom:6px}
.tie p{font-size:14px; color:var(--tx2); margin:0}
.ad-slot{margin:26px 0; text-align:center; min-height:0}
.related{margin:30px 0 10px}
.related .rt{font-size:13px; font-weight:700; color:var(--tx2); margin-bottom:10px}
.related a{display:block; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; margin-bottom:9px; font-size:14px; color:var(--tx)}
.related a:hover{border-color:var(--line2); text-decoration:none}
.related a span{display:block; font-size:11px; color:var(--tx3); margin-top:3px}
.disclaimer{margin-top:28px; border:1px solid var(--line); border-radius:12px; padding:13px 15px;
  font-size:11.5px; color:var(--tx3); line-height:1.75}
footer.site{font-size:12px; color:var(--tx3); text-align:center; margin-top:34px;
  border-top:1px solid var(--line); padding-top:18px; line-height:2}
footer.site a{color:var(--tx2)}
/* 一覧ページ */
.hero-h{font-size:26px; font-weight:800; margin:14px 2px 8px}
.hero-p{font-size:14px; color:var(--tx2); margin:0 2px 26px}
.grid a{display:block; background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; margin-bottom:12px; color:var(--tx)}
.grid a:hover{border-color:var(--ai); text-decoration:none}
.grid .n{font-size:12px; color:var(--amb); font-weight:700}
.grid .t{font-size:17px; font-weight:700; margin:4px 0 4px; line-height:1.5}
.grid .d{font-size:13px; color:var(--tx2); line-height:1.7}