diff --git a/fes.css b/fes.css
index 4a86b75..8ae2f4a 100644
--- a/fes.css
+++ b/fes.css
@@ -1,40 +1,45 @@
-/* Reset / base */
+/* style.css - 縦長表示版（スマホ優先 / Panzoom 対応） */
+
+/* 基本 */
 * { box-sizing: border-box; }
-html,body { height: 100%; }
+html, body { height: 100%; margin: 0; padding: 0; }
 body {
-  margin: 0;
-  font-family: "Hiragino Sans","Helvetica Neue",Arial,sans-serif;
-  background: linear-gradient(135deg,#a8edea,#fed6e3); /* 空色 → 桜色 */
-  color: #222;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  font-family: "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
-  -webkit-tap-highlight-color: transparent;
+  background: linear-gradient(135deg,#a8edea,#fed6e3); /* 青春グラデ */
+  color: #222;
 }
 
-/* Header */
+/* ヘッダー（上部） */
 .site-header {
   padding: 12px 16px;
   text-align: center;
   background: linear-gradient(90deg,#6a85b6,#bac8e0);
   color: #fff;
   box-shadow: 0 2px 6px rgba(0,0,0,0.12);
+  z-index: 50;
 }
-.site-header h1 { margin: 0; font-size: 1.2rem; }
-.site-header .sub { margin: 4px 0 0; font-size: 0.85rem; opacity: 0.95; }
+.site-header h1 { margin: 0; font-size: 1.15rem; }
+.site-header .sub { margin-top: 4px; font-size: 0.85rem; opacity: .95; }
 
-/* Tabs */
+/* タブ（ヘッダー下） */
 .tabs {
   display: flex;
   gap: 8px;
-  padding: 10px;
+  padding: 8px;
   justify-content: center;
+  background: transparent;
 }
 .tab-button {
   flex: 1;
-  max-width: 200px;
-  padding: 10px 14px;
+  max-width: 220px;
+  padding: 10px 12px;
   border: none;
   border-radius: 10px;
-  background: rgba(255,255,255,0.9);
+  background: rgba(255,255,255,0.95);
   font-size: 1rem;
   cursor: pointer;
   box-shadow: 0 2px 6px rgba(0,0,0,0.08);
@@ -45,61 +50,89 @@
   font-weight: 700;
 }
 
-/* Main / Map */
-.main { padding: 12px; display: flex; justify-content: center; }
-.map-wrapper { width: 100%; max-width: 640px; }
-.map-container {
-  position: relative;
+/* メイン：高さを残してマップを縦長に表示 （ヘッダー+タブを除いた残りを使う） */
+.main {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+}
+
+/* ラッパ：画面高さを活かす */
+.map-wrapper {
   width: 100%;
+  height: calc(100vh - (var(--header-height, 96px))); /* ヘッダー等の高さに応じて余白 */
+  /* fallback: full height on small screens */
+  max-width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  touch-action: none; /* Panzoom のジェスチャーを許可するため */
+}
+
+/* マップ本体コンテナ（image の幅に合わせる） */
+.map-container {
+  /* inline-block にして、内部 img の実寸幅に合わせることで
+     JS 側の座標計算（img.getBoundingClientRect().width）と
+     コンテナの左端が一致するようにしている */
+  display: inline-block;
+  position: relative;
+  height: 100%;               /* 画像の高さに合わせる */
   border-radius: 14px;
-  overflow: hidden;
+  overflow: visible;          /* tooltip を表示するために visible に */
   border: 3px solid rgba(255,255,255,0.9);
   box-shadow: 0 8px 24px rgba(0,0,0,0.18);
   background: #fff;
+  -webkit-tap-highlight-color: transparent;
 }
-.map-container img {
-  width: 100%;
-  height: auto;
+
+/* マップ画像：高さを基準にフィット、幅は自動 */
+.map-container img#mapImage {
+  height: 100%;
+  width: auto;
   display: block;
   user-select: none;
   -webkit-user-drag: none;
+  pointer-events: none; /* 画像自体への直接のpointerイベントを避ける（Panzoom はコンテナへ） */
 }
 
-/* Pin */
+/* Pin（指で押しやすいサイズ） */
 .pin {
   position: absolute;
   width: 44px;
   height: 44px;
-  transform: translate(-50%,-100%);
+  transform: translate(-50%, -100%);
   touch-action: manipulation;
   z-index: 6;
   transition: transform .14s ease;
+  -webkit-tap-highlight-color: transparent;
 }
 .pin:active,
-.pin:focus { transform: translate(-50%,-100%) scale(0.98); }
-.pin img { width: 100%; height: 100%; display:block; pointer-events: none; }
+.pin:focus { transform: translate(-50%, -100%) scale(.98); }
+.pin img { width: 100%; height: 100%; display: block; pointer-events: none; }
 
-/* Tooltip (カード風) */
+/* Tooltip（カード風） */
 .tooltip {
   position: absolute;
   z-index: 8;
-  transform: translate(-50%,-120%);
+  transform: translate(-50%, -120%);
   display: none;
   min-width: 200px;
   max-width: 86vw;
   border-radius: 12px;
-  box-shadow: 0 10px 28px rgba(0,0,0,0.20);
+  box-shadow: 0 10px 28px rgba(0,0,0,.20);
   background: #fff;
   overflow: hidden;
   animation: tooltipFade .22s ease;
 }
 @keyframes tooltipFade {
   from { opacity: 0; transform: translate(-50%,-125%) scale(.98); }
-  to { opacity: 1; transform: translate(-50%,-120%) scale(1); }
+  to   { opacity: 1; transform: translate(-50%,-120%) scale(1); }
 }
-.tooltip-card { display: block; }
 
-/* Header inside tooltip */
+/* カードの中身 */
+.tooltip-card { display: block; position: relative; }
 .tooltip-header {
   background: linear-gradient(90deg,#ff9a9e,#fad0c4);
   color: #fff;
@@ -108,8 +141,6 @@
   font-size: 1rem;
   text-align: left;
 }
-
-/* Body */
 .tooltip-body {
   padding: 10px 12px;
   text-align: left;
@@ -120,16 +151,16 @@
   width: 100%;
   border-radius: 8px;
   display: block;
-  margin: 6px 0;
+  margin-top: 8px;
 }
 .tooltip-body p { margin: 6px 0 0; line-height: 1.4; }
 
-/* Close button in tooltip */
+/* 吹き出し内の閉じるボタン（丸） */
 .tooltip .close-btn {
   position: absolute;
   right: 8px;
   top: 8px;
-  background: rgba(255,255,255,0.85);
+  background: rgba(255,255,255,0.9);
   border: none;
   width: 34px;
   height: 34px;
@@ -141,12 +172,12 @@
   box-shadow: 0 2px 6px rgba(0,0,0,0.12);
 }
 
-/* 一覧ボタン（固定） */
+/* 下部の「一覧」ボタン（固定） */
 .list-toggle {
   position: fixed;
   right: 12px;
   bottom: 12px;
-  z-index: 30;
+  z-index: 60;
   background: linear-gradient(90deg,#6a85b6,#bac8e0);
   color: #fff;
   border: none;
@@ -163,7 +194,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 40;
+  z-index: 70;
   background: #fff;
   border-top-left-radius: 14px;
   border-top-right-radius: 14px;
@@ -186,6 +217,8 @@
   overflow: auto;
   padding: 8px 12px 24px;
 }
+
+/* ショップリストの行 */
 .shop-item {
   display:flex;
   gap: 10px;
@@ -201,11 +234,12 @@
 .shop-title { font-weight: 700; margin: 0; font-size: 0.98rem; }
 .shop-desc { margin: 6px 0 0; font-size: 0.9rem; color:#555; }
 
-/* small screen tweaks */
+/* PC向けや大きめ画面の微調整 */
 @media (min-width: 520px) {
   .pin { width: 48px; height: 48px; }
   .tooltip { min-width: 220px; }
+  .map-wrapper { height: calc(100vh - 120px); } /* ヘッダーが大きい場合調整 */
 }
 
-/* Utility */
+/* 便利ユーティリティ */
 .hidden { display: none !important; }