/* =====================================================================
   SERVICE（XD: PC 1920 / SP 430 原寸再現）
   ===================================================================== */

/* ---------- OVERVIEW ---------- */
.custom-srv-overview-label {
  margin-top: 12rem;
  text-align: center;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: var(--ls-129);
  color: var(--color-primary);
}
.custom-srv-overview-text {
  margin-top: 2.2rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 4.2rem;
  letter-spacing: var(--ls-129);
  color: #000;
}
@media (max-width: 767px) {
  .custom-srv-overview { position: relative; height: 34rem; }
  .custom-srv-overview-label { position: absolute; left: 0; right: 0; top: 7rem; margin: 0; font-size: 2.1rem; }
  .custom-srv-overview-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 35rem;
    top: 13.6rem;
    margin: 0;
    font-size: 1.4rem;
    line-height: 3.4rem;
  }
}

/* ---------- サービスカード ---------- */
.custom-srv-card {
  position: relative;
  width: 135rem;
  margin-inline: auto;
  background: #fff;
  border-radius: 3.8rem;
  height: 73.9rem;
}
.custom-srv-card.is-s1 { margin-top: 8.1rem; }
.custom-srv-card.is-s2 { margin-top: 4.3rem; }
.custom-srv-card.is-s3 { margin-top: 3.5rem; }
.custom-srv-card-inner { position: relative; height: 100%; }

.custom-srv-title {
  position: absolute;
  left: 7.9rem;
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1;
  letter-spacing: var(--ls-129);
  color: var(--color-blue);
}
.custom-srv-en {
  position: absolute;
  left: 7.9rem;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 2rem;
  line-height: 3.2rem;
  letter-spacing: var(--ls-129);
  color: var(--color-primary);
}
.custom-srv-desc {
  position: absolute;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 3.2rem;
  letter-spacing: var(--ls-129);
  color: #000;
}
.is-s1 .custom-srv-title { top: 4.8rem; }
.is-s1 .custom-srv-en    { top: 9.1rem; }
.is-s1 .custom-srv-desc  { left: 42.3rem; top: 5.6rem; width: 65.2rem; }
.is-s2 .custom-srv-title { top: 4.1rem; }
.is-s2 .custom-srv-en    { top: 8.4rem; }
.is-s2 .custom-srv-desc  { left: 45.9rem; top: 5.1rem; width: 72.8rem; }
.is-s3 .custom-srv-title { top: 4.4rem; }
.is-s3 .custom-srv-en    { top: 8.7rem; }
.is-s3 .custom-srv-desc  { left: 31.5rem; top: 5.1rem; width: 98.1rem; }

.custom-srv-divider {
  position: absolute;
  left: 2.74rem;
  right: 2.74rem;
  border-top: 1px solid var(--color-primary);
}
.is-s1 .custom-srv-divider { top: 15.9rem; }
.is-s2 .custom-srv-divider { top: 15.2rem; }
.is-s3 .custom-srv-divider { top: 15.5rem; }

/* 技術スタックグループ */
.custom-srv-group {
  position: absolute;
  left: 7.9rem;
  width: 60rem;
}
.is-s1 .custom-srv-group.is-g1 { top: 17.8rem; }
.is-s1 .custom-srv-group.is-g2 { top: 36rem; }
.is-s1 .custom-srv-group.is-g3 { top: 54.2rem; }
.is-s2 .custom-srv-group.is-g1 { top: 17.3rem; }
.is-s2 .custom-srv-group.is-g2 { top: 35.5rem; }
.is-s2 .custom-srv-group.is-g3 { top: 53.7rem; }
.is-s3 .custom-srv-group.is-g1 { top: 17.6rem; }
.is-s3 .custom-srv-group.is-g2 { top: 36.5rem; }
.is-s3 .custom-srv-group.is-g3 { top: 54rem; }

.custom-srv-group-label {
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.8rem;
  letter-spacing: var(--ls-129);
  color: var(--color-blue);
}
.custom-srv-group .custom-srv-logos {
  margin-top: 1.46rem;
  display: grid;
  grid-template-columns: repeat(5, 9.7rem);
  gap: 2.1rem;
}
.custom-srv-logos li {
  width: 9.7rem;
  height: 7.1rem;
  display: grid;
  place-items: center;
}
.custom-srv-logos img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.custom-srv-group .custom-srv-names {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: repeat(5, 9.7rem);
  gap: 2.1rem;
}
.custom-srv-names li {
  text-align: center;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.1rem;
  letter-spacing: var(--ls-50);
  color: #000;
}

