/* ==========================================
   tokens.css – design tokens (bd1120 v4)
   ------------------------------------------
   レイアウトやタイポグラフィで共通利用する変数を定義
   layout.css / unit.css / site.css から参照
========================================== */

:root {
/* ----------------------------------------
     Header
  ---------------------------------------- */
  --head-logo: 40rem;


  /* ----------------------------------------
     Container
  ---------------------------------------- */
  --container: 112rem;   /* PC固定幅*/
  --container-tb: 82rem;   /* タブ固定幅*/
  --container-sp: 54rem;   /* スマ固定幅*/
}

/* SP (default ≤600) */
:root{
  /* dan2/3 は単段化する想定なので実値未使用でOK（安全に0） */
  --colw2: 0rem;      /* 2段→1段 */
  --colw3: 0rem;      /* 3段→1段 */
  --colw4: 26rem;     /* 4段は 2 列運用 → 26rem×2 + 余り=ガター */
}

/* TAB (601–900) */
@media (min-width:601px) and (max-width:900px){
  :root{
    --colw2: 40rem;   /* 82rem - 40*2 = 2rem → gap=2rem */
    --colw3: 26rem;   /* 82rem - 26*3 = 4rem → gap=2rem */
    --colw4: 26rem;   /* 4段→3段運用なので 26rem×3 基準 */
  }
}

/* PC (901+) */
@media (min-width:901px){
  :root{
    --colw2: 54rem;   /* 112rem - 54*2 = 4rem → gap=4rem */
    --colw3: 35rem;   /* 112rem - 35*3 = 7rem → gap=3.5rem */
    --colw4: 26rem;   /* 112rem - 26*4 = 8rem → gap≈2.666rem */
  }
}



  /* ==========================================
   Gutter tokens (段組依存)
   - 呼び出しは var(--gap2), var(--gap3), var(--gap4)
   - SPでは2段/3段は全段化されるので無効扱い
========================================== */

/* SP (default: ≤600px) */
:root{
  --gap2: 0rem;   /* 2段は全段化するのでガター不要 */
  --gap3: 0rem;   /* 3段も全段化 */
  --gap4: 2rem;   /* 4段のみ有効 */
}

/* TAB (601–900px) */
@media (min-width:601px) and (max-width:900px){
  :root{
    --gap2: 3rem;   /* 2段 */
    --gap3: 2rem;   /* 3段 */
    --gap4: 2rem;   /* 4段 */
  }
}

/* PC (901px〜) */
@media (min-width:901px){
  :root{
    --gap2: 4rem;   /* 2段 */
    --gap3: 3.5rem; /* 3段 */
    --gap4: 3.2rem; /* 4段 */
  }
}


  /* ----------------------------------------
     Stretch side paddings
     （.block.strch, header用の左右余白）
  ---------------------------------------- */
/* SP (default) */
:root{--side-pad: 2.0rem;}/* 20px 基準 */
/* TAB (601–900) */
@media (min-width:601px) and (max-width:900px){:root{--side-pad: 2.5rem;}} /* 25px 基準 */
/* PC (901〜) */
@media (min-width:901px){:root{--side-pad: 3.0rem;}}/* 30px 基準 */


/* ========================================
   Font Family Tokens
   ======================================== */

