@charset "UTF-8";

/*------------------------------------------------------------
	mv
------------------------------------------------------------*/
.page_mv {
	background-image: url(../img/flow/mv-bg-sp.jpg);
}

@media screen and (min-width: 768px) {
	.page_mv {
		background-image: url(../img/flow/mv-bg-pc.jpg);
	}
} /* ----- media END ----- */

/*------------------------------------------------------------
	ステップ
------------------------------------------------------------*/
.flow_step > li {
	position: relative;
	margin-bottom: 60px;
	padding: 30px;
	border: 1px solid #DDE1E5;
	counter-increment: number;
}
.flow_step > li:not(:last-child):after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -1px;
	-webkit-transform: translate(-50%,100%);
	transform: translate(-50%,100%);
	width: 30px;
	height: 60px;
	background: #F3F3F3;
}
.flow_step__box {
	margin-bottom: 15px;
}
.flow_step__ttl:before {
	content: 'STEP.0' counter(number);
	display: block;
	margin-bottom: 5px;
	color: #19253A;
	font-family: 'Mukta',sans-serif;
	font-size: 1.6rem;
}
.flow_response {
	margin-top: 15px;
	padding-bottom: 10px;
}
.flow_response__tel {
	margin-bottom: 20px;
}
.flow_response__tel a {
	padding: 12px 0;
	border: 1px solid #19253A;
	border-radius: 10px;
	text-align: center;
}
.flow_response__tel--num {
	margin-bottom: -2px;
	font-size: 3.6rem;
	font-weight: bold;
	line-height: 1;
}
.flow_response__tel--ico {
	position: relative;
	top: 3px;
	margin-right: 5px;
	font-size: 2.5rem;
}
.flow_response__tel--time {
	font-size: 1.4rem;
}
.flow_response__contact .btn {
	padding: 13px 0;
	font-size: 1.4rem;
}
.flow_response__contact .btn .ico_mail {
	margin-right: 10px;
}

@media screen and (max-width: 374px) {
	.flow_response__tel--num {
		font-size: 3rem;
	}
} /* ----- media END ----- */

@media screen and (min-width: 768px) {
	.flow_step > li {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		align-items: flex-start;
		flex-direction: row-reverse;
	}
	.flow_step__img {
		width: 35%;
		margin-right: 30px;
	}
	.flow_step__box {
		width: 65%;
	}
	.flow_response__tel a {
		padding: 0;
		border: none;
	}
	.flow_response__contact .btn {
		width: 221px;
	}
} /* ----- media END ----- */

@media screen and (min-width: 992px) {
	.flow_step__ttl:before {
		font-size: 1.8rem;
	}
	.flow_response {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
	}
	.flow_response__tel {
		margin-bottom: 0;
		margin-right: 20px;
	}
} /* ----- media END ----- */