:root {
  --main-color: var(--lunaria_main_color, #0073aa);
  --accent-color: var(--lunaria_accent_color, #00aa88);
  --text-color: #333;
}

/* ============================
   アイコンデザイン（iconStyle）
============================ */
.faq-icon.border dt::before,
.faq-icon.border dd::before {
  background: transparent;
  border: 2px solid var(--main-color, #0073aa);
  color: var(--main-color, #0073aa);
}

.faq-icon.simple dt::before,
.faq-icon.simple dd::before {
  background-color: #000;
  color: var(--main-color, #0073aa);
  font-weight: normal;
}

.faq-icon.theme dt::before {
  background-color: var(--main-color, #0073aa);
}
.faq-icon.theme dd::before {
  background-color: var(--accent-color, #00aa88);
}

.faq-icon.monochrome dt::before,
.faq-icon.monochrome dd::before {
  background-color: #000;
  color: #fff;
}

/* ============================
   角丸スタイル（iconShape）
============================ */
.faq-icon.circle dt::before,
.faq-icon.circle dd::before {
  border-radius: 50%;
}

.faq-icon.rounded dt::before,
.faq-icon.rounded dd::before {
  border-radius: 0.5em;
}

.faq-icon.square dt::before,
.faq-icon.square dd::before {
  border-radius: 0;
}
.faq-icon.theme .faq-label {
  background-color: var(--main-color, #0073aa);
  color: #fff;
  border: none;
}

.faq-icon.white .faq-label {
  background-color: #fff;
  color: var(--text-color, #333);
  border: 1px solid #ccc;
}

.faq-icon .faq-label {
  display: inline-block;
  margin: 0 0.5em 0 0;
  line-height: 1.2;
  vertical-align: middle;
}

/* アイコンスタイル - 枠線（border） */
.faq-icon.border .faq-label {
  border: 3px solid var(--main-color);
  padding: 0.2em 0.6em;
  border-radius: 0.5em;
}

/* シンプル（simple） */
.faq-icon.simple .faq-label {
  color: var(--main-color);
  font-weight: bold;
}

/* 背景（テーマ） */
.faq-icon.theme .faq-label {
  background-color: var(--main-color);
  color: #fff;
  padding: 0.2em 0.6em;
  border-radius: 0.5em;
}

/* 背景（白黒） */
.faq-icon.monochrome .faq-label {
  background-color: #000;
  color: #fff;
  padding: 0.2em 0.6em;
  border-radius: 0.5em;
}

.faq-icon.circle .faq-label {
  border-radius: 50%;
}

.faq-icon.rounded .faq-label {
  border-radius: 0.5em;
}

.faq-icon.square .faq-label {
  border-radius: 0;
}


/* 編集画面のQ&Aアイコンスタイル */
.faq-icon .faq-label {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--main-color);
  border-radius: 0.5em;
  padding: 0.2em 0.6em;
  font-weight: bold;
  margin-right: 0.5em;
}

.faq-icon dt,
.faq-icon dd {
  margin: 0.35em 0;
  margin-left: 0;
  margin-inline-start: 0;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.faq-icon dd {
  margin: 0.35em 0 1.25em;
  margin-left: 0;
  margin-inline-start: 0;
}

.faq-label {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.8em; /* 必要に応じて調整 */
  line-height: 1;
}

.faq-question,
.faq-answer {
  display: inline-flex;
  align-items: center;
  line-height: 1.4;
}
dl.faq-icon {
  margin-top: 1rem;
}