diff --git a/style.css b/style.css
index 601aed7..b9743e7 100644
--- a/style.css
+++ b/style.css
@@ -475,3 +475,52 @@
 .status-header .stBtn:active {
   filter: brightness(0.9);
 }
+
+/* ▼ スマホ用レイアウト（幅600px以下） */
+@media (max-width: 600px) {
+  #header {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 8px;
+  }
+
+  /* グループ名などを1行コンパクトに */
+  #groupNameBox {
+    font-size: 14px;
+    line-height: 1.3;
+  }
+
+  /* ステータスボタンを折り返し可能にして圧縮 */
+  #statusButtons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    justify-content: center;
+  }
+
+  #statusButtons .stBtn {
+    padding: 4px 6px;
+    font-size: 12px;
+  }
+
+  /* 退出/解散ボタンを横並び小型化 */
+  #header button.cute {
+    padding: 6px 10px;
+    font-size: 12px;
+  }
+
+  /* メンバー一覧と地図のレイアウトも縦並びに */
+  .map-body {
+    flex-direction: column;
+  }
+
+  .member-area {
+    width: 100%;
+    margin-bottom: 10px;
+  }
+
+  #map {
+    height: 55vh;
+  }
+}