@charset "utf-8";

body {
    background-color: #000;
}
body.preload .wow.fadeIn {
    opacity: 0 !important;
}

svg {
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    transform: translateZ(0);
}

/* ----------------------------------- mv ----------------------------------- */
.mv {
    position: relative;
    overflow: hidden;
}
.mv-kv-01 {
    position: relative;
    height: 0;
    padding-top: 72.09%;
    background-image: url(../images/full/mv1.jpg);
    background-size: cover;
    z-index: 1;
}
.mv-kv-02 {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 0;
    padding-top: 72.09%;
    background-image: url(../images/full/mv2.jpg);
    background-size: cover;
    z-index: 2;
    animation: kv-02 13.5s cubic-bezier(0.95, 0.05, 0.795, 0.035) 4.4s infinite;
}
.mv-kv-03 {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 0;
    padding-top: 72.09%;
    background-image: url(../images/full/mv3.jpg);
    background-size: cover;
    z-index: 3;
    /*animation: kv-3 8.1s cubic-bezier(0.95, 0.05, 0.795, 0.035) 2.4s infinite;*/
    animation: kv-03 8s linear 1.0s alternate infinite;
    /*animation: kv-2 8.1s cubic-bezier(0.95, 0.05, 0.795, 0.035) 2.4s infinite;*/
}
@keyframes kv-02 {
    0% { opacity: 0; }
    22% { opacity: 0; }
    23% { opacity: 1; }
    24% { opacity: 1; }
    26% { opacity: 0; }
    59% { opacity: 0; }
    60% { opacity: 1; }
    68% { opacity: 1; }
    69% { opacity: 0; }
    78% { opacity: 0; }
    79% { opacity: 1;}
    80% { opacity: 1; }
    81% { opacity: 0; }
    100% { opacity: 0; }
    /*0% { opacity: 0; }
    1% { opacity: 1; }
    2% { opacity: 0; }
    83% { opacity: 0; }
    84% { opacity: 1; }
    85% { opacity: 0; }
    100% { opacity: 0; }*/
}
@keyframes kv-03 {
    0% { opacity: 0; }
    1% { opacity: 1; }
    2% { opacity: 0; }
    83% { opacity: 0; }
    84% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; }
}

.mv-ttl {
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translateX(-50%);
    width: 41%;
    z-index: 5;
}
.mv-directed {
    position: absolute;
    top: 36%;
    left: 50%;
    transform: translateX(-50%);
    width: 28%;
    z-index: 5;
}
.mv-roadshow {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translateX(-50%);
    width: 35%;
    z-index: 5;
}
.mv-tw {
    position: absolute;
    top: 3%;
    right: 2%;
    width: 3%;
    z-index: 5;
}
.mv-tw a {
    display: block;
}
.mv-tw a .cls-1 {
    transition: .3s;
}
.mv-tw a .cls-1:hover {
    fill: #E30012;
}

