@charset "UTF-8";
/* CSS Document */

body {
font-family: dnp-shuei-gothic-kin-std, sans-serif;
font-weight: 500;
font-style: normal;
background: #000;
width: 100%; height:100%;
font-size:14px;
line-height:1.8em;
color:#fff;
margin: 0px;
letter-spacing: 1px;
}

.pc{ display: none;}

#wrap{
width: 100%;
}



@keyframes  fadeanim {
0% { opacity: 0;}
100% { opacity: 1;}
}

@keyframes  fadescale {
0% { opacity: 0; transform: scale(1.1,1.1);}
100% { opacity: 1; transform: scale(1,1);}
}

@keyframes  fadescale2 {
0% { opacity: 0; transform: scale(1,1);}
100% { opacity: 1; transform: scale(1.05,1.05);}
}


#trailer{
margin-top:-60px;
padding-top:60px;
}


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

main

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

#content {
width: 100%; height: 100%;
position: relative;
}

#mainArea,#mainArea2 {
width: 100%; height: 575px;
position: relative;
overflow: hidden;
}

#mainBg{
background: url("../images/top/bg01_sp.jpg") no-repeat center;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
pointer-events: none;
}

@keyframes bgAnime {
0% { opacity: 0; }
25% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; }
}

@keyframes bgAnime2 {
0% { opacity: 0; }
50% { opacity: 0; }
75% { opacity: 1; }
100% { opacity: 0; }
}

@keyframes bgAnime3 {
0% { opacity: 0; }
30%{ opacity: 0.3; }
60% { opacity: 0; }
80% { opacity: 0.2; }
100% { opacity: 0; }
}

#mainBg01{
background: url("../images/top/bg02_sp.jpg") no-repeat center;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
animation  : bgAnime 4s infinite;
transform: translate3d(0,0,0);
}

#mainBg02{
background: url("../images/top/bg03_sp.jpg") no-repeat center;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 2;
animation  : bgAnime2 3s infinite;
transform: translate3d(0,0,0);
display: none;
}

#mainBg03{
background: #000;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 3;
animation  : bgAnime3 2s infinite;
transform: translate3d(0,0,0);
}

#iTwitter{
background: url("../images/nav/twitter.png") no-repeat;
background-size: contain;
width: 40px; height: 40px;
position: absolute;
top: 5px; right: 5px;
z-index: 20;
text-indent: -9999px;
transition: all 0.3s ease;
cursor: pointer;
}

#iTwitter:hover{ opacity: 0.7;}

#iTwitter a{
width: 100%; height: 100%;
display: block;
}


#logo{
background: url("../images/top/logo.png") no-repeat center;
background-size: contain;
width: 90%; height: 28%;
position: absolute;
top: 12%; left: 5%;
z-index: 10;
animation: fadescale 3s ease-out 3.5s forwards;
transform: translate3d(0,0,0);
opacity: 0;
}

#roadshow_dolby{
background: url("../images/top/roadshow_dolby.png") no-repeat center bottom;
background-size: contain;
width: 25%; height: 8%;
position: absolute;
bottom: 15px; right: 52%;
z-index: 5;
animation: fadeanim 1.5s ease-out 4.5s forwards;
transform: translate3d(0,0,0);
opacity: 0;
}

#roadshow_theater{
background: url("../images/top/roadshow_theaters.png") no-repeat center bottom;
background-size: contain;
width: 25%; height: 8%;
position: absolute;
bottom: 15px; left: 52%;
z-index: 5;
animation: fadeanim 1.5s ease 4.8s forwards;
transform: translate3d(0,0,0);
opacity: 0;
}

#credit{
background: url("../images/top/credit.png") no-repeat center bottom;
background-size: contain;
width: 60%; height: 9%;
position: absolute;
top: 44%; left: 20%;
z-index: 5;
animation: fadeanim 1.5s ease 3.7s forwards;
opacity: 0;
transform: translate3d(0,0,0);
}

#arashiAll{
width: 100%; height: 100%;
position: absolute;
bottom: 0; left: 0;
z-index: 2;
}

