@charset "utf-8";
/* CSS Document */

.flow_items {
}
.flow_item {
	background-color: #fff;
	border-bottom: 3px solid var(--tertiary-color_02);
	position: relative;
}
.flow_item:before {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	content: "";
	border-style: solid;
	border-color: var(--tertiary-color_02) transparent transparent;
}
.flow_item:after {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	content: "";
	border-style: solid;
	border-color: #fff transparent transparent;
}
.flow_item:last-child:before,
.flow_item:last-child:after {
	content: none;
}
.flow_item_inn {
}
.flow_item_title {
}
.flow_item_title_num {
	font-family: var(--secondary-font);
	color: var(--main-color);
	font-weight: bold;
	line-height: 1;
}
.flow_item_title_num:before {
	content: 'STEP';
}
.flow_item_body_title {
	color: var(--tertiary-color);
}
.flow_item_body_title > i {
}
.flow_item_body_text {
	line-height: 1.7;
}
.flow_item_days {
}
.flow_item_days_text {
	color: var(--main-color);
	font-weight: bold;
}
.flow_item_days_text:before {
	content: '作業日数';
	font-weight: normal;
}
.flow_item_days_text_small {
}
.flow_item_days_text_small:before {
	content: '最短';
	font-weight: normal;
}
.flow_item_days_text_small:after {
	content: '日';
	font-weight: normal;
}


/* --------------------------------------------------
PC
-------------------------------------------------- */
@media screen and (min-width: 768px) {

	.flow_items {
	}
	.flow_item {
		margin-bottom: 20px;
		padding: 20px 0 30px;
	}
	.flow_item:before {
		bottom: -19px;
		border-width: 16px 16px 0 16px;
	}
	.flow_item:after {
		bottom: -14px;
		border-width: 14px 14px 0 14px;
	}
	.flow_item_inn {
		display: grid;
		grid-template-columns: 25% 1fr 15%;
		grid-row-gap: 10px;
	}
	.flow_item_title {
		grid-column: 1 / 2;
		grid-row: 1 / 3;
		display: flex;
		justify-content: center;
	}
	.flow_item_title_num {
		display: flex;
		align-items: center;
		font-size: 120px;
	}
	.flow_item_title_num:before {
		font-size: 24px;
	}
	.flow_item_body_title {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
		display: flex;
		align-items: center;
		font-size: 24px;
		margin-bottom: 10px;
	}
	.flow_item_body_title > i {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		font-size: 18px;
		color: #fff;
		background: var(--tertiary-color);
		border-radius: 100px;
		margin-right: 10px;
		padding: 10px;
	}
	.flow_item_body_text {
		grid-column: 2 / 3;
		grid-row: 2 / 3;
		font-size: 15px;
	}
	.flow_item_days {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		grid-column: 3 / 4;
		grid-row: 2 / 3;
	}
	.flow_item_days_text {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 80px;
		height: 80px;
		font-size: 16px;
		border: 1px solid var(--main-color_04);
		border-radius: 100px;
	}
	.flow_item_days_text:before {
		font-size: 11px;
		font-weight: normal;
	}
	.flow_item_days_text_small {
	}
	.flow_item_days_text_small:before {
		font-size: 11px;
		margin-right: 3px;
	}
	.flow_item_days_text_small:after {
		font-size: 11px;
		margin-left: 1px;
	}
}


/* --------------------------------------------------
スマホ
-------------------------------------------------- */
@media all and (max-width: 767px) {

	.flow_items {
		width: var(--sp_main-width);
		margin: 0 auto;
	}
	.flow_item {
		margin-bottom: 5vw;
		padding: 5vw 1.5vw 7.5vw;
	}
	.flow_item:before {
		bottom: -19px;
		border-width: 16px 16px 0 16px;
	}
	.flow_item:after {
		bottom: -14px;
		border-width: 14px 14px 0 14px;
	}
	.flow_item_inn {
		display: grid;
		grid-template-columns: 17.5% 1fr;
		grid-row-gap: 2vw;
	}
	.flow_item_title {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
	}
	.flow_item_title_num {
		display: flex;
		align-items: baseline;
		font-size: 7.5vw;
		line-height: 1;
	}
	.flow_item_title_num:before {
		font-size: 5vw;
		line-height: 1;
		margin-right: 1vw;
	}
	.flow_item_body_title {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
		display: flex;
		align-items: end;
		font-size: 5vw;
		line-height: 1;
		padding-bottom: 0.5vw;
	}
	.flow_item_body_title > i {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 5vw;
		margin-right: 2vw;
	}
	.flow_item_body_text {
		grid-column: 1 / 3;
		grid-row: 2 / 3;
		font-size: 3.5vw;
	}
	.flow_item_days {
		grid-column: 1 / 3;
		grid-row: 3 / 4;
	}
	.flow_item_days_text {
		font-size: 4.5vw;
		text-align: right;
		margin-top: -3vw;
	}
	.flow_item_days_text:before {
		font-size: 3.25vw;
		margin-right: 1vw;
	}
	.flow_item_days_text_small {
	}
	.flow_item_days_text_small:before {
		font-size: 3.25vw;
		margin-right: 1vw;
	}
	.flow_item_days_text_small:after {
		font-size: 3.25vw;
		margin-left: 0.5vw;
	}
}