diff --git a/style.css b/style.css
index 998604d..28eab28 100644
--- a/style.css
+++ b/style.css
@@ -1,32 +1,35 @@
-/* 全体の背景 */
+/* ===================================
+   📱 全体のレイアウト（スマホ対応）
+====================================== */
 body {
   margin: 0;
-  font-family: "Segoe UI", "Hiragino Sans", "Helvetica Neue", sans-serif;
-  background: linear-gradient(135deg, #9be2ff, #c7f5d9);
+  font-family: "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
+  background: linear-gradient(135deg, #aee1ff, #d6ffe3);
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 20px;
 }
 
 /* カード風コンテナ */
 .container {
-  width: 90%;
+  width: 100%;
   max-width: 450px;
-  padding: 28px;
-  background: #fff;
+  padding: 25px;
+  background: #ffffff;
   border-radius: 18px;
-  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
+  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
   text-align: center;
   animation: fadeIn 0.6s ease-out;
 }
 
 /* 見出し */
 .container h1 {
-  margin: 0 0 12px;
+  margin: 0 0 15px;
   font-size: 26px;
-  font-weight: 700;
   color: #333;
+  font-weight: 700;
 }
 
 /* 説明文 */
@@ -36,22 +39,15 @@
   font-size: 15px;
 }
 
-/* ラベル部分 */
-.group-label {
-  font-size: 17px;
-  margin-bottom: 10px;
-  color: #444;
-}
-
 /* 入力欄 */
 input[type="text"] {
-  width: 85%;
+  width: 100%;
   padding: 12px;
   margin: 8px 0;
   font-size: 16px;
-  border: 2px solid #d1d1d1;
+  border: 2px solid #ddd;
   border-radius: 10px;
-  outline: none;
+  box-sizing: border-box;
   transition: 0.2s;
 }
 
@@ -62,7 +58,7 @@
 
 /* ボタン */
 button {
-  width: 85%;
+  width: 100%;
   padding: 12px;
   font-size: 17px;
   border: none;
@@ -71,7 +67,7 @@
   background: #4ba3ff;
   color: #fff;
   font-weight: 600;
-  margin-top: 10px;
+  margin-top: 12px;
   transition: 0.25s;
 }
 
@@ -79,17 +75,27 @@
   background: #1b8af5;
 }
 
-/* 地図 */
+/* 地図表示（map4.html 用） */
 #map {
   width: 100%;
-  height: 500px;
+  height: 480px;
   margin-top: 15px;
-  border-radius: 18px;
+  border-radius: 15px;
   overflow: hidden;
-  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
+  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
 }
 
-/* フェードインアニメーション */
+/* PCでも綺麗に中央に配置 */
+@media (min-width: 900px) {
+  body {
+    padding-top: 50px;
+  }
+  .container {
+    max-width: 500px;
+  }
+}
+
+/* フェードイン */
 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(15px); }
   to { opacity: 1; transform: translateY(0); }