@media screen and (min-width: 642px) {
	#flow{
		background: #f9f4ea;
		padding: 110px 0;
		.flow-box{
			width: 90%;
			max-width: 1150px;
			margin: 0 auto;
			h2{
				width: fit-content;
				font-size: 40px;
				font-weight: 500;
				padding: 0 110px;
				margin: 0 auto 40px;
				position: relative;
				&::before{
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
					content: "";
					width: 90px;
					height: 3px;
					background: #304434;
				}
				&::after{
					position: absolute;
					top: 50%;
					right: 0;
					transform: translateY(-50%);
					content: "";
					width: 90px;
					height: 3px;
					background: #304434;
				}
			}
			p.suggestion{
				font-size: 18px;
				text-align: center;
				line-height: 2;
				margin-bottom: 50px;
			}
			ul.flow-list{
				display: flex;
				justify-content: space-between;
				gap: 50px;
				li{
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 15px;
					width: 30%;
					&:not(:last-of-type){
						position: relative;
						&::after{
							position: absolute;
							top: 0%;
							right: -15%;
							content: "";
							width: 40px;
							height: 100%;
							background: url(../../_src/flow/arrow.png) no-repeat center / 100% auto;
						}
					}
					.num{
						display: flex;
						align-items: center;
						gap: 10px;
						span{
							display: flex;
							justify-content: center;
							align-items: center;
							width: 46px;
							aspect-ratio: 1/1;
							color: #fff;
							font-size: 25px;
							font-weight: 500;
							background: #1e2c22;
							border-radius: 50%;
						}
						p{
							color: #1e2c22;
							font-size: 28px;
							font-weight: 500;
						}
					}
					.text{
						display: flex;
						flex-direction: column;
						text-align: center;
						gap: 10px;
						flex: 1;
						b{
							display: block;
							font-size: 24px;
							font-weight: 700;
							line-height: 1.2;
						}
						p{
							font-size: 14px;
							font-weight: 500;
							line-height: 1.4;
							margin-top: auto;
						}
					}
				}
			}
			p.use{
				font-size: 25px;
				text-align: center;
				margin-top: 60px;
				span{
					text-emphasis: filled dot #555;
				}
			}
		}
	}
}
@media screen and (max-width: 641px) {
	#flow{
		background: #f9f4ea;
		padding: 60px 0;
		.flow-box{
			width: 90%;
			margin: 0 auto;
			h2{
				width: fit-content;
				font-size: 20px;
				font-weight: 500;
				text-align: center;
				padding: 0 20px;
				margin: 0 auto 30px;
				position: relative;
				&::before{
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
					content: "";
					width: 10px;
					height: 1px;
					background: #304434;
				}
				&::after{
					position: absolute;
					top: 50%;
					right: 0;
					transform: translateY(-50%);
					content: "";
					width: 10px;
					height: 1px;
					background: #304434;
				}
			}
			p.suggestion{
				font-size: 16px;
				text-align: center;
				line-height: 2;
				margin-bottom: 50px;
			}
			ul.flow-list{
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 50px;
				li{
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 15px;
					width: 70%;
					&:not(:last-of-type){
						position: relative;
						&::after{
							position: absolute;
							bottom: -50px;
							left: 50%;
							transform: translateX(-50%) rotate(90deg);
							content: "";
							width: 25px;
							height: 35px;
							background: url(../../_src/flow/arrow.png) no-repeat center / 100% auto;
						}
					}
					.num{
						display: flex;
						align-items: center;
						gap: 10px;
						span{
							display: flex;
							justify-content: center;
							align-items: center;
							width: 35px;
							aspect-ratio: 1/1;
							color: #fff;
							font-size: 18px;
							font-weight: 500;
							background: #1e2c22;
							border-radius: 50%;
						}
						p{
							color: #1e2c22;
							font-size: 22px;
							font-weight: 500;
						}
					}
					img{
						width: 70%;
					}
					.text{
						display: flex;
						flex-direction: column;
						text-align: center;
						gap: 10px;
						flex: 1;
						b{
							display: block;
							font-size: 20px;
							font-weight: 700;
							line-height: 1.2;
						}
						p{
							font-size: 12px;
							font-weight: 500;
							line-height: 1.4;
							margin-top: auto;
						}
					}
				}
			}
			p.use{
				font-size: 16px;
				text-align: center;
				margin-top: 30px;
				span{
					text-emphasis: filled dot #555;
				}
			}
		}
	}
}