document.addEventListener('DOMContentLoaded', function () {
    const sliders = document.querySelectorAll('.main-slide');

    sliders.forEach((sliderEl, sliderIndex) => {
      const mainSlider = new Splide(sliderEl, {
    autoplay: true,
    type: "fade",
    rewind: true,
        perPage: 1,
        interval: 6000,
        speed: 5000,
        pauseOnHover: false,
        pauseOnFocus: false,
        arrows: true,
        pagination: false,
      });

      mainSlider.mount();

      // 対応する .samune を取得（.main-slide の次の兄弟要素を想定）
      const samune = sliderEl.nextElementSibling;
      const thumbnails = samune?.querySelectorAll('.image') || [];

      thumbnails.forEach((thumb, index) => {
        thumb.addEventListener('click', () => {
          mainSlider.go(index);

          thumbnails.forEach(t => t.classList.remove('is-active'));
          thumb.classList.add('is-active');
        });
      });

      mainSlider.on('moved', (newIndex) => {
        thumbnails.forEach(t => t.classList.remove('is-active'));
        if (thumbnails[newIndex]) {
          thumbnails[newIndex].classList.add('is-active');
        }
      });
    });
  });