@charset "UTF-8";

#flow {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 200px;
	margin-top: 40px;
}
.flow-box {
	height: 145px;
	width: 100%;
	color: #ffffff;
	text-align: center;
	position: relative;
	-webkit-box-shadow: 4px 4px 6px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 4px 4px 6px 0px rgba(0,0,0,0.2);
	box-shadow: 4px 4px 6px 0px rgba(0,0,0,0.2);
}
.flow-box-l {
	height: 435px;
	width: 100%;
	color: #ffffff;
	position: relative;
	-webkit-box-shadow: 4px 4px 6px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 4px 4px 6px 0px rgba(0,0,0,0.2);
	box-shadow: 4px 4px 6px 0px rgba(0,0,0,0.2);
}
.flow-box p {
	position: absolute;
	left: 3.5%;
	top: 34%;
}
.circle {
	text-align: center;
	margin-top: -1px;
	position: relative;
	z-index: 10;
}
.no01 {
	background-color: #f0863c;
}
.no02 {
	background-color: #ec7f3c;
}
.no03 {
	background-color: #e9793c;
}
.no04 {
	background-color: #e5723c;
}
.no05 {
	background-color: #e26b3c;
}
.no06 {
	background-color: #de653c;
}
.no07 {
	background-color: #d7583d;
}
.no08 {
	background-color: #d4513d;
}
.no09 {
	background-color: #d04a3d;
}
.no10 {
	background-color: #cd443d;
}
.no11 {
	background-color: #c93d3d;
}
.no12 {
	background-color: #cf0a2c;
}
/* リンクパネル */
#link-panel {
	width: 980px;
	margin-right: auto;
	margin-left: auto;
}
@media screen and (max-width:979px) {
#link-panel {
	width: 94%;	
}
@media screen and (max-width:789px) {
#flow {
	width: 100%;
	margin-bottom: 100px;
}	
}
@media screen and (max-width:640px) {
#flow {
	margin-bottom: 50px;
}	
}