Accordion 1 — アコーディオン（FAQ・排他制御）

:root {
  --ac-primary: #2B7FE8;
  --ac-border:  #E5E9EF;
  --ac-radius:  8px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: sans-serif;
  padding: 24px;
  color: #1A2332;
}

/* アコーディオン全体のコンテナ */
.ac-root {
  border: 1.5px solid var(--ac-border);
  border-radius: var(--ac-radius);
  overflow: hidden;
  max-width: 520px;
  background: #fff;
}

/* 各アイテム */
.ac-item { border-bottom: 1px solid var(--ac-border); }
.ac-item:last-child { border-bottom: none; }

/* ヘッダーボタン */
.ac-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1A2332;
  text-align: left;
  transition: background 0.15s;
}

.ac-header:hover { background: #F8FAFC; }

/* 展開中のヘッダー */
.ac-header[aria-expanded="true"] {
  color: var(--ac-primary);
  background: #EFF6FF;
}

/* タイトルテキスト */
.ac-title { flex: 1; line-height: 1.5; }

/* アイコン（+/-） */
.ac-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #E5E9EF;
  color: #5A6A7A;
  font-size: 15px;
  font-weight: 700;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}

.ac-icon::before { content: '+'; }

.ac-header[aria-expanded="true"] .ac-icon {
  background: var(--ac-primary);
  color: #fff;
}

.ac-header[aria-expanded="true"] .ac-icon::before { content: '\2212'; }

/* 開閉エリア（max-height でアニメーション） */
.ac-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* コンテンツ */
.ac-content {
  padding: 4px 20px 20px;
  font-size: 14px;
  color: #5A6A7A;
  line-height: 1.7;
}

.ac-content p { margin: 0; }

// アコーディオンを初期化する
// data-exclusive="true" のとき排他制御モード（1つだけ展開）
document.querySelectorAll('.ac-root').forEach(function(root) {
  initAccordion(root);
});

function initAccordion(root) {
  var isExclusive = root.dataset.exclusive === 'true';

  root.querySelectorAll('.ac-header').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var isOpen = btn.getAttribute('aria-expanded') === 'true';

      // 排他制御: 開こうとしているとき他のアイテムを閉じる
      if (isExclusive && !isOpen) {
        root.querySelectorAll('.ac-header').forEach(function(otherBtn) {
          if (otherBtn !== btn) {
            closeItem(otherBtn);
          }
        });
      }

      // 対象アイテムをトグル
      if (isOpen) {
        closeItem(btn);
      } else {
        openItem(btn);
      }
    });
  });
}

// アイテムを開く
function openItem(btn) {
  var body = btn.closest('.ac-item').querySelector('.ac-body');
  btn.setAttribute('aria-expanded', 'true');
  body.style.maxHeight = body.scrollHeight + 'px';
}

// アイテムを閉じる
function closeItem(btn) {
  var body = btn.closest('.ac-item').querySelector('.ac-body');
  btn.setAttribute('aria-expanded', 'false');
  body.style.maxHeight = '0';
}