@charset "utf-8";
/* =========================
   Typography Tokens (Fixed px)
   Base: main=18px, sub=16px
   Viewport: 768px → 1440px (fluid via vw)
   ========================= */
:root{
  /* weights & line-heights — 共通 */
  --fw-heading:700;
  --fw-body:400;
  --fw-caption:700; /* small文字はやや太め */

  --lh-h1:1.24;
  --lh-h2:1.42;
  --lh-h3:1.42;
  --lh-h4:1.48;
  --lh-h5:1.48;
  --lh-h6:1.48;
  --lh-body:1.66;
  --lh-caption:1.66;
  --lh-term:1.48;

  /* ===== main（見出し・本文・caption・term） ===== */
  --fs-main-h1-min: 32px;
  --fs-main-h1-max: 48px;
  --fs-main-h2-min: 28px;
  --fs-main-h2-max: 36px;
  --fs-main-h3-min: 22px;
  --fs-main-h3-max: 28px;
  --fs-main-h4-min: 20px;
  --fs-main-h4-max: 24px;
  --fs-main-h5-min: 18px;
  --fs-main-h5-max: 20px;
  --fs-main-h6-min: 16px;
  --fs-main-h6-max: 18px;

  --fs-main-body-min: 18px;
  --fs-main-body-max: 20px;
  --fs-main-cap-min: 14px;
  --fs-main-cap-max: 16px;

  /* term（dt用）= h6相当 */
  --fs-main-term-min: 16px;
  --fs-main-term-max: 18px;

  /* fluid functions (px固定clamp + vw) */
  --fs-main-h1: clamp(var(--fs-main-h1-min), 4vw, var(--fs-main-h1-max));
  --fs-main-h2: clamp(var(--fs-main-h2-min), 3vw, var(--fs-main-h2-max));
  --fs-main-h3: clamp(var(--fs-main-h3-min), 2.5vw, var(--fs-main-h3-max));
  --fs-main-h4: clamp(var(--fs-main-h4-min), 2vw, var(--fs-main-h4-max));
  --fs-main-h5: clamp(var(--fs-main-h5-min), 1.5vw, var(--fs-main-h5-max));
  --fs-main-h6: clamp(var(--fs-main-h6-min), 1vw, var(--fs-main-h6-max));
  --fs-main-body: clamp(var(--fs-main-body-min), 1vw, var(--fs-main-body-max));
  --fs-main-caption: clamp(var(--fs-main-cap-min), 0.8vw, var(--fs-main-cap-max));
  --fs-main-term: clamp(var(--fs-main-term-min), 1vw, var(--fs-main-term-max));

  /* ===== sub（本文・caption・termのみ） ===== */
  --fs-sub-body: clamp(16px, 1vw, 18px);
  --fs-sub-caption: clamp(14px, 0.8vw, 16px);
  --fs-sub-term: clamp(16px, 1vw, 18px);

  /* ===== エイリアス（既定＝main） ===== */
  --fs-h1:var(--fs-main-h1);
  --fs-h2:var(--fs-main-h2);
  --fs-h3:var(--fs-main-h3);
  --fs-h4:var(--fs-main-h4);
  --fs-h5:var(--fs-main-h5);
  --fs-h6:var(--fs-main-h6);
  --fs-body:var(--fs-main-body);
  --fs-caption:var(--fs-main-caption);
  --fs-term:var(--fs-main-term);

  /* ===== 小サイズ用トークン（共通） ===== */
  --fs-body-small: 13px; /* 12〜13px相当の中庸値 */
  --lh-body-small: 1.78; /* 小サイズはやや広め */
}

/* 必要箇所だけ 600 に“スコープ上書き” */
.caption-strong,
[data-caption-strong="true"] { --fw-caption: 600; }

