/**
 * サイバリバー フォントデザイン 上書き用CSS
 * 既存サイトの最後に読み込んで適用
 * 
 * 使用方法:
 * <link rel="stylesheet" href="cyberiver-font-override.css">
 */

/* ================================================
   ローカルフォント定義（WOFF、TTF、EOT使用）
================================================ */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/noto-sans-jp-v53-japanese-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/noto-sans-jp-v53-japanese-700.woff2') format('woff2');
}

/* ================================================
   CSS変数定義
================================================ */
:root {
  /* フォントファミリー */
  --font-primary: 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', sans-serif;
  --font-accent: 'Roboto', 'Arial', sans-serif;
  
  /* フォントサイズ（レスポンシブ対応） */
  --fs-hero: clamp(2rem, 5vw, 3.5rem);
  --fs-h1: clamp(1.8rem, 4vw, 2.5rem);
  --fs-h2: clamp(1.4rem, 3vw, 2rem);
  --fs-h3: clamp(1.2rem, 2.5vw, 1.5rem);
  --fs-body: clamp(0.95rem, 1.5vw, 1.1rem);
  --fs-small: clamp(0.85rem, 1.2vw, 0.95rem);
  
  /* 行間 */
  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;
  
  /* 文字間隔 */
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.05em;
  --ls-wider: 0.1em;
}

/* モバイル対応 */
@media (max-width: 768px) {
  :root {
    --fs-hero: clamp(1.5rem, 6vw, 2.5rem);
    --fs-h1: clamp(1.3rem, 5vw, 2rem);
    --fs-h2: clamp(1.1rem, 4vw, 1.5rem);
    --fs-body: clamp(0.9rem, 2vw, 1rem);
  }
}

/* ================================================
   基本設定（上書き）
================================================ */
body {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-body) !important;
  font-weight: 400 !important;
  line-height: var(--lh-normal) !important;
  letter-spacing: var(--ls-normal) !important;
  font-feature-settings: "palt" 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ================================================
   見出し（上書き）
================================================ */
h1, .h1 {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-h1) !important;
  font-weight: 700 !important; /* Blackフォント使用 */
  line-height: var(--lh-tight) !important;
  letter-spacing: var(--ls-tight) !important;
}

h2, .h2 {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-h2) !important;
  font-weight: 700 !important; /* Boldフォント使用 */
  line-height: var(--lh-tight) !important;
  letter-spacing: var(--ls-tight) !important;
}

h3, .h3 {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-h3) !important;
  font-weight: 700 !important; /* Boldフォント使用 */
  line-height: var(--lh-tight) !important;
  letter-spacing: var(--ls-normal) !important;
}

h4, .h4 {
  font-family: var(--font-primary) !important;
  font-size: clamp(1rem, 2vw, 1.25rem) !important;
  font-weight: 700 !important; /* Boldフォント使用 */
  line-height: var(--lh-tight) !important;
  letter-spacing: var(--ls-normal) !important;
}

h5, .h5, h6, .h6 {
  font-family: var(--font-primary) !important;
  font-size: clamp(0.9rem, 1.8vw, 1.1rem) !important;
  font-weight: 400 !important; /* Regularフォント使用 */
  line-height: var(--lh-tight) !important;
  letter-spacing: var(--ls-normal) !important;
}

/* ================================================
   ナビゲーション（上書き）
================================================ */
nav ul li a,
.nav-link,
.navigation a,
.navbar a,
header nav a {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important; /* Boldフォント使用 */
  letter-spacing: var(--ls-normal) !important;
  transition: letter-spacing 0.3s ease !important;
}

nav ul li a:hover,
.nav-link:hover,
.navigation a:hover,
.navbar a:hover,
header nav a:hover {
  letter-spacing: var(--ls-wide) !important;
}

/* ================================================
   ボタン（上書き）
================================================ */
.btn,
button,
.button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
  letter-spacing: var(--ls-normal) !important;
  transition: all 0.3s ease !important;
}

.btn:hover,
button:hover,
.button:hover {
  letter-spacing: var(--ls-wide) !important;
}

/* ================================================
   本文・段落（上書き）
================================================ */
p,
.content p,
.text,
.description,
article p {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-body) !important;
  font-weight: 400 !important;
  line-height: var(--lh-normal) !important;
  letter-spacing: var(--ls-normal) !important;
}

/* ================================================
   リスト（上書き）
================================================ */
ul li,
ol li,
.list-item {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-body) !important;
  font-weight: 400 !important;
  line-height: var(--lh-normal) !important;
  letter-spacing: var(--ls-normal) !important;
}

/* ================================================
   価格・数値表示（上書き）
================================================ */
.price,
.amount,
.cost,
.number,
.figure,
.value,
[class*="price"],
[class*="amount"],
[class*="cost"] {
  font-family: var(--font-accent) !important;
  font-weight: 700 !important;
  letter-spacing: var(--ls-normal) !important;
}

/* ================================================
   フッター（上書き）
================================================ */
footer,
.footer,
footer p,
footer a,
.footer-text {
  font-family: var(--font-primary) !important;
  font-weight: 400 !important; /* Regularフォント使用（300が無いため） */
  font-size: var(--fs-small) !important;
  opacity: 0.85 !important; /* 軽やかさを演出 */
}

/* ================================================
   特殊要素（上書き）
================================================ */
/* 注釈・補足 */
.small,
.note,
.caption,
.footnote,
small {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-small) !important;
  font-weight: 400 !important;
  line-height: var(--lh-normal) !important;
}

