body {
background: #000;
color: #fff;
font-family: source-han-sans-japanese, sans-serif;
font-weight: 500;
font-style: normal;
width: 100%;
height:100%;
font-size:12px;
line-height:1.5em;
margin: 0px;
letter-spacing: 1px;
}


@media screen and (orientation: landscape) {

#mainWarning{
	display:none;
}

}

@media screen and (orientation: portrait) {

#mainWarning{
background: #000 url("../images/warning.jpg") no-repeat center;
background-size:300px auto;
width:100%; height:100%;
position:fixed;
top:0; left:0;
z-index:200;
}

}


#wrap{
width: 100%;
height: 100%;
}

#content{
width: 100%; height: 100%;
min-width:1300px;
min-height:750px;
position:relative;
overflow:hidden;
}


/* ========================================

main

======================================== */

@keyframes mainslide {
from { background-position: 0 -50px; }
to { background-position: 0 0; }
}

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

@keyframes fadeanm {
from { opacity: 0; }
to { opacity: 1; }
}

#mainimgAll{
width: 77%; height: 100%; 
position: absolute;
top: 0; left: 0;
z-index: 1;
background-color: #434343;
}

#mainImg{
background: url("../images/top/img_main.jpg") no-repeat center top;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
animation: mainslide 6s ease-out forwards;
}

#logo{
background: url("../images/top/logo.png") no-repeat center bottom;
background-size: contain;
width: 96%; height: 22%;
position: absolute;
bottom: 20%; left: 2%;
z-index: 10;
animation: 2s fadeanm .7s ease forwards;
opacity: 0;
}

#roadshow{
background: url("../images/top/roadshowB.png") no-repeat center bottom;
background-size: contain;
width: 74%; height: 18%;
position: absolute;
bottom: 170px; left: 13%;
z-index: 10;
}

#roadshowCS{
background: url("../images/top/roadshowC.png") no-repeat center;
background-size: contain;
width: 60%; height: 9%;
position: absolute;
bottom: 150px; left: 20%;
margin-bottom: 20%;
z-index: 10;
}

#roadshowD{
background: url("../images/top/roadshowD.png") no-repeat center bottom;
background-size: contain;
width: 70%; height: 15%;
position: absolute;
bottom: 150px; left: 15%;
margin-bottom: 22%;
z-index: 10;
}

#roadshowD2{
background: url("../images/top/roadshowD.png") no-repeat center bottom;
background-size: contain;
width: 70%; height: 15%;
position: absolute;
bottom: 150px; left: 15%;
margin-bottom: 42%;
z-index: 10;
}

#roadshowE{
background: url("../images/top/roadshowE.png") no-repeat center bottom;
background-size: contain;
width: 70%; height: 17%;
position: absolute;
bottom: 160px; left: 15%;
margin-bottom: 22%;
z-index: 10;
}

#roadshowE2{
background: url("../images/top/roadshowE.png") no-repeat center bottom;
background-size: contain;
width: 70%; height: 17%;
position: absolute;
bottom: 160px; left: 15%;
margin-bottom: 38%;
z-index: 10;
}



#catch01{
background: url("../images/top/catch01.png") no-repeat center;
background-size: contain;
width: 5%; height: 36%;
position: absolute;
top: 13%; left: 50%;
transform: translateX(-50%);
z-index: 3;
animation: 2s fadeanm 2s ease forwards;
opacity: 0;
}

#castimg{
background: url("../images/top/img_cast.png") no-repeat center;
background-size: contain;
width: 84%; height: 13%;
position: absolute;
bottom: 8%; left: 8%;
z-index: 9;
animation: 2s fadeanm 1s ease forwards;
opacity: 0;
}

#catch02{
background: url("../images/top/catch02.png") no-repeat center top;
background-size: contain;
width: 70%; height: 6%;
position: absolute;
bottom: 2%; left: 50%;
transform: translateX(-50%);
z-index: 9;
animation: 2s fadeanm 1.5s ease forwards;
opacity: 0;
}

#copyright{
background: url("../images/top/copyright.png") no-repeat center;
background-size: contain;
width: 470px; height: 10px;
position: absolute;
bottom: 3px; left: 50%;
transform: translateX(-50%);
z-index: 3;
}

#particles-js{
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 2;
mix-blend-mode: screen;
}


/* ========================================

bnr L

======================================== */

#no1{
width: 13%;
position: absolute;
bottom: 41%; left: 2%;
z-index: 15;
animation: 2s fadeanm .9s ease forwards;
opacity: 0;
}


#bnrLall{
width: 96%;
text-align: center;
position: absolute;
bottom: 150px; left: 2%;
z-index: 12;
line-height: 0;
}

