diff --git a/style.css b/style.css
index 17eebec..547d121 100644
--- a/style.css
+++ b/style.css
@@ -1,14 +1,14 @@
-/* ===================================
-   共通設定
-====================================== */
+/* ==============================
+   共通
+============================== */
 body {
   margin: 0;
   font-family: "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
 }
 
-/* ===================================
-   index.html 専用デザイン
-====================================== */
+/* ==============================
+   index.html 用
+============================== */
 body.index-page {
   background: linear-gradient(135deg, #9be2ff, #c7f5d9);
   min-height: 100vh;
@@ -41,7 +41,6 @@
   color: #555;
 }
 
-/* 入力欄 */
 .index-container input[type="text"] {
   width: 100%;
   padding: 12px;
@@ -57,7 +56,6 @@
   box-shadow: 0 0 6px rgba(75,163,255,0.4);
 }
 
-/* ボタン */
 .index-container button {
   width: 100%;
   padding: 12px;
@@ -67,24 +65,32 @@
   background: #4ba3ff;
   color: white;
   cursor: pointer;
+  transition: 0.25s;
 }
+
 .index-container button:hover {
   background: #1b8af5;
 }
 
-/* ===================================
-   map4.html 専用デザイン（レイアウト分離）
-====================================== */
-.map-layout {
+/* ==============================
+   map4.html 用
+============================== */
+body.map-page {
+  background: linear-gradient(135deg, #d7efff, #e8ffef);
+  min-height: 100vh;
   padding: 20px;
+  box-sizing: border-box;
+}
+
+.map-layout {
   max-width: 1200px;
-  margin: auto;
+  margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 20px;
 }
 
-/* PCでは横並びに変更 */
+/* PC では横並び */
 @media (min-width: 900px) {
   .map-layout {
     flex-direction: row;
@@ -95,81 +101,36 @@
   }
   .member-area {
     width: 30%;
-    max-height: 90vh;
-    overflow-y: auto;
   }
 }
 
-/* 地図カード */
-.map-area {
-  background: #fff;
-  padding: 15px;
-  border-radius: 12px;
-  box-shadow: 0 0 12px rgba(0,0,0,0.1);
-}
-
-#map {
-  width: 100%;
-  height: 450px;
-  border-radius: 12px;
-  margin-top: 10px;
-}
-
-/* メンバー一覧 */
-.member-area {
-  background: #fff;
-  padding: 15px;
-  border-radius: 12px;
-  box-shadow: 0 0 12px rgba(0,0,0,0.1);
-}
-
-#memberList li {
-  font-size: 17px;
-  margin-bottom: 10px;
-  border-bottom: 1px solid #ddd;
-}
-
-/* ===================================
-   フェードインアニメーション
-====================================== */
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(15px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-/* ===================================
-   map4.html 追加デザイン
-====================================== */
-
-body.map-page {
-  background: linear-gradient(135deg, #d7efff, #e8ffef);
-  min-height: 100vh;
-  padding: 25px;
-}
-
-/* 共通カードデザイン */
+/* カード共通 */
 .card {
   background: #fff;
-  padding: 20px;
+  padding: 18px;
   border-radius: 18px;
   box-shadow: 0 12px 30px rgba(0,0,0,0.12);
-  animation: fadeIn 0.6s ease-out;
 }
 
-/* アニメーション遅延（右側のメンバー一覧） */
-.fadeInDelay {
-  animation-delay: 0.3s;
+/* 地図エリア */
+.map-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-/* タイトル */
 .map-area h1 {
-  margin-top: 0;
-  font-size: 26px;
+  margin: 0;
+  font-size: 24px;
   color: #333;
-  text-align: center;
 }
 
-/* 地図部分 */
+.group-label {
+  margin-top: 8px;
+  font-size: 15px;
+  color: #555;
+}
+
 #map {
   width: 100%;
   height: 480px;
@@ -178,51 +139,36 @@
   box-shadow: 0 4px 20px rgba(0,0,0,0.15);
 }
 
-/* メンバーエリアのタイトル */
-.member-area h2 {
-  font-size: 22px;
-  margin-top: 0;
-  color: #444;
-  text-align: center;
-}
-
-/* メンバー一覧 */
-#memberList {
-  padding-left: 0;
-  list-style: none;
-}
-
-#memberList li {
-  background: #f9fbff;
-  padding: 10px;
-  margin-bottom: 10px;
-  border-radius: 10px;
-  font-size: 17px;
-  border-left: 5px solid #4ba3ff;
-}
-
-/* アニメーション（フェードイン） */
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
 /* 退出ボタン */
 .exit-btn {
-  padding: 8px 15px;
+  padding: 6px 14px;
   background: #ff6b6b;
   border: none;
   color: white;
-  border-radius: 10px;
+  border-radius: 999px;
   cursor: pointer;
-  font-size: 14px;
-  transition: 0.3s;
+  font-size: 13px;
+  transition: 0.2s;
 }
 .exit-btn:hover {
   background: #ff3b3b;
 }
 
-/* メンバーアイテム */
+/* メンバーエリア */
+.member-area h2 {
+  margin-top: 0;
+  font-size: 20px;
+  text-align: center;
+  color: #444;
+}
+
+#memberList {
+  list-style: none;
+  padding-left: 0;
+  margin: 10px 0 0;
+}
+
+/* メンバー1行 */
 #memberList li {
   display: flex;
   align-items: center;
@@ -242,15 +188,15 @@
   transform: translateX(4px);
 }
 
-/* メンバーアイコン */
+/* メンバーアイコン丸 */
 .member-icon {
-  width: 25px;
-  height: 25px;
+  width: 24px;
+  height: 24px;
   background: #4ba3ff;
   border-radius: 50%;
 }
 
-/* オンライン状態を色で表示 */
+/* オンライン・オフライン色 */
 .online {
   border-left-color: #48d96c !important;
 }
@@ -258,11 +204,25 @@
   border-left-color: #f15b5b !important;
 }
 
-/* 跳ねるアニメート（ピン） */
+/* アニメーション */
+.fadeIn {
+  animation: fadeIn 0.6s ease-out;
+}
+.fadeInDelay {
+  animation: fadeIn 0.6s ease-out;
+  animation-delay: 0.25s;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(15px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ピンのバウンド */
 @keyframes bounce {
-  0% { transform: translateY(0); }
-  30% { transform: translateY(-12px); }
-  60% { transform: translateY(0); }
+  0%   { transform: translateY(0); }
+  30%  { transform: translateY(-12px); }
+  60%  { transform: translateY(0); }
 }
 .bounce-pin {
   animation: bounce 0.6s ease-out;