@charset "EUC-JP";

html {
	overflow-y: scroll;
}

/* contents */
#contents {
	width: auto;
}
#main {
	position: relative;
	width: 960px;
	margin: 0 auto;
	padding-top: 50px;
}

/* ページトップへ */
#pagetop {
	display: none;
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 50;
}
#pagetop img {
	vertical-align: top;
}


/* プログレスバー
---------------------------------- */
.progressBar {
	position: relative;
	z-index: 0;
	width: 380px;
	margin: 0 auto 15px;
	padding: 0;
	counter-reset: step;
	zoom: 1;
}
.progressBar::after {
	display: block;
	clear: both;
	content: "";
}
.progressBar li {
	list-style-type: none;
	position: relative;
	float: left;
	width: 25%;
	color: #e00923;
	font-size: 12px;
	text-align: center;
}
.progressBar li::before {
	display: block;
	width: 24px;
	height: 24px;
	margin: 0 auto 5px auto;
	border: 1px solid #e00923;
	border-radius: 50%;
	box-sizing: border-box;
	box-shadow: 0 0 0 5px #fff;
	background-color: #fff;
	content: counter(step);
	counter-increment: step;
	font-weight: bold;
	line-height: 24px;
	text-align: center;
}
.progressBar li::after {
	position: absolute;
	top: 12px;
	left: -50%;
	z-index: -1;
	width: 100%;
	height: 1px;
	background-color: #e00923;
	content: "";
}
.progressBar li:first-child::after {
	content: none;
}
.progressBar li.complete::before {
	content: "";
}
.progressBar li.complete span::before {
	position: absolute;
	top: 6px;
	right: 0;
	left: 0;
	z-index: 2;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 6px;
	height: 10px;
	margin: auto;
	border-bottom: 1px solid #e00923;
	border-right: 1px solid #e00923;
	box-sizing: border-box;
	content: "";
}
.progressBar li.active::before {
	background-color: #e00923;
	color: #fff;
}


/* 登録情報
---------------------------------- */
.selectedConditionArea {
	display: table;
	width: 100%;
	margin: 0 auto 20px;
	border: 1px solid #d5d5d5;
	table-layout: fixed;
	border-spacing: 20px 9px;
}
.selectedConditionArea:after,
.selectedConditionArea::after {
	display: none;
}
.selectedConditionArea .thumb,
.selectedConditionArea .detail {
	display: table-cell;
	min-height: 53px;
	height: 53px;
	vertical-align: middle;
}
.selectedConditionArea .thumb {
	width: 90px;
}
.selectedConditionArea .thumb img {
	max-width: 100%;
	vertical-align: top;
}
.selectedConditionArea .detail .carName {
	font-size: 14px;
	font-weight: bold;
}
.selectedConditionArea .detail .model {
	margin: 1px 0 0;
	font-size: 12px;
}
.selectedConditionArea .detail .gradeName {
	margin: 1px 0 0;
	font-size: 12px;
}


/* 一つ前に戻る/スキップ
---------------------------------- */
.prevArea {
	position: absolute;
	top: 10px;
	left: 0;
}
.prevBtn,
.skipBtn {
	display: inline-block;
	position: relative;
	width: 140px;
	height: 40px;
	border: 1px solid #d5d5d5;
	border-radius: 4px;
	box-sizing: border-box;
	background: #fff;
	color: #333;
	font-size: 12px;
	font-weight: normal;
	line-height: 40px;
	text-align: center;
	vertical-align: middle;
}
.skipBtn {
	width: 180px;
}
.prevBtn::before,
.skipBtn::before {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10px;
	-webkit-transform: rotate(-135deg);
	-ms-transform: rotate(-135deg);
	transform: rotate(-135deg);
	width: 6px;
	height: 6px;
	margin: auto;
	border-top: 1px solid #979797;
	border-right: 1px solid #979797;
	content: "";
}
.prevBtn:hover,
.skipBtn:hover {
	text-decoration: underline;
}


/* モダール
-------------------------------*/
#fancybox-outer {
	border-radius: 4px;
}



