body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td{margin:0;padding:0;font-size:12px; text-align:left; font-family:'Helvetica','ヒラギノ角ゴPro W3','HiraKakuPro-W3','MS Pゴシック','MSゴシック',sans-serif;}


body{text-align:center;}
img{border:none;}
caption{text-indent:-9999px;}
a,a:visited{color:#FF9966;text-decoration:none;}
h3 a:link,h3 a:visited{color:#444444;text-decoration:none;}
a:hover,h3 a:hover{ color:#FF6600;text-decoration:none;}


/*-----------------------------------------
               共通パーツ
-----------------------------------------*/

/*-----*** layouts ***-----*/

.block{text-align:left; margin:0px 0px 20px;padding-top:20px;}
p{line-height:160%;margin:0px 0px 10px;}
.lead{text-align:left; margin:20px 0px 20px 40px;}

.breadcrumb{font-size:10px;color:#888; margin:0px 0px 20px;}
.breadcrumb span.on{color:#444; font-weight:bold;}
.backtotop{
	margin:20px 0px;
}
.backtotop a{
	display:block;
	clear:both;
	margin-left:400px;
	width:131px;
	height:18px;
	background:url(/skin/src/backtotop.gif) no-repeat right 0px;
	text-indent:-9999px;
	font-size:1px;padding:0px;
}
.backtotop a:hover{
	height:18px;
	background:url(/skin/src/backtotop.gif) no-repeat right -18px;
}

/*-----*** lines ***-----*/

.hidden hr{clear:both;visibility:hidden;height:10px;padding:0px;margin:0px;line-height:0px;border:0px;}
.dotline{
	width:850px;
	background:url(/skin/src/line-dot.gif) no-repeat left top;
	margin:0px auto;
}


/*-----*** logo ***-----*/

h1#logo a{
	background:url(/skin/src/logo.gif) no-repeat 5px top;
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	width:220px;
	height:50px;
	text-indent:-9999px;
	}
	
	
/*-----*** menu ***-----*/

ul#main-menu{
	position:absolute;
	top:10px;
	left:365px;
	display:block;
	height:40px;
}
ul#main-menu li{
	display:block;
	width:92px;
	list-style-type:none;
	margin:0px 3px 0px 0px;
	float:left;
}
ul#main-menu li a {
	display:block;
	width:92px;
	height:40px;
	background:url(/skin/src/top-menu.gif) no-repeat left top;
	text-indent:-9999px;
}

ul#main-menu li#mn-hiroba a{ background-position:0px 0px;}
ul#main-menu li#mn-hiroba a:hover{ background-position:0px -40px;}
body#hiroba ul#main-menu li#mn-hiroba a{background-position:0px -40px;}
ul#main-menu li#mn-items a{background-position:-95px 0px;}
ul#main-menu li#mn-items a:hover{background-position:-95px -40px;}
body#items ul#mn-main-menu li#items a{background-position:-95px -40px;}
ul#main-menu li#mn-company a{background-position:-190px 0px;}
ul#main-menu li#mn-company a:hover{background-position:-190px -40px;}
body#company ul#mn-main-menu li#company a{background-position:-190px -40px;}
ul#main-menu li#mn-recruit a{background-position:-285px 0px;}
ul#main-menu li#mn-recruit a:hover{background-position:-285px -40px;}
body#recruit ul#main-menu li#mn-recruit a{background-position:-285px -40px;}
ul#main-menu li#mn-contact a{background-position:-380px 0px;}
ul#main-menu li#mn-contact a:hover{background-position:-380px -40px;}
body#contact ul#main-menu li#mn-contact a{background-position:-380px -40px;}


/*-----*** cat-menu ***-----*/
#cat-menu{margin-left:350px;}
#cat-menu ul{text-align:left;padding:5px 0px;}
#cat-menu li{padding:10px 0px 0px 10px;display:inline;}
#cat-menu li a{
  background:url(/skin/src/arrow-submenu.gif) no-repeat left top;
	padding-left:10px;}

