/*
==contents==
==========last update 06/05/13========== 
1:universal reset
2:html &body
3:main-parts
  :h1($B>&IJL>8+=P$7(J)
  :h2($B%;%s%F%s%98+=P$7(J)
  :h3($B99?7>pJs$J$I(J)
4:layout
  :container 
  :header
  :header-inner
  :logo
  :nav
  :content
  :main
  :main-inner
  :sub
  :sub-inner
  :nav(prodact_nav)
  :footer
  :footer-inner
5:img-hacker
  :l
  :r
  :itembox
  
6:span
  :prodact_tit
  :news_tit
  :campany_tit
  :fun_tit
  :pd_color_tit
  :pd_cook_tit
  :more
  :formail
  



*/


/* ==========1:universal reset========== */

*{
/* set the fonts to a uniform size, including form fields as well as all headings etc. */
	font-size:100%;
	margin:0;
	padding:0;
}



/* ==========2:html &body ==========*/
html{
    height:100%;
}

body {
	text-align:center;
	font-size: small;
	color:#333333;
	margin:0;
	padding:0;
	height:100%;
	background-color:#FFFFFF;
	background:url(img/bg.gif) repeat-y center center;
}

p{
	color:#333333;
	letter-spacing:1pt;
	font-size: small;
}

.strong{
	color:#000000;
	font-size: small;
	font-weight:bold;
}


/* ==========3:main-parts========== */

/*$B%j%s%/!!(J*/
a:link {
	color: #FF9900;
	}

/*$BK,Ld:Q$_%j%s%/!!(J*/
a:visited {
	color: #CC9933;
	}

/*$B%"%/%F%#%V%j%s%/!!(J*/
a:active {
	color: #FF9900
	}

/*$B%*%s%^%&%9%j%s%/!!(J*/
a:hover {
	color: #FFCC33;
	}

/* ==========4:layout========== */

/*$BA4BN$N%i%C%Q!<!!(J*/
#container {
	position: relative;
	line-height: 140%;
	margin-top:0px;
	margin-left: auto; 
	margin-right: auto;
	padding-left:70px;
	padding-right:70px;
	width: 920px;
	min-height: 100%;
	voice-family: "\"}\"";
	voice-family:inherit;
	width :780px;
	}
	}





/*$B%X%C%@!<!!(J*/
#header {
	float:right;
	margin:0px;
	padding:0px ;
	width: 780px;
	height:148px;
	}

#header h3 a{
	margin:0px 0px 5px 0px;
	float:right;
	display:block;
	text-decoration:none;
	background:url(img/formail.gif) no-repeat left top;
	width: 125px;
	height: 20px;
	text-indent:-5000em;
}
	
/* $B%a%K%e!<!!(J*/
#mainnavbox {
	top:0px;
	left:0px
	margin: 0px;
        padding : 0;
	position: relative;
}


/* UL for main navigation */
#mainnav {
	margin: 0;
	padding: 0;
	background: url(img/nav.gif) no-repeat;
	width: 780px;
	height: 130px;
	position: relative;
	}

/* LI for main navigation */
#mainnav li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	}
	
#mainnav li, #mainnav a {
	height: 120px;
	display: block;
	border-bottom : none;
	}

/* $BJ8;z$rHt$P$9(J*/
#mainnav a {
	text-indent: -5000px;
	text-decoration: none;
	}

/* $BHO0O$r;XDj$9$k(J */
#home {left: 20px; width: 160px;}
#news {left: 330px; width: 70px;}
#prodact {left: 400px; width: 90px;}
#campany {left: 510px; width:70px;}
#fun {left:610px; width: 150px;}

#home a:hover, #home a:visited:hover { background: transparent url(img/nav.gif) -20px -130px no-repeat;}
#news a:hover, #news a:visited:hover { background: transparent url(img/nav.gif) -330px -130px no-repeat;}
#prodact a:hover, #prodact a:visited:hover { background: transparent url(img/nav.gif) -400px -130px no-repeat;}
#campany a:hover, #campany a:visited:hover { background: transparent url(img/nav.gif) -510px -130px no-repeat;}
#fun a:hover, #fun a:visited:hover { background: transparent url(img/nav.gif) -610px -130px no-repeat;}

