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


@media screen and (orientation: landscape) {

#mainWarning{
	display:none;
}

}

@media screen and (orientation: portrait) {

#mainWarning{
background: #000 url("../images/warning.png") no-repeat center;
background-size:400px 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:1250px;
min-height:800px;
position:relative;
overflow:hidden;
}

.txtSpace{ letter-spacing: -.5px;}
.txtSpace2{ letter-spacing: -2px;}

#mainBg1{ background: url("../images/top/bg1.jpg") no-repeat left; z-index: 1;background-size: auto 100%;
width: 100%; height: 95%;
position: absolute;
top: 0; left: 0;
}

#mainBg2{
background: url("../images/top/bg2.png") no-repeat right;
background-size: auto 100%;
width: 100.5%; height: 95%;
position: absolute;
top: 0; left: 0;
z-index: 2;
}

#mainBg3{
background: url("../images/top/bg3.png") no-repeat center;
background-size: 100% 100%;
width: 50%; height: 95%;
position: absolute;
top: 0; left: 24%;
z-index: 3;
}


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

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

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

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


#logoAll{
width: 50%; height: 52%; 
position: absolute;
bottom: 65px; right: 4%;
z-index: 23;
/*animation: scaleanm .5s cubic-bezier(0,.99,.63,1.01) 1.5s forwards;
opacity: 0;*/
}

#logo{
width: 100%; height: 74%; 
position: absolute;
bottom: 30%; left: 0;
z-index: 2;
animation: scaleanm .5s cubic-bezier(0,.99,.63,1.01) 1.7s forwards;
opacity: 0;
}

#logoM{
background: url("../images/logo.png") no-repeat right;
background-size: contain;
width: 100%; height: 100%; 
transform: rotateZ(-7deg);
}

#roadshow{
background: url("../images/top/roadshow.png") no-repeat right bottom;
background-size: contain;
width: 15%; height: 19%; 
position: absolute;
bottom: 65px; right: 1.5%;
z-index: 21;
animation: scaleanm .5s cubic-bezier(0,.99,.63,1.01) 1.9s forwards;
opacity: 0;
}

#roadshow2{
background: url("../images/top/roadshow2.png") no-repeat right bottom;
background-size: contain;
width: 14%; height: 18%; 
position: absolute;
bottom: 65px; right: 1.5%;
z-index: 21;
animation: scaleanm .5s cubic-bezier(0,.99,.63,1.01) 1.9s forwards;
opacity: 0;
}

#billing{
background: url("../images/top/billing.png") no-repeat center;
background-size: contain;
width: 60%; height: 45%;
position: absolute;
bottom: 0; right: 23%;
z-index: 1;
animation: scaleanm .5s cubic-bezier(0,.99,.63,1.01) 1.8s forwards;
opacity: 0;
}
#billing2{
background: url("../images/top/billing2.png") no-repeat center;
background-size: contain;
width: 60%; height: 46%;
position: absolute;
bottom: 0; right: 21%;
z-index: 1;
animation: scaleanm .5s cubic-bezier(0,.99,.63,1.01) 1.8s forwards;
opacity: 0;
}

@keyframes  charaslide {
0% { transform: scaleX(0) rotateZ(-100deg); opacity: 0;}
100% { transform: scaleX(100%) rotateZ(0); opacity: 1;}
}

@keyframes  charaslide2 {
0% { transform: scaleX(0) rotateZ(100deg); opacity: 0;}
100% { transform: scaleX(100%) rotateZ(0); opacity: 1;}
}

#chara01img{
background: url("../images/top/chara01.jpg") no-repeat center;
animation: charaslide .5s cubic-bezier(0,.99,.63,1.01) 1.2s forwards;
}

#chara02img{
background: url("../images/top/chara02.jpg") no-repeat left;
animation: charaslide2 .5s cubic-bezier(0,.99,.63,1.01) 1.3s forwards;
}

#chara03img{
background: url("../images/top/chara03.jpg") no-repeat center;
animation: charaslide2 .5s cubic-bezier(0,.99,.63,1.01) 1.4s forwards;
}

