右下から円形に広がるハンバーガーメニューの作り方｜FAB＋2段階アニメーションをCSS×JSで実装【コピペOK】

<!-- ヘッダー（ロゴ＋PCナビのみ。FABはここに置かない） -->
<header class="c-header">
  <div class="c-header__inner">
    <a href="#" class="c-header__logo">LOGO</a>
    <nav class="c-nav" aria-label="グローバルナビゲーション">
      <!-- PC用の横並びナビ（省略） -->
    </nav>
  </div>
</header>

<main class="l-container">
  <!-- メインコンテンツ -->
</main>

<!-- 展開型ナビゲーション背景（右下から円形に広がる） -->
<div class="c-expand-bg" aria-hidden="true"></div>

<!-- 展開型ナビゲーション（第2段階: リンク表示） -->
<nav
  class="c-expand-nav"
  id="c-expand-nav"
  aria-label="展開型ナビゲーション"
  aria-hidden="true"
>
  <ul class="c-expand-nav__list">
    <li class="c-expand-nav__item"><a href="#" class="c-expand-nav__link">TOP</a></li>
    <li class="c-expand-nav__item"><a href="#" class="c-expand-nav__link">ABOUT</a></li>
    <li class="c-expand-nav__item"><a href="#" class="c-expand-nav__link">WORKS</a></li>
    <li class="c-expand-nav__item"><a href="#" class="c-expand-nav__link">BLOG</a></li>
    <li class="c-expand-nav__item"><a href="#" class="c-expand-nav__link">CONTACT</a></li>
  </ul>
</nav>

<!-- FABハンバーガーボタン（右下固定） -->
<button
  class="c-fab"
  type="button"
  aria-label="メニューを開く"
  aria-expanded="false"
  aria-controls="c-expand-nav"
>
  <span class="c-fab__line"></span>
  <span class="c-fab__line"></span>
  <span class="c-fab__line"></span>
</button>

:root {
  /* ===== z-index 階層管理 ===== */
  --z-header:     20; /* ヘッダー背景 */
  --z-overlay:    30; /* 展開背景（オーバーレイとして機能） */
  --z-drawer:     40; /* 展開ナビゲーション */
  --z-floating:   50; /* FABボタン（常に最前面） */
}

.c-fab {
  /* ボタンリセット */
  appearance: none;
  border: none;
  cursor: pointer;

  /* 右下に固定配置 */
  position: fixed;
  bottom: var(--fab-offset);
  right: var(--fab-offset);
  z-index: var(--z-floating);

  /* 円形FABスタイル */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  background-color: var(--fab-bg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
  padding: 0;

  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

@media (any-hover: hover) and (pointer: fine) {
  .c-fab:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.32);
    transform: scale(1.05);
  }
}

/* 1本目: 右上がりの斜線 */
.c-fab.is-active .c-fab__line:nth-child(1) {
  /* 線の高さ(2px) + gap(5px) = 7px（中央線との距離） */
  transform: translateY(7px) rotate(45deg);
}

/* 2本目: 非表示 */
.c-fab.is-active .c-fab__line:nth-child(2) {
  opacity: 0;
}

/* 3本目: 右下がりの斜線 */
.c-fab.is-active .c-fab__line:nth-child(3) {
  /* 線の高さ(2px) + gap(5px) = 7px（中央線との距離） */
  transform: translateY(-7px) rotate(-45deg);
}

.c-expand-bg {
  position: fixed;
  z-index: var(--z-overlay);
  pointer-events: none; /* 背景自体はクリック不可 */

  /* FABボタンの中心を起点に配置 */
  bottom: calc(var(--fab-offset) + var(--fab-size) / 2);
  right: calc(var(--fab-offset) + var(--fab-size) / 2);

  /* 初期状態: サイズ0 */
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: var(--expand-bg);

  /* transformで拡大。中心を右下に固定するためtranslateで調整 */
  transform: translate(50%, 50%) scale(0);
  transition:
    transform var(--expand-transition-bg),
    width 0s,
    height 0s;

  opacity: 0;
}

/* 第1段階: 円形背景が画面全体に広がる */
.c-expand-bg.is-expanding {
  /* 画面の対角線の2倍以上の大きさにして画面全体をカバー */
  width: 300vmax;
  height: 300vmax;
  transform: translate(50%, 50%) scale(1);
  opacity: 1;
}