/* ===== 要素割当（共通1回） ===== */
h1{ font-size:var(--fs-h1); line-height:var(--lh-h1); font-weight:var(--fw-heading) }
h2{ font-size:var(--fs-h2); line-height:var(--lh-h2); font-weight:var(--fw-heading) }
h3{ font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:var(--fw-heading) }
h4{ font-size:var(--fs-h4); line-height:var(--lh-h4); font-weight:var(--fw-heading) }
h5{ font-size:var(--fs-h5); line-height:var(--lh-h5); font-weight:var(--fw-heading) }
h6{ font-size:var(--fs-h6); line-height:var(--lh-h6); font-weight:var(--fw-heading) }

p,pre,dd,li{ font-size:var(--fs-body); line-height:var(--lh-body); font-weight:var(--fw-body) }
dt{ font-size:var(--fs-term); line-height:var(--lh-term); font-weight:var(--fw-heading) }
.caption,small{ font-size:var(--fs-caption); line-height:var(--lh-caption); font-weight:var(--fw-caption) }

/* 共通テキストブロック：clampでジャンプを抑制（13px〜18/20px） */
.text-block p,
.text-block li,
.text-block dd,
.text-block small,
.text-block .caption{
  font-size: clamp(var(--fs-body-small), 0.9vw + 11px, var(--fs-body));
  line-height: var(--lh-body-small);
  color: var(--color-text-primary, var(--k));
  font-weight: var(--fw-body);
}
.text-block small,
.text-block .caption{ font-weight: var(--fw-caption); }

@media (max-width:960px){
  .text-block p,
  .text-block li,
  .text-block dd,
  .text-block small,
  .text-block .caption{
    font-size: var(--fs-body-small);
    line-height: var(--lh-body-small);
  }
}


/* ==============================
   Kairos Color Tokens
   (root-scope + variable-based)
   ============================== */
:root {
  /* ====== neutrals ====== */
  --pw:#ffffff;   /* snow_white */
  --w:#f4f4f4;    /* kairos_white */
  --k:#262626;    /* kairos_black */
  --g:#585a5c;    /* kairos_gray */
  --g80:rgba(88,90,92,.8);
  --g30:rgba(88,90,92,.3);
  --g10:rgba(88,90,92,.1);
  --gl1:#E6E7E7;
  --gl2:#AEB0B2;
  --gd1:#6A6D70;
  --gd2:#444546;

  /* ====== header / line ====== */
  --b:#002c76;
  --header_shadow:#DCDFE1;
  --c_liner_gray:#EBECEC;

  /* ====== marketing_blue scale ====== */
  --mb:#32A2EA;
  --mb50:#f1f8fe;
  --mb100:#e2f0fc;
  --mb200:#bee0f9;
  --mb300:#85c7f4;
  --mb500:#1c90db;
  --mb600:#0e71bb;
  --mb700:#0d5a97;
  --mb800:#0f4e7d;
  --mb900:#124168;
  --mb950:#0c2945;
  --mbd1:#0E71BB;
  --mbd2:#0F4E7D;
  --mbl1:#E2F0FC;
  --mbl2:#85C7F4;

  /* ====== sales_green scale ====== */
  --sg:#77C24F;
  --sg50:#f1faeb;
  --sg100:#e1f3d4;
  --sg200:#c4e8ae;
  --sg300:#9fd77f;
  --sg500:#5eaa38;
  --sg600:#468729;
  --sg700:#386724;
  --sg800:#2f5321;
  --sg900:#2a4720;
  --sg950:#13260d;
  --sgd1:#468729;
  --sgd2:#2F5321;
  --sgl1:#E1F3D4;
  --sgl2:#9FD77F;

  /* ====== timing_orange scale ====== */
  --to:#EA7A32;
  --to50:#fef7ee;
  --to100:#fcecd8;
  --to200:#f8d6b0;
  --to300:#f3b87e;
  --to400:#ed904a;
  --to600:#da5a1c;
  --to700:#b54319;
  --to800:#90371c;
  --to900:#742f1a;
  --to950:#3f150b;
  --tod1:#DA5A1C;
  --tod2:#90371c;
  --tol1:#FCECD8;
  --tol2:#F3B87E;

  /* ====== overlay ====== */
  --sk: rgba(88,90,92,.1);
  --sw: rgba(245,245,245,.3);

  /* ====== brand & state ====== */
  --primary_blue:#32A2EA;
  --primary_l_blue:#85c7f4;
  --primary_d_blue:#0F4E7D;

  --secondary_red:#e91e63;
  --secondary_l_red:#ff6090;
  --secondary_d_red:#b0003a;

  --secondary_purple:#8e24aa;
  --secondary_l_purple:#716175;
  --secondary_d_purple:#5c007a;

  --success:#002c76;
  --error:#FF5E22;
  --warning:#8e24aa;
  --danger:#b0003a;
  --orange:#ff761a;
  --yellow:#ffad18;
  --mkfr:#fff000;
}

