@charset "UTF-8";

/* =========================================================
   トプ100 ｜ アイキャッチ（実データで塗り分けた100ドット図）
   ---------------------------------------------------------
   記事の先頭（ヒーロー直下）と、トップ・一覧のカードの上に出す。
   画像そのものは tools/アイキャッチ生成.py が作る（手描きしない）。
   ========================================================= */

.article-eyecatch {
  margin-top: 24px; /* 幅は .container に任せる */
}

.article-eyecatch img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
}

/* 一覧カード：カードの幅いっぱいに、角丸はカードに合わせる */
.eyecatch-thumb {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 12px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-md);
}

@media (max-width: 767px) {
  .article-eyecatch { margin-top: 16px; }
}