/* ============================================
   s-flow-02 - Recruit Flow (採用フロー)
   ============================================ */
.s-flow-02.wp-block-group,
.s-flow-02 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3-xl);
  counter-reset: recruit-step;
}

:is(.s-flow-02 *) {
  margin: 0;
}

.s-flow-02__step.wp-block-group,
.s-flow-02__step {
  position: relative;
  padding: var(--space-4-xl) var(--space-3-xl) var(--space-3-xl);
  background: var(--color-white, #fff);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  counter-increment: recruit-step;
}

.s-flow-02__step::before {
  content: counter(recruit-step, decimal-leading-zero);
  display: block;
  font-family: "Gilda Display", serif;
  font-size: var(--font-size-4-xl);
  font-weight: var(--font-weight-normal);
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.25;
  margin-bottom: var(--space-xl);
}

.s-flow-02__step-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-md);
  line-height: var(--line-height-normal);
}

.s-flow-02__step-desc {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-light);
}

/* --- ステップ間の矢印（擬似要素）。PC(4col)は右向き --- */
.s-flow-02__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--space-3-xl) / -2 - 4px);
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.6;
}

/* --- Responsive ---
   NOTE: s-flow-02 は本文(entry-content)直下に置かれ container 祖先を持たないため
   @container は発火しない（＝常に4col固定でSPで崩れる）。ビューポート基準の @media で
   確実に段組みを切り替える。フローは本文幅いっぱいなので @media が適切。 */
@media (max-width: 799px) {
  .s-flow-02.wp-block-group,
  .s-flow-02 {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 2col時は横位置が崩れるので矢印は非表示 */
  .s-flow-02__step::after {
    display: none;
  }
}

@media (max-width: 599px) {
  .s-flow-02.wp-block-group,
  .s-flow-02 {
    grid-template-columns: 1fr;
  }
  /* 1col(スマホ)は縦並びなので下向き矢印に */
  .s-flow-02__step:not(:last-child)::after {
    display: block;
    top: auto;
    right: 50%;
    bottom: calc(var(--space-3-xl) / -2 - 4px);
    transform: translateX(50%) rotate(135deg);
  }
}