@charset "utf-8";

.topMovie_wrapper_780 {
  width: 100%;
  height: 100%;
  max-width: 780px;
  max-height: 230px;
  margin: 0 auto;
  overflow: visible;
}

/*スライド2枚表示時の余白調整用*/
@media screen and (min-width: 751px) and (max-width: 1023px) {
  .topMovie_wrapper_780 {
  max-width: 600px;
  }
}

.topMovie_wrapper_780 .topMovieSwiper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 10px 0 30px;
  position: relative;
}

/* スワイパー */
.topMovieSwiper .swiper-wrapper {
  display: flex;/**/
  margin: 10px auto 30px !important;
  transition: transform 0.3s ease;
  will-change: transform !important;
}

/* スライド ベースとなる設定 （～750px）*/
.topMovieSwiper .slide-inner {
  max-width: 250px;
  margin: 0 auto;
  transition: 0.3s;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* 中央スライド */
/* 画面幅751～1023pxはスライドは現状2枚並列表示
   アクティブと非アクティブで設定を差別化する必要はない
   後々デザイン変わった時用に枠だけ一応残す */
.topMovieSwiper .swiper-slide-active .slide-inner {
}

/* 小型PC・タブレット表示（751～1023px） */
/* デザイン要確認 今のところスマホ表示と小型PC表示でスライドの表示デザイン変えてないのでコメントアウト */
@media screen and (min-width: 751px) and (max-width: 1023px) {
  .topMovieSwiper .swiper-slide .slide-inner {
  /*
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  */
  }
}

/* PC表示（1024px～） */
/* 要確認 ブレイクポイント */
@media screen and (min-width: 1024px) {
  .topMovieSwiper .swiper-slide .slide-inner {
    transform: scale(0.8) !important;
    opacity: 0.4 !important;
    filter: brightness(0.7) !important;
  }

  /* 中央を際立たせる */
  .topMovieSwiper .swiper-slide-active .slide-inner {
    transform: scale(1.1) !important;
    opacity: 1 !important;
    filter: brightness(1.0) !important;
    z-index: 10;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }
}

/* 画像 */
.topMovieSwiper .slide-inner img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
}

/* 矢印 */
.topMovieSwiper-prev,
.topMovieSwiper-next {
  color: #333;
}

/* ページネーション */
.topMovieSwiper-pagination {
  bottom: 10px !important;
}

.swiper-pagination-bullet {
  width: 12px !important;
  height: 12px !important;
}