@import url(./common/_variable.css);

/* data */
/* ============================================ */

.column_double {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  @media (width < 896px) {
    grid-template-columns: repeat(1,1fr);
  }
}

.box_data {
  box-sizing: border-box;
  padding: 5cqw;
  @media (width < 480px) {
    padding: 30px 0 15px;
  }
}

.box_data_single {
  box-sizing: border-box;
  padding: 5cqw;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  @media (width < 480px) {
    padding: 30px 0 15px;
  }
  > div {
    width: 50%;
    text-align: center;
    box-sizing: border-box;
    padding: 0 10px;
    @media (width < 896px) {
      width: 100%;
    }
  }
}

.r_reverse {
  flex-direction: row-reverse;
}

.b_top {
  border-top: #000 solid 3px;
}
.b_right {
  border-right: #000 solid 3px;
  @media (width < 896px) {
    border-right: none;
  }
}
.b_bottom {
  border-bottom: #000 solid 3px;
}
.b_left {
  border-left: #000 solid 3px;
  @media (width < 896px) {
    border-left: none;
  }
}
.border_lastn {
  @media (width < 896px) {
    border-bottom: #000 solid 3px;
  }
}

.figure_data {
  position: relative;
  text-align: center;
  img {
    position: relative;
    height: 33cqw;
    width: auto;
    @media (width < 480px) {
      height: 200px;
    }
  }
}

.classification {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 8px;
  text-align: center;
  dl {
    text-align: center;
    line-height: 2.8em;
    @media (width < 896px) {
      line-height: 2em;
    }
    dt {
      font-size: clamp(1.6rem, 0.93cqw + 1.251rem, 2.2rem);
      font-weight: 700;
    }
    dd {
      font-size: clamp(2.4rem, 3.72cqw + 1.005rem, 4.8rem);
      font-family: "Anton", sans-serif;
    }
  }
}

.classification_single {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}

.percent_inner {
  font-family: "Anton", sans-serif;
  font-size: clamp(6rem, 5.58vw + 3.907rem, 9.6rem);
  text-align: center;
  display: inline-block;
}

.kerning_ml02 {
  margin-left: -0.2em;
}

.box_data_ttl {
  text-align: center;
  padding: 3cqw 0 0;
}

.hd_data {
  font-size: clamp(1.8rem, 1.55cqw + 1.219rem, 2.8rem);
  line-height: 1.2em;
  font-weight: 700;
}

.sub_data {
  font-size: 1.2rem;
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
}

.mt-vw {
  margin-top: -5cqw;
  @media (width < 896px) {
    margin-top: -6cqw;
  }
  @media (width < 480px) {
    margin-top: -8cqw;
  }
}

.value_data_single {
  font-size: clamp(9rem, 9.3cqw + 5.512rem, 15rem);
  font-family: "Anton", sans-serif;
  text-align: center;
  line-height: 1em;
  padding: 20px 0 0;
}

.value_unit {
  font-size: 0.3em;
  font-weight: 700;
}

.value_data_double {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 8px;
  text-align: center;
  padding:3cqw 0 0;
  dl {
    dt {
      line-height: 1em;
      font-size: clamp(1.6rem, 1.24cqw + 1.135rem, 2.4rem);
      font-weight: 700;
    }
    dd {
      padding: 8px 0 0;
      line-height: 1em;
      font-size: clamp(6rem, 7.75cqw + 3.093rem, 11rem);
      font-family: "Anton", sans-serif;
    }
  }
}

.txt_data_bottom {
  font-size: clamp(1.6rem, 1.86vw + 0.902rem, 2.8rem);
  font-weight: 600;
}