:root { color-scheme: light; color: #0a0017; background: #fffffb; font-family: 'DM Sans', sans-serif; }
    * { box-sizing: border-box; }
    body { margin: 0; line-height: 1.5; }
    a { color: inherit; text-decoration: none; }
    a:focus-visible { outline: 3px solid #0a0017; outline-offset: 8px; }
    .page { max-width: 1200px; margin: auto; padding: 32px clamp(24px, 4vw, 64px) 24px; }
    header { display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 14px; font-weight: 500; }
    header nav { display: flex; gap: 28px; }
    header nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
    .hero { padding: 72px 0 80px; }
    h1 { margin: 0 0 0 -0.065em; font-size: clamp(110px, 20vw, 240px); line-height: .85; font-weight: 500; letter-spacing: -.085em; }
    .services { border-top: 1px solid #0a0017; }
    section { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 32px; padding: 36px 0 40px; border-bottom: 1px solid #0a0017; scroll-margin-top: 24px; }
    section > div { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; min-width: 0; }
    .number { font-size: 13px; padding-top: 10px; }
    h2 { margin: 0; font-size: clamp(36px, 4.2vw, 56px); font-weight: 400; line-height: 1.08; letter-spacing: -.045em; }
    .app-link { display: inline-flex; gap: 36px; align-items: center; height: 50px; padding: 13px 18px; flex-shrink: 0; line-height: 1; background: #ffd600; font-size: 17px; }
    .app-link:hover { background: #f0ca00; }
    .arrow { display: inline-block; width: 23px; height: 23px; flex-shrink: 0; vertical-align: middle; }
    header .arrow { width: 14px; height: 14px; }
    footer { padding-top: 28px; display: flex; justify-content: space-between; gap: 24px; font-size: 12px; flex-wrap: wrap; }
    @media (max-width: 600px) {
      .page { padding: 24px 24px 20px; }
      header { align-items: flex-start; font-size: 12px; }
      header nav { gap: 14px; }
      .hero { padding: 72px 0 60px; }
      section { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 30px 0 36px; }
      .number { padding-top: 6px; }
      h2 { font-size: clamp(32px, 8vw, 48px); }
      .app-link { font-size: 15px; gap: 24px; }
    }

.header-controls { display: flex; align-items: center; gap: 32px; }
.language-switch { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.language-switch a { opacity: .5; }
.language-switch a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.language-switch a:hover { opacity: 1; }
html[lang="ja"] { font-family: 'DM Sans', 'IBM Plex Sans JP', sans-serif; }
@media (max-width: 760px) {
  .header-controls { align-items: flex-end; flex-direction: column-reverse; gap: 20px; }
}
@media (max-width: 380px) {
  header nav:not(.language-switch) { flex-direction: column; align-items: flex-end; gap: 10px; }
}

.local-friends, .local-friends:hover { background: #c73944; color: #0a0017; }

.product-logo, .local-friends-logo { display: block; width: 136px; height: auto; }

.progress-page { min-height: 100svh; display: flex; flex-direction: column; }
.progress-main { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 80px 0; }
.progress-message { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.construction { font-size: 48px; line-height: 1; }
.progress-message h1 { margin: 0; font-size: clamp(48px, 9vw, 128px); line-height: 1.08; letter-spacing: -.045em; overflow-wrap: anywhere; }
.progress-page footer { border-top: 1px solid #0a0017; }