@charset "UTF-8";
/* CSS Document */
@import url('//fonts.googleapis.com/css?family=Roboto');

/*-------------------------------------------------------
BASE
-------------------------------------------------------*/
html { font-size: 62.5%;}
body { background: #333;	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; 
	color: #000;	text-align: center; min-width: 1140px; counter-reset: count-number; overflow-x: hidden;}

a {	text-decoration: none; outline: none;}
.cf:before,.cf:after {	display: table;	content: " ";}
.cf:after {	clear: both;}

::selection{ background: #01c7ff; color: #FFF;}
::-moz-selection{ background: #104497; color: #FFF;  }

img { -webkit-backface-visibility: hidden;}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.pc { display: block !important; }
.sp { display: none !important; }


/*loader
------------------------------------------------------- */
#loader {
    width: 180px;
    height: 180px;
    display: none;
    position: fixed;
    _position: absolute; /* IE6対策 */
    top: 50%;
    left: 50%;
    margin-top: -90px; /* heightの半分のマイナス値 */
    margin-left: -90px; /* widthの半分のマイナス値 */
    z-index: 100;}
 
#fade {
    width: 100%;
    height: 100%;
    display: none;
    background-color: #333;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 50;}


/*-------------------------------------------------------
 INDEX
-------------------------------------------------------*/
#container{
  position: relative;
}
#containerA { position: relative; background: #545d57; width: 100%;}

@-webkit-keyframes ani-item {
  100% { opacity: 1; }
}
@keyframes ani-item {
  100% { opacity: 1; }
}

.img-main { transition: ease; opacity: 0; }
.img-main img { width: 100%; height: auto; vertical-align: bottom;}

.catch { position: absolute; transition: ease; opacity: 0; }
.catch--01{top: 30px; left: 20px; }
.catch--02{top: 30px; right: 20px; }
.catch img { width: 3.1vw; height: auto; }
.catch--01 img,.catch--02 img{ width: calc(38vw / 1920 * 100)}

.txt-copy { position: absolute; top: calc(315vw / 1920 * 100); left: calc(50% - 304.5vw / 1920 * 100); transition: ease; opacity: 0; }
.txt-copy img { width: calc(609vw / 1920 * 100); height: auto;}

.logo { position: absolute; top: calc(395vw / 1920 * 100); left: calc(50% - 241.5vw / 1920 * 100); text-align: ease; opacity: 0; }
.logo img { width: calc(483vw / 1920 * 100); height: auto;}

.txt-cast { position: absolute; top: calc(685vw / 1920 * 100); left: calc(50% - 382vw / 1920 * 100); transition: ease; opacity: 0; }
.txt-cast img { width: calc(764vw / 1920 * 100); height: auto;}

.roadshow { position: absolute; top: calc(844vw / 1920 * 100); left: calc(50% - 71.5vw / 1920 * 100); transition: ease; opacity: 0; }
.roadshow img { width: calc(143vw / 1920 * 100); height: auto;}



.bar-top{position: absolute; top: calc(30vw / 1920 * 100); left: 0; display: flex; justify-content: center; align-items: center; width: 100%;}
.ico-twitter {  top: 2.6%; left: 8.3%; transition: ease; opacity: 0;}
.ico-twitter img { width: calc(25vw / 1920 * 100); height: auto;}
.ico-twitter a { display: inline-block;}
.ico-twitter a:hover {transform: translateY(-2px); opacity: 0.5; transition: 0.3s;}

.ico-instagram {position: relative; transition: ease; opacity: 0; margin-left: calc(30vw / 1920 * 100);}
.ico-instagram img { width: calc(20vw / 1920 * 100); height: auto;}
.ico-instagram a { display: inline-block;}
.ico-instagram a:hover {transform: translateY(-2px); opacity: 0.5; transition: 0.3s;}
.ico-instagram:before{display: block;position: absolute;content:'';background: white; top: calc(-1vw / 1920 * 100); left: calc(-16vw / 1920 * 100); width: 1px; height: calc(22vw / 1920 * 100);}

.bt-nav { transition: ease; opacity: 0; }
.bt-nav--news { padding: 0 calc(20vw / 1920 * 100); margin-left: calc(35vw / 1920 * 100);}
.bt-nav--trailer { margin-left: calc(33vw / 1920 * 100); margin-right: calc(10vw / 1920 * 100);}
.bt-nav img { width: 9vw; height: auto;}
.bt-nav a, .bt-nav span { color: white; display: inline-block; font-family: 'Roboto', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: calc(18vw / 1920 * 100); cursor: pointer;}
.bt-nav a:hover,.bt-nav span:hover { transform: translateY(-2px); opacity: 0.7; transition: 0.3s;}


.is-loaded .ani-item-01 { -webkit-animation: ani-item 1.2s ease 1.0s 1 forwards; animation: ani-item 1.2s ease 1.0s 1 forwards;}
.is-loaded .ani-item-02 { -webkit-animation: ani-item 2.0s ease 2.0s 1 forwards; animation: ani-item 2.0s ease 2.0s 1 forwards;}
.is-loaded .ani-item-03 { -webkit-animation: ani-item 2.5s ease 2.5s 1 forwards; animation: ani-item 2.5s ease 2.5s 1 forwards;}
.is-loaded .ani-item-04 { -webkit-animation: ani-item 2.8s ease 2.8s 1 forwards; animation: ani-item 2.8s ease 2.8s 1 forwards;}
.is-loaded .ani-item-05 { -webkit-animation: ani-item 2.8s ease 2.8s 1 forwards; animation: ani-item 2.8s ease 2.8s 1 forwards;}
.is-loaded .ani-item-06 { -webkit-animation: ani-item 2.9s ease 2.9s 1 forwards; animation: ani-item 2.9s ease 2.9s 1 forwards;}
.is-loaded .ani-item-07 { -webkit-animation: ani-item 2.9s ease 2.9s 1 forwards; animation: ani-item 2.9s ease 2.9s 1 forwards;}
.is-loaded .ani-item-08 { -webkit-animation: ani-item 2.9s ease 2.9s 1 forwards; animation: ani-item 2.9s ease 2.9s 1 forwards;}
.is-loaded .ani-item-09 { -webkit-animation: ani-item 2.9s ease 2.9s 1 forwards; animation: ani-item 2.9s ease 2.9s 1 forwards;}
.is-loaded .ani-item-10 { -webkit-animation: ani-item 3.1s ease 3.1s 1 forwards; animation: ani-item 3.1s ease 3.1s 1 forwards;}
.is-loaded .ani-item-11 { -webkit-animation: ani-item 3.1s ease 3.1s 1 forwards; animation: ani-item 3.1s ease 3.1s 1 forwards;}


/*FOOTER*/
.footer { width: 100vw; background: #333; text-align: center; color: #FFF; padding-top: 30px; padding-bottom: 0.8%; vertical-align: bottom; opacity: 0;}

.sns-share { display: block; margin: 0 auto 18px;}
.share-li { display: inline-table; margin-right: 3px; vertical-align: top;}
.credit_01 { font-size: 1.4rem; font-weight: bold;}
.credit_02 { font-size: .9rem; margin-top: 12px;}
.credit_03 { font-size: .8rem; margin-top: 8px; display: inline-table;}
.credit_04 { display: inline-table;  vertical-align: middle;}
.credit_04 img { width: 20px; height: auto;}
.credit_05 {display: block; width: 462px; margin: 0 auto; margin-top: -35px; text-align: right;}
.credit_05 img {display: inline-block; width: 33px; height: auto; }


/* MODAL */
body.is-show-modal, body.is-show-nav, body.is-show-agreement {
  overflow: hidden;
  height: 100vh
}

@media screen and (max-width:768px) {
  body.is-show-modal, body.is-show-nav, body.is-show-agreement {
    overflow: hidden;
    height: 100vh
  }
}

.is-show-modal .modal {
opacity: 1;
pointer-events: auto
}

.is-show-modal .modal-box {
pointer-events: auto
}

.is-show-modal .modal-movie__item.is-active {
opacity: 1;
pointer-events: auto
}

.is-show-modal .modal-movie-btn__item {
pointer-events: auto
}

.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity .7s ease
}

.modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .7);
z-index: 9
}