:root {
  --expand-transition-bg: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 各リンクの初期状態（非表示・下にずれた位置） */
.c-expand-nav__item {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--expand-transition-nav),
    transform var(--expand-transition-nav);
  /* 閉じるときは遅延なしで即座にフェードアウト */
  transition-delay: 0s;
}

/* is-open 時: 表示（元の位置に戻る） */
.c-expand-nav.is-open .c-expand-nav__item {
  opacity: 1;
  transform: translateY(0);
}

/* 各アイテムに遅延を付けてスタッガードアニメーションにする */
.c-expand-nav.is-open .c-expand-nav__item:nth-child(1) {
  transition-delay: calc(var(--expand-item-delay) * 1);
}

.c-expand-nav.is-open .c-expand-nav__item:nth-child(2) {
  transition-delay: calc(var(--expand-item-delay) * 2);
}

.c-expand-nav.is-open .c-expand-nav__item:nth-child(3) {
  transition-delay: calc(var(--expand-item-delay) * 3);
}

.c-expand-nav.is-open .c-expand-nav__item:nth-child(4) {
  transition-delay: calc(var(--expand-item-delay) * 4);
}

.c-expand-nav.is-open .c-expand-nav__item:nth-child(5) {
  transition-delay: calc(var(--expand-item-delay) * 5);
}

/* 閉じるとき: 逆順で縮小 */
.c-expand-bg.is-closing {
  width: 300vmax;
  height: 300vmax;
  transform: translate(50%, 50%) scale(0);
  opacity: 1;
  transition:
    transform var(--expand-transition-bg),
    opacity 0.1s ease 0.4s;
}

/* .c-expand-bg.is-closing の transition 指定のうち、opacity の部分に注目 */
transition:
  transform var(--expand-transition-bg),
  opacity 0.1s ease 0.4s; /* ← ここ：opacity を 0.1s かけて、0.4s 待ってから開始 */

// 2段階展開のタイミング定数
// CSS カスタムプロパティ --expand-transition-bg（0.5s）に合わせる
// CSS 側の値を変更した場合はここも合わせて変更する
const PHASE1_DURATION = 400; // 第1段階（背景展開）の待機時間
const PHASE2_FOCUS_DELAY = 500; // 第2段階完了後のフォーカス移動タイミング

// 閉じるときのタイミング定数
// CSS カスタムプロパティ --expand-transition-nav（0.4s）に合わせる
const CLOSE_NAV_DURATION = 300; // ナビフェードアウト待機時間

// 閉じるときの背景縮小アニメーション待機時間
// CSS カスタムプロパティ --expand-transition-bg: 0.5s に対応
const CLOSE_BG_DURATION = 500;

/**
 * メニューを開く（2段階展開）
 */
function openMenu() {
  if (isAnimating) return;
  isAnimating = true;

  // FABボタンの×変形
  fab.classList.add("is-active");

  // aria 属性更新
  fab.setAttribute("aria-expanded", "true");
  fab.setAttribute("aria-label", "メニューを閉じる");

  // スクロールロック
  document.body.style.overflow = "hidden";

  // === 第1段階: 円形背景アニメーション ===
  expandBg.classList.remove("is-closing");
  expandBg.classList.add("is-expanding");

  // === 第2段階: ナビリンクのフェードイン（第1段階の途中から開始） ===
  setTimeout(function () {
    expandNav.classList.add("is-open");
    expandNav.setAttribute("aria-hidden", "false");

    // ナビ内の最初のフォーカス可能要素にフォーカス移動
    const firstFocusable = expandNav.querySelectorAll(FOCUSABLE_SELECTOR)[0];
    if (firstFocusable) {
      setTimeout(function () {
        firstFocusable.focus();
      }, PHASE2_FOCUS_DELAY);
    }

    isAnimating = false;
  }, PHASE1_DURATION);
}

/**
 * メニューを閉じる（逆順で収納）
 */