#arashi01{ background: url("../images/top/arashi01_sp.png") no-repeat center bottom; z-index: 1;
animation: fadeanim 2s ease 2s forwards;}
#arashi02{ background: url("../images/top/arashi02_sp.png") no-repeat center bottom; z-index: 2;
animation: fadeanim 2s ease 2.3s forwards;}
#arashi03{ background: url("../images/top/arashi03_sp.png") no-repeat center bottom; z-index: 3;
animation: fadeanim 2s ease 2.6s forwards;}
#arashi01,#arashi02,#arashi03{
background-size: contain;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
opacity: 0;
transform: translate3d(0,0,0);
}


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

special

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

#main_sp{
background: url("../images/top2/main_sp.jpg") no-repeat center;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
}

#main_sp_logo{
background: url("../images/top2/logo_sp.png") no-repeat center;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 2;
animation: fadeanim 1.5s ease 1.5s forwards;
opacity: 0;
}

#main_sp_logo2{
background: url("../images/top2/logo_sp.png") no-repeat center;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 30px; left: 0;
z-index: 2;
animation: fadeanim 1.5s ease 1.5s forwards;
opacity: 0;
}

#main_sp_credit{
background: url("../images/top2/credit_sp.png") no-repeat center;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 3;
animation: fadeanim 1.5s ease 2s forwards;
opacity: 0;
}

#main_sp_credit2{
background: url("../images/top2/credit_sp.png") no-repeat center;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 270px; left: 0;
z-index: 3;
animation: fadeanim 1.5s ease 2s forwards;
opacity: 0;
}


#main_sp_roadshow{
background: url("../images/top2/roadshow_sp.png") no-repeat center;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 4;
animation: fadeanim 1.5s ease 2.5s forwards;
opacity: 0;
}

#main_sp_catch{
background: url("../images/top2/catch_sp.png") no-repeat center;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 3;
animation: fadeanim 1.5s ease 2.5s forwards;
opacity: 0;
}

#main_sp_catch2{
background: url("../images/top2/catch_sp.png") no-repeat center;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 20px; left: 0;
z-index: 3;
animation: fadeanim 1.5s ease 2.5s forwards;
opacity: 0;
}



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

bnr

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

#bnr_lv{ display: none;}

#bnr_spAll{
background-color: #370000;
width: 100%;
padding: 10px 0;
line-height: 0;
}

.bnr_sp{
width: 90%;
margin: 0 auto;
}


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

trailer

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


#trailerAll{
background: url("../images/top/trailer_bg.jpg") no-repeat center;
width: 100%;
padding: 30px 0;
}

#topmovarea{
width:320px;
margin:0 auto;
padding: 0;
line-height: 0;
}

#topmovarea .movie {
width: 320px;
margin: 0 auto;
}

#topmovarea .movie .inner {
position: relative;
width: 320px;
height: 180px;
overflow: hidden;
margin: 0 auto;
}

#topmovarea .movie .inner iframe {
width: 320px;
height: 180px;
}

#topmovarea .movie .tab_area {
width: 320px;
display: flex;
flex-wrap: wrap;
margin: 1px auto;
}

#topmovarea .movie .tab_area li {
width: 160px;
line-height: 40px;
text-align: center;
font-size: 11px;
font-weight: 700;
margin: 0;
border: 1px solid #bed0dd;
}

#topmovarea .movie .tab_area li a {
width: 100%; height: 100%;
display: block;
text-decoration: none;
background: #0c1838;
color: #fff;
padding: 0;
float: left;
}

#topmovarea .movie .tab_area li a.active{
background: #1b406d;
color: #fff;
}

#topmovarea .movie .tab_area .wide3{ width: 100%; height: 40px;}
#topmovarea .movie .tab_area .wide3b{ width: 50%; height: 40px;}


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

arashi

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

#arashiArea{
width: 375px; height: 150px;
position: relative;
overflow: hidden;
pointer-events: none;
}

