@charset "UTF-8";

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

.content p {
	font-size:12px;
	line-height:1.5em;
}

.content ul li {
	line-height:1.5em;
}


#wrapper {
	background:url(../images/header-line.jpg) repeat-x #FFF;
	width:100%;
}

br {
	letter-spacing:normal;/* IE改行用。 */
}

.content .hoge {
	margin-top:1em;/* 一行開ける */
}


/* base
---------------------------------------------------- */
#header {
	width:100%;
	height:200px;
}

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

.bread p{
	height:12px;
	margin:10px 0;
	font-size:10px;
}

.content {
	margin: 8px 0 0 20px;
	width: 728px;
	float: left;
	border: 1px solid #ccc;
}

#footer_wrap {
	background:#ededed;
	width:100%;
	border-top:#0CF 1px solid;
}

.footer {
	width:940px;
	height:210px;
	margin:0 auto;
	position: relative;/* IE6 に、適切にクリアするための hasLayout を指定します。 */
	clear: both; /* この clear プロパティにより .container は、カラムの範囲がどこまでかを認識してその範囲を含めるようになります。 */
}

.bread{
	margin-left:20px;
}

/* header_nav footer_nav 共通*/
div#footer_nav p,
dix#header_nav p {
	margin:0!important;
	padding:0;
}


div#footer_nav ul,
div#header_nav ul {
	list-style: none;
	margin: 0;
}

div#footer_nav ul li,
div#header_nav ul li  {
	float:left;
	margin:0;
	background:url(../images/point.gif) left center no-repeat;
	padding: 4px 15px 4px 10px;
}

/* header
---------------------------------------------------- */
div#logo {
	float: left;
	width: 200px;
	margin: 40px 0 10px 10px;
	text-align: left;
	height: 25px;
}

.header-col{
	width:940px;
	height:100px;
}

/* header_nav*/
#header_nav{
	float: right;
	width: 350px;
	margin: 45px 0 10px 0;
}

/* header-p*/
#header-p{
	width:938px;
	height: 71px;
	margin: 17px auto 10px auto;
	padding: 0;
	text-align: left;
}

div#header-p ul {
	list-style: none;
	margin: 0;
}

div#header-p ul li {
	float: left;
	margin: 0;
	list-style: none;
	overflow:hidden; /*クリッカブル領域以外にはみ出してしまうアウトライン点線を隠す*/
}

/*半透明設定*/
div#header-p ul li a:hover {
	opacity:0.7;
}
/*半透明設定 IE用*/
div#header-p ul li a:hover {
	filter:alpha(opacity=70);
	zoom:1;
}

#hp01,
#hp02,
#hp03,
#hp04
 {
	display: block;
	height: 69px;
	width: 198px;
	text-indent: -9999px;
	background-image:url(../img/subnav.gif);
	border:solid 1px #999;

}


#hp02,
#hp03,
#hp04
 {
	margin-left:46px;
}

#hp01 {
	background-position: 0 -69px;
}
#hp02 {
	background-position: 0 -138px;
}
#hp03 {
	background-position: 0 -414px;
}

#hp04 {
	background-position: 0 -345px;
}



/* navi
---------------------------------------------------- */

#navi {
	margin-left:20px;
	float: left;
	width: 150px;
}

.container #navi ul {
list-style: none;
margin: 0;
padding: 0;
}

.container #navi li {
margin: 0;
padding: 0;
background: #ededed url(../images/point-blue.gif) left center no-repeat;
background-position:10px;
}

.container #navi a {
background: #FFFFFF url(../images/point.gif) left center no-repeat;
background-position:10px;
padding: 4px 0 4px 20px;
display: block;
width: 130px !important; /*Windows IE対策のため、ボックス幅を指定 */
color: #333;
text-decoration:none;
}

.container #navi a:hover {
color: #000;
background-image: none;
background-color: transparent;/*オンマウス時に背景色を透過する指定*/
}

.category01,
.category02,
.category03,
.category04,
.category05,
.category06,
.category07,
.category08,
.category09
 {
	width:148px;
	height: 40px;
	border: 1px solid #ccc;
	margin-top:8px;
}

.banner
 {
	width:148px;
	height: 70px;
	border: 1px solid #ccc;
	margin-top:8px;
	background:#FFF;
}

.category01 {background:url("../images/nave/cobot.gif");}
.category02 {background:url("../images/nave/dbolt.gif");}
.category03 {background:url("../images/nave/dai.gif");}
.category04 {background:url("../images/nave/sten.gif");}
.category05 {background:url("../images/nave/wool.gif");}
.category06 {background:url("../images/nave/color.gif");}
.category07 {background:url("../images/nave/karubo.gif");}
.category08 {background:url("../images/nave/okayama.gif");}
.category09 {background:url("../images/nave/price.gif");}




.container #navi ul li .banner a {
	display: block;
	background-image: none;
	padding: 0;
	width: 148px !important; /*Windows IE対策のため、ボックス幅を指定 */
}


.gototop {
	float:right;
	height:30px;
	width:200px;
}
/* gotoform
---------------------------------------------------- */
#gotoform{
	margin:20px 0 20px 0;
	width:728px;
	height:130px;
}



/* footer
---------------------------------------------------- */
.footer .footer-p {
	float:left;
	width:155px;
	height:180px;
	margin:10px auto;
	border-left:1px solid;
}

#footer_wrap .footer .footer-p ul p {
	font-size:14px;
	margin-bottom:3px;
}

#footer_wrap .footer .footer-p ul {
margin: 5px;
padding: 5px;
}

#footer_wrap .footer .footer-p li {
	list-style-position:inside;
list-style-type: disc;
}

/* footer_nav*/
#footer_nav {
	width:940px;
	height:50px;
	margin:0 auto;
	position: relative;/* IE6 に、適切にクリアするための hasLayout を指定します。 */
	clear: both; /* この clear プロパティにより .container は、カラムの範囲がどこまでかを認識してその範囲を含めるようになります。 */
}


/* copyright */

div#copyright {
	font-size:9px;
	float: right;
	margin-top:10px;
}

div#copyright p {
	display: none;
}

/* content
---------------------------------------------------- */
#pagetitle {
	margin-bottom:50px;
	border-bottom:1px solid #ccc;
}

#pagetitle_s {
	margin-bottom:20px;
	border-bottom:1px solid #ccc;
}

#cts {
	margin:0 50px;
	width:628px;
}