@font-face {
  font-family: "NotoSansJP";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/NotoSansJP-Regular.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "NotoSansJP";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/NotoSansJP-Medium.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "NotoSansJP";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/NotoSansJP-Bold.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "NotoSansJP";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/NotoSansJP-Black.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "NotoSerifJP";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/NotoSerifJP-Regular.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "NotoSerifJP";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/NotoSerifJP-Medium.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "NotoSerifJP";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/NotoSerifJP-Bold.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "NotoSerifJP";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/NotoSerifJP-Black.woff") format("woff");
  font-display: swap;
}
#company {
  overflow: hidden;
}

.service__wrapper {
  display: flex;
  flex-direction: column;
  gap: 300px 0;
}
@media screen and (max-width: 1050px) {
  .service__wrapper {
    gap: 28.4785435631vw 0;
  }
}
@media screen and (max-width: 768px) {
  .service__wrapper {
    gap: 42.6666666667vw 0;
  }
}

.service__parallax {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
@media screen and (max-width: 768px) {
  .service__parallax {
    flex-direction: column-reverse;
    padding: 32vw 0 0;
  }
}
.service__parallax:nth-of-type(even) {
  flex-direction: row-reverse;
}
@media screen and (max-width: 768px) {
  .service__parallax:nth-of-type(even) {
    flex-direction: column-reverse;
  }
}
.service__parallax:nth-of-type(even) .service__parallax-picture {
  margin: 0 0 0 -6.1333333333vw;
}
.service__parallax h2 {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 40px;
}
@media screen and (max-width: 1050px) {
  .service__parallax h2 {
    font-size: 2.6579973992vw;
    margin: 0 0 3.7971391417vw;
  }
}
@media screen and (max-width: 768px) {
  .service__parallax h2 {
    font-size: 6.1333333333vw;
    margin: 0 0 5.3333333333vw;
    position: absolute;
    top: 0;
  }
}
.service__parallax h2 + p {
  font-size: 20px;
  margin: 0 0 24px;
}
@media screen and (max-width: 1050px) {
  .service__parallax h2 + p {
    font-size: 1.8985695709vw;
    margin: 0 0 2.278283485vw;
  }
}
@media screen and (max-width: 768px) {
  .service__parallax h2 + p {
    font-size: 4.5333333333vw;
    text-align: center;
    margin: 0 0 6.4vw;
  }
}
.service__parallax h2 + p + p {
  font-size: 14px;
  line-height: 26px;
}
@media screen and (max-width: 1050px) {
  .service__parallax h2 + p + p {
    font-size: 1.3289986996vw;
    line-height: 2.4681404421vw;
  }
}
@media screen and (max-width: 768px) {
  .service__parallax h2 + p + p {
    font-size: 3.4666666667vw;
    line-height: 6.6666666667vw;
  }
}

.service__parallax-text {
  width: 450px;
}
@media screen and (max-width: 1050px) {
  .service__parallax-text {
    width: 42.7178153446vw;
  }
}
@media screen and (max-width: 768px) {
  .service__parallax-text {
    width: 100%;
  }
}

.service__parallax-image {
  width: 500px;
}
@media screen and (max-width: 1050px) {
  .service__parallax-image {
    width: 47.4642392718vw;
  }
}
@media screen and (max-width: 768px) {
  .service__parallax-image {
    width: 100%;
  }
}

.service__parallax-picture {
  width: 100%;
  filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.1));
}
@media screen and (max-width: 768px) {
  .service__parallax-picture {
    width: calc(100% + 6.1333333333vw);
    padding: 0 0 32vw;
    margin: 0 -6.1333333333vw 0 0;
  }
}

