:root{
  --navy:#0B1B3A;
  --navy-2:#12275A;
  --black:#111214;
  --blue:#2F6FED;
  --gold:#B8964F;
  --ink:#1A1D26;
  --gray:#6B7280;
  --line:#E6E8EE;
  --bg:#FFFFFF;
  --bg-soft:#F7F8FB;
  --radius:18px;
  --shadow:0 20px 50px rgba(11,27,58,0.08);
  --shadow-sm:0 8px 24px rgba(11,27,58,0.06);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic","Noto Sans JP",sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.85; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
header{
  position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
}
.nav{max-width:1120px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:22px;}
.logo{font-size:20px; font-weight:800; color:var(--navy); display:flex; align-items:center; gap:11px;}
.logo-badge{width:34px; height:34px; border-radius:10px; background:var(--black); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800;}
.nav-links{display:flex; align-items:center; gap:28px; font-size:14.5px; font-weight:700; color:var(--navy);}
.nav-links a{opacity:.78;}
.nav-links a:hover,.nav-links a[aria-current="page"]{opacity:1; color:var(--blue);}
.btn{
  display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:13px 24px;
  font-weight:800; font-size:14.5px; transition:transform .25s, box-shadow .25s; white-space:nowrap;
}
.btn-primary{background:linear-gradient(135deg,var(--navy),var(--navy-2)); color:#fff; box-shadow:0 10px 24px rgba(11,27,58,.25);}
.btn-primary:hover,.btn-gold:hover{transform:translateY(-2px);}
.btn-gold{background:linear-gradient(135deg,#C9A961,var(--gold)); color:#fff; box-shadow:0 10px 24px rgba(184,150,79,.35);}
.hero{
  padding:86px 0 68px; background:
    radial-gradient(820px 420px at 84% -12%, rgba(47,111,237,.10), transparent 60%),
    radial-gradient(620px 360px at -8% 8%, rgba(184,150,79,.10), transparent 60%),
    linear-gradient(180deg,#fff 0%, var(--bg-soft) 100%);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; letter-spacing:.14em; font-weight:800;
  color:var(--blue); text-transform:uppercase; padding:7px 16px; border:1px solid rgba(47,111,237,.25);
  border-radius:999px; background:rgba(47,111,237,.06);
}
h1,h2,h3{letter-spacing:0; color:var(--navy); font-weight:800;}
.hero h1{font-size:44px; line-height:1.36; margin:22px 0 16px;}
.hero p{max-width:720px; color:var(--gray); font-size:16px;}
.breadcrumbs{font-size:13px; color:var(--gray); margin-bottom:24px;}
.breadcrumbs a{color:var(--blue); font-weight:800;}
.section{padding:72px 0;}
.section-soft{background:var(--bg-soft);}
.section-head{display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:30px;}
.section-head h2{font-size:32px; line-height:1.4; margin-top:14px;}
.section-head p{color:var(--gray); font-size:15px; max-width:560px;}
.category-nav{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px;}
.category-nav span{
  border:1px solid rgba(47,111,237,.20); background:#F5F8FF; color:var(--navy);
  border-radius:999px; padding:8px 14px; font-size:13px; font-weight:800;
}
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.article-card{
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:26px 24px;
  box-shadow:var(--shadow-sm); min-height:270px; display:flex; flex-direction:column;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.article-card:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(47,111,237,.28);}
.article-card .meta{display:flex; justify-content:space-between; gap:12px; color:var(--gray); font-size:12.5px; margin-bottom:18px;}
.cat{color:var(--blue); font-weight:900;}
.article-card h2,.article-card h3{font-size:20px; line-height:1.55; margin-bottom:12px;}
.article-card p{color:var(--gray); font-size:14px;}
.article-card .read{margin-top:auto; color:var(--navy); font-weight:900; font-size:14px; padding-top:22px;}
.article-layout{display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:34px; align-items:start; min-width:0;}
.article-body{
  background:#fff; border:1px solid var(--line); border-radius:22px; padding:42px 40px; box-shadow:var(--shadow-sm);
  min-width:0;
}
.article-body h1{font-size:38px; line-height:1.42; margin:14px 0 18px;}
.article-body .lead{color:var(--gray); font-size:16px; margin-bottom:30px;}
.article-body h2{font-size:25px; line-height:1.5; margin:42px 0 12px;}
.article-body p{margin:0 0 18px;}
.article-body ul{padding-left:1.2em; margin:0 0 22px;}
.article-body li{margin-bottom:8px;}
.article-body strong{color:var(--navy); font-weight:900;}
.article-table-wrap{overflow-x:auto; margin:24px 0 30px; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-sm); background:#fff;}
.article-table{width:100%; min-width:680px; border-collapse:collapse; font-size:14px; line-height:1.65;}
.article-table th,.article-table td{border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:13px 14px; vertical-align:top; text-align:left;}
.article-table th{background:#F1F6FF; color:var(--navy); font-weight:900;}
.article-table tr:last-child td{border-bottom:none;}
.article-table th:last-child,.article-table td:last-child{border-right:none;}
.step-flow{display:grid; gap:12px; margin:24px 0 30px;}
.step-flow .step{position:relative; border:1px solid rgba(47,111,237,.22); background:#F8FBFF; border-radius:16px; padding:14px 16px; color:var(--navy); font-weight:900;}
.step-flow .arrow{color:var(--blue); font-weight:900; padding-left:18px;}
.check-list{display:grid; gap:10px; padding-left:0!important; margin:24px 0 30px!important; list-style:none;}
.check-list li{border:1px solid rgba(47,111,237,.18); border-radius:14px; background:#F8FBFF; padding:12px 14px 12px 42px; position:relative; margin:0!important;}
.check-list li::before{content:""; position:absolute; left:14px; top:17px; width:14px; height:14px; border-radius:4px; border:2px solid var(--blue); background:#fff;}
.point-list{counter-reset:point; display:grid; gap:12px; padding-left:0!important; list-style:none; margin:24px 0 30px!important;}
.point-list li{counter-increment:point; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:var(--shadow-sm); padding:14px 16px 14px 52px; position:relative; margin:0!important;}
.point-list li::before{content:counter(point); position:absolute; left:16px; top:15px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--blue); color:#fff; font-size:13px; font-weight:900;}
.note-box{border:1px solid rgba(184,150,79,.28); background:#FFFCF4; border-radius:18px; padding:20px 22px; margin:24px 0 30px; color:var(--navy); font-weight:800;}
.article-figure{margin:28px 0 34px;}
.article-figure img{display:block; width:100%; max-width:860px; height:auto; border-radius:18px; border:1px solid var(--line); box-shadow:var(--shadow-sm); background:#fff;}
.article-figure figcaption{margin-top:10px; color:var(--gray); font-size:13.5px; line-height:1.7;}
.article-meta{display:flex; flex-wrap:wrap; gap:14px; color:var(--gray); font-size:13px; font-weight:700;}
.article-meta .cat{color:var(--blue);}
.article-cta{
  margin:34px 0; padding:30px; border-radius:20px; border:1px solid rgba(184,150,79,.28);
  background:
    radial-gradient(540px 220px at 100% 0%, rgba(184,150,79,.18), transparent 58%),
    linear-gradient(180deg,#fff 0%, #FDF9EF 100%);
  box-shadow:var(--shadow-sm);
}
.article-cta h2{font-size:22px; line-height:1.55; margin:0 0 10px;}
.article-cta p{color:var(--gray); margin-bottom:20px;}
.sidebar{position:sticky; top:92px; display:grid; gap:18px;}
.side-box{background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:var(--shadow-sm);}
.side-box h2{font-size:18px; margin-bottom:12px;}
.side-box a{display:block; color:var(--navy); font-size:14px; font-weight:800; padding:11px 0; border-bottom:1px solid var(--line);}
.side-box a:last-child{border-bottom:none;}
.related{margin-top:42px; border-top:1px solid var(--line); padding-top:28px;}
.related h2{font-size:22px; margin-bottom:16px;}
footer{background:var(--navy); color:rgba(255,255,255,.66); padding:64px 0 30px; margin-top:90px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.12);}
.foot-logo{color:#fff; font-size:20px; font-weight:800; margin-bottom:14px; display:flex; align-items:center; gap:11px;}
.foot-logo-badge{width:32px; height:32px; border-radius:9px; background:#fff; color:var(--black); display:flex; align-items:center; justify-content:center; font-weight:800;}
.foot-grid p{font-size:13.5px; line-height:1.9;}
.foot-col h2,.foot-col h5{color:#fff; font-size:13px; margin-bottom:16px; letter-spacing:.04em;}
.foot-col a{display:block; font-size:13.5px; padding:6px 0; opacity:.8;}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:12.5px; flex-wrap:wrap; gap:10px;}
@media (max-width:900px){
  .nav{align-items:flex-start; flex-direction:column;}
  .nav-links{flex-wrap:wrap; gap:14px;}
  .hero h1{font-size:34px;}
  .section-head{display:block;}
  .card-grid{grid-template-columns:1fr;}
  .article-layout{grid-template-columns:1fr;}
  .sidebar{position:static;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .wrap,.nav{padding-left:18px; padding-right:18px;}
  .hero{padding:54px 0 48px;}
  .hero h1{font-size:29px;}
  .article-body{padding:30px 22px;}
  .article-body h1{font-size:28px;}
  .article-table{min-width:620px; font-size:13px;}
  .article-table th,.article-table td{padding:11px 12px;}
  .article-cta{padding:24px 20px;}
  .foot-grid{grid-template-columns:1fr;}
}