https://www.netone.co.jp/scripts/scripts.js?20250324103818

1//グローバル変数
2const mq = window.matchMedia('(min-width: 768px)'); //メディアクエリ
3const mq1200 = window.matchMedia('(min-width: 1200px)'); //メディアクエリ
4const textData = {"open": "すべて開く","close": "すべて閉じる"}
5const textDataEn = {"open": "Open all","close": "Close all"}
6
7
8//高さを揃える
9function heightLine() {
10  $('.js-boxHeight').matchHeight();
11}
12
13//スムーススクロール
14function pageScroll() {
15  const not = ':not(.js-modalInline):not(.js-modalSpecial):not(.js-modalInlineMovie)';
16  $('a[href^="#"]' + not).on('click', function () {
17    const offsetTop = ($($(this).attr('href')).offset().top) - 72;
18    $('html,body').animate({ scrollTop: offsetTop }, 'slow', 'swing');
19    return false;
20  });
21}
22
23//ハッシュ付きURL時のアンカー
24function hashScroll() {
25  let urlHash = location.hash;
26  if(urlHash) {
27    $('html,body').stop().scrollTop(0);
28    setTimeout(function () {
29      scrollToAnker(urlHash);
30    }, 100);
31  }
32
33  function scrollToAnker(hash) {
34    let target = $(hash);
35    let position = (target.offset().top) - 72;
36    $('body,html').stop().animate({scrollTop:position}, 500);
37  }
38}
39
40//キービジュアルのスライダー
41function kvSlider() {
42  function slideShuffle($slideWrap) {
43    if ($('.p-pageHeading--top').length > 0) {
44      let content = $slideWrap.find('.swiper-slide').toArray();
45      for (let i = content.length - 1; i > 0; i--) {
46        const j = Math.floor(Math.random() * (i + 1));
47        [content[i], content[j]] = [content[j], content[i]];
48      }
49      $slideWrap.empty().append(content);
50    }
51  }
52
53  slideShuffle($('.p-kvSlider__body'));
54
55  if ($('.js-kvSlider').length > 0) {
56    $('.p-pageHeading--top').addClass('is-slideShow');
57
58    if ($('.swiper-button-prev').length === 0) {
59      $('.js-kvSlider').append('<button type="button" class="swiper-button-prev swiper-button-white"></button>');
60      $('.js-kvSlider').append('<button type="button" class="swiper-button-next swiper-button-white"></button>');
61    }
62
63    if ($('.js-kvSlider .swiper-slide').length > 1) {
64      new Swiper('.js-kvSlider', {
65        speed: 1000,
66        autoplay: {
67          delay: 5000,
68        },
69        pagination: {
70          el: '.swiper-pagination',
71          clickable: true
72        },
73        navigation: {
74          nextEl: ".swiper-button-next",
75          prevEl: ".swiper-button-prev",
76        },
77        noSwiping: true,
78        noSwipingClass: 'js-kvSlider',
79        loop: true,
80        effect: 'fade',
81      });
82
83      $('.p-kvSlider__pager').removeClass('u-hide');
84    }
85  }
86}
87
88//トグルボタン
89function toggleBtn() {
90  $('.js-toggleBtn').on('click', function() {
91    $(this).fadeOut();
92    $('.p-toggle__body').slideDown();
93  });
94
95  $('.js-footerToggle').on('click', function() {
96    $(this).toggleClass('is-open');
97    $(this).next('.js-footerToggleContents').stop().slideToggle();
98  });
99}
100
101//メニュー
102function catMenu() {
103  let clickFlag = false;
104  mq1200.addListener(resizeEvent);
105  mq1200.addListener(removeClassBody);
106  resizeEvent(mq1200);
107  clickSearchWindow();
108
109  function removeClassBody() {
110    $('body').removeClass('is-menuOpen');
111  }
112
113
114
115  // メニューの表示方法切り替え PC/SP
116  function resizeEvent(e) {
117    const $menuOn = $('.js-menuOn');
118    const $menuBody = $('body');
119    const $menuBtn = $('.p-listMenu__btn');
120    $menuBtn.off('click');
121    $menuOn.children('.js-menuOpen').removeClass('is-active');
122    if(e.matches) {
123      $menuOn.children('.p-listMenu__link').on('click', function(e){
124        const $thisParent = $(this).closest('.js-menuOn');
125        if(!$thisParent.children('.js-menuOpen').hasClass('is-active')) {
126          e.preventDefault();
127          $menuBody.addClass('is-menuOpen');
128          $menuOn.children('.js-menuOpen').removeClass('is-active');
129          $thisParent.children('.js-menuOpen').addClass('is-active');
130          $('.js-windowOpen').removeClass('is-open');
131          clickFlag = true;
132        }
133      });
134    } else {
135      //SPナビクリック
136      $menuBtn.removeClass('is-active');
137      $menuBtn.on('click',function(){
138        if(clickFlag) {
139          $menuBody.removeClass('is-menuOpen');
140          $menuBtn.removeClass('is-active');

141          clickFlag = false;
142        } else {
143          $menuBody.addClass('is-menuOpen');
144          $menuBtn.addClass('is-active');
145          $('.js-windowOpen').removeClass('is-open');
146          clickFlag = true;
147        }
148      });
149    }
150  }
151
152  // メニューの閉じるボタン-PCのみ
153  $('.p-catMenu__btn').on('click', function() {
154    let $thisParent = $(this).closest('.js-menuOn');
155    $('body').removeClass('is-menuOpen');
156    $thisParent.children('.js-menuOpen').removeClass('is-active');
157    clickFlag = false;
158  })
159
160  //検索窓
161  function clickSearchWindow() {
162    $('.js-window').on('click', function(){
163      if(clickFlag) {
164        $('.p-listMenu__btn').removeClass('is-active');
165        $('.js-menuOn').children('.js-menuOpen').removeClass('is-active');
166        $('body').removeClass('is-menuOpen');
167        clickFlag = false;
168      }
169      $('.js-windowOpen').toggleClass('is-open');
170    });
171  }
172}
173
174
175
176
177//modal
178function modal() {
179  var $body = document.body;
180  var clientWidth = $body.clientWidth;
181  var noScrollBarWidth = clientWidth;
182  var diff = 0;
183  //インラインコンテンツ
184  $('.js-modalInline').modaal({
185    before_open: function () {
186      scrollNone();
187    },
188    after_close: function () {
189      scrollOn();
190    }
191  });
192
193  //画像
194  $('.js-modalImage').modaal({
195    type:'image',
196    before_open: function () {
197      scrollNone();
198    },
199    after_close: function () {
200      scrollOn();
201    }
202  });
203
204  //動画
205  $('.js-modalMovie').modaal({
206    type: 'video',
207    before_open: function () {
208      scrollNone();
209    },
210    after_close: function () {
211      scrollOn();
212    }
213  });
214
215  //動画
216  $('.js-modalInlineMovie').modaal({
217    before_open: function () {
218      scrollNone();
219    },
220    after_open: function () {
221      let movieSrc = this.$elem.attr('data-movieSrc');
222      let movieHtml = '<iframe class="js-movieStart" width="560" height="315" src="' + movieSrc + '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
223
224      $('.js-movieSet').html(movieHtml);
225    },
226    after_close: function () {
227      scrollOn();
228      $('.js-movieSet').html('');
229    }
230  });
231
232  //こんなところに
233  var $spModal = $('.js-modalSpecial').modaal({
234    custom_class: 'js-Special',
235    before_open: function () {
236      scrollNone();
237    },
238    after_close: function () {
239      scrollOn();
240    }
241  });
242
243  mq.addListener(modalResizeEvent);
244  modalResizeEvent(mq);
245  function modalResizeEvent(e) {
246    if(e.matches) {
247      $('.js-accModal').off('click');
248      $('.js-accModal').closest('.l-base').removeClass('is-accModalOpen');
249      $('.js-accModalOpen').stop().slideUp().removeClass('is-open');
250      $('.js-accModal').removeClass('is-open');
251    } else {
252
253      $('.js-accModal').on('click', function() {
254        $(this).next('.js-accModalOpen').stop().slideToggle().toggleClass('is-open');
255        $(this).stop().toggleClass('is-open');
256        $('.js-accModal').closest('.l-base').removeClass('is-accModalOpen');
257
258        if($('.js-accModal').hasClass('is-open')){
259          $(this).closest('.l-base').stop().addClass('is-accModalOpen');
260        }
261      });
262      $spModal.modaal('close');
263    }
264  }
265
266  //モダール展開時の肩衝防止
267  function scrollNone() {
268    //スクロールバーを無くす前
269    clientWidth = $body.clientWidth;
270    $('body').css('overflow', 'hidden');
271    //スクロールバーを無くした後
272    noScrollBarWidth = $body.clientWidth;
273    //スクロールバーの長さ計算
274    diff = noScrollBarWidth - clientWidth;
275    if (diff > 0) {
276      $body.style['padding-right'] = diff + 'px';
277    }
278  }
279
280  function scrollOn() {
281    $('body').css('overflow', 'visible');
282    $body.style['padding-right'] = '0px';
283  }
284}
285
286
287//accordion
288function accordion() {
289  const textLang = $('html').attr('lang');
290  $('.js-accToggle').on('click', function() {
291    $(this).next('.js-accOpen').stop().slideToggle().toggleClass('is-open');
292    $(this).stop().toggleClass('is-open');
293  });
294  let openText = textData.open;
295  let closeText = textData.close;
296
297  if(textLang === 'en') {
298    openText = textDataEn.open;
299    closeText = textDataEn.close;
300  }
301
302  $('.js-accAllOpen').on('click', function() {

303    let $this = $(this);
304    if($this.hasClass('is-open')) {
305      $('.p-accAllClick__text').text(openText);
306      $('.js-accAllOpen').removeClass('is-open');
307      $('.js-accToggle').next('.js-accOpen').stop().slideUp().removeClass('is-open');
308      $('.js-accToggle').stop().removeClass('is-open');
309    } else {
310      $('.p-accAllClick__text').text(closeText);
311      $('.js-accAllOpen').addClass('is-open');
312      $('.js-accToggle').next('.js-accOpen').stop().slideDown().addClass('is-open');
313      $('.js-accToggle').stop().addClass('is-open');
314    }
315
316  });
317}
318
319//snsのfixedコンテンツ
320function snsFiexd() {
321  //observerの実行
322  const mainTopPadding = '-102px'
323  let options = {
324    root: null,
325    rootMargin: mainTopPadding + ' 0px 0px 0px',
326    // rootMargin: '0px 0px 0px 0px',
327    threshold: 0
328  }
329  let observer = new IntersectionObserver(callback, options);
330  let target = document.querySelector('.l-main__head');
331  observer.observe(target);
332
333  // イベント発火時のコールバック関数
334  function callback(entry) {
335    if(entry[0].intersectionRect.top > 0) {
336      $('.p-fixedGroup').removeClass('is-fixed');
337      $('.p-fixedContact').removeClass('is-fixed');
338    } else {
339      $('.p-fixedGroup').addClass('is-fixed');
340      $('.p-fixedContact').addClass('is-fixed');
341    }
342  }
343
344
345
346}
347
348function snsBtnLink() {
349  //格SNSのシェアボタン
350  let title = document.title,
351      url = location.href;
352  //facebookのシェアボタン
353  $('.js-facebook').on('click', function(){
354    window.open('http://www.facebook.com/sharer.php?u=' + encodeURIComponent(url) + '&t=' + encodeURIComponent(title), 'FBsharer', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes');
355    return false;
356  });
357  //ツイートのシェアボタン
358  $('.js-twitter').on('click', function(){
359    window.open('http://twitter.com/share?url=' + encodeURIComponent(url) + '&text=' + encodeURIComponent(title), 'TWsharer', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes');
360      return false;
361  });
362}
363
364
365
366//gdpr
367function gdpr() {
368  const setKey = 'nosGDPR';
369  const setValue = 'Agree';
370  const getValue = Cookies.get(setKey);
371  $('.js-cookieClick').on('click', function() {
372    Cookies.set(setKey, setValue, { path:'/', expires: 14 });
373    $('.p-cookieBar').removeClass('is-open');
374  });
375
376  if(getValue !== setValue) {
377    $('.p-cookieBar').addClass('is-open');
378  } else {
379    $('.p-cookieBar').removeClass('is-open');
380  }
381}
382
383//ページトップへ戻る
384function fixedScroll() {
385  let $returnTop = $('.p-returnTop');
386
387  $(window).on('scroll resize', function(){
388    let thisOffsetTop =  $(document).scrollTop();
389    if(thisOffsetTop > 150) {
390      $returnTop.removeClass('is-hide');
391    } else {
392      $returnTop.addClass('is-hide');
393    }
394  });
395
396  returnObserver();
397
398  //observerの実行
399  function returnObserver() {
400    let options = {
401      root: null,
402      rootMargin: '0px 0px 0px 0px',
403      threshold: 0
404    }
405    let observer = new IntersectionObserver(returnCallback, options);
406    let target = document.querySelector('.l-base__footer');
407    observer.observe(target);
408  }
409
410
411  // イベント発火時のコールバック関数
412  function returnCallback(entry) {
413    if(entry[0].intersectionRect.top > 0 || entry[0].boundingClientRect.top < 0) {
414      $returnTop.removeClass('is-fixed');
415    } else {
416      $returnTop.addClass('is-fixed');
417    }
418  }
419
420}
421
422//スクロールでブログバナーを非表示
423function fixedBnr() {
424  let $fixedItem = $('.js-fixedBnr');
425  let scrollNum = 500;
426  let contentHeight = ($('.l-base__body').height()) - ($('.l-base__footer').height()) - ($('.l-main__head').height());
427
428  scrollNum = contentHeight - 400;
429  $fixedItem.addClass('is-bnrShow');
430
431  bnrObserver();
432
433  //observerの実行
434  function bnrObserver() {
435    let options = {
436      root: null,
437      rootMargin: '0px 0px 120px 0px',
438      threshold: 0
439    }
440    let observer = new IntersectionObserver(returnCallback, options);
441    let target = document.querySelector('.l-base__footer');
442    observer.observe(target);
443  }
444
445
446  // イベント発火時のコールバック関数
447  function returnCallback(entry) {
448    if(entry[0].intersectionRect.top  > 0 || entry[0].boundingClientRect.top < 0) {
449      $fixedItem.addClass('is-disNone');
450    } else {
451      $fixedItem.removeClass('is-disNone');
452    }
453  }
454}
455
456/* table */
457(function ($) {
458
459  $.fn.responsiveTable = function (config) {
460    var defaults = {
461      captionText: 'スクロールしてご確認ください。',
462      size: 2
463    };
464    var options = $.extend(defaults, config);
465    return this.each(function () {
466      var $this = $(this);
467      var $cells = $this.find('tr:first > *');
468      var tableSize = $this.find('tr:first > *').length;
469
470      for (var i = 0; i < $cells.length; i++) {
471        var $cell = $cells.eq(i);
472        var colspan = $cell.attr('colspan');
473
474        if (colspan) {
475          tableSize = tableSize + (colspan - 1);
476        }
477      }
478      if (tableSize > options.size) {
479        $this.wrap('<div class="p-tableScroll"></div>');
480        var $wrapper = $this.closest('.p-tableScroll');
481        $wrapper.before('<p class="p-tableScroll__caption"><span>

481' + options.captionText + '</span></p>');
482      }
483    });
484
485  };
486})(jQuery);
487
488//ヘッダーのナビ固定
489function headFixed() {
490  //observerの実行
491  let options = {
492    root: null,
493    rootMargin: '72px 0px 0px 0px',
494    threshold: 0
495  }
496  let headObserver = new IntersectionObserver(fixedCallback, options);
497  let headTarget = document.querySelector('.l-base__header');
498  headObserver.observe(headTarget);
499
500  // イベント発火時のコールバック関数
501  function fixedCallback(headEntry) {
502    if(headEntry[0].isIntersecting) {
503      headEntry[0].target.classList.remove("is-fixed");
504    } else {
505      headEntry[0].target.classList.add("is-fixed");
506    }
507  }
508}
509
510//ロード後に実行
511$(function () {
512  heightLine();    //boxの高さを揃える
513  pageScroll();    //ページトップへ戻る
514  toggleBtn();     //トグルボタン
515  catMenu();       //メニュー
516  modal();         //モーダルの設定
517  accordion();     //アコーディオン
518  if($('.p-pageHeading--top').length <= 0) {
519    snsFiexd();
520  }
521  if($('#blogSort').length <= 0) {
522    snsBtnLink();
523  }
524
525  gdpr();          //gdpr
526
527  fixedScroll()    //フローティングバナー
528
529  headFixed()      //ヘッダーのナビ固定
530
531  //テーブル横スクロール
532  let scrollText = '';
533  if($('html').attr('lang') === 'en') {
534    scrollText = 'Please scroll to check'
535  } else {
536    scrollText = 'スクロールしてご確認ください。'
537  }
538  const notTable = ':not(table table):not(.js-tableNoScroll)';
539  $('table' + notTable).responsiveTable({
540    captionText: scrollText
541  });
542
543  //キービジュアルのスライダー
544  if($('.l-base').hasClass('l-base--ir')) {
545    $(window).on('load', function() {
546      kvSlider();
547    });
548  } else {
549    kvSlider();
550  }
551
552  if(!document.getElementById('viewPickUp')) {
553    hashScroll();    //ハッシュ付きURL時のアンカー
554  }
555
556});
557
558
559$(window).on('load', function(){
560  fixedBnr();
561});