diff --git a/style.css b/style.css index 165fe83..ad29f4c 100644 --- a/style.css +++ b/style.css @@ -1,15 +1,13 @@ -/* ============================== - 共通 -============================== */ +/* 共通 */ body { margin: 0; font-family: "Hiragino Sans", "Helvetica Neue", Arial, sans-serif; - user-select: none; +} +input, button { + box-sizing: border-box; } -/* ============================== - index.html -============================== */ +/* index */ body.index-page { background: linear-gradient(135deg, #9be2ff, #c7f5d9); min-height: 100vh; @@ -20,146 +18,103 @@ } .index-container { - width: 95%; - max-width: 450px; + width: 90%; + max-width: 420px; padding: 25px; background: #ffffff; - border-radius: 18px; + border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,0.12); - text-align: center; - animation: fadeIn 0.6s ease-out; -} - -.index-container h1 { - margin: 0 0 15px; - font-size: 26px; - font-weight: 700; - color: #333; } .index-container input[type="text"] { width: 100%; padding: 12px; - margin: 10px 0; - font-size: 17px; + margin-top: 8px; + border-radius: 10px; border: 2px solid #ddd; - border-radius: 10px; + font-size: 16px; } -.index-container button { - width: 100%; - padding: 12px; - font-size: 18px; - border: none; - border-radius: 10px; - background: #4ba3ff; - color: white; - cursor: pointer; -} - -/* ============================== - map4.html -============================== */ +/* map4 */ body.map-page { background: linear-gradient(135deg, #d7efff, #e8ffef); - min-height: 100vh; - box-sizing: border-box; + padding: 16px; } -/* レイアウト */ -.map-layout { - max-width: 1200px; - margin: 0 auto; - display: flex; - flex-direction: column; - gap: 20px; -} - -/* PC版 */ -@media (min-width: 900px) { - .map-layout { - flex-direction: row; - align-items: flex-start; - } - .map-area { - width: 70%; - } - .member-area { - width: 30%; - } -} - -/* カード */ -.card { - background: #fff; - border-radius: 18px; - box-shadow: 0 12px 30px rgba(0,0,0,0.12); -} - -/* 地図用パディング(ここだけ適用) */ -.card-content { - padding: 18px; -} - -/* 地図構造 */ -#map-wrapper { - padding: 0; - margin: 0; -} - +/* ★ flexの外にある地図ブロック(これが重要) */ #map { width: 100%; height: 480px; - display: block; + margin: 16px 0; + border-radius: 14px; + box-shadow: 0 4px 18px rgba(0,0,0,0.20); +} + +/* カード共通 */ +.card { + background: white; + padding: 16px; + border-radius: 16px; + box-shadow: 0 4px 18px rgba(0,0,0,0.12); + margin-bottom: 16px; +} + +/* メンバー */ +.member-area ul { + list-style: none; + padding: 0; +} + +.member-area li { + background: #f9fbff; + padding: 12px; + margin-bottom: 10px; + border-left: 5px solid #4ba3ff; border-radius: 10px; - box-shadow: 0 4px 20px rgba(0,0,0,0.15); + cursor: pointer; + display: flex; + align-items: center; + gap: 10px; } -/* メンバー一覧 */ -.member-area h2 { - text-align: center; -} - -/* メンバーアイコン */ +/* アイコン */ .member-icon { - width: 28px; - height: 28px; + width: 26px; + height: 26px; border-radius: 50%; - background: linear-gradient(135deg, #6db9ff, #4a90e2); - position: relative; + background: #4ba3ff; } /* オンライン/オフライン */ .online .member-icon::after { content: ""; position: absolute; - right: -4px; - bottom: -4px; - width: 12px; - height: 12px; + right: -5px; + bottom: -5px; + width: 10px; + height: 10px; + background: #1ed760; border-radius: 50%; - background: #35cc62; border: 2px solid white; } .offline .member-icon::after { content: ""; position: absolute; - right: -4px; - bottom: -4px; - width: 12px; - height: 12px; + right: -5px; + bottom: -5px; + width: 10px; + height: 10px; + background: #ff4d4d; border-radius: 50%; - background: #ff6b6b; border: 2px solid white; } /* fadeIn */ .fadeIn { - animation: fadeIn 0.6s ease-out; + animation: fadeIn 0.5s ease-out; } - @keyframes fadeIn { - from { opacity: 0; transform: translateY(15px); } + from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }