@charset "UTF-8";
/*==================================================

** services
==================================================*/
#servicesPoint {
  background: #ebf1f5;
  padding-block: 120px;
}
#servicesPoint .h2 {
  margin-top: 0;
}
#servicesPoint .h2-ptn1 .en {
  font-size: 4.8rem;
  margin-top: 0;
}
#servicesPoint .h2-ptn1 .en .clip1 {
  background: var(--color-gradient-bl-gn1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
#servicesPoint .h2-ptn1 .jp {
  font-size: 1.6rem;
  margin-top: 8px;
}
#servicesPoint .h2-ptn1 + p {
  margin-top: 40px;
}
#servicesPoint .point-image {
  margin: 40px auto 0;
  max-width: 640px;
}
#servicesPoint .point-box {
  margin-top: 40px;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 2.8571428571%;
}
#servicesPoint .point-sec {
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: 8px;
  padding: 24px;
  position: relative;
}
#servicesPoint .point-ttl .h4 {
  color: var(--color-bl1);
  text-align: center;
}
#servicesPoint .point-ttl + p {
  margin-top: 13px;
}
#servicesPoint .point-num {
  background: var(--color-bl1);
  color: #fff;
  font-size: 1.4rem;
  padding: 5px 16px 3px;
  border-radius: 1000px;
  margin-top: 0;
  position: absolute;
  top: 24px;
  left: 24px;
}

#servicesSupport .support-list {
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 40px;
}
#servicesSupport .support-sec {
  border: 1px solid var(--color-lbl1);
  border-radius: 8px;
  padding: 40px 47px 47px 120px;
  overflow: hidden;
  counter-increment: num;
  position: relative;
}
#servicesSupport .support-sec:before {
  content: counter(num, decimal-leading-zero);
  font: normal normal 700 4.8rem/1.2 "Lato", "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  color: var(--color-lbl1);
  letter-spacing: 0.04px;
  line-height: 1;
  position: absolute;
  top: 36px;
  left: 30px;
}
#servicesSupport .support-sec:after {
  content: "";
  background: #ebf1f5;
  height: 120px;
  width: 120px;
  clip-path: polygon(0 0, 100% 0%, 0 100%);
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: -1;
}
#servicesSupport .support-sec .h3 {
  gap: 8px;
  margin-top: 0;
}
#servicesSupport .support-sec .h3 .add {
  display: inline-block;
  vertical-align: 4px;
  margin-left: 8px;
  font-size: 1.2rem;
  background: #dfedf3;
  color: var(--color-lbl1);
  padding: 3px 4px;
  border-radius: 4px;
}
#servicesSupport .support-sec .list-note {
  margin-top: 24px;
}
#servicesSupport .support-sec .list-note li {
  font-size: 1.4rem;
  line-height: 1.5;
}
#servicesSupport .support-dl {
  counter-reset: number 0;
  grid-template-columns: 1fr;
  gap: 24px;
}
#servicesSupport .support-dt {
  font-weight: 700;
  font-size: 1.8rem;
  padding-left: 27px;
  position: relative;
}
#servicesSupport .support-dt:before {
  content: counter(number) ".";
  counter-increment: number 1;
  position: absolute;
  top: 0;
  left: 0;
}
#servicesSupport .support-dd {
  margin-top: 16px;
}

#servicesSystem .system-list {
  gap: 32px 16px;
  margin-top: 40px;
}
#servicesSystem .system-list-li:before {
  content: "";
  display: block;
  background: url(../img/services/ico_handheart.svg) no-repeat center center/contain;
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
}
#servicesSystem .system-list-li.handheart:before {
  background-image: url(../img/services/ico_handheart.svg);
}
#servicesSystem .system-list-li.maintenance:before {
  background-image: url(../img/services/ico_maintenance.svg);
}
#servicesSystem .system-list-li.exchange:before {
  background-image: url(../img/services/ico_exchange.svg);
}
#servicesSystem .system-list-p {
  width: 214px;
  min-height: 66px;
  padding-inline: 16px;
  background: var(--color-lbl1);
  border-radius: 1000px;
}
#servicesSystem .system-list .txt {
  color: #fff;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.5;
}

@media screen and (max-width: 1023px) and (min-width: 768px) {
  #servicesPoint .point-ttl .h4 {
    font-size: min(2.1vw, var(--h4-fs));
  }
}
@media screen and (max-width: 767px) {
  #servicesPoint {
    padding-block: 96px;
  }
  #servicesPoint .h2 {
    margin-top: 0;
  }
  #servicesPoint .h2-ptn1 .en {
    font-size: 4rem;
  }
  #servicesPoint .point-image {
    max-width: 100%;
  }
  #servicesPoint .point-box {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  #servicesPoint .point-sec {
    padding: 24px 6.99%;
  }
  #servicesPoint .point-num {
    top: 24px;
    left: 6.99%;
  }
  #servicesSupport .support-sec {
    padding: 95px 6.7055393586% 47px 6.7055393586%;
  }
  #servicesSupport .support-sec:before {
    top: 23px;
    left: 6.7055393586%;
  }
  #servicesSupport .support-sec:after {
    height: 95px;
    width: 95px;
  }
  #servicesSystem .system-list {
    gap: 40px;
  }
  #servicesSystem .system-list-li {
    width: 100%;
  }
  #servicesSystem .system-list-p {
    width: 81.9%;
    min-height: auto;
    padding: 12px;
    margin: auto;
  }
}