#arashiImg01all{left: 0;}
#arashiImg02all{left: 20%;}
#arashiImg03all{left: 40%;}
#arashiImg04all{left: 60%;}
#arashiImg05all{left: 80%;}
#arashiImg01all,#arashiImg02all,#arashiImg03all,#arashiImg04all,#arashiImg05all{
width: 75px; height: 150px;
overflow: hidden;
position: absolute;
top: 0; 
z-index: 1;
}

#arashiImg01{ background: url("../images/top/cast_img01.jpg") no-repeat center;}
#arashiImg02{ background: url("../images/top/cast_img02.jpg") no-repeat center;}
#arashiImg03{ background: url("../images/top/cast_img03.jpg") no-repeat center;}
#arashiImg04{ background: url("../images/top/cast_img04.jpg") no-repeat center;}
#arashiImg05{ background: url("../images/top/cast_img05.jpg") no-repeat center;}
#arashiImg01,#arashiImg02,#arashiImg03,#arashiImg04,#arashiImg05{
background-size: cover;
width: 100%; height: 100%;
}



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

about

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

#aboutArea {
background: url("../images/top/intro_bg_sp.jpg") no-repeat center;
background-size: cover;
width: 100%;
padding: 0 0 30px;
position: relative;
overflow: hidden;
pointer-events: none;
}


#aboutCatch{
width: 100%;
text-align: center;
font-family: shippori-mincho, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 24.5px; letter-spacing: 1px;
line-height: 1.3em;
margin: 35px auto 0;
}

#aboutCatch2{
width: 100%;
text-align: center;
font-family: shippori-mincho, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 13.5px; letter-spacing: .5px;
line-height: 1.6em;
margin: 16px auto 25px;
}

#aboutTxt{
width: 85%;
font-size: 11px; letter-spacing: .5px;
line-height: 2em;
margin: 0 auto;
text-align: justify;
text-justify: inherit;
}

.aboutTxtCenter{
text-align: center;
}

.aboutM{
font-family: vdl-v7mincho, sans-serif;
font-weight: 500;
font-style: normal;
width: 100%;
text-align: center;
font-size: 12px; letter-spacing: .5px;
line-height: 1.7em;
padding: 0 0 5px;
}

.txtBlock{ width: 100%;}
.txtMarginS{ letter-spacing: 0px;}

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

5x20

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

#five20Area {
background: url("../images/top/5x20_sp.jpg") no-repeat center;
background-size: cover;
width: 100%;
position: relative;
overflow: hidden;
pointer-events: none;
}

#five20Area:before{
content:"";
display: block;
padding-top: 38.6%;
}



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

dolby 

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

#dolbyAll{
width: 100%; height: 450px;
position: relative;
overflow: hidden;
}

#dolbyMain{
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
}

.swiper-container {
width: 100%; height: 100%;
}

.swiper-slide {
text-align: center;
font-size: 18px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}

.swiper-button-next{
background: url("../images/nav/next_sp.png") no-repeat right;
background-size: contain;
width: 25px; height: 50px;
top: 50%; margin-top: -27px;
right: 5px;
transition: all .3s ease;
filter: drop-shadow(0px 0px 5px rgba(0,0,0,1));
}

.swiper-button-prev{
background: url("../images/nav/prev_sp.png") no-repeat left;
background-size: contain;
width: 25px; height: 50px;
top: 50%; margin-top: -27px;
left: 5px;
transition: all .3s ease;
filter: drop-shadow(0px 0px 5px rgba(0,0,0,.5));
}


#dolbyBg01{background: url("../images/top/dolby_bg01_sp.jpg") no-repeat center;}
#dolbyBg02{background: url("../images/top/dolby_bg02_sp.jpg") no-repeat center;}
#dolbyBg03{background: url("../images/top/dolby_bg03_sp.jpg") no-repeat center;}
#dolbyBg04{background: url("../images/top/dolby_bg04_sp.jpg") no-repeat center;}
#dolbyBg01,#dolbyBg02,#dolbyBg03,#dolbyBg04{
background-size: cover;
width: 100%; height: 100%;
position: relative;
overflow: hidden;
pointer-events: none;
}

