@charset "utf-8";

/* =======================================

	CommonElements

======================================= */

#mainimg-product{
	height: 270px;
	margin: 0 0 40px 0;
	background: url(../images/cmn_img/bg_main.jpg) no-repeat top center;
}
@media screen and (max-width: 736px) {
	#mainimg-product{
		height: 150px;
		margin: 0 0 30px 0;
	}
}

.btn-blue{ background: #FFFFFF; }

/* タブ
---------------------------------------------------------------------------- */
.all_area {
	margin: 0 0 30px 0;
}
	
.all_area div.content_area{
	/*Tabの内容を表示するエリアの装飾*/
	background: #FFFFFF;/*#f0f4f5*/
	padding:25px 10px 15px 15px;  
}
 
.tab_area li.select{
	/*アクティブタブの装飾*/
	background: #FFFFFF;/*#f0f4f5*/
	color: #333333;
}

.tab_area{
	/*overflow: hidden;*/
	display: table;
	margin: 0 auto;
	max-width: 1020px;
	width: 100%;
}
	
.tab_area li{
	/*Tabの装飾*/
	width: 33%;
	height:55px;
	text-align:center; 
	border-right: 1px solid #5c6673; 
	cursor: pointer; 
	vertical-align:middle; 
	display: table-cell;  
	color: #eeeeee;
	background: #374252;
}
.tab_area li:nth-child(3n){
	border-right: none;
}
	
.hide{display:none;}

@media screen and (max-width: 736px) {
	.tab_area li{
		font-size: 0.8em;
		height: 45px;
	}
	.tab_area li span{ display: block; }
	.all_area div.content_area{
		padding: 0;  
	}
}

/*tab内のリスト*/
.content_area ul{ overflow: hidden; text-align: center; }
.content_area ul li{
	float: left;
	width: 32%;
	margin: 0 1% 1% 0;
	padding: 5px 0 5px 15px;
	text-align: left;
	transition: all 0.5s;
	position: relative;
}
.content_area ul li:nth-child(3n){
	margin: 0 0 1% 0;
}
.content_area ul li:before{
	content:"";
	display:block;
	width: 5px;
	height: 5px;
	border-top: #374252 2px solid;
	border-right: #374252 2px solid;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	position:absolute;
	left: 0;
	top:0;
	bottom:0;
	margin:auto;

}

.content_area ul li:hover{
	/*background: #FFFFFF;*/
	cursor: pointer;
	text-decoration: underline;
}

@media screen and (max-width: 736px) {
	.content_area ul li{
		/*float: none;*/
		width: 50%;
		font-size: 0.8em;
		margin: 0 0 0 0;
		padding: 15px 0 15px 0;
		text-align: center;
		border-bottom: 1px solid #FFFFFF;
	}
	.content_area ul li:nth-child(1n){
		border-right: 1px solid #FFFFFF;
	}
	.content_area ul li:nth-child(3n){
		margin: 0 0 0 0;
	}
	.content_area ul li:last-child{
		border-bottom: none;
	}
	.content_area ul li:before{
		display: none;	
	}
}


/* 製品一覧
---------------------------------------------------------------------------- */
.product-list-wrap{
	max-width: 1020px;
	width: 100%;
	margin: 0 auto 60px auto;
	overflow: hidden;
}
.product-list-wrap ul{ margin: 0 0 0 0; }
.product-list-wrap ul li{
	float: left;
	width: 48%;/*width: 18%;*/
	margin: 0 1% 20px 1%;
	padding: 1%;
	min-height: 200px;
	border: 1px solid #FFFFFF;
}
.product-list-wrap li:hover{ cursor: pointer; border: 1px solid #cccccc; }

/*個別*/
.product-list-wrap li{ background: #FFF; }
.product-list-wrap li a{ text-decoration: none; color: #333; display: block; }
.product-list-thumb{ margin: 0 15px 10px 0; float: left; }
.product-list-thumb img{ width: 128px; height: auto; }
.product-list-detail{
	width: 320px;
	float: left;
}
	.product-list-catname{
		font-size: 0.8em;
		margin: 0 0 5px 0;
		color: #666;
	}
	.product-list-name{
		font-weight: bold;
		font-size: 1.2em;
		margin: 0 0 10px 0;
		padding: 0 0 5px 0;
		border-bottom: 1px solid #CCCCCC;
	}
	
	.icon-wrap{
		width: 100%;
		overflow: hidden;
		margin: 0 0 5px 0;
	}
	.icon-wrap div{
		float: left;
		text-align: center;
		width: 32%;
		font-size: 0.8em;
		margin: 0 2% 5px 0;
		padding: 2px;
		color: #FFF;
		background: #374252;
	}
	.icon-wrap div:nth-child(3n){
		margin: 0 0 5px 0;
	}
	/*
	.icon-wrap div.keiryo{ background: #629dd4; }
	.icon-wrap div.yurumi{ background: #88d462; }
	.icon-wrap div.usuita{ background: #62c0d4; }
	.icon-wrap div.densyoku{ background: #eed52e; }
	.icon-wrap div.cost{ background: #ee2e2e; }
	*/
	.product-list-txt{
		clear: both;
		margin: 0 0 10px 0;
	}

@media screen and (max-width: 736px) {
	.product-list-wrap ul li{
		float: left;
		width: 100%;
		margin: 10px 0 0 0;
		padding: 10px 10px 10px 10px;
		overflow: hidden;
		border-bottom: 1px solid #CCCCCC;
	}
	.product-list-thumb{ margin: 0 3% 5px 0; width: 30%; }
	.product-list-thumb img{ width: 100%; }
	
	.product-list-name{
		font-weight: bold;
		font-size: 1em;
		margin: 0 0 0 0;
		padding: 0 0 5px 0;
		border-bottom: none;
	}
	.product-list-detail{
		width: auto;
		float: none;
	}
		.icon-wrap{
			width: auto;
			overflow: hidden;
			margin: 0 0 5px 0;
		}
		.icon-wrap div{
			float: left;
			text-align: center;
			width: 32%;
			font-size: 0.7em;
			margin: 0 2% 5px 0;
			padding: 2px;
			color: #FFF;
			background: #374252;
		}	
		.product-list-catname{
			font-size: 0.6em;
			margin: 0 0 3px 0;
		}
}


/* 製品詳細
---------------------------------------------------------------------------- */
.product-wrap{ width: 680px; margin: 0 0 40px 0; overflow: hidden; }

.product-thumb{ margin: 0 20px 10px 0; float: left; }
/*サムネイル*/
.thumb_img{ margin: 5px 0 0 0; overflow: hidden; }
.thumb_img li{
	float: left;
	margin: 0 5px 0 0;
}
.thumb_img li:nth-child(4n){
	margin: 0 0 0 0;
}
.thumb_img li img{
	width: 76px;
	height: auto;
}

.product-detail{
	width: 340px;
	float: right;
}
	.product-catname{
		font-size: 0.8em;
		margin: 0 0 5px 0;
		color: #666;
	}
	.product-name{
		font-weight: bold;
		font-size: 1.2em;
		margin: 0 0 10px 0;
		padding: 0 0 5px 0;
		border-bottom: 1px solid #CCCCCC;
	}
	
	/*アイコンは一覧と共通*/
		
	.product-txt{
		clear: both;
		margin: 0 0 10px 0;
	}

@media screen and (max-width: 736px) {
	.product-wrap {
		float: left;
		width: 100%;
		margin: 0 0 0 0;
		padding: 10px 0 10px 0;
		overflow: hidden;
	}
	.product-thumb{ margin: 0 0 2px 0; width: 100%; float: left; }
	.product-thumb img{ width: 100%; }

	/*サムネイル*/
	.thumb_img{ width: 100%; margin: 5px 0 0 0; float: left;}
	.thumb_img li{
		float: left;
		width: 24%;
		margin: 0 1% 0 0;
	}

	.thumb_img li img{
		width: 100%;
		height: auto;
	}
	
	.product-name{
		font-weight: bold;
		font-size: 1.2em;
		margin: 0 0 0 0;
		padding: 0 0 5px 0;
		border-bottom: none;
	}
	.product-detail{
		width: auto;
		float: none;
		clear: both;
	}
		.product-detail .icon-wrap{
			/*width: 100%;*/
			overflow: hidden;
			margin: 0 0 5px 0;
		}
		.product-detail .icon-wrap div{
			float: left;
			text-align: center;
			width: 32%;
			font-size: 0.6em;
			margin: 0 1% 1% 0;
			padding: 2px;
			color: #FFF;
			background: #374252;
		}	
}


/*左右分割レイアウト*/
.img-wrap{ overflow: hidden; margin: 0 0 20px 0; }
.left-wrap{ float: left; width: 330px; margin: 0 20px 20px 0; }
.right-wrap{ float: left; width: 330px; margin: 0 0 20px 0; }
dl.detail-list{ margin: 10px 0 0 0; }
dl.detail-list dt{ margin: 0 0 5px 0; font-weight: bold; }
dl.detail-list dd{}

/*中央揃え画像*/
.center-wrap{ width: 100%; margin: 0 auto 20px auto; text-align: center; }

@media screen and (max-width: 736px) {
	.center-wrap img{ max-width: 320px; width: 100%; }
}


/*箇条書き*/
ul.itemize{ margin: 0 0 30px 0; }
ul.itemize li{
	list-style: disc;
	margin: 0 0 5px 20px;
}

/*箇条書き番号*/
ul.numberize{ margin: 0 0 30px 0; }
ul.numberize li{
	list-style: decimal;
	margin: 0 0 5px 20px;
}


/*ライセンス*/
.lisence-wrap{
	margin: 0 0 20px 0;
	text-align: center;
	background: url(../images/cmn_img/bg_lisence.gif) repeat-x top center;
}
.lisence-wrap img{
	margin: 30px 0 30px 0;
}

@media screen and (max-width: 736px) {
	.lisence-wrap{}
	.lisence-wrap img{
		width: 280px !important;
		margin: 10px auto 10px auto;
	}
}

/*導入事例*/
.jirei-wrap ul{
	max-width: 680px;
	width: 100%;
	margin: 0 0 40px 0;
	overflow: hidden;
}
.jirei-wrap ul li{
	float: left;
	width: 213px;
	margin: 0 20px 20px 0;
}
.jirei-wrap ul li:nth-child(3n){
	margin: 0 0 20px 0;
}
.jirei-img{ margin: 0 0 10px 0; }
.jirei-txt{}

@media screen and (max-width: 736px) {
	.jirei-wrap ul li{
		width: 49%;
		margin: 0 2% 10px 0;
	}
	.jirei-wrap ul li img{ width: 100%; }
	.jirei-wrap ul li:nth-child(3n){
		margin: 0 2% 10px 0;
	}
	.jirei-wrap ul li:nth-child(2n){
		margin: 0 0 10px 0;
	}	
	.jirei-img{ margin: 0 0 5px 0; }
}

/*関連商品*/
.kanren-wrap ul{
	max-width: 680px;
	width: 100%;
	margin: 0 0 40px 0;
	overflow: hidden;
}
.kanren-wrap ul li{
	float: left;
	width: 213px;
	margin: 0 20px 20px 0;
}
.kanren-wrap ul li:nth-child(3n){
	margin: 0 0 20px 0;
}
.kanren-img{ margin: 0 0 10px 0; }
.kanren-img img{ max-width: 213px; width: 100%; } 
.kanren-img a:hover img{ opacity: 0.8;  }
.kanren-category{ font-size: 0.8em; }
.kanren-name{}

@media screen and (max-width: 736px) {
	.kanren-wrap ul li{
		width: 49%;
		margin: 0 2% 10px 0;
	}
	.kanren-wrap ul li img{ width: 100%; }
	.kanren-wrap ul li:nth-child(3n){
		margin: 0 2% 10px 0;
	}
	.kanren-wrap ul li:nth-child(2n){
		margin: 0 0 10px 0;
	}	
	.kanren-img{ margin: 0 0 5px 0; }
}

/*ねじ職人コラムの器*/
#coloumn-wrap{
}