:root {
  --c-primary: #0050D0; --c-ink: #002050; --c-soft: #EBF2FE; --c-sub: #475569;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px;
  --f-s: 14px; --f-m: 16px; --f-l: 21px;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  background: var(--c-soft); color: var(--c-ink); }
main { text-align: center; padding: var(--s4) var(--s2); max-width: 400px; }
img { border-radius: 22%; box-shadow: 0 4px 16px rgba(0, 32, 80, .16); }
h1 { font-size: var(--f-l); margin: var(--s3) 0 var(--s1); }
p { font-size: var(--f-m); margin: 0 0 var(--s3); }
.sub { font-size: var(--f-s); color: var(--c-sub); }
.btn { display: inline-block; padding: var(--s2) var(--s3); border-radius: var(--s1); background: var(--c-primary);
  color: #fff; font-size: var(--f-m); font-weight: bold; text-decoration: none; margin-bottom: var(--s3); }
main.doc { text-align: left; max-width: 720px; background: #fff; border-radius: var(--s1); margin: var(--s4) var(--s2); }
main.doc h2 { font-size: var(--f-m); margin: var(--s3) 0 var(--s1); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }