/* ========================================
parts replacement　セクション
   ======================================== */
.parts-wrapper {
  display: flex; /* フレックスボックスで横並びレイアウト */
  flex-direction: row-reverse; /* 右から左への配置 */
  align-items: center; /* 子要素を垂直中央に揃える */
  gap: 40px; /* 子要素間に40pxの間隔を設定 */
  flex-wrap: wrap; /* 画面が狭いときは折り返す */
}

/* タブレット向け (1100px以下) */

/* ========================================
交換の様子　セクション
======================================== */
.parts-flow {
  margin: 0 auto;
}
.parts-flow .common-strong-point-outer {
  background-image: url("/assets/images/common/bg-image01.png"); /* 背景画像 */
  padding: 60px 0;
}

.image-flow-wrapper {
  padding-top: 30px;
}

/* ========================================
parts flow【メイン】　セクション
======================================== */
.parts-title-roller-outer {
  background-image: url("/assets/images/parts/section-title-roller.png"); /* 背景画像 */
  margin: 0 auto;
  box-shadow: 4px 4px 10px #747474;
  background-repeat: no-repeat;
}
.parts-title-chain-outer {
  background-image: url("/assets/images/parts/section-title-chain.png"); /* 背景画像 */
  box-shadow: 4px 4px 10px #747474;
  margin: 0 auto;
  background-repeat: no-repeat;
}
.parts-title-motor-outer {
  background-image: url("/assets/images/parts/section-title-motor.png"); /* 背景画像 */
  box-shadow: 4px 4px 10px #747474;
  margin: 0 auto;
  background-repeat: no-repeat;
}
.parts-title-unit-outer {
  background-image: url("/assets/images/parts/section-title-unit.png"); /* 背景画像 */
  box-shadow: 4px 4px 10px #747474;
  margin: 0 auto;
  background-repeat: no-repeat;
}
.parts-title-others-outer {
  background-image: url("/assets/images/parts/section-title-others.png"); /* 背景画像 */
  box-shadow: 4px 4px 10px #747474;
  margin: 0 auto;
  background-repeat: no-repeat;
}

.parts-contents-inner {
  margin: 0 auto;
}

.image-area-flow {
  display: flex;
  padding-top: 30px;
  align-items: center;
  gap: 27px;
}
.parts-card {
  padding-top: 60px;
  padding-bottom: 60px;
}

.parts-card-background {
  background-color: #f2f9ff;
}

.image-area-bottom-text {
  padding-top: 10px;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 500;
}

/* ========================================
レスポンシブ対応（768px以下）
======================================== */
@media screen and (max-width: 768px) {
  .image-area-flow {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  /* 矢印を下向きに回転 */
  .image-area-flow li figure img[src*="image-arrow-light"],
  .image-area-flow li figure img.image-arrow-light {
    transform: rotate(90deg);
  }
}