/* ===== flow ===== */
/* ===== Section ===== */
.flow{
    padding:80px 24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:32px;
  }
/* ===== Steps ===== */
.flow-steps{
    width:100%;
    max-width:1020px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
.flow-card{
    position:relative;
    flex:0 0 300px;
    width:300px;
    background:var(--card);
    border-radius:32px;
    padding:28px 32px;          /* 左右32・上下28で均一・中央に */
    margin-top:18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
  }
.flow-step{
    position:absolute;
    top:-18px;
    left:50%;
    transform:translateX(-50%);
    background:var(--white);
    border:2px solid var(--blue);
    border-radius:24px;
    padding:7px 26px;
    color:var(--blue);
    font-size:20px;
    font-weight:700;
    line-height:1;
    text-transform:uppercase;
    white-space:nowrap;
  }
.flow-img{
    width:160px;
    height:140px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
.flow-img img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
  }
.flow-body{
    display:flex;
    flex-direction:column;
    gap:8px;
    text-align:center;
    padding-top:4px;
  }
.flow-body h3{
    font-size:24px;
    font-weight:700;
    line-height:1.3;
    color:var(--ink);
  }
.flow-body p{
    font-size:16px;
    font-weight:500;
    line-height:1.6;
    color:var(--text);
  }
/* arrow between cards */
.flow-arrow{
    flex:0 0 auto;
    width:41px;
    height:41px;
    border-radius:50%;
    background:#ffffff;            /* 白塗り */
    border:2px solid var(--blue);  /* 青線 */
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--blue);             /* 塗りの矢印 */
    font-size:18px;
  }
/* ===== Responsive ===== */
@media (max-width:1040px){
.flow-steps{gap:8px}
.flow-card{flex-basis:0;flex-grow:1;width:auto;min-width:0;padding:28px 20px}
.flow-img{width:140px;height:124px}
.flow-body h3{font-size:21px}
.flow-body p{font-size:15px}
.flow-step{font-size:18px;padding:7px 20px}
}
@media (max-width:760px){
.flow{padding:56px 20px}
.flow-steps{
      flex-direction:column;
      gap:20px;
      max-width:340px;
    }
.flow-card{
      flex:0 0 auto;
      width:100%;
      margin-top:18px;
      padding:40px 28px 28px;
    }
.flow-img{width:160px;height:140px}
.flow-body h3{font-size:22px}
.flow-body p{font-size:16px}
.flow-arrow{transform:rotate(90deg);margin:2px 0}
}