$(function() { /*! picturefill - v3.0.2 - 2016-02-12 * https://scottjehl.github.io/picturefill/ * Copyright (c) 2016 https://github.com/scottjehl/picturefill/blob/master/Authors.txt; Licensed MIT */ !function(a){var b=navigator.userAgent;a.HTMLPictureElement&&/ecko/.test(b)&&b.match(/rv\:(\d+)/)&&RegExp.$1<45&&addEventListener("resize",function(){var b,c=document.createElement("source"),d=function(a){var b,d,e=a.parentNode;"PICTURE"===e.nodeName.toUpperCase()?(b=c.cloneNode(),e.insertBefore(b,e.firstElementChild),setTimeout(function(){e.removeChild(b)})):(!a._pfLastSize||a.offsetWidth>a._pfLastSize)&&(a._pfLastSize=a.offsetWidth,d=a.sizes,a.sizes+=",100vw",setTimeout(function(){a.sizes=d}))},e=function(){var a,b=document.querySelectorAll("picture > img, img[srcset][sizes]");for(a=0;a2.7?h=c+1:(f=b-c,e=Math.pow(a-.6,1.5),g=f*e,d&&(g+=.1*e),h=a+g):h=c>1?Math.sqrt(a*b):a,h>c}function h(a){var b,c=s.getSet(a),d=!1;"pending"!==c&&(d=r,c&&(b=s.setRes(c),s.applySetCandidate(b,a))),a[s.ns].evaled=d}function i(a,b){return a.res-b.res}function j(a,b,c){var d;return!c&&b&&(c=a[s.ns].sets,c=c&&c[c.length-1]),d=k(b,c),d&&(b=s.makeUrl(b),a[s.ns].curSrc=b,a[s.ns].curCan=d,d.res||aa(d,d.set.sizes)),d}function k(a,b){var c,d,e;if(a&&b)for(e=s.parseSet(b),a=s.makeUrl(a),c=0;cc;c++)e=g[c],e[s.ns]=!0,f=e.getAttribute("srcset"),f&&b.push({srcset:f,media:e.getAttribute("media"),type:e.getAttribute("type"),sizes:e.getAttribute("sizes")})}function m(a,b){function c(b){var c,d=b.exec(a.substring(m));return d?(c=d[0],m+=c.length,c):void 0}function e(){var a,c,d,e,f,i,j,k,l,m=!1,o={};for(e=0;el?m=!0:c=l):X.test(j)&&"h"===i?((d||c)&&(m=!0),0===k?m=!0:d=k):m=!0;m||(o.url=g,a&&(o.w=a),c&&(o.d=c),d&&(o.h=d),d||c||a||(o.d=1),1===o.d&&(b.has1x=!0),o.set=b,n.push(o))}function f(){for(c(T),i="",j="in descriptor";;){if(k=a.charAt(m),"in descriptor"===j)if(d(k))i&&(h.push(i),i="",j="after descriptor");else{if(","===k)return m+=1,i&&h.push(i),void e();if("("===k)i+=k,j="in parens";else{if(""===k)return i&&h.push(i),void e();i+=k}}else if("in parens"===j)if(")"===k)i+=k,j="in descriptor";else{if(""===k)return h.push(i),void e();i+=k}else if("after descriptor"===j)if(d(k));else{if(""===k)return void e();j="in descriptor",m-=1}m+=1}}for(var g,h,i,j,k,l=a.length,m=0,n=[];;){if(c(U),m>=l)return n;g=c(V),h=[],","===g.slice(-1)?(g=g.replace(W,""),e()):f()}}function n(a){function b(a){function b(){f&&(g.push(f),f="")}function c(){g[0]&&(h.push(g),g=[])}for(var e,f="",g=[],h=[],i=0,j=0,k=!1;;){if(e=a.charAt(j),""===e)return b(),c(),h;if(k){if("*"===e&&"/"===a[j+1]){k=!1,j+=2,b();continue}j+=1}else{if(d(e)){if(a.charAt(j-1)&&d(a.charAt(j-1))||!f){j+=1;continue}if(0===i){b(),j+=1;continue}e=" "}else if("("===e)i+=1;else if(")"===e)i-=1;else{if(","===e){b(),c(),j+=1;continue}if("/"===e&&"*"===a.charAt(j+1)){k=!0,j+=2;continue}}f+=e,j+=1}}}function c(a){return k.test(a)&&parseFloat(a)>=0?!0:l.test(a)?!0:"0"===a||"-0"===a||"+0"===a?!0:!1}var e,f,g,h,i,j,k=/^(?:[+-]?[0-9]+|[0-9]*\.[0-9]+)(?:[eE][+-]?[0-9]+)?(?:ch|cm|em|ex|in|mm|pc|pt|px|rem|vh|vmin|vmax|vw)$/i,l=/^calc\((?:[0-9a-z \.\+\-\*\/\(\)]+)\)$/i;for(f=b(a),g=f.length,e=0;g>e;e++)if(h=f[e],i=h[h.length-1],c(i)){if(j=i,h.pop(),0===h.length)return j;if(h=h.join(" "),s.matchesMedia(h))return j}return"100vw"}b.createElement("picture");var o,p,q,r,s={},t=!1,u=function(){},v=b.createElement("img"),w=v.getAttribute,x=v.setAttribute,y=v.removeAttribute,z=b.documentElement,A={},B={algorithm:""},C="data-pfsrc",D=C+"set",E=navigator.userAgent,F=/rident/.test(E)||/ecko/.test(E)&&E.match(/rv\:(\d+)/)&&RegExp.$1>35,G="currentSrc",H=/\s+\+?\d+(e\d+)?w/,I=/(\([^)]+\))?\s*(.+)/,J=a.picturefillCFG,K="position:absolute;left:0;visibility:hidden;display:block;padding:0;border:none;font-size:1em;width:1em;overflow:hidden;clip:rect(0px, 0px, 0px, 0px)",L="font-size:100%!important;",M=!0,N={},O={},P=a.devicePixelRatio,Q={px:1,"in":96},R=b.createElement("a"),S=!1,T=/^[ \t\n\r\u000c]+/,U=/^[, \t\n\r\u000c]+/,V=/^[^ \t\n\r\u000c]+/,W=/[,]+$/,X=/^\d+$/,Y=/^-?(?:[0-9]+|[0-9]*\.[0-9]+)(?:[eE][+-]?[0-9]+)?$/,Z=function(a,b,c,d){a.addEventListener?a.addEventListener(b,c,d||!1):a.attachEvent&&a.attachEvent("on"+b,c)},$=function(a){var b={};return function(c){return c in b||(b[c]=a(c)),b[c]}},_=function(){var a=/^([\d\.]+)(em|vw|px)$/,b=function(){for(var a=arguments,b=0,c=a[0];++b in a;)c=c.replace(a[b],a[++b]);return c},c=$(function(a){return"return "+b((a||"").toLowerCase(),/\band\b/g,"&&",/,/g,"||",/min-([a-z-\s]+):/g,"e.$1>=",/max-([a-z-\s]+):/g,"e.$1<=",/calc([^)]+)/g,"($1)",/(\d+[\.]*[\d]*)([a-z]+)/g,"($1 * e.$2)",/^(?!(e.[a-z]|[0-9\.&=|><\+\-\*\(\)\/])).*/gi,"")+";"});return function(b,d){var e;if(!(b in N))if(N[b]=!1,d&&(e=b.match(a)))N[b]=e[1]*Q[e[2]];else try{N[b]=new Function("e",c(b))(Q)}catch(f){}return N[b]}}(),aa=function(a,b){return a.w?(a.cWidth=s.calcListLength(b||"100vw"),a.res=a.w/a.cWidth):a.res=a.d,a},ba=function(a){if(t){var c,d,e,f=a||{};if(f.elements&&1===f.elements.nodeType&&("IMG"===f.elements.nodeName.toUpperCase()?f.elements=[f.elements]:(f.context=f.elements,f.elements=null)),c=f.elements||s.qsa(f.context||b,f.reevaluate||f.reselect?s.sel:s.selShort),e=c.length){for(s.setupRun(f),S=!0,d=0;e>d;d++)s.fillImg(c[d],f);s.teardownRun(f)}}};o=a.console&&console.warn?function(a){console.warn(a)}:u,G in v||(G="src"),A["image/jpeg"]=!0,A["image/gif"]=!0,A["image/png"]=!0,A["image/svg+xml"]=b.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1"),s.ns=("pf"+(new Date).getTime()).substr(0,9),s.supSrcset="srcset"in v,s.supSizes="sizes"in v,s.supPicture=!!a.HTMLPictureElement,s.supSrcset&&s.supPicture&&!s.supSizes&&!function(a){v.srcset="data:,a",a.src="data:,a",s.supSrcset=v.complete===a.complete,s.supPicture=s.supSrcset&&s.supPicture}(b.createElement("img")),s.supSrcset&&!s.supSizes?!function(){var a="data:image/gif;base64,R0lGODlhAgABAPAAAP///wAAACH5BAAAAAAALAAAAAACAAEAAAICBAoAOw==",c="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",d=b.createElement("img"),e=function(){var a=d.width;2===a&&(s.supSizes=!0),q=s.supSrcset&&!s.supSizes,t=!0,setTimeout(ba)};d.onload=e,d.onerror=e,d.setAttribute("sizes","9px"),d.srcset=c+" 1w,"+a+" 9w",d.src=c}():t=!0,s.selShort="picture>img,img[srcset]",s.sel=s.selShort,s.cfg=B,s.DPR=P||1,s.u=Q,s.types=A,s.setSize=u,s.makeUrl=$(function(a){return R.href=a,R.href}),s.qsa=function(a,b){return"querySelector"in a?a.querySelectorAll(b):[]},s.matchesMedia=function(){return a.matchMedia&&(matchMedia("(min-width: 0.1em)")||{}).matches?s.matchesMedia=function(a){return!a||matchMedia(a).matches}:s.matchesMedia=s.mMQ,s.matchesMedia.apply(this,arguments)},s.mMQ=function(a){return a?_(a):!0},s.calcLength=function(a){var b=_(a,!0)||!1;return 0>b&&(b=!1),b},s.supportsType=function(a){return a?A[a]:!0},s.parseSize=$(function(a){var b=(a||"").match(I);return{media:b&&b[1],length:b&&b[2]}}),s.parseSet=function(a){return a.cands||(a.cands=m(a.srcset,a)),a.cands},s.getEmValue=function(){var a;if(!p&&(a=b.body)){var c=b.createElement("div"),d=z.style.cssText,e=a.style.cssText;c.style.cssText=K,z.style.cssText=L,a.style.cssText=L,a.appendChild(c),p=c.offsetWidth,a.removeChild(c),p=parseFloat(p,10),z.style.cssText=d,a.style.cssText=e}return p||16},s.calcListLength=function(a){if(!(a in O)||B.uT){var b=s.calcLength(n(a));O[a]=b?b:Q.width}return O[a]},s.setRes=function(a){var b;if(a){b=s.parseSet(a);for(var c=0,d=b.length;d>c;c++)aa(b[c],a.sizes)}return b},s.setRes.res=aa,s.applySetCandidate=function(a,b){if(a.length){var c,d,e,f,h,k,l,m,n,o=b[s.ns],p=s.DPR;if(k=o.curSrc||b[G],l=o.curCan||j(b,k,a[0].set),l&&l.set===a[0].set&&(n=F&&!b.complete&&l.res-.1>p,n||(l.cached=!0,l.res>=p&&(h=l))),!h)for(a.sort(i),f=a.length,h=a[f-1],d=0;f>d;d++)if(c=a[d],c.res>=p){e=d-1,h=a[e]&&(n||k!==s.makeUrl(c.url))&&g(a[e].res,c.res,p,a[e].cached)?a[e]:c;break}h&&(m=s.makeUrl(h.url),o.curSrc=m,o.curCan=h,m!==k&&s.setSrc(b,h),s.setSize(b))}},s.setSrc=function(a,b){var c;a.src=b.url,"image/svg+xml"===b.set.type&&(c=a.style.width,a.style.width=a.offsetWidth+1+"px",a.offsetWidth+1&&(a.style.width=c))},s.getSet=function(a){var b,c,d,e=!1,f=a[s.ns].sets;for(b=0;bf?c=setTimeout(e,b-f):(c=null,a())};return function(){d=new Date,c||(c=setTimeout(e,b))}},h=z.clientHeight,i=function(){M=Math.max(a.innerWidth||0,z.clientWidth)!==Q.width||z.clientHeight!==h,h=z.clientHeight,M&&s.fillImgs()};Z(a,"resize",g(i,99)),Z(b,"readystatechange",e)}(),s.picturefill=ba,s.fillImgs=ba,s.teardownRun=u,ba._=s,a.picturefillCFG={pf:s,push:function(a){var b=a.shift();"function"==typeof s[b]?s[b].apply(s,a):(B[b]=a[0],S&&s.fillImgs({reselect:!0}))}};for(;J&&J.length;)a.picturefillCFG.push(J.shift());a.picturefill=ba,"object"==typeof module&&"object"==typeof module.exports?module.exports=ba:"function"==typeof define&&define.amd&&define("picturefill",function(){return ba}),s.supPicture||(A["image/webp"]=e("image/webp","data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAABBxAR/Q9ERP8DAABWUDggGAAAADABAJ0BKgEAAQADADQlpAADcAD++/1QAA=="))}(window,document); /** * focus-ring.js * クリック時に`.focus-ring`を付与します。 * 以下のように指定することでクリック時だけの（`:focus`は含まない）スタイルを指定することができます。 * .selector:focus:not(.focus-ring) {} * @see https://github.com/WICG/focus-ring */ $(function() { (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory() : typeof define === 'function' && define.amd ? define(factory) : (factory()); }(this, (function () { 'use strict'; /** * Module export * * @param {Element} el * @return {ClassList} */ var index = function (el) { return new ClassList(el); }; /** * Initialize a new ClassList for the given element * * @param {Element} el DOM Element */ function ClassList(el) { if (!el || el.nodeType !== 1) { throw new Error('A DOM Element reference is required'); } this.el = el; this.classList = el.classList; } /** * Check token validity * * @param token * @param [method] */ function checkToken(token, method) { method = method || 'a method'; if (typeof token != 'string') { throw new TypeError( 'Failed to execute \'' + method + '\' on \'ClassList\': ' + 'the token provided (\'' + token + '\') is not a string.' ); } if (token === "") { throw new SyntaxError( 'Failed to execute \'' + method + '\' on \'ClassList\': ' + 'the token provided must not be empty.' ); } if (/\s/.test(token)) { throw new Error( 'Failed to execute \'' + method + '\' on \'ClassList\': ' + 'the token provided (\'' + token + '\') contains HTML space ' + 'characters, which are not valid in tokens.' ); } } /** * Return an array of the class names on the element. * * @return {Array} */ ClassList.prototype.toArray = function () { var str = (this.el.getAttribute('class') || '').replace(/^\s+|\s+$/g, ''); var classes = str.split(/\s+/); if ('' === classes[0]) { classes.shift(); } return classes; }; /** * Add the given `token` to the class list if it's not already present. * * @param {String} token */ ClassList.prototype.add = function (token) { var classes, index, updated; checkToken(token, 'add'); if (this.classList) { this.classList.add(token); } else { // fallback classes = this.toArray(); index = classes.indexOf(token); if (index === -1) { classes.push(token); this.el.setAttribute('class', classes.join(' ')); } } return; }; /** * Check if the given `token` is in the class list. * * @param {String} token * @return {Boolean} */ ClassList.prototype.contains = function (token) { checkToken(token, 'contains'); return this.classList ? this.classList.contains(token) : this.toArray().indexOf(token) > -1; }; /** * Remove any class names that match the given `token`, when present. * * @param {String|RegExp} token */ ClassList.prototype.remove = function (token) { var arr, classes, i, index, len; if ('[object RegExp]' == Object.prototype.toString.call(token)) { arr = this.toArray(); for (i = 0, len = arr.length; i < len; i++) { if (token.test(arr[i])) { this.remove(arr[i]); } } } else { checkToken(token, 'remove'); if (this.classList) { this.classList.remove(token); } else { // fallback classes = this.toArray(); index = classes.indexOf(token); if (index > -1) { classes.splice(index, 1); this.el.setAttribute('class', classes.join(' ')); } } } return; }; /** * Toggle the `token` in the class list. Optionally force state via `force`. * * Native `classList` is not used as some browsers that support `classList` do * not support `force`. Avoiding `classList` altogether keeps this function * simple. * * @param {String} token * @param {Boolean} [force] * @return {Boolean} */ ClassList.prototype.toggle = function (token, force) { checkToken(token, 'toggle'); var hasToken = this.contains(token); var method = hasToken ? (force !== true && 'remove') : (force !== false && 'add'); if (method) { this[method](token); } return (typeof force == 'boolean' ? force : !hasToken); }; /** * https://github.com/WICG/focus-ring */ function init() { var hadKeyboardEvent = false; var elWithFocusRing; var inputTypesWhitelist = { 'text': true, 'search': true, 'url': true, 'tel': true, 'email': true, 'password': true, 'number': true, 'date': true, 'month': true, 'week': true, 'time': true, 'datetime': true, 'datetime-local': true, }; /** * Computes whether the given element should automatically trigger the * `focus-ring` class being added, i.e. whether it should always match * `:focus-ring` when focused. * @param {Element} el * @return {boolean} */ function focusTriggersKeyboardModality(el) { var type = el.type; var tagName = el.tagName; if (tagName == 'INPUT' && inputTypesWhitelist[type] && !el.readonly) return true; if (tagName == 'TEXTAREA' && !el.readonly) return true; if (el.contentEditable == 'true') return true; return false; } /** * Add the `focus-ring` class to the given element if it was not added by * the author. * @param {Element} el */ function addFocusRingClass(el) { if (index(el).contains('focus-ring')) return; index(el).add('focus-ring'); el.setAttribute('data-focus-ring-added', ''); } /** * Remove the `focus-ring` class from the given element if it was not * originally added by the author. * @param {Element} el */ function removeFocusRingClass(el) { if (!el.hasAttribute('data-focus-ring-added')) return; index(el).remove('focus-ring'); el.removeAttribute('data-focus-ring-added'); } /** * On `keydown`, set `hadKeyboardEvent`, add `focus-ring` class if the * key was Tab. * @param {Event} e */ function onKeyDown(e) { if (e.altKey || e.ctrlKey || e.metaKey) return; if (e.keyCode != 9) return; hadKeyboardEvent = true; } /** * On `focus`, add the `focus-ring` class to the target if: * - the target received focus as a result of keyboard navigation * - the event target is an element that will likely require interaction * via the keyboard (e.g. a text box) * @param {Event} e */ function onFocus(e) { if (e.target == document) return; if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target)) { addFocusRingClass(e.target); hadKeyboardEvent = false; } } /** * On `blur`, remove the `focus-ring` class from the target. * @param {Event} e */ function onBlur(e) { if (e.target == document) return; removeFocusRingClass(e.target); } /** * When the window regains focus, restore the focus-ring class to the element * to which it was previously applied. */ function onWindowFocus() { if (document.activeElement == elWithFocusRing) addFocusRingClass(elWithFocusRing); elWithFocusRing = null; } /** * When switching windows, keep track of the focused element if it has a * focus-ring class. */ function onWindowBlur() { if (index(document.activeElement).contains('focus-ring')) { // Keep a reference to the element to which the focus-ring class is applied // so the focus-ring class can be restored to it if the window regains // focus after being blurred. elWithFocusRing = document.activeElement; } } document.addEventListener('keydown', onKeyDown, true); document.addEventListener('focus', onFocus, true); document.addEventListener('blur', onBlur, true); window.addEventListener('focus', onWindowFocus, true); window.addEventListener('blur', onWindowBlur, true); index(document.body).add('js-focus-ring'); } /** * Subscription when the DOM is ready * @param {Function} callback */ function onDOMReady(callback) { var load; if (document.readyState === 'complete') { callback(); } else { var loaded = false; /** * Callback wrapper for check loaded state */ load = function(){ if (!loaded) { loaded = true; callback(); } } // function load() { // if (!loaded) { // loaded = true; // callback(); // } // } document.addEventListener('DOMContentLoaded', load, false); window.addEventListener('load', load, false); } } onDOMReady(init); }))); }()); /** * ブラウザバック時にリロードします。 * 検索結果画面から戻ったときに、検索フォームのサジェストが効かないため。 */ window.onpageshow = function(e) { if (e.persisted) { location.reload(); } }; /** * 指定位置までスクロールするとpageTopボタンが表示されます。 * グローバルフッターが表示されたらfixedが解除されます。 */ function GlobalFooterPageTop() { if($('.st-GlobalFooter_PageTop').length && window.innerWidth >= 768) { var $pageTop = $('.st-GlobalFooter_PageTop'); var offsetTop; if($('.st-Title').length) { offsetTop = $('.st-Title').offset().top; } else { offsetTop = $('main').offset().top; } var GlobalFooterHeight = $('.st-GlobalFooter').outerHeight(); // スクロール位置 var scrollTop = $(document).scrollTop(); // ドキュメント全体の高さ var documentHeight = $(document).innerHeight(); // 表示している画面の高さ var windowHeight = $(window).innerHeight(); // 初期値：pageTopを非表示 $pageTop.attr('aria-hidden', true); // ページタイトルまでスクロールしたら表示 if(scrollTop >= offsetTop && $pageTop.attr('aria-hidden') === 'true') { $pageTop.attr('aria-hidden', false); } // グローバルフッターが見えたら位置固定を解除 if((scrollTop + windowHeight) >= (documentHeight - GlobalFooterHeight)) { $pageTop.addClass('st-GlobalFooter_PageTop-static'); } else { $pageTop.removeClass('st-GlobalFooter_PageTop-static'); } } } GlobalFooterPageTop(); $(window).on('load scroll resize', function() { GlobalFooterPageTop(); }); /** * スムーススクロール。 */ if($('.st-GlobalFooter_PageTop').length) { $('.st-GlobalFooter_PageTop').on('click', function(e) { $('html, body').animate({scrollTop: 0}, 500, 'swing'); e.preventDefault(); }); } /** * ステートメントを触れないようにする。 * `pointer-events`に未対応のブラウザのフォールバック。 */ if($('.st-GlobalHeader_StatementArea').length) { $('.st-GlobalHeader_StatementArea').css('pointer-events', 'none'); } /** * シンクサーチにページ遷移の処理を追加する。 * サジェストをクリックした時、 * またはキーボードで選択した直後にページ遷移させる。 */ function syncsearchPageTransition() { $('.st-SearchButton').on('click', function() { var $contentsBody = $('#SS_Frame').contents().find('body'); // クリックまたはタップした時。 $contentsBody.find('.SS_suggest').on('mouseup', function(evt) { $('.st-SearchForm_Form').submit(); }); // キーボードで選択した時。 $('#SS_searchQuery').on('keypress', function(e){ if(e.which === 13) { $('.st-SearchForm_Form').submit(); } }); }); } syncsearchPageTransition(); /** * 検索結果ページに渡す値を変更する。 * * PC・スマホで渡す値(name=design)が変わる。 * レンスポンシブの場合、値を変える必要がなく処理は不要。 * 前提: 値を変える場合、input[name=design]にjs-syncsearch-valueクラスをつけて、それぞれの値をdata属性で設定しておく。 */ function changeSyncsearchValue() { var $input = $('.js-syncsearch-value[name="design"]'); if ($input.length == 0) { return; } var dataName = (window.innerWidth < 1024) ? 'design-sp' : 'design-pc'; $input.val($input.data(dataName)); } changeSyncsearchValue(); /** * グローバルヘッダー内にあるメインナビゲーションや検索ブロックなどの処理を * まとめています。 */ function GlobalHeader() { // 横幅からスマホかPCかを判定する。 function searchIsSp() { var isSp; var windowWIdth = window.innerWidth; if(windowWIdth >= 1024) { isSp = false; } else { isSp = true; } return isSp; } var isSp = searchIsSp(); // bodyにspかpcのクラス名を付与する。 function addBreakpointClass() { var $targert = $('body'); if(isSp) { $targert.removeClass('pc').addClass('sp'); } else { $targert.removeClass('sp').addClass('pc'); } } addBreakpointClass(); // 要素を変数化 var $toggleButton = $('.st-ToggleButton'); var $globalNavArea = $('.st-GlobalNav_Area'); var $searchButton = $('.st-SearchButton'); var $searchForm = $('.st-SearchForm'); var $searchFormInput = $('.st-SearchForm_Input'); var $globalSiteNavLink = $('.st-GlobalSiteNav_Link'); var $globalSubNavLink = $('.st-GlobalCommonNav_SubLink'); var globalSiteNavSubArea = 'st-GlobalSiteNav_SubArea'; var thisHasNextClass = 'st-GlobalSiteNav_Link-hasChildren'; var $hasNextElement; var $thisNextElement; var documentClose = 'js-documentClose'; var $globalNavNavClose = $('.st-GlobalNav_NavClose'); var $globalNavSearchClose = $('.st-GlobalNav_SearchClose'); var animateSpeed = 400; var $globalCommonNavLink = $('.st-GlobalCommonNav_Link'); var $globalCommonNavSubArea = $('.st-GlobalCommonNav_SubArea'); // st-GlobalSiteNav（categorySecond） // ARIAなどを動的に付与する。 function addAttrSiteNavLink() { $globalSiteNavLink.each(function(i) { var $thisLink = $(this); var hasNextElement = false; var navId = i + 1; if($thisLink.next('.' + globalSiteNavSubArea).length) { hasNextElement = true; $hasNextElement = $thisLink; $thisNextElement = $thisLink.next('.' + globalSiteNavSubArea); if(!isSp) { $thisNextElement.each(function() { $(this).css({ 'width': $(window).innerWidth() }) .hide(); }); } } if(hasNextElement) { $thisLink.attr({ 'aria-expanded': 'false', 'aria-controls': globalSiteNavSubArea + navId }).addClass(thisHasNextClass).addClass(documentClose); $thisNextElement.attr({ 'aria-hidden': true, 'id': globalSiteNavSubArea + navId }); } }); } addAttrSiteNavLink(); // aria属性などを付与する。 $toggleButton.attr({ 'aria-controls': 'st-GlobalNav_Area', 'aria-expanded': false }); $globalNavArea.css({ display: 'none' }); if(isSp) { $globalNavArea.attr('aria-hidden', true).css('display', 'none'); } else { $globalNavArea.attr('aria-hidden', false).css('display', ''); } $searchButton.attr({ 'aria-controls': 'st-SearchForm', 'aria-expanded': false }); $searchForm.attr({ 'aria-hidden': true }).css('width', $(window).innerWidth()); $globalCommonNavLink.attr({ 'aria-expanded': 'false', 'aria-controls': 'st-GlobalCommonNav_SubArea' }); $globalCommonNavSubArea.attr({ 'id': 'st-GlobalCommonNav_Link' }); if(isSp) { $globalCommonNavSubArea.attr('aria-hidden', true); } else { $globalCommonNavSubArea.attr('aria-hidden', false); } // ドキュメントクリック対象外の要素にクラスを付与する。 $toggleButton.addClass(documentClose); $('.st-ToggleButton_Icon').addClass(documentClose); $searchButton.addClass(documentClose); $('.st-SearchButton_Icon').addClass(documentClose); $searchForm.addClass(documentClose); $searchFormInput.addClass(documentClose); $('.st-SearchForm_Submit').addClass(documentClose); $('.' + globalSiteNavSubArea).addClass(documentClose); $('.st-GlobalSiteNav_SubAreaInner').addClass(documentClose); $('.st-GlobalSiteNav_SubAreaInner').find('.st-Grid').addClass(documentClose); $('.st-GlobalSiteNav_SubAreaInner').find('.st-Grid_Item').addClass(documentClose); $('.st-GlobalSiteNav_SubList').addClass(documentClose); $('.st-GlobalSiteNav_SubLink').addClass(documentClose); $('.st-GlobalSiteNav_SubLinkTitle').addClass(documentClose); $globalSiteNavLink.addClass(documentClose); $('.st-GlobalSiteNav_LinkIcon').addClass(documentClose); $globalCommonNavLink.addClass(documentClose); $('.st-GlobalCommonNav_LinkIcon').addClass(documentClose); $('.st-GlobalSiteNav_SubLinkTopInner').addClass(documentClose); $('.st-GlobalSiteNav_SubLinkTopIcon').addClass(documentClose); $('.st-GlobalSiteNav_DivisionTitle').addClass(documentClose); // クリック時の処理を関数化 // ドキュメントを固定 function fixedScreen() { $('html, body').css({ 'width': '100%', 'height': '100%', 'overflow': 'hidden', 'position': 'fixed', 'top': '0', 'left': '0' }); } // ドキュメントの固定を解除 function cancelFixedScreen() { $('html, body').css({ 'width': '', 'height': '', 'overflow': '', 'position': '', 'top': '', 'left': '' }); } // Closeボタンをすべて非表示にする function hideCloseButtons() { $globalNavNavClose.attr('aria-hidden', 'true'); $globalNavSearchClose.attr('aria-hidden', 'true'); } // ハンバーガーメニューを開く function showhumbergerMenu() { $toggleButton.attr('aria-expanded', true); $globalNavArea.attr('aria-hidden', false); setTimeout(function() { $globalNavArea.css('height', 'calc(100vh + 64px)'); }, 500) } // ハンバーガーメニューを閉じる function hideHumbergerMenu() { if(isSp) { $toggleButton.attr('aria-expanded', false); $globalNavArea.attr('aria-hidden', true); $globalNavArea.css('height', $(window).outerHeight() + 64); } else { $toggleButton.attr('aria-expanded', false); } } // 検索フォームを開く function showSearchMenu() { $searchButton.attr('aria-expanded', true); $searchForm.attr('aria-hidden', false).slideDown(animateSpeed); $globalNavSearchClose.attr('aria-hidden', false); $searchFormInput.focus(); } // 検索フォームを閉じる function hideSearchMenu() { $searchButton.attr('aria-expanded', false); $searchForm.attr('aria-hidden', true).slideUp(animateSpeed); } // サブメニューをすべて閉じる function hideAllMenu(animate) { var animate = typeof animate !== 'undefined' ? animate : 400; $globalSiteNavLink.attr('aria-expanded', false); $('.' + globalSiteNavSubArea) .attr('aria-hidden', true) .slideUp(animate, function() { $(this).children().hide(); }); } // ハンバーガーメニューの展開 $toggleButton.on('click', function() { // 閉じている場合 if($(this).attr('aria-expanded') === 'false') { fixedScreen(); hideSearchMenu(); showhumbergerMenu(); $globalNavArea.slideDown(animateSpeed); } else { cancelFixedScreen(); hideHumbergerMenu(); $globalNavArea.slideUp(animateSpeed); } }); // 検索フォームの展開 $searchButton.click(function() { // 開く場合 if($(this).attr('aria-expanded') === 'false') { if(isSp) { fixedScreen(); hideHumbergerMenu(); $globalNavArea.slideUp(0); } else { hideAllMenu(); hideCloseButtons(); cancelFixedScreen(); } showSearchMenu(); } else { // 閉じる場合 if(isSp) { cancelFixedScreen(); } hideSearchMenu(); $globalNavSearchClose.attr('aria-hidden', true); } }); $('.st-SearchForm_Input').on('keydown', function(e) { // Tabキーを押したら、Closeボタンにフォーカスする。 if(e.which === 9) { $globalNavSearchClose.focus().addClass('focus-ring'); return false; } }); $globalNavSearchClose.on('keydown', function(e) { // Enterとスペースキーを押すと検索フォームのドロップダウンボタンにフォーカスする if(e.which === 13 || e.which === 32) { $('.st-SearchButton').focus().addClass('focus-ring'); } // Tabキーを押すと検索フォームにフォーカスする if(e.which === 9) { $('.st-SearchForm_Input').focus().addClass('focus-ring'); return false; } }); // ハンバーガーメニュー内のアコーディオンの展開（SP） var $accordionTrigger = '.sp ' + '.' + thisHasNextClass; $(document).on('click', $accordionTrigger, function(e) { var $thisLink = $(this); var $thisLinkNext = $thisLink.next('.' + globalSiteNavSubArea); function hideSubMenu() { $('.' + thisHasNextClass).attr('aria-expanded', 'false'); $('.' + thisHasNextClass).next('.' + globalSiteNavSubArea).attr('aria-hidden', 'true'); } // 閉じている場合 if($thisLink.attr('aria-expanded') === 'false') { hideSubMenu(); $thisLink.attr('aria-expanded', true); $thisLinkNext.attr('aria-hidden', false).css('display', ''); } else { // 開いている場合 hideSubMenu(); $thisLink.attr('aria-expanded', false); $thisLinkNext.attr('aria-hidden', true); } e.preventDefault(); }); // グローバルメニューの開閉 var $globalNavTrigger = '.pc ' + '.' + thisHasNextClass; $(document).on('click', $globalNavTrigger, function(e) { var $thisLink = $(this); var $controls = $('#' + $thisLink.attr('aria-controls')); var $LinkHasChildren = $('.st-GlobalSiteNav_Link-hasChildren'); var openNav = false; $LinkHasChildren.each(function() { if($(this).attr('aria-expanded') === 'true') { openNav = true; } }); hideCloseButtons(); // 閉じている場合 if($controls.attr('aria-hidden') === 'true') { // 他のナビが開いていたら if(openNav === 'true') { $LinkHasChildren.attr('aria-expanded', false).next('.' + globalSiteNavSubArea).attr('aria-hidden', true); } $LinkHasChildren.next('.' + globalSiteNavSubArea).stop().slideUp(0).children().hide(); hideAllMenu(); $thisLink.attr({ 'aria-expanded': true }); $controls.attr('aria-hidden', false); $globalNavNavClose.attr('aria-hidden', false); hideSearchMenu(); $controls.children().show(); $controls.slideDown(); } else { // 開いている場合 hideAllMenu(); $globalNavNavClose.attr('aria-hidden', true); } e.preventDefault(); }); // クローズボタンを閉じる $globalNavNavClose.on('click', function() { var $thisCloase = $(this); if($thisCloase.attr('aria-hidden') === 'false') { hideAllMenu(); hideSearchMenu(); $globalNavNavClose.attr('aria-hidden', 'true'); } }); // ハンバーガーメニュー内のAbout kyoceta用のアコーディオンの展開 $globalCommonNavLink.on('click', function(e) { // 開く場合 if($globalCommonNavLink.attr('aria-expanded') === 'false') { $globalCommonNavLink.attr('aria-expanded', true); $globalCommonNavSubArea.attr('aria-hidden', false); } else { // 閉じる場合 $globalCommonNavLink.attr('aria-expanded', false); $globalCommonNavSubArea.attr('aria-hidden', true); } e.preventDefault(); }); $(document).on('keydown', function(e) { // 検索ブロックを展開時にEscキーを押すと検索ブロックを閉じる。 var formFlag = false; $('.st-SearchForm').each(function() { if($('.st-SearchForm').attr('aria-hidden') === 'false') { formFlag = true } }); if(formFlag === true && e.which === 27) { // 閉じる場合 if(isSp) { cancelFixedScreen(); } hideSearchMenu(); $globalNavSearchClose.attr('aria-hidden', true); $searchButton.focus().addClass('focus-ring'); formFlag = false; } // メインナビゲーションを展開時にEscキーを押すと検索ブロックを閉じる。 var navFlag = false; $('.st-GlobalSiteNav_Link').each(function() { if($(this).attr('aria-expanded') === 'true') { navFlag = true } }); if(navFlag === true && e.which === 27) { hideAllMenu(); hideCloseButtons(); navFlag = false; } }); $globalNavSearchClose.keydown(function(e) { // 検索ブロックの閉じるボタンでshift + Tabを押すと検索フォームに移動する。 if(e.shiftKey) { if(e.which === 9) { $searchFormInput.focus(); return false; } } }); /** * グローバルナビゲーションがドロップダウンのときの処理 */ function DropGlobalNav() { var $win = $(window); var $dropdown = $('#st-DropGlovalNav'); var $dropdownBtn = $('#st-DropGnavButton'); var $closeBtn = $('.st-GlobalNav_DropGnavClose'); var $searchBtn = $('#st-SearchButton'); var $accordionBtn = $('.st-DropGlobalNav_LinkTop'); var $accordion = $('#st-DropGlovalNav_List'); var $firstLink = $accordion.find('.st-DropGlobalNav_Item').eq(0).find('.st-DropGlobalNav_Link'); var $lastLink = $accordion.find('.st-DropGlobalNav_Item').eq(-2).find('.st-DropGlobalNav_Link'); var slideSpeed = 300; // ドロップダウンが存在しない場合は終了する if(!$dropdownBtn[0]) return false; var EXCLUDED_CLASS = [ // このclassを持つ要素をクリックした時はドロップダウンを閉じない 'st-GlobalNav_Area', 'st-DropGlovalNav', 'st-DropGlobalNav_Item' ]; var flag = { dropdownHidden : true, // PCでドロップダウンが閉じているか accordionHidden : true, // SPでアコーディオンが閉じているか sp : ( window.innerWidth < 1024 )? true: false, // SPかどうか anime : false, // アニメーション処理中か timer : false, // リサイズ用タイマー breakpoint : false // リサイズによりブレークポイントが切り替わったかどうか }; // aria属性を各フラグに応じて変更する var changeAttribute = function(){ $dropdown.attr('aria-hidden', String(flag.dropdownHidden)); $dropdownBtn.attr('aria-expanded', String(!flag.dropdownHidden)); $closeBtn.attr('aria-hidden', String(flag.dropdownHidden)); $accordionBtn.attr('aria-expanded', String(!flag.accordionHidden)); }; // ドロップダウンorアコーディオンの開閉後に呼び出す処理 // フラグと属性を変更し、アニメーションフラグを折る var afterAnimation = function(strings){ if(strings === 'dropdown'){ flag.dropdownHidden = !flag.dropdownHidden; } else { flag.accordionHidden = !flag.accordionHidden; } changeAttribute(); flag.anime = false; } // スライドを閉じる処理 var closeDropdown = function(){ if(!flag.anime){ flag.anime = true; $dropdown.slideUp(slideSpeed, function(){ afterAnimation('dropdown'); }); } }; // ロード時にPC幅の場合は、ドロップダウンメニューを隠しておく if(!flag.sp) $dropdown.hide(); changeAttribute(); // フラグに応じてドロップダウンを開閉する $dropdownBtn.on('click', function(e){ if(!flag.anime){ flag.anime = true; if(flag.dropdownHidden){ $dropdown.slideDown(slideSpeed, function(){ afterAnimation('dropdown'); }); } else { $dropdown.slideUp(slideSpeed, function(){ afterAnimation('dropdown'); }); } } e.preventDefault(); }); // Enterを押した場合は最初のリンクにフォーカスを合わせる $dropdownBtn.on('keydown', function(e) { if(e.which === 13) { setTimeout(function() { $firstLink.focus().addClass('focus-ring'); }); } }); // 最後のリンクでTabキーを押すと閉じるボタンに移動する $firstLink.on('keydown', function(e) { // shift + Tabを押すと前のリンクにフォーカスする if(e.shiftKey) { if(e.which === 9) { $closeBtn.focus().addClass('focus-ring'); return false; } } }); // 最後のリンクでTabキーを押すと閉じるボタンに移動する $lastLink.on('keydown', function(e) { // shift + Tabを押すと前のリンクにフォーカスする if(e.shiftKey) { if(e.which === 9) { $(this).parent().prev().find('a').focus().addClass('focus-ring'); return false; } } // Tabキーを押したら閉じるボタンにフォーカスする if(e.which === 9) { $closeBtn.focus().addClass('focus-ring'); return false; } }); $closeBtn.keydown(function(e) { // 閉じるボタンでshift + Tabを押すと最後のリンクにフォーカスする if(e.shiftKey) { if(e.which === 9) { $lastLink.focus().addClass('focus-ring'); return false; } } // Enterキーを押したらドロップダウンボタンにフォーカスする if(e.which === 13) { setTimeout(function() { $dropdownBtn.focus().addClass('focus-ring'); }); } // Tabキーを押したら最初のリンクにフォーカスする if(e.which === 9) { $firstLink.focus().addClass('focus-ring'); return false; } }); // ナビゲーションを展開中にEscを押すとナビゲーションを閉じる $win.on('keydown', function(e) { var flag = false; if($('#st-DropGlovalNav').attr('aria-hidden') === 'false') { flag = true; } if(flag === true && e.which === 27) { if(!flag.sp){ closeDropdown(); e.preventDefault(); } $dropdownBtn.focus().addClass('focus-ring'); formFlag = false; } if(flag === false && e.which !== 27) { $dropdownBtn.removeClass('focus-ring'); } }); // 閉じるボタンを押したときの処理 $closeBtn.on('click', function(e){ if(!flag.sp){ closeDropdown(); e.preventDefault(); } }); // PC時にエリア外をクリックした場合、ドロップダウンを閉じる $win.on('click', function(e){ var clickedArea = e.target.parentElement.className; clickedArea = clickedArea.split(' '); // 持っているclassが除外リストにあるか確認 if( !flag.dropdownHidden && !flag.anime && !flag.sp ){ flag.hasExcludedClass = false; for( var i=0; i < clickedArea.length; i++ ){ if(EXCLUDED_CLASS.indexOf(clickedArea[i]) !== -1 ) { flag.hasExcludedClass = true; break; } } if(!flag.hasExcludedClass) { closeDropdown(); } } }); // 検索ボタンが開いた場合、ドロップダウンを閉じる $searchBtn.on('click', function(){ if(!flag.dropdownHidden && !flag.anime && !flag.sp) { flag.anime = true; $closeBtn.hide(); $dropdown.slideUp(slideSpeed, function(){ $closeBtn.removeAttr('style'); afterAnimation('dropdown'); }); } }); // スマホの白いアコーディオン $accordionBtn.on('click', function(e){ var $accordionTarget = $('#' + $(this).attr('aria-controls')); if(!flag.anime){ flag.anime = true; if(flag.accordionHidden) { $accordionBtn.attr('aria-expanded', 'true'); $accordionTarget.slideDown(slideSpeed, function(){ afterAnimation('accordion'); }) } else { $accordionTarget.slideUp(slideSpeed, function(){ afterAnimation('accordion'); }); } } e.preventDefault(); }); // ウインドウリサイズの監視 $win.on('resize', function(){ if(flag.timer) clearTimeout(flag.timer); flag.timer = setTimeout(function() { // ウインドウリサイズにより、PC/SPモードが切り替わったかを判定する // flag.breakpointとflag.spの値が等しくない場合は、リサイズ前とモードが違う flag.breakpoint = ( window.innerWidth < 1024 )? true: false; if( flag.sp !== flag.breakpoint ) { if( flag.breakpoint ){ // PC→SPの処理 $dropdown.show(); $accordion.hide(); flag.dropdownHidden = false; flag.accordionHidden = true; changeAttribute(); } else { // SP→PCの処理 $('#st-DropGlovalNav_List').show(); $dropdown.hide(); flag.dropdownHidden = true; changeAttribute(); } } flag.sp = flag.breakpoint; }, 200); }); } DropGlobalNav(); // 指定された要素以外のドキュメントをクリックすると、メニューなどを閉じる。 $(document).click(function(e){ // documentClose以外をクリックした場合はすべてを閉じる if(!$(e.target).is('.' + documentClose)) { hideSearchMenu(); hideHumbergerMenu(); hideAllMenu(); hideCloseButtons(); } }); // リサイズ時に展開するメニューなどに横幅を指定する。 // CSSのcalc()だとスクロールバーの有無で幅が変わってしまうため。 function setDocumentWidth(element) { var $element = $(element); $element.css('width', $(window).innerWidth()); } // スマホとPCで要素の順番を入れ替える。 function moveButtons() { var $buttons = $('.st-GlobalHeader_Buttons'); var $nav = $('.st-GlobalNav'); if(isSp) { $nav.before($buttons); } else { $nav.after($buttons); } } moveButtons(); $(window).resize(function() { isSp = searchIsSp(); setDocumentWidth('.st-SearchForm'); addBreakpointClass(); moveButtons(); $('.st-GlobalSiteNav_SubLinkTop').css('display', ''); $('.st-GlobalSiteNav_SubAreaInner').css('display', ''); // メニューの状態を変更する if(isSp) { $globalNavArea.attr('aria-hidden', true); $globalCommonNavSubArea.attr('aria-hidden', true); setDocumentWidth('.st-GlobalSiteNav_SubArea'); addAttrSiteNavLink(); changeSyncsearchValue(); } else { addAttrSiteNavLink(); cancelFixedScreen(); hideHumbergerMenu(); hideAllMenu(0); setDocumentWidth('.st-GlobalSiteNav_SubArea'); $globalNavArea.attr('aria-hidden', false).css('display', ''); $globalCommonNavSubArea.attr('aria-hidden', false); changeSyncsearchValue(); } }); } GlobalHeader(); }());