#chara04img{
background: url("../images/top/chara04.jpg") no-repeat center bottom;
animation: charaslide .5s cubic-bezier(0,.99,.63,1.01) 1.5s forwards;
}

#chara05img{
background: url("../images/top/chara05.jpg") no-repeat center;
animation: charaslide2 .5s cubic-bezier(0,.99,.63,1.01) 1.6s forwards;
}

#chara01img,#chara02img,#chara03img,#chara04img,#chara05img{
background-size: cover;
width: 100%; height: 95%;
opacity: 0;
}

#chara01{
width: 21%; height: 112%;
position: absolute;
top: -6%; right: 59%;
z-index: 9;
transform: rotateZ(5deg);
overflow: hidden;
}

#chara02{
width: 16.5%; height: 112%;
position: absolute;
top: -6%; right: 80%;
z-index: 8;
transform: rotateZ(-9deg);
overflow: hidden;
}

#chara03{
width: 13.5%; height: 112%;
position: absolute;
top: -6%; right: 44%;
z-index: 7;
transform: rotateZ(-1deg);
overflow: hidden;
}

#chara04{
width: 12%; height: 98%;
position: absolute;
top: -13%; right: 31%;
z-index: 6;
transform: rotateZ(2deg);
overflow: hidden;
}

#chara05{
width: 11%; height: 78%;
position: absolute;
top: 8%; right: 19.5%;
z-index: 5;
transform: rotateZ(-2deg);
overflow: hidden;
}

.noise{
background: url("../images/noise.gif") ;
background-size: 100px 100px;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 11;
opacity: .4;
mix-blend-mode: overlay;
}

@keyframes  bottomSlide {
0% { transform: translate(50px,-200px); opacity: 0;}
100% { transform: translate(0,0); opacity: 1;}
}

#obiEn{
background: url("../images/top/tape.png") no-repeat center top;
background-size: contain;
width: 16%; height: 98%;
position: absolute;
top: 0; left: 76%;
z-index: 4;
animation: bottomSlide .7s cubic-bezier(0,.99,.63,1.01) 2s forwards;
opacity: 0;
}

#catchL{
background: url("../images/top/catch1.png") no-repeat center top;
background-size: contain;
width: 78%; height: 5%; 
position: absolute;
top: 5px; left: 11%;
z-index: 12;
animation: rightSlide .5s cubic-bezier(0,.99,.63,1.01) 1.8s forwards;
opacity: 0;
}

#catch{
width: 10%; height: 29%; 
position: absolute;
top: 51%; right: 79.5%;
z-index: 10;
animation: fadeanm 1.5s cubic-bezier(0,.99,.63,1.01) 2s forwards;
opacity: 0;
filter: drop-shadow(0 0 5px rgba(0,0,0,1));
}

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

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

#catchImg{
background: url("../images/top/catch2a.png") no-repeat right;
background-size: contain;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
animation: catchanm1 .7s ease-out 2.5s forwards;
opacity: 0;
}

#catchImg2{
background: url("../images/top/catch2b.png") no-repeat right;
background-size: contain;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 2;
animation: catchanm2 .7s ease-out 2.7s forwards;
opacity: 0;
}

#catchImg3{
background: url("../images/top/catch2c.png") no-repeat right;
background-size: contain;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 3;
animation: catchanm1 .7s ease-out 2.9s forwards;
opacity: 0;
}


#ink1{
background: url("../images/top/ink1.png") no-repeat right top;
background-size: contain;
width: 50%; height: 100%;
position: absolute;
top: 0; right: 0;
z-index: 10;
}

#ink2{
background: url("../images/top/ink2.png") no-repeat left bottom;
background-size: 100% 100%;
width: 87%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 10;
}



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

bnr

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

@keyframes  bnrflash {
0% { opacity: 0.9;}
50% { opacity: 1;}
100% { opacity: 0.98;}
}

