/* ============================================================
   トップ セクション03: 実績数値カード  (Figma 303:23 / 1440x432)
   薄水色背景に白カード4枚。カードは 257x256、間隔24px、コンテンツ幅1100px。
   ============================================================ */

.nv-stats {
  background: var(--nv-base);       /* #EBF6FF */
  padding: 88px 0;
}

.nv-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nv-stats__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 256px;
  padding: 56px 16px 40px;
  background: var(--nv-white);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(42, 103, 212, 0.08);
}

/* ---- 左上ラベルピル ---- */
.nv-stats__pill {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 20px;
  background: var(--nv-main);
  color: var(--nv-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  border-radius: 16px 0 12px 0;   /* 左上はカード角に合わせる / 右下を丸める */
}

/* ---- アイコン (Figma書き出しSVG / fill #828282) ---- */
.nv-stats__icon {
  width: 56px;
  height: 56px;
}
.nv-stats__icon img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- 数値 ---- */
.nv-stats__num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin: 14px 0 0;
  color: var(--nv-main);
  font-weight: 700;
  line-height: 1;
}
.nv-stats__num-value {
  font-size: 48px;
  letter-spacing: 0.01em;
}
.nv-stats__num-plus {
  font-size: 26px;
}
.nv-stats__num-unit {
  font-size: 20px;
  margin-left: 2px;
}

/* ---- サブラベル ---- */
.nv-stats__sub {
  margin: 12px 0 0;
  color: var(--nv-text);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

/* ============================================================
   レスポンシブ
   ============================================================ */
/* ------------------------------------------------------------
   SP: Figma 390x460 に忠実 (カード167x182 の 2x2 グリッド)
   セクション上下ガター40px / 左右は .nv-inner の20px (コンテンツ350px)
   カード = (350 - gap16) / 2 = 167px
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .nv-stats {
    padding: 40px 0;
  }

  /* 2x2 グリッド (縦横gap16px) */
  .nv-stats__grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  /* カード 167x182 / 角丸8px / align-center は素のルールを継承
     内部縦: pill(上端0) → icon上41 → 数値 → サブ → 下24 = 182 */
  .nv-stats__card {
    min-height: 182px;
    padding: 41px 8px 24px;
    border-radius: 8px;
  }

  /* ラベルピル: 高さ25 / 左右12 / 14px bold / 角丸(左上=カード8, 右下12) */
  .nv-stats__pill {
    height: 25px;
    padding: 0 12px;
    font-size: 14px;
    letter-spacing: 0.04em;   /* Figma ls0.56 @14px */
    border-radius: 8px 0 12px 0;
  }

  /* アイコン 40x40 (Figmaフレーム) */
  .nv-stats__icon {
    width: 40px;
    height: 40px;
  }

  /* 数値: 値40 / +22 / 単位18, 行高1.2で48pxボックス化 (Figma実測) */
  .nv-stats__num {
    margin-top: 8px;          /* icon下81 → 数値ボックス上89 */
    line-height: 1.2;
  }
  .nv-stats__num-value { font-size: 40px; }
  .nv-stats__num-plus  { font-size: 22px; }
  .nv-stats__num-unit  {
    font-size: 18px;
    color: var(--nv-text);    /* 単位はネイビー #1F3A5F / 値・+ は青のまま */
  }

  /* サブラベル: 14px / 行高21 / letter-spacing 0.04em / ネイビー */
  .nv-stats__sub {
    margin-top: 0;            /* 数値ボックス直下 (Figma) */
    font-size: 14px;
    line-height: 1.5;         /* 14 * 1.5 = 21px ボックス */
    letter-spacing: 0.04em;   /* Figma ls0.56 @14px */
    white-space: normal;      /* 狭幅で折返し (390では1行に収まる) */
  }
}