body {
font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
background:#000;
width: 100%;
height:100%;
font-size:12px;
line-height:1.5em;
color:#000;
margin: 0px;
}

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

#content{
width: 100%;
height: 100%;
min-width:1250px;
min-height:650px;
margin:0 auto;
position:relative;
overflow:hidden;
}

@-webkit-keyframes scaleLogo {
    from { transform: scale(1.5, 1.5) translateY(-20px);}
    to   { transform: scale(1.0, 1.0) translateY(0);}
}

@keyframes scaleLogo {
    from { transform: scale(1.5, 1.5) translateY(-20px);}
    to   { transform: scale(1.0, 1.0) translateY(0);}
}

#logo{
background: url(../images/top/logo.png) no-repeat center bottom;
background-size: contain;
width: 42%;
height: 40%;
position: absolute;
bottom:140px;
left: 29%;
z-index: 10;
-webkit-animation:scaleLogo 0.5s;
animation:scaleLogo 0.5s;
}

#bnrAreaS{
width: 800px;
height: 40px;
text-align: center;
position: absolute;
bottom:100px;
left: 50%;
margin-left: -400px;
z-index: 10;
}

#bnrAreaS img{ margin: 0 2px;}

/*

#logo{
background: url(../images/top/logo.png) no-repeat center bottom;
background-size: contain;
width: 46%;
height: 43%;
position: absolute;
bottom:90px;
left: 27%;
z-index: 10;
-webkit-animation:scaleLogo 0.5s;
animation:scaleLogo 0.5s;
}

*/

#catch{
background: url(../images/top/catch.png) no-repeat center;
background-size: contain;
width: 40%;
height: 10%;
position: absolute;
top:0;
left: 30%;
z-index: 10;
}

#kamiAll{
	width:110%;
	height:110%;
	position:absolute;
	top:-5%;
	left:-5%;
	z-index:6;
}

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

#mainCast01{
background: url(../images/top/cast01.png) no-repeat center top;
z-index: 5;
}

#mainCast02{
background: url(../images/top/cast02.png) no-repeat center top;
z-index: 4;
}

#mainCast03{
background: url(../images/top/cast03.png) no-repeat center top;
z-index: 3;
}

#mainCast01,#mainCast02,#mainCast03{
background-size: auto 100%;
width: 120%;
height: 120%;
position: absolute;
top: -5%;
left: -10%;
}

#kami{
background: url(../images/top/kami.png) no-repeat center top;
background-size: cover;
width: 82%;
height: 100%;
position: absolute;
top:0;
left: 9%;
z-index: 7;
}

#grade{
background: url(../images/top/grade.png) repeat-x center;
background-size: auto 100%;
width: 100%;
height: 25%;
position: absolute;
bottom:0;
left: 0;
z-index: 6;
}



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


@-webkit-keyframes ballanm {
    from { transform: rotate(-40deg);}
    to   { transform: rotate(0);}
}

@keyframes ballanm {
    from { transform: rotate(-40deg);}
    to   { transform: rotate(0);}
}

#roadshow{
background: url(../images/top/roadshow.png) no-repeat center;
background-size: contain;
width: 180px;
height: 180px;
position: absolute;
bottom: 0;
right: 10px;
z-index: 21;
-webkit-animation:ballanm 0.6s ease-out;
animation:ballanm 0.6s ease-out;
}

#roadshow2{
background: url(../images/top/roadshow2.png) no-repeat center;
background-size: contain;
width: 180px;
height: 180px;
position: absolute;
bottom: 0;
right: 10px;
z-index: 21;
-webkit-animation:ballanm 0.6s ease-out;
animation:ballanm 0.6s ease-out;
}

#roadshow3{
background: url(../images/top/roadshow3.png) no-repeat center;
background-size: contain;
width: 180px;
height: 180px;
position: absolute;
bottom: 0;
right: 10px;
z-index: 21;
-webkit-animation:ballanm 0.6s ease-out;
animation:ballanm 0.6s ease-out;
}


@-webkit-keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: -1417px 0;}
}

@keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: -1417px 0;}
}

#imgCast {
background: url(../images/top/cast_b.jpg) repeat-x center;
background-size: auto 100%;
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
z-index:15;
-webkit-background-size: auto 100%;
-webkit-animation: bgscroll 60s linear infinite;
animation: bgscroll 60s linear infinite;
}



/*

menu

*/

#menuArea{
width: 170px;
height:100%;
position:absolute;
top:0;
left:0;
z-index:20;
}

#menuAreaBG{
width: 170px;
height:100%;
position:absolute;
top:0;
left:0;
z-index:19;
background: -webkit-linear-gradient(top left, #a0000b, #d7000b); 
background: linear-gradient(to bottom right, #a0000b, #d7000b);
opacity: 0.8;
filter: alpha(opacity=80);
}

#menuAll{
width: 150px;
position: absolute;
top: 150px;
left: 20px;
z-index: 22;
}

#menuAll ul {
list-style: none outside none;
float: left;
margin: 0;
padding: 0;
position: relative;
}

#menuAll ul li {
width:100%;
float: left;
margin: 0 0 20px;
position: relative;
line-height:1;
text-align: left;
}


#menuBgLine{
background-color: #FFFFFF;
width: 3px;
height: 100%;
position: absolute;
top: 0;
left: 7px;
z-index: 21;
}


/*

credit

*/

#creditAll{
width: 100%;
height: 150px;
position: absolute;
bottom: 0;
left: 0;
z-index: 50;
display: none;
}

#creditBg{
background: #330000;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0.9;
filter: alpha(opacity=90);  
}

#creditImg{
background: url(../images/top/billing.png) no-repeat center;
background-size: contain;
width: 1200px;
height: 110px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -55px;
margin-left: -600px;
z-index: 2;
cursor: pointer;
}

#creditClose{
background: url(../images/close.png) no-repeat;
background-size: contain;
width: 35px;
height: 35px;
position: absolute;
top: 5px;
right: 5px;
z-index: 3;
cursor: pointer;
}

#creditClose:hover{
opacity: 0.7;
filter: alpha(opacity=70);  
}


#copyright{
	background:url(../images/copyright.png) no-repeat center;
	background-size:contain;
	width:150px;
	height:7px;
	position:absolute;
	bottom:7px;
	left:17px;
	z-index:20;
}


/*

bnr

*/



#bnrL{
bottom:180px;
z-index: 20;
}

#bnrL2{
bottom:325px;
z-index: 20;
}

#bnrL3{
bottom:470px;
z-index: 20;
}

#bnrL,#bnrL2,#bnrL3{
width: 150px;
height: 150px;
text-align: center;
position: absolute;
right: 20px;
}


/*

sns btn

*/

#twitterBtn{
	width:50px;
	height:50px;
	position:absolute;
	top:15px;
	left:30px;
	z-index:50;
}

#instaBtn{
	width:50px;
	height:50px;
	position:absolute;
	top:15px;
	left:90px;
	z-index:50;
}

#snsBtn{
	width:160px;
	height:17px;
	position:absolute;
	line-height:0;
	text-align:center;
	bottom:65px;
	left:10px;
	z-index:30;
}

#udcast{
background: url("../images/udcast.png") no-repeat center;
background-size: contain;
	width:160px;
	height:30px;
	position:absolute;
	line-height:0;
	text-align:center;
	bottom:25px;
	left:10px;
	z-index:30;
	cursor: pointer;
}

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