.service__parallax-shape {
  position: absolute;
  z-index: -1;
}
.service__parallax-shape--01 {
  width: 632px;
  top: -70px;
  right: -230px;
}
@media screen and (max-width: 1050px) {
  .service__parallax-shape--01 {
    width: 59.9947984395vw;
    top: -6.644993498vw;
    right: -21.833550065vw;
  }
}
@media screen and (max-width: 768px) {
  .service__parallax-shape--01 {
    width: 115.7333333333vw;
    top: 21.3333333333vw;
    right: -53.3333333333vw;
  }
}
.service__parallax-shape--02 {
  width: 780px;
  top: -170px;
  left: -390px;
}
@media screen and (max-width: 1050px) {
  .service__parallax-shape--02 {
    width: 74.044213264vw;
    top: -16.1378413524vw;
    left: -37.022106632vw;
  }
}
@media screen and (max-width: 768px) {
  .service__parallax-shape--02 {
    width: 136vw;
    top: 16vw;
    left: -69.3333333333vw;
  }
}
.service__parallax-shape--03 {
  width: 524px;
  top: -100px;
  right: -243px;
}
@media screen and (max-width: 1050px) {
  .service__parallax-shape--03 {
    width: 49.7425227568vw;
    top: -9.4928478544vw;
    right: -23.0676202861vw;
  }
}
@media screen and (max-width: 768px) {
  .service__parallax-shape--03 {
    width: 88vw;
    top: 24vw;
    right: -16vw;
  }
}
.service__parallax-shape--04 {
  width: 890px;
  top: -60px;
  left: -512px;
}
@media screen and (max-width: 1050px) {
  .service__parallax-shape--04 {
    width: 84.4863459038vw;
    top: -5.6957087126vw;
    left: -48.6033810143vw;
  }
}
@media screen and (max-width: 768px) {
  .service__parallax-shape--04 {
    width: 141.6vw;
    top: 18.6666666667vw;
    left: -88vw;
  }
}
.service__parallax-shape--05 {
  width: 700px;
  top: -20px;
  right: -274px;
}
@media screen and (max-width: 1050px) {
  .service__parallax-shape--05 {
    width: 66.4499349805vw;
    top: -1.8985695709vw;
    right: -26.0104031209vw;
  }
}
@media screen and (max-width: 768px) {
  .service__parallax-shape--05 {
    width: 110.4vw;
    top: 25.3333333333vw;
    right: -35.4666666667vw;
  }
}
.service__parallax-shape--06 {
  width: 609px;
  top: -20px;
  left: -274px;
}
@media screen and (max-width: 1050px) {
  .service__parallax-shape--06 {
    width: 57.811443433vw;
    top: -1.8985695709vw;
    left: -26.0104031209vw;
  }
}
@media screen and (max-width: 768px) {
  .service__parallax-shape--06 {
    width: 92vw;
    top: 26.6666666667vw;
    left: -34.6666666667vw;
  }
}
.service__parallax-shape--07 {
  width: 609px;
  top: -141px;
  right: -200px;
}
@media screen and (max-width: 1050px) {
  .service__parallax-shape--07 {
    width: 57.811443433vw;
    top: -13.3849154746vw;
    right: -18.9856957087vw;
  }
}
@media screen and (max-width: 768px) {
  .service__parallax-shape--07 {
    width: 75.2vw;
    top: 21.3333333333vw;
    right: -13.3333333333vw;
  }
}
.service__parallax-shape--08 {
  width: 709px;
  top: -91px;
  left: -345px;
}
@media screen and (max-width: 1050px) {
  .service__parallax-shape--08 {
    width: 57.811443433vw;
    top: -8.6384915475vw;
    left: -32.7503250975vw;
  }
}
@media screen and (max-width: 768px) {
  .service__parallax-shape--08 {
    width: 118.4vw;
    top: 12.2666666667vw;
    left: -37.3333333333vw;
  }
}

