:root { color-scheme: dark; --ink: #f5f4ed; --muted: #9696a8; --accent: #c9a8ff; --cyan: #9ee9ee; } * { box-sizing: border-box; } a, button, input, textarea, select, summary, [role="button"], #universe { -webkit-tap-highlight-color: transparent; } a, button, summary, [role="button"] { touch-action: manipulation; } html, body { width: 100%; height: 100%; overflow: hidden; } body { margin: 0; background: #030307; color: var(--ink); font-family: "Noto Sans JP", sans-serif; } #space { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(ellipse at 52% 48%, #121329 0%, #070816 46%, #020207 100%); } .hud { position: fixed; z-index: 4; inset: 0 0 auto; display: flex; align-items: center; gap: 15px; padding: 25px clamp(22px, 4vw, 58px); pointer-events: none; } .brand, .return { pointer-events: auto; color: var(--ink); text-decoration: none; }.brand { font: 600 27px/1 "Space Grotesk", sans-serif; letter-spacing: -.06em; }.brand span { color: var(--accent); }.return { position: fixed; z-index: 6; right: clamp(22px, 4vw, 58px); bottom: 32px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid rgba(158,233,238,.42); border-radius: 999px; color: #dffcff; background: rgba(5,9,19,.8); box-shadow: 0 8px 25px rgba(0,0,0,.24); backdrop-filter: blur(10px); font: 11px/1 "Noto Sans JP", sans-serif; }.return span { color: var(--cyan); font: 16px/1 "Space Grotesk", sans-serif; }.return:hover, .return:focus-visible { border-color: var(--cyan); color: #fff; background: rgba(13,34,48,.9); outline: none; } .address-search-shell { position: fixed; z-index: 7; top: 16px; right: 72px; pointer-events: auto; }.address-search-toggle { display: grid; width: 40px; height: 40px; padding: 0; place-items: center; border: 1px solid rgba(158,233,238,.4); border-radius: 50%; color: #dffcff; background: rgba(7,12,25,.82); box-shadow: 0 8px 25px rgba(0,0,0,.22); cursor: pointer; backdrop-filter: blur(10px); }.address-search-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }.address-search-toggle:hover, .address-search-toggle:focus-visible, .address-search-shell.is-open .address-search-toggle { border-color: var(--cyan); color: #071217; background: var(--cyan); outline: none; } .space-search { position: absolute; top: 50px; right: 0; width: min(390px, calc(100vw - 32px)); pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top right; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }.address-search-shell.is-open .space-search { pointer-events: auto; opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition-delay: 0s; }.space-search input { width: 100%; padding: 10px 76px 10px 16px; border: 1px solid rgba(158,233,238,.3); border-radius: 999px; color: var(--ink); outline: none; background: rgba(18,27,49,.94); box-shadow: 0 14px 34px rgba(0,0,0,.3); backdrop-filter: blur(12px); font: 11px "DM Mono", "Noto Sans JP", monospace; letter-spacing: .04em; }.space-search input::placeholder { color: #9498aa; letter-spacing: 0; }.space-search input:focus { border-color: var(--cyan); }.space-search > .address-go { position: absolute; top: 4px; right: 5px; width: 29px; height: 29px; padding: 0; border: 0; border-radius: 50%; color: #071217; background: var(--cyan); cursor: pointer; font: 18px/1 "Space Grotesk", sans-serif; }.space-search > small { position: absolute; top: calc(100% + 6px); right: 8px; color: #ffbaa9; font: 10px/1.35 "Noto Sans JP", sans-serif; white-space: nowrap; } .address-info { position: absolute; z-index: 3; top: 7px; right: 40px; }.address-info summary { display: grid; width: 23px; height: 23px; box-sizing: border-box; place-items: center; border: 1px solid rgba(158,233,238,.52); border-radius: 50%; color: #c7f8ff; background: rgba(7,18,29,.9); cursor: pointer; list-style: none; font: 500 12px/1 "DM Mono", monospace; }.address-info summary::-webkit-details-marker { display: none; }.address-info summary:hover, .address-info summary:focus-visible { border-color: var(--cyan); color: #071217; background: var(--cyan); outline: none; }.address-info-card { position: absolute; top: 34px; right: -34px; width: min(310px, calc(100vw - 32px)); padding: 15px 16px; box-sizing: border-box; border: 1px solid rgba(158,233,238,.35); border-radius: 14px; color: #dfe6f3; background: rgba(7,9,19,.97); box-shadow: 0 18px 44px rgba(0,0,0,.42); backdrop-filter: blur(16px); }.address-info-card strong { display: block; margin-bottom: 7px; color: #a8f4fa; font: 600 12px/1.4 "Noto Sans JP", sans-serif; }.address-info-card p { margin: 0; color: #b8becd; font: 11px/1.75 "Noto Sans JP", sans-serif; letter-spacing: 0; } .menu-button { display: grid; gap: 4px; width: 34px; height: 34px; padding: 0 9px; border: 1px solid rgba(245,244,237,.23); border-radius: 50%; background: rgba(5,5,12,.56); cursor: pointer; pointer-events: auto; }.menu-button span { display: block; width: 100%; height: 1px; background: var(--ink); }.menu-button:hover { border-color: var(--cyan); }.menu-scrim { position: fixed; z-index: 8; inset: 0; background: rgba(0,0,0,.48); backdrop-filter: blur(2px); }.side-panel { position: fixed; z-index: 9; top: 0; bottom: 0; left: 0; width: min(340px, 84vw); padding: 32px; border-right: 1px solid rgba(245,244,237,.18); background: rgba(10,10,18,.96); box-shadow: 22px 0 70px rgba(0,0,0,.4); transform: translateX(-104%); transition: transform .34s cubic-bezier(.2,.75,.2,1); }.side-panel.is-open { transform: translateX(0); }.close-menu { position: absolute; top: 20px; right: 20px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 25px; }.menu-eyebrow { margin: 4px 0 42px; color: var(--cyan); font: 10px "DM Mono", monospace; letter-spacing: .16em; }.side-nav { display: grid; border-top: 1px solid rgba(245,244,237,.12); }.side-nav a { display: flex; align-items: center; gap: 13px; padding: 17px 0; border-bottom: 1px solid rgba(245,244,237,.12); color: var(--ink); text-decoration: none; font-size: 15px; }.nav-mark { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 18px/1 "DM Mono", monospace; transition: border-color .2s, color .2s, background .2s; }.nav-mark-explore { color: #73c9ff; }.nav-mark-submit { color: #ff9b7b; }.nav-mark-room { color: #ffffff; }.nav-mark-contents { color: #8fe59b; }.nav-mark.profile-mark { color: #f1c5ff; border-color: rgba(222,151,255,.8); }.side-nav a:hover { color: var(--cyan); }.side-nav a:hover .nav-mark { color: #071217; background: currentColor; }.side-nav a:hover .nav-mark-explore { color: #73c9ff; background: rgba(115,201,255,.16); }.side-nav a:hover .nav-mark-submit { color: #ff9b7b; background: rgba(255,155,123,.16); }.side-nav a:hover .nav-mark-room { color: #fff; background: rgba(255,255,255,.13); }.side-nav a:hover .nav-mark-contents { color: #8fe59b; background: rgba(143,229,155,.15); }.side-nav a:hover .profile-mark { border-color: #e19cff; color: #e19cff; background: rgba(225,156,255,.15); } #universe { position: fixed; inset: 0; z-index: 1; cursor: grab; touch-action: none; }.is-dragging { cursor: grabbing !important; } @keyframes star-twinkle { 0%, 100% { opacity: calc(0.76 * var(--star-brightness, 1)); filter: brightness(1.08); } 50% { opacity: var(--star-brightness, 1); filter: brightness(1.38); } } .star-place { position: absolute; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transform: translate(-50%, -50%); transition: transform .25s; } .star-place:hover, .star-place:focus-visible { transform: translate(-50%, -50%) scale(1.2); outline: none; } .star-place:hover::before, .star-place:focus-visible::before { animation-play-state: paused; } .star-place::before { content: ""; position: absolute; top: 50%; left: 50%; width: var(--star-size, 10px); height: var(--star-size, 10px); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient( circle, #ffffff 0%, #ffffff 42%, var(--star, #fff) 75%, transparent 100% ); box-shadow: 0 0 7px 1.5px rgba(255, 255, 255, 1), 0 0 18px 2px var(--star, #fff), 0 0 30px 4px color-mix(in srgb, var(--star, #fff) 34%, transparent); z-index: 2; animation: star-twinkle var(--twinkle-duration, 4s) ease-in-out infinite; } .star-label { position: absolute; top: calc(50% + 19px); white-space: nowrap; color: rgba(245, 244, 237, .74); font: 10px "DM Mono", monospace; letter-spacing: .08em; opacity: 0; transition: opacity .2s; } .star-place:hover .star-label, .star-place:focus-visible .star-label { opacity: 1; } /* 星の中心だけではなく、星全体が発光して見える状態 */ .star-place::before { width: 16px; height: 16px; background: radial-gradient( circle, color-mix(in srgb, var(--star, #fff) 72%, white) 0%, var(--star, #fff) 31%, color-mix(in srgb, var(--star, #fff) 54%, transparent) 60%, transparent 86% ); box-shadow: 0 0 9px 2px color-mix(in srgb, var(--star, #fff) 72%, transparent), 0 0 20px 5px color-mix(in srgb, var(--star, #fff) 37%, transparent), 0 0 33px 8px color-mix(in srgb, var(--star, #fff) 18%, transparent); } .guide { position: fixed; z-index: 3; bottom: 26px; left: 50%; margin: 0; transform: translateX(-50%); color: #808092; font: 10px "Noto Sans JP", sans-serif; white-space: nowrap; }.guide span { color: var(--cyan); } .jump-button { position: fixed; z-index: 4; bottom: 34px; left: clamp(20px, 4vw, 58px); display: inline-flex; min-height: 56px; padding: 0 23px; border: 1px solid rgba(184,248,255,.66); border-radius: 16px; align-items: center; gap: 10px; color: rgba(238,254,255,.9); background: rgba(69,151,163,.58); box-shadow: 0 0 0 1px rgba(208,255,255,.08), 0 0 20px rgba(137,232,244,.15), 0 15px 38px rgba(0,0,0,.24); cursor: pointer; font: 700 15px/1 "Noto Sans JP", sans-serif; backdrop-filter: blur(8px); }.jump-symbol { font-size: 18px; line-height: 1; }.jump-label { display: inline; }.jump-button::after { display: none; }.jump-button:hover { border-color: rgba(229,255,255,.82); background: rgba(86,174,185,.72); transform: translateY(-2px); }.jump-button:disabled { opacity: .5; cursor: wait; } .place-panel { position: fixed; z-index: 5; right: clamp(20px, 4vw, 58px); bottom: clamp(60px, 11vh, 100px); width: min(390px, calc(100vw - 40px)); padding: 30px; border: 1px solid rgba(245,244,237,.2); background: rgba(12,12,21,.79); box-shadow: 0 24px 80px rgba(0,0,0,.48); backdrop-filter: blur(18px); animation: arrive .3s ease-out; }.place-panel::before { position: absolute; top: 0; left: 0; width: 100%; height: 2px; content: ""; background: linear-gradient(90deg, var(--accent), transparent); }@keyframes arrive { from { opacity: 0; transform: translateY(15px); } } .close { position: absolute; top: 12px; right: 16px; border: 0; color: var(--muted); background: none; cursor: pointer; font-size: 22px; }.close:hover { color: var(--ink); }.favorite-button { position: absolute; top: 13px; right: 70px; display: grid; width: 33px; height: 33px; padding: 0; border: 1px solid rgba(245,244,237,.24); border-radius: 50%; place-items: center; color: #f5f4ed; background: rgba(255,255,255,.05); cursor: pointer; font: 22px/1 Arial, "Noto Sans JP", sans-serif; transition: transform .18s ease, color .18s ease, border-color .18s ease; }.favorite-button:hover { transform: scale(1.08); border-color: #ff9ab0; color: #ffb1c1; }.favorite-button.is-favorite { border-color: #ff88a4; color: #ff88a4; background: rgba(255,83,129,.1); }.place-attribution { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 13px; }.place-attribution p { margin: 0; padding: 6px 8px; border: 1px solid rgba(245,244,237,.16); border-radius: 99px; color: var(--muted); background: rgba(255,255,255,.035); font: 10px/1 "Noto Sans JP", sans-serif; }.place-attribution strong { color: var(--ink); font-weight: 500; }.panel-genre { margin: 0 0 15px; color: var(--cyan); font: 10px "DM Mono", monospace; letter-spacing: .13em; }.place-panel h1 { margin: 0; font: 600 39px/.95 "Space Grotesk", "Noto Sans JP", sans-serif; letter-spacing: -.06em; }.panel-description { margin: 18px 0 12px; color: #d0cfd5; font-size: 14px; line-height: 1.85; }.panel-tags { margin: 0 0 25px; color: var(--muted); font: 9px "DM Mono", monospace; letter-spacing: .07em; }.visit { display: inline-block; padding: 12px 15px; border: 1px solid var(--accent); color: var(--ink); background: rgba(201,168,255,.13); text-decoration: none; font-size: 13px; }.visit:hover { background: rgba(201,168,255,.28); } .translate-description { display: inline-flex; width: fit-content; min-height: 27px; margin: -2px 0 13px; padding: 2px 0; border: 0; align-items: center; gap: 7px; color: #6ecfff; background: transparent; cursor: pointer; font: 500 11px/1.2 "Noto Sans JP", sans-serif; } .translate-description svg { width: 22px; height: 22px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } .translate-description-label { display: inline; white-space: nowrap; } .translate-description:hover, .translate-description:focus-visible { color: #b8edff; outline: none; filter: drop-shadow(0 0 5px rgba(110,207,255,.48)); } .translate-description:disabled { opacity: .48; cursor: wait; } .space-warp[hidden] { display: none; } .space-warp { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; overflow: hidden; background: rgba(3,3,7,.94); } .space-warp::before { position: absolute; inset: 0 -35%; content: ""; /* 長さと明るさが違う横線を、宇宙を横切るように11本配置 */ background: linear-gradient(90deg, transparent 10%, rgba(219,231,255,.09) 35%, rgba(232,243,255,.38) 50%, rgba(219,231,255,.09) 65%, transparent 90%) 50% 18% / 48% 2px no-repeat, linear-gradient(90deg, transparent 7%, rgba(219,231,255,.16) 34%, rgba(241,247,255,.72) 50%, rgba(219,231,255,.16) 66%, transparent 93%) 50% 28% / 72% 4px no-repeat, linear-gradient(90deg, transparent 5%, rgba(219,231,255,.11) 34%, rgba(239,247,255,.55) 50%, rgba(219,231,255,.11) 66%, transparent 95%) 50% 34% / 66% 3px no-repeat, linear-gradient(90deg, transparent 12%, rgba(219,231,255,.12) 38%, rgba(233,243,255,.52) 52%, rgba(219,231,255,.12) 70%, transparent 90%) 50% 40% / 52% 3px no-repeat, linear-gradient(90deg, transparent 13%, rgba(219,231,255,.08) 35%, rgba(229,240,255,.42) 50%, rgba(219,231,255,.08) 65%, transparent 87%) 50% 46% / 40% 2px no-repeat, linear-gradient(90deg, transparent 4%, rgba(219,231,255,.18) 35%, rgba(255,255,255,.88) 50%, rgba(219,231,255,.18) 65%, transparent 96%) 50% 50% / 86% 5px no-repeat, linear-gradient(90deg, transparent 9%, rgba(219,231,255,.1) 34%, rgba(238,247,255,.51) 50%, rgba(219,231,255,.1) 66%, transparent 91%) 50% 56% / 60% 3px no-repeat, linear-gradient(90deg, transparent 12%, rgba(219,231,255,.11) 32%, rgba(231,242,255,.48) 48%, rgba(219,231,255,.11) 68%, transparent 90%) 50% 62% / 56% 3px no-repeat, linear-gradient(90deg, transparent 7%, rgba(219,231,255,.1) 36%, rgba(237,246,255,.48) 50%, rgba(219,231,255,.1) 64%, transparent 93%) 50% 69% / 74% 3px no-repeat, linear-gradient(90deg, transparent 7%, rgba(255,255,255,.15) 34%, rgba(245,249,255,.66) 50%, rgba(255,255,255,.15) 66%, transparent 93%) 50% 74% / 68% 4px no-repeat, linear-gradient(90deg, transparent 11%, rgba(219,231,255,.08) 35%, rgba(231,242,255,.38) 50%, rgba(219,231,255,.08) 65%, transparent 89%) 50% 82% / 50% 2px no-repeat; opacity: 0; will-change: transform, opacity; } .place-panel { display: flex; flex-direction: column; width: min(430px, calc(100vw - 40px)); min-height: 490px; padding: 34px 32px 30px; }.place-attribution { align-items: center; }.place-actions { display: flex; gap: 9px; align-items: stretch; margin-top: auto; margin-bottom: 34px; }.place-actions .visit, .share-site { display: inline-block; padding: 12px 15px; border: 1px solid var(--accent); color: var(--ink); background: rgba(201,168,255,.13); text-decoration: none; cursor: pointer; font: 13px "Noto Sans JP", sans-serif; }.place-actions .visit:hover, .share-site:hover { background: rgba(201,168,255,.28); }.share-site { border-color: rgba(245,244,237,.28); color: var(--muted); background: rgba(255,255,255,.045); }.share-site.is-copied { border-color: var(--cyan); color: var(--cyan); } .favorite-button { top: 25px; } .place-panel[hidden] { display: none; } @media (max-width: 600px) { .hud { grid-template-columns: auto 1fr auto; gap: 12px; }.coordinates { display: none; }.guide { font-size: 9px; }.place-panel { bottom: 60px; }.star-label { opacity: .8; } } .report-site { position: absolute; right: 24px; bottom: 23px; padding: 5px 0; border: 0; color: rgba(245,244,237,.47); background: transparent; cursor: pointer; font: 10px/1 "Noto Sans JP", sans-serif; }.report-site:hover { color: #ffb0b0; } .report-note { margin: 0 0 15px; color: rgba(245,244,237,.56); font: 11px/1.65 "Noto Sans JP", sans-serif; } .place-attribution.is-operator p { border-color: rgba(158,233,238,.82); color: #e8fdff; background: rgba(75,183,201,.22); box-shadow: 0 0 18px rgba(112,220,236,.18); } .place-attribution.is-operator strong { color: #f3ffff; font-weight: 700; } .report-overlay[hidden] { display: none; }.report-overlay { position: fixed; z-index: 20; inset: 0; display: grid; padding: 24px; place-items: center; background: rgba(2,3,10,.72); backdrop-filter: blur(7px); }.report-dialog { position: relative; width: min(580px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 34px; border: 1px solid rgba(245,244,237,.2); border-radius: 23px; color: var(--ink); background: linear-gradient(145deg, rgba(22,21,37,.98), rgba(7,8,16,.98)); box-shadow: 0 30px 90px rgba(0,0,0,.55); }.close-report { position: absolute; top: 14px; right: 17px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 25px; }.report-kicker { margin: 0 0 10px; color: #ffb0a0; font: 10px "DM Mono", monospace; letter-spacing: .15em; }.report-dialog h2 { margin: 0; font: 600 clamp(27px, 5vw, 37px)/1.15 "Noto Sans JP", sans-serif; letter-spacing: -.05em; }.report-site-name { margin: 9px 0 23px; color: var(--cyan); font: 13px "DM Mono", monospace; }.report-form { display: grid; gap: 9px; }.report-form label { display: flex; gap: 10px; align-items: center; padding: 12px 13px; border: 1px solid rgba(245,244,237,.12); border-radius: 11px; color: rgba(245,244,237,.82); background: rgba(255,255,255,.025); cursor: pointer; font: 13px/1.5 "Noto Sans JP", sans-serif; }.report-form label:hover { border-color: rgba(255,177,160,.5); background: rgba(255,130,110,.07); }.report-form input { accent-color: #ff907a; }.report-form textarea { min-height: 76px; margin-top: 5px; padding: 11px 12px; border: 1px solid rgba(245,244,237,.15); border-radius: 11px; outline: none; resize: vertical; color: var(--ink); background: rgba(0,0,0,.2); font: 13px/1.6 "Noto Sans JP", sans-serif; }.report-form textarea:focus { border-color: rgba(255,177,160,.65); }.report-form button { justify-self: start; margin-top: 6px; padding: 12px 17px; border: 1px solid rgba(255,151,127,.9); border-radius: 999px; color: #fff1ed; background: rgba(160,59,40,.6); cursor: pointer; font: 700 13px "Noto Sans JP", sans-serif; }.report-status { margin: 17px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; } .menu-button { display: flex; position: fixed; z-index: 7; top: 20px; left: clamp(20px, 4vw, 58px); flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 50px; height: 50px; padding: 0; box-shadow: 0 8px 28px rgba(0,0,0,.28); } .menu-button.is-open { z-index: 110; } .menu-button span { width: 23px; height: 2.5px; border-radius: 99px; } .hud .brand { margin-left: 62px; } .menu-eyebrow { color: var(--ink); font: 600 27px/1 "Space Grotesk", sans-serif; letter-spacing: -.06em; }.menu-eyebrow span { color: var(--accent); } .submit-overlay[hidden] { display: none; } .submit-overlay { position: fixed; z-index: 12; top: 50%; left: 50%; width: min(940px, calc(100vw - 40px)); padding: clamp(36px, 5vw, 64px); border: 1px solid rgba(205, 193, 255, .38); border-radius: 28px; color: var(--ink); background: linear-gradient(145deg, rgba(25,20,51,.97), rgba(8,9,20,.97)); box-shadow: 0 30px 110px rgba(0,0,0,.7), 0 0 75px rgba(139,104,255,.13); transform: translate(-50%, -50%); } .submit-overlay > p { margin: 0 0 12px; color: var(--accent); font: 10px "DM Mono", monospace; letter-spacing: .18em; } .submit-overlay h1 { margin: 0; font: 600 clamp(29px, 4vw, 45px)/1.15 "Noto Sans JP", sans-serif; letter-spacing: -.06em; } .submit-overlay > span { display: block; margin: 16px 0 30px; color: var(--muted); font: 13px/1.7 "Noto Sans JP", sans-serif; } .close-submit-overlay { position: absolute; top: 15px; right: 18px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 25px; } .space-submit-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .space-submit-choices.is-single { grid-template-columns: minmax(0, 1fr); } .space-submit-choices a { display: flex; min-height: 330px; padding: 32px; border: 1px solid rgba(204,190,255,.31); border-radius: 21px; flex-direction: column; color: var(--ink); background: linear-gradient(145deg, rgba(148,102,255,.24), rgba(255,255,255,.04)); text-decoration: none; transition: transform .2s ease, border-color .2s ease, background .2s ease; } .space-submit-choices a:last-child { background: linear-gradient(145deg, rgba(65,151,255,.19), rgba(255,255,255,.04)); } .space-submit-choices a:hover { border-color: rgba(221,212,255,.85); transform: translateY(-5px); background: linear-gradient(145deg, rgba(159,115,255,.42), rgba(255,255,255,.08)); } .space-submit-choices small { color: #cbbdff; font: 10px "DM Mono", monospace; letter-spacing: .14em; } .space-submit-choices strong { margin: auto 0 16px; font: 600 clamp(25px, 3.2vw, 35px)/1.32 "Noto Sans JP", sans-serif; letter-spacing: -.05em; } .space-submit-choices em { color: var(--muted); font: normal 12px/1.65 "Noto Sans JP", sans-serif; } .side-nav a.menu-entry { gap: 14px; padding: 15px 0; } .side-nav .menu-icon { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid currentColor; border-radius: 9px; color: inherit; background: rgba(255,255,255,.035); } .side-nav .menu-icon svg { width: 19px; height: 19px; } .side-nav .menu-entry-explore .menu-icon { color: #73c9ff; background: rgba(115,201,255,.08); } .side-nav .menu-entry-submit .menu-icon { color: #ff9b7b; background: rgba(255,155,123,.08); } .side-nav .menu-entry-room .menu-icon { color: #fff; background: rgba(255,255,255,.055); } .side-nav .menu-entry-contents .menu-icon { color: #8fe59b; background: rgba(143,229,155,.08); } .side-nav .menu-entry-profile .menu-icon { color: #e3b4ff; background: rgba(227,180,255,.08); } .side-nav a.menu-entry:hover .menu-icon { transform: translateX(2px); background: rgba(158,233,238,.16); } @media (max-width: 620px) { .submit-overlay { width: calc(100vw - 24px); max-height: calc(100vh - 32px); overflow-y: auto; padding: 26px 18px 20px; } .submit-overlay > span { margin: 11px 0 18px; font-size: 11px; } .space-submit-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .space-submit-choices a { min-height: 205px; padding: 15px 13px; border-radius: 15px; } .space-submit-choices strong { margin: auto 0 10px; font-size: clamp(17px, 5vw, 21px); line-height: 1.25; } .space-submit-choices em { font-size: 10px; line-height: 1.45; } } /* The phone menu occupies the lower edge, so exploration controls stay above it. */ @media (max-width: 720px) { .hud { display: flex; align-items: center; padding: 15px 16px; } .hud .brand { margin-left: 64px; font-size: 20px; } .address-search-shell { top: 9px; right: 58px; } .address-search-toggle { width: 38px; height: 38px; } .space-search { top: 48px; width: min(390px, calc(100vw - 32px)); } .return { display: none; } .guide { display: none; } .star-place { width: 56px; height: 56px; } .star-label { opacity: 0; } .jump-button { bottom: 84px; left: 50%; display: inline-flex; width: auto; height: 40px; min-height: 40px; gap: 7px; padding: 9px 16px; border-radius: 13px; align-items: center; font-size: 12px; white-space: nowrap; transform: translateX(-50%); } .jump-symbol { font-size: 14px; } .jump-label { display: inline; } .jump-button::after { display: none; } .jump-button:hover { transform: translateX(-50%) translateY(-2px); } .place-panel { right: 10px; bottom: 78px; left: 10px; width: auto; min-height: 0; max-height: calc(100dvh - 140px); overflow-y: auto; padding: 23px 20px 21px; border-radius: 18px; } .place-panel h1 { font-size: clamp(29px, 9vw, 36px); } .panel-description { margin: 14px 0 10px; font-size: 13px; line-height: 1.65; } .panel-tags { margin-bottom: 17px; } .favorite-button { top: 17px; right: 53px; } .place-actions { gap: 8px; margin: 18px 0 30px; } .place-actions .visit, .share-site { flex: 1; min-height: 42px; padding: 11px 10px; text-align: center; font-size: 12px; } .report-site { right: 20px; bottom: 15px; } } .panel-address { margin: 7px 0 2px; color: rgba(158,233,238,.66); font: 9px/1.4 "DM Mono", monospace; letter-spacing: .12em; }.panel-address strong { color: var(--cyan); font-size: 11px; letter-spacing: .16em; } /* --- v17: 星域更新光を目に刺さりにくい青白へ --- */ .catalog-notice { position: fixed; z-index: 4; top: 100px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 40px); padding: 12px 16px; border-radius: 12px; color: #e5f7ff; background: #101423; font-size: 13px; } .catalog-notice[hidden] { display: none; } .catalog-notice button { margin-left: 8px; padding: 6px 10px; color: #e5f7ff; background: #18324a; border: 1px solid #6696b5; border-radius: 8px; cursor: pointer; } /* 純白ではなく #dbe7ff。中心は明るく、周囲の発光は控えめ。 */ /* Only controls, not the gaps or decorative instructions, intercept star clicks. */ .quick-rail, .guide { pointer-events: none; } .quick-rail-entry { pointer-events: auto; } body.is-entrance-preview #universe { cursor: default; } body.is-entrance-preview .hud, body.is-entrance-preview .jump-button, body.is-entrance-preview .guide, body.is-entrance-preview .quick-rail, body.is-entrance-preview .mobile-nav { opacity: 0; pointer-events: none; } /* The slide-out menu must always sit above the universe and the fixed navigation. */ .menu-scrim { z-index: 90; } .side-panel { z-index: 100; pointer-events: auto; } .close-menu { z-index: 1; pointer-events: auto; } .menu-scrim { opacity: 0; transition: opacity .34s ease; } .menu-scrim.is-open { opacity: 1; } .menu-button { transition: opacity .16s ease, transform .16s ease; } .menu-button.is-open { pointer-events: none; opacity: 0; transform: scale(.9); } /* Open Star Code search beside its icon so it never overlaps the language button below. */ .space-search { top: 3px; right: 50px; width: min(340px, calc(100vw - 110px)); transform: translateX(8px) scale(.98); transform-origin: center right; } .address-search-shell.is-open .space-search { transform: translateX(0) scale(1); } @media (max-width: 720px) { .space-search { top: 2px; right: 48px; width: min(270px, calc(100vw - 104px)); } }