Faq 01

<section class="faq-accordion js-faq-accordion">
  <h2 class="faq-accordion__heading">よくある質問</h2>

  <div class="faq-accordion__list">
    <details class="faq-accordion__item js-faq-accordion-item" open>
      <summary class="faq-accordion__question">
        <span
          class="faq-accordion__mark faq-accordion__mark--question"
          aria-hidden="true"
          >Q</span
        >
        <span class="faq-accordion__question-text">
          ここに質問内容が入ります。
        </span>
        <span class="faq-accordion__icon" aria-hidden="true">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path
              class="faq-accordion__icon-bar"
              d="M10 4v12"
              stroke="currentColor"
              stroke-width="1.8"
              stroke-linecap="round"
            />
            <path
              d="M4 10h12"
              stroke="currentColor"
              stroke-width="1.8"
              stroke-linecap="round"
            />
          </svg>
        </span>
      </summary>
      <div class="faq-accordion__panel js-faq-accordion-panel">
        <div class="faq-accordion__panel-inner">
          <div class="faq-accordion__answer">
            <span
              class="faq-accordion__mark faq-accordion__mark--answer"
              aria-hidden="true"
              >A</span
            >
            <p class="faq-accordion__answer-text">ここに回答内容が入ります。</p>
          </div>
        </div>
      </div>
    </details>

    <details class="faq-accordion__item js-faq-accordion-item">
      <summary class="faq-accordion__question">
        <span
          class="faq-accordion__mark faq-accordion__mark--question"
          aria-hidden="true"
          >Q</span
        >
        <span class="faq-accordion__question-text">
          ここに質問内容が入ります。ここに質問内容が入ります。
        </span>
        <span class="faq-accordion__icon" aria-hidden="true">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path
              class="faq-accordion__icon-bar"
              d="M10 4v12"
              stroke="currentColor"
              stroke-width="1.8"
              stroke-linecap="round"
            />
            <path
              d="M4 10h12"
              stroke="currentColor"
              stroke-width="1.8"
              stroke-linecap="round"
            />
          </svg>
        </span>
      </summary>
      <div class="faq-accordion__panel js-faq-accordion-panel">
        <div class="faq-accordion__panel-inner">
          <div class="faq-accordion__answer">
            <span
              class="faq-accordion__mark faq-accordion__mark--answer"
              aria-hidden="true"
              >A</span
            >
            <p class="faq-accordion__answer-text">
              ここに回答内容が入ります。<br />ここに回答内容が入ります。ここに回答内容が入ります。
            </p>
          </div>
        </div>
      </div>
    </details>

    <details class="faq-accordion__item js-faq-accordion-item">
      <summary class="faq-accordion__question">
        <span
          class="faq-accordion__mark faq-accordion__mark--question"
          aria-hidden="true"
          >Q</span
        >
        <span class="faq-accordion__question-text">
          ここに質問内容が入ります。
        </span>
        <span class="faq-accordion__icon" aria-hidden="true">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path
              class="faq-accordion__icon-bar"
              d="M10 4v12"
              stroke="currentColor"
              stroke-width="1.8"
              stroke-linecap="round"
            />
            <path
              d="M4 10h12"
              stroke="currentColor"
              stroke-width="1.8"
              stroke-linecap="round"
            />
          </svg>
        </span>
      </summary>
      <div class="faq-accordion__panel js-faq-accordion-panel">
        <div class="faq-accordion__panel-inner">
          <div class="faq-accordion__answer">
            <span
              class="faq-accordion__mark faq-accordion__mark--answer"
              aria-hidden="true"
              >A</span
            >
            <p class="faq-accordion__answer-text">ここに回答内容が入ります。</p>
          </div>
        </div>
      </div>
    </details>

    <details class="faq-accordion__item js-faq-accordion-item">
      <summary class="faq-accordion__question">
        <span
          class="faq-accordion__mark faq-accordion__mark--question"
          aria-hidden="true"
          >Q</span
        >
        <span class="faq-accordion__question-text">
          ここに質問内容が入ります。ここに質問内容が入ります。
        </span>
        <span class="faq-accordion__icon" aria-hidden="true">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path
              class="faq-accordion__icon-bar"
              d="M10 4v12"
              stroke="currentColor"
              stroke-width="1.8"
              stroke-linecap="round"
            />
            <path
              d="M4 10h12"
              stroke="currentColor"
              stroke-width="1.8"
              stroke-linecap="round"
            />
          </svg>
        </span>
      </summary>
      <div class="faq-accordion__panel js-faq-accordion-panel">
        <div class="faq-accordion__panel-inner">
          <div class="faq-accordion__answer">
            <span
              class="faq-accordion__mark faq-accordion__mark--answer"
              aria-hidden="true"
              >A</span
            >
            <p class="faq-accordion__answer-text">
              ここに回答内容が入ります。<br />ここに回答内容が入ります。ここに回答内容が入ります。
            </p>
          </div>
        </div>
      </div>
    </details>
  </div>
