https://relabo.com/wellness/spa/assets/js/ui-common.js?20261005071005

1/* ---------------------------------
2 375px未満はviewport固定
3--------------------------------- */
4!(function () {
5 const viewport = document.querySelector('meta[name="viewport"]');
6 function switchViewport() {
7   const value =
8     window.outerWidth > 375
9       ? 'width=device-width,initial-scale=1'
10       : 'width=375';
11   if (viewport.getAttribute('content') !== value) {
12     viewport.setAttribute('content', value);
13   }
14 }
15 addEventListener('resize', switchViewport, false);
16 switchViewport();
17})();
18
19
20/* ---------------------------------
21  メニュー開閉関数
22--------------------------------- */
23
24function menuIn() {
25	$('.menu-trigger').addClass('active');
26	$('#menu-mask').animate(300).addClass('active');
27  $('#menu').addClass('active');
28  
29  // Lenisスクロールを停止
30  if (lenis) {
31    lenis.stop();
32  }
33    
34  // ナビメニューのアニメーション
35  setTimeout(function() {
36    // ロゴのアニメーション
37    $('#menu .nav_logo').addClass('animate');
38    
39    // ナビメニューのアニメーション
40    $('#menu .nav_list ul li').each(function(index) {
41      var $item = $(this);
42      setTimeout(function() {
43        $item.addClass('animate');
44      }, index * 100); // 0.1秒ずつ遅延
45    });
46  }, 300); // メニューが開いてから少し遅れて開始
47}
48function menuOut() {
49	$('.menu-trigger').removeClass('active');
50	$('#menu-mask').removeClass('active');
51  $('#menu').removeClass('active');
52  
53  // アニメーションクラスをリセット
54  $('#menu .nav_logo').removeClass('animate');
55  $('#menu .nav_list ul li').removeClass('animate');
56  
57  // Lenisスクロールを再開
58  if (lenis) {
59    lenis.start();
60  }
61}
62
63$(window).on('load', function () {
64
65//メニュー開閉
66	$(".navInner").on('click.menuopen',function(){
67		if($(this).children().hasClass('active')){
68			menuOut();
69		} else {
70			menuIn();
71		}
72	});
73//ページ内スクロール時 閉じる
74  $('#menu a').on('click', function(){
75    menuOut();
76    
77    // オープニング画面が表示されている場合は閉じる
78    if ($("#ind_Opening").is(':visible')) {
79      $("#ind_Opening").fadeOut(1000, function() {
80        $("#wrapper").fadeIn(1000);
81        // 別タブで表示するためsessionStorageを使用
82        sessionStorage.setItem("openingViewed", "true");
83      });
84    }
85  });
86  
87  //メニューマスククリック時も閉じる
88  $('#menu-mask').on('click', function(){
89    menuOut();
90  });
91});
92
93
94/* ---------------------------------
95  fadeIn アニメーション
96--------------------------------- */
97// スクロールして表示領域に入ったらclass付与（1回のみ）
98$(function () {
99  $(".js-fadeUp, .js-fadeIn").on("inview", function () {
100    $(this).addClass("is-inview");
101  });
102});
103
104/* ---------------------------------
105  読み込み kasou_Loading
106--------------------------------- */
107$(window).on('load', function () {
108  $('#kasou_Loading').fadeOut(2000)
109});
110
111/* ---------------------------------
112  オープニング画面処理（＋別タブ以外再表示なし）
113--------------------------------- */
114$(document).ready(function() {
115  // オープニング画面の要素が存在する場合のみ処理を実行
116  if ($("#ind_Opening").length > 0 && $("#wrapper").length > 0) {
117    // すでに閲覧済みならオープニング画面を表示しない
118    if (sessionStorage.getItem("openingViewed")) {
119      $("#ind_Opening").hide();
120      $("#wrapper").show();
121      // ローディングも非表示にする
122      $("#ind_Loading").hide();
123    } else {
124      $("#ind_Opening").show();
125      $("#wrapper").hide();
126    }
127  } else {
128    // #ind_Openingが存在しない場合はローディングも非表示にする
129    $("#ind_Loading").hide();
130  }
131
132  // Enterボタン押下時の処理（#ind_Openingが存在する場合のみ）
133  if ($("#ind_Opening").length > 0) {
134    $("#Enterbtn").on("click", function() {
135      $("#ind_Opening").fadeOut(1000, function() {
136        $("#wrapper").fadeIn(1000);
137        // 別タブで表示するためsessionStorageを使用
138        sessionStorage.setItem("openingViewed", "true");
139      });
140    });
141  }
142});
143
144
145
146
147/* ---------------------------------
148  慣性スクロール
149--------------------------------- */
150
151let lenis;
152

