diff --git a/style.css b/style.css
index 724a116..55b5293 100644
--- a/style.css
+++ b/style.css
@@ -1,20 +1,116 @@
 /* ==============================
- メンバー一覧（オンライン表示強化）
+ 共通
 ============================== */
-
-#memberList li {
-  background: #f2f6ff;
-  border-left: 5px solid #4ba3ff;
-  padding: 12px;
-  margin: 10px 0;
-  border-radius: 12px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  justify-content: space-between; /* ←オンライン文字を右寄せ */
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  font-family: "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
 }
 
+.fadeIn { animation: fadeIn .6s ease; }
+.fadeInUp { animation: fadeInUp .6s ease; }
+@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
+@keyframes fadeInUp { from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);} }
+
+/* ==============================
+ index.html
+============================== */
+body.index-page {
+  background: linear-gradient(135deg, #9be2ff, #c7f5d9);
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+}
+
+.index-container {
+  width: 92%;
+  max-width: 420px;
+  padding: 30px 20px;
+  background: white;
+  border-radius: 24px;
+  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
+  text-align: center;
+}
+
+.index-container input[type="text"] {
+  width: 100%;
+  padding: 13px;
+  margin-top: 14px;
+  border: 2px solid #ddd;
+  font-size: 17px;
+  border-radius: 12px;
+}
+
+.start-btn {
+  width: 100%;
+  padding: 12px;
+  margin-top: 20px;
+  font-size: 18px;
+  border-radius: 12px;
+  border: none;
+  color: white;
+  background: #4ba3ff;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+/* ==============================
+ map4.html
+============================== */
+
+body.map-page {
+  background: linear-gradient(135deg, #d7efff, #e8ffef);
+  padding: 20px;
+}
+
+.card {
+  background: white;
+  padding: 18px;
+  border-radius: 18px;
+  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
+  margin-bottom: 20px;
+}
+
+/* 横並び */
+.map-body {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+@media (min-width: 900px) {
+  .map-body { flex-direction: row; }
+  .member-area { width: 30%; }
+  .map-area { width: 70%; }
+}
+
+/* 地図 */
+#map {
+  width: 100%;
+  height: 500px;
+  border-radius: 14px;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.20);
+}
+
+/* メンバー一覧 */
+#memberList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+#memberList li {
+  background: #f2f6ff;
+  padding: 12px;
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border-left: 5px solid #4ba3ff;
+  border-radius: 14px;
+}
+
+/* 左の丸アイコン */
 .member-icon {
   width: 26px;
   height: 26px;
@@ -23,36 +119,36 @@
   position: relative;
 }
 
-/* バッジ（見やすく） */
 .member-icon::after {
   content: "";
   position: absolute;
-  bottom: -3px;
-  right: -3px;
   width: 12px;
   height: 12px;
   border-radius: 50%;
+  bottom: -3px;
+  right: -3px;
   border: 2px solid white;
 }
 
-/* 緑がオンライン */
 .online .member-icon::after { background: #22dd77; }
-
-/* 赤がオフライン */
 .offline .member-icon::after { background: #ff5d5d; }
 
-/* 「🟢オンライン / 🔴オフライン」文字 */
 .status-text {
   font-size: 14px;
-  color: #444;
   opacity: 0.8;
 }
 
+/* ピン上のラベル */
+.marker-label {
+  background: white;
+  padding: 3px 8px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  font-size: 13px;
+  white-space: nowrap;
+}
 
-/* ==============================
- かわいい退出ボタン
-============================== */
-
+/* 退出ボタン */
 .exit-btn.cute {
   padding: 10px 16px;
   border-radius: 30px;
@@ -65,8 +161,7 @@
   box-shadow: 0 4px 12px rgba(255, 100, 140, 0.4);
   transition: 0.25s;
 }
-
 .exit-btn.cute:hover {
-  transform: scale(1.07);
+  transform: scale(1.08);
   background: linear-gradient(135deg, #ff6b8c, #ff3b6f);
 }