@charset "utf-8";

/* アクティブなページネーションの色 */
.swiper-pagination-bullet-active {
  background-color: var(--color-primary);
}

/* 左右の矢印の色 */
.swiper-button-next,
.swiper-button-prev {
  color: var(--color-primary);
}

/* トップ */
.slider {
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
}

.js-swiperSlider.swiper {
  overflow: visible !important;
}

.js-swiperSlider .swiper-wrapper {
  transition-timing-function: linear !important; /* 一定速度で流す */
}

.js-swiperSlider .swiper-slide {
  width: 28vw; /* SP時の幅 */
  max-width: 180px;
  flex-shrink: 0;
}

.js-swiperSlider .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 5px;
}

@media screen and (min-width: 768px) {
  .js-swiperSlider .swiper-slide {
    width: 12vw; /* PC時の幅 */
    max-width: 220px;
  }
}