/* color */
#mv .main_title.sub .im img {
  object-position: center 46%;
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #mv .main_title.sub .text {
    margin-top: -18.984375vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #mv .main_title.sub .text {
    margin-top: -243px;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #mv .main_title.sub .text .tt {
    width: 23.4375vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #mv .main_title.sub .text .tt {
    width: 300px;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #mv .main_title.sub .text .tx {
    width: 59.375vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #mv .main_title.sub .text .tx {
    width: 760px;
  }
}

@media screen and (min-width: 768px) and (min-width: 768px) {
  #sec01 {
    margin-top: 14.296875vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #sec01 {
    margin-top: 183px;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #sec01 {
    padding-bottom: 15.625vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #sec01 {
    padding-bottom: 200px;
  }
}
@media screen and (max-width: 767px) {
  #sec01 {
    margin: 15.3846153846vw 7.6923076923vw 0;
    padding-bottom: 15.3846153846vw;
  }
}
#sec01 .hd {
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  #sec01 .hd {
    font-size: 40px;
    font-size: 3.125vw;
    line-height: 1.5;
    letter-spacing: 0.15em;
  }
}
@media screen and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .hd {
    font-size: 40px;
  }
}
@media screen and (max-width: 767px) {
  #sec01 .hd {
    font-size: 6.1538461538vw;
    line-height: 9.2307692308vw;
    letter-spacing: 0.1em;
  }
}
@media screen and (min-width: 768px) {
  #sec01 .tx {
    font-size: 18px;
    font-size: 1.40625vw;
    line-height: 2.2222222222;
    --letter-spacing:.10em;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #sec01 .tx {
    margin-top: 3.125vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .tx {
    margin-top: 40px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .tx {
    font-size: 18px;
  }
}
@media screen and (max-width: 767px) {
  #sec01 .tx {
    margin-top: 7.6923076923vw;
    font-size: 4.1025641026vw;
    line-height: 8.7179487179vw;
  }
}
#sec01 .tx p + p {
  margin-top: 1.5em;
}
#sec01 .ph p {
  overflow: hidden;
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #sec01 .ph p {
    border-radius: 0.46875vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .ph p {
    border-radius: 6px;
  }
}
@media screen and (max-width: 767px) {
  #sec01 .ph p {
    border-radius: 1.5384615385vw;
  }
}
@media screen and (min-width: 768px) {
  #sec01 .box1 {
    display: inline-grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 45.3125vw 42.1875vw;
    grid-template-areas: "ph hd" "ph tx";
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #sec01 .box1 {
    grid-column-gap: 5.859375vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .box1 {
    grid-column-gap: 75px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .box1 {
    grid-template-columns: 580px 540px;
  }
}
@media screen and (min-width: 768px) {
  #sec01 .box1 .hd {
    grid-area: hd;
  }
}
@media screen and (min-width: 768px) {
  #sec01 .box1 .ph {
    grid-area: ph;
    display: grid;
    justify-content: flex-end;
  }
}
@media screen and (max-width: 767px) {
  #sec01 .box1 .ph {
    margin-top: 7.6923076923vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #sec01 .box1 .ph p {
    width: 70.3125vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .box1 .ph p {
    width: 900px;
  }
}
@media screen and (min-width: 768px) {
  #sec01 .box1 .tx {
    grid-area: tx;
  }
}
@media screen and (min-width: 768px) {
  #sec01 .box2 {
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #sec01 .box2 {
    margin-top: 12.5vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .box2 {
    margin-top: 160px;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #sec01 .box2 {
    width: 86.71875vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .box2 {
    width: 1110px;
  }
}
@media screen and (max-width: 767px) {
  #sec01 .box2 {
    margin-top: 12.8205128205vw;
  }
}
@media screen and (min-width: 768px) {
  #sec01 .box2 .ph {
    display: flex;
    justify-content: space-between;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #sec01 .box2 .ph {
    margin-top: 3.90625vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .box2 .ph {
    margin-top: 50px;
  }
}
@media screen and (max-width: 767px) {
  #sec01 .box2 .ph {
    margin-top: 7.6923076923vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #sec01 .box2 .ph li {
    width: 41.015625vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .box2 .ph li {
    width: 525px;
  }
}
@media screen and (max-width: 767px) {
  #sec01 .box2 .ph li + li {
    margin-top: 7.6923076923vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #sec01 .box2 .tx {
    width: 71.875vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (min-width: 1281px) {
  #sec01 .box2 .tx {
    width: 920px;
  }
}
/*# sourceMappingURL=index.css.map */