@charset "utf-8";

/* ----------------------------------------------------
　　■CONTENTS
---------------------------------------------------- */


/* BASE
---------------------------------------------------- */
html {
	background: #f6f6f6 url(../img/base/bg.gif) fixed;
}
body {
	background: url(../img/base/bg_02.gif) repeat-x fixed;
	padding: 15px 0px;
	text-align: center;
}
#wrapper {
	background: #FFFFFF;
	margin: 0px auto;
	width: 780px;
	border: 1px solid #dbdbdb;
	text-align: left;
}
#header {
	background: #FFFFFF;
	width: 720px;
	border-top: 2px solid #007bba;
	height: 83px;
	padding: 20px 30px 0px;
}
#content {
	width: 740px;
	padding: 0px 20px;
}
#sideArea {
	width: 155px;
	float: left;
}
#mainArea {
	width: 565px;
	float: right;
	padding: 0px 0px 30px;
}
#footer {
	border-bottom: 2px solid #007bba;
	font: normal 10px/20px "ヒラギノ角ゴ Pro W3", Verdana, "ＭＳ Ｐゴシック";
	padding: 0px 20px;
	width: 740px;
}


/* HEADER
---------------------------------------------------- */
h1 {
	width: 188px;
	height: 58px;
	text-indent: -9999px;
	float: left;
}
h1 a, h1 a:hover {
	width: 188px;
	height: 58px;
	background: url(../img/base/logo.gif) no-repeat 5px 10px;
	display: block;
}
p#telfax {
	background: url(../img/base/telfax.gif);
	width: 130px;
	height: 62px;
	text-indent: -9999px;
	float: right;
	margin: 5px 0px 0px;
}


/* ----------------------------------------------------
　■SIDE AREA
---------------------------------------------------- */
#sideArea .box {
	margin: 0px 0px 25px;
}


/* NAVI
---------------------------------------------------- */
ul#navi {
	width: 155px;
	border-bottom: 1px solid #eeeeee;
}
ul#navi a {
	width: 155px;
	display: block;
}
ul#navi a:hover {
	background-position: -155px top;
}
ul#navi li {
	width: 155px;
	border-top: 1px solid #eeeeee;
	font: normal 10px/10px "verdana";
	text-indent: -9999px;
	padding: 10px 0px;
}
ul#navi li a {
	height: 29px;
}
ul#navi ul.navi2 {
	padding: 0px 0px 5px;
}
ul#navi ul.navi2 li {
	height: 22px;
	width: 155px;
	border-top-style: none;
	padding: 0px;
}
ul#navi ul.navi2 li a {
	height: 22px;
}
	ul#navi li#prodBtn a {	background-image: url(../img/base/navi_product.gif);}
		ul#navi ul.navi2 li#osusBtn a {	background-image: url(../img/base/navi_prod_osusume.gif);}
		ul#navi ul.navi2 li#giftBtn a {	background-image: url(../img/base/navi_prod_gift.gif);}
		ul#navi ul.navi2 li#listBtn a {	background-image: url(../img/base/navi_prod_list.gif);}
	ul#navi li#compBtn a {	background-image: url(../img/base/navi_company.gif);}
		ul#navi ul.navi2 li#aisaBtn a {	background-image: url(../img/base/navi_comp_aisatsu.gif);}
		ul#navi ul.navi2 li#gaiyBtn a {	background-image: url(../img/base/navi_comp_gaiyou.gif);}
		ul#navi ul.navi2 li#uribBtn a {	background-image: url(../img/base/navi_comp_uriba.gif);}
		ul#navi ul.navi2 li#kyujBtn a {	background-image: url(../img/base/navi_comp_kyujin.gif);}
	ul#navi li#contBtn a {	background-image: url(../img/base/navi_contact.gif);}
	
		body.productTop ul#navi li#prodBtn a.topCat,
			body.recommend ul#navi ul.navi2 li#osusBtn a,
			body.gift ul#navi ul.navi2 li#giftBtn a,
			body.list ul#navi ul.navi2 li#listBtn a,
		body.companyTop ul#navi li#compBtn a.topCat,
			body.message ul#navi ul.navi2 li#aisaBtn a,
			body.outline ul#navi ul.navi2 li#gaiyBtn a,
			body.store ul#navi ul.navi2 li#uribBtn a,
			body.recruit ul#navi ul.navi2 li#kyujBtn a,
		body.contactTop ul#navi li#contBtn a.topCat {	background-position: right top;}


