@charset "utf-8";

#top{margin-top:10px;}

/********************************
	パネル
*********************************/
.panel_area{
	background: #ebebeb;
	width:1000px;
	padding: 50px;
	margin: 20px auto 0;
	border-radius:10px;
	overflow: auto;
}
.panel_area p{
	font-weight:bold;
	text-align:center;
	font-size:24px;
}

.panel_area table{
	width:100%;
	border-collapse:separate;
	border-spacing:0 30px;
}


.panel_area th{
	background: #E60016;
	color:#fff;
	text-align:center;
	font-weight:bold;
	font-size: 16px;
	border-radius: 30px;
	padding: 0px 20px;
	width: 120px;
}
.panel_area select{
	padding: 8px 20px;
	border: none;
	margin: 0px 10px;
	border-radius: 8px;
	font-size: 16px;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("/usedcar/images/select-circle.svg");
	background-repeat: no-repeat;
	background-size: 20px auto;
	background-position: right 12px center;
	color: #151515;
}

.filter-btn{
	color: #fff;
	text-decoration: none;
	width: 300px;
	display: block;
	text-align: center;
	padding: 12px 0;
	font-weight: bold;
	font-size: 18px;
	border-radius: 40px;
	margin-right: 30px;
	transition: opacity 0.3s ease-in-out;
	background-size: 100%;
	background: linear-gradient(90deg, #e60012 0%, #f08a00 100%);
}
.clear-btn{
	background: #8B8A87;
	color: #fff;
	text-decoration: none;
	width: 300px;
	display: block;
	text-align: center;
	padding: 12px 0;
	font-weight: bold;
	font-size: 18px;
	border-radius: 40px;
	transition: opacity 0.3s ease-in-out;
}

.filter-btn:hover{opacity: 0.7;}
.clear-btn:hover{opacity: 0.7;}

.btn_area{
	margin: 30px auto 0;
	display: flex;
	justify-content: center;
}
.panel_area hr{
	color:#cbcbcb;
	/* margin-top: 30px; */
}
.w326{width:326px;}
.w240{width:240px;}
.w141{width: 141px;}


/*****************************
	並び変え
*****************************/
.change_area{
	background: #f7f7f7;
	margin: 50px 0;
}
.change_inner{
	display: flex;
	width: 1200px;
	margin: auto;
	background: #ebebeb;
}
.change_inner h2{
	font-weight: normal;
	/* font-size: 14px; */
	margin: 0;
	width: 525px;
}
.change_inner h2 span{
	font-weight: bold;
	color: red;
	font-size: 30px;
	line-height: 50px;
	margin-left: 20px;
	font-family: "Roboto", sans-serif;
	position: relative;
	top: 2px;
}
.ci1{
	line-height: 57px;
	background: #E60016;
	color: #fff;
	width: 90px;
	text-align: center;
	font-weight: bold;
	font-size: 15px;
}
.ci2{
	line-height: 57px;
	font-size: 15px;
	margin: 0 0 0 30px;
}
.ci3{
	line-height: 57px;
	font-size: 15px;
	color: #E60016;
	text-decoration: none;
}
.gray{
	margin: 0 15px;
}
.joken_clear_btn{
	background: #fff;
	height: 32px;
	padding: 5px 20px 0px;
	font-size: 14px;
	border-radius: 31px;
	color: #E60016;
	border: 1px solid #E60016;
	margin: 14px 0 0 30px;
	text-decoration: none;
}

/*********************************
	page
*********************************/
.page_area{
	width: 1200px;
	margin: 60px auto 200px;
	/* overflow: auto; */
	display:flex;
	justify-content: right;
}

a.page{
	border:1px solid #a9a9a9;
	background-color:#f2f2f2;
	color:#868686;
	text-decoration:none;
	width:30px;
	height:30px;
	display: block;
	float: left;
	border-radius: 5px;
	text-align: center;
	line-height: 30px;
	margin-right: 7px;
	font-family: "Roboto", sans-serif;
	font-weight: bold;
}
.page_sel{
	margin-left:5px;
	width: 30px;
	height: 30px;
	display:block;
	text-align:center;
	background-color: #e60012!important;
	color: #fff!important;
	font-weight:bold;
	border-radius: 5px;
	font-size: 15px;
	line-height: 30px;
	border: 1px solid #e60012!important;
}

#page_TT span{
	background-color:#f79704;
	color:#fff;
}



/********************************
	SEARCH
**********************************/
.car-list{
	width:1200px;
	margin:auto;
	display: flex;
	flex-wrap: wrap;
	/* justify-content: space-between; */
}

.car-list li{
	width: 275px;
	margin:0 33px 24px 0;
	box-shadow: 0 1rem 2rem hsl(0 0% 0% / 10%);
}
.car-list li:nth-child(4n){
	margin:0 0px 24px 0;
}



