@charset "UTF-8";
/* ===========================================================
   typography.css — 見出し・本文・装飾バリエーション
   装飾はデフォルトで当たる。外したいときだけクラスを足す
   =========================================================== */
@layer typography {
  body {
    font-family: var(--ff-base);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--tr-body);
    color: var(--c-text);
    background: var(--c-bg);
  }

  /* --- 見出しの基本 --- */
  h1, h2, h3, h4, h5, h6 {
    line-height: var(--lh-heading);
    letter-spacing: var(--tr-heading);
    font-weight: var(--fw-black);
  }

  h1 { font-size: var(--fs-h1); margin: 0 0 var(--sp-5); }
  h2 { font-size: var(--fs-h2); margin: var(--sp-7) 0 var(--sp-5); }
  h3 { font-size: var(--fs-h3); margin: var(--sp-6) 0 var(--sp-4); font-weight: var(--fw-bold); }
  h4 { font-size: var(--fs-h4); margin: var(--sp-5) 0 var(--sp-3); font-weight: var(--fw-bold); }

  :where(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }

  /* gap で制御している箇所は margin を解除（二重加算の防止） */
  .l-section__head > :where(h1, h2, h3, h4),
  .c-card__body > :where(h2, h3, h4),
  .c-gnav a > :where(h2, h3, h4) { margin: 0; }

  /* --- h2 のデフォルト装飾：左縦線（bar）。素の h2 にも当たる --- */
  h2 {
    position: relative;
    padding-left: .55em;
  }
  h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: .12em;
    bottom: .12em;
    width: 6px;
    background: var(--c-action-mark);
  }

  /* セクション見出しでは、英字ラベルまで含めてブロック側が罫を持つ */
  .l-section__head h2,
  .c-card__title,
  .c-cta__title,
  .l-footer__col-title {
    padding-left: 0;
  }
  .l-section__head h2::before,
  .c-card__title::before,
  .c-cta__title::before {
    display: none;
  }

  /* 装飾バリエーション */
  .t-heading--underline {
    padding-left: 0;
    padding-bottom: .6em;
  }
  .t-heading--underline::before {
    top: auto;
    bottom: 0;
    width: 2.4em;
    height: 3px;
  }
  .t-heading--plain { padding-left: 0; }
  .t-heading--plain::before { display: none; }
  .t-heading--invert::before { background: var(--c-text-invert); }

  /* --- Eyebrow（見出しの下に置く英字ラベル） --- */
  .t-eyebrow {
    font-family: var(--ff-num);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--tr-eyebrow);
    line-height: 1.5;
    color: var(--c-action-primary);
  }
  .t-eyebrow--invert { color: var(--c-text-invert); }

  /* --- 本文・リード --- */
  .t-lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-loose);
  }
  .t-muted { color: var(--c-text-muted); }
  .t-small { font-size: var(--fs-small); }
  .t-caption { font-size: var(--fs-caption); }

  /* --- 数字（等幅で桁が揺れないように） --- */
  .t-num {
    font-family: var(--ff-num);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
  }
}