@charset "UTF-8";



/* ------------------------------
	.mv
------------------------------ */
.mv{
	height: 495px;
	background: url(../img/flow/mv_img.jpg) no-repeat center center;
	background-size: cover;
}


@media screen and (max-width: 768px){
	.mv{
		height: 50vw;
	}
}



/* ------------------------------
	.flow
------------------------------ */
.flow{
	padding: 55px 0 180px;
}

.flow_wrap{
	position: relative;
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	padding: 40px 100px 35px;
	background: #fff;
	border: 15px solid #f8f0d2;
}

.flow_wrap + .flow_wrap{
	margin-top: 20px;
}

.flow_wrap .flow_box{
	display: flex;
	justify-content: space-between;
}

.flow_wrap .txt_box{
	width: 100%;
}

.flow_wrap .flow_box > .img{
	flex-shrink: 0;
	margin-left: 50px;
}

.flow_wrap .ttl_box{
	position: relative;
	min-height: 70px;
	padding-left: 25px;
	margin-bottom: 15px;
}

.flow_wrap .num{
	position: absolute;
	top: 0;
	left: -75px;
}

.flow_wrap .ttl{
	padding-top: 8px;
	margin-bottom: 0.4em;
	letter-spacing: 0.1em;
	font-size: 3.0rem;
	line-height: 1.4;
	word-break: break-all;
}
.flow_wrap .sub_ttl{
	font-size: 2.5rem;
	line-height: 1.6;
	word-break: break-all;
}

.flow_wrap .txt{
	word-break: break-all;
}

.flow_wrap .btn_wrap{
	display: flex;
	margin-top: 20px;
}

.flow_wrap .btn_wrap > * + *{
	margin-left: 25px;
}

.flow_wrap .btn_wrap .tel_box,
.flow_wrap .btn_wrap .btn{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 335px;
	max-width: 100%;
	height: 80px;
	text-align: center;
}

.flow_wrap .btn_wrap .tel_box{
	border: 1px solid #90c766;
}

.flow_wrap .btn_wrap .tel_box .txt a{
	font-size: 3.0rem;
	line-height: 1.1;
}

.flow_wrap .btn_wrap .tel_box .txt{
	font-size: 1.8rem;
}

.flow_wrap .btn_wrap .btn{
	font-size: 2.5rem;
}

.flow_wrap:nth-child(1) .img{
	position: absolute;
	top: 20px;
	right: 20px;
}

.flow_wrap:nth-child(10) .img{
	margin-top: 30px;
}

.flow_wrap:nth-child(11){
	background: url(../img/flow/flow_img07.jpg) no-repeat;
	background-position: calc(100% - 20px) bottom;
}


@media screen and (max-width: 768px){
	.flow{
		padding: 8vw 0 22vw;
	}

	.flow_wrap .num{
		top: 1vw;
		left: 0;
		width: 8vw;
	}

	.flow_wrap{
		padding: 6vw 4%;
		border-width: 10px;
	}

	.flow_wrap .flow_box{
		flex-direction: column;
	}

	.flow_wrap .ttl_box{
		min-height: 8vw;
		padding: 0;
		padding-left: 10vw;
		margin-bottom: 5vw;
	}

	.flow_wrap .flow_box > .img{
		width: 80%;
		margin: 8vw auto 0;
	}
	.flow_wrap .img img{
		width: 100%;
	}

	.flow_wrap .ttl{
		padding-top: 0;
		font-size: 5.8vw;
		letter-spacing: 0.05em;
	}
	.flow_wrap .sub_ttl{
		font-size: 4.8vw;
	}

	.flow_wrap .btn_wrap{
		flex-direction: column;
		margin-top: 5vw;
	}
	.flow_wrap .btn_wrap > * + *{
		margin-left: 0;
		margin-top: 3vw;
	}

	.flow_wrap .btn_wrap .tel_box,
	.flow_wrap .btn_wrap .btn{
		width: 100%;
		height: auto;
		padding: 2vw 0;
	}

	.flow_wrap .btn_wrap .btn{
		height: 17vw;
	}

	.flow_wrap .btn_wrap .tel_box .txt a{
		font-size: 5.8vw;
	}
	.flow_wrap .btn_wrap .tel_box .txt{
		font-size: 3.7vw;
	}

	.flow_wrap .btn_wrap .btn_box{
		width: 100%;
	}
	.flow_wrap .btn_wrap .btn{
		font-size: 5vw;
	}

	.flow_wrap:nth-child(1) .img{
		top: -15px;
		right: -15px;
		width: 45%;
		max-width: 277px;
		min-width: 140px;
	}

	.flow_wrap:nth-child(10) .img{
		margin-top: 6vw;
	}

	.flow_wrap:nth-child(11){
		padding-bottom: 18vw;
		background-size: 25%;
		background-position: 90% bottom;
	}
}