#dolby01Catch{
width: 100%;
text-align: center;
font-family: shippori-mincho, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 16px; letter-spacing: 1.3px;
line-height: 1.4em;
position: absolute;
top: 18px; left: 0;
z-index: 2;
}

#dolby01logo{
background: url("../images/top/dolby_logo.png") no-repeat center;
background-size: contain;
width: 125px; height: 20px;
position: absolute;
top: 71px; left: 125px;
z-index: 10;
text-indent: -9999px;
}

#dolby01Txt{
width: 78%;
text-align: center;
font-size: 10px; letter-spacing: .2px;
line-height: 1.7em;
position: absolute;
top: 100px; left: 11%;
z-index: 2;
}

#dolby02Catch,#dolby03Catch,#dolby04Catch{
width: 285px;
text-align: center;
font-family: shippori-mincho, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 16px; letter-spacing: 1px;
line-height: 1em;
padding: 0 0 15px;
border-bottom: 1px solid #fff;
position: absolute;
top: 47px; left: 45px;
z-index: 2;
}

#dolby02Txt,#dolby03Txt,#dolby04Txt{
width: 285px;
text-align: center;
font-size: 11px; letter-spacing: 1px;
line-height: 1.8em;
position: absolute;
top: 95px; left: 45px;
z-index: 2;
}




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

comment

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

#comment{ background: #000;}

#commentArea {
background: #000 url("../images/top/comment_bg_sp.jpg") no-repeat center;
background-size: cover;
width: 100%; height: 760px;
position: relative;
overflow: hidden;
pointer-events: none;
}

#commentTxt{
width: 100%;
text-align: center;
font-family: shippori-mincho, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 12px; letter-spacing: 1px;
line-height: 2.8em;
position: absolute;
top: 300px; left: 0;
z-index: 2;
}

#commentNM{
width: 100%;
text-align: center;
font-family: shippori-mincho, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 18px; letter-spacing: 2px;
line-height: 1em;
position: absolute;
bottom: 30px; left: 0;
z-index: 2;
}

#billingArea {
background: #000 url("../images/top/credit_bg_sp.jpg") no-repeat center top;
background-size: 100% auto;
width: 100%; padding: 190px 0 30px;
position: relative;
overflow: hidden;
}


#shareArea{
width: 100%; text-align: center;
font-family: din-condensed, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
line-height: 1em;
color: #8598aa;
}

#shareArea a{
color: #fff;
text-decoration: none;
transition: all .3s;
}

#shareArea a:hover{ opacity: 0.7;}

#billing{
width: 100%; text-align: center;
font-size: 9px;
line-height: 1.8em;
letter-spacing: .5px;
color: #3071b9;
padding: 20px 0 0 0;
}



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

footer

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

footer{
background: #fff;
width: 100%;
padding: 10px 0 0 0;
}

#corpAll{
width: 293px; height: 50px;
margin: 0 auto;
}

#jstorm{
background: url("../images/top/corp_js.png") no-repeat center;
background-size: contain;
width: 75px; height: 50px;
float: left;
transition: all 0.3s ease;
}

#shochiku{
background: url("../images/top/corp_shochiku.png") no-repeat center;
background-size: contain;
width: 126px; height: 50px;
float: left;
transition: all 0.3s ease;
}

#gaga{
background: url("../images/top/corp_gaga.png") no-repeat center;
background-size: contain;
width: 92px; height: 50px;
float: left;
transition: all 0.3s ease;
}

#jstorm a,#shochiku a,#gaga a{
width: 100%; height: 100%;
display: block;
text-indent: -9999px;
}

#jstorm:hover,#shochiku:hover,#gaga:hover{
opacity: 0.7;
cursor: pointer;
}

#dolbycopy{
width: 100%;
padding: 25px 0 80px;
margin: 0 auto;
font-size: 8px;
line-height: 1.7em;
text-align: center;
color: #A1A1A1;
letter-spacing: .5px;
}