https://okweb.co.jp/wp-content/themes/okweb2026/assets/renewal/js/main.js?ver=2026.104

1const menuButton = document.querySelector('.menu-button');
2const navigation = document.querySelector('.global-navigation');
3const siteHeader = document.querySelector('.site-header');
4const desktopHeader = window.matchMedia('(min-width: 768px)');
5const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
6
7const heroVideo = document.querySelector('.hero__visual video');
8
9if (heroVideo) {
10  const heroLoopStart = 4;
11
12  const ensureHeroPlayback = () => {
13    heroVideo.defaultPlaybackRate = 0.8;
14    heroVideo.playbackRate = 0.8;
15    heroVideo.muted = true;
16
17    if (heroVideo.paused && !document.hidden) {
18      heroVideo.play().catch(() => {
19        // Muted autoplay can still be deferred by the browser until the page is visible.
20      });
21    }
22  };
23
24  const restartHeroLoop = () => {
25    const safeLoopStart = Number.isFinite(heroVideo.duration)
26      ? Math.min(heroLoopStart, Math.max(0, heroVideo.duration - 0.1))
27      : heroLoopStart;
28
29    heroVideo.currentTime = safeLoopStart;
30    ensureHeroPlayback();
31  };
32
33  heroVideo.addEventListener('loadedmetadata', ensureHeroPlayback);
34  heroVideo.addEventListener('canplay', ensureHeroPlayback);
35  heroVideo.addEventListener('ended', restartHeroLoop);
36  window.addEventListener('pageshow', ensureHeroPlayback);
37  document.addEventListener('visibilitychange', ensureHeroPlayback);
38  ensureHeroPlayback();
39}
40
41document.querySelectorAll('[data-repeat]').forEach((container) => {
42  const repeatCount = Number.parseInt(container.dataset.repeat, 10);
43  const templateItems = [...container.children];
44
45  for (let cycle = 1; cycle < repeatCount; cycle += 1) {
46    templateItems.forEach((item) => container.append(item.cloneNode(true)));
47  }
48});
49
50document.querySelectorAll('[data-randomize]').forEach((container) => {
51  const items = [...container.children];
52
53  for (let index = items.length - 1; index > 0; index -= 1) {
54    const randomIndex = Math.floor(Math.random() * (index + 1));
55    [items[index], items[randomIndex]] = [items[randomIndex], items[index]];
56  }
57
58  container.append(...items);
59});
60
61document.querySelectorAll('.ir-subpage-content .filter_list').forEach((filterList) => {
62  const tabs = [...filterList.querySelectorAll('.tab')];
63  const contentRoot = filterList.closest('main') || document;
64  const panels = [...contentRoot.querySelectorAll('.newsContent')];
65
66  if (!tabs.length || !panels.length) {
67    return;
68  }
69
70  const selectPanel = (selectedIndex) => {

71    tabs.forEach((tab, index) => {
72      const isSelected = index === selectedIndex;
73      tab.classList.toggle('active', isSelected);
74      tab.setAttribute('aria-selected', String(isSelected));
75      tab.tabIndex = isSelected ? 0 : -1;
76    });
77    panels.forEach((panel, index) => {
78      panel.style.display = index === selectedIndex ? 'block' : 'none';
79      panel.setAttribute('aria-hidden', String(index !== selectedIndex));
80    });
81  };
82
83  tabs.forEach((tab, index) => {
84    tab.setAttribute('role', 'tab');
85    tab.addEventListener('click', () => selectPanel(index));
86    tab.addEventListener('keydown', (event) => {
87      if (event.key === 'Enter' || event.key === ' ') {
88        event.preventDefault();
89        selectPanel(index);
90      }
91    });
92  });
93
94  filterList.setAttribute('role', 'tablist');
95  selectPanel(Math.max(0, tabs.findIndex((tab) => tab.classList.contains('active'))));
96});
97
98if (menuButton && navigation) {
99  const closeMenu = () => {
100    document.body.classList.remove('menu-open');
101    menuButton.setAttribute('aria-expanded', 'false');
102    menuButton.querySelector('.screen-reader-text').textContent = 'メニューを開く';
103  };
104
105  menuButton.addEventListener('click', () => {
106    const isOpen = document.body.classList.toggle('menu-open');
107    menuButton.setAttribute('aria-expanded', String(isOpen));
108    menuButton.querySelector('.screen-reader-text').textContent = isOpen ? 'メニューを閉じる' : 'メニューを開く';
109  });
110
111  navigation.addEventListener('click', (event) => {
112    if (event.target.closest('a')) {
113      closeMenu();
114    }
115  });
116
117  document.addEventListener('keydown', (event) => {
118    if (event.key === 'Escape') {
119      closeMenu();
120    }
121  });
122}
123
124if (siteHeader) {
125  let lastScrollY = Math.max(window.scrollY, 0);
126  let scrollTicking = false;
127
128  const showHeader = () => siteHeader.classList.remove('site-header--hidden');
129
130  const updateHeader = () => {
131    const currentScrollY = Math.max(window.scrollY, 0);
132    const scrollDifference = currentScrollY - lastScrollY;
133
134    if (!desktopHeader.matches || currentScrollY < 80 || document.body.classList.contains('menu-open')) {
135      showHeader();
136    } else if (scrollDifference > 2) {
137      siteHeader.classList.add('site-header--hidden');
138    } else if (scrollDifference < -2) {
139      showHeader();
140    }
141
142    if (Math.abs(scrollDifference) > 2) {
143      lastScrollY = currentScrollY;
144    }
145
146    scrollTicking = false;
147  };
148
149  window.addEventListener('scroll', () => {
150    if (!scrollTicking) {
151      window.requestAnimationFrame(updateHeader);
152      scrollTicking = true;
153    }
154  }, { passive: true });
155
156  desktopHeader.addEventListener('change', showHeader);
157}
158
159document.addEventListener('click', (event) => {
160  const anchor = event.target.closest('a[href^="#"]');
161  const hash = anchor?.getAttribute('href');
162
163  if (!hash || hash === '#') {
164    return;
165  }
166
167  let target;
168
169  try {
170    target = document.getElementById(decodeURIComponent(hash.slice(1)));
171  } catch {
172    return;
173  }
174
175  if (!target) {
176    return;
177  }
178
179  event.preventDefault();
180  target.scrollIntoView({
181    behavior: reducedMotion.matches ? 'auto' : 'smooth',
182    block: 'start',
183  });
184  window.history.pushState(null, '', hash);
185});
186
187if (!reducedMotion.matches && 'IntersectionObserver' in window) {
188  const revealTargets = document.querySelectorAll([
189    '.page-heading',
190    '.page-section',
191    '.feature-section .content-column',
192    '.news-section .content-column',
193    '.article-header',
194    '.article-body',
195    '.contact-form',
196  ].join(','));
197
198  if (revealTargets.length) {
199    revealTargets.forEach((target) => target.classList.add('reveal-item'));
200    document.documentElement.classList.add('motion-ready');
201
202    const revealObserver = new IntersectionObserver((entries) => {
203      entries.forEach((entry) => {
204        if (entry.isIntersecting) {
205          entry.target.classList.add('is-visible');
206          revealObserver.unobserve(entry.target);
207        }
208      });
209    }, {
210      rootMargin: '0px 0px -8% 0px',
211      threshold: 0.08,
212    });
213
214    revealTargets.forEach((target) => revealObserver.observe(target));
215  }
216}