@charset "utf-8";
/*==========================
mainVisual
==========================*/
.mainVisual{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -100;
}
    
.mainVisual img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mainVisual::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#2C2F7A;
  mix-blend-mode: multiply; /* ブレンドモード */
  pointer-events: none; /* オーバーレイがクリックを妨げないように */
  transition: background 0.8s ease;
  z-index: 1; /* オーバーレイを画像の上に配置 */
}


/*==========================
movie
==========================*/
.section--movie{
  margin: 155px 0 80px;
}

.section--movie h3{
  margin-top: 70px;
}



.slidermovie{
  margin: 36px;
}

.slidermovie iframe{
  height:50vw;
  max-width: 100%;
  object-fit: cover;
  width: 100%;
}

.slick-prev:before {
  content: "" !important;
}

.slick-prev:after {
  margin-right: 10px;
  content: url(../images/arrow_left.png);
}

.slick-next:before {
  content: "" !important;
}

.slick-next:after {
  margin-left: 10px;
  content: url(../images/arrow_right.png);
}

.slick-dots li:nth-of-type(-n+6) button:before{
  background: url("../images/slider_dots.png") no-repeat;
  background-size: contain!important;
}

.slick-dots{
  bottom: initial!important;
  margin-top:4px!important;
}

.slick-dots li button:before{
  content: ''!important;
  height:100%!important;
  width: 100%!important;
}

.section--movie .btn{
  margin: 74px 23% 0;
}
@media screen and (min-width:769px) {  
  .section--movie{
    margin: 240px 14.6% 127px;
  }

  .section--movie h3{
    font-size: 2.0rem;
    font-size: 2.0rem;
    margin: 140px auto 0;
    text-align: center;
  }

  .section--movie .btn{
    margin: 110px auto 130px;
    max-width: 440px;
  }
  .slidermovie{
    margin-top: 55px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
  }
  
  .slidermovie iframe{
    width: 30%; 
    height: 30%;
    aspect-ratio: 16 / 9;
  }

  .section--movie__topics .btn{
    margin: 55px auto 0;
    max-width: 440px;
  }
  
}