@charset "utf-8";

/* search_common
-------------------------------------------------- */
/* パンくず */
#crumb{
	background:#2d2831;
}
#crumb ul li,
#crumb ul li a,
#crumb ul li a::after{
	color:#ffffff;
}

h3{
	padding:25px 0 25px 15px;
	font-size:1.6rem;
	color:#ffffff;
	font-weight:300;
}

/* 検索結果の表示パネル */
.result_panel{
	border:1px solid #c8c8c8;
	margin-top:15px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	padding:10px;
}
.result_panel .panel_wrap_t{
	display:table;
	width:100%;
}

/* ヒット数 */
.result_panel .hits{
	display:table-cell;
}
.result_panel .hits span{
	display:inline-block;
	margin:0 5px;
	color:#d90013;
	font-size:2.5rem;
}

/* 並び替え */
.result_panel .sort{
	display:table-cell;
	width:6em;
	text-align:right;
	position:relative;
}
.result_panel .sort dt,
.result_panel .sort dd{
	text-align:left;
}
.result_panel .sort dt{
	border:1px solid #c8c8c8;
	padding:5px;
	cursor:pointer;
	background:#ffffff;
}
.result_panel .sort dt::after{
	content:'▼';
	display:inline-block;
	font-size:1rem;
	margin-left:5px;
}
.result_panel .sort dd{
	display:none;
	position:absolute;
	left:0;
	border:1px solid #c8c8c8;
	width:calc(6em - 12px);
	padding:10px 5px;
	background:#ffffff;
}
.result_panel .sort dd:nth-child(2){
	top:calc(1.4rem + 15px);
}
.result_panel .sort dd:nth-child(3){
	top:calc(2.8rem + 35px);
}
.result_panel .sort dd:nth-child(4){
	top:calc(4.2rem + 55px);
}
.result_panel .sort dd:nth-child(5){
	top:calc(5.6rem + 75px);
}
.result_panel .sort dd.open{
	display:block;
}
.result_panel .sort dt.open::after{
	content:'▲';
}

