@charset "UTF-8";
/* CSS Document */
*{
	zoom:1;
}

body {
	font: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-size: 12px;
	margin: 0 auto;
	padding: 0;
	color: #000000;
}

img { /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
	border: none;
}

img.header,img.back,img.footer{
	display:block;
}

.container {
	width: 1000px;
	margin: 0 auto; /* 幅に加え、両側を自動値とすることで、レイアウトが中央に揃います。 */
}

header{
	margin: 0 auto; 
	top: 0px;
	position: fixed;
	z-index: 7;
}
	
.content{
	position:fixed;
	top: 0px;
	width: 1000px;
	height: 600px;
	z-index: 5;
}

.textarea{
	background-color: #b29882;
	width: 700px;
	position:absolute;
	margin: 0px auto;
	padding: 50px;
	left: 10%;
	top: 10%;
	right: 10%;
	bottom: 0%;	
	overflow: auto;
	z-index: 6;
}

ul#gallery {
	width: 690px;
	list-style-type:none;
}

ul#gallery:after {
	display: block;
	clear: both;
	content: "";
}

ul#gallery li {
	width: 150px;
	height: 225px;
	margin: 10px 10px 10px 10px;
	float: left;
	display:inline;
}

ul#gallery li img {
	display:inline-block;
	width: 150px;
	height: auto;
	margin: 0 auto;
	box-shadow: 1px 2px 5px #000000;
	-moz-box-shadow: 1px 2px 5px #000000;
	-webkit-box-shadow: 1px 2px 5px #000000;
}

ul#gallery li img:hover{
	display:inline-block;
	opacity:0.7;/* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=70); /* IE lt 8 */
	-ms-filter: "alpha(opacity=70)"; /* IE 8 */
	-khtml-opacity: .7; /* Safari 1.x */
	-moz-opacity: .7; /* FF lt 1.5, Netscape */
}

footer {
	width: 1000px;
	height: 30px;
	margin: 0 auto; 
	color: #ffffff;
	padding-top: 5px;
	top: 570px;
	z-index: 8;
	position: fixed;
/* IE6 に、適切にクリアするための hasLayout を指定します。 */
	clear: both; /* この clear プロパティにより .container は、カラムの範囲がどこまでかを認識してその範囲を含めるようになります。 */
	/*-moz-box-shadow: 1px -5px 10px #000;
	-webkit-box-shadow: 1px -5px 10px #000;*/
	/*filter: progid:DXImageTransform.Microsoft.Shadow(color='#000', Direction=45, Strength=5);IE対策*/
}

footer a{
	color: #ffffff;
	text-decoration:none;
}

footer p{
	position: relative;
	left: 10px;	
	top: -20px;
	z-index: 9;
}
footer p.copy{
	top:-30px;
	left: 350px;
	z-index: 10;
}

.clearfloat { /* このクラスは、footer が .container から削除されているか取り出されている場合に、<br />または空の block エレメントで、フローティングさせる最後の block に続く最後のエレメントとして (.container 内に) 配置できます。 */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/*HTML 5 サポート - 新しい HTML 5 タグを display:block に設定します。これにより、ブラウザーでタグが適切にレンダリングされます。 */
footer {
	display: block;
}

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
}