/* ============================================================
   Flow section: "即戦力人材まで、一気通貫。"
   Shared header/inner/title/lead come from section.css.
   4 cards in a row, connected by lines with a ✓ in the middle.
   ============================================================ */
.flow {
  background: #f5f7fa;
}

.flow-steps {
  --gap: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  align-items: stretch;
  position: relative;
}

.flow-step {
  position: relative;
  background: #ffffff;
  border: 1px solid #d8dfe8;
  border-radius: 16px;
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: 0 14px 32px -18px rgba(13, 30, 60, 0.16),
              0 2px 6px -2px rgba(13, 30, 60, 0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.flow-step__num {
  font-family: "Nunito", "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: var(--brand-blue);
  text-transform: uppercase;
}

.flow-step__title {
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 900;
  line-height: 1.4;
  color: var(--text);
  letter-spacing: 0.01em;
}

.flow-step__desc {
  font-size: clamp(12px, 1vw, 13px);
  line-height: 1.85;
  color: #5b6975;
  font-weight: 500;
}

/* ---- Connector: blue line between cards (skip after last) ---- */
.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: var(--gap);
  height: 2px;
  background: var(--brand-blue);
  transform: translateY(-50%);
  z-index: 0;
}

/* ---- Check mark on the connector midpoint ---- */
.flow-step:not(:last-child)::before {
  content: "✓";
  position: absolute;
  top: 50%;
  left: calc(100% + var(--gap) / 2);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-orange);
  color: #ffffff;
  font-family: "Nunito", "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(237, 111, 37, 0.18);
  z-index: 1;
}

/* ============================================================
   Mobile: stack vertically, connectors become vertical
   ============================================================ */
@media (max-width: 900px) {
  .flow-steps {
    grid-template-columns: 1fr;
    --gap: clamp(56px, 12vw, 88px);
    max-width: 480px;
    margin: 0 auto;
  }

  .flow-step:not(:last-child)::after {
    top: 100%;
    left: 50%;
    width: 2px;
    height: var(--gap);
    transform: translateX(-50%);
  }

  .flow-step:not(:last-child)::before {
    top: calc(100% + var(--gap) / 2);
    left: 50%;
    transform: translate(-50%, -50%);
  }
}