* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

img{
border: 0px;
}

body{
	margin:0px;
	background:url("../images/bg.png");
	font-size:14px;
	color: ghostwhite;
	line-height:21px;
	position:relative;
	font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

div#gototop{
width:1200px;
height:auto;
margin:0 auto;
text-align:center;
box-sizing:border-box;
background:#000000;
}

div#wrap{
width:980px;
height:auto;
margin:0 auto;
padding:40px 20px;
box-sizing:border-box;
background:url('../images/bg.jpg') no-repeat center bottom #000000;
background-size:auto 100%;
}

div#wrap_INDEX{
width:1200px;
height:auto;
margin:0 auto;
padding:0px 110px 40px 110px;
box-sizing:border-box;
position:relative;
top:-5px;
-moz-box-shadow: 0px 0px 5px #000000;
-webkit-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
background:url('../images/bg.jpg') no-repeat center bottom #000000;
background-size:auto 100%;
}

a:link{
	color:#fff;
	text-decoration:none;
	transition: color 0.3s ease 0s;}
a:visited{
	color:#fff;}
a:hover{
	color:#666;}

header{
	width:100%;
	min-width:1024px;
	height:auto;
	margin:0 auto;
	text-align:center;
	background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */}
	
	header div.mintop{
	width:100%;
	height:120px;
	background:url(../images/topimage_min.jpg) top center no-repeat;
	}
	
	header div.mintop a{
	display:block;
	margin:0 auto;
	width:600px;}

	header img{
	width:100%;
	max-width:1200px;
	height:auto;}
	
	header img.logo{
	width:233px;
	height:104px;
	margin:2px auto 8px auto;}
	
	header div.headmenu{/*各種ページ用のヘッダー内メニュー。index用のメニュー用CSSは下記にあるdiv.topmenu*/
	width:1024px;
	height:60px;
	display: -webkit-flex; /* Safari */
	display: flex;
		-webkit-justify-content: center; /* Safari */
		justify-content:         center;
	margin:0 auto;
	background:url(../images/menubg1.png) bottom center no-repeat;
	}
		header div.headmenu div.menu{
		width:196px;
		height:60px;
		}
		
		header div.headmenu div.menu_b{
		width:196px;
		height:60px;
		}
		
		header div.headmenu div.menu a, header div.headmenu div.menu a:visited, header div.headmenu div.menu a:active{
		display:block;
		width:196px;
		height:60px;
		background:url(../images/topmenu_cursor_n.png) center center;
		}
		
		header div.headmenu div.menu a:hover{
		display:block;
		width:196px;
		height:60px;
		background:url(../images/topmenu_cursor_min0.png) center center;
		transition: background 0.5s ease 0s;
		}

		header div.headmenu div.menu_b a, header div.headmenu div.menu_b a:visited, header div.headmenu div.menu_b a:active{
		display:block;
		width:196px;
		height:60px;
		background:url(../images/topmenu_cursor_n.png) center center;
		}
		
		header div.headmenu div.menu_b a:hover{
		display:block;
		width:196px;
		height:60px;
		background:url(../images/topmenu_cursor_min0.png) center center;
		transition: background 0.5s ease 0s;
		}


	
h2{
	display:block;
	width:100%;
	height:auto;
	margin:0 auto 0 10px;}

h2 img{
	width:410px;
	height:40px;}
	
h3{
	margin:10px 0;
}

h3 img{
width:100%;
height:auto;
}


div.topmenu{
	width:980px;
	height:auto;
	display: -webkit-flex; /* Safari */
	display: flex;
	margin:0;
	text-align:right;
	}
	
	div.topmenu div.menu{
	width:196px;
	height:160px;}

	div.topmenu div.menu a, div.topmenu div.menu a:visited, div.topmenu div.menu a:active {
	display:block;
	width:196px;
	height:160px;
	background:url(../images/topmenu_cursor_n.png) center center;
	}
	
	div.topmenu div.menu a:hover{
	display:block;
	width:196px;
	height:160px;
	background:url(../images/topmenu_cursor.png) center center;
	transition: background 0.5s ease 0s;
	}

div.sns img{
	width:45%;
	height:45%;}
	
div.sns img.r{
	margin:0 20px 0 0;}

div.sns img.l{
	margin:0 0 0 20px;}
	
	
div.txt{
	width:100%;
	height:auto;
	overflow:hiddn;}

div.txt p{
	margin:20px;}

div.info{
	width:980px;
	display: -webkit-flex; /* Safari */
	display: flex;
	position:  static;}
	
	div.info div.box div.box_min{
	width:482px;
	height:264px;
	margin:0 20px 0 0;
	background:url('../images/window.png') no-repeat center bottom;
	overflow:hidden;
	}
		div.info div.box div.box_min p{
		margin:10px;
		}
		
		div.info div.box div.box_min table{
		margin:10px;
		font-size:18px;
		line-height:28px;
		}
		
			div.info div.box div.box_min table td.l{
			text-align:right;
			}
			
			div.info div.box div.box_min table td.dot{
			width:20px;
			background:url('../images/dot.png') no-repeat center center;
			}
			
		div.info div.movie{
		width:400px;
		height:auto;
		margin:0 auto;}
			
			div.info div.movie p{
			width:400px;
			height:30px;
			box-sizing:border-box;
			text-align:center;
			color:aliceblue;
			background:#000000;
			border-radius:6px;
			box-shadow:0px 0px 0px 2px #62ff40 inset;
				-moz-box-shadow:0px 0px 0px 2px #62ff40 inset;
				-webkit-box-shadow:0px 0px 0px 2px #62ff40 inset;
			line-height:30px;}
			
ul#contents_l{
	list-style:none;
	padding:0;
	margin:0;
	width:200px;
	height:auto;
	overflow:hidden;
     }
ul#contents_l li{
    float:left;
    list-style:none;
	display:block;
	width:200px;
	height:90px;
	margin:0;
	padding:0px;
	background:#fff;
    }

			ul#contents_l li a img, 
			ul#contents_l li a:visited img, 
			ul#contents_l li a:active img{
			opacity: 1;
			}
			
			ul#contents_l li a:hover img{
			opacity: 0.5;
			}
			
			ul#contents_l li.select{
			}