/* 1) Noto Sans JP Variable (TTF版) */
@font-face {
  font-family: "Noto Sans JP VF";
  src: url("/font/NotoSansJP-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap; /* FOIT回避 */
  unicode-range:
    U+3000-303F, /* CJK記号/句読点 */
    U+3040-309F, /* ひらがな */
    U+30A0-30FF, /* カタカナ */
    U+4E00-9FFF, /* 漢字(基本面) */
    U+FF00-FFEF, /* 全半角 */
    U+2000-206F; /* 一般句読点 */
}

/* 2) Font family tokens */
:root {
  --font-body:
    system-ui, -apple-system, BlinkMacSystemFont, /* iOS/macOS/Chromium */
    "Hiragino Kaku Gothic ProN",                  /* macOS */
    "Yu Gothic UI", "Yu Gothic",                  /* Windows */
    "Meiryo",                                     /* Windows fallback */
    sans-serif;
  --font-serif:
    "Noto Serif JP",           /* あれば第一候補（可読性◎） */
    "Yu Mincho",               /* Windows */
    "Hiragino Mincho ProN",    /* macOS */
    "Hiragino Mincho Pro",
    "BIZ UDPMincho",           /* 角が立ちすぎない公用系 */
    "MS PMincho",              /* 最終フォールバック */
    serif;

  /* 日本語見出し用（Noto Sans JP 可変） */
  --font-head: "Noto Sans JP VF",
               system-ui, -apple-system,
               "Hiragino Kaku Gothic ProN",
               "Meiryo", sans-serif;
}

/* 3) 見出し用ウェイトトークン */
:root {
  --fw-head-thin: 200;  /* h1 用 細字 */
  --fw-head-bold: 700;  /* h2 用 太字 */
}
@media (min-width:901px){
:root {
    --fw-head-thin: 300;  /* h1 用 細字 */
  }
}

h1 {
  font-family: var(--font-head);
  font-weight: var(--fw-head-thin);
  font-synthesis-weight: none;
  letter-spacing: .02em; /* 細字補正 */
}

h2 {
  font-family: var(--font-head);
  font-weight: var(--fw-head-bold);
  font-synthesis-weight: none;
}


/* =========================
   Font Size tokens with per-band sizes + px floor
   帯は SP(~600) / TAB(601–900) / PC(901~)
========================= */
/* 初期＝SP */
:root{
  /* やや小さめ（floor 15px） */
  --fs-MS: 1.6rem;      /* SP */
  --fs-MS-min: 15px;

  /* 小さめ（floor 14px） */
  --fs-S: 1.5rem;       /* SP */
  --fs-S-min: 14px;

  /* 極小（floor 13px） */
  --fs-SS: 1.4rem;      /* SP */
  --fs-SS-min: 13px;

  /* 特例（floor 12px） */
  --fs-XS: 1.3rem;      /* SP */
  --fs-XS-min: 12px;
}

/* TAB 601–900 */
@media (min-width:601px) and (max-width:900px){
  :root{
    --fs-MS: 1.7rem;    /* TAB */
    --fs-S: 1.6rem;
    --fs-SS: 1.5rem;
    --fs-XS: 1.4rem;
  }
}

/* PC 901~ */
@media (min-width:901px){
  :root{
    --fs-MS: 1.8rem;    /* PC */
    --fs-S: 1.7rem;
    --fs-SS: 1.6rem;
    --fs-XS: 1.5rem;
  }
}

:root {
  --tx-MS: max(var(--fs-MS-min), var(--fs-MS));
  --tx-S:  max(var(--fs-S-min),  var(--fs-S));
  --tx-SS: max(var(--fs-SS-min), var(--fs-SS));
  --tx-XS: max(var(--fs-XS-min), var(--fs-XS));
}


/* ==========================================
   Color tokens (bd1120 v4)
   - サイト共通の色トークン（site.cssで上書き可）
   - 文字色は white/black の変更に追随
========================================== */

:root{
  /* ---------- 基本の白 / 黒 ---------- */
  --colr-wt: #ffffff;
  --colr-bk: #000000;

  /* ---------- キーカラー / サブカラー ----------*/
  --colr-key: #004080; 
  --colr-sub1: #3078BF;
  --colr-sub2: #80BFFF;
  --mark-color: color-mix(in srgb, var(--colr-key) 30%, transparent);

  /* ---------- section.bg 用） ---------- */
  --colr-bg-item: #f3f3f3;

  /* ---------- 文字色（4段階） ---------- */
  --colr-text-base: var(--colr-bk);   /* 基本 */
  --colr-text-thin: #333333;              /* 薄め */
  --colr-text-weak: #666666;              /* 弱い */
  --colr-text-invert: var(--colr-wt); /* 反転（暗背景上） */

  /* ---------- 色変化） ----------*/
  --colr-key-darken: color-mix(in srgb, var(--colr-key) 75%, black);
  --colr-key-lighten: color-mix(in srgb, var(--colr-key) 75%, white);
  --colr-key-ghost: color-mix(in srgb, var(--colr-key) 30%, transparent);

  /* 枠線や分割線の初期値（必要に応じて調整） */
  --colr-border: #ddd;
}


/* =========================
Shape tokens
========================= */
:root {
  --clip-serif: polygon(0 0, 60% 0, 100% 100%);
}


/* =========================
   Spacing tokens (PC / TAB / SP 切替)
   値は「PC > TAB > SP」で変化
   PC:   ≥901px
   TAB:  601–900px
   SP:   ≤600px
========================= */

/* 初期＝SP */
:root{
  --sp-XL: 8rem;
  --sp-L: 6rem;
  --sp-ML: 4rem;
  --sp-M: 2rem;
  --sp-MS: 1.5rem;
  --sp-S: 0.75rem;
  --sp-SS: 0.5rem;
  --sp-XS: 0.2rem;
}

/* TAB（601–900） */
@media (min-width:601px) and (max-width:900px){
  :root{
    --sp-XL: 10rem;
    --sp-L: 7.5rem;
    --sp-ML: 5rem;
    --sp-M: 2.5rem;
    --sp-MS: 2rem;
    --sp-S: 1rem;
    --sp-SS: 0.75rem;
    --sp-XS: 0.3rem;
  }
}

/* PC（901〜） */
@media (min-width:901px){
  :root{
    --sp-XL: 12rem;
    --sp-L: 9rem;
    --sp-ML: 6rem;
    --sp-M: 4.5rem;
    --sp-MS: 3rem;
    --sp-S: 1.5rem;
    --sp-SS: 1rem;
    --sp-XS: 0.5rem;
  }
}



/* ==========================================
   Spacing utilities - full expansion
   tokens: --sp-XL, --sp-L, --sp-ML,
           --sp-M, --sp-MS, --sp-S, --sp-SS
========================================== */

/* ===== Margin ===== */
.mt-XL{ margin-block-start: var(--sp-XL) !important; }
.mb-XL{ margin-block-end: var(--sp-XL) !important; }
.ml-XL{ margin-inline-start: var(--sp-XL) !important; }
.mr-XL{ margin-inline-end: var(--sp-XL) !important; }
.mv-XL{ margin-block: var(--sp-XL) !important; }
.mh-XL{ margin-inline: var(--sp-XL) !important; }

.mt-L{ margin-block-start: var(--sp-L) !important; }
.mb-L{ margin-block-end: var(--sp-L) !important; }
.ml-L{ margin-inline-start: var(--sp-L) !important; }
.mr-L{ margin-inline-end: var(--sp-L) !important; }
.mv-L{ margin-block: var(--sp-L) !important; }
.mh-L{ margin-inline: var(--sp-L) !important; }

.mt-ML{ margin-block-start: var(--sp-ML) !important; }
.mb-ML{ margin-block-end: var(--sp-ML) !important; }
.ml-ML{ margin-inline-start: var(--sp-ML) !important; }
.mr-ML{ margin-inline-end: var(--sp-ML) !important; }
.mv-ML{ margin-block: var(--sp-ML) !important; }
.mh-ML{ margin-inline: var(--sp-ML) !important; }

.mt-M{ margin-block-start: var(--sp-M) !important; }
.mb-M{ margin-block-end: var(--sp-M) !important; }
.ml-M{ margin-inline-start: var(--sp-M) !important; }
.mr-M{ margin-inline-end: var(--sp-M) !important; }
.mv-M{ margin-block: var(--sp-M) !important; }
.mh-M{ margin-inline: var(--sp-M) !important; }

.mt-MS{ margin-block-start: var(--sp-MS) !important; }
.mb-MS{ margin-block-end: var(--sp-MS) !important; }
.ml-MS{ margin-inline-start: var(--sp-MS) !important; }
.mr-MS{ margin-inline-end: var(--sp-MS) !important; }
.mv-MS{ margin-block: var(--sp-MS) !important; }
.mh-MS{ margin-inline: var(--sp-MS) !important; }

.mt-S{ margin-block-start: var(--sp-S) !important; }
.mb-S{ margin-block-end: var(--sp-S) !important; }
.ml-S{ margin-inline-start: var(--sp-S) !important; }
.mr-S{ margin-inline-end: var(--sp-S) !important; }
.mv-S{ margin-block: var(--sp-S) !important; }
.mh-S{ margin-inline: var(--sp-S) !important; }

.mt-SS{ margin-block-start: var(--sp-SS) !important; }
.mb-SS{ margin-block-end: var(--sp-SS) !important; }
.ml-SS{ margin-inline-start: var(--sp-SS) !important; }
.mr-SS{ margin-inline-end: var(--sp-SS) !important; }
.mv-SS{ margin-block: var(--sp-SS) !important; }
.mh-SS{ margin-inline: var(--sp-SS) !important; }


/* ===== Padding ===== */
.pt-XL{ padding-block-start: var(--sp-XL) !important; }
.pb-XL{ padding-block-end: var(--sp-XL) !important; }
.pl-XL{ padding-inline-start: var(--sp-XL) !important; }
.pr-XL{ padding-inline-end: var(--sp-XL) !important; }
.pv-XL{ padding-block: var(--sp-XL) !important; }
.ph-XL{ padding-inline: var(--sp-XL) !important; }

.pt-L{ padding-block-start: var(--sp-L) !important; }
.pb-L{ padding-block-end: var(--sp-L) !important; }
.pl-L{ padding-inline-start: var(--sp-L) !important; }
.pr-L{ padding-inline-end: var(--sp-L) !important; }
.pv-L{ padding-block: var(--sp-L) !important; }
.ph-L{ padding-inline: var(--sp-L) !important; }

.pt-ML{ padding-block-start: var(--sp-ML) !important; }
.pb-ML{ padding-block-end: var(--sp-ML) !important; }
.pl-ML{ padding-inline-start: var(--sp-ML) !important; }
.pr-ML{ padding-inline-end: var(--sp-ML) !important; }
.pv-ML{ padding-block: var(--sp-ML) !important; }
.ph-ML{ padding-inline: var(--sp-ML) !important; }

.pt-M{ padding-block-start: var(--sp-M) !important; }
.pb-M{ padding-block-end: var(--sp-M) !important; }
.pl-M{ padding-inline-start: var(--sp-M) !important; }
.pr-M{ padding-inline-end: var(--sp-M) !important; }
.pv-M{ padding-block: var(--sp-M) !important; }
.ph-M{ padding-inline: var(--sp-M) !important; }

.pt-MS{ padding-block-start: var(--sp-MS) !important; }
.pb-MS{ padding-block-end: var(--sp-MS) !important; }
.pl-MS{ padding-inline-start: var(--sp-MS) !important; }
.pr-MS{ padding-inline-end: var(--sp-MS) !important; }
.pv-MS{ padding-block: var(--sp-MS) !important; }
.ph-MS{ padding-inline: var(--sp-MS) !important; }

.pt-S{ padding-block-start: var(--sp-S) !important; }
.pb-S{ padding-block-end: var(--sp-S) !important; }
.pl-S{ padding-inline-start: var(--sp-S) !important; }
.pr-S{ padding-inline-end: var(--sp-S) !important; }
.pv-S{ padding-block: var(--sp-S) !important; }
.ph-S{ padding-inline: var(--sp-S) !important; }

.pt-SS{ padding-block-start: var(--sp-SS) !important; }
.pb-SS{ padding-block-end: var(--sp-SS) !important; }
.pl-SS{ padding-inline-start: var(--sp-SS) !important; }
.pr-SS{ padding-inline-end: var(--sp-SS) !important; }
.pv-SS{ padding-block: var(--sp-SS) !important; }
.ph-SS{ padding-inline: var(--sp-SS) !important; }