0; height: 160px; pointer-events: none; background: linear-gradient(to bottom, rgba(5,5,7,0.55), rgba(5,5,7,0.10), transparent); z-index: 4; } .overlay-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; pointer-events: none; background: linear-gradient(to top, rgba(5,5,7,0.50), rgba(5,5,7,0.10), transparent); z-index: 4; } /* desktop */ .topbar { position: absolute; top: calc(16px + var(--safe-top)); left: 16px; right: 16px; z-index: 20; display: grid; grid-template-columns: 170px 170px 190px 1fr 140px; gap: 10px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-xl); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--shadow); } .control, .search, .button, .mini-button, .icon-button { height: 46px; border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.05); color: var(--text); outline: none; padding: 0 12px; font-size: 14px; } .control option { color: #111; } .search::placeholder { color: #8d8d98; } .button, .mini-button, .icon-button { cursor: pointer; font-weight: 700; background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)); } .mini-button { min-height: 34px; height: 34px; font-size: 12px; } .sidepanel { position: absolute; top: calc(96px + var(--safe-top)); right: 16px; bottom: calc(16px + var(--safe-bottom)); width: 400px; z-index: 20; display: flex; flex-direction: column; gap: 12px; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-xl); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--shadow); overflow: hidden; } #selectedPanel { display: none; min-height: 240px; max-height: 46%; } #selectedPanel.active { display: block; } #selectedBody { padding: 16px; overflow: auto; max-height: calc(46vh - 20px); } #listPanel { flex: 1; display: flex; flex-direction: column; min-height: 220px; } .list-head { padding: 14px 16px 8px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .list-head-title { font-size: 15px; font-weight: 700; line-height: 1.4; } .list-head-sub { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 2px; } .list-body { padding: 10px; overflow: auto; display: grid; gap: 10px; } .card { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 12px; border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-lg); background: rgba(255,255,255,0.04); cursor: pointer; } .thumb { width: 100%; height: 132px; object-fit: cover; border-radius: 14px; background: #1b1b21; border: 1px solid rgba(255,255,255,0.06); display: block; } .hero { width: 100%; height: 210px; object-fit: cover; border-radius: 18px; background: #1b1b21; border: 1px solid rgba(255,255,255,0.06); margin-bottom: 12px; display: block; } .name { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 700; word-break: break-word; } .small { color: var(--muted); font-size: 12px; line-height: 1.55; } .desc { color: var(--muted); font-size: 13px; line-height: 1.7; margin-top: 8px; word-break: break-word; } .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .chip { font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: #d9d9e3; white-space: nowrap; } .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .link-button, .fav-button, .close-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); cursor: pointer; font-weight: 700; font-size: 13px; background: rgba(255,255,255,0.05); color: var(--text); text-decoration: none; } .link-button { background: #ffffff; color: #111111; } .rating { color: var(--gold); font-weight: 700; letter-spacing: 0.03em; } .empty { padding: 18px; color: var(--muted); font-size: 14px; line-height: 1.7; } .brand-badge { position: absolute; left: 20px; bottom: calc(20px + var(--safe-bottom)); z-index: 22; padding: 12px 16px; border-radius: 999px; background: rgba(15,15,20,0.72); border: 1px solid rgba(255,255,255,0.10); color: #f7f7fb; font-weight: 700; font-size: 14px; letter-spacing: 0.03em; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 28px rgba(0,0,0,0.32); pointer-events: none; } /* markers */ .marker { width: 20px; height: 20px; position: relative; cursor: pointer; } .marker-core { width: 100%; height: 100%; border-radius: 50%; background: #ffffff; border: 2px solid #0d0d10; box-shadow: 0 0 0 4px rgba(255,255,255,0.16); } .marker-icon { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: 11px; line-height: 1; color: #111111; pointer-events: none; } .marker.show-photo .marker-icon { display: flex; } .marker.show-photo .marker-core { width: 24px; height: 24px; margin-left: -2px; margin-top: -2px; border-radius: 12px; } .marker.active .marker-core { background: var(--pink); box-shadow: 0 0 0 8px var(--pink-soft); } /* map controls */ .maplibregl-ctrl-group { background: rgba(18,18,22,0.78) !important; border: 1px solid rgba(255,255,255,0.08) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 24px rgba(0,0,0,0.30); overflow: hidden; } .maplibregl-ctrl button { background-color: transparent !important; } .maplibregl-ctrl button span { filter: invert(1); } .maplibregl-ctrl-bottom-left { left: 16px !important; bottom: 78px !important; } /* mobile */ .mobile-topbar, .mobile-filter-drawer, .mobile-sheet { display: none; } @media (max-width: 820px) { .topbar, .sidepanel, .brand-badge { display: none; } .mobile-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: absolute; top: calc(12px + var(--safe-top)); left: 12px; right: 12px; z-index: 30; } .title-chip { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border-radius: 999px; background: rgba(14,14,18,0.74); border: 1px solid rgba(255,255,255,0.09); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow); font-weight: 700; font-size: 13px; letter-spacing: 0.03em; white-space: nowrap; flex: 1; max-width: calc(100% - 112px); } .icon-button { width: 46px; min-width: 46px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; } .hamburger { width: 18px; height: 14px; position: relative; display: inline-block; } .hamburger span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 999px; background: #fff; } .hamburger span:nth-child(1) { top: 0; } .hamburger span:nth-child(2) { top: 6px; } .hamburger span:nth-child(3) { top: 12px; } .mobile-filter-drawer { position: absolute; top: calc(64px + var(--safe-top)); left: 12px; right: 12px; z-index: 29; padding: 12px; background: rgba(14,14,18,0.92); border: 1px solid rgba(255,255,255,0.09); border-radius: 20px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--shadow); display: block; transform: translateY(-10px); opacity: 0; pointer-events: none; transition: transform 0.18s ease, opacity 0.18s ease; } .mobile-filter-drawer.open { transform: translateY(0); opacity: 1; pointer-events: auto; } .mobile-filter-grid { display: grid; gap: 10px; } .mobile-filter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mobile-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 31; display: flex; flex-direction: column; background: rgba(12,12,16,0.94); border-top-left-radius: 24px; border-top-right-radius: 24px; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 -8px 30px rgba(0,0,0,0.30); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow: hidden; padding-bottom: var(--safe-bottom); transition: height 0.18s ease; } .mobile-sheet-handle { padding: 10px 14px 10px; user-select: none; touch-action: none; } .mobile-sheet-grabber { width: 42px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.25); margin: 0 auto 10px auto; } .mobile-sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .mobile-sheet-title { font-size: 14px; font-weight: 700; line-height: 1.4; } .mobile-sheet-sub { font-size: 12px; color: var(--muted); line-height: 1.5; } .mobile-sheet-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .mobile-selected-wrap { display: none; padding: 0 12px 8px; overflow: auto; } .mobile-selected-wrap.active { display: block; } .mobile-list-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 12px 12px; display: grid; gap: 10px; } .mobile-list-wrap .card { grid-template-columns: 110px 1fr; } .mobile-list-wrap .thumb { height: 120px; } .maplibregl-ctrl-bottom-left { left: 12px !important; bottom: calc(72px + var(--safe-bottom)) !important; } }
地図範囲内のおすすめ順
表示中のスポットからおすすめ度順に表示しています
Instagrammable Map
Instagrammable Map
スポット一覧
上にスワイプして表示
Instagrammable Map | SNS映えスポットMAP