@charset "utf-8";

/*==============================================
 CSS INFO
 Description : top_search_layout css
===============================================*/

/* color
============================================== */
:root {
	--base-color:#334f93;
	--btn-color:#f16f9a;
	--btn-shadow:#f16f9a;
	--btn-hover:#fc2e5f;
	--btn-radius:10px;
	--plan-class-color:#e7462b;
	--search-parts-bg-blue:#DFFBFF;
	--search-parts-bg-green:#DFFFDF;
	--search-parts-bg-yellow:#FFFCDF;
	--search-parts-bg-orange:#FFEEDF;
	--search-parts-bg-base:#eee;
	--plan-border-width:6px;
}

/* layout
============================================== */
.search-box *{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.search-box dl,.search-box dd{
	margin: 0;
}
.search-box form{
	background-color: var(--base-color);
	border-radius: 5px;
	padding: 0 8px 10px;
	}
.search-box .search-box-ttl-head {
	border-radius: 5px 5px 0 0;
	padding: 10px 10px 10px 0;
	font-size: 1.8rem;
	color: #fff;
	font-weight: bold;
	background-color: var(--base-color);
	margin: 0;
	box-shadow: 0 1px 0 0 var(--base-color);
	padding-left: 10px;
	font-size: 18px;
}
.search-box .inner {
	background-color: #fff;
	border-radius: 5px;
	padding: 10px 10px 15px;
	overflow: hidden;
}
.search-box-wrap {
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	/*width: 80%;*/
	margin: 0 auto 0;
}
.search-box .box-dep, .search-box .box-arv,
.search-box .box-dep-shop, .search-box .box-cartype,
.search-box .box-gear,.search-box .box-steering,.search-box .box-num{
	width: 100%;
	padding: 6px;
}
.search-box .box-dep dl{
	background-color: var(--search-parts-bg-blue);
}
.search-box .box-arv dl{
	background-color: var(--search-parts-bg-green);
}
.search-box .box-dep-shop dl{
	background-color: var(--search-parts-bg-yellow);
}
.search-box .box-cartype dl{
	background-color: var(--search-parts-bg-orange);
}
.search-box dl{
	padding: 10px;
	border-radius: 5px;
}
.search-box .ttl {
	font-weight: bold;
	margin-bottom: 5px;
	font-size: 14px;
}
.search-box .form-control {
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px;
	font-size: 14px;
	line-height: 1.42857;
	color: #232323;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
	-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
	transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;

}
.search-box .form-control[readonly] {
	background-color: #fff !important;
	cursor: default !important;
}

.search-box .box-dep input, .search-box .box-arv input {
	width: 140px;
}
.cal-dep, .cal-arv {
cursor: pointer;
padding-left: 30px !important;
padding-right: 0 !important;
display: inline-block;
background: url(../img/icon-calendar.png) no-repeat scroll 6px 5px #fff!important;
}
.search-box .box-dep select, .search-box .box-arv select {
	width: auto;
}
.search-box .box-dep select, .search-box .box-arv select, .search-box .box-cartype select {
	-webkit-appearance: auto;
	-moz-appearance: auto;
	appearance: auto;
}
.search-box .box-dep input, .search-box .box-arv input,
.search-box .box-dep select, .search-box .box-arv select {
	display: inline-block;
}
.search-box .btn-more-wp{
	text-align: center;
	margin-top: 15px;
}
.search-box .btn-primary{
background-color:var(--btn-color);
border: 1px solid var(--btn-color);
}
.search-box .btn-primary{
	color:#fff;
	background-color: var(--btn-color);
	border: 1px solid var(--btn-color);
	font-weight: bold;
	transition: 0.4s;
	padding: 15px 0;
	line-height: 1.33333;
	border-radius: var(--btn-radius);
	width: 100%;
	font-size: 15px;
	cursor: pointer;
}
.search-box .btn-primary:hover{
	color: #fff;
	background-color: var(--btn-hover);
	border: 1px solid var(--btn-hover);
}
.search-box .btn-primary:active,
.search-box .btn-primary:focus,
.search-box .btn-primary:active:focus{
	color: #fff;
	background-color: var(--btn-hover);
	border: 1px solid var(--btn-hover);
	outline: none;
}

@media(min-width: 576px){
	.search-box .btn-primary{
		font-size: 21px;
		width: 80%;
	}
}
@media(min-width: 768px){
	.search-box .box-dep,
	.search-box .box-arv{
		width: 50%;
	}
	.search-box .box-shop,
	.search-box .box-cartype {
		width: 100%;
	}
}
@media(min-width: 992px){
	.re.search-box .box-dep,
	.re.search-box .box-arv,
	.re.search-box .box-shop,
	.re.search-box .box-cartype {
		width: 33.333333%;
	}
}