@charset "utf-8";

@media (max-width: 481px) {
	.page-kv .inner-kv { padding: 32px 0;}
}


#flow .inner-sct { padding: 60px 0 120px;}
#flow .bloc { width: 90%; max-width: 1000px; margin: 0 auto; padding: 30px; border: solid 6px #003C88;}
#flow .bloc .ctn-flex { display: flex; justify-content: space-between; width: 100%;}
#flow .bloc .txt { width: 65%;}
#flow .bloc .pht { width: 30%;}
#flow .bloc .txt .tit { position: relative; margin-bottom: 20px; padding: 8px; padding-left: 100px;}
#flow .bloc .txt .tit .no { width: 72px; height: 72px; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#flow .bloc .txt .tit .no span { display: block; width: 100%; height: 100%; background: #FFB300; border: solid 3px #003C88; border-radius: 50%;
 color: #003C88; font-size: 50px; font-size: min(4.5vw,50px); font-weight: 700; line-height: 64px; text-align: center;
}

#flow .bloc .txt .tit h3 { color: #003C88; font-size: 36px; font-size: min(3.2vw,36px); font-weight: 700;}
#flow .bloc .txt p { font-size: 18px; font-size: min(1.25vw,18px); letter-spacing: 0.05rem;}
#flow .bloc .btn { width: 240px; margin-top: 12px;}
#flow .bloc .btn a { display: block; padding: 8px 0; background: #FFB300; border-radius: 5px; box-shadow: 5px 5px 0 #333;
 color: #333; font-size: 16px; font-weight: 700; text-align: center; text-decoration: none;
}
#flow .bloc .btn a:hover { opacity: 0.8;}
#flow .bloc .pht figure img { width: 100%;}
#flow .arw { padding: 30px 0;}
#flow .arw:before { content: ''; display: block; width: 0px; height: 0px; margin: 0 auto;
 border: solid 100px transparent; border-top: solid 30px #003C88; border-bottom: 0;
}
@media (max-width: 1281px) {
}
@media (max-width: 1001px) {
	#flow .bloc .txt .tit { margin-bottom: 12px; padding-left: 80px;}
	#flow .bloc .txt .tit .no { width: 60px; height: 60px;}
	#flow .bloc .txt .tit .no span { font-size: 5.0vw; line-height: 52px;}
	#flow .bloc .txt .tit h3 { font-size: 4.0vw;}
	#flow .bloc .txt p { font-size: 16px;}
}
@media (max-width: 641px) {
	#flow .bloc { border-width: 4px;}
	#flow .bloc .ctn-flex { display: block;}
	#flow .bloc .txt { width: 100%; margin: 0 auto 30px;}
	#flow .bloc .pht { width: 100%;}
	#flow .bloc .btn { width: 80%; max-width: 240px; margin: 12px auto 0;}
	#flow .bloc .pht figure { text-align: center;}
	#flow .bloc .pht figure img { width: 80%; max-width: 320px;}
	#flow .arw { padding: 20px 0;}
	#flow .arw:before { border: solid 60px transparent; border-top: solid 20px #003C88; border-bottom: 0;}
}
@media (max-width: 481px) {
	#flow .inner-sct { padding: 40px 0 80px;}
	#flow .bloc { padding: 20px 25px; border-width: 3px;}
	#flow .bloc .txt .tit { margin-bottom: 8px; padding: 6px; padding-left: 50px;}
	#flow .bloc .txt .tit .no { width: 40px; height: 40px;}
	#flow .bloc .txt .tit .no span { border-width: 2px; font-size: 24px; line-height: 36px;}
	#flow .bloc .txt .tit h3 { font-size: 21px;}
	#flow .bloc .txt p { font-size: 16px;}
	#flow .bloc .btn a { font-size: 14px}
}