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




/*
キーカラー：main { color: #ef8200; }
キーカラー：sub { color: #e84709; }
*/



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


Header


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

#header { width: 100%;  z-index: 100; }
#header.fixed { position: fixed; top: 0; background: #fff; background: rgba(255,255,255,0.97); animation: navfit 0.5s ease-out 0s 1 normal both; }
#header .mainbox { display: flex; align-items: center; height: 110px; }
#header .logo { line-height: 0; margin-top: -3px; }
#header .logo img { width: 220px; }
#header .cap { margin-left: 20px; margin-top: 5px; }
#header.fixed .mainbox { height: 80px; }
#header.fixed .logo img { width: 180px; }
@media screen and (max-width: 1280px) {
	#header .logo { margin-top: 0; }
	#header .cap { display: none; }
}
@media screen and (max-width: 1040px) {
	#header .logo { top: 0px; left: 40px; margin-top: 0; }
	#header .logo img { width: 180px; }
}
@media screen and (max-width: 767px) {
	#header, #header .mainbox { height: 75px; }
	#header .logo { left: 20px; }
}

/* スライド画像のエフェクト */
@keyframes navfit {
  0% { transform: translate(0px, -60px); }
  100% { transform: translate(0px, 0px);  }
}









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


Nav


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

#gnav { height: 110px; }
#gnav:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; overflow:hidden; line-height:0; font-size: 0; }
#gnav .bg { opacity: 0; }
#gnav .copy { display: none; }
#gnav ul.main { position: absolute; right: -60px; height: 100%; display: flex; align-items: center; justify-content: center; }
#gnav ul.main>li { display: inline-block; margin-left: 20px; float: left; }
#gnav ul.main>li:first-child { display: none; }
#gnav ul.main>li a { text-decoration: none; }

/* appeal */
#gnav ul.main li.appeal a { height: 110px; display: flex; align-items: center; justify-content: center; position: relative; text-decoration: none; overflow: hidden; box-sizing: border-box;  }
#gnav ul.main li.appeal a:hover{ opacity: 1; }
#gnav ul.main li.appeal[data-cat="recruit"]{ margin-right: -25px; }
#gnav ul.main li.appeal[data-cat="recruit"] a { z-index: 2; width: 140px; color: #fff; margin-right: -15px; }
#gnav ul.main li.appeal[data-cat="recruit"] a .txt { z-index: 1; font-weight: bold; }
#gnav ul.main li.appeal[data-cat="recruit"] a .bgcolor { transform: rotate(10deg) scale(1.2); height: 100%; background-color: #e84709; display: block; position: absolute; top: 0; bottom: 0; left: 20px; right: 20px; transition: 0.3s; }
#gnav ul.main li.appeal[data-cat="recruit"] a:hover{ color: #e84709; }
#gnav ul.main li.appeal[data-cat="recruit"] a:hover .bgcolor{ background-color: #f4f2f2; }
#gnav ul.main li.appeal[data-cat="contact"] a { background-color: #ef8200; width: 130px; padding-left: 10px; z-index: 1; }
#gnav ul.main li.appeal[data-cat="contact"] a .txt { display: none; }
#gnav ul.main li.appeal[data-cat="contact"] a svg { width: 26px; height: 20px; transition: 0.3s; backface-visibility: hidden; fill: #fff; }
#gnav ul.main li.appeal[data-cat="contact"] a:hover {  background-color: #f1f2f5; }
#gnav ul.main li.appeal[data-cat="contact"] a:hover svg { fill:#ef8200; }

/* telbox */
#gnav .telbox { position: absolute; bottom: -75px; right: 0; font-size: 25px; color: #fff; }
#gnav .telbox a { margin-left: 10px; text-decoration: none; color: #fff; }

