@import url(./global/_variable.css);

/* service */
/* ============================================ */

/* service-hero */
/* ============================================ */
.service-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(6.875rem, 4.7635rem + 5.4054vw, 8.75rem); /* 140~110(1920~896) */
  padding-bottom: clamp(2.5rem, 3.24vw + 1.741rem, 5.625rem);  /* 90~40 */
  z-index: 10;
  @media (width <= 896px) {
    padding-top: 20px;
  }
}
.service-hero__deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #E3EDFC 0%, rgba(227,237,252,0) 72%);
}
.service-hero__deco--a {
  top: -18%;
  right: -12%;
  width: 56vw;
  aspect-ratio: 1 / 1;
  max-width: 1080px;
}
.service-hero__deco--b {
  top: 8%;
  right: 6%;
  width: 32vw;
  aspect-ratio: 1 / 1;
  max-width: 640px;
  opacity: .8;
}
.service-hero__inner {
  position: relative;
  z-index: 1;
  width: calc(100% - 8vw);
  max-width: 1540px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  min-height: 31.25vw; /* 600/1920 */
  @media (width <= 1025px) {
    display: block;
    min-height: 0;
  }
}
.service-hero__text {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 1.68vw + 1.106rem, 3.125rem); /* 51~36(1340~896) */
  max-width: 750px;
  @media (width <= 1025px) {
    max-width: 100%;
    text-align: center;
    margin-inline: auto;
  }
}
.service-hero__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-hero__label {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.625rem, 0.1115rem + 2.7027vw, 2.375rem); /* 38~26(1340~896) */
  font-weight: 700;
  line-height: 1.6;
  color: var(--main_c);
}
.service-hero__ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.75rem, 1.68vw + 1.356rem, 3.375rem); /* 28-54 */
  font-weight: 700;
  line-height: 1.5;
  color: var(--font_c);
  word-break: keep-all;
}
.service-hero__body {
  display: flex;
  flex-direction: column;
  gap: 30px;
  @media (width <= 896px) {
    gap: 20px;
  }
}
.service-hero__subttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.25rem, -0.0113rem + 2.2523vw, 1.875rem); /* 30~20(1340~896) */
  font-weight: 700;
  line-height: 1.5;
  color: var(--font_c);
  word-break: keep-all;
}
.service-hero__lead {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(0.875rem, 0.6227rem + 0.4505vw, 1rem); /* 16~14(1340~896) */
  font-weight: 500;
  line-height: 2;
  color: var(--font_c);
  word-break: keep-all;
}
.service-hero__visual {
  position: absolute;
  z-index: 0;
  top: 7vw; /* 151/1920 */
  right: 0;
  width: 48.85vw; /* 938/1920 */
  pointer-events: none;
  overflow: hidden;
  @media (width <= 1025px) {
    position: static;
    width: 100%;
    max-width: 480px;
    margin: 40px auto 0;
  }
}
.service-hero__visual-inner {
  position: relative;
  margin-right: -5vw;
}
.service-hero__visual-img {
  display: block;
  width: 100%;
  height: auto;
}
.service-hero__cta {
  position: absolute;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding-inline: 8vw;
  top: -40px;
  z-index: 20;
  @media (width <= 480px) {
    flex-direction: column;
    gap: 16px;
    margin-top: 30px;
    position: relative;
  }
}
.service-hero__cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 0 0;
  width: 100%;
  padding: 24px 32px;
  border-radius: 999px;
  > img {
    flex-shrink: 0;
  }
  > span {
    font-family: 'Zen Kaku Gothic New', var(--font_normal);
    font-size: clamp(1.125rem, 0.3682rem + 1.3514vw, 1.5rem); /* 24~18(1340~896) */
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
  }
}
.service-hero__cta-btn--download {
  background: var(--point_c);
  box-shadow: 0 0 7.379px #F15252;
  &:hover {
    @media (hover: hover) {
      background: var(--dark_c);
      opacity: 1;
      box-shadow: 0 0 7.379px var(--dark_c);
    }
  }
}
.service-hero__cta-btn--contact {
  background: var(--main_c);
  box-shadow: 0 0 7.379px rgba(6, 54, 153, 0.4);
  &:hover {
    @media (hover: hover) {
      background: var(--dark_c);
      opacity: 1;
      box-shadow: 0 0 7.379px var(--dark_c);
    }
  }
}

/* service-feature */
/* ============================================ */
.service-feature {
  padding-block: clamp(3.75rem, 2.6295rem + 2.9279vw, 5.625rem); /* 90~60(1920~896) */
  background-color: #FFF;
  border-radius: 50px 50px 0 0;
  position: relative;
  @media (width <= 896px) {
    padding-block: 60px;
  }
}
.service-feature__inner {
  max-width: 1340px;
  margin-inline: auto;
  padding-inline: 20px;
}
.service-feature__ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.625rem, -0.1408rem + 3.1532vw, 2.5rem); /* 40~26(1340~896) */
  font-weight: 500;
  line-height: 1.6;
  color: var(--font_c);
  text-align: center;
  word-break: keep-all;
}
.service-feature__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 33px;
  margin-top: 50px;
  container-type: inline-size;
  @media (width <= 1025px) {
    grid-template-columns: repeat(2, 1fr);
  }
  @media (width <= 600px) {
    grid-template-columns: 1fr;
    margin-top: 32px;
    gap: 24px;
  }
}
.service-feature__item-img {
  display: block;
  width: 100%;
  aspect-ratio: 544 / 412;
  object-fit: cover;
  border-radius: 20px;
}
.service-feature__item-ttl {
  margin-top: 25px;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.125rem, 0.3682rem + 1.3514vw, 1.5rem); /* 24~18(1340~896) */
  font-weight: 500;
  letter-spacing: .075em;
  color: var(--main_c);
  text-align: center;
  word-break: keep-all;
}
.service-feature__item-txt {
  margin-top: 20px;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(0.875rem, 0.6227rem + 0.4505vw, 1rem); /* 16~14(1340~896) */
  line-height: 2.1;
  color: var(--font_c);
  text-align: justify;
}

