.nav-menu {display: contents}
.nav-menu-toggle {border: 0;background: none;font-family: inherit;cursor: pointer}
.nav-menu-toggle.mobile-nav-item {padding: 0}
.nav-menu-toggle.mobile-nav-item svg {width: 24px;height: 24px}
.nav-menu-toggle.header-nav-item svg {width: 20px;height: 20px}
.nav-menu-item--guide {--nav-menu-c1: #2563eb;--nav-menu-c2: #3b82f6;--nav-menu-tint: #eff6ff;--nav-menu-tint2: #dbeafe;--nav-menu-line: #bfdbfe;--nav-menu-dark: #1d4ed8}
.nav-menu-item--cards {--nav-menu-c1: #d97706;--nav-menu-c2: #b45309;--nav-menu-tint: #fffbeb;--nav-menu-tint2: #fef3c7;--nav-menu-line: #fde68a;--nav-menu-dark: #b45309}
.nav-menu-item--bottles {--nav-menu-c1: #0891b2;--nav-menu-c2: #0e7490;--nav-menu-tint: #ecfeff;--nav-menu-tint2: #cffafe;--nav-menu-line: #a5f3fc;--nav-menu-dark: #0e7490}
.nav-menu-item--write {--nav-menu-c1: #7c3aed;--nav-menu-c2: #8b5cf6;--nav-menu-tint: #f5f3ff;--nav-menu-tint2: #ede9fe;--nav-menu-line: #ddd6fe;--nav-menu-dark: #6d28d9}
.nav-menu-item--finder {--nav-menu-c1: #059669;--nav-menu-c2: #047857;--nav-menu-tint: #ecfdf5;--nav-menu-tint2: #d1fae5;--nav-menu-line: #a7f3d0;--nav-menu-dark: #047857}
.nav-menu-item--areas {--nav-menu-c1: #0284c7;--nav-menu-c2: #0ea5e9;--nav-menu-tint: #f0f9ff;--nav-menu-tint2: #e0f2fe;--nav-menu-line: #bae6fd;--nav-menu-dark: #0369a1}
.nav-menu-item--prefectures {--nav-menu-c1: #4f46e5;--nav-menu-c2: #6366f1;--nav-menu-tint: #eef2ff;--nav-menu-tint2: #e0e7ff;--nav-menu-line: #c7d2fe;--nav-menu-dark: #4338ca}
.nav-menu-item--fish {--nav-menu-c1: #ea580c;--nav-menu-c2: #c2410c;--nav-menu-tint: #fff7ed;--nav-menu-tint2: #ffedd5;--nav-menu-line: #fed7aa;--nav-menu-dark: #c2410c}
.nav-menu-dialog {position: fixed;margin: 0;padding: 0;border: 0;background: transparent;max-width: none;max-height: none;color: #1c1e21;font-family: var(--font-family-base);overflow: visible}
.nav-menu-panel {display: flex;flex-direction: column;background: #fff;overflow: hidden}
.nav-menu-head {display: flex;align-items: center;justify-content: space-between;gap: 8px}
.nav-menu-title {margin: 0;font-size: 1.1rem;font-weight: 700;color: #1c1e21}
.nav-menu-close {display: inline-flex;align-items: center;justify-content: center;width: 44px;height: 44px;margin-right: -10px;border: 0;border-radius: 50%;background: none;color: #606770;cursor: pointer}
.nav-menu-close:hover,
.nav-menu-close:focus-visible {background: #f0f2f5}
.nav-menu-rainbow {height: 3px;border-radius: 2px;background: linear-gradient(90deg, #2563eb, #d97706, #0891b2, #7c3aed)}
.nav-menu--discover .nav-menu-rainbow {background: linear-gradient(90deg, #059669, #0284c7, #4f46e5, #ea580c)}
.nav-menu-list {margin: 0;padding: 0;list-style: none}
.nav-menu-item {position: relative;text-decoration: none;color: inherit}
.nav-menu-badge {display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0;background: linear-gradient(135deg, var(--nav-menu-c1), var(--nav-menu-c2));color: #fff}
.nav-menu-badge svg {stroke-width: 2}
.nav-menu-text {display: flex;flex-direction: column;gap: 2px;min-width: 0}
.nav-menu-name {font-size: 0.95rem;font-weight: 700;color: #1c1e21}
.nav-menu-desc {font-size: 0.76rem;color: #606770;line-height: 1.45}
.nav-menu-dialog--sheet {inset: auto 0 calc(60px + env(safe-area-inset-bottom, 0px) - var(--app-bottom-gap, 0px)) 0;width: 100%}
.nav-menu-dialog--sheet::backdrop {background: linear-gradient(to top, transparent calc(60px + env(safe-area-inset-bottom, 0px) - var(--app-bottom-gap, 0px)), rgba(0, 0, 0, 0.4) 0)}
.nav-menu-dialog--sheet .nav-menu-panel {max-height: calc(100dvh - 60px - env(safe-area-inset-bottom, 0px) - 24px);overflow-y: auto;border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12)}
.nav-menu-dialog--sheet[open] {animation: nav-menu-sheet-in 220ms ease-out}
.nav-menu-dialog--sheet[open]::backdrop {animation: nav-menu-fade-in 220ms ease-out}
.nav-menu-grab {flex-shrink: 0;width: 40px;height: 4px;margin: 8px auto 0;border-radius: 2px;background: #dddfe2}
.nav-menu-dialog--sheet .nav-menu-head {padding: 4px 16px 0}
.nav-menu-dialog--sheet .nav-menu-rainbow {margin: 8px 16px 0}
.nav-menu-dialog--sheet .nav-menu-list {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 12px;padding: 16px}
.nav-menu-dialog--sheet .nav-menu-item {display: flex;flex-direction: column;gap: 10px;height: 100%;box-sizing: border-box;padding: 14px 12px;border: 1px solid var(--nav-menu-line);border-radius: 14px;background:
radial-gradient(circle 80px at 0 0, color-mix(in srgb, var(--nav-menu-c1) 10%, transparent), transparent),
linear-gradient(160deg, var(--nav-menu-tint), #fff);-webkit-tap-highlight-color: transparent}
.nav-menu-dialog--sheet .nav-menu-item:active {background: linear-gradient(160deg, var(--nav-menu-tint2), var(--nav-menu-tint))}
.nav-menu-dialog--sheet .nav-menu-item:focus-visible {outline: 2px solid var(--nav-menu-c1);outline-offset: 2px}
.nav-menu-dialog--sheet .nav-menu-badge {width: 44px;height: 44px;border-radius: 12px}
.nav-menu-dialog--sheet .nav-menu-badge svg {width: 24px;height: 24px}
.nav-menu-dialog--sheet .nav-menu-desc {overflow-wrap: anywhere;word-break: auto-phrase}
.nav-menu-arrow {position: absolute;top: 12px;right: 10px;display: inline-flex;color: var(--nav-menu-dark)}
.nav-menu-arrow svg {width: 18px;height: 18px}
.nav-menu-foot {padding: 0 16px 16px}
.nav-menu-signup {display: flex;align-items: center;justify-content: center;min-height: 48px;border-radius: 10px;background: #1877f2;color: #fff;font-weight: 700;text-decoration: none}
.nav-menu-signup:active {background: #166fe5}
.nav-menu-dialog--dropdown {inset: calc(var(--nav-menu-header-bottom, 61px) + 10px) auto auto var(--nav-menu-left, 20px);width: 340px;max-width: calc(100% - 40px)}
.nav-menu-dialog--dropdown::backdrop {background: linear-gradient(to bottom, transparent var(--nav-menu-header-bottom, 61px), rgba(0, 0, 0, 0.25) 0)}
.nav-menu-dialog--dropdown .nav-menu-panel {max-height: calc(100vh - var(--nav-menu-header-bottom, 61px) - 30px);overflow-y: auto;border: 1px solid #dddfe2;border-radius: 12px;box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16)}
.nav-menu-dialog--dropdown .nav-menu-rainbow {order: -1;border-radius: 0}
.nav-menu-dialog--dropdown .nav-menu-head {padding: 8px 12px 4px 16px}
.nav-menu-dialog--dropdown .nav-menu-title {font-size: 1rem}
.nav-menu-dialog--dropdown .nav-menu-list {padding: 0 8px 8px}
.nav-menu-dialog--dropdown .nav-menu-item {display: flex;align-items: center;gap: 12px;min-height: 56px;padding: 8px 10px;border-radius: 10px}
.nav-menu-dialog--dropdown .nav-menu-item::before {content: "";position: absolute;left: 0;top: 8px;bottom: 8px;width: 3px;border-radius: 2px;background: var(--nav-menu-c1);opacity: 0}
.nav-menu-dialog--dropdown .nav-menu-item:hover,
.nav-menu-dialog--dropdown .nav-menu-item:focus-visible {background: linear-gradient(90deg, color-mix(in srgb, var(--nav-menu-c1) 8%, transparent), transparent);outline: none}
.nav-menu-dialog--dropdown .nav-menu-item:hover::before,
.nav-menu-dialog--dropdown .nav-menu-item:focus-visible::before {opacity: 1}
.nav-menu-dialog--dropdown .nav-menu-badge {width: 36px;height: 36px;border-radius: 10px}
.nav-menu-dialog--dropdown .nav-menu-badge svg {width: 20px;height: 20px}
.nav-menu-dialog--dropdown .nav-menu-desc {overflow-wrap: anywhere}
@keyframes nav-menu-sheet-in {from {transform: translateY(100%)}
to {transform: translateY(0)}}
@keyframes nav-menu-fade-in {from {opacity: 0}
to {opacity: 1}}
@media (prefers-reduced-motion: reduce) {.nav-menu-dialog--sheet[open],
.nav-menu-dialog--sheet[open]::backdrop {animation: none}}