@charset "utf-8";

/* -----------------------------
	used-car-sales-area
-------------------------------- */
.used-car-sales-area {
	position: relative;
	background: var(--bk04);
}

.used-car-sales-area .bg-area-wrap {
	position: relative;
	background: var(--bk04);
}
.used-car-sales-area .bg-area-wrap .en {
	position: absolute;
	left: calc((100% - 1200px) / 2);
	bottom: -30px;
	color: #fff;
	font-style: italic;
	font-size: 11rem;
	font-weight: 600;
	line-height: 0.9;
	z-index: 2;
}
.used-car-sales-area .bg-area {
	position: relative;
	/* width: 100%; */
	width: 100vw;
	margin-left: calc(50% - 45vw);
	height: 550px;
	background: var(--bk04) url(../img/used-car-sales_used-car-sales-area_mv.jpg) no-repeat bottom center;
	background-size: cover;
	/* clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%); */
	clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%);
	z-index: 1;
}

.used-car-sales-area::after {
	position: absolute;
	top: -109px;
	content: "";
	width: 70%;
	height: 110px;
	background: var(--bk04);
	clip-path: polygon(0 0, 100% 0%, 98% 100%, 0% 100%);
}

#case.used-car-sales_top .used-car-sales-area .section-page-ttl {
	padding: 40px 0;
}

/* 検索エリア */
#case.used-car-sales_top .used-car-sales-area .search-cont {
	margin: 64px 0 0;
	padding: 40px;
	background: var(--bk03);
}
#case.used-car-sales_top .used-car-sales-area .side-cont .side-cont-block+.side-cont-block {
	margin: 40px 0 0;
}
#case.used-car-sales_top .side-cont .maker-cate-list li {
	width: unset;
}
#case.used-car-sales_top .side-cont .maker-cate-list li a .img {
	width: 86px;
}
#case.used-car-sales_top .side-cont .maker-cate-list {
	gap: 17px;
}


/* 記事エリア */
#case.used-car-sales_top .case-list .case-list_item {
	width: calc((100% / 3) - 27px);
}
.used-car-sales-area .case-list .case-list_item {
	padding: 16px;
}
.used-car-sales-area .case-list .case-list_item .img-wrap img {
	height: 230px;
}

#case.used-car-sales_top .side-cont {
	width: 100%;
}

@media screen and (max-width: 768px) {

	.used-car-sales-area .bg-area-wrap .en {
		left: 15px;
		bottom: -15px;
		font-size: 4.6rem;
	}
	.used-car-sales-area .bg-area {
		width: 100%;
		height: 250px;
		background: var(--bk04) url(../img/used-car-sales_used-car-sales-area_mv.jpg) no-repeat bottom center;
		background-size: cover;
	}

	.used-car-sales-area::after {
		top: -40px;
		height: 40px;
		clip-path: polygon(0 0, 100% 0%, 97% 100%, 0% 100%);
	}

	#case.used-car-sales_top .side-cont {
		width: 100%;
	}

	#case.used-car-sales_top .used-car-sales-area .section-page-ttl {
		padding: 50px 0 0;
	}

	/* 検索エリア */
	#case.used-car-sales_top .used-car-sales-area .search-cont {
		margin: 32px 0 0;
		padding: 20px;
	}
	#case.used-car-sales_top .used-car-sales-area .side-cont .side-cont-block+.side-cont-block {
		margin: 32px 0 0;
	}
	#case.used-car-sales_top .side-cont .maker-cate-list li {
		width: calc((100% / 3) - 14px);
	}
	#case.used-car-sales_top .side-cont .maker-cate-list li a .img {
		width: 100%;
	}
	#case.used-car-sales_top .side-cont .maker-cate-list {
		gap: 20px;
	}

	/* 記事エリア */
	#case.used-car-sales_top .case-list .case-list_item {
		width: 270px;
		flex-shrink: 0;
	}
	.used-car-sales-area .case-list .case-list_item .img-wrap img {
		height: 200px;
	}

}