/* 絞り込み */
.result_panel .panel_wrap_b{
	margin-top:15px;
	border-top:1px solid #c8c8c8;
	padding-top:15px;
}
.result_panel .panel_wrap_b dl{
	margin-bottom:15px;
	display:table;
	width:100%;
}
.result_panel .panel_wrap_b dl dt{
	display:table-cell;
	width:38%;
}
.result_panel .panel_wrap_b dl dd{
	display:table-cell;
	width:62%;
	letter-spacing:-0.4em; /* 改行による隙間対策 */
}
.result_panel .panel_wrap_b dl.double dd span{
	letter-spacing:normal; /* 改行による隙間対策 */
	display:inline-block;
	width:12%;
	text-align:center;
}
.result_panel .panel_wrap_b dl.double dd select{
	letter-spacing:normal; /* 改行による隙間対策 */
	display:inline-block;
	width:44%;
}
.result_panel .panel_wrap_b dl.double dd option{
	width:100%;
	overflow:hidden;
	-webkit-text-overflow:ellipsis;
	-moz-text-overflow:ellipsis;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.result_panel .panel_wrap_b dl.single dd select{
	letter-spacing:normal; /* 改行による隙間対策 */
	width:100%;
}
.result_panel .panel_wrap_b dl.single dd option{
	width:100%;
	overflow:hidden;
	-webkit-text-overflow:ellipsis;
	-moz-text-overflow:ellipsis;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.result_panel .panel_wrap_b dl.single select{
	width:70%;
}
.result_panel .panel_wrap_b dl dd select option{
	width:70%;
	overflow:hidden;
	-webkit-text-overflow:ellipsis;
	-moz-text-overflow:ellipsis;
	text-overflow:ellipsis;
	white-space:nowrap;
}

/* ボタン */
.result_panel .btn_set{
	text-align:center;
}
.result_panel .btn_set .reset,
.result_panel .btn_set .search{
	margin-top:5px;
	display:inline-block;
	max-width:21rem;
	border:0;
	cursor:pointer;
	color:#ffffff;
	padding:8px 25px;
	font-family:'Noto Sans JP', sans-serif;
	font-weight:400;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
}
.result_panel .btn_set .reset{
	background:#4b4b4b;
	margin-right:5px;
}
.result_panel .btn_set .search{
	background:#d90013;
	margin-left:5px;
}

/* 検索結果INDEX */
.search-index{
	border:1px solid #c8c8c8;
	margin-top:10px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	padding:10px;
}
.search-index .search-index-inner{
	display:table;
	width:100%;
}
.search-index .search-index-inner p.title{
	display:table-cell;
	vertical-align:middle;
	padding-right:10px;
	border-right:1px solid #c8c8c8;
}
.search-index .search-index-inner .list{
	display:table-cell;
	padding-left:10px;
}
.search-index .search-index-inner .list ul li{
	display:inline-block;
	margin:2px 5px 3px 0;
}
.search-index .search-index-inner .list ul li a{
	display:block;
	background:#d90013;
	padding:5px 10px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
/*	border:1px solid #c8c8c8;*/
	color:#ffffff;
}

/* 注釈 */
.note_weight{
	font-size:1rem;
	margin-top:10px;
}
.note_dl{
	font-size:1.2rem;
	margin-top:5px;
}
.note_dl a{
	color:#d90013;
	text-decoration:underline;
}

/* リスト */
.sort-box{
	margin-top:15px;
	letter-spacing:-0.4em; /* 改行による隙間対策 */
}
.sort-box h5{
	font-size:2rem;
	padding-bottom:3px;
	border-bottom:1px solid #323232;
	font-weight:400;
	margin-bottom:10px;
	letter-spacing:normal; /* 改行による隙間対策 */
}
.sort-box ul.result-list li{
	display:inline-block;
	letter-spacing:normal; /* 改行による隙間対策 */
	width:48%;
	margin-right:4%;
	margin-bottom:10px;
}
.sort-box ul.result-list li:nth-child(2n){
	margin-right:0;
}
.sort-box ul.result-list li a{
	display:block;
	cursor:pointer;
}
.sort-box ul.result-list .photo{
	background:#ffffff;
	border:1px solid #dcdcdc;
	padding:5px;
	text-align:center;
}
.sort-box ul.result-list ul.spec{
	background:#4b4b4b;
	color:#ffffff;
	font-size:1.2rem;
}
.sort-box ul.result-list ul.spec li{
	padding:5px;
	width:auto;
	margin-bottom:0;
}
.sort-box ul.result-list ul.spec li:nth-child(1){
	float:left;
	margin-right:0;
}
.sort-box ul.result-list ul.spec li:nth-child(2){
	float:right;
}
.sort-box ul.result-list p.number{
	display:table;
	width:100%;
}
.sort-box ul.result-list p.number span{
	display:table-cell;
	background:#d90013;
	text-align:center;
	color:#ffffff;
	padding:5px 3px;
	vertical-align:middle;
	height:2em;
	font-size:1em;
}

/* モーダルウインドウ */
div#modalLayer{
	display:none;
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	height:100%;
	width:100%;
	background:#333333;
	filter:alpha(opacity=75);
	opacity:0.75;
	z-index:1100;
}
#modalContents{
	display:none;
	width:100%;
	height:100%;
	overflow:hidden;
	background:#ffffff;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	z-index:1101;
	padding:15px 15px 0 15px;
	letter-spacing:normal;
}

#modalContents span.close{
	position:absolute;
	top:10px;
	right:10px;
	cursor:pointer;
}
#modalContents span.close-btn{
	height:40px;
	width:40px;
	display:block;
	position:relative;
} 
#modalContents span.close-btn:before,
#modalContents span.close-btn:after{
	content:'';
	height:3px;
	width:24px;
	display:block;
	background:#333333;
	position:absolute;
	top:10px;
	right:0;
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
}
#modalContents span.close-btn:after{
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
}
#modalBox{
	width:100%;
	height:100%;
	overflow-y:scroll;
	text-align:center;
}
#modalBox p.sereas{
	height:1.8rem;
	background-position:center top;
}

#modalBox ul.modal-spec{
	font-size:1.6rem;
	margin-top:5px;
	text-align:center;
}
#modalBox ul.modal-spec li{
	display:inline-block;
}
#modalBox ul.modal-spec li:first-child{
	margin-right:1em;
}
#modalBox .photo{
	font-size:1.2rem;
	margin-top:10px;
}
#modalBox .photo img,
#modalBox .photo span.number{
	display:block;
	font-size:1.4rem;
}
#modalBox .photo img{
	width:70%;
	margin:10px auto;
}
#modalBox table{
	width:100%;
	border-top:1px solid #c8c8c8;
	margin-top:10px;
}
#modalBox table th,
#modalBox table td{
	border-bottom:1px solid #c8c8c8;
	padding:5px;
	text-align:left;
	font-size:1.2rem;
}
#modalBox table th{
	background:#d90013;
	color:#ffffff;
	font-weight:400;
}
#modalBox .btn{
	text-align:center;
	margin:20px 0;
}
#modalBox .btn a{
	display:inline-block;
	padding:10px 20px;
	color:#ffffff;
	background:#4b4b4b;
	font-size:1.2rem;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
}

