/*開発フロー*/
.flow footer{
	margin-top: 40px;
}
.flow_head{
	text-align: center;
	margin-top: 40px;
}
.flow_head h2{
	margin: 0;
	font-size: .9375rem;
	line-height: 1.5;
}
.flow_head p{
	text-align: left;
}

.flow_sec01{}
.flow_sec01_inner{}

.flow_sec01_wrap{
	gap: 50px 0;
	margin-top: 40px;
}
.flow_sec01_wrap .item{
	position: relative;
	width: 100%;
}
.flow_sec01_wrap .item::before{
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(90deg,rgba(198, 195, 194, 1) 0%, rgba(255, 255, 255, 0) 100%);
	width: 100%;
	height: 120px;
	z-index: 0;
	content: "";
}
.flow_sec01_wrap .item .inner{
	position: relative;
	z-index: 1;
}

.flow_sec01_wrap .step{
	justify-content: flex-start;
	align-items: center;
	position: absolute;
	top: -20px;
	left: 15px;
	width: 40%;
	color: rgb(var(--color_gold));
	z-index: 2;
}
.flow_sec01_wrap .step .cap{
	margin: 0;
	font-size: 1.5rem;
	line-height: 1;
}
.flow_sec01_wrap .step .num{
	margin: 0 0 0 5px;
	font-size: 3.125rem;
	line-height: 1;
	letter-spacing: 0em;
}

.flow_sec01_wrap .item img{
	position: absolute;
	top: 8px;
	left: 10px;
	/* width: 38%;
	height: auto; */
	width: auto;
	height: clamp(24%,50%,140px);
	z-index: 1;
}
.flow_sec01_wrap .item03 img{
	top: 25px;
	height: clamp(24%,50%,90px);
}
.flow_sec01_wrap .item05 img{
	top: 30px;
	height: clamp(24%,50%,80px);
}
.flow_sec01_wrap .item06 img{
	top: 30px;
	height: clamp(24%,50%,80px);
}