/* スクロールfixed */
.fixed #gnav { height: 80px; }
.fixed #gnav ul.main li.appeal a { height: 80px; }
.fixed #gnav ul.main li.appeal[data-cat="recruit"] a .bgcolor { transform: rotate(10deg) scale(1.27); left: 25px; right: 25px; }
.fixed #gnav .telbox { display: none; }
@media screen and (max-width: 1280px) {
	#gnav ul.main { right: -40px; }
}
@media screen and (max-width: 1040px){

}
@media screen and (max-width: 767px){
	#gnav { z-index: 1000; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: block; pointer-events: none; opacity: 0; }
	#gnav .navbox { position: absolute; top: 50%; left: 0; text-align: center; width: 88%; padding: 0px 6%; /* Safari用 */ transform: translate(0, -50%); }
	#gnav ul.main { position: static; display: block; text-align: center; }
	#gnav ul.main li { display: inline-block!important; margin: 2px 10px; float: none; }
	#gnav ul.main li a { color: #fff; }
	#gnav ul.main li.appeal a { height: auto; width: auto!important; padding: 0!important; margin: 0px!important; }
	#gnav ul.main li.appeal[data-cat="contact"] a { background: none; }
	#gnav ul.main li.appeal[data-cat="recruit"]{ margin-right: 0; }
	#gnav ul.main li.appeal[data-cat="contact"] a svg,
	#gnav ul.main li.appeal[data-cat="recruit"] a .bgcolor { display: none; }
	#gnav ul.main li.appeal[data-cat="recruit"] a .txt { font-weight: normal; }
	#gnav ul.main li.appeal[data-cat="contact"] a .txt { display: block; }
	#gnav ul.main li.appeal a:hover { background: none!important; color: #fff!important;}
	
	#gnav .copy { display: block; color: #fff; font-size: 20px; margin-bottom: 30px; line-height: 1.8; }
	#gnav.is-open { pointer-events: auto; opacity: 1; }
	#gnav .bg {
		background: #ef8200; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; overflow: hidden; z-index: -1; opacity: 0;
		-webkit-transform:scale(0.9,0.9); transform:scale(0.9,0.9);
		-webkit-transition: all 0.6s cubic-bezier(0,.53,.41,1); transition: all 0.6s cubic-bezier(0,.53,.41,1);
 	}
	#gnav.is-open .bg { opacity: 1; -webkit-transform:scale(1,1); transform:scale(1,1); }
	
	/* telbox */
	#gnav .telbox { position: static; font-size: 20px; margin: 10px 0 20px; }
	
	#gnav.is-open ul.main>li,
	#gnav.is-open ul.contact>li { opacity:1; transition: 1s; }
	#gnav.is-open ul.main>li:nth-child(1) { -webkit-transition-delay: .24s; transition-delay: .24s; }
	#gnav.is-open ul.main>li:nth-child(2) { -webkit-transition-delay: .32s; transition-delay: .32s; }
	#gnav.is-open ul.main>li:nth-child(3) { -webkit-transition-delay: .40s; transition-delay: .40s; }
	#gnav.is-open ul.main>li:nth-child(4) { -webkit-transition-delay: .48s; transition-delay: .48s; }
	#gnav.is-open ul.main>li:nth-child(5) { -webkit-transition-delay: .56s; transition-delay: .56s; }
	#gnav.is-open ul.contact>li:nth-child(1) { -webkit-transition-delay: .64s; transition-delay: .64s; }
	#gnav.is-open ul.contact>li:nth-child(2) { -webkit-transition-delay: .72s; transition-delay: .72s; }
}










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


Menubtn


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

