/* ==========================================================================
  ROUTETRUST Theme - Service Page Styles
========================================================================== */

/* サービスページ：各事業アイテム
========================================================================== */
.service__item {
  padding: 6rem 2rem 3rem;
}

.service__item__container {
  position: relative;
  max-width: 112rem;
  margin: auto;
  padding-top: 10rem;
  scroll-margin-top: 5rem;
}

.service__item__container .service__item__title {
  position: absolute;
  top: 6rem;
  left: -16rem;
  color: #fff;
  font-size: 2.8rem;
  font-weight: bold;
  width: 36rem;
  height: 20rem;
  padding: 2.8rem;
  margin-bottom: 3rem;
  line-height: 1.4;
  text-align: right;
  align-content: center;
  z-index: 2;
  clip-path: inset(0 100% 0 0);
}

.service__item__container:nth-of-type(even) .service__item__title {
  background: #4a4a4a;
}

.service__item__container:nth-of-type(odd) .service__item__title {
  background: var(--primary-color);
}

.service__item__container .service__item__text {
  color: #fff;
  background-size: cover;
  padding: 0 24rem;
  width: 100%;
  height: 28rem;
  align-content: center;
  clip-path: inset(0 100% 0 0);
}

.service__item__container:nth-of-type(1) .service__item__text {
  background-image: url(../images/service/service_detail01_pc.jpg);
}

.service__item__container:nth-of-type(2) .service__item__text {
  background-image: url(../images/service/service_detail02_pc.jpg);
}

.service__item__container:nth-of-type(3) .service__item__text {
  background-image: url(../images/service/service_detail03_pc.jpg);
}

.service__item__container:nth-of-type(4) .service__item__text {
  background-image: url(../images/service/service_detail04_pc.jpg);
}

.service__item__container.active .service__item__title {
  animation: slideLeft .3s ease-in-out both;
}

.service__item__container.active .service__item__text {
  animation: slideLeft .6s ease-in-out both;
}

@keyframes slideLeft {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0);
  }
}

@media (max-width: 768px) {
  .service__item {
    padding: 4rem 4rem 6rem;
  }

  .service__item__container .service__item__title {
    font-size: 4.2rem;
    top: 8rem;
    left: -4rem;
    margin-bottom: 2rem;
  }

  .service__item__container .service__item__text {
    padding: 0 3rem;
    height: 58rem;
    align-content: baseline;
    padding-top: 18rem;
  }

  .service__item__container {
    padding-top: 12rem;
  }

  .service__item__container:nth-of-type(1) .service__item__text {
    background-image: url(../images/service/service_detail01_sp.jpg);
  }

  .service__item__container:nth-of-type(2) .service__item__text {
    background-image: url(../images/service/service_detail02_sp.jpg);
  }

  .service__item__container:nth-of-type(3) .service__item__text {
    background-image: url(../images/service/service_detail03_sp.jpg);
  }

  .service__item__container:nth-of-type(4) .service__item__text {
    background-image: url(../images/service/service_detail04_sp.jpg);
  }
}