タブみたいに並ぶスライドアコーディオン

<div class="accordion-tabstyle">
  <div class="tab-buttons">
    <button class="accordion-question active">Q. サイトに馴染む？</button>
    <button class="accordion-question">Q. この構造のメリットは？</button>
    <button class="accordion-question">Q. どんなジャンル向き？</button>
  </div>

  <div class="accordion-answer-wrapper">
    <div class="accordion-answer" style="display: block;">
      <p>A. はい。タブ風デザインなので、シンプルなUIにも自然に溶け込みます。</p>
    </div>
    <div class="accordion-answer">
      <p>A. タブ形式で見た目がスッキリし、かつ1つずつ表示できるのが利点です。</p>
    </div>
    <div class="accordion-answer">
      <p>A. ポートフォリオ、LP、製品紹介など、見た目を整えたい場所におすすめです。</p>
    </div>
  </div>
</div>

.accordion-tabstyle {
  max-width: 700px;
  margin: 60px auto;
  font-family: 'Noto Sans JP', sans-serif;
}

.tab-buttons {
  display: flex;
  border-bottom: 2px solid #ccc;
  gap: 10px;
  overflow-x: auto;
  margin-bottom: 20px;
}

.accordion-question {
  flex-shrink: 0;
  background: #f5f5f5;
  border: none;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  transition: background 0.3s;
}

.accordion-question.active {
  background: #333;
  color: #fff;
}

.accordion-answer-wrapper {
  border: 1px solid #ddd;
  padding: 20px;
  background: #fff;
  border-radius: 0 0 6px 6px;
}

.accordion-answer {
  display: none;
  font-size: 15px;
  color: #444;
  line-height: 1.7;
}

document.addEventListener('DOMContentLoaded', function () {
  const questions = document.querySelectorAll('.accordion-tabstyle .accordion-question');
  const answers = document.querySelectorAll('.accordion-tabstyle .accordion-answer');

  questions.forEach((btn, index) => {
    btn.addEventListener('click', () => {
      // ボタンのactive切り替え
      questions.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');

      // 対応する答えを表示
      answers.forEach((ans, i) => {
        ans.style.display = i === index ? 'block' : 'none';
      });
    });
  });
});