入れ子アコーディオンの作り方｜親と子の二重発火を防ぐスコープガード実装【コピペOK】

<div class="c-accordion" data-accordion id="c-accordion-nested-parent">
  <!-- 親項目 1: 入れ子あり -->
  <div class="c-accordion__item">
    <h2 class="c-accordion__heading">
      <button
        type="button"
        class="c-accordion__header"
        aria-expanded="false"
        aria-controls="c-accordion-nested-parent-1-panel"
        id="c-accordion-nested-parent-1-header"
      >
        <span class="c-accordion__title">アコーディオンの入れ子はどう作るのか？</span>
        <span class="c-accordion__icon" aria-hidden="true"></span>
      </button>
    </h2>
    <div
      class="c-accordion__body"
      id="c-accordion-nested-parent-1-panel"
      hidden
    >
      <div class="c-accordion__content">
        <p>
          親アコーディオンの本文 <code>.c-accordion__body</code> の内側に、もう1つ <code>.c-accordion</code> を入れるだけで作れます。
          以下のサブ質問は、親アコーディオンを開いた時にだけ表示される「ネスト子アコーディオン」です。
          親と子は独立した <code>data-accordion</code> root として扱われ、それぞれにクリックハンドラが仕掛けられます。
        </p>

        <!-- 子アコーディオン（深さ1段階のみ） -->
        <div class="c-accordion c-accordion--child" data-accordion id="c-accordion-nested-child-1">
          <!-- 子項目 1-1 -->
          <div class="c-accordion__item">
            <h3 class="c-accordion__heading">
              <button
                type="button"
                class="c-accordion__header"
                aria-expanded="false"
                aria-controls="c-accordion-nested-child-1-1-panel"
                id="c-accordion-nested-child-1-1-header"
              >
                <span class="c-accordion__title">親と子で <code>data-accordion</code> の値は変える必要がある？</span>
                <span class="c-accordion__icon" aria-hidden="true"></span>
              </button>
            </h3>
            <div
              class="c-accordion__body"
              id="c-accordion-nested-child-1-1-panel"
              hidden
            >
              <div class="c-accordion__content">
                <p>
                  変える必要はありません。親も子も <code>data-accordion</code> を <strong>値なしの共通属性</strong> として付けるだけで動きます。
                  JS 側で各 <code>.c-accordion[data-accordion]</code> を独立した root として取得し、それぞれに個別のクリックハンドラを仕掛けるためです。
                </p>
              </div>
            </div>
          </div>

          <!-- 子項目 1-2 -->
          <div class="c-accordion__item">
            <h3 class="c-accordion__heading">
              <button
                type="button"
                class="c-accordion__header"
                aria-expanded="false"
                aria-controls="c-accordion-nested-child-1-2-panel"
                id="c-accordion-nested-child-1-2-header"
              >
                <span class="c-accordion__title">どこまでネストできる?</span>
                <span class="c-accordion__icon" aria-hidden="true"></span>
              </button>
            </h3>
            <div
              class="c-accordion__body"
              id="c-accordion-nested-child-1-2-panel"
              hidden
            >
              <div class="c-accordion__content">
                <p>
                  技術的にはさらに深くもできますが、UI として読みやすいのは <strong>1段階まで</strong> です。
                  2段以上の入れ子は視覚的な階層が伝わりにくく、操作経路も長くなるため、
                  本実装も「親 → 子の1段階のみ」に絞っています。
                </p>
              </div>
            </div>
          </div>

          <!-- 子項目 1-3 -->
          <div class="c-accordion__item">
            <h3 class="c-accordion__heading">
              <button
                type="button"
                class="c-accordion__header"
                aria-expanded="false"
                aria-controls="c-accordion-nested-child-1-3-panel"
                id="c-accordion-nested-child-1-3-header"
              >
                <span class="c-accordion__title">子の状態は親を閉じても残る?</span>
                <span class="c-accordion__icon" aria-hidden="true"></span>
              </button>
            </h3>
            <div
              class="c-accordion__body"
              id="c-accordion-nested-child-1-3-panel"
              hidden
            >
              <div class="c-accordion__content">
                <p>
                  残ります。親を閉じても子の <code>aria-expanded</code> は変更しないため、
                  親を再度開いた時に子の前回状態（開いていた項目は開いたまま）が復元されます。
                  「親を閉じたら子もすべて閉じる」リセット仕様にしたい場合は別途実装してください。
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- 子アコーディオンここまで -->
      </div>
    </div>
  </div>

  <!-- 親項目 2: 入れ子あり -->
  <div class="c-accordion__item">
    <h2 class="c-accordion__heading">
      <button
        type="button"
        class="c-accordion__header"
        aria-expanded="false"
        aria-controls="c-accordion-nested-parent-2-panel"
        id="c-accordion-nested-parent-2-header"
      >
        <span class="c-accordion__title">親と子のスコープを分ける方法は?</span>
        <span class="c-accordion__icon" aria-hidden="true"></span>
      </button>
    </h2>
    <div
      class="c-accordion__body"
      id="c-accordion-nested-parent-2-panel"
      hidden
    >
      <div class="c-accordion__content">
        <p>
          クリックハンドラ内で、ヘッダーから最も近い <code>.c-accordion</code> が自分の root と一致するかを判定します。
          これにより、親 root のハンドラが子の <code>.c-accordion__header</code> を拾って二重発火する事故を防げます。
        </p>

        <!-- 子アコーディオン（深さ1段階のみ） -->
        <div class="c-accordion c-accordion--child" data-accordion id="c-accordion-nested-child-2">
          <!-- 子項目 2-1 -->
          <div class="c-accordion__item">
            <h3 class="c-accordion__heading">
              <button
                type="button"
                class="c-accordion__header"
                aria-expanded="false"
                aria-controls="c-accordion-nested-child-2-1-panel"
                id="c-accordion-nested-child-2-1-header"
              >
                <span class="c-accordion__title"><code>root.contains(header)</code> ではダメ?</span>
                <span class="c-accordion__icon" aria-hidden="true"></span>
              </button>
            </h3>
            <div
              class="c-accordion__body"
              id="c-accordion-nested-child-2-1-panel"
              hidden
            >
              <div class="c-accordion__content">
                <p>
                  <code>root.contains(header)</code> は親 root が子の <code>.c-accordion__header</code> も <code>true</code> で拾ってしまうため、
                  二重発火を防げません。<code>header.closest(".c-accordion") === root</code> で「ヘッダーが直属する root」を厳密に判定する必要があります。
                </p>
              </div>
            </div>
          </div>

          <!-- 子項目 2-2 -->
          <div class="c-accordion__item">
            <h3 class="c-accordion__heading">
              <button
                type="button"
                class="c-accordion__header"
                aria-expanded="false"
                aria-controls="c-accordion-nested-child-2-2-panel"
                id="c-accordion-nested-child-2-2-header"
              >
                <span class="c-accordion__title">イベントの伝播は止めないの?</span>
                <span class="c-accordion__icon" aria-hidden="true"></span>
              </button>
            </h3>
            <div
              class="c-accordion__body"
              id="c-accordion-nested-child-2-2-panel"
              hidden
            >
              <div class="c-accordion__content">
                <p>
                  止めません。<code>event.stopPropagation()</code> は他の機能（モーダルの外側クリック判定など）に副作用を与えるため、
                  スコープガード方式で「自分の管轄外なら何もしない」と振る舞う方が安全です。
                  子 root の <code>addEventListener</code> 自体は独立しているため、子のクリックは子のハンドラだけで処理されます。
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- 子アコーディオンここまで -->
      </div>
    </div>
  </div>

  <!-- 親項目 3: 入れ子なし -->
  <div class="c-accordion__item">
    <h2 class="c-accordion__heading">
      <button
        type="button"
        class="c-accordion__header"
        aria-expanded="false"
        aria-controls="c-accordion-nested-parent-3-panel"
        id="c-accordion-nested-parent-3-header"
      >
        <span class="c-accordion__title">キーボード操作は親子それぞれ独立する?</span>
        <span class="c-accordion__icon" aria-hidden="true"></span>
      </button>
    </h2>
    <div
      class="c-accordion__body"
      id="c-accordion-nested-parent-3-panel"
      hidden
    >
      <div class="c-accordion__content">
        <p>
          独立します。クリック対象に <code><button type="button"></code> を使っているため、Tab フォーカスは親ヘッダー → 子ヘッダーの順にネイティブな DOM 順で移動し、
          Enter / Space は各ボタンが個別に発火します。スコープガードは「親の click ハンドラから子を見ない」「子の click ハンドラから親を見ない」を実現するためのもので、
          キーボード操作のフォーカス順序や発火タイミング自体には影響しません。
        </p>
        <p>
          なお、親項目を閉じると子のボタンは <code>hidden</code> 配下に入るため Tab フォーカスからも外れます。
          親を再度開けば自然に Tab 順序へ戻ります。
        </p>
      </div>
    </div>
  </div>
</div>

