window.addEventListener('scroll', function() {
    var conWrap2 = document.querySelector('.con-wrap');
    var flList2 = document.querySelector('.fl-list');
    var headBox = document.querySelector('.head-box');
  
    var rect2 = conWrap2.getBoundingClientRect();
    var headBoxRect = headBox.getBoundingClientRect();
  
    // conWrap2がビューポート内に存在し、headBoxがビューポート外に存在するかどうかを確認します
    if(rect2.top <= window.innerHeight && rect2.bottom >= 0 && (headBoxRect.bottom < 0 || headBoxRect.top > window.innerHeight)) {
        // 条件を満たす場合、flList2に'on'クラスを追加します
        flList2.classList.add('on');
    } else {
        // 条件を満たさない場合、flList2から'on'クラスを削除します
        flList2.classList.remove('on');
    }
  });


window.addEventListener('scroll', function() {
    var slider1 = document.querySelector('.slider1');
    var fixlist1 = document.querySelector('.fixlist-1');
    var yajirushiFix = document.querySelector('.yajirushi-fix');
    var slideTitle = document.querySelector('.slide-ttl1'); // 新しい要素を選択
    var noteBox1 = document.querySelector('.foot-flex'); // 新しい要素を選択

    var slider1Rect = slider1.getBoundingClientRect();
    var slideTitleRect = slideTitle.getBoundingClientRect(); // 新しい要素の位置を取得
    var noteBox1Rect = noteBox1.getBoundingClientRect(); // 新しい要素の位置を取得

    // slider1がビューポート内に存在し、かつnoteBox1がビューポート内に存在しないかどうかを確認します
    if(slider1Rect.top < window.innerHeight && slider1Rect.bottom >= 0 && noteBox1Rect.top >= window.innerHeight) {
        // 条件を満たす場合、yajirushiFixに'on'クラスを追加します
        yajirushiFix.classList.add('on');
    } else {
        // 条件を満たさない場合、yajirushiFixから'on'クラスを削除します
        yajirushiFix.classList.remove('on');
    }

    // slideTitleがビューポートから消えているかつslider1がビューポート内に存在するかどうかを確認します
    if(slideTitleRect.bottom < 0 && slider1Rect.top < window.innerHeight && slider1Rect.bottom >= 0) {
        // 条件を満たす場合、fixlist1に'on'クラスを追加します
        fixlist1.classList.add('on');
    } else {
        // 条件を満たさない場合、fixlist1から'on'クラスを削除します
        fixlist1.classList.remove('on');
    }
});

window.addEventListener('scroll', function() {
  var slider2 = document.querySelector('.slider2');
  var fixlist2 = document.querySelector('.fixlist-2');
  var yajirushiFix2 = document.querySelector('.yajirushi-fix2');
  var slideTitle2 = document.querySelector('.slide-ttl2'); // 新しい要素を選択
  var noteBox2 = document.querySelector('.note-box2'); // 新しい要素を選択

  var slider2Rect = slider2.getBoundingClientRect();
  var slideTitle2Rect = slideTitle2.getBoundingClientRect(); // 新しい要素の位置を取得
  var noteBox2Rect = noteBox2.getBoundingClientRect(); // 新しい要素の位置を取得

  // slider2がビューポート内に存在するかどうかを確認します
  if(slider2Rect.top < window.innerHeight && slider2Rect.bottom >= 0 && noteBox2Rect.top >= window.innerHeight) {
      // 条件を満たす場合、fixlist2とyajirushiFix2に'on'クラスを追加します
      yajirushiFix2.classList.add('on');
  } else {
      // 条件を満たさない場合、fixlist2とyajirushiFix2から'on'クラスを削除します
      yajirushiFix2.classList.remove('on');
  }
  // slideTitleがビューポートから消えているかつslider1がビューポート内に存在するかどうかを確認します
  if(slideTitle2Rect.bottom < 0 && slider2Rect.top < window.innerHeight && slider2Rect.bottom >= 0) {
      // 条件を満たす場合、fixlist1とyajirushiFixに'on'クラスを追加します
      fixlist2.classList.add('on');
  } else {
      // 条件を満たさない場合、fixlist1とyajirushiFixから'on'クラスを削除します
      fixlist2.classList.remove('on');
  }
});



document.addEventListener('DOMContentLoaded', function() {
  var slide1 = document.querySelector('.slider1');
  var btnNext1 = document.querySelector('.swiper-button-next1');
  var btnPrev1 = document.querySelector('.swiper-button-prev1');

  // スクロール量を定義します
  var scrollAmount = 100;

  // nextボタンをクリックしたときのイベント
  btnNext1.addEventListener('click', function() {
      slide1.scrollLeft += scrollAmount;

      // スクロール位置に基づいて.offクラスを追加/削除します
      btnPrev1.classList.remove('off');
      if (slide1.scrollWidth - slide1.scrollLeft <= slide1.clientWidth) {
          btnNext1.classList.add('off');
      }
  });

  // prevボタンをクリックしたときのイベント
  btnPrev1.addEventListener('click', function() {
      slide1.scrollLeft -= scrollAmount;

      // スクロール位置に基づいて.offクラスを追加/削除します
      btnNext1.classList.remove('off');
      if (slide1.scrollLeft === 0) {
          btnPrev1.classList.add('off');
      }
  });

  // 初期状態でprevボタンに.offクラスを追加します
  btnPrev1.classList.add('off');
});
document.addEventListener('DOMContentLoaded', function() {
var slide2 = document.querySelector('.slider2');
var btnNext2 = document.querySelector('.swiper-button-next2');
var btnPrev2 = document.querySelector('.swiper-button-prev2');

// スクロール量を定義します
var scrollAmount = 100;

// nextボタンをクリックしたときのイベント
btnNext2.addEventListener('click', function() {
    slide2.scrollLeft += scrollAmount;

    // スクロール位置に基づいて.offクラスを追加/削除します
    btnPrev2.classList.remove('off');
    if (slide2.scrollWidth - slide2.scrollLeft <= slide2.clientWidth) {
        btnNext2.classList.add('off');
    }
});

// prevボタンをクリックしたときのイベント
btnPrev2.addEventListener('click', function() {
    slide2.scrollLeft -= scrollAmount;

    // スクロール位置に基づいて.offクラスを追加/削除します
    btnNext2.classList.remove('off');
    if (slide2.scrollLeft === 0) {
        btnPrev2.classList.add('off');
    }
});

// 初期状態でprevボタンに.offクラスを追加します
btnPrev2.classList.add('off');
});