*{box-sizing:border-box;margin:0;padding:0}
html,body{max-width:100%;overflow-x:hidden}
body{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;background:#F5F7FA;color:#1F2937;font-size:15px;line-height:1.85}
a{color:#2563EB;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
#site-header{background:#fff;border-bottom:3px solid #F59E0B;box-shadow:0 1px 6px rgba(0,0,0,.08);position:sticky;top:0;z-index:10}
.header-in{max-width:1100px;margin:0 auto;padding:0 20px;min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-logo{display:flex;align-items:center;gap:8px;color:#1F2937;text-decoration:none}
.logo-icon{font-size:26px}
.logo-name{font-size:17px;font-weight:800;line-height:1.2}
.logo-sub{font-size:10px;color:#42B4E6;letter-spacing:.5px}
.header-nav{display:flex;gap:10px;flex-wrap:wrap}
.header-nav a{font-size:13px;font-weight:700;color:#374151;padding:6px 10px;border-radius:999px;background:#F9FAFB}
.article-wrap{max-width:880px;margin:30px auto 64px;padding:0 18px}
.breadcrumb{font-size:12px;color:#6B7280;margin-bottom:16px}
.article-card{background:#fff;border:1px solid #E5E7EB;border-radius:18px;box-shadow:0 6px 24px rgba(31,41,55,.08);overflow:hidden}
.article-hero{padding:30px 28px 24px;background:linear-gradient(135deg,#FFFBEB,#EFF6FF);border-bottom:1px solid #E5E7EB}
.article-hero .label{display:inline-block;font-size:12px;font-weight:800;color:#1D4ED8;background:#EFF6FF;border:1px solid #BFDBFE;border-radius:999px;padding:4px 12px;margin-bottom:12px}
h1{font-size:28px;line-height:1.45;letter-spacing:0;color:#1F2937;margin-bottom:12px}
.lead{font-size:15px;color:#4B5563;line-height:2}
.article-body{padding:28px}
.article-body h2{font-size:20px;line-height:1.55;margin:30px 0 12px;padding-left:12px;border-left:4px solid #F59E0B;color:#1F2937}
.article-body h3{font-size:16px;line-height:1.6;margin:22px 0 8px;color:#1F2937}
.article-body p{margin-bottom:14px;color:#374151}
.article-body ul,.article-body ol{margin:0 0 18px 1.4em;color:#374151}
.article-body li{margin-bottom:6px}
.note-box,.dyor-box,.route-box{border-radius:14px;padding:16px 18px;margin:22px 0}
.note-box{background:#EFF6FF;border:1px solid #BFDBFE}
.dyor-box{background:#FFF7ED;border:1px solid #FDBA74;color:#7C2D12}
.route-box{background:#F0FDF4;border:1px solid #BBF7D0}
.related-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.related-list a{display:block;background:#F9FAFB;border:1px solid #E5E7EB;border-radius:12px;padding:13px;font-weight:800;color:#1F2937}
footer{border-top:1px solid #E5E7EB;background:#fff;text-align:center;padding:24px 16px;color:#6B7280;font-size:12px}
footer a{color:#6B7280;margin:0 6px}
@media(max-width:680px){
  .header-in{align-items:flex-start;flex-direction:column;padding:12px 16px}
  .header-nav{gap:6px}
  .header-nav a{font-size:12px;padding:5px 8px}
  .article-wrap{margin:20px auto 42px;padding:0 12px}
  .article-hero,.article-body{padding:20px 16px}
  h1{font-size:22px}
  .related-list{grid-template-columns:1fr}
}
.site-header{background:#fff;border-bottom:2px solid #2563eb;padding:0 16px;height:52px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;}
.site-header>a{font-weight:700;color:#1e293b;font-size:1rem;}
.gnav{display:flex;gap:16px;}
.gnav a{font-size:.85rem;color:#475569;}
.gnav a:hover{color:#2563eb;}
.breadcrumb{font-size:.78rem;color:#64748b;padding:8px 16px;max-width:860px;margin:0 auto;}
.breadcrumb a{color:#2563eb;}