//slickスライダー
$(function () {
  $(".regular").slick({
    arrows: true,
    autoplay: false,
    variableWidth: true,
    draggable: false,
    adaptiveHeight: true,
    centerMode: true,
    centerPadding: "15%",
    dots: true,
    dotsClass: "slide-dots",
    prevArrow:
      '<img src="https://file.mysquadbeyond.com/uploads/article_photo/photo/5759002/5d6a0928-c3dc-48c7-83eb-f21863cd2915.png" class="slide-arrow prev-arrow">',
    nextArrow:
      '<img src="https://file.mysquadbeyond.com/uploads/article_photo/photo/5759004/f55ef6e5-0556-467b-9cfb-e986140c1c69.png" class="slide-arrow next-arrow">',
  });
});

document.addEventListener("DOMContentLoaded", function () {
  const tabButtons = document.querySelectorAll(".tab-button");
  const tabContents = document.querySelectorAll(".tab-content");
  const marginTop = 100; // スクロール時に上部に確保する余白（ピクセル）

  tabButtons.forEach((button) => {
    button.addEventListener("click", function () {
      // アクティブなタブとコンテンツを非アクティブにする
      tabButtons.forEach((btn) => btn.classList.remove("active"));
      tabContents.forEach((content) => content.classList.remove("active"));
      const marginTop = 100; // スクロール時に上部に確保する余白（ピクセル）

      // クリックされたボタンをアクティブにし、対応するコンテンツを表示
      button.classList.add("active");
      const tabId = button.getAttribute("data-tab");
      const targetContent = document.getElementById(tabId);
      targetContent.classList.add("active");

      // スクロール設定
      setTimeout(() => {
        const slider = targetContent.querySelector(".regular");
        if (slider) {
          $(slider).slick("refresh");
        }
        targetContent.scrollIntoView({ behavior: "smooth" });
      }, 100); // 0.1秒の遅延
    });
  });
});