#bnrLall{
width: 70%; height: 9.5%; max-height: 80px;
position: absolute;
bottom: 60px; left: 10px;
line-height: 0;
z-index: 20;
text-align: left;
}



#bnrLall img{border: 2px solid #daf751; box-sizing: border-box; transition: all 0.3s ease; margin: 0 10px 0 0;}
#bnrLall img:hover{ border: 2px solid #f01584;box-sizing: border-box; opacity: 1;}


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

menu

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


#menu{
width: 200px;
position: absolute;
top: 100px; right: -30px;
z-index: 20;
}

.menu2{margin-bottom: 4.5%;}
.menu2b{margin-top: 2%;}


#menu ul li{
font-family: din-condensed, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 20px;
margin: 0 0 10px;
display: block;
line-height: 1em;
background-color: #000;
transition: all 0.3s ease;
float: right;
}

#menu ul li a{
color: #fff;
text-decoration: none;
}

#menu ul li a{color: #fff; opacity: 1; width: 100%; height: 100%; display: block;}
#menu ul li:hover{transform: translateX(-10px); cursor: pointer; background: #f01584;}
#menu ul li.newmark:hover{transform: translateX(-10px); cursor: pointer;
background: #f01584 url("../images/newmark.png") no-repeat;
background-position: right 25px center;
background-size: contain;
}
.btnintro{ width: 218px;}
.btnbddvd{ width: 230px;}
.btnstory{ width: 155px;}
.btncomment{ width: 185px;}
.btntheater{ width: 170px;}
.btntrailer{ width: 165px;}
.btncaststaff{ width: 266px;}
.btnabout{ width: 245px;}
.btnmedia{ position:relative; width: 200px;}

.btnnews{
position:relative;
width:150px;
}

.btnnews .link,.btnmedia .link{
display: block;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}

.newmark{
background: #f01584 url("../images/newmark.png") no-repeat;
background-position: right 30px center;
background-size: contain;
}


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

introduction

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


@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:100px; height:100px;
position:absolute;
top:81%; margin-top: -50px;
left:50%; margin-left: -50px;
z-index:10;
transition: all 0.3s ease;
animation: fadeanm .5s ease-out .5s forwards;
opacity: 0;
}

.contentClose:hover{
transform: scale(1.1);
cursor: pointer;
}

#creditBtn{
font-family: din-condensed, sans-serif;
font-weight: 400;
font-style: normal;
width: 80px;
text-align: center;
line-height: 20px;
font-size: 14px;
border: 1px solid #fff;
position: absolute;
bottom: 14px; right: 10px;
z-index: 30;
transition: all 0.3s ease;
}

#creditBtn:hover{
background-color: #f01584;
border: 1px solid #f01584;
cursor: pointer;
}

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

#introBg{background: #d919a0;}
#storyBg{background: #740ab0;}
#commentBg{background: #321dcf;}
#creditBg{background: #55004b;}
#introBg,#storyBg,#commentBg,#creditBg{
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 59;
mix-blend-mode: multiply;
display: none;
}

.contentPlate{
background: #000;
width: 100%; height: 62%;
position: absolute;
top: 17%; left: 0;
z-index: 2;
animation: plate .5s ease-out .2s forwards;
opacity: 0;
}

.contentM{
font-family: din-condensed, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 24px; line-height: 16px;
letter-spacing: 3px;
width: 72%; height: 40%;
position: absolute;
top: 24%; left: 14%;
z-index: 5;
color: #fff;
text-indent: 0;
animation: fadeanm .5s ease-out .3s forwards;
opacity: 0;
}

.contentCatch{
width: 100%;
margin: 0 0 20px;
pointer-events: none;
}

#introTxtAll,#storyTxtAll,#commentTxtAll{
width: 72%; height: 40%;
position: absolute;
top: 30%; left: 50%;
transform: translateX(-50%);
z-index: 6;
animation: fadeanm .5s ease-out .4s forwards;
opacity: 0;
}