<div class="c-accordion" data-accordion id="c-accordion-nested-parent">
  <!-- 親項目 1: 入れ子あり -->
  <div class="c-accordion__item">
    <h2 class="c-accordion__heading">
      <button
        type="button"
        class="c-accordion__header"
        aria-expanded="false"
        aria-controls="c-accordion-nested-parent-1-panel"
        id="c-accordion-nested-parent-1-header"
      >
        <span class="c-accordion__title">アコーディオンの入れ子はどう作るのか？</span>
        <span class="c-accordion__icon" aria-hidden="true"></span>
      </button>
    </h2>
    <div
      class="c-accordion__body"
      id="c-accordion-nested-parent-1-panel"
      hidden
    >
      <div class="c-accordion__content">
        <p>
          親アコーディオンの本文 <code>.c-accordion__body</code> の内側に、もう1つ <code>.c-accordion</code> を入れるだけで作れます。
          以下のサブ質問は、親アコーディオンを開いた時にだけ表示される「ネスト子アコーディオン」です。
          親と子は独立した <code>data-accordion</code> root として扱われ、それぞれにクリックハンドラが仕掛けられます。
        </p>

        <!-- 子アコーディオン（深さ1段階のみ） -->
        <div class="c-accordion c-accordion--child" data-accordion id="c-accordion-nested-child-1">
          <!-- 子項目 1-1 -->
          <div class="c-accordion__item">
            <h3 class="c-accordion__heading">
              <button
                type="button"
                class="c-accordion__header"
                aria-expanded="false"
                aria-controls="c-accordion-nested-child-1-1-panel"
                id="c-accordion-nested-child-1-1-header"
              >
                <span class="c-accordion__title">親と子で <code>data-accordion</code> の値は変える必要がある？</span>
                <span class="c-accordion__icon" aria-hidden="true"></span>
              </button>
            </h3>
            <div
              class="c-accordion__body"
              id="c-accordion-nested-child-1-1-panel"
              hidden
            >
              <div class="c-accordion__content">
                <p>
                  変える必要はありません。親も子も <code>data-accordion</code> を <strong>値なしの共通属性</strong> として付けるだけで動きます。
                  JS 側で各 <code>.c-accordion[data-accordion]</code> を独立した root として取得し、それぞれに個別のクリックハンドラを仕掛けるためです。
                </p>
              </div>
            </div>
          </div>

          <!-- 子項目 1-2 -->
          <div class="c-accordion__item">
            <h3 class="c-accordion__heading">
              <button
                type="button"
                class="c-accordion__header"
                aria-expanded="false"
                aria-controls="c-accordion-nested-child-1-2-panel"
                id="c-accordion-nested-child-1-2-header"
              >
                <span class="c-accordion__title">どこまでネストできる?</span>
                <span class="c-accordion__icon" aria-hidden="true"></span>
              </button>
            </h3>
            <div
              class="c-accordion__body"
              id="c-accordion-nested-child-1-2-panel"
              hidden
            >
              <div class="c-accordion__content">
                <p>
                  技術的にはさらに深くもできますが、UI として読みやすいのは <strong>1段階まで</strong> です。
                  2段以上の入れ子は視覚的な階層が伝わりにくく、操作経路も長くなるため、
                  本実装も「親 → 子の1段階のみ」に絞っています。
                </p>
              </div>
            </div>
          </div>

          <!-- 子項目 1-3 -->
          <div class="c-accordion__item">
            <h3 class="c-accordion__heading">
              <button
                type="button"
                class="c-accordion__header"
                aria-expanded="false"
                aria-controls="c-accordion-nested-child-1-3-panel"
                id="c-accordion-nested-child-1-3-header"
              >
                <span class="c-accordion__title">子の状態は親を閉じても残る?</span>
                <span class="c-accordion__icon" aria-hidden="true"></span>
              </button>
            </h3>
            <div
              class="c-accordion__body"
              id="c-accordion-nested-child-1-3-panel"
              hidden
            >
              <div class="c-accordion__content">
                <p>
                  残ります。親を閉じても子の <code>aria-expanded</code> は変更しないため、
                  親を再度開いた時に子の前回状態（開いていた項目は開いたまま）が復元されます。
                  「親を閉じたら子もすべて閉じる」リセット仕様にしたい場合は別途実装してください。
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- 子アコーディオンここまで -->
      </div>
    </div>
  </div>

  <!-- 親項目 2: 入れ子あり -->
  <div class="c-accordion__item">
    <h2 class="c-accordion__heading">
      <button
        type="button"
        class="c-accordion__header"
        aria-expanded="false"
        aria-controls="c-accordion-nested-parent-2-panel"
        id="c-accordion-nested-parent-2-header"
      >
        <span class="c-accordion__title">親と子のスコープを分ける方法は?</span>
        <span class="c-accordion__icon" aria-hidden="true"></span>
      </button>
    </h2>
    <div
      class="c-accordion__body"
      id="c-accordion-nested-parent-2-panel"
      hidden
    >
      <div class="c-accordion__content">
        <p>
          クリックハンドラ内で、ヘッダーから最も近い <code>.c-accordion</code> が自分の root と一致するかを判定します。
          これにより、親 root のハンドラが子の <code>.c-accordion__header</code> を拾って二重発火する事故を防げます。
        </p>

        <!-- 子アコーディオン（深さ1段階のみ） -->
        <div class="c-accordion c-accordion--child" data-accordion id="c-accordion-nested-child-2">
          <!-- 子項目 2-1 -->
          <div class="c-accordion__item">
            <h3 class="c-accordion__heading">
              <button
                type="button"
                class="c-accordion__header"
                aria-expanded="false"
                aria-controls="c-accordion-nested-child-2-1-panel"
                id="c-accordion-nested-child-2-1-header"
              >
                <span class="c-accordion__title"><code>root.contains(header)</code> ではダメ?</span>
                <span class="c-accordion__icon" aria-hidden="true"></span>
              </button>
            </h3>
            <div
              class="c-accordion__body"
              id="c-accordion-nested-child-2-1-panel"
              hidden
            >
              <div class="c-accordion__content">
                <p>
                  <code>root.contains(header)</code> は親 root が子の <code>.c-accordion__header</code> も <code>true</code> で拾ってしまうため、
                  二重発火を防げません。<code>header.closest(".c-accordion") === root</code> で「ヘッダーが直属する root」を厳密に判定する必要があります。
                </p>
              </div>
            </div>
          </div>

          <!-- 子項目 2-2 -->
          <div class="c-accordion__item">
            <h3 class="c-accordion__heading">
              <button
                type="button"
                class="c-accordion__header"
                aria-expanded="false"
                aria-controls="c-accordion-nested-child-2-2-panel"
                id="c-accordion-nested-child-2-2-header"
              >
                <span class="c-accordion__title">イベントの伝播は止めないの?</span>
                <span class="c-accordion__icon" aria-hidden="true"></span>
              </button>
            </h3>
            <div
              class="c-accordion__body"
              id="c-accordion-nested-child-2-2-panel"
              hidden
            >
              <div class="c-accordion__content">
                <p>
                  止めません。<code>event.stopPropagation()</code> は他の機能（モーダルの外側クリック判定など）に副作用を与えるため、
                  スコープガード方式で「自分の管轄外なら何もしない」と振る舞う方が安全です。
                  子 root の <code>addEventListener</code> 自体は独立しているため、子のクリックは子のハンドラだけで処理されます。
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- 子アコーディオンここまで -->
      </div>
    </div>
  </div>

  <!-- 親項目 3: 入れ子なし -->
  <div class="c-accordion__item">
    <h2 class="c-accordion__heading">
      <button
        type="button"
        class="c-accordion__header"
        aria-expanded="false"
        aria-controls="c-accordion-nested-parent-3-panel"
        id="c-accordion-nested-parent-3-header"
      >
        <span class="c-accordion__title">キーボード操作は親子それぞれ独立する?</span>
        <span class="c-accordion__icon" aria-hidden="true"></span>
      </button>
    </h2>
    <div
      class="c-accordion__body"
      id="c-accordion-nested-parent-3-panel"
      hidden
    >
      <div class="c-accordion__content">
        <p>
          独立します。クリック対象に <code><button type="button"></code> を使っているため、Tab フォーカスは親ヘッダー → 子ヘッダーの順にネイティブな DOM 順で移動し、
          Enter / Space は各ボタンが個別に発火します。スコープガードは「親の click ハンドラから子を見ない」「子の click ハンドラから親を見ない」を実現するためのもので、
          キーボード操作のフォーカス順序や発火タイミング自体には影響しません。
        </p>
        <p>
          なお、親項目を閉じると子のボタンは <code>hidden</code> 配下に入るため Tab フォーカスからも外れます。
          親を再度開けば自然に Tab 順序へ戻ります。
        </p>
      </div>
    </div>
  </div>
</div>

<!-- 親項目 -->
<h2 class="c-accordion__heading">
  <button type="button" class="c-accordion__header" ...>...</button>
</h2>

<!-- 子項目（親の本文の中に置く） -->
<h3 class="c-accordion__heading">
  <button type="button" class="c-accordion__header" ...>...</button>
</h3>

<!-- 親項目 -->
<h2 class="c-accordion__heading">
  <button type="button" class="c-accordion__header" ...>...</button>
</h2>

<!-- 子項目（親の本文の中に置く） -->
<h3 class="c-accordion__heading">
  <button type="button" class="c-accordion__header" ...>...</button>
</h3>

/* ================================================
   カスタムプロパティ
   共通のトークンセットを継承する（既存値は改変しない）。
   入れ子（ネスト）専用に子アコーディオン用の背景色と
   左インデントの2トークンを追加する。
   命名規則は --accordion-{役割}-{プロパティ} を維持。
   ================================================ */
:root {
  --accordion-color-text:        #2b2b2b;
  --accordion-color-text-muted:  #555;
  --accordion-color-border:      #e0e0e0;
  --accordion-color-bg:          #ffffff;
  --accordion-color-bg-hover:    #f5f7fa;
  --accordion-color-bg-active:   #eef3fa;
  --accordion-color-accent:      #0066cc;
  --accordion-color-focus-ring:  #0066cc;

  --accordion-radius:            8px;
  --accordion-header-padding-y:  16px;
  --accordion-header-padding-x:  20px;
  --accordion-body-padding-y:    16px;
  --accordion-body-padding-x:    20px;

  --accordion-transition:        0.2s ease;

  /* 入れ子用トークン（本実装で追加）
     子アコーディオンを視覚的に区別するための背景色（薄）と
     左インデント幅を一元管理する。 */
  --accordion-color-bg-child:    #f7f9fc;
  --accordion-child-indent:      16px;
}

/* ================================================
   c-accordion: アコーディオン本体
   ================================================ */
.c-accordion {
  border: 1px solid var(--accordion-color-border);
  border-radius: var(--accordion-radius);
  background-color: var(--accordion-color-bg);
  overflow: hidden; /* 角丸を子要素にも適用するため */
}

/* 項目間の区切り線 */
.c-accordion__item + .c-accordion__item {
  border-top: 1px solid var(--accordion-color-border);
}

/* ================================================
   c-accordion__heading: 見出し要素のリセット
   <h2> / <h3> をボタンのラッパーに使うため、見出しの
   デフォルト余白・サイズを打ち消す。
   ================================================ */
.c-accordion__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* ================================================
   c-accordion__header: 開閉ボタン（クリック対象）
   ================================================ */
.c-accordion__header {
  /* ボタンリセット */
  appearance: none;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;

  /* レイアウト */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 44px; /* タップ領域の最低保証（モバイルアクセシビリティ）。
                       padding を変更してもこの最低高さは崩れない。 */
  padding: var(--accordion-header-padding-y) var(--accordion-header-padding-x);

  /* テキスト */
  text-align: left;
  font-size: 16px;
  font-weight: 600;

  /* 状態遷移 */
  background-color: var(--accordion-color-bg);
  transition:
    background-color var(--accordion-transition),
    color var(--accordion-transition);
}

/* マウス系デバイスかつホバー操作が可能な場合のみ適用 */
@media (any-hover: hover) and (pointer: fine) {
  .c-accordion__header:hover {
    background-color: var(--accordion-color-bg-hover);
  }
}

/* キーボードフォーカス時のフォーカスリング
   outline を消さず、視認性の高いリングで上書きする。
   outline-offset は正値（外側）にして、開いた項目の背景色
   （--accordion-color-bg-active）に埋没しないようにする。 */
.c-accordion__header:focus-visible {
  outline: 2px solid var(--accordion-color-focus-ring);
  outline-offset: 2px;
}

/* 開いている項目のヘッダーは背景色を変えて視認性を上げる */
.c-accordion__header[aria-expanded="true"] {
  background-color: var(--accordion-color-bg-active);
  color: var(--accordion-color-accent);
}

