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

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

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


@media screen and (orientation: landscape) {

#mainWarning{display:none;}

}

@media screen and (orientation: portrait) {

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

}


/*

main

*/

#mainAll{
width: 100%; height: 100%;
min-width: 1250px;
min-height: 800px;
overflow: hidden;
position: relative;
}

#topImgAll{
background: #000 url("../images/top2/topImg.jpg") no-repeat center;
background-size: auto 100%;
width: 80%; height: 95%;
position: absolute;
top: 0; left: 0;
z-index: 2;
}

#topImg01{
background: url("../images/top2/topanm01.jpg") no-repeat center;
background-size: auto 100%;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 4;
animation: fadeanim2 .7s ease-out 1.2s forwards;
transform: scale(1.3,1.3);
}

#topImg02{
background: url("../images/top2/topanm02.jpg") no-repeat center;
background-size: auto 100%;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 3;
animation: fadeanim3 1s ease-out 1.8s forwards;
}

#topImg03{
background: url("../images/top2/topanm03.jpg") no-repeat center;
background-size: auto 100%;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 2;
animation: fadeanim3 1s ease-out 2.1s forwards;
}


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

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

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

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

#logo{
background: url("../images/top2/logo.png") no-repeat center;
background-size: contain;
width: 46%; height: 12%;
position: absolute;
bottom: 25%; left: 27%;
z-index: 11;
animation: scaleanm .5s ease-out 2.2s forwards;
opacity: 0;
}

#logoE{
background: url("../images/top2/logo_e.png") no-repeat center bottom;
background-size: 100% 100%;
width: 96%; height: 20%;
position: absolute;
bottom: 28%; left: 2%;
z-index: 10;
animation: scaleanm .5s ease-out 2s forwards;
opacity: 0;
}


#roadshow{
background: url("../images/top2/roadshow.png") no-repeat center bottom;
background-size: contain;
width: 60%;
height: 18%;
position: absolute;
bottom: 120px;
left: 20%;
z-index: 2;
}

#roadshow2{
background: url("../images/top2/roadshow2.png") no-repeat center bottom;
background-size: contain;
width: 90%;
height: 15%;
position: absolute;
bottom: 120px;
left: 50%; transform: translateX(-50%);
z-index: 2;
}

#credit{
background: url("../images/top2/billing.png") no-repeat center bottom;
background-size: contain;
width: 60%; height: 21%;
position: absolute;
bottom: 5%; left: 20%;
z-index: 11;
animation: fadeanim .5s ease-out 2.2s forwards;
opacity: 0;
}

#catch1{
background: url("../images/top2/catch1.png") no-repeat center bottom;
background-size: contain;
width: 3%; height: 21%;
position: absolute;
bottom: 48%; left: 39%;
z-index: 12;
animation: scaleanm .5s ease-out 2.4s forwards;
opacity: 0;
}

#catch2{
background: url("../images/top2/catch2.png") no-repeat center;
background-size: contain;
width: 100%; height: 7%;
position: absolute;
bottom: 0; left: 0;
z-index: 12;
animation: scaleanm .5s ease-out 2.4s forwards;
opacity: 0;
}



#hikariAll{
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 15;
mix-blend-mode: overlay;
animation: fadeanim 1s ease-out 3s forwards;
opacity: 0;
}

@keyframes  hikari {
0% { transform: rotateZ(0);}
100% { transform: rotate(-360deg);}
}

#hikari{
background: url("../images/top/hikari.png") no-repeat center;
background-size: contain;
width: 320%; height: 240%;
position: absolute;
top: -70%; left: -110%;
z-index: 3;
animation: hikari 3s linear infinite;
opacity: 0.5;
}

@keyframes  hikari2 {
0% { transform: rotateZ(0);}
100% { transform: rotate(360deg);}
}

#hikari2{
background: url("../images/top/hikari.png") no-repeat center;
background-size: contain;
width: 200%; height: 140%;
position: absolute;
top: -20%; left: -50%;
z-index: 3;
animation: hikari2 3s linear infinite;
opacity: 0.5;
}




/*

bnr

*/


#bnrLall{
width: 90%;
max-width: 300px;
padding: 2px 0;
position: absolute;
bottom: 110px; margin-bottom: 30%;
left: 50%; transform: translateX(-50%);
z-index: 5;
text-align: center;
}

#bnrLall2{
width: 90%;
max-width: 300px;
padding: 2px 0;
position: absolute;
bottom: 130px; margin-bottom: 14%;
left: 50%; transform: translateX(-50%);
z-index: 5;
text-align: center;
}


#bnrLall3{
width: 90%;
max-width: 300px;
padding: 2px 0;
position: absolute;
bottom: 110px;
left: 50%; transform: translateX(-50%);
z-index: 5;
text-align: center;
}

#bnrLall img,#bnrLall2 img,#bnrLall3 img{ border: 1px solid #780002; margin: 2px 0 0 0; line-height: 0;}


#bnrall{
width:100%; height:40px;
margin:0;
position:absolute;
bottom:100px; left:0;
z-index:25;
text-align: center;
}

#bnrSall{
background-color: #000;
width: 80%; height: 50px;
position: absolute;
bottom: 0; left: 0;
z-index: 20;
text-align: center;
}



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

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

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


.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;
}




/*

cast ?

*/

