/* ============================================================
   UMIMAP 共通CSS v2.0  —  Ocean Design System
   ============================================================ */

/* ===== Design Tokens ===== */
:root {
  color-scheme: light dark;

  /* Brand palette */
  --brand:       #0077b6;   /* deep ocean blue */
  --brand-mid:   #0096c7;   /* mid teal */
  --brand-light: #00b4d8;   /* bright teal */
  --brand-weak:  #dff0fb;   /* very light tint */
  --accent:      #005f92;   /* dark hover */
  --pro:         #9333ea;   /* purple – PRO badge */

  /* Neutral palette */
  --bg:          #ffffff;
  --bg-soft:     #f4f7fa;
  --bg-card:     #ffffff;
  --text:        #0f172a;
  --muted:       #64748b;
  --border:      #dde3ea;
  --border-soft: #eef1f5;

  /* Layout */
  --header-h:   64px;
  --sidebar-w:  256px;
  --radius:     14px;
  --radius-lg:  20px;
  --radius-pill: 9999px;
  --gap:        28px;
  --maxw:       1200px;

  /* Elevation */
  --shadow-xs: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
  --shadow:    0 4px 20px rgba(0,40,80,.09), 0 2px 6px rgba(0,40,80,.05);
  --shadow-lg: 0 8px 32px rgba(0,40,80,.12), 0 4px 12px rgba(0,40,80,.07);

  /* Gradient helpers */
  --brand-grad:  linear-gradient(135deg, #0077b6 0%, #00b4d8 100%);
  --brand-grad-v: linear-gradient(180deg, #0077b6 0%, #005f92 100%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #070d14;
    --bg-soft:     #0d1724;
    --bg-card:     #0f1c2e;
    --text:        #e2eaf4;
    --muted:       #7a95b0;
    --border:      #1a2d42;
    --border-soft: #152236;
    --brand-weak:  rgba(0,119,182,.14);
    --shadow:      0 4px 20px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.25);
    --shadow-lg:   0 8px 32px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.3);
  }
}

/* ===== Base Reset ===== */
*,*::before,*::after { box-sizing: border-box }
html, body { height: 100% }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", Meiryo, "Noto Sans JP",
    system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: .015em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block }
svg { display: block }

a { color: var(--brand-mid); text-decoration: none; transition: color .15s }
a:hover { color: var(--brand); text-decoration: underline }

h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 .3em; font-feature-settings: "palt" }
h1 { font-size: clamp(20px, 3vw, 28px); font-weight: 900; letter-spacing: -.01em }
h2 { font-size: clamp(17px, 2.4vw, 22px); font-weight: 800 }
h3 { font-size: clamp(15px, 2vw, 18px); font-weight: 700 }
h4 { font-size: 14px; font-weight: 700 }

p, ul, ol { margin: .55em 0 }
ul, ol { padding-inline-start: 1.3em }

.muted { color: var(--muted) }

/* ===== Accessibility ===== */
.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  left: 16px; top: 16px; width: auto; height: auto;
  background: var(--brand); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 9999;
}

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 20px;
  /* 下部に細いブランドライン */
  box-shadow: 0 1px 0 var(--border), 0 2px 12px rgba(0,40,80,.04);
}

.logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 900; font-size: 18px;
  color: var(--text); letter-spacing: -.02em;
}
.logo img { height: 26px; width: auto }

.top-menu ul {
  display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; align-items: center;
}
.top-menu a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  color: var(--muted); font-size: 14px; font-weight: 500;
  transition: background .15s, color .15s;
}
.top-menu a:hover { background: var(--brand-weak); color: var(--brand); text-decoration: none }

.hamburger {
  display: none; appearance: none; border: 0;
  background: transparent; width: 40px; height: 40px; border-radius: 10px;
  color: var(--text); cursor: pointer;
  transition: background .15s;
}
.hamburger:hover { background: var(--bg-soft) }
.hamburger:focus-visible { outline: 2px solid var(--brand) }
.hamburger svg { width: 22px; height: 22px; margin: auto }

