.topVisual { width: 100%; background: #FFF; text-align: center; position: relative; margin: 90px 0 0; }
.topVisual .inner { width: 100%; position: relative; }
.topVisual li.top { height: 640px; position: relative; }
.topVisual li.top { background: url(../img/recruit/top.jpg); background-size: 2000px; background-position: center; }
.topVisual h2 { position: absolute; top: 230px; left: 50%; margin: 0 0 0 -500px; font-size: 80px; font-weight: 900; line-height: 90px; text-align: left; text-shadow: 1px 1px 0 #000C; color: #FFF;}
.topVisual h2 span { display: block; font-size: 60px; font-weight: 900; color: #E5EEF6; }


.topMessage { width: 100%; margin: 0; padding: 120px 0 0; float: left; }
.topMessage .inner { width: 1000px; }
.topMessage h3 { font-size: 16px; font-weight: 300; line-height: 20px; position: relative; border-bottom: solid 2px #D6D6D6; color: #005BAB; padding: 0 0 10px; }
.topMessage h3:after { content: ""; border-bottom: solid 2px #005BAB; width: 120px; position: absolute; bottom: -2px; }
.topMessage h3 span { display: block; color: #005BAB; font-size: 32px; font-weight: 900; line-height: 50px; color: #000; }
.topMessage p { margin: 80px 0 0; font-size: 20px; line-height: 40px; }


.topWork { width: 100%; margin: 0; padding: 120px 0 0; float: left; }
.topWork .inner { position: relative; }
.topWork section { position: absolute; top: 60px; width: 530px; background: #FFFC; z-index: 10; padding: 60px; box-sizing: border-box; }
.topWork section h3 { font-size: 40px; line-height: 60px; position: relative; }
.topWork section h3:after { content: ""; border-bottom: solid 2px #005BAB; width: 40px; position: absolute; bottom: 40px; }
.topWork section h3 span { display: block; color: #005BAB; font-size: 20px; line-height: 40px; }
.topWork section p { font-size: 16px; line-height: 30px; margin: 40px 0; }
.topWork section a { width: 330px; height: 70px; display: block; color: #005BAB; border-radius: 35px; text-align: center; line-height: 66px; font-size: 16px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; border: solid 2px #005BAB; }
.topWork section a i { float: right; line-height: 70px; }
.topWork figure { float: right; }

.topBenefit { width: 100%; margin: 0; padding: 120px 0 0; float: left; }
.topBenefit .inner { position: relative; }
.topBenefit section { position: absolute; top: 60px; right: 0; width: 530px; background: #FFFC; z-index: 10; padding: 60px; box-sizing: border-box; }
.topBenefit section h3 { font-size: 40px; line-height: 60px; position: relative; }
.topBenefit section h3:after { content: ""; border-bottom: solid 2px #005BAB; width: 40px; position: absolute; bottom: 40px; }
.topBenefit section h3 span { display: block; color: #005BAB; font-size: 20px; line-height: 40px; }
.topBenefit section p { font-size: 16px; line-height: 30px; margin: 40px 0; }
.topBenefit section a { width: 330px; height: 70px; display: block; color: #005BAB; border-radius: 35px; text-align: center; line-height: 66px; font-size: 16px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; border: solid 2px #005BAB; }
.topBenefit section a i { float: right; line-height: 70px; }
.topBenefit figure { }

.topStaff { width: 100%; margin: 0; padding: 120px 0 0; float: left; }
.topStaff .inner { position: relative; }
.topStaff section { position: absolute; top: 60px; width: 530px; background: #FFFC; z-index: 10; padding: 60px; box-sizing: border-box; }
.topStaff section h3 { font-size: 40px; line-height: 60px; position: relative; }
.topStaff section h3:after { content: ""; border-bottom: solid 2px #005BAB; width: 40px; position: absolute; bottom: 40px; }
.topStaff section h3 span { display: block; color: #005BAB; font-size: 20px; line-height: 40px; }
.topStaff section p { font-size: 16px; line-height: 30px; margin: 40px 0; }
.topStaff section a { width: 330px; height: 70px; display: block; color: #005BAB; border-radius: 35px; text-align: center; line-height: 66px; font-size: 16px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; border: solid 2px #005BAB; }
.topStaff section a i { float: right; line-height: 70px; }
.topStaff figure { float: right; }

@media only screen and (max-width: 1600px) {
}

@media only screen and (max-width: 1260px) {
	.topVisual { width: 100%; margin-top: 70px; }
	.topVisual .inner { width: 100%; position: relative; }
	.topVisual li.top { height: 330px; position: relative; }
	.topVisual li.top { background-size: cover; }
	.topVisual h2 { position: absolute; top: 130px; left: 80px; margin: 0; font-size: 40px; line-height: 50px; }
	.topVisual h2 span { font-size: 30px; line-height: 40px; }


	.topMessage { padding: 80px 20px 0; box-sizing: border-box; }
	.topMessage .inner { width: 100%; }
	.topMessage p { margin: 40px 0 0; font-size: 18px; line-height: 35px; }

	.topWork { padding: 80px 0 0; }
	.topWork .inner { }
	.topWork section { width: 50vw; }
	.topWork section h3 { }
	.topWork section h3:after { }
	.topWork section h3 span { }
	.topWork section p { }
	.topWork section a { width: 300px; height: 60px; border-radius: 30px; line-height: 56px; padding: 0 15px; }
	.topWork section a i { line-height: 60px; }
	.topWork figure { }

	.topBenefit { padding: 80px 0 0; }
	.topBenefit .inner { }
	.topBenefit section { width: 50vw; }
	.topBenefit section h3 { }
	.topBenefit section h3:after { }
	.topBenefit section h3 span { }
	.topBenefit section p { }
	.topBenefit section a { width: 300px; height: 60px; border-radius: 30px; line-height: 56px; padding: 0 15px; }
	.topBenefit section a i { line-height: 60px; }
	.topBenefit figure { }

	.topStaff { padding: 80px 0 0; }
	.topStaff .inner { }
	.topStaff section { width: 50vw; }
	.topStaff section h3 { }
	.topStaff section h3:after { }
	.topStaff section h3 span { }
	.topStaff  section p { }
	.topStaff section a { width: 300px; height: 60px; border-radius: 30px; line-height: 56px; padding: 0 15px; }
	.topStaff section a i { line-height: 60px; }
	.topStaff figure { }

}


@media only screen and (max-width: 520px) {
	.topVisual { width: 100%; margin-top: 70px; }
	.topVisual .inner { width: 100%; position: relative; }
	.topVisual li.top { height: 330px; position: relative; }
	.topVisual li.top { background-size: cover; }
	.topVisual h2 { position: absolute; top: 130px; left: 40px; margin: 0; font-size: 40px; line-height: 50px; }
	.topVisual h2 span { font-size: 30px; line-height: 40px; }



	.topMessage { padding: 40px 20px 0; }

	.topWork { }
	.topWork .inner { }
	.topWork section { position: static; padding: 0 40px 40px; width: 100%; }
	.topWork section h3 { text-align: center; }
	.topWork section h3:after { margin-left: -20px; }
	.topWork section h3 span { }
	.topWork section p { font-size: 18px; line-height: 30px; margin: 20px 0; }
	.topWork section a { width: 100%; font-size: 20px; }
	.topWork section a i { }
	.topWork figure { float: none; }

	.topBenefit { }
	.topBenefit .inner { }
	.topBenefit section { position: static; padding: 0 40px 40px; width: 100%; }
	.topBenefit section h3 { text-align: center; }
	.topBenefit section h3:after { margin-left: -20px; }
	.topBenefit section h3 span { }
	.topBenefit section p { font-size: 18px; line-height: 30px; margin: 20px 0; }
	.topBenefit section a { width: 100%; font-size: 20px; }
	.topBenefit section a i { }
	.topBenefit figure { float: none; }

	.topStaff { }
	.topStaff .inner { }
	.topStaff section { position: static; padding: 0 40px 40px; width: 100%; }
	.topStaff section h3 { text-align: center; }
	.topStaff section h3:after { margin-left: -20px; }
	.topStaff section h3 span { }
	.topStaff section p { font-size: 18px; line-height: 30px; margin: 20px 0; }
	.topStaff section a { width: 100%; font-size: 20px; }
	.topStaff section a i { }
	.topStaff figure { float: none; }

}