:root {
  --bg: #f4f7f7;
  --surface: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --line: #e5e7eb;
  --brand: #0f766e;
  --brand-strong: #115e59;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Noto Sans JP', 'Hiragino Sans', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #f8fbfb 0%, #f2f5f7 100%);
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.site-header {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(10px);
  background: color-mix(in oklab, #ffffff 88%, transparent);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1160px; margin: 0 auto; padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { font-weight: 700; letter-spacing: .02em; }
.nav { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.nav a { font-size: 14px; color: #374151; padding: 6px 10px; border-radius: 999px; }
.nav a:hover { background: #ecfeff; color: var(--brand-strong); text-decoration: none; }
.menu-button { display: none; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
main.site-main { min-height: calc(100vh - 180px); }
.container { max-width: 1160px; margin: 28px auto 64px; padding: 0 18px; }
.hero {
  background: radial-gradient(1200px 360px at 10% -5%, #e0f2fe 0%, #ffffff 45%, #ffffff 100%);
  border: 1px solid var(--line); border-radius: 16px; padding: 30px 26px;
}
.hero h1 { margin: 0 0 12px; font-size: clamp(26px, 4vw, 42px); line-height: 1.2; }
.hero p { margin: 0; color: var(--muted); line-height: 1.8; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 16px; margin-top: 22px; }
.card {
  grid-column: span 12;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; box-shadow: 0 8px 24px rgb(15 23 42 / 4%);
}
.section-title { margin: 34px 0 8px; font-size: 24px; }
.section-caption { margin: 0; color: var(--muted); }
.card h3 { margin: 0 0 10px; font-size: 18px; }
.card p { margin: 0; color: var(--muted); line-height: 1.75; }
.badge { display: inline-flex; font-size: 12px; padding: 4px 9px; border-radius: 999px; background: #ecfeff; color: #0f766e; border: 1px solid #bae6fd; }
.page { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.breadcrumbs { margin-bottom: 10px; color: var(--muted); font-size: 13px; }
.page-header h1 { margin: 0 0 8px; font-size: clamp(24px, 3vw, 36px); }
.page-header p { margin: 0; color: var(--muted); }
.page-body { margin-top: 16px; line-height: 1.9; }
.page-body h2, .page-body h3 { margin-top: 1.8em; margin-bottom: .55em; }
.page-body ul, .page-body ol { padding-left: 1.3em; }
.page-body img { max-width: 100%; border-radius: 10px; border: 1px solid var(--line); }
.highlight-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.highlight-item { background: #f0fdfa; border: 1px solid #ccfbf1; border-radius: 10px; padding: 10px; font-size: 14px; }
.cta { margin-top: 24px; padding: 16px; border-radius: 12px; background: #f0fdfa; border: 1px solid #99f6e4; }
.cta a { display: inline-block; background: var(--brand); color: #fff; padding: 10px 14px; border-radius: 9px; text-decoration: none; font-size: 14px; }
.cta a:hover { background: var(--brand-strong); }
.news-list { margin: 0; padding-left: 1.15em; }
.news-list li { margin: 0 0 8px; }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); background: #fff; }
.footer-inner { max-width: 1160px; margin: 0 auto; padding: 22px 18px; font-size: 13px; }
@media (min-width: 820px) {
  .card.span-4 { grid-column: span 4; }
  .card.span-6 { grid-column: span 6; }
}
@media (max-width: 819px) {
  .menu-button { display: inline-flex; }
  .nav { display: none; width: 100%; padding-top: 8px; }
  .nav.is-open { display: flex; }
  .header-inner { flex-wrap: wrap; }
  .highlight-list { grid-template-columns: 1fr; }
}