/* 図面ダウンロードボタン */
#contents .btn_set_dl{
	padding:10px 0;
	position:fixed;
	left:0;
	bottom:0;
	z-index:9998;
	background:rgba(0,0,0,0.7);
	width:100%;
	text-align:center;
	color:#ffffff;
}
#contents .btn_set_dl input{
	margin:5px 0 10px 0;
	display:inline-block;
	width:80%;
	border:0;
	cursor:pointer;
	color:#ffffff;
	padding:7px 40px;
	font-family:'Noto Sans JP', sans-serif;
	font-weight:400;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
}
#contents .btn_set_dl input[type="reset"]{
	background:#000000;
}
#contents .btn_set_dl input[type="submit"]{
	background:#d90013;
}



/* PC
-------------------------------------------------- */
@media only screen and (min-width: 768px) {


	/* search_common
	++++++++++++++++++++++++++++++++++++++++++++++ */
	h3{
		width:100%;
		height:130px;
		line-height:130px;
		font-size:36px;
		color:#ffffff;
		padding:0;
	}
	h3 span{
		display:block;
		max-width:1024px;
		margin:0 auto;
	}

	/* 検索結果の表示パネル */
	.result_panel{
		background:#ffffff;
		margin:30px auto 0 auto;
		max-width:1024px;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
		padding:20px;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
		border-radius:5px;
	}

	/* ヒット数 */
	.result_panel .hits{
		display:block;
		float:left;
	}
	.result_panel .hits span{
		display:inline-block;
		margin:0 5px;
		color:#d90013;
		font-size:30px;
	}

	/* 並び替え */
	.result_panel .sort{
		display:table;
		float:right;
		margin-top:10px;
	}
	.result_panel .sort dt,
	.result_panel .sort dd{
		display:table-cell;
		white-space:nowrap;
		padding-right:1em;
	}
	.result_panel .sort dt{
		border:none;
		padding:0;
		cursor:inherit;
	}
	.result_panel .sort dt::after{
		content:'：';
		display:inline-block;
		font-size:15px;
		margin-left:0;
		padding-right:1em;
	}
	.result_panel .sort dd{
		position:relative;
		top:0!important;
		border:none;
		width:auto;
		padding:0 15px 0 0 ;
	}
	.result_panel .sort dd::after{
		content:'｜';
		display:inline-block;
		margin-left:1em;
	}
	.result_panel .sort dd:last-child::after{
		display:none;
	}
	.result_panel .sort dd a{
		color:#d90013;
	}
	.result_panel .sort dd a.active{
		color:#000000;
		font-weight:500;
	}

	/* 絞り込み */
	.result_panel .panel_wrap_b dl{
		display:block;
		width:23.5%;
		float:left;
		margin-right:2%;
	}
	.result_panel .panel_wrap_b dl.wheel_material{
		margin-right:0;
	}
	.result_panel .panel_wrap_b dl dt{
		display:block;
		width:100%;
		margin-bottom:5px;
	}
	.result_panel .panel_wrap_b dl dd{
		display:block;
		width:100%;
	}

	/* ボタン */
	.result_panel .btn_set{
		clear:both;
	}
	.result_panel .btn_set .reset,
	.result_panel .btn_set .search{
		max-width:145px;
		padding:7px 40px;
	}

	/* 検索結果INDEX */
	.search-index{
		background:#ffffff;
		max-width:1024px;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
		padding:10px 20px;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
		border-radius:5px;
	}
	.search-index .search-index-inner p.title{
		width:3em;
		padding-right:15px;
	}
	.search-index .search-index-inner .list{
		padding-left:15px;
	}

	/* 注釈 */
	.note_weight{
		font-size:10px;
		margin-top:0;
	}
	.note_dl{
		max-width:1024px;
		margin:5px auto 0 auto;
		text-align:right;
		font-size:12px;
	}

	/* リスト */
	.sort-box{
		padding-top:140px;
		margin-top:-125px;
	}
	.sort-box h5{
		font-size:24px;
		padding-bottom:7px;
	}
	.sort-box ul.result-list li{
		width:16%;
		margin-right:0.8%;
	}
	.sort-box ul.result-list li:nth-child(2n){
		margin-right:0.8%;
	}
	.sort-box ul.result-list li:nth-child(6n){
		margin-right:0;
	}
	.sort-box ul.result-list .photo{
		padding:7px;
	}
	.sort-box ul.result-list ul.spec{
		font-size:9px;
	}
	.sort-box ul.result-list p.number span{
		font-size:10px;
	}

	/* モーダルウインドウ */
	#modalContents{
		width:660px;
		height:420px;
		top:50%;
		left:50%;
		padding:30px;
	}
	#modalBox{
		text-align:left;
	}
	#modalBox p.sereas{
		float:left;
		width:209px;
		height:18px;
		background-position:left top;
	}
	#modalBox p.sereas.LIGHTSTAR{ background-image:url(../png/sereasname_lightstar_s.png); }
	#modalBox p.sereas.MIDDLESTAR{ background-image:url(../png/sereasname_middlestar_s.png); }
	#modalBox p.sereas.HEAVYSTAR{ background-image:url(../png/sereasname_heavystar_s.png); }
	#modalBox p.sereas.OFFICESTAR{ background-image:url(../png/sereasname_officestar_s.png); }
	#modalBox p.sereas.SHORTSTAR{ background-image:url(../png/sereasname_shortstar_s.png); }
	#modalBox p.sereas.LOCKSTAR{ background-image:url(../png/sereasname_lockstar_s.png); }
	#modalBox p.sereas.SMOOSTAR{ background-image:url(../png/sereasname_smoostar_s.png); }
	#modalBox p.sereas.SILENTSTAR{ background-image:url(../png/sereasname_silentstar_s.png); }
	#modalBox p.sereas.LEADSTAR{	background-image:url(../png/sereasname_leadstar_s.png); }
	#modalBox p.sereas.STAINLESTAR{ background-image:url(../png/sereasname_stainlestar_s.png); }
	
	.en_sereas #modalBox p.sereas.LIGHTSTAR{ background-image:url(../png/sereasname_lightstar_s-2.png); }
	.en_sereas #modalBox p.sereas.HEAVYSTAR{ background-image:url(../png/sereasname_heavystar_s-2.png); }
	.en_sereas #modalBox p.sereas.OFFICESTAR{ background-image:url(../png/sereasname_officestar_s-2.png); }
	.en_sereas #modalBox p.sereas.SHORTSTAR{ background-image:url(../png/sereasname_shortstar_s-2.png); }
	.en_sereas #modalBox p.sereas.LOCKSTAR{ background-image:url(../png/sereasname_lockstar_s-2.png); }
	.en_sereas #modalBox p.sereas.SILENTSTAR{ background-image:url(../png/sereasname_silentstar_s-2.png); }
	.en_sereas #modalBox p.sereas.LEADSTAR{	background-image:url(../png/sereasname_leadstar_s-2.png); }
	.en_sereas #modalBox p.sereas.STAINLESTAR{ background-image:url(../png/sereasname_stainlestar_s-2.png); }
	
	.cn_sereas #modalBox p.sereas.LIGHTSTAR{ background-image:url(../png/sereasname_lightstar_s-3.png); }
	.cn_sereas #modalBox p.sereas.HEAVYSTAR{ background-image:url(../png/sereasname_heavystar_s-3.png); }
	.cn_sereas #modalBox p.sereas.OFFICESTAR{ background-image:url(../png/sereasname_officestar_s-3.png); }
	.cn_sereas #modalBox p.sereas.SHORTSTAR{ background-image:url(../png/sereasname_shortstar_s-3.png); }
	.cn_sereas #modalBox p.sereas.LOCKSTAR{ background-image:url(../png/sereasname_lockstar_s-3.png); }
	.cn_sereas #modalBox p.sereas.SILENTSTAR{ background-image:url(../png/sereasname_silentstar_s-3.png); }
	.cn_sereas #modalBox p.sereas.LEADSTAR{	background-image:url(../png/sereasname_leadstar_s-3.png); }
	.cn_sereas #modalBox p.sereas.STAINLESTAR{ background-image:url(../png/sereasname_stainlestar_s-3.png); }
	
	
	
	
	
	#modalBox ul.modal-spec{
		float:right;
		font-size:18px;
		margin-top:0;
		margin-right:25px;
	}
	#modalBox .photo{
		float:left;
		width:45%;
		font-size:11px;
		margin-top:15px;
		text-align:center;
	}
	#modalBox .photo span.number{
		font-size:13px;
	}
	#modalBox .photo img{
		width:70%;
		margin:10px auto;
	}
	#modalBox table{
		margin-top:15px;
		width:50%;
		float:right;
	}
	#modalBox table th,
	#modalBox table td{
		padding:7px 10px;
		font-size:13px;
	}
	#modalBox .btn a{
		font-size:13px;
	}

	/* 図面ダウンロードボタン */
	#contents .btn_set_dl input{
		width:auto;
	}
	#contents .btn_set_dl input[type="reset"]{
		margin-right:5px;
	}
	#contents .btn_set_dl input[type="submit"]{
		margin-left:5px;
	}

	/* デモ用の一時的な処理 */
/*
	.sort-box ul.result-list .photo{
		width:111px!important;
		height:111px!important;
		text-align:center!important;
	}
	.sort-box ul.result-list .photo img{
		width:auto!important;
		height:111px!important;
	}
	.sort-box ul.result-list li a{
		min-height:177px!important;
	}
*/

}