/* 髙平商店とは
---------------------------------------------------- */
#aboutBox h2 {
	height: 26px;
	width: 155px;
	background: url(../img/base/about_tit.gif) no-repeat;
	text-indent: -9999px;
}
#aboutBox p {
	line-height: 1.2;
}
#aboutBox #faxBtn {
	text-indent: -9999px;
	padding: 10px 0px 0px;
}
#aboutBox #faxBtn a {
	height: 35px;
	width: 155px;
	background: url(../img/base/btn_fax.gif);
	display: block;
}


/* ----------------------------------------------------
　■MAIN AREA
---------------------------------------------------- */
#mainArea .box {
	width: 565px;
	margin: 0px 0px 20px;
}

/* パンくずリスト
---------------------------------------------------- */
#pan {
	font-size: x-small;
	padding: 0px 0px 10px;
	color: #999999;
}
#pan a {
	padding: 1px;
	border-bottom: 1px solid #CCCCCC;
	color: #000000;
}
#pan span {
	line-height: 2;
	padding: 3px 10px;
	color: #FFFFFF;
	background: #000000;
}


/* カテゴリータイトル
---------------------------------------------------- */
h2#catTit{
	height: 70px;
	text-indent: -9999px;
}
	#product h2#catTit{	background: url(../img/product/cattit.gif) no-repeat;}
	#company h2#catTit{ background: url(../img/company/cattit.gif) no-repeat;}
	#contact h2#catTit{	background: url(../img/contact/cattit.gif) no-repeat;}

h3#catTitB{
	height: 50px;
	text-indent: -9999px;
}
	body.recommend h3#catTitB{ background: url(../img/product/recommend_tit.gif) no-repeat}
	body.gift h3#catTitB{ background: url(../img/product/gift_tit.gif) no-repeat}
	body.list h3#catTitB{ background: url(../img/product/list_tit.gif) no-repeat}
	body.message h3#catTitB{ background: url(../img/company/message_tit.gif) no-repeat}
	body.outline h3#catTitB{ background: url(../img/company/outline_tit.gif) no-repeat}
	body.store h3#catTitB{ background: url(../img/company/store_tit.gif) no-repeat}
	body.recruit h3#catTitB{ background: url(../img/company/recruit_tit.gif) no-repeat}



/* ----------------------------------------------------

　■商品案内

---------------------------------------------------- */
ul#prodNavi{
	width: 585px;
	margin: 0px -20px 0px 0px;
}
ul#prodNavi li{
	float: left;
	width: 192px;
}


/* ----------------------------------------------------

　□おすすめ商品

---------------------------------------------------- */
ul.prodList{
	width: 565px;
	background: url(../img/product/recommend_prodlist_tit.gif) no-repeat;
	padding: 20px 0px 0px;
}
ul.prodList li{
	background: url(../img/base/dotline.gif) repeat-x left bottom;
	padding: 15px 0px 16px;
}
	ul.prodList li:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	ul.prodList li { display: inline-table; }
	/* *Hides from IE-mac \*/
	*:first-child+html ul.prodList li {height: 1%;}
	* html ul.prodList li { height: 1%; }
	ul.prodList li { display: block; }
	/* *End hide from IE-mac */
	
ul.prodList li .pLPhoto{
	width: 220px;
	padding: 0px 0px 0px 10px;
	float: left;
}
ul.prodList li .pLPhoto img{
	width: 100px;
	margin: 0px 10px 0px 0px;
}
ul.prodList li .pLText{
	width: 325px;
	float: right;
}
ul.prodList li .pLText .pLTextB{
	_height: 67px;
	min-height: 67px;
	padding: 0px 0px 10px;
}
ul.prodList li .pLText p{
	line-height: 1.3;
}
ul.prodList li .pLText h4{
	font-weight: bold;
	margin: 0px 0px 3px;
}
ul.prodList li .pLText h4 a{
	border-bottom: 1px solid #FFCC66;
	padding: 0px 0px 1px;
}
ul.prodList li .pLMore{
	height: 22px;
	width: 110px;
	text-indent: -9999px;
	float: right;
	padding: 0px 0px 0px 215px;
}
ul.prodList li .pLMore a{
	background: url(../img/product/btn_moreinfo.gif) no-repeat;
	display: block;
	height: 22px;
	width: 110px;
}
ul.prodList li .pLMore a:hover{
	background: url(../img/product/btn_moreinfo.gif) no-repeat right;
}


