@charset "utf-8";
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	margin: 0; /* 複数の異なるブラウザの初期設定値に対応するため、body エレメントのマージンと余白を 0 にすることをお勧めします */
	padding: 0;
	text-align: center; /* これにより、IE 5* ブラウザではコンテナが中央揃えになります。そして、テキストは、#container セレクタの初期設定である左揃えに設定されます */
	color: #000000;
	width:980px;
	height:980px;
	font-size:14px;
	}
.djib3 #container { 
	width: 980px;
	height:980px;  /* 最大幅である 800px より 20px 小さくすることにより、ブラウザクロームの使用が可能となり、水平スクロールバーが表示されなくなります */
	margin: 0px; /* 自動マージン（幅と連動）により、ページが中央揃えになります */
	border: none;
	text-align: left; /* この設定は body エレメントの text-align: center より優先されます。 */
} 
.djib3 #header { 

	padding: 0px;  /* この余白は、その下に表示される div のエレメントの左揃えと一致します。#header でテキストの代わりにイメージが使用される場合は、必要に応じて、余白を削除してください。 */
	width:980px;
	height:100px;
} 
.djib3 #mainContent { 
	width:980px;
	height:880px;
	background-image:url(image/main/mainback.jpg);
}
	.djib3 #sidebar {
		width:180px;
		height:840px;
		}
		.djib3 #sidebar img{
			border:none;
			text-decoration:none;
			}
		#b_top {
			width:130px;
			height:25px;
			position:relative;
			top:45px;
			left:25px;
			border:none;
			text-decoration:none;
			}
		#b_story {
			width:130px;
			height:25px;
			position:relative;
			top:40px;
			left:25px;
			border:none;
			text-decoration:none;
			}
		#b_character {
			width:130px;
			height:25px;
			position:relative;
			top:40px;
			left:25px;
			border:none;
			text-decoration:none;
			}
		#b_gallery {
			width:130px;
			height:25px;
			position:relative;
			top:40px;
			left:25px;
			border:none;
			text-decoration:none;
			}
		#b_spec {
			width:130px;
			height:25px;
			position:relative;
			top:40px;
			left:25px;
			border:none;
			text-decoration:none;
			}
		#b_download {
			width:130px;
			height:25px;
			position:relative;
			top:40px;
			left:25px;
			border:none;
			text-decoration:none;
			}
		#b_campaign {
			width:130px;
			height:25px;
			position:relative;
			top:50px;
			left:25px;
			border:none;
			text-decoration:none;
			}
		#b_special {
			width:130px;
			height:25px;
			position:relative;
			top:60px;
			left:25px;
			border:none;
			text-decoration:none;
			}
		#b_tokuten {
			width:130px;
			height:25px;
			position:relative;
			top:70px;
			left:25px;
			border:none;
			text-decoration:none;
			}
	.djib3 #main {
		width:800px;
		height:840px;
		position:absolute;
		top:100px;
		left:180px;
		}
		.djib3 #news {
			width:730px;
			height:230px;
			position:relative;
			top:50px;
			left:0px;
			font-size:16px;
			}
			#samary {
				width:550px;
				list-style-image:none;
				}
			#banner {
				position:absolute;
				top:150px;
				left:530px;
				}
    .djib3 #footer { 
	    padding: 0px; /* この余白は、その上に表示される div のエレメントの左揃えと一致します。 */
    	background:#DDDDDD; 
    } 
.fltrt { /* このクラスは、ページ上でフローティングエレメントを右側に配置するのに使用できます。プローティングエレメントは、ページ上でその横に配置されるエレメントの前に配置される必要があります。 */
	float: right;
	margin-left: 8px;
}
.fltlft { /* このクラスは、ページ上でフローティングエレメントを左側に配置するのに使用できます */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* このクラスは、div またはブレークエレメントに適用される必要があり、また、フローティングエレメントが完全に含まれているコンテナの末尾の直前にある最後のエレメントである必要があります */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
#main_down {
		width:750px;
		height:790px;
		position:absolute;
		top:100px;
		left:180px;
		background-image:url(image/download/download.jpg);
		}
.guide	{
		position:absolute;
		top:130px;
		left:160px;
		}
.mail	{
		position:absolute;
		top:200px;
		left:200px;
		}