@charset "UTF-8";
/* ==========================================================
  フォント
========================================================== */
/* ==========================================================
  EXTEND
========================================================== */
/* ===================================================================
CSS information
 file name  :movie.css
 style info :ムービーのスタイル
=================================================================== */
#movie #wrap .content ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  #movie #wrap .content ul {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 3rem;
    width: min(63.75rem, 96%);
  }
}
@media screen and (max-width: 767px) {
  #movie #wrap .content ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    gap: 6vw 0;
    width: 80%;
  }
}
#movie #wrap .content ul li {
  text-align: left;
}
@media screen and (min-width: 768px) {
  #movie #wrap .content ul li {
    width: calc((100% - 3rem) / 2);
  }
}
#movie #wrap .content ul li a figure {
  position: relative;
  margin-bottom: 0.5rem;
}
#movie #wrap .content ul li a figure img {
  border: solid 0.125rem #7f6a44;
}
#movie #wrap .content ul li a figure:before {
  display: block;
  content: "";
  position: absolute;
  background: url(../img/shared/icn_play.png) no-repeat center center/100%;
  pointer-events: none;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 20%;
  height: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
#movie #wrap .content ul li a p {
  color: #fff;
}