@charset "UTF-8";

/* ==========================================================================
   CSS変数（カスタムプロパティ）
   ========================================================================== */

:root {
  /* ---- カラー ---- */
  --color-navy: #14294f;          /* 主役の濃紺。見出し・ダークセクション */
  --color-navy-deep: #0b1730;     /* FV動画の下地 */
  --color-text: #1f2a44;
  --color-text-muted: #5c6b85;
  --color-text-light: #6a7b98;
  --color-cyan: #17b5e8;          /* アクセント主役（キャラクロスのロゴ色に合わせる） */
  --color-cyan-light: #4fd1f0;
  --color-purple: #7b5be6;
  --color-magenta: #e85fa8;
  --color-pink: #e07bb0;          /* ゆるV用 */

  --color-bg: #ffffff;
  --color-bg-soft: #f3f8fd;       /* 淡いブルーグレー */
  --color-bg-blue: #e6f0fa;
  --color-border: #e3ecf6;
  --color-border-light: #e7eef7;

  /* ---- グラデーション ---- */
  --gradient-main: linear-gradient(90deg, #17b5e8 0%, #7b5be6 100%);
  --gradient-accent: linear-gradient(90deg, #7b5be6 0%, #e85fa8 100%);
  --gradient-contact: linear-gradient(100deg, #17b5e8 0%, #7b5be6 55%, #e85fa8 100%);

  /* ---- タイポグラフィ ---- */
  --font-base: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --font-heading: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --font-en: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --font-size-base: 15px;
  --line-height-base: 1.9;

  /* ---- スペーシング ---- */
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;

  /* ---- レイアウト ---- */
  --max-width: 1120px;
  --container-padding: 20px;
  --header-height: 64px;

  /* ---- 装飾 ---- */
  --radius-card: 16px;
  --radius-lg: 20px;
  --shadow-card: 0 10px 26px rgba(40, 90, 160, 0.10);
  --shadow-card-strong: 0 18px 40px rgba(40, 90, 160, 0.12);
  --shadow-button: 0 12px 26px rgba(60, 110, 220, 0.30);
}

@media (min-width: 768px) {
  :root {
    --container-padding: 40px;
    --header-height: 88px;
  }
}

@media (min-width: 1200px) {
  :root {
    --container-padding: 160px;
  }
}