/* ============================================================
   BASE — Reset, Custom Properties, Typography
   シュッチョーWifi
   ============================================================ */

:root {
  /* Brand */
  --clr-primary:       #1D4ED8;
  --clr-primary-dark:  #1E3A8A;
  --clr-primary-light: #DBEAFE;
  --clr-primary-mid:   #2563EB;

  /* Accent (teal) — リンク・フッターアクセント */
  --clr-accent:        #0097A7;
  --clr-accent-dark:   #00838F;
  --clr-accent-light:  #E0F7FA;

  /* Neutral */
  --clr-white:    #FFFFFF;
  --clr-gray-50:  #F8FAFC;
  --clr-gray-100: #F1F5F9;
  --clr-gray-200: #E2E8F0;
  --clr-gray-400: #94A3B8;
  --clr-gray-600: #475569;
  --clr-gray-800: #1E293B;
  --clr-gray-900: #0F172A;

  /* Semantic */
  --clr-success: #059669;
  --clr-warning: #D97706;
  --clr-danger:  #DC2626;

  /* Typography */
  --ff: 'Noto Sans JP', sans-serif;
  --fw-r: 400;
  --fw-m: 500;
  --fw-b: 700;
  --fw-bk: 900;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.25rem;
  --fs-5xl:  3rem;

  --lh-tight:  1.25;
  --lh-snug:   1.4;
  --lh-normal: 1.75;

  /* Layout */
  --container-max: 1100px;
  --container-pad: clamp(1rem, 5vw, 2rem);

  /* Spacing scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Radius */
  --r-sm:   0.375rem;
  --r:      0.75rem;
  --r-lg:   1.25rem;
  --r-full: 9999px;

  /* Shadow */
  --sh-sm: 0 1px 2px rgba(0,0,0,.05);
  --sh:    0 2px 8px rgba(0,0,0,.07);
  --sh-lg: 0 8px 24px rgba(0,0,0,.10);

  /* Transition */
  --tr: 0.2s ease;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--ff);
  font-size: var(--fs-base);
  font-weight: var(--fw-r);
  line-height: var(--lh-normal);
  color: var(--clr-gray-800);
  background: var(--clr-white);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--clr-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
button { font-family: var(--ff); }

h1, h2, h3, h4 {
  font-weight: var(--fw-b);
  line-height: var(--lh-tight);
  color: var(--clr-gray-900);
}
h1 { font-size: clamp(var(--fs-3xl), 5vw,   var(--fs-5xl)); font-weight: var(--fw-bk); }
h2 { font-size: clamp(var(--fs-2xl), 3.5vw, var(--fs-4xl)); font-weight: var(--fw-bk); }
h3 { font-size: clamp(var(--fs-xl),  2.5vw, var(--fs-2xl)); }
h4 { font-size: var(--fs-lg); }
p  { line-height: var(--lh-normal); }
strong { font-weight: var(--fw-b); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Utilities ---- */
.text-center { text-align: center; }
.text-primary { color: var(--clr-primary); }
.text-white   { color: var(--clr-white); }
.text-muted   { color: var(--clr-gray-600); }
.mt-4  { margin-top: var(--sp-4); }
.mt-8  { margin-top: var(--sp-8); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-8  { margin-bottom: var(--sp-8); }