<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文化祭マップ</title>
<link rel="stylesheet" href="fes.css">
</head>
<body>
<header class="site-header">
<h1>🌸 文化祭マップ 🌸</h1>
<nav class="tabs" role="tablist" aria-label="フロア選択">
<button class="tab-button active" data-floor="1" role="tab" aria-selected="true">1階</button>
<button class="tab-button" data-floor="2" role="tab" aria-selected="false">2階</button>
<button class="tab-button" data-floor="3" role="tab" aria-selected="false">3階</button>
<button class="tab-button" data-floor="4" role="tab" aria-selected="false">4階</button>
<button class="tab-button" data-floor="5" role="tab" aria-selected="false">体育館</button>
</nav>
</header>
<main>
<div id="mapWrapper">
<div id="map">
<img id="mapImage" src="images/1floor.png" alt="文化祭マップ">
</div>
</div>
</main>
<!-- 一覧パネル -->
<button id="listToggle" aria-expanded="false" aria-controls="listPanel">一覧</button>
<aside id="listPanel" class="list-panel" aria-hidden="true">
<button id="closeList" class="close-list-btn">✕ 閉じる</button>
<div id="listContent" tabindex="0"></div>
</aside>
<script src="fes.js"></script>
</body>
</html>