div#title {
	background-image: url("../img/title_bg.jpg");
	background-position: center bottom;
}
article {
	overflow: hidden;
}
ul#progress {
	padding-top: 40px;
	margin: 0 auto;
	width: 300px;
	overflow: hidden;
}
#progress li {
	background-color: #999;
	border-radius: 50%;
	display: table;
	width: 80px;
	height: 80px;
	position: relative;
	float: left;
}
#progress li:first-child {
	background-color: #900;
}
article.confirm #progress li:nth-child(2),
article.sended #progress li:nth-child(2),
article.sended #progress li:last-child {
	background-color: #900;
}
article.confirm #progress li:nth-child(2)::before,
article.sended #progress li:nth-child(2)::before,
article.sended #progress li:last-child::before {
	color: #900;
}
#progress li strong {
	color: #fff;
	font-size: 20px;
	text-align: center;
	vertical-align: middle;
	display: table-cell;
}
#progress li:not(:first-child)::before {
	color: #999;
	content: "\f054";
	font-family: 'Font Awesome 5 Free';
	font-size: 30px;
	font-weight: 900;
	text-align: center;
	width: 30px;
	position: absolute;
	right: 80px;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
#progress li + li {
	margin-left: 30px;
}
div#form-area {
	display: table;
	table-layout: fixed;
	width: 300%;
	transition: .5s;
	-ms-transition: .5s;
}
#form-area > form,
#form-area > div {
	display: table-cell;
}
article.confirm #form-area {
	-ms-transform: translateX(-33.33%);
	transform: translateX(-33.33%);
}
article.sended #form-area {
	-ms-transform: translateX(-66.66%);
	transform: translateX(-66.66%);
}
#form-area p {
	padding-bottom: 15px;
}
div.col-2 {
	overflow: hidden;
}
div.col-2 > * {
	width: calc(50% - 10px);
	float: left;
}
div.col-2 > *:last-child {
	float: right;
}
@media screen and (max-width: 650px) {
	section > div.col-2 > *,
	section > div.col-2 > *:last-child {
		width: 100%;
		float: none;
	}
}
strong.required {
	color: #f00;
}
label {
	color: #555;
	font-size: 13px;
	line-height: 20px;
	display: block;
}
#confirm label {
	border-bottom: 1px solid #555;
}
input:not([type="radio"]),
select {
	color: #333;
	font-size: 16px;
	line-height: 18px;
	padding: 10px;
	background-color: #fff;
	border: 1px solid #666;
	border-radius: 3px;
	display: block;
	width: 100%;
	height: 40px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	outline: none;
}
select {
	background: #fff url("../img/downarrow.svg") right 10px center / 13px auto no-repeat;
	cursor: pointer;
}
textarea {
	color: #333;
	font-size: 16px;
	line-height: 18px;
	padding: 10px;
	background-color: #fff;
	border: 1px solid #666;
	border-radius: 3px;
	display: block;
	width: 100%;
	height: 340px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
}
input[type="radio"] {
	display: none;
}
input[type="radio"] + label {
	color: #fff;
	font-size: 14px;
	line-height: 40px;
	font-weight: normal;
	text-align: center;
	background-color: #999;
	border-radius: 3px 0 0 3px;
	display: inline-block;
	width: 50%;
	height: 40px;
	cursor: pointer;
}
input[type="radio"]:last-of-type + label {
	border-left: 1px solid #fff;
	border-radius: 0 3px 3px 0;
}
input[type="radio"]:checked + label {
	background-color: #06c;
}
#confirm span {
	font-size: 16px;
	line-height: 24px;
	padding: 8px 0;
	display: block;
}
button {
	color: #fff;
	font-size: 16px;
	line-height: 18px;
	text-align: center;
	padding: 10px;
	background-color: #06c;
	border: none;
	border-radius: 3px;
	width: 100%;
	height: 40px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	cursor: pointer;
}
button:hover,
button:active {
	opacity: .8;
}
button#back {
	background-color: #888;
}