/* 共通：変数・リセット・レイアウト・ユーティリティ */


:root{
  --paper:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --brand:#6b88a8;
  --accent:#f5ff6a;
  --radius:14px;
  --shadow:0 8px 30px rgba(2, 8, 23, .08);
  --max:1200px;      /* PC広め */
  --read:760px;      /* 文章読み幅 */
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  color:var(--ink);
  background:linear-gradient(#f7f8fa, #eef2f6);
  max-width: 100%;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }

.container{ 
  max-width:var(--max); 
  margin:0 auto; 
  /* padding:0 16px;  */
}
.readable{ max-width:var(--read); margin-left:auto; margin-right:auto; }
.wide{ max-width:var(--max); margin-left:auto; margin-right:auto; }

.section{ padding:44px 0; }
.section--tight{ padding:26px 0; }

.center{ text-align:center; }
.subtle{ color:var(--muted); }

.mt16{ margin-top:16px; }
.mt24{ margin-top:24px;}
.mt32{ margin-top:32px; }
.p0{ margin:0; }

/* heading helpers */
.h2{ margin:12px 0 0; font-size:clamp(22px,3vw,36px); }
.h3{ margin:0 0 8px; }