@charset "UTF-8";
/*--------------------------------------------------
**************************************************
  PC
**************************************************
--------------------------------------------------*/
#flow_catch {
	padding:120px 5%;
	background:#efefef;
	text-align:center;
}
#flow_catch h2 {
	font-size:7rem;
	font-weight:800;
}
#flow_catch p {
	margin-top:60px;
	font-size:2.4rem;
	font-weight:700;
	line-height:2;
}

.flow_content {
	width:1040px;
	max-width:90%;
	margin-left:auto;
	margin-right:auto;
	position:relative;
}
.flow_content::before {
	content:"";
	width:1px;
	height:calc(100% - 100px);
	background:#22AFC3;
	position:absolute;
	left:40px;
}
.flow_inner {
	display:flex;
	justify-content:space-between;
}
.flow_inner:not(:first-child) {
	align-items:center;
}
.flow_inner p.step {
	width:80px;
	color:#22AFC3;
	font-family:Roboto;
	font-size:2.8rem;
	font-weight:700;
	font-style:italic;
	text-align:center;
	line-height:1;
	position:relative;
}
.flow_inner p.step span.number {
	display:block;
	font-size:7rem;	
}
.flow_inner:first-child p.step span {
	background:#FFF;
	position:relative;
	padding-bottom:10px;
}
.flow_inner:not(:first-child) p.step > span {
	position:relative;
	padding:20px 0 10px;
}
.flow_inner:not(:first-child) p.step span {
	background:#FFF;
}
.flow_inner .flow_text {
	width:calc(100% - 120px);
	border-bottom:1px solid #939393;
	padding:40px 0;
}
.flow_inner:first-child .flow_text {
	padding-top:0;
}
.flow_text.flex {
	display:flex;
	justify-content:space-between;
}
.flow_text.flex .flow_text_inner {
	width:calc(100% - 440px);
}
.flow_text.flex .flow_contact {
	width:380px;
}
.flow_text.flex .flow_contact .phone a {
	font-size:4rem;
	font-weight:600;
	display:block;
	line-height:1;
}
.flow_text.flex .flow_contact .phone p {
	font-size:1.6rem;
	font-weight:600;
}
.flow_inner .flow_text h3 {
	color:#22AFC3;
	font-size:3rem;
	font-weight:700;
}
.flow_inner .flow_text h3 span {
	background:#efefef;
	padding:0 20px 2px;
}
.flow_inner:not(:first-child) .flow_text p,
.flow_text.flex .flow_text_inner p {
	margin-top:20px;
	font-size:1.6rem;
	font-weight:600;
}

.end_catch {
	font-size:3.8rem;
	font-weight:700;
	text-align:center;
	margin:0 5%;
}


/*--------------------------------------------------
**************************************************
  PC - SP
**************************************************
--------------------------------------------------*/
@media screen and (min-width:768px) and ( max-width:1420px) {
	#flow_catch h2 {
		font-size:5rem;
	}
	#flow_catch p {
		margin-top:40px;
		font-size:2rem;
	}
}

@media screen and (min-width:768px) and ( max-width:1099px) {
	.flow_text.flex {
		flex-direction:column;
	}
	.flow_text.flex .flow_text_inner {
		width:100%;
	}
	.flow_text.flex .flow_contact {
		width:100%;
		margin-top:20px;
	}
}


/*--------------------------------------------------
**************************************************
  SP
**************************************************
--------------------------------------------------*/
@media screen and (max-width: 767px) {
	
	#flow_catch {
		padding:50px 5%;
	}
	#flow_catch h2 {
		font-size:3rem;
	}
	#flow_catch p {
		margin-top:30px;
		font-size:1.6rem;
	}
	
	.flow_content {
		width:90%;
		max-width:100%;
	}
	.flow_content::before {
		content:"";
		width:1px;
		height:calc(100% - 35vw);
		background:#22AFC3;
		position:absolute;
		left:2.5rem;
	}
	.flow_inner:not(:first-child) {
		align-items:start;
	}
	.flow_inner p.step {
		padding-top:30px;
		width:5rem;
		color:#22AFC3;
		font-family:Roboto;
		font-size:1.8rem;
		font-weight:700;
		font-style:italic;
		text-align:center;
		line-height:1;
		position:relative;
	}
	.flow_inner p.step span.number {
		display:block;
		font-size:4.4rem;	
	}
	.flow_inner:first-child p.step {
		padding-top:0;
	}
	.flow_inner p.step > span {
		position:relative !important;
		padding:0px !important;
	}
	.flow_inner p.step span.number {
		padding-bottom:20px;
	}
	.flow_inner .flow_text {
		width:calc(100% - 6.5rem);
		border-bottom:1px solid #939393;
		padding:30px 0;
	}
	.flow_inner:first-child .flow_text {
		padding-top:0;
	}
	.flow_text.flex {
		flex-direction:column;
	}
	.flow_text.flex .flow_text_inner {
		width:100%;
	}
	.flow_text.flex .flow_contact {
		width:100%;
		margin-top:20px;
	}
	.flow_text.flex .flow_contact .phone a {
		font-size:3.2rem;
		font-weight:600;
		display:block;
		line-height:1;
	}
	.flow_text.flex .flow_contact .phone p {
		font-size:1.6rem;
		font-weight:600;
	}
	.flow_inner .flow_text h3 {
		color:#22AFC3;
		font-size:2rem;
		font-weight:700;
	}
	.flow_inner .flow_text h3 span {
		background:#efefef;
		padding:5px 15px;
	}
	.flow_inner:not(:first-child) .flow_text p,
	.flow_text.flex .flow_text_inner p {
		margin-top:20px;
		font-size:1.4rem;
		font-weight:600;
	}
	.end_catch {
		font-size:1.8rem;
	}
	
}