/* ================================================
   c-accordion__title: ヘッダー内のタイトルテキスト
   ================================================ */
.c-accordion__title {
  flex: 1;
  min-width: 0; /* テキストが長い場合に折り返せるようにする */
}

/* ================================================
   c-accordion__icon: 開閉インジケータ（▼）
   CSSのみでシェブロンを描画。aria-expanded の値に応じて
   回転させることで開閉状態を視覚的に伝える。
   ================================================ */
.c-accordion__icon {
  flex-shrink: 0;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);            /* 閉じている状態: ▼ */
  transform-origin: center;
  transition: transform var(--accordion-transition);
}

.c-accordion__header[aria-expanded="true"] .c-accordion__icon {
  transform: rotate(-135deg);          /* 開いている状態: ▲ */
}

/* ================================================
   c-accordion__body: 本文パネル
   閉じている状態は <div hidden> 属性で非表示にする。
   ================================================ */
.c-accordion__body {
  background-color: var(--accordion-color-bg);
}

/* ================================================
   c-accordion__content: 本文の余白を持つ内側ラッパー
   外側 __body をコンテナ、内側 __content をコンテンツとして
   分離する2層構造を維持する（共通設計）。
   ================================================ */
.c-accordion__content {
  padding: var(--accordion-body-padding-y) var(--accordion-body-padding-x);
  color: var(--accordion-color-text);
  border-top: 1px solid var(--accordion-color-border);
}

.c-accordion__content > :first-child {
  margin-top: 0;
}

.c-accordion__content > :last-child {
  margin-bottom: 0;
}

.c-accordion__content p {
  margin: 0 0 12px;
}

.c-accordion__content p:last-child {
  margin-bottom: 0;
}

/* ================================================
   c-accordion--child: 子アコーディオン（入れ子）
   本実装で追加。親の本文 __content の中に置かれた
   2つ目以降の .c-accordion を視覚的に区別する。
   - 背景色を薄い --accordion-color-bg-child に変えて
     「親に内包された情報」であることを示す。
   - 左インデント（--accordion-child-indent）で階層を表現。
   - 親本文の末尾に余白を残すため margin-top を持たせる。
   ================================================ */
.c-accordion--child {
  background-color: var(--accordion-color-bg-child);
  margin-top: 16px;
  margin-left: var(--accordion-child-indent);
}

/* 子アコーディオンのヘッダーは背景色を継承して、
   親ヘッダー（白）との差を視覚的に保つ。 */
.c-accordion--child .c-accordion__header {
  background-color: var(--accordion-color-bg-child);
}

@media (any-hover: hover) and (pointer: fine) {
  .c-accordion--child .c-accordion__header:hover {
    background-color: var(--accordion-color-bg-hover);
  }
}

/* 子の開状態は親と同じアクセント色（--accordion-color-bg-active）を使う。
   背景色のコントラストで開状態の項目が見つけやすくなる。 */
.c-accordion--child .c-accordion__header[aria-expanded="true"] {
  background-color: var(--accordion-color-bg-active);
  color: var(--accordion-color-accent);
}

/* 子アコーディオンの本文 __body / __content も背景色を継承する */
.c-accordion--child .c-accordion__body {
  background-color: var(--accordion-color-bg-child);
}

/* ================================================
   prefers-reduced-motion: 動きを減らす設定への配慮
   前庭機能障害等で OS の「視差効果を減らす」を有効に
   しているユーザーに対し、transition を無効化する。
   ================================================ */
@media (prefers-reduced-motion: reduce) {
  .c-accordion__header,
  .c-accordion__icon {
    transition: none;
  }
}

/* ================================================
   カスタムプロパティ
   共通のトークンセットを継承する（既存値は改変しない）。
   入れ子（ネスト）専用に子アコーディオン用の背景色と
   左インデントの2トークンを追加する。
   命名規則は --accordion-{役割}-{プロパティ} を維持。
   ================================================ */
:root {
  --accordion-color-text:        #2b2b2b;
  --accordion-color-text-muted:  #555;
  --accordion-color-border:      #e0e0e0;
  --accordion-color-bg:          #ffffff;
  --accordion-color-bg-hover:    #f5f7fa;
  --accordion-color-bg-active:   #eef3fa;
  --accordion-color-accent:      #0066cc;
  --accordion-color-focus-ring:  #0066cc;

  --accordion-radius:            8px;
  --accordion-header-padding-y:  16px;
  --accordion-header-padding-x:  20px;
  --accordion-body-padding-y:    16px;
  --accordion-body-padding-x:    20px;

  --accordion-transition:        0.2s ease;

  /* 入れ子用トークン（本実装で追加）
     子アコーディオンを視覚的に区別するための背景色（薄）と
     左インデント幅を一元管理する。 */
  --accordion-color-bg-child:    #f7f9fc;
  --accordion-child-indent:      16px;
}

/* ================================================
   c-accordion: アコーディオン本体
   ================================================ */
.c-accordion {
  border: 1px solid var(--accordion-color-border);
  border-radius: var(--accordion-radius);
  background-color: var(--accordion-color-bg);
  overflow: hidden; /* 角丸を子要素にも適用するため */
}

/* 項目間の区切り線 */
.c-accordion__item + .c-accordion__item {
  border-top: 1px solid var(--accordion-color-border);
}

/* ================================================
   c-accordion__heading: 見出し要素のリセット
   <h2> / <h3> をボタンのラッパーに使うため、見出しの
   デフォルト余白・サイズを打ち消す。
   ================================================ */
.c-accordion__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* ================================================
   c-accordion__header: 開閉ボタン（クリック対象）
   ================================================ */
.c-accordion__header {
  /* ボタンリセット */
  appearance: none;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;

  /* レイアウト */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 44px; /* タップ領域の最低保証（モバイルアクセシビリティ）。
                       padding を変更してもこの最低高さは崩れない。 */
  padding: var(--accordion-header-padding-y) var(--accordion-header-padding-x);

  /* テキスト */
  text-align: left;
  font-size: 16px;
  font-weight: 600;

  /* 状態遷移 */
  background-color: var(--accordion-color-bg);
  transition:
    background-color var(--accordion-transition),
    color var(--accordion-transition);
}

/* マウス系デバイスかつホバー操作が可能な場合のみ適用 */
@media (any-hover: hover) and (pointer: fine) {
  .c-accordion__header:hover {
    background-color: var(--accordion-color-bg-hover);
  }
}

/* キーボードフォーカス時のフォーカスリング
   outline を消さず、視認性の高いリングで上書きする。
   outline-offset は正値（外側）にして、開いた項目の背景色
   （--accordion-color-bg-active）に埋没しないようにする。 */
.c-accordion__header:focus-visible {
  outline: 2px solid var(--accordion-color-focus-ring);
  outline-offset: 2px;
}

/* 開いている項目のヘッダーは背景色を変えて視認性を上げる */
.c-accordion__header[aria-expanded="true"] {
  background-color: var(--accordion-color-bg-active);
  color: var(--accordion-color-accent);
}

/* ================================================
   c-accordion__title: ヘッダー内のタイトルテキスト
   ================================================ */
.c-accordion__title {
  flex: 1;
  min-width: 0; /* テキストが長い場合に折り返せるようにする */
}

/* ================================================
   c-accordion__icon: 開閉インジケータ（▼）
   CSSのみでシェブロンを描画。aria-expanded の値に応じて
   回転させることで開閉状態を視覚的に伝える。
   ================================================ */
.c-accordion__icon {
  flex-shrink: 0;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);            /* 閉じている状態: ▼ */
  transform-origin: center;
  transition: transform var(--accordion-transition);
}

.c-accordion__header[aria-expanded="true"] .c-accordion__icon {
  transform: rotate(-135deg);          /* 開いている状態: ▲ */
}

/* ================================================
   c-accordion__body: 本文パネル
   閉じている状態は <div hidden> 属性で非表示にする。
   ================================================ */
.c-accordion__body {
  background-color: var(--accordion-color-bg);
}

/* ================================================
   c-accordion__content: 本文の余白を持つ内側ラッパー
   外側 __body をコンテナ、内側 __content をコンテンツとして
   分離する2層構造を維持する（共通設計）。
   ================================================ */
.c-accordion__content {
  padding: var(--accordion-body-padding-y) var(--accordion-body-padding-x);
  color: var(--accordion-color-text);
  border-top: 1px solid var(--accordion-color-border);
}

.c-accordion__content > :first-child {
  margin-top: 0;
}

.c-accordion__content > :last-child {
  margin-bottom: 0;
}

.c-accordion__content p {
  margin: 0 0 12px;
}

.c-accordion__content p:last-child {
  margin-bottom: 0;
}

/* ================================================
   c-accordion--child: 子アコーディオン（入れ子）
   本実装で追加。親の本文 __content の中に置かれた
   2つ目以降の .c-accordion を視覚的に区別する。
   - 背景色を薄い --accordion-color-bg-child に変えて
     「親に内包された情報」であることを示す。
   - 左インデント（--accordion-child-indent）で階層を表現。
   - 親本文の末尾に余白を残すため margin-top を持たせる。
   ================================================ */
.c-accordion--child {
  background-color: var(--accordion-color-bg-child);
  margin-top: 16px;
  margin-left: var(--accordion-child-indent);
}

/* 子アコーディオンのヘッダーは背景色を継承して、
   親ヘッダー（白）との差を視覚的に保つ。 */
.c-accordion--child .c-accordion__header {
  background-color: var(--accordion-color-bg-child);
}

@media (any-hover: hover) and (pointer: fine) {
  .c-accordion--child .c-accordion__header:hover {
    background-color: var(--accordion-color-bg-hover);
  }
}

/* 子の開状態は親と同じアクセント色（--accordion-color-bg-active）を使う。
   背景色のコントラストで開状態の項目が見つけやすくなる。 */
.c-accordion--child .c-accordion__header[aria-expanded="true"] {
  background-color: var(--accordion-color-bg-active);
  color: var(--accordion-color-accent);
}

/* 子アコーディオンの本文 __body / __content も背景色を継承する */
.c-accordion--child .c-accordion__body {
  background-color: var(--accordion-color-bg-child);
}

/* ================================================
   prefers-reduced-motion: 動きを減らす設定への配慮
   前庭機能障害等で OS の「視差効果を減らす」を有効に
   しているユーザーに対し、transition を無効化する。
   ================================================ */
@media (prefers-reduced-motion: reduce) {
  .c-accordion__header,
  .c-accordion__icon {
    transition: none;
  }
}

<div class="c-accordion c-accordion--child" data-accordion id="c-accordion-nested-child-1">
  <!-- 子項目たち -->
</div>

<div class="c-accordion c-accordion--child" data-accordion id="c-accordion-nested-child-1">
  <!-- 子項目たち -->
</div>

