/* ==========================================================
   NOVEL Design Tokens v1.0 (2026-07-10)
   出典: https://n-v-l.co/ 実測 ／ 配布: https://design.n-v-l.co/tokens.css
   使い方: このファイルをプロジェクトにコピーして読み込む
   （認証付き配信のためホットリンク不可。コピーして同梱すること）
   ========================================================== */

:root {
  /* ---- Brand ---- */
  --nvl-blue: #007ECA;
  --nvl-cyan: #74D8EC;
  --nvl-navy: #004873;
  --nvl-gradient: linear-gradient(135deg, #007ECA, #74D8EC);

  /* ---- Neutral ---- */
  --nvl-ink: #080808;        /* 見出し・本文 */
  --nvl-text: #333333;       /* 補助本文・ナビ */
  --nvl-border: #E3E3E3;     /* 区切り線・カード枠 1px */
  --nvl-bg-light: #F2F2F2;   /* 淡い背景・入力欄 */
  --nvl-bg-dark: #121212;    /* 反転セクション背景 */

  /* ---- Tint ---- */
  --nvl-tint-blue: rgba(0, 126, 202, 0.05);   /* ホバー・注記背景 */
  --nvl-line-on-dark: rgba(255, 255, 255, 0.5); /* グラデ・ダーク面上の線 */

  /* ---- Font ---- */
  --nvl-font-ja: 'Noto Sans JP', sans-serif;  /* 300/400/500/700 */
  --nvl-font-en: 'Outfit', sans-serif;        /* 200/400/500 */

  /* ---- Radius ---- */
  --nvl-radius: 4px;        /* ボタン・カード共通。8px以上は使わない */
  --nvl-radius-pill: 128px; /* タグ・バッジのみ */

  /* ---- Spacing ---- */
  --nvl-section-py: 120px;  /* セクション上下余白の目安 */
}

/* グラデーション文字（英語セクションラベル・ヒーロー見出し用） */
.nvl-grad-text {
  background: var(--nvl-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* プライマリCTA */
.nvl-btn-primary {
  display: inline-block;
  background: var(--nvl-gradient);
  color: #fff;
  border: none;
  border-radius: var(--nvl-radius);
  font: 500 15px var(--nvl-font-ja);
  letter-spacing: 0.05em;
  padding: 14px 40px;
  text-decoration: none;
  cursor: pointer;
}

/* セカンダリボタン */
.nvl-btn-secondary {
  display: inline-block;
  background: #fff;
  color: var(--nvl-blue);
  border: 1px solid var(--nvl-blue);
  border-radius: var(--nvl-radius);
  font: 500 15px var(--nvl-font-ja);
  letter-spacing: 0.05em;
  padding: 13px 40px;
  text-decoration: none;
  cursor: pointer;
}

/* 円形矢印ボタン（グラデ面上のリンク） */
.nvl-btn-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--nvl-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nvl-blue);
  font-size: 20px;
  cursor: pointer;
}

/* 日本語小ラベル（字間0.1emがNOVELらしさの要） */
.nvl-label {
  font: 500 14px var(--nvl-font-ja);
  letter-spacing: 0.1em;
}

/* 区切り線 */
.nvl-hr { border: 0; border-top: 1px solid var(--nvl-border); }
.nvl-hr-on-dark { border: 0; border-top: 1px solid var(--nvl-line-on-dark); }