横からのスライドでふわっと出現させる処理を入れていてスマホの時にスペースが空いてしまう

解決したいこと

スマホの見た目の時のスペースを無くしたい

画像

コード(HTML)

        <div class="reserve_box">
          <div class="reserve_img">
            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/LOMA/reserve2.png" alt="予約までの流れ">
          </div>
          <div class="reserve_item inview fadeIn_right">
            <div class="reserve_title2" data-number="02">
              出発場所の車両をお届け
            </div>
            <div class="reserve_text">
              スタッフが指定出発場所まで車を届け、EVバイクで帰社
            </div>
          </div>
        </div>

コード(css)

.reserve_box {
  display: flex;
  justify-content: flex-start;
  padding: 20px 0;
}

@media screen and (max-width:680px) {
  .reserve_box {
    display: block;
  }
}

.reserve_box:nth-child(even) {
  flex-direction: row-reverse;
}


.reserve_img {
  padding: 0 30px;
}

.reserve_img img {
  width: 430px;
  height: 240px;
  object-fit: cover;
  border-radius: 50%;
}

@media screen and (max-width:680px) {
  .reserve_img img {
    width: 100%;
  }
}

// 画像の動き

.fadeIn_right {
  opacity: 0;
  transform: translate(50%, 0);
  transition: 2s;
}
.fadeIn_right.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn_left {
  opacity: 0;
  transform: translate(-50%, 0);
  transition: 2s;
}

.fadeIn_left.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

Javascript

  // 画像の動き(繰り返し)
    $(".inview_re").on("inview", function (event, isInView) {
      if (isInView) {
        $(this).stop().addClass("is-show");
        // removeクラスで要素を見えなくする
      } else {
        $(this).stop().removeClass("is-show");
      }
    });