/* ----------------------------------------------------

　□おすすめ商品 □詳細

---------------------------------------------------- */
#detailHeader {
	width: 565px;
	padding: 0px 0px 20px;
}
#detailHeader h4 {
	float: right;
	width: 230px;
}
#detailHeader p {
	float: left;
	width: 335px;
}

#detailMain {
	width: 550px;
	padding: 0px 15px 0px 0px;
	background: url(../img/product/recommend/detail_bg.gif) repeat-y right top;
}
#detailR {
	float: right;
	width: 155px;
	padding: 15px 0px 5px;
}
#detailR img {
	float: left;
	padding-bottom: 10px;
}
#detailL {
	float: left;
	width: 360px;
}
#detailL p {
	padding: 0px 0px 20px;
}

#detailL dl {
	margin: 0px 0px 20px;
	padding: 9px;
	width: 340px;
	border: 1px solid #E8E8E8;
	font-size: x-small;
}
#detailL dt {
	padding: 0.1em 0 0.1em 1em;
	width: 5em;
	float: left;
	color: #666666;
	text-align: right;
}
#detailL dd {
	margin: 0 0 0 6em;
	padding: 0.1em 1em 0.1em 1em;
}

#detailL #expTit {
	width: 360px;
	background: url(../img/product/recommend/exp_tit.gif) no-repeat;
	height: 30px;
	text-indent: -9999px;
}
#detailL #matTit {
	width: 360px;
	background: url(../img/product/recommend/mat_tit.gif) no-repeat;
	height: 30px;
	text-indent: -9999px;
}

table.tblB {
	background: url(../img/base/dotline.gif) repeat-x;
}
table.tblB th {
	padding: 0px 15px 0px 10px;
	width: 120px;
	font-size: x-small;
	text-align: center;
	color: #e82e27;
	border-right: 5px solid #FFFFFF;
}
table.tblB td {
	padding: 5px;
	background: url(../img/base/dotline.gif) repeat-x left bottom;
	text-align: center;
}


/* ----------------------------------------------------

　□ギフト一覧

---------------------------------------------------- */
ul.giftList{
	width: 565px;
	background: url(../img/product/recommend_prodlist_tit.gif) no-repeat;
	padding: 20px 0px;
}
ul.giftList li{
	background: url(../img/base/dotline.gif) repeat-x left bottom;
	padding: 15px 0px 16px;
}
	ul.giftList li:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	ul.giftList li { display: inline-table; }
	/* *Hides from IE-mac \*/
	*:first-child+html ul.giftList li {height: 1%;}
	* html ul.giftList li { height: 1%; }
	ul.giftList li { display: block; }
	/* *End hide from IE-mac */
	
ul.giftList li .pLPhoto{
	width: 220px;
	padding: 0px 0px 0px 10px;
	float: left;
}
ul.giftList li .pLPhoto img{
	float: left;
}
ul.giftList li .pLText{
	width: 325px;
	float: right;
}
ul.giftList li .pLText p{
	line-height: 1.3;
	margin: 0px 0px 6px;
}
ul.giftList li .pLText h4{
	font-weight: bold;
	margin: 0px 0px 3px;
}
ul.giftList li .pLText h4 a{
	border-bottom: 1px solid #FFCC66;
	padding: 0px 0px 1px;
}

ul.giftList li .pLText p.setEx{
	background: #F7F7F7;
	padding: 10px;
	margin: 0px;
}
ul.giftList li .pLText p.setEx span{
	color: #666666;
}

#memoBox{
	text-align: center;
}
#memoBox p{
	padding: 0px 0px 20px;
}




/* ----------------------------------------------------

　□商品一覧

---------------------------------------------------- */
#prodAllList{
	width: 565px;
}
#prodAllList ul{
	width: 176px;
	float: left;
	padding: 0px 5px 10px;
}
#prodAllList ul li{
	background: url(../img/base/dotline.gif) repeat-x left bottom;
	padding: 5px 2px;
	list-style: circle inside;
}
#prodAllList ul li a{
	border-bottom: 1px solid #FFCC66;
	padding: 0px 0px 1px;
}
#prodAllList ul li span{
	color: #999999;
	font-size: x-small;
}


