@charset "UTF-8";
/** @format */
/** @format */
/* =========================
   FAQ page only
   ========================= */
.page-faq {
  /* 共通トーンに合わせる（必要に応じてcommon側の変数に寄せてOK） */
  --faq-ink: #111;
  --faq-muted: #666;
  --faq-line: #ddd;
  --faq-card: #fff;
  --faq-bg: transparent; /* body側でベージュなら触らない */
  --faq-brand: #6f90a7; /* セクション帯の青 */
  --faq-radius: 18px;
  --faq-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  color: var(--faq-ink);
}

/* ---- 上部のページ見出し ---- */
.page-faq .pageHeader {
  margin: 6px 0 18px;
}

.page-faq .pageTitle {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 900;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}

.page-faq .pageLead {
  margin: 0;
  color: var(--faq-muted);
  line-height: 1.7;
  font-size: 1.02rem;
}

/* ---- 目次ボタン行 ---- */
.page-faq .pageNav {
  margin-top: 14px;
}

.page-faq .btnRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 共通の .btn がある前提で、見た目だけ少し寄せる */
.page-faq .btnRow .btn {
  border-radius: 999px;
  border: 2px solid var(--faq-brand);
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  color: #4b708a;
}

.page-faq .btnRow .btn:hover {
  filter: brightness(0.98);
}

/* ---- セクション共通（青帯） ---- */
.page-faq .section {
  margin: 22px 0 46px;
}

.page-faq .sectionTitle {
  margin: 0 0 12px;
  padding: 9px 0px 9px 20px;
  background: var(--faq-brand);
  color: #fff;
  border-radius: 8px;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

/* ---- 白いカード ---- */
.page-faq .card {
  background: var(--faq-card);
  border: 1px solid var(--faq-line);
  border-radius: var(--faq-radius);
  box-shadow: var(--faq-shadow);
}

.page-faq .cardBody {
  padding: 18px 18px;
}

/* ---- Q&A（details） ---- */
.page-faq .qa {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: 12px 0;
}

.page-faq .qa:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-faq .qa:last-child {
  padding-bottom: 0;
}

/* summaryをボタンっぽく */
.page-faq .qa__q {
  list-style: none; /* marker消す（Firefox向けは下で） */
  cursor: pointer;
  display: grid;
  grid-template-columns: 1.5em 1fr 1.5em;
  align-items: start;
  gap: 10px;
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.55;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f6f6f6;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.page-faq .qa__q::-webkit-details-marker {
  display: none;
}

.page-faq .qa__q::marker {
  content: "";
}

/* 左のQバッジ */
.page-faq .qa__q::before {
  content: "Q";
  width: 1.5em;
  height: 1.5em;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-weight: 900;
  font-size: 0.9rem;
  margin-top: 2px;
}

/* 右の開閉アイコン */
.page-faq .qa__q::after {
  content: "＋";
  width: 1.5em;
  height: 1.5em;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  color: #111;
  font-weight: 900;
  margin-top: 2px;
}

.page-faq details[open] > .qa__q {
  background: #fff;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.06);
}

.page-faq details[open] > .qa__q::after {
  content: "−";
}

/* 回答本文 */
.page-faq .qa__a {
  margin-top: 10px;
  padding: 12px 14px 2px;
  color: var(--faq-ink);
}

.page-faq .qa__a p {
  margin: 0 0 10px;
  line-height: 1.75;
}

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

/* リンク */
.page-faq .link {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* フォーカス見える化 */
.page-faq .qa__q:focus-visible,
.page-faq .btnRow .btn:focus-visible,
.page-faq .link:focus-visible {
  outline: 3px solid #ffcc00;
  outline-offset: 3px;
  border-radius: 12px;
}

/* スマホ最適化 */
@media (max-width: 768px) {
  .page-faq .cardBody {
    padding: 14px 14px;
  }
  .page-faq .qa__q {
    font-size: 1rem;
    padding: 11px 12px;
    grid-template-columns: 1.5em 1fr 1.5em;
  }
  .page-faq .sectionTitle {
    padding: 16px 16px;
    font-size: 1.35rem;
  }
}/*# sourceMappingURL=faq.css.map */