div.base{
	width:850px;
	background:url(/skin/src/bg-base.jpg) repeat-y left top;
	overflow:auto;
	margin:40px auto 0px;
	position:relative;
}
div.contents-head{height:50px;background:url(/skin/src/bg-base_top.jpg) no-repeat left 10px #fff;}
div.contents-main{margin:0px 7px 0px 5px; overflow:auto;}
div.contents-foot{background:url(/skin/src/bg-base_btm.jpg) no-repeat left bottom;margin-top:20px;}

div#catchimages{
	margin:30px 0px 0px;
	background:url(/img/company/headimage-sample.jpg) no-repeat left top;
	height:180px;
	text-indent:-9999px;
}
body#hiroba div#catchimages,
body#company div#catchimages,
body#items div#catchimages{
	margin-top:6px;
}

div.main{margin:10px 25px;overflow:auto;}
div.main div.left{width:380px;float:left;margin:0px;}
div.main div.right{width:380px;float:right;margin:0px;}

div.contents-foot{background:url(/skin/src/bg-base_btm.jpg) no-repeat left bottom;}

.footer{
	width:850px;
	background:url(/skin/src/line-color.gif) no-repeat left top;
	margin:5px auto 40px;
	color:#ccc;
	font-family:;
	font-size:14px;
	text-align:right;
}

	

/*-----------------------------------------
               見出し
-----------------------------------------*/

h2{height:31px; text-indent:-9999px;margin:0px 0px 0px;}
body#company h2{background:url(/skin/src/h2-company.gif) no-repeat left top;}
body#company #company-profile h2{background:url(/skin/src/h2-company_profile.gif) no-repeat left top;}
body#company #company-president h2{background:url(/skin/src/h2-company_president.gif) no-repeat left top;}
body#company #company-group h2{background:url(/skin/src/h2-company_group.gif) no-repeat left top;}
body#contact h2{background:url(/skin/src/h2-contact.gif) no-repeat left top;}

body#hiroba h2{background:url(/skin/src/h2-hiroba.gif) no-repeat left top;}
body#hiroba div#hiroba-leather h2{background:url(/skin/src/h2-leather.gif) no-repeat left top;}
body#hiroba div#hiroba-oya h2{background:url(/skin/src/h2-oya.gif) no-repeat left top;}
body#hiroba div#hiroba-patchwork h2{background:url(/skin/src/h2-patchwork.gif) no-repeat left top;}
body#hiroba div#hiroba-yubinuki h2{background:url(/skin/src/h2-yubinuki.gif) no-repeat left top;}

body#items h2{background:url(/skin/src/h2-items.gif) no-repeat left top;}
body#items div#item-families h2{background:url(/skin/src/h2-items_families.gif) no-repeat left top;}
body#items div#item-industrial h2{background:url(/skin/src/h2-items_industrial.gif) no-repeat left top;}
body#items div#item-material h2{background:url(/skin/src/h2-items_material.gif) no-repeat left top;}
body#items div#item-medical h2{background:url(/skin/src/h2-items_medical.gif) no-repeat left top;}
body#items div#item-environment h2{background:url(/skin/src/h2-items_environment.gif) no-repeat left top;}
body#recruit h2{background:url(/skin/src/h2-recruit.gif) no-repeat left top;}

h3{margin:0px 0px 10px;}
body#hiroba h3{font-size:16px;border-left:8px #E60033 solid;padding-left:5px;}
body#items h3{font-size:16px;border-left:8px #FF9933 solid;padding-left:5px;}
body#company h3{font-size:16px;border-left:8px #FFCC00 solid;padding-left:5px;}
body#recruit h3{font-size:16px;border-left:8px #C7DC68 solid;padding-left:5px;}
body#contact h3{font-size:16px;border-left:8px #0099CC solid;padding-left:5px;}


/*-----------------------------------------
               contact
-----------------------------------------*/
div#contactform table th{
	padding:10px;
	text-align:right;
	vertical-align:top;
}

