/* color */
#sec01 {
  position: relative;
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #sec01 {
    padding-top: 25.625vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #sec01 {
    padding-top: 328px;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #sec01 {
    padding-bottom: 46.171875vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #sec01 {
    padding-bottom: 591px;
  }
}
@media screen and (max-width: 767px) {
  #sec01 {
    padding: 27.4358974359vw 0 84.1025641026vw;
  }
}
#sec01 .bg img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  object-fit: cover;
}
@media screen and (min-width: 768px) {
  #sec01 .bg img {
    object-position: center 90%;
  }
}
@media screen and (max-width: 767px) {
  #sec01 .bg img {
    object-position: center bottom;
  }
}
#sec01 .text {
  color: #fff;
}
@media screen and (max-width: 767px) {
  #sec01 .text {
    margin: 0 7.6923076923vw;
  }
}
#sec01 .text .hd01 {
  font-weight: 500;
  letter-spacing: 0.15em;
}
@media screen and (min-width: 768px) {
  #sec01 .text .hd01 {
    text-align: center;
    font-size: 50px;
    font-size: 3.90625vw;
    line-height: 1.2;
  }
}
@media screen and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .text .hd01 {
    font-size: 50px;
  }
}
@media screen and (max-width: 767px) {
  #sec01 .text .hd01 {
    font-size: 8.7179487179vw;
    line-height: 14.1025641026vw;
    white-space: nowrap;
  }
}
#sec01 .text .tx01 {
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  #sec01 .text .tx01 {
    margin: 0 auto;
    font-size: 18px;
    font-size: 1.40625vw;
    line-height: 2.4444444444;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #sec01 .text .tx01 {
    margin-top: 3.59375vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .text .tx01 {
    margin-top: 46px;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #sec01 .text .tx01 {
    width: 61.71875vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .text .tx01 {
    width: 790px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .text .tx01 {
    font-size: 18px;
  }
}
@media screen and (max-width: 767px) {
  #sec01 .text .tx01 {
    margin-top: 10.2564102564vw;
    font-size: 4.1025641026vw;
    line-height: 8.7179487179vw;
  }
}
@media screen and (min-width: 768px) {
  #sec01 .text .list {
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #sec01 .text .list {
    margin-top: 9.453125vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .text .list {
    margin-top: 121px;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #sec01 .text .list {
    width: 57.109375vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .text .list {
    width: 731px;
  }
}
@media screen and (max-width: 767px) {
  #sec01 .text .list {
    margin-top: 20.5128205128vw;
  }
}
#sec01 .text .list li {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-areas: "num tt" "num tx";
}
@media screen and (min-width: 768px) {
  #sec01 .text .list li {
    grid-template-columns: 7.65625vw auto;
  }
}
@media screen and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .text .list li {
    grid-temlate-columns: 98px auto;
  }
}
@media screen and (max-width: 767px) {
  #sec01 .text .list li {
    grid-template-columns: 21.0256410256vw auto;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #sec01 .text .list li + li {
    margin-top: 7.03125vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .text .list li + li {
    margin-top: 90px;
  }
}
@media screen and (max-width: 767px) {
  #sec01 .text .list li + li {
    margin-top: 20.5128205128vw;
  }
}
#sec01 .text .list li .num {
  grid-area: num;
  font-style: italic;
  font-weight: 250;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  #sec01 .text .list li .num {
    font-size: 100px;
    font-size: 7.8125vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .text .list li .num {
    font-size: 100px;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #sec01 .text .list li .num {
    margin-top: -0.3125vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .text .list li .num {
    margin-top: -4px;
  }
}
@media screen and (max-width: 767px) {
  #sec01 .text .list li .num {
    font-size: 20.5128205128vw;
  }
}
#sec01 .text .list li .tt {
  grid-area: tt;
  font-weight: 500;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  #sec01 .text .list li .tt {
    font-size: 22px;
    font-size: 1.71875vw;
    line-height: 1.5454545455;
  }
}
@media screen and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .text .list li .tt {
    font-size: 22px;
  }
}
@media screen and (max-width: 767px) {
  #sec01 .text .list li .tt {
    font-size: 5.641025641vw;
    line-height: 7.6923076923vw;
  }
}
#sec01 .text .list li .tx {
  grid-area: tx;
}
@media screen and (min-width: 768px) {
  #sec01 .text .list li .tx {
    font-size: 15px;
    font-size: 1.171875vw;
    line-height: 2;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #sec01 .text .list li .tx {
    margin-top: 0.546875vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .text .list li .tx {
    margin-top: 7px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .text .list li .tx {
    font-size: 15px;
  }
}
@media screen and (max-width: 767px) {
  #sec01 .text .list li .tx {
    margin-top: 2.3076923077vw;
    font-size: 3.8461538462vw;
    line-height: 7.6923076923vw;
  }
}
/*# sourceMappingURL=index.css.map */