#menubtn {display: none; z-index: 1001; }
@media screen and (max-width: 1040px){
	#menubtn { position: fixed; top: 5px; right: 3px; display: block; background: transparent; width: 60px; height: 60px; transition : 0.3s; cursor: pointer; }
	#menubtn a { text-decoration: none; position: relative; display: block; height: 100%; width: 100%; color: #fff; }
	#menubtn a .line {
		width: 26px; height: 1px; background: #ef8200; position: absolute; left: 50%; margin-left: -13px;
		-webkit-transition: all 0.3s; transition: all 0.3s;
	}
	#menubtn a #line1 { top: 22px; }
	#menubtn a #line2 { top: 30px; }
	#menubtn a #line3 { top: 38px; }
	#menubtn a:hover #line1 { top: 26px; }
	#menubtn a:hover #line2 { opacity: 0; }
	#menubtn a:hover #line3 { top: 34px; }
	#menubtn.active a .line { background: #fff; }
	#menubtn.active a .txt { display: none; }
	#menubtn.active a #line1 {
		top: 23px;
		width: 29px;
		-webkit-transform:translateY(10px) translateX(0) rotate(-45deg);
		transform:translateY(10px) translateX(0) rotate(-45deg);
	}
	#menubtn.active a #line2{ display: none; }
	#menubtn.active a #line3 { 
		width: 29px;
		top: 43px;
		-webkit-transform:translateY(-10px) translateX(0) rotate(45deg); 
		transform:translateY(-10px) translateX(0) rotate(45deg);
	}
}










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


Mainv_index


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

#mainv_index { position: relative; z-index: -1; height: 900px; }
#mainv_index .txtbox { position: absolute; top: 50%; left: 0; text-align: center; width: 100%; transform: translate(0, -50%); color: #fff; }
#mainv_index .txtbox .tategaki { }
#mainv_index .txtbox .txt { font-size: 40px; padding: 0; }
#mainv_index .txtbox .txt span { margin-top: -25px; }
#mainv_index .txtbox .entxt { text-align: center; font-size: 24px; margin-top: 0px; line-height: 1.4; }
#mainv_index .slidebox { z-index: -1; }
#mainv_index .slidebox { width: 100%; height: 100%; }
#mainv_index .slidebox li .bg { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/ display: block; }
#mainv_index .slidebox li.swiper-slide-active .bg,
#mainv_index .slidebox li.swiper-slide-duplicate-active .bg,
#mainv_index .slidebox li.swiper-slide-prev .bg{ animation: zoomout 10s linear 0s 1 normal both; }
@media screen and (max-width: 1280px){
	#mainv_index .txtbox .txt { font-size: 36px; }
}
@media screen and (max-width: 1040px){
	#mainv_index .txtbox .txt { font-size: 32px; }
	#mainv_index .txtbox .txt span { margin-top: -20px; }
	#mainv_index { height: 600px; }
	#mainv_index .box .txt { padding: 20px 0 0; }
}
@media screen and (max-width: 767px){
	#mainv_index .txtbox .txt { font-size: 24px; }
	#mainv_index .txtbox .txt span { margin-top: -12px; }
	#mainv_index .txtbox .entxt { font-size: 16px; }
	#mainv_index { height: 440px; }
}
@media screen and (max-width: 479px){
}

/* スライド画像のエフェクト */
@keyframes zoomout {
  0% { transform: scale(1.15); }
  100% { transform: scale(1); }
}






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


Mainv


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

#mainv { height: 300px; position: relative; display: flex; justify-content: center; align-items: center; background-position: center center; background-size: cover; }
@media screen and (max-width: 1040px){
}
@media screen and (max-width: 767px){
	#mainv { height: 140px; }
}
@media screen and (max-width: 479px){
}












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


Pankuzu


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


#pankuzu {line-height: 1.4;position: relative;z-index: 10;box-sizing: border-box;letter-spacing: 0.05em;padding:15px 60px; background: #f7f7f7;}
#pankuzu ol li { display:inline-block; }
#pankuzu ol li:before { content:"/"; display: inline-block; margin-right: 3px }
#pankuzu ol li p{ display: inline-block; }
#pankuzu ol li:first-child:before { display: none; }
#pankuzu ol li a{ text-decoration: none; }
#pankuzu ol li a:hover { opacity: 0.7; transition: 0.3s; }
@media screen and (max-width: 767px){
	#pankuzu{ display: none; }
}
@media screen and (max-width: 500px){
}


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


Content


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

#main { margin-top: 60px; margin-bottom: 150px; }
@media screen and (max-width: 767px) { 
	#main { margin-top: 40px; margin-bottom: 80px; }
}










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


Cntside


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

#side {  }













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


Footer


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

#footer {  }

