@charset "utf-8";
/* 
	
CSS base.css */



/*
base : #0d0d0d
green : #00864f
*/




/*//////////////////


Header


//////////////////*/

#bodybg { background: #0d0d0d; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99; }

#header {position: absolute;top: 0;width: 100%;z-index: 100;}
#header .mainbox { display: flex; align-items: center; justify-content: space-between; height: 130px; }
#header .logo { line-height: 0; /* margin-top: -18px; */  }
#header .logo svg { width: 140px; height: 80px; margin-right: 20px; }
#header .logo svg .st0 { fill: #fff; }
#header .cap { line-height: 0; color: #fff; flex: 1; margin-top: 15px; }

/* #recruit */
#recruit #header { background: #fff; }
#recruit #header .logo svg .st0 { fill: #0d0d0d; }
#recruit #header .cap { color: #0d0d0d; }

/* fixed */
#header.fixed { position: fixed; top: 0; background: #fff; animation: navfit 0.5s ease-out 0s 1 normal both; }
#header.fixed .mainbox { height: 90px; }
#header.fixed .logo { margin-top: 0px; }
#header.fixed .logo svg { width: 110px; height: 60px; }
#header.fixed .logo svg .st0 { fill: #0d0d0d; }
#header.fixed .cap { color: #0d0d0d; }
@media screen and (max-width: 1280px) {
	#header .cap { display: none; }
}
@media screen and (max-width: 1040px) {
	#header .mainbox { height: 100px; }
}
@media screen and (max-width: 767px) {
	#header .mainbox { height: 90px; }
	#header .logo svg { width: 110px; height: 60px; }
}

/* スクロール時fixedのアニメーション */
@keyframes navfit {
  0% { transform: translate(0px, -100px); }
  100% { transform: translate(0px, 0px);  }
}






/*//////////////////


Nav


//////////////////*/

#gnav { }
#gnav::after { content: "."; display: block; clear: both; height: 0; visibility: hidden; overflow:hidden; line-height:0; font-size: 0; }
#gnav .bg { opacity: 0; }
#gnav .navlogo { display: none; }
#gnav ul.main { text-align: right; }
#gnav ul.main>li { display: inline-block; float: left; position: relative; font-family: 'Nunito Sans', sans-serif; font-size: 20px; margin-right: 30px; letter-spacing: 0.06em; }
#gnav ul.main>li:first-child { display: none; }
#gnav ul.main>li a { text-decoration: none; position: relative; vertical-align: middle; color: #fff; }
#gnav ul.main>li a:before { content: ""; height: 2px; width: 0; background: #fff; position: absolute; bottom: -10px; left: -10px; transition: 0.4s ease-out 0.1s; }
#gnav ul.main>li a:hover:before { width: calc(100% + 20px) }
/* contactアイコン　*/
#gnav ul.main>li[data-cat="contact"] { margin-right: 0; margin-left: -3px; }
#gnav ul.main>li[data-cat="contact"]::after { display: none; }
#gnav ul.main>li[data-cat="contact"] a svg { transition: 0.3s; width: 24px; height: 18px; vertical-align: -2px; }
#gnav ul.main>li[data-cat="contact"] a svg .st0 { fill: #fff; }
body.en #gnav ul.main>li:first-child { display: inline-block; margin-right: 10px; }
body.en #gnav ul.main>li:first-child:after { content: "/"; color:#fff; margin-left: 10px; }

/* #recruit */
#recruit #gnav { }
#recruit #gnav ul.main>li a { color: #0d0d0d; }
#recruit #gnav ul.main>li a:before { background: #0d0d0d; }
#recruit #gnav ul.main>li[data-cat="contact"] a svg .st0 { fill: #0d0d0d; }

