@charset "UTF-8";
/* CSS Document */

/*-----------------------------------------------------
header
-----------------------------------------------------*/
header { background: none; box-shadow: none; }
header svg { fill: #FFF; }
header .logo p { color: #FFF; }
header .logo p strong { color: #FFF; }
header ul li a { color: #FFF; }
header ul li:first-child { display: none; }
header ul li:nth-child(2)::before { background: transparent; }

header::after { transform: translateY(-105%); transition: all 0.4s cubic-bezier(.19, 1, .22, 1); transition-timing-function: cubic-bezier(.19, 1, .22, 1); z-index: -1; }
header.scroll::after,header.active::after { transform:translateY(0); }
header.scroll svg,header.active svg { fill: #158b3b; }
header.scroll .logo p,header.active .logo p { color: #158b3b; }
header.scroll .logo p strong,header.active .logo p strong { color: #000; }
header.scroll ul li a { color: #000; }
header.scroll ul li a:hover { color: #008842; }


/*-----------------------------------------------------
Contents
-----------------------------------------------------*/
h2 { text-align: center; font-weight: 700; }
h2 strong { color: #008842; font-family: 'Noto Sans', sans-serif; font-style: italic; font-weight: 700; font-size: 1.813em; margin-bottom: 10px; display: inline-block; }

#Mainvisual { width: 100%; height: 100vh; position: relative; box-sizing: border-box; }
#Slide { position: relative; z-index: 0; }
#Slide li { height: 100vh; width: 100%; position: relative; }
#Slide li::before { content: ""; position: fixed; top: 0; /*background-attachment: fixed;*/ background-repeat: no-repeat; background-size: cover; background-position: center top; transform: scale(1); box-sizing: border-box; width: 100%; height: 100%; opacity: 0; transition: 1.5s 2s; }
#Slide .main01::before { background-image: url(../../images/slide_img01.jpg); }
#Slide .main02::before { background-image: url(../../images/slide_img02.jpg); background-position: left top; }
#Slide .main03::before { background-image: url(../../images/slide_img03.jpg); }
#Slide .main04::before { background-image: url(../../images/slide_img04.jpg); background-position: right bottom; }

#Slide .slick-active::before { transform: scale(1.03); transition: 3s; opacity: 1; }
#Slide .slick-continue::before { transform: scale(1.03); transition: 3s; opacity: 1; }

#Mainvisual h1 { position: absolute; z-index: 5; top: 0; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; font-size: 2.188em; color: #FFF; line-height: 2em; }
#Mainvisual h1 span { display: inline-block; letter-spacing: 0.3em; padding-left: 0.3em; opacity: 0; overflow: hidden; }
#Mainvisual h1 span:nth-child(1) { transform-origin: 0% 50%; animation: text 1.5s cubic-bezier(0.290, 0.135, 0.055, 1.000) both; }
#Mainvisual h1 span:nth-child(2) { transform-origin: 0% 50%; animation: text 1.5s 0.5s cubic-bezier(0.290, 0.135, 0.055, 1.000) both; }
#Mainvisual .btn { position: absolute; bottom: 70px; right: 30px; z-index: 7; }
#Mainvisual .btn a { background: #233a6f; font-size: 0.875rem; border: 1px solid #7d7d7d; width: 385px; height: 72px; flex-direction: column;  justify-content: center; align-items: flex-start; font-weight: bold; line-height: 1.8em; }
#Mainvisual .btn a strong { font-size: 1.125rem; }
#Mainvisual .btn a span { color: #f4d059; }
#Mainvisual .btn a::after { content: ""; display: inline-block; position: absolute; right: 0px; width: 70px; height: 70px; background: #122643; z-index: 1; }
#Mainvisual .btn a::before { z-index: 2; right: 30px; }

.news { background: #FFF; position: absolute; bottom: 0; width: 100%; z-index: 7; height: 45px; overflow: hidden; }
.news .inner { display: flex; justify-content: flex-start; align-items: stretch; }
.news h2 { background: #008842; color: #FFF; width: 106px; height: 45px; display: flex; justify-content: center; align-items: center; font-size: 0.813em; margin-right: 20px; font-weight: 400; }
.news p { font-size: 0.875em; display: flex; justify-content: flex-start; align-items: center; width: calc(100% - 110px); }
.news p span { margin-right: 1em; width: 6em; }
.news p a { display: block; width: calc(100% - 6em); display: flex; height: 100%; align-items: center; }
.news p a::after { content: "→"; display: inline-block; margin-left: auto; margin-right: 0; }

.btn { font-size: 0.875em; }
.btn a { display: block; background: rgba(0,136,66,1.00); color: #FFF; height: 75px; display: flex; align-items: center; justify-content: center; position: relative; padding: 0 40px 0 30px; transition: 0.7s; box-sizing: border-box; }
.btn a:hover { background: #33a068; transition: 0.7s; }
.btn a::before { content: ""; display: inline-block; position: absolute; right: 20px; width: 10px; height: 10px; border-top: 2px solid #FFF; border-right: 2px solid #FFF; transform: rotate(45deg); top: 0; bottom: 0; margin: auto; }


.flexbox { display: flex; justify-content: space-between; flex-wrap: wrap; }

#Service { background: url(../../images/bg_service.jpg) no-repeat center; background-size: cover; color: #FFF; }
#Service .inner { padding: 75px 0 85px 0; }
#Service h2 + p { text-align: center; font-weight: 700; margin-top: 30px; line-height: 1.5em; }
#Service .flexbox { display: flex; justify-content: space-between; margin-top: 30px; }
#Service .column { max-width: 310px; width: 32%; min-height: 187px; }
#Service .column:first-child { background: url(../../images/img_service01.jpg) no-repeat; background-size: cover; }
#Service .column:nth-child(2) { background: url(../../images/img_service02.jpg) no-repeat; background-size: cover; }
#Service .column:last-child { background: url(../../images/img_service03.jpg) no-repeat; background-size: cover; }
#Service .column a { height: 100%; border: 1px solid #7d7d7d; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; padding: 15px 55px 15px 15px; color: #FFF; background: rgba(0,0,0,0.80); position: relative; transition: 0.7s; }
#Service .column a:hover { background: rgba(0,0,0,0.40); transition: 0.7s; }
#Service .column a::before { content: ""; display: inline-block; position: absolute; right: 20px; width: 10px; height: 10px; border-top: 2px solid #FFF; border-right: 2px solid #FFF; transform: rotate(45deg); top: 0; bottom: 0; margin: auto; }
#Service h3 { font-size: 1.125em; font-weight: 700; margin-top: 15%; }
#Service h3 + p { font-size: 0.875em; line-height: 1.5em; margin-top: 25px; }
#Service .btn { margin: 55px auto 0 auto; display: table; }
#Service .btn strong { font-family: 'Noto Sans', sans-serif; font-style: italic; font-weight: 700; display: inline-block; margin-right: 1em; font-size: 1.250rem; }

#Recruit { width: 50%; height: 0; padding-top: 34.21875%; position: relative; color: #FFF; overflow: hidden; }
#Recruit::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; background: url(../../images/img_recruit.jpg) no-repeat; background-size: 100% auto; transition: 0.5s; }
#About { width: 50%; height: 0; padding-top: 34.21875%; overflow: hidden; position: relative; color: #FFF; }
#About::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; background: url(../../images/img_about.jpg) no-repeat; background-size: 100% auto; transition: 0.5s; }
#Recruit:hover::before,#About:hover::before { transform: scale(1.05); transition: 0.5s; }
.innerbox { position: absolute; top: 0; width: 96%; height: 95%; border: 1px solid #FFF; left: 0; right: 0; top: 0; bottom: 0; margin: auto; display: flex; justify-content: center; align-items: center; flex-direction: column;  color: #FFF; }
#Recruit h2 strong,#About h2 strong { color: #FFF; }
#Recruit p,#About p,#Contact p { margin-top: 25px; line-height: 1.8em; text-align: center; }

#Contact { background: url(../../images/bg_contact.jpg) no-repeat top 60px center #FFF; background-size: 34% auto; height: 450px; box-sizing: border-box; overflow: hidden; display: flex; justify-content: center; align-items: center; flex-direction: column; }
#Contact .btn { display: flex; justify-content: center; flex-wrap: wrap; width: 100%; }
#Contact .btn li { max-width: 395px; width: 47%; margin: 25px 10px 0 10px; font-weight: 700; box-sizing: border-box; line-height: 1.5em; text-align: center; }


@media screen and (max-width:960px) {
	.btn a::before { right: 15px; }
	.btn a:hover { background: rgba(0,136,66,1.00); }
	
	header.scroll ul li a,header.scroll ul li a:hover { color: #FFF; }
	
	#Mainvisual h1 { font-size: 1.750rem; }
	
	#Recruit:hover::before,#About:hover::before { transform: scale(1); }
	#Service .column.move a { background: rgba(0,0,0,0.40); }
	
	#Contact .btn li { width: 48.5%; margin: 25px auto 0 auto; }
	#Contact .btn a { padding: 0 35px 0 10px; line-height: 1.3em; }
}

@media screen and (max-width:600px) {
	#Mainvisual h1 { font-size: 1.250rem; }
	#Mainvisual h1 span { letter-spacing: 0.2em; padding-left: 0.3em; }
	#Slide .main02::before { background-image: url(../../images/slide_img02.jpg); background-position: left -130px top; }
	
	.news .inner { width: 100%; flex-wrap: wrap; padding-bottom: 10px; align-items: flex-start; }
	.news h2 { width: 100%; margin-right: 0; }
	.news p { margin-left: 2.5%; line-height: 1.5em; margin-top: 10px; width: calc(95% - 47px); }
	.news p span { margin-right: 0; display: block; }
	
	#Service .inner { padding: 65px 0 75px 0; }
	#Service h2 + p { text-align: left; max-width: 330px; width: 95%; margin: 30px auto 0 auto; }
	#Service .flexbox { margin-top: 0px; flex-wrap: wrap; }
	#Service .column { max-width: 330px; width: 95%; margin: 30px auto 0 auto; }
	#Service .btn { width: 100%; margin-top: 40px; }
	#Service .btn a { max-width: 360px; width: 100%; margin: auto; flex-direction: column; line-height: 1.3em; font-size: 0.813rem; padding: 0; box-sizing: border-box; padding: 0 25px 0 15px;  }
	#Service .btn a::before { right: 12px; }
	#Service .btn strong { margin-right: 0; display: inline-block; margin-bottom: 10px; }
	
	#Recruit { width: 100%; height: 0; padding-top: 68%; }
	#About { width: 100%; height: 0; padding-top: 68%; }
	
	#Contact { background: url(../../images/bg_contact.jpg) no-repeat top 20px center; background-size: 168px auto; height: auto; padding: 40px 0 50px 0; justify-content: flex-start; }
	#Contact .btn li { width: 100%; }
	#Contact .btn li + li { margin-top: 15px; }
}