/* ============================================================ simple info map - スタイル ============================================================ */ :root { --panel-h: 32vh; --logo-blue: #1769e0; --bg: #f4f6f8; --ink: #2c3e50; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans JP", "Segoe UI", Roboto, sans-serif; color: var(--ink); -webkit-tap-highlight-color: transparent; } #app { display: flex; flex-direction: column; height: 100%; overflow: hidden; } /* ---- 地図エリア ---- */ #map-wrap { position: relative; flex: 1 1 auto; min-height: 0; } #map { position: absolute; inset: 0; } /* トークン未設定などのお知らせ */ #map-overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; text-align: center; background: #eef2f6; color: #50627a; padding: 24px; z-index: 5; font-size: 15px; line-height: 1.7; } #map-overlay.show { display: flex; } /* ---- 左上ロゴ（仮：青い四角＋白文字） ---- */ #logo { position: absolute; top: 12px; left: 12px; z-index: 10; background: var(--logo-blue); color: #fff; border-radius: 10px; padding: 7px 11px; box-shadow: 0 2px 8px rgba(0,0,0,.25); line-height: 1.15; user-select: none; } #logo .logo-main { font-weight: 800; font-size: 14px; letter-spacing: .2px; } #logo .logo-sub { font-size: 11px; opacity: .92; } /* ---- 全国版へ戻るボタン（地域版の左上・ロゴ直下） ---- */ #to-national { position: absolute; top: 60px; left: 12px; z-index: 10; display: inline-flex; align-items: center; gap: 5px; background: #fff; color: var(--logo-blue, #1769e0); border: 1.5px solid var(--logo-blue, #1769e0); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 700; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.18); cursor: pointer; transition: transform .12s ease, background .12s ease; } #to-national:hover { transform: translateY(-1px); background: #f3f7ff; } #to-national .tn-globe { font-size: 13px; } /* ---- 「公開前ページ」バッジ（手元で開いた時だけ・左下） ---- */ #prepub-badge { position: absolute; left: 12px; top: 94px; z-index: 30; background: #e8453c; color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .06em; padding: 6px 14px; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 3px 12px rgba(0,0,0,.35); pointer-events: none; user-select: none; } /* ===== 全国版 → 地域 の登場演出（白→街） ===== */ /* enter-fade.js が に from-national を付与。 最初の描画からこの白で全画面を覆い、地図のちらつき（フラッシュ）を防ぐ。 app.js が地図のloadを受けたら from-national を外してこの白を消す。 アイコンは出さない（切り替わりの瞬間を真っ白にして点滅を防ぐ設計）。 */ html.from-national::before { content: ""; position: fixed; inset: 0; background: #fff; z-index: 8999; pointer-events: none; } /* アニメーション用の白オーバーレイ（::before の上）。app.js が 0.3秒でフェードアウト。 */ #enter-fade { position: fixed; inset: 0; background: #fff; z-index: 9000; opacity: 1; pointer-events: none; transition: opacity 0.3s ease; /* 白は 0.3s */ } #enter-fade.hide { opacity: 0; } /* ---- 右上 言語切替 ---- */ #lang { position: absolute; top: 12px; right: 12px; z-index: 10; } /* 掲載ポリシーボタンがある時は、言語ボタン・全画面ボタンをその下にずらす */ #app.has-policy #lang { top: 44px; } #app.has-policy #fullscreen-fab { top: 88px; } /* ---- 右上 掲載ポリシーボタン（言語ボタンの上に固定・小さめ） ---- */ #policy-fab { position: absolute; top: 12px; right: 12px; z-index: 11; background: #fff; border: 1px solid #d6dde6; border-radius: 999px; padding: 3px 8px; font-size: 10.5px; cursor: pointer; text-decoration: none; box-shadow: 0 1px 5px rgba(0,0,0,.15); display: flex; align-items: center; gap: 4px; color: var(--ink); white-space: nowrap; opacity: .9; } #policy-fab:hover { background: #f3f6fa; opacity: 1; } #policy-fab .pf-icon { font-size: 11px; line-height: 1; } #policy-fab .pf-label { font-weight: 700; } @media (max-width: 380px) { #policy-fab .pf-label { display: none; } } #lang-btn { background: #fff; border: 1px solid #d6dde6; border-radius: 999px; padding: 7px 12px; font-size: 13px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.15); display: flex; align-items: center; gap: 6px; } #lang-btn:hover { background: #f3f6fa; } #lang-menu { position: absolute; top: 44px; right: 0; width: 190px; max-height: 60vh; overflow-y: auto; background: #fff; border: 1px solid #e1e7ee; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.22); padding: 6px; display: none; } #lang-menu.open { display: block; } .lang-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: none; border-radius: 8px; font-size: 14px; text-align: left; cursor: pointer; color: var(--ink); } .lang-item:hover { background: #f0f4f9; } .lang-item.active { background: #e7f0fe; font-weight: 700; } .lang-item .flag { font-size: 18px; } /* ---- お知らせトースト（範囲外など） ---- */ #toast { position: absolute; left: 50%; top: 64px; transform: translateX(-50%) translateY(-12px); background: rgba(30,40,55,.92); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 13px; z-index: 30; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; max-width: 86%; text-align: center; } #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---- 現在地ボタン（特別 / 右下フロート） ---- */ #locate-fab { position: absolute; left: 14px; bottom: 20px; z-index: 12; width: 56px; height: 56px; border-radius: 50%; border: none; background: #fff; color: #2d98da; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.28); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; } #locate-fab:active { transform: scale(.94); } #locate-fab svg { width: 24px; height: 24px; } #locate-fab .fab-label { font-size: 8.5px; font-weight: 700; } #locate-fab.loading { color: #9aa7b4; } /* 全画面表示ボタン（言語切替の下） */ #fullscreen-fab { position: absolute; top: 56px; right: 12px; z-index: 11; width: 38px; height: 38px; border-radius: 9px; border: none; background: #fff; color: #2d3a4b; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.22); display: flex; align-items: center; justify-content: center; } #fullscreen-fab:hover { background: #f3f6fa; } #fullscreen-fab:active { transform: scale(.94); } #fullscreen-fab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } #fullscreen-fab .fs-exit { display: none; } body.is-fullscreen #fullscreen-fab .fs-enter { display: none; } body.is-fullscreen #fullscreen-fab .fs-exit { display: block; } /* ---- 下部パネル（表示切替ボタン群） ---- */ #panel { flex: 0 0 var(--panel-h); background: var(--bg); border-top: 1px solid #dfe5ec; overflow-y: auto; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 10px rgba(0,0,0,.06); } #btn-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); } .cat-btn { --c: #888; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: #fff; border: 1.5px solid #e3e9f0; border-radius: 12px; padding: 8px 4px; cursor: pointer; min-height: 64px; transition: transform .08s, background .18s, border-color .18s, color .18s; color: var(--c); } .cat-btn:active { transform: scale(.95); } .cat-btn .ic { width: 26px; height: 26px; color: var(--c); transition: color .18s; } .cat-btn .ic svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cat-btn .lbl { font-size: 10.5px; line-height: 1.2; color: var(--ink); text-align: center; word-break: break-word; max-width: 100%; } /* 押した（ON）状態：ボタンがカテゴリ色に、アイコンが白に反転 */ .cat-btn.active { background: var(--c); border-color: var(--c); box-shadow: 0 3px 10px color-mix(in srgb, var(--c) 45%, transparent); } .cat-btn.active .ic { color: #fff; } .cat-btn.active .lbl { color: #fff; font-weight: 700; } /* ---- 地図上のPOIマーカー ---- ※ 位置決めの transform は Mapbox が .poi-marker に付けるため、 アニメ用 transform は内側の .poi-inner に分けて競合を避ける。 */ .poi-marker { width: 24px; height: 24px; cursor: pointer; } .poi-inner { width: 24px; height: 24px; transform-origin: 50% 100%; position: relative; } /* ホバーで場所名を表示するラベル（全アイコン共通） */ .poi-label { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-8px); background: rgba(30,40,55,.93); color: #fff; padding: 4px 9px; border-radius: 7px; font-size: 11px; font-weight: 600; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 6; box-shadow: 0 2px 8px rgba(0,0,0,.3); } .poi-marker:hover { z-index: 10; } .poi-marker:hover .poi-label { opacity: 1; } /* ズームインすると、レジャー以外も店名ラベルを常時表示（拡大時のみ） */ #app.zoom-labels .poi-marker:not(.leisure) .poi-label { opacity: 1; } /* レジャー：アイコンは他より少し小さめ＋場所名を常時表示 */ .poi-marker.leisure { width: 19px; height: 19px; } .poi-marker.leisure .poi-inner { width: 19px; height: 19px; } .poi-marker.leisure .pin { width: 19px; height: 19px; } .poi-marker.leisure .pin svg { width: 11px; height: 11px; } /* 常時表示の名前ラベル（ピンの下） */ .poi-label.leisure-label { bottom: auto; top: 100%; transform: translateX(-50%) translateY(4px); opacity: 1; background: rgba(255,255,255,.95); color: #1e2837; border: 1.5px solid var(--c); box-shadow: 0 2px 6px rgba(0,0,0,.2); } .poi-marker .pin { width: 24px; height: 24px; border-radius: 50% 50% 50% 0; background: var(--c, #888); transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; } .poi-marker .pin svg { width: 13px; height: 13px; transform: rotate(45deg); fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* 出現：0.5秒・等速のスケール（内側要素にだけ適用） */ .poi-inner.pop { animation: scaleIn .5s linear both; } @keyframes scaleIn { 0% { transform: scale(0); } 100% { transform: scale(1); } } /* 消滅：0.5秒・等速のスケール */ .poi-inner.hideout { animation: scaleOut .5s linear both; } @keyframes scaleOut { 0% { transform: scale(1); } 100% { transform: scale(0); } } /* ---- 現在地の波紋（青い輪） ---- */ .locate-ripple { width: 24px; height: 24px; position: relative; } .locate-ripple .dot { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: #2d98da; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 6px rgba(45,152,218,.8); } .locate-ripple .wave { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 3px solid #2d98da; animation: ripple 1.8s ease-out infinite; } .locate-ripple .wave.w2 { animation-delay: .6s; } .locate-ripple .wave.w3 { animation-delay: 1.2s; } @keyframes ripple { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(5.5); opacity: 0; } } /* ---- 確認ダイアログ（Googleマップを開きますか？） ---- */ #modal-backdrop { position: fixed; inset: 0; background: rgba(15,22,33,.5); z-index: 50; display: none; align-items: center; justify-content: center; padding: 20px; } #modal-backdrop.open { display: flex; animation: modalFade .4s ease both; } #modal { background: #fff; border-radius: 16px; max-width: 320px; width: 100%; padding: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.3); text-align: center; margin-bottom: 24vh; /* 画面のさらに上めに表示 */ } #modal-backdrop.open #modal { animation: modalUp 1.12s cubic-bezier(.2,.8,.25,1) both; } @keyframes modalFade { from { opacity: 0; } to { opacity: 1; } } @keyframes modalUp { from { opacity: 0; transform: translateY(72px); } to { opacity: 1; transform: translateY(0); } } /* 店名・施設名（上・濃い）＋確認文（下・同じ大きさ） */ #modal .m-title { font-size: 14px; font-weight: 700; color: #1e2837; margin-bottom: 8px; word-break: break-word; } #modal .m-sub { font-size: 14px; font-weight: 500; color: #4a5867; margin-bottom: 16px; word-break: break-word; } #modal .m-actions { display: flex; gap: 10px; } #modal button { flex: 1; padding: 11px; border-radius: 10px; font-size: 14px; cursor: pointer; border: none; } #modal .m-cancel { background: #eef2f6; color: #50627a; } #modal .m-ok { background: #1769e0; color: #fff; font-weight: 700; } /* Mapbox標準UIの位置調整（パネルに被らないように） */ /* 右下グループ（ズーム＋©mapbox）を一番下へ。©mapbox は最下段・右寄せ。 */ .mapboxgl-ctrl-bottom-right { bottom: 8px; display: flex; flex-direction: column; align-items: flex-end; } .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-attrib { order: 2; } /* ©mapbox を一番下に */ .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group { order: 1; } /* ズームはその上に */ .mapboxgl-ctrl-bottom-left { display: none; }