.flow_sec01_wrap .wrap{
	position: relative;
	padding: 20px 0 40px 40%;
	z-index: 3;
}
.flow_sec01_wrap .wrap h3{
	width: 100%;
	margin: 0;
	font-size: 4.7vw;
	line-height: 1.4;
}
.flow_sec01_wrap .wrap h4{
	border-top: solid 1px rgb(var(--color_text));
	width: 100%;
	margin: 8px 0 0;
	padding: 8px 0 0;
	font-size: .9375rem;
	line-height: 1.4;
}
.flow_sec01_wrap .bottom_txt{}
@media screen and (min-width: 769px) { /* PC用 メディアクエリー */
	/*開発フロー PC*/
	.flow footer{
		margin-top: 80px;
	}
	.flow_head{
		margin-top: 60px;
		padding-left: 60px;
		padding-right: 60px;
	}
	.flow_head h2{
		margin: 0;
		font-size: 1.375rem;
		line-height: 1.5;
	}
	.flow_head p{
		text-align: center;
		font-size: 1rem;
	}

	.flow_sec01{}
	.flow_sec01_inner{}

	.flow_sec01_wrap{
		gap: 50px 0;
		width: 100%;
		margin: 60px 0 0;
	}
	.flow_sec01_wrap .item{
		width: 100%;
		padding: 0 60px;
		z-index: 1;
	}
	.flow_sec01_wrap .item::before{
		position: absolute;
		top: 0;
		left: 0;
		background: linear-gradient(90deg,rgba(198, 195, 194, 1) 0%, rgba(255, 255, 255, 0) 100%);
		width: 800px;
		height: 260px;
		z-index: 0;
		content: "";
	}
	.flow_sec01_wrap .item .inner{
		position: relative;
		width: 1160px;
		max-width: 100%;
		margin: 0 auto;
		z-index: 1;
	}

	.flow_sec01_wrap .step{
		justify-content: flex-start;
		align-items: center;
		position: absolute;
		top: 20px;
		left: 15px;
		width: 40%;
		color: rgb(var(--color_gold));
		z-index: 2;
	}
	.flow_sec01_wrap .step .cap{
		margin: 0;
		font-size: 3rem;
	}
	.flow_sec01_wrap .step .num{
		margin: 0 0 0 5px;
		font-size: 6.25rem;
	}

	.flow_sec01_wrap .item img{
		top: 125px;
		left: 0;
		width: 280px;
		height: auto;
	}
	.flow_sec01_wrap .item:nth-of-type(even) img{
		top: -240px;
		left: inherit;
		right: 30px;
	}
	.flow_sec01_wrap .item04 img{
		top: -235px !important;
		width: 240px;
	}
	.flow_sec01_wrap .item06 img{
		top: -200px !important;
		width: 400px;
	}

	.flow_sec01_wrap .wrap{
		box-sizing: initial;
		position: relative;
		width: 396px;
		max-width: 100%;
		padding: 50px 0 0 300px;
		z-index: 3;
	}
	.flow_sec01_wrap .wrap h3{
		margin: 0;
		font-size: 1.375rem;
	}
	.flow_sec01_wrap .wrap h4{
		border-top: solid 1px rgb(var(--color_text));
		width: 205px;
		margin: 15px 0 0;
		padding: 15px 0 0;
		font-size: 1rem;
	}
	.flow_sec01_wrap .bottom_txt{
		box-sizing: initial;
		position: relative;
		width: 396px;
		max-width: 100%;
		padding-left: 300px;
		margin-top: 20px;
		z-index: 3;
	}

	.flow_sec01_wrap .item:nth-of-type(even){
		width: 1160px;
		max-width: 100%;
		margin: auto;
		padding: 0 0 0 60px;
	}
	.flow_sec01_wrap .item:nth-of-type(even) .inner{
		width: 800px;
		max-width: 100%;
		margin-left: auto;
		margin-right: 0;
		padding-right: 60px;
	}
	.flow_sec01_wrap .item:nth-of-type(even)::before{
		position: absolute;
		top: 0;
		left: inherit;
		right: 0;
		background: linear-gradient(90deg,rgba(198, 195, 194, 1) 0%, rgba(255, 255, 255, 0) 100%);
		width: 800px;
		height: 260px;
		z-index: 0;
		content: "";
	}
	.flow_sec01_wrap .item:nth-of-type(even) .step{
		left: inherit;
		right: 420px;
	}
	.flow_sec01_wrap .item:nth-of-type(even) .wrap{
		padding: 50px 0 0 0;
		margin: 0 0 0 auto;
	}
	.flow_sec01_wrap .item:nth-of-type(even) .bottom_txt{
		max-width: 100%;
		padding-left: 0;
		margin: 20px 0 0 auto;
	}
}
@media screen and (min-width: 769px) and (max-width: 1024px) { /* Tablet用 メディアクエリー */
	/* 開発フロー TAB */
	.flow_sec01_wrap .item,
	.flow_sec01_wrap .item:nth-of-type(even){
		width: 100%;
		width: 1160px;
		max-width: 100%;
		margin: 0 auto;
		padding: 0 60px;
	}
	.flow_sec01_wrap .item:nth-of-type(even)::before{
		left: 0;
		right: inherit;
	}
	.flow_sec01_wrap .step,
	.flow_sec01_wrap .item:nth-of-type(even) .step{
		left: 15px;
	}
	.flow_sec01_wrap .item img,
	.flow_sec01_wrap .item:nth-of-type(even) img{
		top: inherit !important;
		bottom: -15px;
		left: 10px;
		right: inherit;
		width: 180px !important;
	}
	.flow_sec01_wrap .item03 img{
		width: 200px !important;
	}
	.flow_sec01_wrap .item05 img{
		width: 220px !important;
	}
	.flow_sec01_wrap .item:nth-of-type(even).item06 img{
		width: 240px !important;
	}
	.flow_sec01_wrap .wrap,
	.flow_sec01_wrap .item:nth-of-type(even) .wrap{
		padding: 50px 0 0 300px;
	}
	.flow_sec01_wrap .item .wrap,
	.flow_sec01_wrap .item:nth-of-type(even) .bottom_txt{
		padding-left: 300px;
	}
}
@media (orientation: landscape) and (min-width: 519px) and (max-width: 896px) { /*スマホ横向き用*/
	/* 開発フロー スマホ横向き */

}