/* fixed */
#header.fixed #gnav ul.main>li a { color: #0d0d0d; /* font-size: 18px; */ }
#header.fixed #gnav ul.main>li[data-cat="contact"] a svg .st0 { fill: #0d0d0d; }
body.en #header.fixed #gnav ul.main>li:first-child:after { color:#0d0d0d; }
@media screen and (max-width: 1380px) {
	#gnav ul.main>li { margin-right: 20px; }
}
@media screen and (max-width: 1180px) {
	#gnav ul.main>li { margin-right: 18px; font-size: 18px; }
	#gnav ul.main>li[data-cat="contact"] { margin-right: 0; }
	#gnav ul.main>li:after { display: none; }
}
@media screen and (max-width: 1040px){
	#gnav { z-index: 1000; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: block; pointer-events: none; }
	#gnav .innav { position: absolute; top: 50%; left: 0; text-align: center; width: 80%; padding: 0px 10%; /* Safari用 */ transform: translate(0, -50%); }
	#gnav ul.main { position: static; display: block; text-align: center; }
	#gnav ul.main>li { display: block!important; text-align:left; margin: 5px 0; float: none; opacity: 0; font-size: 24px; color: #0d0d0d; }
	#gnav ul.main>li a { color: #0d0d0d; }
	#gnav ul.main>li a:before { display: none; }
	#gnav ul.main>li[data-cat="contact"] a svg .st0 { fill: #0d0d0d; }
    #gnav ul.main>li[data-cat="contact"] { margin-left: 0; }
	
    body.en #gnav ul.main>li { display: inline-block!important; float: left; margin-right: 25px; }
    body.en #gnav ul.main>li:first-child:after { display:inline-block; color:#0d0d0d; }
    
	#gnav.is-open { pointer-events: auto; opacity: 1; }
	#gnav .bg {
		background: #fff; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; overflow: hidden; z-index: -1; opacity: 0;
		-webkit-transform:scale(0.98,0.98); transform:scale(0.98,0.98);
		-webkit-transition: all 1.0s cubic-bezier(0,.53,.41,1); transition: all 1.0s cubic-bezier(0,.53,.41,1);
 	}
	#gnav.is-open .bg { opacity: 1; -webkit-transform:scale(1,1); transform:scale(1,1); }
	
	#gnav.is-open ul.main>li { opacity:1; transition: 3s; }
	#gnav.is-open ul.main>li:nth-child(1) { -webkit-transition-delay: .40s; transition-delay: .40s; }
	#gnav.is-open ul.main>li:nth-child(2) { -webkit-transition-delay: .50s; transition-delay: .50s; }
	#gnav.is-open ul.main>li:nth-child(3) { -webkit-transition-delay: .60s; transition-delay: .60s; }
	#gnav.is-open ul.main>li:nth-child(4) { -webkit-transition-delay: .70s; transition-delay: .70s; }
	#gnav.is-open ul.main>li:nth-child(5) { -webkit-transition-delay: .80s; transition-delay: .80s; }
	#gnav.is-open ul.main>li:nth-child(6) { -webkit-transition-delay: .90s; transition-delay: .90s; }
	#gnav.is-open ul.main>li:nth-child(7) { -webkit-transition-delay: 1.0s; transition-delay: 1.0s; }
}
@media screen and (max-width: 767px){
	#gnav ul.main>li { font-size: 20px; }
}


/* jpen */
#gnav ul.jpen.sp { display: none; }
#gnav ul.jpen { text-align: right; display: block; width: auto; height: 30px; position: absolute; right: 0; top: 10px; }
#gnav ul.jpen>li { display: inline-block; float: left; position: relative; font-family: 'Nunito Sans', sans-serif; font-size: 18px; letter-spacing: 0.06em; }
#gnav ul.jpen>li a { text-decoration: none; position: relative; vertical-align: middle; color: #fff; }
#gnav ul.jpen>li:first-child:after { content: "/"; color:#fff; margin: 0 8px; }
/* jpenfixed */
#header.fixed #gnav { margin-top: 15px; }
#header.fixed #gnav ul.jpen>li a { color: #0d0d0d; font-size: 16px; }
#header.fixed #gnav ul.jpen { top: 4px; }
#header.fixed #gnav ul.jpen>li:first-child:after {color:#0d0d0d; }
@media screen and (max-width: 1040px){
	#gnav ul.jpen.pc { display: none; }
	#gnav ul.jpen.sp { display: block; }
    #gnav ul.jpen { position: static; text-align: left; margin-top:10px; }
	#gnav ul.jpen>li { text-align:left; opacity: 0; font-size: 20px; color: #0d0d0d;}
	#gnav ul.jpen>li a { color: #0d0d0d; }
	#gnav ul.jpen>li:first-child:after { color: #0d0d0d; }
	#gnav.is-open ul.jpen>li { opacity:1; transition: 3s; -webkit-transition-delay: 1.1s; transition-delay: 1.1s;}
}










