@charset "utf-8";
#flow { border-bottom: solid 1px #969696;}
#flow .inner-sct { padding: 80px 0 120px;}
#flow .box { width: 88%; max-width: 900px; margin: 0 auto; padding: 60px 40px; background: #dbf2f0;}
#flow .box .flex {  display: flex; justify-content: space-between;}
#flow .box .icn { width: 220px; text-align: center;}
#flow .box .txt { width: calc(100% - 260px);}
#flow .box .icn span { display: block; width: 100%; margin-bottom: 20px; padding: 8px 0;
 border-top: dashed 1px #969696; border-bottom: dashed 1px #969696;
 color: #00b4a5; font-size: clamp(21px,3.0vw,30px); letter-spacing: 0.05rem; line-height: 1;
}
#flow .box .icn img { width: 96%;}
#flow .box .txt h3 { margin-bottom: 20px; font-size: clamp(21px,3.0vw,30px); font-weight: 400; letter-spacing: 0.1rem; line-height: 1;}
#flow .box .txt p { font-size: 16px; letter-spacing: 0.1rem; line-height: 1.8;}
#flow .box .txt .btn { width: 80%; max-width: 360px; padding-top: 30px;}
#flow .box .txt .btn a { display: block; padding: 12px 0; border: solid 1px #373737;
 font-size: clamp(14px,2.0vw,18px); letter-spacing: 0.15rem; line-height: 1.4; text-align: center; text-decoration: none; transition: 0.3s ease;
}
#flow .box .txt .btn a:hover{ background: #373737; color: #fff;}

#flow .arw { position: relative; height: 100px;}
#flow .arw:after { content: ''; display: block; width: 40px; height: 40px; border-right: solid 1px #191919; border-bottom: solid 1px #191919;
 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-75%) rotate(45deg);
}

#flow .free { position: relative; width: 88%; max-width: 1000px; margin: 0 auto; padding: 30px 0; text-align: center;}
#flow .free:after { content: ''; display: block; width: 100%; height: 1px; border-top: dashed 1px #969696;
 position: absolute; left: 0; top: 50%; z-index: 1;
}
#flow .free span { position: relative; display: inline-block; padding: 0 20px; background: #fff; color: #00b4a5; font-size: clamp(18px,3.0vw,30px); z-index: 2;}
@media (max-width: 1281px) {
	#flow .box .icn { width: 180px;}
	#flow .box .txt { width: calc(100% - 200px);}
	#flow .box .txt p { font-size: 18px;}
}
@media (max-width: 801px) {
	#flow .box { padding: 30px;}
	#flow .box .icn { width: 25%;}
	#flow .box .icn span { font-size: 3.6vw;}
	#flow .box .txt { width: 70%;}
	#flow .box .txt h3 { font-size: 3.0vw;}
	#flow .box .txt p { font-size: 16px;}
	#flow .box .txt .btn { padding-top: 20px;}
	#flow .box .txt .btn a { padding: 8px 0;}
	#flow .arw { height: 60px;}
	#flow .arw:after { width: 30px; height: 30px;}
}
@media (max-width: 481px) {
	#flow .inner-sct { padding: 40px 0px;}
	#flow .box { padding: 20px 15px;}
	#flow .box .icn span { margin-bottom: 10px; padding: 4px 0; font-size: 14px;}
	#flow .box .txt h3 { margin-bottom: 10px; font-size: 14px; letter-spacing: 0.05rem;}
	#flow .box .txt p { font-size: 12px; letter-spacing: 0rem; line-height: 1.65; text-align: justify;}
	#flow .box .txt .btn { padding-top: 12px;}
	#flow .box .txt .btn a { padding: 6px 0; font-size: 12px; letter-spacing: 0rem;}
	#flow .arw { height: 50px;}
	#flow .arw:after { width: 20px; height: 20px;}
	#flow .free { padding: 20px 0;}
}