/* 横にスワイプできる領域 */
.swipe-wrap{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* iOSでヌルヌル */
  scroll-snap-type: x mandatory;     /* スナップ */
  padding: 12px;
}

/* 横並び */
.swipe-gallery{
  display: flex;
  gap: 12px;
}

/* 1枚ずつパチっと止まる */
.swipe-gallery a{
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* 見た目（好みで調整OK） */
.swipe-gallery img{
  width: 220px;
  height: 150px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* スクロールバーを目立たせない（任意） */
.swipe-wrap::-webkit-scrollbar{ height: 6px; }
.swipe-wrap::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.2); border-radius: 999px; }


.fancybox-container { z-index: 999999 !important; }



#gallerySwiper{
  width: 100%;
  overflow: hidden;
}

#gallerySwiper .swiper-slide{
  width: 70vw;           /* スマホで気持ちいいサイズ */
  max-width: 420px;      /* PCでデカくなりすぎない */
}

#gallerySwiper img{
  width: 100%;
  height: auto;
  display: block;
}



/* スライドの横幅を決める（16:9 → 800:450） */
.swiper-slide {
  width: 800px;           /* PC基準 */
}

/* 16:9 の比率を固定 */
.swiper-slide a {
  display: block;
  aspect-ratio: 16 / 9;   /* ← 800:450 */
  overflow: hidden;
  border-radius: 10px;
}

/* 画像を枠いっぱいにフィット */
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* はみ出た分はトリミング */
  object-position: center center; 
  display: block;
}


@media (max-width: 768px) {
  .swiper-slide {
    width: 90vw; /* 画面幅の90% */
  }
}


/* ✅ 文字 */
.slide-caption {
  margin-top: 10px;
  font-size: 14px;
  color: #fff;
  text-align: center;
}