/* CSS Document */
.spmask {
  display: inline-block;
}

.spmask-inline {
  display: inline;
}

.sponly {
  display: none;
}

@media (max-width: 767px) {
  .spmask {
    display: none;
  }
  .spmask-inline {
    display: none;
  }
  .sponly {
    display: block;
  }
}
/*------------------------------*/
.data {
  padding-block: 7rem 15rem;
}
@media screen and (max-width: 767px) {
  .data {
    padding-block: 5rem 10rem;
  }
}
.data .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto auto;
  gap: 5rem;
}
@media screen and (max-width: 767px) {
  .data .container {
    grid-template-columns: 1fr 1fr;
    row-gap: 3.5rem;
    -moz-column-gap: 3rem;
         column-gap: 3rem;
    zoom: 0.5;
  }
}
.data .container li {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  justify-content: center;
  gap: 0;
  border-radius: 1.6rem;
  background-color: #fff;
  padding-block: 4rem;
  box-shadow: 0 0 8px -5px #9e9e9e;
}
.data .container li.two-column {
  grid-column: span 2;
}
@media screen and (max-width: 767px) {
  .data .container li.two-column {
    grid-row: 17/21;
    grid-column: 1/3;
  }
}
.data .container li h3 {
  font-size: 2.1rem;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 0.5em;
       column-gap: 0.5em;
}
.data .container li h3::before, .data .container li h3::after {
  content: "-";
}
.data .container li .image {
  margin-top: 3rem;
  margin-inline: auto;
}
.data .container li .image.i01 {
  width: 9.5rem;
}
.data .container li .image.i02-a {
  width: 7.8rem;
}
.data .container li .image.i02-b {
  width: 7.8rem;
}
.data .container li .image.i03 {
  width: 17.2rem;
}
.data .container li .image.i04 {
  width: 16.5rem;
}
.data .container li .image.i05 {
  width: 10.7rem;
}
.data .container li .image.i06 {
  width: 12.1rem;
}
.data .container li .image.i07 {
  width: 11.7rem;
}
.data .container li .image.i08 {
  width: 13.3rem;
}
.data .container li .image.i09 {
  width: 6.4rem;
}
.data .container li .image.i10-a {
  width: 9.1rem;
}
.data .container li .image.i10-b {
  width: 7.8rem;
}
.data .container li .image.i11-a {
  width: 6.7rem;
}
.data .container li .image.i11-b {
  width: 6.6rem;
}
.data .container li .image.i11-c {
  width: 10.2rem;
}
.data .container li .num {
  margin-top: 2rem;
  margin-inline: auto;
  white-space: nowrap;
}
.data .container li .num .countUp {
  font-size: 8rem;
  font-weight: 700;
  color: var(--main);
  display: inline-block;
  text-align: right;
}
.data .container li .num .countUp.c01 {
  width: 4ch;
}
.data .container li .num .countUp.c02-a {
  width: 1ch;
}
.data .container li .num .countUp.c02-b {
  width: 1ch;
}
.data .container li .num .countUp.c03 {
  width: 3.5ch;
}
.data .container li .num .countUp.c04 {
  width: 3.5ch;
}
.data .container li .num .countUp.c05 {
  width: 2.5ch;
}
.data .container li .num .countUp.c06 {
  width: 3ch;
}
.data .container li .num .countUp.c07 {
  width: 3ch;
}
.data .container li .num .countUp.c08 {
  width: 1ch;
}
.data .container li .num .countUp.c09 {
  width: 3ch;
}
.data .container li .num .countUp.c10-a {
  width: 1.9ch;
}
.data .container li .num .countUp.c10-b {
  width: 1.9ch;
}
.data .container li .num .countUp.c11-a {
  width: 1.9ch;
}
.data .container li .num .countUp.c11-b {
  width: 1.9ch;
}
.data .container li .num .countUp.c11-c {
  width: 1.9ch;
}
.data .container li .num .countUp + .unit {
  margin-left: 0.5em;
}
.data .container li .num .unit {
  font-size: 2.1rem;
  font-weight: 700;
  display: inline-block;
}
.data .container li .num .unit:has(+ .countUp) {
  margin-right: 0.5em;
}
.data .container li p.caption {
  text-align: center;
  font-weight: 700;
  line-height: 1.5;
}
.data .container li .column-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: subgrid;
  grid-row: span 3;
  -moz-column-gap: 5rem;
       column-gap: 5rem;
  position: relative;
}
.data .container li .column-wrap.three-column {
  grid-template-columns: 1fr 1fr 1fr;
  -moz-column-gap: 7rem;
       column-gap: 7rem;
}
.data .container li .column-wrap.three-column::before {
  content: ":";
  position: absolute;
  font-size: 8rem;
  line-height: 1.3;
  bottom: 2.4rem;
  left: 30%;
  translate: -50% 0;
}
.data .container li .column-wrap.three-column::after {
  content: ":";
  position: absolute;
  font-size: 8rem;
  line-height: 1.3;
  bottom: 2.4rem;
  left: 70%;
  translate: -50% 0;
}
.data .container li .column-wrap .column {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  justify-content: center;
}
.data .container li .column-wrap::after {
  content: ":";
  position: absolute;
  font-size: 8rem;
  line-height: 1.3;
  bottom: 2.4rem;
  left: 50%;
  translate: -50% 0;
}
.data .container li .column-wrap.no-colon::after {
  display: none;
}

/*------------------------------*/
main .bg {
  position: absolute;
  z-index: 0;
  width: 68rem;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  main .bg {
    width: 80%;
  }
}
main .bg.bg01 {
  right: -30rem;
  top: 12rem;
  rotate: 26deg;
}
@media screen and (max-width: 767px) {
  main .bg.bg01 {
    top: -10rem;
    right: -10rem;
  }
}
main .bg.bg02 {
  left: -30rem;
  bottom: 12rem;
  rotate: -26deg;
}
@media screen and (max-width: 767px) {
  main .bg.bg02 {
    bottom: -10rem;
    left: -10rem;
  }
}
/*# sourceMappingURL=style.css.map */