.flow {
  padding-block: 4rem 8rem;
}

.flow__box {
  display: grid;
  gap: 1.6rem;
  margin-top: 4rem;
}

.flow__item {
  align-items: center;
  background: var(--colorSub);
  clip-path: polygon(100% 0, 100% 82%, 50% 100%, 0 82%, 0 0);
  display: grid;
  gap: 2.4rem;
  grid-template-columns: 21.4% auto;
  padding: 2.4rem 2.4rem 6.4rem 2.4rem;
}

.flow__item:nth-last-child(1) {
  clip-path: unset;
  padding-bottom: 2.4rem;
}

.flow__btnColumn {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 1.6rem;
}

.flow__titleWrap.for-sp {
  display: none;
}

.flow__step {
  color: var(--colorWhite);
  font-family: var(--familyBebasNeue);
  font-size: 2.4rem;
}

.flow__title {
  color: var(--colorWhite);
  font-size: 2.4rem;
  font-weight: 700;
}

.flow__text {
  color: var(--colorWhite);
  font-size: 1.8rem;
  margin-top: 1.6rem;
}

@media (max-width: 767px) {
  .flow {
    padding-block: 2.4rem 4rem;
  }

  .flow__item {
    clip-path: polygon(100% 0, 100% 94%, 50% 100%, 0 94%, 0 0);
    gap: 0.8rem;
    grid-template-columns: 1fr;
  }

  .flow__item:nth-child(2) .flow__img img {
    left: -1rem;
    position: relative;
  }

  .flow__titleWrap.for-pc {
    display: none;
  }

  .flow__titleWrap.for-sp {
    align-items: center;
    display: flex;
  }

  .flow__step {
    font-size: 2.4rem;
  }

  .flow__title {
    font-size: 1.8rem;
    padding-left: 2.4rem;
  }

  .flow__img {
    margin-inline: auto;
    max-width: 23.1rem;
    width: 100%;
  }

  .flow__img img {
    margin-inline: auto;
  }

  .flow__text {
    font-size: 1.6rem;
  }

  .flow__btnColumn .commonLink {
    max-width: 100%;
  }
}