diff --git a/style.css b/style.css index 8c65d98..e488fef 100644 --- a/style.css +++ b/style.css @@ -9,65 +9,12 @@ } /* ============================== - 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="password"] { - width: 100%; - padding: 15px; - margin-top: 14px; - border: 2px solid #ddd; - font-size: 18px; - border-radius: 12px; -} - -.index-container input[type="text"] { - width: 100%; - padding: 15px; - margin-top: 14px; - border: 2px solid #ddd; - font-size: 18px; - 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(旧レイアウト) -============================== */ - #header { display: flex; justify-content: space-between; + align-items: center; padding: 12px 16px; background: white; border-bottom: 2px solid #b4e3c2; @@ -80,18 +27,24 @@ border: none; border-radius: 10px; color: white; + cursor: pointer; } +/* ============================== + マップ +============================== */ #map { width: 100%; height: 450px; - margin-top: 16px; + margin: 16px auto; border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,0.20); overflow: hidden; } -/* 目的地・駅情報 */ +/* ============================== + 情報ボックス(目的地・最寄り駅) +============================== */ #targetInfo, #nearestBox { margin: 16px; @@ -102,16 +55,23 @@ font-size: 15px; } +/* ============================== + セクションタイトル +============================== */ .sectionTitle { margin-left: 16px; margin-top: 25px; + margin-bottom: 10px; font-size: 18px; } -/* メンバー一覧 */ +/* ============================== + メンバー一覧 +============================== */ #memberList { list-style: none; padding: 0 16px; + margin-bottom: 20px; } #memberList li { @@ -120,7 +80,7 @@ margin: 10px 0; display: flex; justify-content: space-between; - gap: 12px; + align-items: center; border-left: 5px solid #4ba3ff; border-radius: 14px; } @@ -147,20 +107,8 @@ .online .member-icon::after { background: #22dd77; } .offline .member-icon::after { background: #ff5d5d; } -/* ピン表示 */ -.custom-pin { transform-origin: center bottom; } -.pin-wrapper { position: relative; transform: translate(-16px, -32px); } -.pin-img { width: 32px; height: 32px; } -.pin-label { - background: white; - padding: 2px 6px; - font-size: 12px; - border-radius: 6px; - border: 1px solid #ccc; -} - /* ============================== - ★ チャット欄(旧レイアウト版) + チャット欄(旧レイアウト用) ============================== */ #chatBox { background: white; @@ -189,7 +137,7 @@ #chatInput { flex: 1; padding: 12px; - font-size: 16px; + font-size: 15px; border: 2px solid #ccc; border-radius: 12px; } @@ -204,3 +152,18 @@ font-weight: bold; cursor: pointer; } + +/* ============================== + ピン(地図ラベル) +============================== */ +.custom-pin { transform-origin: center bottom; } +.pin-wrapper { position: relative; transform: translate(-16px, -32px); } +.pin-img { width: 32px; height: 32px; } +.pin-label { + background: white; + padding: 2px 6px; + border-radius: 6px; + border: 1px solid #ccc; + font-size: 12px; + white-space: nowrap; +}