/* メーカー・ブランド
----------------------------------------------------------------------------- */

.makerList {
	margin: 0;
	font-size: 0;
	letter-spacing: -0.5em;
}
.makerList li {
	display: inline-block;
	width: 96px;
	margin-bottom: 20px;
	padding: 0 5px;
	font-size: 12px;
	letter-spacing: normal;
	text-align: center;
	vertical-align: top;
}
.makerList > li > a {
	display: block;
	position: relative;
	padding-top: 60px;
	color: #1d7fc0;
}
.makerList > li > a:hover::before {
	opacity: 0.7;
}
.makerList > li > a::before {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 50px;
	height: 50px;
	margin: auto;
	background: transparent url("https://img.goo-net.com/cache/newcar/simulation/202404_logo/sprite_icon_maker_logo.png") no-repeat;
	background-size: 50px;
	content: "";
}

/* 日本 */
.makerList > li > a.lexus::before {
	background-position: 0 0;
}
.makerList > li > a.toyota::before {
	background-position: 0 -50px;
}
.makerList > li > a.nissan::before {
	background-position: 0 -100px;
}
.makerList > li > a.honda::before {
	background-position: 0 -150px;
}
.makerList > li > a.mazda::before {
	background-position: 0 -200px;
}
.makerList > li > a.eunos::before {
	background-position: 0 -250px;
}
.makerList > li > a.ford_japan::before {
	background-position: 0 -300px;
}
.makerList > li > a.mitsubishi::before {
	background-position: 0 -350px;
}
.makerList > li > a.subaru::before {
	background-position: 0 -400px;
}
.makerList > li > a.daihatsu::before {
	background-position: 0 -450px;
}
.makerList > li > a.suzuki::before {
	background-position: 0 -500px;
}
.makerList > li > a.mitsuoka:before {
	background-position: 0 -550px;
}
.makerList > li > a.isuzu::before {
	background-position: 0 -600px;
}

/* ドイツ */
.makerList > li > a.mercedes_benz::before {
	background-position: 0 -650px;
}
.makerList > li > a.amg::before {
	background-position: 0 -700px;
}
.makerList > li > a.maybach::before {
	background-position: 0 -750px;
}
.makerList > li > a.mcc_smart::before {
	background-position: 0 -800px;
}
.makerList > li > a.bmw::before {
	background-position: 0 -850px;
}
.makerList > li > a.bmw_alpina::before {
	background-position: 0 -900px;
}
.makerList > li > a.audi::before {
	background-position: 0 -950px;
}
.makerList > li > a.volkswagen::before {
	background-position: 0 -1000px;
}
.makerList > li > a.opel::before {
	background-position: 0 -1050px;
}
.makerList > li > a.porsche::before {
	background-position: 0 -1100px;
}
.makerList > li > a.europe_ford::before {
	background-position: 0 -1150px;
}
.makerList > li > a.yes::before {
	background-position: 0 -1200px;
}
.makerList > li > a.mini::before {
	background-position: 0 -1250px;
}

/* イギリス */
.makerList > li > a.rollsroyce::before {
	background-position: 0 -1300px;
}
.makerList > li > a.bentley::before {
	background-position: 0 -1350px;
}
.makerList > li > a.jaguar::before {
	background-position: 0 -1400px;
}
.makerList > li > a.daimler::before {
	background-position: 0 -1450px;
}
.makerList > li > a.land_rover::before {
	background-position: 0 -1500px;
}
.makerList > li > a.mg::before {
	background-position: 0 -1550px;
}
.makerList > li > a.rover::before {
	background-position: 0 -1600px;
}
.makerList > li > a.lotus::before {
	background-position: 0 -1650px;
}
.makerList > li > a.aston_martin::before {
	background-position: 0 -1700px;
}
.makerList > li > a.morgan::before {
	background-position: 0 -1750px;
}
.makerList > li > a.tvr::before {
	background-position: 0 -1800px;
}

