@charset "UTF-8";
/* ==========================================================
  フォント
========================================================== */
/* ===================================================================
CSS information
 file name  :movie.css
 style info :ムービーページのスタイル
=================================================================== */
@media screen and (min-width: 768px) {
  body:before {
    background-image: url(../img/shared/bg_pc.jpg);
  }
}
@media screen and (max-width: 767px) {
  body:before {
    background-image: url(../img/shared/bg_sp.jpg);
  }
}

@media screen and (min-width: 768px) {
  :lang(es) .contentArea {
    padding: 50px 0 180px;
  }
}
@media screen and (min-width: 1921px) {
  :lang(es) .contentArea {
    padding: 2vw 0 8vw;
  }
}
@media screen and (max-width: 767px) {
  :lang(es) .contentArea .ttlBox {
    margin: 24vw auto 8vw;
  }
}
@media screen and (min-width: 1921px) {
  :lang(es) .contentArea .ttlBox h1 .enTxt {
    height: 3.6vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  :lang(es) .contentArea .ttlBox h1 .enTxt {
    height: 54px;
  }
}
@media screen and (max-width: 767px) {
  :lang(es) .contentArea .ttlBox h1 .enTxt {
    height: 9.8vw;
  }
}
.contentArea .movie {
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .contentArea .movie {
    width: min(96%, 1130px);
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .movie {
    width: 60%;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .movie {
    width: 90%;
  }
}
@media screen and (min-width: 768px) {
  .contentArea .movie .bnrShowcase {
    width: min(96%, 800px);
    margin: 0 auto 80px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .movie .bnrShowcase {
    width: 70%;
    margin: 0 auto 3vw;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .movie .bnrShowcase {
    margin: 0 auto 10vw;
  }
}
.contentArea .movie .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
  .contentArea .movie .list {
    gap: 80px 0;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .movie .list {
    gap: 3vw 0;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .movie .list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    gap: 10vw 0;
  }
}
.contentArea .movie .list li {
  background: linear-gradient(60deg, #7cff85, #eaff00);
  border-radius: 20px;
  padding: 4px;
}
@media screen and (min-width: 768px) {
  .contentArea .movie .list li {
    width: 48%;
  }
}
.contentArea .movie .list li a {
  display: block;
  border-radius: 18px;
  overflow: hidden;
}
.contentArea .movie .list li a figure {
  border-radius: 18px 18px 0 0;
  overflow: hidden;
}
.contentArea .movie .list li a p {
  color: #006836;
  font-weight: 700;
  text-align: center;
  padding: 1em;
  min-height: 6em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 0.5em;
}
.contentArea .movie .list li a p:before {
  display: block;
  content: "";
  background: url(../img/shared/icn_play.png) no-repeat center center/100%;
  width: 2em;
  height: 2em;
}
.contentArea .movie .list li:hover {
  background: linear-gradient(60deg, #ffc000, #ff3f3a);
}
.contentArea .movie .list li:hover p {
  color: #fff;
}