#introTxt,#storyTxt,#commentTxt{
width: 98%;
font-size: 0.8vw;
line-height: 2.2em;
letter-spacing: 1.8px;
font-family: dnp-shuei-gothic-kin-std, sans-serif;
font-weight: 500;
font-style: normal;
}

#commentTxt{line-height: 2em;}

.rt{ letter-spacing: 0;}

.introM{
font-size: 120%;
line-height: 1.5em;
background-color: #c94cc9;
font-style: italic;
font-weight: 600;
color: #000;
}

.introcolor{
color: #00ffca;
}


.storyM{
font-size: 120%;
line-height: 1.5em;
background-color: #c94cc9;
font-style: italic;
font-weight: 600;
color: #000;
}


.comBox{
width: 100%;
margin: 0 auto;
padding: 0 0 40px;
}

.comLine{
padding: 0 0 40px;
width: 100%;
border-top: 2px dotted #fff;
opacity: 0.3;
}

.commentNM{
width: 100%;
font-size: 160%;
margin: 0 auto;
line-height: 1.5em;
color: #00f5c2;
padding: 5px 0 0 0;
}

.commentNMe{
width: 100%;
font-size: 85%;
margin: 0 auto;
line-height: 2em;
letter-spacing: 7px;
color: #c94cc9;
font-family: din-condensed, sans-serif;
font-weight: 400;
font-style: normal;
}

.comM{
width: 180px;
background-color: #c94cc9;
font-family: din-condensed, sans-serif;
font-weight: 400;
font-style: normal;
font-size: .8vw;
line-height: 0.8em;
color: #000;
margin: 20px 0 5px;
padding: 1px 0 0 5px;
}

.comImg2{
width: 35%;
float: right;
margin: 10px 0 20px 20px;
pointer-events: none;
}

#creditTxt{
background: url("../images/credit.png") no-repeat center bottom;
background-size: contain;
width: 80%; height: 40%;
position: absolute;
bottom: 35%; left: 10%;
z-index: 2;
}

#creditTxt2{
background: url("../images/top/credit.png") no-repeat center bottom;
background-size: contain;
width: 80%; height: 40%;
position: absolute;
bottom: 35%; left: 10%;
z-index: 2;
}

#copyright{
width:400px;
text-align: right;
font-size: 8px;
color: #fff; opacity: 0.5;
line-height: 1em;
position: absolute;
bottom: 18px; right: 220px;
z-index: 20;
letter-spacing: 1px;
text-indent: 0;
}

#copyright2{
width:400px;
text-align: right;
font-size: 8px;
color: #fff; opacity: 0.5;
line-height: 1em;
position: absolute;
bottom: 55px; right: 10px;
z-index: 20;
letter-spacing: 1px;
text-indent: 0;
}

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

sns

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

#snsIcon{
width: 30px;
position: absolute;
top: 10px; right: 10px;
z-index: 20;
text-align: right;
line-height: 0;
}

#snsIcon a img{
margin-bottom: 4px;
filter: drop-shadow(0 0 2px rgba(255,255,255,0.6));
transition: .3s;
}

#snsIcon a img:hover{
transform: scale(1.2) rotateZ(5deg);
}

#snsIcon a{opacity: 1;}

#sharaTxt{
font-family: din-condensed, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px; line-height: 16px;
letter-spacing: 2px;
width: 150px; height: 20px;
text-align: right;
position: absolute;
bottom: 12px; right: 105px;
z-index: 20;
}

#sharaTxt a{color: #fff;}
#sharaTxt a:hover{color: #f01584; opacity: 1;}

#shareBg{
background-color: #000;
width: 120%; height: 50px;
position: absolute;
bottom: -75px; left: -10%;
transform: rotateZ(-5deg);
z-index: 15;
opacity: 0.7;
}


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

bnr s

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

#bnrSall{
background-color: #000000;
width: 100%; height: 50px;
position: absolute;
bottom: 0; left: 0;
z-index: 15;
}

#bnrS{
height: 40px;
padding: 5px;
line-height: 0;
}

#bnrS img{ margin: 0 5px 0 0;}