body	 { 
	background: #000000 url(PICT_game/jd02_bg.jpg) ;
	background-repeat: no-repeat;
	background-position:50% 50%;
	background-attachment:fixed;
	background-size:cover;
	color:#ffffff;
	font-family: serif;
	margin:3em 0 0; 
	}


.common_menu{
	width: 100%;
}
.common_menu ul { 
	width: 100%;
	margin:0;
	padding: 0;
	text-align:center;
}

.common_menu li { 
	border: solid 2px #A48677;
	background:#3D1F10;
	padding: 4px;
	margin:4px auto 4px;
	display: inline-block;
	font-size: 150%;
	color:#ffffff;
	white-space: nowrap;
}


.common_menu li a	{
	color: #ffffff;
	text-decoration: none;
}
.common_menu li:nth-child(2) { background:#4e7634;}
.common_menu li:nth-child(3) { background:#ec87a0;}
.common_menu li:nth-child(4) { background:#d8480c;}
.common_menu li:nth-child(5) { background:#666596;}

.common_menu li:hover {
	border: solid 2px #ffffff;
}

@media screen and (max-width: 800px){
	.common_menu li	{
		width:45%; 
		width:calc(50% - 1em -8px);
		margin: 0.2em 0;
	}
	.actor {
		display: none;
	}
}

/* メイン */
.main_box{
	text-align:left; 
	margin-right:auto;  
	text-align:left; 
	width:800px;
	max-width: 100%;
}
h1		 { text-align:center; margin-right:auto; margin-left:auto; font-size:3em}
h2		 { text-align:center; margin-right:auto; margin-left:auto; font-size:2.0em}
h3		 { text-align:center; margin-right:auto; margin-left:auto;}

.ie_box	 { text-align:center; margin: 24px; }
.ninja_onebutton{ text-align:center; margin-right:auto; margin-left:auto; width: 320px;}

table	 { margin: 12px; border-spacing: 1px;}
.dlbox	 { border:2px ridge #e0e0e0; margin:16px auto;}
.dlbox td{ border:2px groove #e0e0e0; margin:8px;}
.dlbox th{ border:2px groove #e0e0e0; margin:8px;}
.copy	 { text-align:left; margin: 8px;}
.actor	 {
	bottom:0px; 
	right:16px; 
	position:fixed;
	max-height: 50%;
}
.window_box	{
	margin:8px auto 8px auto; padding:0px ;
	background:url(PICT_game/jd02_wbg.png);
	border:2px groove #ffffff;
	width:800px;
	max-width: 95%;
}
.flont_box {
	margin: 6em auto 6em 10%; 
	text-align:left;
	max-width:100%;
}

.movie {
	border:2px groove #800000;
	width: 480px;
	max-width: 100%;
	height: 400px;
}

.ss		 { 
	border:none; 
	width: 320px;
	max-width: 30%;
}
.sub	 { font-size:75%;}
.big	 { font-size:125%;}
.small	 { font-size:50%;}
.caption { vertical-align:text-top; text-align:left;}
.clearfix:after	{display: block; clear: both; content: "";}

.dlicon	 { margin:0.5em; max-height:3em;}

.window_box	li{
	border: solid 2px #A48677;
	background:#2A221F;
	padding: 4px;
	margin:8px auto 8px;
}
.window_box	li a{
	color: #ffffff;
	text-decoration: none;
}
.battle_box {
	width:30%; 
	display: inline-block;
	margin:8px 4px 16px 4px ;
	vertical-align:top;
}
.battle_box img{
	width:100%; 
}

.actor_l {
	margin: 0;
	display: inline-block;
	width:180px;
}
.actor_l img{
	width: auto;
	height: 50%;
}
.actor_r {
	margin: 0;
	display: inline-block;
	width:75%;
}

@media screen and (max-width: 800px){
	.ss {
		width: 90%;
		max-width: 90%;
		margin: 0 4px;
	border: solid 2px #000000;
	}
	
	.battle_box {
		width:90%; 
	}
}