@charset "UTF-8";
/* よくある質問ページ（/faq/）専用。アコーディオン本体は common2.css の .acd-* を使う。
   Q/A の丸アイコンは TOP（index5.css）と同じ見た目になるよう必要な分だけ複製している */
.c-faq_answer { display: flex; }
.circle { flex-shrink: 0; position: relative; display: block; width: 60px; height: 60px; margin-right: 1em; vertical-align: middle; }
.circle::before, .circle::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; vertical-align: middle; width: 60px; height: 60px; border-radius: 50%; font-family: "Montserrat", sans-serif; }
.circle::after { display: flex; align-items: center; justify-content: center; }
.circle-Q::before { background: var(--primary); }
.circle-Q::after { content: "Q"; color: #fff; }
.circle-A::before { border: 1px solid var(--primary); }
.circle-A::after { content: "A"; color: var(--primary); }
@media only screen and (max-width: 768px) {
  .circle, .circle::before, .circle::after { width: 40px; height: 40px; }
}

.faq-lead { margin-bottom: 24px; }
.faq-nav ul { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 48px; }
.faq-nav a { display: inline-block; padding: 6px 14px; border: 1px solid var(--primary); border-radius: 999px; color: var(--primary); font-size: 1.4rem; text-decoration: none; }
.faq-nav a:hover { background: var(--primary); color: #fff; }
.faq-cat { margin-top: 56px; scroll-margin-top: 140px; }
.faq-cat:first-of-type { margin-top: 0; }
.faq-cat .c-secTtl02 { margin-bottom: 24px; }
.faq-cat .i-accordionList_item { scroll-margin-top: 140px; }
.faq-cat .i-accordionList_item + .i-accordionList_item { margin-top: 12px; }
.faq-cat .c-faq_answer a { color: var(--primary); text-decoration: underline; }
.faq-contact { margin-top: 64px; padding: 32px 24px; background: var(--p-4); text-align: center; }
.faq-contact_tel { margin: 12px 0 24px; font-size: 2rem; font-weight: 700; }
.faq-contact_tel a { color: var(--primary); }
.faq-contact_tel span { display: block; font-size: 1.3rem; font-weight: normal; }
@media only screen and (max-width: 768px) {
  .faq-cat, .faq-cat .i-accordionList_item { scroll-margin-top: 80px; }
}

/* ---- テスト版のみで使う表示 ---- */
.faq-testbar { background: #fff3c4; color: #5a4a00; padding: 10px 16px; font-size: 1.3rem; text-align: center; }
.faq-check { margin: 12px 0 0 76px; padding: 10px 12px; background: #fff3c4; border-left: 4px solid #e0b000; font-size: 1.4rem; line-height: 1.7; }
.faq-check b { display: inline-block; margin-right: 8px; padding: 0 6px; background: #e0b000; color: #fff; font-size: 1.2rem; }
@media only screen and (max-width: 768px) { .faq-check { margin-left: 0; } }

/* ---- ボタン（TOP の「宅配便を申し込む」と同じ紫のピル型） ---- */
.faq-more { margin-top: 40px; text-align: center; }
.faq-btn { display: inline-block; min-width: 300px; padding: 16px 32px; border-radius: 999px; background: var(--primary); color: #fff !important; font-weight: 700; text-align: center; text-decoration: none !important; transition: opacity .2s; }
.faq-btn:hover { opacity: .8; }
@media only screen and (max-width: 768px) { .faq-btn { min-width: 0; width: 100%; padding: 14px 16px; } }