/* --- スライダー全体 --- */
.slider {
  position: relative;
  max-width: calc(100% - 120px);
  margin: 0 auto;
}

.slider-viewport {
  overflow: hidden;
}

/* スライドの幅（slidesPerView: 'auto' 前提） */
.slider-slide .swiper-slide {
  flex-shrink: 0; /* 幅指定を有効にするために必要 */
  width: 13vw;
  max-width: 200px;
}
.slider-slide .swiper-slide.wide {
  width: 20vw;
  max-width: 400px;
}
.slider-slide .swiper-slide.book {
  width: 10vw;
  max-width: 180px;
}

/* --- 矢印のカスタマイズ --- */
.slider .swiper-button-prev,
.slider .swiper-button-next {
  position: absolute;
  top: 50%;
  margin: 0; /* Swiper既定のネガティブマージンをリセット */
  z-index: 10;
  width: 44px;
  height: 44px;
  background: url(../image/icon_arrow.svg) no-repeat center / contain;
}

/* デフォルトの矢印アイコン（フォント）を消す */
.slider .swiper-button-prev::after,
.slider .swiper-button-next::after {
  content: none;
}

.slider .swiper-button-prev {
  left: -56px;
  transform: translateY(-50%);
}

.slider .swiper-button-next {
  right: -56px;
  /* 上下中央と回転を同時に指定 */
  transform: translateY(-50%) rotate(180deg);
}

/* --- レスポンシブ --- */
@media (max-width: 767px) {
  .slider {
    max-width: 100%;
  }
  .slider-slide .swiper-slide {
    width: 40vw;
  }
  .slider-slide .swiper-slide.wide {
    width: 60vw;
  }
  .slider-slide .swiper-slide.book {
    width: 28vw;
  }

  .slider .swiper-button-prev,
  .slider .swiper-button-next {
    display: none;
  }
}