/* record.css */

.record__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin: 40px auto 0;
}

.record__badge img {
  width: auto;
  height: 68px;
}

.badge {
  display: flex;
  gap: var(--space-xs);
  font-weight: 700;
  color: var(--color-text);
  align-items: center;
  line-height: 1;
}

.badge__inner {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.badge__content {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
}

.badge__num {
  font-family: "Noto Sans", sans-serif;
  font-size: 5rem;
  letter-spacing: 0;
}

.badge__num span {
  font-size: 2.4rem;
}

.badge span.comma {
  font-size: 2.8rem;
}

.badge__title {
  font-size: var(--fz-rg);
  line-height: 1.3;
  text-align: center;
}

.badge__unit {
  font-size: var(--fz-md);
  letter-spacing: 0;
}

.badge__text {
  font-size: 4rem;
  letter-spacing: .5rem;
  margin-top: .5rem;
}


/* Tablet Portrait（768px ~ 1200px、縦向きのみ） */
@media (max-width: 1200px) and (min-width: 768px) and (orientation: portrait) {

  .hero__badge {
    justify-content: center;
  }

  .record__badge {
    flex-wrap: wrap;
    margin: 30px 0 0;
    justify-content: space-between;
    gap: var(--space-lg) var(--space-sm);
  }

  .record__badge .badge {
    flex: 0 0 calc(50% - var(--space-sm) / 2);
    justify-content: space-between;
  }
}

/* Tablet Landscape（768px ~ 1200px、横向きのみ） */
@media (max-width: 1200px) and (min-width: 768px) and (orientation: landscape) {

  .record__badge {
    margin: 30px 0 0;
    justify-content: center;
  }

  .record__badge img {
    height: 50px;
  }

  /* Badge フォントサイズ調整（スマホ） */
  .badge__num {
    font-size: 3.2rem;
  }

  .badge__num span {
    font-size: 1.8rem;
  }

  .badge span.comma {
    font-size: 2.0rem;
  }

  .badge__title {
    font-size: var(--fz-xs);
  }

  .badge__unit {
    font-size: var(--fz-xs);
  }

  .badge__text {
    font-size: 2.8rem;
  }
}

/* Smartphone（~767px） */
@media (max-width: 767px) {

  .record__badge {
    flex-wrap: wrap;
    margin: 30px 0 0;
    justify-content: space-between;
    gap: var(--space-lg) var(--space-sm);
  }

  .record__badge .badge {
    flex: 0 0 calc(50% - var(--space-sm) / 2);
    justify-content: space-between;
  }

  .record__badge img {
    height: 50px;
  }

  .badge__inner {
    flex-direction: column;
  }


  /* Badge フォントサイズ調整（スマホ） */
  .badge__num {
    font-size: 2.8rem;
  }

  .badge__num span {
    font-size: 1.6rem;
  }

  .badge span.comma {
    font-size: 2.0rem;
  }

  .badge__title {
    font-size: var(--fz-sm);
    line-height: 1;
  }

  .badge__unit {
    font-size: var(--fz-xs);
  }

  .badge__text {
    font-size: 2.8rem;
  }
}