@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : movie.css
Description : 動画ページ
===================================================================== */
/* =====================================================================
    movie
======================================================================*/
.movie {
  padding: 17rem 0 0;
}

.movie .sec_ttl {
  margin: 0 auto 11rem;
  width: 39.7rem;
}

.movie .sub_ttl {
  margin-bottom: 5rem;
  text-align: center;
}

.movie .sub_ttl span {
  position: relative;
  display: inline-block;
  padding: 0.2em 1em;
  padding-left: 1.5em;
  min-width: 40rem;
  font-size: 3.6rem;
  color: #883131;
  letter-spacing: 0.3em;
  background: linear-gradient(114deg, #dad4d4 0%, #d0cfd2 52%, #d2d4d9 100%);
}

.movie .sub_ttl span::before {
  content: '';
  position: absolute;
  display: block;
  bottom: -1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
  background: url(../images/common/bg_pattern3.jpg) no-repeat center/cover;
  z-index: -1;
}

.movie_wrap {
  padding-bottom: 18rem;
}

.movie_wrap:last-child {
  padding: 0;
}

.movie_wrap > * {
  position: relative;
  z-index: 1;
}

.movie_pickup figure,
.movie_list figure {
  position: relative;
  overflow: visible;
}

.movie_pickup figure::after,
.movie_list figure::after {
  content: '';
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 8.1rem;
  height: 5.7rem;
  background: url(../images/common/icon_movie.png) no-repeat center/contain;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  z-index: 1;
}

.movie_pickup figure img,
.movie_list figure img {
  position: relative;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 16/9;
}

.movie_pickup {
  margin-bottom: 7rem;
}

.movie_pickup figure {
  margin: 0 0 5rem -4rem;
  width: 68rem;
}

.movie_pickup figure::before {
  content: '';
  position: absolute;
  display: block;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0 -4% -4% 0;
  border: 1px solid #883131;
  border-radius: 10rem 12rem 13rem 0;
}

.movie_pickup figure img {
  border-radius: 10rem 0 10rem 0;
}

.movie_pickup h3 {
  min-height: auto;
}

.movie_list figure img {
  border-radius: 4rem 0 4rem 0;
}

.movie_list .slick-slide {
  margin: 0 4rem;
}

.movie_list .slick-disabled {
  display: none !important;
}

.movie_list .slick-arrow {
  display: block;
  position: absolute;
  top: 30%;
  width: 2em;
  height: 1.6em;
  background: url(../images/common/icon_arrow.png) no-repeat center/contain;
  z-index: 3;
}

.movie_list .slick-arrow.prev {
  left: 0;
  margin-left: -1rem;
}

.movie_list .slick-arrow.next {
  right: 0;
  margin-right: -1rem;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}

.movie_list li {
  width: 52rem !important;
}

.movie_list li a {
  position: relative;
}

.movie_list li a::before {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .movie_list .slick-list {
    overflow: visible;
  }
}

@media screen and (min-width: 768px) {
  .movie {
    padding-top: 15rem;
  }
  .movie .sec_ttl {
    margin-bottom: 4rem;
  }
  .movie .sub_ttl span {
    min-width: 30rem;
    font-size: 3.2rem;
  }
  .movie_pickup a:hover,
  .movie_list a:hover {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .movie_pickup a:hover figure::after,
  .movie_list a:hover figure::after {
    background-image: url(../images/common/icon_movie_h.png);
  }
  .movie_pickup {
    margin: 0 auto 5rem;
    width: 90rem;
  }
  .movie_pickup figure {
    margin: 0 0 4rem;
    width: 100%;
  }
  .movie_pickup figure::before {
    margin: 0 -2.5% -2.5% 0;
  }
  .movie_list {
    padding: 0 3rem;
  }
  .movie_list .slick-slide {
    margin: 0 1.3rem;
  }
  .movie_list .slick-arrow {
    top: 28%;
    cursor: pointer;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
  }
  .movie_list .slick-arrow:hover.prev {
    -webkit-transform: translateX(-2rem);
            transform: translateX(-2rem);
  }
  .movie_list .slick-arrow:hover.next {
    -webkit-transform: translateX(2rem) scale(-1, 1);
            transform: translateX(2rem) scale(-1, 1);
  }
  .movie_list li {
    width: 28.8rem !important;
  }
  .movie_list li:nth-child(3n) {
    margin-right: 0;
  }
  .movie_list li:nth-last-child(-n+3) {
    margin-bottom: 0;
  }
  .movie_list li figure::after {
    width: 5rem;
  }
}
/*# sourceMappingURL=movie.css.map */