@charset "UTF-8";
.swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 700px;
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
}

.mainSwiper {
  width: 100%;
  height: 700px;
}

.mainSwiper .swiper-slide {
  width: 100%;
  height: 700px;
}

.mainSwiper .swiper-slide img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.swiper-pagination {
  display: block;
  bottom: 0 !important;
}

.swiper-pagination-bullet {
  width: 12px !important;
  height: 12px !important;
  margin: 0 0 0 10px !important;
  background: #000 !important;
  bottom: 20px !important;
}

.swiper-pagination-bullet:first-child {
  margin: 0 !important;
}

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

.swiper-button-prev,
.swiper-button-next {
  width: 20px !important;
  /* ボタンの幅 */
  height: 30px !important;
  /* ボタンの高さ */
  background-size: 20px 30px;
  /* 表示したいサイズ */
  margin-top: 0;
}

.swiper-button-next {
  background-image: url(../images/common/SVG/arrow.svg);
  right: 50px !important;
}

.swiper-button-prev {
  background-image: url(../images/common/SVG/arrow.svg);
  transform: scale(-1, 1);
  /* 左右反転 */
  left: 50px !important;
}

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

@media screen and (max-width: 1240px) {
  .swiper-button-next {
    right: 0px !important;
  }
  .swiper-button-prev {
    left: 0px !important;
  }
}

@media screen and (max-width: 480px) {
  .swiper--wrapper {
    height: 70vh;
  }
  .mainSwiper {
    height: 70vh;
  }
  .mainSwiper .swiper-slide {
    height: 70vh;
  }
}