@charset "utf-8";

/*--------------------------------------------------------------------/
	header
/--------------------------------------------------------------------*/

#header{
	position:relative;
	padding:0px;
	height:30px;
}

#header h1{
	position:absolute;
	top:5px;
	right:10px;
	font-size:10px;
	color:#878256;
	width: 705px;
}

/*--------------------------------------------------------------------/
	container
/--------------------------------------------------------------------*/

#container{
	margin:20px auto;
	width:950px;
}

#sidebar{
	float:right;
	width:380px;
}
#sidebar p{
	font-size:10px;
	padding:5px 0 0 10px;
}

#sidebar a:hover img{
	opacity:0.8;
	filter:alpha(opacity=80);
}

#contents{
	float:left;
	width:540px;
}

#main{
	width:950px;
	margin:0 auto 20px;
}



.top-banner{
	display: flex;
	flex-wrap:wrap;
}
.top-banner li {
	width: calc(100%/4);/*←画像を横に4つ並べる場合*/
	padding:0 5px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
}
.top-banner li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
	border:solid 1px #ccc; /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}