@charset "UTF-8";

/* mv */

.mv {
  position: relative;
}

.mv-wrapper {
  padding: 4.392vw 0 0 0;
}

.mv-img {
  width: 95.607%;
}

.mv-ttl_ja {
  position: absolute;
  top: 0;
  right: 0;
  width: 40.263%;
}

.mv-ttl-en {
  width: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.mv-filmfestival {
  width: 55.344%;
  position: absolute;
  right: 42.72%;
}

.mv-filmfestival-item.-item1 {
  width: 30.617%;
}

.mv-filmfestival-item.-item2 {
  width: 70.105%;
  margin: 0.585vw 0.585vw 0 0;
} 

.mv-copy {
  width: 3.66%;
  position: absolute;
  /* bottom: 12.597vw; */
  /* bnr3つ */
  /* bottom: 22.6vw; */
  /* bnr4つ */
  bottom: 26.6vw;
  /* bottom: 13.6vw; */
  left: 2.781vw;
}

@media screen and (min-width: 769px) {

  .mv-ttl-en {
    right: 0;
    margin: 0 auto;
  }

  .mv-filmfestival {
    display: flex;
    top: 0.439vw;
    /* transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%); */
  }

  .mv-filmfestival-item.-item1{
    order: 1;
  }

  .mv-copy {
    display: none;
  }

}

@media screen and (max-width: 768px) {

  .mv-wrapper {
    padding: 10.666vw 0 0 0;
  }
  
  .mv-img {
    width: 89.333%;
  }
  
  .mv-ttl_ja {
    width: 70.4%;
  }
  
  .mv-ttl-en {
    width: 89.333%;
    left: 0;
  }

  .mv-filmfestival {
    width: 81.066%;
    /* bottom: 18.4vw; */
    bottom: 14.133vw;
    left: 4vw;
  }

  .mv-filmfestival-item.-item1 {
    width: 83.552%;
  }
  
  .mv-filmfestival-item.-item2 {
    width: 100%;
    margin: 1.333vw 0 0;
  } 
  
  .mv-copy {
    width: 9.066%;
    bottom: 59.466vw;
    left: 4vw;
  }

}


/* contents */

.contents {
  position: relative;
}

.contents-movie-item {
  width: 20vw;
}

.contents-bnr-item {
  display: block;
   /* bnr4つ */
  width: 13.641vw; 
   /* bnr5つ */
  /* width: 11.713vw;  */
  margin-bottom: 1vw;
}

.contents-bnr-item:last-child {
  margin-bottom: 0;
}

.contents-wrapper {
  width: 46.26%;
  margin: 0 auto;
  padding: 5.8vw 0 0;
}

.contents-roadshow {
  width: 38.613%;
  margin: 0 auto 2.928vw;
}

.contents-billing {
  width: 71.51%;
  margin: 0 auto 3.25vw;
}

.contents-sns {
  display: flex;
  justify-content: center;
  margin-bottom: 13.177vw;
}

.contents-sns-item {
  display: block;
  width: 9.2vw;
  height: 9.2vw;
  margin: 0 1vw;
}

.contents-sns-item svg {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.contents-sns-item svg {
  fill:#aaa;
  transition: fill .3s;
}

.contents-sns-item svg use {
  display: block;
  width: 100%;
  height: auto;
  transition: fill .3s;
}

.contents-sns-item svg use.mark {
  fill: #000;
}

.contents-sns-item svg:hover use.mark {
  fill:#D3B467;
}

.contents-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* justify-content: space-between; */
  width: 62.079%;
  margin: 0 auto 56px;
}

.contents-nav-item {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 23.148%;
  height: 2.928vw;
  font-size: 1.756vw;
  font-weight: 500;
  font-family: 'Jost', sans-serif;
  padding: 0;
  margin: 0 0.925% 16px;
  text-align: center;
  color: #D3B467;
  border: 2px solid #D3B467;
}

.contents-nav-item.large {
  width: 57.87%;
  font-size: 2.049vw;
  margin: 0 21.064% 16px;
  height: 4.392vw;
}

.contents-nav-item.midium {
  width: 35.377%;
}

.contents-nav-item.comingsoon {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  opacity: 50%;
}

.contents-nav-item-cs {
  display: block;
  margin: 0 1em 0 0;
  padding: 0.15em .75em;
  color: #fff;
  font-size: 1vw;
  letter-spacing: .075em;
  background-color: #D3B467;
}

.contents-nav-item:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 769px) {

  .contents-movie {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 30.5vw;
    right: 0;
    left: 0;
  } 

  .contents-movie-item {
    margin: 0 0.5%;
  }

  .contents-bnr {
    position: absolute;
    /* top: -12.8vw; */
    /* bnr3つ */
    /* top: -19.8vw; */
    /* bnr4つ */
    top: -25.6vw;
     /* bnr5つ */
    /* top: -27.5vw; */
    left: 1.5vw;
  }

  .contents-bnr-item {
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
  }

  .contents-bnr-item:hover {
    opacity: 0.7;
  }

  .contents-sns-item {
    position: relative;
    width: 3.367vw;
    height: 3.367vw;
    overflow: hidden;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
  }

  .contents-sns-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,rgba(255,255,255,0)0%, rgba(255,255,255,0.3)100%);
    transform: skewX(-25deg);
    -webkit-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);
    -ms-transform: skewX(-25deg);
    -o-transform: skewX(-25deg);
  }

  .contents-sns-item:hover::before {
    animation: shine 0.7s;
    -webkit-animation: shine 0.7s;
  }

  @keyframes shine {
    100% {
      left: 125%;
    }
  }

  .contents-nav-item {
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
  }

  .contents-nav-item:hover {
    background-color: #D3B467;
    color: #fff;
  }

  .contents-nav-item.comingsoon:hover {
    background-color: #fff;
    color: #D3B467;
    cursor: default;
  }

}

