<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
<title>文化祭 模擬店マップ</title>
<link rel="stylesheet" href="fes.css" />
</head>
<body>
<header class="site-header" role="banner">
<h1>文化祭 模擬店マップ</h1>
<p class="sub">スマホ向け — 1F〜4F・体育館 ／ ピンをタップして詳細を確認</p>
</header>
<!-- Tabs -->
<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 area -->
<main class="main" role="main">
<div class="map-wrapper">
<div id="map" class="map" aria-live="polite" aria-label="文化祭マップ">
<img id="mapImage" src="images/1floor.png" alt="学校の見取り図 — 1階">
<!-- Pins container overlays the image -->
<div id="pins" aria-hidden="false"></div>
</div>
</div>
</main>
<!-- Bottom list toggle -->
<button id="listToggle" class="list-toggle" aria-expanded="false" aria-controls="listPanel">模擬店一覧</button>
<!-- Bottom sheet list panel -->
<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>
