/* ==========================================================================
   Flow
========================================================================== */
#flow-list .flex:not(:last-of-type) {
	margin-bottom: 35px;
}

#flow-list .arrow,
#flow-list .no-arrow {
	flex: 0 0 30px;
	max-width: 30px;
	margin-right: 20px;
	padding-bottom: 15px;
}
#flow-list .arrow::before {
	border-width: 15px 0 0 15px;
	border-color: transparent transparent transparent #F9F9F9;
	left: 0;
}
#flow-list .arrow::after {
	border-width: 0 0 15px 15px;
	border-color: transparent transparent #F9F9F9 transparent;
	right: 0;
}

#flow-list .flowBox {
	flex: 0 0 calc(100% - 50px);
	max-width: calc(100% - 50px);
}
#flow-list .flowBox::before {
	left: 18px;
	bottom: -40px;
}
#flow-list .flex:last-of-type  ol li:last-of-type::before {
	left: 18px;
}

#flow-list .flowBox ol li:not(:last-of-type) {
	margin-bottom: 35px;
}
#flow-list .flowBox ol li .iconBox {
	flex: 0 0 40px;
	max-width: 40px;
	height: 40px;
}
#flow-list .flowBox ol li .iconBox svg {
	width: 20px;
	height: 20px;
	margin: 10px 0;
}
#flow-list .flowBox ol li .budge {
	margin-left: -30px;
}
#flow-list .flowBox ol li .txtBox {
	padding-left: 10px;
	line-height: 1.5;
}
#flow-list .flowBox ol li .txtBox .ttl {
	padding: 8px 0 4px;
}


@media only screen and (min-width: 768px) {
	#flow-list .arrow,
	#flow-list .no-arrow {
		flex: 0 0 60px;
		max-width: 60px;
		margin-right: 30px;
	}
	#flow-list .flowBox {
		flex: 0 0 calc(100% - 90px);
		max-width: calc(100% - 90px);
	}
	#flow-list .arrow::before {
		border-width: 30px 0 0 30px;
	}
	#flow-list .arrow::after {
		border-width: 0 0 30px 30px;
	}
	#flow-list .flowBox::before {
		left: 28px;
	}
	#flow-list .flowBox ol li .iconBox {
		flex: 0 0 60px;
		max-width: 60px;
		height: 60px;
	}
	#flow-list .flowBox ol li .iconBox svg {
		margin: 20px 0;
	}
	#flow-list .flowBox ol li .budge {
		margin-left: -20px;
	}
	#flow-list .flowBox ol li .txtBox {
		padding-left: 20px;
	}
	#flow-list .flowBox ol li .txtBox .ttl {
		padding: 4px 0;
	}
}