@charset "utf-8";

#lineup {
	--pink: #e2007d;
}

.lineup-heading {
	text-align: center;
	margin-top: 60px;
}

.lineup-heading .title {
	margin-bottom: 20px;
	font-size: 30px;
	line-height: 40px;
}

.lineup-form {
	padding: 0;
}

.lineup-form-header {
	background: #f5f5f5;
	border-radius: 6px 6px 0 0;
	margin:0 0 2px 0;
	padding: 16px;
}

.lineup-form-body {
	background: #f5f5f5;
	border-radius: 0 0 6px 6px;
	padding: 30px;
}

.lineup-form .lineup-form-header h2 {
	font-size: 21px;
	text-align: center;
}

.lineup-form #btn-reset {
	display: block;
	width: 200px;
	margin:0 auto;
}

.lineup-result {
	margin-bottom: 20px;
}

#result-message {
	margin:40px 0 0 0;
	font-size: 18px;
	text-align: center;
}

#result-count {
	font-size: 30px;
	color: var(--pink);
	font-weight: bold;
}

#result-message .message-empty {
	color: #666;
}

.search-box {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: solid 1px #ddd;
}

.search-box h3 {
	width: 20%;
	margin-right: 2%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.search-box h3 i {
	color: #ccc;
}

.search-list {
	width: 78%;
	display: flex;
	flex-wrap: wrap;
}

.search-list li {
	width: calc(94% / 7);
	margin-right: 1%;
}

.search-make .search-list li {
	margin-bottom: 1%;
}

.search-list li:last-child {
	margin-right: 0;
}

.search-list li input {
	display: none;
}

.search-list li label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: solid 1px #ddd;
	transition: all .1s linear 0s;
	border-radius: 5px;
	position: relative;
	padding: 10px 5px;
	height: 100%;
}

.search-list li label:hover {
	transform: scale(1.03);
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .2);
}

.search-list li label.label-checked {
	background-color: var(--pink);
	color: #fff;
}

.search-list li label.label-disabled {
	background-color: #eee;
	color: #999;
}

.search-list li .num {
	position: absolute;
	top: -5px;
	right: -5px;
	display: inline-block;
	background: #999;
	color: #fff;
	border-radius: 30px;
	padding: 2px 5px;
	font-size: 12px;
}

.search-list li label .icon {
	display: block;
	background: no-repeat center;
	background-size: contain;
	width: 100%;
	padding-top: 20%;
}

.search-type .search-list li label .icon {
	padding-top: 30%;
	max-width: 60px;
}

.search-list li label .name {
	font-size: 12px;
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 3px;
	line-height: 1;
}

.search-make .li-toyota label .icon {
	background-image: url(/src/img/ranking/lineup-title-toyota.png);
}

.search-make .li-mazda label .icon {
	background-image: url(/src/img/ranking/lineup-title-mazda.png);
}

.search-make .li-honda label .icon {
	background-image: url(/src/img/ranking/lineup-title-honda.png);
}

.search-make .li-nissan label .icon {
	background-image: url(/src/img/ranking/lineup-title-nissan.png);
}

.search-make .li-suzuki label .icon {
	background-image: url(/src/img/ranking/lineup-title-suzuki.png);
}

.search-make .li-mitsubishi label .icon {
	background-image: url(/src/img/ranking/lineup-title-mitsubishi.png);
}

.search-make .li-subaru label .icon {
	background-image: url(/src/img/ranking/lineup-title-subaru.png);
}

.search-make .li-daihatsu label .icon {
	background-image: url(/src/img/ranking/lineup-title-daihatsu.png);
}

.search-make .li-toyota .label-checked .icon {
	background-image: url(/src/img/ranking/lineup-title-toyota2.png);
}

.search-make .li-mazda .label-checked .icon {
	background-image: url(/src/img/ranking/lineup-title-mazda2.png);
}

.search-make .li-honda .label-checked .icon {
	background-image: url(/src/img/ranking/lineup-title-honda2.png);
}

.search-make .li-nissan .label-checked .icon {
	background-image: url(/src/img/ranking/lineup-title-nissan2.png);
}

.search-make .li-suzuki .label-checked .icon {
	background-image: url(/src/img/ranking/lineup-title-suzuki2.png);
}

.search-make .li-daihatsu .label-checked .icon {
	background-image: url(/src/img/ranking/lineup-title-daihatsu2.png);
}

.search-make .li-mitsubishi .label-checked .icon {
	background-image: url(/src/img/ranking/lineup-title-mitsubishi2.png);
}

.search-make .li-subaru .label-checked .icon {
	background-image: url(/src/img/ranking/lineup-title-subaru2.png);
}



.search-type .li-minivan label .icon {
	background-image: url(/src/img/ranking/icon-minivan.png);
}

.search-type .li-suv label .icon {
	background-image: url(/src/img/ranking/icon-suv.png);
}

.search-type .li-hybrid label .icon {
	background-image: url(/src/img/ranking/icon-hybrid.png);
}

.search-type .li-commercialcar label .icon {
	background-image: url(/src/img/ranking/icon-commercialcar.png);
}

.search-type .li-compactcar label .icon {
	background-image: url(/src/img/ranking/icon-compactcar.png);
}

.search-type .li-lightcar label .icon {
	background-image: url(/src/img/ranking/icon-lightcar.png);
}

.search-type .li-minivan .label-checked .icon {
	background-image: url(/src/img/ranking/icon-minivan2.png);
}

.search-type .li-suv .label-checked .icon {
	background-image: url(/src/img/ranking/icon-suv2.png);
}

.search-type .li-hybrid .label-checked .icon {
	background-image: url(/src/img/ranking/icon-hybrid2.png);
}

.search-type .li-commercialcar .label-checked .icon {
	background-image: url(/src/img/ranking/icon-commercialcar2.png);
}

.search-type .li-compactcar .label-checked .icon {
	background-image: url(/src/img/ranking/icon-compactcar2.png);
}

.search-type .li-lightcar .label-checked .icon {
	background-image: url(/src/img/ranking/icon-lightcar2.png);
}

@media screen and (max-width:1200px) {
	.lineup-form {
		margin:0 20px;
	}
}

@media screen and (max-width:980px) {
	.search-box h3 {
		width: 100%;
		margin-right: 0;
		justify-content:flex-start;
		margin-bottom: 10px;
	}

	.search-list {
		width: 100%;
	}

	.search-make .search-list li label,
	.search-type .search-list li label,
	.search-price .search-list li label {
		font-size: 12px;
	}

	.lineup-form #btn-reset {
		font-size: 12px;
	}
}

@media screen and (max-width:900px) {
	.lineup-form .lineup-form-header h2 {
		font-size: 18px;
	}
}

@media screen and (max-width:640px) {
	.lineup-heading {
		margin-top: 20px;
	}

	.lineup-form {
		margin:0;
	}

	.lineup-form-header {
		padding: 10px;
	}

	.lineup-form .lineup-form-header h2 {
        font-size: 16px;
    }

	.lineup-form-body {
		padding: 20px;
	}

	#result-message {
		margin: 20px 0 0 0;
		font-size: 16px;
	}

	.search-list li {
		width: calc(97% / 4);
		margin-bottom: 5px;
	}

	.search-list li:nth-child(4n) {
		margin-right: 0;
	}

	.search-list li label .name {
		font-size: 10px;
	}

	.search-type .search-list li label .icon {
		margin-bottom: 5px;
	}
}