</section>

/* reset */
:where(h2).faq-accordion__heading,
:where(p).faq-accordion__answer-text {
  margin: 0;
  font: inherit;
}

:where(summary).faq-accordion__question {
  font: inherit;
  cursor: pointer;
  list-style: none;

  &::-webkit-details-marker {
    display: none;
  }
}

/* snippet */
.faq-accordion {
  --faq-background: #fff;
  --faq-border: #e7e7e7;
  --faq-heading-color: #1e2939;
  --faq-question-color: #364153;
  --faq-answer-color: #5e6775;
  --faq-icon-color: #6a7282;
  --faq-accent: #2b36f5;
  --faq-mark-question-color: #fff;
  --faq-mark-question-background: var(--faq-accent);
  --faq-mark-answer-color: var(--faq-accent);
  --faq-mark-answer-background: color-mix(
    in srgb,
    var(--faq-accent) 12%,
    transparent
  );
  --faq-interactive-background: #f7f8fa;
  --faq-focus-color: var(--faq-accent);
  --faq-duration: 0.3s;

  width: 100%;
  max-width: 640px;
}

.faq-accordion__heading {
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--faq-heading-color);
  text-align: center;
}

.faq-accordion__list {
  display: grid;
  row-gap: 12px;
}

.faq-accordion__item {
  overflow: hidden;
  background-color: var(--faq-background);
  border: 1px solid var(--faq-border);
  border-radius: 12px;
}

.faq-accordion__question {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 16px;
  align-items: center;
  padding: 18px 20px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--faq-question-color);
  border-radius: 12px;

  @media (any-hover: hover) {
    transition: background-color var(--faq-duration);

    &:hover {
      background-color: var(--faq-interactive-background);
    }
  }
}

.faq-accordion__mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  border-radius: 50%;
}

.faq-accordion__mark--question {
  color: var(--faq-mark-question-color);
  background-color: var(--faq-mark-question-background);
}

.faq-accordion__mark--answer {
  color: var(--faq-mark-answer-color);
  background-color: var(--faq-mark-answer-background);
}

.faq-accordion__icon {
  display: grid;
  place-items: center;
  color: var(--faq-icon-color);
  transition: color var(--faq-duration);
}

.faq-accordion__icon-bar {
  transform-origin: center;
  transform-box: fill-box;
  transition: transform var(--faq-duration);
}

:is(
  .faq-accordion:not(.faq-accordion--enhanced) .faq-accordion__item[open],
  .faq-accordion--enhanced .faq-accordion__item--expanded
) {
  & .faq-accordion__question {
    background-color: var(--faq-interactive-background);
    border-radius: 12px 12px 0 0;
  }

  & .faq-accordion__icon {
    color: var(--faq-accent);
  }

  & .faq-accordion__icon-bar {
    transform: rotate(90deg);
  }
}

.faq-accordion__answer {
  display: flex;
  column-gap: 16px;
  align-items: flex-start;
  padding: 10px 20px 20px;
}

.faq-accordion__answer-text {
  flex: 1;
  padding-top: 1px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--faq-answer-color);
}

/* open / close animation(JS 実行時) */
.faq-accordion--enhanced .faq-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
}

.faq-accordion--enhanced .faq-accordion__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.faq-accordion--enhanced .faq-accordion__item--expanded .faq-accordion__panel {
  grid-template-rows: 1fr;
}