/*//////////////////


Menubtn


//////////////////*/

#menubtn {display: none; z-index: 1001; }
@media screen and (max-width: 1040px){
	#menubtn { position: fixed; top: 20px; right: 30px; display: block; background: transparent; width: 60px; height: 60px; transition : 0.6s; cursor: pointer; }
	#menubtn a { text-decoration: none; position: relative; display: block; height: 100%; width: 100%; color: #fff; }
	#menubtn a .line {
		width: 50px; height: 4px; position: absolute; left: 50%; margin-left: -25px;
		-webkit-transition: all 0.6s; transition: all 0.6s; background: #0d0d0d;
	}
	#menubtn a #line1 { top: 18px; }
	#menubtn a #line2 { top: 30px; }
	#menubtn a #line3 { top: 42px; }
	#menubtn a:hover #line1 { top: 22px; }
	#menubtn a:hover #line3 { top: 38px; }
	#menubtn.active a .txt { display: none; }
	#menubtn.active a .line { width: 50px; }
	#menubtn.active a #line1 {
		top: 23px;
		-webkit-transform:translateY(10px) translateX(0) rotate(-30deg);
		transform:translateY(10px) translateX(0) rotate(-30deg);
	}
	#menubtn.active a #line2 { display: none;  }
	#menubtn.active a #line3 { 
		top: 43px;
		-webkit-transform:translateY(-10px) translateX(0) rotate(30deg); 
		transform:translateY(-10px) translateX(0) rotate(30deg);
	}
}
@media screen and (max-width: 767px){
	#menubtn { position: fixed; top: 15px; right: 15px; }
	#menubtn a .line { width: 40px; margin-left: -20px; }
}









/*//////////////////


Mainv.index


//////////////////*/

#mainv.index {position: fixed;z-index: -1;width: 100%;}
#mainv.index .bg { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/ }
#mainv.index .copybox { position: absolute; bottom: 11%; left: 8%; text-align: left; color: #fff; }
#mainv.index .copybox .maincopy { font-size: 58px; line-height: 1.4; font-weight: bold; margin-bottom: 20px; letter-spacing: 0.18em; transition: 0.3s;}
#mainv.index .copybox .maincopy span { position: relative; overflow: hidden; height: 1.4em; display: block; width: 500px; font-weight: bold; }
#mainv.index .copybox .maincopy span span { position: absolute; top: 0; left: 0; display: none;  }
#mainv.index .copybox .maincopy span span.loaded { animation: mvcopy 1.0s cubic-bezier(0.165, 0.84, 0.44, 1) 1.4s 1 normal both; display: block;  }
#mainv.index .copybox .maincopy span:nth-child(2) span.loaded { animation: mvcopy 1.0s cubic-bezier(0.165, 0.84, 0.44, 1) 1.7s 1 normal both; display: block;  }
#mainv.index .copybox .subtxt { font-size: 24px; line-height: 1.8; font-weight: bold; letter-spacing: 0.12em; display: none;}
#mainv.index .copybox .subtxt.loaded { animation: subtxt 0.8s ease-out 2.6s 1 normal both; display: block; }
@media screen and (max-width: 1040px){
	#mainv.index .copybox { left: 6%; }
}
@media screen and (max-width: 767px){
	#mainv.index .copybox .maincopy { font-size: 40px; }
	#mainv.index .copybox .subtxt { font-size: 18px; }
}
@media screen and (max-width: 639px){
	#mainv.index .copybox .maincopy { font-size: 32px; }
	#mainv.index .copybox .subtxt { font-size: 16px; }
}
@keyframes mvcopy {
  0% { transform: translate(0px, 100px); }
  100% { transform: translate(0px, 0px);  }
}
@keyframes subtxt {
  0% { opacity: 0; }
  100% { opacity: 1;  }
}


