@charset "shift_jis";


/*サイト全般設定*/
body {
	color: #FFFFFF;	/*文字色を白に*/
	margin: 0px;
	padding: 0px;
	text-align: center;
	font: 75%/2 "メイリオ", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";	/*文字サイズは75%の部分になる。12pxとか自由に変更して下さい。*/
	background: #000000 url(images/bg.gif) repeat-x top;	/*壁紙設定箇所。ページ上部に横並びという設定。通常の設定にしたいなら「repeat-x top」を外す。*/
}



/*スクロールバー設定（W3Cに準拠したい場合はここと「ul#menu a:hover img」を丸ごと削除する）*/
html {
	scrollbar-3dlight-color:#000000;
	scrollbar-highlight-color:#463c29;
	scrollbar-face-color:#000000;
	scrollbar-arrow-color:#463c29;
	scrollbar-shadow-color:#463c29;
	scrollbar-darkshadow-color:#000000;
	scrollbar-track-color:#000000;
}


/*細々設定*/
h1,h2,h3,h4,p,ul,li{
	margin: 0px;
	padding: 0px;
}
ul{
	list-style-type: none;
}
img {
	border: none;
}
textarea {
	font-size: 11px;
}
.look {
	background: #222222;
}
.color1 {
	color: #FF0000;
}




/*リンク設定
---------------------------------------------------------------------------------------------------------*/
a {
	color: #FFFFFF;	/*リンク部分を白色にする*/
}
a:hover {
	color: #FF0000;	/*カーソルオーバー時に赤色にする*/
}



/*コンテナー
---------------------------------------------------------------------------------------------------------*/
#container {
	width: 920px;
	margin-right: auto;
	margin-left: auto;
}



/*コンテンツ
---------------------------------------------------------------------------------------------------------*/
#contents {
	width: 895px;
	margin-left: 25px;
	background: #000000 url(images/contents_bg.gif);	/*コンテンツ内のストライプ壁紙をここで設定*/
	clear: left;
	text-align: left;
}



/*ヘッダー
---------------------------------------------------------------------------------------------------------*/
#header {
	background: url(images/header_bg.jpg) no-repeat;	/*ヘッダーの画像はここで設定。*/
	height: 319px;
}
#header h1 {
	font-size: 11px;	/*h1タグの文字の大きさ*/
	text-align: right;	/*h1タグを右寄せ*/
}



/*メインメニュー（W3Cに準拠したい場合はここの「ul#menu a:hover img」部分と上にある「html」を丸ごと削除する）
---------------------------------------------------------------------------------------------------------*/
ul#menu li {
	float: left;
	width:auto;
	background: #000000;
	height:90px;
}
ul#menu a:hover img {
	filter: Alpha(opacity=80);
	opacity: 0.8;
}



/*h2タグ設定（バックが木になっている見出し）
---------------------------------------------------------------------------------------------------------*/
h2 {
	font-size: 120%;	/*文字サイズを「body」で設定したサイズより少し大きく。*/
	padding-left: 10px;
	padding-right: 40px;
	background: #511F04 url(images/h2bg.jpg) right top;	/*imagesフォルダに入っている「h2bg.jpg」を読み込んで、右上(right top)に配置*/
	line-height: 40px;
	height: 40px;
	overflow: hidden;	/*文字がボックスからはみ出た部分を非表示にする*/
	color: #FFFFFF;		/*文字色を白に*/
	margin-bottom: 10px;
}



/*h3タグ設定（サイドコンテンツで使っている二重線の見出し）
---------------------------------------------------------------------------------------------------------*/
h3 {
	font-size: 120%;	/*文字サイズを「body」で設定したサイズより少し大きく。*/
	border: 3px double #362e2b;	/*二重線の設定。色は#362e2b　*/
	text-align: center;			/*テキストをセンタリング。左よせでいいならこの１行を削除する*/
}



/*h4タグ設定（メニュー紹介用のボックス内の見出し。商品名の部分。）
---------------------------------------------------------------------------------------------------------*/
h4 {
	border-bottom: 1px solid #ffffff;	/*文字の下に1pxの直線(solid)を白(#ffffff)で入れる*/
	border-left: 4px solid #ffffff;		/*文字の左に4pxの直線(solid)を白(#ffffff)で入れる*/
	padding-left: 5px;
	font-size: 100%;
	margin-top: 5px;
}