@media screen and (max-width: 768px) {

  .contents-movie {
    padding-top: 12.8vw;
  }

  .contents-movie-item {
    width: 64.4%;
    margin: 0 auto 3vw;
  }

  .contents-movie-item:last-child {
    margin-bottom: 0;
  }

  .contents-bnr {
    padding-top: 12vw;
  }

  .contents-bnr-item {
    width: 64.4%;
    margin: 0 auto 3vw;
  } 

  .contents-wrapper {
    width: 92%;
    padding: 7.333vw 0 0;
  }
  
  .contents-roadshow {
    width: 56.521%;
    margin: 0 auto 8.533vw;
  }
  
  .contents-billing {
    width: 100%;
    margin: 0 auto 10.666vw;
  }
  
  .contents-sns {
    margin-bottom: 7vw;
  }
  
  .contents-sns-item {
    width: 13.333%;
    margin: 0 2.898%;
  }
  
  .contents-nav {
    width: 96%;
    margin-bottom: 8.533vw;
  }
  
  .contents-nav-item {
    width: 45.833%;
    height: auto;
    font-size: 5vw;
    line-height: 2em;
    padding: 0;
    margin: 0 2vw 4.266vw;
  }

  .contents-nav-item.large {
    margin: 0 0 4.266vw;
  }

  .contents-nav-item.large {
    width: 95.83%;
    height: 14.933vw;
    font-size: 6.4vw;
  }
  
  .contents-nav-item.midium {
    width: 68.266%;
  }

  /* .contents-nav-item.large,
  .contents-nav-item.midium {
    width: 95.833%;
  } */

  .contents-nav-item-cs {
    height: 5vw;
    margin: 0 1em 0 0;
    padding: 0.25em 0.5em 0;
    color: #fff;
    font-size: 3.5vw;
    letter-spacing: .075em;
    line-height: 1em;
  }

  .contents-nav-item:hover {
    background-color: #D3B467;
    color: #fff;
  }

  .contents-nav-item.comingsoon:hover {
    background-color: #fff;
    color: #D3B467;
    cursor: default;
  }

}

.svg_symbol {
  display: none;
}

.mvtk_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 90%;
  max-width: 1000px;
  margin: 0 auto 50px;
}

.mvtk_item {
  width: 48%;
  margin: 0 1%;
}

@media screen and (max-width: 768px) {

  .mvtk_wrap {
    width: 70%;
    margin: 0 auto 7vw;
  }

  .mvtk_item {
    width: 100%;
    margin: 1.5vw 0;
  }

}