div#contactform table td{padding:10px;text-align:left;}
div#contactform p input{padding:10px;margin:0px 0px 0px 180px;}
th.must span{ font-weight:lighter;color:#f00;margin-left:3px;}

/*-----------------------------------------
               recruit
-----------------------------------------*/
body#recruit p.address{margin:20px;font-weight:bold; background-color:#FAF9F5;padding:15px; border:dashed 1px #ccc;}
body#recruit div.block ul li{margin-left:20px;list-style-type:none; text-indent:-1em; line-height:120%;}


/*-----------------------------------------
               company
-----------------------------------------*/
body#company #group{clear:both;position:relative;}
body#company #group .companyzip{white-space: nowrap;}



/*-----------------------------------------
               items
-----------------------------------------*/
body#items #item-top #categorys ul li{
	width:235px;
	height:200px;
	float:left;
	list-style-type:none;
	margin:0px 25px 50px 0px;
}

body#items div.main div.left{width:200px;float:left;padding:20px 0px 40px;}
body#items div.main div.right{width:550px;float:right;margin:10px;}
body#items div.main div.left#listmenu{background:url(/skin/src/line-thread_org.gif) no-repeat 10px bottom;}
body#items div.main div.left#listmenu ul{margin:0px 0px 0px 20px;}
body#items div.main div.left#listmenu ul li{font-size:14px;padding:10px 15px 0px;background:url(/skin/src/listdot-org.gif) no-repeat left center; list-style-type:none;}
body#items div.main div.right#itemlist h3{background:url(/skin/src/arrow-right.gif) no-repeat left center;
	border:none;padding-left:18px;
}
body#items table.setZebra{background-color:#444444;width:100%;}
body#items table.setZebra thead tr{background-color:#ECE9D8;}
body#items table.setZebra thead th{padding:5px 10px;}
body#items table.setZebra tr{background-color:#ffffff;}
body#items table.setZebra th{text-align:center;}
body#items table.setZebra thead tr th.itemimg{width:50px;}
body#items table.setZebra thead tr th.itemname{width:auto;}
body#items table.setZebra thead tr th.yobi{width:50px;}
body#items table.setZebra thead tr th.itonaga{width:50px;}
body#items table.setZebra thead tr th.color{width:83px;}
body#items table.setZebra thead tr th.use{width:100px;}

body#items table.setZebra tr.sima{background-color:#ffffcc;}
body#items table.setZebra tr td{padding:5px;}



body#items #item-material div.right dl{width:480px;}
body#items #item-material div.right dl#aboutmaterial dt{
	font-size:13px;
	border-left:8px #FF9933 solid;
	margin:15px 0px 5px;
	padding-left:5px;
	font-weight:bold;
}
body#items #item-material div.right dl#itemlist dt,
body#items #item-environment div.right dl#itemlist dt,
body#items #item-medical div.right dl#itemlist dt{
	clear:both;
	font-size:13px;
	font-weight:bold;
	background:url(/skin/src/arrow-right.gif) no-repeat left bottom;
	padding:10px 15px 0px;
	margin:0px 0px 5px;
	letter-spacing:2px;
}
body#items #item-material div.right dd.img{width:130px;height:120px;float:left;}
body#items #item-material div.right dd p.ex{color:#999999;}



/*-----------------------------------------
               hiroba
-----------------------------------------*/
body#hiroba div.main div.left{width:200px;float:left;padding:20px 0px 40px;}
body#hiroba div.main div.right{width:550px;float:right;margin:10px;}
body#hiroba div.main div.left#listmenu{background:url(/skin/src/line-thread_red.gif) no-repeat 10px bottom;}
body#hiroba div.main div.left#listmenu ul{margin:0px 0px 0px 20px;}
body#hiroba div.main div.left#listmenu ul li{font-size:14px;padding:10px 15px 0px;background:url(/skin/src/listdot-red.gif) no-repeat left center; list-style-type:none;}

body#hiroba div.main div.right div#latest img{float:left;margin:0px 15px 10px 0px;}