/*メニューボックス設定
---------------------------------------------------------------------------------------------------------*/
.box {
	width: 550px;	/*テーブルの幅*/
	font-size: 100%;
	margin-right: auto;
	margin-left: auto;
	border-bottom: 2px dotted #362E2B;	/*各テーブルの境界線となる点線。2pxの幅の点線(dotted)で色は#362E2Bという事*/
	margin-bottom: 10px;
}

.box td, .box th{
	padding-bottom: 10px;
	vertical-align: top;
}

/*ボックス内にある画像の設定*/
.box img {
	padding: 4px;				/*写真とフチ線の間にある白い余白*/
	border: 1px solid #362E2B;	/*ボックスのグレー色のフチ設定。solidは直線という意味。dottedとかにすると可愛くなります。*/
	margin: 2px;
}

/*「おすすめ」マーク用の設定*/
.box .osusume {
	background: url(images/osusume.gif) no-repeat right bottom;	/*imagesフォルダに入っている「osusume.gif」を読み込んで、リピートなし(no-repeat)で右下(right bottom)に配置している*/
}



/*トップページ「おしらせ」欄
---------------------------------------------------------------------------------------------------------*/
ul.new {
	margin-bottom: 1.5em;
	width: 535px;		/*おしらせボックスの幅*/
	height: 65px;		/*おしらせボックスの高さ*/
	overflow: auto;		/*この設定でiframe風に見える*/
	margin-right: auto;
	margin-left: auto;
	padding: 10px;
}
ul.new li {
	border-bottom: 1px dotted #333333;	/*「おしらせ」１行分の設定。1pxの点線(dotted)をグレー(#333333)で設定*/
}




/*メインコンテンツ（左側のブロック）
---------------------------------------------------------------------------------------------------------*/
#main {
	float: left;
	display: inline;
	margin-top: 20px;
	margin-left: 20px;
	width: 555px;
	border: 5px solid #362e2b;	/*メインコンテンツ全体を囲んでいる枠線。5pxの幅でsolid(直線)で色は#362e2bという事*/
	background: #000000;	/*ボックス内の色。黒になっているがここで変更もできます*/
	padding: 5px;			/*ボックス内側の余白*/
}

/*メインコンテンツの段落<p>タグの余白設定
---------------------------------------------------------------------------------------------------------*/
#main p {
	padding: 0.5em 10px 1em;
}




/*サイドコンテンツ（右側のブロック）
---------------------------------------------------------------------------------------------------------*/
#side {
	float: right;
	display: inline;
	margin-top: 20px;
	margin-right: 20px;
	width: 240px;
	border: 5px solid #362e2b;	/*サイドコンテンツ全体を囲んでいる枠線。5pxの幅でsolid(直線)で色は#362e2bという事*/
	background: #000000;		/*ボックス内の色。黒になっているがここで変更もできます*/
	padding: 5px;				/*ボックス内側の余白*/
}

/*サイドコンテンツの段落<p>タグの余白設定
---------------------------------------------------------------------------------------------------------*/
#side p {
	padding-top: 0.5em;
	padding-bottom: 1em;
}

/*サイドコンテンツ内のメニュー
---------------------------------------------------------------------------------------------------------*/
ul.sidemenu {
	margin-top: 5px;
	margin-bottom: 2em;
}
ul.sidemenu li {
	margin-bottom: 5px;
}
ul.sidemenu li a {
	text-decoration: none;	/*下線をなしに設定。ありにしたいならこの１行を削除する。*/
	display: block;			/*文字上でなくてもブロック内であればカーソルオーバーに反応する設定*/
	padding-left: 10px;		/*メニューの文字の左側に余白を10px*/
	border-bottom: 2px dotted #362E2B;	/*各メニュー下の点線。2pxの幅の点線(dotted)で色は#362E2Bという事*/
	border-left: 4px solid #800000;		/*各メニュー左側の赤い線。4pxの直線(solid)で色は#800000という事*/
	width: 226px;
}
ul.sidemenu li a:hover {
	border-left: 4px solid #ff0000;	/*メニューのカーソルオーバー字に左側の赤い線の色を少し明るくする設定*/
}



/*フッター設定
---------------------------------------------------------------------------------------------------------*/
#footer {
	clear: both;
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
}