/* ----------------------------------------------------

　■会社情報

---------------------------------------------------- */
ul#compNavi{
	width: 585px;
	margin: 0px -20px 0px 0px;
}
ul#compNavi li{
	float: left;
	width: 192px;
	height: 141px;
}
ul#compNavi li#outlBtn{
	padding-right: 192px;
}
ul#compNavi li#storBtn{
	padding-left: 192px;
}

/* ----------------------------------------------------

　□社長あいさつ

---------------------------------------------------- */
.msgBox p {
	line-height: 1.8;
}
.msgBox .photoBox{
	padding: 0px 0px 5px 10px;
	float: right;
	width: 140px;
}
.msgBox .photoBox img{
	padding: 0px 0px 6px;
}
.msgBox .photoBox p{
	line-height: 1.5;
	text-align: center;
}
.msgBox .photoBox p span{
	font-size: x-small;
}


/* ----------------------------------------------------

　□会社概要

---------------------------------------------------- */
table.tblA {
	background: #FFFFFF;
	border: 1px solid #E6E6E6;
}
table.tblA th {
	padding: 0px 15px 0px 10px;
	width: 7em;
	background: #ECE9D8 url(../img/base/tbla_th_bg.gif) no-repeat right center;
	font-size: x-small;
	font-weight: normal;
	text-align: center;
}
table.tblA td {
	padding: 10px;
	background: url(../img/base/dotline.gif) repeat-x left top;
	border-right: 5px solid #FFFFFF;
}
table.tblA tr.tblHeader td {
	background: url(none);
}


/* ----------------------------------------------------

　□売場案内

---------------------------------------------------- */
.staffBox{
	width: 565px;
	margin: 0px 0px 15px;
	background: url(../img/base/dotline.gif) repeat-x left bottom;
	padding: 0px 0px 15px;
}
.storePhoto{
	width: 580px;
	margin: 0px -15px 15px 0px;
}
.storePhoto img{
	margin: 0px 15px 0px 0px;
}
.staffPhoto{
	padding: 0px 0px 0px 10px;
	width: 80px;
	clear: both;
	float: left;
}
.staffBox h4{
	padding: 0px 0px 5px;
	width: 475px;
	margin: 0;
	font-weight: bold;
	float: right;
}
.staffBox p{
	padding: 0px 0px 5px;
	width: 475px;
	margin: 0px;
	float: right;
}



/* ----------------------------------------------------

　□求人案内

---------------------------------------------------- */
.recrMemo {
	position: relative;
}
.recrMemo ul {
	background: url(../img/base/dotline.gif) repeat-x left top;
	padding: 0px 0px 20px;
	width: 565px;
}
.recrMemo ul li {
	background: url(../img/base/dotline.gif) repeat-x left bottom;
	padding: 4px 240px 4px 5px;
}
.recrMemo ul li span {
	color: #99CC00;
	padding-right: 5px;
}
.recrMemo img#phtA {
	position: absolute;
	top: -12px;
	right: 10px;
	z-index: 3;
}
.recrMemo img#phtB {
	position: absolute;
	top: 40px;
	right: 100px;
	z-index: 1;
}
.recrMemo img#phtC {
	position: absolute;
	top: 100px;
	right: 40px;
	z-index: 2;
}
.recrTel {
	padding: 0px 0px 0px 10px;
	border-left: 10px solid #CCCCCC;
	font-weight: bold;
}


/* ----------------------------------------------------

　■お問い合わせ

---------------------------------------------------- */
#contactTxt{
	text-align: center;
}
#contactTxt p{
	padding: 0px 0px 20px;
}



/* FOOTER
---------------------------------------------------- */
#footer {
}
#gotop {
	padding: 0px 0px 10px 630px;
}
#gotop a {
	text-indent: -9999px;
	height: 21px;
	width: 110px;
	background: url(../img/base/gotop.gif) no-repeat;
	display: block;
}
address {
	text-align: center;
	border-top: 1px solid #eeeeee;
	padding: 10px 0px;
	font: normal 10px/20px "ヒラギノ角ゴ Pro W3", Verdana, "ＭＳ Ｐゴシック";
	display: block;
}
address a {
	border-bottom: 1px solid #FFCC66;
	padding: 0px 0px 1px;
}
address a:hover {
	border-bottom: 1px solid #007bba;
}