1// ãã¼ã¹ 2// Ver 3.2.1 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 globalNavSubMenuWraps = document.querySelectorAll('.global_nav .sub-menu_wrap'); 363 364 const headerHeight = header ? header.offsetHeight : 0; 365 const globalnavHeight = globalNav ? globalNav.offsetHeight : 0; 366 367 if (pc_horizon_flag) { 368 globalNavSubMenuWraps.forEach(elem => { 369 elem.style.maxHeight = (windowHeight - headerHeight) + 'px'; 370 elem.style.top = globalnavHeight + 'px'; 371 }); 372 } else { 373 globalNavSubMenuWraps.forEach(elem => { 374 elem.style.maxHeight = (windowHeight - headerHeight - globalnavHeight) + 'px'; 375 elem.style.top = ''; 376 }); 377 } 378 } 379} 380 381window.addEventListener('load', updateMenuStyle); 382window.addEventListener('resize', updateMenuStyle); 383 384// 385const pcMenuLis = pc_menu ? pc_menu.querySelectorAll('li') : []; 386 387pcMenuLis.forEach(li => { 388 li.addEventListener('mouseenter', function() { 389 const win = window.innerWidth; 390 if (breakpoint <= win) { 391 li.classList.add('active'); 392 // if (li.classList.contains(submenu_wrap_class)) { 393 // // ã¹ã©ã¤ããã¦ã³å¦ç 394 // } 395 } 396 }); 397 398 li.addEventListener('mouseleave', function() { 399 const win = window.innerWidth; 400 if (breakpoint <= win) { 401 li.classList.remove('active'); 402 // if (li.classList.contains(submenu_wrap_class)) { 403 // // ã¹ã©ã¤ãã¢ããå¦ç 404 // } 405 } 406 }); 407}); 408 409//SPããã²ã¼ã·ã§ã³ 410const navlinkparent = Array.from(document.querySelectorAll('.menu-item-has-children > .sub-menu')).map(el => el.closest('li')); 411const navlinkparentwrap = Array.from(document.querySelectorAll('.sub-menu_wrap')).map(el => el.closest('li')); 412const navlinkElements = [...navlinkparent, ...navlinkparentwrap] 413 .flatMap(li => Array.from(li.querySelectorAll(':scope > a'))); 414const subnavlink = document.querySelectorAll('.sub-menu a'); 415 416sp_toggle.addEventListener('click', () => { 417 let fixdheader = document.getElementById('global_nav'); 418 if (id_header_pcsp_horizon === true || id_header_pc_horizon === true) { 419 fixdheader = document.getElementById('header'); 420 } 421 fixdheader.style.transform = ''; 422 423 fadeToggle(sp_menu_pull, animation_speed); 424 sp_menu_pull.classList.toggle('open'); 425 426 fadeIn(menu_bk, animation_speed); 427 body.classList.toggle('overflow-y'); 428 429 fadeIn(sp_close, animation_speed); 430 431 document.querySelectorAll('.menu-item-has-children > .sub-menu, .menu-item-has-children > .sub-menu_wrap').forEach(el => { 432 el.style.display = 'none'; 433 }); 434}); 435 436menu_bk.addEventListener('click', () => { 437 fadeOut(menu_bk, animation_speed); 438 fadeOut(sp_menu_pull, animation_speed); 439 sp_menu_pull.classList.remove('open'); 440 fadeOut(sp_close, animation_speed); 441 setTimeout(() => { 442 body.classList.remove('overflow-y'); 443 }, animation_speed); 444}); 445 446sp_closes.forEach(el => { 447 el.addEventListener('click', () => { 448 console.log(el); 449 const win = window.innerWidth; 450 if (win < breakpoint) { 451 fadeOut(menu_bk, animation_speed); 452 fadeOut(sp_menu_pull, animation_speed); 453 sp_menu_pull.classList.remove('open'); 454 fadeOut(sp_close, animation_speed); 455 setTimeout(() => { 456 body.classList.remove('overflow-y'); 457 }, animation_speed); 458 } 459 }); 460}); 461 462navlinkElements.forEach(a => { 463 a.addEventListener('click', function(e) { 464 const win = window.innerWidth; 465 if (win < breakpoint) { 466 this.classList.toggle('onclick'); 467 const nextElem = this.nextElementSibling; 468 if (nextElem) slideToggle(nextElem, animation_speed); 469 e.preventDefault(); 470 } 471 }); 472}); 473 474subnavlink.forEach(a => { 475 a.addEventListener('click', function(e) { 476 const win = window.innerWidth; 477 if (win < breakpoint) { 478 const menuItem = this.closest('.menu-item'); 479 if (menuItem) { 480 const parentA = menuItem.querySelector(':scope > a'); 481 if (parentA) parentA.classList.toggle('onclick'); 482 } 483 fadeOut(sp_menu_pull, animation_speed); 484 sp_menu_pull.classList.remove('open'); 485 fadeOut(menu_bk, animation_speed); 486 fadeOut(sp_close, animation_speed); 487 setTimeout(() => { 488 body.classList.remove('overflow-y'); 489 }, animation_speed); 490 // e.preventDefault(); 491 } else { 492 // win >= breakpoint 493 document.querySelectorAll('.menu-item-has-children').forEach(el => { 494 el.classList.remove('active'); 495 }); 496 } 497 }); 498}); 499 500document.querySelectorAll('.global_nav a[href*="#"]').forEach(a => { 501 a.addEventListener('click', function() { 502 const win = window.innerWidth; 503 if (win < breakpoint) { 504 fadeOut(sp_menu_pull, animation_speed); 505 sp_menu_pull.classList.remove('open'); 506 fadeOut(menu_bk, animation_speed); 507 fadeOut(sp_close, animation_speed); 508 setTimeout(() => { 509 body.classList.remove('overflow-y'); 510 }, animation_speed); 511 } 512 }); 513}); 514 515const totop_btn = document.querySelector('#totop'); 516const fv_height = window.innerHeight >= 350 ? 350 : window.innerHeight; 517 518// body ã«ã¯ã©ã¹ä»ä¸ 519window.addEventListener( 'load', function(){ 520 document.body.classList.add('onload'); 521}); 522 523//ã¦ã¼ã¶ã¼ã¨ã¼ã¸ã§ã³ãå¤å® 524var userAgent = window.navigator.userAgent.toLowerCase(); 525if (userAgent.indexOf('ipad') != -1) { 526 document.body.classList.add('ipad'); 527} else if (userAgent.indexOf('iphone') != -1) { 528 document.body.classList.add('ios'); 529} 530 531// totop 532totop_btn.addEventListener("click", scroll_top); 533function scroll_top() { 534 window.scroll({ top: 0, behavior: "smooth" }); 535} 536window.addEventListener("scroll", scroll_event); 537function scroll_event() { 538 if (window.pageYOffset > fv_height) { 539 totop_btn.style.opacity = "1"; 540 } else if (window.pageYOffset < fv_height) { 541 totop_btn.style.opacity = "0"; 542 } 543} 544 545// header_scrolled 546var mainImage = document.getElementById("mainimage"); 547let triggerHeight = 350; 548function updateTriggerHeight() { 549 if (mainImage && mainImage.offsetHeight > 100) { 550 triggerHeight = mainImage.offsetHeight; 551 } 552} 553function onScroll() { 554 const isScrolled = window.scrollY > triggerHeight; 555 const isMobile = window.innerWidth < breakpoint; 556 if (isScrolled) { 557 nav.classList.add("scrolled_class"); 558 if (isMobile && sp_nav) { 559 sp_nav.classList.add("scrolled_class"); 560 } 561 } else { 562 nav.classList.remove("scrolled_class"); 563 if (isMobile && sp_nav) { 564 sp_nav.classList.remove("scrolled_class"); 565 } 566 } 567} 568 569// ååãã§ã㯠570updateTriggerHeight(); 571onScroll(); 572window.addEventListener("scroll", onScroll); 573 574
575// PC hoverã§ééãããããã¼ã¢ã¤ãã 576function header_hover_item_open(e) { 577 e.currentTarget.classList.add('active'); 578} 579function header_hover_item_close(e) { 580 e.currentTarget.classList.remove('active'); 581} 582function header_hover_item_toggle(e) { 583 e.currentTarget.classList.toggle('active'); 584} 585for( let i = 0 ; i < header_hover_item.length ; i ++ ) { 586 if(isHover) { 587 header_hover_item[i].addEventListener('mouseenter', header_hover_item_open); 588 header_hover_item[i].addEventListener('mouseleave', header_hover_item_close); 589 } else { 590 header_hover_item[i].addEventListener('click', header_hover_item_toggle); 591 header_hover_item[i].addEventListener('mouseleave', header_hover_item_close); 592 } 593} 594 595// ãããã¼ã»ãã position:fixd 追å¾ç¨ã¹ã¯ãªãã 596const body_home = document.body.classList.contains('home'); 597const id_header = document.getElementById('header'); 598const header_nav_wrap = id_header.classList.contains('header_nav_wrap'); 599const id_header_pcsp_horizon = id_header.classList.contains('pcsp_horizon'); 600const id_header_pc_horizon = id_header.classList.contains('pc_horizon'); 601let fixdheader = document.getElementById('global_nav'); 602if(id_header_pcsp_horizon === true || id_header_pc_horizon === true) { 603 fixdheader = document.getElementById('header'); 604} 605window.onload = function () { 606 let navoffsetTop = 0; 607 if(body_home === true && header_nav_wrap === true ) { 608 const id_nav = document.getElementById('global_nav'); 609 var rect = id_nav.getBoundingClientRect(); 610 var scrollTop = window.scrollY || document.documentElement.scrollTop; 611 navoffsetTop = rect.top + scrollTop; 612 } 613 614 window.addEventListener("scroll", () => { 615 // fixed ã¯ã©ã¹è¿½å 616 let winWidth = window.innerWidth; 617 if(body_home === true && header_nav_wrap === true ) { 618 if(window.scrollY > navoffsetTop ) { 619 if (breakpoint <= winWidth) { 620 fixdheader.classList.add(fixed_class); 621 } 622 } else { 623 if (breakpoint <= winWidth) { 624 fixdheader.classList.remove(fixed_class); 625 } 626 } 627 } 628 // ãã©ã¦ã¶å¹ ã縮ã¾ã£ãæ fixed ããè¦ç´ ã« translateX ãä»ä¸ 629 const scrollX = window.scrollX; 630 if (fixdheader) { 631 const isSticky = window.getComputedStyle(fixdheader).position === 'sticky'; 632 if (!isSticky) { 633 fixdheader.style.transform = `translateX(-${scrollX}px)`; 634 } else { 635 fixdheader.style.transform = ''; 636 } 637 } 638 }); 639} 640 641/// 642// FAQ 643// document.addEventListener("DOMContentLoaded", () => { 644 const faqTitles = document.querySelectorAll(".faq_title");
645 faqTitles.forEach((title) => { 646 title.addEventListener("click", () => { 647 const box = title.closest(".box_faq"); 648 const answer = box.querySelector(".answer"); 649 const isOpen = box.classList.contains('open'); 650 if (isOpen) { 651 slideUp(answer); 652 box.classList.remove('open'); 653 } else { 654 slideDown(answer); 655 box.classList.add('open'); 656 } 657 }); 658 }); 659// }); 660 661// ã¿ãåãæ¿ã 662document.querySelectorAll('.tab_btn').forEach(tabBtn => { 663 tabBtn.addEventListener('click', function () { 664 const tabWrap = this.closest('.tab_wrap'); 665 const btnWrap = this.closest('.tab_btn_wrap'); 666 const tabBtns = btnWrap.querySelectorAll('.tab_btn'); 667 const tabItems = tabWrap.querySelector('.tab_item_wrap').children; 668 const index = Array.from(tabBtns).indexOf(this); 669 tabBtns.forEach(btn => btn.classList.remove('active')); 670 Array.from(tabItems).forEach(item => item.classList.remove('active')); 671 this.classList.add('active'); 672 tabItems[index].classList.add('active'); 673 }); 674}); 675 676// img_slider 677// document.addEventListener('DOMContentLoaded', () => { 678 const imgSlidesMain = document.querySelectorAll('.img_slide_main.splide'); 679 const imgSlidesThumb = document.querySelectorAll('.img_slide_thumb.splide'); 680 const mainOptions = { 681 type : 'loop', 682 rewind : false, 683 pagination: false, 684 arrows : true, 685 arrowPath : 'm13.5 7.01 13 13m-13 13 13-13', 686 }; 687 const thumbOptions = { 688 type : 'loop', 689 fixedWidth : 150, 690 fixedHeight : 100, 691 gap : 10, 692 focus : 'center', 693 pagination : false, 694 arrows : false, 695 cover : true, 696 isNavigation: true, 697 breakpoints : { 698 600: { 699 fixedWidth : 60, 700 fixedHeight: 44, 701 }, 702 }, 703 }; 704 imgSlidesMain.forEach((mainEl, i) => { 705 const thumbEl = imgSlidesThumb[i]; 706 if (!thumbEl) return; // 念ã®ãã対å¿ãããµã ãã¤ã«ããªãå ´åã¯ã¹ããã 707 const mainSlider = new Splide(mainEl, mainOptions); 708 const thumbSlider = new Splide(thumbEl, thumbOptions); 709 mainSlider.sync(thumbSlider); 710 mainSlider.mount(); 711 thumbSlider.mount(); 712 }); 713// }); 714 715 716// æ¬ä¼¼ã¹ã©ã¤ãã¼ç»ååãæ¿ã 717window.addEventListener('load', () => { 718 document.querySelectorAll('.slide_main .item').forEach(item => { 719 const prev = document.createElement('div'); 720 prev.className = 'arrow-prev'; 721 const next = document.createElement('div'); 722 next.className = 'arrow-next'; 723 item.appendChild(prev); 724 item.appendChild(next); 725 }); 726}); 727document.querySelector('.slide_wrap .slide_main .item')?.classList.add('active'); 728document.querySelector('.slide_wrap .slide_thumb .item')?.classList.add('thumbnail-current'); 729document.querySelectorAll('.slide_wrap .slide_thumb .item').forEach((thumb, i) => { 730 thumb.addEventListener('click', () => { 731 thumb.parentElement.querySelectorAll('.item').forEach(t => t.classList.remove('thumbnail-current')); 732 thumb.classList.add('thumbnail-current'); 733 const mainItems = thumb.closest('.slide_wrap').querySelectorAll('.slide_main .item'); 734 mainItems.forEach(m => m.classList.remove('active')); 735 mainItems[i]?.classList.add('active'); 736 }); 737}); 738document.addEventListener('click', e => { 739 if (e.target.classList.contains('arrow-prev')) { 740 const currentItem = e.target.closest('.item'); 741 const mainItems = Array.from(document.querySelectorAll('.slide_wrap .slide_main .item')); 742 const index = mainItems.indexOf(currentItem); 743 if (index > 0) { 744 currentItem.classList.remove('active'); 745 mainItems[index - 1].classList.add('active'); 746 747 const thumbItems = currentItem.closest('.slide_wrap').querySelectorAll('.slide_thumb .item'); 748 thumbItems.forEach(t => t.classList.remove('thumbnail-current')); 749 thumbItems[index - 1]?.classList.add('thumbnail-current'); 750 } 751 } 752}); 753document.addEventListener('click', e => { 754 if (e.target.classList.contains('arrow-next')) { 755 const currentItem = e.target.closest('.item'); 756 const mainItems = Array.from(document.querySelectorAll('.slide_wrap .slide_main .item')); 757 const index = mainItems.indexOf(currentItem); 758 if (index < mainItems.length - 1) { 759 currentItem.classList.remove('active'); 760 mainItems[index + 1].classList.add('active'); 761 762 const thumbItems = currentItem.closest('.slide_wrap').querySelectorAll('.slide_thumb .item');
763 thumbItems.forEach(t => t.classList.remove('thumbnail-current')); 764 thumbItems[index + 1]?.classList.add('thumbnail-current'); 765 } 766 } 767}); 768 769// lazyBgItems 770var lazyBgItems = document.querySelectorAll(".js-hide-bg"); 771var lazyBgItemsArray = Array.prototype.slice.call(lazyBgItems, 0); 772var lazyBgOptions = { 773 root: null, 774 rootMargin: "0px 0px 450px 0px", 775 threshold: 0, 776}; 777var lazyBgObserver = new IntersectionObserver(lazyBg, lazyBgOptions); 778lazyBgItemsArray.forEach(function (box) { 779 lazyBgObserver.observe(box); 780}); 781function lazyBg(entries) { 782 var entriesArray = Array.prototype.slice.call(entries, 0); 783 entriesArray.forEach(function (entry) { 784 if (entry.isIntersecting) { 785 entry.target.classList.add("show-bg"); 786 } 787 }); 788} 789 790// IntersectionObserver 㧠wow 791var wows = document.querySelectorAll(".wow"); 792var wowsArray = Array.prototype.slice.call(wows, 0); 793var options = { 794 root: null, 795 rootMargin: "0px 0px -25% 0px", 796 threshold: 0, 797}; 798var observer = new IntersectionObserver(doWhenIntersect, options); 799wowsArray.forEach(function (wow) { 800 observer.observe(wow); 801}); 802 803function doWhenIntersect(entries) { 804 var entriesArray = Array.prototype.slice.call(entries, 0); 805 entriesArray.forEach(function (entry) { 806 if (entry.isIntersecting) { 807 entry.target.classList.add("animated"); 808 } else { 809 // wow ãä¸åº¦ããã§ã¯ãªãå ´å 810 // entry.target.classList.remove("animated"); 811 } 812 }); 813}
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.