@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
.about-img {
  position: relative;
}
.about-img h3 {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) scaleY(2);
  color: white;
  font-size: 3.5vw;
  width: 100%;
  text-align: center;
  font-family: "kozuka-gothic-pr6n", sans-serif;
  font-weight: 600;
  font-style: normal;
  line-height: 110%;
  text-shadow: 0.1em 0.1em 0.2em rgba(255, 255, 255, 0.188), -0.1em 0.1em 0.2em rgba(255, 255, 255, 0.188), 0.1em -0.1em 0.2em rgba(255, 255, 255, 0.188), -0.1em -0.1em 0.2em rgba(255, 255, 255, 0.188);
}

.about-box {
  width: 100%;
  background-image: url("../../src/about/bg.webp");
  background-position: center bottom;
  background-size: 100%;
  position: relative;
  margin-bottom: -9%;
}
.about-box .t-box {
  width: 45%;
  margin: 0 auto;
}
.about-box .t-box h4 {
  color: #5e9c97;
  font-size: 3.3vw;
  font-family: "kozuka-gothic-pr6n", sans-serif;
  font-weight: 600;
  font-style: normal;
  padding-bottom: 2%;
}
.about-box .t-box p {
  font-size: 1.5vw;
}
.about-box .t-box:nth-child(1) {
  padding-top: 33%;
  padding-bottom: 0%;
}
.about-box .t-box:nth-child(2) {
  padding-top: 23%;
  padding-bottom: 27%;
}
.about-box .circle {
  position: absolute;
  width: 5%;
}
.about-box .img1 {
  top: 15%;
  left: 10%;
  width: 17%;
}
.about-box .img2 {
  top: 10%;
  right: 20%;
  width: 15%;
}
.about-box .img3 {
  top: 35%;
  left: 3%;
  width: 20%;
}
.about-box .img4 {
  top: 24%;
  right: 5%;
  width: 18%;
}
.about-box .img5 {
  top: 46%;
  right: 10%;
  width: 16%;
}
.about-box .circle-img1 {
  top: 4%;
  right: 5%;
  width: 10%;
}
.about-box .circle-img2 {
  top: 46%;
  left: 22%;
  width: 8%;
}
.about-box .circle-img3 {
  bottom: 23%;
  left: 3%;
  width: 13%;
}

.contact {
  padding-top: 5%;
}

@media (max-width: 700px) {
  .about-img {
    margin-top: 5%;
  }
  .about-img h3 {
    font-size: 4.5vw;
  }
  .about-box {
    margin-bottom: -23%;
  }
  .about-box .t-box {
    width: 70%;
  }
  .about-box .t-box h4 {
    font-size: 18px;
  }
  .about-box .t-box p {
    font-size: 14px;
  }
  .about-box .img1 {
    top: 5%;
    left: 10%;
    width: 19%;
  }
  .about-box .img2 {
    top: 10%;
    right: 20%;
    width: 17%;
  }
  .about-box .img3 {
    top: 48%;
    left: -1%;
    width: 20%;
  }
  .about-box .img4 {
    top: 24%;
    right: -3%;
    width: 17%;
  }
  .about-box .img5 {
    top: 46%;
    right: 10%;
    width: 16%;
  }
  .about-box .circle-img1 {
    top: 4%;
    right: 5%;
    width: 10%;
  }
  .about-box .circle-img2 {
    top: 46%;
    left: 22%;
    width: 8%;
  }
  .about-box .circle-img3 {
    bottom: 23%;
    left: 3%;
    width: 13%;
  }
  .contact {
    padding-top: 20%;
  }
}/*# sourceMappingURL=about.css.map */