/* =========================================================
   Swiper Cards Modal - Hybrid Version
   (New layout + Restored full-screen zoom overlay)
   ========================================================= */

/* --- モーダル --- */
#swiper-modal.modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
}

/* --- 閉じるボタン（モーダル） --- */
#swiper-modal .close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  z-index: 100000;
}

/* --- Swiper本体（縦横比維持） --- */
#swiper-modal .mySwiperModal {
  width: auto;
  height: 80vh;
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

/* --- スライド --- */
#swiper-modal .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

/* --- 画像（縦横比維持・contain） --- */
#swiper-modal .swiper-slide img {
  width: auto;
  height: auto;
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  cursor: zoom-in;
}

/* --- フルスクリーン ズームオーバーレイ --- */
#zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100000;
}

#zoom-overlay.zoom-show {
  display: flex;
}

#zoom-overlay.zoom-hidden {
  display: none;
}

/* --- ズーム画像 --- */
#zoom-overlay img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
}

/* --- ズーム ×ボタン --- */
#zoom-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
  z-index: 100001;
  line-height: 1;
  font-weight: 300;
}

#zoom-close:hover {
  color: #ccc;
}

/* --- Swiperナビゲーション --- */
#swiper-modal .swiper-button-prev,
#swiper-modal .swiper-button-next {
  color: #fff;
}

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

#zoom-overlay { z-index: 2147483646 !important; }
#zoom-close   { z-index: 2147483647 !important; }

/* --- Swiper内の画像クリックを有効化（cards効果対策） --- */
#swiper-modal .swiper-slide {
  pointer-events: auto !important;
}
#swiper-modal .swiper-slide img {
  pointer-events: auto !important;
  cursor: zoom-in;
}
#swiper-modal .mySwiperModal {
  pointer-events: auto !important;
}

/* === モーダル画像の表示最適化 === */
#swiper-modal .swiper-slide img {
  object-fit: contain !important; /* トリミングせず全体を表示 */
  width: auto !important;
  height: auto !important;
  max-width: 80%;  /* ← 全体を10%小さく */
  max-height: 80%; /* ← 画面高さの90%に制限 */
  margin: 0 auto;
  display: block;
}

/* Swiper中央揃えを補強 */
#swiper-modal .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* スライド全体の位置調整（縦画像がはみ出さないように） */
#swiper-modal .swiper {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 2vh 0;
}

/* === スライダーの左右ナビゲーションボタン調整 === */
#swiper-modal .swiper-button-prev,
#swiper-modal .swiper-button-next {
  width: 35px;          /* ← デフォルトより小さく */
  height: 35px;
  color: #fff;          /* アイコン色（お好みで変更可能） */
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#swiper-modal .swiper-button-prev:hover,
#swiper-modal .swiper-button-next:hover {
  opacity: 1;
  transform: scale(1.15); /* hover時に少し拡大して押しやすく */
}

/* 矢印アイコン自体のサイズを調整 */
#swiper-modal .swiper-button-prev::after,
#swiper-modal .swiper-button-next::after {
  font-size: 18px; /* ← デフォルトは 27px 前後 */
}

/* === モーダル画像を「同一サイズの正方形枠」に収める（トリミングなし）=== */
/* 他のスタイルの後ろ（末尾）に必ず置くこと！ */
#swiper-modal .swiper-slide img {
  width: auto !important;
  height: auto !important;
  /* 画面の短辺を基準に、長辺を統一：80vmin（必要なら数値調整OK）*/
  max-width: 95vmin !important;
  max-height: 95vmin !important;
  object-fit: contain !important;
  display: block;
  margin: 0 auto;
  pointer-events: auto !important; /* ズーム用クリックを担保 */
  cursor: zoom-in;
}

/* （任意）極端に小さい/大きい画面での下限・上限をつけたい場合 */
@media (min-width: 320px) {
  #swiper-modal .swiper-slide img {
    max-width: clamp(260px, 95vmin, 1100px) !important;
    max-height: clamp(260px, 95vmin, 1100px) !important;
  }
}