/* ============================================================
   faq-detail.css — FAQ個別ページ
   ============================================================ */

.faq-detail {
  background-color: var(--color-white);

  & .faq-detail__breadcrumb {
    padding-block: var(--space-3);
    border-block-end: 1px solid var(--color-border);
    background-color: var(--color-bg-light);
  }

  & .faq-detail__breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    line-height: 1.6;

    & li:not(:last-child)::after {
      content: "/";
      margin-inline-start: var(--space-2);
      color: var(--color-neutral-mid);
    }

    & a {
      color: var(--color-brand);
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }

  & .faq-detail__hero {
    padding-block: clamp(2.5rem, calc(2rem + 2.5vw), 4rem);
    background-color: var(--color-brand);
    color: var(--color-white);
  }

  & .faq-detail__hero-inner {
    display: grid;
    gap: var(--space-4);
  }

  & .faq-detail__eyebrow {
    width: fit-content;
    margin: 0;
    padding: var(--space-2) var(--space-4);
    border: 1px solid rgb(var(--color-white-rgb) / 0.34);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
  }

  & .faq-detail__title {
    max-width: 34em;
    margin: 0;
    font-size: clamp(1.6rem, calc(1.224rem + 1.502vw), 2.6rem);
    font-weight: 900;
    line-height: 1.5;
  }

  & .faq-detail__layout {
    max-width: 60rem;
  }

  & .faq-detail__article {
    display: grid;
    gap: var(--space-5);
    padding: clamp(1.25rem, calc(1rem + 1.25vw), 2rem);
    border: 1px solid rgb(var(--color-brand-rgb) / 0.1);
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    box-shadow: var(--shadow-card);
  }

  & .faq-detail__answer-label {
    width: fit-content;
    margin: 0;
    color: var(--color-brand);
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 900;
    line-height: 1;
  }

  & .faq-detail__content {
    display: grid;
    gap: var(--space-4);

    & p {
      margin: 0;
      line-height: 2;
    }

    & p:first-child {
      padding: var(--space-4);
      border-inline-start: 4px solid var(--color-brand-mid);
      border-radius: var(--radius-md);
      background-color: rgb(var(--color-brand-rgb) / 0.05);
      color: var(--color-brand);
      font-size: var(--text-lg);
      font-weight: 700;
    }
  }

  & .faq-detail__video,
  & .faq-detail__related {
    display: grid;
    gap: var(--space-4);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border);
  }

  & .faq-detail__subheading {
    margin: 0;
    color: var(--color-brand);
    font-size: var(--text-xl);
    font-weight: 900;
    line-height: 1.5;
  }

  & .faq-detail__video-frame {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-light);

    & iframe {
      width: 100%;
      aspect-ratio: 16 / 9;
      height: auto;
      border: 0;
    }
  }

  & .faq-detail__related-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;

    & .top-text-link {
      margin-block-start: 0;
    }
  }

  & .faq-detail__cta-copy {
    text-align: center;
  }

  @media print, screen and (width >= 768px) {
    & .faq-detail__article {
      padding: clamp(2rem, calc(1.667rem + 1.667vw), 3rem);
    }
  }
}