@charset "utf-8";

.search_bg {
	background-color: #EFEFEF;
	background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255,255,255,0.2)), color-stop(.5, transparent), to(transparent));
	background-image: -moz-linear-gradient(left, rgba(255,255,255,0.2) 50%, transparent 50%, transparent);
	background-image: -o-linear-gradient(left, rgba(255,255,255,0.2) 50%, transparent 50%, transparent);
	background-image: linear-gradient(left, rgba(255,255,255,0.2) 50%, transparent 50%, transparent);
	-webkit-background-size: 35px 35px;
	-moz-background-size: 35px 35px;
	background-size: 35px 35px;
}
.search_container {
	width: 100%;
}

.search_content {
	margin: 0 auto;
	width: 1200px;
}
.search_left {
	width: 1200px;
}

.search_title {
	display: block;
	margin-bottom: 10px;
	width: 100%;
}
.search_title h2 {
	font-size: 2em;
	font-weight: bolder;
	line-height: 1.5em;
}
.search_title .lead {
	margin-top: 5px;
	font-size: 0.8em;
}
.search_text_bg {
	margin: 1px 0;
	padding: 1em 0;
	background: #333;
}
.search_text {
	margin: 0 auto;
}
.search_text p {
	margin-bottom: 1em;
	color: #FFF;
	font-size: 1.2em;
	text-align: center;
	}
.search_text input[type="search"] {
	display: block;
	margin: 0 auto;
	width: 640px;
	padding: 0.2em 0.5em;
	box-sizing: border-box;
	font-size: 1.5em;
	font-weight: bold;
}
.search_refine li {
	position: relative;
	display: inline-block;
	margin-left: 2px;
	width: 238px;
	height: 60px;
	box-sizing: border-box;
	background: #333;
}
.search_refine li:first-child {
	width: 240px;
	margin-left: 0;
}
.search_refine li:hover {
	background: #C5314A;
	filter: brightness(1.2);
}
.search_refine li a {
	display: table-cell;
	width: 238px;
	height: 60px;
	text-align: center;
	vertical-align: middle;
	font-size: 1.2em;
	font-weight: bold;
	color: #FFF;
}
.search_refine li a img {
	width: 100%;
}
.search_right {
	position: relative;
	width: 1200px;
}
.search_choice {
	position: absolute;
	top: 20px;
	left: 20px;
	color: #FFF;
	line-height: 1.8em;
	font-size: 1.2em;
}
.search_choice label {
	display: block;
	text-align: left;
}
.search_choice label input[type="radio"] {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.search_choice label input[type="radio"] + span {
	position: relative;
	display: inline-block;
	padding-left: 35px;
	margin-right: 35px;
}
.search_choice label input[type="radio"] + span::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 26px;
	height: 26px;
	border: 1px solid #999;
	border-radius: 50%;
	box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
	background: #CCC;
}
.search_choice label input[type="radio"]:checked + span::after {
	content: "";
	display: block;
	position: absolute;
	top: 3px;
	left: 4px;
	width: 20px;
	height: 20px;
	background: #C5314A;
	border-radius: 50%;
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), 0 2px 2px rgba(0, 0, 0, 0.4);
}
.search_choice label input[type="radio"]:checked + span:hover {
	filter: brightness(1.2);
}
.search_slider {
	position: relative;
	margin: 0 auto 10px auto;
	width: 100%;
	height: 120px;
	text-align: center;
	background: #333;
}
.search_slider dl {
	display: inline-block;
	margin: 5px 10px;
	width: 280px;
	padding: 10px;
	text-align: center;
}
.search_slider dl dt {
	display: inline;
	vertical-align: middle;
	font-size: 1.2em;
	font-weight: bold;
	color: #FFF;
}
.search_slider dl dt input {
	margin: 0 5px;
	width: 70px;
	padding: 0 5px;
	text-align: right;
	font-size: 1.5em;
	box-sizing: border-box;
	color: #333;
	background: #FFF;
	border: 1px solid #666;
}
.search_slider dl dd {
	position: relative;
	margin-top: 10px;
	width: 100%;
	height: 30px;
}
.search_slider_bg {
	position: absolute;
	top: 10px;
	left: 0;
	width: 260px;
	height: 10px;
	background: #999;
	border-radius: 5px;
	z-index: 1;
}
.search_slider dl dd .search_slider_left {
	position: absolute;
	top: 0;
	left: 0;
	width: 30px;
	height: 30px;
	padding-top: 7px;
	text-align: center;
	font-size: 1.5em;
	color: #FFF;
	background: #C5314A;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	z-index: 2;
	cursor: pointer;
}
.search_slider dl dd .search_slider_right {
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	padding-top: 7px;
	text-align: center;
	font-size: 1.5em;
	color: #FFF;
	background: #C5314A;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	z-index: 2;
	cursor: pointer;
}
.search_slider dl dd .search_slider_left:hover,
.search_slider dl dd .search_slider_right:hover {
	filter: brightness(1.2);
}
.search_slider_minimum {
	position: absolute;
	top: 40px;
	left: 0;
	font-size: 0.8em;
	color: #CCC;
}
.search_slider_maximum {
	position: absolute;
	top: 40px;
	right: 0;
	font-size: 0.7em;
	color: #CCC;
}