/* -----------------------------
	store-area
-------------------------------- */
.store-area {
	position: relative;
	padding: 790px 0 220px;
	background: #111;
}
.store-area::before {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	width: 50%;
	height: 100%;
	background: url(../img/cmn_bg-tile.png);
}

.store-area .inner {
	position: relative;
	z-index: 1;
}

.store-area .slider_bg {
	position: absolute;
	top: 110px;
	background: url(../img/store-area_slider.png) repeat-x;
	background-size: auto;
	width: 100%;
	height: 564px;
	overflow: hidden;
	-moz-animation: mv-loop 100s linear infinite;
	animation: mv-loop 100s linear infinite;
	z-index: 0;
}

@keyframes mv-loop {

	0% {
		background-position: 0 0;
	}

	100% {
		background-position: -3392px 0;
	}
}

.store-area .store-cont {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: 100px;
	margin: 40px 0 0;
	padding: 64px 40px 40px;
	border: solid 1px #fff;
}
.store-area .store-cont .ttl-deco {
	position: absolute;
	top: -1px;
	left: 0;
	font-size: 1.6rem;
	font-weight: 500;
	clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%);
}
.store-area .store-cont .ttl-deco.type01 {
	padding: 12px 50px 12px 12px;
	color: #fff;
	background: var(--dark-yellow);
}
.store-area .store-cont .ttl-deco.type02 {
	padding: 12px 50px 12px 12px;
	color: var(--bk03);
	background: #fff;
}

.store-area .store-cont iframe {
	width: 400px;
	flex-shrink: 0;
}

.store-area .store-cont-detail-wrap {
	color: #fff;
}
.store-area .store-cont-detail-wrap .store-cont-detail {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 32px 0 0;
}
.store-area .store-cont-detail-wrap .store-cont-detail .img-wrap .img img {
	width: 220px;
	height: 136px;
	object-fit: cover;
}
.store-area .store-cont-detail-wrap .store-cont-detail .txt-wrap .ttl {
	margin: 0 0 8px;
	font-size: 2rem;
	font-weight: 600;
}

/* メイン */
.store-area .store-cont.store-cont_main {
	border: solid 1px var(--dark-yellow);
}

@media screen and (max-width: 768px) {

	.store-area {
		padding: 260px 0 80px;
	}
	.store-area::before {
		background-size: 20%;
	}
	
	.store-area .slider_bg {
		top: 40px;
		background-size: 320%;
		width: 100%;
		height: 200px;
	}
	
	.store-area .store-cont {
		flex-direction: column;
		gap: unset;
		margin: 40px 0 0;
		padding: 64px 20px 20px;
	}
	.store-area .store-cont .ttl-deco {
		font-size: 1.4rem;
	}

	.store-area .store-cont iframe {
		margin: 24px 0 0;
		width: 100%;
		height: 300px;
	}
	
	.store-area .store-cont-detail-wrap .store-cont-detail {
		flex-direction: column;
		align-items: unset;
		gap: 20px;
		margin: 20px 0 0;
	}
	.store-area .store-cont-detail-wrap .store-cont-detail .img-wrap .img img {
		width: 100%;
		height: 200px;
		object-fit: cover;
	}
	.store-area .store-cont-detail-wrap .store-cont-detail .txt-wrap .ttl {
		font-size: 1.6rem;
	}
	.store-area .store-cont-detail-wrap .store-cont-detail .txt {
		font-size: 1.6rem;
	}

}

/* -----------------------------
	flow-area
-------------------------------- */
#case .contact-required-info_detail + .contact-required-info_detail {
	margin: 32px 0 0;
}
#case .contact-required-info_ttl_type02 {
	margin: 16px 0 4px;
	padding: 0 0 0 8px;
	border-left: solid 1px var(--dark-yellow);
	font-size: 1.6rem;
	font-weight: 600;
}
#case .flow-area .contact-required-info .contact-required-info-list {
	margin: unset;
}