/* ==================================================
   rule.css (Hz-A Official / 変数定義)
================================================== */

@charset "utf-8";

:root {
  /* ==============================
     1. カラーパレット
  ============================== */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-text-main: #1a1a1a;
  --color-text-sub: #666666;
  --color-border: #cccccc;
  --color-bg-gray: #f5f5f5;
  --color-gray-light: #e5e5e5;

  /* ==============================
     2. フォントサイズ (1rem = 16px基準)
  ============================== */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-md: 1rem; /* 16px (基本) */
  --font-size-lg: 1.5rem; /* 24px */
  --font-size-xl: 2rem; /* 32px */
  --font-size-xxl: 2.8rem;

  /* ==============================
3. 余白 (margin / padding)
  ============================== */
  --space-xs: 0.5rem; /* 8px */
  --space-sm: 1rem; /* 16px */
  --space-md: 1.5rem; /* 24px */
  --space-lg: 2.5rem; /* 40px */
  --space-xl: 5rem; /* 80px (セクション間の大余白) */

  /* ==============================
     4. 重なり順 (z-index) のルール化
     ※「とりあえず9999」を防ぎ、ここで一括管理します
  ============================== */
  --z-index-base: 1;
  --z-index-header: 1000;
  --z-index-modal: 2000;

  /* ==============================
     5. その他（UIパーツ・アニメーション）
  ============================== */
  --border-width: 1px;
  --transition-speed: 0.3s;
  --transition-loader: 1s;
  --loader-stay-time: 1.25s;
  --transition-page: 0.8s; /* ページがスライドする速度 */
  --ease-slide: cubic-bezier(0.8, 0, 0.2, 1); /* シャープで滑らかな動きのカーブ */
  --z-index-transition: 9998; /* ヘッダーより上で、ローディングより下の階層 */
  --font-family-base: "Noto Sans JP", sans-serif;
}