/* イタリア */
.makerList > li > a.fiat::before {
	background-position: 0 -1850px;
}
.makerList > li > a.abarth::before {
	background-position: 0 -1900px;
}
.makerList > li > a.ferrari::before {
	background-position: 0 -1950px;
}
.makerList > li > a.lancia::before {
	background-position: 0 -2000px;
}
.makerList > li > a.alfa_romeo::before {
	background-position: 0 -2050px;
}
.makerList > li > a.maserati::before {
	background-position: 0 -2100px;
}
.makerList > li > a.lamborghini::before {
	background-position: 0 -2150px;
}
.makerList > li > a.autobianchi::before {
	background-position: 0 -2200px;
}

/* フランス */
.makerList > li > a.renault::before {
	background-position: 0 -2250px;
}
.makerList > li > a.peugeot::before {
	background-position: 0 -2300px;
}
.makerList > li > a.citroen::before {
	background-position: 0 -2350px;
}
.makerList > li > a.ds::before {
	background-position: 0 -3600px;
}
.makerList > li > a.venturi::before {
	background-position: 0 -2400px;
}

/* スウェーデン */
.makerList > li > a.volvo::before {
	background-position: 0 -2450px;
}
.makerList > li > a.saab::before {
	background-position: 0 -2500px;
}

/* アメリカ */
.makerList > li > a.cadillac::before {
	background-position: 0 -2550px;
}
.makerList > li > a.chevrolet::before {
	background-position: 0 -2600px;
}
.makerList > li > a.pontiac::before {
	background-position: 0 -2650px;
}
.makerList > li > a.buick::before {
	background-position: 0 -2700px;
}
.makerList > li > a.saturn::before {
	background-position: 0 -2750px;
}
.makerList > li > a.hummer::before {
	background-position: 0 -2800px;
}
.makerList > li > a.lincoln::before {
	background-position: 0 -2850px;
}
.makerList > li > a.ford::before {
	background-position: 0 -2900px;
}
.makerList > li > a.mercury::before {
	background-position: 0 -2950px;
}
.makerList > li > a.chrysler::before {
	background-position: 0 -3000px;
}
.makerList > li > a.chrysler_jeep::before {
	background-position: 0 -3050px;
}
.makerList > li > a.dodge::before {
	background-position: 0 -3100px;
}
.makerList > li > a.starcraft::before {
	background-position: 0 -3150px;
}
.makerList > li > a.tiara::before {
	background-position: 0 -3200px;
}

/* オランダ */
.makerList > li > a.donkervoort::before {
	background-position: 0 -3250px;
}

/* 韓国 */
.makerList > li > a.hyundai::before {
	background-position: 0 -3300px;
}
.makerList > li > a.kia::before {
	background-position: 0 -3350px;
}
.makerList > li > a.daewoo::before {
	background-position: 0 -3400px;
}
.makerList > li > a.gm_matiz::before {
	background-position: 0 -3450px;
}
.makerList > li > a.ct_t::before {
	background-position: 0 -3500px;
}

/* 南アフリカ */
.makerList > li > a.birkin::before {
	background-position: 0 -3550px;
}

/* no image */
.makerList > li > a.byd::before,
.makerList > li > a.mercedes_amg::before,
.makerList > li > a.mercedes_maybach::before {
	display: block;
	background: transparent url("https://img.goo-net.com/cache/newcar/simulation/icon_no_image_maker_logo.png") no-repeat center center;
	background-size: 30px;
}


/* 乗り換えシミュレーションとは
---------------------------------- */
.simulationHelpArea {
	position: absolute;
	top: 24px;
	right: 0;
	width: 100%;
	text-align: center;
}
.simulationHelpBtn {
	display: inline-block;
	display: -ms-inline-flexbox;
	display: inline-flex;
	position: relative;
	width: 288px;
	height: 32px;
	margin: 0;
	padding: 6px 40px 6px 10px;
	border: 1px solid #636363;
	border-radius: 4px;
	box-sizing: border-box;
	background: #fff;
	color: #333;
	font-size: 14px;
	line-height: 1.2;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
}
.simulationHelpBtn > span {
	display: block;
	position: absolute;
	top: 0;
	right: 8px;
	bottom: 0;
	width: 22px;
	height: 22px;
	margin: auto 0;
	box-sizing: border-box;
	background: #9f9f9f;
	border-radius: 50%;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	line-height: 22px;
	text-decoration: none;
	text-align: center;
}


