:root{
  --navy:#0A2444;
  --lime:#C4F82A;
  --lime-hover:#AEE81A;
  --ink:#111820;
  --sub:#4E5A6B;
  --container:1240px;
  --content-pad:32px;
  --measure:none; /* 本文も図・表と同じ列幅にそろえる（680pxで絞ると文字だけ幅が狭く見える） */
  --side-space:max(0px,calc((100vw - var(--container))/2));
  --decor-clearance:100px;
  --decor-intrusion:48px;
  --cx-axis-cap:176px;
  --cx-inner-axis:max(
    0px,
    calc(var(--side-space) + var(--content-pad) - var(--decor-clearance)),
    min(var(--cx-axis-cap),calc(var(--side-space) + var(--content-pad) + var(--decor-intrusion)))
  );
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans JP',sans-serif;color:var(--ink);background:#fff;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.page-shell{position:relative;isolation:isolate;width:100%;background:#fff;overflow:clip}


/* ===== パンくず ===== */
.bc{max-width:var(--container);margin:0 auto;padding:16px var(--content-pad) 0;
  font-size:12px;color:var(--sub);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bc a:hover{color:var(--navy)}
.bc .sep{color:#B7C2CE}

/* ===== 記事ヘッダー帯 ===== */
.art-head{position:relative;overflow:hidden;background:#fff;border-bottom:1px solid #DDE5ED}
.art-head .sec-typo-txt{top:30px}
.art-head-inner{position:relative;z-index:2;max-width:var(--container);margin:0 auto;
  padding:38px var(--content-pad) 42px}
.art-chips{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.chip-tag{font-size:12px;font-weight:900;background:var(--navy);color:#fff;
  padding:3px 12px;white-space:nowrap;clip-path:polygon(6% 0,100% 0,94% 100%,0 100%)}
.art-title{font-size:clamp(24px,2.5vw,33px);font-weight:900;line-height:1.6;
  letter-spacing:.01em;margin-bottom:18px}
.art-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--sub)}
.art-meta .d{font-weight:700}

.sec-typo-txt{position:absolute;z-index:0;
  right:max(3%,calc(50% - 601.6px));
  font-family:'Archivo Black',sans-serif;font-style:italic;
  color:#E4EAF1;opacity:.45;line-height:1;letter-spacing:.01em;
  font-size:clamp(72px,8.6vw,126px);
  user-select:none;pointer-events:none}

/* ===== 本文＋右レール ===== */
.art-wrap{position:relative;z-index:4;max-width:var(--container);margin:0 auto;padding:0 var(--content-pad)}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:64px;align-items:start;
  padding:52px 0 76px}
.art-body{grid-column:1;grid-row:1;min-width:0}
/* テキストは読み幅680、メディア・部品は主カラム幅いっぱい（編集デザインの定石） */
.prose p,.prose h2,.prose h3,.lead,.note{max-width:var(--measure)}

/* ヒーロー画像 */
.col-hero{margin:0 0 40px}
/* コラムの画像はOGPと同じ1200×630（figure_kit.py ogp で作る1枚を、OGP・記事上部・カードで共通に使う） */
.col-hero img{width:100%;aspect-ratio:1200/630;object-fit:cover;border-radius:10px}

/* この記事の要点（あすけん型ダイジェスト・E-E-A-T） */
.digest{border:1px solid #D9E0E8;border-radius:10px;padding:22px 26px 20px;margin:0 0 40px}
.digest .dg-label{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:900;margin-bottom:10px}
.digest .dg-label img{height:12px;width:auto}
.digest ul{list-style:none}
.digest li{display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:500;line-height:1.8;padding:5px 0}
.digest li img{width:16px;height:auto;margin-top:6px;flex:none}

/* シェア */
.share{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:44px;
  padding-top:24px;border-top:1px solid #E8ECF1}
.share .sh-label{font-size:13px;font-weight:900;color:var(--sub)}
.share a{font-size:13px;font-weight:700;color:var(--sub);border:1px solid #D9E0E8;
  border-radius:999px;padding:0 18px;transition:.15s;display:inline-flex;align-items:center;min-height:44px}
.share a:hover{border-color:var(--navy);color:var(--navy)}

/* よくある質問（LPのFAQ言語） */
.faq{margin:3em 0 0}
.faq-title{font-size:19px;font-weight:900;line-height:1.6;margin-bottom:16px}
.faq-title::before{content:"";display:block;width:34px;height:4px;background:var(--lime);
  border-radius:2px;margin-bottom:12px}
.faq-item{background:#fff;border:1px solid #E8ECF1;border-radius:12px;
  box-shadow:0 4px 16px rgba(10,36,68,.07);margin-bottom:10px;overflow:hidden}
.faq-item summary{display:flex;align-items:center;gap:14px;padding:16px 20px;cursor:pointer;
  list-style:none;font-size:15px;font-weight:700}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"＋";margin-left:auto;color:var(--navy);font-weight:700;font-size:17px;flex:none}
.faq-item[open] summary::after{content:"−"}
.qmark{flex:none;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Archivo Black',sans-serif;font-style:italic;font-size:13px}
.faq-a{padding:0 20px 18px 62px;font-size:14px;color:var(--sub);line-height:1.9}

/* 参考文献 */
.refs{margin:3em 0 0;border-top:1px solid #E8ECF1;padding-top:24px}
.refs .rf-label{font-size:13px;font-weight:900;color:var(--sub);margin-bottom:10px}
.refs ol{padding-left:1.4em}
.refs li{font-size:13px;color:var(--sub);line-height:1.9}
.refs a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.refs .rf-note{font-size:12px;color:#6B7684;margin-top:8px}

/* 前後記事ナビ */
.pn-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:44px}
.pn-nav a{border:1px solid #E8ECF1;border-radius:10px;padding:14px 18px;display:block;transition:.15s}
.pn-nav a:hover{border-color:var(--navy)}
.pn-nav .pn-lbl{font-size:12px;font-weight:900;color:var(--sub);margin-bottom:6px}
.pn-nav .pn-t{font-size:14px;font-weight:700;line-height:1.6}
.pn-nav a:hover .pn-t{color:var(--navy)}
.pn-nav .pn-next{text-align:right}
/* 前後の記事がないときも、リンクのカードと同じ大きさの枠にして釣り合いを取る */
.pn-nav .pn-empty{border:1px dashed #E1E7EE;border-radius:10px;padding:14px 18px}
.pn-nav .pn-empty .pn-t{color:var(--sub);font-weight:500}

/* 本文（17px×1.75、幅は列いっぱい） */
.prose p{font-size:17px;line-height:1.75;margin-bottom:1.6em}
.prose strong{font-weight:700}
.prose a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.prose h2{font-size:21px;font-weight:900;line-height:1.6;margin:2.8em 0 1em;scroll-margin-top:84px}
.prose h2::before{content:"";display:block;width:34px;height:4px;background:var(--lime);
  border-radius:2px;margin-bottom:12px}
.prose h2:first-of-type{margin-top:0}
/* 章番号つきのh2：「1.見出し」を1行に並べ、見出し全体にライムのマーカーを引く（LPの見出しと同じ） */
.prose h2:has(.h2-num){font-size:22px}
.prose h2:has(.h2-num)::before{display:none}
.prose h2 .h2-num{font-family:'Archivo Black',sans-serif;font-weight:400;color:var(--navy);
  font-size:1.1em;letter-spacing:.02em;margin-right:.3em}
/* h3以下：見出しは直後の本文に寄せ、前の段落からは離す（余白の緩急） */
.prose h3{font-size:18px;font-weight:900;line-height:1.6;margin:2.2em 0 .5em;scroll-margin-top:84px}
.prose h4{font-size:17px;font-weight:700;line-height:1.6;margin:1.8em 0 .4em;max-width:var(--measure)}
.prose h2 + h3{margin-top:1.2em}
/* 箇条書き（本文と同じ読み幅・行間） */
.prose ul,.prose ol{max-width:var(--measure);margin:0 0 1.6em;padding-left:1.4em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{font-size:17px;line-height:1.75;margin-bottom:.35em;padding-left:.2em}
.prose li::marker{color:var(--navy)}
.prose sup{font-size:.65em;vertical-align:super;line-height:0;white-space:nowrap}
/* 図（figure_kit の図・写真）：主カラム幅いっぱい、角丸は他の部品と同じ10px */
.prose figure{margin:2.2em 0 2.6em}
.prose figure img{display:block;width:100%;height:auto;border-radius:10px}
.prose figcaption{font-size:13px;color:var(--sub);line-height:1.7;margin-top:10px}
.mk{display:inline;
  background:linear-gradient(transparent 64%,var(--lime) 64% 88%,transparent 88%);
  padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.note{font-size:13px;color:#6B7684;line-height:1.8;margin:-.8em 0 1.6em}

/* 表（navy見出し＝LPの表言語） */
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.6em;font-size:14px;line-height:1.8}
.prose th{background:var(--navy);color:#fff;font-weight:700;font-size:14px;
  padding:10px 14px;text-align:left;border:1px solid #1A3557}
.prose td{padding:12px 14px;border:1px solid #E8ECF1;vertical-align:top}
.prose tr:nth-child(even) td{background:#F8FAFC}

/* ポイント（navy罫の静かな囲み） */
.point{border:1px solid #D9E0E8;border-left:4px solid var(--navy);border-radius:0 8px 8px 0;
  padding:18px 22px;margin:0 0 1.6em}
.point .pt-label{font-size:12px;font-weight:900;color:var(--navy);letter-spacing:.08em;margin-bottom:8px}
.point p{font-size:15px;line-height:1.8;margin:0}

/* 監修 */
.person{display:flex;gap:18px;align-items:flex-start;border-top:1px solid #E8ECF1;
  padding-top:28px;margin-top:48px}
.person .avatar{flex:none;width:56px;height:56px;border-radius:50%;background:#F3F5F7;
  display:flex;align-items:center;justify-content:center}
.person .avatar img{width:30px;height:auto}
.person .p-label{font-size:12px;font-weight:900;color:var(--sub);margin-bottom:4px}
.person .p-name{font-size:15px;font-weight:900;margin-bottom:2px}
.person .p-cred{font-size:13px;color:var(--sub);margin-bottom:8px}
.person .p-text{font-size:14px;color:var(--sub);line-height:1.8}

/* 記事内CTA＝navy帯（LPの声量） */
.cta-inline{background:var(--navy);color:#fff;border-radius:10px;
  padding:30px 32px;margin:48px 0 0;
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.cta-inline .ci-copy{font-size:18px;font-weight:900;line-height:1.7;margin-bottom:6px}
.cta-inline .ci-sub{font-size:13px;color:#DCE4EE;line-height:1.8}
.cta-inline .btn-cta{flex:none;font-size:14px;padding:14px 30px}


/* ===== 右レール（目次） ===== */
.rail{grid-column:2;grid-row:1;position:sticky;top:84px;
  display:flex;flex-direction:column;gap:40px}
.rb-head{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:900;
  letter-spacing:.03em;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #E8ECF1}
.toc ol{list-style:none;border-left:2px solid #E8ECF1}
.toc li a{display:block;font-size:13px;line-height:1.6;color:var(--sub);
  padding:7px 0 7px 16px;margin-left:-2px;border-left:2px solid transparent;
  transition:color .15s,border-color .15s}
.toc li a:hover{color:var(--ink)}
.toc li a.on{color:var(--navy);font-weight:900;border-left-color:var(--lime)}

/* ===== ほかのコラム（下部グレー帯＝LPのTOPICS言語・tcards） ===== */
.rel{position:relative;z-index:4;background:#F3F5F7;border-top:1px solid #DDE5ED;overflow:hidden}
.rel-inner{position:relative;z-index:2;max-width:var(--container);margin:0 auto;
  padding:64px var(--content-pad) 76px}
.tgroup-head{display:flex;align-items:center;gap:16px;margin:0 0 18px}
.tgroup-head .tgh-label{font-size:16px;font-weight:900;color:var(--ink);white-space:nowrap;
  display:flex;align-items:center;gap:9px}
.tgroup-head .tgh-label img{height:12px;width:auto}
.tgroup-head .tgh-line{flex:1;height:1px;background:#E1E7EE}
.tgroup-head .tgh-more{font-size:13px;font-weight:700;color:var(--navy);white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px}
.tgroup-head .tgh-more::after{content:"→";transition:transform .2s}
.tgroup-head .tgh-more:hover::after{transform:translateX(3px)}
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tcard{background:#fff;border:1px solid #E8ECF1;border-radius:12px;overflow:hidden;
  box-shadow:0 4px 16px rgba(10,36,68,.07);display:flex;flex-direction:column;
  transition:transform .2s,box-shadow .2s}
.tcard:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(10,36,68,.14)}
.tcard .tc-thumb{position:relative;aspect-ratio:1200/630;overflow:hidden;
  background:linear-gradient(135deg,#1E4E8F,var(--navy))}
.tcard .tc-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.tcard .tc-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.tcard .tc-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.tcard .tc-tag{font-size:12px;font-weight:900;background:var(--navy);color:#fff;
  padding:3px 12px;clip-path:polygon(6% 0,100% 0,94% 100%,0 100%)}
.tcard .tc-date{font-size:13px;color:var(--sub)}
.tcard h3{font-size:16px;font-weight:900;color:var(--ink);line-height:1.55;margin-bottom:10px}
.tcard p{font-size:14px;color:var(--sub);line-height:1.75;margin-bottom:16px}
.tcard .tc-arrow{margin-top:auto;text-align:right;color:var(--navy);font-size:20px;font-weight:900}

/* ===== 最終CTA（LPと同一。フッターは _footer.css） ===== */
.cta{position:relative;z-index:4;color:#fff;overflow:hidden;background:var(--navy);
  border-top:1px solid rgba(255,255,255,.18)}
.cta-inner{position:relative;z-index:4;max-width:var(--container);margin:0 auto;
  padding:84px var(--content-pad) 82px}
.cta h2{max-width:860px;font-size:clamp(26px,2.6vw,36px);font-weight:900;line-height:1.48;margin-bottom:16px}
.cta .cta-lead{width:min(100%,660px);font-size:16px;color:#DCE4EE;line-height:2.15;margin-bottom:32px}
.cta-btns{display:flex;gap:16px;margin-bottom:26px}
.cta-btns .btn-cta{font-size:16px;padding:16px 44px}
.cta-team{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;
  color:#C6D2E0;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:3px}
.cta-team::after{content:"→"}
.cta-team:hover{color:#fff}


/* ===== モバイル ===== */
@media (max-width:960px){
  :root{--content-pad:20px}
  .sec-typo-txt{font-size:56px}
  .art-head .sec-typo-txt{top:18px}
  .art-head-inner{padding:26px var(--content-pad) 32px}
  .art-title{font-size:21px}
  .art-grid{grid-template-columns:1fr;gap:44px;padding:36px 0 56px}
  .art-body{grid-column:auto;grid-row:auto}
  .rail{grid-column:auto;grid-row:auto;position:static}
  .rail .toc-block{order:-1}
  /* スマホは目次を本文の前に置き、囲みにする（長い記事で全体像を先に見せる） */
  .art-grid{display:flex;flex-direction:column}
  .rail{order:-1}
  .toc-block{border:1px solid #E1E7EE;border-radius:10px;padding:16px 18px 6px}
  .toc li a{font-size:14px;padding:11px 0 11px 14px;min-height:44px}
  .prose p,.prose li{font-size:16px;line-height:1.85}
  .prose h2{font-size:18px}
  .prose h3{font-size:17px}
  .prose h2:has(.h2-num){font-size:19px}
  .prose table{font-size:13px;display:block;overflow-x:auto}
  /* 1列目（項目名）は単語の途中で折り返さない。残りの列で幅を調整する */
  .prose th:first-child,.prose td:first-child{white-space:nowrap}
  .prose th,.prose td{padding:10px 12px}
  .cta-inline{flex-direction:column;align-items:flex-start;padding:24px 22px}
  .rel-inner{padding:48px var(--content-pad) 56px}
  .tcards{grid-template-columns:1fr;gap:16px}
  .cta-inner{padding:56px var(--content-pad) 54px}
  .cta-btns{flex-direction:column;align-items:flex-start}
}

/* ===== Codex edition：全幅を使う幾何学装飾（LPと同一・v7トーン） ===== */
.codex-edition .cx-join{position:relative;z-index:3;height:0;pointer-events:none}
.codex-edition .cx-join--light-light{--cx-depth:48px}
.codex-edition .cx-join--light-dark{--cx-depth:-48px}
.codex-edition .cx-motif{position:absolute;top:var(--cx-depth,48px);z-index:1;
  width:720px;height:400px;overflow:visible;opacity:1;pointer-events:none;user-select:none}
.codex-edition .cx-motif--left,
.codex-edition .cx-motif--right{--cx-safe-edge:calc(var(--cx-inner-axis-px,var(--cx-inner-axis)) + 1px)}
.codex-edition .cx-motif--left{left:0;clip-path:inset(-1000px calc(720px - var(--cx-safe-edge)) -1000px 0)}
.codex-edition .cx-motif--right{right:0;clip-path:inset(-1000px 0 -1000px calc(720px - var(--cx-safe-edge)))}
.codex-edition .cx-shape{position:absolute;display:block;left:var(--cx-x);top:var(--cx-y);pointer-events:none}
.codex-edition .cx-shape--bar{background:var(--navy);opacity:.05;
  width:var(--cx-length);height:var(--cx-size);border-radius:999px;
  transform:translate(-50%,-50%) rotate(-45deg);transform-origin:50% 50%}
.codex-edition .cx-shape--dot{width:var(--cx-size);height:var(--cx-size);border-radius:50%;
  transform:translate(-50%,-50%);background:var(--lime);opacity:.8}
@media (max-width:1279px){
  .codex-edition .cx-join{display:none}
}

/* WP対応：the_post_thumbnail の width/height 属性で aspect-ratio が無効化されるのを防ぐ */
.col-hero img{height:auto}

/* 関連記事カード：アイキャッチ未設定時の無地（column-archive.css と同じ表現） */
.tcard .tc-thumb:empty::before{content:"";position:absolute;top:-20%;bottom:-20%;left:62%;width:20px;
  background:var(--lime);transform:skewX(-14deg);box-shadow:32px 0 0 -6px rgba(196,248,42,.45)}
.tcard .tc-thumb:empty::after{content:"COLUMN";position:absolute;left:18px;bottom:10px;
  font-family:'Archivo Black',sans-serif;font-style:italic;font-size:22px;line-height:1;
  color:rgba(255,255,255,.16);letter-spacing:.02em}