/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Dec 21 2025 | 08:06:24 */
/* ==============================
   Zoom ご利用方法 スライダー（scroll-snap版 / CSS変数で高さ固定）
============================== */

.zoom-photo-slider{
  --accent: #00a8c6;
  --dot-off:#e2e8ee;

  /* ★初期は auto、JSが確定したら px を入れる */
  --zoomVpH: auto;

  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 64px 28px;
  box-sizing: border-box;
}

/* テーマ切替 */
.zoom-photo-slider.is-theme-blue{   --accent: #00a8c6; }
.zoom-photo-slider.is-theme-red{    --accent: #e60012; }
.zoom-photo-slider.is-theme-orange{ --accent: #f4a100; }

/* ステージ（必要なら将来拡張） */
.zoom-photo-slider__stage{
  position: relative;
}

/* 表示エリア：ネイティブ横スクロール */
.zoom-photo-slider__viewport{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  background: transparent;

  /* ★高さはCSS変数のみで制御（他JSの inline height に勝つ） */
  height: var(--zoomVpH) !important;
}
.zoom-photo-slider__viewport::-webkit-scrollbar{ display:none; }

/* レール */
.zoom-photo-slider__track{
  display: flex;
  gap: 0;

  /* ★ここが重要：flex の初期値 stretch で高さが引っ張られるのを止める */
  align-items: flex-start;
}

/* スライド（PC） */
.zoom-photo-slider__slide{
  flex: 0 0 100%;
  box-sizing: border-box;
  scroll-snap-align: center;
  padding: 0 30px;

  /* 念のため：高さの自動引っ張りを受けにくくする */
  align-self: flex-start;
}

/* リンクの時だけ使う */
.zoom-photo-slider__link{
  display:block;
  line-height:0;
  text-decoration:none;
}

/* 画像安定化 */
.zoom-photo-slider__slide img{
  display: block;
  width: 100%;
  height: auto;
}

/* 矢印（PC） */
.zoom-photo-slider__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2;

  width: 56px;
  height: 72px;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}

.zoom-photo-slider__arrow::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
}

.zoom-photo-slider__arrow--prev{ left: 34px; }
.zoom-photo-slider__arrow--prev::before{
  border-width: 18px 24px 18px 0;
  border-color: transparent var(--accent) transparent transparent;
}

.zoom-photo-slider__arrow--next{ right: 34px; }
.zoom-photo-slider__arrow--next::before{
  border-width: 18px 0 18px 24px;
  border-color: transparent transparent transparent var(--accent);
}

/* ● ナビ */
.zoom-photo-slider__dots{
  display: flex;
  justify-content: center;
  gap: 8px;

  /* 画像と●〇の間 */
  margin-top: 15px;

  /* 文字行の影響を消して、ズレを起こしにくくする */
  line-height: 0;
}
.zoom-photo-slider__dot{
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--dot-off);
  border: none !important;
  padding: 0 !important;
  flex: 0 0 10px;
}
.zoom-photo-slider__dot.is-active{
  background: var(--accent);
}

/* =========================
   SP調整
========================= */
@media (max-width: 767px){
  .zoom-photo-slider{
    padding: 0 8px 18px;
  }

  .zoom-photo-slider__slide{
    padding: 0 6px;
  }

  .zoom-photo-slider__arrow{
    width: 34px;
    height: 54px;
    top: calc(50% - 12px);
  }

  .zoom-photo-slider__arrow--prev{ left: -18px; }
  .zoom-photo-slider__arrow--next{ right: -18px; }

  .zoom-photo-slider__arrow--prev::before{
    border-width: 12px 16px 12px 0;
  }
  .zoom-photo-slider__arrow--next::before{
    border-width: 12px 0 12px 16px;
  }

  .zoom-photo-slider__dots{
    margin-top: 15px!important;
  }
}