@charset "UTF-8";
/* 色 */
/* ステータス */
/* ブレークポイント */
/* 可変サイズ */
/* サイズ */
/* 323px */
/* 余白 */
/* 角丸 */
/* 変数ファイル */
/* -----------------------------------------------------------
    ページ固有パーツ
----------------------------------------------------------- */
.movie-cont-box {
  margin: 0 auto min(12vw, 60px);
}

.movie-cont-box__title {
  background: linear-gradient(90deg, #E6E6E6 0%, #FFF 50%, #E6E6E6 100%);
  color: #666666;
  font-size: min(5.33vw, 26px);
  font-weight: bold;
  text-align: center;
  padding: min(2.67vw, 13px) min(1.33vw, 6px);
  border-top: solid 2px;
  border-bottom: solid 2px;
  -o-border-image: linear-gradient(90deg, #666666 0%, #999999 50%, #666666 100%) 1;
     border-image: linear-gradient(90deg, #666666 0%, #999999 50%, #666666 100%) 1;
}

.movie-cont-box__inner {
  margin: min(4vw, 20px) min(6.67vw, 33px);
}

.movie-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 91%;
  margin: min(4vw, 20px) auto 0;
}
.movie-list > li {
  width: 47.5%;
  padding: min(2.67vw, 13px);
}
.movie-list > li:nth-child(even) {
  margin-left: 5%;
}
.movie-list > li:nth-child(n+3) {
  margin-top: min(4vw, 20px);
}
.movie-list > li:nth-child(1) {
  background: #FAE300;
}
.movie-list > li:nth-child(2) {
  background: #B6C4CC;
}
.movie-list > li:nth-child(3) {
  background: #0269B2;
}
.movie-list > li:nth-child(4) {
  background: #1BA437;
}

.movie-list__img {
  width: min(30.93vw, 154px); /* 116px */
  margin: 0 auto;
}

.movie-list__name {
  width: min(32vw, 160px);
  margin: min(1.33vw, 6px) auto 0;
}

/* モーダルウィンドウ */
.movie-message-modal {
  background: #EAEFF3 url(../image/common/bg02.jpg) top center/cover;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: -1;
  overflow-y: auto;
}
.movie-message-modal.js-show {
  opacity: 1;
  z-index: 99;
}

.movie-message-modal__movie {
  position: relative;
  padding-bottom: 177.78%;
  overflow: hidden;
  width: min(72vw, 360px);
  margin: 0 auto;
}

.movie-message-modal__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.movie-message-modal__name {
  width: min(32vw, 160px);
  margin: min(4vw, 20px) auto 0;
}

.movie-message-modal__close {
  display: block;
  position: absolute;
  top: min(4vw, 20px);
  right: min(4vw, 20px);
  width: min(6.67vw, 33px);
  z-index: 5;
}

@media screen and (min-width: 501px) {
  /* ===========================================================
      タブレット縦
  =========================================================== */
}
@media screen and (min-width: 769px) {
  /* ===========================================================
      タブレット横、PC
  =========================================================== */
}