const opnerBtn = document.getElementById('opnerBtn');
const targetA  = document.getElementById('targetA');

opnerBtn.addEventListener('click', () => {
  const expanded = opnerBtn.getAttribute('aria-expanded') === 'true';
  opnerBtn.setAttribute('aria-expanded', String(!expanded)); ←ボタンの属性値を状態に応じfalse/trueに
  targetA.hidden = expanded;←ボタンに合わせてfalse/trueに
});

const tabs   = document.querySelectorAll('[role="tab"]');
const panels = document.querySelectorAll('[role="tabpanel"]');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // タブの選択状態を更新
    tabs.forEach(t => t.setAttribute('aria-selected', 'false')); ←タブボタンを全てfalse
    tab.setAttribute('aria-selected', 'true'); ←対象のタブボタンのみtrue

    // 対応するパネルの表示制御
    panels.forEach(panel => panel.hidden = true); ←コンテンツを全て非表示
    const panelId = tab.getAttribute('aria-controls');
    document.getElementById(panelId).hidden = false; ←対象のコンテンツのみ表示
  });
});

const menuBtn = document.getElementById('menuBtn');
const mainNav = document.getElementById('mainNav');

menuBtn.addEventListener('click', () => {
  const expanded = menuBtn.getAttribute('aria-expanded') === 'true';
  menuBtn.setAttribute('aria-expanded', String(!expanded)); ←ボタンの属性値を状態に応じfalse/trueに
  mainNav.hidden = expanded; ←対象のコンテンツのみ表示
});

const openBtn = document.getElementById('openModal');
const closeBtn = document.getElementById('closeModal');
const modal = document.getElementById('modal');

openBtn.addEventListener('click', () => {
  modal.hidden = false;
  modal.focus(); // モーダルにフォーカス
});

closeBtn.addEventListener('click', () => {
  modal.hidden = true;
  openBtn.focus(); // 元のボタンにフォーカスを戻す
});