/* ===== FAQ全体の枠 ===== */
.faq-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1em;
  margin-bottom: 1.5em;
  background: #fff;
}

/* ===== 質問部分 ===== */
.faq-question::before {
  content: "Q.";
  background: #0073aa;
  color: #fff;
  font-weight: bold;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  margin-right: 0.5em;
}
.faq-question {
  font-weight: bold;
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
}

/* ===== 回答部分 ===== */
.faq-answer::before {
  content: "A.";
  background: #f4f4f4;
  color: #333;
  font-weight: bold;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  margin-right: 0.5em;
}
.faq-answer {
  margin-left: 1em;
  line-height: 1.6;
  background: #fafafa;
  border-left: 4px solid #0073aa;
  padding: 0.8em;
  border-radius: 6px;
}

/* ===== FAQ専用の吹き出し（コメント文用） ===== */
.faq-bubble {
  display: inline-block;
  background: #eef7ff;
  border-radius: 12px;
  padding: 0.6em 1em;
  margin-top: 0.4em;
  font-size: 0.9rem;
  color: #333;
  position: relative;
  line-height: 1.6;
}
.faq-bubble::after {
  content: "";
  position: absolute;
  top: 14px;
  left: -12px;
  border-width: 8px 12px 8px 0;
  border-style: solid;
  border-color: transparent #eef7ff transparent transparent;
}

/* ===== 左向き三角付き吹き出し（コメント文単体用） ===== */
.faq-balloon-left {
  position: relative;
  background: #f0f4ff;
  border: 1px solid #cce0ff;
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin-top: 1rem;
  color: #333;
  line-height: 1.6;
}
.faq-balloon-left::before {
  content: "";
  position: absolute;
  top: 1.2rem;
  left: -16px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-right-color: #f0f4ff;
}
.faq-balloon-left::after {
  content: "";
  position: absolute;
  top: 1.2rem;
  left: -18px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-right-color: #cce0ff;
}

/* ===== アイコンと吹き出しの横並び調整 ===== */
.faq-flex {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 1.5em;
}

/* ===== FAQアイコン ===== */
.faq-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #0073aa;
  margin-top: 12px;
}

/* ===== まとめ部分（吹き出しではなく通常枠） ===== */
.faq-summary {
  margin-top: 1em;
  padding: 0.8em 1em;
  background: #f9f9f9;
  border-left: 4px solid #0073aa;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #333;
}

/* ===== メリット／デメリット比較枠 ===== */
.faq-compare-card {
  border-radius: 8px;
  padding: 0.7em 0.9em;
  margin-bottom: 0.9em;
}

.merit-card {
  background: #f0fff4; /* 淡いグリーン */
  border: 1px solid #a3d9a5;
}

.demerit-card {
  background: #fff5f7; /* 淡いピンク */
  border: 1px solid #f3c2d3;
}

.faq-compare-title {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 0.2em; /* 距離を詰める */
  line-height: 1.3;
  color: #0073aa;
}

.entry-content .faq-compare-list {
  list-style: none !important; /* 中黒を消す */
  padding-left: 0 !important;
  margin: 0.2em 0 !important;
}

.entry-content .faq-compare-list li::marker {
  content: "" !important;
}

.entry-content .faq-compare-list li {
  position: relative;
  margin: 0.25em 0;
  line-height: 1.6;
  padding-left: 1.4em; /* アイコン分の余白 */
}

.faq-compare-list.merit li::before {
  content: "✔";
  color: #2b8a3e;
  position: absolute;
  left: 0;
  top: 0.1em;
}

.faq-compare-list.demerit li::before {
  content: "⚠";
  color: #d88c9a;
  position: absolute;
  left: 0;
  top: 0.1em;
}

/* ===== モバイル対応（600px以下で縦並びに） ===== */
@media screen and (max-width: 600px) {
  .faq-flex {
    flex-direction: column;
    align-items: flex-start;
  }
  .faq-icon {
    margin-top: 0;
  }
  .faq-compare-card {
    padding: 0.6em 0.8em;
    margin-bottom: 0.8em;
  }
  .faq-compare-title {
    margin-bottom: 0.18em;
  }
  .faq-compare-list li {
    padding-left: 1.3em;
  }
}