/*==================================================
sp pc
==================================================*/
@media all and (max-width: 768px) {
  .pc-only {
    display: none !important;
  }
}

@media all and (min-width: 769px) {
  .sp-only {
    display: none !important;
  }
}
@media all and (max-width: 768px) {
  .sp-only {
    display: block;
  }
}

/*--------------------------------------
flow
----------------------------------------*/
.flows {
  display: grid;
  gap: 9.5rem;
  margin: 4rem auto 0;
  max-width: 100rem;
}
@media all and (max-width: 768px) {
  .flows {
    gap: 5.5rem;
    max-width: 100%;
  }
}

.flow {
  counter-increment: flowNum;
  padding-right: 16rem;
  position: relative;
}
@media all and (max-width: 1080px) {
  .flow {
    padding-bottom: 10rem;
    padding-right: 0;
  }
}
.flow:not(:last-child)::after {
  border-right: solid 0.2rem var(--border-color);
  border-top: solid 0.2rem var(--border-color);
  bottom: -5.5rem;
  content: "";
  height: 2rem;
  left: 50%;
  position: absolute;
  transform: translateX(-50%) rotate(135deg);
  width: 2rem;
}
@media all and (max-width: 768px) {
  .flow:not(:last-child)::after {
    bottom: -3.5rem;
  }
}
.flow__ttl {
  font-size: 3.2rem;
  font-weight: var(--font-weight-base);
  letter-spacing: 0.05em;
  line-height: 1.46;
}
@media all and (max-width: 768px) {
  .flow__ttl {
    font-size: 2.4rem;
  }
}
.flow__ttl::before {
  content: "STEP." counter(flowNum, decimal-leading-zero);
  font-size: 2.4rem;
  margin-right: 1.6rem;
}
@media all and (max-width: 768px) {
  .flow__ttl::before {
    display: block;
    font-size: 2rem;
    margin-right: 0;
  }
}
.flow__box {
  border: 0.1rem solid var(--border-color);
  margin-top: 3.2rem;
  padding: 3.5rem 18rem 3.5rem 4rem;
  position: relative;
  z-index: 0;
}
@media all and (max-width: 1080px) {
  .flow__box {
    padding: 3.5rem 4rem 12rem 4rem;
  }
}
@media all and (max-width: 768px) {
  .flow__box {
    padding: 2.5rem 1.5rem 12rem 1.5rem;
  }
}
.flow__tags {
  display: flex;
  gap: 0.8rem;
  left: 4rem;
  position: absolute;
  top: -1.5rem;
  z-index: 1;
}
@media all and (max-width: 768px) {
  .flow__tags {
    left: 1.5rem;
  }
}
.flow__tag {
  align-items: center;
  border-radius: 0.8rem;
  border: 0.1rem solid var(--body-color);
  display: inline-flex;
  font-size: 1.5rem;
  height: 2.8rem;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0 1.6rem 0.2rem 1.6rem;
}
.flow__tag.-black {
  background-color: var(--body-color);
  color: #fff;
}
.flow__tag.-white {
  background-color: #fff;
}
.flow__txt {
  letter-spacing: 0.1em;
  line-height: 1.94;
}
.flow__txt + .flow__txt {
  margin-top: 0.5rem;
}
.flow__txt.-sm {
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  line-height: 1.57;
}
.flow__txt.-ann {
  padding-left: 1em;
  text-indent: -1em;
}
.flow__img {
  border-radius: 0.8rem;
  bottom: -2rem;
  position: absolute;
  right: -16rem;
  z-index: 1;
}
@media all and (max-width: 1080px) {
  .flow__img {
    bottom: -10rem;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}