body {
	font-family: "Roboto Condensed", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

header h1 {
	font-size:35px;
	font-weight:400;
}

.logo img {
	width:200px;
	height:auto;
}

.progresses {
	display: flex;
	align-items: center;
}

.line {
	width: 120px;
	height: 6px;
	background: #63d19e;
}

.steps {
	display: flex;
	background-color: #63d19e;
	color: #fff;
	font-size: 14px;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.progresses 
{
	.steps
	{
		font-weight:bold;
		background-color:#CCCCCC;
		
		&.active 
		{
			background-color:#349100;
		}
	}
	
	.line
	{
		background-color:#CCCCCC;
		
		&.active 
		{
			background-color:#349100;
		}
	}
}

main .keyvisual {
	margin-bottom:40px;
	text-align:center;
}
	
main .keyvisual img {
	display:inline-block;
	width:80%;
	height:auto;
}

@media (min-width: 992px) {

	main .keyvisual {
		margin-bottom:0;
		text-align:left;
	}

	main .keyvisual img {
		width:80%;
		height:auto;
	}

	main .content {
		position:absolute;
		left:62%;
		top:25%;
	}

	.box-400 {
		max-width:400px;
	}

	.box-650 {
		width:550px;
	}

}

footer {
	color:#666666;
}

footer p {
	margin:0;
}
	
footer ul {
	display:inline-block;
	margin:0;
	padding:0;
	list-style:none;
}

footer ul li {
	display:inline-block;
}

footer ul li:before {
	content:" | ";
	color:#666666;
} 

footer a {
	color:#666666;
	text-decoration:none;
} 

footer a:focus,
footer a:hover {
	color:#D11800;
	text-decoration:underline;
}