.flow_description {
	max-width: 60rem;
	display: block;
	text-align: center;
	margin-inline: auto;
	margin-bottom: 2.5rem;
}

.flow_description p {
	display: inline-block;
	text-align: left;
}

/* ーーー ステップ 大枠  ーーー */

.flow_all-content {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1.5rem;
}

.flow_step-content {
	display: flex;
	justify-content: center;
	gap: .25rem;
}

@media (min-width: 960px) {
	.flow_all-content {
		display: flex;
		flex-direction: unset;
		align-items: stretch;
		gap: 1rem;
		padding-top: .75rem;
	}

	.flow_step-content {
		flex-direction: column;
		flex: 1;
	}
}

/* ーーー ステップ 番号 ーーー */

.flow_step {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.flow_step-content .flow_step::after {
	position: absolute;
	content: "";
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
	height: 110%;
	width: 4px;
	background: #C7ECE8;
	z-index: -1;
}

.flow_step-content:last-of-type .flow_step::after {
	display: none;
}

@media (min-width: 960px) {
	.flow_step-content .flow_step::after {
		transform: translateY(-50%);
		width: 100%;
		height: 4px;
	}
}

.flow_step-text {
	position: relative;
	font-size: .75rem;
	font-weight: var(--fw-lg);
	transform: scale(.75, 1.25);
	background-image: var(--c-gradient);
	-webkit-text-fill-color: transparent;
	background-clip: text;
	z-index: 10;
}

.flow_step-number {
	position: relative;
	font-weight: var(--fw-lg);
	font-size: 1.5rem;
	line-height: 1;
	transform: scale(.75, 1.25);
	background-image: var(--c-gradient);
	-webkit-text-fill-color: transparent;
	background-clip: text;
	z-index: 10;
}

.flow_step-bg {
	position: absolute;
	background: var(--c-light);
	border: 2px solid #C4C4C4;
	border-radius: 1000px;
	padding: 1.875rem;
}

/* ーーー ステップ 内容 ーーー */

.flow_content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.5rem 1.5rem;
	background: #FCFCFC;
	border: 1px solid #C4C4C4;
	border-radius: 10px;
	max-width: 30rem;
}

@media (min-width: 960px) {
	.flow_content {
		padding: 1.5rem .5rem;
		box-shadow: 2px 2px 4px rgba(0, 0, 0, .25);
		max-width: unset;
	}
}

.flow_img {
	text-align: center;
}

.flow_img img {
	max-width: 7.25rem;
	width: 100%;
}

@media (min-width: 600px) {
	.flow_img img {
		max-width: 12.5rem;
	}
}

.flow_title {
	font-size: 20px;
	font-weight: var(--fw-lg);
	text-align: center;
}

.flow_c-note {
	font-size: .875rem;
}

.flow_c-note-block {
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

@media (min-width: 600px) {
	.flow_c-note-block {
		gap: .5rem;
	}
}