/* ============================================================
     ▼ /column/ ─ ニュース・コラム（このページ固有の追加）
        新規クラスは既存344クラスとの衝突チェック済み：
        column-hero / cgrid / ccard / cmeta / ccat / clead / cgo
     ============================================================ */

  /* 写真を使わないヒーロー。privacy の .legal-hero と同じく .dhero に色だけ足す。
     素材写真が無いため、濃紺の無地＋ロゴブルーの淡い光で成立させる */
  .column-hero{background:
    radial-gradient(110% 150% at 86% -30%, rgba(28,104,174,.35) 0%, rgba(28,104,174,0) 58%),
    linear-gradient(150deg, var(--b900) 0%, var(--b800) 100%)}
  .column-hero .lead{max-width:44em}

  /* ---------- 記事カード（一覧・関連記事で共用） ----------
     カテゴリ・日付・タイトル・リード文（2行）の4点だけを出す。
     アイキャッチはまだ実画像が無いので、カードには使わない */
  .cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .ccard{background:var(--white);border:1px solid var(--n300);display:flex;transition:border-color .25s}
  .ccard:hover{border-color:var(--b400)}
  .ccard[hidden]{display:none}
  .ccard>a{flex:1;display:flex;flex-direction:column;gap:10px;padding:19px 20px 16px;
           text-decoration:none;min-width:0}
  .cmeta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:0;
         font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--n500)}
  .ccat{display:inline-flex;align-items:center;font-family:var(--mono);font-size:9.5px;font-weight:700;
        letter-spacing:.1em;background:var(--b50);color:var(--b700);padding:3px 9px}
  .ccard h3{font-family:var(--serif);font-size:15.5px;font-weight:700;margin:0;line-height:1.65;
            letter-spacing:.03em;color:var(--n900)}
  .clead{margin:0;font-size:12.5px;font-weight:500;color:var(--n700);line-height:1.8;flex:1;
         display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .cgo{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--b600);
       padding-top:9px;border-top:1px solid var(--n300)}
  .cgo .ic{width:13px;height:13px}
  @media (max-width:980px){.cgrid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:640px){.cgrid{grid-template-columns:1fr}}

  /* ---------- 記事詳細のヒーロー（タイトルが主役） ---------- */
  .arthero .wrap{padding-top:clamp(44px,6.4vw,84px);padding-bottom:clamp(40px,5.8vw,76px)}
  .arthero .cmeta{color:#B9CBDD;margin:0 0 16px}
  .arthero .ccat{background:rgba(240,246,252,.14);color:#DCE8F4}
  .arthero h1{font-family:var(--serif);font-weight:900;font-size:clamp(22px,3.8vw,40px);
              line-height:1.66;letter-spacing:.06em;margin:0;max-width:26em}

  /* ---------- アイキャッチの枠 ----------
     実画像がまだ無いので、works の数値スロットと同じ「破線＝入荷待ち」の作法で枠だけ置く。
     WordPressではアイキャッチ画像（featured image）をそのまま出す */
  .eyecatch{position:relative;margin:0 0 clamp(26px,4vw,38px);aspect-ratio:1200/630;
    border:1px dashed var(--slot);
    background:repeating-linear-gradient(135deg,var(--n100),var(--n100) 8px,#E7EBEF 8px,#E7EBEF 16px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}
  .eyecatch .ic{width:30px;height:30px;color:var(--slot);stroke-width:1.2}
  .eyecatch .ecap{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--n500);
                  margin:0;text-align:center;padding:0 14px}

  /* ---------- 本文2カラム（privacy の .legal-grid と同じ考え方） ----------
     本文は44em（約40字）で止め、右に追従目次を置く */
  .artgrid{display:grid;grid-template-columns:minmax(0,1fr) 208px;gap:0 56px;align-items:start}
  .artbody{max-width:44em;min-width:0}
  .artsec{scroll-margin-top:88px}

  /* ---------- 本文タイポグラフィ ----------
     WordPressのエディタで入りうる要素（h2/h3/段落/箇条書き/引用/表/図/注記）を
     すべてこの中で受ける。h2 の下線演出は記事内では使わない */
  .artbody h2{display:block;font-size:clamp(18.5px,2.3vw,23px);line-height:1.7;
              margin:clamp(34px,5vw,48px) 0 14px;padding:2px 0 2px 15px;
              border-left:3px solid var(--b600)}
  .artbody h2::after{display:none}
  .artbody h3{font-family:var(--serif);font-size:clamp(15.5px,1.9vw,18px);font-weight:700;
              letter-spacing:.03em;line-height:1.7;margin:28px 0 10px}
  .artbody p{margin:0 0 15px;font-size:14px;font-weight:500;color:var(--n700);line-height:2.02}
  .artbody strong{color:var(--n900)}
  .artbody a{color:var(--b600)}
  .artbody ul,.artbody ol{margin:0 0 16px;padding:0;list-style:none}
  .artbody ol{counter-reset:art}
  .artbody ol>li{position:relative;padding-left:27px;font-size:13.5px;font-weight:500;color:var(--n700);
                 line-height:1.9;margin-bottom:8px;counter-increment:art}
  .artbody ol>li::before{content:counter(art);position:absolute;left:0;top:4px;
                 font-family:var(--mono);font-size:10px;font-weight:700;color:var(--b600);
                 background:var(--b50);width:19px;height:19px;line-height:19px;text-align:center}
  .artbody ul>li{position:relative;padding-left:18px;font-size:13.5px;font-weight:500;color:var(--n700);
                 line-height:1.9;margin-bottom:5px}
  .artbody ul>li::before{content:"";position:absolute;left:2px;top:13px;width:7px;height:1px;
                 background:var(--b300)}
  .artbody blockquote{margin:22px 0 20px;padding:15px 20px;border-left:3px solid var(--b300);
                      background:var(--b50)}
  .artbody blockquote p{margin:0;font-family:var(--serif);font-size:14.5px;font-weight:700;
                        color:var(--n900);line-height:1.95;letter-spacing:.02em}
  .artbody blockquote cite{display:block;margin-top:7px;font-style:normal;font-family:var(--mono);
                           font-size:10px;letter-spacing:.08em;color:var(--n500)}
  .artbody table{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0 4px}
  .artbody th,.artbody td{border:1px solid var(--n300);padding:11px 12px;text-align:left;vertical-align:top}
  .artbody thead th{background:var(--b800);color:#fff;font-family:var(--mono);font-size:10px;
                    font-weight:700;letter-spacing:.1em;white-space:nowrap}
  .artbody tbody th{background:var(--n100);font-weight:700;color:var(--n900);white-space:nowrap;
                    font-size:12.5px}
  .artbody td{font-weight:500;color:var(--n700);line-height:1.8}
  .artbody .cmp-wrap{margin:0 0 18px}
  .artbody figure{margin:20px 0 18px}
  @media (max-width:760px){.artbody table{min-width:560px}}

  /* ---------- 追従目次（privacy の .ptoc と同名・同定義） ---------- */
  .ptoc{position:sticky;top:88px;border-left:1px solid var(--n300);padding-left:20px}
  .ptoc-h{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.18em;
          color:var(--b600);margin:0 0 13px}
  .ptoc ol{list-style:none;margin:0;padding:0}
  .ptoc li{margin:0 0 9px}
  .ptoc a{display:flex;gap:9px;text-decoration:none;font-size:12px;line-height:1.6;
          color:var(--n500);transition:color .25s}
  .ptoc a .n{font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--b300);
             flex:0 0 auto;padding-top:2px;transition:color .25s}
  .ptoc a:hover{color:var(--n900)}
  .ptoc a.on{color:var(--b600);font-weight:700}
  .ptoc a.on .n{color:var(--b600)}

  @media (max-width:980px){
    /* 縦に積む。目次は本文の前に、横並びのチップとして出す */
    .artgrid{grid-template-columns:1fr;gap:0}
    .artbody{max-width:none;order:2}
    .ptoc{order:1;position:static;border-left:none;border-bottom:1px solid var(--n300);
          padding:0 0 16px;margin:0 0 28px}
    .ptoc ol{display:flex;flex-wrap:wrap;gap:7px 20px}
    .ptoc li{margin:0}
  }

  /* ---------- 執筆者 ---------- */
  .abox{display:flex;gap:20px;align-items:flex-start;margin-top:clamp(36px,5vw,52px);
        padding:22px 24px;background:var(--n100);border:1px solid var(--n300)}
  .abox img{width:82px;height:auto;display:block;flex:none}
  .abox .k{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;
           color:var(--b600);margin:0 0 8px;display:flex;align-items:center}
  .abox .abox-nm{font-family:var(--serif);font-size:16.5px;font-weight:700;letter-spacing:.05em;margin:0}
  .abox .abox-ro{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;
                 color:var(--b600);margin:3px 0 9px}
  .abox .abox-bio{margin:0;font-size:12.5px;font-weight:500;color:var(--n700);line-height:1.85}
  @media (max-width:560px){.abox{flex-direction:column;gap:14px}.abox img{width:64px}}