<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
<title>文化祭 模擬店マップ（中央揃え・5フロア）</title>
<!-- CSS -->
<link rel="stylesheet" href="fes.css" />
<!-- Panzoom（CDN）-->
<script src="https://unpkg.com/@panzoom/panzoom/dist/panzoom.min.js"></script>
</head>
<body>
<header class="site-header" role="banner">
<h1>文化祭 模擬店マップ</h1>
<p class="sub">スマホ向け｜1F〜4F・体育館｜ピンチでズーム</p>
</header>
<!-- Tabs: 1F〜4F と Gym -->
<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>
<!-- Main: map wrapper (中央揃え) -->
<main class="main" role="main">
<div class="map-wrapper">
<div id="map" class="map-container" aria-live="polite" aria-label="文化祭マップ">
<img id="mapImage" src="images/1floor.png" alt="学校見取り図 1階">
<!-- pins / tooltips inserted by script.js -->
</div>
</div>
</main>
<!-- 一覧ボタン -->
<button id="listToggle" class="list-toggle" aria-expanded="false" aria-controls="listPanel">模擬店一覧</button>
<!-- 一覧ボトムパネル -->
<div id="listPanel" class="list-panel" role="dialog" aria-hidden="true" aria-label="模擬店一覧">
<header class="list-panel-header">
<h2>模擬店一覧</h2>
<button id="closeList" class="close-btn" aria-label="閉じる一覧">✕</button>
</header>
<div id="listContent" class="list-content" tabindex="0"></div>
</div>
<script src="fes.js" defer></script>
</body>
</html>