body#hiroba div.main div.right #hirobaTop_lead{width:551px;height:68px;margin:0px;background:url(/skin/src/lead-hiroba_top.gif) no-repeat left top; text-indent:-9999px;}
body#hiroba div.main div.right #latest-box{border:1px #E60033 dashed;padding:10px;}
body#hiroba div.main div.right #latest-box img{float:left;}
body#hiroba div.main div.right #latest-box p{font-weight:bold;font-size:14px;}
body#hiroba div.main div.right #latest-box ul{display:block;}
body#hiroba div.main div.right #latest-box ul li{font-size:14px;padding:5px 0px 0px 20px;background:url(/skin/src/listdot-red.gif) no-repeat left center;list-style-type:none;}
body#hiroba div.main div.right #backnumber ul li{display:block;width:240px;height:120px;margin:0px 10px 10px 0px;border:1px #ECE9D8 dashed;padding:10px;float:left;}
body#hiroba div.main div.right #backnumber ul li div{width:80px;height:100px;float:left; text-align:center;}

body#hiroba #hiroba-vol5 div.main div.right div#profile-nanami img{ float:right;margin-left:10px;}
body#hiroba #hiroba-vol5 div.main div.right div#profile-yoshida img{float:left;margin-right:10px;}
body#hiroba #hiroba-vol5 div.main div.right div#profile-yoshida table{clear:both;margin-top:20px;}
body#hiroba #garelly ul li{display:block;width:250px;margin:0px 5px 20px 0px;float:left;overflow:hidden;}
body#hiroba #garelly ul li.fullsize{display:block;width:500px;margin:0px 5px 20px 0px;float:left;}
body#hiroba #garelly span.worktitle{ display:block;font-weight:bold;}

body#hiroba #hiroba-vol4 #top-1 h4{background:url(/img/hiroba/vol4/top/h4-1.gif) no-repeat left top; text-indent:-9999px; margin-bottom:10px;}
body#hiroba #hiroba-vol4 #top-2 h4{background:url(/img/hiroba/vol4/top/h4-2.gif) no-repeat left top; text-indent:-9999px; margin-bottom:10px;}
body#hiroba #hiroba-vol4 #top-3 h4{background:url(/img/hiroba/vol4/top/h4-3.gif) no-repeat left top; text-indent:-9999px; margin-bottom:10px;}
body#hiroba #hiroba-vol4 #top-4 h4{background:url(/img/hiroba/vol4/top/h4-4.gif) no-repeat left top; text-indent:-9999px; margin-bottom:10px;}
body#hiroba #hiroba-vol4 #top-5 h4{background:url(/img/hiroba/vol4/top/h4-5.gif) no-repeat left top; text-indent:-9999px; margin-bottom:10px;}
body#hiroba #hiroba-vol4 div#recipe img{float:left;margin-right:20px;}
body#hiroba #hiroba-vol4 div#recipe #howto p{padding-left:30px;text-indent:-1em;}
body#hiroba #hiroba-vol4 div#recipe .number{font-size:14px;font-weight:bold; color:#CC0000;}

body#hiroba #hiroba-vol1 #about-yubinuki{background:url(/img/hiroba/vol1/top/yubinuki.jpg) no-repeat right center;}
body#hiroba #hiroba-vol1 #about-yubinuki p{margin-right:150px;}
body#hiroba #hiroba-vol1 #recipe ol li{clear:both;margin-left:25px;}
body#hiroba #hiroba-vol1 #recipe ul.material li{clear:none;}
body#hiroba #hiroba-vol1 #recipe div#bookcoverimage{float:left;margin-right:15px;}

/*-----------------------------------------
               company
-----------------------------------------*/
body#company #company-profile table,
body#company #company-group table{background-color:#444444;}
body#company #company-profile table th,
body#company #company-group table th{background-color:#ECE9D8;text-align:right;vertical-align:top;padding:5px 10px;}
body#company #company-profile table td,
body#company #company-group table td{background-color:#ffffff;padding:5px 10px;}
body#company #company-profile table td li{margin-left:10px;}
body#company #company-profile table table th,
body#company #company-group table table th{background-color:#FAF9F5;width:140px;}
body#company #company-group table{width:600px;background-color:#444444;margin-bottom:30px;}
body#company #company-group table#officelist2 {margin-bottom:50px;}
body#company #company-group table th{text-align:center;}

