#makerSelectArea.viewOn {z-index: 10001;}
#carSelectArea.viewOn {z-index: 10002;}
#budgetFromSelectArea.viewOn {z-index: 10003;}
#budgetToSelectArea.viewOn {z-index: 10004;}
#modelSelectArea.viewOn {z-index: 10005;}

#makerSelectArea.viewOn,
#carSelectArea.viewOn,
#budgetFromSelectArea.viewOn,
#budgetToSelectArea.viewOn,
#modelSelectArea.viewOn {
	display:block;
	position: fixed;
    top: 0;
	left: 0;
	font-size: 92%;
}

#makerSelectArea.viewNext {z-index: 10011;}
#carSelectArea.viewNext {z-index: 10012;}
#budgetFromSelectArea.viewNext {z-index: 10013;}
#budgetToSelectArea.viewNext {z-index: 10014;}
#modelSelectArea.viewNext {z-index: 10015;}


#makerSelectArea.viewNext,
#carSelectArea.viewNext,
#budgetFromSelectArea.viewNext,
#budgetToSelectArea.viewNext,
#modelSelectArea.viewNext {
	display:block;
	animation:slideNext .4s 1;
	position: fixed;
    top: 0;
    left: 0;
}

@keyframes slideNext {
	0% {left: 100%;}
	100% {left: 0%;}
}

#makerSelectArea.viewBack {z-index: 10021;}
#carSelectArea.viewBack {z-index: 10022;}
#budgetFromSelectArea.viewBack {z-index: 10023;}
#budgetToSelectArea.viewBack {z-index: 10024;}

#makerSelectArea.viewBack,
#carSelectArea.viewBack,
#budgetFromSelectArea.viewBack,
#budgetToSelectArea.viewBack{
	display:block;
	animation:slideBack .4s 1;
	position: fixed;
    top: 0;
    left: 0;
}
@keyframes slideBack {
	0% {left: -100%;}
	100% {left: 0%;}
}

#makerSelectArea.viewClose,
#carSelectArea.viewClose,
#budgetFromSelectArea.viewClose,
#budgetToSelectArea.viewClose
#modelSelectArea.viewClose {
	display:block;
	animation:slideDown .4s 1;
	position: fixed;
    top: 120%;
    left: 0;
}
@keyframes slideDown {
	0% {top: 0%;}
	100% {top: 120%;}
}

#carSelectArea,
#makerSelectArea,
#budgetFromSelectArea,
#budgetToSelectArea,
#modelSelectArea {
    display: none;
    background: #FFF;
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
	z-index: 10000;
}
#carSelectArea #carSelectHeader,
#makerSelectArea #makerSelectHeader,
#budgetFromSelectArea #budgetFromSelectHeader,
#budgetToSelectArea #budgetToSelectHeader,
#modelSelectArea #modelSelectHeader {
    padding: 4% 3%;
	box-sizing: border-box;
    background:#6ABA1B;
    text-align: center;
}
#modelSelectArea .budgetToBackButton,
#budgetToSelectArea .budgetFromBackButton,
#budgetFromSelectArea .carBackButton,
#carSelectArea .makerBackButton,
#makerSelectArea .backButton {
    padding: 1% 2% 1% 4.5%;
    border-radius: 3px;
    color: #6AB91A;
	background:#EBF5DE url(https://img.phoenix.webcrew.co.jp/13400/car-hanbai/m/smt/images/back_arrow.png) no-repeat 7% center;
	background-size:14% auto;
    font-size: 147%;
    position: absolute;
	top:22%;
    left: 3.1%;
}
#modelSelectArea .modal_close,
#budgetToSelectArea .modal_close,
#budgetFromSelectArea .modal_close,
#carSelectArea .modal_close,
#makerSelectArea .modal_close {
	width: 5%;
    color: #6AB91A;
	position: absolute;
	top:30%;
    right: 3.1%;
}
#modelSelectArea .modal_close img,
#budgetToSelectArea .modal_close img,
#budgetFromSelectArea .modal_close img,
#carSelectArea .modal_close img,
#makerSelectArea .modal_close img {
	width: 100%;
	height: auto;
}
#carSelectArea .headerTitle,
#makerSelectArea .headerTitle,
#budgetFromSelectArea .headerTitle,
#budgetToSelectArea .headerTitle,
#modelSelectArea .headerTitle {
    color: #FFF;
	font-size: 147%;
}
#carSelectArea .initials {
	margin-top: 16.5%;
	padding-bottom: 5%;
	border-bottom: 1px solid #999;
}
#carSelectArea .initials li {
    margin: 3.1% 0 0 3.1%;
    border: 1px solid #6ABA1B;
    border-radius: 3px;
    display: inline-block;
    width: 16.25%;
    text-align: center;
    font-size: 131%;
    box-sizing: border-box;
}
#carSelectArea .initials li a {
    padding: 12% 0;
    display: block;
    color: #6AB91A;
    text-decoration: none;
}
#carSelectArea .initials li.noData {
    border: 1px solid #CCC;
}
#carSelectArea .initials li.noData a {
    color: #CCC;
}

