/* ============================================================
   variables.css — CSSカスタムプロパティ（:root）
   ブランドカラー・テキスト色・背景・ボーダー・レイアウト最大幅
   ============================================================ */
:root{
  --brand:#66CCB3;
  --brand-light:#D4F2EA;
  --brand-dark:#3DAA91;
  --brand-deep:#1A8A73;
  --accent:#F97316;
  --accent-dark:#EA6C0A;
  --text-primary:#111111;
  --text-secondary:#444;
  --text-muted:#888;
  --bg-white:#FFFFFF;
  --bg-light:#EDF4F2;
  --bg-dark:#F0F0ED;
  --border:#C8C8C8;
  --border-light:#E0E0E0;
}

/* 横幅1920pxベース制御 — 背景は全幅、コンテンツは最大1792px。超ワイド画面での余白暴走を防ぐため200pxで上限 */
:root{--side-pad:clamp(64px, calc((100vw - 1792px) / 2), 200px)}

/* ブレークポイント統一: 1440px(タブレット横) / 1024px(タブレット縦) / 768px(スマホ)
   --side-padをここで再定義することで、var(--side-pad)を参照する全セクションの
   左右余白が自動的に揃う（個別セクションでの直書きは撤廃） */
@media(max-width:1440px){
  :root{--side-pad:48px}
}
@media(max-width:1024px){
  :root{--side-pad:40px}
}
@media(max-width:768px){
  :root{--side-pad:24px}
}

/* ヘッダー高: 375〜768pxは74px下限、1920px前後で約98px、2560pxで約117px
   （1024pxで100%扱いにはならず2667px以上で120px上限に達する） */
:root{--header-height:clamp(74px, calc(3vw + 40px), 120px)}