/* ==========================================================================
   c-step — Figma: Step（25107:40713）/ PC/03_Consulting sec-flow（24381:6366）
   支援の流れ・予約から相談までの流れの 1 ステップ。静的HTML の c-flow-step と同じ見た目
   （c-step-list = c-flow-steps、__number = __label、__label = __label-step、__count = __label-num、__desc = __text）
   PC: 左に purple/500 の STEP 番号（内側 48/32）+ 右に白地の本文（内側 32px・間 16px）。項目間に下向きの三角
   SP: 番号欄 56px・本文の内側 24px・タイトル renewal/JP/20/Bold・説明 renewal/JP/14/Regular
   Figma では「STEP 01」はアウトライン化された図形。HTML ではテキストにした（Sofia Pro 想定）
   ========================================================================== */

.c-step-list {
  display: flex;
  flex-direction: column;
  /* 項目間 = 余白16px + 矢印28px + 余白16px（Figma実測値） */
  gap: calc(var(--space-16) * 2 + 28px);
}

.c-step {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 174px; /* Figma 固有寸法 */
}

/* 次の項目へ向かう下向き三角（32×28、Figma実測値） */
.c-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(100% + var(--space-16));
  left: 50%;
  width: 32px;
  height: 28px;
  background: var(--color-purple-500); /* semantic に該当なし（Figma: purple/500） */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateX(-50%);
}

.c-step__number {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 114px; /* Figma 固有寸法: 左右余白 32px×2 + ラベル幅 50px */
  padding: var(--space-48) var(--space-32);
  background-color: var(--color-purple-500); /* semantic に該当なし（Figma: purple/500） */
  color: var(--color-text-inverse);
  font-family: var(--font-en);
  text-align: center;
}

/* 「STEP」は renewal/EN/Label/16/Bold、番号は renewal/EN/Heading/32/Bold（静的HTML と同じ。
   保存済みの本文のクラスが 14 / 28 のため CSS で合わせる）。行間は詰める */
.c-step__label {
  font-size: 1rem;
  line-height: 1;
}

.c-step__count {
  margin-top: var(--space-4);
  font-size: 2rem;
  line-height: 1;
}

.c-step__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
  padding: var(--space-32);
  background-color: var(--color-bg-base);
}

.c-step__title {
  color: var(--color-purple-500); /* semantic に該当なし（Figma: purple/500） */
}

.c-step__desc {
  color: var(--color-text-base);
}

@media (max-width: 1023px) {

  .c-step-list {
    /* 項目間 = 余白8px + 矢印18px + 余白8px（Figma実測値） */
    gap: calc(var(--space-8) * 2 + 18px);
  }

  .c-step {
    min-height: 0;
  }

  /* 矢印 21×18（Figma実測値） */
  .c-step:not(:last-child)::after {
    top: calc(100% + var(--space-8));
    width: 21px;
    height: 18px;
  }

  .c-step__number {
    width: 56px; /* Figma 固有寸法: 左右余白 8px×2 + ラベル幅 40px */
    padding: var(--space-32) var(--space-8);
  }

  /* PC の 0.8 倍（Figma実測値）。近い文字サイズで再現 */
  .c-step__label {
    font-size: 0.8125rem;
  }

  .c-step__count {
    margin-top: 0;
    font-size: 1.625rem;
  }

  .c-step__body {
    gap: var(--space-8);
    padding: var(--space-24);
  }

  .c-step__title {
    font-size: 1.25rem; /* SP: renewal/JP/20/Bold（tokens.css .t-jp-20-bold） */
    line-height: calc(32 / 20);
  }

  .c-step__desc {
    font-size: 0.875rem; /* SP: renewal/JP/14/Regular（tokens.css .t-jp-14-regular） */
    line-height: calc(24 / 14);
  }
}