/* CSS Document */
@import url("reset.css");
@import url("common.css");
@import url("styles.css");

/* h2
---------------------------------------------------------- */
.h2_hanger.flow::after{ background-image: url(../img/flow/h2_bg.jpg);}


/* contents
---------------------------------------------------------- */
.flow_list{ margin: 50px 0;}

.flow_item{
	position: relative;
	margin: 0;
	padding: 0 0 30px 0;
	-webkit-box-align: flex-start;
	align-items: flex-start;
	flex-wrap: nowrap;
}
.flow_item::before{
	content: '';
	position: absolute;
	top: 20px;
	left: 25px;
	z-index: 1;
	height: 100%;
	border-left: 1px solid var(--gldColor);
}

.flow_item:last-child{ padding: 0;}
.flow_item:last-child::before{ display: none;}

.flow_no p{
	position: relative;
	z-index: 2;
	display: inline-block;
	margin-top: 20px;
	width: 50px;
	height: 50px;
	background-color: var(--gldColor);
	border-radius: 50%;
	color: #fff;
	font-size: 2.0rem;
	font-weight: 700;
	line-height: 46px;
	text-align:center;
}

.flow_txt{
	width: calc(100% - 70px);
	padding: max(4vw, 20px);
	background-color: var(--subBgColor);
	border-radius: 20px;
}

.flow_txt h4{
	margin-top: 0;
	padding-top: 0;
}

.flow_txt a[href^="tel:"]{
	display: inline-block;
	margin: 0 5px;
	color: var(--gldColor) !important;
	font-size: 2.0rem;
	font-weight: 700;
	line-height: 1;
}

.flow_txt .is-layout-flex{ margin: 20px 0 0 0;}

@media screen and (max-width: 690px){
	.flow_item::before{ left: 20px;}
	.flow_no p{
		width: 40px;
		height: 40px;
		font-size: 1.8rem;
		line-height: 36px;
	}
	.flow_txt{ width: calc(100% - 50px);}
	.flow_txt a[href^="tel:"]{
		padding: 3px 1rem 6px;
		border: 1px solid var(--gldColor);
		border-radius: 3rem;
		font-size: 1.4rem;
	}
}