.modal-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
pointer-events: none;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center
}

.modal-box {
position: relative;
pointer-events: none
}

.modal-box .close-btn {
  background: #333;
  position: absolute;
  top: -63px;
  right: 0;
  width: 43px;
  height: 43px;
  cursor: pointer;
  padding-top: 0;
  cursor: pointer;

  transition: opacity 0.7s ease;
}

.modal-box .close-btn:hover {
  opacity: 0.7;
}

.modal-box .close-btn span{
  position: absolute;
  display: block;
  background: #fff;
  top: 50%;
  left: 6px;
  width: 30px;
  height: 2px;
}

.modal-box .close-btn span:nth-of-type(1){
  transform: rotate(45deg);
}

.modal-box .close-btn span:nth-of-type(2){
  transform: rotate(-45deg);
}

.modal-movie {
position: relative
}

.modal-movie__item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none
}

.modal-movie__item iframe {
width: 100%;
height: 100%
}

.modal-btn {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
justify-content: center;
margin-top: 10px
}

.modal-btn__item {
cursor: pointer;
color: #fff;
background: #333;
width: calc(50% - 5px);
height: 34px;
font-size: 15px;
line-height: 2.26;
text-align: center;
font-weight: 700
}

.modal-btn__item:hover {
color: #333;
background: #fff;
}

.modal-btn__item.is-active {
color: #333;
background: #fff
}

.modal-btn__item.is-active:hover {
color: #333;
background: #fff
}

.modal-btn__item:nth-of-type(2n) {
margin-left: 10px
}

