/**
 * common.css - フォント・スペーシング・カラーなど共通変数
 * トップ・下層ページで共通利用
 */

/* ---------- Fluid spacing (400px〜1200px) ---------- */
:root {
  --fluid-4: clamp(2px, 1px + 0.25vw, 4px);
  --fluid-6: clamp(3px, 1.5px + 0.375vw, 6px);
  --fluid-8: clamp(4px, 2px + 0.5vw, 8px);
  --fluid-10: clamp(5px, 2.5px + 0.625vw, 10px);
  --fluid-12: clamp(6px, 3px + 0.75vw, 12px);
  --fluid-16: clamp(8px, 4px + 1vw, 16px);
  --fluid-20: clamp(10px, 5px + 1.25vw, 20px);
  --fluid-24: clamp(12px, 6px + 1.5vw, 24px);
  --fluid-28: clamp(14px, 7px + 1.75vw, 28px);
  --fluid-32: clamp(16px, 8px + 2vw, 32px);
  --fluid-40: clamp(20px, 10px + 2.5vw, 40px);
  --fluid-48: clamp(24px, 12px + 3vw, 48px);
  --fluid-56: clamp(28px, 14px + 3.5vw, 56px);
  --fluid-60: clamp(30px, 15px + 3.75vw, 60px);
  --fluid-64: clamp(32px, 16px + 4vw, 64px);
  --fluid-80: clamp(40px, 20px + 5vw, 80px);
  --fluid-100: clamp(50px, 25px + 6.25vw, 100px);
  --fluid-120: clamp(60px, 30px + 7.5vw, 120px);

  /* カラー */
  --idx-orange: #fe6c00;
  --idx-black: #1E2227;
  --idx-white: #ffffff;
  --idx-gray: #555;
  --idx-lgray: #f8f8f8;
  --idx-darkgray: #333;
  --idx-line: #06c755;

  /* レイアウト */
  --idx-width: 1440px;
  --idx-floating-banner-max: 320px;
  --idx-floating-banner-min: 213px;
  --header-height: clamp(64px, 5vw + 48px, 92px);

  /* タイポグラフィ */
  --idx-fs-watermark: clamp(60px, calc(40px + 5vw), 100px);
  --idx-fs-h1: clamp(32px, calc(24px + 2vw), 48px);
  --idx-fs-h2: clamp(24px, calc(16px + 2vw), 40px);
  --idx-fs-h3: clamp(20px, calc(14px + 1.5vw), 32px);
  --idx-fs-h4: clamp(16px, calc(12px + 1vw), 24px);
  --idx-fs-body: clamp(12px, calc(8px + 1vw), 20px);
  --idx-fs-caption: clamp(10px, calc(9px + 0.25vw), 12px);
}