#bnrLall img{ margin-top: 5px;}

#bnrEnki{
width: 70%;
position: absolute;
bottom: 150px; left: 15%;
z-index: 12;
}



/* ========================================

menu

======================================== */

#menuAll{
background: #000 url("../images/top/bg_menu.jpg") no-repeat bottom;
background-size: 100% auto;
width: 23%; height: 100%;
min-width: 340px;
position: absolute;
top: 0; right: 0;
z-index: 22;
}

#menu {
width: 84%;
padding: 0px;
overflow: hidden;
position: absolute;
top: 11%; left: 8%;
z-index: 30;
}

#menu ul {
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
left: 50%;
}

#menu ul li {
background: url("../images/btnslash.png") no-repeat left;
background-size: auto 36px;
width: 100%;
margin: 10px 0;
padding: 0;
position: relative;
line-height:0;
left: -50%;
color: #3f4f93;
}

#menu ul li.btn{
font-family: futura-pt, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 22px;
width: 100%; height: 30px;
line-height: 30px;
letter-spacing: 1px;
text-indent: 2em;
}

#menu ul li.btn a{
width: 100%;
height: 100%;
display: block;
transition: all 0.3s ease;
color: #fff;
text-decoration: none;
text-shadow: 0px 0px 5px #000000,0px 0px 5px #000000,0px 0px 5px #000000;
}

#menu ul li.btn a:hover{
color: #87e4f8;
opacity: 1;
letter-spacing: 2px;
}

#coplogo{
background: url("../images/top/cop_logoB.png") no-repeat center;
background-size: contain;
width: 100%; height: 88px;
position: absolute;
bottom: 60px; left: 0;
z-index: 11;
}




/* ========================================

introduction

======================================== */

.contentClose{
background: url("../images/btn_close.png") no-repeat center;
background-size: 100% 100%;
width:72px; height:72px;
position:absolute;
top:0; right:0; 
z-index:10;
}

.contentClose:hover{
opacity: 0.7;
cursor: pointer;
}



@keyframes  plate {
0% { transform: scaleY(0); opacity: 1;}
100% { transform: scaleY(100%); opacity: 1;}
}


.contentClose{
background: url("../images/btn_close.png") no-repeat center;
background-size: 100% 100%;
width:40px; height:40px;
position:absolute;
top: 10px; right: 10px;
z-index:10;
transition: all 0.3s ease;
filter: drop-shadow( 0 0 5px #000);
}

.contentClose:hover{
opacity: 0.5;
cursor: pointer;
}

#logoS{
background: url("../sp/images/logo_s.png") no-repeat;
background-size: contain;
width: 230px; height: 33px;
position: absolute;
top: 10px; left: 20px;
z-index: 5;
display: none;
}

.logoS{
background: url("../sp/images/logo_s.png") no-repeat;
background-size: contain;
width: 230px; height: 33px;
position: absolute;
top: 10px; left: 20px;
z-index: 5;
display: none;
filter: drop-shadow( 0 0 5px #000);
}

#introAll{
background-color: #000;
width:100%; height:100%;
position:absolute;
top:0; left:0;
z-index:60;
display: none;
min-width:1250px;
min-height:700px;
overflow:hidden;
}

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

#introM{
font-family: futura-pt, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 20px;
color: #849aa3;
width: 88%; max-width: 1400px;
position: absolute;
bottom: 36%; left: 50%;
transform: translateX(-50%);
z-index: 5;
text-indent: 0;
display: none;
}

#introTxtAll{
width: 88%; height: 25%;
max-width: 1400px;
position: absolute;
top: 67%; left: 50%;
transform: translateX(-50%);
z-index: 5;
display: none;
}

#introTxtM{
width: 95%;
font-size: 24px;
line-height: 1.7em;
letter-spacing: 1px;
color: #ededed;
padding: 0 0 20px;
font-weight: 900;
text-shadow: 0 0 5px #dc9100;
}

#introTxt{
width: 97%;
font-size: 14px;
line-height: 1.8em;
letter-spacing: 1px;
color: #ededed;
}


/* ========================================

story

======================================== */

#storyAll{
background-color: #000;
width:100%; height:100%;
position:absolute;
top:0; left:0;
z-index:60;
display: none;
min-width:1250px;
min-height:700px;
overflow:hidden;
}

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

#storyM{
font-family: futura-pt, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 20px;
color: #849aa3;
width: 88%; max-width: 1400px;
position: absolute;
bottom: 49%; left: 50%;
transform: translateX(-50%);
z-index: 5;
text-indent: 0;
display: none;
}

