@charset "UTF-8";
/* ============================================================
   Yamatogiken — Design Tokens
   Single source of truth. ここ以外で色・余白・書体の生値を書かない。

   読み込み順（全 HTML 共通）:
     reset.css → tokens.css → style.css → 各ページCSS
============================================================ */

:root {
  /* ---------- Brand navy ---------- */
  --navy-900: #03113E;   /* primary */
  --navy-800: #0B2160;
  --navy-700: #16306E;
  --navy-050: #F1F3F8;   /* 面（淡い青みグレー） */

  /* ---------- Blue（用途で厳密に分ける） ----------
     --blue-700 : 白背景の「文字・罫線」用。白との比 7.6:1（AA/AAA）
     --blue-500 : 「面・図形・28px以上の数字」用。白との比 3.9:1 → 小さい文字に使わない
     --blue-100 : チップ・淡い面
  */
  --blue-700: #1E4BB8;
  --blue-600: #2B5BE0;   /* hover（fill） */
  --blue-500: #4D76FF;
  --blue-300: #6BB3FF;   /* ダーク背景の反転アクセント。KV「勝ち筋」専用。白背景では使用禁止 */
  --blue-100: #E8EDFB;

  /* ---------- Ink / line ---------- */
  --ink-900: #1F2430;
  --ink-700: #3A4152;
  --ink-500: #5C6478;
  --ink-300: #8A93A6;    /* テキスト用途禁止。アイコン／罫線のみ */
  --line: #D5DAE5;
  --line-soft: #E9ECF2;
  --white: #FFFFFF;

  /* ---------- Semantic ---------- */
  --bg: var(--white);
  --bg-tint: var(--navy-050);
  --text: var(--ink-900);
  --text-sub: var(--ink-700);
  --text-muted: var(--ink-500);
  --accent-text: var(--blue-700);   /* 白背景の小さい文字はこれ */
  --accent-fill: var(--blue-500);   /* 塗り・大きい数字はこれ */
  --accent-fill-hover: var(--blue-600);
  --accent-on-dark: var(--blue-300);   /* 紺地の上のアクセント文字 */
  --on-dark: var(--white);
  --on-dark-sub: rgba(255, 255, 255, 0.72);
  --line-on-dark: rgba(255, 255, 255, 0.22);

  /* ---------- Type ---------- */
  --font-display: "Shippori Mincho", serif;              /* 見出し（明朝は1書体だけ） */
  --font-body: "Noto Sans JP", sans-serif;               /* 本文・UI */
  --font-en: "Cormorant Garamond", serif;                /* 数字・ENアクセント（italic運用） */

  --fs-label: 12px;
  --fs-caption: 13px;
  --fs-body-s: 14px;
  --fs-body: 15px;
  --fs-body-l: 16px;
  --fs-h4: 18px;
  --fs-h3: clamp(20px, 2.2vw, 24px);
  --fs-h2: clamp(24px, 3.4vw, 32px);
  --fs-h1: clamp(28px, 4.4vw, 44px);
  --fs-hero: clamp(34px, 7.2vw, 104px);

  --lh-tight: 1.35;
  --lh-head: 1.5;
  --lh-body: 1.9;
  --ls-head: 0.06em;
  --ls-label: 0.28em;

  /* ---------- Space (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 40px;  --s-8: 56px;
  --s-9: 72px; --s-10: 96px; --s-11: 120px; --s-12: 160px;

  --section-y: 64px;      /* セクション上下（SP） */
  --section-y-lg: 96px;   /* 大きめのセクション（SP） */

  /* ---------- Layout ---------- */
  --content-max: 1240px;
  --measure: 900px;       /* 読み物の最大行長 */
  --page-pad: 20px;
  --axis-x: 8px;          /* 左端の縦線をコンテンツ左端からどれだけ外に出すか */
  /* コンテンツ左端に追従する縦線の x 座標。ビューポート幅に関係なく揃う */
  --axis-left: max(var(--axis-x), calc(50% - (var(--content-max) / 2) + var(--axis-x)));
  --header-h: 72px;

  /* ---------- Radius ---------- */
  --r-0: 0;
  --r-1: 2px;             /* チップ・入力欄 */
  --r-pill: 999px;        /* バッジのみ */

  /* ---------- Motion ---------- */
  --t-fast: 200ms;
  --t-base: 400ms;
  --t-slow: 800ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-inout: cubic-bezier(0.7, 0, 0.2, 1);

  /* ---------- z-index ---------- */
  --z-back: -1;
  --z-default: 1;
  --z-header: 100;
  --z-menu: 150;
  --z-modal: 200;
}

@media screen and (min-width: 768px) {
  :root {
    --page-pad: 40px;
    --axis-x: 16px;
    --section-y: 96px;
    --section-y-lg: 120px;
    --header-h: 80px;
  }
}

@media screen and (min-width: 1080px) {
  :root {
    --page-pad: 72px;
    --axis-x: 32px;
    --section-y: 120px;
    --section-y-lg: 160px;
    --header-h: 88px;
  }
}

/* ============================================================
   後方互換エイリアス（段階移行用）
   既存CSSの旧トークン名をここで新トークンに束ねるので、
   旧名のままでも色が統一される。移行が終わったらこのブロックを削除。
============================================================ */
:root {
  --white-color: var(--white);
  --black-color: var(--ink-900);
  --gray-color: var(--ink-300);
  --gray-color02: #FAFAFA;
  --gray-color03: var(--navy-050);
  --gray-color04: var(--line-soft);
  --primary-color: var(--navy-900);
  --accent-color: var(--blue-500);
  --form-bg-color: var(--navy-050);
  --sub-text-color: var(--ink-700);
  --line-color: var(--line);

  --yg-white: var(--white);
  --yg-ink: var(--ink-900);
  --yg-sub: var(--ink-700);
  --yg-line: var(--line);
  --yg-blue: var(--blue-700);
  --yg-blue-soft: var(--blue-100);

  --content-width-sm: 800px;
  --content-width: 960px;
  --content-width-lg: 1088px;
  --z-index-back: var(--z-back);
  --z-index-default: var(--z-default);
  --z-index-header: var(--z-header);
  --z-index-menu: var(--z-menu);
  --z-index-modal: var(--z-modal);
}

/* ============================================================
   ユーティリティ（最小限）
============================================================ */

/* JS で hidden を立てる要素が display:flex 等で残るのを防ぐ */
[hidden] { display: none !important; }

/* 見出しの折り返しを整える */
h1, h2, h3, h4,
.m_kv_copy,
.top_kv_headline,
.m_cta_title { text-wrap: balance; }

p, li { text-wrap: pretty; }

/* キーボード操作のフォーカス表示（全体既定） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

/* スキップリンク */
.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  z-index: var(--z-modal);
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--white);
  background: var(--navy-900);
  transform: translateY(-120%);
  transition: transform var(--t-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* モーション低減（全体） */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   統一コンテナ
============================================================ */
.yg-container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}