@charset "utf-8";
body {
	font: 75%/1.4 "Meiryo","MS PGothic","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	margin: 0;
	padding: 0;
	color: #000;
	min-width: 960px;
	background: url(../img/body/bg_body.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: auto auto;
}
/* ~~ エレメント / タグセレクター ~~ */
ul, ol, dl { /* ブラウザー間の相違により、リストの余白とマージンをゼロにすることをお勧めします。一貫性を保つために、量をここで指定するか、リストに含まれるリスト項目 (LI、DT、DD) で指定できます。より詳細なセレクターを記述しない限り、ここで指定する内容が .nav リストにも適用されることに注意してください。 */
	padding: 0;
	margin: 0;
	list-style: none;
}
h1, h2, h3, h4, h5, h6, p, address, table, tr, th, tr, tbody, thead, tfoot, dl, dt, dd, img {
	padding: 0;
	margin: 0;
	font-weight: normal;
	font-style: normal;
	line-height: 0;
	border: none;
}
a img, img { /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
	padding: 0;
	margin: 0;
	border: none;
}
a, a:hover, a:active, a:focus { /* このセレクターグループは、キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を提供します。 */
	text-decoration: none;
}

.fc_red {color: #C00;}


/* ~~ この固定幅コンテナが他のすべての block を囲みます。~~ */
.container {
	width: 960px; /* 幅に加え、両側を自動値とすることで、レイアウトが中央に揃います。 */
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-bottom: 50px;
}

/* ヘッダー */
header {
	width: 100%;
	height: 160px;
}
header h1 {
	width: 960px;
	height: 35px;
	font-size: 100%;	/*font:12px*/
	line-height: 35px;
}
header p.logo {
	float: left;
	width: 315px;
}
header .order {
	float: right;
	width: 402px;
}
header .order .delivery {
	float: left;
	width: 154px;
}
header .order .telnumber {
	float: right;
	width: 248px;
}
header nav {
	width: 960px;
	display: table;
}
header nav ul li {
	float: left;
}
header nav ul li img {
	filter: alpha(opacity=70);  /* IE7以下用 */
	-ms-filter: "alpha(opacity=70)"; /* IE8用 */
	-khtml-opacity: 0.7;  /* Safari , 他ブラウザ用  */
	-moz-opacity: 0.7; /* Firefox , Netscape用 */
	opacity: 0.7; /* CSS3 */
}
header nav ul li a:hover img {
	position: relative;
	top: 1px;
	left: 0px;
	filter: alpha(opacity=100);  /* IE7以下用 */
	-ms-filter: "alpha(opacity=100)"; /* IE8用 */
	-khtml-opacity: 1.0;  /* Safari , 他ブラウザ用  */
	-moz-opacity: 1.0; /* Firefox , Netscape用 */
	opacity: 1.0; /* CSS3 */
}

/* 右サイドナビゲーション */
.fixnav {
	position: fixed !important;
	position: absolute;
	top: 30px;
	right: 0;
	z-index: 100;
}
.fixnav ul li img {
	box-shadow: 3px -3px 3px #777777;
	-moz-box-shadow: 3px -3px 3px #777777;
	-khtml-box-shadow: 3px -3px 3px #777777;
	-ms-box-shadow: 3px -3px 3px #777777;
	margin: 0 0 15px 0;
	filter: alpha(opacity=70);  /* IE7以下用 */
	-ms-filter: "alpha(opacity=70)"; /* IE8用 */
	-khtml-opacity: 0.7;  /* Safari , 他ブラウザ用  */
	-moz-opacity: 0.7; /* Firefox , Netscape用 */
	opacity: 0.7; /* CSS3 */
}
.fixnav ul li a:hover img {
	position: relative;
	top: -3px;
	left: 3px;
	box-shadow: none;
	-moz-box-shadow: none;
	-khtml-box-shadow: none;
	-ms-box-shadow: none;
	filter: alpha(opacity=100);  /* IE7以下用 */
	-ms-filter: "alpha(opacity=100)"; /* IE8用 */
	-khtml-opacity: 1.0;  /* Safari , 他ブラウザ用  */
	-moz-opacity: 1.0; /* Firefox , Netscape用 */
	opacity: 1.0; /* CSS3 */
}

/* コンテント */
.content {
	width: 960px;
	height: auto;
	font-size: 109%;	/*font:13px*/
	color: #300;
	background-color: #FFF;
	display: table;
	padding: 0 0 10px 0;
	filter: alpha(opacity=90);  /* IE7以下用 */
	-ms-filter: "alpha(opacity=90)"; /* IE8用 */
	-khtml-opacity: 0.9;  /* Safari , 他ブラウザ用  */
	-moz-opacity: 0.9; /* Firefox , Netscape用 */
	opacity: 0.9; /* CSS3 */
}
.content a {
	font-weight: bold;
	color: #300;
	text-decoration: underline;
}
.content a:hover {
	position: relative;
	top: 1px;
	left: 1px;
}

/* ページTOP */
.pagetop {
	width: 960px;
	height: 160px;
}
.pagetop img {
	margin: 20px 435px 50px;
}
.pagetop a:hover img {
	position: relative;
	top: 2px;
	filter: alpha(opacity=70);  /* IE7以下用 */
	-ms-filter: "alpha(opacity=70)"; /* IE8用 */
	-khtml-opacity: 0.7;  /* Safari , 他ブラウザ用  */
	-moz-opacity: 0.7; /* Firefox , Netscape用 */
	opacity: 0.7; /* CSS3 */
}

/* 下部こだわりナビゲーション */
.knav {
	display: table;
	width: 100%;
	height: 150px;	
	background-color: #EEDCDC;
}
.knav ul li {
	float: left;
	width: 290px;
	height: 90px;
	margin: 30px 15px;
}
.knav ul li img {
	filter: alpha(opacity=100);  /* IE7以下用 */
	-ms-filter: "alpha(opacity=100)"; /* IE8用 */
	-khtml-opacity: 1.0;  /* Safari , 他ブラウザ用  */
	-moz-opacity: 1.0; /* Firefox , Netscape用 */
	opacity: 1.0; /* CSS3 */
}
.knav ul li a:hover img {
	position: relative;
	top: 1px;
	left: 1px;
	filter: alpha(opacity=70);  /* IE7以下用 */
	-ms-filter: "alpha(opacity=70)"; /* IE8用 */
	-khtml-opacity: 0.7;  /* Safari , 他ブラウザ用  */
	-moz-opacity: 0.7; /* Firefox , Netscape用 */
	opacity: 0.7; /* CSS3 */
}

/* ご注文ナビゲーション */
.ordernav {
	width: 880px;
	height: auto;
	margin: 10px 40px 20px;
	display: table;
}
.ordernav li {
	float: left;
	margin: 0 10px 20px 0;
}
.ordernav li a:hover img {
	position: relative;
	top: 1px;
	left: 1px;
	filter: alpha(opacity=70);  /* IE7以下用 */
	-ms-filter: "alpha(opacity=70)"; /* IE8用 */
	-khtml-opacity: 0.7;  /* Safari , 他ブラウザ用  */
	-moz-opacity: 0.7; /* Firefox , Netscape用 */
	opacity: 0.7; /* CSS3 */
}

/* フッター */
footer {
	width: 100%;
	height: 240px;	
	background-color: #C99;
	color: #FFF;
	position: relative;/* IE6 に、適切にクリアするための hasLayout を指定します。 */
	clear: both; /* この clear プロパティにより .container は、カラムの範囲がどこまでかを認識してその範囲を含めるようになります。 */
}
footer nav {
	float: left;
	margin: 25px 0 20px 0;
	width: 560px;
}
footer nav ul li a {
	float: left;
	margin: 0 5px 0 0;
	padding: 0 5px 0 0;
	font-weight: bold;
	line-height: 150%;
	color: #FFF;
	border-right: solid #FFF 2px;
}
footer nav ul li a:hover {
	color: #666;
}
footer nav ul li:last-child a {
	border-right: none;
}
footer aside {
	float: right;
	width: 230px;
	height: 39px;
}
footer aside ul li img {
	float: left;
	padding: 0 0 0 5px;
}
footer aside ul li a:hover img {
	position: relative;
	top: 0px;
	left: -1px;
	filter: alpha(opacity=85);  /* IE7以下用 */
	-ms-filter: "alpha(opacity=85)"; /* IE8用 */
	-khtml-opacity: 0.85;  /* Safari , 他ブラウザ用  */
	-moz-opacity: 0.85; /* Firefox , Netscape用 */
	opacity: 0.85; /* CSS3 */
}
footer .corpolation {
	float: left;
	width: 960px;
	display: table;
}
footer .name {
	width: 960px;
	font-weight: bold;
	line-height: 175%;
}
footer address {
	width: 960px;
	line-height: 175%;
}
footer .copyright {
	width: 960px;
	line-height: 175%;
}

/* ~~ その他の float/clear クラス ~~ */
.fltrt {  /* このクラスを使用すると、ページ内でエレメントを右にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
	float: right;
	margin-left: 8px;
}
.fltlft { /* このクラスを使用すると、ページ内でエレメントを左にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* このクラスは、footer が .container から削除されているか取り出されている場合に、<br />または空の block エレメントで、フローティングさせる最後の block に続く最後のエレメントとして (.container 内に) 配置できます。 */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

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

.mgb20 {
    margin-bottom: 20px;
}