/* ==============================
   THEME OVERRIDE (dark mode)
   ============================== */
:root[data-theme="dark"] {
  --pw:#000000;
  --w:#1a1a1a;
  --k:#f4f4f4;
  --g:#c5c5c5;
  --g80:rgba(200,200,200,.8);
  --g30:rgba(200,200,200,.3);
  --g10:rgba(200,200,200,.1);
  --gl1:#444546;
  --gl2:#6A6D70;
  --gd1:#AEB0B2;
  --gd2:#E6E7E7;

  /* トーンを少し下げる（中彩度に） */
  --mb:#85C7F4;
  --sg:#9FD77F;
  --to:#F3B87E;
}

/* ==============================
   CLASS API (変数参照方式)
   ============================== */
.kairos { color: var(--b); }

.color,
.d_kairos,
.c_black { color: var(--k); }

.c_d_gray { color: var(--g); }
.c_white  { color: var(--w); }

.primary_blue     { color: var(--primary_blue); }
.primary_l_blue   { color: var(--primary_l_blue); }
.primary_d_blue   { color: var(--primary_d_blue); }

.secondary_red        { color: var(--secondary_red); }
.secondary_l_red      { color: var(--secondary_l_red); }
.secondary_d_red      { color: var(--secondary_d_red); }

.secondary_purple     { color: var(--secondary_purple); }
.secondary_l_purple   { color: var(--secondary_l_purple); }
.secondary_d_purple   { color: var(--secondary_d_purple); }

.orange { color: var(--orange); }
.yellow { color: var(--yellow); }

.header_shadow { color: var(--header_shadow); }
.c_liner_gray  { color: var(--c_liner_gray); }

.k3_ma { color: var(--mb); }
.k3_sg { color: var(--sg); }
.k3_to { color: var(--to); }

/* SNS */
.twitter, .social-logo-tw { --tw: rgba(29,161,242,1); color: var(--tw); }
.facebook, .social-logo-fb{ --fb: rgba(24,119,242,1); color: var(--fb); }

/* GRADIENT */
.k3-gld{
background: linear-gradient(180deg,var(--mb) 0%, var(--sg) 100%);
}
.k3-mb-gld{
background: linear-gradient(90deg,var(--mb) 0%, var(--mb800) 100%);
}
.k3-sg-gld{
background: linear-gradient(90deg,var(--sg) 0%, var(--sg600) 100%);
}

/* ==============================
   SEMANTIC USAGE (推奨)
   ============================== */

:root {
  --color-text-primary:   var(--k);
  --color-text-secondary: var(--g);
  --color-text-link:      var(--primary_blue);
  --color-bg-surface:     var(--pw);
  --color-bg-muted:       var(--gl1);
  --color-border-default: var(--gl2);
}

body {
  background-color: var(--color-bg-surface);
  color: var(--color-text-primary);
}

a {
  color: var(--color-text-link);
}
a:hover {
  color: var(--primary_d_blue);
}

hr {
  border-color: var(--color-border-default);
}

.caption, small {
  color: var(--color-text-primary);
}