#castAll{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 50;
overflow:hidden;
display: none;
}

#castBg{
background: #fff;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0.95;
}

@-webkit-keyframes castAnm {
0% { transform: translateX(0); opacity: 0;}
100% { transform: translateX(-100px);opacity: 1;}
}

@keyframes castAnm {
0% { transform: translateX(0); opacity: 0;}
100% { transform: translateX(-100px);opacity: 1;}
}

#castM{
font-family: jay-gothic-urw, sans-serif;
font-weight: 700;
font-size: 110px;
color: #fff;
font-style: italic;
width: 600px;
height: 120px;
position: absolute;
top: 30px;
left: 90px;
z-index: 10;
-webkit-animation: castAnm .4s ease-out 0.5s forwards;
animation: castAnm .4s ease-out 0.5s forwards;
opacity: 0;
}

#castMainAll{
width: 100%;
height: 83%;
min-height: 600px;
max-height: 800px;
position: absolute;
top: 53%;
left: 0;
z-index: 5;
overflow: hidden;
display: none;
transform: translateY(-50%); 
}

@-webkit-keyframes castBgAnm {
0% { transform: scaleY(0.7); opacity: 0;}
100% { transform: scaleY(1); opacity: 1;}
}

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

#castMainBg{
background: url("../images/sub_bg.png") no-repeat center;
background-size: 100% 99%;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 5;
-webkit-animation: castBgAnm .3s ease-out 0.1s forwards;
animation: castBgAnm .3s ease-out 0.1s forwards;
opacity: 0;
}


#castMain{
width: 98%;
height: 100%;
margin: 0 auto;
position: relative;
}

#castImg{
background: url("../images/koma.jpg") no-repeat center;
background-size: contain;
width: 90%;
height: 95%;
position: absolute;
top: 2%;
left: 5%;
z-index: 20;
display: none;
filter: drop-shadow(7px 7px 2px rgba(0,0,0,0.6));
}

#comiccopy{
width: 200px;
height: 11px;
line-height: 1em;
color: #fff;
position: absolute;
bottom: 10%;
right: 0;
z-index: 20;
font-size: 11px;
text-align: right;
}


/*

comment

*/


.closeBtn{
background: url("../images/btn_close2.png") no-repeat center;
background-size: contain;
width: 60px;
height: 60px;
position: absolute;
top: 10px;
right:10px;
z-index: 10;
transition: all 0.3s ease;
cursor: pointer;
}

.closeBtn:hover{ opacity: 0.7; transform: rotate(90deg);}


#commentAll{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 50;
overflow:hidden;
display: none;
}

#commentBg{
background: #000 url("../sp/images/common/bg_pc.png") no-repeat center;
background-size: 100% 100%;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

#commentTxtAll{
width: 100%;
height: 83%;
min-height: 600px;
max-height: 800px;
position: absolute;
top: 53%;
left: 0;
z-index: 5;
overflow: hidden;
transform: translateY(-50%); 
display: none;
}

#commentMainBg{
background: url("../images/sub_bg2.png") no-repeat center;
background-size: 100% 99%;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 5;
-webkit-animation: castBgAnm .3s ease-out 0.1s forwards;
animation: castBgAnm .3s ease-out 0.1s forwards;
opacity: 0;
}

#commentM{
font-family: jay-gothic-urw, sans-serif;
font-weight: 700;
font-size: 105px;
color: #ea0027;
font-style: italic;
width: 600px;
height: 120px;
position: absolute;
top: 40px;
left: 90px;
z-index: 10;
-webkit-animation: castAnm .4s ease-out 0.5s forwards;
animation: castAnm .4s ease-out 0.5s forwards;
opacity: 0;
}

#commentTxtAll2{
width: 60%;
height: 65%;
position: absolute;
top: 23%;
left: 20%;
z-index: 10;
display: none;
}

#commentTxt{
width: 80%;
height: 70%;
max-width: 1200px;
position: absolute;
top: 50%;
left: 50%;
z-index: 20;
transform: translateY(-50%) translateX(-50%); 
display: none;
font-size: 16px;
line-height: 1.7em;
letter-spacing: 1px;
color: #fff;
}

.commentBox{
width: 97%;
padding: 0 0 50px;
font-size: 16px;
line-height: 1.7em;
letter-spacing: 1px;
color: #fff;
}

.commentNM{
font-family: source-han-sans-japanese, sans-serif;
font-weight: 900;
font-style: italic;
font-size: 170%;
line-height: 1.5em;
letter-spacing: 2px;
}

.commentNMblack{
font-family: jay-gothic-urw, sans-serif;
font-weight: 700;
font-size: 150%;
font-style: italic;
color: #ea0000;
line-height: 1.5em;
letter-spacing: 1px;
filter: drop-shadow(1px 1px 2px rgba(0,0,0,1));
}

.commentEn{
font-family: jay-gothic-urw, sans-serif;
font-weight: 700;
font-size: 140%;
font-style: italic;
color: #000;
line-height: 1.5em;
letter-spacing: 3px;
}

.commentNMs{
font-size: 60%;
letter-spacing: 1px;
}

.commentDot{
width: 100%;
padding: 0 0 50px;
pointer-events: none;
}

.commentImg{
width: 240px;
float: left;
margin: 0 30px 10px 0;
pointer-events: none;
}