@charset "utf-8";
/*
 * 番号の丸（class="no hd"）を kbdg-lp の number-21「ラベルに下線を引いた丸枠」に統一
 * 2026-09-11 株式会社きびだんご ／ 全ページ（functions.php の miyatec_number_badge_styles で読み込む）
 *
 * - HTMLは変えない。ラベルは ::before で出す（選ばれる理由＝理由／流れ＝STEP／箱＝POINT）
 * - 色は各ページのメインカラー var(--navy)（トップは #153f50、下層は #00205c）。流れの最後だけ var(--green)
 * - ライブラリの見本はラベル12pxだが、社内のデザイン禁止事項（注釈・ラベルは14px以上）に合わせて14px
 * - 丸の中は白で塗る（下層の流れの縦線が丸の中に透けないように）
 * - 既存の番号スタイル（renewal / trust / home-warm）より強い指定にするため :root から書いている
 */

/* ============ 丸枠の本体 ============ */
:root .rnw :is(.r-num,.step,.card) > span.no.hd{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;flex:none;
  position:relative;z-index:1;
  width:72px;height:72px;min-width:0;padding:0;margin:0;
  border:1.6px solid currentColor;border-radius:50%;
  background:#fff;color:var(--navy);
  font-family:var(--font-head);font-size:24px;font-weight:800;line-height:1;letter-spacing:.02em;
  text-shadow:none;transform:none;
}
/* ラベル＋下線 */
:root .rnw :is(.r-num,.step,.card) > span.no.hd::before{
  display:block;margin-bottom:4px;padding:0 0 3px .12em;
  border-bottom:1.4px solid currentColor;
  font-size:14px;font-weight:700;letter-spacing:.12em;line-height:1;
}
:root .rnw .r-num > span.no.hd::before{content:"理由";}
:root .rnw .step > span.no.hd::before{content:"STEP";}
:root .rnw .card > span.no.hd::before{content:"POINT";}

/* 選ばれる理由は見本どおりの92px */
:root .rnw .r-num > span.no.hd{width:92px;height:92px;font-size:30px;}

/* 流れの最後（完了）だけ緑 */
:root .rnw .step:last-child > span.no.hd{color:var(--green);}

/* ============ 丸が大きくなった分の置き場所 ============ */
:root .rnw .cards .card{grid-template-columns:72px minmax(0,1fr);}
:root .rnw .flow .step{grid-template-columns:72px minmax(0,1fr);}
:root .rnw .flow::before{left:35px;} /* 下層の流れの縦線を丸の中心へ（トップは線なし） */

/* ============ スマホ ============ */
@media(max-width:620px){
  :root .rnw :is(.step,.card) > span.no.hd{width:68px;height:68px;font-size:21px;}
  :root .rnw .r-num > span.no.hd{width:76px;height:76px;font-size:25px;}
  :root .rnw .cards .card{grid-template-columns:68px minmax(0,1fr);}
  :root .rnw .flow .step{grid-template-columns:68px minmax(0,1fr);}
  :root .rnw .flow::before{left:33px;}
}