body {
  font-family: var(--font-sc);
}

.bg-crescent-dec {
  &.bg-crescent-dec-jp-work-intro {
    width: 86.9565217391%;
    min-width: 20rem;
    top: 0;
    right: 0;
    transform: translateY(-15.9782608696%);
    opacity: 30%;
  }
}

.jp-work-intro-bg-dec {
  width: 57.5%;
  min-width: 20rem;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-19.12858661%);
}

.page-hero {
  z-index: 1;
  position: relative;
}

.color-filter {
  &.color-filter--bkack-40::after {
    background-color: hsl(0 0 0 / 40%);
  }
}

.jp-work-strengths-bg-dec {
  width: 81.5%;
  position: absolute;
  top: 1.5rem;
  right: 0;
  @media (min-width: 1024px) {
    top: 5.625rem
  }
}

.flow-list {
  display: grid;
  gap: 2rem;
  
  @media screen and (min-width: 768px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media screen and (min-width: 1440px) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  & .flow-list__item {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    & .flow-list__title {
      border-radius: 1.25rem;
      padding: 1.5rem;
      text-align: center;
      font-weight: 700;
      font-size: 1.125rem;
      line-height: 1.25;
      letter-spacing: 0;
    }
    & .flow-list__container {
      border-radius: 1.5rem;
      padding: 1rem;
      background-color: var(--snow);
    }
    &:first-child .flow-list__title {
      background-color: #DFE1EB;
    }
    &:nth-child(2) .flow-list__title {
      background-color: #BEC4E7;
    }
    &:nth-child(3) .flow-list__title {
      background-color: #9FA8E0;
    }
    &:nth-child(4) .flow-list__title {
      background-color: #8894E2;
    }
    
    @media screen and (min-width: 768px) {
      & .flow-list__title {
        border-radius: 1.25rem;
        padding: 1.5rem;
      }
      & .flow-list__container {
        border-radius: 1.25rem;
        padding: 2rem;
        flex: 1 0 0%;
      }
      & .flow-list__content {
        flex: 1 0 0%;
      }
    }
    @media screen and (min-width: 1440px) {
      gap: 2rem;
      & .flow-list__title {
        position: relative;
        &::before {
          content: "";
          position: absolute;
          top: 0;
          right: -20px;
          width: 20px;
          height: 100%;
          z-index: 1;
        }
      }
      &:first-child {
        & .flow-list__title {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          &::before {
            background: no-repeat center/100% 100% url("/system_panel/uploads/images/flow-polygon--1.png");
          }
        }
        & .flow-list__container {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
        & .flow-list__content {
          border-right: 1px dashed var(--blue);
          padding-right: 2rem;
          margin-right: -2rem;
        }
      }
      &:nth-child(2) {
        & .flow-list__title {
          border-radius: 0;
          &::before {
            background: no-repeat center/100% 100% url("/system_panel/uploads/images/flow-polygon--2.png");
          }
        }
        & .flow-list__container {
          border-radius: 0;
        }
        & .flow-list__content {
          border-right: 1px dashed var(--blue);
          padding-right: 2rem;
          margin-right: -2rem;
        }
      }
      &:nth-child(3) {
        & .flow-list__title {
          border-radius: 0;
          &::before {
            background: no-repeat center/100% 100% url("/system_panel/uploads/images/flow-polygon--3.png");
          }
        }
        & .flow-list__container {
          border-radius: 0;
        }
        & .flow-list__content {
          border-right: 1px dashed var(--blue);
          padding-right: 2rem;
          margin-right: -2rem;
        }
      }
      &:nth-child(4) {
        & .flow-list__title {
          border-radius: 0;
          &::before {
            background: no-repeat center/100% 100% url("/system_panel/uploads/images/flow-polygon--4.png");
          }
        }
        & .flow-list__container {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
      }
    }
  }
}

.support-cards {
  display: grid;
  gap: 3rem;
  counter-reset: card-num-counter;
  @media (min-width: 1200px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  & .support-card {
    counter-increment: card-num-counter;
    & .support-card__num {
      position: absolute;
      top: -2rem;
      left: -2rem;
      border-radius: 9999px;
      aspect-ratio: 1 / 1;
      width: 5rem;
      background-color: var(--red);
      color: var(--snow);
      line-height: 1;
      letter-spacing: 0;
      font-family: var(--font-display);
      font-weight: 600;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      &::before {
        content: "POINT";
        font-size: 0.875rem;
      }
      &::after {
        content: counter(card-num-counter, decimal-leading-zero);
        font-size: 1.5rem;
      }
      @media (min-width: 768px) {
        width: 6.25rem;
        &::before {
          content: "POINT";
          font-size: 1rem;
        }
        &::after {
          content: counter(card-num-counter, decimal-leading-zero);
          font-size: 2rem;
        }
      }
    }
  }
}