@charset "UTF-8";

#service-header {
  background-image: url("../img/service-header.jpg");
}

#contents {
  background: #f2f2f2;
  padding: 0;
}

#service-01 {
  position: relative;
}

#service-01 h2 {
  margin-bottom: 70px;
  text-align: center;
  line-height: 1;
}

#service-01 .s01-c:nth-of-type(even) {
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.s01-img {
  width: 50%;
  padding-top: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  z-index: 1111;
}

.s01-txt {
  width: 55%;
  margin: 5% 0 5% -5%;
  position: relative;
  z-index: 2222;
}

.s01-txt-in {
  background-color: #fff;
  padding: 14.646464646465% 19.69696969697% 14.646464646465% 14.646464646465%;
  position: relative;
  width: 100%;
}

.s01-txt-in .s01-service-name {
  margin-bottom: 50px;
  line-height: 1;
  color: #0f81d1;
  font-size: 20.5px;
  font-weight: bold;
}

.s01-txt-in .s01-service-desc {
  margin-bottom: 30px;
  color: #4d4d4d;
  font-size: 14px;
}

.s01-txt-in .s01-number {
  display: block;
  margin-bottom: 53px;
  position: relative;
  font-size: 14px;
  color: #b3b3b3;
}

.s01-txt-in .s01-number::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: -20px;
  left: 0;
  background-color: #000000;
}

.s01-c:last-child {
  margin-bottom: 48px;
}

#service-01 .mask_anim {
  z-index: 3333;
}

.s01-c:nth-of-type(even) .s01-txt {
  margin-right: -5%;
  margin-left: 0;
}

.s01-c:nth-of-type(even) .s01-txt-in {
  padding: 14.646464646465% 14.646464646465% 14.646464646465% 19.69696969697%;
}

#service-01 a:hover {
  opacity: 0.5;
}

#index-01 {
  margin-top: -20px;
  padding-top: 0;
}

@media (max-width: 767px) {
  #service-01 {
    padding-bottom: 80px;
  }

  #service-01 h2 {
    margin: 0 auto 50px;
    max-width: 90%;
  }

  .s01-c {
    margin-bottom: 30px;
  }

  .s01-img {
    width: 100%;
    padding-top: 75%;
  }

  .s01-txt,
  .s01-c:nth-of-type(even) .s01-txt {
    width: 100%;
    margin: 0;
  }

  .s01-txt-in,
  .s01-c:nth-of-type(even) .s01-txt-in {
    padding: 10% 7% 14%;
  }

  .s01-txt-in .s01-service-desc {
    margin-bottom: 20px;
  }
}

#service-02 {
  padding: 0;
}