#makerSelectArea .title, 
#modelSelectArea .title,
#budgetFromSelectArea .title,
#budgetToSelectArea .title {
    padding: 3.1%;
    border-bottom: 1px solid #999;
    background: #CCC;
    font-size: 131%;
    overflow: hidden;
}
#carSelectArea .title {
	margin-top: -31.5%;
	padding-top:31.5%; 
}

#carSelectArea .title div {
    padding: 3.1%;
    border-bottom: 1px solid #999;
    background: #CCC;
    font-size: 131%;
    overflow: hidden;
}

#carSelectArea .title span,
#makerSelectArea .title span,
#budgetFromSelectArea .title span,
#budgetToSelectArea .title span,
#modelSelectArea .title span {
    float: left;
}
#carSelectArea .title a,
#makerSelectArea .title a,
#budgetFromSelectArea .title a,
#budgetToSelectArea .title a,
#modelSelectArea .title a {
    float: right;
    color: #777;
    font-size: 131%;
    text-decoration: none;
}

#carSelectArea .title a {
	display:none;
}

#carSelectArea .carSelect-makerName {
	padding:18.1% 3.1% 3.1%;
	position: fixed;
	width: 100%;
	color:#6ABA1B;
	background: #EBF5DE;
	font-size: 131%;
	text-align: center;
}

#carSelectArea .carList li,
#makerSelectArea .makerList li,
#budgetFromSelectArea .budgetList li,
#budgetToSelectArea .budgetList li,
#modelSelectArea .modelList li {
    border-bottom: 1px solid #999;
    padding: 3.1%;
	font-size: 131%;
}
#makerSelectArea .makerList li {
	background: url("https://img.phoenix.webcrew.co.jp/13400/car-hanbai/m/smt/images/select_arrow_large.png") 97% center no-repeat;
    background-size: 9px;
 
}
/*
body#promoBsicNentry.split form #formArea #formAreaInner dd #makerSelect,
body#promoBsicNentry.split form #formArea #formAreaInner dd #modelSelect,
body#promoBsicNentry.split form #formArea #formAreaInner dd #budgetSelect {
    margin-top: 5px;
    padding: 12px 10px;
    border: 1px solid #000;
    border-radius: 5px;
    width: 85%;
    background: #ffffce;
    box-sizing: border-box;
    font-size: 16px;
}*/
#carSelectArea #carSelectHeader,
#makerSelectArea #makerSelectHeader,
#budgetFromSelectArea #budgetFromSelectHeader,
#budgetToSelectArea #budgetToSelectHeader,
#modelSelectArea #modelSelectHeader{
    min-height: 22px;
    position: fixed;
    width: 100%;
}
#carSelectArea #carSelectHeader {
	z-index: 10;
}
#makerSelectArea .makerList,
#modelSelectArea .modelList,
#budgetFromSelectArea .budgetList,
#budgetToSelectArea .budgetList{
    padding-top: 15%;
}
@media screen and (min-width: 414px) {
	#makerSelectArea .makerList,
	#modelSelectArea .modelList,
	#budgetFromSelectArea .budgetList,
	#budgetToSelectArea .budgetList{
		padding-top: 14%;
	}
}
.modal_header_campaingn {
	padding-top:58.16px;
}

