@charset "UTF-8";

.movie-wrapper {
  margin-top: 50px;
}

.movie-container {
  max-width: 980px;
  margin: 0 auto 0;
  padding: 0 2%;
  line-height: 1.8;
  font-size: 14px;
  overflow: hidden;
}

.movie-submit {
  width: 300px;
  margin: 20px auto;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  border: 1px solid #fff;
  line-height: 40px;
}

.movie-item {
  width: 32%;
  margin: 0 0.5% 10px;
  float: left;
}

.movie-item__thumbnail {
  padding-top: 56.333%;
}

.movie-item__text {
  color: #fff;
}

.movie-player {
  width: 100%;
  text-align: center;
}

.movie-player video {
  width: 600px;
}

/*! 埋め込み動画をレスポンシブ対応させる */
.videos {
  text-align: center;
  position: relative;
  width: 100%;
  /* padding-bottom: 60%; */
  aspect-ratio: 16 / 9; /* 初期値として設定（jsで正確なものに書き換える） */
  height: auto;
  margin: 0 auto;
}

.videos .video_player {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  /* margin: 10px auto; */
}

/* Vimeoが生成するiframe */
.videos .video_player iframe {
  /* width: 600px; */
  width: 100%;
  height: 100%;
  object-fit: contain; /* 縦横比を崩さず綺麗に収める */
}


@media all and (max-width: 768px) {
  .movie-container {
    padding-top: 30px;
  }

  .movie-item {
    width: 100%;

  }

  .movie-item__thumbnail {
    padding-top: 56.333%;
  }

  .movie-player video {
    width: 95%;
  }

  /* .videos .video_player iframe {
    width: 95%;
  } */

}