/**
 * バニラJS + ARIA対応アコーディオン（入れ子・ネスト対応）
 *
 * 設計方針（共通実装を継承）:
 * - ルート要素 .c-accordion[data-accordion] に対してイベント委譲する。
 *   親アコーディオンと子アコーディオンはそれぞれ独立した root として
 *   取得し、bindAccordion を個別に仕掛ける（イベント委譲をネストごとに分離）。
 * - 開閉状態は aria-expanded 属性を真実の源（single source of truth）とし、
 *   CSSは [aria-expanded="true"] セレクタで見た目を切り替える。
 *   余分な is-open クラスは付与しない。
 * - 本文の表示/非表示は HTML の hidden 属性で制御する（JS が落ちた場合の
 *   フォールバックとして閉状態が HTML 単体で読み取れる）。
 * - setItemState(header, open) を経由して aria-expanded と hidden を
 *   同時更新するため、状態が必ず一致する（共通シグネチャ）。
 *
 * 本実装の核（入れ子対策）:
 * - bindAccordion 内のクリックハンドラに
 *   `header.closest(".c-accordion") !== root` のスコープガードを入れて、
 *   親ハンドラが子の header を拾って二重発火することを防ぐ。
 *   `root.contains(header)` では親が子の header を true で拾うため、
 *   `closest` で「ヘッダーが直属する root」を厳密に判定する必要がある。
 * - collectHeaders(root) でも同様に `header.closest(".c-accordion") === root`
 *   のガードを入れ、root 直下のヘッダーだけに絞り込む。
 * - 親項目を閉じた時に子の aria-expanded はリセットしない
 *   （親を再度開いた時に子の前回状態が復元される設計）。
 *
 * 親と子の data-accordion 属性は値なしの共通属性として扱う
 * （closest(".c-accordion") ベースのスコープガードが機能するため、
 *  親子で属性値を分ける必要はない）。
 */

(function () {
  "use strict";

  // 親 / 子に関わらず .c-accordion[data-accordion] を全て取得し、
  // 各 root に対して bindAccordion を仕掛ける。
  // 親の root と子の root は別物として扱われるため、それぞれのハンドラが
  // 独立した root を持つ（同一 click イベントが両方で発火しないよう
  // bindAccordion 内でスコープガードを入れる）。
  const accordionRoots = document.querySelectorAll(".c-accordion[data-accordion]");

  if (accordionRoots.length === 0) return;

  /**
   * 1つのヘッダーボタンの開閉状態を「指定の状態」に揃える。
   * 共通シグネチャ。
   *
   * @param {HTMLButtonElement} header - 対象のヘッダーボタン
   * @param {boolean} open - true で開く、false で閉じる
   */
  function setItemState(header, open) {
    const panelId = header.getAttribute("aria-controls");
    const panel = panelId ? document.getElementById(panelId) : null;

    if (!panel) return;

    if (open) {
      header.setAttribute("aria-expanded", "true");
      panel.removeAttribute("hidden");
    } else {
      header.setAttribute("aria-expanded", "false");
      panel.setAttribute("hidden", "");
    }
  }

  /**
   * 1つのヘッダーボタンの開閉状態をトグルする（個別クリック用）。
   *
   * @param {HTMLButtonElement} header - クリックされたヘッダーボタン
   */
  function toggleItem(header) {
    const isExpanded = header.getAttribute("aria-expanded") === "true";
    setItemState(header, !isExpanded);
  }

  /**
   * 指定 root 内の全ヘッダーを取得する。
   * 入れ子アコーディオン対策で、対象 root 直下のヘッダーのみを返す。
   * （root.querySelectorAll だけだと子アコーディオンのヘッダーまで拾うため、
   *  closest(".c-accordion") === root のガードで自分の root に直属する
   *  ヘッダーだけに絞り込む。）
   *
   * @param {HTMLElement} root - .c-accordion[data-accordion] 要素
   * @returns {HTMLButtonElement[]}
   */
  function collectHeaders(root) {
    const candidates = root.querySelectorAll(".c-accordion__header");
    const result = [];
    candidates.forEach(function (header) {
      if (header.closest(".c-accordion") === root) {
        result.push(header);
      }
    });
    return result;
  }

  /**
   * ルート要素1つに対してイベント委譲を仕掛ける。
   * 親 root と子 root の両方で呼ばれ、それぞれが独立したハンドラを持つ。
   *
   * @param {HTMLElement} root - .c-accordion[data-accordion] 要素
   */
  function bindAccordion(root) {
    root.addEventListener("click", function (event) {
      const header = event.target.closest(".c-accordion__header");
      if (!header) return;

      // 入れ子対策のスコープガード（親と子の二重発火防止）:
      // ヘッダーから最も近い .c-accordion が「自分自身（root）」でない場合は
      // 子アコーディオンのヘッダーなので処理しない。
      // 子 root のハンドラは別途登録されているため、子のクリックは
      // 子のハンドラだけで処理される。
      if (header.closest(".c-accordion") !== root) return;

      toggleItem(header);
    });
  }

  // collectHeaders は本実装の click 処理では直接呼ばれないが、
  // 後続の拡張（一括操作・排他制御）と API を揃えるためエクスポートに準じた
  // 形で定義しておく（共通シグネチャの維持）。
  void collectHeaders;

  // 全ての root（親も子も）に対して個別にバインドする
  accordionRoots.forEach(bindAccordion);
})();

/**
 * バニラJS + ARIA対応アコーディオン（入れ子・ネスト対応）
 *
 * 設計方針（共通実装を継承）:
 * - ルート要素 .c-accordion[data-accordion] に対してイベント委譲する。
 *   親アコーディオンと子アコーディオンはそれぞれ独立した root として
 *   取得し、bindAccordion を個別に仕掛ける（イベント委譲をネストごとに分離）。
 * - 開閉状態は aria-expanded 属性を真実の源（single source of truth）とし、
 *   CSSは [aria-expanded="true"] セレクタで見た目を切り替える。
 *   余分な is-open クラスは付与しない。
 * - 本文の表示/非表示は HTML の hidden 属性で制御する（JS が落ちた場合の
 *   フォールバックとして閉状態が HTML 単体で読み取れる）。
 * - setItemState(header, open) を経由して aria-expanded と hidden を
 *   同時更新するため、状態が必ず一致する（共通シグネチャ）。
 *
 * 本実装の核（入れ子対策）:
 * - bindAccordion 内のクリックハンドラに
 *   `header.closest(".c-accordion") !== root` のスコープガードを入れて、
 *   親ハンドラが子の header を拾って二重発火することを防ぐ。
 *   `root.contains(header)` では親が子の header を true で拾うため、
 *   `closest` で「ヘッダーが直属する root」を厳密に判定する必要がある。
 * - collectHeaders(root) でも同様に `header.closest(".c-accordion") === root`
 *   のガードを入れ、root 直下のヘッダーだけに絞り込む。
 * - 親項目を閉じた時に子の aria-expanded はリセットしない
 *   （親を再度開いた時に子の前回状態が復元される設計）。
 *
 * 親と子の data-accordion 属性は値なしの共通属性として扱う
 * （closest(".c-accordion") ベースのスコープガードが機能するため、
 *  親子で属性値を分ける必要はない）。
 */

(function () {
  "use strict";

  // 親 / 子に関わらず .c-accordion[data-accordion] を全て取得し、
  // 各 root に対して bindAccordion を仕掛ける。
  // 親の root と子の root は別物として扱われるため、それぞれのハンドラが
  // 独立した root を持つ（同一 click イベントが両方で発火しないよう
  // bindAccordion 内でスコープガードを入れる）。
  const accordionRoots = document.querySelectorAll(".c-accordion[data-accordion]");

  if (accordionRoots.length === 0) return;

  /**
   * 1つのヘッダーボタンの開閉状態を「指定の状態」に揃える。
   * 共通シグネチャ。
   *
   * @param {HTMLButtonElement} header - 対象のヘッダーボタン
   * @param {boolean} open - true で開く、false で閉じる
   */
  function setItemState(header, open) {
    const panelId = header.getAttribute("aria-controls");
    const panel = panelId ? document.getElementById(panelId) : null;

    if (!panel) return;

    if (open) {
      header.setAttribute("aria-expanded", "true");
      panel.removeAttribute("hidden");
    } else {
      header.setAttribute("aria-expanded", "false");
      panel.setAttribute("hidden", "");
    }
  }

  /**
   * 1つのヘッダーボタンの開閉状態をトグルする（個別クリック用）。
   *
   * @param {HTMLButtonElement} header - クリックされたヘッダーボタン
   */
  function toggleItem(header) {
    const isExpanded = header.getAttribute("aria-expanded") === "true";
    setItemState(header, !isExpanded);
  }

  /**
   * 指定 root 内の全ヘッダーを取得する。
   * 入れ子アコーディオン対策で、対象 root 直下のヘッダーのみを返す。
   * （root.querySelectorAll だけだと子アコーディオンのヘッダーまで拾うため、
   *  closest(".c-accordion") === root のガードで自分の root に直属する
   *  ヘッダーだけに絞り込む。）
   *
   * @param {HTMLElement} root - .c-accordion[data-accordion] 要素
   * @returns {HTMLButtonElement[]}
   */
  function collectHeaders(root) {
    const candidates = root.querySelectorAll(".c-accordion__header");
    const result = [];
    candidates.forEach(function (header) {
      if (header.closest(".c-accordion") === root) {
        result.push(header);
      }
    });
    return result;
  }

  /**
   * ルート要素1つに対してイベント委譲を仕掛ける。
   * 親 root と子 root の両方で呼ばれ、それぞれが独立したハンドラを持つ。
   *
   * @param {HTMLElement} root - .c-accordion[data-accordion] 要素
   */
  function bindAccordion(root) {
    root.addEventListener("click", function (event) {
      const header = event.target.closest(".c-accordion__header");
      if (!header) return;

      // 入れ子対策のスコープガード（親と子の二重発火防止）:
      // ヘッダーから最も近い .c-accordion が「自分自身（root）」でない場合は
      // 子アコーディオンのヘッダーなので処理しない。
      // 子 root のハンドラは別途登録されているため、子のクリックは
      // 子のハンドラだけで処理される。
      if (header.closest(".c-accordion") !== root) return;

      toggleItem(header);
    });
  }

  // collectHeaders は本実装の click 処理では直接呼ばれないが、
  // 後続の拡張（一括操作・排他制御）と API を揃えるためエクスポートに準じた
  // 形で定義しておく（共通シグネチャの維持）。
  void collectHeaders;

  // 全ての root（親も子も）に対して個別にバインドする
  accordionRoots.forEach(bindAccordion);
})();

function bindAccordion(root) {
  root.addEventListener("click", function (event) {
    const header = event.target.closest(".c-accordion__header");
    if (!header) return;

    // 入れ子対策のスコープガード
    if (header.closest(".c-accordion") !== root) return;

    toggleItem(header);
  });
}