form .carInfoArea .makerSelectButton,
form .carInfoArea .budgetSelectButton,
form .carInfoArea .modelSelectButton{
	margin:0 0 20px;
	padding:.5em .8em .4em;
	border:1px solid #666;
	border-radius:6px;
	color:#333;
	background:linear-gradient(to bottom,#fff 50%,#EEE 100%);
	font-size:131%;
	font-weight:700;
	text-align:center
}

form .carInfoArea .info-selected{
	border:1px solid #DDD;background:#FFF;font-weight:400
}
.stepArea .carType,
.stepArea .bodyType,
.stepArea .modelYear,
.stepArea .price {
	padding: 3px 0 0;
}
.userInfoArea dl dd {
	margin: 0 0 20px;
}

.carInfoAreaIndent {
	position: relative;
	padding: 0 0 15%;
	margin: 0;
}
.remarksBalloon:before,
.remarksBalloon:after {
	content: "";
	position: absolute;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	left: 50%;
	top: 0;
}
.remarksBalloon:before {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 6px 12px 6px;
	border-color: transparent transparent #FFFA94 transparent;
	z-index: 2;
	top: -12px;
}
.remarksBalloon:after {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 8px 16px 8px;
	border-color: transparent transparent #FFE36C transparent;
	z-index: 1;
	top: -16px;
}
.remarksBalloon {
	display: block;
	opacity: 0;
	padding: 2% 0;
	margin-bottom: 0;
	width: 85%;
	text-align: center;
	color: #FF671A;
	font-size: 106%;
	font-weight: bold;
	background-color: #FFFA94;
	border: 2px solid #FFE36C;
	border-radius: 8px;
	position: absolute;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	left: 50%;
	bottom: 1%;
}
.remarksBalloon.fade {
	animation: fade 5s ease 0s 1 normal;
	-webkit-animation: fade 5s ease 0s 1 normal;
}
@keyframes fade {
	0% {opacity: 0}
	40% {opacity: 1}
	50% {opacity: 1}
	60% {opacity: 1}
	100% {opacity: 0}
}
@-moz-keyframes fade {
	0% {opacity: 0}
	40% {opacity: 1}
	50% {opacity: 1}
	60% {opacity: 1}
	100% {opacity: 0}
}
@-webkit-keyframes fade {
	0% {opacity: 0}
	40% {opacity: 1}
	50% {opacity: 1}
	60% {opacity: 1}
	100% {opacity: 0}
}
@-o-keyframes fade {
	0% {opacity: 0}
	40% {opacity: 1}
	50% {opacity: 1}
	60% {opacity: 1}
	100% {opacity: 0}
}
@-ms-keyframes fade {
	0% {opacity: 0}
	40% {opacity: 1}
	50% {opacity: 1}
	60% {opacity: 1}
	100% {opacity: 0}
}

@media screen and (min-width: 375px) {
	.remarksBalloon {
		width: 75%;
		bottom: 2%;
	}
}
.modal_header {
	background-color: #FFFBC3;
	width: 100%;
	padding-bottom: 6px;
    padding-top: 10px;
	position: fixed;
	z-index:20;
}
.modal_header_text {
	text-align: center;
	margin-bottom: 0;
}
.modal_header_text span {
	font-weight: 800;
	font-size: 108%;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-align: center;
	color: #005BAA;
	display: block;
}
.modal_header_image {
	width: 322px;
	height: auto;
	vertical-align: sub;
}