#Service {
  padding-bottom: 100px;
}
@media (max-width: 600px) {
  #Service {
    padding-bottom: 50px;
  }
}
#Service h3 {
  text-align: center;
}

.border {
  border-bottom: solid #c3c3c3;
  margin: 0 10%;
}

@media (min-width: 601px) {
  .service1 {
    display: flex;
    margin: 0 10%;
    transform: translateX(300px);
  }
  .service1 img {
    width: 320px;
    height: 320px;
    margin-right: 8%;
  }
  .service2 {
    display: flex;
    margin: 0 10%;
    transform: translateX(-300px);
  }
  .service2 img.pc {
    width: 320px;
    height: 320px;
    margin-left: 8%;
  }
  .service2 img.sp {
    display: none;
  }
  .service3 {
    display: flex;
    margin: 0 10%;
    transform: translateX(300px);
  }
  .service3 img {
    width: 320px;
    height: 320px;
    margin-right: 8%;
  }
  .fade-in {
    opacity: 0;
    transition-duration: 2s;
    transition-property: opacity, transform;
  }
  .scroll-in {
    opacity: 1;
    transform: translate(0, 0);
  }
}
.serviceSentence {
  font-size: 2.4rem;
  margin: 10% 0 10% 0;
}
.serviceSentence p {
  margin-top: 8%;
}

@media (max-width: 600px) {
  .service1 {
    text-align: center;
    margin: 0 10%;
  }
  .service1 img {
    width: 75%;
  }
  .service2 {
    text-align: center;
    margin: 0 10%;
  }
  .service2 img {
    width: 75%;
  }
}
@media (max-width: 600px) and (max-width: 600px) {
  .service2 img.pc {
    display: none;
  }
}
@media (max-width: 600px) {
  .service3 {
    text-align: center;
    margin: 0 10%;
  }
  .service3 img {
    width: 75%;
  }
}
@media (max-width: 600px) {
  .serviceSentence {
    font-size: 1.8rem;
    margin: 5% 0 10% 0;
  }
  .serviceSentence p {
    font-size: 1.4rem;
    margin-top: 4%;
    text-align: left;
  }
}/*# sourceMappingURL=service.css.map */