@charset "utf-8";
/********************
点検/リニューアルページ用CSS
  /products/maintenance/
 ********************/

.mainte-introductionWrap {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-block-end: min(5.86vw,80px);
  padding-inline: 60px;
}
@media (width <= 760px) {
  .mainte-introductionWrap {
    padding-inline: 2.67vw;
  }
}

.mainte-introductionWrap_slogan {
  padding-block: min(8.56vw,80px);
  font-size: min(2.56vw,35px);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--txt-black-color);
}
@media (width <= 760px) {
  .mainte-introductionWrap_slogan {
    padding-block: 13.33vw;
    font-size: 7.47vw;
    line-height: 1.64;
  }
}

.mainte-introduction {
  display: grid;
  gap: 0 13.91vw;
  grid-template-columns: min(49.78vw,680px) 1fr;
}
@media (width <= 760px) {
  .mainte-introduction {
    gap: 0;
    grid-template-columns: 100%;
  }
}

.mainte-introduction_txt {
  font-size: min(1.32vw,18px);
  letter-spacing: 0.015em;
  line-height: 1.83;
}
@media (width <= 760px) {
  .mainte-introduction_txt {
    font-size: 4.8vw;
  }
}

.mainte-introduction_img {
  & img {
    width: 100%;
    height: 100%;
  }
}

.mainte-totalWrap {
  margin-block-start: min(3.66vw,50px);
  & ul {
    display: grid;
    gap: 0 min(2.93vw,40px);
    grid-template-columns: repeat(2,1fr);
  }
}
@media (width <= 760px) {
  .mainte-totalWrap {
    margin-block-start: 13.33vw;
    & ul {
      gap: 13.33vw 0;
      grid-template-columns: 100%;
    }
  }
}

.mainte-total_ttl {
  padding-block: min(0.37vw,5px);
  color: #FFF;
  font-size: min(2.05vw,28px);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-align: center;
  [data-mainte="1"] & {
    background-color: #4C9AD3;
  }
  [data-mainte="2"] & {
    background-color: #CB6E80;
  }
}
@media (width <= 760px) {
  .mainte-total_ttl {
    padding-block: 1.33vw;
    font-size: 7.47vw;
  }
}

.mainte-total_img {
  margin-block-start: min(0.37vw,5px);
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .mainte-total_img {
    margin-block-start: 1.33vw;
  }
}

.mainte-total_txt {
  margin-block-start: min(1.83vw,25px);
  font-size: min(1.17vw,16px);
  letter-spacing: 0.015em;
}
@media (width <= 760px) {
  .mainte-total_txt {
    margin-block-start: 6.67vw;
    font-size: 4.27vw;
  }
}

.mainte-features {
  margin-block-start: min(5.12vw,70px);
  & ul {
    display: flex;
    flex-wrap: wrap;
    gap: min(2.56vw,35px);
    justify-content: center;
  }
  & li {
    width: calc((100% - min(5.12vw,70px))/3);
  }
}
@media (width <= 760px) {
  .mainte-features {
    margin-block-start: 13.33vw;
    & ul {
      gap: 5.33vw 0;
    }
    & li {
      width: 100%;
    }
  }
}

.mainte-feature {
  height: 100%;
  padding-block: min(4.83vw,66px) min(3.66vw,50px);
  padding-inline: min(2.93vw,40px);
  border-radius: min(0.44vw,6px);
  background-color: #F4F7F8;
}
@media (width <= 760px) {
  .mainte-feature {
    padding-block: 17.33vw 13.33vw;
    padding-inline: 5.87vw;
    border-radius: 1.6vw;
  }
}

.mainte-feature_img {
  width: min(6.95vw,95px);
  height: auto;
  aspect-ratio: 95/90;
  margin-inline: auto;
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .mainte-feature_img {
    width: 25.33vw;
  }
}

.mainte-feature_ttl {
  margin-block-start: min(1.02vw,17px);
  font-size: min(1.76vw,24px);
  font-weight: 500;
  text-align: center;
  color: var(--txt-black-color);
}
@media (width <= 760px) {
  .mainte-feature_ttl {
    margin-block-start: 4.27vw;
    font-size: 6.4vw;
  }
}

.mainte-feature_txt {
  margin-block-start: min(1.76vw,24px);
  font-size: min(1.17vw,16px);
  letter-spacing: 0.015em;
}
@media (width <= 760px) {
  .mainte-feature_txt {
    margin-block-start: 5.87vw;
    font-size: 4.27vw;
  }
}

.mainte-flowImg {
  width: min(74.96vw,1024px);
  margin-inline: auto;
}
@media (width <= 760px) {
  .mainte-flowImg {
    width: 100%;
  }
}

.mainte-service {
  display: grid;
  gap: 0 min(2.56vw,35px);
  grid-template-columns: min(9.59vw,131px) 1fr;
  & + .mainte-service {
    margin-block-start: min(3.66vw,50px);
  }
}
@media (width <= 760px) {
  .mainte-service {
    gap: 0 5.33vw;
    grid-template-columns: 12vw 1fr;
    & + .mainte-service {
      margin-block-start: 13.33vw;
    }
  }
}