#home a.selected:link, #home a.selected:visited { background: transparent url(img/nav.gif) -20px -130px no-repeat;}
#news a.selected:link, #news a.selected:visited { background: transparent url(img/nav.gif) -330px -130px no-repeat;}
#prodact a.selected:link, #prodact a.selected:visited { background: transparent url(img/nav.gif) -400px -130px no-repeat;}
#campany a.selected:link, #campany a.selected:visited { background: transparent url(img/nav.gif) -510px -130px no-repeat;}
#fun a.selected:link, #fun a.selected:visited { background: transparent url(img/nav.gif) -610px -130px no-repeat;}

/*$B%3%s%F%s%D30OH!!(J*/
#content {
	margin:0px;
	padding-bottom:30px;
	width:780px;
	}

/*$B%3%s%F%s%D%a%$%s30OH!!(J*/
#main {
	float: right;
	text-align:left;
	padding: 0px;
	margin:0px ;
	width: 600px;
	height:100%;
	overflow: hidden;
	}

/*$B%3%s%F%s%D%a%$%sFbOH!!(J*/
.main-inner {
	margin: 0;
	padding:20px 10px 0px 90px;
	font-family: Verdana, Arial, sans-serif;
	width:600px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width :500px;
	height:100%;
	}

/*$B%3%s%F%s%DK\J8!!(J*/
.main-inner h1{
	line-height : 140%;
	color : #000000;
	font-size : 16px;
	text-align : left;
	font-family:"$B~>(I-$B~>(I3(J $B~>(I0$Beb(I4$Beb(I7$Bec&e$1(J", Osaka, "$BecDe&+eb(I.$Bec<j(I'$BDe$6(J Pro W3";
	font-weight: bold;
}
	
.main-inner h2{
	line-height : 140%;
	color : #663300;
	font-size : 18px;
	text-align : left;
	border-left: 10px solid #663300;
	padding : 0px 0px 2px 10px;
	margin : 0px 0px 20px 0px;
	font-family:"$B~>(I-$B~>(I3(J $B~>(I0$Beb(I4$Beb(I7$Bec&e$1(J", Osaka, "$BecDe&+eb(I.$Bec<j(I'$BDe$6(J Pro W3";
	font-weight: bold;
}

.main-inner h3{
	text-align:left;
	line-height :120%;
	color : #666666;
	font-size : 12px;
	margin : 0 0 20px 0;
	font-family:"$B~>(I-$B~>(I3(J $B~>(I0$Beb(I4$Beb(I7$Bec&e$1(J", Osaka, "$BecDe&+eb(I.$Bec<j(I'$BDe$6(J Pro W3";
	font-weight:normal;
}

.main-inner h4{
	font-size: 14px;
	text-align:left;
	line-height :100%;
	font-color : #000000;
	font-family:sans-serif;
	font-weight:normal;
	letter-spacing: 0.1em;
	margin:0px 0px 6px 0px;
}

.main-inner h5{
	text-align:right;
	float:none;
	line-height : normal;
	font-color : #666666;
	font-size : small;
	margin : 0px;
	font-family:"$B~>(I-$B~>(I3(J $B~>(I0$Beb(I4$Beb(I7$Bec&e$1(J", Osaka, "$BecDe&+eb(I.$Bec<j(I'$BDe$6(J Pro W3";
	font-weight:bold;
}

.main-inner h6{
	float:right;
	line-height : 140%;
	color : #666666;
	font-size : 12px;
	text-align : left;
	margin : 0px;
	font-family:"$B~>(I-$B~>(I3(J $B~>(I0$Beb(I4$Beb(I7$Bec&e$1(J", Osaka, "$BecDe&+eb(I.$Bec<j(I'$BDe$6(J Pro W3";
	font-weight:normal;
}
/*$B%3%s%F%s%DK\J8!!(J*/
.main-inner p {
	font-family: Verdana, Arial, sans-serif;
	font-size: small;
	font-weight: normal;
	line-height: 150%;
	text-align: left;
	margin-bottom: 15px;
	}

