/* ここにPC用のグローバルJavaScriptを記述します。 */ // console.log("aaaa"); var swiper = null; async function handleCheckElRendered(className, retry = 0) { return new Promise((resolve) => { setTimeout(() => { var el = document.getElementsByClassName(className); if (el && el.length > 0) { resolve(true); return; } if (retry > 10) { resolve(false); return; } handleCheckElRendered(className, retry + 1).then((res) => { resolve(res); }); }, 200); }); } // ------ common function ------ /** * Import swiper into document head * @description This function is import a swiper library into the document head */ async function itszai2_ImportSwiper() { try { var scriptEl = document.createElement("script"); scriptEl.setAttribute( "src", "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js" ); scriptEl.setAttribute("defer", true); document.head.appendChild(scriptEl); return new Promise((resolve) => { scriptEl.addEventListener("load", () => { if (typeof Swiper !== "undefined") { resolve(true); } else { resolve(false); } }); setTimeout(() => { resolve(false); }, 15 * 1000); }); } catch (err) { console.warn(err); return false; } } /* eslint-disable no-underscore-dangle */ /** * load swiper * @description This function is check library is exist? * if exist => return true * else import swiper from cdn link * @params Empty * @returns boolean */ var swiperPromise = null; async function itszai2_LoadSwiper() { try { if (typeof window === "undefined") return false; if (typeof Swiper !== "undefined") { return true; } if (!swiperPromise) { swiperPromise = itszai2_ImportSwiper(); } return await swiperPromise; } catch (err) { console.warn(err); return false; } finally { setTimeout(() => { swiperPromise = null; }, 200); } } /** * check element is existed by class * @description This function is find element by class name * if exist => return element * else => return null * @param className [type: string] * @returns Array | null */ async function itszai2_CheckElementByClass(className, retry = 0) { try { if (typeof window === "undefined") return null; return new Promise((resolve) => { setTimeout(() => { var el = document.getElementsByClassName(className); if (el && el.length > 0) { resolve(el); return; } if (retry > 10) { resolve(null); return; } itszai2_CheckElementByClass(className, retry + 1).then((res) => { resolve(res); }); }, 200); }); } catch (err) { console.warn(err); return null; } } /** * init swiper by class name * @description This function is create new instance swiper use options param by class name * if exist class name => return element * else => return null * @param swiperClass [type: string] * @param swiperOptions [type: Object] * @returns boolean */ async function itszai2_InitSwiper(swiperClass, swiperOptions) { try { if (typeof window === "undefined") return false; if (!swiperClass) return false; var isExistSwiper = await itszai2_LoadSwiper(); if (!isExistSwiper) return false; var swiperEls = await itszai2_CheckElementByClass(swiperClass); if (!swiperEls) { return false; } // destroy if exist if ( window.__itszai_swiper?.[swiperClass] && window.__itszai_swiper?.[swiperClass]?.length ) { window.__itszai_swiper[swiperClass]?.forEach((item) => { if (item?.destroy && typeof item.destroy === "function") { item.destroy(); } }); } if (!window.__itszai_swiper) { window.__itszai_swiper = {}; } window.__itszai_swiper[swiperClass] = []; // eslint-disable-next-line no-undef // support for case multiple element from swiperClass [...(swiperEls ?? [])].forEach((swiperEl) => { var swiperInit = new Swiper(swiperEl, swiperOptions ?? {}); if (!window.__itszai_swiper) { window.__itszai_swiper = {}; } if (!window.__itszai_swiper[swiperClass]) { window.__itszai_swiper[swiperClass] = []; } window.__itszai_swiper[swiperClass].push(swiperInit); }); } catch (err) { console.warn(err); return false; } } async function itszai2_InitSwiperByElement(swiperEl, swiperOptions) { try { if (typeof window === "undefined") return null; if (!swiperEl) return null; var isExistSwiper = await itszai2_LoadSwiper(); if (!isExistSwiper) return null; return new Swiper(swiperEl, swiperOptions ?? {}); } catch (err) { console.warn(err); return false; } } /** * get instance swiper by class name * @description This function is return a instance of swiper support for case swiper api * if exist => return instance * else => return null * @param swiperClass [type: string] * @returns Swiper | null */ async function itszai2_GetSwiperInstanceByClass(swiperClass) { try { if (typeof window === "undefined") return null; if (!swiperClass) return false; return window.__itszai_swiper?.[swiperClass] ?? null; } catch (err) { console.warn(err); return null; } } /** * group children of swiper before init * @description This function is get all children of swiper and group into div element * @param swiperClass [type: string] * @param options [type: object] * @param options.count [type: number] => number of element in a group * @param options.style [type: string] => style css of element * @param options.class [type: string] => class of element * @param _callback [type: Function] => call when has new group => for case react rerendered * @returns void */ async function itszai2_GroupSwiperChildren(swiperClass, options, _callback) { try { if (!swiperClass) return; var isExist = await itszai2_CheckElementByClass(swiperClass); if (!isExist) return; var els = document.getElementsByClassName(swiperClass); if (!els) return; var elRoot = [...els][0]; if (!elRoot) return; // if (elRoot.getAttribute('data-group') === 'true') { // return; // } var elList = Array.from(elRoot.childNodes ?? []); var elsGroup = []; var count = options.count || 3; if (elRoot.firstElementChild.getAttribute("data-group") === "true") { return; } for (var i = 0; i < elList.length; i += count) { var elGroup = document.createElement("div"); elGroup.setAttribute("data-group", "true"); var classItem = "swiper-slide"; if (options.class) { elGroup.className = options.class; if (!elGroup.className.includes(classItem)) { elGroup.className += ` ${classItem}`; } } else { elGroup.className = classItem; } for (var j = i; j < i + count; j += 1) { var el = elList[j]; if (el?.nodeName === "#text") { if (!el.textContent?.replace(/\n/g, "").replace(/\t/g, "").trim()) { i = Math.min(i + 1, elList.length - 1); } else if (el) { var elClone = el.cloneNode(true); elClone.style.removeProperty("width"); elGroup.appendChild(elClone); } } else if (el) { var elClone = el.cloneNode(true); elClone.style.removeProperty("width"); elGroup.appendChild(elClone); } } if (elGroup.childNodes.length) { elsGroup.push(elGroup); } } while (elRoot.firstChild) { elRoot.removeChild(elRoot.lastChild); } // eslint-disable-next-line no-restricted-syntax for (var elGroup of elsGroup) { elRoot.appendChild(elGroup); } if (elsGroup.length) { elRoot.setAttribute("data-group", "true"); } if (window.__timer_check_rendering) { clearInterval(window.__timer_check_rendering); } window.__timer_check_rendering = setInterval(() => { var els = document.getElementsByClassName(swiperClass); var elRoot = [...els][0]; if (!elRoot) return; if (elRoot.firstElementChild.getAttribute("data-group") !== "true") { itszai2_GroupSwiperChildren(swiperClass, options, _callback).then( () => { _callback(); } ); } }, 1000); } catch (err) { console.warn(err); } } // ------- end common function ------ // load js async function handleLoadJS() { // job list var configOptionJob = { pagination: { el: ".swiper-pagination", clickable: true, renderBullet: function (index, className) { return '' + (index + 1) + ""; }, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, on: { init: function () { jobUpdateFraction.call(this); styleNextPrevFeatured.call(this); }, slideChange: function () { jobUpdateFraction.call(this); }, }, }; await itszai2_GroupSwiperChildren( "featured-swiper-pc__wrapper", { class: "swiper-slide", count: 3, }, () => { itszai2_InitSwiper("featured-swiper-pc", configOptionJob); } ); itszai2_InitSwiper("featured-swiper-pc", configOptionJob); // recruitment list var configOptionSwiper = { autoHeight: true, pagination: { el: ".swiper-pagination", clickable: true, renderBullet: function (index, className) { return '' + (index + 1) + ""; }, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, on: { init: function () { recruitmentUpdateFraction.call(this); }, paginationRender: function () { styleNextPrevRecruitment.call(this); recruitmentUpdateFraction.call(this); }, slideChange: function () { styleNextPrevRecruitment.call(this); recruitmentUpdateFraction.call(this); }, realIndexChange: function () { recruitmentUpdateFraction.call(this); }, }, }; await itszai2_GroupSwiperChildren( "recruitment-swiper__pc__wrapper", { class: "swiper-slide", count: 3, }, () => { itszai2_InitSwiper("recruitment-swiper__pc", configOptionSwiper); } ); itszai2_InitSwiper("recruitment-swiper__pc", configOptionSwiper); // Interview Version 02 var swiperElInterview = []; var instanceElInterview = []; var moduleClass = '.m-interview-module005-007-version-2'; var swiperInterview02 = document.querySelectorAll(moduleClass); var els = [...(swiperInterview02 ?? [])]; function animateLoading(el) { el.classList.add("load_done") } for (var i = 0; i < els.length; i += 1) { var el = els[i]; instanceElInterview[i] = null; swiperElInterview[i] = el.querySelector(".m-interview-module005-007__slider-tab2"); el.setAttribute('data-index', i); animateLoading(el); var swiperOption = { slidesPerView: 4, spaceBetween: 30, navigation: { nextEl: swiperElInterview[i].querySelector(".swiper-button-next"), prevEl: swiperElInterview[i].querySelector(".swiper-button-prev"), }, on: { init: () => { var observer = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if(!entry.isIntersecting) { var nextElement = entry.target.nextElementSibling; if(nextElement && nextElement.classList.contains('swiper-slide-active')) { var tabWillShow = entry.target.nextElementSibling; var idPanelWillShow = tabWillShow.dataset.tableId; var thumbCurrent = entry.target.querySelector('.m-interview-module005-007__image'); var parent = entry.target.closest('.m-interview-module005-007__tabs'); var panel = parent.querySelectorAll(`.m-interview-module005-007__panel[data-table-panel='${idPanelWillShow}']`); var modalElIndex = entry.target.closest(moduleClass)?.getAttribute('data-index') ?? 0; clearTabsInterviewActive(swiperElInterview[modalElIndex].closest('.m-interview-module005-007__tabs')); (panel) && panel.forEach(item => { // item.classList.add('sg-layer-toggle'); item.classList.add('showing-model'); thumbCurrent.classList.remove('hidden-border'); }) } } else { if(entry.target.classList.contains('swiper-slide-active')) { var idPanelWillShow = entry.target.dataset.tableId; var thumbCurrent = entry.target.querySelector('.m-interview-module005-007__image'); var parent = entry.target.closest('.m-interview-module005-007__tabs'); var panel = parent.querySelectorAll(`.m-interview-module005-007__panel[data-table-panel='${idPanelWillShow}']`); var modalElIndex = entry.target.closest(moduleClass)?.getAttribute('data-index') ?? 0; clearTabsInterviewActive(swiperElInterview[modalElIndex].closest('.m-interview-module005-007__tabs')); (panel) && panel.forEach(item => { // item.classList.add('sg-layer-toggle'); item.classList.add('showing-model'); thumbCurrent.classList.remove('hidden-border'); }) } } }); }, { threshold: 1, root: swiperElInterview[i] }); var quickTabElements = swiperElInterview[i].querySelectorAll('.swiper-slide'); quickTabElements.forEach(tab => { observer.observe(tab); tab.addEventListener('click', (event) => { quickTabElements.forEach(e => { e.classList.remove('quick-tab-current'); var thumbRemoveActive = e.querySelector('.m-interview-module005-007__image'); thumbRemoveActive.classList.add('hidden-border'); }); tab.classList.add('quick-tab-current'); var elParent = tab.closest(moduleClass); var elIndex = tab.closest(moduleClass)?.getAttribute('data-index'); var modalElIndex = tab.closest(moduleClass)?.getAttribute('data-index') ?? 0; var thumbCurrent = tab.querySelector('.m-interview-module005-007__image'); var dataId = tab.dataset.tableId; var panel = swiperElInterview[modalElIndex].closest('.m-interview-module005-007__tabs').querySelector(`.m-interview-module005-007__panel[data-table-panel='${dataId}']`); clearTabsInterviewActive(swiperElInterview[modalElIndex].closest('.m-interview-module005-007__tabs')); thumbCurrent.classList.remove('hidden-border'); if(panel) { // panel.classList.add('sg-layer-toggle'); panel.classList.add('showing-model'); }; }); }); handleImageInterviewChange(el); }, transitionEnd: () => { var hiddenBorder = el.querySelectorAll('.m-interview-module005-007__image'); hiddenBorder.forEach(item => { if(!item.classList.contains('swiper-slide-active')){ item.classList.remove('hidden-border'); item.closest('.swiper-slide').classList.remove('quick-tab-current'); } }) } } }; instanceElInterview[i] = await itszai2_InitSwiperByElement(swiperElInterview[i], swiperOption); } function handleImageInterviewChange(parent) { var allImages = parent.querySelectorAll('.m-interview-module005-007__screen img'); allImages.forEach(image => { var idTab = image.closest('.m-interview-module005-007__panel').dataset.tablePanel; var imageTab = parent.querySelector(`.swiper-slide[data-table-id="${idTab}"] .m-interview-module005-007__image img`); imageTab.src = image.src; new MutationObserver(function(mutationsList) { mutationsList.forEach(mutation => { if (mutation.type === 'attributes' && mutation.attributeName === 'src') { var swiperImage = parent.querySelector(`.swiper-slide[data-table-id="${idTab}"] .m-interview-module005-007__image img`); swiperImage.src = image.src; } }); }).observe(image, { attributes: true }); }); var allHeading = parent.querySelectorAll('.m-interview-module005-007-information__title'); allHeading.forEach(heading => { var idTab = heading.closest('.m-interview-module005-007__panel').dataset.tablePanel; var swiperHeading = parent.querySelector(`.swiper-slide[data-table-id="${idTab}"] .m-interview-module005-007__title`); swiperHeading.innerHTML = heading.querySelector('h3').innerHTML; new MutationObserver(function(mutationsList) { mutationsList.forEach(mutation => { if (mutation.type === 'characterData' || mutation.type === 'childList') { swiperHeading.innerHTML = heading.querySelector('h3').innerHTML; } }); }).observe(heading, { childList: true, subtree: true, characterData: true }); }); var allSubtitle = parent.querySelectorAll('.m-interview-module005-007-information__subtitle'); allSubtitle.forEach(subtitle => { var idTab = subtitle.closest('.m-interview-module005-007__panel').dataset.tablePanel; var swiperSubtitle = parent.querySelector(`.swiper-slide[data-table-id="${idTab}"] .m-interview-module005-007__text`); swiperSubtitle.innerHTML = subtitle.querySelector('p').innerHTML; new MutationObserver(function(mutationsList) { mutationsList.forEach(mutation => { if (mutation.type === 'characterData' || mutation.type === 'childList') { swiperSubtitle.innerHTML = subtitle.querySelector('p').innerHTML; } }); }).observe(subtitle, { childList: true, subtree: true, characterData: true }); }); } function clearTabsInterviewActive(parent) { var allItems = parent.querySelectorAll('.m-interview-module005-007__panel'); allItems.forEach(item => { // item.classList.remove('sg-layer-toggle'); item.classList.remove('showing-model'); }) } } var handleLoadSwiperTabs = async () => { var swiperElInterview = []; var instanceElInterview = []; var moduleClass = '.m-interview-module005-007:not(.m-interview-module005-007-version-2)'; var swiperInterview = document.querySelectorAll(moduleClass); var els = [...(swiperInterview ?? [])]; for (var i = 0; i < els.length; i += 1) { var el = els[i]; instanceElInterview[i] = null; swiperElInterview[i] = el.querySelector(".m-interview-module005-007__slider-tab"); // console.log(swiperElInterview[i]); el.setAttribute('data-index', i); var swiperOption = { slidesPerView: 4, spaceBetween: 30, navigation: { nextEl: swiperElInterview[i].querySelector(".swiper-button-next"), prevEl: swiperElInterview[i].querySelector(".swiper-button-prev"), }, on: { transitionEnd: function () { var hiddenBorder = swiperElInterview[i].querySelectorAll(".m-interview-module005-007__image"); hiddenBorder.forEach((item) => { if (!item.classList.contains("swiper-slide-active")) { item.classList.remove("hidden-border"); item.closest(".swiper-slide").classList.remove("quick-tab-current"); } }); }, }, }; instanceElInterview[i] = await itszai2_InitSwiperByElement(swiperElInterview[i], swiperOption); var observer = new IntersectionObserver( function (entries) { entries.forEach(function (entry) { if (!entry.isIntersecting) { var nextElement = entry.target.nextElementSibling; if ( nextElement && nextElement.classList.contains("swiper-slide-active")) { var tabWillShow = entry.target.nextElementSibling; var idPanelWillShow = tabWillShow.dataset.tableId; var thumbWillShow = tabWillShow.querySelector("img"); var thumbCurrent = entry.target.querySelector(".m-interview-module005-007__image"); var parent = entry.target.closest(".m-interview-module005-007__tabs"); var panel = parent.querySelectorAll(`.m-interview-module005-007__panel[data-table-panel='${idPanelWillShow}']`); clearTabsActive(parent); panel && panel.forEach((item) => { item.classList.add("showing-model"); thumbCurrent.classList.remove("hidden-border"); var screenImageWillShow = item.querySelector(".m-interview-module005-007__screen"); screenImageWillShow.innerHTML = thumbWillShow.outerHTML; }); } } else { if (entry.target.classList.contains("swiper-slide-active")) { var idPanelWillShow = entry.target.dataset.tableId; var thumbCurrent = entry.target.querySelector(".m-interview-module005-007__image"); var thumbSrcCurrent = thumbCurrent.querySelector("img"); var parent = entry.target.closest(".m-interview-module005-007__tabs"); var panel = parent.querySelectorAll(`.m-interview-module005-007__panel[data-table-panel='${idPanelWillShow}']`); clearTabsActive(parent); // if(panel) panel.classList.add('showing-model'); panel && panel.forEach((item) => { item.classList.add("showing-model"); thumbCurrent.classList.remove("hidden-border"); var screenImage = item.querySelector(".m-interview-module005-007__screen"); screenImage.innerHTML = thumbSrcCurrent.outerHTML; }); } } }); }, { threshold: 1, root: swiperElInterview[i] } ); var quickTabElements = swiperElInterview[i].querySelectorAll(".swiper-slide"); quickTabElements.forEach((tab) => { observer.observe(tab); tab.addEventListener("click", (event) => { quickTabElements.forEach((e) => { e.classList.remove("quick-tab-current"); var thumbRemoveActive = e.querySelector(".m-interview-module005-007__image"); thumbRemoveActive.classList.add("hidden-border"); }); tab.classList.add("quick-tab-current"); var thumbCurrent = tab.querySelector(".m-interview-module005-007__image"); var thumbCurrentShow = thumbCurrent.querySelector("img"); var dataId = tab.dataset.tableId; var panel = tab.closest(".m-interview-module005-007__tabs").querySelector(`.m-interview-module005-007__panel[data-table-panel='${dataId}']`); clearTabsActive(tab.closest(".m-interview-module005-007__tabs")); thumbCurrent.classList.remove("hidden-border"); if (panel) { panel.classList.add("showing-model"); var screenImageShow = panel.querySelector(".m-interview-module005-007__screen"); screenImageShow.innerHTML = thumbCurrentShow.outerHTML; } }); }); handleImageChange(swiperElInterview[i]); } function handleImageChange(parent) { var allImages = parent.querySelectorAll( ".m-interview-module005-007__image img" ); allImages.forEach((image) => { new MutationObserver(function (mutationsList) { mutationsList.forEach((mutation) => { if ( mutation.type === "attributes" && mutation.attributeName === "src" ) { var swiperPanelId = image.closest(".swiper-slide").dataset.tableId; var panel = parent .closest(".m-interview-module005-007__tabs") .querySelector( `.m-interview-module005-007__panel[data-table-panel='${swiperPanelId}']` ); var screenImageShow = panel.querySelector( ".m-interview-module005-007__screen" ); screenImageShow.innerHTML = image.outerHTML; } }); }).observe(image, { attributes: true }); }); } function clearTabsActive(parent) { var allItems = parent.querySelectorAll( ".m-interview-module005-007__panel" ); allItems.forEach((item) => { item.classList.remove("showing-model"); }); } }; var jobFraction = null; function jobUpdateFraction() { var activeIndex = this.realIndex + 1; if (!isNaN(activeIndex)) { if (jobFraction) { clearTimeout(jobFraction); } jobFraction = setTimeout(() => { var sliderItem = document.querySelector( ".featured-swiper-pc .swiper-pagination" ); var totalItem = (sliderItem.childNodes.length - 1) * 3; var lastItem = document.querySelector( ".featured-swiper-pc__wrapper .swiper-slide:last-child" ); var totalLastItem = lastItem.childNodes.length; var totalSlides = totalItem + totalLastItem; var textLabel = document .querySelector(".featured-swiper-pc__wrapper .swiper-slide-active") ?.getAttribute("aria-label"); var nums = textLabel?.split("/").map((item) => Number(item.trim())); var startIndex = 0; if (nums?.[0] && !Number.isNaN(nums[0])) { startIndex = nums[0]; } var groupItemCount = 3; var fractionElement = document.querySelector( ".m-featured-module001-005__fraction" ); var startAt = ((startIndex || 1) - 1) * groupItemCount + 1; var endAt = Math.min(totalSlides ?? 0, startAt + groupItemCount - 1); if (fractionElement) { fractionElement.textContent = `${startAt} - ${endAt} 件 / ${ totalSlides ?? 0 } 件`; } }, 200); } } function styleNextPrevRecruitment() { var pagination = document.querySelector( ".recruitment-swiper .swiper-pagination" ); var prevButton = document.querySelector( ".recruitment-swiper .swiper-button-prev" ); var nextButton = document.querySelector( ".recruitment-swiper .swiper-button-next" ); var pagiWidth = pagination.offsetWidth / 2; prevButton.style.marginLeft = `-${pagiWidth + 70}px`; nextButton.style.marginRight = `-${pagiWidth + 70}px`; } var recrFraction = null; function recruitmentUpdateFraction() { var activeIndex = this.realIndex + 1; if (!isNaN(activeIndex)) { if (recrFraction) { clearTimeout(recrFraction); } recrFraction = setTimeout(() => { var sliderItem = document.querySelector( ".recruitment-swiper__pc .swiper-pagination" ); var totalItem = (sliderItem.childNodes.length - 1) * 3; var lastItem = document.querySelector( ".recruitment-swiper__pc__wrapper .swiper-slide:last-child" ); var totalLastItem = lastItem.childNodes.length; var totalSlides = totalItem + totalLastItem; var textLabel = document .querySelector(".recruitment-swiper__pc__wrapper .swiper-slide-active") ?.getAttribute("aria-label"); var nums = textLabel?.split("/").map((item) => Number(item.trim())); var startIndex = 0; if (nums?.[0] && !Number.isNaN(nums[0])) { startIndex = nums[0]; } var groupItemCount = 3; var fractionElement = document.querySelector( ".m-recruitmentguidelines-module001-006__fraction" ); var startAt = ((startIndex || 1) - 1) * groupItemCount + 1; var endAt = Math.min(totalSlides ?? 0, startAt + groupItemCount - 1); if (fractionElement) { fractionElement.textContent = `${startAt} - ${endAt} 件 / ${ totalSlides ?? 0 } 件`; } }, 200); } } function featuredUpdateFraction() { var activeIndex = this.realIndex + 1; if (!isNaN(activeIndex)) { var totalSlides = this.slides.length; var endRange = Math.min( activeIndex + this.params.slidesPerView - 1, totalSlides ); var fractionElement = document.querySelector( ".m-featured-module001-005__fraction" ); if (fractionElement) { fractionElement.textContent = activeIndex + "-" + endRange + "件 / " + totalSlides + "件"; } } } function styleNextPrevFeatured() { var pagination = document.querySelector( ".featured-swiper .swiper-pagination" ); var pagiWidth = pagination.offsetWidth / 2; var prWrapper = document.querySelector( ".m-featured-module001-005 .featured-swiper .swiper-wrapper" ); var prItems = document.querySelectorAll( ".m-featured-module001-005 .m-featured-module001-005__item" ); if (prItems.length < 3) { prWrapper.style.justifyContent = "center"; } else { prWrapper.style.justifyContent = "flex-start"; } } // Header sticky when scroll var handleScrollHeader = () => { var header = document.getElementById('main-scroll'); if (header) { var headerEl = document.querySelector(".header-main"); var divAfterHeader = header.parentElement.querySelector('header + div'); var hWindow = window.innerHeight; var hActive = 0; var updateHeaderState = () => { var hContent = divAfterHeader.offsetHeight; if (hContent <= hWindow && hActive == 0) { headerEl.classList.add('active'); divAfterHeader.style.marginTop = '80px'; } else if(hActive != 1) { headerEl.classList.remove('active'); divAfterHeader.style.marginTop = '0'; hActive = 1; } }; var resizeObserver = new ResizeObserver((entries) => { for (var entry of entries) { if (entry.contentRect) { updateHeaderState(); } } }); resizeObserver.observe(divAfterHeader); window.addEventListener('resize', () => { hWindow = window.innerHeight; updateHeaderState(); }); header.addEventListener('scroll', function (e) { if (e.target.scrollTop > 1) { headerEl.classList.add('active'); } else { headerEl.classList.remove('active'); } }); updateHeaderState(); } }; document.addEventListener("DOMContentLoaded", () => { handleLoadJS(); handleLoadSwiperTabs(); handleScrollHeader(); });

調理の様子をご紹介！