.mainte-service_img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .mainte-service_img {
    margin-block-start: 1.6vw;
  }
}

.mainte-service_contents {
  display: flex;
  flex-direction: column;
  gap: min(0.73vw,10px) 0;
}
@media (width <= 760px) {
  .mainte-service_contents {
    gap: 4vw 0;
  }
}

.mainte-service_ttl {
  border-block-end: 2px solid #F3F3F3;
  font-size: min(2.05vw,28px);
  font-weight: 500;
  [data-mainte="1"] & {
    color: #4C9AD3;
  }
  [data-mainte="2"] & {
    color: #CB6E80;
  }
}
@media (width <= 760px) {
  .mainte-service_ttl  {
    font-size: 7.47vw;
  }
}

.mainte-service_list {
  & ul {
    display: grid;
    gap: min(0.22vw,3px) min(3.66vw,50px);
    grid-template-columns: repeat(4,1fr);
  }
  & li {
    font-size: min(1.46vw,20px);
    font-weight: 500;
    letter-spacing: 0.015em;
  }
}
@media (width <= 760px) {
  .mainte-service_list {
    & ul {
      gap: 1.33vw 0;
      grid-template-columns: 100%;
    }
    & li {
      font-size: 4.26vw;
    }
  }
}

.mainte-pdfLinkBtnWrap {
  margin-block-start: min(1.1vw,15px);
  & ul {
    display: grid;
    gap: min(1.46vw,20px);
    grid-template-columns: repeat(2,1fr);
  }
}
@media (width <= 760px) {
  .mainte-pdfLinkBtnWrap {
    margin-block-start: 4vw;
    & ul {
      gap: 4vw 0;
      grid-template-columns: 100%;
    }
  }
}

.mainte-pdfLinkBtn {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding-block: min(0.88vw,12px);
  padding-inline: min(1.1vw,15px) min(3.66vw,50px);
  border-radius: 4px;
  background-color: #F4F7F8;
  font-size: min(1.17vw,16px);
  font-weight: 500;
  letter-spacing: 0.015em;
  transition: color 0.3s ease-out;
  &::after {
    position: absolute;
    top: 50%;
    right: min(0.73vw,10px);
    translate: 0 -50%;
    display: block;
    width: min(2.2vw,30px);
    height: auto;
    aspect-ratio: 1;
    background: url(../img/common/icn_link_pdf.svg) no-repeat center/cover;
    content: "";
  }
  &._changeLink {
    &::before, &::after {
      position: absolute;
      top: 50%;
      right: min(0.73vw, 10px);
      translate: 0 -50%;
      display: block;
      width: min(1.76vw, 24px);
      height: auto;
      aspect-ratio: 1;
      content: "";
    }
    &::before {
      border-radius: 50%;
      background-color: #2B4E76;
      transition: background 0.3s ease-out;
    }
    &::after {
      background: none;
      background-color: #FFF;
      mask: url(/cms/wp-content/themes/ndc/assets/img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
      transition: background 0.3s ease-out, mask 0.3s ease-out;
    }
    &:hover {
      &::before {
        background-color: var(--hover-color);
      }
      &::after {
        mask-position: 0 0;
      }
    }
  }
}
@media (width <= 760px) {
  .mainte-pdfLinkBtn {
    padding-block: 3.2vw;
    padding-inline: 3.73vw 16vw;
    border-radius: 1.07vw;
    font-size: 4.27vw;
    &::after {
      right: 2.67vw;
      width: 8vw;
    }
    &._changeLink {
      &::before, &::after {
      right: 2.67vw;
      width: 6.4vw;
      }
    }
  }
}
@media (hover: hover) {
  .mainte-pdfLinkBtn:hover {
    color: var(--hover-color);
  }
}

.mainte-relatedBox_link {
  position: relative;
  display: inline-block;
  margin-block-start: min(1.1vw,15px);
  color: #2B4E76;
  font-size: min(1.17vw,16px);
  font-weight: 500;
  letter-spacing: 0.015em;
  &[target="_blank"]::after {
    display: inline-block;
    width: min(1.32vw,18px);
    height: auto;
    aspect-ratio: 1;
    background-color: #2B4E76;
    mask: url(/cms/wp-content/themes/ndc/assets/img/know/icn_link_blank.svg) no-repeat center/contain;
    content: "";
  }
}
@media (width <= 760px) {
  .mainte-relatedBox_link {
    margin-block-start: 4vw;
    font-size: 4.27vw;
    &[target="_blank"]::after {
      width: 4.8vw;
    }
  }
}
@media (hover: hover) {
  .mainte-relatedBox_link:hover {
    text-decoration: underline;
  }
}

.mainte-contactBox {
  display: grid;
  gap: 0 min(1.46vw,20px);
  grid-template-columns: repeat(2,1fr);
  margin-block-start: min(3.66vw,50px);
}
@media (width <= 760px) {
  .mainte-contactBox {
    gap: 4vw 0;
    grid-template-columns: 100%;
    margin-block-start: 13.33vw;
  }
}

.mainte-fz18 {
  font-size: min(1.32vw,18px);
}
@media (width <= 760px) {
  .mainte-fz18 {
    font-size: 4.8vw;
  }
}