153// 750px以上の場合のみLenisを初期化
154if (window.innerWidth > 750) {
155  lenis = new Lenis({
156    autoRaf: true,
157  });
158
159  // requestAnimationFrameでスクロール処理を継続的に更新
160  function raf(time) {
161    lenis.raf(time)
162    requestAnimationFrame(raf)
163  }
164
165  requestAnimationFrame(raf)
166}
167
168// リサイズ時のLenis制御
169window.addEventListener('resize', () => {
170  if (window.innerWidth > 750 && !lenis) {
171    // 750px以上でLenisが未初期化の場合
172    lenis = new Lenis({
173      autoRaf: true,
174    });
175    function raf(time) {
176      lenis.raf(time)
177      requestAnimationFrame(raf)
178    }
179    requestAnimationFrame(raf)
180  } else if (window.innerWidth <= 750 && lenis) {
181    // 750px以下でLenisが初期化済みの場合
182    lenis.destroy()
183    lenis = null
184  }
185});
186
187// メニュー開閉時のLenis制御
188const menuTrigger = document.querySelector('.menu-trigger');
189const Menu = document.querySelector('#menu');
190
191if (menuTrigger && Menu) {
192  menuTrigger.addEventListener('click', () => {
193    if (menuTrigger.classList.contains('active')) {
194      // メニューを閉じる時
195      lenis.start();
196    } else {
197      // メニューを開く時
198      lenis.stop();
199    }
200  });
201}
202
203
204/* ---------------------------------
205  Shutto 翻訳
206--------------------------------- */
207
208
209document.addEventListener('DOMContentLoaded', function () {
210  const langMenu = document.getElementById('langMenu');
211  const langToggle = document.getElementById('langToggle');
212  const langLinks = langMenu.querySelectorAll('a[data-stt-changelang]');
213
214  // Language クリックでメニュー開閉
215  langToggle.addEventListener('click', function (e) {
216    e.stopPropagation();
217    langMenu.classList.toggle('open');
218  });
219
220  // メニュー外クリックで閉じる
221  document.addEventListener('click', function (e) {
222    if (!langMenu.contains(e.target)) {
223      langMenu.classList.remove('open');
224    }
225  });
226
227  // 言語クリック → Shutto に任せる（表示変更はしない）
228  langLinks.forEach(function (link) {
229    link.addEventListener('click', function () {
230      langMenu.classList.remove('open');
231      // STT_CHANGE_LANG は Shutto 側が data-stt-changelang で処理
232    });
233  });
234});
235
236
237/* ---------------------------------
238  スクロール
239--------------------------------- */
240
241var pagelink = 0;
242
243$(window).on('load resize', function(){
244    if (!window.matchMedia("(max-width:750px)").matches) {
245        //PC表示の設定
246        pagelink = 0;
247    } else {
248        //スマホ表示の設定
249        pagelink = 60;
250    }
251});
252
253
254
255$(function() {
256
257      //URLのハッシュ値を取得
258      var urlHash = location.hash;
259      //ハッシュ値があればページ内スクロール
260      if(urlHash) {
261        //スクロールを0に戻す
262        $('body,html').stop().scrollTop(0);
263        setTimeout(function () {
264          //ロード時の処理を待ち、時間差でスクロール実行
265          scrollToAnker(urlHash) ;
266        }, 300);
267      }
268
269      //通常のクリック時
270      $('a[href^="#"].scroll').click(function() {
271        //ページ内リンク先を取得
272        var href= $(this).attr("href");
273        //リンク先が#か空だったらhtmlに
274        var hash = href == "#" || href == "" ? 'html' : href;
275        //スクロール実行
276        scrollToAnker(hash);
277        //リンク無効化
278        return false;
279      });
280
281      // 関数：スムーススクロール
282      // 指定したアンカー(#ID)へアニメーションでスクロール
283      function scrollToAnker(hash) {
284        var target = $(hash);
285        var position = target.offset().top;
286        $('body,html').stop().animate({scrollTop:position  - pagelink }, 600);
287      }
288
289 });
290
291
292
293
294 /* ---------------------------------
295  固定予約ボタン
296--------------------------------- */
297$(window).on('scroll', function() {
298  const scrollTop = $(this).scrollTop();
299  const $fixedBtn = $('#fixed_ReserveBtn');
300  
301  if (scrollTop > 200) {
302    $fixedBtn.addClass('show');
303  } else {
304    $fixedBtn.removeClass('show');
305  }
306});