@charset "UTF-8";

/* ▼ 検索エリア
----------------------------------------*/

.more{
	width: 100%;
	margin: 0;
}
.more a{
	padding-right: 20px;
}
.more.arrow{
	max-width: calc(6.5em + 20px)!important;
	height: 46px;
	border: transparent;
	border-radius: 0;
	background: transparent;
	position: relative;
}
.more.arrow a{
	color: #0064B6;
	text-align: left!important;
}
.more.search_btn{
	max-width: 420px;
	height: 60px;
	margin: 0 auto;
  border: none;
  border-radius: 30px;
  background: #E88740;
}
.more.search_btn::before {
	right: 25px;
	border-top: 1px solid #FFFFFF;
}
.more.search_btn::after {
	right: 24px;
	border-bottom: 1px solid #FFFFFF;
}
.more.search_btn a{
	color: #FFFFFF;
	font-size: 20px;
	line-height: 60px;
}
.more.search_btn a::before{
	content: "";
	display: inline-block;
	width: 28px;
	height: 28px;
	background: url(../img/icon_search_btn.png) no-repeat center center/contain;
	margin-right: 19px;
	vertical-align: middle;
}

#tub{
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: center;
	-ms-align-items: stretch;
	align-items: stretch;
	width: 963px;
	max-width: 100%;
	margin: 0 auto;
}
#tub li{
	-webkit-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	max-width: 240px;
	background: #404040;
	display: block;
	padding: 15px 0;
	color: #FFFFFF;
	text-align: center;
	cursor: pointer;
}
#tub li:not(:last-child){
	margin-right: 1px;
}
#tub li:nth-child(1).active{background: #0064B6;}
#tub li:nth-child(2).active{background: #6C4D96;}
#tub li:nth-child(3).active{background: #229083;}
#tub li:nth-child(4).active{background: #006093;}

