body.page-products-parts .parts-usage-flow {
  display: flex;
  flex-direction: column;
  gap: 40rem;
  padding: 96rem 0;
  background: #ffffff;
  border-radius: 32rem;
  box-shadow: 0 0 0 100vmax #ffffff;
  clip-path: inset(0 -100vmax);
}

body.page-products-parts .parts-usage-flow__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10rem;
  overflow: visible;
}

body.page-products-parts .parts-usage-flow__step {
  position: relative;
  min-width: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

body.page-products-parts .parts-usage-flow__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rem;
  padding: 40rem 18rem 24rem;      /* No.17: 左右22→18rem。step3「ご入金・プロトタイプ」が1行に収まる幅を確保 */
  background: rgba(251, 249, 248, 1);
  border-radius: 24rem;
  min-height: 382rem;
  flex: 1;
  z-index: 1;
}

body.page-products-parts .parts-usage-flow__card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16rem;
  width: 100%;
}

body.page-products-parts .parts-usage-flow__icon {
  width: 116rem;
  height: 97rem;
}

body.page-products-parts .parts-usage-flow__name {
  font-family: "Noto Sans JP", Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: rgba(51, 51, 51, 1);
  font-size: 18rem;
  letter-spacing: 0.4rem;          /* No.17: 0.72rem だと step3「ご入金・プロトタイプ」が1行に収まらず"プ"が溢れて3行化。詰めて<br>通りの2行に */
  line-height: 32.4rem;
  text-align: center;
  /* No.17: 名前を常に2行分の高さで確保し、1行/2行で説明文の開始位置がズレないよう上端を揃える */
  min-height: calc(32.4rem * 2);
}

body.page-products-parts .parts-usage-flow__desc {
  width: 100%;
  font-family: "Noto Sans JP", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: rgba(120, 120, 120, 1);
  font-size: 14rem;
  letter-spacing: 0.56rem;
  line-height: 25.2rem;
}

body.page-products-parts .parts-usage-flow__badge {
  position: absolute;
  top: -21rem;             /* No.17調整: step を Figma 同様カード上端より約21px上へ */
  left: 16rem;
  width: 66rem;
  height: 66rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  background: rgba(255, 98, 67, 1);
  border-radius: 32rem;
  aspect-ratio: 1;
  z-index: 4;
}

body.page-products-parts .parts-usage-flow__badge-step {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 14rem;
  letter-spacing: 0.56rem;
  line-height: 19.6rem;
}

body.page-products-parts .parts-usage-flow__badge-num {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 24rem;
  letter-spacing: 0.96rem;
  line-height: 24rem;
}

body.page-products-parts .parts-usage-flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 160rem;                      /* No.18: 矢印中央を見出し(カード)の上下中央へ。Figma 5083:307957 準拠（村本「もう少し下」）。旧96remはアイコン寄りで高すぎた */
  right: -24rem;
  width: 28rem;
  height: 48rem;
  transform: none;
  background: no-repeat center / contain url("/img/front/products/parts/right-arrow.svg");
  z-index: 3;
  pointer-events: none;
}

@media screen and (max-width: 1023.98px) {
  body.page-products-parts .parts-usage-flow {
    padding: 40rem 0;          /* 左右ガターは .container の 16rem で確保（二重ガター解消） */
    gap: 24rem;
    border-radius: 24rem;
  }

  body.page-products-parts .parts-usage-flow__steps {
    grid-template-columns: 1fr;
    gap: 12rem;
  }

  /* SP は縦積みなので矢印を下向き(90°回転)にしてカード間に表示（No.18: oem と挙動を揃える。
     以前は display:none で矢印が消えていた）。 */
  body.page-products-parts .parts-usage-flow__step:not(:last-child)::after {
    top: auto;
    right: auto;
    left: 50%;
    bottom: -30rem;
    width: 28rem;
    height: 48rem;
    transform: translateX(-50%) rotate(90deg);
    transform-origin: center;
  }

  body.page-products-parts .parts-usage-flow__card {
    min-height: auto;
  }
}