.useTop { height: 310px; background: url(../img/use/top.jpg) center; background-size: cover; position: relative; border-radius: 0 0 1000px 1000px / 0 0 100px 100px; margin: 90px -100px 0; padding: 90px 0 0; box-sizing: border-box; }
.useTop h2 { display: block; font-size: 60px; line-height: 80px; color: #FFF; text-shadow: 0 0 10px #0003; }
.useTop h2 span { display: block; font-size: 30px; font-weight: bold; line-height: 40px; }

.useFlow { padding: 60px 0 120px; background: #FFF; position: relative; }
.useFlow:before { content: ""; display: block; width: 100%; height: 120px; background-color: #FCE883; background-image: radial-gradient(#FFF6 2px, transparent 0), radial-gradient(#FFF6 2px, transparent 0); background-size: 20px 20px; background-position: 0 0, 10px 10px; position: absolute; bottom: 0; }
.useFlow:after { content: ""; display: block; width: calc(100% + 240px); height: 120px; background: #FFF; position: absolute; bottom: 0; border-radius: 0 0 1000px 1000px / 0 0 100px 100px; margin: 0 -100px; }

.useFlow h3 { font-size: 60px; font-weight: 900; line-height: 60px; text-align: center; padding: 60px 0 0; }
.useFlow h3 span { display: block; color: #0067B7; font-size: 30px; line-height: 30px; margin: 20px 0 0; }

.useFlow ol { margin: 60px 0 0; }
.useFlow ol li { width: 1000px; margin: 80px auto 0; position: relative; }
.useFlow ol li div { }
.useFlow ol li h4 { line-height: 70px; font-size: 40px; color: #00C1DE; }
.useFlow ol li h4 b { display: inline-block; margin-right: 10px; width: 60px; line-height: 60px; text-align: center; border-radius: 30px; color: #FFF; background: #00C1DE;}
.useFlow ol li p { font-size: 20px; line-height: 30px; margin: 10px 0 0; padding: 40px 360px 40px 40px; background: #FEFAE6; border-radius: 20px; }
.useFlow ol li figure img { position: absolute; top: 0; right: 20px; width: 300px; border-radius: 10px; }

.useFlow ol li:nth-child(2) h4 { color: #00BA71; }
.useFlow ol li:nth-child(2) h4 b { background: #00BA71; }
.useFlow ol li:nth-child(3) h4 { color: #FF8901; }
.useFlow ol li:nth-child(3) h4 b { background: #FF8901; }
.useFlow ol li:nth-child(4) h4 { color: #F43545; }
.useFlow ol li:nth-child(4) h4 b { background: #F43545; }
.useFlow ol li:nth-child(5) h4 { color: #E74692; }
.useFlow ol li:nth-child(5) h4 b { background: #E74692; }


.useFee { padding: 120px 0; background-color: #FCE883; background-image: radial-gradient(#FFF6 2px, transparent 0), radial-gradient(#FFF6 2px, transparent 0); background-size: 20px 20px; background-position: 0 0, 10px 10px; position: relative; border-radius: 0 0 1000px 1000px / 0 0 100px 100px; margin: 0 -100px; }
.useFee:before { content: ""; display: block; width: 100%; height: 120px; background: #FFF; position: absolute; bottom: 0; }
.useFee:after { content: ""; display: block; width: calc(100% + 240px); height: 120px; background-color: #FCE883; background-image: radial-gradient(#FFF6 2px, transparent 0), radial-gradient(#FFF6 2px, transparent 0); background-size: 20px 20px; background-position: 0 0, 10px 10px; position: absolute; bottom: 0; border-radius: 0 0 1000px 1000px / 0 0 100px 100px; margin: 0 -100px; }

.useFee h3 { font-size: 60px; font-weight: 900; line-height: 60px; text-align: center; margin: 0; }
.useFee h3 span { display: block; color: #0067B7; font-size: 30px; line-height: 30px; margin: 20px 0 0; }

.useFee h4 { background: #0067B7; font-size: 24px; color: #FFF; line-height: 60px; text-align: center; border-radius: 20px; }
.useFee h5 { font-size: 24px; font-weight: bold; line-height: 30px; margin: 30px 0 0; color: #0067B7; }
.useFee p { font-size: 20px; linbe-height: 30px; margin: 10px 0 0; }
.useFee section { width: 1100px; margin: 60px auto 0; padding: 40px; border-radius: 20px; background: #FFF; box-sizing: border-box; }
.useFee section table { width: 100%; margin: 30px 0 0; font-size: 20px; line-height: 30px; border-collapse: collapse; }
.useFee section th { padding: 20px; border: solid 2px #D6D6D6; background: #FDF7EE; }
.useFee section td { padding: 20px; border: solid 2px #D6D6D6; text-align: center; }
.useFee section td span { font-size: 16px; }

@media only screen and (max-width: 1260px) {
	.useTop { margin-top: 60px; }
	.useTop .inner { width: calc(100% - 200px); padding: 0 15px; }

	.useFlow .inner { width: 100%; padding: 0 15px; }
	.useFlow ol li { width: 100%; }
	
	.useFee .inner { width: calc(100% - 200px); padding: 0 15px; }
	.useFee section { width: 100%; }


}


@media only screen and (max-width: 520px) {
	.useTop { height: 140px; margin-top: 60px; padding: 0; }
	.useTop .inner { width: calc(100% - 200px); padding: 30px 15px 0; }
	
	.useTop h2 { font-size: 32px; ; line-height: 40px; }
	.useTop h2 span { font-size: 16px; line-height: 20px; }


	.useFlow { padding: 60px 0; margin: 0; }
	.useFlow .inner { padding: 0 15px; }
	.useFlow:before { height: 60px;}
	.useFlow:after { height: 60px;}
	.useFlow h3 { font-size: 32px; ; line-height: 40px; padding: 0; }
	.useFlow h3 span { font-size: 16px; line-height: 20px; }

	.useFlow ol li h4 { line-height: 50px; font-size: 32px; }
	.useFlow ol li h4 img { height: 50px; }
	.useFlow ol li p { font-size: 16px; line-height: 25px; margin: 15px 0 0; padding: 15px; border-radius: 10px 10px 0 0; }
	.useFlow ol li figure { border-radius: 0 0 10px 10px; background: #FEFAE6; text-align: center; padding: 0 15px 15px; }
	.useFlow ol li figure img { position: static; width: 100%; border-radius: 5px; }


	.useFee { padding: 60px 0; margin: 0; }
	.useFee .inner { width: 100%; padding: 0 15px; }
	.useFee h3 { font-size: 32px; ; line-height: 40px; }
	.useFee h3 span { font-size: 16px; line-height: 20px; }

	.useFee:before { height: 60px;}
	.useFee:after { height: 60px;}


	.useFee h4 { font-size: 24px; line-height: 40px; }
	.useFee h5 { font-size: 20px; line-height: 30px; margin: 30px 0 0; }
	.useFee p { font-size: 16px; line-height: 25px; }
	
	.useFee section { width: 100%; margin: 30px 0 0; padding: 15px; border-radius: 10px; }
	.useFee section table { margin: 15px 0 0; font-size: 16px; line-height: 25px; }
	.useFee section th { padding: 10px; }
	.useFee section td { padding: 10px; }
	.useFee section td span { font-size: 16px; }

}