.search_button {
	margin: 0.5em 0 1em;
	text-align: center;
}
.search_button button {
	display: inline-block;
	margin: 0 1em;
	padding: 1em 2em;
	color: #FFF;
	font-size: 1.2em;
	font-weight: bold;
	border: none;
	border-radius: 5px;
	background: #C5314A;
	cursor: pointer;
}
#refinement_btn {background: #014D8B;}

.search_button button:hover {
	filter: brightness(1.2);
}

.search_select ul {
	display: inline;
	font-size: 0;
}
.search_select li {
	position: relative;
	display: inline-block;
	width: 600px;
	height: 50px;
	font-size: 14px;
	box-sizing: border-box;
	background: #333;
	cursor: pointer;
}

a#display_design:hover,
a#display_list:hover {
	background: #C5314A !important;
}

.search_select li a {
	display: table-cell;
	width: 600px;
	height: 50px;
	text-align: center;
	vertical-align: middle;
	font-size: 1.2em;
	font-weight: bold;
	color: #FFF;
}
.search_select li a:hover {
	filter: brightness(1.2);
}

.search_display {
	width: 1200px;
	height: 720px;
	border: 5px solid #999;
	box-sizing: border-box;
	overflow: auto;
	text-align: center;
	background: #FFF;
}
#display_design {background: #333;}
#display_list {background: #C5314A;}

.search_display_design {
	display: none;
	text-align: left;
	margin: 20px;
}
.search_display_design li {
	display: inline-block;
	margin: 2px 1px;
	width: 80px;
	height: 80px;
	overflow: hidden;
}
.search_display_design li a {
	display: block;
	width: 100%;
	height: 100%;
}
.search_display_design li img {
	width: 100%;
	height: 100%;
	transition: transform 0.1s linear;
}
.search_display_design li img:hover {
	transform: scale(1.1);
}


.search_display_list {
}
.search_display_list table {
	width: 880px;
	margin: 0 auto;
	line-height: 1.5em;
}
.search_display_list .sort {
	background: #999;
}
.search_display_list .sort_up, .search_display_list .sort_down {
	display: inline-block;
	margin: 0 3px;
	padding: 0 5px;
	font-size: 0.8em;
	background: #C5314A;
	border-radius: 5px;
	cursor: pointer;
}
.search_display_list table th {
	background: #555;
	padding: 5px 3px;
	color: #FFF;
	border: 1px dotted #CCC;
	vertical-align: middle;
	word-wrap:break-word;
}
.search_display_list table td {
	padding: 5px 3px;
	vertical-align: middle;
	border-bottom: 1px dotted #999;
	word-wrap:break-word;
}
.search_display_list table td:nth-child(2) {
	background: #EFEFEF;
}
.search_display_list table img {
	width: 60px;
	height: 60px;
}
.search_display_list img {
	transition: transform 0.1s linear;
}
.search_display_list img:hover {
	transform: scale(1.1);
}
.check {
	clear: both;
	padding-top: 30px;
}
.check p {
	display: block;
	margin-bottom: 10px;
	padding: 10px;
	width: 240px;
	color: #FFF;
	font-size: 1.2em;
	font-weight: bold;
	background: #014D8B;
}
.check li {
	position: relative;
	display: inline-block;
	width: 150px;
	height: 150px;
	margin-right: 10px;
	border: 1px solid #CCC;
	overflow: hidden;
}

.check img {
	width: 100%;
	height: 100%;
	transition: transform 0.1s linear;
}
.check img:hover {
	transform: scale(1.1);
}
.check_name {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 5px 0;
	text-align: center;
	color: #FFF;
	line-height: 1.2em;
}
.search_help {
	margin-top: 0.5em;
	font-size: 1.2em;
}


/* ---------------------------------------------------
  カラー
----------------------------------------------------*/

