/* ===== page-column.css ｜ コラム記事（現行STUDIOサイトから移植した10本）=====
   page-news-detail.css の記事スタイルに、移植記事で必要になる要素（導入ブロック・h3/h4・画像・箇条書き）だけを足す。
   色/書体トークンは base.css。 */

/* --- 導入ブロック: 副題（太め）＋リード文 --- */
.article-intro{display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:100%}
.article-intro__title{width:100%;font-size:var(--fs-h5);font-weight:700;line-height:1.6;letter-spacing:.2px;color:var(--c-text-sub)}

/* --- 小見出し: h3 は左に青の縦線、h4 は太字のみ --- */
.article-part__sub{position:relative;width:100%;padding-left:16px;font-size:var(--fs-h5);font-weight:700;line-height:1.6;letter-spacing:.2px}
.article-part__sub::before{content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:3px;background:var(--c-text-sub);border-radius:2px}
.article-part__sub2{width:100%;font-size:var(--fs-body-m);font-weight:700;line-height:1.6;letter-spacing:.16px;color:var(--c-text-sub)}
/* 見出し直後の本文は詰める */
.article-part__sub + .article-part__text,.article-part__sub2 + .article-part__text,.article-part__sub + .article-list,.article-part__sub2 + .article-list{margin-top:-24px}

/* --- 画像: 元の比率を保ったまま幅に収める（縦横比は変えない） --- */
.article-figure{width:100%;margin:0}
.article-figure img{display:block;width:100%;max-width:640px;height:auto;border-radius:var(--r-s)}
.article-figure--hero img{max-width:100%;border-radius:var(--r-m)}

/* --- 箇条書き --- */
.article-list{display:flex;flex-direction:column;gap:8px;width:100%;padding-left:1.4em;font-size:var(--fs-body-m);font-weight:400;line-height:1.8;letter-spacing:.16px;list-style:disc}
ol.article-list{list-style:decimal}
.article-list li::marker{color:var(--c-text-sub)}
.article-list a,.article-part__text a,.article-note__text a{color:var(--c-text-sub);text-decoration:underline;text-underline-offset:.2em}

/* --- 補足ボックスに見出し行を追加 --- */
.article-note__title{width:100%;font-size:var(--fs-h5);font-weight:700;line-height:1.6;letter-spacing:.2px;color:var(--c-text-sub)}

/* 表が横に長い場合の保険（記事幅を超えたら中でスクロール） */
.article-table-wrap{width:100%;overflow-x:auto}

@media (max-width:768px){
  .article-intro{gap:12px}
  .article-part__sub{padding-left:12px;letter-spacing:.15px}
  .article-part__sub + .article-part__text,.article-part__sub2 + .article-part__text,.article-part__sub + .article-list,.article-part__sub2 + .article-list{margin-top:-16px}
  .article-figure img{max-width:100%}
  .article-list{line-height:1.7;letter-spacing:.15px}
}