function closeMenu() {
  if (isAnimating) return;
  isAnimating = true;

  // === 逆順 第1段階: ナビリンクのフェードアウト ===
  expandNav.classList.remove("is-open");
  expandNav.setAttribute("aria-hidden", "true");

  // === 逆順 第2段階: 円形背景の縮小（ナビ消失後に開始） ===
  setTimeout(function () {
    expandBg.classList.remove("is-expanding");
    expandBg.classList.add("is-closing");

    // FABボタンの3本線復帰
    fab.classList.remove("is-active");

    // aria 属性更新
    fab.setAttribute("aria-expanded", "false");
    fab.setAttribute("aria-label", "メニューを開く");

    // スクロールロック解除
    document.body.style.overflow = "";

    // 閉じアニメーション完了後にクラスをクリーンアップ
    setTimeout(function () {
      expandBg.classList.remove("is-closing");
      expandNav.style.visibility = "";
      isAnimating = false;
    }, CLOSE_BG_DURATION);
  }, CLOSE_NAV_DURATION);
}

if (isAnimating) return;
isAnimating = true;

// メニューを開くとき
document.body.style.overflow = "hidden";

// メニューを閉じるとき
document.body.style.overflow = "";

function trapFocus(e) {
  if (e.key !== "Tab") return;
  if (!expandNav.classList.contains("is-open")) return;

  // FABボタン + 展開ナビ内のフォーカス可能要素を結合
  const navFocusable = Array.from(expandNav.querySelectorAll(FOCUSABLE_SELECTOR));
  const focusableElements = [fab].concat(navFocusable);
  if (focusableElements.length === 0) return;

  const firstElement = focusableElements[0];
  const lastElement = focusableElements[focusableElements.length - 1];

  if (e.shiftKey) {
    if (document.activeElement === firstElement) {
      e.preventDefault();
      lastElement.focus();
    }
  } else {
    if (document.activeElement === lastElement) {
      e.preventDefault();
      firstElement.focus();
    }
  }
}

// キーボード操作（Escape / Tab）を1つのリスナーで統合管理
document.addEventListener("keydown", function (e) {
  // Escape: メニューを閉じてフォーカスを戻す
  if (e.key === "Escape" && expandNav.classList.contains("is-open")) {
    closeMenu();
    // 閉じアニメーション完了後にFABボタンにフォーカスを戻す
    setTimeout(function () {
      fab.focus();
    }, CLOSE_NAV_DURATION + CLOSE_BG_DURATION);
    return;
  }
  // Tab: フォーカストラップ
  if (e.key === "Tab") {
    trapFocus(e);
  }
});

// 画面幅が768px以上になったらメニューを閉じる（縦横回転・リサイズ対応）
const mediaQuery = window.matchMedia("(min-width: 768px)");
mediaQuery.addEventListener("change", function (e) {
  if (e.matches) {
    if (expandNav.classList.contains("is-open")) {
      // アニメーションをスキップして即座に閉じる
      isAnimating = false;
      fab.classList.remove("is-active");
      expandBg.classList.remove("is-expanding", "is-closing");
      expandNav.classList.remove("is-open");
      // ...（aria属性更新・スクロールロック解除）
    }
    expandNav.removeAttribute("aria-hidden");
  } else {
    expandNav.setAttribute("aria-hidden", "true");
  }
});

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>007_hamburger-expand-corner</title>
    <link rel="stylesheet" href="./assets/css/style.css" />
  </head>
  <body>
    <header class="c-header">
      <div class="c-header__inner">
        <!-- ロゴ -->
        <a href="#" class="c-header__logo">LOGO</a>

        <!-- ナビゲーション（PC: 横並び表示） -->
        <nav class="c-nav" aria-label="グローバルナビゲーション">
          <ul class="c-nav__list">
            <li class="c-nav__item"><a href="#" class="c-nav__link">TOP</a></li>
            <li class="c-nav__item"><a href="#" class="c-nav__link">ABOUT</a></li>
            <li class="c-nav__item"><a href="#" class="c-nav__link">WORKS</a></li>
            <li class="c-nav__item"><a href="#" class="c-nav__link">BLOG</a></li>
            <li class="c-nav__item"><a href="#" class="c-nav__link">CONTACT</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <main class="l-container">
      <!-- メインコンテンツをここに -->
    </main>

    <!-- 展開型ナビゲーション背景（右下から円形に広がる） -->
    <div class="c-expand-bg" aria-hidden="true"></div>

    <!-- 展開型ナビゲーション（第2段階: リンク表示） -->
    <nav
      class="c-expand-nav"
      id="c-expand-nav"
      aria-label="展開型ナビゲーション"
      aria-hidden="true"
    >
      <ul class="c-expand-nav__list">
        <li class="c-expand-nav__item"><a href="#" class="c-expand-nav__link">TOP</a></li>
        <li class="c-expand-nav__item"><a href="#" class="c-expand-nav__link">ABOUT</a></li>
        <li class="c-expand-nav__item"><a href="#" class="c-expand-nav__link">WORKS</a></li>
        <li class="c-expand-nav__item"><a href="#" class="c-expand-nav__link">BLOG</a></li>
        <li class="c-expand-nav__item"><a href="#" class="c-expand-nav__link">CONTACT</a></li>
      </ul>
    </nav>

    <!-- FABハンバーガーボタン（右下固定） -->
    <button
      class="c-fab"
      type="button"
      aria-label="メニューを開く"
      aria-expanded="false"
      aria-controls="c-expand-nav"
    >
      <span class="c-fab__line"></span>
      <span class="c-fab__line"></span>
      <span class="c-fab__line"></span>
    </button>

    <script src="./assets/js/script.js" defer></script>
  </body>
