@charset "UTF-8";
/* -------------------------------------
カラー
------------------------------------- */
.intro-ttl {
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: #184675;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .intro-ttl {
    font-size: 2rem;
  }
}

.intro-txt {
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-align: center;
  color: #000;
  margin-top: calc((1em - 1lh) / 2 + 4.6rem);
}
@supports not (top: 1lh) {
  .intro-txt {
    margin-top: 4.6rem;
  }
}
@media screen and (max-width: 768px) {
  .intro-txt {
    font-size: 1.6rem;
  }
}

.intro-inner {
  padding-block: 8.3rem 9.8rem;
}

/* サービス */
.es_inner {
  padding-block: 6rem;
}

.es-intro_inner {
  width: min(107.1rem, 100% - 4rem);
  margin-inline: auto;
  padding-right: 4rem;
}
@media screen and (max-width: 768px) {
  .es-intro_inner {
    padding-right: 0;
    width: 100%;
  }
}

.es-intro {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .es-intro {
    flex-direction: column;
  }
}

@media screen and (max-width: 768px) {
  .service_ttl .--main {
    font-size: 4.4rem;
  }
}

.service_imgArea {
  width: 40rem;
}
@media screen and (max-width: 768px) {
  .service_imgArea {
    width: 100%;
  }
}

.service-list {
  display: flex;
  gap: 0.45rem;
}
@media screen and (max-width: 768px) {
  .service-list {
    position: absolute;
    left: 50%;
    translate: -50%;
  }
}
.service-list > li {
  width: 13rem;
  height: 13rem;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .service-list > li {
    width: 11.6rem;
    height: 11.6rem;
  }
}
.service-list > li:nth-child(odd) {
  margin-top: 4.5rem;
}

.service-list_img {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.service-list_img.--air {
  width: 7.1rem;
  height: 2.9rem;
  translate: -46% -100%;
}
@media screen and (max-width: 768px) {
  .service-list_img.--air {
    width: 6.1rem;
    height: 2.5rem;
    translate: -50% -100%;
  }
}
.service-list_img.--elect {
  width: 6.8rem;
  height: 4.5rem;
  translate: -46% -80%;
}
.service-list_img.--eco {
  width: 7.1rem;
  height: 6.4rem;
  translate: -50% -69%;
}
@media screen and (max-width: 768px) {
  .service-list_img.--eco {
    width: 5.1rem;
    height: 4.9rem;
  }
}

.service-list_text {
  position: absolute;
  bottom: 2.4rem;
  left: 50%;
  translate: -50%;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .service-list_text {
    font-size: 1.34rem;
  }
}

.service_foxx {
  width: 29rem;
  height: 29rem;
  margin-top: 2rem;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .service_foxx {
    width: 19rem;
    height: 19rem;
    margin-top: 16rem;
    translate: 0.5rem;
  }
}

.es_cnt {
  padding-block: 7rem 8.8rem;
}

.es-textArea {
  width: 45.4rem;
  padding-top: 3.7rem;
}
@media screen and (max-width: 768px) {
  .es-textArea {
    width: 100%;
  }
}

.es-text {
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.03em;
}

.es-topic {
  margin-top: 4rem;
  background-color: rgba(21, 34, 49, 0.5);
  padding: 2.4rem 3rem;
  border-radius: 1rem;
}
@media screen and (max-width: 768px) {
  .es-topic {
    border-radius: 0.5rem;
  }
}
.es-topic .--ttl {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: #DB7814;
}
.es-topic .--text {
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.03em;
  margin-top: calc((1em - 1lh) / 2 + 1rem);
}
@supports not (top: 1lh) {
  .es-topic .--text {
    margin-top: 1rem;
  }
}

.es-list_block {
  width: min(99rem, 100% - 4rem);
  margin-inline: auto;
  padding-top: 13.5rem;
}

.es-list {
  display: grid;
  grid-template-columns: repeat(2, 45.4rem);
  justify-content: space-between;
  row-gap: 7.2rem;
}
@media screen and (max-width: 768px) {
  .es-list {
    grid-template-columns: 1fr;
    row-gap: 10.2rem;
  }
}
.es-list > li {
  position: relative;
}
.es-list > li:nth-child(even) {
  margin-top: 10.2rem;
}
@media screen and (max-width: 768px) {
  .es-list > li:nth-child(even) {
    margin-top: 0;
  }
}
.es-list .--num {
  position: absolute;
  top: -5.7rem;
  left: -3.4rem;
  z-index: 1;
  font-weight: 700;
  font-size: 10rem;
  line-height: 1;
  color: #DB7814;
  margin-block: var(--leading-trim);
}
@media screen and (max-width: 768px) {
  .es-list .--num {
    left: -2rem;
  }
}
.es-list .--ttl {
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1.7;
  letter-spacing: 0.03em;
  padding-inline: 0.8rem;
  margin-top: calc((1em - 1lh) / 2 + 2.7rem);
}
@supports not (top: 1lh) {
  .es-list .--ttl {
    margin-top: 2.7rem;
  }
}
.es-list .--text {
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.03em;
  padding-inline: 0.8rem;
  margin-top: calc((1em - 1lh) / 2 + 1.9rem);
}
@supports not (top: 1lh) {
  .es-list .--text {
    margin-top: 1.9rem;
  }
}

.es-list_img {
  width: 100%;
  height: auto;
  aspect-ratio: 454/302;
  border-radius: 1rem;
}
@media screen and (max-width: 768px) {
  .es-list_img {
    border-radius: 0.5rem;
  }
}
.es-list_img img {
  display: block;
  border-radius: inherit;
}

.es .l-bg_blue {
  -webkit-mask-image: url(../img/service/es_bg_mask.svg);
          mask-image: url(../img/service/es_bg_mask.svg);
}
@media screen and (max-width: 768px) {
  .es .l-bg_blue {
    -webkit-mask-image: url(../img/service/es_bg_mask_sp.svg);
            mask-image: url(../img/service/es_bg_mask_sp.svg);
  }
}

.es-btn {
  display: flex;
  justify-content: center;
  margin-top: 8.4rem;
}

.service_contact {
  padding-top: 9.6rem;
}