.custom-srv-illust { position: absolute; max-width: none; }
.is-s1 .custom-srv-illust { left: 77.4rem; top: 29rem;   width: 48.4rem; }
.is-s2 .custom-srv-illust { left: 75.5rem; top: 26rem;   width: 52.7rem; }
.is-s3 .custom-srv-illust { left: 71.7rem; top: 26.5rem; width: 55.8rem; }

@media (max-width: 767px) {
  .custom-srv-card {
    width: 100%;
    border-radius: 0;
  }
  .custom-srv-card.is-s1 { margin-top: 0; height: 93.3rem; }
  .custom-srv-card.is-s2 { margin-top: 8.2rem; height: 98.9rem; }
  .custom-srv-card.is-s3 { margin-top: 7rem; height: 99.6rem; }
  .custom-srv-card-inner { width: 35rem; margin-inline: auto; position: relative; height: 100%; }

  .custom-srv-title { left: 0; font-size: 2rem; }
  .custom-srv-en { left: 0; font-size: 1.6rem; }
  .custom-srv-desc { left: 0 !important; width: 35rem !important; font-size: 1.4rem; line-height: 2.6rem; }
  .is-s1 .custom-srv-title { top: 3.3rem; }
  .is-s1 .custom-srv-en    { top: 7.5rem; }
  .is-s1 .custom-srv-desc  { top: 12.3rem; }
  .is-s2 .custom-srv-title { top: 3.3rem; }
  .is-s2 .custom-srv-en    { top: 7.5rem; }
  .is-s2 .custom-srv-desc  { top: 11.5rem; }
  .is-s3 .custom-srv-title { top: 4.2rem; }
  .is-s3 .custom-srv-en    { top: 8.5rem; }
  .is-s3 .custom-srv-desc  { top: 12.7rem; }

  .custom-srv-divider { left: 0; right: 0.1rem; }
  .is-s1 .custom-srv-divider { top: 25.5rem; }
  .is-s2 .custom-srv-divider { top: 27.8rem; }
  .is-s3 .custom-srv-divider { top: 29.4rem; }

  .custom-srv-group { left: 0; width: 35rem; }
  .is-s1 .custom-srv-group.is-g1 { top: 28.4rem; }
  .is-s1 .custom-srv-group.is-g2 { top: 39.7rem; }
  .is-s1 .custom-srv-group.is-g3 { top: 50.6rem; }
  .is-s2 .custom-srv-group.is-g1 { top: 31.1rem; }
  .is-s2 .custom-srv-group.is-g2 { top: 42.3rem; }
  .is-s2 .custom-srv-group.is-g3 { top: 53.5rem; }
  .is-s3 .custom-srv-group.is-g1 { top: 32.4rem; }
  .is-s3 .custom-srv-group.is-g2 { top: 44rem; }
  .is-s3 .custom-srv-group.is-g3 { top: 54.8rem; }

  .custom-srv-group-label { font-size: 1.4rem; line-height: 1.4rem; }
  .custom-srv-group .custom-srv-logos {
    margin-top: 1.5rem;
    grid-template-columns: repeat(5, 5.9rem);
    gap: 1.35rem;
  }
  .custom-srv-logos li { width: 5.9rem; height: 4.4rem; }
  .custom-srv-group .custom-srv-names {
    margin-top: 1.2rem;
    grid-template-columns: repeat(5, 5.9rem);
    gap: 1.35rem;
  }
  .custom-srv-names li { font-size: 0.9rem; line-height: 1.2rem; }

  .is-s1 .custom-srv-illust { left: 0;      top: 62.9rem; width: 36.8rem; }
  .is-s2 .custom-srv-illust { left: 0;      top: 68.8rem; width: 36.3rem; }
  .is-s3 .custom-srv-illust { left: -1.5rem; top: 69.9rem; width: 38.1rem; }
}