/*//////////////////


Mainv.en_top


//////////////////*/








/*//////////////////


Mainv.under


//////////////////*/

#mainv.under { height: 760px; position: relative; display: flex; justify-content: center; align-items: center; background: url(../img/common/mv_bg.jpg); background-position: center center; background-size: cover; padding: 0 6%; }
#recruit #mainv.under { margin-top: 130px; height: 340px; background-color: #00864f;  }
#recruit.index #mainv.under { height: 630px;  }
@media screen and (max-width: 1040px){
	#recruit #mainv.under { margin-top: 100px; }
	#recruit.index #mainv.under { height: 660px; }
}
@media screen and (max-width: 767px){
	#mainv.under { height: 400px; }
	#recruit #mainv.under { margin-top: 90px; height: 240px; }
	#recruit.index #mainv.under { height: 310px; }
}
@media screen and (max-width: 500px){
	#mainv.under { height: 280px; padding-top: 40px; }
	#recruit #mainv.under,
	#recruit.index #mainv.under { height: 190px; }
}












/*//////////////////


Pankuzu


//////////////////*/

#pankuzu { line-height: 1.4; padding-top:30px; }
#pankuzu.bg { background: url(../img/common/bg2.jpg); }
#pankuzu ol { margin: 0 60px; font-size: 0; }
#pankuzu ol li { display:inline; font-size: 14px; }
#pankuzu ol li a { text-decoration: none; }
#pankuzu ol li:before { content:"/"; display: inline-block; margin: 0 5px }
#pankuzu ol li:first-child:before { content: url(../img/common/icon_home.svg); width: 20px; height: 20px; transition: 0.3s; vertical-align: -2px; }
#pankuzu ol li a:hover { text-decoration: underline; opacity: 1; color: #0d0d0d; transition: 0.3s; }
@media screen and (max-width: 1040px) { 
	#pankuzu ol { margin: 0 4%; }
}
@media screen and (max-width: 767px) { 
	#pankuzu{ display: none; }
}




/*//////////////////


Content


//////////////////*/

#main { padding-top: 140px; margin-bottom: 220px; }
#index #main { }
@media screen and (max-width: 767px) { 
	#main { padding-top: 60px; margin-bottom: 100px; }
}










/*//////////////////


Cntside


//////////////////*/

#side {  }













/*//////////////////


Footer


//////////////////*/

#footer { /* background: #f9fcfa; */ }

#footer .recbox { }
#footer .recbox .rectitle { margin-bottom: 50px; }
#footer .recbox .rectitle .en { font-family: 'Nunito Sans', sans-serif; letter-spacing: 0.04em; font-size: 80px; line-height: 1; color: #00864f; font-weight: 800; text-align: center; }
#footer .recbox .rectitle .title { font-size: 24px; font-weight: bold; font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", sans-serif; margin-top: 0; letter-spacing: 0.14; display: block;  }
@media screen and (max-width: 767px) {
	#footer .recbox .rectitle .en { margin-bottom: 40px; font-size: 40px; }
	#footer .recbox .rectitle .title { font-size: 14px; margin-top: 10px; }
	#footer .recbox .rectitle { margin-bottom:30px; }
}
@media screen and (max-width: 500px) { 
	#footer .recbox .rectitle .en { font-size: 32px; }
	#footer .recbox .rectitle .title { margin-top: 0; }
}

/* jobinfobox */
#footer .jobinfobox { padding: 160px 0; background: url(../img/common/bg2.jpg); text-align: center; }
@media screen and (max-width: 767px) {
	#footer .jobinfobox { padding: 100px 0; }
	#footer .jobinfobox .txt1 { text-align: left; }
}

/* jobinfobox */
#footer .recimgbox ul { display: flex; justify-content: space-between; align-items: center; overflow: hidden; }
#footer .recimgbox li { height: 450px; width: 33.4%; }
#footer .recimgbox li img { object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/ display: block; width: 100%; height: 100%; }
@media screen and (max-width: 1040px) {
	#footer .recimgbox li { height: 300px; }
}
@media screen and (max-width: 767px) {
	#footer .recimgbox ul { display: block; }
	#footer .recimgbox li { height: auto; width: 100%; }
}
/* 
 *//* entrybox */
