/*--------------------------------------------------------------
#category-top-area
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	#category-top-area {
		background: url("images/main_image.png") bottom center no-repeat;
		background-size: cover;
	}

}

/* Small than tablet */
@media (min-width: 768px) {
	
	
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	

}

/*--------------------------------------------------------------
#flow-area
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	#flow-area {
		margin: 0;
		padding: 0 0 0 0;
	}
	
	#flow-area ul {
		margin: 0 0 50px 0;
		padding: 0;
	}
	
	#flow-area li {
		position: relative;
	}
	
	#flow-area li:nth-child(1) {
		margin: 0;
		padding: 0 0 20px 0;
	}
	
	#flow-area li:nth-child(2) {
		background-color: #EAF3FA;
		margin: 0;
		padding: 15vw 0 20px 0;
	}
	
	#flow-area li:nth-child(3) {
		background-color: #FFF;
		margin: 0;
		padding: 15vw 0 20px 0;
	}
	
	#flow-area li:nth-child(4) {
		margin: 0;
		padding: 15vw 0 50px 0;
		background-color: #EAF3FA;
	}
	
	#flow-area h3 {
		margin: 0 10% 20px 10%;
		padding: 0;
		font-size: 20px;
		color: #6596E5;
		font-weight: bold;
		width: auto;
	}
	
	#flow-area p {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	#flow-area dl {
		margin: 0 10%;
		padding: 0;
		width: auto;
	}
	
	#flow-area dt {
		margin: 0 0 20px 0;
		padding: 0;
		width: auto;
	}
	
	#flow-area dd {
		margin: 0;
		padding: 0;
		font-size: 14px;
		line-height: 1.8;
	}
	
	.btn_center {
		margin: 0 5%;
		padding: 0;
		width: auto;
	}

}

/* Small than tablet */
@media (min-width: 768px) {
	
	#flow-area h3 {
		margin: 0 20% 20px 20%;
		padding: 0;
		font-size: 23px;
	}
	
	#flow-area dl {
		margin: 0 20%;
		padding: 0;
		width: auto;
	}
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	#flow-area {
		margin: 0;
		padding: 50px 0 0 0;
	}
	
	#flow-area ul {
		margin: 0 0 100px 0;
		padding: 0;
	}
	
	#flow-area li {
		position: relative;
	}
	
	#flow-area li:nth-child(1) {
		margin: 0;
		padding: 0;
		background: url("images/flow_bg1.png") bottom left no-repeat;
		-webkit-background-size: 230px auto;
		background-size: 230px auto;
	}
	
	#flow-area li:nth-child(2) {
		margin: 0;
		padding: 12vw 0 0 0;
		background: url("images/flow_bg2.png") bottom left no-repeat;
		-webkit-background-size: 230px auto;
		background-size: 230px auto;
		background-color: #EAF3FA;
	}
	
	#flow-area li:nth-child(3) {
		background-color: #FFF;
		margin: 0;
		padding: 12vw 0 0 0;
		background: url("images/flow_bg3.png") bottom left no-repeat;
		-webkit-background-size: 230px auto;
		background-size: 230px auto;
	}
	
	#flow-area li:nth-child(4) {
		margin: 0;
		padding: 12vw 0 50px 0;
		background: url("images/flow_bg4.png") bottom left no-repeat;
		-webkit-background-size: 230px auto;
		background-size: 230px auto;
		background-color: #EAF3FA;
	}
	
	#flow-area h3 {
		margin: 0 auto 40px auto;
		padding: 0;
		font-size: 25px;
		color: #6596E5;
		font-weight: bold;
		width: 800px;
	}
	
	#flow-area p {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	#flow-area dl {
		margin: 0 auto;
		padding: 0;
		width: 800px;
	}
	
	#flow-area dt {
		margin: 0;
		padding: 0;
		width: 50%;
		float: right;
	}
	
	#flow-area dd {
		margin: 0 55% 0 0;
		padding: 0;
		font-size: 15px;
		line-height: 1.8;
	}
	
	.btn_center {
		margin: 0 auto;
		padding: 0;
		width: 600px;
	}

}