/* ========================================
   S06 ご利用の流れ（青BG・5ステップ＋CTA再掲）
   ======================================== */

.flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px; /* 統一 2026-07-31（旧30） */
  padding: 40px 0 72px; /* 2026-08-01ユーザー指定：下72px（保証バンド2の吹き出し-60px分を確保・旧40） */
  background: var(--c-primary);
  text-align: center;
}
.flow-heading { display: flex; flex-direction: column; align-items: center; gap: 16px; } /* 統一 2026-07-31 */
.flow-badge {
  /* 2026-08-12ユーザー指定：全セクションのバッジを 16px / 行高16px / pad4px16px に統一 */
  padding: 4px 16px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--c-primary);
}
.flow-title {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.35;
  color: #fff;
}
.flow-title .sm { font-size: 28px; }

.flow-steps {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 統一 2026-07-31（旧10） */
  width: 100%;
  padding: 0 16px;
  text-align: left;
}
.flow-step-wrap { display: flex; flex-direction: column; align-items: center; }
.flow-step {
  /* Figma 2524:693（2026-07-31 再突合）：アイコンと本文の間隔は12px（旧19/20） */
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 20px 16px;
  border-radius: 8px;
  background: #fff;
}
.flow-step-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 50%; /* 紺円のみ（白フレーム除去済み・2026-07-16） */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
/* Figma 2524:695：番号+タイトルの行 と 本文 を gap8 の縦積みに */
.flow-step-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
/* Figma 2860:73：番号とタイトルは中央揃えの横並び・gap4・幅は内容ぶん（HUG） */
.flow-step-title-row {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
}
/* 「1」は字幅が細く視覚的な間隔が広く見えるため、02〜05のみ8pxに（2026-07-31ユーザー指定） */
.flow-step:not(.flow-step--first) .flow-step-title-row { gap: 8px; }
.flow-step-number {
  font-family: var(--font-en);
  /* 2026-08-11：30px / 行高28px（Figma 2989:984）・色はコーラルトークン（2026-08-12に#FF6B5Cへ戻し／Figmaの#43AEBCから変更） */
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--c-coral);
  line-height: 28px;
}
.flow-step-title {
  font-size: 24px; /* Figma 2524:698 */
  font-weight: 700;
  line-height: 24px;
  color: var(--c-navy);
  /* Figmaは字面を枠に合わせるがCSSは行ボックス中央基準のため、和文が下がって見える。
     実測1.7px＋目視調整1px（2026-07-31ユーザー指定）で引き上げる */
  position: relative;
  top: -2.7px;
}
.flow-step-desc {
  /* margin-top は使わない（info側の gap8 で間隔を取る） */
  font-size: 14px;
  font-weight: 500; /* Figma Medium */
  line-height: 21px;
  color: var(--c-navy);
}
.flow-step-arrow {
  width: 20px;
  height: 12px;
}
.flow-step--last {
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}
.flow-step-row { display: flex; align-items: center; gap: 12px; }
.flow-payment {
  width: 100%;
  height: auto; /* 2026-08-02ユーザー指定：縦横比固定（旧40.4px固定＝幅が変わると比率が崩れていた） */
  border-radius: 4px;
}