/* ============================================================
   faq-cost.css
   /faq/cost/ 専用。guide-common.css の後に読み込む。
   色は guide-common.css の変数を再利用する（再定義しない）。
   ============================================================ */

/* サイトヘッダーが position: sticky（min-height: 72px）のため、
   ページ内リンクの着地点が隠れないように余白を上書きする。 */
.faq-cost-guide .guide-section {
  scroll-margin-top: 92px;
}

.faq-cost-alert {
  border-left-color: var(--guide-red);
  background: #fff5f6;
}

.faq-cost-notice-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-cost-notice-list li {
  padding: 20px 18px;
  background: #fff;
  border: 1px solid var(--guide-border);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(45, 52, 54, 0.05);
}

.faq-cost-notice-list h3 {
  margin: 0 0 8px;
  color: var(--guide-ink);
  font-size: 1.02rem;
  line-height: 1.5;
}

.faq-cost-notice-list p {
  margin: 0;
  color: var(--guide-muted);
  font-size: 0.92rem;
}

.faq-cost-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 8px;
  padding: 0;
  list-style: none;
}

.faq-cost-checklist li {
  padding: 8px 14px;
  background: var(--guide-gold-pale);
  border: 1px solid var(--guide-border);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
}

.faq-cost-checklist li::before {
  content: "✓";
  margin-right: 6px;
  color: var(--guide-gold-dark);
}

/* 比較セクションは、確認項目リストとFAQの間に区切りを持たせる。 */
.faq-cost-guide #compare .faq-accordion {
  margin-top: 28px;
}

@media (max-width: 767px) {
  .faq-cost-notice-list {
    grid-template-columns: 1fr;
  }
}