/* 登録済みの方はこちらからログイン
---------------------------------- */
.registeredArea {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 50;
}
.registeredBtn {
	display: inline-block;
	display: -ms-inline-flexbox;
	display: inline-flex;
	position: relative;
	min-width: 280px;
	max-width: 340px;
	height: 60px;
	margin: 0;
	padding: 22px 40px 22px 16px;
	border-radius: 4px;
	box-sizing: border-box;
	background: #ffe5e6;
	color: #333;
	font-size: 14px;
	line-height: 1.2;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
}
.registeredBtn::after {
	display: block;
	position: absolute;
	top: 0;
	right: 16px;
	bottom: 0;
	width: 24px;
	height: 24px;
	margin: auto 0;
	background: url("https://img.goo-net.com/cache/newcar/common/icon_arrow_right.svg") no-repeat center;
	background-size: 24px;
	content: "";
}


/* 約束
---------------------------------- */
.promiseArea {
	width: 680px;
	margin: 30px auto 40px;
	padding: 10px 20px;
	border: 1px solid #e00923;
}
.promiseArea .titleSmall {
	margin: 0 0 8px;
}
.promiseArea .titleSmall > span {
	margin: 0 1px;
	padding: 1px;
	border: 1px solid #e00923;
	color: #e00923;
}
.promiseArea .checkList {
	font-size: 14px;
}
.promiseArea .checkList li {
	position: relative;
	padding-left: 17px;
	margin: 0 0 5px;
	background: transparent url("https://img.goo-net.com/cache/newcar/common/icon_checkbox.png") no-repeat 0 4px;
	background-size: 12px 11px;
}
.promiseArea .checkList li:last-child {
	margin-bottom: 0;
}



/* 車種
----------------------------------------------------------------------------- */

.pageIndex {
	margin: 20px 0;
	color: #9f9f9f;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
}
.pageIndex li {
	display: inline-block;
	margin: 0 0 0 10px;
	padding: 0 0 0 10px;
	border-left: 1px solid #d5d5d5;
}
.pageIndex li:first-child {
	margin: 0;
	padding: 0;
	border-left: none;
}
.pageIndex a {
	color: #1d7fc0;
}
.pageIndex + .titleBorderL {
	margin-top: 0;
}

.carList {
	margin: 0;
	overflow: hidden;
	font-size: 0;
	letter-spacing: -0.5em;
}
.carList li {
	display: inline-block;
	width: 140px;
	margin: 0 65px 50px 0;
	font-size: 12px;
	letter-spacing: normal;
	vertical-align: top;
}
.carList li:nth-child(5n) {
	margin-right: 0;
}
.carList li a {
	display: block;
	position: relative;
	padding-top: 80px;
	color: #1d7fc0;
	font-weight: bold;
	text-align: center;
}
.carList li a img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 140px;
	margin: auto;
}
.carList li a:hover {
	text-decoration: underline;
}
.carList li a:hover img {
	opacity: 0.7;
}



/* 年式・グレード
----------------------------------------------------------------------------- */

.modelYear {
	visibility: hidden;
	margin: 0 0 10px;
	font-size: 14px;
}

.modelYear h4 {
	position: relative;
	padding: 10px 65px 10px 10px;
	background: #f1f1f1;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
}
.modelYear h4::before {
	display: block;
	position: absolute;
	top: 0;
	right: 26px;
	bottom: 0;
	width: 3.5em;
	height: 1.5em;
	margin: auto;
	content: "開く";
	font-size: 11px;
	font-weight: normal;
	text-align: right;
}
.modelYear.active h4::before {
	content: "閉じる";
}
.modelYear h4:hover::before {
	text-decoration: underline;
}
.modelYear h4::after {
	display: block;
	position: absolute;
	bottom: 50%;
	right: 11px;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	width: 7px;
	height: 7px;
	margin: 0 0 -1px;
	border-top: 1px solid #e00923;
	border-right: 1px solid #e00923;
	content: "";
}
.modelYear.active h4::after {
	top: 50%;
	bottom: auto;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	margin: -3px 0 0;
}

