@charset "UTF-8";

.grayScale {
  filter: grayscale(1) brightness(.7);
  transition: .7s .4s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.grayScale.is-inview {
  filter: grayscale(0) brightness(1);
}

/* value
---------------------------------------------- */
@media screen and (max-width: 768px) {
  .valueMain .imgcap {
    right: auto;
    left: 0;
  }
}

/* mapBox
---------------------------------------------- */
.mapBox {
  margin-top: 160px;
}
.mapBox__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px 5%;
}
.mapBox__copy {
  font-size: 20px;
  letter-spacing: 0.08em;
  line-height: 2;
}
.mapBox__text {
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 2;
  margin-top: 2em;
  text-align: justify;
}
.mapBox__cap {
  margin-top: 1.5em;
}




@media screen and (min-width: 768px) {
  .mapBox--reverse .mapBox__inner {
    flex-direction: row-reverse;
  }
  .mapBoxHead {
    width: calc(380 / 1280 * 100%);
  }
  .mapBoxBody {
    width: calc(800 / 1280 * 100%);
  }
  .mapBox--small .mapBoxBody {
    width: calc(600 / 1280 * 100%);
  }
  .mapBox--small .mapBoxHead {
    width: calc(500 / 1280 * 100%);
  }
}

@media screen and (max-width: 768px) {
  .mapBox {
    margin-top: 80px;
  }
  .mapBox__inner {
    flex-direction: column-reverse;
  }
  .mapBox__copy {
    font-size: 18px;
  }
  .mapBox__text {
    margin-top: 1em;
  }
}

/* data
---------------------------------------------- */
.data {
  background-color: #F1F4F7;
  margin-top: 160px;
  padding-block: 80px;
}
.data__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 30px 8%;
}
.data__title {
  font-size: 18px;
  letter-spacing: 0.02em;
}
.dataBody {
  max-width: 1000px;
  margin-left: auto;
}
.dataGraph {
  display: grid;
  grid-template-columns: calc(404 / 1000 * 100%) calc(563 / 1000 * 100%);
  gap: 30px calc(32 / 1000 * 100%);
}
.dataBody__cap {
  margin-top: 1.5em;
}

@media screen and (max-width: 991px) {
  .data__inner {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 767px) {
  .data {
    margin-top: 80px;
    padding-block: 40px;
  }
  .dataGraph {
    grid-template-columns: 1fr;
  }
}