.car-list li img{
	width:100%;
}
.car-list li p{
	font-size:16px;
}
.car-list li p span{
	font-weight:bold;
	line-height:30px;
}
.car-list li .sub{
	font-size: 14px;
	margin-bottom: 8px;
	margin-top: 4px;
}
.car-list li .sub span{
	background: #f2f2f2;
	font-weight: 500;
	padding: 3px 10px;
	display: inline-block;
	border-radius: 5px;
	margin-right: 10px;
}
.car-list-txt{
	padding: 0 10% 20px;
}

.sougaku{
	font-size: 13px;
	text-align:right;
	margin-top: 20px;
}
.price{
	color:red;
	font-weight:bold;
	font-size: 36px;
	font-family: "Roboto", sans-serif;
}
.toi{
	font-size:24px;
	font-family: "Noto Sans JP", sans-serif;
}


.detail-btn{
	padding:14px 0;
	background:#e60012;
	color:#fff;
	border:2px solid #e60012;
	border-radius:999px;
	font-size:16px;
	font-weight:800;
	letter-spacing:.05em;
	text-decoration:none;
	display:flex;
	justify-content:center;
	align-items:center;
	transition:background .2s,color .2s;
	margin: 20px 0 0;
}

.detail-btn-in{
	display:flex;
	align-items:center;
	gap:12px;
}

.detail-btn-ic{
	width:26px;
	height:26px;
	background:#fff;
	color:#e60012;
	border-radius:50%;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:16px;
	font-weight:800;
	transition:background .2s,color .2s;
}

.detail-btn:hover{
	background:#fff;
	color:#e60012;
}

.detail-btn:hover .detail-btn-ic{
	background:#e60012;
	color:#fff;
}

.gread_txt{
	font-weight:normal!important;
	overflow: hidden;        
  	text-overflow: ellipsis;  
  	white-space: nowrap;
	width:100%;
	display:block;
}


/**********************************
	状態別バナー
************************************/
.u1-1{
	margin: 50px auto 65px;
	text-align:center;
	width: 1200px;
}
.u1-2{
	margin: 0 auto 55px;
	text-align:center;
	width: 1000px;
}

.u1-3{
	width:1200px;
	margin:50px auto;
}

.u1-1 img{width:100%;}
.u1-2 img{width:100%;}
.u1-3 img{width:100%;}


/*******************************************
         スマホ
*********************************************/
@media (max-width : 768px) {

	.u1-1{margin:40px auto 30px; width:90%;}
	.u1-1 img{width: 100%;margin: auto;}
	.u1-2 img{width: 100%;margin: auto;}

	.u1-2{width:90%;}
	.u1-3{width:90%; margin:40px auto 30px;}
  

	.panel_area {width:100%;padding: 30px 0px 0;border-radius: 10px 10px 0 0;}
	.panel_area table{width: 100%;}
	.panel_area th{display:block;width: 90%;padding: 8px 0;margin: 0 0 6% 5%;}
	.panel_area td{display:block;width: 90%;margin: 0 0 0 5%;}
	.panel_area select {margin: 0 0 5% 0;}
	.w326{width:100%;}
	.w240{width:100%;}
	.w141{width: 46%;}
	.filter-btn {width:46%;font-size: 15px;margin-right:6%;}
	.clear-btn {width:46%;font-size: 15px;}
	.btn_area {width:90%;margin: 0px auto 40px;}
	.panel_area hr {display:none;}

	.change_inner {width:100%;display:block;position: relative;height: 280px;padding: 0;background: #fff;}
	.change_inner h2 {text-align:center; width:100%;}
	.ci1{width:100%;margin: 12px 0px 0;}
	.ci2{margin: 0 0 0 0;text-align:center;height: 40px;}
	.gray{}
	.joken_clear_btn {margin: auto;position: absolute;bottom: 8px;left: 0;right: 0;width: 150px;text-align: center;padding: 12px 5px;font-size: 16px;height: 50px;}

	.car-list {width:90%; margin:auto;}
	.car-list li {width: 48%; margin: 0 4% 24px 0; box-shadow: 0 0.5rem 1rem hsl(0 0% 0% / 15%);}
	.car-list li:nth-child(2n){margin:0 0px 24px 0;}
	.car-list-txt {padding: 14px 6% 0px;}
	.car-list li .sub {font-size: 11px;}
	.car-list li .sub span {padding: 3px 8px;margin-right: 4px;}
	.sougaku {font-size: 12px;width: 100%;display: block;text-align: center;font-weight: 500;}
	.price {font-size: 29px;}

	.page_area {width: 90%;margin: 40px auto 150px;overflow: auto;}
    .page_sel {margin-left:0;}
    a.page {margin-bottom:12px;}

	.detail-btn {font-size:14px;margin: 20px 0;padding: 10px 0;}
	.detail-btn-in {gap:4px;}
	.detail-btn-ic {width: 16px;height: 16px; font-size:14px;}

}