@charset "utf-8";

/**
 * デザイントークン: タイポグラフィシステム
 * フォントファミリー、サイズ、ウェイト、行間の統一規則
 */

:root {
  /* === Font Families === */
  --font_NotoSansJP: 'Noto Sans JP', sans-serif;  /* 日本語メインフォント */
  --font_MavenPro: 'Maven Pro', sans-serif;       /* 英語・数字用フォント */
  --font_Figtree: 'Figtree', sans-serif;          /* 英語タイトル用フォント */
  
  /* === Font Sizes - Desktop (1440px+) === */
  --font_size_hero: 7.5rem;          /* 120px - ヒーロータイトル */
  --font_size_section_en: 5.625rem;  /* 90px - セクションタイトル英語 */
  --font_size_section_ja: 1.25rem;   /* 20px - セクションタイトル日本語 */
  --font_size_h1: 4rem;              /* 64px - ページタイトル */
  --font_size_h2: 2.5rem;            /* 40px - 大見出し */
  --font_size_h3: 2rem;              /* 32px - サブタイトル */
  --font_size_h4: 1.75rem;           /* 28px - 中見出し */
  --font_size_h5: 1.5rem;            /* 24px - 小見出し */
  --font_size_h6: 1.25rem;           /* 20px - 最小見出し */
  --font_size_body: 1rem;            /* 16px - 本文 */
  --font_size_body_large: 1.125rem;  /* 18px - 大きめ本文 */
  --font_size_small: 0.875rem;       /* 14px - キャプション */
  --font_size_xs: 0.75rem;           /* 12px - 極小テキスト */
  
  /* === Font Weights === */
  --font_weight_light: 300;
  --font_weight_normal: 400;
  --font_weight_medium: 500;
  --font_weight_semibold: 600;
  --font_weight_bold: 700;
  --font_weight_extrabold: 800;
  --font_weight_black: 900;
  
  /* === Line Heights === */
  --line_height_tight: 1.1;          /* タイトル用 */
  --line_height_snug: 1.2;           /* 見出し用 */
  --line_height_normal: 1.4;         /* 標準 */
  --line_height_relaxed: 1.6;        /* リラックス */
  --line_height_loose: 1.8;          /* 見出し用ゆったり */
  --line_height_body: 2;             /* 本文用 */
  
  /* === Letter Spacing === */
  --letter_spacing_tight: -0.03em;
  --letter_spacing_normal: 0;
  --letter_spacing_wide: 0.01em;
  --letter_spacing_wider: 0.02em;
  --letter_spacing_widest: 0.05em;
  --letter_spacing_extra: 0.1em;
  --letter_spacing_super: 0.15em;
}

/* === Typography Classes === */

/* ヒーローセクション用タイトル */
.typo-hero {
  font-family: var(--font_Figtree);
  font-size: var(--font_size_hero);
  font-weight: var(--font_weight_bold);
  line-height: var(--line_height_tight);
  letter-spacing: var(--letter_spacing_wider);
}

/* セクションタイトル英語 */
.typo-section-en {
  font-family: var(--font_MavenPro);
  font-size: var(--font_size_section_en);
  font-weight: var(--font_weight_bold);
  line-height: 1;
  letter-spacing: var(--letter_spacing_wider);
}

/* セクションタイトル日本語 */
.typo-section-ja {
  font-family: var(--font_NotoSansJP);
  font-size: var(--font_size_section_ja);
  font-weight: var(--font_weight_bold);
  line-height: var(--line_height_relaxed);
  color: var(--col_primary);
}

/* ページタイトル */
.typo-page-title {
  font-family: var(--font_NotoSansJP);
  font-size: var(--font_size_h1);
  font-weight: var(--font_weight_bold);
  line-height: var(--line_height_snug);
  letter-spacing: var(--letter_spacing_wide);
}

/* 見出しレベル */
.typo-h2 {
  font-family: var(--font_NotoSansJP);
  font-size: var(--font_size_h2);
  font-weight: var(--font_weight_bold);
  line-height: var(--line_height_loose);
  letter-spacing: var(--letter_spacing_wide);
}

.typo-h3 {
  font-family: var(--font_NotoSansJP);
  font-size: var(--font_size_h3);
  font-weight: var(--font_weight_bold);
  line-height: var(--line_height_loose);
}

.typo-h4 {
  font-family: var(--font_NotoSansJP);
  font-size: var(--font_size_h4);
  font-weight: var(--font_weight_bold);
  line-height: var(--line_height_loose);
}

.typo-h5 {
  font-family: var(--font_NotoSansJP);
  font-size: var(--font_size_h5);
  font-weight: var(--font_weight_semibold);
  line-height: var(--line_height_relaxed);
}

.typo-h6 {
  font-family: var(--font_NotoSansJP);
  font-size: var(--font_size_h6);
  font-weight: var(--font_weight_semibold);
  line-height: var(--line_height_relaxed);
}

/* 本文系 */
.typo-body {
  font-family: var(--font_NotoSansJP);
  font-size: var(--font_size_body);
  font-weight: var(--font_weight_normal);
  line-height: var(--line_height_body);
  letter-spacing: var(--letter_spacing_wide);
}

.typo-body-large {
  font-family: var(--font_NotoSansJP);
  font-size: var(--font_size_body_large);
  font-weight: var(--font_weight_normal);
  line-height: var(--line_height_body);
  letter-spacing: var(--letter_spacing_wide);
}

.typo-caption {
  font-family: var(--font_NotoSansJP);
  font-size: var(--font_size_small);
  font-weight: var(--font_weight_normal);
  line-height: var(--line_height_relaxed);
}

.typo-small {
  font-family: var(--font_NotoSansJP);
  font-size: var(--font_size_xs);
  font-weight: var(--font_weight_normal);
  line-height: var(--line_height_relaxed);
}

/* 数値・英語専用 */
.typo-number {
  font-family: var(--font_MavenPro);
  font-weight: var(--font_weight_bold);
  letter-spacing: var(--letter_spacing_tight);
}

/* 特殊用途 */
.typo-label {
  font-family: var(--font_Figtree);
  font-size: var(--font_size_small);
  font-weight: var(--font_weight_semibold);
  letter-spacing: var(--letter_spacing_widest);
  text-transform: uppercase;
}

/* カラーバリエーション */
.typo--primary { color: var(--col_primary); }
.typo--white { color: var(--col_white); }
.typo--gray { color: var(--col_gray_medium); }
.typo--dark { color: var(--col_font); }