// JavaScript Document










document.addEventListener('DOMContentLoaded', function () {

    // ----------------------------------------------------
    // ① meal-slide01 の設定 (ID指定：ページ内に1つだけある場合)
    // ----------------------------------------------------
    const slide01Element = document.querySelector('#meal-slide01');
    if (slide01Element) {
        new Splide(slide01Element, {
            type: 'loop',
            padding: { left: 0 , right: '20vw' },
            perPage: 1,
            focus: 0,
            perMove: 1,
            gap: '0.25rem',
            autoplay: true,
            interval: 3000,
            speed: 1000,
            arrows: true,
            pagination: false,
            breakpoints: {
                768: { 
                    perPage: 1, 
                    padding: '0' 
                },
            }
        }).mount();
    }

    // ----------------------------------------------------
    // ② meal-slide02 の設定 (クラス指定：ページ内に複数ある場合に対応)
    // ----------------------------------------------------
    const slide02Elements = document.querySelectorAll('.meal-slide02');
    slide02Elements.forEach(el => {
        new Splide(el, {
            type: 'loop',
            perPage: 1,
            focus: 'center',
            padding: '25%',   // PC の余白
            gap: '1rem',
            autoplay: true,
            interval: 3000,
            speed: 1000,
            arrows: true,
            pagination: true,
            breakpoints: {
                768: {
                    padding: 0,   // スマホは余白なし
                    gap: '0.5rem' // スマホは余白を少し詰める
                }
            }
        }).mount();
    });

});