@charset "UTF-8";

/*--------------------------------------------------------
  ギャラリー ループスライダー（.gallery-loop-slider）
  5枚表示を基準に横方向へゆっくり無限ループ
--------------------------------------------------------*/

.gallery-loop-slider {
  display: block;
  overflow: hidden;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* トラック（JSで挿入）: 画像を3セット並べ、JSで位置リセットして無限ループ */
.gallery-loop-slider__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  width: calc(60 * var(--slide-count, 5) * 1%);
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0) translateX(0);
}

/* 1枚あたりは常に「5枚見えている幅」の20% */
.gallery-loop-slider__track > figure {
  flex: 0 0 20%;
  margin: 0;
  padding: 0;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.gallery-loop-slider__track>figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  vertical-align: top;
}

/* 高さは5枚表示分のアスペクトを維持（例: 3:2） */
.gallery-loop-slider__track > figure {
  aspect-ratio: 3 / 2;
}

/* 639px以下: 2枚表示に切り替え・高さを確保してループスライドとして成立させる */
@media (max-width: 639px) {
  .gallery-loop-slider {
    /* ビューポート幅いっぱいに広げて1枚あたりの表示を大きく（親に overflow-x: hidden があると安全） */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: 32vw;
  }

  .gallery-loop-slider__track {
    width: calc(150 * var(--slide-count, 5) * 1%);
    min-height: 32vw;
    align-items: stretch;
  }

  .gallery-loop-slider__track > figure {
    flex: 0 0 calc(100% / (3 * var(--slide-count, 5)));
    min-height: 32vw;
  }

  .gallery-loop-slider__track > figure img {
    min-height: 32vw;
    object-fit: cover;
  }
}