</html>

/* ================================================
   カスタムプロパティ
   ================================================ */
:root {
  --header-height-sp: 60px;
  --header-height-pc: 72px;

  /* FABボタン */
  --fab-size: 56px;
  --fab-offset: 24px; /* 右下からのオフセット */
  --fab-bg: #1a1a1a;
  --fab-bg-active: #1a1a1a;

  /* 展開背景 */
  --expand-bg: #1a1a1a;
  --expand-transition-bg: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --expand-transition-nav: 0.4s ease;
  --expand-item-delay: 0.08s;

  /* ===== z-index 階層管理 ===== */
  --z-header:     20; /* ヘッダー背景 */
  --z-overlay:    30; /* 展開背景（オーバーレイとして機能） */
  --z-drawer:     40; /* 展開ナビゲーション */
  --z-floating:   50; /* FABボタン（常に最前面） */
}

/* ================================================
   c-header: ヘッダー全体
   ================================================ */
.c-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.c-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: calc(1200px + 20px * 2);
  margin-inline: auto;
  padding-inline: 20px;
  height: var(--header-height-sp);
}

@media (min-width: 768px) {
  .c-header__inner {
    padding-inline: 40px;
    height: var(--header-height-pc);
  }
}

.c-header__logo {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  .c-header__logo {
    font-size: 24px;
  }
}

/* ================================================
   c-nav: PCナビゲーション（横並び）
   ================================================ */
.c-nav {
  /* モバイル: 非表示 */
  display: none;
}

@media (min-width: 768px) {
  /* PC: 常に表示（横並び） */
  .c-nav {
    display: block;
  }
}

.c-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .c-nav__list {
    display: flex;
    gap: 32px;
  }
}

.c-nav__link {
  display: block;
  padding: 0;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}

@media (any-hover: hover) and (pointer: fine) {
  .c-nav__link:hover {
    color: #0066cc;
  }
}

/* ================================================
   c-fab: FABスタイル ハンバーガーボタン（右下固定）
   ================================================ */
.c-fab {
  /* ボタンリセット */
  appearance: none;
  border: none;
  cursor: pointer;

  /* 右下に固定配置 */
  position: fixed;
  bottom: var(--fab-offset);
  right: var(--fab-offset);
  z-index: var(--z-floating); /* FABは常に最前面 */

  /* 円形FABスタイル */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  background-color: var(--fab-bg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
  padding: 0;

  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

@media (any-hover: hover) and (pointer: fine) {
  .c-fab:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.32);
    transform: scale(1.05);
  }
}