/* アプリへ戻る ボタン（PC） */
@media (min-width: 901px) {
  .top-menu a.btn-pill {
    background: var(--brand-grad) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    padding: 7px 16px !important;
    border-radius: var(--radius-pill) !important;
    letter-spacing: .01em !important;
    box-shadow: 0 2px 8px rgba(0,119,182,.35) !important;
    transition: filter .15s, box-shadow .15s !important;
  }
  .top-menu a.btn-pill:hover {
    filter: brightness(1.08) !important;
    box-shadow: 0 4px 14px rgba(0,119,182,.45) !important;
    text-decoration: none !important;
    color: #fff !important;
  }
  .top-menu ul { align-items: center }
}

/* ===== Layout ===== */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px }
.grid {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap: var(--gap);
  align-items: start;
  padding: 28px 0 64px;
}

/* ===== Sidebar ===== */
.sidebar { position: relative; align-self: stretch }
.sidebar-inner {
  position: sticky; top: calc(var(--header-h) + 16px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 16px 12px;
  overflow: hidden;
}
/* ブランドアクセントライン（上部） */
.sidebar-inner::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--brand-grad);
  border-radius: 3px 3px 0 0;
  margin: -16px -12px 14px;
}

.side-title {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  padding: 0 10px; margin-bottom: 8px;
}
.side-tabs { list-style: none; margin: 0; padding: 0 }
.side-tabs li { margin: 2px 0 }
.side-tabs a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--muted); font-size: 14px; font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.side-tabs a:hover {
  background: var(--bg-soft);
  color: var(--text);
  text-decoration: none;
}
.side-tabs a[aria-current="page"],
.side-tabs .active {
  background: var(--brand-weak);
  color: var(--brand);
  font-weight: 700;
}
@media (prefers-color-scheme: dark) {
  .side-tabs a[aria-current="page"],
  .side-tabs .active {
    background: rgba(0,119,182,.18);
    color: var(--brand-light);
  }
}

/* ===== Main / Card ===== */
main { min-height: 60vh }
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(20px, 3vw, 36px);
}
.page-title { margin: 0 0 18px; font-weight: 900; letter-spacing: -.02em }

/* ===== Form elements ===== */
input, textarea, select {
  font-family: inherit;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  background: var(--bg);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0,119,182,.12);
}

/* ===== Buttons ===== */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; border-radius: var(--radius-pill);
  background: var(--brand-grad); color: #fff;
  font-weight: 700; font-size: 14px; border: none; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,119,182,.3);
  transition: filter .15s, box-shadow .15s;
  text-decoration: none;
}
.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 14px rgba(0,119,182,.4);
  color: #fff; text-decoration: none;
}
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--radius-pill);
  background: transparent; color: var(--brand);
  font-weight: 600; font-size: 14px;
  border: 1.5px solid currentColor; cursor: pointer;
  transition: background .15s, color .15s;
  text-decoration: none;
}
.btn-outline:hover {
  background: var(--brand-weak); text-decoration: none;
}

/* ===== Legal pages ===== */
.legal h2 { margin: 32px 0 10px }
.legal p  { margin: 8px 0 }
.legal ul { margin: 8px 0 8px 1.25em }
.legal li { margin: .45em 0 }
.legal .meta { display: grid; gap: 6px; margin: 14px 0 24px; color: var(--muted) }
.legal table { width: 100%; border-collapse: collapse; margin: 8px 0 18px }
.legal th, .legal td {
  border: 1px solid var(--border); padding: 10px 12px; text-align: left;
}
.legal thead th { background: var(--bg-soft); font-weight: 700 }

