/* カスタムスタイル */
/* Tailwind CSSのPreflightがbodyのmargin/paddingをリセット済み */
/* その他のスタイルはTailwind CSSクラスで実装 */

/* iOS Safari アドレスバー対応: dvh (dynamic viewport height) を使用 */
.h-screen-dvh {
  height: 100vh; /* fallback */
}

/* dvhがサポートされている場合に使用（最新ブラウザ対応） */
@supports (height: 100dvh) {
  .h-screen-dvh {
    height: 100dvh;
  }
}

/* Swiper カスタムスタイル */
/* PC/SP別カルーセル: デフォルトで非表示（JavaScriptで表示制御） */
.swiper-pc,
.swiper-sp {
  display: none;
}

.swiper-main .swiper-slide {
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.swiper-main .swiper-zoom-container {
  display: flex;
  width: fit-content;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.swiper-main .swiper-zoom-container picture {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.swiper-main .swiper-slide picture {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.swiper-main .swiper-slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.swiper-thumbs .swiper-slide {
  width: 120px;
  height: 90px;
  opacity: 1;
}

.swiper-thumbs .swiper-slide-thumb-active {
  border-color: rgb(2 132 199) !important; /* sky-600 */
  border-width: 4px !important;
}

.swiper-thumbs .swiper-slide-thumb-active .thumbnail-number {
  color: rgb(2 132 199) !important; /* sky-600 */
}

/* ナビゲーションボタンのホバー表示（PC用） */
/* デフォルトで非表示 */
.swiper-button-prev-hover-pc,
.swiper-button-next-hover-pc {
  display: none;
}

/* SP用ナビゲーションボタン・ページネーションは常時表示（3.5秒後にフェードアウト） */
.swiper-button-prev-hover-sp,
.swiper-button-next-hover-sp,
.slide-counter-sp {
  opacity: 1;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.swiper-button-prev-hover-sp,
.swiper-button-next-hover-sp {
  display: flex;
}

/* フェードアウト時のクラス */
.swiper-button-prev-hover-sp.nav-btn-hidden,
.swiper-button-next-hover-sp.nav-btn-hidden,
.slide-counter-sp.nav-btn-hidden {
  opacity: 0;
  visibility: hidden;
}

/* ホバー可能なデバイス（マウス・トラックパッド搭載PC）かつ768px以下（モバイルサイズ）でのみホバー機能を有効化 */
/* customボタンが非表示の時のみホバーボタンを表示 */
/* タッチデバイス（スマホ・タブレット）では完全に非表示 */
@media (hover: hover) and (pointer: fine) and (max-width: 768px) {
  .swiper-button-prev-hover-pc,
  .swiper-button-next-hover-pc,
  .swiper-button-prev-hover-sp,
  .swiper-button-next-hover-sp {
    display: flex;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .swiper-pc:not(.no-hover):hover .swiper-button-prev-hover-pc,
  .swiper-pc:not(.no-hover):hover .swiper-button-next-hover-pc,
  .swiper-sp:not(.no-hover):hover .swiper-button-prev-hover-sp,
  .swiper-sp:not(.no-hover):hover .swiper-button-next-hover-sp {
    opacity: 1;
  }
}

/* タッチデバイスではPC用ホバーボタンを無効化（SP用は常時表示） */
.swiper-pc.no-hover .swiper-button-prev-hover-pc,
.swiper-pc.no-hover .swiper-button-next-hover-pc {
  display: none !important;
}

/* 画像の横スクロール有効化（PC表示時、画面幅が600px未満の場合） */
.slide-scrollable {
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  justify-content: flex-start !important;
}

.slide-scrollable img {
  min-width: var(--img-min-width, 600px) !important;
  max-width: none !important;
}