<!-- ===== ページ遷移アニメーション：<body> の直後 =====
     黒いパネル（A）とグレーのパネル（B）の2枚 -->
<div id="page-loader" class="pl-overlay" role="status" aria-label="読み込み中">
 <i class="pl-a"></i><i class="pl-b"></i>
</div>

<!-- ===== ページ遷移アニメーション：<head> 内 ここから =====
     流れ（ページを開いたとき）: パネルが画面を覆った状態で始まる
                               → 読み込みが終わったら、グレーのパネル（B）が左へ抜ける
     流れ（リンクを押したとき）: 黒いパネル（A）が右から左へ通り抜け、同時にグレーのパネル（B）が右から入って覆う
                               → 覆いきったら次のページへ移動 → 次のページは、覆った状態から始まってパネルが抜ける
     ・パネル本体（#page-loader）は <body> の直後に置く
     ・クラス名は pl- で始まる（サイトのほかの CSS とぶつからないようにするため） -->
<style>
 /* ===== ここから CSS ===== */
 /* ---- パネルを入れる箱（画面全体に固定。箱そのものは動かない） ---- */
 .pl-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999; /* ★ 重なり順。メニューなど、ほかの要素より必ず前に出す */
  --pl-a: #4A4A4A; /* ★ 色A（黒いパネル。止まらずに右から左へ通り抜ける） */
  --pl-b: #C6C6C6; /* ★ 色B（画面を覆うグレー） */
  --pl-dur: .5s; /* ★ 1枚が動く時間。※ JavaScript の DUR と同じ長さにする */
  --pl-ease: cubic-bezier(.76, 0, .24, 1); /* ★ グレーの動き方 */
 }

 .pl-overlay i {
  position: absolute;
  inset: 0;
  display: block;
 }

 /* 黒いパネル（A）：ふだんは右の外で待機。覆うときだけ、右から左へ通り抜ける。グレーの上を通るので z-index は B より上 */
 .pl-overlay .pl-a {
  background: var(--pl-a);
  z-index: 2;
  transform: translateX(100%);
 }

 /* グレーのパネル（B）：ページを開いたときは、画面を覆った位置から始まる */
 .pl-overlay .pl-b {
  background: var(--pl-b);
  z-index: 1;
 }

 /* ---- 抜ける（読み込みが終わったとき）：グレーのパネル（B）が左へ抜ける ---- */
 .pl-overlay.is-leave .pl-b {
  transform: translateX(-100%);
  transition: transform var(--pl-dur) var(--pl-ease);
 }

 /* ---- 覆う（リンクを押したとき）：黒いパネル（A）が右から左へ通り抜け、同時にグレーのパネル（B）が右から入って覆う ---- */
 .pl-overlay.is-pre i {
  transform: translateX(100%); /* 右の外で待機（アニメなし） */
 }

 .pl-overlay.is-enter i {
  transition: transform var(--pl-dur) var(--pl-ease);
 }

 .pl-overlay.is-enter .pl-a {
  transform: translateX(-100%);
  /* ★ 黒いパネルだけ動き方を緩やかにする。端で時間を使わないので、黒いパネルが画面を覆っている時間が長く見える */
  transition: transform var(--pl-dur) cubic-bezier(.4, 0, .6, 1);
 }

 /* ---- 使っていないとき：見えない・クリックも邪魔しない（次のリンクが押されるまで待機） ---- */
 .pl-overlay.is-hidden {
  visibility: hidden;
  pointer-events: none;
 }

 .pl-overlay.is-hidden i {
  transform: translateX(100%);
 }

 /* 読み込み中・移動中はスクロールさせない（パネルが抜けきったら JavaScript が pl-lock を外す）
    scrollbar-gutter：スクロールバーの幅を常に取っておき、ロックの前後で画面の幅が変わらないようにする */
 html {
  scrollbar-gutter: stable;
 }

 html.pl-lock {
  overflow: hidden;
 }

 /* OS の設定で「視差効果を減らす」のときは、動かさない（すぐ切り替わる） */
 @media (prefers-reduced-motion: reduce) {
  .pl-overlay i {
   transition: none !important;
  }
 }
 /* ===== ここまで CSS ===== */
</style>

<!-- JavaScript が動かない環境では、パネルを出さない（出しっぱなしでページが見えなくなるのを防ぐ） -->
<noscript>
 <style>
  .pl-overlay {
   display: none;
  }
 </style>
</noscript>

