バッジ風アイコン＋背景色切り替え＋スライド開閉

<div class="accordion-badge">
  <div class="accordion-item">
    <button class="accordion-question">
      <span class="badge">Q</span>
      登録は無料ですか？
    </button>
    <div class="accordion-answer">
      <div class="answer-row">
        <span class="badge answer">A</span>
        <p>はい、すべての基本機能を無料でご利用いただけます。</p>
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <button class="accordion-question">
      <span class="badge">Q</span>
      スマホでも使えますか？
    </button>
    <div class="accordion-answer">
      <div class="answer-row">
        <span class="badge answer">A</span>
        <p>はい、スマートフォンやタブレットにも対応しています。</p>
      </div>
    </div>
  </div>
</div>

.accordion-badge {
  max-width: 640px;
  margin: 40px auto;
  font-family: sans-serif;
}

.accordion-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
  background: #fff;
  transition: background 0.3s;
}

.accordion-question {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  gap: 12px;
  transition: background-color 0.2s ease;
}

.accordion-question:hover {
  background-color: #f5f5f5;
}

.accordion-question.open {
  background-color: #eef2ff;
}

.badge {
  display: inline-block;
  background: #6366f1;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border-radius: 999px;
  padding: 4px 10px;
  min-width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.badge.answer {
  background: #10b981;
}

.accordion-answer {
  display: none;
  padding: 14px 20px 20px;
  background-color: #f9fafb;
  font-size: 14px;
  color: #444;
  border-top: 1px solid #ddd;
}

.answer-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.answer-row p {
  margin: 0;
  line-height: 1.6;
}

document.querySelectorAll('.accordion-question').forEach(button => {
  button.addEventListener('click', () => {
    const content = button.nextElementSibling;
    const isOpen = content.style.display === 'block';
    content.style.display = isOpen ? 'none' : 'block';
    button.classList.toggle('open', !isOpen);
  });
});