@charset "utf-8";

/* ------------------------------------------
	- COMMON SETTING
	- HEADER
		-- NAV MENU
------------------------------------------ */

/* ==============================================================
	COMMON
============================================================== */
.main{
	background: url(../img/flow/flow_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center top;
	padding: 90px 0 120px;
	margin-top:-2px;
	display: block;
}
@media screen and (max-width: 750px) {
	.main{
		background: url(../img/flow/flow_bg.jpg) no-repeat;
		background-size: cover;
		background-position: center top;
		padding: 40px 0 60px;
		margin-top:-2px;
	}
}



/* ==============================================================
	INTRO
============================================================== */
.intro h1{
	color: #927f63;
	margin-bottom: 40px;
}
@media screen and (max-width: 750px) {
	.intro h1{
		margin-bottom: 20px;
	}
}
.intro h1 span{
	color: #000;
}
.intro p{
	font-size: 18px;
	line-height: 1.78;
}
@media screen and (max-width: 750px) {
	.intro p{
		width:90%;
		font-size: 16px;
		margin:0 auto;
	}
}


/* ==============================================================
	STEP
============================================================== */
.step{
	margin-top:70px;
}
@media screen and (max-width: 750px) {
	.step{
		margin-top:30px;
	}
}
.step .step_item{
	display: flex;
	align-items:stretch;
	flex-flow: row-reverse;
	margin-bottom:60px;
}
@media screen and (max-width: 750px) {
	.step .step_item{
		display: block;
		width:90%;
		margin:30px auto 0;
	}
}
.step .step_item.step4{
	justify-content: flex-end;
	margin-bottom: 30px;
}
.step .step_item .img{
	margin-left: 50px;
	width:410.88px;
}
@media screen and (max-width: 750px) {
	.step .step_item .img{
		margin-left: 0;
		width:100%;
	}
}
.step .step_item .text{
	width:500px;
	text-align: left;
}
@media screen and (max-width: 750px) {
	.step .step_item .text{
		width:90%;
		margin:30px auto 20px;
		text-align: left;
	}
}
.step .step_item .text p{
	line-height: 1.8;
}
.step .step_item .btn{
	background: #4b545c;
	color: #fff;
	text-align: center;
	margin:30px auto 0 0;
}
@media screen and (max-width: 750px) {
	.step .step_item .btn{
		margin:20px auto;
	}
}


/*	STEP TITLE
------------------------------------------------ */
.step .step_title{
	position: relative;
	margin:20px 0 35px;
}
@media screen and (max-width: 750px) {
	.step .step_title{
		margin:10px 0 15px;
	}
}
.step .none_logo .step_title{
	margin:0 0 35px;
}

.step .step_logo{
	font-size: 18px;
	background: #b7a78f;
	color: #fff;
	width:90px;
	height:90px;
	border-radius: 50%;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom:-20px;
	left: -20px;
}
@media screen and (max-width: 750px) {
	.step .step_logo{
		font-size: 14px;
		width:70px;
		height:70px;
		bottom:-10px;
		left: -10px;
	}
}
.step .step_logo span{
	font-size: 28px;
}
@media screen and (max-width: 750px) {
	.step .step_logo span{
		font-size: 24px;
	}
}
.step .title_text{
	border-bottom: 2px solid #b7a78f;
	padding-left: 90px;
	font-size: 24px;
	line-height: 1.38;
}
@media screen and (max-width: 750px) {
	.step .title_text{
		padding-left: 70px;
		font-size: 24px;
	}
}
.step .none_logo .text{
	width:430px;
	padding-left: 70px;
}
@media screen and (max-width: 750px) {
	.step .none_logo .text{
		width:90%;
		margin:30px auto 20px;
		text-align: left;
		padding-left: 0;
	}
}
.step .none_logo .title_text{
	font-size: 20px;
	padding-left: 10px;
}