// source --> https://clavie.jp/wp-content/themes/clavie/assets/js/common.js?ver=20260710092819 
(function ($) {

  const setupDetailsHeightFallback = () => {
    const selector = 'details.is-slide';
    if (window.CSS?.supports?.('interpolate-size: allow-keywords')) {
      return;
    }

    const getContentHeight = (details) => {
      const contentNodes = Array.from(details.children).filter((node) => node.tagName !== 'SUMMARY');
      const total = contentNodes.reduce((sum, node) => {
        const style = window.getComputedStyle(node);
        return sum + node.scrollHeight + (parseFloat(style.marginTop) || 0) + (parseFloat(style.marginBottom) || 0);
      }, 0);
      return Math.ceil(total);
    };

    const syncDetailsHeight = () => {
      $(selector).each(function () {
        this.style.setProperty('--details-content-height', `${getContentHeight(this)}px`);
      });
    };

    let timerId;
    const syncDetailsHeightDebounced = () => {
      clearTimeout(timerId);
      timerId = setTimeout(syncDetailsHeight, 150);
    };

    syncDetailsHeight();

    // 非対応環境のみ、開閉やリサイズで高さを再計測する。
    $(document).on('toggle', selector, syncDetailsHeight);
    $(window).on('load resize', syncDetailsHeightDebounced);
  }

  // レイアウト主要要素の実寸をCSSカスタムプロパティに反映
  const syncLayoutDimensions = () => {
    const root = document.documentElement;
    const fixedRight = document.querySelector('.l-fixed-cta');
    if (!root) {
      return;
    }

    if (fixedRight) {
      const rect = fixedRight.getBoundingClientRect();
      root.style.setProperty('--fixed-cta-width', `${rect.width}px`);
      root.style.setProperty('--fixed-cta-height', `${rect.height}px`);
    }
  }

  const bindLayoutDimensionsSync = () => {
    let rafId = null;
    const requestSync = () => {
      if (rafId !== null) {
        return;
      }
      rafId = window.requestAnimationFrame(() => {
        syncLayoutDimensions();
        rafId = null;
      });
    };

    // requestSync();
    syncLayoutDimensions();
    $(window).on('load resize orientationchange', requestSync);

    if (document.fonts && document.fonts.ready) {
      document.fonts.ready.then(requestSync);
    }
  }

  // バーガーボタン開閉
  const menuToggle = () => {
    $('.l-burger').click(function () {
      $(this).toggleClass('is-active');
      $('.l-drawer').fadeToggle();
    });
  }

  // pc時はバーガーメニューのスタイルをリセット
  const menuResetOnResize = () => {
    $(window).resize(function () {
      if ($(window).width() > 1024) {

      }
    });
  }

  // バーガーメニュー展開中にページ内リンクをクリックしたとき、バーガーメニューを閉じる
  const menuCloseOnJump = () => {
    $('[href^="#"]').click(function () {

    });
  }


  // スクロールで表示アニメーション
  const animateOnScroll = () => {
    scrollAnimation = () => {
      $('.u-scroll-animate').each(function () {
        if ($(window).scrollTop() > $(this).offset().top - $(window).height() * .8) {
          $(this).addClass('is-animated');
        }
      });
    }
    $(window).on('scroll resize', scrollAnimation);
    scrollAnimation();
  }

  // select要素のis-emptyクラスを切り替え
  const toggleSelectEmpty = () => {
    const $target = $('select');
    const syncEmptyState = function () {
      if ($(this).val() === "") {
        $(this).addClass('is-empty');
      } else {
        $(this).removeClass('is-empty');
      }
    };
    $target.on('change', syncEmptyState);
    $target.each(syncEmptyState);
  }

  // video要素の再生可能状態をクラスで同期
  const setupVideoPlayableState = () => {
    $('video').each(function () {
      const video = this;

      $(video).on('canplaythrough', function () {
        video.classList.add('is-playable');
      });

      if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
        video.classList.add('is-playable');
      }
    });
  }

  const setupSingleScheduleInfo = (scheduleInfoElement) => {
    const $info = $(scheduleInfoElement);
    const existingController = $info.data('clavieScheduleInfoController');

    if (existingController) {
      existingController.refresh();
      return existingController;
    }

    const $infoList = $info.find('.c-schedule-info__list').first();
    const $infoBtn = $info.find('.c-schedule-info__btn').first();
    let infoListTransitionTimerId = null;

    const expandLabel = String($infoBtn.data('expandLabel') || '全ての教室を表示する');
    const collapseLabel = String($infoBtn.data('collapseLabel') || '閉じる');

    const setInfoExpanded = (expanded) => {
      $info.toggleClass('is-expanded', expanded);

      if ($infoBtn.length) {
        $infoBtn.attr('aria-expanded', expanded ? 'true' : 'false');
        $infoBtn.text(expanded ? collapseLabel : expandLabel);
      }
    };

    const setInfoListTransitioning = (enabled) => {
      if (infoListTransitionTimerId) {
        clearTimeout(infoListTransitionTimerId);
        infoListTransitionTimerId = null;
      }

      if (!enabled || !$infoList.length) {
        $infoList.removeClass('is-transitioning');
        return;
      }

      $infoList.addClass('is-transitioning');
      infoListTransitionTimerId = setTimeout(() => {
        $infoList.removeClass('is-transitioning');
        infoListTransitionTimerId = null;
      }, 450);
    };

    const refresh = () => {
      if (!$infoList.length) {
        return;
      }

      const itemCount = $infoList.children('li').length;
      const isShortList = itemCount <= 6;

      $info.toggleClass('is-short-list', isShortList);

      if ($infoBtn.length) {
        $infoBtn.prop('hidden', isShortList);
      }

      if (isShortList) {
        setInfoExpanded(false);
        return;
      }

      setInfoExpanded($info.hasClass('is-expanded'));
    };

    if ($infoBtn.length) {
      $infoBtn.on('click.clavieScheduleInfo', function (event) {
        event.preventDefault();
        setInfoListTransitioning(true);
        setInfoExpanded(!$info.hasClass('is-expanded'));
      });
    }

    const controller = {
      refresh,
      expand: () => setInfoExpanded(true),
      collapse: () => setInfoExpanded(false),
    };

    $info.data('clavieScheduleInfoController', controller);
    refresh();

    return controller;
  }

  const setupScheduleInfo = (context = document) => {
    $('.c-schedule-info', context).each(function () {
      setupSingleScheduleInfo(this);
    });
  }

  window.ClavieScheduleInfo = {
    init: setupScheduleInfo,
    refresh(target) {
      if (!target) {
        setupScheduleInfo(document);
        return;
      }

      $(target).each(function () {
        setupSingleScheduleInfo(this);
      });
    },
  };

  $(function () {

    setupDetailsHeightFallback();
    bindLayoutDimensionsSync();
    menuToggle();
    menuResetOnResize();
    menuCloseOnJump();
    animateOnScroll();
    toggleSelectEmpty();
    setupVideoPlayableState();
    setupScheduleInfo();

  });

})(jQuery);
// source --> https://clavie.jp/wp-content/themes/clavie/assets/js/single-post_works.js?ver=20260710092819 
document.addEventListener('DOMContentLoaded', function () {
  
  // ビフォーアフター比較スライド
  (function() {
      const currentSection = document.querySelector('.image-comparison-slider');

      if (!currentSection) return;

      const foregroundImg = currentSection.querySelector('.foreground-img');
      const handle = currentSection.querySelector('.slider-handle');

      let isDragging = false;

      function moveSlider(x) {
          const rect = currentSection.getBoundingClientRect();

          let position = x - rect.left;

          if (position < 0) position = 0;
          if (position > rect.width) position = rect.width;

          const percentage = (position / rect.width) * 100;

          foregroundImg.style.width = `${percentage}%`;
          handle.style.left = `${percentage}%`;
      }

      /* マウス操作 */
      handle.addEventListener('mousedown', () => { isDragging = true; });
      window.addEventListener('mouseup', () => { isDragging = false; });
      window.addEventListener('mousemove', (e) => {
          if (!isDragging) return;
          moveSlider(e.clientX);
      });

      /* タッチ操作 */
      handle.addEventListener('touchstart', () => { isDragging = true; });
      window.addEventListener('touchend', () => { isDragging = false; });
      window.addEventListener('touchmove', (e) => {
          if (!isDragging) return;
          moveSlider(e.touches[0].clientX);
      });
  })();

  //施工事例スライドショー
  document.querySelectorAll('.works-slider').forEach(slider => {

    const slides = slider.querySelectorAll('.works-slider__slide');
    const thumbs = slider.querySelectorAll('.works-slider__thumb li');

    let currentIndex = 0;
    let autoSlide;

    // 初期表示
    if (slides.length) {
      slides[0].classList.add('is-show');
    }

    if (thumbs.length) {
      thumbs[0].classList.add('is-active');
    }

    // スライド切り替え
    const showSlide = (index) => {

      slides.forEach(slide => {
        slide.classList.remove('is-show');
      });

      thumbs.forEach(thumb => {
        thumb.classList.remove('is-active');
      });

      slides[index].classList.add('is-show');

      const activeThumb = slider.querySelector(`[data-target="${index}"]`);

      if(activeThumb){
        activeThumb.classList.add('is-active');
      }

      currentIndex = index;
    };

    // 自動再生
    const startAuto = () => {

      autoSlide = setInterval(() => {

        let nextIndex = currentIndex + 1;

        if(nextIndex >= slides.length){
          nextIndex = 0;
        }

        showSlide(nextIndex);

      }, 4000);

    };

    // 停止
    const stopAuto = () => {
      clearInterval(autoSlide);
    };

    // サムネイルクリック
    thumbs.forEach(thumb => {

      thumb.addEventListener('click', () => {

        const target = Number(thumb.dataset.target);

        stopAuto();
        showSlide(target);
        startAuto();

      });

    });

    startAuto();

  });

});