@charset "utf-8";
.service.page {
  padding-block: 60px 160px;
}

@media screen and (min-width: 768px) {
  .service.page {
    padding-block: 120px 160px;
  }
}

.service {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.service::before {
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 1366/2064;
  top: 50%;
  transform: translateY(-50%);
  left: -63%;
  width: auto;
  height: 80%;
  background: url(../images/service-bg02.svg) no-repeat center center/contain;
}

@media screen and (min-width: 600px) {
  .service::before {
    left: -28%;
  }
}

@media screen and (min-width: 1000px) {
  .service::before {
    width: 100%;
    height: auto;
    left: 0;
  }
}

.service__container {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .service__inner.l-inner {
    padding-inline: 40px;
    max-width: calc(1060px + 40px * 2);
  }
}

@media screen and (min-width: 1920px) {
  .service__container {
    padding-top: 120px;
  }
}

.service__waterproofing {
  padding-top: 60px;
}

.service__floorcoating {
  padding-top: 134px;
}

@media screen and (min-width: 768px) {
  .service__floorcoating {
    padding-top: 193px;
  }
}

.service__box {
  padding-top: 80px;
  width: 100%;
  position: relative;
  padding-bottom: 85px;
  border-bottom: 1px solid #d5d5c3;
}

.service__box::after {
  content: "";
  position: absolute;
  top: -10px;
  right: 2.5%;
  aspect-ratio: 160/141;
  width: clamp(60px, 11.72vw, 160px);
  height: auto;
  background: url(../images/numbar01.svg) no-repeat center center/contain;
}

.service__floorcoating .service__box::after {
  content: "";
  position: absolute;
  top: -10px;
  right: 2.5%;
  aspect-ratio: 209/141;
  width: clamp(80px, 15.31vw, 209px);
  height: auto;
  background: url(../images/numbar02.svg) no-repeat center center/contain;
}

@media screen and (min-width: 500px) {
  .service__box {
    padding-top: 0;
  }

  .service__box::after,
  .service__floorcoating .service__box::after {
    top: 7px;
  }
}

.service__section-title {
  display: flex;
  gap: 30px;
  align-items: center;
  margin-left: -1%;
}

.service__box-head-text {
  margin-top: 28px;
  font-size: clamp(20px, 2.05vw, 28px);
  font-weight: 700;
  letter-spacing: calc(50 / 1000 * 1em);
  line-height: calc(47 / 28);
}

@media screen and (min-width: 500px) {
  .service__box-head-text {
    margin-top: 51px;
    margin-left: clamp(25px, 5.79vw, 68px);
  }
}

.service__box-text {
  margin-top: 35px;
  max-width: 467px;
  margin-inline: auto;
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 500;
  line-height: calc(30 / 15);
}

@media screen and (min-width: 500px) {
  .service__box-text {
    margin-top: 38px;
    margin-inline: auto clamp(25px, 4.62vw, 63px);
  }
}

.service__contents {
  padding-top: 60px;
}

.service__contents .title__en {
  margin-left: -1%;
}

.service__contents-title {
  margin-top: 5px;
  font-size: clamp(20px, 1.91vw, 26px);
  font-weight: 600;
  letter-spacing: calc(50 / 1000 * 1em);
}

.service__contents-list {
  margin-top: 27px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  place-items: center;
  gap: 20px;
}

@media screen and (min-width: 768px) {
  .service__contents-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 1200px) {
  .service__contents-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.service__contents-item {
  width: 100%;
  padding-inline: 20px;
  max-width: 250px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8e7e1;
  border-radius: 5px;
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 500;
}

.service__slider {
  margin-top: 110px;
}

@media screen and (min-width: 768px) {
  .service__slider {
    margin-top: 180px;
  }
}

.service__swiper-wrapper {
  transition-timing-function: linear;
}

.service__swiper-slide {
  width: auto;
  height: clamp(100px, 32.95vw, 450px);
  aspect-ratio: 530/450;
  border-radius: 10px;
  overflow: hidden;
}

.service__swiper-slide-image {
  width: auto;
  height: 100%;
}

.service__swiper-slide-image img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 768px) {
  #waterproofing,
  #floorcoating {
    scroll-margin-top: 222px; /* 92px(header) + 120px(page padding) + 10px(余白) */
  }
}