function bindAccordion(root) {
  root.addEventListener("click", function (event) {
    const header = event.target.closest(".c-accordion__header");
    if (!header) return;

    // 入れ子対策のスコープガード
    if (header.closest(".c-accordion") !== root) return;

    toggleItem(header);
  });
}

function collectHeaders(root) {
  const candidates = root.querySelectorAll(".c-accordion__header");
  const result = [];
  candidates.forEach(function (header) {
    if (header.closest(".c-accordion") === root) {
      result.push(header);
    }
  });
  return result;
}

function collectHeaders(root) {
  const candidates = root.querySelectorAll(".c-accordion__header");
  const result = [];
  candidates.forEach(function (header) {
    if (header.closest(".c-accordion") === root) {
      result.push(header);
    }
  });
  return result;
}

// 親を閉じる時に子もリセットする実装例（差分のイメージ）
if (!open) {
  // 親 .c-accordion__item 配下の子 root を取得
  const childRoot = header.closest(".c-accordion__item").querySelector(".c-accordion--child");
  if (childRoot) {
    collectHeaders(childRoot).forEach(function (h) {
      setItemState(h, false);
    });
  }
}

// 親を閉じる時に子もリセットする実装例（差分のイメージ）
if (!open) {
  // 親 .c-accordion__item 配下の子 root を取得
  const childRoot = header.closest(".c-accordion__item").querySelector(".c-accordion--child");
  if (childRoot) {
    collectHeaders(childRoot).forEach(function (h) {
      setItemState(h, false);
    });
  }
}

<div class="c-accordion" data-accordion id="c-accordion-nested-parent">
  <!-- 親項目 1: 入れ子あり -->
  <div class="c-accordion__item">
    <h2 class="c-accordion__heading">
      <button
        type="button"
        class="c-accordion__header"
        aria-expanded="false"
        aria-controls="c-accordion-nested-parent-1-panel"
        id="c-accordion-nested-parent-1-header"
      >
        <span class="c-accordion__title">アコーディオンの入れ子はどう作るのか?</span>
        <span class="c-accordion__icon" aria-hidden="true"></span>
      </button>
    </h2>
    <div
      class="c-accordion__body"
      id="c-accordion-nested-parent-1-panel"
      hidden
    >
      <div class="c-accordion__content">
        <p>
          親アコーディオンの本文 <code>.c-accordion__body</code> の内側に、もう1つ <code>.c-accordion</code> を入れるだけで作れます。
          以下のサブ質問は、親アコーディオンを開いた時にだけ表示される「ネスト子アコーディオン」です。
          親と子は独立した <code>data-accordion</code> root として扱われ、それぞれにクリックハンドラが仕掛けられます。
        </p>

        <!-- 子アコーディオン（深さ1段階のみ） -->
        <div class="c-accordion c-accordion--child" data-accordion id="c-accordion-nested-child-1">
          <!-- 子項目 1-1 -->
          <div class="c-accordion__item">
            <h3 class="c-accordion__heading">
              <button
                type="button"
                class="c-accordion__header"
                aria-expanded="false"
                aria-controls="c-accordion-nested-child-1-1-panel"
                id="c-accordion-nested-child-1-1-header"
              >
                <span class="c-accordion__title">親と子で <code>data-accordion</code> の値は変える必要がある?</span>
                <span class="c-accordion__icon" aria-hidden="true"></span>
              </button>
            </h3>
            <div
              class="c-accordion__body"
              id="c-accordion-nested-child-1-1-panel"
              hidden
            >
              <div class="c-accordion__content">
                <p>
                  変える必要はありません。親も子も <code>data-accordion</code> を <strong>値なしの共通属性</strong> として付けるだけで動きます。
                  JS 側で各 <code>.c-accordion[data-accordion]</code> を独立した root として取得し、それぞれに個別のクリックハンドラを仕掛けるためです。
                </p>
              </div>
            </div>
          </div>

          <!-- 子項目 1-2 -->
          <div class="c-accordion__item">
            <h3 class="c-accordion__heading">
              <button
                type="button"
                class="c-accordion__header"
                aria-expanded="false"
                aria-controls="c-accordion-nested-child-1-2-panel"
                id="c-accordion-nested-child-1-2-header"
              >
                <span class="c-accordion__title">どこまでネストできる?</span>
                <span class="c-accordion__icon" aria-hidden="true"></span>
              </button>
            </h3>
            <div
              class="c-accordion__body"
              id="c-accordion-nested-child-1-2-panel"
              hidden
            >
              <div class="c-accordion__content">
                <p>
                  技術的にはさらに深くもできますが、UI として読みやすいのは <strong>1段階まで</strong> です。
                  2段以上の入れ子は視覚的な階層が伝わりにくく、操作経路も長くなるため、
                  本実装も「親 → 子の1段階のみ」に絞っています。
                </p>
              </div>
            </div>
          </div>

          <!-- 子項目 1-3 -->
          <div class="c-accordion__item">
            <h3 class="c-accordion__heading">
              <button
                type="button"
                class="c-accordion__header"
                aria-expanded="false"
                aria-controls="c-accordion-nested-child-1-3-panel"
                id="c-accordion-nested-child-1-3-header"
              >
                <span class="c-accordion__title">子の状態は親を閉じても残る?</span>
                <span class="c-accordion__icon" aria-hidden="true"></span>
              </button>
            </h3>
            <div
              class="c-accordion__body"
              id="c-accordion-nested-child-1-3-panel"
              hidden
            >
              <div class="c-accordion__content">
                <p>
                  残ります。親を閉じても子の <code>aria-expanded</code> は変更しないため、
                  親を再度開いた時に子の前回状態（開いていた項目は開いたまま）が復元されます。
                  「親を閉じたら子もすべて閉じる」リセット仕様にしたい場合は別途実装してください。
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- 子アコーディオンここまで -->
      </div>
    </div>
  </div>

  <!-- 親項目 2: 入れ子あり -->
  <div class="c-accordion__item">
    <h2 class="c-accordion__heading">
      <button
        type="button"
        class="c-accordion__header"
        aria-expanded="false"
        aria-controls="c-accordion-nested-parent-2-panel"
        id="c-accordion-nested-parent-2-header"
      >
        <span class="c-accordion__title">親と子のスコープを分ける方法は?</span>
        <span class="c-accordion__icon" aria-hidden="true"></span>
      </button>
    </h2>
    <div
      class="c-accordion__body"
      id="c-accordion-nested-parent-2-panel"
      hidden
    >
      <div class="c-accordion__content">
        <p>
          クリックハンドラ内で、ヘッダーから最も近い <code>.c-accordion</code> が自分の root と一致するかを判定します。
          これにより、親 root のハンドラが子の <code>.c-accordion__header</code> を拾って二重発火する事故を防げます。
        </p>

        <!-- 子アコーディオン（深さ1段階のみ） -->
        <div class="c-accordion c-accordion--child" data-accordion id="c-accordion-nested-child-2">
          <!-- 子項目 2-1 -->
          <div class="c-accordion__item">
            <h3 class="c-accordion__heading">
              <button
                type="button"
                class="c-accordion__header"
                aria-expanded="false"
                aria-controls="c-accordion-nested-child-2-1-panel"
                id="c-accordion-nested-child-2-1-header"
              >
                <span class="c-accordion__title"><code>root.contains(header)</code> ではダメ?</span>
                <span class="c-accordion__icon" aria-hidden="true"></span>
              </button>
            </h3>
            <div
              class="c-accordion__body"
              id="c-accordion-nested-child-2-1-panel"
              hidden
            >
              <div class="c-accordion__content">
                <p>
                  <code>root.contains(header)</code> は親 root が子の <code>.c-accordion__header</code> も <code>true</code> で拾ってしまうため、
                  二重発火を防げません。<code>header.closest(".c-accordion") === root</code> で「ヘッダーが直属する root」を厳密に判定する必要があります。
                </p>
              </div>
            </div>
          </div>

          <!-- 子項目 2-2 -->
          <div class="c-accordion__item">
            <h3 class="c-accordion__heading">
              <button
                type="button"
                class="c-accordion__header"
                aria-expanded="false"
                aria-controls="c-accordion-nested-child-2-2-panel"
                id="c-accordion-nested-child-2-2-header"
              >
                <span class="c-accordion__title">イベントの伝播は止めないの?</span>
                <span class="c-accordion__icon" aria-hidden="true"></span>
              </button>
            </h3>
            <div
              class="c-accordion__body"
              id="c-accordion-nested-child-2-2-panel"
              hidden
            >
              <div class="c-accordion__content">
                <p>
                  止めません。<code>event.stopPropagation()</code> は他の機能（モーダルの外側クリック判定など）に副作用を与えるため、
                  スコープガード方式で「自分の管轄外なら何もしない」と振る舞う方が安全です。
                  子 root の <code>addEventListener</code> 自体は独立しているため、子のクリックは子のハンドラだけで処理されます。
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- 子アコーディオンここまで -->
      </div>
    </div>
  </div>

  <!-- 親項目 3: 入れ子なし -->
  <div class="c-accordion__item">
    <h2 class="c-accordion__heading">
      <button
        type="button"
        class="c-accordion__header"
        aria-expanded="false"
        aria-controls="c-accordion-nested-parent-3-panel"
        id="c-accordion-nested-parent-3-header"
      >
        <span class="c-accordion__title">キーボード操作は親子それぞれ独立する?</span>
        <span class="c-accordion__icon" aria-hidden="true"></span>
      </button>
    </h2>
    <div
      class="c-accordion__body"
      id="c-accordion-nested-parent-3-panel"
      hidden
    >
      <div class="c-accordion__content">
        <p>
          独立します。クリック対象に <code><button type="button"></code> を使っているため、Tab フォーカスは親ヘッダー → 子ヘッダーの順にネイティブな DOM 順で移動し、
          Enter / Space は各ボタンが個別に発火します。スコープガードは「親の click ハンドラから子を見ない」「子の click ハンドラから親を見ない」を実現するためのもので、
          キーボード操作のフォーカス順序や発火タイミング自体には影響しません。
        </p>
        <p>
          なお、親項目を閉じると子のボタンは <code>hidden</code> 配下に入るため Tab フォーカスからも外れます。
          親を再度開けば自然に Tab 順序へ戻ります。
        </p>
      </div>
    </div>
  </div>
</div>

