1// ãã¼ã¹ 2// Ver 3.3.2 3const animationState = new WeakMap(); 4 5// fadeIn 6function fadeIn(element, duration = 400, display = 'block') { 7 if (!element) return; 8 if (animationState.get(element)?.fade) return; // é£æé²æ¢ 9 10 animationState.set(element, {...(animationState.get(element) || {}), fade: true}); 11 12 element.style.opacity = 0; 13 element.style.display = display; 14 element.style.transition = `opacity ${duration}ms`; 15 requestAnimationFrame(() => { 16 element.style.opacity = 1; 17 }); 18 setTimeout(() => { 19 element.style.transition = ''; 20 animationState.set(element, {...animationState.get(element), fade: false}); 21 }, duration); 22} 23// fadeOut 24function fadeOut(element, duration = 400) { 25 if (!element) return; 26 if (animationState.get(element)?.fade) return; // é£æé²æ¢ 27 28 animationState.set(element, {...(animationState.get(element) || {}), fade: true}); 29 30 element.style.opacity = 1; 31 element.style.transition = `opacity ${duration}ms`; 32 requestAnimationFrame(() => { 33 element.style.opacity = 0; 34 }); 35 setTimeout(() => { 36 element.style.display = 'none'; 37 element.style.transition = ''; 38 animationState.set(element, {...animationState.get(element), fade: false}); 39 }, duration); 40} 41// fadeToggle 42function fadeToggle(element, duration = 400, display = 'block') { 43 if (!element) return; 44 if (window.getComputedStyle(element).display === 'none') { 45 fadeIn(element, duration, display); 46 } else { 47 fadeOut(element, duration); 48 } 49} 50 51// slideXX 52function animateSlide(element, isShow, duration = 400) { 53 if (!element) return; 54 if (animationState.get(element)?.slide) return; // é£æé²æ¢ 55 56 animationState.set(element, {...(animationState.get(element) || {}), slide: true}); 57 58 const start = performance.now(); 59 const style = window.getComputedStyle(element); 60 61 const original = { 62 height: element.scrollHeight, 63 paddingTop: parseFloat(style.paddingTop), 64 paddingBottom: parseFloat(style.paddingBottom), 65 marginTop: parseFloat(style.marginTop), 66 marginBottom: parseFloat(style.marginBottom), 67 }; 68 69 if (isShow) { 70 element.style.removeProperty('display'); 71 if (window.getComputedStyle(element).display === 'none') { 72 element.style.display = 'block'; 73 } 74 element.style.display = 'block'; 75 const style = window.getComputedStyle(element); 76 original.height = element.scrollHeight; 77 original.height = element.scrollHeight; 78 original.paddingTop = parseFloat(style.paddingTop); 79 original.paddingBottom = parseFloat(style.paddingBottom); 80 original.marginTop = parseFloat(style.marginTop); 81 original.marginBottom = parseFloat(style.marginBottom); 82 element.style.overflow = 'hidden'; 83 element.style.height = '0px'; 84 element.style.paddingTop = '0px'; 85 element.style.paddingBottom = '0px'; 86 element.style.marginTop = '0px'; 87 element.style.marginBottom = '0px'; 88 } else { 89 element.style.overflow = 'hidden'; 90 element.style.height = `${original.height}px`; 91 element.style.paddingTop = `${original.paddingTop}px`; 92 element.style.paddingBottom = `${original.paddingBottom}px`; 93 element.style.marginTop = `${original.marginTop}px`; 94 element.style.marginBottom = `${original.marginBottom}px`; 95 } 96 function easeInOutCubic(t) { 97 return t < 0.5 98 ? 4 * t * t * t 99 : 1 - Math.pow(-2 * t + 2, 3) / 2; 100 } 101 function frame(time) { 102 const elapsed = time - start; 103 const progress = Math.min(elapsed / duration, 1); 104 const eased = easeInOutCubic(progress); 105 if (isShow) { 106 element.style.height = `${original.height * eased}px`; 107 element.style.paddingTop = `${original.paddingTop * eased}px`; 108 element.style.paddingBottom = `${original.paddingBottom * eased}px`; 109 element.style.marginTop = `${original.marginTop * eased}px`; 110 element.style.marginBottom = `${original.marginBottom * eased}px`; 111 } else { 112 element.style.height = `${original.height * (1 - eased)}px`; 113 element.style.paddingTop = `${original.paddingTop * (1 - eased)}px`; 114 element.style.paddingBottom = `${original.paddingBottom * (1 - eased)}px`; 115 element.style.marginTop = `${original.marginTop * (1 - eased)}px`; 116 element.style.marginBottom = `${original.marginBottom * (1 - eased)}px`; 117 } 118 if (progress < 1) { 119 requestAnimationFrame(frame); 120 } else { 121 if (!isShow) { 122 element.style.display = 'none'; 123 } 124 element.style.height = ''; 125 element.style.paddingTop = ''; 126 element.style.paddingBottom = ''; 127 element.style.marginTop = ''; 128 element.style.marginBottom = ''; 129 element.style.overflow = ''; 130 animationState.set(element, {...animationState.get(element), slide: false}); 131 } 132 } 133 requestAnimationFrame(frame); 134} 135// slideDown 136function slideDown(element, duration = 400) { 137 if (!element) return; 138 if (window.getComputedStyle(element).display !== 'none') return; 139 animateSlide(element, true, duration); 140} 141// slideUp 142function slideUp(element, duration = 400) { 143 if (!element) return; 144 if (window.getComputedStyle(element).display === 'none') return; 145 animateSlide(element, false, duration); 146} 147// slideToggle 148function slideToggle(element, duration = 400) { 149 if (!element) return; 150 if (window.getComputedStyle(element).display === 'none') { 151 slideDown(element, duration); 152 } else { 153 slideUp(element, duration); 154 } 155} 156 157// ã¤ã¼ã¸ã³ã° 158function easeOutExpo(t, b, c, d) { 159 return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b; 160} 161function easeInOutQuad(t, b, c, d) { 162 t /= d/2; 163 if (t < 1) return c/2*t*t + b; 164 t--; 165 return -c/2 * (t*(t-2) - 1) + b; 166} 167function easeInOutCubic(t, b, c, d) { 168 t /= d/2; 169 if (t < 1) return c/2*t*t*t + b; 170 t -= 2; 171 return c/2*(t*t*t + 2) + b; 172} 173function easeInOutSine(t, b, c, d) {
174 return -c/2 * (Math.cos(Math.PI * t / d) - 1) + b; 175} 176 177// theme 178const breakpoint = 768; 179const isHover = window.matchMedia("(any-hover:hover)").matches; 180 181const header = document.querySelector('#header'); // ãããã¼ 182let nav = document.querySelector('#global_nav'); // PC stickyè¦ç´ 183let sp_nav = document.querySelector('#sp_nav'); // SP stickyè¦ç´ 184let pc_horizon_flag = false; // PCã®æ横並ã³ã 185let sp_horizon_flag = false; // SPã®æ横並ã³ã 186const sp_toggle = document.querySelector('.sp_toggle'); 187const sp_close = document.querySelector('.sp_toggle_close'); 188const sp_closes = document.querySelectorAll('.sp_toggle_close'); 189const sp_menu_pull = document.querySelector('.global_nav'); 190const menu_bk = document.querySelector('.menu_bk'); 191const body = document.body; 192const pc_menu = document.querySelector('.global_nav .menu'); 193const menu_links = document.querySelectorAll('.global_nav a'); 194const submenu_class = '.sub-menu, .sub-menu_wrap'; 195const submenu_wrap_class = 'menu-item-has-children'; 196const submenu_wrap_class_wide = 'wide'; 197const header_hover_item = document.getElementsByClassName('header_hover_item'); 198const menu_a = document.querySelectorAll('.global_nav a'); 199const fixed_class = 'fixed'; 200 201const scrolled_class = 'header_scrolled'; 202 203let animation_speed = 300; 204let load_or_ready = 0; 205 206if (header.classList.contains('pcsp_horizon') || header.classList.contains('pc_horizon')) { 207 nav = header; 208 pc_horizon_flag = true; 209} 210if (header.classList.contains('sp_horizon') || header.classList.contains('pcsp_horizon')) { 211 sp_nav = header; 212 sp_horizon_flag = true; 213} 214
215////// 216// ã¹ã ã¼ã¹ã¹ã¯ãã¼ã« 217// document.addEventListener("DOMContentLoaded", () => { 218 function getScrollOffset() { 219 const winW = window.innerWidth; 220 221 if (winW < breakpoint) { 222 return sp_horizon_flag 223 ? (header ? header.offsetHeight : 0) 224 : (sp_nav ? sp_nav.offsetHeight : 0); 225 } else { 226 return pc_horizon_flag 227 ? (header ? header.offsetHeight : 0) 228 : (nav ? nav.offsetHeight : 0); 229 } 230 } 231 232 function scrollToPos(position) { 233 const startPos = window.scrollY; 234 const distance = Math.min( 235 position - startPos, 236 document.documentElement.scrollHeight - window.innerHeight - startPos 237 ); 238 const duration = 800; 239 let startTime; 240 241 function animation(currentTime) { 242 if (startTime === undefined) startTime = currentTime; 243 const timeElapsed = currentTime - startTime; 244 const scrollPos = easeInOutCubic(timeElapsed, startPos, distance, duration); 245 window.scrollTo(0, scrollPos); 246 if (timeElapsed < duration) { 247 requestAnimationFrame(animation); 248 } else { 249 window.scrollTo(0, position); 250 } 251 } 252 requestAnimationFrame(animation); 253 } 254 255 // ãã¼ã¸å ãªã³ã¯å¯¾å¿ 256 document.querySelectorAll('a[href*="#"]').forEach((link) => { 257 link.addEventListener("click", (e) => { 258 const url = e.currentTarget.href; 259 const dest = url.split("#"); 260 const currentUrl = location.href.split("#"); 261 262 if (dest[0] === currentUrl[0]) { 263 const hash = e.currentTarget.hash; 264 const target = document.getElementById(hash.slice(1)); 265 266 if (!hash || hash === "#top") { 267 e.preventDefault(); 268 scrollToPos(0); 269 } else if (target) { 270 e.preventDefault(); 271 const offset = getScrollOffset(); 272 const position = target.getBoundingClientRect().top + window.scrollY - offset; 273 274 scrollToPos(position); 275 // history.pushState(null, "", window.location.pathname); 276 } 277 278 if (window.innerWidth < breakpoint && e.currentTarget.closest('#main_nav')) { 279 toggleSpMenu?.(); 280 } 281 } 282 }); 283 }); 284 285 // å¤é¨ãªã³ã¯ or ãªãã¼ãæã®ããã·ã¥å¯¾å¿ 286 const urlHash = window.location.hash; 287 if (urlHash) { 288 const target = document.getElementById(urlHash.slice(1)); 289 if (target) { 290 history.replaceState(null, "", window.location.pathname); 291 window.scrollTo(0, 0); 292 293 setTimeout(() => { 294 const offset = getScrollOffset(); 295 const position = target.getBoundingClientRect().top + window.scrollY - offset; 296 scrollToPos(position); 297 }, 100); 298 } 299 } 300// }); 301 302var currentWidth = window.innerWidth; 303 304window.addEventListener("resize", function () { 305 if (currentWidth === window.innerWidth) { 306 // æ¨ªå¹ ãå¤ãã£ã¦ããªã 307 return; 308 } 309 310 currentWidth = window.innerWidth; 311 const win = window.innerWidth; 312 313 if (win >= breakpoint) { 314 // PCãµã¤ãºã«ãªã£ãã¨ãã®å¦ç 315 fadeOut(menu_bk, animation_speed); 316 document.querySelectorAll('.global_nav , .global_nav .sub-menu, .global_nav .sub-menu_wrap').forEach(elem => { 317 elem.style.display = ''; 318 elem.style.opacity = ''; 319 }); 320 // nav_padding_body.style.marginTop = ''; 321 } else { 322 // SPãµã¤ãºã«ãªã£ãã¨ãã®å¦ç 323 fadeOut(menu_bk, animation_speed); 324 document.querySelectorAll('.global_nav .sub-menu, .global_nav .sub-menu_wrap').forEach(function (elem) { 325 elem.style.display = ''; 326 elem.style.maxHeight = ''; 327 }); 328 menu_a.forEach(a => { 329 a.classList.remove('onclick'); 330 }); 331 } 332}); 333 334// ãµãã¡ãã¥ã¼ãæã¤ã¢ã¤ãã ã«ã¯ã©ã¹ã追å 335const menu_item_has_children = Array.from(document.querySelectorAll('.sub-menu')) 336 .map(el => el.closest('.menu > li')) 337 .filter(el => el !== null); 338const menu_item_has_children_wrap = Array.from(document.querySelectorAll('.sub-menu_wrap')) 339 .map(el => el.closest('.menu > li')) 340 .filter(el => el !== null); 341const combined = [...new Set([...menu_item_has_children, ...menu_item_has_children_wrap])]; 342combined.forEach(elem => { 343 elem.classList.add(submenu_wrap_class); 344});
345menu_item_has_children_wrap.forEach(elem => { 346 elem.classList.add(submenu_wrap_class_wide); 347}); 348 349// PCããã²ã¼ã·ã§ã³ 350function updateMenuStyle() { 351 const win = window.innerWidth; 352 if (breakpoint <= win) { 353 // sp_menu_pull ã® display 㨠top ã®ãªã»ãã 354 if (sp_menu_pull) { 355 sp_menu_pull.style.display = ''; 356 sp_menu_pull.style.top = ''; 357 } 358 359 const windowHeight = window.innerHeight; 360 const header = document.querySelector('.header'); 361 const globalNav = document.querySelector('.global_nav'); 362 const globalNavsub = document.querySelectorAll('.global_nav .menu-item > a'); 363 const globalNavSubMenuWraps = document.querySelectorAll('.global_nav .sub-menu_wrap'); 364 365 if (!globalNav) return; 366 367 // globalNav ã®ä½ç½®ã¨é«ããåå¾ 368 const rect = globalNav.getBoundingClientRect(); 369 const navTop = rect.top + window.scrollY; // ããã¥ã¡ã³ãä¸ã®çµ¶å¯¾ä½ç½® 370 const navHeight = rect.height; 371 372 const headerHeight = header ? header.offsetHeight : 0; 373 const globalnavHeight = globalNav ? globalNav.offsetHeight : 0; 374 375 // globalNavsub.forEach(elem => { 376 // elem.style.height = headerHeight + 'px'; 377 // }); 378 379 if (pc_horizon_flag) { 380 381 globalNavSubMenuWraps.forEach(elem => { 382 const isFixed = header.classList.contains('fixed'); 383 384 if (isFixed) { 385 elem.style.top = globalnavHeight + 'px'; 386 } else { 387 elem.style.top = headerHeight + 'px'; 388 } 389 390 elem.style.maxHeight = (windowHeight - parseInt(elem.style.top, 10)) + 'px'; 391 }); 392 393 } else { 394 395 globalNavSubMenuWraps.forEach(elem => { 396 // ã¹ãã or 縦ããæã¯åºå®ãããã¼ã¨ãµãããã®åè¨ 397 elem.style.maxHeight = (windowHeight - headerHeight - globalnavHeight) + 'px'; 398 elem.style.top = ''; 399 }); 400 401 } 402 } else { 403 // const globalNavsub = document.querySelectorAll('.global_nav .menu-item > a'); 404 // globalNavsub.forEach(elem => { 405 // elem.style.height = ''; 406 // }); 407 } 408} 409 410window.addEventListener('load', updateMenuStyle); 411window.addEventListener('resize', updateMenuStyle); 412 413// 414const pcMenuLis = pc_menu ? pc_menu.querySelectorAll('li') : []; 415 416pcMenuLis.forEach(li => { 417 li.addEventListener('mouseenter', function() { 418 const win = window.innerWidth; 419 if (breakpoint <= win) { 420 li.classList.add('active'); 421 // if (li.classList.contains(submenu_wrap_class)) { 422 // // ã¹ã©ã¤ããã¦ã³å¦ç 423 // } 424 } 425 }); 426 427 li.addEventListener('mouseleave', function() { 428 const win = window.innerWidth; 429 if (breakpoint <= win) { 430 li.classList.remove('active'); 431 // if (li.classList.contains(submenu_wrap_class)) { 432 // // ã¹ã©ã¤ãã¢ããå¦ç 433 // } 434 } 435 }); 436}); 437 438//SPããã²ã¼ã·ã§ã³ 439const navlinkparent = Array.from(document.querySelectorAll('.menu-item-has-children > .sub-menu')).map(el => el.closest('li')); 440const navlinkparentwrap = Array.from(document.querySelectorAll('.sub-menu_wrap')).map(el => el.closest('li')); 441const navlinkElements = [...navlinkparent, ...navlinkparentwrap] 442 .flatMap(li => Array.from(li.querySelectorAll(':scope > a'))); 443const subnavlink = document.querySelectorAll('.sub-menu a'); 444 445sp_toggle.addEventListener('click', () => { 446 let fixdheader = document.getElementById('global_nav'); 447 if (id_header_pcsp_horizon === true || id_header_pc_horizon === true) { 448 fixdheader = document.getElementById('header'); 449 } 450 fixdheader.style.transform = ''; 451 452 fadeToggle(sp_menu_pull, animation_speed); 453 sp_menu_pull.classList.toggle('open'); 454 455 fadeIn(menu_bk, animation_speed); 456 body.classList.toggle('overflow-y'); 457 458 fadeIn(sp_close, animation_speed); 459 460 document.querySelectorAll('.menu-item-has-children > .sub-menu, .menu-item-has-children > .sub-menu_wrap').forEach(el => { 461 el.style.display = 'none'; 462 }); 463}); 464 465menu_bk.addEventListener('click', () => { 466 fadeOut(menu_bk, animation_speed); 467 fadeOut(sp_menu_pull, animation_speed); 468 sp_menu_pull.classList.remove('open'); 469 fadeOut(sp_close, animation_speed); 470 setTimeout(() => { 471 body.classList.remove('overflow-y'); 472 }, animation_speed); 473}); 474
475sp_closes.forEach(el => { 476 el.addEventListener('click', () => { 477 console.log(el); 478 const win = window.innerWidth; 479 if (win < breakpoint) { 480 fadeOut(menu_bk, animation_speed); 481 fadeOut(sp_menu_pull, animation_speed); 482 sp_menu_pull.classList.remove('open'); 483 fadeOut(sp_close, animation_speed); 484 setTimeout(() => { 485 body.classList.remove('overflow-y'); 486 }, animation_speed); 487 } 488 }); 489}); 490 491navlinkElements.forEach(a => { 492 a.addEventListener('click', function(e) { 493 const win = window.innerWidth; 494 if (win < breakpoint) { 495 this.classList.toggle('onclick'); 496 const nextElem = this.nextElementSibling; 497 if (nextElem) slideToggle(nextElem, animation_speed); 498 e.preventDefault(); 499 } 500 }); 501}); 502 503subnavlink.forEach(a => { 504 a.addEventListener('click', function(e) { 505 const win = window.innerWidth; 506 if (win < breakpoint) { 507 const menuItem = this.closest('.menu-item'); 508 if (menuItem) { 509 const parentA = menuItem.querySelector(':scope > a'); 510 if (parentA) parentA.classList.toggle('onclick'); 511 } 512 fadeOut(sp_menu_pull, animation_speed); 513 sp_menu_pull.classList.remove('open'); 514 fadeOut(menu_bk, animation_speed); 515 fadeOut(sp_close, animation_speed); 516 setTimeout(() => { 517 body.classList.remove('overflow-y'); 518 }, animation_speed); 519 // e.preventDefault(); 520 } else { 521 // win >= breakpoint 522 document.querySelectorAll('.menu-item-has-children').forEach(el => { 523 el.classList.remove('active'); 524 }); 525 } 526 }); 527}); 528 529document.querySelectorAll('.global_nav a[href*="#"]').forEach(a => { 530 a.addEventListener('click', function() { 531 const win = window.innerWidth; 532 if (win < breakpoint) { 533 fadeOut(sp_menu_pull, animation_speed); 534 sp_menu_pull.classList.remove('open'); 535 fadeOut(menu_bk, animation_speed); 536 fadeOut(sp_close, animation_speed); 537 setTimeout(() => { 538 body.classList.remove('overflow-y'); 539 }, animation_speed); 540 } 541 }); 542}); 543 544const totop_btn = document.querySelector('#totop'); 545const fv_height = window.innerHeight >= 350 ? 350 : window.innerHeight; 546 547// body ã«ã¯ã©ã¹ä»ä¸ 548window.addEventListener( 'load', function(){ 549 document.body.classList.add('onload'); 550}); 551 552//ã¦ã¼ã¶ã¼ã¨ã¼ã¸ã§ã³ãå¤å® 553var userAgent = window.navigator.userAgent.toLowerCase(); 554if (userAgent.indexOf('ipad') != -1) { 555 document.body.classList.add('ipad'); 556} else if (userAgent.indexOf('iphone') != -1) { 557 document.body.classList.add('ios'); 558} 559 560// totop 561totop_btn.addEventListener("click", scroll_top); 562function scroll_top() { 563 window.scroll({ top: 0, behavior: "smooth" }); 564} 565window.addEventListener("scroll", scroll_event); 566function scroll_event() { 567 if (window.pageYOffset > fv_height) { 568 totop_btn.style.opacity = "1"; 569 } else if (window.pageYOffset < fv_height) { 570 totop_btn.style.opacity = "0"; 571 } 572} 573 574// header_scrolled 575var mainImage = document.getElementById("mainimage"); 576let triggerHeight = 50; 577// function updateTriggerHeight() { 578// if (mainImage && mainImage.offsetHeight > 100) { 579// triggerHeight = mainImage.offsetHeight; 580// } 581// } 582function onScroll() { 583 const isScrolled = window.scrollY > triggerHeight; 584 const isMobile = window.innerWidth < breakpoint; 585 if (isScrolled) { 586 nav.classList.add("scrolled_class"); 587 if (isMobile && sp_nav) { 588 sp_nav.classList.add("scrolled_class"); 589 } 590 } else { 591 nav.classList.remove("scrolled_class"); 592 if (isMobile && sp_nav) { 593 sp_nav.classList.remove("scrolled_class"); 594 } 595 } 596} 597 598// ååãã§ã㯠599// updateTriggerHeight(); 600onScroll(); 601window.addEventListener("scroll", onScroll); 602 603 604// PC hoverã§ééãããããã¼ã¢ã¤ãã 605function header_hover_item_open(e) { 606 e.currentTarget.classList.add('active'); 607} 608function header_hover_item_close(e) { 609 e.currentTarget.classList.remove('active'); 610} 611function header_hover_item_toggle(e) { 612 e.currentTarget.classList.toggle('active'); 613} 614for( let i = 0 ; i < header_hover_item.length ; i ++ ) { 615 if(isHover) { 616 header_hover_item[i].addEventListener('mouseenter', header_hover_item_open); 617 header_hover_item[i].addEventListener('mouseleave', header_hover_item_close); 618 } else { 619 header_hover_item[i].addEventListener('click', header_hover_item_toggle); 620 header_hover_item[i].addEventListener('mouseleave', header_hover_item_close); 621 } 622} 623 624// ãããã¼ã»ãã position:fixd 追å¾ç¨ã¹ã¯ãªãã 625const body_home = document.body.classList.contains('home'); 626const id_header = document.getElementById('header'); 627const header_nav_wrap = id_header.classList.contains('header_nav_wrap'); 628const id_header_pcsp_horizon = id_header.classList.contains('pcsp_horizon'); 629const id_header_pc_horizon = id_header.classList.contains('pc_horizon'); 630let fixdheader = document.getElementById('global_nav'); 631if(id_header_pcsp_horizon === true || id_header_pc_horizon === true) { 632 fixdheader = document.getElementById('header'); 633} 634window.onload = function () { 635 let navoffsetTop = 0; 636 if(body_home === true && header_nav_wrap === true ) { 637 const id_nav = document.getElementById('global_nav'); 638 var rect = id_nav.getBoundingClientRect(); 639 var scrollTop = window.scrollY || document.documentElement.scrollTop; 640 navoffsetTop = rect.top + scrollTop; 641 } 642 643 window.addEventListener("scroll", () => { 644 // fixed ã¯ã©ã¹è¿½å 645 let winWidth = window.innerWidth; 646 if(body_home === true && header_nav_wrap === true ) { 647 if(window.scrollY > navoffsetTop ) { 648 if (breakpoint <= winWidth) { 649 fixdheader.classList.add(fixed_class); 650 } 651 } else { 652 if (breakpoint <= winWidth) { 653 fixdheader.classList.remove(fixed_class); 654 } 655 } 656 } 657 // ãã©ã¦ã¶å¹ ã縮ã¾ã£ãæ fixed ããè¦ç´ ã« translateX ãä»ä¸ 658 const scrollX = window.scrollX; 659 if (fixdheader) { 660 const isSticky = window.getComputedStyle(fixdheader).position === 'sticky'; 661 if (!isSticky) { 662 fixdheader.style.transform = `translateX(-${scrollX}px)`; 663 } else { 664 fixdheader.style.transform = ''; 665 } 666 } 667 }); 668} 669 670/// 671// FAQ 672// document.addEventListener("DOMContentLoaded", () => { 673 const faqTitles = document.querySelectorAll(".faq_title");
674 faqTitles.forEach((title) => { 675 title.addEventListener("click", () => { 676 const box = title.closest(".box_faq"); 677 const answer = box.querySelector(".answer"); 678 const isOpen = box.classList.contains('open'); 679 if (isOpen) { 680 slideUp(answer); 681 box.classList.remove('open'); 682 } else { 683 slideDown(answer); 684 box.classList.add('open'); 685 } 686 }); 687 }); 688// }); 689 690// ã¿ãåãæ¿ã 691document.querySelectorAll('.tab_btn').forEach(tabBtn => { 692 tabBtn.addEventListener('click', function () { 693 const tabWrap = this.closest('.tab_wrap'); 694 const btnWrap = this.closest('.tab_btn_wrap'); 695 const tabBtns = btnWrap.querySelectorAll('.tab_btn'); 696 const tabItems = tabWrap.querySelector('.tab_item_wrap').children; 697 const index = Array.from(tabBtns).indexOf(this); 698 tabBtns.forEach(btn => btn.classList.remove('active')); 699 Array.from(tabItems).forEach(item => item.classList.remove('active')); 700 this.classList.add('active'); 701 tabItems[index].classList.add('active'); 702 }); 703}); 704 705// img_slider 706// document.addEventListener('DOMContentLoaded', () => { 707 const imgSlidesMain = document.querySelectorAll('.img_slide_main.splide'); 708 const imgSlidesThumb = document.querySelectorAll('.img_slide_thumb.splide'); 709 const mainOptions = { 710 type : 'loop', 711 rewind : false, 712 pagination: false, 713 arrows : true, 714 arrowPath : 'm13.5 7.01 13 13m-13 13 13-13', 715 }; 716 const thumbOptions = { 717 type : 'loop', 718 fixedWidth : 150, 719 fixedHeight : 100, 720 gap : 10, 721 focus : 'center', 722 pagination : false, 723 arrows : false, 724 cover : true, 725 isNavigation: true, 726 breakpoints : { 727 600: { 728 fixedWidth : 60, 729 fixedHeight: 44, 730 }, 731 }, 732 }; 733 imgSlidesMain.forEach((mainEl, i) => { 734 const thumbEl = imgSlidesThumb[i]; 735 if (!thumbEl) return; // 念ã®ãã対å¿ãããµã ãã¤ã«ããªãå ´åã¯ã¹ããã 736 const mainSlider = new Splide(mainEl, mainOptions); 737 const thumbSlider = new Splide(thumbEl, thumbOptions); 738 mainSlider.sync(thumbSlider); 739 mainSlider.mount(); 740 thumbSlider.mount(); 741 }); 742// }); 743 744 745// æ¬ä¼¼ã¹ã©ã¤ãã¼ç»ååãæ¿ã 746window.addEventListener('load', () => { 747 document.querySelectorAll('.slide_main .item').forEach(item => { 748 const prev = document.createElement('div'); 749 prev.className = 'arrow-prev'; 750 const next = document.createElement('div'); 751 next.className = 'arrow-next'; 752 item.appendChild(prev); 753 item.appendChild(next); 754 }); 755}); 756document.querySelector('.slide_wrap .slide_main .item')?.classList.add('active'); 757document.querySelector('.slide_wrap .slide_thumb .item')?.classList.add('thumbnail-current'); 758document.querySelectorAll('.slide_wrap .slide_thumb .item').forEach((thumb, i) => { 759 thumb.addEventListener('click', () => { 760 thumb.parentElement.querySelectorAll('.item').forEach(t => t.classList.remove('thumbnail-current')); 761 thumb.classList.add('thumbnail-current'); 762 const mainItems = thumb.closest('.slide_wrap').querySelectorAll('.slide_main .item'); 763 mainItems.forEach(m => m.classList.remove('active')); 764 mainItems[i]?.classList.add('active'); 765 }); 766}); 767document.addEventListener('click', e => { 768 if (e.target.classList.contains('arrow-prev')) { 769 const currentItem = e.target.closest('.item'); 770 const mainItems = Array.from(document.querySelectorAll('.slide_wrap .slide_main .item')); 771 const index = mainItems.indexOf(currentItem); 772 if (index > 0) { 773 currentItem.classList.remove('active'); 774 mainItems[index - 1].classList.add('active'); 775 776 const thumbItems = currentItem.closest('.slide_wrap').querySelectorAll('.slide_thumb .item'); 777 thumbItems.forEach(t => t.classList.remove('thumbnail-current')); 778 thumbItems[index - 1]?.classList.add('thumbnail-current'); 779 } 780 } 781}); 782document.addEventListener('click', e => { 783 if (e.target.classList.contains('arrow-next')) { 784 const currentItem = e.target.closest('.item'); 785 const mainItems = Array.from(document.querySelectorAll('.slide_wrap .slide_main .item')); 786 const index = mainItems.indexOf(currentItem); 787 if (index < mainItems.length - 1) { 788 currentItem.classList.remove('active'); 789 mainItems[index + 1].classList.add('active'); 790 791 const thumbItems = currentItem.closest('.slide_wrap').querySelectorAll('.slide_thumb .item');
792 thumbItems.forEach(t => t.classList.remove('thumbnail-current')); 793 thumbItems[index + 1]?.classList.add('thumbnail-current'); 794 } 795 } 796}); 797 798// lazyBgItems 799var lazyBgItems = document.querySelectorAll(".js-hide-bg"); 800var lazyBgItemsArray = Array.prototype.slice.call(lazyBgItems, 0); 801var lazyBgOptions = { 802 root: null, 803 rootMargin: "0px 0px 450px 0px", 804 threshold: 0, 805}; 806var lazyBgObserver = new IntersectionObserver(lazyBg, lazyBgOptions); 807lazyBgItemsArray.forEach(function (box) { 808 lazyBgObserver.observe(box); 809}); 810function lazyBg(entries) { 811 var entriesArray = Array.prototype.slice.call(entries, 0); 812 entriesArray.forEach(function (entry) { 813 if (entry.isIntersecting) { 814 entry.target.classList.add("show-bg"); 815 } 816 }); 817} 818 819// IntersectionObserver 㧠wow 820var wows = document.querySelectorAll(".wow"); 821var wowsArray = Array.prototype.slice.call(wows, 0); 822var options = { 823 root: null, 824 rootMargin: "0px 0px -25% 0px", 825 threshold: 0, 826}; 827var observer = new IntersectionObserver(doWhenIntersect, options); 828wowsArray.forEach(function (wow) { 829 observer.observe(wow); 830}); 831 832function doWhenIntersect(entries) { 833 var entriesArray = Array.prototype.slice.call(entries, 0); 834 entriesArray.forEach(function (entry) { 835 if (entry.isIntersecting) { 836 entry.target.classList.add("animated"); 837 } else { 838 // wow ãä¸åº¦ããã§ã¯ãªãå ´å 839 // entry.target.classList.remove("animated"); 840 } 841 }); 842}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.