@charset "UTF-8";

/* ============================================================
   トップページ トピックスバナー（自動スクロールカルーセル）
   - 比率: 600 x 300 (2:1) を厳密に維持
   - PC: 中央2枚 + 両サイド半分見切れ
   - SP: 中央1枚 + 両サイド10%見切れ
   ============================================================ */

.top_topics {
  padding: 40px 0;
  overflow: hidden;
}

.top_topics_container {
  width: 100%;
}

.top_topics_slider {
  width: 100%;
}

.top_topics_slider .topics_item {
  padding: 0 8px;
  box-sizing: border-box;
}

/* 2:1 アスペクト比強制（padding-bottomトリック＋aspect-ratioで二重保証） */
.top_topics_slider .topics_item a,
.top_topics_slider .topics_item .topics_item_nolink {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 2 / 1;
}

/* padding-bottomトリック (aspect-ratio未対応ブラウザ向けフォールバック) */
.top_topics_slider .topics_item a::before,
.top_topics_slider .topics_item .topics_item_nolink::before {
  content: "";
  display: block;
  padding-top: 50%;
}

.top_topics_slider .topics_item img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: opacity .3s ease;
}

.top_topics_slider .topics_item a:hover img,
.top_topics_slider .topics_item a:focus img {
  opacity: .85;
}

/* ============================================================
   静的レイアウト（件数が表示枠に収まる場合：Slick未初期化）
   PC: 4件未満 / SP: 2件未満 で適用
   ============================================================ */
.top_topics_slider.is-static {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
}

.top_topics_slider.is-static .topics_item {
  flex: 0 1 600px;
  max-width: 600px;
  min-width: 0;
  padding: 0;
}

/* FOUC対策: 初期化前は最初の1枚のみ表示（is-staticでもis-slickでもない状態） */
.top_topics_slider:not(.slick-initialized):not(.is-static) .topics_item:nth-child(n+2) {
  display: none;
}

.top_topics_slider:not(.slick-initialized):not(.is-static) .topics_item {
  max-width: 600px;
  margin: 0 auto;
}

/* SP（〜767px） */
@media (max-width: 767px) {
  .top_topics {
    padding: 24px 0;
  }
  .top_topics_slider .topics_item {
    padding: 0 6px;
  }
  .top_topics_slider.is-static {
    gap: 8px;
    padding: 0 8px;
  }
}