/**
 * サイバリバー フォントデザイン 最適化版
 * パフォーマンスとブランド表現のバランスを重視
 * 
 * 戦略：
 * 1. システムフォントをベースに使用（高速）
 * 2. 重要な要素のみWebフォント適用（ブランド性）
 * 3. フォント読み込みの最適化（font-display: optional）
 */

/* ================================================
   Webフォント定義（重要要素のみ使用）
================================================ */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: optional; /* 3秒以内に読み込めなければシステムフォント使用 */
  src: local('Noto Sans JP Regular'), /* ローカルを優先 */
       url('/_lp/_fonts/noto-sans-jp-v53-japanese-regular.woff2') format('woff2');
  unicode-range: U+3041-309F, U+30A0-30FF, U+4E00-9FFF; /* 日本語文字のみ */
}

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: local('Noto Sans JP Bold'),
       url('/_lp/_fonts/noto-sans-jp-v53-japanese-700.woff2') format('woff2');
  unicode-range: U+3041-309F, U+30A0-30FF, U+4E00-9FFF;
}

/* ================================================
   CSS変数定義（パフォーマンス最適化版）
================================================ */
:root {
  /* システムフォント優先のフォントスタック */
  --font-system: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 
                 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo UI', sans-serif;
  --font-brand: 'Noto Sans JP', var(--font-system);
  
  /* フォントサイズ（計算済みの値を使用） */
  --fs-hero: 3.5rem;
  --fs-h1: 2.5rem;
  --fs-h2: 2rem;
  --fs-h3: 1.5rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  
  /* 行間・文字間隔 */
  --lh-tight: 1.3;
  --lh-normal: 1.7;
  --ls-normal: 0.03em;
}

/* モバイル最適化 */
@media (max-width: 768px) {
  :root {
    --fs-hero: 2.25rem;
    --fs-h1: 1.875rem;
    --fs-h2: 1.5rem;
    --fs-h3: 1.25rem;
    --fs-body: 1rem;
  }
}

/* ================================================
   基本設定（システムフォント中心）
================================================ */
body {
  /* システムフォントで高速表示 */
  font-family: var(--font-system) !important;
  font-size: var(--fs-body) !important;
  font-weight: 400 !important;
  line-height: var(--lh-normal) !important;
  letter-spacing: 0 !important; /* システムフォントは文字間隔なし */
  font-feature-settings: normal !important;
  -webkit-font-smoothing: subpixel-antialiased !important;
  -moz-osx-font-smoothing: auto !important;
  /* フォント合成を有効化（太字対応） */
  font-synthesis: weight style;
}

/* ================================================
   ブランド要素のみWebフォント適用
================================================ */

/* ヒーローセクション（最重要） */
.hero h1,
.hero h2,
.hero-title,
.hero-immediate-title,
.hero-immediate-subtitle {
  font-family: var(--font-brand) !important;
  font-weight: 700 !important;
  letter-spacing: var(--ls-normal) !important;
}

/* メインの見出し（h1のみ） */
h1, .h1,
.page-title,
.main-title {
  font-family: var(--font-brand) !important;
  font-size: var(--fs-h1) !important;
  font-weight: 700 !important;
  line-height: var(--lh-tight) !important;
  letter-spacing: var(--ls-normal) !important;
}

/* セクションタイトル（重要度高） */
.section-title {
  font-family: var(--font-brand) !important;
  font-size: var(--fs-h2) !important;
  font-weight: 700 !important;
  background: linear-gradient(90deg, #0d1652, #0098fe) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* CTAボタン（コンバージョン重要） */
.cta-button,
.hero-cta-primary,
.hero-cta-secondary,
.process-button {
  font-family: var(--font-brand) !important;
  font-weight: 700 !important;
  letter-spacing: var(--ls-normal) !important;
}

/* ================================================
   通常要素はシステムフォント（高速）
================================================ */

/* h2以下の見出し */
h2:not(.hero-title):not(.section-title), 
h3, h4, h5, h6,
.h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-system) !important;
  font-weight: 700 !important;
  line-height: var(--lh-tight) !important;
}

h2:not(.hero-title):not(.section-title) {
  font-size: var(--fs-h2) !important;
}

h3 {
  font-size: var(--fs-h3) !important;
}

/* 本文・段落 */
p, 
.content p,
.text,
.description,
article p,
li {
  font-family: var(--font-system) !important;
  font-size: var(--fs-body) !important;
  font-weight: 400 !important;
  line-height: var(--lh-normal) !important;
  letter-spacing: 0 !important;
}

/* ナビゲーション */
nav a,
.nav-link,
.menu-top a {
  font-family: var(--font-system) !important;
  font-weight: 600 !important;
  font-synthesis: weight !important;
}

/* フォーム要素 */
input,
textarea,
select,
button:not(.cta-button) {
  font-family: var(--font-system) !important;
  font-size: var(--fs-body) !important;
}

/* テーブル */
table, th, td {
  font-family: var(--font-system) !important;
}

/* フッター */
footer,
footer p,
footer a {
  font-family: var(--font-system) !important;
  font-size: var(--fs-small) !important;
}

/* ================================================
   価格表示（数字は欧文フォント）
================================================ */
.price,
.product_price,
.hero-stat-number,
[class*="price"] {
  font-family: 'Helvetica Neue', Arial, var(--font-system) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}

/* ================================================
   パフォーマンス最適化
================================================ */

/* アニメーション削減 */
.glow {
  /* glowアニメーションを削除 */
  animation: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.glow:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* グラデーションテキストの最適化 */
.gradient-text,
.section-title {
  /* will-changeは使用時のみ */
  will-change: auto !important;
}

/* フェードインの簡素化 */
.fade-in {
  opacity: 0;
  transition: opacity 0.3s ease !important;
}

.fade-in.visible {
  opacity: 1;
}

/* ================================================
   レスポンシブ対応
================================================ */
@media (max-width: 768px) {
  /* モバイルではすべてシステムフォント */
  * {
    font-family: var(--font-system) !important;
    letter-spacing: 0 !important;
  }
  
  /* ヒーロータイトルのみWebフォント */
  .hero-title,
  .hero-immediate-title {
    font-family: var(--font-brand) !important;
    letter-spacing: var(--ls-normal) !important;
  }
}

/* ================================================
   印刷・アクセシビリティ対応
================================================ */
@media print {
  * {
    font-family: serif !important;
    color: black !important;
    background: none !important;
    text-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-contrast: high) {
  .gradient-text,
  .section-title {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: #0d1652 !important;
  }
}

/* ================================================
   フォント読み込み最適化用クラス
================================================ */

/* フォント読み込み前（FOUT対策） */
.fonts-loading body {
  font-family: var(--font-system) !important;
}

/* フォント読み込み完了後 */
.fonts-loaded .hero-title,
.fonts-loaded .section-title,
.fonts-loaded h1 {
  font-family: var(--font-brand) !important;
}