アコーディオン／Accordion

<div class="c-accordion__container" data-js-accordion-container>
  <details class="c-accordion" role="group" data-js-accordion>
    <summary class="c-accordion__trigger" role="button" data-js-accordion-trigger><p class="c-accordion__label">テキスト「自然界はどのようにしてできているのだろう?」</p>
    </summary>
    <div class="c-accordion__content" data-js-accordion-target>
      <div class="c-accordion__content__inner">
        <div class="c-accordion__body"><p class="c-paragraph">本文テキスト 「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。</p></div>
      </div>
    </div>
  </details>
  <details class="c-accordion" role="group" data-js-accordion>
    <summary class="c-accordion__trigger" role="button" data-js-accordion-trigger><p class="c-accordion__label">ダミーテキストはどのような場合に使用されますか。</p>
    </summary>
    <div class="c-accordion__content" data-js-accordion-target>
      <div class="c-accordion__content__inner">
        <div class="c-accordion__body"><p class="c-paragraph">ダミーテキストは、デザインやレイアウトの作成時に使用される仮の文章です。ダミーテキストを使用すると、デザインの全体像を評価したり、テキストの配置や長さを確認したりすることができます。ダミーテキストは実際の文章ではないので、内容には意味がありません。</p></div>
      </div>
    </div>
  </details>
</div>

<div class="c-accordion__container" data-js-accordion-container>
  <details
    class="c-accordion c-accordion--qa"
    role="group"
    data-js-accordion
  >
    <summary
      class="c-accordion__trigger"
      role="button"
      data-js-accordion-trigger
    >
      <span class="c-accordion__number">Q1.</span>
      <p class="c-accordion__label">
        質問が入ります。質問が入ります。質問が入ります。質問が入ります。質問が入ります。
      </p>
    </summary>
    <div class="c-accordion__content" data-js-accordion-target>
      <div class="c-accordion__content__inner">
        <span class="c-accordion__number">A1.</span>
        <div class="c-accordion__body">
          <p class="c-paragraph">
            回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。
          </p>
          <p class="c-paragraph">
            回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。
          </p>
          <figure class="c-image">
            <img
              src="/images/sample.webp"
              width="480"
              height="270"
              alt="Placeholder Image"
            />
            <figcaption class="p-image__caption">This is a caption</figcaption>
          </figure>
          <ul class="c-list">
            <li class="c-list__item">
              回答が入ります。回答が入ります。回答が入ります。回答が入ります。
            </li>
            <li class="c-list__item">
              回答が入ります。回答が入ります。回答が入ります。回答が入ります。
            </li>
            <li class="c-list__item">
              回答が入ります。回答が入ります。回答が入ります。回答が入ります。
            </li>
          </ul>
          <ul class="c-list c-list--notes">
            <li class="c-list__item">
              回答が入ります。回答が入ります。回答が入ります。回答が入ります。
            </li>
            <li class="c-list__item">
              回答が入ります。回答が入ります。回答が入ります。回答が入ります。
            </li>
            <li class="c-list__item">
              回答が入ります。回答が入ります。回答が入ります。回答が入ります。
            </li>
          </ul>
          <div class="c-utilityLinkGroup">
            <div class="c-utilityLinkGroup__item">
              <a href="/" class="c-link c-utilityLink">
                リンクテキスト
                <svg class="c-button__icon c-button__icon--right icon" aria-hidden="true" role="img">
                  <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </details>
  <details
    class="c-accordion c-accordion--qa"
    role="group"
    data-js-accordion
  >
    <summary
      class="c-accordion__trigger"
      role="button"
      data-js-accordion-trigger
    >
      <span class="c-accordion__number">質問2.</span>
      <p class="c-accordion__label">
        質問が入ります。質問が入ります。質問が入ります。質問が入ります。質問が入ります。
      </p>
    </summary>
    <div class="c-accordion__content" data-js-accordion-target>
      <div class="c-accordion__content__inner">
        <span class="c-accordion__number">回答2.</span>
        <div class="c-accordion__body">
          <p class="c-paragraph">
            回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。
          </p>
        </div>
      </div>
    </div>
  </details>
</div>