<div class="c-accordion" data-accordion id="c-accordion-nested-parent">
  <!-- 親項目 1: 入れ子あり -->
  <div class="c-accordion__item">
    <h2 class="c-accordion__heading">
      <button
        type="button"
        class="c-accordion__header"
        aria-expanded="false"
        aria-controls="c-accordion-nested-parent-1-panel"
        id="c-accordion-nested-parent-1-header"
      >
        <span class="c-accordion__title">アコーディオンの入れ子はどう作るのか?</span>
        <span class="c-accordion__icon" aria-hidden="true"></span>
      </button>
    </h2>
    <div
      class="c-accordion__body"
      id="c-accordion-nested-parent-1-panel"
      hidden
    >
      <div class="c-accordion__content">
        <p>
          親アコーディオンの本文 <code>.c-accordion__body</code> の内側に、もう1つ <code>.c-accordion</code> を入れるだけで作れます。
          以下のサブ質問は、親アコーディオンを開いた時にだけ表示される「ネスト子アコーディオン」です。
          親と子は独立した <code>data-accordion</code> root として扱われ、それぞれにクリックハンドラが仕掛けられます。
        </p>

        <!-- 子アコーディオン（深さ1段階のみ） -->
        <div class="c-accordion c-accordion--child" data-accordion id="c-accordion-nested-child-1">
          <!-- 子項目 1-1 -->
          <div class="c-accordion__item">
            <h3 class="c-accordion__heading">
              <button
                type="button"
                class="c-accordion__header"
                aria-expanded="false"
                aria-controls="c-accordion-nested-child-1-1-panel"
                id="c-accordion-nested-child-1-1-header"
              >
                <span class="c-accordion__title">親と子で <code>data-accordion</code> の値は変える必要がある?</span>
                <span class="c-accordion__icon" aria-hidden="true"></span>
              </button>
            </h3>
            <div
              class="c-accordion__body"
              id="c-accordion-nested-child-1-1-panel"
              hidden
            >
              <div class="c-accordion__content">
                <p>
                  変える必要はありません。親も子も <code>data-accordion</code> を <strong>値なしの共通属性</strong> として付けるだけで動きます。
                  JS 側で各 <code>.c-accordion[data-accordion]</code> を独立した root として取得し、それぞれに個別のクリックハンドラを仕掛けるためです。
                </p>
              </div>
            </div>
          </div>

          <!-- 子項目 1-2 -->
          <div class="c-accordion__item">
            <h3 class="c-accordion__heading">
              <button
                type="button"
                class="c-accordion__header"
                aria-expanded="false"
                aria-controls="c-accordion-nested-child-1-2-panel"
                id="c-accordion-nested-child-1-2-header"
              >
                <span class="c-accordion__title">どこまでネストできる?</span>
                <span class="c-accordion__icon" aria-hidden="true"></span>
              </button>
            </h3>
            <div
              class="c-accordion__body"
              id="c-accordion-nested-child-1-2-panel"
              hidden
            >
              <div class="c-accordion__content">
                <p>
                  技術的にはさらに深くもできますが、UI として読みやすいのは <strong>1段階まで</strong> です。
                  2段以上の入れ子は視覚的な階層が伝わりにくく、操作経路も長くなるため、
                  本実装も「親 → 子の1段階のみ」に絞っています。
                </p>
              </div>
            </div>
          </div>

          <!-- 子項目 1-3 -->
          <div class="c-accordion__item">
            <h3 class="c-accordion__heading">
              <button
                type="button"
                class="c-accordion__header"
                aria-expanded="false"
                aria-controls="c-accordion-nested-child-1-3-panel"
                id="c-accordion-nested-child-1-3-header"
              >
                <span class="c-accordion__title">子の状態は親を閉じても残る?</span>
                <span class="c-accordion__icon" aria-hidden="true"></span>
              </button>
            </h3>
            <div
              class="c-accordion__body"
              id="c-accordion-nested-child-1-3-panel"
              hidden
            >
              <div class="c-accordion__content">
                <p>
                  残ります。親を閉じても子の <code>aria-expanded</code> は変更しないため、
                  親を再度開いた時に子の前回状態（開いていた項目は開いたまま）が復元されます。
                  「親を閉じたら子もすべて閉じる」リセット仕様にしたい場合は別途実装してください。
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- 子アコーディオンここまで -->
      </div>
    </div>
  </div>

  <!-- 親項目 2: 入れ子あり -->
  <div class="c-accordion__item">
    <h2 class="c-accordion__heading">
      <button
        type="button"
        class="c-accordion__header"
        aria-expanded="false"
        aria-controls="c-accordion-nested-parent-2-panel"
        id="c-accordion-nested-parent-2-header"
      >
        <span class="c-accordion__title">親と子のスコープを分ける方法は?</span>
        <span class="c-accordion__icon" aria-hidden="true"></span>
      </button>
    </h2>
    <div
      class="c-accordion__body"
      id="c-accordion-nested-parent-2-panel"
      hidden
    >
      <div class="c-accordion__content">
        <p>
          クリックハンドラ内で、ヘッダーから最も近い <code>.c-accordion</code> が自分の root と一致するかを判定します。
          これにより、親 root のハンドラが子の <code>.c-accordion__header</code> を拾って二重発火する事故を防げます。
        </p>

        <!-- 子アコーディオン（深さ1段階のみ） -->
        <div class="c-accordion c-accordion--child" data-accordion id="c-accordion-nested-child-2">
          <!-- 子項目 2-1 -->
          <div class="c-accordion__item">
            <h3 class="c-accordion__heading">
              <button
                type="button"
                class="c-accordion__header"
                aria-expanded="false"
                aria-controls="c-accordion-nested-child-2-1-panel"
                id="c-accordion-nested-child-2-1-header"
              >
                <span class="c-accordion__title"><code>root.contains(header)</code> ではダメ?</span>
                <span class="c-accordion__icon" aria-hidden="true"></span>
              </button>
            </h3>
            <div
              class="c-accordion__body"
              id="c-accordion-nested-child-2-1-panel"
              hidden
            >
              <div class="c-accordion__content">
                <p>
                  <code>root.contains(header)</code> は親 root が子の <code>.c-accordion__header</code> も <code>true</code> で拾ってしまうため、
                  二重発火を防げません。<code>header.closest(".c-accordion") === root</code> で「ヘッダーが直属する root」を厳密に判定する必要があります。
                </p>
              </div>
            </div>
          </div>

          <!-- 子項目 2-2 -->
          <div class="c-accordion__item">
            <h3 class="c-accordion__heading">
              <button
                type="button"
                class="c-accordion__header"
                aria-expanded="false"
                aria-controls="c-accordion-nested-child-2-2-panel"
                id="c-accordion-nested-child-2-2-header"
              >
                <span class="c-accordion__title">イベントの伝播は止めないの?</span>
                <span class="c-accordion__icon" aria-hidden="true"></span>
              </button>
            </h3>
            <div
              class="c-accordion__body"
              id="c-accordion-nested-child-2-2-panel"
              hidden
            >
              <div class="c-accordion__content">
                <p>
                  止めません。<code>event.stopPropagation()</code> は他の機能（モーダルの外側クリック判定など）に副作用を与えるため、
                  スコープガード方式で「自分の管轄外なら何もしない」と振る舞う方が安全です。
                  子 root の <code>addEventListener</code> 自体は独立しているため、子のクリックは子のハンドラだけで処理されます。
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- 子アコーディオンここまで -->
      </div>
    </div>
  </div>

  <!-- 親項目 3: 入れ子なし -->
  <div class="c-accordion__item">
    <h2 class="c-accordion__heading">
      <button
        type="button"
        class="c-accordion__header"
        aria-expanded="false"
        aria-controls="c-accordion-nested-parent-3-panel"
        id="c-accordion-nested-parent-3-header"
      >
        <span class="c-accordion__title">キーボード操作は親子それぞれ独立する?</span>
        <span class="c-accordion__icon" aria-hidden="true"></span>
      </button>
    </h2>
    <div
      class="c-accordion__body"
      id="c-accordion-nested-parent-3-panel"
      hidden
    >
      <div class="c-accordion__content">
        <p>
          独立します。クリック対象に <code><button type="button"></code> を使っているため、Tab フォーカスは親ヘッダー → 子ヘッダーの順にネイティブな DOM 順で移動し、
          Enter / Space は各ボタンが個別に発火します。スコープガードは「親の click ハンドラから子を見ない」「子の click ハンドラから親を見ない」を実現するためのもので、
          キーボード操作のフォーカス順序や発火タイミング自体には影響しません。
        </p>
        <p>
          なお、親項目を閉じると子のボタンは <code>hidden</code> 配下に入るため Tab フォーカスからも外れます。
          親を再度開けば自然に Tab 順序へ戻ります。
        </p>
      </div>
    </div>
  </div>
</div>

/* ================================================
   カスタムプロパティ
   共通のトークンセットを継承する（既存値は改変しない）。
   入れ子（ネスト）専用に子アコーディオン用の背景色と
   左インデントの2トークンを追加する。
   命名規則は --accordion-{役割}-{プロパティ} を維持。
   ================================================ */
:root {
  --accordion-color-text:        #2b2b2b;
  --accordion-color-text-muted:  #555;
  --accordion-color-border:      #e0e0e0;
  --accordion-color-bg:          #ffffff;
  --accordion-color-bg-hover:    #f5f7fa;
  --accordion-color-bg-active:   #eef3fa;
  --accordion-color-accent:      #0066cc;
  --accordion-color-focus-ring:  #0066cc;

  --accordion-radius:            8px;
  --accordion-header-padding-y:  16px;
  --accordion-header-padding-x:  20px;
  --accordion-body-padding-y:    16px;
  --accordion-body-padding-x:    20px;

  --accordion-transition:        0.2s ease;

  /* 入れ子用トークン（本実装で追加）
     子アコーディオンを視覚的に区別するための背景色（薄）と
     左インデント幅を一元管理する。 */
  --accordion-color-bg-child:    #f7f9fc;
  --accordion-child-indent:      16px;
}

/* ================================================
   c-accordion: アコーディオン本体
   ================================================ */
.c-accordion {
  border: 1px solid var(--accordion-color-border);
  border-radius: var(--accordion-radius);
  background-color: var(--accordion-color-bg);
  overflow: hidden; /* 角丸を子要素にも適用するため */
}

/* 項目間の区切り線 */
.c-accordion__item + .c-accordion__item {
  border-top: 1px solid var(--accordion-color-border);
}

/* ================================================
   c-accordion__heading: 見出し要素のリセット
   <h2> / <h3> をボタンのラッパーに使うため、見出しの
   デフォルト余白・サイズを打ち消す。
   ================================================ */
.c-accordion__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* ================================================
   c-accordion__header: 開閉ボタン（クリック対象）
   ================================================ */
.c-accordion__header {
  /* ボタンリセット */
  appearance: none;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;

  /* レイアウト */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 44px; /* タップ領域の最低保証（モバイルアクセシビリティ）。
                       padding を変更してもこの最低高さは崩れない。 */
  padding: var(--accordion-header-padding-y) var(--accordion-header-padding-x);

  /* テキスト */
  text-align: left;
  font-size: 16px;
  font-weight: 600;

  /* 状態遷移 */
  background-color: var(--accordion-color-bg);
  transition:
    background-color var(--accordion-transition),
    color var(--accordion-transition);
}

/* マウス系デバイスかつホバー操作が可能な場合のみ適用 */
@media (any-hover: hover) and (pointer: fine) {
  .c-accordion__header:hover {
    background-color: var(--accordion-color-bg-hover);
  }
}

