/* === base.css (mobile-first) === */
:root {
  --maxw: 1100px;
  --gap: 1rem;
  --s1: .25rem; --s2: .5rem; --s3: 1rem; --s4: 1.5rem; --s5: 2rem;
}

html { box-sizing: border-box; font-size: 16px; height: 100%; }
*, *::before, *::after { box-sizing: inherit; }
body {
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP",
        "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #333;
  background: #f7f7f8;
}

/* Layout primitives */
.container { width: min(100% - 2rem, var(--maxw)); margin-inline: auto; }
.section { padding: var(--s5) var(--s3); }

/* Media */
img, video { max-width: 100%; height: auto; display: block; }

/* Links */
a { color: #0a66c2; text-underline-offset: 2px; }
a:hover { text-decoration: none; }

/* Tables */
table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }

/* Top nav (上部ナビ想定) */
.site-header { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid #e5e7eb; }
.top-nav { display: flex; gap: .75rem; align-items: center; padding: .75rem 0; overflow-x: auto; }
.top-nav a { text-decoration: none; padding: .25rem .5rem; border-radius: .5rem; color: inherit; }
.top-nav a.active { outline: 2px solid rgba(0,0,0,.12); }

/* Breadcrumb（必要なら） */
.breadcrumb { font-size: .9rem; color: #6b7280; padding: .5rem 0; }

/* Helpers */
.clearfix::after { content:""; display:block; clear:both; }
.hide-on-mobile { display: none; }
@media (min-width: 768px) { .hide-on-mobile { display: initial; } }