/* メニュー展開時: FABの背景色を変更 */
.c-fab.is-active {
  background-color: var(--fab-bg-active);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* FABの1本線 */
.c-fab__line {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #fff;
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

/* ×（バツ）アニメーション */
.c-fab.is-active .c-fab__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.c-fab.is-active .c-fab__line:nth-child(2) {
  opacity: 0;
}

.c-fab.is-active .c-fab__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* PCでもFABを表示する（ポートフォリオ向けのクリエイティブUIとして） */
/* 必要に応じて以下のコメントを外してPCでは非表示にできる */
/*
@media (min-width: 768px) {
  .c-fab {
    display: none;
  }
}
*/

/* ================================================
   c-expand-bg: 展開背景（右下から円形に広がるアニメーション）
   ================================================ */
.c-expand-bg {
  position: fixed;
  z-index: var(--z-overlay);
  pointer-events: none;

  /* FABボタンの中心を起点に配置 */
  bottom: calc(var(--fab-offset) + var(--fab-size) / 2);
  right: calc(var(--fab-offset) + var(--fab-size) / 2);

  /* 初期状態: 小さな円 */
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: var(--expand-bg);

  /* transformで拡大。中心を右下に固定するためtranslateで調整 */
  transform: translate(50%, 50%) scale(0);
  transition:
    transform var(--expand-transition-bg),
    width 0s,
    height 0s;

  opacity: 0;
}

/* 第1段階: 円形背景が画面全体に広がる */
.c-expand-bg.is-expanding {
  width: 300vmax;
  height: 300vmax;
  transform: translate(50%, 50%) scale(1);
  opacity: 1;
}

/* 閉じるとき: 逆順で縮小 */
.c-expand-bg.is-closing {
  width: 300vmax;
  height: 300vmax;
  transform: translate(50%, 50%) scale(0);
  opacity: 1;
  transition:
    transform var(--expand-transition-bg),
    opacity 0.1s ease 0.4s;
}

/* ================================================
   c-expand-nav: 展開型ナビゲーション
   ================================================ */
.c-expand-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);

  display: flex;
  align-items: center;
  justify-content: center;

  /* 初期状態: 非表示 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--expand-transition-nav),
    visibility var(--expand-transition-nav);
}

/* 第2段階: ナビリンクがフェードイン */
.c-expand-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (min-width: 768px) {
  /* PCで非表示にしたい場合は以下のコメントを外す */
  /*
  .c-expand-nav {
    display: none;
  }
  */
}

/* ================================================
   c-expand-nav__list / item / link: メニューリスト
   ================================================ */
.c-expand-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

/* 各リンクの初期状態（非表示・下にずれた位置） */
.c-expand-nav__item {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--expand-transition-nav),
    transform var(--expand-transition-nav);
  /* 閉じるときは遅延なしで即座にフェードアウト */
  transition-delay: 0s;
}

/* is-open 時: 表示（元の位置に戻る） */
.c-expand-nav.is-open .c-expand-nav__item {
  opacity: 1;
  transform: translateY(0);
}

/* 各アイテムに遅延を付けてスタッガードアニメーションにする */
.c-expand-nav.is-open .c-expand-nav__item:nth-child(1) {
  transition-delay: calc(var(--expand-item-delay) * 1);
}

.c-expand-nav.is-open .c-expand-nav__item:nth-child(2) {
  transition-delay: calc(var(--expand-item-delay) * 2);
}

.c-expand-nav.is-open .c-expand-nav__item:nth-child(3) {
  transition-delay: calc(var(--expand-item-delay) * 3);
}

.c-expand-nav.is-open .c-expand-nav__item:nth-child(4) {
  transition-delay: calc(var(--expand-item-delay) * 4);
}

.c-expand-nav.is-open .c-expand-nav__item:nth-child(5) {
  transition-delay: calc(var(--expand-item-delay) * 5);
}

.c-expand-nav__link {
  display: block;
  padding: 16px 32px;
  color: #fff;
  text-decoration: none;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.1em;
  transition: color 0.2s ease;
}

@media (min-width: 768px) {
  .c-expand-nav__link {
    font-size: 36px;
    padding: 20px 40px;
  }
}

@media (any-hover: hover) and (pointer: fine) {
  .c-expand-nav__link:hover {
    color: #6eb5ff;
  }
}

/**
 * 007_hamburger-expand-corner
 * 右下から2段階展開型ハンバーガーメニュー
 */

