/* ============ 04 EVENT FLOW ============ */
/* PC: 1440 design / gradient sampled from slice2-1 + slice3-1
   pink top -> gradually blue -> near-white just before next (pink) section */
.flow{
  background:linear-gradient(180deg,
    #FFF4F7 0%,
    #FFE7EE 5%,
    #FEE7ED 15%,
    #FAE8EB 30%,
    #F4E9E9 45%,
    #ECE8EF 60%,
    #E4E6F3 70%,
    #D6E1F6 80%,
    #CADDF9 90%,
    #DFEBFB 95%,
    #EEF4FD 97.5%,
    #FDFEFE 100%);
}
.flow-inner{
  max-width:994px;
  margin:0 auto;
  padding:54px 0 120px;
}
.flow-eyebrow{
  font-size:16px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.05em;
  text-align:center;
  color:var(--ink);
}
.flow-title{
  margin-top:5px;
  font-size:32px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.02em;
  text-align:center;
  color:var(--ink);
}
.flow-steps{
  margin-top:39px;
}
.flow-step{
  position:relative;
  padding-top:53px;
}
.flow-step + .flow-step{
  margin-top:20px;
}
.flow-label{
  position:absolute;
  top:0;
  left:23px;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.flow-label-step{
  font-size:30px;
  font-weight:700;
  line-height:1;
  letter-spacing:.02em;
  color:var(--pink);
}
.flow-label-num{
  margin-top:6px;
  font-size:66px;
  font-weight:700;
  line-height:1;
  color:var(--pink);
  background:linear-gradient(90deg,var(--pink) 0%,var(--pink-grad-end) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.flow-card{
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  min-height:362px;
  background:#fff;
  border-radius:24px;
}
.flow-mock{
  position:absolute;
  top:24px;
  width:203px;
}
.flow-mock img{
  width:100%;
  height:auto;
}
.flow-card-left .flow-mock{
  left:138px;
}
.flow-card-right .flow-mock{
  left:663px;
}
.flow-text{
  width:100%;
}
.flow-card-left .flow-text{
  padding:40px 50px 40px 386px;
}
.flow-card-right .flow-text{
  padding:40px 340px 40px 120px;
}
.flow-heading{
  font-size:26px;
  font-weight:700;
  line-height:1.5;
  color:var(--pink);
}
.flow-body{
  margin-top:10px;
  font-size:16px;
  font-weight:500;
  line-height:2;
  color:var(--ink);
}

/* ============ SP: 375 design ============ */
@media (max-width:767px){
  .flow{
    background:linear-gradient(180deg,
      #FFFEFE 0%,
      #FFF6F8 2.5%,
      #FFE7EE 7%,
      #FFE7EE 17%,
      #F9E8EA 33.5%,
      #F0E8ED 56%,
      #E7E7F2 69%,
      #D0E0F7 84.5%,
      #CADDF9 89%,
      #CADDF9 91%,
      #EEF4FD 97.8%,
      #FCFDFE 100%);
  }
  .flow-inner{
    max-width:none;
    padding:68px 0 115px;
  }
  .flow-eyebrow{
    font-size:12px;
  }
  .flow-title{
    margin-top:8px;
    font-size:25px;
  }
  .flow-steps{
    margin-top:46px;
  }
  .flow-step{
    padding-top:0;
  }
  .flow-step + .flow-step{
    margin-top:72px;
  }
  .flow-label{
    position:static;
    align-items:center;
  }
  .flow-label-step{
    font-size:22px;
  }
  .flow-label-num{
    margin-top:3px;
    font-size:48px;
  }
  .flow-card{
    display:block;
    width:calc(100% - 64px);
    min-height:0;
    margin:15px auto 0;
    padding:31px 12px 0;
  }
  .flow-card-left .flow-text,
  .flow-card-right .flow-text{
    padding:0;
    text-align:center;
  }
  .flow-heading{
    font-size:21px;
    line-height:1.2;
  }
  .flow-body{
    margin-top:8px;
    font-size:15px;
    line-height:1.5;
  }
  .flow-mock{
    position:static;
    width:auto;
    height:335px;
    margin-top:26px;
    overflow:hidden;
  }
  .flow-mock img{
    width:200px;
    margin:0 auto;
  }
}