.main-inner p.small {
	font-family: Verdana, Arial, sans-serif;
	font-size: x-small;
	font-weight: normal;
	line-height: 150%;
	text-align: left;
	margin-bottom: 15px;
	}

.main-inner p.r {
	font-family: Verdana, Arial, sans-serif;
	font-size: small;
	font-weight: normal;
	line-height: 150%;
	text-align: left;
	margin-bottom: 10px;
	}


.main-inner p.strong{
	color:#000000;
	font-size: small;
	font-weight:bold;
}


/*$B%3%s%F%s%DK\J80zMQJ8!!(J*/
.main-inner blockquote {
	line-height: 150%;
	}

/* $B2hA|$N2s$j9~$_%P%02sHr(J*/
.main-inner p:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.main-inner p {display: inline-table;}

/* Hides from IE-mac \*/
* html .content p {height: 1%;}
.main-inner p {display: block;}
/* End hide from IE-mac */


/*$B%3%s%F%s%D%5%V(J */
#sub {
	float:left;
	padding:0px;
	width: 180px;
	overflow: hidden;
	height:100%;

	}
	
/*$B%3%s%F%s%D%5%VFbOH!!(J*/
.sub-inner {
	margin: 45px 0px 0px 0px;
	padding:0px;
	text-align:left;
	float: left;
	font-family: Verdana, Arial, sans-serif;
	width:180px;
	height:100%;
	voice-family: "\"}\"";
	voice-family:inherit;
	width :180px;
	}

/*$B>&IJ%a%K%e!<(J*/
#nav ul{
	margin:0 0 12px 0 ;
	padding:0 0 12px 0 ;
	list-style:none;
	border-bottom: dashed 1px #000000;
	}

#nav li, #nav a{
	display:block;
	width:180px;
	height:25px;
	}

/*$B%F%-%9%HItJ,$rHt$P$9!!(J*/
#nav li{
	text-indent:-5000px;
	}
	

#nav a{
	text-decoration:none;
	color:#0066cc;
	background:url(img/prodact_nav.gif) no-repeat;
	}

#sauce a {background-position: 0 0; height:30px;}
#usts a {background-position: 0 -30px;}
#tonks a {background-position: 0 -55px;}
#staks a {background-position: 0 -80px;}
#hambs a {background-position: 0 -105px;}
#demis a {background-position: 0 -130px;}
#dressing a {background-position: 0 -180px; height:30px;}
#frend a {background-position: 0 -210px;}
#kaord a {background-position: 0 -235px;}
#barud a {background-position: 0 -260px;}
#yuzud a {background-position: 0 -285px;}
#gomad a {background-position: 0 -310px;}
#ponzd a {background-position: 0 -335px;}
#inst a {background-position: 0 -385px; height:30px;}
#usti a {background-position: 0 -415px;}
#tonki a {background-position: 0 -440px;}
#okoni a {background-position: 0 -465px;}
#yakii a {background-position: 0 -490px;}


#sauce a:hover {background-position: -180px 0px; height:30px;}
#usts a:hover {background-position: -180px -30px;}
#tonks a:hover {background-position: -180px -55px;}
#staks a:hover {background-position: -180px -80px;}
#hambs a:hover {background-position: -180px -105px;}
#demis a:hover {background-position: -180px -130px;}
#dressing a:hover {background-position: -180px -180px; height:30px;}
#frend a:hover {background-position: -180px -210px;}
#kaord a:hover {background-position: -180px -235px;}
#barud a:hover {background-position: -180px -260px;}
#yuzud a:hover {background-position: -180px -285px;}
#gomad a:hover {background-position: -180px -310px;}
#ponzd a:hover {background-position: -180px -335px;}
#inst a:hover {background-position: -180px -385px; height:30px;}
#usti a:hover {background-position: -180px -415px;}
#tonki a:hover {background-position: -180px -440px;}
#okoni a:hover {background-position: -180px -465px;}
#yakii a:hover {background-position: -180px -490px;}


