/* Base / Reset / Variables */
* { box-sizing: border-box; margin:0; padding:0; }
:root {
  --font-sans: system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --fs-base: 16px;

  --color-bg: #f5f7fb;
  --color-bg-alt: #ffffff;
  --color-layer: rgba(255,255,255,0.6);
  --color-text: #212936;
  --color-muted: #65748b;
  --color-border: #e2e8f0;

  --color-primary: #667eea;
  --color-primary-accent: #764ba2;
  --color-accent-soft: #e1e8ff;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-sm: 0 2px 6px -1px rgba(0,0,0,0.08),0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 6px 18px -4px rgba(28,28,30,0.22);
  --shadow-focus: 0 0 0 3px rgba(102,126,234,0.4);

  --gradient-hero: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  --trans: .28s cubic-bezier(.4,0,.2,1);
}
html { font-size: var(--fs-base); scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; display:block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--trans); }
a:hover,a:focus-visible { color: var(--color-primary-accent); }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.skip-link {
  position:absolute; left:-999px; top:0;
  background:#fff; padding:.5rem 1rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  z-index:1000;
}
.skip-link:focus { left:.5rem; }