@charset "utf-8";
/* =========================================================================
   MERIT の見出しブロック — 参照サイトの "point ①" の組み方を踏襲
   丸いバッジ（point + 番号）を左に置き、見出しを右へ横並び。下に手描きの区切り線。
   ※丸バッジは参照にある固有のモチーフなので、DNA RULE 9（角丸0）の例外として扱う。
   ========================================================================= */

.kb-merit_head {
  display: flex;
  align-items: flex-start;
  gap: clamp(9px, 2.8vw, 18px);
}

/* ---------- 丸い point バッジ ---------- */
.kb-merit_badge {
  flex: none;
  width: clamp(34px, min(11.5vw, 7.4dvh), 64px);
  aspect-ratio: 1;                       /* 正円を保つ */
  border-radius: 50%;
  background: var(--brand);
  border: 1px solid var(--line);
  display: grid;
  place-content: center;
  justify-items: center;
  line-height: 1;
  color: var(--ink);
  /* 🔴 2026-09-18 バランス調整。
     place-content:center は「point＋数字」の箱を中央に置くが、円の中で主役に見えるのは
     数字のほう。旧設定では数字のインク中心が円中心より +6.5px（直径の14%）下にあり、
     数字だけが下へ落ちて見えていた。padding-bottom で箱を持ち上げ、
     数字のインク中心を円中心へ寄せる（実測 +1.5px まで縮小）。
     数値は scratchpad/badge_ab.py（案A〜Eの実レンダリング比較）で決定。 */
  padding-bottom: .34em;
}
.kb-merit_badge span {
  font-size: clamp(7px, 1.9vw, 10px);
  font-weight: 700;
  letter-spacing: .04em;
}
.kb-merit_badge b {
  /* 数字は円の中で主役。インク高さが直径の 32.6% → 37% になるまで上げる */
  font-size: clamp(21px, 5.9vw, 33px);
  font-weight: 700;
  margin-top: -.04em;                    /* ラベルとのすき間を詰めて1つの塊に見せる */
}

/* ---------- 見出し ---------- */
/* バッジと並ぶぶん、単独時よりわずかに小さくする */
.kb-merit_head .kb-h {
  font-size: max(16px, min(calc(23 * var(--u)), 3.1dvh));
  line-height: 1.5;
  padding-top: clamp(1px, .4dvh, 5px);
}

/* 🔴 2026-09-19 ユーザー指摘「MERIT1〜3すべて右端に線が入ってる」。
   正体は元々あったこの装飾の縦罫(::before/::after、不透明度28%の1px線)。
   実機スクリーンショットのRGB値[183,108,1]と、オレンジ地(254,150,1)への
   28%黒合成の計算値が完全一致し原因確定。意図した装飾だが「線に見えて破綻
   している」との指摘のため、左右とも削除する（片方だけ残すと非対称で
   かえって不自然なため）。 */
.kb-merit {
  position: relative;
}