#sauce a.selected:link,#sauce a.selected:visited {background-position: -180px 0px; height:30px;}
#usts a.selected:link,#usts a.selected:visited  {background-position: -180px -30px;}
#tonks a.selected:link,#tonks a.selected:visited {background-position: -180px -55px;}
#staks a.selected:link,#staks a.selected:visited {background-position: -180px -80px;}
#hambs a.selected:link,#hambs a.selected:visited {background-position: -180px -105px;}
#demis a.selected:link,#demis a.selected:visited {background-position: -180px -130px;}
#dressing a.selected:link,#dressing a.selected:visited {background-position: -180px -180px; height:30px;}
#frend a.selected:link,#frend a.selected:visited {background-position: -180px -210px;}
#kaord a.selected:link,#kaord a.selected:visited {background-position: -180px -235px;}
#barud a.selected:link,#barud a.selected:visited {background-position: -180px -260px;}
#yuzud a.selected:link,#yuzud a.selected:visited {background-position: -180px -285px;}
#gomad a.selected:link,#gomad a.selected:visited {background-position: -180px -310px;}
#ponzd a.selected:link,#ponzd a.selected:visited {background-position: -180px -335px;}
#inst a.selected:link,#inst a.selected:visited {background-position: -180px -385px; height:30px;}
#usti a.selected:link,#usti a.selected:visited {background-position: -180px -415px;}
#tonki a.selected:link,#tonki a.selected:visited {background-position: -180px -440px;}
#okoni a.selected:link,#okoni a.selected:visited {background-position: -180px -465px;}
#yakii a.selected:link,#yakii a.selected:visited {background-position: -180px -490px;}

/*$B%3%s%F%s%D%5%V$N%a%K%e!<!!(J*/

}

/*$B%5%$%I%P!<$N2hA|!!(J*/
.sub-inner img {
	border: 0px;
	text-align:center;
	}
	

/*$B%3%s%F%s%D%a%$%s(J1$B%+%i%`!!(J*/
#onecolum {

	padding: 0px;
	margin:0px ;
	width: 780px;
	height:100%;
	overflow: hidden;
	}

/*$B%3%s%F%s%D%a%$%sFbOH!!(J*/
.onecolum-inner {
	text-align:left;
	margin: 0;
	padding:20px 10px 0px 180px;
	font-family: Verdana, Arial, sans-serif;
	width:780px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width :590px;
	height:100%;
	}
.onecolum-inner h1{
	line-height : 140%;
	color : #000000;
	font-size : 16px;
	text-align : left;
	font-family:"$B~>(I-$B~>(I3(J $B~>(I0$Beb(I4$Beb(I7$Bec&e$1(J", Osaka, "$BecDe&+eb(I.$Bec<j(I'$BDe$6(J Pro W3";
	font-weight: bold;
}
	
.onecolum-inner h2{
	line-height : 160%;
	color : #663300;
	font-size : 18px;
	text-align : left;
	padding : 15px 0px 2px 60px;
	margin : 0px;
	font-family:"$B~>(I-$B~>(I3(J $B~>(I0$Beb(I4$Beb(I7$Bec&e$1(J", Osaka, "$BecDe&+eb(I.$Bec<j(I'$BDe$6(J Pro W3";
	background:url(img/h2_back.gif) no-repeat;
	font-weight: bold;
        width :500px;
	height:57px;
}
/*$B%U%C%?!<BgOH!!(J*/
#footer {
        clear: both;
	font-family: Verdana, Arial, sans-serif;
	width: 780px;
	height:110px;
	bottom:0px;
	padding:0px 0px 30px 0px;
	background:url(img/footer_bg.gif) no-repeat;
		}


/* ==========5:img-hacker========== */

