@charset "UTF-8";
/*
Style Name: ブラックダイヤLPサイト 共通変数
Description: サイト共通のCSS変数定義
Version: 1.0.0
*/

:root {
  /* === フォントファミリー（LINE Seed Fonts優先） === */
  --font-family-base: "LINE Seed JP", "Yu Gothic UI", "Yu Gothic", YuGothic,
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  /* --font-family-en: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif; */

  /* === 基準設定（14px=1rem） === */
  --base-font-size: 14px;
  --min-viewport: 375px; /* iPhone SE */
  --max-viewport: 1440px; /* Desktop */

  /* === タイポグラフィスケール（Perfect Fourth: 1.333） === */
  --scale-sm: 0.75; /* 10.5px */
  --scale-base: 1; /* 14px */
  --scale-md: 1.125; /* 15.75px */
  --scale-lg: 1.333; /* 18.66px */
  --scale-xl: 1.777; /* 24.88px */
  --scale-2xl: 2.369; /* 33.17px */
  --scale-3xl: 3.157; /* 44.2px */

  /* === レスポンシブフォントサイズ（統一計算式） === */
  /* 計算式: clamp(min-rem, preferred-vw, max-rem) */

  /* XS: 10.5px → 12.25px (0.75rem → 0.875rem) */
  --font-xs: clamp(0.75rem, 0.73rem + 0.09vw, 0.875rem);

  /* SM: 12.25px → 14px (0.875rem → 1rem) */
  --font-sm: clamp(0.875rem, 0.82rem + 0.16vw, 1rem);

  /* BASE: 14px → 15.75px (1rem → 1.125rem) */
  --font-base: clamp(1rem, 0.93rem + 0.34vw, 1.125rem);

  /* MD: 15.75px → 18.38px (1.125rem → 1.313rem) */
  --font-md: clamp(1.125rem, 1.02rem + 0.47vw, 1.313rem);

  /* LG: 18.38px → 22.75px (1.313rem → 1.625rem) */
  --font-lg: clamp(1.313rem, 1.15rem + 0.72vw, 1.625rem);

  /* XL: 22.75px → 28px (1.625rem → 2rem) */
  --font-xl: clamp(1.625rem, 1.42rem + 0.94vw, 2rem);

  /* 2XL: 26px → 32px (1.857rem → 2.286rem) - サイズを縮小 */
  --font-2xl: clamp(1.857rem, 1.6rem + 1.1vw, 2.286rem);

  /* 3XL: 32px → 40px (2.286rem → 2.857rem) */
  --font-3xl: clamp(2.286rem, 1.9rem + 1.7vw, 2.857rem);

  /* === 行間設定（視認性重視） === */
  --line-height-tight: 1.25; /* 見出し用 */
  --line-height-normal: 1.6; /* 本文用（日本語最適） */
  --line-height-relaxed: 1.8; /* リード文用 */

  /* === フォントウェイト === */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* === レターシャーシング（可読性） === */
  --letter-spacing-tight: -0.02em; /* 大見出し用 */
  --letter-spacing-normal: 0; /* 標準 */
  --letter-spacing-wide: 0.05em; /* キャプション用 */

  /* === ベース変数 === */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-2xl: 32px;
  --border-radius-full: 100vw;

  /* === スペーシング変数 === */
  --space-sm: 8px;
  --space-md: 16px; /* ガター/余白基準 */
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /* === iPhone16 Pro基準設計値 === */
  --mobile-xs-width: 375px;
  --mobile-base-width: 440px;
  --mobile-gutter: 16px;
  --mobile-margin: 16px;

  /* === ブレークポイント === */
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;

  /* === コンテナ幅 === */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
}