.search_main{
	padding: 30px 0;
}
.search_main.show{
	display: block;
}
.search_main:not(.show){
	display: none;
}
.search_main.search_product{background: #0064B6;}
.search_main.search_company{background: #6C4D96;}
.search_main.search_category{background: #229083;}
.search_main.search_trend{background: #006093;}
.search_main .search_wrap{
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: center;
	-ms-align-items: center;
	align-items: center;
	max-width: 450px;
	height: 60px;
	background: #FFFFFF;
	border-radius: 30px;
	padding: 5px;
	margin-bottom: 10px;
	text-align: left;
}
.search_main .search_wrap .input_wrap{
	display: inline-block;
	width: calc(100% - 55px);
	padding: 0 5px 0 10px;
}
.search_main .search_wrap .input_wrap input{
	width: 100%;
	height: 100%;
	border: none;
	font-size: 16px;
}
.search_main .search_wrap button{
	width: 50px;
	height: 50px;
	border: none;
	border-radius: 50%;
	background: url(../img/icon_search_btn.png) no-repeat center center/28px,#454545;
	cursor: pointer;
}
.search_main .search_wrap .input_wrap input:focus,.search_main .search_wrap button:focus{
	outline-offset: 0;
	outline:none;
}
.search_main p{
	margin-bottom: 10px;
	color: #FFFFFF;
	font-size: 18px;
}
.search_main .back a{
	color: #FFFFFF;
	font-size: 14px;
	float: right;
}
.initial_list{
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: flex-start;
	-ms-align-items: stretch;
	align-items: stretch;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.initial_list li{
	-webkit-flex: 0 0 50px;
	-ms-flex: 0 0 50px;
	flex: 0 0 50px;
	width: 50px;
	max-width: 50px;
	height: 50px;
	margin-bottom: 10px;
}
.initial_list li:not(:last-child){margin-right: 12px;
}
.initial_list li a{
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: center;
	-ms-align-items: center;
	align-items: center;
	height: 100%;
	background: #FFFFFF;
	color: #0064B6;
}
.initial_jp li a{
	border-radius: 50%;
}
.initial_jp li a > span{
	font-size: 22px;
}
.initial_jp li a > span span{
	font-size: 16px;
}
.initial_en li a{
	border-radius: 20px;
	font-size: 22px;
}
/* カテゴリ検索 */
.search_main.search_category{
	padding: 30px 0;
}
.search_main .category_list{
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: space-between;
	-ms-align-items: flex-start;
	align-items: flex-start;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.search_main .category_list li{
	min-width: 310px;
	margin-bottom: 20px;
}
.search_main .category_list li:not(:last-child){
	margin-right: 20px;
}
.search_main .category_list p{
	font-size: 18px;
	margin-bottom: 5px;
}
.select_wrap{
	height: 60px;
	background: #FFFFFF;
	border-radius: 30px;
	padding: 10px 20px 10px 35px;
	position: relative;
}
.select_wrap::after{
	content: '';
	width: 0;
	height: 0;
	border-width: 10px 6px 0 6px;
	border-style: solid;
	border-color: #0064B6 transparent transparent transparent;
	position: absolute;
	top: calc(50% - 5px);
	right: 28px;
	pointer-events: none;
	z-index: 1;
}
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	height: 40px;
	background: transparent;
	border: none;
	font-size: 16px;
	position: relative;
}
select::-ms-expand {
	display: none;
}
select:focus{
	outline-offset: 0;
	outline:none;
}

/* トレンド検索 */
.search_main .tag_list{
	text-align: left;
}
.search_main .tag_list li{
	display: inline-block;
	line-height: 38px;
}
.search_main .tag_list li a{
	display: block;
	background: #FFFFFF;
	border-radius: 19px;
	padding: 0 20px;
	color: #000;
	font-size: 18px;
	margin-bottom: 20px;
}
.search_main .tag_list li:not(:last-child){
	margin-right: 20px;
}

/* 検索結果 */
.result_area{
	background: #F2F4F8;
	padding: 20px 0 60px;
}
.result_area .keyword_area{
	margin-bottom: 20px;
}
.back{
	font-size: 14px;
	text-align: right;
}
.back a{
	margin-right: 20px;
	color: #0064B6;
	font-weight: bold;
	position: relative;
}
.back a::before {
	content: "";
	display: block;
	position: absolute;
	top: 6px;
	bottom: -1px;
	right: -19px;
	margin: auto;
	width: 11px;
	height: 10px;
	border-top: 1px solid #0064B6;
	-webkit-transform: rotate(37deg);
	transform: rotate(37deg);
}
.back a::after{
	content: "";
	display: block;
	position: absolute;
	bottom: calc(50% - 3px);
	right: -20px;
	margin: auto;
	width: 8%;
	width: 15px;
	height: 10px;
	border-bottom: 1px solid #0064B6;
}
.search_main .back a::before {
	border-top: 1px solid #FFFFFF;
}
.search_main .back a::after{
	border-bottom: 1px solid #FFFFFF;
}
.result_area .keyword_area .keyword_wrap{
	color: #000;
	font-size: 24px;
}
.result_area .keyword_area .keyword_wrap .keyword{
	color: #0064B6;
	font-size: 24px;
}
.result_area .keyword_area .quantity_wrap{
	color: #000;
	font-size: 18px;
}
.result_area .keyword_area .quantity_wrap .result_quantity{
	color: #0064B6;
	font-size: 25px;
}
/* 検索結果ーもしかして */
.result_area .keyword_area .maybe_wrap{
	margin-bottom: 60px;
	color: #BF0000;
	font-size: 16px;
}
.result_area .keyword_area .maybe_wrap span{
	font-size: 24px;
}
.result_area .keyword_area .maybe_wrap span a{
	color: #BF0000;
}

/* 検索結果ー商品リスト */
.result_area .result_list{
	margin-bottom: 40px;
}
.result_area .result_list > li{
	background: #FFFFFF;
	border: #CCCCCC 1px solid;
	padding: 20px 30px;
	margin-bottom: 20px;
}
.result_area .result_list .product_flex{
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: space-between;
	-ms-align-items: center;
	align-items: center;
	padding-bottom: 15px;
}
.result_area .result_list .product_flex .img_wrap{
	-webkit-flex: 240px;
	-ms-flex: 240px;
	flex: 240px;
	width: 240px;
	max-width: 240px;
	height: 183px;
}
.result_area .result_list .product_flex .txt_wrap{
	-webkit-flex: 680px;
	-ms-flex: 680px;
	flex: 680px;
	width: 680px;
	max-width: calc(100% - 260px);
}
.name_wrap{
	border-bottom: #CCCCCC 1px dashed;
}
.name_wrap .product_name{
	font-size: 24px;
	margin-bottom: 7px;
}
.name_wrap .product_name span{
	display: block;
	font-size: 14px;
}
.result_area.result_company .name_wrap .product_name{
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: flex-start;
	-ms-align-items: flex-end;
	align-items: flex-end;
	align-content: flex-end;
	font-size: 14px;
}
.product_type{
	display: inline-block;
	border: #CCCCCC 1px solid;
	padding: 5px 10px;
	margin-bottom: 7px;
	font-size: 12px;
}
.result_area .result_list .txt_wrap .product_doc{
	padding-top: 7px;
	font-size: 14px;
}
.result_area.result_company .result_list .txt_wrap .product_doc{display: none;}
.more_list{
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: flex-end;
	-ms-align-items: stretch;
	align-items: stretch;
	padding-top: 20px;
}
.result_company .more_list{
	padding-top: 10px;
}
.more_list li{
	-webkit-flex: 0 0 180px;
	-ms-flex: 0 0 180px;
	flex: 0 0 180px;
	width: 180px;
	max-width: 180px;
}
.more_list li:not(:last-child){
	margin-right: 20px;
}
.tag_list{
	border-top: #CCCCCC 1px dashed;
	padding-top: 20px;
	text-align: right;
}
.tag_list li{
	display: inline-block;
	line-height: 28px;
}
.tag_list li a{
	display: block;
	background: #F0F3F5;
	border: #CDD6DD 1px solid;
	border-radius: 15px;
	padding: 0 20px;
	color: #000;
	font-size: 14px;
}
.tag_list li:not(:last-child){
	margin-right: 20px;
}
/* 検索結果ーメーカー検索結果 */
.result_area.result_company .result_list{
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: flex-start;
	-ms-align-items: stretch;
	align-items: stretch;
	align-content: flex-start;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.result_area.result_company .result_list > li{
	-webkit-flex: 0 0 24.1%;
	-ms-flex: 0 0 24.1%;
	flex: 0 0 24.1%;
	width: 24.1%;
	max-width: 24.1%;
	padding: 10px;
}
.result_area.result_company .result_list > li:not(:nth-child(4n)){
	margin-right: 1.2%;
}

.result_area.result_company .result_list .img_wrap{
	height: 10vw;
	max-height: 100px;
}
.result_area.result_company .result_list > li .txt_wrap .more_list{
	display: block;
	text-align: right;
}
.result_area.result_company .result_list .txt_wrap .more_list li{
	width: 100%;
	max-width: 100%;
}
.result_area.result_company .result_list .txt_wrap .more_list li:not(:last-child){
	margin-bottom: 10px;
}
/* 検索結果ー商品なし */
.result_area .no_product{
	margin-bottom: 20px;
	font-size: 20px;
	text-align: center;
}
/* 検索結果ーお問い合わせボタン */
.result_area .contact_wrap{
	width: 280px;
	margin: 0 auto;
}

/* メーカー一覧 */
.result_area .company_wrap{
	margin-bottom: 25px;
}
.result_area .company_wrap h3{
	font-size: 24px;
	margin-bottom: 15px;
}
.result_area .company_wrap dl{
	background: #FFFFFF;
	padding: 15px 20px;
}
.result_area .company_wrap dt{
	padding-bottom: 10px;
	margin-bottom: 15px;
	border-bottom: #0064B6 2px solid;
	color: #0064B6;
	font-size: 18px;
}
.result_area .company_wrap dd{
	margin-bottom: 40px;
}
.result_area .company_wrap dd ul{
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-ms-align-items: stretch;
	align-items: stretch;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.result_area .company_wrap dd ul li{
	-webkit-flex: 0 0 23.2%;
	-ms-flex: 0 0 23.2%;
	flex: 0 0 23.2%;
	font-size: 13px;
	margin-bottom: 10px;
}
.result_area .company_wrap dd ul li:not(:nth-child(4n)){
	margin-right: 2.4%;
}

/* 商品詳細 */
#search_detail{
	background: #F2F4F8;
}
.detail_area{
	padding-bottom: 40px;
}
.detail_wrap{
	background: #FFFFFF;
	padding: 20px 30px 30px 20px;
}
.detail_wrap .product_type{
	font-size: 12px;
	margin: 10px 0 20px;
}
.detail_wrap .detail_flex{
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: space-between;
	-ms-align-items: flex-start;
	align-items: flex-start;
}
.detail_wrap .img_wrap{
	-webkit-flex: 0 0 420px;
	-ms-flex: 0 0 420px;
	flex: 0 0 420px;
	width: 420px;
	max-width: 420px;
}
.detail_wrap .txt_wrap{
	-webkit-flex: 0 0 500px;
	-ms-flex: 0 0 500px;
	flex: 0 0 500px;
	width: 500px;
	max-width: calc(100% - 450px);
}
.detail_wrap .img_wrap #pro_main{
	margin-bottom: 15px;
}
.detail_wrap .img_wrap #pro_main li{
	display: none;
}
.detail_wrap .img_wrap #pro_main li.show{
	display: block;
	height: 320px;
	border: #CCCCCC 1px solid;
}
.detail_wrap .img_wrap #pro_thumb{
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: flex-start;
	-ms-align-items: stretch;
	align-items: stretch;
	align-content: flex-start;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.detail_wrap .img_wrap #pro_thumb li{
	-webkit-flex: 0 0 32%;
	-ms-flex: 0 0 32%;
	flex: 0 0 32%;
	width: 32%;
	max-width: 32%;
	margin: 0 2% 15px 0;
	height: 102.4px;
	border: #CCCCCC 1px solid;
}
.detail_wrap .img_wrap #pro_thumb li:nth-child(3n){
	margin-right: 0;
}
.detail_wrap .more_list{
	justify-content: flex-end;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-bottom: 25px;
}
.detail_wrap .more_list li{
	-webkit-flex: 0 0 160px;
	-ms-flex: 0 0 160px;
	flex: 0 0 160px;
	width: 160px;
	max-width: 160px;
	margin-bottom: 10px;
}
.detail_wrap .more_list li:not(:last-child){
	margin-right: 7px;
}
.detail_wrap .more_list .more.video a::before{
	content: url(../img/product/icon_video.svg);
	margin-right: 3%;
	vertical-align: middle;
}
.detail_wrap .more_list .more.pdf a::before{
	content: url(../img/product/icon_pdf.svg);
	margin-right: 3%;
	vertical-align: middle;
}
.detail_wrap .more_list .more.contact a{
	padding-right: 20px;
}
.detail_wrap .tag_list{
	border-top: none;
	padding-top: 0;
	margin-bottom: 40px;
	text-align: right;
}
.detail_wrap .tag_list li{
	margin: 0 10px 10px 0;
}
/* ▼▼▼ 480px〜768px
======================================================*/
@media screen and (max-width: 768px) {

/* ▼ 検索エリア
----------------------------------------*/

	#tub li{
		font-size: 14px;
	}
	.initial_list li{
		-webkit-flex: 0 0 50px;
		-ms-flex: 0 0 50px;
		flex: 0 0 50px;
		width: 50px;
		max-width: 50px;
		height: 50px;
		margin-bottom: 15px;
	}
	.initial_list li:not(:last-child){
		margin-right: 8px;
	}
	.search_main .back{
		display: block;
	}
	.search_main .back a{
		float: none;
	}
	.search_main .category_list{
		display: block;
		margin-bottom: 30px;
	}
	.search_main .category_list li{
		min-width: 100%;
		margin-bottom: 20px;
	}
	.search_main .category_list li:not(:last-child){
		margin-right:0;
	}

	/* トレンド検索 */
	.search_main .tag_list li a{
		padding: 0 10px;
		margin-bottom: 10px;
	}
	.search_main .tag_list li:not(:last-child){
		margin-right: 10px;
	}

	/* 検索結果 */
	.result_area .keyword_area .keyword_wrap{
		color: #000;
		font-size: 16px;
	}
	.result_area .keyword_area .keyword_wrap .keyword{
		color: #0064B6;
		font-size: 20px;
	}
	.result_area .keyword_area .quantity_wrap{
		color: #000;
		font-size: 14px;
	}
	.result_area .keyword_area .quantity_wrap .result_quantity{
		color: #0064B6;
		font-size: 20px;
	}

	.result_area .result_list > li{
		padding: 20px 15px;
	}
	.result_area .result_list .product_flex{
		display: block;
	}
	.result_area .result_list .product_flex .img_wrap,
	.result_area .result_list .product_flex .txt_wrap{
		width: 100%;
		max-width: 100%;
	}
	.result_area .result_list .product_flex .img_wrap{
		height: calc(75vw	- 42px);
	}
	.result_area.result_company .result_list .img_wrap{
		height: calc(75vw	- 42px);
		max-height: calc(75vw	- 42px);
	}
	.result_area .result_list .txt_wrap .more_list{
		display: block;
	}
	.result_area .result_list .txt_wrap .more_list li{
		width: 100%;
		max-width: 100%;
	}
	.result_area .result_list .txt_wrap .more_list li:not(:last-child){
		margin-bottom: 10px;
	}
	.result_area .result_list .tag_list{
		padding-top: 10px;
		text-align: left;
	}
	.result_area .result_list .tag_list li{
		padding-top: 10px;
		margin: 0 5px;
	}
	.result_area .result_list .tag_list li:not(:last-child){
		margin-right: 5px;
	}

	.tag_list li a{
		padding: 0 10px;
	}
	.tag_list li:not(:last-child){
		margin-right: 10px;
	}
	.name_wrap .product_name{
		font-size: 16px;
	}
	.name_wrap .product_name span{
		font-size: 12px;
	}
	.product_type{
		font-size: 12px;
	}

	/* 検索結果ーメーカー検索結果 */
	.result_area.result_company .result_list{
		display: block;
	}
	.result_area.result_company .result_list > li{
		width: 100%;
		max-width: 100%;
	}
	/* 検索結果ー商品なし */
	.result_area .no_product{
		font-size: 16px;
	}

	/* メーカー一覧 */
	.result_area .company_wrap dd ul{
		display: block;
	}
	.result_area .company_wrap dd ul li{
		margin-bottom: 5px;
	}
	.result_area .company_wrap dd ul li:not(:nth-child(4n)){
		margin-right: 0;
	}
	/* 商品詳細 */
	.detail_wrap{
		padding: 20px 10px 30px 10px;
	}
	.detail_wrap .product_type{
		margin: 10px 0;
	}
	.detail_wrap .detail_flex{
		display: block;
	}
	.detail_wrap .img_wrap,.detail_wrap .txt_wrap,.detail_wrap .more_list li{
		width: 100%;
		max-width: 100%;
	}
	.detail_wrap .img_wrap #pro_main li.show{
		height: calc(75vw	- 33px);
	}
	.detail_wrap .img_wrap #pro_thumb li{
		height: calc(24vw	- 10px);
	}
	.detail_wrap .more_list{
		display: block;
	}
	.detail_wrap .more_list li:not(:last-child){
		margin-right: 0;
	}
}