/* UI4と同様に、各見出しを対応するカードの上へ分けて配置する。 */
.help-wrap > .help-card {
  margin-top: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.help-section + .help-section {
  margin-top: 24px !important;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px !important;
  color: var(--ui0-text-strong) !important;
}

.help-heading-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--ui0-primary-bg);
  color: var(--ui0-primary-dark);
}

.help-heading-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}

/* FAQは質問ごと、使い方とフォームは内容全体を一枚のカードにする。 */
.faq-item,
.help-section > .help-list {
  border: 1px solid var(--ui0-border) !important;
  border-radius: var(--ui0-radius-md) !important;
  background: var(--ui0-raised) !important;
  box-shadow: var(--ui0-shadow-sm) !important;
}

.help-section > .help-list {
  padding: 16px 16px 16px 36px !important;
}

.faq-trigger {
  border: 0 !important;
  box-shadow: none !important;
}

.faq-answer {
  margin: 0 12px 12px !important;
}