.service__parallax-shape--small {
  position: absolute;
  z-index: -1;
  filter: blur(12px);
}
.service__parallax-shape--small--01 {
  width: 119px;
  top: -150px;
  right: 270px;
}
@media screen and (max-width: 1050px) {
  .service__parallax-shape--small--01 {
    width: 11.2964889467vw;
    top: -14.2392717815vw;
    right: 25.6306892068vw;
  }
}
@media screen and (max-width: 768px) {
  .service__parallax-shape--small--01 {
    width: 20.2666666667vw;
    top: 21.3333333333vw;
    right: 57.8666666667vw;
  }
}
.service__parallax-shape--small--02 {
  width: 119px;
  top: -30px;
  left: 290px;
}
@media screen and (max-width: 1050px) {
  .service__parallax-shape--small--02 {
    width: 11.2964889467vw;
    top: -2.8478543563vw;
    left: 27.5292587776vw;
  }
}
@media screen and (max-width: 768px) {
  .service__parallax-shape--small--02 {
    width: 24vw;
    top: 26.6666666667vw;
    left: 48vw;
  }
}
.service__parallax-shape--small--03 {
  width: 86px;
  top: -60px;
  right: 310px;
}
@media screen and (max-width: 1050px) {
  .service__parallax-shape--small--03 {
    width: 8.1638491547vw;
    top: -5.6957087126vw;
    right: 29.4278283485vw;
  }
}
@media screen and (max-width: 768px) {
  .service__parallax-shape--small--03 {
    width: 16vw;
    top: 10.6666666667vw;
    right: 69.3333333333vw;
  }
}
.service__parallax-shape--small--04 {
  width: 164px;
  top: -80px;
  left: 370px;
}
@media screen and (max-width: 1050px) {
  .service__parallax-shape--small--04 {
    width: 15.5682704811vw;
    top: -7.5942782835vw;
    left: 35.1235370611vw;
  }
}
@media screen and (max-width: 768px) {
  .service__parallax-shape--small--04 {
    width: 21.3333333333vw;
    top: 21.3333333333vw;
    left: 66.6666666667vw;
  }
}
.service__parallax-shape--small--05 {
  width: 90px;
  top: -60px;
  right: 260px;
}
@media screen and (max-width: 1050px) {
  .service__parallax-shape--small--05 {
    width: 8.5435630689vw;
    top: -5.6957087126vw;
    right: 24.6814044213vw;
  }
}
@media screen and (max-width: 768px) {
  .service__parallax-shape--small--05 {
    width: 18.6666666667vw;
    top: 21.3333333333vw;
    right: 53.3333333333vw;
  }
}
.service__parallax-shape--small--06 {
  width: 90px;
  top: -46px;
  left: 300px;
}
@media screen and (max-width: 1050px) {
  .service__parallax-shape--small--06 {
    width: 8.5435630689vw;
    top: -4.366710013vw;
    left: 28.4785435631vw;
  }
}
@media screen and (max-width: 768px) {
  .service__parallax-shape--small--06 {
    width: 18.6666666667vw;
    top: 13.3333333333vw;
    left: 56vw;
  }
}
.service__parallax-shape--small--07 {
  width: 87px;
  top: -46px;
  right: 300px;
}
@media screen and (max-width: 1050px) {
  .service__parallax-shape--small--07 {
    width: 8.2587776333vw;
    top: -4.366710013vw;
    right: 28.4785435631vw;
  }
}
@media screen and (max-width: 768px) {
  .service__parallax-shape--small--07 {
    width: 16vw;
    top: 16vw;
    right: 48vw;
  }
}
.service__parallax-shape--small--08 {
  width: 130px;
  top: 350px;
  left: 300px;
}
@media screen and (max-width: 1050px) {
  .service__parallax-shape--small--08 {
    width: 12.3407022107vw;
    top: 33.2249674902vw;
    left: 28.4785435631vw;
  }
}
@media screen and (max-width: 768px) {
  .service__parallax-shape--small--08 {
    width: 18.6666666667vw;
    top: 101.3333333333vw;
    left: 61.3333333333vw;
  }
}
/*# sourceMappingURL=service.css.map */