/* FILE: assets/css/page-news-article.css
   NEWS 詳細ページのうち「本文に見出しや画像が入る記事」用の追加スタイル。
   page-news.css の後に読み込む。page-news.css 自体には手を入れていない。

   使い方（本文 .news-article__body の中）
     見出し … <h2>契約の背景</h2>
     画像   … <figure class="news-article__figure"><img ...></figure>

   ★2026-09-10 追加（タンピネス・ローバーズFCの記事で初使用） */

/* ---------- 冒頭画像（タイトル直下） ----------
   余白は page-news.css 側で指定済み。ここでは幅と比率の保持だけ */
.news-article__media {
  width: 100%;
  height: auto;
}

/* ---------- 本文中の見出し ----------
   base.css の h2（32px）は記事内では大きすぎるため、本文より一段大きい程度に抑える */
.news-article__body h2 {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1.6;
  margin-top: var(--space-lg);
  padding-left: 0.75em;
  border-left: 4px solid var(--color-ink);
}

/* 見出し直後の段落は、段落どうしの間隔より少し詰める */
.news-article__body h2 + p {
  margin-top: var(--space-sm);
}

/* ---------- 本文中の画像 ---------- */
.news-article__figure {
  margin-top: var(--space-lg);
}

.news-article__figure img {
  width: 100%;
  height: auto;
}

/* 画像の直後に段落が続く場合 */
.news-article__figure + p {
  margin-top: var(--space-lg);
}

@media (max-width: 767px) {
  .news-article__body h2 {
    font-size: var(--fs-base);
    margin-top: var(--space-md);
  }
  .news-article__figure {
    margin-top: var(--space-md);
  }
}