/* よくあるご質問ページ専用
 * 通常の指定 → 条件別の調整の順序を保っています。
 * @media は画面幅などの条件です。追記前に同じセレクター名を検索してください。
 */

/* よくあるご質問 */

.faq-page-section {
  padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 88px);
  background: #e9eef1;
}

.faq-page-container {
  max-width: 1080px;
}

.faq-page-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.faq-page-intro > p {
  margin: 0;
  color: #393f43;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.9;
}

.faq-mobile-break {
  display: none;
}

.faq-page-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.faq-page-list .faq-item > button {
  min-height: 96px;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.75;
}

.faq-page-list .faq-item > button > span {
  overflow-wrap: anywhere;
}

.faq-page-list .faq-item > button:before {
  /* FAQページは番号なしの「Q」のみ（トップページのFAQは番号付きのまま） */
  content: "Q";
  font-size: 18px;
  letter-spacing: 0;
}

.faq-page-list .faq-item > button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -3px;
}

.faq-page-list .faq-answer p {
  font-size: 16px;
  line-height: 2;
  padding-right: 16px;
}

.faq-page .about-breadcrumb .container {
  font-size: 12px;
}

@media (max-width: 650px) {
  .faq-page .about-page-hero-inner h1 {
    font-size: clamp(30px, 8.2vw, 38px);
  }

  .faq-page-intro {
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 22px;
  }

  .faq-page-intro > p {
    font-size: 15px;
  }

  .faq-mobile-break {
    display: initial;
  }

  .faq-page-list {
    gap: 12px;
  }

  .faq-page-list .faq-item > button,
  .faq-page-list .faq-item > button:hover,
  .faq-page-list .faq-item > button:focus-visible {
    grid-template-columns: 36px minmax(0, 1fr) 30px;
    gap: 10px;
    min-height: 90px;
    padding: 18px 14px;
    font-size: 16px;
  }

  .faq-page-list .faq-item > button:before {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .faq-page-list .faq-answer p {
    margin: 0 14px;
    padding: 18px 2px 22px 32px;
    font-size: 16px;
    line-height: 1.9;
  }

  .faq-page-list .faq-answer p:before {
    top: 23px;
    left: 4px;
    font-size: 18px;
  }
}

/* 回答：リード文＋本文の複数段落（1つの p 内で構成し「A」マークを1つに保つ） */

.faq-page-list .faq-answer .faq-answer-rich > strong,
.faq-page-list .faq-answer .faq-answer-rich > span {
  display: block;
}

.faq-page-list .faq-answer .faq-answer-lead {
  margin-bottom: 12px;
  color: var(--ink);
  font-weight: 900;
  line-height: 1.8;
}

.faq-page-list .faq-answer .faq-answer-rich > span + span {
  margin-top: 8px;
}

@media (max-width: 650px) {
  .faq-page-list .faq-answer .faq-answer-lead {
    margin-bottom: 10px;
  }
}

/* WordPressの登録回答：段落が複数でもAマークは回答全体に1つ */
.faq-page-list .faq-answer .faq-answer-content {
  position: relative;
  margin: 0 24px 0 98px;
  padding: 20px 16px 28px 48px;
  border-top: 1px solid #e5e8ea;
  color: #3f474c;
  font-size: 16px;
  font-weight: 600;
  line-height: 2;
  overflow-wrap: anywhere;
}
.faq-page-list .faq-answer .faq-answer-content::before {
  content: "A";
  position: absolute;
  left: 4px;
  top: 23px;
  font: italic 900 19px/1 Georgia, serif;
  color: var(--red);
}
.faq-page-list .faq-answer .faq-answer-content p {
  margin: 0 0 1em;
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  transform: none;
}
.faq-page-list .faq-answer .faq-answer-content p:last-child { margin-bottom: 0; }
.faq-page-list .faq-answer .faq-answer-content p::before { content: none; }
.faq-answer-content a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.faq-answer-content ul, .faq-answer-content ol { padding-left: 1.5em; margin: 0 0 1em; }
.faq-answer-content img { max-width: 100%; height: auto; }
.faq-page-empty { margin: 0; padding: 32px 20px; background: #fff; text-align: center; }
@media (max-width: 650px) {
  .faq-page-list .faq-answer .faq-answer-content { margin: 0 14px; padding: 18px 2px 22px 32px; font-size: 16px; line-height: 1.9; }
  .faq-page-list .faq-answer .faq-answer-content::before { font-size: 18px; }
}