/* ============================================
   Design Tokens — Figma Source of Truth
   File: sYWw8NwmYgDAkkSHwu95ig (1Top)
   Extracted: 2026-04-03
   ============================================ */

:root {
  /* ==========================================
     COLOR PALETTE
     ========================================== */

  /* Primary — グラデーション始点/終点 */
  --color-primary-start: #2a86bb;       /* rgb(42, 134, 187)  — 明るい青 */
  --color-primary-end:   #0c418d;       /* rgb(12, 65, 141)   — 深い青   */

  /* Gradients */
  --gradient-main:       linear-gradient(122.63deg, #2a86bb 3.56%, #0c418d 97.15%);
  --gradient-diagonal:   linear-gradient(136.82deg, #2a86bb 3.56%, #0c418d 97.15%);
  --gradient-hero:       linear-gradient(108.92deg, #2a86bb 0%, #0c418d 100%);
  --gradient-fade-white: linear-gradient(221.81deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.72) 100%);
  --gradient-fade-blue:  linear-gradient(90.07deg, rgba(42,134,187,0) 0%, rgba(38,122,170,0.93) 100%);

  /* Gradient Aliases (style.css互換) */
  --color-gradient:          var(--gradient-main);
  --color-gradient-diagonal: var(--gradient-diagonal);

  /* Brand */
  --color-blue-logo:     #1950a0;       /* ISHIGUROロゴ青 */

  /* Accent — ボタン・強調 */
  --color-blue-btn:      #3683ff;       /* 青ボタン（2箇所使用） */
  --color-green-btn:     #03e503;       /* 緑ボタン（2箇所使用） */
  --color-green-accent:  #22f922;       /* 緑アクセント（4箇所使用） */
  --color-green-tag:     #348f34;       /* 緑タグ（3箇所使用） */

  /* Text */
  --color-text:          #1e1e1e;       /* メインテキスト（33箇所使用） */
  --color-text-navy:     #0a3262;       /* ネイビーテキスト（8箇所使用） */
  --color-text-sub:      #959ca7;       /* サブテキスト（3箇所使用） */
  --color-white:         #ffffff;

  /* Background */
  --color-bg-light:      #ecf6ff;       /* 薄い青背景（2箇所使用） */
  --color-bg-footer:     #292929;       /* フッター背景 */
  --color-bg-footer-alt: #252825;       /* フッター背景（代替/3箇所使用） */

  /* Border */
  --color-border-light:  #dde7f0;       /* 薄い罫線 */
  --color-border-tag:    #c2c7ce;       /* タグ・カード枠（3箇所使用） */

  /* Watermark / 透かし */
  --color-watermark:     #e2e9f0;       /* 背景ウォーターマーク（3箇所使用） */

  /* ==========================================
     TYPOGRAPHY
     ========================================== */

  /* Font Families */
  --font-primary:   'Noto Sans JP', sans-serif;      /* 日本語メイン（全ウェイト） */
  --font-accent:    'Open Sans', sans-serif;          /* 英字ウォーターマーク（Bold 13箇所） */
  --font-data:      'Inter', sans-serif;              /* 数値・データ表示（Medium 8箇所） */

  /* Font Sizes — 使用頻度順 */
  --text-hero:       88px;    /* ヒーローメイン（1箇所） */
  --text-heading-xl: 66px;    /* セクション見出し大（11箇所） */
  --text-heading-lg: 50px;    /* セクション見出し中（9箇所） */
  --text-heading-md: 40px;    /* サブ見出し英語（1箇所） */
  --text-heading-sm: 36px;    /* カードタイトル等（15箇所） */
  --text-subhead:    28px;    /* プレタイトル（2箇所） */
  --text-title:      26px;    /* セクション内タイトル（6箇所） */
  --text-lead:       20px;    /* リード文・説明文（7箇所） */
  --text-body-lg:    18px;    /* 本文大（10箇所） */
  --text-body:       16px;    /* 本文標準（35箇所・最多） */
  --text-small:      15px;    /* フッターリンク等（1箇所） */
  --text-caption:    13px;    /* キャプション・タグ（6箇所） */

  /* Watermark Sizes */
  --text-watermark-xl: 180px; /* 大ウォーターマーク（2箇所） */
  --text-watermark-lg: 170px; /* ウォーターマーク標準（1箇所） */
  --text-watermark:    160px; /* ウォーターマーク小（8箇所） */
  --text-watermark-sm:  90px; /* ウォーターマーク最小（3箇所） */

  /* Font Weights */
  --weight-light:    350;     /* DemiLight（12箇所） */
  --weight-regular:  400;     /* Regular（3箇所） */
  --weight-medium:   500;     /* Medium（23箇所） */
  --weight-bold:     700;     /* Bold（58箇所・最多） */
  --weight-extrabold: 800;    /* ExtraBold（4箇所） */

  /* Line Heights */
  --leading-tight:   1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 2.1;

  /* Letter Spacing */
  --tracking-title:  3.96px;  /* 見出し大 */
  --tracking-sub:    3px;     /* 見出し中 */
  --tracking-pre:    2.16px;  /* プレタイトル */

  /* ==========================================
     SPACING — 基本は不規則だが主要値をトークン化
     ========================================== */

  /* Layout */
  --content-max-width: 1260px;  /* コンテンツ最大幅（11箇所） */
  --page-width:        1440px;  /* ページ幅（10箇所） */
  --header-height:     121px;

  /* Section Padding */
  --section-padding:     100px 90px;  /* セクション共通パディング（上下100 左右90） */
  --section-padding-y:   100px;  /* セクション上下パディング */
  --section-padding-x:    90px;  /* セクション左右パディング */
  --section-padding-y-lg: 120px; /* 大きいセクション上下 */

  /* Component Spacing */
  --space-2:    2px;
  --space-5:    5px;
  --space-8:    8px;
  --space-10:  10px;
  --space-12:  12px;
  --space-17:  17px;   /* フッターリスト間隔（4箇所） */
  --space-18:  18px;
  --space-20:  20px;
  --space-22:  22px;
  --space-30:  30px;
  --space-32:  32px;
  --space-40:  40px;
  --space-50:  50px;
  --space-60:  60px;
  --space-80:  80px;

  /* ==========================================
     BORDER RADIUS
     ========================================== */
  --radius-sm:   3px;   /* バッジ・小要素（2箇所） */
  --radius-md:   8px;   /* カード・画像・ボタン（10箇所・最多） */
  --radius-full: 50%;   /* 円形アイコン */

  /* ==========================================
     SHADOWS
     ========================================== */
  --shadow-card: 0px 0px 24px 0px rgba(0,0,0,0.06);  /* カードシャドウ（3箇所） */

  /* ==========================================
     TRANSITIONS
     ========================================== */
  --transition-base: 0.3s ease;

  /* ==========================================
     COMPONENT DIMENSIONS
     ========================================== */
  --hero-height:       790px;
  --card-height-sm:    157px;   /* ロゴカード高さ（8箇所） */
  --card-height-md:    300px;
  --feature-icon-size:  47px;   /* 特徴アイコン（7箇所） */
  --reason-image-w:    507px;   /* 理由セクション画像幅（3箇所） */
  --reason-image-h:    380px;   /* 理由セクション画像高さ（3箇所） */

  /* ==========================================
     WATERMARK OPACITY
     ========================================== */
  --opacity-watermark:      0.41;
  --opacity-watermark-white: 0.47;
  --opacity-watermark-dark:  0.06;
  --opacity-watermark-mvv:   0.35;
}