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

body {
font-family: source-han-sans-japanese, sans-serif;
font-weight: 400;
font-style: normal;
background: #fff;
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: #fff url("../images/warning.jpg") no-repeat center;
background-size:320px auto;
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:100;
}

}


/*

main

*/

#mainAll{
background: #fff url("../images/bg.jpg") no-repeat center;
background-size: cover;
width: 100%;
height: 100%;
min-width: 1200px;
min-height: 750px;
overflow: hidden;
position: relative;
}


#logoAll{
width: 80%;
height: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-60%) translateX(-50%); 
max-width: 1800px;
z-index: 10;
pointer-events: none;
}


#logoAll2{
width: 75%;
height: 50%;
position: absolute;
top: 45%;
left: 50%;
transform: translateY(-63%) translateX(-50%); 
max-width: 1800px;
z-index: 10;
pointer-events: none;
}

#logoAll3{
width: 75%;
height: 50%;
position: absolute;
top: 40%;
left: 50%;
transform: translateY(-63%) translateX(-50%); 
max-width: 1800px;
z-index: 10;
pointer-events: none;
}


@-webkit-keyframes  logoanim {
0% { transform: scale(1.2);opacity: 0;}
100% { transform: scale(1);opacity: 1;}
}

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


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

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

#logo{
background: url("../images/logo.png") no-repeat center bottom;
background-size: contain;
width: 100%;
height: 75%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
-webkit-animation: logoanim 1s ease-out 1s forwards;
animation: logoanim 1s ease-out 1s forwards;
opacity: 0;
}



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

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

#roadshow{
background: url("../images/roadshow.png") no-repeat center top;
background-size: contain;
width: 100%;
height: 18%;
position: absolute;
top: 75%;
left: 0;
z-index: 2;
-webkit-animation: roadshowanim 1s ease-out 1.5s forwards;
animation: roadshowanim 1s ease-out 1.5s forwards;
opacity: 0;
}

#roadshow2{
background: url("../images/roadshow2.png") no-repeat center top;
background-size: contain;
width: 100%;
height: 25%;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
-webkit-animation: roadshowanim 1s ease-out 1.5s forwards;
animation: roadshowanim 1s ease-out 1.5s forwards;
opacity: 0;
}

#roadshow3{
background: url("../images/roadshow3.png") no-repeat center top;
background-size: contain;
width: 100%;
height: 25%;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
-webkit-animation: roadshowanim 1s ease-out 1.5s forwards;
animation: roadshowanim 1s ease-out 1.5s forwards;
opacity: 0;
}

#roadshow4{
background: url("../images/roadshow4.png") no-repeat center top;
background-size: contain;
width: 100%;
height: 25%;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
-webkit-animation: roadshowanim 1s ease-out 1.5s forwards;
animation: roadshowanim 1s ease-out 1.5s forwards;
opacity: 0;
}

#credit{
background: url("../images/credit.png") no-repeat center bottom;
background-size: contain;
width: 70%;
height: 17%;
max-height: 67px;
position: absolute;
bottom: 150px;
left: 15%;
z-index: 2;
-webkit-animation: fadeanim 1s ease-out 2s forwards;
animation: fadeanim 1s ease-out 2s forwards;
opacity: 0;
}

#credit2{
background: url("../images/credit2.png") no-repeat center bottom;
background-size: contain;
width: 70%;
height: 17%;
max-height: 67px;
position: absolute;
bottom: 150px;
left: 15%;
z-index: 2;
-webkit-animation: fadeanim 1s ease-out 2s forwards;
animation: fadeanim 1s ease-out 2s forwards;
opacity: 0;
}

#credit3{
background: url("../images/credit3.png") no-repeat center bottom;
background-size: contain;
width: 60%;
height: 16%;
max-height: 180px;
position: absolute;
bottom: 150px;
left: 20%;
z-index: 2;
-webkit-animation: fadeanim 1s ease-out 2s forwards;
animation: fadeanim 1s ease-out 2s forwards;
opacity: 0;
}


/*

bnr

*/

#bnrall{
width:240px;
height:60px;
margin:0;
position:absolute;
bottom:57px;
right:10px;
z-index:25;
}

#bnrL1{
width:170px;
height:170px;
margin:0;
position:absolute;
bottom:135px;
right:10px;
z-index:25;
}




/*

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_close.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: #fff;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0.95;
}

#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_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;
}

#commentM{
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;
}

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