div#contents_r div#tabBox1, 
div#contents_r div#tabBox2, 
div#contents_r div#tabBox3, 
div#contents_r div#tabBox4, 
div#contents_r div#tabBox5, 
div#contents_r div#tabBox6, 
div#contents_r div#tabBox7, 
div#contents_r div#tabBox8, 
div#contents_r div#tabBox9 {
    width:740px;
    height:700px;
    margin: 0 auto auto 40px;
    }
    
div#contents_r div#tabBox1 h3 img, 
div#contents_r div#tabBox2 h3 img, 
div#contents_r div#tabBox3 h3 img, 
div#contents_r div#tabBox4 h3 img, 
div#contents_r div#tabBox5 h3 img, 
div#contents_r div#tabBox6 h3 img, 
div#contents_r div#tabBox7 h3 img, 
div#contents_r div#tabBox8 h3 img, 
div#contents_r div#tabBox9 h3 img {
	width:auto;
	height:auto;
			}
			
div#contents_r div#tabBox1 p, 
div#contents_r div#tabBox2 p, 
div#contents_r div#tabBox3 p, 
div#contents_r div#tabBox4 p, 
div#contents_r div#tabBox5 p, 
div#contents_r div#tabBox6 p, 
div#contents_r div#tabBox7 p, 
div#contents_r div#tabBox8 p, 
div#contents_r div#tabBox9 p {
	width:300px;
	height:auto;
	text-shadow: 0 2px 1px #000, 2px 0 1px #000, 1px 0 1px #000;
} 

div.info div#contents_r div#tabBox1{
 }

div#contents_r div#tabBox2, 
div#contents_r div#tabBox3, 
div#contents_r div#tabBox4, 
div#contents_r div#tabBox5, 
div#contents_r div#tabBox6, 
div#contents_r div#tabBox7, 
div#contents_r div#tabBox8, 
div#contents_r div#tabBox9 {

    display:none;
    }

div#contents_r div.cwindow div.manual img{
display:block;
width:300px;
height:auto;
margin:0 auto 10px 20px ;
}


div.chara_slide {
	width:320px;
	height:200px;
} 

div.chara_slide img{
	width:320px;
	height:auto;
}

div#contents_r div.cwindow div.sys{
	width:770px;
	display: -webkit-flex; /* Safari */
	display: flex;

}

div#contents_r div.cwindow div.sys div.chara_slide{
	margin:auto auto auto 40px;
}

									

a.top{
display:block;
width:109px;
height:96px;
position: fixed;
bottom:0px;
right:0px;
}

a.top img{
	width:109px;
	height:96px;
}

img.charaimg{
	width:100%;
	height:auto;
}

div#wallpaper{
	width:100%;
	height:auto;
	display: -webkit-flex; /* Safari */
	display: flex;
}

div#wallpaper .l{
	margin:10px 5px 10px 20px;
}

div#wallpaper .l img{
width:100%;
height:auto;
}

div#wallpaper .r{
		margin:10px 20px 10px 5px;
}

div#wallpaper .r a{
	display:block;
	width:70px;
	height:40px;
	background:#161616;
	border:solid 1px #8c8c8c;
	border-radius:5px;
	padding:5px;
	line-height:40px;
	text-align:center;
	margin: 0 0 10px 0;
}

footer{
	width:100%;
	min-width:964px;
	height:300px;
	font-size:12px;
	display: -webkit-flex-end; /* Safari */
	display: flex-end;
	background:#000000;
	margin:0;
	padding:10px 0;

}
footer p{
	width:964px;
	height:auto;
	margin:0px auto 20px auto;
	position:relative;
	}
		footer p small{
		line-height:30px;
		display:block;
		text-align:center;
		}
		
		footer p img.arrow{
		width:8px;
		height:12px;
		position: relative;
		bottom:-2px;
		margin:0 5px;
		}
		
		footer ul{
		width:964px;
		height:auto;
		display: -webkit-flex; /* Safari */
		display: flex;
		list-style:none;
		margin:0 auto;
		padding:0;
		}
		
		footer ul li{
		display:block;
		margin: 0 10px 0 0;}
				
		/*他ゲームページへのリンクグラデーション効果ここから*/
		footer ul li a, footer ul li a:visited, footer ul li a:active{
		text-decoration:none;
		display:block;
		width:195px;
		height:80px;
		}
				
		footer ul li a:hover{
		width:195px;
		height:80px;
		/* box-shadow */
		box-shadow:inset 0px 0px 15px 3px rgba(255,255,255,1);
		-webkit-box-shadow:inset 0px 0px 15px 3px rgba(255,255,255,1);
		-moz-box-shadow:inset 0px 0px 15px 3px rgba(255,255,255,1);
		}
		/*他ゲームページへのリンクグラデーション効果ここまで*/
		
		
		footer ul img{
		width:195px;
		height:80px;
		}
		
		
		.fixed {
		position: fixed;
		top: 0px;
		}