.color_box {background: #3B80BC;}
.color_gl {background: #6EB02E;}
.color_auto {background: #B28A00;}
.color_od {background: #5E5E5E;}

.b_01 {background: #00ac97;} /* 農業・水産資材 */
.b_02 {background: #005bac;} /* ボックスタイプ */
.b_03 {background: #f6ad3a;} /* メッシュタイプ */
.b_04 {background: #00a0d9;} /* オリタタミタイプ */
.b_05 {background: #333333;} /* 関連製品 */

/*
.t_01 {background: #;}
.t_02 {background: #;}
.t_03 {background: #;}
.t_04 {background: #5E5E5E;}
.t_05 {background: #;}
.t_06 {background: #;}
.t_07 {background: #;}
.t_08 {background: #;}
.t_09 {background: #;}
.t_10 {background: #;}
.t_11 {background: #;}
.t_12 {background: #;}
*/
.c_B {background: #0599d9;} /* ブルー */
.c_GY {background: #9fa0a0;} /* グレー */
.c_Y {background: #fdd23c;} /* イエロー */
.c_G {background: #009944;} /* グリーン */
.c_CB {background: #b9e3f9;} /* 透明ブルー */
.c_CP {background: #f7c8dc;} /* 透明ピンク */
.c_CG {background: #bedfc2;} /* 透明グリーン */
.c_OR {background: #f08336;} /* オレンジ */
.c_CR {background: #fff3c2; color: #333 !important;} /* クリーム */
.c_R {background: #e60012;} /* レッド */
.c_IV {background: #f7f4dd;} /* アイボリー */
.c_N {background: #dcdddd;} /* ナチュラル */
.c_BE {background: #f4e7d1;} /* ベージュ */
.c_BK {background: #231815;} /* ブラック */
.c_C {background: #ffffff; color: #369 !important;} /* 透明 */
.c_LG {background: #68be83;} /* ライトグリーン */
.c_WH {background: #fff; color: #333 !important;} /* ホワイト */
.c_CxB {background: #fff; color: #014D8B !important;} /* クリアブルー */
.c_GLG {background: #009944;} /* GLグリーン */
.c_OD {background: #231815;} /* ODカラー */
.c_U {background: #B3C770;} /* うぐいす */
.c_EG{background: #2a8063;} /* エコグリーン */
.c_EGY{background: #457982;} /* エコグレー */
.c_EB{background: #3a68a6;} /* エコブルー */

/* ---------------------------------------------------
  モーダルウインドウ
----------------------------------------------------*/

#modal-contents {
	z-index: 0;
}
.modal-open {
/*#modal-open {*/
	color: #cc0000;
}
/* モーダル コンテンツエリア */
/*#modal-main {*/
div[id^="modal-main"] {
	display: none;
	width: 700px;
	height: 450px;
	margin: 0;
	padding: 0;
	background: #FFF;
	color: #666666;
	position: fixed;
	z-index: 12;
	box-sizing: border-box;
	box-shadow: 0 0 20px #333;
}
.modal-left {
	position: relative;
	float: left;
	background: #FFF;
}

.modal-left h3 {
	display: inline-block;
	font-size: 2em;
	font-weight: bolder;
	color: #333;
	line-height: 1.2em;
	text-shadow: 0 0 2px #FFF;
}
.modal-left .name {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 400px;
	padding-left: 10px;
	border-left: 10px solid #005bac;
}
.modal-left .type {
	display: inline-block;
	width: 10px;
	height: 30px;
	margin-right: 10px
}

.modal-left .order {
	display: block;
	margin-top: 5px;
	width: 100px;
	padding: 5px 0;
	text-align: center;
	color: #FFF;
	box-shadow: 0 0 2px #FFF;
}
.o_01 {background: #E53E3E;}
/*.o_02 {background: #00CC99;}*/
.o_02 {background: #fdd23c;}
.o_03 {background: #ff6600;}


.modal-left .category {
	position: absolute;
	bottom: 20px;
	left: 50%;
	margin-left: -125px;
	display: block;
	width: 250px;
	padding: 10px 0;
	text-align: center;
	color: #FFF;
	line-height: 1.2em;
}
.modal-right {
	position: relative;
	float: right;
	width: 250px;
	height: 100%;
	background: #EFEFEF;
}
.modal-right::before {
	content: "×";
	position: absolute;
	top: -40px;
	right: 0;
	width: 40px;
	height: 40px;
	padding-top: 8px;
	box-sizing: border-box;
	text-align: center;
	color: #333;
	font-size: 2em;
	background: #EFEFEF;
}
.modal-right:hover::before {color: #C00;}
.modal-right::after {
	clear: both;
	content: "";
	display: block;
}
.modal-right dl {
	padding: 20px;
}
.modal-right dt {
	display: block;
	width: 100%;
	padding: 3px 10px;
	color: #333;
	border-left: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
}
.modal-right dd {
	display: block;
	margin-bottom: 10px;
	padding: 5px 10px;
	width: 100%;
	text-align: center;
	font-size: 1.2em;
	font-weight: bold;
	color: #333;
}

.color_type {
	display: inline-block;
	margin: 3px;
	width: 30px;
	height: 30px;
	text-align: center;
	vertical-align: middle;
	color: #FFF;
	line-height: 2em;
	font-weight: bold;
}

.modal-button a {
	position: absolute;
	bottom: 10px;
	right: 20px;
	display: table-cell;
	width: 210px;
	padding: 15px 0;
	text-align: center;
	vertical-align: middle;
	font-size: 1.2em;
	font-weight: bold;
	color: #FFF;
	border-radius: 5px;
	background: #C5314A;
}

/* モーダル 背景エリア */
/*#modal-bg {*/
.modal-bg {
	display: none;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}