.grade .item {
	padding: 0;
	border: 1px solid #f1f1f1;
	border-top: none;
}
.grade .itemInner {
	display: table;
	width: 100%;
	table-layout: fixed;
	border-spacing: 20px;
}
.grade .itemInner:after,
.grade .itemInner::after {
	display: none;
}

.grade .itemInner .thumb,
.grade .itemInner .detail {
	display: table-cell;
	vertical-align: top;
}
.grade .itemInner .thumb {
	width: 220px;
	vertical-align: middle;
}
.grade .itemInner .thumb img {
	max-width: 100%;
	vertical-align: top;
}
.grade .itemInner .detail {
	text-align: left;
}

.grade .item a {
	color: #1d7fc0;
	font-weight: bold;
}
.grade .item .itemInner:hover {
	cursor: pointer;
}
.grade .item .itemInner:hover img {
	opacity: 0.7;
}
.grade .item .itemInner:hover a {
	text-decoration: underline;
}

/* グレード名 */
.grade .gradeName {
	margin: 0 0 20px;
	font-weight: bold;
	line-height: 1.4;
}

/* 型式 */
.grade .type {
	margin: 0 0 10px;
}
.grade .type th,
.grade .type td {
	height: 22px;
	line-height: 22px;
	vertical-align: middle;
}
.grade .type th {
	width: 80px;
	padding: 0 12px;
	background: #efefef;
	text-align: center;
}
.grade .type td {
	padding: 0 10px;
	text-align: left;
}
.grade .type td {
	width: 200px;
}
.grade .type td:last-child {
	width: auto;
	padding-right: 0;
}

/* スペック */
.grade .spec dt,
.grade .spec dd {
	display: inline-block;
	height: 20px;
	line-height: 20px;
}
.grade .spec dt {
	margin-right: 10px;
	color: #9f9f9f;
	font-weight: bold;
}
.grade .spec dt::before {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 5px 0 0;
	background: transparent url("https://img.goo-net.com/cache/newcar/simulation/sprite_icon_grade_detail_02.png") no-repeat 0 0;
	background-size: 20px;
	content: "";
	line-height: 20px;
	vertical-align: middle;
}
.grade .spec dt.capacity::before {
	width: 8px;
	background-position: 0 0;
}
.grade .spec dt.shift::before {
	width: 10px;
	background-position: 0 -20px;
}
.grade .spec dt.displacement::before {
	width: 20px;
	background-position: 0 -40px;
}
.grade .spec dt.drive::before {
	width: 11px;
	background-position: 0 -60px;
}
.grade .spec dd {
	margin-right: 20px;
}
.grade .spec dd:last-child {
	margin-right: 0;
}


/* 状態
----------------------------------------------------------------------------- */
.formMessage {
	display: block;
	margin-top: 15px;
}

.submitArea {
	margin: 40px 0 20px;
	padding: 0;
	text-align: center;
}
.submitBtn {
	display: inline-block;
	position: relative;
	width: 340px;
	height: 50px;
	border-radius: 4px;
	box-sizing: border-box;
	background: #e00923;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	line-height: 50px;
	text-align: center;
	vertical-align: middle;
}
.submitBtn:disabled {
	background: #d5d5d5;
}
.submitBtn:not(:disabled):hover {
	text-decoration: none;
	opacity: 0.7;
	cursor: pointer;
}


/* 走行距離
---------------------------------- */
.distanceSliderBox {
	font-size: 14px;
	zoom: 1;
}
.distanceSliderBox::after {
	display: block;
	clear: both;
	content: "";
}
.distanceTextWrap {
	float: left;
	width: 270px;
}
.rangesliderWrap {
	position: relative;
	float: right;
	width: 680px;
	margin: 0;
	padding: 8px 0 0;
}