.modal-btn__item:nth-of-type(n+3) {
margin-top: 10px
}



/*-------------------------------------------------------

Media queries

-------------------------------------------------------*/
@media screen and (max-width:750px){
 
    /*body{  min-width:initial;}*/
      a:hover {opacity: 1.0; }
      body{ overflow-x: hidden;}
      
    @media screen and (max-width: 667px) {
    html{ font-size: 62.5%;}
    body{ font-size: 1.4rem; position: relative;
        left: 0; overflow-x: hidden;min-width:initial;}


    .pc { display: none !important; }
    .sp { display: block !important; }
      
      img { vertical-align: top;}
      
    /*-------------------------------------------------------
      SP
    -------------------------------------------------------*/
    #containerA { position: relative; background: #545d57; width: 100vw; height: calc(1146vw / 768 * 100);}	
      
    .img-main { position: relative;}
    .img-main img {}

    .catch { top: calc(30vw / 768 * 100); left: unset; right: calc(30vw / 768 * 100); }
    .catch img { width: calc(40vw / 768 * 100); }

    .txt-copy { top: calc(524vw / 768 * 100); left: calc(50% - 274vw / 768 * 100); }
    .txt-copy img { width: calc(548vw / 768 * 100);}

    .logo { top: calc(600vw / 768 * 100); left: calc(50% - 226vw / 768 * 100); }
    .logo img { width: calc(452vw / 768 * 100);}

    .txt-cast { top: calc(868vw / 768 * 100); left: calc(50% - 354vw / 768 * 100); }
    .txt-cast img { width: calc(708vw / 768 * 100);}

    .roadshow { position: absolute; top: calc(1020vw / 768 * 100); left: calc(50% - 71.5vw / 768 * 100); }
    .roadshow img { width: calc(143vw / 768 * 100);}
      
      
    #containerB { position: relative; background: #333; width: 100%; padding: calc(46vw / 768 * 100) calc(46vw / 768 * 100) 0; }
    .bt-trailer{position: relative; background: url(../vi/oVaX4JfOONc/maxresdefault.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; width: calc(676vw / 768 * 100); height: calc(380vw / 768 * 100); opacity: 0;}
    .bt-trailer span{display: block; position: absolute; top: calc(50% - 62vw / 768 * 100); left: calc(50% - 62vw / 768 * 100); width: calc(124vw / 768 * 100);}
    .bt-trailer span img{width: 100%;}
    .bt-news-sp { display: inline-block; background: #e60012; width: 100%; color: #FFF; font-size: 1.6rem; margin-top: 6%; opacity: 0;vertical-align: middle;}
    .bt-news-sp a { display: flex; justify-content: center;align-items: center; background: #e60012; width: 100%; color: #FFF; height: calc(86vw / 768 * 100);}

    .bt-twitter-sp { display: inline-block; background: #FFF; width: 100%; color: #333; font-size: 1.6rem; margin-top: 5%;  opacity: 0;}
    .bt-twitter-sp a { position: relative; display: flex; justify-content: center;align-items: center; background: #FFF; width: 100%; color: #333; height: calc(86vw / 768 * 100);}
    .bt-ico-twitter {position: absolute; top: calc(23vw) / 768 * 100; left: calc(20vw / 768 * 100); display: inline-table; width: calc(49vw / 768 * 100); }
    .bt-ico-twitter img { width:100%}
      
    .bt-instagram-sp { display: inline-block; background: #FFF; width: 100%; color: #333; font-size: 1.6rem; margin-top: 5%; opacity: 0;}
    .bt-instagram-sp a { position: relative; display: flex; justify-content: center;align-items: center; background: #FFF; width: 100%; color: #333;height: calc(86vw / 768 * 100); }
    .bt-ico-instagram {position: absolute; top: calc(23vw) / 768 * 100; left: calc(23vw / 768 * 100); display: inline-table; margin-right: 3.0%; vertical-align: middle; width: calc(40vw / 768 * 100); }
    .bt-ico-instagram img { width: 100%;}
      
      

    /*FOOTER*/
    .footer { width: 100vw; background: #333; text-align: center; color: #FFF; padding: calc(40vw / 768 * 100) 0 calc(45vw / 768 * 100); vertical-align: bottom; opacity: 0;}
    .sns-share { display: block; margin: 0 auto;}
    .credit_01 { font-size: 1.0rem; margin-top: calc(30vw / 768 * 100);}
    .credit_02 { font-size: .9rem; margin-top: calc(14vw / 768 * 100);}
    .credit_03 { font-size: .8rem; margin-top: calc(14vw / 768 * 100); display: inline-table;}
    .credit_04 { display: inline-table;  vertical-align: bottom;}
    .credit_04 img { width: 14px; height: auto;vertical-align: bottom;}
    .credit_05 {width: calc(676vw / 768 * 100); margin-top: calc(-60vw / 768 * 100);}
    .credit_05 img {width: calc(60vw / 768 * 100);}

  }