@charset "UTF-8";

/* カウンター用スタイル */
.counter-block-item {
  text-align: center;
  padding: 40px 10px;
}

.counter-box {
  font-size: 60px;
  font-weight: bold;
  color: #31ae4b; /* メインカラー */
  line-height: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
}

/* 明朝体指定 */
.count-num,
.count-unit {
  font-family: "Yu Mincho", "YuMincho", serif;
}

.count-num {
  font-variant-numeric: tabular-nums;
}

.count-unit {
  font-size: 18px;
  color: #333;
  margin-left: 10px;
  font-weight: normal;
}

.counter-desc {
  margin-top: 10px;
  color: #666;
  font-size: 14px;
}

.counter-desc2 {
  margin-top: 15px;
  color: #666;
  font-size: 14px;
  text-align: left;
}

/* ===============================
   スマホ共通（列数に関係なく）
================================ */

@media screen and (max-width: 768px) {
  .counter-block-item {
    padding: 20px 5px;
  }
  .counter-box {
    font-size: 36px;
  }
  .count-unit {
    font-size: 18px;
    margin-left: 3px;
  }
}

/* ===============================
   列数判定（container query）
   ※ counter-columns を付けた
      Columnsブロック専用
================================ */

/* このブロックだけを container 化 */
.counter-columns .swell-block-column {
  container-type: inline-size;
}

/* スマホで2列のとき（カードが狭い想定） */
@media screen and (max-width: 768px) {
  .counter-columns .count-num {
    font-size: 36px;
  }
}

/* スマホで1列のとき（カードが広い時だけ） */
@container (min-width: 300px) {
  .counter-columns .count-num {
    font-size: 48px;
  }
}