#footer .entrybox { color: #fff; padding: 160px 0; background: #00864f; text-align: center; }
#footer .recbox.entrybox .rectitle .en { color: #fff; }
@media screen and (max-width: 767px) {
	#footer .entrybox { padding: 100px 0; }
	#footer .entrybox .txt1 { text-align: left; }
}

/* contactbox */
#footer .contactbox .body { padding: 160px 0; text-align: center; background: #00864f; color: #fff; }
#footer .contactbox .body .copy { text-align: center; }
#footer .contactbox .txt1 { text-align: center; color: #fff; }
#footer .contactbox ul.list1 { display: flex; flex-wrap: wrap; justify-content: space-between; }
#footer .contactbox ul.list1 li { width: 430px; text-align: left; margin-bottom: 15px; display: flex; align-items: center; }
#footer .contactbox ul.list1 li:nth-child(even) { width: 390px; }
#footer .contactbox .box1 a.ebtn { width: 340px; padding: 28px 0; line-height: 1; border-radius: 41px; border: 2px solid #fff; font-size: 24px; color: #fff; font-weight: bold; text-align: center; display: block; text-decoration: none; margin: 0 auto 40px; transition: 0.6s;}
#footer .contactbox .box1 a.ebtn svg { width: 26px; height: 23px; margin-right: 3px; vertical-align: -3px;}
#footer .contactbox .box1 a.ebtn svg .st0 { fill: #fff; }
#footer .contactbox .box1 a.ebtn:hover { background: #fff; color: #00864f; }
#footer .contactbox .box1 a.ebtn:hover svg .st0 { fill: #00864f; }
#footer .contactbox .box1 .tel { font-size: 48px; letter-spacing: 0; color: #fff; line-height: 1; }
#footer .imgbar { width: 100%; overflow: hidden; height: calc(700px + 15vw); }
#footer .imgbar img { object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/ display: block; width: 100%; height: 100%; }
@media screen and (max-width: 1040px) {
	#footer .contactbox ul.list1 { justify-content: center; }
	#footer .contactbox ul.list1 li { width: 50%; }
	#footer .contactbox ul.list1 li:nth-child(even) { width: 47%; margin-left:15px; }
	#footer .contactbox ul.list1 li a { font-size: 20px; } 
}
@media screen and (max-width: 767px) {
	#footer .contactbox .body { padding: 60px 0; }
	#footer .contactbox ul.list1 li { width: auto!important; text-align: center; margin: 0 10px 5px 10px; }
	#footer .contactbox ul.list1 li a { font-size: 16px; } 
	#footer .contactbox .box1 a.ebtn { margin: 0 auto 30px; max-width: 100%; padding: 20px 0; line-height: 1; border-radius: 35px; font-size: 18px; box-sizing: border-box; }
	#footer .contactbox .box1 a.ebtn svg { width: 20px; height: 17px; }
	#footer .contactbox .box1 .tel { font-size: 32px; }
	#footer .imgbar { height: 500px; }
}
@media screen and (max-width: 500px) {
	#footer .imgbar { height: 400px; }
}

/* english */
#footer .contactbox ul.list1.enadd1 li:nth-child(even) { width: 430px; }
#footer .footerinfo .box1 { display: flex; justify-content: space-between; text-align: left; align-items: center; }
#footer .footerinfo .fnav.enadd1 {display: flex;flex: 1;justify-content: flex-end;align-items: center;}


/* #pagetop */
#pagetop { width:60px; height: 60px; z-index: 10000; position: fixed; bottom: 80px; right: 60px; transform: rotate(-90deg); }
#pagetop a { text-decoration: none; display: block; position: relative; }
#pagetop a:before { content: url(../img/common/icon_arr_green.svg); width: 60px; height: 60px; position: absolute; left: 0; top: 0; transition: 0.5s;  }
#pagetop a:hover:before { content: url(../img/common/icon_arr_green_h.svg); left: 6px; animation: pagetop 0.5s ease-in-out 0s 1 normal both; }
@keyframes pagetop {
  0% { transform: translate(0, 0px); }
  100% { transform: translate(-4px, 0px);  }
}
@media screen and (max-width: 767px) { 
	#pagetop { width:40px; height: 40px; bottom: 90px; right: 15px; }
	#pagetop a:before { width: 40px; height: 40px; }
}
@media screen and (max-width: 500px) { 
}

