/* このスタイルはSwiperのコンテナとスライドに特化したものです */
.swiper1,
.swiper2,
.swiper3,
.swiper4,
.swiper5 {
  height: auto; /*400px;*/
  width: 100%;
  overflow: hidden;
  max-width: 1100px;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-button-next,
.swiper-button-prev {
  color: #fff;
}

.swiper-pagination-bullet-active {
  background: #fff;
}

.swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

#swiper1,
#swiper2,
#swiper3,
#swiper4,
#swiper5 {
  margin: 20px 0;
  position: relative;
}

/* Swiperのデフォルト矢印を非表示にする */

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev,
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background-image: unset;
}

/* ページネーションをスライダー下に表示 */
.swiper-pagination {
  position: absolute;
  text-align: center;
  bottom: 10px; /* スライダー下からの距離 */
  width: 100%;
  height: 40px; /* 高さが0にならないよう強制 */
}
/* 丸のスタイル */
.swiper-pagination-bullet {
  background: #000;
  opacity: 0.5;
}

.swiper-pagination-bullet-active {
  background: #007aff; /* アクティブ時の色 */
  opacity: 1;
}