@charset "UTF-8";
.secMainVisual {
  background-color: #ffffff;
  margin-top: 10px;
}
.secMainVisual .secMainVisualIn .sliderWrapper {
  position: relative;
}
.secMainVisual .secMainVisualIn .sliderWrapper .mainSwiper {
  overflow: hidden;
}
.secMainVisual .secMainVisualIn .sliderWrapper .mainSwiper .swiper-slide {
  line-height: 0;
  aspect-ratio: 885/504;
  /* スライダーのアスペクト比 */
  width: 100%;
  height: 100%;
}
.secMainVisual .secMainVisualIn .sliderWrapper .mainSwiper .swiper-slide img {
  width: 100%;
  height: 100%;
  /* ※修正: object-fitを効かせるために100%に変更 */
  -o-object-fit: cover;
     object-fit: cover;
}
.secMainVisual .secMainVisualIn .sliderWrapper {
  /* デザインに合わせた細い矢印の設定 */
}
.secMainVisual .secMainVisualIn .sliderWrapper .swiper-button-prev,
.secMainVisual .secMainVisualIn .sliderWrapper .swiper-button-next {
  color: #999999;
  margin-top: 0;
}
.secMainVisual .secMainVisualIn .sliderWrapper .swiper-button-prev::after,
.secMainVisual .secMainVisualIn .sliderWrapper .swiper-button-next::after {
  font-weight: 300;
}
.secMainVisual .secMainVisualIn .sliderWrapper {
  /* ドット（ページネーション）の設定 */
}
.secMainVisual .secMainVisualIn .sliderWrapper .swiper-pagination {
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.secMainVisual .secMainVisualIn .sliderWrapper .swiper-pagination .swiper-pagination-bullet {
  background-color: #cccccc;
  opacity: 1;
  transition: background-color 0.3s ease;
}
.secMainVisual .secMainVisualIn .sliderWrapper .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #707070;
}
.secMainVisual .secMainVisualIn .singleImage {
  line-height: 0;
  aspect-ratio: 885/504;
  /* スライダーのアスペクト比 */
  width: 100%;
  height: 100%;
}
.secMainVisual .secMainVisualIn .singleImage img {
  width: 100%;
  height: 100%;
  /* ※修正: object-fitを効かせるために100%に変更 */
  -o-object-fit: cover;
     object-fit: cover;
}

/* PC〜タブレットのレイアウト調整（ブレイクポイントではないが相対的な余白や位置を管理）*/
.secMainVisual .secMainVisualIn .sliderWrapper {
  /* 画像の左右・下部にナビゲーション用の余白を設ける */
  padding: 0 0px 40px;
}
.secMainVisual .secMainVisualIn .sliderWrapper .swiper-button-prev,
.secMainVisual .secMainVisualIn .sliderWrapper .swiper-button-next {
  top: calc(50% - 20px);
  /* 下部のpadding分（40pxの半分）位置を上に補正 */
  transform: translateY(-50%);
  width: 10px;
  height: 20px;
  background-size: contain;
}
.secMainVisual .secMainVisualIn .sliderWrapper .swiper-button-prev::after,
.secMainVisual .secMainVisualIn .sliderWrapper .swiper-button-next::after {
  font-size: 30px;
}
.secMainVisual .secMainVisualIn .sliderWrapper .swiper-button-prev {
  left: -30px;
  background-image: url(../images/arrow_prev.svg);
}
.secMainVisual .secMainVisualIn .sliderWrapper .swiper-button-next {
  right: -30px;
  background-image: url(../images/arrow_next.svg);
}
.secMainVisual .secMainVisualIn .sliderWrapper .swiper-pagination {
  bottom: 0;
}
.secMainVisual .secMainVisualIn .sliderWrapper .swiper-pagination .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  margin: 0 8px !important;
  /* Swiperのデフォルトマージンを上書き */
}

@media only screen and (max-width: 767px) {
  .secMainVisual {
    padding: 20px 0;
  }
  .secMainVisual .secMainVisualIn .sliderWrapper {
    /* スマホ時は矢印を非表示にするため左右の余白をなくす */
    padding: 0 0 30px;
  }
  .secMainVisual .secMainVisualIn .sliderWrapper .swiper-button-prev,
  .secMainVisual .secMainVisualIn .sliderWrapper .swiper-button-next {
    display: none;
  }
  .secMainVisual .secMainVisualIn .sliderWrapper .swiper-pagination {
    bottom: 0;
  }
  .secMainVisual .secMainVisualIn .sliderWrapper .swiper-pagination .swiper-pagination-bullet {
    width: 5px;
    height: 5px;
    margin: 0 5px !important;
  }
  .secMainVisual .secMainVisualIn .singleImage {
    width: 100%;
    /* スマホ時、もし余白等が必要な場合はここへ追加 */
  }
}/*# sourceMappingURL=cms_main_slider.css.map */