#header { background: none; height: 75px; box-shadow: none; }
#header #headerLogo a { top: 10px; color: #FFF; }
#header.is-animation { background: #FFFE; box-shadow: 0 0 10px #0001; }
#header.is-animation #headerLogo a { color: #000; }

#header ul { display: flex; }
#header li a { display: block; width: 200px; padding: 15px 0; font-size: 16px; font-weight: bold; line-height: 25px; text-align: center; color: #FFF; }
#header li a span { display: block; font-size: 12px; line-height: 20px; font-family: "Noto Serif JP"; }
#header li.job a { background: #308140; }
#header li.entry a { background: #FF903C; }

#footer { background: none; text-align: center; }
#footer .inner { display: block; padding: 80px 0 0; }
#footerLogo a { width: 260px; margin: 0 auto; }
#footer .footerSns { }
#footer .footerSns ul { display: flex; justify-content: center; }
#footer .footerSns ul li { margin: 40px 20px; }

.pagetop a { background: #30814033; }
.pagetop a:hover { background: #308140; }

.topVisual { width: 100%; background: #FFF; text-align: center; position: relative; margin: 0; }
.topVisual .inner { width: 100%; position: relative; }
.topVisual li.top1 { background: url(../img/recruit/top.jpg); }
.topVisual li.top { height: 100svh; position: relative; background-size: cover; background-position: center; }
.topVisual h2 { position: absolute; top: 40svh; right: 160px; font-size: 80px; line-height: 120px; text-align: left; font-family: "Noto Serif JP"; writing-mode: vertical-rl; }
.topVisual h2 span { display: block; font-size: 20px; font-weight: 400; line-height: 40px; text-align: left; font-family: "Noto Serif JP"; margin-right: 40px; color: #308140; }

.slick-dots li { width: 60px !important; }
.slick-dots li button:before{ color: #0168AB !important; content: "─	" !important; font-size: 40px !important; }
.slick-dots li.slick-active button:before { color: #0168AB !important; }

.topMessage { width: 100%; margin: 0; float: left; }
.topMessage h3 { font-size: 30px; line-height: 60px; position: relative; text-align: center; font-family: "Noto Serif JP"; }
.topMessage h3:after { content: ""; border-bottom: solid 2px #308140; width: 40px; position: absolute; bottom: -20px; margin-left: -20px; }
.topMessage h3 span { display: block; color: #308140; font-size: 20px; font-weight: 400; line-height: 40px; font-family: "Noto Serif JP"; }
.topMessage p { font-size: 18px; line-height: 35px; margin: 100px 0 0; text-align: center; }
.topMessage .message1 { width: 100%; padding: 120px 0; background: url(../img/recruit/message1.jpg); background-size: cover; background-position: bottom; }
.topMessage .message2 { width: 100%; padding: 120px 0; position: relative; background: url(../img/recruit/message2.jpg); background-size: 2000px; background-position: top; }
.topMessage .message2 h4 { font-size: 48px; line-height: 80px; text-align: left; font-family: "Noto Serif JP"; writing-mode: vertical-rl; color: #FFF; margin: 0 auto; padding-right: 760px; }

.topWork { width: 100%; margin: 0; padding: 120px 0; float: left; }
.topWork h3 { font-size: 30px; line-height: 60px; position: relative; text-align: center; font-family: "Noto Serif JP"; }
.topWork h3:after { content: ""; border-bottom: solid 2px #308140; width: 40px; position: absolute; bottom: -20px; margin-left: -20px; }
.topWork h3 span { display: block; color: #308140; font-size: 20px; font-weight: 400; line-height: 40px; font-family: "Noto Serif JP"; }
.topWork section { display: flex; margin-top: 120px; justify-content: space-between; }
.topWork section figure { order: 2; }
.topWork section figure img { width: 480px; border-radius: 20px; }
.topWork section div { margin-right: 80px; }
.topWork section div h4 { font-size: 30px; line-height: 60px; font-family: "Noto Serif JP"; }
.topWork section div h4 small { font-size: 20px; font-family: "Noto Serif JP"; }
.topWork section div p { font-size: 18px; line-height: 35px; margin-top: 10px; }
.topWork section div ul { box-shadow: 0 0 20px #0003; border-radius: 20px; padding: 20px 40px; margin-top: 40px; font-size: 18px; line-height: 35px; }
.topWork section div ul li { }
.topWork section div ul li b { color: #308140; margin-right: 0.5em; }
.topWork h5 { font-size: 18px; line-height: 35px; text-align: center; margin: 80px 0 0; }
.topWork h5+ul { display: flex; justify-content: center; }
.topWork h5+ul li { margin: 40px 20px 0; }

.topCandidate { width: 100%; margin: 0; padding: 120px 0; float: left; background: url(../img/recruit/candidate.jpg); background-size: 2000px; background-position: top; }
.topCandidate .inner { padding-left: 550px; }
.topCandidate h3 { font-size: 30px; line-height: 60px; position: relative; font-family: "Noto Serif JP"; margin: 0 0 40px; }
.topCandidate h3 span { display: block; color: #308140; font-size: 20px; font-weight: 400; line-height: 40px; font-family: "Noto Serif JP"; }
.topCandidate h4 { font-size: 18px; line-height: 35px; margin: 20px 0 0; }
.topCandidate h4 b { color: #308140; margin-right: 0.5em; }
.topCandidate p { font-size: 16px; line-height: 30px; }

.topJob { width: 100%; margin: 0; padding: 120px 0 0; float: left; }
.topJob h3 { font-size: 30px; line-height: 60px; position: relative; text-align: center; font-family: "Noto Serif JP"; }
.topJob h3:after { content: ""; border-bottom: solid 2px #308140; width: 40px; position: absolute; bottom: -20px; margin-left: -20px; }
.topJob h3 span { display: block; color: #308140; font-size: 20px; font-weight: 400; line-height: 40px; font-family: "Noto Serif JP"; }
.topJob ul.job-nav { display: flex; justify-content: center; margin: 120px 0 0; }
.topJob ul.job-nav li { width: 240px; line-height: 58px; text-align: center; font-size: 18px; font-weight: bold; border: solid 1px #308140; border-radius: 10px; color: #308140; margin: 0 10px; transition: .3s; }
.topJob ul.job-nav li.slick-current { background: #308140; color: #FFF; }
.topJob ul.job-list { margin: 40px 0 0; }
.topJob ul.job-list li { padding: 40px; }
.topJob ul.job-list li div { width: 1000px; padding: 80px; border-radius: 20px; box-sizing: border-box; box-shadow: 0 0 20px #0003; }
.topJob ul.job-list li div h4 { font-size: 30px; line-height: 30px; position: relative; text-align: center; font-family: "Noto Serif JP"; }
.topJob ul.job-list li div table { width: 100%; font-size: 16px; line-height: 30px; margin: 40px 0 0; border-collapse: collapse; }
.topJob ul.job-list li div table th { color: #308140; border-top: solid 2px #308140; padding: 10px 20px; }
.topJob ul.job-list li div table td { border-top: solid 2px #D6D6D6; padding: 10px 20px; }
.topJob ul.job-list li div a { display: block; width: 600px; margin: 40px auto 0; font-size: 20px; font-weight: bold; text-align: center; line-height: 60px; border-radius: 10px; background: #FF903C; color: #FFF; }

.topBenefit { width: 100%; margin: 0; padding: 80px 0 0; float: left; }
.topBenefit h3 { font-size: 30px; line-height: 60px; position: relative; text-align: center; font-family: "Noto Serif JP"; margin-bottom: 120px; }
.topBenefit h3:after { content: ""; border-bottom: solid 2px #308140; width: 40px; position: absolute; bottom: -20px; margin-left: -20px; }
.topBenefit h3 span { display: block; color: #308140; font-size: 20px; font-weight: 400; line-height: 40px; font-family: "Noto Serif JP"; }
.topBenefit section { display: flex; justify-content: space-between; align-items: center; background: #EAF2EC; }
.topBenefit section.initiative div { width: 50vw; display: flex; justify-content: end; flex-wrap: wrap; }
.topBenefit section.initiative div h4 { width: 600px; font-size: 30px; line-height: 60px; position: relative; font-family: "Noto Serif JP"; padding-right: 80px; box-sizing: border-box; }
.topBenefit section.initiative div h4 span { display: block; color: #308140; font-size: 20px; font-weight: 400; line-height: 30px; font-family: "Noto Serif JP"; }
.topBenefit section.initiative div h5 { width: 600px; font-size: 18px; line-height: 35px; color: #308140; margin: 20px 0 0; padding-right: 80px; box-sizing: border-box; }
.topBenefit section.initiative div p { width: 600px; font-size: 14px; line-height: 20px; padding-right: 80px; box-sizing: border-box; }
.topBenefit section.dormitry div { width: 50vw; display: flex; justify-content: start; flex-wrap: wrap; }
.topBenefit section.dormitry div h4 { width: 600px; font-size: 30px; line-height: 60px; position: relative; font-family: "Noto Serif JP"; padding-left: 80px; box-sizing: border-box; }
.topBenefit section.dormitry div h4 span { display: block; color: #308140; font-size: 20px; font-weight: 400; line-height: 30px; font-family: "Noto Serif JP"; }
.topBenefit section.dormitry div p { width: 600px; font-size: 18px; line-height: 35px; padding-left: 80px; box-sizing: border-box; margin: 40px 0 0; }
.topBenefit section figure { width: 50vw; height: 750px; overflow: hidden; }
.topBenefit section.initiative figure { order: 1; }
.topBenefit section.dormitry div { order: 1; }

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

@media only screen and (max-width: 1260px) {
	#header li a { width: 120px; }
	.topVisual h2 { top: 20svh; right: 80px; }
	.topMessage .message2 h4 { padding-right: 0; }

	.topWork section { padding: 0 20px; }
	.topWork section figure { order: 2; }
	.topWork section figure img { width: 240px; }
	.topWork section div { margin-right: 40px; }
	.topWork section div ul { padding: 20px; }

	.topCandidate { width: 100%; margin: 0; padding: 0; float: left; background: url(../img/recruit/candidate.jpg); background-size: 2000px; background-position: top left; }
	.topCandidate .inner { padding: 120px; background: #EAF2ECCC; }

	.topJob ul.job-nav li { line-height: 38px; text-align: center; font-size: 12px; margin: 0 5px; }
	.topJob ul.job-list li div { width: 100%; }

	.topBenefit section.initiative div { width: 50vw; padding: 40px; box-sizing: border-box; }
	.topBenefit section.initiative div h4 { width: 100%; }
	.topBenefit section.initiative div h5 { width: 100%; padding-right: 0; }
	.topBenefit section.initiative div p { width: 100%; padding-right: 0; }
	.topBenefit section.dormitry div { width: 50vw; padding: 40px; box-sizing: border-box; }
	.topBenefit section.dormitry div h4 { width: 100%; padding-left: 0; }
	.topBenefit section.dormitry div p { width: 100%; padding-left: 0; }
	.topBenefit section figure { width: 50vw; height: 750px; overflow: hidden; }

}


@media only screen and (max-width: 520px) {
	#header { background: #FFFE; height: 55px; box-shadow: 0 0 10px #0001; }
	#header #headerLogo a { top: 10px; left: 10px; color: #000; background-size: 25px; font-size: 11px; line-height: 11px; padding: 0 0 0 35px; }
	#header #headerLogo a b { display: block; margin-left: 0; font-size: 24px; line-height: 24px; }
	#header ul { }
	#header li a { width: 100px; padding: 10px 0; font-size: 16px; font-weight: bold; line-height: 20px; }
	#header li a span { display: block; font-size: 12px; line-height: 15px; }

	.topVisual { margin: 55px 0 0; }
	.topVisual li.top { height: 100vw; }
	.topVisual h2 { top: 80px; right: 40px; font-size: 48px; line-height: 60px; }
	.topVisual h2 span { font-size: 20px; font-weight: 400; line-height: 30px; margin-right: 20px; }

	.topMessage { }
	.topMessage p { font-size: 15px; line-height: 30px; margin: 60px 0 0; padding: 0 20px; text-align: left; }
	.topMessage .message1 { padding: 80px 0 160px; background-size: cover; }
	.topMessage .message2 { width: 100%; padding: 80px 0; background-size: cover; }
	.topMessage .message2 h4 { font-size: 30px; line-height: 60px; padding-right: 0; }

	.topWork { width: 100%; margin: 0; padding: 80px 0; float: left; }
	.topWork section { display: block; margin-top: 80px; }
	.topWork section figure { height: 50vw; overflow: hidden; }
	.topWork section figure img { width: 100%; border-radius: 20px; }
	.topWork section div { margin: 20px 0 0; }
	.topWork section div h4 { font-size: 24px; line-height: 30px; }
	.topWork section div p { font-size: 15px; line-height: 25px; }
	.topWork section div ul { border-radius: 10px; padding: 10px; margin-top: 20px; font-size: 15px; line-height: 25px; }
	.topWork section div ul li { }
	.topWork section div ul li b { color: #308140; margin-right: 0.5em; }
	.topWork h5 { font-size: 15px; line-height: 25px; text-align: left; margin: 40px 0 0; padding: 0 20px; }
	.topWork h5+ul { display: flex; justify-content: center; }
	.topWork h5+ul li { margin: 40px 20px 0; }

	.topCandidate { width: 100%; margin: 0; padding: 0; float: left; background: url(../img/recruit/candidate.jpg); background-size: 2000px; background-position: top left -50vw; }
	.topCandidate .inner { padding: 80px 20px; background: #EAF2ECCC; }
	.topCandidate h3 { text-align: center; }
	.topCandidate p { font-size: 15px; line-height: 25px; }

	.topJob { padding: 80px 0 0; }
	.topJob ul.job-nav { margin: 80px 0 0; flex-wrap: wrap; }
	.topJob ul.job-nav li { line-height: 20px; font-size: 15px; margin: 0 5px 10px; padding: 5px; width: calc(50% - 10px) !important; box-sizing: border-box; }
	.topJob ul.job-list { margin: 40px 0 0; }
	.topJob ul.job-list li { padding: 20px; }
	.topJob ul.job-list li div { width: 100%; padding: 40px 20px; }
	.topJob ul.job-list li div h4 { font-size: 20px; line-height: 20px; }
	.topJob ul.job-list li div table { width: 100%; font-size: 16px; line-height: 30px; margin: 40px 0 0; border-collapse: collapse; }
	.topJob ul.job-list li div table th { display: block; width: 100%; border-top: 0; border-bottom: solid 2px #308140; padding: 10px; box-sizing: border-box; background: #EAF2EB; }
	.topJob ul.job-list li div table td { display: block; width: 100%; border-top: 0; padding: 10px; box-sizing: border-box; }
	.topJob ul.job-list li div a { display: block; width: 100%; margin: 40px auto 0; font-size: 20px; font-weight: bold; text-align: center; line-height: 60px; border-radius: 10px; background: #FF903C; color: #FFF; }

	.topBenefit { }
	.topBenefit section { display: block; }
	.topBenefit section.initiative div { width: 100%; display: block; padding: 40px 20px; }
	.topBenefit section.initiative div h4 { width: 100%; padding-right: 0; }
	.topBenefit section.initiative div h5 { width: 100%; padding-right: 0; }
	.topBenefit section.initiative div p { width: 100%; padding-right: 0; }
	.topBenefit section.dormitry div { width: 100%; display: block; padding: 40px 20px; }
	.topBenefit section.dormitry div h4 { width: 100%; padding-left: 0; }
	.topBenefit section.dormitry div p { width: 100%; padding-left: 0; }
	.topBenefit section figure { width: 100%; height: auto; overflow: hidden; }
	.topBenefit section figure img { width: 100%; height: auto; }

}