/* footerinfo */
#footer .footerinfo { padding: 160px 0 100px; }
#footer .footerinfo .box1 { display: flex; justify-content: space-between; text-align: left; }
#footer .footerinfo .box1 .info .logo { line-height: 0; margin-bottom: 30px; display: flex; align-items: center; }
#footer .footerinfo .box1 .info .logo svg { width: 140px; height: 80px; margin-right: 20px; }
#footer .footerinfo .box1 .info .logo svg .st0 { fill: #0d0d0d; }
#footer .footerinfo .box1 .info .logo span { margin-top: 18px;}
#footer .footerinfo .fnav { display: flex; flex: 1; justify-content: flex-end; }
#footer .footerinfo .fnav ul { margin-left: 40px; }
#footer .footerinfo .fnav ul li { display: block; position: relative; color: #777; }
#footer .footerinfo .fnav ul li.title { color: #0d0d0d; font-family: 'Nunito Sans', sans-serif; font-size: 18px; }
#footer .footerinfo .fnav ul li:before { content: ""; display: inline-block;  height: 1px; width: 12px; background-color: #777; vertical-align: middle; margin-right: 5px; }
#footer .footerinfo .fnav ul li.title:before { display: none;  }
#footer .footerinfo .fnav li a { text-decoration: none; }
body.en #footer .footerinfo .fnav li a:nth-child(2):before { content: "/"; margin: 0 8px; }
#footer .crbox { margin-bottom: 40px; }
#footer .crbox .incnt { font-size: 14px; text-align: center; display: flex; justify-content: center; align-items: center; }
#footer .crbox .cr { font-family: 'Nunito Sans', sans-serif; }
#footer .crbox a { color: #aaa;  text-decoration: underline; margin-left: 20px; }
@media screen and (max-width: 1280px) {
	#footer .footerinfo .box1 .txt1 { text-align: left; }
	#footer .footerinfo .fnav { flex: none; justify-content: flex-start; flex-wrap: wrap; }
	#footer .footerinfo .fnav ul { margin-left: 10%; }
	#footer .footerinfo .fnav ul:last-child { margin-top: 30px; }
	#footer .footerinfo .fnav ul li { font-size: 15px; }
	#footer .footerinfo .fnav ul li.title { font-size: 18px; }
}
@media screen and (max-width: 1040px) {
	#footer .footerinfo .box1 { display: block; }
	#footer .footerinfo .box1 .info .logo { margin-bottom: 20px; }
	#footer .footerinfo .fnav ul { margin-top: 40px!important; margin-left: 40px; }
	#footer .footerinfo .fnav ul:first-child { margin-left: 0px; }
	body.en #footer .footerinfo .fnav { display: none; }
}
@media screen and (max-width: 767px) {
	#footer .footerinfo { padding: 60px 0; }
	#footer .footerinfo .fnav ul { margin-left: 0; margin-right: 40px;}
	#footer .footerinfo .fnav ul li { font-size: 14px; }
	#footer .footerinfo .box1 .info .logo svg { width: 120px; height: 70px; margin-right: 10px; }
	#footer .crbox .incnt { text-align: left; justify-content: flex-start; }
}
@media screen and (max-width: 500px) {
	#footer .footerinfo .fnav { display: block; margin-top: 40px; }
	#footer .footerinfo .fnav ul { margin: 10px 0 0 0!important; }
	#footer .footerinfo .fnav { display: none; }
}
@media screen and (max-width: 500px) {
	#footer .footerinfo .txt1 span { display: block;}
	#footer .footerinfo .txt1 .bn { display: none;}
	#footer .crbox .incnt { display: block;  }
	#footer .crbox a { display: block; margin-left: 0px; }
}