シャープなアウトライン風のアコーディオンメニュー

<div class="accordion-container">
  <button class="accordion-btn">Q. アコーディオンメニューとは？</button>
  <div class="accordion-content">
    <p>A. クリックで開閉できるコンテンツ領域のことです。</p>
  </div>

  <button class="accordion-btn">Q. ボタンと同じスタイルですか？</button>
  <div class="accordion-content">
    <p>A. はい、同じアウトラインデザインで統一しています。</p>
  </div>
</div>

.accordion-container {
  width: 90%;
  max-width: 600px;
  margin: 50px auto;
}

.accordion-btn {
  width: 100%;
  text-align: left;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  border: 2px solid #333;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  margin-bottom: 10px;
}

.accordion-btn:hover {
  background-color: #333;
  color: #fff;
}

.accordion-content {
  display: none;
  padding: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: -8px;
  margin-bottom: 20px;
  background: #f9f9f9;
  font-size: 14px;
}

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