.sec_movie {
  padding-top: 1.18%;
  padding-bottom: 1.18%;
  color: #fff;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 100px; /* 下部に100pxの余白を設定 */
  transform: none;  /* scale縮小を解除（余白の原因を排除） */
}

@media screen and (max-width: 480px) {
  .sec_movie {
    padding-top: 30px;
    background-size: 100% auto;
    margin-bottom: 50px; /* スマホ表示時は余白を50px程度に調整（必要に応じて変更してください）*/
  }
}

/* --- コンテナ全体の枠幅を抑えて画像サイズを調整 --- */
.sec_movie .inner.movie_inner {
  max-width: 600px; /* ここで全体サイズ（画像の大きさ）を調整できます */
  width: 90%;
  margin: 0 auto;
}

/* --- 2列レイアウト設定 --- */
.movie_list_wrap {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px 4%;
  padding: 0;
  list-style: none;
}

.movie_list_wrap .item {
  width: 48%; /* 2列配置 */
}

.movie_list_wrap .image_wrap {
  width: 100%;
}

.movie_list_wrap .image_box {
  width: 100%;
  margin: 0 auto;
}

.movie_list_wrap .img_movie_wrap {
  position: relative;
  width: 100%;
  display: block;
}

.movie_list_wrap .img_movie_wrap img.main_img,
.movie_list_wrap .img_movie_wrap img:first-child {
  width: 100%;
  height: auto;
  display: block;
}

.movie_list_wrap li .sp_none,
.movie_list_wrap .sub_badge {
  width: 75%;
  margin-inline: auto;
  margin-top: -12% !important;
  display: block;
  position: relative;
  z-index: 2;
}

/* --- スマホ用レスポンシブ --- */
@media screen and (max-width: 480px) {
  .sec_movie .inner.movie_inner {
    max-width: 100%;
    width: 90%;
  }

  .movie_list_wrap .item {
    width: 48%; /* スマホでも2列を維持する場合 */
  }
}