.number-item {
    margin:10px;
    width:calc(25% - 24px);
    text-align: center;
    background-color: #f5f5f5;
  }

.top-left {
  margin-left: 10px;
  margin-top: 5px;
  text-align: left;
  font-size: 20px;
  font-weight: bold;
}  

.data-top {
  max-width: 90%;
}

.number_note {
  text-align: right;
  margin-right: 5%;
}

@media screen and (max-width: 1049px) {
  .top-left {
    font-size: 16px;
  }
}

@media screen and (max-width: 800px) {
  .data-top {
    margin-left: 5%;
  }
}

@media screen and (max-width: 767px){
  .number-item{
    margin:15px;
    width:calc(100% - 32px);
  }
  .top-left {
    font-size: clamp(2.4rem, calc(2.2rem + 0.625vw), 2.9rem);
  }

  }

@media screen and (max-width: 460px){
  .number-item{
      margin:10px;
      width:calc(100% - 22px);
  }

  }