(function () {
  "use strict";

  // 要素取得
  const fab = document.querySelector(".c-fab");
  const expandBg = document.querySelector(".c-expand-bg");
  const expandNav = document.querySelector(".c-expand-nav");

  if (!fab || !expandBg || !expandNav) return;

  // フォーカス可能な要素のセレクター
  const FOCUSABLE_SELECTOR =
    'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';

  // 2段階展開のタイミング定数（CSSカスタムプロパティの値と合わせる）
  const PHASE1_DURATION = 400; // 第1段階（背景展開）の待機時間
  const PHASE2_FOCUS_DELAY = 500; // 第2段階完了後のフォーカス移動タイミング
  const CLOSE_NAV_DURATION = 300; // ナビフェードアウト待機時間
  const CLOSE_BG_DURATION = 500; // 背景縮小待機時間

  // 展開状態管理
  let isAnimating = false;

  /**
   * メニューを開く（2段階展開）
   */
  function openMenu() {
    if (isAnimating) return;
    isAnimating = true;

    fab.classList.add("is-active");
    fab.setAttribute("aria-expanded", "true");
    fab.setAttribute("aria-label", "メニューを閉じる");

    document.body.style.overflow = "hidden";

    expandBg.classList.remove("is-closing");
    expandBg.classList.add("is-expanding");

    setTimeout(function () {
      expandNav.classList.add("is-open");
      expandNav.setAttribute("aria-hidden", "false");

      const firstFocusable = expandNav.querySelectorAll(FOCUSABLE_SELECTOR)[0];
      if (firstFocusable) {
        setTimeout(function () {
          firstFocusable.focus();
        }, PHASE2_FOCUS_DELAY);
      }

      isAnimating = false;
    }, PHASE1_DURATION);
  }

  /**
   * メニューを閉じる（逆順で収納）
   */
  function closeMenu() {
    if (isAnimating) return;
    isAnimating = true;

    expandNav.classList.remove("is-open");
    expandNav.setAttribute("aria-hidden", "true");

    setTimeout(function () {
      expandBg.classList.remove("is-expanding");
      expandBg.classList.add("is-closing");

      fab.classList.remove("is-active");
      fab.setAttribute("aria-expanded", "false");
      fab.setAttribute("aria-label", "メニューを開く");

      document.body.style.overflow = "";

      setTimeout(function () {
        expandBg.classList.remove("is-closing");
        expandNav.style.visibility = "";
        isAnimating = false;
      }, CLOSE_BG_DURATION);
    }, CLOSE_NAV_DURATION);
  }

  function toggleMenu() {
    const isOpen = fab.classList.contains("is-active");
    if (isOpen) {
      closeMenu();
    } else {
      openMenu();
    }
  }

  /**
   * フォーカストラップ（FAB + 展開ナビ内をループ）
   */
  function trapFocus(e) {
    if (e.key !== "Tab") return;
    if (!expandNav.classList.contains("is-open")) return;

    const navFocusable = Array.from(expandNav.querySelectorAll(FOCUSABLE_SELECTOR));
    const focusableElements = [fab].concat(navFocusable);
    if (focusableElements.length === 0) return;

    const firstElement = focusableElements[0];
    const lastElement = focusableElements[focusableElements.length - 1];

    if (e.shiftKey) {
      if (document.activeElement === firstElement) {
        e.preventDefault();
        lastElement.focus();
      }
    } else {
      if (document.activeElement === lastElement) {
        e.preventDefault();
        firstElement.focus();
      }
    }
  }

  // FABクリック
  fab.addEventListener("click", toggleMenu);

  // キーボード操作（Escape / Tab）
  document.addEventListener("keydown", function (e) {
    if (e.key === "Escape" && expandNav.classList.contains("is-open")) {
      closeMenu();
      setTimeout(function () {
        fab.focus();
      }, CLOSE_NAV_DURATION + CLOSE_BG_DURATION);
      return;
    }
    if (e.key === "Tab") {
      trapFocus(e);
    }
  });

  // 画面幅が768px以上になったらメニューを閉じる
  const mediaQuery = window.matchMedia("(min-width: 768px)");
  mediaQuery.addEventListener("change", function (e) {
    if (e.matches) {
      if (expandNav.classList.contains("is-open")) {
        isAnimating = false;
        fab.classList.remove("is-active");
        expandBg.classList.remove("is-expanding", "is-closing");
        expandNav.classList.remove("is-open");

        fab.setAttribute("aria-expanded", "false");
        fab.setAttribute("aria-label", "メニューを開く");
        expandNav.setAttribute("aria-hidden", "true");

        document.body.style.overflow = "";
      }
      expandNav.removeAttribute("aria-hidden");
    } else {
      expandNav.setAttribute("aria-hidden", "true");
    }
  });
})();