/* firstDX - コラム記事共通スタイル */
:root{
  --bg:#ffffff;
  --bg-soft:#f5f7fb;
  --bg-deep:#0e1b33;
  --ink:#16233c;
  --ink-mid:#4a5a75;
  --ink-weak:#7c8aa3;
  --line:#e2e8f2;
  --brand:#1b64f2;
  --brand-dark:#0f4bc4;
  --brand-soft:#e8f0ff;
  --accent:#ff7a45;
  --ok:#00a37a;
  --radius:14px;
  --shadow:0 2px 4px rgba(16,32,64,.04), 0 12px 32px rgba(16,32,64,.07);
  --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:72px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); line-height:1.95; font-size:16.5px;
  -webkit-font-smoothing:antialiased; word-break:auto-phrase;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:min(1080px, calc(100% - 40px)); margin-inline:auto}
.col{width:min(720px, calc(100% - 40px)); margin-inline:auto}

/* header */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.hd{display:flex; align-items:center; gap:28px; height:64px}
.logo{font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--ink); display:flex; align-items:center; gap:8px}
.logo:hover{text-decoration:none}
.logo b{color:var(--brand)}
.logo .mark{width:26px;height:26px;border-radius:8px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:800}
.nav{display:flex; gap:22px; margin-left:auto; font-size:14px}
.nav a{color:var(--ink-mid)}
@media(max-width:860px){ .nav{display:none} }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--brand); color:#fff; font-weight:700; font-size:16px;
  padding:15px 30px; border-radius:999px; border:0; cursor:pointer;
  box-shadow:0 6px 18px rgba(27,100,242,.28); transition:.18s; line-height:1.4; text-align:center;
}
.btn:hover{background:var(--brand-dark); text-decoration:none; transform:translateY(-1px)}
.hd .btn{margin-left:auto; padding:9px 18px; font-size:14px}
@media(min-width:861px){ .hd .btn{margin-left:0} }
.btn.orange{background:var(--accent); box-shadow:0 6px 18px rgba(255,122,69,.3)}
.btn.orange:hover{background:#f2632c}

/* breadcrumb */
.crumb{font-size:12.5px; color:var(--ink-weak); padding:22px 0 0; line-height:1.7}
.crumb a{color:var(--ink-weak)}
.crumb span{margin:0 6px}

/* article head */
article{padding:0 0 30px}
.a-head{padding:14px 0 30px; border-bottom:1px solid var(--line); margin-bottom:36px}
h1{
  font-size:clamp(24px,4.4vw,36px); line-height:1.5; font-weight:800;
  letter-spacing:-.01em; margin:0 0 18px;
}
.a-meta{font-size:13px; color:var(--ink-weak); display:flex; gap:16px; flex-wrap:wrap}
.a-meta .cat{color:var(--brand); font-weight:800}
.lead{
  background:var(--bg-soft); border-radius:var(--radius); padding:22px 24px;
  font-size:15.5px; margin:0 0 40px; color:var(--ink-mid); font-weight:600;
}
.lead strong{color:var(--ink)}

/* body */
article h2{
  font-size:clamp(19px,3vw,24px); font-weight:800; line-height:1.6;
  margin:52px 0 18px; padding-left:16px; border-left:5px solid var(--brand);
}
article h3{font-size:17.5px; font-weight:800; margin:34px 0 12px; line-height:1.6}
article p{margin:0 0 20px}
article ul, article ol{margin:0 0 22px; padding-left:1.4em}
article li{margin:8px 0}
article strong{font-weight:800}
.marker{background:linear-gradient(transparent 62%, #ffe08a 62%); font-weight:700}

/* パーツ */
.box{
  border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px;
  margin:0 0 26px; background:#fff;
}
.box h4{margin:0 0 10px; font-size:15px; font-weight:800; color:var(--brand-dark)}
.box p:last-child, .box ul:last-child{margin-bottom:0}
.box.warn{background:#fff6f2; border-color:#ffd9c7}
.box.warn h4{color:#d9541f}
.box.point{background:var(--brand-soft); border-color:#cddcff}
.conclusion{
  border:2px solid var(--brand); border-radius:var(--radius); padding:24px 26px;
  margin:40px 0 26px; background:linear-gradient(180deg,var(--brand-soft),#fff 70%);
}
.conclusion h4{
  margin:0 0 10px; font-size:13px; font-weight:800; color:var(--brand);
  letter-spacing:.1em;
}
.conclusion p{margin:0; font-size:17px; font-weight:700; line-height:1.85}

/* 比較テーブル */
.tbl-scroll{overflow-x:auto; margin:0 0 26px}
table{border-collapse:collapse; width:100%; font-size:14.5px; min-width:460px}
th, td{border:1px solid var(--line); padding:12px 14px; text-align:left; vertical-align:top}
th{background:var(--bg-soft); font-weight:800; font-size:13.5px}
td.no{color:#d9541f; font-weight:700}
td.yes{color:var(--ok); font-weight:700}

/* CTA */
.a-cta{
  background:var(--bg-deep); color:#fff; border-radius:18px; padding:34px 30px;
  text-align:center; margin:50px 0 0;
}
.a-cta h3{margin:0 0 12px; font-size:clamp(18px,3vw,23px); font-weight:800; line-height:1.6; color:#fff}
.a-cta p{color:#a9bad6; font-size:14.5px; margin:0 0 24px}
.a-cta .fine{font-size:12.5px; color:#7f92b3; margin:16px 0 0}

/* 関連記事 */
.related{border-top:1px solid var(--line); margin-top:56px; padding-top:34px}
.related h2{border:0; padding:0; font-size:18px; margin:0 0 14px}
.related ul{list-style:none; padding:0; margin:0}
.related li{border-bottom:1px solid var(--line)}
.related a{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:15px 2px; color:var(--ink); font-weight:600; font-size:15px;
}
.related a:hover{color:var(--brand); text-decoration:none}
.related a::after{content:"→"; color:var(--brand); font-weight:800}

/* footer */
footer{background:#0a1425; color:#8496b3; padding:40px 0; font-size:13px; margin-top:70px}
.ft{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}
.ft .logo{color:#fff}
.ft nav{display:flex; gap:20px; flex-wrap:wrap}
.ft nav a{color:#8496b3}
.ft nav a:hover{color:#fff}