/* ステップ全体のラップ */
.flow-item {
	position: relative;
	padding: 60px;
	background-color: #efefe5;
	margin-bottom: 80px;
	z-index: 1;
}

/* 下のV字切り込み */
.flow-arrow-separator {
	position: absolute;
	bottom: -80px;
	/* 矢印の高さ分だけ下に突き出す */
	left: 50%;
	/* 親の真ん中に配置 */
	transform: translateX(-50%);
	/* 自身の幅の半分だけ左に戻して完全中央へ */
	width: 100px;
	/* 指定の幅 */
	height: 80px;
	/* 矢印の高さ */
	background-color: #efefe5;
	/* シンプルな逆三角形の形 */
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	z-index: 10;
}

/* 最後の矢印を非表示にする 
.flow-item:last-child .flow-arrow-separator {
	display: none;
}
	*/


/* レイアウト：左右交互にする */
.flow-content-body {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	margin-top: 30px;
}

.flow-item:nth-child(even) .flow-content-body {
	flex-direction: row-reverse;
	/* 偶数番目は画像を左に */
}

/* テキストと画像それぞれの幅 */
.flow-text-area {
	flex: 1;
	text-align: justify;
}

.flow-image-area {
	width: 45%;
}

.flow-image-area img {
	width: 100%;
	height: auto;
}

/* ヘッダーの左右レイアウト */
.flow-header-flex {
	display: flex;
	align-items: flex-start;
	/* 上揃え、または center で中央揃え */
	gap: 30px;
	margin-bottom: 30px;
}

/* 左：アイコンの幅を固定 */
.flow-header-icon {
	flex-shrink: 0;
	width: 160px;
}

.flow-header-icon img {
	width: 100%;
	height: auto;
}

/* 右：テキスト群を横いっぱいに広げる */
.flow-header-text-group {
	flex-grow: 1;
}

/* 数字と見出しの横並び */
.flow-title-row {
	display: flex;
	align-items: baseline;
	gap: 15px;
}

.flow-number {
	font-size: 52px;
	font-weight: bold;
	color: #333;
	line-height: 1;
}

.flow-title {
	font-size: 32px;
	font-weight: bold;
	color: #ff7e7e;
	/* STEPごとに変更 */
}

/* 右側のエリア内で横100%に伸びる線 */
.flow-header-line {
	width: 100%;
	height: 2px;
	background-color: #333;
	margin: 8px 0;
}

.flow-lead {
	font-size: 19px;
	font-weight: bold;
	color: #333;
}

/* --- 下段の本文レイアウト（偶数番目の入れ替え） --- */
.flow-content-body {
	display: flex;
	gap: 40px;
	margin-top: 20px;
}

.flow-item:nth-child(even) .flow-content-body {
	flex-direction: row-reverse;
}