document.addEventListener('DOMContentLoaded', () => {

    if (window.innerWidth < 768) {
      return;
    }

    const wrap = document.querySelector('.service_intro_solution_items_container');

    if (!wrap) return;

    const navTop = wrap.getBoundingClientRect().top + window.scrollY;

    function updateFixedNav() {
      if (window.scrollY >= navTop - 130) {
        wrap.classList.add('is-fixed');
      } else {
        wrap.classList.remove('is-fixed');
      }
    }

    window.addEventListener('scroll', updateFixedNav);

    updateFixedNav();

    const navLinks = document.querySelectorAll(
        '.service_intro_solution_items a'
    );
/*
* サイト内リンク
* CMS側のsmoothScrollToを停止
*/

    navLinks.forEach(link => {
      link.addEventListener('click', (e) => {
      const href = link.getAttribute('href');

      if (!href || !href.startsWith('#')) {
        return;
      }

      const target = document.querySelector(href);

      if (!target) return;

      e.preventDefault();
      e.stopImmediatePropagation();

      wrap.classList.add('is-fixed');
      requestAnimationFrame(() => {

      const offset = wrap.getBoundingClientRect().bottom;
      const targetTop = target.getBoundingClientRect().top + window.scrollY - offset;

      window.scrollTo({
        top: targetTop, behavior: 'smooth'});
    });
    }, true);
    });

    const sections = [];

    navLinks.forEach(link => {
        const targetId = link.getAttribute('href');
        const targetSection = document.querySelector(targetId);

        if (!targetSection) return;

        sections.push({
            section: targetSection,
            item: link.querySelector(
                '.service_intro_solution_item'
            )
        });
    });
    // 表示中セクションのアイコンをアクティブ化
    const observer = new IntersectionObserver(
        (entries) => {
            entries.forEach(entry => {
                if (!entry.isIntersecting) return;
                sections.forEach(obj => {
                    obj.item.classList.remove('is-active');
                });
                sections.forEach(obj => {
                    if (obj.section === entry.target) {
                        obj.item.classList.add('is-active');
                    }
                });
            });
        },
        {
            threshold: 0.3,
            rootMargin: '-20% 0px -30% 0px'
        }
    );
    sections.forEach(obj => {
        observer.observe(obj.section);
    });
});