window.addEventListener('load', function () {
  const el = document.querySelector('#center-slider');
  if (!el) return; // 要素がないページではエラーを出さずに処理を終了

  const splide = new Splide(el, {
    type: 'loop',
    perPage: 3.5,
    focus: 'center',
    gap: '1rem',
    autoplay: true,
    interval: 5000,
    speed: 1500,
    pauseOnHover: false,
    pauseOnFocus: false,
    arrows: false,
    pagination: false,
      
    trimSpace: false, // ループ時に隙間を自動調整
    dragAngleThreshold: 30, // 縦スクロールしようとした時にスライダーが反応するのを防ぐ
      
    flickMaxPages: 1,       // 1回のスワイプで最大1ページ分しか動かさない
    flickPower: 50,       // フリックの勢いを弱める
    dragMinThreshold: {    // ドラッグ開始とみなす距離を調整
      mouse: 10,
      touch: 20,           // スマホでの誤作動防止
    },
    
    breakpoints: {
      768: {
        perPage: 1,
        padding: '10%', // 左右に10%ずつ隣の画像が見える
        gap: '10px',
      }
    }
  });

  // オプションで autoplay: true にしているため自動再生されますが、
  // 念押しでの確実な再生処理としてそのまま残しています。
  splide.on('mounted', () => {
    const autoplay = splide.Components.Autoplay;
    if (autoplay) {
      autoplay.play();
    }
  });

  splide.mount();

  // ※「スマホでのリサイズイベント」の記述は、Splideの標準機能で
  // 自動的にリサイズ検知と最適化が行われるため削除しています。
});