/* contactbox */
#footer .contactbox { margin-bottom: 120px; text-align: center; }
#footer .contactbox .copy { font-size: 26px; line-height: 1.8; margin-bottom: 20px; position: relative; }
#footer .contactbox .copy:after,
#footer .contactbox .copy:before { content:""; width: 1px; height: 100px; display: inline-block; background-color: #191919; position: absolute; top: 0; bottom: 0; margin: 0 auto;-webkit-transform:rotate(20deg); -moz-transform:rotate(20deg); transform:rotate(20deg); }
#footer .contactbox .copy:after { right: 20px; }
#footer .contactbox .copy:before { left: 20px; }
#footer .contactbox .navbox { display: inline-block; }
#footer .contactbox .navbox .fnav li { display: inline-block; margin-left: 20px; }
#footer .contactbox .navbox .fnav li:first-child { margin-left: 0px; }
#footer .contactbox .navbox .fnav li a { text-decoration: none; color: #191919;  }
#footer .contactbox .navbox .fnav li a:hover { text-decoration: underline;  }
@media screen and (max-width: 1040px) {
	#footer .contactbox .copy:after, #footer .contactbox .copy:before { display: none; }
}
@media screen and (max-width: 767px) {
	#footer .contactbox { margin-bottom: 60px; text-align: center; }
	#footer .contactbox .copy { font-size: 18px; margin-bottom: 20px; }
	#footer .contactbox .navbox { display: none; }
}

#pagetop { position: fixed; bottom: 100px; right: -10px; transform:rotate(-90deg); z-index: 10000; }
#pagetop a { text-decoration: none; }
#pagetop a:hover { opacity: 1; }
#pagetop span.barlowcondensed { font-size: 20px; color: #ef8200; }
#pagetop span.arr { position: relative; width: 25px; height: 8px; display: inline-block; margin-left: 5px; vertical-align: 3px; }
#pagetop span.arr svg { stroke:#ef8200; }
@media screen and (max-width: 767px) { 
	#pagetop { bottom: 55px; right: -15px; }
	#pagetop span.barlowcondensed { font-size: 18px; }
}

/* footerinfo */
#footer .footerinfo { margin-bottom: 30px; position: relative; text-align: center; }
#footer .footerinfo .logo { width: 220px; display: inline-block; margin-bottom: 20px; }
#footer .footerinfo p.telbox { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; font-size: 25px; color: #ef8200; }
#footer .footerinfo p.telbox a { text-decoration: none; color: #ef8200; display: flex; justify-content: center; align-items: center; }
#footer .footerinfo p.telbox a:last-child .txt1 { position: relative; }
#footer .footerinfo p.telbox a:last-child .txt1:after { content:""; background-color: #ef8200; position: absolute; bottom: 0; left: 0; height: 1px; transition: 0.3s; width: 0; }
#footer .footerinfo p.telbox a:last-child:hover .txt1:after{ width: 100%; }
@media screen\0 {
	#footer .footerinfo p.telbox span.barlowcondensed {
		margin-top: -10px;
	}
	#footer .footerinfo svg { margin-top: -5px; }
}
#footer .footerinfo p.address a  { text-decoration: none; }
#footer .footerinfo .txt1 { font-size: 18px; }
#footer .footerinfo svg { width: 26px; height: 20px; fill: #ef8200; padding-right: 5px; }
#footer .footerinfo .slash { padding: 0 10px; }
#footer .cr { text-align: center; width: 100%; padding: 15px 0; background-color: #f7f7f7; color: #ef8200; font-size: 14px; }
@media screen and (max-width: 1040px) {
	
}
@media screen and (max-width: 767px) {
	#footer .footerinfo .logo { width: 180px; margin-bottom: 10px; }
	#footer .footerinfo p.telbox { display: block; line-height: 1.6; }
	#footer .footerinfo p.telbox a span { display: block; }
	#footer .footerinfo p.telbox span.barlowcondensed { font-size: 18px; }
	#footer .footerinfo p.address a  { text-decoration: underline; }
	#footer .footerinfo .slash { display: none; }
	#footer .cr { line-height: 1.6; }
}