@charset "utf-8";

.slider {
  position: relative;
  max-width: calc(100% - 120px);
  margin: 0 auto;
}

.slider-viewport {
  overflow: hidden;
}

.slider .slider-slide {
  overflow: visible;
}

.slider-slide .swiper-slide {
  width: 25vw;
  max-width: 400px;
  height: 20vw;
  max-height: 250px;
}
.swiper-slide a img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 767px) {
  .slider {
    max-width: 100%;
  }
  .slider-slide .swiper-slide {
    width: 80vw;
    max-width: none;
    height: 200px;
  }
}
/* 矢印を“すぐ外”に配置 */
.slider .swiper-button-prev,
.slider .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.slider .swiper-button-prev {
  left: -56px;
  color: rgba(0, 0, 0, 0);
  background-image: url(../image/icon_arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 44px;
  height: 44px;
}
.slider .swiper-button-next {
  right: -56px;
  color: rgba(0, 0, 0, 0);
  background-image: url(../image/icon_arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 44px;
  height: 44px;
  transform: rotate(180deg);
}

@media (max-width: 767px) {
  .slider .swiper-button-prev,
  .slider .swiper-button-next {
    display: none;
  }
}

/* サムネ行：小さめに */
.slider-thumbnail-thumb .swiper-slide {
  width: auto; /* 自動幅（画像サイズに依存） */
  max-width: 120px; /* 必要なら上限 */
  opacity: 0.5;
  cursor: pointer;
}
.slider-thumbnail-thumb .swiper-slide-thumb-active {
  opacity: 1;
}