:root {
  --up-navy: #12345b;
  --up-navy-strong: #0b2747;
  --up-blue: #087fb5;
  --up-blue-soft: #e9f5fb;
  --up-mint: #dff5ec;
  --up-warm: #f7f5f1;
  --up-surface: #ffffff;
  --up-ink: #1f2a37;
  --up-muted: #5d6978;
  --up-line: #d8dee6;
  --up-radius: 8px;
  --up-shadow: 0 8px 24px rgba(18, 52, 91, 0.07);
  --up-content: 1120px;
}

html { scroll-behavior: smooth; }
body.upnavi-page { margin: 0; background: var(--up-warm); color: var(--up-ink); font-family: "Noto Sans JP", "Yu Gothic", YuGothic, "Hiragino Sans", Meiryo, sans-serif; font-size: 16px; line-height: 1.75; }
.upnavi-page *, .upnavi-page *::before, .upnavi-page *::after { box-sizing: border-box; }
.upnavi-page a { color: var(--up-blue); }
.upnavi-page img { display: block; max-width: 100%; height: auto; }
.upnavi-page :focus-visible { outline: 3px solid #f0a328; outline-offset: 3px; }
.upnavi-main { width: min(calc(100% - 40px), var(--up-content)); margin: 0 auto; padding: 48px 0 80px; }
.upnavi-kicker { margin: 0 0 8px; color: var(--up-blue); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; }
.upnavi-section-heading h2, .finder-heading h2 { margin: 0; color: var(--up-navy-strong); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
@media (max-width: 680px) { .upnavi-main { width: min(calc(100% - 28px), var(--up-content)); padding-top: 28px; } }