https://www.safetyaction.tokyo/assets/js/top.js?v=20260902

1{
2  'use strict';
3
4  //　タレントアニメーション
5  const runTalentAnimation = () => {
6    const talentStepDuration = 1000;
7
8    $('.talent02.anime').addClass('active');
9
10    window.setTimeout(() => {
11      $('.talent03.anime').addClass('active');
12    }, talentStepDuration);
13
14    window.setTimeout(() => {
15      $('.talent01.anime, .talent04.anime, .talent05.anime, .baloon10').addClass('active');
16    }, talentStepDuration * 2);
17  };
18
19  // 緊急対策
20  $(function(){
21    $('.emergency__closer, .emergency__close__btn').on('click', function() {
22      $('.emergency').addClass('close');
23    });
24  });
25
26   // youtube動画モーダル表示
27  $(function () {
28  if ($(".js-modal-video").length) {
29    $(".js-modal-video").modalVideo({
30      channel: "youtube",
31      youtube: {
32        controls: 1, // コントロール表示（0は非表示）
33      }
34    });
35    }
36  });
37
38  //　SP版操作ガイド
39  const setupSpGuide = () => {
40    const $spGuide = $('.sp_guide');
41    const spGuideStorageKey = 'spGuideHiddenUntil';
42    const spGuideHiddenDurationMs = 14 * 24 * 60 * 60 * 1000;
43
44    const getSpGuideHiddenUntil = () => {
45      try {
46        const value = window.localStorage.getItem(spGuideStorageKey);
47        return value ? Number(value) : 0;
48      } catch (error) {
49        return 0;
50      }
51    };
52
53    const setSpGuideHiddenUntil = (timestamp) => {
54      try {
55        window.localStorage.setItem(spGuideStorageKey, String(timestamp));
56      } catch (error) {
57        // localStorageが使えない環境では保存せずに継続
58      }
59    };
60
61    if (!$spGuide.length) {
62      return;
63    }
64
65    const isSpViewport = window.matchMedia('(max-width: 1039px)').matches;
66
67    if (!isSpViewport) {
68      $spGuide.hide();
69      return;
70    }
71
72    const now = Date.now();
73    const hiddenUntil = getSpGuideHiddenUntil();
74
75    if (hiddenUntil > now) {
76      $spGuide.hide();
77      return;
78    }
79
80    $spGuide.show();
81    setSpGuideHiddenUntil(now + spGuideHiddenDurationMs);
82
83    let spGuideTimerId = null;
84
85    const closeSpGuide = () => {
86      if (spGuideTimerId) {
87        window.clearTimeout(spGuideTimerId);
88        spGuideTimerId = null;
89      }
90
91      if (!$spGuide.is(':visible')) {
92        return;
93      }
94
95      $spGuide.stop(true, true).fadeOut(600);
96    };
97
98    $spGuide.on('click', closeSpGuide);
99    spGuideTimerId = window.setTimeout(closeSpGuide, 5000);
100  };
101
102  const runWhenDomReady = (callback) => {
103    if (document.readyState === 'loading') {
104      document.addEventListener('DOMContentLoaded', callback, { once: true });
105      return;
106    }
107
108    callback();
109  };
110
111  window.addEventListener('load', runTalentAnimation);
112  runWhenDomReady(setupSpGuide);
113
114  // お知らせ非表示
115  $('.block__close__btn').on('click', function() {
116    $(this).parent().addClass('hidden');
117  });
118
119  // ナビゲーションメニューの開閉
120  const closeSpMenu = () => {
121    $('.menu-trigger').removeClass('active');
122    $('.menu_sp_wrap').removeClass('active');
123    $('.megamenu_sp').removeClass('active');
124    $('.menu_sp_bk').removeClass('active');
125  };
126
127  const closePcMenu = () => {
128    $('.menu-trigger').removeClass('active');
129    $('.menu_pc_wrap').removeClass('active');
130    $('.menu_pc_bk').removeClass('active');
131  };
132
133  const closeAllMenus = () => {
134    closeSpMenu();
135    closePcMenu();
136  };
137
138  const isPcViewport = () => window.matchMedia('(min-width: 1040px)').matches;
139
140  const submenuConfig = [
141    { trigger: '.menu_sa_trigger', panel: '.menu_sa' },
142    { trigger: '.menu_type_trigger', panel: '.menu_type' },
143    { trigger: '.menu_column_trigger', panel: '.menu_column' },
144    { trigger: '.menu_game_trigger', panel: '.menu_game' }
145  ];
146
147  $('.menu-trigger').on('click', function() {
148    const isOpen = $(this).hasClass('active');
149
150    if (isOpen) {
151      closeAllMenus();
152      return;
153    }
154
155    closeAllMenus();
156    $(this).addClass('active');
157
158    if (isPcViewport()) {
159      $('.menu_pc_wrap').addClass('active');
160      $('.menu_pc_bk').addClass('active');
161      return;
162    }
163
164    $('.menu_sp_wrap').addClass('active');
165    $('.megamenu_sp').addClass('active');
166    $('.menu_sp_bk').addClass('active');
167  });
168
169  $('.menu_sp_bk').on('click', function() {
170    closeSpMenu();
171  });
172
173  $('.menu_pc_bk').on('click', function() {
174    closePcMenu();
175  });
176
177  submenuConfig.forEach(({ trigger, panel }) => {
178    $(trigger).on('click', function() {
179      $(this).toggleClass('active');
180      $(panel).toggleClass('active');
181    });

182  });
183
184
185  // おみくじ
186  const $omikujiResults = $('.omikuji__results__wrap > .omikuji__results__item');
187
188  const closeOmikujiResults = () => {
189    $('.omikuji__results').removeClass('active');
190    $omikujiResults.removeClass('active');
191  };
192
193  $('.omikuji').on('click', function() {
194    if (!$omikujiResults.length) {
195      return;
196    }
197
198    const randomIndex = Math.floor(Math.random() * $omikujiResults.length);
199
200    $omikujiResults.removeClass('active');
201    $('.omikuji__results').addClass('active');
202    $omikujiResults.eq(randomIndex).addClass('active');
203  });
204
205  $('.omikuji__results__close').on('click', function() {
206    closeOmikujiResults();
207  });
208
209  $('.omikuji__results__close__btn').on('click', function() {
210    closeOmikujiResults();
211  });
212
213  // モーダルメニューの開閉
214  for (let i = 1; i <= 8; i++) {
215    $(function(){
216      $(`.baloon0${i}`).on('click', function() {
217        $('.modal__menu').addClass('active');
218        $('.modal__close').addClass('active');
219        $(`.modal__menu__0${i}`).addClass('active');
220      });
221    });
222  }
223
224  $(function(){
225    $('[class*="modal__menu__"] .modal__close__btn').on('click', function() {
226      $('.modal__menu').removeClass('active');
227      $('.modal__close').removeClass('active');
228      $('[class*="modal__menu__"].active').removeClass('active');
229    });
230  });
231
232  $(function(){
233    $('.modal__close').on('click', function() {
234      $('.modal__menu').removeClass('active');
235      $('.modal__close').removeClass('active');
236      $('[class*="modal__menu__"].active').removeClass('active');
237    });
238  });
239
240  // パンズームの初期化とレスポンシブ対応
241  const elem = document.querySelector('.js-panzoom');
242
243  if (elem) {
244    const mediaQuery = window.matchMedia('(max-width: 1024px)');
245    let panzoom = null;
246
247    const getCenteredPanOptions = () => {
248      const parent = elem.parentElement;
249
250      if (!parent) {
251        return {
252          startX: 0,
253          startY: 0
254        };
255      }
256
257      const parentRect = parent.getBoundingClientRect();
258      const elemRect = elem.getBoundingClientRect();
259
260      return {
261        startX: (parentRect.width - elemRect.width) / 2,
262        startY: (parentRect.height - elemRect.height) / 2
263      };
264    };
265
266    const recenterPanzoom = () => {
267      if (!panzoom || !mediaQuery.matches) {
268        return;
269      }
270
271      window.requestAnimationFrame(() => {
272        panzoom.reset({
273          animate: false,
274          ...getCenteredPanOptions()
275        });
276      });
277    };
278
279    const togglePanzoom = ({ matches }) => {
280      if (matches) {
281        if (!panzoom) {
282          panzoom = Panzoom(elem, {
283            contain: 'outside',
284            ...getCenteredPanOptions()
285        });
286        } else {
287          recenterPanzoom();
288        }
289
290        return;
291      }
292
293      if (panzoom) {
294        panzoom.destroy();
295        panzoom.resetStyle();
296        elem.style.transform = '';
297        panzoom = null;
298      }
299    };
300
301    togglePanzoom(mediaQuery);
302    mediaQuery.addEventListener('change', togglePanzoom);
303  window.addEventListener('resize', recenterPanzoom);
304  window.addEventListener('orientationchange', recenterPanzoom);
305  }
306
307}