.bo{text-indent:1em;}

/*-----------------------------------------
               top
-----------------------------------------*/

body#top div.base{
	width:850px;
	overflow:visible;
	margin:40px auto 0px;
}

body#top div.contents-main{position:relative;height:600px; overflow:visible;margin:5px 5px ;}
body#top div.top-image{width:350px;position:absolute;top:-11px;left:0px;}
body#top div#topnavi-showmessage{
	width:462px;
	height:30px;
	position:absolute;
	top:0px;
	left:370px;
	text-align:left;
	background:url(/skin/src/messagebox.gif) no-repeat left top;
}
body#top div#topnavi-showmessage span {
	display:block;
	width:350px;
	margin:7px 30px;
	background-color:#FAF9F5;
	border-style :none;
}
body#top div#topnavi-hiroba{
	width:200px;
	height:135px;
	position:absolute;
	top:40px;
	left:380px;
	text-align:left;
	background:url(/img/top/topnavi-hiroba.gif) no-repeat left top;
}
body#top div#topnavi-hiroba h2 a{
	display:block;
	width:200px;
	height:135px;
	text-indent:-9999px
}
body#top div#topnavi-hiroba p{
	text-indent:-9999px
}
body#top div#topnavi-community{
	width:200px;
	height:155px;
	position:absolute;
	top:190px;
	left:380px;
	text-align:left;
	background:url(/img/top/topnavi-commu.gif) no-repeat left top;
}
body#top div#topnavi-community h2 a{
	display:block;
	width:200px;
	height:155px;
	text-indent:-9999px
}
body#top div#topnavi-community p{
	text-indent:-9999px
}
body#top div#topnavi-news{
	width:240px;
	height:360px;
	position:absolute;
	top:40px;
	left:595px;
	text-align:left;
	overflow:hidden;
}
body#top div#topnavi-news h2{
	display:block;
	height:33px;
	background:url(/img/top/topnavi-news_h2.gif) no-repeat left top;
	text-indent:-9999px
}

body#top div#topnavi-news div.news-box{
	width:220px;
	height:260px;
	overflow:auto;
	background:#F5F4EB;
	margin:15px 0px;
}
body#top div#topnavi-news div.news-box ul{margin:10px;}
body#top div#topnavi-news div.news-box ul li{list-style-type:none;}
body#top .dotline{
	width:835px;
	position:absolute;
	top:360px;
	left:0px;
}
body#top div#topnavi-families{
	background:url(/img/top/topnavi-families_h2.gif) no-repeat left top;
	position:absolute;
	top:380px;
	left:0px;
	text-align:left;
	margin:0px 20px;
}
body#top div#topnavi-families h2{
	display:block;
	width:200px;
	height:33px;
	text-indent:-9999px
}
body#top div#topnavi-families ul{margin:10px 5px;}
body#top div#topnavi-families li{
	display:block;
	list-style-type:none;
	float:left;
	margin:0px 0px 0px 0px
}
body#top div#topnavi-families li a{
	display:block;
	width:120px;
	height:125px;
	background-color:#99FF00;
	text-indent:-9999px;
}
body#top div#topnavi-families li#silk a{
	width:152px;
	background:url(/img/top/material-img/silk.jpg) no-repeat center top;
}
body#top div#topnavi-families li#cotton a{
	width:205px;
	background:url(/img/top/material-img/cotton.jpg) no-repeat center top;
}
body#top div#topnavi-families li#synthetic a{
	width:123px;
	background:url(/img/top/material-img/synthetic.jpg) no-repeat center top;
}
body#top div#topnavi-families li#hemp a{
	width:156px;
	background:url(/img/top/material-img/hemp.jpg) no-repeat center top;
}
body#top div#topnavi-families li#patchwork{float:none;}
body#top div#topnavi-families li#patchwork a{
	width:156px;
	background:url(/img/top/material-img/patchwork.jpg) no-repeat center top;
}
body#top div#topnavi-families li#oriduru{float:none;margin:0px 0px 0px 470px;}
body#top div#topnavi-families li#oriduru a{
	width:328px;
	height:51px;
	background:url(/img/top/material-img/oriduru.gif) no-repeat center top;
}
body#top div#topnavi-families li#oriduru a:hover{
	background:url(/img/top/material-img/oriduru.gif) no-repeat center bottom;
}
body#top div#materiallink{
	width:850px;
	margin:10px auto;
}
body#top div#materiallink p a{
	float:left;
	display:block;
	width:400px;
	height:65px;
	background:url(/img/top/material-text.gif) no-repeat center top;
	text-indent:-9999px;
}
body#top div#materiallink img{
	width:420px;
	overflow:visible;
}


