/* CSS Document */
body, div, table, caption, th, tr, td, ul, ol, li, dl, dt, dd, form, input, textarea, p {
	font-family:'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}
body {
	background-image: url(../images/main_bg.jpg);
	background-repeat: repeat;
	font-size:small;
	line-height:1.5em;
	color:#ccc;
	background-color: #000;
	margin:0px auto 0px auto;
	padding:0px;
}
header, footer, article, section, h1, h2, h3, h4, h5, h6, p, ul, li, dl, dt, dd {
	margin:0;
	padding:0;
}
li {
	list-style:none;
}
img {
	border:none;
}
a {
	outline:none;
	text-decoration:none;
	color:#F39;
	border:none;
}
/*
 *  layout
	*/


#ALL {
	width:884px;
	text-align:center;
	background-image: url(../images/bg_content.jpg);
	background-repeat: repeat-y;
	margin:0px auto 0px auto;
	padding:0px;
	box-shadow: 0px 0px 10px 0px #000;
	padding-bottom: 10px;
	overflow: hidden;
	behavior: url("../css/PIE.htc");
}
/*
 *  header
	*/

header {
	position:relative;
	height:152px;
}
header h1 {
	position:absolute;
	top:5px;
	left:20px;
	width:184px;
	height:114px;
	display:block;
	z-index:100;
}
header h1 a {
	text-indent:-5000px;
	width:184px;
	height:114px;
	display:block;
	background-image: url(../images/logo.png);
	background-repeat: no-repeat;
}
header nav {
	position:absolute;
	top:67px;
	left:0px;
	text-indent:-5000px;
	width:884px;
	height:85px;
	display:block;
	background-image: url(../images/btn_content.png);
	background-repeat: no-repeat;
	background-position: 0px -2px;
}
header nav li a {
	position:absolute;
	background-image: url(../images/btn_content.png);
	background-repeat: no-repeat;
	outline:none;
}
header nav li.navGame a {
	top:0px;
	left:228px;
	width:220px;
	height:59px;
	background-position: -228px -2px;
}
header nav li.navGame a:hover {
	background-position: -228px -90px;
}
header nav li.navTrailer a {
	top:0px;
	left:448px;
	width:217px;
	height:59px;
	background-position: -448px -2px;
}
header nav li.navTrailer a:hover {
	background-position: -448px -90px;
}
header nav li.navSpecial a {
	top:0px;
	left:665px;
	width:217px;
	height:59px;
	background-position: -664px -2px;
}
header nav li.navSpecial a:hover {
	background-position: -664px -90px;
}
header nav li.navSpecial_gray a {
	top:0px;
	left:665px;
	width:217px;
	height:59px;
	background-position: -664px -280px;
}
header nav li.navGameSystem a {
	top:59px;
	left:228px;
	width:110px;
	height:26px;
	background-position: -228px -61px;
}
header nav li.navGameSystem a:hover {
	top:59px;
	left:209px;
	width:147px;
	height:26px;
	background-position: -209px -149px;
}
header nav li.navGameStory a {
	top:59px;
	left:356px;
	width:101px;
	height:26px;
	background-position: -356px -61px;
}
header nav li.navGameStory a:hover {
	top:60px;
	left:338px;
	width:147px;
	height:26px;
	background-position: -338px -176px;
}
header nav li.navGameStage a {
	top:59px;
	left:485px;
	width:101px;
	height:26px;
	background-position: -485px -61px;
}
header nav li.navGameStage a:hover {
	top:60px;
	left:468px;
	width:135px;
	height:26px;
	background-position: -468px -202px;
}
header nav li.navGameStage_gray a {
	top:59px;
	left:485px;
	width:101px;
	height:26px;
	background-position: -485px -342px;
	z-index:999;
}
header nav li.navGameStage_gray a:hover {
	background-position: -485px -342px;
}
header nav li.navGameChara a {
	top:59px;
	left:603px;
	width:135px;
	height:26px;
	background-position: -603px -61px;
}
header nav li.navGameChara a:hover {
	top:60px;
	left:586px;
	width:170px;
	height:26px;
	background-position: -586px -228px;
	z-index:998;
}
header nav li.navGameCostume a {
	top:59px;
	left:756px;
	width:118px;
	height:26px;
	background-position: -756px -61px;
}
header nav li.navGameCostume a:hover {
	top:60px;
	left:738px;
	width:136px;
	height:26px;
	background-position: -738px -254px;
}

/*
 *  side sns
	*/
#BOX_SNS {
	overflow: hidden;
	position: fixed;
	width: 171px; /*オープン*/
	/*width: 48px; /*クローズ*/
	height:190px;
	top:50px;
	right:-126px;
	z-index:1000;
	background-image: url(../images/bg_sns.png);
	background-repeat: no-repeat;

	transition: 0.3s ease-in-out;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	behavior: url("../css/PIE.htc");

}
#BOX_SNS:hover {
	right:0px;
}
#BOX_SNS .sns {
	margin-top:30px;
	margin-left:10px;
	background-image: url(../images/sns_icon.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-left:50px;
	padding-top:5px;
}
#BOX_SNS .twitter {
	display:block;
	height:38px;
	vertical-align:middle;
}
#BOX_SNS .facebook {
	display:block;
	height:38px;
	vertical-align:middle;
}
#BOX_SNS .plus {
	display:block;
	height:38px;
	vertical-align:middle;
}
#BOX_SNS .mixi {
	display:block;
	height:38px;
	vertical-align:middle;
}

@media screen and (max-device-width: 480px) {
 #BOX_SNS { display: none; }
}
@media screen and (max-device-width: 1024px) {
 #BOX_SNS { display: none; }
}


/*
 *  main_frame
	*/

article{
	clear:both;
	width:864px;
	position:relative;
	margin: 10px 10px 0px 10px;
	background-color:#000;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	box-shadow: 0px 0px 5px #ccc;
	-moz-box-shadow: 0px 0px 5px #ccc;
	-webkit-box-shadow: 0px 0px 5px #ccc;
	display:inline-table;
	behavior: url("../css/PIE.htc");

}





/*
 *  footer
	*/

footer{
	width:100%;
	background-image: url(../images/footer_bg.jpg);
	background-repeat: repeat-x;
	background-position: top center;
	position:relative;
}
footer section.contact{
	position:relative;
	width:844px;
	margin: 0px auto;
	padding: 10px 0px;
	border-bottom:dotted 1px #666;
}
footer section.contact h5{
	font-size:small;
	font-weight:bold;
}
footer section.contact p{
	font-size:small;
}
footer section.caution {
	position:relative;
	width:884px;
	height:146px;
	margin:0 auto;
	background-image: url(../images/footer.png);
	background-repeat: repeat-x;
	background-position: center 10px;
}

footer .caution p{
	display:none;
}
footer .logo{
	position:absolute;
	right:10px;
	top:5px;
}
footer .logo li{
	float:left;
	width:90px;
	height:80px;
}
footer .logo li a{
	display:block;
	width:90px;
	height:80px;
	text-indent:-5000px;
}


footer .btnBackToTop{
	width:114px;
	height:26px;
	display:block;
	position:absolute;
	right:10px;
	top:-26px;
}
footer .btnBackToTop a{
	width:114px;
	height:26px;
	display:block;
	background-image: url(../images/back_top.png);
	background-repeat: no-repeat;
	background-position: top left;
	text-indent:-5000px;
}


#min-height{
	width:864px;
	height:500px;
	display:block;
	text-align:left;
}