/*$B2hA|1&2s$j9~$_!!(J*/
img.r { 
	float: right; 
	border: none; 
	margin-right:0px; 
	margin-left:20px; 
	margin-bottom:10px; 
	vertical-align:top; 
} 

/*$B2hA|:82s$j$3$_!!(J*/
img.l { 
	float: left; 
	border: none; 
	margin-right:20px; 
	margin-left:0px;  
	margin-bottom:10px;
	vertical-align:top; 
}

/*$B2hA|1&2s$j9~$_(J($BOH(J)$B!!(J*/
img.rw { 
	float: right; 
	border: 1px solid #666666;
	margin-right:0px; 
	margin-left:10px; 
	margin-bottom:5px; 
	vertical-align:top; 
} 

/*$B2hA|:82s$j$3$_(J($BOH(J)$B!!(J*/
img.lw { 
	float: left; 
	border: 1px solid #666666;
	margin-right:10px; 
	margin-left:0px;  
	margin-bottom:5px;
	vertical-align:top; 
}

/* $B%Z!<%88+=P$7!!(J*/
.prodact_tit{
	margin:0px 0px 30px -60px;
	text-align:left;
	color:#000000;
	font-size:18px;
	display:block;
	text-decoration:none;
	background:url(img/prodact_tit.gif) no-repeat left top;
	width: 244px;
	height: 76px;
	text-indent:-5000em;
}

.campany_tit{
	margin:0px 0px 30px 0px;
	text-align:left;
	color:#000000;
	font-size:18px;
	display:block;
	text-decoration:none;
	background:url(img/campany_tit.gif) no-repeat left top;
	width: 262px;
	height: 93px;
	text-indent:-5000em;
}

.fun_tit{
	margin:0px 0px 30px 0px;
	text-align:left;
	color:#000000;
	font-size:18px;
	display:block;
	text-decoration:none;
	background:url(img/fun_tit.gif) no-repeat left top;
	width:400px;
	height:101px;
	text-indent:-5000em;
}

/* $B>&IJFsBr!!(J*/
#prodactselectbox {
	top:0px;
	left:0px
	margin: 0px;
        padding : 0;
	position: relative;
}

/* UL for main navigation */
#prodactselect {
	margin: 0;
	padding: 0;
	background: url(img/prodactselect.gif) no-repeat;
	width: 780px;
	height: 500px;
	position: relative;
	}

/* LI for main navigation */
#prodactselect li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	}
	
#prodactselect li, #prodactselect a {
	height: 500px;
	display: block;
	border-bottom : none;
	}

/* $BJ8;z$rHt$P$9(J*/
#prodactselect a {
	text-indent: -5000px;
	text-decoration: none;
	}

/* $BHO0O$r;XDj$9$k(J */
#selectsauce {left: 0px; width: 390px;}
#selectdressing {left: 390px; width: 390px;}


#selectsauce a:hover, #selectsauce a:visited:hover { background: transparent url(img/prodactselect.gif) -0px -500px no-repeat;}
#selectdressing a:hover, #selectdressing a:visited:hover { background: transparent url(img/prodactselect.gif) -390px -500px no-repeat;}


#selectsauce a.selected:link, #selectsauce a.selected:visited { background: transparent url(img/prodactselect.gif) 0px -500px no-repeat;}
#selectdressing a.selected:link, #selectdressing a.selected:visited { background: transparent url(img/prodactselect.gif) -390px -500px no-repeat;}


.clearboth {
	 clear: both;
 }

/*---clearfix---*/

.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix{
display: inline-table;
}
/* Hides from IE-mac \*/
* html .clearFix{height: 1%;}
.clearFix{display: block;}
/* End hide from IE-mac */
 #shopping {
	float: left;
	height: 24px;
	margin-left: 480px;
	width: 160px;
	display: inline;
}
#shopping h2 a {
	text-indent: -10000px;
	display: block;
	height: 24px;
	width: 160px;
	background-image: url(img/shopping_1.gif);
	background-repeat: no-repeat;
	background-position: left top;
}