#storyTxtAll{
width: 88%;
max-width: 1400px;
position: absolute;
top: 53%; left: 50%;
transform: translateX(-50%);
z-index: 5;
display: none;
}

#storyTxtM{
width: 95%;
font-size: 24px;
line-height: 1.7em;
letter-spacing: 1px;
color: #ededed;
padding: 0 0 10px;
font-weight: 900;
text-shadow: 0 0 5px #dc9100;
}

#storyTxt{
width: 97%;
font-size: 14px;
line-height: 1.8em;
letter-spacing: 1px;
color: #ededed;
}

.storytxtRed{ color: #DB0003; font-size: 120%; font-weight: 600;}

@keyframes storyslide01 {
from { background-position: 0 0; }
to { background-position: -1476px 0; }
}

@keyframes storyslide02 {
from { background-position: 0 0; }
to { background-position: -1919px 0; }
}

@keyframes storyslide03 {
from { background-position: 0 0; }
to { background-position: -2362px 0; }
}

@media screen and (max-height : 800px){
#storyImg2{height: 100px; animation: storyslide01 80s linear infinite;}
}

@media screen and (min-height : 801px){
#storyImg2{height: 130px; animation: storyslide02 80s linear infinite;}
}

@media screen and (min-height : 901px){
#storyImg2{height: 160px; animation: storyslide03 80s linear infinite;}
}

#storyImg2{
background: url("../images/img_story02.jpg") repeat-x left;
background-size: auto 100%;
width: 100%;
position: absolute;
bottom: 20px; left: 0;
z-index: 1;
display: none;
}

.imgcopy{
background: url("../images/cop_img.png") no-repeat center;
background-size: auto 9px;
width: 100%; height: 15px;
position: absolute;
bottom: 0; left: 0;
z-index: 1;
text-align: center;
text-indent: -999999px;
opacity: 0.5;
}



/* ========================================

cast staff

======================================== */

#creditAll{
width:100%; height:100%;
position:absolute;
top:0; left:0;
z-index:60;
display: none;
min-width:1250px;
min-height:700px;
overflow:hidden;
}

#creditBg{
background-color: #000;
width:100%; height:100%;
position:absolute;
top:0; left:0;
z-index:1;
opacity: 0.9;
}

#castM,#staffM{
font-family: futura-pt, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 20px;
color: #849aa3;
width: 100%;
text-indent: 0;
line-height: 50px;
}

#creditTxtAll{
width: 90%;
position: absolute;
top: 50%; left: 5%;
transform: translateY(-60%);
z-index: 5;
font-size: 18px;
line-height: 2em;
letter-spacing: 1px;
color: #fff;
text-align: center;
display: none;
}

.creditTxtS{ font-size: 70%;}


/* ========================================

share

======================================== */

#iTwitter{
background: url("../images/top/i_twitterB.png") no-repeat center;
background-size: 25px auto;
width: 30px; height: 30px;
position: absolute;
top: 15px; right: 15px;
z-index: 30;
transition: all 0.3s ease;
text-indent: -99999px;
}

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

#iTwitter:hover{ opacity: 0.7;}

#sharaTxt{
font-family: futura-pt, sans-serif;
font-weight: 700;
font-style: normal;
letter-spacing: 0;
font-size: 13px; line-height: 14px;
width: 150px; height: 20px;
text-align: right;
position: absolute;
top: 23px; right: 65px;
z-index: 30;
color: #fff;
}

#sharaTxt a{color: #fff;}



/* ========================================

bnr S

======================================== */

#bnrLine{
width: 100%; height: 1px;
background-color: #3A3A3A;
position: absolute;
bottom: 60px; left: 0;
z-index: 2;
}

#idMediaWrap{
width: 340px;
height: 40px;
overflow:hidden;
position: absolute;
bottom: 10px;
left: 50%; transform: translateX(-50%);
z-index: 22;
}

#lineupItem{
width:312px;
float:left;
text-align:left;
}

#lineupItem li{
float:left;
display:inline;
width:150px;
height:40px;
margin: 0 2px;
text-align:center;
}

#lineupItem li img{ border: 1px solid #414141;}

.prevBtn{
background-color: #000;
float:left;
width:10px;
margin: 0 2px;
height:40px;
text-align:center;
border: 0;
transition: all 0.5s ease;
}
.nextBtn{
background-color: #000;
float:right;
width:10px;
margin: 0 2px;
height:40px;
text-align:center;
border: 0;
transition: all 0.2s ease;
}
.prevBtn:hover,.nextBtn:hover{
width:10px;
height:40px;
background-color: #3a3a3a;
}