body,html{
	height:	100%;
	width:	100%;
	margin:		0;
	padding:	0;
}

/* ---- 脚注 ---- */
p.footnote {color:gray; font-size:12px;}

/* ---- Toppage フッターの設定 (footer) ---- */
 #mainfooter{
 	position: absolute;
 	top:	90%;
 	height:10%;
 	width:	100%;
 	left:	0px;
 	margin:		0px;
 	bottom:	0px;
 	background-color: orange;
 	text-align: center;
 	color: white;
 	z-index: 5;
 }
 
 /* ---- Topページの白い半透明のsidebar ---- */
#sidebar{
	position: absolute;
	top: 0;
	left: 12%;
	height: 100%;
	width:	20%;
	min-width:	250px;
	background-color: white;
	color:	black;
	opacity: 0.85;
	z-index:	1;
	text-align: center;
}


/*過去の産物*/
img.bg {
	/* set rules to fill background */
	min-height:	100%;
	min-width:	1024px;
	/* set up proportionate scaling */
	width:	100%;
	height:	100%;
	/* set up positioning */
	position:	absolute;
	/* またはabsolute; */
	top:	0;
	left:	0;
	bottom:	0;
	z-index: -1;
}

/* リンクの色を変えない(sidebar) */
a.side:link {color: black}
a.side:visited{color: black}
a.side:hover{color: orange}
a.side:active{color: white}

/* リンクの色を変えない(joinus) */
a.join:link {color:black}
a.join:link visited {color: black}
a.join:hover{color: blue}
a.join:active{color: black}

/* リンクの色を変えない(footer) */
a.foot:link {color: white}
a.foot:visited{color: white}
a.foot:hover{color: blue}
a.foot:active{color: orange}

/* リンクの色を変えない(Kanoda) */
a.KK:link {color: orange}
a.KK:visited{color: orange}
a.KK:hover{color: blue}
a.KK:active{color: orange}




@media screen and (max-width: 1024px){
	img.bg {
	left:	50%;
	margin-left:	-512px; }
}

div#container {
	position:	relative;
	z-index: auto;
}

/* ---- MainText ---- */
#maintext{
	position: absolute;
	top:62%;
	left:40%;
	height:	30%;
	width:	60%;
	background-color: ;
	color:	white;
	z-index: 2;
	text-align:left;
	font-family: fantasy;
	font-size: 50;
}



/* ---- 真ん中の記事 ---- */
#article{
	float: left;
	width:	55%;
	background-color:	white;
	color: black;
	font-family: Meiryo;
	text-align: left;
	margin-left: 5%;
	margin-top: 3%;
}

/* ---- About us用真ん中の大きなブロック ---- */
#middle{
	float:	 left;
	width:	65%;
	background-color:	white;
	color:	black;
	font-family:	Meiryo;
	text-align:	left;
	margin-left:	5%;
	margin-top:	3%;
}

/* ---- About us用真ん中の小さなブロック ---- */
#block{
	float:left;
	width:	96%;
	height:	50%;
	background-color:	white;
	color:	black
	font-family:	Meiryo;
	text-align:	left;
	margin:		2%;
}

/* ---- About us用真ん中左ブロック ----*/
#left-block{
	float:left;
	width:	45%;
	margin-left:	3%;
	height:	100%;
	background-color:	white;
	color:	black
	font-family:	Meiryo;
	text-align:	left;
}

/* ---- About us用真ん中右ブロック ----*/
#right-block{
	float:right;
	width:	45%;
	margin-right:	3%;
	height:	100%;
	background-color:	white;
	color:	black
	font-family:	Meiryo;
	text-align:	left;
}


	

/* ---- サブページの灰色サイドバー ----*/
#subsidebar{
	height: 100%;
	float: left;
	width:	20%;
	min-width:	250px;
	background-color:	whitesmoke;
	color:	black;
	text-align: center;
}	


/* ---- news ---- */
#news{
	position: absolute;
	top: 85%;
	height: 10%;
	width:	100%;
	background-color: #696969;
	clear: both;
	text-align: center;
	color: white;
	z-index: 3;
}
 

 
 /* ---- 便利なコンテナ ---- */
 .container{
 	width:	100%;
 	top:	0px;
 	min-height: 100%;
 	overflow: auto;
 	background-color: white;
 }

/* ---- トップページ　スライドショー（この下には何も入れるな） ----*/
<style type="text/css">
#slideshow {
   position: relative;
   width:  640px; /* 画像の横幅に合わせて記述 */
   height: 270px; /* 画像の高さに合わせて記述 */
}
#slideshow img {
   position: absolute;
   top: 0;
   left:0;
   z-index: -10;
   opacity: 0.0;
}
#slideshow img.active {
   z-index: -8;
   opacity: 1.0;
}
#slideshow img.last-active {
   z-index: -9;
}
</style>