/* 置き場所: テーマ内 assets/css/new-slider.css（既存のSCSSに混ぜてもOK）
   カード自体の見た目は既存の .section-news__item のスタイルをそのまま使う想定 */

/* ===== 矢印をスライダーの外側に出すための土台 =====
   矢印の基準を .container にして、.news-list__swiper は position: static にする。
   こうすると overflow: hidden はスライドだけを切り抜いて、矢印は切り抜かれない */
.news-list--slider .container {
  position: relative;
}

.news-list--slider .news-list__swiper {
  position: static;
  overflow: hidden;
  margin-inline: 56px; /* 左右に矢印を置くスペース */
}

/* 既存の .news-list__list が grid で3列にしてるので、Swiperの横一列に強制リセット */
.news-list--slider .news-list__list {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 既存カードの幅・余白指定を無効化して、幅はSwiperに任せる */
.news-list--slider .section-news__item.swiper-slide {
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  max-width: none !important;
  /* margin-right は Swiper が spaceBetween として付けるので触らない */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  /* スライドの高さを揃えて READ MORE を下揃えに */
  height: auto;
  display: flex;
  flex-direction: column;
}

/* サムネイル：460×320比率で切り抜き */
.news-list--slider .section-news__item--image {
  margin-bottom: clamp(5.94px, calc(11 / 1920 * 100vw), 11px);
  aspect-ratio: 460 / 320;
  overflow: hidden;
}

.news-list--slider .section-news__item--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-list--slider .section-news__item--link {
  margin-top: auto;
}

/* ===== ナビ：ドットはカードの下、矢印は左右 ===== */
.news-list__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
}

.news-list__nav .swiper-pagination {
  position: static;
  width: auto;
}

.news-list__nav .swiper-pagination-bullet-active {
  background: #e60012; /* slash-red に合わせて適宜変更 */
}

/* 矢印：.container 基準で左右に配置 */
.news-list__nav .swiper-button-prev,
.news-list__nav .swiper-button-next {
  position: absolute;
  /* 上下位置：スライダー部分の中央（下のドット分ずらしてる）。画像の中央に寄せたいならここを調整 */
  top: calc(50% - 22px);
  transform: translateY(-50%);
  margin: 0;
  width: 32px;
  height: 32px;
}

.news-list__nav .swiper-button-prev {
  left: 0;
  right: auto;
}

.news-list__nav .swiper-button-next {
  right: 0;
  left: auto;
}

/* デフォルトの「＜ ＞」を消して、黒の三角（SVG）に差し替え */
.news-list__nav .swiper-button-prev::after,
.news-list__nav .swiper-button-next::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.news-list__nav .swiper-button-prev svg,
.news-list__nav .swiper-button-next svg {
  display: none; /* Swiperのバージョンによっては中にSVGが入るので保険 */
}

/* hoverでうっすら */
.news-list__nav .swiper-button-prev,
.news-list__nav .swiper-button-next {
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  .news-list__nav .swiper-button-prev:hover,
  .news-list__nav .swiper-button-next:hover {
    opacity: 0.5;
  }
}

/* ◀ */
.news-list__nav .swiper-button-prev::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15 2 L3 10 L15 18 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* ▶ */
.news-list__nav .swiper-button-next::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 2 L17 10 L5 18 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* SP：矢印まわりを少しコンパクトに */
@media (max-width: 767.98px) {
  .news-list--slider .news-list__swiper {
    margin-inline: 36px;
  }

  .news-list__nav .swiper-button-prev,
  .news-list__nav .swiper-button-next {
    width: 24px;
    height: 24px;
  }

  .news-list__nav .swiper-button-prev::after,
  .news-list__nav .swiper-button-next::after {
    width: 14px;
    height: 14px;
  }

  .page-top .news-list {
    margin-bottom: 0;
  }
}