/* ===== よくある質問 ===== */
.faq { background: var(--color-color-bg-light); }
.faq__inner { max-width: 1180px; margin-inline: auto; padding-inline: 20px; }
.faq__lead { text-align: center; color: var(--color-color-text-mute); margin-bottom: 40px; }
.faq__list { display: flex; flex-direction: column; gap: 20px; }

.faq-item {
  background: var(--color-color-bg-white);
  border: 1px solid var(--color-color-border-default);
  border-radius: 18px;
  box-shadow: var(--effect-shadow-md-1), var(--effect-shadow-md-0);
  overflow: hidden;
}
.faq-item__q { margin: 0; }
.faq-item__trigger {
  display: flex; align-items: center; gap: 16px;
  width: 100%; padding: 28px; min-height: 96px;
  background: none; border: 0; text-align: left; cursor: pointer;
  color: var(--color-color-text-main); font: inherit;
}
.faq-item.is-open .faq-item__trigger { min-height: 0; padding-bottom: 14px; }
.faq-item__q-text { flex: 1; min-width: 0; }
.faq-item__badge {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--color-color-text-inverse);
}
.faq-item__badge--q { background: var(--color-color-brand-primary); }
.faq-item__badge--a { background: var(--color-color-brand-secondary); }

.faq-item__icon {
  position: relative; flex: none; width: 40px; height: 36px;
  color: var(--color-color-brand-primary);
}
.faq-item__icon::before, .faq-item__icon::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 2px; background: currentColor; border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: transform .25s;
}
.faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.is-open .faq-item__icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq-item__a { padding: 0; }
.faq-item__a[hidden] { display: none; }
.faq-item__trigger { transition: padding-bottom .32s cubic-bezier(0.4, 0, 0.2, 1); }
.faq-item__icon::before, .faq-item__icon::after { transition: transform .32s cubic-bezier(0.4, 0, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
  .faq-item__trigger, .faq-item__icon::before, .faq-item__icon::after { transition: none; }
}
.faq-item__a-inner { display: flex; gap: 16px; align-items: flex-start; padding: 0 28px 28px; }
.faq-item__a-text { flex: 1; min-width: 0; color: var(--color-color-text-sub); }

.br-pc-inline { display: inline; }

@media (max-width: 767px) {
  .faq.section { padding-block: 52px 56px; }
  .faq__inner { padding-inline: 20px; }
  .faq__lead { font-size: 13.5px; margin-bottom: 28px; }
  .br-pc-inline { display: none; }
  .faq__list { gap: 14px; }
  .faq-item { border-radius: 14px; }
  .faq-item__trigger { gap: 10px; padding: 19px; min-height: 72px; align-items: flex-start; }
  .faq-item.is-open .faq-item__trigger { padding-bottom: 12px; min-height: 0; }
  .faq-item__badge { width: 28px; height: 28px; font-size: 13px; }
  .faq-item__q-text { font-size: 14px; line-height: 1.6; padding-top: 2px; }
  .faq-item__icon { width: 28px; height: 28px; }
  .faq-item__icon::before, .faq-item__icon::after { width: 12px; }
  .faq-item__a-inner { gap: 10px; padding: 0 19px 19px; }
  .faq-item__a-text { font-size: 12.5px; padding-top: 2px; }
}