/* ===== Footer ===== */
.site-footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  margin-top: 0;
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 48px 20px 28px;
  display: grid;
  grid-template-columns: 200px 1fr 1fr 1fr;
  gap: 32px;
}
.footer-brand { display: flex; flex-direction: column; gap: 12px }
.footer-brand img { height: 22px; width: auto; opacity: .8 }
.footer-brand p {
  font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0;
}
.footer-col h4 {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 12px;
}
.footer-col ul {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
}
.footer-col a {
  font-size: 13.5px; color: var(--muted);
  transition: color .15s;
}
.footer-col a:hover { color: var(--brand); text-decoration: none }
.footer-bottom {
  max-width: var(--maxw); margin: 0 auto;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.footer-bottom small { font-size: 12px; color: var(--muted) }
.footer-bottom .footer-tags { display: flex; gap: 10px }
.footer-bottom .footer-tags a {
  font-size: 11.5px; color: var(--muted);
  transition: color .15s;
}
.footer-bottom .footer-tags a:hover { color: var(--brand); text-decoration: none }

@media (max-width: 760px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    padding: 36px 20px 24px;
  }
  .footer-brand { grid-column: 1 / -1 }
}
@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr }
}

/* ===== Slide caption ===== */
.slide .caption { background: rgba(0,0,0,.40) }

/* ===== Modal ===== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: color-mix(in oklab, #000 50%, transparent);
  display: none; align-items: center; justify-content: center; z-index: 1000;
}
.modal-backdrop.show { display: flex }
.modal {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}
.modal header {
  background: var(--bg-soft) !important;
  border-bottom: 1px solid var(--border) !important;
}
.modal .content { color: var(--text) !important }
.modal .close   { color: var(--muted) !important }
[role="dialog"] {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}
@supports (-webkit-touch-callout: none) {
  .modal, .modal header, .modal .content, [role="dialog"] {
    background-color: var(--bg) !important;
  }
}
@media (prefers-color-scheme: dark) {
  .modal-backdrop { background: color-mix(in oklab, #000 65%, transparent) }
}

/* ===== News cards ===== */
.news-card button {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* ===== Map embed ===== */
.embed-map {
  width: 100%; aspect-ratio: 16/9;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg-soft);
}
.embed-map iframe { width: 100%; height: 100%; display: block; border: 0 }
@media (max-width: 900px) {
  .embed-map {
    height: clamp(400px, calc(100svh - var(--header-h) - 24px - env(safe-area-inset-bottom, 0px)), 800px);
    aspect-ratio: auto;
  }
}

/* ===== About page legacy classes ===== */
.about .feature-img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  display: block; background: var(--bg-soft);
  border-radius: var(--radius);
}
.about .feature { overflow: hidden }
.about .feature-grid { margin-bottom: 26px }
.about .feature-more { display: inline-flex; margin-top: 10px; margin-bottom: 28px }
@media (max-width: 560px) {
  .about .feature-img { aspect-ratio: 4/3 }
}

/* ===== Mobile ===== */
@media (max-width: 900px) {
  .top-menu { display: none }
  .hamburger { display: inline-grid; place-items: center }
  .grid { grid-template-columns: 1fr }
  .sidebar {
    position: fixed; top: var(--header-h); left: 0; bottom: 0; z-index: 1100;
    width: min(86vw, 320px);
    transform: translateX(-100%); transition: transform .22s cubic-bezier(.4,0,.2,1);
  }
  .sidebar.open { transform: translateX(0) }
  .sidebar-inner {
    height: calc(100dvh - var(--header-h) - 16px); overflow: auto;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }
  .sidebar-inner::before { display: none }
  .overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.38); backdrop-filter: blur(3px);
    display: none; z-index: 1000;
  }
  .overlay.show { display: block }
  body.menu-open { overflow: hidden }
  .hero .ctrl { display: none !important }
}

/* Mobile header patch */
@media (max-width: 900px) {
  .site-header.mobile-header-active {
    display: grid;
    grid-template-columns: auto 1fr auto;
  }
  .site-header.mobile-header-active > .wrap { display: none !important }
  .site-header.mobile-header-active .header-actions {
    display: flex; align-items: center; gap: 10px;
    grid-column: 3; justify-self: end;
  }
  .site-header.mobile-header-active .hamburger { display: inline-grid !important }
}

/* ===== Print ===== */
@media print {
  .site-header, .sidebar, .overlay, .site-footer { display: none !important }
  .wrap { max-width: none; padding: 0 }
  .card { box-shadow: none; border: 0; padding: 0 }
}