/* ==========================================================================
   faq.css
   よくある質問一覧ページ専用スタイル (faq/index.html)

   ※ .p-proposal__filter は proposal.css を流用
   ※ .c-faq-item / .c-faq-items は common.css を流用
   ※ .case-pagination は case.css を流用
   ※ このファイルはページ固有パーツのみを記述する
      - .p-faq-section（セクション見出し + FAQ リスト）
   ========================================================================== */


/* ── セクション（見出し + Q&Aリスト） ── */
.p-faq-section {
  margin-bottom: var(--sp-3xl);
}


/* ── セクション見出し (H2) ── */
.p-faq-section__heading {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-xl);
}


/* ==========================================================================
   RESPONSIVE - 768px (Tablet Portrait / Smartphone)
   ========================================================================== */
@media (max-width: 768px) {
  .p-faq-section__heading {
    font-size: var(--fs-xl);
  }
}


/* ==========================================================================
   FAQ DETAIL PAGE (.p-faq-detail)
   faq/detail.html 専用スタイル
   ========================================================================== */

.p-faq-detail {
  padding: var(--sp-2xl) 0 var(--sp-3xl);
}


/* ── Q / A アイコン（共通） ── */
.p-faq-detail__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  font-family: var(--font-en);
  line-height: 1;
  color: var(--color-white);
}

.p-faq-detail__icon--q {
  background-color: var(--color-dark);
}

.p-faq-detail__icon--a {
  background-color: var(--color-red);
}


/* ── Q 行 ── */
.p-faq-detail__q-row {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  padding-bottom: var(--sp-xl);
}

.p-faq-detail__q-text {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-darkblue);
  line-height: 1.5;
}


/* ── 区切り線 ── */
.p-faq-detail__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-bottom: var(--sp-xl);
}


/* ── A 行 ── */
.p-faq-detail__a-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-3xl);
}


/* ── A コンテンツ（the_content ラッパー） ── */
.p-faq-detail__content {
  flex: 1;
  min-width: 0;
}

.p-faq-detail__content p {
  font-size: var(--fs-md);
  color: var(--color-text);
  line-height: 1.9;
  margin-bottom: var(--sp-md);
}

.p-faq-detail__content p:last-child {
  margin-bottom: 0;
}

.p-faq-detail__content .p-faq-detail__lead {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
}

/* the_content 内の見出し・リスト等を想定したスタイル */
.p-faq-detail__content h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-md);
  padding-left: var(--sp-md);
  border-left: 4px solid var(--color-blue);
}

.p-faq-detail__content h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  margin-top: var(--sp-lg);
  margin-bottom: var(--sp-sm);
}

.p-faq-detail__content ul,
.p-faq-detail__content ol {
  padding-left: 1.5em;
  margin-bottom: var(--sp-md);
}

.p-faq-detail__content li {
  font-size: var(--fs-md);
  color: var(--color-text);
  line-height: 1.9;
  margin-bottom: var(--sp-xs);
}


/* ── 戻るボタン ── */
.p-faq-detail__back-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-2xl);
}

.p-faq-detail__back-btn {
  display: inline-block;
  padding: 0.875rem 2.5rem;
  background-color: var(--color-blue);
  color: var(--color-white);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background-color var(--duration) var(--ease);
}

.p-faq-detail__back-btn:hover {
  background-color: var(--color-blue-hover);
}


/* ==========================================================================
   RESPONSIVE - 1280px
   ========================================================================== */
@media (max-width: 1280px) {
  .p-faq-detail__q-text {
    font-size: var(--fs-xl-mid);
  }
}


/* ==========================================================================
   RESPONSIVE - 1024px (Tablet Landscape)
   ========================================================================== */
@media (max-width: 1024px) {
  .p-faq-detail__icon {
    width: 40px;
    height: 40px;
    font-size: var(--fs-base);
  }
}


/* ==========================================================================
   RESPONSIVE - 768px (Tablet Portrait / Smartphone)
   ========================================================================== */
@media (max-width: 768px) {
  .p-faq-detail {
    padding: var(--sp-xl) 0 var(--sp-2xl);
  }

  .p-faq-detail__q-row {
    align-items: flex-start;
    gap: var(--sp-md);
    padding-bottom: var(--sp-lg);
  }

  .p-faq-detail__icon {
    width: 36px;
    height: 36px;
    font-size: var(--fs-md);
  }

  .p-faq-detail__q-text {
    font-size: var(--fs-xl);
  }

  .p-faq-detail__a-row {
    gap: var(--sp-md);
    margin-bottom: var(--sp-2xl);
  }

  .p-faq-detail__content h2 {
    font-size: var(--fs-base);
    margin-top: var(--sp-lg);
  }

  .p-faq-detail__back-btn {
    padding: 0.75rem 2rem;
    font-size: var(--fs-sm);
  }
}