/* キーボードフォーカス時のフォーカスリング
   outline を消さず、視認性の高いリングで上書きする。
   outline-offset は正値（外側）にして、開いた項目の背景色
   （--accordion-color-bg-active）に埋没しないようにする。 */
.c-accordion__header:focus-visible {
  outline: 2px solid var(--accordion-color-focus-ring);
  outline-offset: 2px;
}

/* 開いている項目のヘッダーは背景色を変えて視認性を上げる */
.c-accordion__header[aria-expanded="true"] {
  background-color: var(--accordion-color-bg-active);
  color: var(--accordion-color-accent);
}

/* ================================================
   c-accordion__title: ヘッダー内のタイトルテキスト
   ================================================ */
.c-accordion__title {
  flex: 1;
  min-width: 0; /* テキストが長い場合に折り返せるようにする */
}

/* ================================================
   c-accordion__icon: 開閉インジケータ（▼）
   CSSのみでシェブロンを描画。aria-expanded の値に応じて
   回転させることで開閉状態を視覚的に伝える。
   ================================================ */
.c-accordion__icon {
  flex-shrink: 0;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);            /* 閉じている状態: ▼ */
  transform-origin: center;
  transition: transform var(--accordion-transition);
}

.c-accordion__header[aria-expanded="true"] .c-accordion__icon {
  transform: rotate(-135deg);          /* 開いている状態: ▲ */
}

/* ================================================
   c-accordion__body: 本文パネル
   閉じている状態は <div hidden> 属性で非表示にする。
   ================================================ */
.c-accordion__body {
  background-color: var(--accordion-color-bg);
}

/* ================================================
   c-accordion__content: 本文の余白を持つ内側ラッパー
   外側 __body をコンテナ、内側 __content をコンテンツとして
   分離する2層構造を維持する（共通設計）。
   ================================================ */
.c-accordion__content {
  padding: var(--accordion-body-padding-y) var(--accordion-body-padding-x);
  color: var(--accordion-color-text);
  border-top: 1px solid var(--accordion-color-border);
}

.c-accordion__content > :first-child {
  margin-top: 0;
}

.c-accordion__content > :last-child {
  margin-bottom: 0;
}

.c-accordion__content p {
  margin: 0 0 12px;
}

.c-accordion__content p:last-child {
  margin-bottom: 0;
}

/* ================================================
   c-accordion--child: 子アコーディオン（入れ子）
   本実装で追加。親の本文 __content の中に置かれた
   2つ目以降の .c-accordion を視覚的に区別する。
   - 背景色を薄い --accordion-color-bg-child に変えて
     「親に内包された情報」であることを示す。
   - 左インデント（--accordion-child-indent）で階層を表現。
   - 親本文の末尾に余白を残すため margin-top を持たせる。
   ================================================ */
.c-accordion--child {
  background-color: var(--accordion-color-bg-child);
  margin-top: 16px;
  margin-left: var(--accordion-child-indent);
}

/* 子アコーディオンのヘッダーは背景色を継承して、
   親ヘッダー（白）との差を視覚的に保つ。 */
.c-accordion--child .c-accordion__header {
  background-color: var(--accordion-color-bg-child);
}

@media (any-hover: hover) and (pointer: fine) {
  .c-accordion--child .c-accordion__header:hover {
    background-color: var(--accordion-color-bg-hover);
  }
}

/* 子の開状態は親と同じアクセント色（--accordion-color-bg-active）を使う。
   背景色のコントラストで開状態の項目が見つけやすくなる。 */
.c-accordion--child .c-accordion__header[aria-expanded="true"] {
  background-color: var(--accordion-color-bg-active);
  color: var(--accordion-color-accent);
}

/* 子アコーディオンの本文 __body / __content も背景色を継承する */
.c-accordion--child .c-accordion__body {
  background-color: var(--accordion-color-bg-child);
}

/* ================================================
   prefers-reduced-motion: 動きを減らす設定への配慮
   前庭機能障害等で OS の「視差効果を減らす」を有効に
   しているユーザーに対し、transition を無効化する。
   ================================================ */
@media (prefers-reduced-motion: reduce) {
  .c-accordion__header,
  .c-accordion__icon {
    transition: none;
  }
}

/* ================================================
   カスタムプロパティ
   共通のトークンセットを継承する（既存値は改変しない）。
   入れ子（ネスト）専用に子アコーディオン用の背景色と
   左インデントの2トークンを追加する。
   命名規則は --accordion-{役割}-{プロパティ} を維持。
   ================================================ */
:root {
  --accordion-color-text:        #2b2b2b;
  --accordion-color-text-muted:  #555;
  --accordion-color-border:      #e0e0e0;
  --accordion-color-bg:          #ffffff;
  --accordion-color-bg-hover:    #f5f7fa;
  --accordion-color-bg-active:   #eef3fa;
  --accordion-color-accent:      #0066cc;
  --accordion-color-focus-ring:  #0066cc;

  --accordion-radius:            8px;
  --accordion-header-padding-y:  16px;
  --accordion-header-padding-x:  20px;
  --accordion-body-padding-y:    16px;
  --accordion-body-padding-x:    20px;

  --accordion-transition:        0.2s ease;

  /* 入れ子用トークン（本実装で追加）
     子アコーディオンを視覚的に区別するための背景色（薄）と
     左インデント幅を一元管理する。 */
  --accordion-color-bg-child:    #f7f9fc;
  --accordion-child-indent:      16px;
}

/* ================================================
   c-accordion: アコーディオン本体
   ================================================ */
.c-accordion {
  border: 1px solid var(--accordion-color-border);
  border-radius: var(--accordion-radius);
  background-color: var(--accordion-color-bg);
  overflow: hidden; /* 角丸を子要素にも適用するため */
}

/* 項目間の区切り線 */
.c-accordion__item + .c-accordion__item {
  border-top: 1px solid var(--accordion-color-border);
}

/* ================================================
   c-accordion__heading: 見出し要素のリセット
   <h2> / <h3> をボタンのラッパーに使うため、見出しの
   デフォルト余白・サイズを打ち消す。
   ================================================ */
.c-accordion__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* ================================================
   c-accordion__header: 開閉ボタン（クリック対象）
   ================================================ */
.c-accordion__header {
  /* ボタンリセット */
  appearance: none;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;

  /* レイアウト */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 44px; /* タップ領域の最低保証（モバイルアクセシビリティ）。
                       padding を変更してもこの最低高さは崩れない。 */
  padding: var(--accordion-header-padding-y) var(--accordion-header-padding-x);

  /* テキスト */
  text-align: left;
  font-size: 16px;
  font-weight: 600;

  /* 状態遷移 */
  background-color: var(--accordion-color-bg);
  transition:
    background-color var(--accordion-transition),
    color var(--accordion-transition);
}

/* マウス系デバイスかつホバー操作が可能な場合のみ適用 */
@media (any-hover: hover) and (pointer: fine) {
  .c-accordion__header:hover {
    background-color: var(--accordion-color-bg-hover);
  }
}

/* キーボードフォーカス時のフォーカスリング
   outline を消さず、視認性の高いリングで上書きする。
   outline-offset は正値（外側）にして、開いた項目の背景色
   （--accordion-color-bg-active）に埋没しないようにする。 */
.c-accordion__header:focus-visible {
  outline: 2px solid var(--accordion-color-focus-ring);
  outline-offset: 2px;
}

/* 開いている項目のヘッダーは背景色を変えて視認性を上げる */
.c-accordion__header[aria-expanded="true"] {
  background-color: var(--accordion-color-bg-active);
  color: var(--accordion-color-accent);
}

/* ================================================
   c-accordion__title: ヘッダー内のタイトルテキスト
   ================================================ */
.c-accordion__title {
  flex: 1;
  min-width: 0; /* テキストが長い場合に折り返せるようにする */
}

/* ================================================
   c-accordion__icon: 開閉インジケータ（▼）
   CSSのみでシェブロンを描画。aria-expanded の値に応じて
   回転させることで開閉状態を視覚的に伝える。
   ================================================ */
.c-accordion__icon {
  flex-shrink: 0;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);            /* 閉じている状態: ▼ */
  transform-origin: center;
  transition: transform var(--accordion-transition);
}

.c-accordion__header[aria-expanded="true"] .c-accordion__icon {
  transform: rotate(-135deg);          /* 開いている状態: ▲ */
}

/* ================================================
   c-accordion__body: 本文パネル
   閉じている状態は <div hidden> 属性で非表示にする。
   ================================================ */
.c-accordion__body {
  background-color: var(--accordion-color-bg);
}

/* ================================================
   c-accordion__content: 本文の余白を持つ内側ラッパー
   外側 __body をコンテナ、内側 __content をコンテンツとして
   分離する2層構造を維持する（共通設計）。
   ================================================ */
.c-accordion__content {
  padding: var(--accordion-body-padding-y) var(--accordion-body-padding-x);
  color: var(--accordion-color-text);
  border-top: 1px solid var(--accordion-color-border);
}

.c-accordion__content > :first-child {
  margin-top: 0;
}

.c-accordion__content > :last-child {
  margin-bottom: 0;
}

.c-accordion__content p {
  margin: 0 0 12px;
}

.c-accordion__content p:last-child {
  margin-bottom: 0;
}

/* ================================================
   c-accordion--child: 子アコーディオン（入れ子）
   本実装で追加。親の本文 __content の中に置かれた
   2つ目以降の .c-accordion を視覚的に区別する。
   - 背景色を薄い --accordion-color-bg-child に変えて
     「親に内包された情報」であることを示す。
   - 左インデント（--accordion-child-indent）で階層を表現。
   - 親本文の末尾に余白を残すため margin-top を持たせる。
   ================================================ */
.c-accordion--child {
  background-color: var(--accordion-color-bg-child);
  margin-top: 16px;
  margin-left: var(--accordion-child-indent);
}

/* 子アコーディオンのヘッダーは背景色を継承して、
   親ヘッダー（白）との差を視覚的に保つ。 */
.c-accordion--child .c-accordion__header {
  background-color: var(--accordion-color-bg-child);
}

@media (any-hover: hover) and (pointer: fine) {
  .c-accordion--child .c-accordion__header:hover {
    background-color: var(--accordion-color-bg-hover);
  }
}

/* 子の開状態は親と同じアクセント色（--accordion-color-bg-active）を使う。
   背景色のコントラストで開状態の項目が見つけやすくなる。 */
.c-accordion--child .c-accordion__header[aria-expanded="true"] {
  background-color: var(--accordion-color-bg-active);
  color: var(--accordion-color-accent);
}

/* 子アコーディオンの本文 __body / __content も背景色を継承する */
.c-accordion--child .c-accordion__body {
  background-color: var(--accordion-color-bg-child);
}

/* ================================================
   prefers-reduced-motion: 動きを減らす設定への配慮
   前庭機能障害等で OS の「視差効果を減らす」を有効に
   しているユーザーに対し、transition を無効化する。
   ================================================ */