/* ---------- FLOW ---------- */
.custom-flow-label {
  margin-top: 10.2rem;
  text-align: center;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: var(--ls-129);
  color: var(--color-primary);
}
.custom-flow-heading {
  margin-top: 3.6rem;
  text-align: center;
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: var(--ls-129);
  color: var(--color-blue);
}
.custom-flow .custom-flow-card {
  position: relative;
  margin-top: 5.8rem;
  height: 63.7rem;
  background: #fff;
  border-radius: 3.8rem;
}
.custom-flow-item { position: static; }
.custom-flow-icon { position: absolute; }
.is-f1 .custom-flow-icon { left: 18.8rem; top: 9.1rem;  width: 4.07rem; }
.is-f2 .custom-flow-icon { left: 18.3rem; top: 15.9rem; width: 5.04rem; }
.is-f3 .custom-flow-icon { left: 19.1rem; top: 24.3rem; width: 3.33rem; }
.is-f4 .custom-flow-icon { left: 18.4rem; top: 32rem;   width: 4.89rem; }
.is-f5 .custom-flow-icon { left: 18.1rem; top: 40.4rem; width: 4.82rem; }
.is-f6 .custom-flow-icon { left: 18rem;   top: 47.8rem; width: 5.61rem; }
.custom-flow-title {
  position: absolute;
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.8rem;
  letter-spacing: var(--ls-129);
  color: var(--color-blue);
}
.is-f1 .custom-flow-title { left: 24.7rem; top: 9.7rem; }
.is-f2 .custom-flow-title { left: 27rem;   top: 17.5rem; }
.is-f3 .custom-flow-title { left: 27rem;   top: 25.3rem; }
.is-f4 .custom-flow-title { left: 25.8rem; top: 33.1rem; }
.is-f5 .custom-flow-title { left: 27rem;   top: 41.5rem; }
.is-f6 .custom-flow-title { left: 24.7rem; top: 49.3rem; }
.custom-flow-text {
  position: absolute;
  left: 39.5rem;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 3.2rem;
  letter-spacing: var(--ls-129);
  color: #000;
}
.is-f1 .custom-flow-text { top: 10.2rem; }
.is-f2 .custom-flow-text { top: 18rem; }
.is-f3 .custom-flow-text { top: 25.8rem; }
.is-f4 .custom-flow-text { top: 33.6rem; }
.is-f5 .custom-flow-text { top: 42rem; }
.is-f6 .custom-flow-text { top: 49.8rem; }
.custom-flow-chevron { position: absolute; left: 29.2rem; width: 2.43rem; }
.custom-flow-chevron.is-ch1 { top: 14.3rem; }
.custom-flow-chevron.is-ch2 { top: 22.1rem; }
.custom-flow-chevron.is-ch3 { top: 29.9rem; }
.custom-flow-chevron.is-ch4 { top: 37.7rem; }
.custom-flow-chevron.is-ch5 { top: 46.1rem; }

@media (max-width: 767px) {
  .custom-flow-label { margin-top: 7.6rem; }
  .custom-flow-heading { margin-top: 2.3rem; font-size: 2.4rem; line-height: 3.2rem; }
  .custom-flow .custom-flow-card { margin-top: 3.1rem; height: 120.6rem; border-radius: 2.8rem; }
  .custom-flow-title { font-size: 1.7rem; }
  .is-f1 .custom-flow-icon { left: 9.5rem;  top: 3.5rem;   width: 4.07rem; }
  .is-f2 .custom-flow-icon { left: 11.7rem; top: 23.6rem;  width: 3.83rem; }
  .is-f3 .custom-flow-icon { left: 12.3rem; top: 45.2rem;  width: 2.73rem; }
  .is-f4 .custom-flow-icon { left: 10.6rem; top: 65.9rem;  width: 3.98rem; }
  .is-f5 .custom-flow-icon { left: 11.3rem; top: 83.4rem;  width: 4.33rem; }
  .is-f6 .custom-flow-icon { left: 9.2rem;  top: 101.7rem; width: 4.43rem; }
  .is-f1 .custom-flow-title { left: 14.5rem;  top: 4.3rem; }
  .is-f2 .custom-flow-title { left: 16.75rem; top: 24.5rem; }
  .is-f3 .custom-flow-title { left: 16.2rem;  top: 45.6rem; }
  .is-f4 .custom-flow-title { left: 15.6rem;  top: 66.3rem; }
  .is-f5 .custom-flow-title { left: 16.8rem;  top: 84.7rem; }
  .is-f6 .custom-flow-title { left: 14.8rem;  top: 102.6rem; }
  .custom-flow-text {
    left: 3.6rem !important;
    width: 27.8rem;
    text-align: center;
    font-size: 1.4rem;
    line-height: 2.6rem;
  }
  .is-f1 .custom-flow-text { top: 9.8rem; }
  .is-f2 .custom-flow-text { top: 30.2rem; }
  .is-f3 .custom-flow-text { top: 50.9rem; }
  .is-f4 .custom-flow-text { top: 71.8rem; }
  .is-f5 .custom-flow-text { top: 89.9rem; }
  .is-f6 .custom-flow-text { top: 108.3rem; }
  .custom-flow-chevron { left: 16rem; width: 3.07rem; }
  .custom-flow-chevron.is-ch1 { top: 20.3rem; }
  .custom-flow-chevron.is-ch2 { top: 40.5rem; }
  .custom-flow-chevron.is-ch3 { top: 61.2rem; }
  .custom-flow-chevron.is-ch4 { top: 79.3rem; }
  .custom-flow-chevron.is-ch5 { top: 97.1rem; }
}