@charset "utf-8";
.products-content-wrap.w750 {
  max-width: 750px;
  margin: 0 auto;
}

.surana .slide-container {
  position: relative;
}

.surana .splide {
  position: absolute;
  top: 0;
}

.surana .splide__arrow {
  /* デフォルトの背景とSVGアイコンを非表示に */
  background: transparent;
}

.surana .splide__arrow svg {
  display: none;
}

/* 矢印ボタンのサイズを調整 */
.surana .splide__arrow {
  width: 48px;
  height: 48px;
}

/* 「前へ」ボタンに画像を設定 */
.surana .splide__arrow--prev {
  background-image: url("../img/arr_prev.png");
  background-size: contain;
}

/* 「次へ」ボタンに画像を設定 */
.surana .splide__arrow--next {
  background-image: url("../img/arr_next.png");
  background-size: contain;
}

/* --- ここまでカスタム矢印のスタイル --- */

/* スライダー画像が見やすいように少し余白を追加 */
.surana .splide {
  padding: 0 3em;
}

.surana .splide__pagination {
  bottom: -8%;
  gap: 20px;
}

.surana .splide__pagination__page {
  width: 20px;
  height: 20px;
}

.surana .splide__pagination__page.is-active {
  background-color: #292929;
  transform: none;
}

@media screen and (max-width: 768px) {
  .surana .splide {
    padding: 0 1.5em;
  }

  .surana .splide__arrow {
    width: 8vw;
    height: 8vw;
  }

  .surana .splide__arrow--prev {
    left: 0;
  }
  .surana .splide__arrow--next {
    right: 0;
  }

  .surana .splide__pagination {
    gap: 5%;
  }

  .surana .splide__pagination__page {
    width: 3vw;
    height: 3vw;
  }
}