@media (prefers-reduced-motion: reduce) {
  .c-accordion__header,
  .c-accordion__icon {
    transition: none;
  }
}

/**
 * バニラJS + ARIA対応アコーディオン（入れ子・ネスト対応）
 *
 * 設計方針（共通実装を継承）:
 * - ルート要素 .c-accordion[data-accordion] に対してイベント委譲する。
 *   親アコーディオンと子アコーディオンはそれぞれ独立した root として
 *   取得し、bindAccordion を個別に仕掛ける（イベント委譲をネストごとに分離）。
 * - 開閉状態は aria-expanded 属性を真実の源（single source of truth）とし、
 *   CSSは [aria-expanded="true"] セレクタで見た目を切り替える。
 *   余分な is-open クラスは付与しない。
 * - 本文の表示/非表示は HTML の hidden 属性で制御する（JS が落ちた場合の
 *   フォールバックとして閉状態が HTML 単体で読み取れる）。
 * - setItemState(header, open) を経由して aria-expanded と hidden を
 *   同時更新するため、状態が必ず一致する（共通シグネチャ）。
 *
 * 本実装の核（入れ子対策）:
 * - bindAccordion 内のクリックハンドラに
 *   `header.closest(".c-accordion") !== root` のスコープガードを入れて、
 *   親ハンドラが子の header を拾って二重発火することを防ぐ。
 *   `root.contains(header)` では親が子の header を true で拾うため、
 *   `closest` で「ヘッダーが直属する root」を厳密に判定する必要がある。
 * - collectHeaders(root) でも同様に `header.closest(".c-accordion") === root`
 *   のガードを入れ、root 直下のヘッダーだけに絞り込む。
 * - 親項目を閉じた時に子の aria-expanded はリセットしない
 *   （親を再度開いた時に子の前回状態が復元される設計）。
 *
 * 親と子の data-accordion 属性は値なしの共通属性として扱う
 * （closest(".c-accordion") ベースのスコープガードが機能するため、
 *  親子で属性値を分ける必要はない）。
 */

(function () {
  "use strict";

  // 親 / 子に関わらず .c-accordion[data-accordion] を全て取得し、
  // 各 root に対して bindAccordion を仕掛ける。
  // 親の root と子の root は別物として扱われるため、それぞれのハンドラが
  // 独立した root を持つ（同一 click イベントが両方で発火しないよう
  // bindAccordion 内でスコープガードを入れる）。
  const accordionRoots = document.querySelectorAll(".c-accordion[data-accordion]");

  if (accordionRoots.length === 0) return;

  /**
   * 1つのヘッダーボタンの開閉状態を「指定の状態」に揃える。
   * 共通シグネチャ。
   *
   * @param {HTMLButtonElement} header - 対象のヘッダーボタン
   * @param {boolean} open - true で開く、false で閉じる
   */
  function setItemState(header, open) {
    const panelId = header.getAttribute("aria-controls");
    const panel = panelId ? document.getElementById(panelId) : null;

    if (!panel) return;

    if (open) {
      header.setAttribute("aria-expanded", "true");
      panel.removeAttribute("hidden");
    } else {
      header.setAttribute("aria-expanded", "false");
      panel.setAttribute("hidden", "");
    }
  }

  /**
   * 1つのヘッダーボタンの開閉状態をトグルする（個別クリック用）。
   *
   * @param {HTMLButtonElement} header - クリックされたヘッダーボタン
   */
  function toggleItem(header) {
    const isExpanded = header.getAttribute("aria-expanded") === "true";
    setItemState(header, !isExpanded);
  }

  /**
   * 指定 root 内の全ヘッダーを取得する。
   * 入れ子アコーディオン対策で、対象 root 直下のヘッダーのみを返す。
   * （root.querySelectorAll だけだと子アコーディオンのヘッダーまで拾うため、
   *  closest(".c-accordion") === root のガードで自分の root に直属する
   *  ヘッダーだけに絞り込む。）
   *
   * @param {HTMLElement} root - .c-accordion[data-accordion] 要素
   * @returns {HTMLButtonElement[]}
   */
  function collectHeaders(root) {
    const candidates = root.querySelectorAll(".c-accordion__header");
    const result = [];
    candidates.forEach(function (header) {
      if (header.closest(".c-accordion") === root) {
        result.push(header);
      }
    });
    return result;
  }

  /**
   * ルート要素1つに対してイベント委譲を仕掛ける。
   * 親 root と子 root の両方で呼ばれ、それぞれが独立したハンドラを持つ。
   *
   * @param {HTMLElement} root - .c-accordion[data-accordion] 要素
   */
  function bindAccordion(root) {
    root.addEventListener("click", function (event) {
      const header = event.target.closest(".c-accordion__header");
      if (!header) return;

      // 入れ子対策のスコープガード（親と子の二重発火防止）:
      // ヘッダーから最も近い .c-accordion が「自分自身（root）」でない場合は
      // 子アコーディオンのヘッダーなので処理しない。
      // 子 root のハンドラは別途登録されているため、子のクリックは
      // 子のハンドラだけで処理される。
      if (header.closest(".c-accordion") !== root) return;

      toggleItem(header);
    });
  }

  // collectHeaders は本実装の click 処理では直接呼ばれないが、
  // 後続の拡張（一括操作・排他制御）と API を揃えるためエクスポートに準じた
  // 形で定義しておく（共通シグネチャの維持）。
  void collectHeaders;

  // 全ての root（親も子も）に対して個別にバインドする
  accordionRoots.forEach(bindAccordion);
})();

/**
 * バニラJS + ARIA対応アコーディオン（入れ子・ネスト対応）
 *
 * 設計方針（共通実装を継承）:
 * - ルート要素 .c-accordion[data-accordion] に対してイベント委譲する。
 *   親アコーディオンと子アコーディオンはそれぞれ独立した root として
 *   取得し、bindAccordion を個別に仕掛ける（イベント委譲をネストごとに分離）。
 * - 開閉状態は aria-expanded 属性を真実の源（single source of truth）とし、
 *   CSSは [aria-expanded="true"] セレクタで見た目を切り替える。
 *   余分な is-open クラスは付与しない。
 * - 本文の表示/非表示は HTML の hidden 属性で制御する（JS が落ちた場合の
 *   フォールバックとして閉状態が HTML 単体で読み取れる）。
 * - setItemState(header, open) を経由して aria-expanded と hidden を
 *   同時更新するため、状態が必ず一致する（共通シグネチャ）。
 *
 * 本実装の核（入れ子対策）:
 * - bindAccordion 内のクリックハンドラに
 *   `header.closest(".c-accordion") !== root` のスコープガードを入れて、
 *   親ハンドラが子の header を拾って二重発火することを防ぐ。
 *   `root.contains(header)` では親が子の header を true で拾うため、
 *   `closest` で「ヘッダーが直属する root」を厳密に判定する必要がある。
 * - collectHeaders(root) でも同様に `header.closest(".c-accordion") === root`
 *   のガードを入れ、root 直下のヘッダーだけに絞り込む。
 * - 親項目を閉じた時に子の aria-expanded はリセットしない
 *   （親を再度開いた時に子の前回状態が復元される設計）。
 *
 * 親と子の data-accordion 属性は値なしの共通属性として扱う
 * （closest(".c-accordion") ベースのスコープガードが機能するため、
 *  親子で属性値を分ける必要はない）。
 */

(function () {
  "use strict";

  // 親 / 子に関わらず .c-accordion[data-accordion] を全て取得し、
  // 各 root に対して bindAccordion を仕掛ける。
  // 親の root と子の root は別物として扱われるため、それぞれのハンドラが
  // 独立した root を持つ（同一 click イベントが両方で発火しないよう
  // bindAccordion 内でスコープガードを入れる）。
  const accordionRoots = document.querySelectorAll(".c-accordion[data-accordion]");

  if (accordionRoots.length === 0) return;

  /**
   * 1つのヘッダーボタンの開閉状態を「指定の状態」に揃える。
   * 共通シグネチャ。
   *
   * @param {HTMLButtonElement} header - 対象のヘッダーボタン
   * @param {boolean} open - true で開く、false で閉じる
   */
  function setItemState(header, open) {
    const panelId = header.getAttribute("aria-controls");
    const panel = panelId ? document.getElementById(panelId) : null;

    if (!panel) return;

    if (open) {
      header.setAttribute("aria-expanded", "true");
      panel.removeAttribute("hidden");
    } else {
      header.setAttribute("aria-expanded", "false");
      panel.setAttribute("hidden", "");
    }
  }

  /**
   * 1つのヘッダーボタンの開閉状態をトグルする（個別クリック用）。
   *
   * @param {HTMLButtonElement} header - クリックされたヘッダーボタン
   */
  function toggleItem(header) {
    const isExpanded = header.getAttribute("aria-expanded") === "true";
    setItemState(header, !isExpanded);
  }

  /**
   * 指定 root 内の全ヘッダーを取得する。
   * 入れ子アコーディオン対策で、対象 root 直下のヘッダーのみを返す。
   * （root.querySelectorAll だけだと子アコーディオンのヘッダーまで拾うため、
   *  closest(".c-accordion") === root のガードで自分の root に直属する
   *  ヘッダーだけに絞り込む。）
   *
   * @param {HTMLElement} root - .c-accordion[data-accordion] 要素
   * @returns {HTMLButtonElement[]}
   */
  function collectHeaders(root) {
    const candidates = root.querySelectorAll(".c-accordion__header");
    const result = [];
    candidates.forEach(function (header) {
      if (header.closest(".c-accordion") === root) {
        result.push(header);
      }
    });
    return result;
  }

  /**
   * ルート要素1つに対してイベント委譲を仕掛ける。
   * 親 root と子 root の両方で呼ばれ、それぞれが独立したハンドラを持つ。
   *
   * @param {HTMLElement} root - .c-accordion[data-accordion] 要素
   */
  function bindAccordion(root) {
    root.addEventListener("click", function (event) {
      const header = event.target.closest(".c-accordion__header");
      if (!header) return;

      // 入れ子対策のスコープガード（親と子の二重発火防止）:
      // ヘッダーから最も近い .c-accordion が「自分自身（root）」でない場合は
      // 子アコーディオンのヘッダーなので処理しない。
      // 子 root のハンドラは別途登録されているため、子のクリックは
      // 子のハンドラだけで処理される。
      if (header.closest(".c-accordion") !== root) return;

      toggleItem(header);
    });
  }

  // collectHeaders は本実装の click 処理では直接呼ばれないが、
  // 後続の拡張（一括操作・排他制御）と API を揃えるためエクスポートに準じた
  // 形で定義しておく（共通シグネチャの維持）。
  void collectHeaders;

  // 全ての root（親も子も）に対して個別にバインドする
  accordionRoots.forEach(bindAccordion);
})();