.faq-accordion--enhanced .faq-accordion__item--animating .faq-accordion__panel {
  transition: grid-template-rows var(--faq-duration) ease;
}

/* focus */
.faq-accordion .faq-accordion__question {
  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--faq-focus-color);
    outline-offset: -2px;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .faq-accordion__icon,
  .faq-accordion__icon-bar,
  .faq-accordion--enhanced
    .faq-accordion__item--animating
    .faq-accordion__panel {
    transition: none;
  }
}

(function () {
  const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
  let instanceIndex = 0;

  function getTransitionMs(root) {
    const duration = getComputedStyle(root)
      .getPropertyValue("--faq-duration")
      .trim();
    if (!duration) return 0;
    const ms = duration.endsWith("ms")
      ? parseFloat(duration)
      : parseFloat(duration) * 1000;
    return Number.isFinite(ms) ? ms : 0;
  }

  function panelHasTransition(panel) {
    return (
      parseFloat(getComputedStyle(panel).transitionDuration.split(",")[0]) > 0
    );
  }

  function initFaqAccordion(root) {
    if (root.dataset.faqAccordionInit === "true") return;
    root.dataset.faqAccordionInit = "true";

    instanceIndex += 1;

    const heading = root.querySelector(".faq-accordion__heading");
    if (heading) {
      const headingId = `faq-accordion-heading-${instanceIndex}`;
      heading.id = headingId;
      root.setAttribute("aria-labelledby", headingId);
    }

    root.classList.add("faq-accordion--enhanced");

    root.querySelectorAll(".js-faq-accordion-item").forEach((item) => {
      const summary = item.querySelector(".faq-accordion__question");
      const panel = item.querySelector(".js-faq-accordion-panel");
      if (!summary || !panel) return;

      let transitionHandler = null;
      let cancelHandler = null;
      let fallbackTimer = 0;

      function cleanupTransition() {
        if (transitionHandler) {
          panel.removeEventListener("transitionend", transitionHandler);
          transitionHandler = null;
        }
        if (cancelHandler) {
          panel.removeEventListener("transitioncancel", cancelHandler);
          cancelHandler = null;
        }
        if (fallbackTimer) {
          clearTimeout(fallbackTimer);
          fallbackTimer = 0;
        }
      }

      function setExpanded(open) {
        item.classList.toggle("faq-accordion__item--expanded", open);
        item.toggleAttribute("open", open);
      }

      if (item.hasAttribute("open")) {
        item.classList.add("faq-accordion__item--expanded");
      }

      summary.addEventListener("click", (event) => {
        event.preventDefault();

        const willOpen = !item.classList.contains(
          "faq-accordion__item--expanded",
        );

        if (reducedMotion.matches) {
          cleanupTransition();
          item.classList.remove("faq-accordion__item--animating");
          setExpanded(willOpen);
          return;
        }

        cleanupTransition();

        item.classList.add("faq-accordion__item--animating");
        void panel.offsetHeight;

        let finished = false;
        const finish = () => {
          if (finished) return;
          finished = true;
          cleanupTransition();
          item.classList.remove("faq-accordion__item--animating");
          setExpanded(willOpen);
        };

        if (!panelHasTransition(panel)) {
          setExpanded(willOpen);
          finish();
          return;
        }

        const onTransitionDone = (transitionEvent) => {
          if (transitionEvent.target !== panel) return;
          if (transitionEvent.propertyName !== "grid-template-rows") return;
          finish();
        };

        transitionHandler = onTransitionDone;
        cancelHandler = onTransitionDone;

        panel.addEventListener("transitionend", transitionHandler);
        panel.addEventListener("transitioncancel", cancelHandler);
        fallbackTimer = window.setTimeout(finish, getTransitionMs(root) + 50);

        if (willOpen) {
          item.setAttribute("open", "");
          requestAnimationFrame(() => {
            requestAnimationFrame(() => {
              item.classList.add("faq-accordion__item--expanded");
            });
          });
        } else {
          item.classList.remove("faq-accordion__item--expanded");
        }
      });
    });
  }

  function initAll() {
    document.querySelectorAll(".js-faq-accordion").forEach(initFaqAccordion);
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initAll);
  } else {
    initAll();
  }
})();