/* service-links */
/* ============================================ */
.service-links {
  background: var(--bg01_c);
  padding-block: clamp(3.75rem, 2.6295rem + 2.9279vw, 5.625rem); /* 90~60(1920~896) */
  @media (width <= 896px) {
    padding-block: 60px;
  }
}
.service-links__inner {
  max-width: 1340px;
  margin-inline: auto;
  padding-inline: 20px;
}
.service-links__ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.625rem, -0.1408rem + 3.1532vw, 2.5rem); /* 40~26(1340~896) */
  font-weight: 500;
  line-height: 1.6;
  color: var(--font_c);
  text-align: center;
  word-break: keep-all;
}
.service-links__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 50px;
  @media (width <= 1025px) {
    grid-template-columns: repeat(2, 1fr);
  }
  @media (width <= 600px) {
    grid-template-columns: 1fr;
    margin-top: 32px;
    gap: 20px;
  }
}
.service-links__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  padding: 30px 30px 35px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .05);
}
.service-links__item-icon {
  position: relative;
  width: 80px;
  height: 80px;
}
.service-links__item-icon-bg {
  display: block;
  width: 100%;
  height: 100%;
}
.service-links__item-icon-fg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
}
.service-links__item-ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.125rem, 0.3682rem + 1.3514vw, 1.5rem); /* 24~18(1340~896) */
  font-weight: 500;
  color: var(--font_c);
  text-align: center;
  word-break: keep-all;
}
.service-links__item-txt {
  margin-top: -15px;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(0.875rem, 0.6227rem + 0.4505vw, 1rem); /* 16~14(1340~896) */
  color: var(--font_c);
  text-align: center;
  word-break: keep-all;
}
.service-links__item-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 16px 28px;
  background: var(--main_c);
  border-radius: 999px;
  > span {
    font-family: 'Zen Kaku Gothic New', var(--font_normal);
    font-size: clamp(0.875rem, 0.6227rem + 0.4505vw, 1.125rem); /* 18~14(1340~896) */
    font-weight: 700;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
  }
  &:hover {
    @media (hover: hover) {
      opacity: .7;
    }
  }
}
.service-links__item-btn-arrow {
  transform: scaleX(-1);
}

/* service-clients */
/* ============================================ */
.service-clients {
  padding-block: clamp(3.75rem, 2.6295rem + 2.9279vw, 5.625rem); /* 90~60(1920~896) */
  @media (width <= 896px) {
    padding-block: 60px;
  }
}
.service-clients__inner {
  max-width: 1340px;
  margin-inline: auto;
  padding-inline: 20px;
}
.service-clients__badge {
  display: block;
  width: fit-content;
  margin-inline: auto;
  padding: 10px 40px;
  background: #E0ECFF;
  border-radius: 40px;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.125rem, -0.1363rem + 2.2523vw, 1.75rem); /* 28~18(1340~896) */
  font-weight: 500;
  line-height: 1.6;
  color: var(--main_c);
  text-align: center;
  word-break: keep-all;
}
.service-clients__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, -0.4239rem + 5.9459vw, 3.75rem); /* 60~20(1340~896) */
  margin-top: 36px;
  @media (width <= 896px) {
    gap: 24px;
    margin-top: 24px;
  }
}
.service-clients__stats-item {
  display: flex;
  align-items: center;
  gap: 15px;
}
.service-clients__stats-label {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.125rem, 0.1160rem + 1.8018vw, 1.625rem); /* 26~18(1340~896) */
  font-weight: 500;
  line-height: 1.4;
  color: var(--main_c);
  text-align: center;
}
.service-clients__stats-num {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  font-family: 'Inter', var(--font_normal);
  font-size: clamp(2.75rem, -2.0428rem + 8.5586vw, 5.125rem); /* 82~44(1340~896) */
  font-weight: 500;
  line-height: 1;
  color: var(--font_c);
}
.service-clients__stats-unit {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.375rem, -0.3908rem + 3.1532vw, 2.25rem); /* 36~22(1340~896) */
  font-weight: 700;
  line-height: 1.7;
}
.service-clients__note {
  margin-top: 12px;
  text-align: center;
  font-size: clamp(0.6875rem, 0.5398rem + 0.2254vw, 0.75rem); /* 12~11(1340~896) */
  line-height: 1.6;
  color: #767676;
}
.service-clients__logos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2.6cqw;
  margin-top: 55px;
  container-type: inline-size;
  @media (width <= 896px) {
    margin-top: 32px;
    grid-template-columns: repeat(3, 1fr);
  }
  @media (width <= 480px) {
    margin-top: 20px;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
.service-clients__logos-item {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.kome_sup {
  position: relative;
  &::after {
    content: "※1 ※2";
    font-size: clamp(0.563rem, 0.21vw + 0.514rem, 0.688rem);
    line-height: 1em;
    position: absolute;
    top: 0px;
    right: 0px;
  }
}