diff --git a/style.css b/style.css
index dfd95fa..48f8fc8 100644
--- a/style.css
+++ b/style.css
@@ -91,7 +91,9 @@
   box-shadow: 0 4px 20px rgba(0,0,0,0.20);
 }
 
-/* メンバー一覧 */
+/* ==============================
+ メンバー一覧
+============================== */
 #memberList {
   list-style: none;
   padding: 0;
@@ -99,24 +101,32 @@
 }
 
 #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;
+  gap: 10px;
+  padding: 12px;
+  margin: 10px 0;
+  background: #f5f7ff;
   border-radius: 14px;
+  border-left: 5px solid #4ba3ff;
+  transition: background 0.2s linear;
+}
+
+#memberList li.online {
+  background: #e9f8ff;
+}
+#memberList li.offline {
+  background: #f0f0f0;
 }
 
 .member-icon {
+  position: relative;
   width: 26px;
   height: 26px;
   border-radius: 50%;
+  flex-shrink: 0;
 }
 
-/* オンラインバッジ */
 .member-icon::after {
   content: "";
   position: absolute;
@@ -131,19 +141,16 @@
 .online .member-icon::after { background: #22dd77; }
 .offline .member-icon::after { background: #ff5d5d; }
 
-.status-text {
-  font-size: 14px;
-  opacity: 0.8;
-}
-
-/* ピン（ズレ防止・固定サイズ） */
+/* ==============================
+ ピンのレイアウト
+============================== */
 .custom-pin {
   transform-origin: center bottom;
 }
 
 .pin-wrapper {
   position: relative;
-  transform: translate(-16px, -32px); /* ピンの先端位置に合わせる */
+  transform: translate(-16px, -32px);
 }
 
 .pin-img {
@@ -162,7 +169,9 @@
   white-space: nowrap;
 }
 
-/* 可愛い退出ボタン */
+/* ==============================
+ 退出ボタン（可愛い）
+============================== */
 .exit-btn.cute {
   padding: 10px 16px;
   border-radius: 30px;
@@ -181,46 +190,20 @@
 }
 
 /* ==============================
-   スマホ時（900px 未満）は
-   マップ → メンバー一覧 の順番にする
+ スマホ表示の順番
 ============================== */
 @media (max-width: 899px) {
   .map-body {
     display: flex;
     flex-direction: column;
   }
-
-  /* 順番を入れ替える */
-  .map-area {
-    order: 1;
-  }
-  .member-area {
-    order: 2;
-  }
+  .map-area { order: 1; }
+  .member-area { order: 2; }
 }
 
-.member-icon {
-  position: relative;    /* ← これが必須！ */
-  width: 26px;
-  height: 26px;
-  border-radius: 50%;
-}
-
-.member-icon::after {
-  content: "";
-  position: absolute;
-  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; }
-
-/* 一番近い駅表示用ボックス */
+/* ==============================
+ 一番近い駅
+============================== */
 .nearest-box {
   margin-top: 12px;
   padding: 10px 12px;
@@ -231,98 +214,57 @@
   border-left: 4px solid #4ba3ff;
 }
 
-.input-box {
-  width: 100%;
-  padding: 13px;
-  margin-top: 14px;
-  border: 2px solid #ddd;
-  font-size: 17px;
-  border-radius: 12px;
+/* ==============================
+ ★ チャット欄（デザイン統一版）
+============================== */
+
+#chatBox {
+  background: #ffffff;
+  padding: 14px;
+  border-radius: 16px;
+  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
+  margin-top: 20px;
 }
 
-/* メンバーがチカチカしないよう固定レイアウト化 */
-#memberList li {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-
-  background: #f5f7ff;
-  transition: background 0.2s linear; /* ← ゆるい色の変化だけ */
-}
-
-#memberList li.online {
-  background: #e9f8ff; /* 色のみ変える */
-}
-
-#memberList li.offline {
-  background: #f0f0f0; /* 色のみ変える */
-}
-
-/* 位置が変わらないアイコン */
-.member-icon {
-  width: 26px;
-  height: 26px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-#memberList li {
-  display: flex;
-  align-items: center;
-  gap: 10px;
+#chatList {
+  height: 200px;
   padding: 10px;
-  background: #f8f9ff;
-  transition: background 0.2s linear;
+  background: #f7faff;
   border-radius: 10px;
-}
-
-#memberList li.online {
-  background: #e9f8ff;
-}
-
-#memberList li.offline {
-  background: #f0f0f0;
-}
-
-.member-icon {
-  width: 26px;
-  height: 26px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-#chat {
-  width: 100%;
-  height: 220px;
-  background: #fff;
-  border-top: 1px solid #ccc;
-  padding: 5px;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.chat-list {
-  height: 160px;
+  border: 1px solid #d0d8e6;
   overflow-y: auto;
+  margin-bottom: 10px;
   font-size: 14px;
 }
 
-.chat-input-area {
+#chatList div {
+  padding: 4px 0;
+}
+
+#chatInputArea {
   display: flex;
-  gap: 5px;
+  gap: 8px;
 }
 
 #chatInput {
   flex: 1;
-  padding: 8px;
+  padding: 10px;
   font-size: 14px;
+  border: 2px solid #ddd;
+  border-radius: 12px;
 }
 
 #chatSend {
-  padding: 8px 12px;
-  font-size: 14px;
-  background: #4CAF50;
-  color: white;
+  padding: 10px 14px;
+  background: #4caf50;
   border: none;
-  border-radius: 4px;
+  border-radius: 12px;
+  color: white;
+  font-weight: bold;
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+#chatSend:hover {
+  background: #3d9a44;
 }