<script>
 /* ===== JavaScript =====
    ・ページを開いたとき：読み込み（load）と WAIT_IMAGES の画像が全部そろったら、パネルが抜ける。MIN_SHOW より早くは抜けない。MAX_WAIT を過ぎたら必ず抜ける
    ・リンクを押したとき：サイト内の普通のリンクだけ、パネルで覆ってから次のページへ移動する
    ・「戻る」で戻ってきたとき：パネルを待機の状態に戻す */
 (function () {
  /* ---- 設定 ---- */
  var MIN_SHOW = 500; /* ★ 最低の表示時間（ミリ秒）。読み込みが速くても、この時間はパネルで覆う。0 で読み込み次第すぐ抜ける */
  var MAX_WAIT = 20000; /* ★ 最大の待ち時間（ミリ秒）。読み込みが終わらなくても、これを過ぎたらパネルが抜ける（出しっぱなし防止） */
  var DUR = 500; /* ★ 1枚が動く時間（ミリ秒）。CSS の --pl-dur と同じにする */
  var WAIT_IMAGES = []; /* ★ パネルが抜ける前に読み込みを待つ画像（load のあとで読み込む、スライダーの背景など）。例：['/img/slide-1.jpg']。空なら load だけを待つ */

  var html = document.documentElement;
  var startedAt = Date.now();
  var opened = false; /* パネルが抜け始めたか */
  var leaving = false; /* 次のページへ移動中か */

  html.classList.add('pl-lock'); /* スクロールを止める（パネルが抜けきったら外す） */

  function reduced() {
   return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  }

  function unlock() {
   html.classList.remove('pl-lock');
  }

  function nextFrames(fn) {
   requestAnimationFrame(function () {
    requestAnimationFrame(fn);
   });
  }

  /* ---- パネルが抜ける（読み込みが終わったとき） ---- */
  function open() {
   if (opened) {
    return;
   }
   opened = true;
   var wait = Math.max(0, MIN_SHOW - (Date.now() - startedAt));
   setTimeout(function () {
    var el = document.getElementById('page-loader');
    if (!el) {
     unlock();
     return;
    }
    el.classList.add('is-leave');
    setTimeout(function () {
     if (leaving) {
      return; /* パネルが抜けている途中でリンクを押されたとき：覆う動きを優先する */
     }
     el.classList.remove('is-leave');
     el.classList.add('is-hidden'); /* 見えない状態で待機（次のリンクで、また使う） */
     unlock();
    }, reduced() ? 0 : DUR + 200); /* 抜けきってから隠す（DUR に少し余裕を足す） */
   }, wait);
  }

  /* ---- 覆う（リンクを押したとき）。覆いきったら callback で次のページへ移動 ---- */
  function cover(el, callback) {
   if (reduced()) {
    callback();
    return;
   }
   html.classList.add('pl-lock');
   el.classList.remove('is-hidden', 'is-leave');
   el.classList.add('is-pre'); /* 画面の外で待機（アニメなし） */
   nextFrames(function () {
    el.classList.remove('is-pre');
    el.classList.add('is-enter'); /* 黒いパネル（A）が通り抜け、グレーのパネル（B）が入ってくる */
    setTimeout(callback, DUR + 370); /* 覆いきってから移動する（DUR に少し余裕を足す） */
   });
  }

  /* ---- リンクのクリックを見張る：サイト内の普通のリンクだけ、パネルを挟む ---- */
  document.addEventListener('click', function (e) {
   if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || leaving) {
    return; /* ほかの処理が止めたクリック、別タブで開く操作などは対象外 */
   }
   var a = e.target && e.target.closest ? e.target.closest('a') : null;
   var href = a ? a.getAttribute('href') : null;
   if (!a || !href || href.charAt(0) === '#') {
    return; /* リンクでない・ページ内リンクは対象外 */
   }
   if ((a.target && a.target !== '_self') || a.hasAttribute('download')) {
    return; /* 別タブ・ダウンロードは対象外 */
   }
   var u;
   try {
    u = new URL(a.href, location.href);
   } catch (err) {
    return;
   }
   if (u.origin !== location.origin) {
    return; /* 外部サイト・mailto・tel などは対象外 */
   }
   if (u.pathname === location.pathname && u.search === location.search) {
    return; /* 同じページは対象外 */
   }
   if (/\.(pdf|zip|jpe?g|png|gif|webp|svg|mp4)$/i.test(u.pathname)) {
    return; /* ファイルへのリンクは対象外 */
   }
   var el = document.getElementById('page-loader');
   if (!el) {
    return;
   }
   e.preventDefault();
   leaving = true;
   cover(el, function () {
    location.href = u.href;
   });
  });

  /* 「戻る」で戻ってきたとき（ブラウザが前のページをそのまま復元したとき）：パネルを待機に戻す */
  window.addEventListener('pageshow', function (e) {
   if (e.persisted) {
    var el = document.getElementById('page-loader');
    if (el) {
     el.className = 'pl-overlay is-hidden';
    }
    leaving = false;
    unlock();
   }
  });

  /* ここで待つ：読み込み（load）と WAIT_IMAGES の画像が全部そろったら、パネルが抜ける。画像が読めなかったときも「終わった」とみなす */
  var pending = 1; /* 待っているものの数（まず load の1つ） */

  function oneDone() {
   pending--;
   if (pending <= 0) {
    open();
   }
  }
  for (var i = 0; i < WAIT_IMAGES.length; i++) {
   pending++;
   var im = new Image();
   im.onload = oneDone;
   im.onerror = oneDone;
   im.src = WAIT_IMAGES[i];
  }
  if (document.readyState === 'complete') {
   oneDone();
  } else {
   window.addEventListener('load', oneDone);
  }
  setTimeout(open, MAX_WAIT); /* 保険：時間切れでもパネルが抜ける */
 })();
</script>
<!-- ===== ページ遷移アニメーション：<head> 内 ここまで ===== -->

var WAIT_IMAGES = ['/img/slide-1.jpg']; /* スライダーの1枚目。複数ある場合は ['/img/slide-1.jpg', '/img/slide-2.jpg'] */

/* 変更前 */
if (/\.(pdf|zip|jpe?g|png|gif|webp|svg|mp4)$/i.test(u.pathname)) {
/* 変更後 */
if (/\/wp-admin|\/wp-login|\/wp-json|\.(pdf|zip|jpe?g|png|gif|webp|svg|mp4)$/i.test(u.pathname)) {

var WAIT_IMAGES = <?php echo wp_json_encode( is_front_page() ? array( get_template_directory_uri() . '/img/slide-1.jpg' ) : array() ); ?>; /* トップページだけ、スライダーの1枚目を待つ */