@charset "UTF-8";
/*=======================================================
MV
=======================================================*/
.bl_lower_mv_ttl::after{
	background: url(../images/flow/mv_ttl.svg) top center / cover no-repeat;
	width: 37px;
}
@media screen and (max-width : 750px){
	.bl_lower_mv_ttl::after{
		width: 69px;
	}
}
/*=======================================================
flow
=======================================================*/
.bl_flow{
	padding: 40px 0 64px;
}
.bl_mediaList{
	gap: 80px;
}
.bl_media:has(.bl_media_ttl){
	background: #F6F2E8;
	padding: 32px;
	grid-template: auto 1fr / 464px auto;
	grid-template-areas: "imgWrapper title" "imgWrapper body";
	position: relative;
	gap: 18px 32px;
}
.bl_media::before{
	content: '';
	position: absolute;
	background: url(../images/flow/step01.svg) top center / contain no-repeat;
	width: 74px;
	height: 74px;
	top: 16px;
	left: 16px;
}
.bl_media:nth-of-type(2)::before{
	background: url(../images/flow/step02.svg) top center / contain no-repeat;
}
.bl_media:nth-of-type(3)::before{
	background: url(../images/flow/step03.svg) top center / contain no-repeat;
}
.bl_media:nth-of-type(4)::before{
	background: url(../images/flow/step04.svg) top center / contain no-repeat;
}
.bl_media:nth-of-type(5)::before{
	background: url(../images/flow/step05.svg) top center / contain no-repeat;
}
.bl_media:not(:last-of-type)::after{
	content: "";
	position: absolute;
	bottom: -32px;
	left: 50%;
	transform: translateX(-50%);
	border-left: 52px solid transparent;
	border-right: 52px solid transparent;
	border-top: 32px solid #F6F2E8;
}
.bl_media_ttl{
	color: #846160;
	padding: 0 0 2px 22px;
	position: relative;
}
.bl_media_ttl::before{
	content: '';
	position: absolute;
	background: #D2C3BC;
	width: 6px;
	height: 30px;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}
.bl_line{
	width: 207px;
}
.bl_line > img{
	object-fit: cover;
}
@media screen and (max-width : 750px){
	.bl_media:has(.bl_media_ttl){
		padding: 40px 30px 56px;
		grid-template: auto 1fr / 100% auto;
		grid-template-areas:"title" "imgWrapper" "body";
		gap: 32px;
	}
	.bl_media::before{
		width: 84px;
		height: 84px;
		top: 26px;
		left: 30px;
	}
	.bl_media_ttl{
		padding: 0 0 2px 32px;
		text-align: center;
	}
	.bl_media_ttl::before{
		content: none;
	}
	.bl_line{
		width: 350px;
		margin: 0 auto;
	}
}