.distanceText {
	display: inline-block;
	width: 200px;
	height: 40px;
	margin-right: 10px;
	padding: 9px;
	border: 1px solid #d5d5d5;
	border-radius: 4px;
	background: #fff;
}
.distanceTextWrap span {
	vertical-align: bottom;
}
.distanceNote {
	margin-top: 24px;
	color: #e00923;
}

/* rangeslider */
.rangeslider {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 12px;
	border-radius: 6px;
	background: #d5d5d5;
}
.rangeslider__handle {
	display: inline-block;
	position: absolute;
	top: -6px;
	z-index: 3;
	width: 24px;
	height: 24px;
	border-radius: 100%;
	box-sizing: border-box;
	background-color: #e00923;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	cursor: pointer;
	transition: background-color 0.2s;
}
.rangeslider__handle__value {
	position: absolute;
	top: -20px;
	left: -33px;
	width: 90px;
	height: 20px;
	padding: 0;
	border-radius: 4px;
	box-sizing: border-box;
	background-color: transparent;
	line-height: 20px;
	text-align: center;
	white-space: nowrap;
}
.rangeslider__handle__value::after {
	display: inline;
	visibility: visible;
	font-size: 14px;
	content: "km";
}
.rangeslider__fill {
	position: absolute;
	top: 0;
	z-index: 1;
	height: 100%;
	border-radius: 6px;
	background-color: #e00923;
}
.rangeslider__labels {
	display: -ms-flexbox;
	display: flex;
	position: absolute;
	top: 14px;
	z-index: 1;
	width: 100%;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.rangeslider__labels:after,
.rangeslider__labels::after {
	display: none;
}
.rangeslider__labels__label {
	display: block;
	position: relative;
	padding-top: 15px;
	color: #333;
	font-size: 14px;
}


/* 次の車検
---------------------------------- */
.selectBox {
	position: relative;
	display: inline-block;
	width: 200px;
	margin-right: 10px;
	cursor: pointer;
}
.selectBox::before {
	display: block;
	position: absolute;
	right: 10px;
	top: 50%;
	z-index: 1;
	width: 0;
	height: 0;
	margin: -2px 0 0 0;
	border: 4px solid transparent;
	border-top: 6px solid #636363;
	content: "";
}
.selectBox select {
	display: inline-block;
	width: 200px;
	height: 40px;
	padding: 9px 19px 9px 9px;
	border: 1px solid #d5d5d5;
	border-radius: 4px;
	background: #fff;
	color: #9f9f9f;
	cursor: pointer;
}
.selectBox select.selected {
	color: #333;
}
.selectBox select::-ms-expand {
	display: none;
}


/* ボディカラー
---------------------------------- */
.bodycolor {
	font-size: 0;
	letter-spacing: -0.5em;
}

.bodycolorList {
	display: inline-block;
	vertical-align: top;
}
.bodycolorList li {
	display: inline-block;
	width: 60px;
	margin: 0;
	font-size: 10px;
	letter-spacing: normal;
	text-align: center;
	vertical-align: top;
}
.bodycolorList .circleColor + span {
	white-space: nowrap;
}

.bodycolorList .circleColor {
	display: block;
	position: relative;
	width: 40px;
	height: 40px;
	margin: 0 auto 10px;
	border: 1px solid #d5d5d5;
	border-radius: 50%;
}
.bodycolorList .circleColor--white {
	background-color: #fff;
}
.bodycolorList .circleColor--goldsilver {
	background: linear-gradient(135deg, #ededed 50%, #c59a04 50%);
}
.bodycolorList .circleColor--black {
	background-color: #333;
}
.bodycolorList .circleColor--gray {
	background-color: #f1f1f1;
}
.bodycolorList .circleColor--blue {
	background-color: #233acb;
}
.bodycolorList .circleColor--red {
	background-color: #e5111a;
}
.bodycolorList .circleColor--green {
	background-color: #16a505;
}
.bodycolorList .circleColor--yellow {
	background-color: #fff24e;
}
.bodycolorList .circleColor--brown {
	background-color: #ab7a56;
}
.bodycolorList .circleColor--purple {
	background-color: #ad06e2;
}
.bodycolorList .circleColor--other {
	background: transparent url("https://img.goo-net.com/cache/newcar/simulation/bg_color_other.png") no-repeat center center;
	background-size: 40px;
}

.bodycolorList label {
	display: block;
	cursor: pointer;
}
.bodycolorList .radio {
	display: none;
}
.bodycolorList .radio + span {
	position: relative;
}
.bodycolorList .radio:checked + span::before {
	display: block;
	position: absolute;
	right: -5px;
	top: -5px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #4a90e2;
	content: "";
}
.bodycolorList .radio:checked + span::after {
	display: block;
	position: absolute;
	top: -2px;
	right: 2px;
	width: 6px;
	height: 11px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	box-sizing: border-box;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	content: "";
}

.bodycolorDetail {
	display: inline-block;
	width: 300px;
	padding: 0 0 0 2px;
	font-size: 12px;
	letter-spacing: normal;
	text-align: right;
	vertical-align: top;
}
.bodycolorDetail .textfield {
	display: inline-block;
	width: 100%;
	height: 40px;
	margin: 0 0 5px;
	padding: 0 9px;
	border: 1px solid #d5d5d5;
	border-radius: 4px;
	background: #fff;
	font-size: 12px;
	vertical-align: middle;
}


/* 装備
---------------------------------- */
.equipmentList {
	overflow: hidden;
	zoom: 1;
}
.equipmentList::after {
	display: block;
	clear: both;
	content: "";
}
.equipmentList li {
	float: left;
	width: 120px;
	height: 120px;
	margin: 0 20px 0 0;
}
.equipmentList li:nth-child(7n) {
	margin-right: 0;
}
.equipmentList li:nth-child(n+8) {
	margin-top: 20px;
}

.equipmentList .checkbox {
	display: none;
}
.equipmentList .checkbox + span {
	display: block;
	position: relative;
	padding: 90px 0 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
	background: transparent url("https://img.goo-net.com/cache/newcar/simulation/sprite_icon_equipment.png") no-repeat center 30px;
	background-size: 54px;
	text-align: center;
	color: #636363;
	font-size: 12px;
	font-weight: bold;
}

.equipmentList .checkbox:disabled + span {
	color: #9f9f9f;
	background-color: #f1f1f1;
}

.equipmentList .checkbox:checked + span,
.equipmentList .checkbox:not(:disabled) + span:hover {
	border: 1px solid #e00923;
	background-color: #fff8f8;
	color: #e00923;
	cursor: pointer;
}
.equipmentList .checkbox + span.sunroof {
	background-position: center 30px;
}
.equipmentList .checkbox:checked + span.sunroof,
.equipmentList .checkbox:not(:disabled) + span.sunroof:hover {
	background-position: center -63px;
}
.equipmentList .checkbox + span.leather {
	background-position: center -156px;
}
.equipmentList .checkbox:checked + span.leather,
.equipmentList .checkbox:not(:disabled) + span.leather:hover {
	background-position: center -249px;
}
.equipmentList .checkbox + span.navi {
	background-position: center -342px;
}
.equipmentList .checkbox:checked + span.navi,
.equipmentList .checkbox:not(:disabled) + span.navi:hover {
	background-position: center -435px;
}

.equipmentList .checkbox:not(:disabled) + span::before {
	display: block;
	position: absolute;
	top: 8px;
	left: 7px;
	z-index: 1;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
	width: 18px;
	height: 18px;
	border: 1px solid #d5d5d5;
	border-radius: 3px;
	box-sizing: border-box;
	background: #fff;
	content: "";
}
.equipmentList .checkbox:checked + span::before {
	border: 1px solid #e00923;
	background: #e00923;
}
.equipmentList .checkbox:checked + span::after {
	display: block;
	position: absolute;
	top: 10px;
	left: 13px;
	z-index: 2;
	-webkit-transform: translate(0, 0) rotate(40deg);
	-ms-transform: translate(0, 0) rotate(40deg);
	transform: translate(0, 0) rotate(40deg);
	width: 6px;
	height: 12px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	box-sizing: border-box;
	content: "";
}