/* top-menu */
.top-menu-box {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 96%;
    max-width: 1200px;
    z-index: 5;
}
.top-menu-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.top-menu-list li {
    width: 23%;
    margin: 0 1% 2%;
    max-width: 300px;
    background: -moz-linear-gradient(top, #126892, #002E58);
    background: -webkit-linear-gradient(top, #126892, #002E58);
    background: linear-gradient(to bottom, #126892, #002E58);
    border-radius: 2px;
}
.top-menu-list li a {
    font-family: 'Noto Serif', serif;
    display: block;
    padding: 2% 0;
    font-size: 16px;
    text-align: center;
    font-weight: 600;
    letter-spacing: .1em;
    color: #FFF;
    transition: .3s;
}
.top-menu-list li a:hover {
    color: #000;
    background-color: #e30012;
}

.mv-cast {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
    width: 54%;
    z-index: 5;
}
.mv-staff {
    position: absolute;
    top: 87%;
    left: 50%;
    transform: translateX(-50%);
    width: 44%;
    z-index: 5;
}

.mv .bn_special_movie {
  position: absolute;
  bottom: 30%;
  right: 9%;
  width: 13%;
  z-index: 5;
}
.mv .bn_dvd {
    position: absolute;
    bottom: 48%;
    right: 9%;
    width: 13%;
    z-index: 5;
}


@media screen and (max-width: 1500px) {
  .top-menu-box {
    bottom: 10%;
  }
}

@media screen and (max-width: 1200px) {
  .mv .bn_special_movie {
    bottom: 27%;
  }
}

@media screen and (max-width: 1000px) {
  .top-menu-list li a {
    font-size: 1.6vw;
  }
  .mv .bn_special_movie {
    bottom: 28%;
  }
}

@media screen and (max-width: 768px) {
    .mv-txt {
        position: absolute;
        top: 4%;
        left: 4%;
        width: 6.5%;
        z-index: 5;
    }
    .mv-kv-01 {
        padding-top: 226.66%;
        background-image: url(../images/common/mv_kv_01_sp.jpg);
        background-size: cover;
        z-index: 1;
    }
    .mv-kv-02,
    .mv-kv-03 {
        display: none;
    }
    .mv-directed {
        top: 25%;
        width: 44%;
    }
    .mv-ttl {
        top: 29%;
        width: 72%;
    }
    .mv-roadshow {
        top: 41%;
        width: 64%;
    }
    .mv-cast {
        top: 46%;
        width: 73%;
    }
    .top-menu-box {
        top: auto;
        bottom: 2%;
    }
    .mv-staff {
        top: auto;
        bottom: 0;
        width: 90%;
    }
    .mv-tw {
        top: 2%;
        right: 4%;
        width: 7%;
    }
    .top-menu-list {
      justify-content: flex-start;
    }
    .top-menu-list li {
        width: 47%;
        max-width: 47%;
        margin: 1.5% 1.5%;
    }
    .top-menu-list li a {
      font-size: 2.5vw;
    }
    
    .mv .bn_special_movie {
      bottom: 33%;
      right: 1%;
      width: 30%;
      z-index: 5;
    }
    .mv .bn_dvd {
        bottom: 33%;
        left: 1%;
        width: 30%;
        z-index: 5;
    }
}



/********************
full contents
2020.6
********************/

.sec {
  position: relative;
  color: #fff;
  font-size: 14px;
  line-height: 1.8;
  font-feature-settings: "palt";
  letter-spacing: 0.125em;
}

.sec h2 {
  font-family: 'Noto Serif', serif;
  font-size: 24px;
  font-weight: 700;
  color: #95B1CF;
  text-align: center;
}

.sec .blind {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  visibility: visible !important;
  -webkit-animation-fill-mode: forwards; 
  animation-fill-mode: forwards;
}
.banner_movie{
  padding-bottom: 40px;
  background-color: #07081a;
}
.bnr_center{
  text-align: center;
}
.banner_movie img{
  width:150px;
  
}

@media screen and (max-width: 768px) {
  .banner_movie{
    background-color: #000;
  }
}

.bgfix1 {
  height: 45vw;
  background: url("../images/full/bgfix1.jpg") center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.bgfix2 {
  height: 45vw;
  background: url("../images/full/bgfix2.jpg") center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

@media screen and (max-width: 768px) {
  .sec {
    font-size: 13px;
  }
  .sec h2 {
    width: 90%;
    margin: 0 auto;
    font-size: 5vw;
  }
  .bgfix1 {
    height: 84vw;
    background: url("../images/full/bgfix1_sp.jpg") center center no-repeat;
    background-size: 100% auto;
  }
  .bgfix2 {
    height: 42vw;
    background: url("../images/full/bgfix2.jpg") center center no-repeat;
    background-size: 100% auto;
  }
}

.intro {
  padding: 100px 0;
  background: url("../images/full/intro_bg.jpg") center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.intro .inner {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}
.intro .ph {
  width: 90%;
  margin: 3% auto 4%;
}
.intro .tx {
  width: 90%;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .intro {
    padding: 50px 0;
    background: #000;
  }
  .intro .inner {
    width: 100%;
    max-width: 100%;
  }
  .intro .ph {
    width: 100%;
  }
}

.story {
  padding: 15% 0 100px;
  background: url("../images/full/story_bg.jpg") left top no-repeat;
  background-size: 70% auto;
}
.story .inner {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}
.story h2 {
  text-align: right;
}
.story h3 {
  margin: 2.5% 0 3.5%;
  text-align: right;
  color: #D30012;
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  font-weight: 700;
}
.story h3 br.sp {
  display: none;
}
.story .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 4% 0 0;
}
.story .ph {
  width: 24%;
}

@media screen and (max-width: 768px) {
  .story {
    padding: 10% 0 0;
  }
  .story .inner {
    width: 100%;
    max-width: 100%;
  }
  .story h3 {
    width: 90%;
    margin: 2.5% auto 3.5%;
    font-size: 4.75vw;
  }
  .story h3 br.sp {
    display: inline;
  }
  .story .tx {
    width: 90%;
    margin: 0 auto 6%;
  }
  .story .ph {
    width: 50%;
  }
}

.pnote {
  padding: 100px 0;
  background: url("../images/full/pnote_bg.jpg") center center no-repeat;
  background-size: cover;
}
.pnote .inner {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
.pnote h2 {
  text-align: right;
}
.pnote .wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 4% 0 0;
}
.pnote .wrap div {
  width: calc(50% - 1px);
}
.pnote .wrap div:first-of-type {
  border-right: 1px solid #80712C;
  border-bottom: 1px solid #80712C;
}
.pnote .wrap div:nth-of-type(2) {
  border-bottom: 1px solid #80712C;
}
.pnote .wrap div:nth-of-type(3) {
  border-right: 1px solid #80712C;
}
.pnote a {
  position: relative;
  display: block;
  width: 100%;
  color: #fff;
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  font-weight: 700;
  transition: .25s;
}
.pnote a::before {
  content: "";
  display: block;
  padding-top: 35%;
}
.pnote a:hover {
  background: rgba(0,0,0,.35);
}
.pnote a p {
  position: absolute;
  top: 50%;
  left: 15%;
  width: 70%;
  transform: translateY(-50%);
}

@media screen and (max-width: 1600px) {
  .pnote a {
    font-size: 1.75vw;
  }
}

@media screen and (max-width: 768px) {
  .pnote {
    padding: 0;
    background: #000;
  }
  .pnote .inner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
  .pnote h2 {
    margin: 0;
    padding: 1em;
    text-align: center;
  }
  .pnote .wrap {
    margin: 0;
    background: url("../images/full/pnote_bg_sp.jpg") center center no-repeat;
    background-size: cover;
  }
  .pnote .wrap div {
    width: 100%;
    border-top: 1px solid #000;
  }
  .pnote .wrap div:first-of-type,
  .pnote .wrap div:nth-of-type(2),
  .pnote .wrap div:nth-of-type(3) {
    border-right: none;
    border-bottom: none;
  }
  .pnote .wrap div:first-of-type {
    border-top: none;
  }
  .pnote a {
    text-align: center;
    font-size: 4vw;
  }
  .pnote a::before {
    padding-top: 35%;
  }
}

.cast {
  background: url("../images/full/cast_bg.jpg") center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.cast .set {
  position: relative;
  width: 50%;
  height: 100%;
  margin: 0 0 0 50%;
  padding: 8% 6%;
  box-sizing: border-box;
  background: rgba(5,28,45,.55);
  z-index: 2;
}
.cast .inner {
  width: 100%;
  max-width: 600px;
}
.cast h2 {
  margin-bottom: 6%;
  text-align: left;
}
.cast .card {
  margin: 8% 0 0;
}
.cast .role {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 0 1%;
  padding: 0.2em 0.5em;
  box-sizing: border-box;
  color: #80712C;
  border: 1px solid #80712C;
  transition: 1s;
}
.cast .role:hover {
  color: #D30012;
  border: 1px solid #D30012;
}
.cast .role::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: .25em;
  font-size: 24px;
  transform: translateY(-50%);
}
.cast .role .chara_jp {
  display: inline-block;
  margin: 0 1em 0 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
}
.cast .role .chara_en {
  display: inline-block;
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
}
.cast .name_jp {
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
}
.cast .name_en {
  font-family: 'Noto Serif JP', serif;
  font-size: 13px;
}

@media screen and (max-width: 1000px) {
  .cast .role .chara_jp {
    font-size: 1.65vw;
  }
}

@media screen and (max-width: 768px) {
  .cast {
    padding-top: 83vw;
    background: url("../images/full/cast_bg_sp.jpg") center top no-repeat;
    background-size: 100% auto;
    background-attachment: scroll;
  }
  .cast .set {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 8% 6%;
    background: none;
  }
  .cast h2 {
    margin-bottom: 0;
    text-align: center;
  }
  .cast .role .chara_jp {
    font-size: 3.5vw;
  }
  .cast .role .chara_en {
    font-size: 2.5vw;
  }
  .cast .name_jp {
    font-size: 4vw;
  }
  .cast .name_en {
    font-size: 2.25vw;
  }
}

.staff {
  background: url("../images/full/staff_bg.jpg") center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.staff .set {
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: 50%;
  height: 100%;
  margin: 0;
  padding: 8% 6%;
  box-sizing: border-box;
  background: rgba(5,28,45,.55);
  z-index: 2;
}
.staff .inner {
  width: 100%;
  max-width: 600px;
}
.staff h2 {
  margin-bottom: 6%;
  text-align: left;
}
.staff .card {
  margin: 8% 0 0;
}
.staff .role {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 0 1%;
  padding: 0.2em 0.5em;
  box-sizing: border-box;
  color: #80712C;
  border: 1px solid #80712C;
  transition: 1s;
}
.staff .role:hover {
  color: #D30012;
  border: 1px solid #D30012;
}
.staff .role::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: .25em;
  font-size: 24px;
  transform: translateY(-50%);
}
.staff .role .position {
  display: inline-block;
  margin: 0 1em 0 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
}
.staff .name {
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
}

@media screen and (max-width: 1000px) {
  .staff .role .position {
    font-size: 1.65vw;
  }
}

@media screen and (max-width: 768px) {
  .staff {
    padding-top: 83vw;
    background: url("../images/full/staff_bg_sp.jpg") center top no-repeat;
    background-size: 100% auto;
    background-attachment: scroll;
  }
  .staff .set {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 8% 6%;
    background: none;
  }
  .staff h2 {
    margin-bottom: 0;
    text-align: center;
  }
  .staff .role .position {
    font-size: 3.5vw;
  }
  .staff .name {
    font-size: 4vw;
  }
}

.ft {
  padding: 50px 0 0;
}
.ft .inner {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}
.ft h2 {
  width: 56%;
  margin: 0 auto;
}
.ft h3 {
  width: 52%;
  margin: -2% auto 3%;
}
.ft h4 {
  width: 90%;
  margin: 0 auto;
}
.ft h5 {
  width: 80%;
  margin: 2% auto;
}
.ft h6 {
  width: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .ft {
    padding: 20px 0 0;
  }
  .ft h2 {
    width: 90%;
  }
  .ft h3 {
    width: 80%;
    margin: -8% auto 6%;
  }
  .ft h4 {
    width: 70%;
  }
  .ft h5 {
    width: 80%;
    margin: 5% auto 1%;
  }
  .ft h6 {
    width: 100%;
  }
}

#cboxContent {
  background: #000;
}
.modalWrap {
  display: none;
}

.modalSet {
  padding: 60px;
  color: #fff;
  background: #000;
}
.modalSet .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.modalSet .txSet {
  width: 100%;
  margin-top: 1.5em;
}
.modalSet.modal_cast .txSet {
  width: 72%;  
}
.modalSet.modal_cast .phSet {
  width: 24%;
  margin-top: 1.5em;
}
.modalSet .role {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 0 1%;
  padding: 0.2em 0.5em;
  box-sizing: border-box;
  color: #80712C;
  border: 1px solid #80712C;
}
.modalSet.modal_cast .role .chara_jp {
  display: inline-block;
  margin: 0 1em 0 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
}
.modalSet.modal_cast .role .chara_en {
  display: inline-block;
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
}
.modalSet.modal_cast .name_jp {
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
}
.modalSet.modal_cast .name_en {
  font-family: 'Noto Serif JP', serif;
  font-size: 13px;
}
.modalSet.modal_staff .role .position {
  display: inline-block;
  margin: 0 1em 0 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
}
.modalSet.modal_staff .name {
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
}
.modalSet h1 {
  width: 100%;
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
}
.modalSet h1 span {
  font-size: 14px;
}
.modalSet.modal_cast h1,
.modalSet.modal_staff h1 {
  margin: 0 0 0.5em;
}
.modalSet.modal_cast h1 span {
  display: inline-block;
}
.modalSet .tx {
  width: 100%;
  margin-top: 1.5em;
}

@media screen and (max-width: 768px) {
  .modalSet {
    padding: 40px;
  }
  .modalSet.modal_cast .txSet {
    width: 100%;  
  }
  .modalSet.modal_cast .phSet {
    width: 100%;
    margin-top: 1.5em;
  }
  .modalSet .tx {
    font-size: 13px;
  }
}