https://www.ecbeing.net/cms/smz/js/usr/common.js?v0

1/////////////////////////////////ヘッダー/////////////////////////////////
2window.addEventListener('DOMContentLoaded', () => {
3//// 追従識別
4  const header = document.querySelector('header');
5  const body = document.body;
6
7  //const headerHeight = header.offsetHeight;
8  const headerHeight = 0.1;
9
10  const scrollClass = 'fixed';
11
12  window.addEventListener('scroll', () => {
13    const scrollY = window.scrollY;
14
15    if (scrollY >= headerHeight) {
16      body.classList.add(scrollClass);
17    } else {
18      body.classList.remove(scrollClass);
19    }
20  });
21
22});
23
24$(function() {
25	//// サブメニュー
26	if(!$('.js-header-acc-overlay').length){
27		$('body').append('<div class="js-header-acc-overlay"></div>');
28	}
29
30	$(document).on('click','.js-header-acc-menu > span',function(){
31		$(this).toggleClass('js-header-acc-menu-active');
32		$(this).parent().find('.header_list_sub').fadeToggle();
33		$('.js-header-acc-overlay').fadeIn();		$(this).parent().find('.header_list_sub_inner').slideToggle();
34		//クリックしたメニュー以外
35		$('.js-header-acc-menu > span').not($(this)).removeClass('js-header-acc-menu-active');

36		$('.js-header-acc-menu > span').not($(this)).parent().find('.header_list_sub').fadeOut();
37		$('.js-header-acc-menu > span').not($(this)).parent().find('.header_list_sub_inner').fadeOut();
38	});
39
40	$(document).on('click','.js-header-acc-overlay',function(){
41		$(this).fadeOut();
42		$('.js-header-acc-menu-active').removeClass();
43		$(this).parents('body').find('.header_list_sub').fadeOut();
44		$(this).parents('body').find('.header_list_sub').find('.header_list_sub_inner').fadeOut();
45	});
46
47	$(document).on('click','.js-header-acc-menu-active',function(){
48		$(this).parents('body').find('.js-header-acc-overlay').fadeOut();
49	});
50	
51////サブメニュー > 導入事例
52document.getElementById('js-header-tab-selector').addEventListener('change', function() {
53  const selectedValue = this.value; // 選択されたoptionのvalueを取得
54  const tabContents = document.querySelectorAll('.header_list_sub_company_parent'); // 全てのコンテンツ要素を取得
55
56  // 全てのコンテンツを非表示にする
57  tabContents.forEach(content => {
58    content.style.display = 'none';
59  });
60
61  // 選択されたvalueに対応するコンテンツを表示する
62  document.getElementById(selectedValue).style.display = 'block';
63});
64
65	    //$('.header_list_sub_company_search li').click(function() {
66//		var index_tab = $('.header_list_sub_company_search li').index(this);
67//        $('.header_list_sub_company_parent').css('display','none');
68//        $('.header_list_sub_company_parent').eq(index_tab).fadeIn('slow');
69//        $('.header_list_sub_company_search li').removeClass('js-header-company-search-active');
70//        $(this).addClass('js-header-company-search-active');
71//    });
72
73$('.header_list_sub_company_tab li').click(function() {
74	var index_tab = $('.header_list_sub_company_tab li').index(this);
75	$(this).parents('.header_list_sub_company_parent').find('.header_list_sub_company_child').css('display','none');
76	$(this).parents('.header_list_sub_company_parent').find('.header_list_sub_company_child').eq(index_tab).fadeIn('slow');
77	$(this).parents('.header_list_sub_company_parent').find('.header_list_sub_company_tab li').removeClass('js-header-company-tab-active');
78	$(this).addClass('js-header-company-tab-active');
79});
80
81$('.header_list_sub_company_tab2 li').click(function() {
82	var index_tab = $('.header_list_sub_company_tab2 li').index(this);
83	$(this).parents('.header_list_sub_company_parent').find('.header_list_sub_company_child').css('display','none');
84	$(this).parents('.header_list_sub_company_parent').find('.header_list_sub_company_child').eq(index_tab).fadeIn('slow');
85	$(this).parents('.header_list_sub_company_parent').find('.header_list_sub_company_tab2 li').removeClass('js-header-company-tab-active');
86	$(this).addClass('js-header-company-tab-active');
87});
88	
89});
90
91
92//// ハンバーガーメニュー【SP】
93$(function() {
94	$('#js-hamburger').on('click', function() {
95		jQuery('body').toggleClass('h-overflow-hidden');
96		$(this).toggleClass('js-hm-active');
97		$('.header_right').slideToggle(400);
98	});
99});
100
101// レスポンシブ対策
102        // style属性を削除したい要素が持つクラス
103        const classesToClearStyle = ['header_right', 'header_list_sub', 'header_list_sub_inner', 'js-header-acc-overlay']; 
104        // 削除したいクラス名
105        const classesToRemove = ['h-overflow-hidden', 'js-header-acc-menu-active', 'js-hm-active'];
106
107        // 2. 画面幅に応じて処理を実行する関数
108        const handleResize = () => {
109            if (window.innerWidth >= 768) {
110                // --- style属性を削除する処理 ---
111                classesToClearStyle.forEach(className => {
112                    const elements = document.querySelectorAll('.' + className);
113                    elements.forEach(element => {
114                        // 既にstyleがなければ何もしない
115                        if (element.hasAttribute('style')) {
116                            element.removeAttribute('style');
117                        }
118                    });
119                });
120
121                // --- 指定したclassを削除する処理 ---
122                classesToRemove.forEach(classNameToRemove => {
123                    // document.querySelectorAll で検索するクラスも、削除対象のクラスそのものです。
124                    const elements = document.querySelectorAll('.' + classNameToRemove);

125                    elements.forEach(element => {
126                        element.classList.remove(classNameToRemove);
127                    });
128                });
129            }
130            // 768px未満になったときにスタイルやクラスを戻したい場合は、
131            // elseブロックに処理を追加します。
132        };
133
134        // 3. イベントリスナーを設定
135        window.addEventListener('resize', handleResize);
136
137        // 4. 初期表示時にも一度実行
138        handleResize();
139
140
141
142/////////////////////////////////コンテンツ/////////////////////////////////
143
144////パンくず
145//MV内に移動
146$(function() {
147	if ($('.breadcrumb').length && $('.common_heading').length) {
148		$('.breadcrumb').appendTo('.common_heading .common_inner_');
149	}
150});
151//見出し
152  document.addEventListener('DOMContentLoaded', function() {
153    // コピー元の要素（breadcrumb内の3番目のspan）を取得
154    const sourceElement = document.querySelector('.breadcrumb span:nth-child(3)');
155
156    // コピー先の要素（common_heading_2hierarchy）を取得
157    const destinationElement = document.querySelector('.common_heading_2hierarchy');
158
159    // 両方の要素が見つかった場合のみ、処理を実行
160    if (sourceElement && destinationElement) {
161      // コピー元のテキスト内容を取得
162      const textToCopy = sourceElement.textContent;
163
164      // コピー先のpタグにテキスト内容を設定
165      destinationElement.textContent = textToCopy;
166    }
167  });
168////高さ揃え
169$(function() {
170//2列【画像（左）テキスト（右）】
171$('ul.common_layout_photo-txt_2rowlist li h3').matchHeight();
172$('ul.common_layout_photo-txt_2rowlist li p').matchHeight();
173
174//3列【画像（上）テキスト（下）】
175$('ul.common_layout_photo-txt-line-3rowlist li h3').matchHeight();
176$('ul.common_layout_photo-txt-line-3rowlist li p').matchHeight();
177
178//2列【画像（上）テキスト（下）】
179$('ul.common_layout_photo-txt-line-2rowlist li h3').matchHeight();
180$('ul.common_layout_photo-txt-line-2rowlist li p').matchHeight();
181
182//3列【画像（上）テキスト（下）】
183$('ul.common_layout_photo-txt-line-4rowlist li h3').matchHeight();
184$('ul.common_layout_photo-txt-line-4rowlist li p').matchHeight();
185
186//1列【h2＋テキスト】＋スライダー
187$('.common_slider_area .common_slider_name').matchHeight();
188
189//ボタン
190$('.common_layout_listbtn-5rowlist li').matchHeight();
191
192$('.common_layout_listbtn-4rowlist li').matchHeight();
193
194//お問い合わせ
195$('.common_inquiry h2').matchHeight();
196    
197//FORUMページ
198$('#session .session_box .flex_box .semi .bk_w2 .text_area h3').matchHeight();
199$('#session .session_box .flex_box .semi .bk_w2').matchHeight();
200});
201
202////アコーディオンメニュー
203
204//FAQ
205$(document).on('click', '.common_layout_faqlist .acc_title', function () {
206	$(this).toggleClass('acc_plus');
207	$(this).next('dd').slideToggle();
208});
209
210
211////1列【h2＋テキスト】＋スライダー
212
213const common_slider = new Swiper('.common_slider_area', {
214	loop: true,
215	slidesPerView: '1',
216	spaceBetween: 20,
217	speed: 1000,
218	autoplay: {
219		disableOnInteraction: false,
220		delay: 4000,
221		//reverseDirection: true
222	},
223    breakpoints: {
224        768: {
225            slidesPerView: '4',
226        },
227    },
228	navigation: {
229		nextEl: '.swiper-button-next',
230		prevEl: '.swiper-button-prev',
231	},
232});
233
234
235