/* リンク */
a {
  font-family: var(--font-primary) !important;
  font-weight: 400 !important; /* Regularフォント使用 */
  transition: all 0.3s ease !important;
}

a:hover {
  letter-spacing: var(--ls-wide) !important;
}

/* ================================================
   ユーティリティクラス
================================================ */
/* フォントファミリー */
.font-primary { font-family: var(--font-primary) !important; }
.font-accent { font-family: var(--font-accent) !important; }

/* フォントウェイト（実際に利用可能なもののみ） */
.fw-light { font-weight: 400 !important; opacity: 0.85 !important; } /* 300の代替 */
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 700 !important; } /* 500の代替でBold使用 */
.fw-semibold { font-weight: 700 !important; } /* 600の代替でBold使用 */
.fw-bold { font-weight: 700 !important; }
.fw-extrabold { font-weight: 700 !important; } /* 800の代替でBlack使用 */
.fw-black { font-weight: 700 !important; }

/* フォントサイズ */
.fs-hero { font-size: var(--fs-hero) !important; }
.fs-h1 { font-size: var(--fs-h1) !important; }
.fs-h2 { font-size: var(--fs-h2) !important; }
.fs-h3 { font-size: var(--fs-h3) !important; }
.fs-body { font-size: var(--fs-body) !important; }
.fs-small { font-size: var(--fs-small) !important; }

/* 行間 */
.lh-tight { line-height: var(--lh-tight) !important; }
.lh-normal { line-height: var(--lh-normal) !important; }
.lh-relaxed { line-height: var(--lh-relaxed) !important; }

/* 文字間隔 */
.ls-tight { letter-spacing: var(--ls-tight) !important; }
.ls-normal { letter-spacing: var(--ls-normal) !important; }
.ls-wide { letter-spacing: var(--ls-wide) !important; }
.ls-wider { letter-spacing: var(--ls-wider) !important; }

/* ================================================
   特殊効果
================================================ */
/* グラデーションテキスト */
.gradient-text {
  background: linear-gradient(45deg, #3498db, #74b9ff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important; /* フォールバック */
}

/* テキストグロー効果 */
.glow-text {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3), 0 0 10px rgba(255,255,255,0.2) !important;
  animation: text-glow 2s ease-in-out infinite alternate !important;
}

@keyframes text-glow {
  0% {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3), 0 0 10px rgba(255,255,255,0.2);
  }
  100% {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3), 0 0 20px rgba(255,255,255,0.4);
  }
}

/* ホバーアニメーション */
.animated-link {
  transition: all 0.3s ease !important;
}

.animated-link:hover {
  letter-spacing: var(--ls-wider) !important;
  text-shadow: 0 0 8px rgba(52, 152, 219, 0.5) !important;
}

/* ================================================
   ヒーロー要素（上書き）
================================================ */
.hero h1,
.hero h2,
.hero-title,
.hero-heading,
.main-title,
.page-title {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-hero) !important;
  font-weight: 700 !important;
  line-height: var(--lh-tight) !important;
  letter-spacing: var(--ls-tight) !important;
  /*text-shadow: 3px 3px 6px rgba(0,0,0,0.5) !important;*/
}

/* ================================================
   セクション見出し（上書き）
================================================ */
.section h2,
.section-title,
.section-heading {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-h2) !important;
  font-weight: 700 !important;
  letter-spacing: var(--ls-normal) !important;
  background: linear-gradient(45deg, #0d1652, #0098fe) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ================================================
   フォーム要素（上書き）
================================================ */
input,
textarea,
select,
.form-control,
.input {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-body) !important;
  font-weight: 400 !important;
  line-height: var(--lh-normal) !important;
}

label,
.label {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
}

/* ================================================
   テーブル（上書き）
================================================ */
table,
.table {
  font-family: var(--font-primary) !important;
}

th,
.table-header {
  font-weight: 700 !important; /* Boldフォント使用 */
  letter-spacing: var(--ls-normal) !important;
}

td,
.table-cell {
  font-weight: 400 !important; /* Regularフォント使用 */
  line-height: var(--lh-normal) !important;
}

/* ================================================
   フォント最適化
================================================ */

/* フォントローディング最適化 */
body {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-body) !important;
  font-weight: 400 !important;
  line-height: var(--lh-normal) !important;
  letter-spacing: var(--ls-normal) !important;
  font-feature-settings: "palt" 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  /* フォント読み込み完了まで不可視テキストを防ぐ */
  font-display: swap !important;
}

/* Critical font preloading hint (HTMLで使用) 
   <link rel="preload" href="fonts/noto-sans-jp-v53-japanese-regular.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="fonts/noto-sans-jp-v53-japanese-700.woff2" as="font" type="font/woff2" crossorigin>
*/

/* ================================================
   アクセシビリティ対応
================================================ */
/* 高コントラストモード対応 */
@media (prefers-contrast: high) {
  .gradient-text {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: inherit !important;
  }
  
  .glow-text {
    animation: none !important;
    text-shadow: none !important;
  }
}

/* アニメーション無効設定に対応 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ================================================
   印刷用スタイル
================================================ */
@media print {
  body {
    font-family: var(--font-primary) !important;
    font-size: 12pt !important;
    line-height: 1.4 !important;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-weight: bold !important;
    color: black !important;
  }
  
  .gradient-text,
  .glow-text {
    background: none !important;
    -webkit-text-fill-color: black !important;
    color: black !important;
    text-shadow: none !important;
    animation: none !important;
  }
}