/* items/XXXXX/detail */

body.detail {
  background:#fffff9;
  color:#444;
  text-align:center;
}

body.detail div.wrapper {
  width:350px;
  margin:auto;
  padding:25px 0 25px;
}

body.detail div.wrapper:after {
  content:".";
  height:1px;
  margin-top:-1px;
  clear:right;
  display:block;
  overflow:hidden;
  line-height:0.01;
  visibility:hidden;
}

body.detail div.wrapper img#item {
/* tempolary */
  width:350px;
  height:350px;
/* /tempolary */
  overflow:hidden;
  padding-bottom:25px;
}

body.detail dl {
  width:200px;
  float:left;
  text-align:left;
}

body.detail dl dt {
  border-left:solid 6px #f93;
  font-weight:bold;
  font-size:small;
  padding-left:3px;
  margin-bottom:3px;
}

body.detail dl dd {
  padding-bottom:1em;
  font-size:small;
}

body.detail table {
  border-collapse:collapse;
  float:right;
  width:120px;
}

body.detail table thead tr th {
  background:#ece9d8;
}

body.detail table tr th,
body.detail table tr td {
  border:solid 1px #444;
  font-size:small;
  padding:3px;
  font-weight:normal;
  text-align:center;
}

body.detail p#btn-close {
  clear:both;
  margin-top:-35px;
  float:right;
}

body.detail p#btn-close a {
  width:120px;
  height:25px;
  display:block;
  background:transparent url(./src/btn-close.gif) no-repeat 0 0;
  overflow:hidden;
  text-indent:-999em;
}

/* for mouse over
body.detail p#btn-close a:hover {
  background:#ddd;
}
*/


/*
*/
#submenu{
	background-color:transparent;  /* Background color of sub menu items */
	width:50%;	/* Don't change this option */
  position:relative;;
  top:50px;
  padding-left:365px;
}

#submenu div{
	white-space:nowrap;	/* Don't change this option */
}

#submenu div a {
  background:url(/skin/src/arrow-submenu.gif) no-repeat left top;
  height:20px;
  float:left;
  margin-right:3px;
  padding-left:10px;
}

/*
  Style attributes of active menu item
*/
#main-menu .activeMenuItem{
	/* Border options */
	cursor:pointer;  /* Cursor like a hand when the user moves the mouse over the menu item */
}
	
#main-menu .activeMenuItem img{
	position:absolute;
	bottom:0px;
	right:0px;
}

/*
Style attributes of inactive menu items
*/
#main-menu .inactiveMenuItem{
	color: #000;  /* Text color */
/*	cursor:pointer;*/  /* Cursor like a hand when the user moves the mouse over the menu item */
}

#submenu a {
	text-decoration:none;
	padding-left:5px;  /* Space at the left of each sub menu item */
	padding-right:5px;  /* Space at the right of each sub menu item */
	color: #000;  /* Text color */
	font-size:0.9em;
}

#submenu a:hover{
	color: #FF0000;  /* Red color when the user moves the mouse over sub menu items */
}