/* ==========================================================================
   ステップ（.step-list）のレイアウト調整  2026-09-16
   - 写真タイプ（安心のステップ・施術の流れ）：スマホで写真が小さすぎるため、
     写真を全幅にしてテキストを下に積む
   - アイコンタイプ（治療の流れ）：円形アイコンが object-fit: cover で
     上下に切れていたため、原寸（200px）で切らずに表示する
   parts.css の .step-list は他ページと共有しているため触らず、
   ul に付けた修飾クラスで上書きする
   ========================================================================== */

/* 写真タイプ ------------------------------------------------------------- */
/* PC：写真に重ねる STEP 表記（アイコン付き）が左端に密着していたため余白を確保 */
.step-list--photo li .list-num {
  left: 16px;
  top: 14px;
}
@media screen and (max-width: 1400px) {
  .step-list--photo li .list-num {
    left: 1.14287vw;
    top: 1vw;
  }
}
@media screen and (max-width: 767px) {
  .step-list--photo li .list-img {
    width: 100%;
  }
  .step-list--photo li .list-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
  .step-list--photo li .sp-box {
    width: 100%;
    margin-top: 4vw;
  }
}

/* アイコンタイプ ----------------------------------------------------------- */
/* PC：STEP 番号を円の上に置く（写真タイプは写真に重ねるが、円形アイコンでは重なって読めないため） */
@media screen and (min-width: 768px) {
  .step-list--icon li > .list-num {
    position: static;
    display: block;
    margin-bottom: 8px;
    text-align: center;
  }
  .step-list--icon li .sp-box .list-num {
    display: none; /* PC ではスマホ用の番号を出さない */
  }
  /* 矢印は円画像の中に置き、円の上下中央に合わせる（2026-09-16。li 基準だと文字分ずれる） */
  .step-list--icon li .list-img {
    position: relative;
  }
  .step-list--icon li .list-img span {
    top: 50%;
    transform: translateY(-50%);
  }
}
@media screen and (max-width: 767px) {
  /* スマホは矢印を li 全体の下に出すため、円画像は基準にしない */
  .step-list--icon li .list-img {
    position: static;
  }
}
.step-list--icon li .list-img img {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}
@media screen and (max-width: 767px) {
  .step-list--icon li .list-img img {
    max-width: none;
  }
}

/* イラストタイプ（正方形の図解。切り抜かず、PC は STEP 番号を上に置く） ---- */
.step-list--illust li .list-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
}
@media screen and (min-width: 768px) {
  .step-list--illust li > .list-num {
    position: static;
    display: block;
    margin-bottom: 8px;
    text-align: center;
  }
  .step-list--illust li .sp-box .list-num {
    display: none;
  }
  /* 矢印は画像の中に置き、画像の上下中央に合わせる（2026-09-16） */
  .step-list--illust li .list-img {
    position: relative;
  }
  .step-list--illust li .list-img span {
    top: 50%;
    transform: translateY(-50%);
  }
}
@media screen and (max-width: 767px) {
  .step-list--illust li .list-img {
    width: 100%;
    position: static; /* 矢印は li 全体の下に出す */
  }
  .step-list--illust li .list-img img {
    max-width: 70%;
    margin: 0 auto;
  }
  .step-list--illust li .sp-box {
    width: 100%;
    margin-top: 3vw;
  }
}

/* STEP 矢印を列と列の間の中央に置く（2026-09-16。従来は次の円に接していた） ---- */
@media screen and (min-width: 768px) {
  .step-list--icon li .list-img span,
  .step-list--illust li .list-img span {
    display: flex;
    justify-content: center;
    align-items: center;
    right: -100px;
    width: 100px;
  }
  .step-list--icon li .list-img span img,
  .step-list--illust li .list-img span img {
    width: 40px;
    height: auto;
  }
}
@media screen and (min-width: 768px) and (max-width: 1400px) {
  .step-list--icon li .list-img span,
  .step-list--illust li .list-img span {
    right: -7vw;
    width: 7vw;
  }
  .step-list--icon li .list-img span img,
  .step-list--illust li .list-img span img {
    width: 2.85vw;
  }
}