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






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


Header


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

#header { position: relative; width: 100%; }
#header .logo { position: absolute; top:25px; left: 60px; line-height: 0;}
#index #header .logo { display: none; }
#header .logo img { width: 310px;  }
#header>.txt { position: absolute; top:35px; right: 220px; color: #fff; font-size: 15px; transition : 0.3s; }
#header>.txt br { display: none; }
@media screen and (max-width: 1280px) {
	#header>.txt { top: 20px; }
	#header>.txt br { display: block; }
}
@media screen and (max-width: 1040px) {
	#header .logo { left: 6%; top: 15px; }
	#header>.txt { display: none; }
}
@media screen and (max-width: 767px) {
	#header .logo img { width: 230px; }
}








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


Nav


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

#gnav { z-index: 1000; position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: block; pointer-events: none; opacity: 0; transition : 0.6s;}
#gnav.is-open { pointer-events: auto; opacity: 1; }
#gnav .bg { background: #000; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; overflow: hidden; opacity: 1; }
#gnav .img1 { width: 370px; margin: 0 auto 30px; opacity: 0; transform: translate(0, 10px); transition: 0.6s; }
#gnav .box { position: absolute; left: 0; top: 50%; width: 100%; margin-top: -80px; text-align: center; }
#gnav ul.main { font-size: 0; display: inline-block; text-align: center; margin-left: -15px; }
#gnav ul.main>li { display: inline-block; font-size: 20px; margin-left: 15px; opacity: 0; transform: translate(0, 10px); transition: 0.6s; }
#gnav ul.main>li a { display: inline-block; text-decoration: none; position: relative; padding: 5px 0; color: #fff; }
#gnav ul.main>li a:after { 
	content: ""; position: absolute; background: #fff; left: 0; bottom: 5px; right: 0; width: 100%; height: 2px; 
	transform: scaleX(0); transition: all 0.3s ease; }
#gnav ul.main>li a:hover,
#gnav ul.main>li.current a { color: #ccc; }
#gnav ul.main>li a:hover:after,
#gnav ul.main>li.current a:after { transform: scaleX(1); }
/* 遅延表示 */
#gnav.is-open ul.main>li,
#gnav.is-open .img1 { opacity: 1; transform: translate(0, 0); -webkit-transition-delay: .15s; transition-delay: .15s;}
#gnav.is-open ul.main>li:nth-child(1) { -webkit-transition-delay: .25s; transition-delay: .25s; }
#gnav.is-open ul.main>li:nth-child(2) { -webkit-transition-delay: .30s; transition-delay: .30s; }
#gnav.is-open ul.main>li:nth-child(3) { -webkit-transition-delay: .35s; transition-delay: .35s; }
#gnav.is-open ul.main>li:nth-child(4) { -webkit-transition-delay: .40s; transition-delay: .30s; }
#gnav.is-open ul.main>li:nth-child(5) { -webkit-transition-delay: .45s; transition-delay: .45s; }
#gnav.is-open ul.main>li:nth-child(6) { -webkit-transition-delay: .50s; transition-delay: .50s; }
#gnav.is-open ul.main>li:nth-child(7) { -webkit-transition-delay: .55s; transition-delay: .55s; }
@media screen and (max-width: 1040px){
	#gnav .img1 { width: 300px; }
	#gnav ul.main>li { font-size: 16px; }
}
@media screen and (max-width: 767px){
	#gnav .img1 { width: 240px; }
	#gnav ul.main { padding: 0 8%; }
	#gnav ul.main>li { font-size: 16px; display: inline-block; }
}










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


Menubtn


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

#menubtn { position: fixed; top: 0px; right: 0px; display: block; z-index: 1001; background: #000; width: 200px; height: 90px; transition : 0.3s; cursor: pointer; }
#menubtn a { text-decoration: none; position: relative; display: block; height: 100%; width: 100%; color: #fff; }
#menubtn a .line {
	width: 19px; height: 1px; background: #fff; position: absolute; left: 50%; margin-left: -30px;
	-webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	-moz-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#menubtn a .txt { position: absolute; top: 50%; left: 50%; font-size: 16px; line-height: 0; margin-left: -5px; transition: 0.3s; }
#menubtn a .txt.close { display: none; transition: 0.3s; }
#menubtn a #line1 { top: 41px; }
#menubtn a #line2 { top: 49px; }
#menubtn a:hover #line1 { margin-left: -40px; }
#menubtn a:hover #line2 { margin-left: -35px; }
#menubtn.active { background: #fff; }
#menubtn.active a .line { background: #000; }
#menubtn.active a .txt { display: none; }
#menubtn.active a .txt.close { display: block; color: #000; }
#menubtn.active a #line1 {
	margin-left: -30px;
	top: 35px;
	-webkit-transform:translateY(10px) translateX(0) rotate(222deg);
	-moz-transform:translateY(10px) translateX(0) rotate(222deg);
	transform:translateY(10px) translateX(0) rotate(222deg);
}
#menubtn.active a #line2 { 
	margin-left: -30px;
	top: 55px;
	-webkit-transform:translateY(-10px) translateX(0) rotate(-222deg); 
	-moz-transform:translateY(-10px) translateX(0) rotate(-222deg);
	transform:translateY(-10px) translateX(0) rotate(-222deg);
}
@media screen and (max-width: 1040px){
	#menubtn { width: 160px; height: 70px; }
	#menubtn a #line1 { top: 30px; }
	#menubtn a #line2 { top: 39px; }	
	#menubtn.active a #line1 { top: 24px; }
	#menubtn.active a #line2 { top: 44px; }
}
@media screen and (max-width: 767px){
	#menubtn { width: 70px; }
	#menubtn a .txt { display: none!important; }
	#menubtn a .line { margin-left: -10px; }
	#menubtn a #line1 { top: 30px; }
	#menubtn a #line2 { top: 39px; }
	#menubtn a:hover #line1,
	#menubtn a:hover #line2 { margin-left: -10px; }
	#menubtn.active a #line1 { margin-left: -10px; top: 24px; }
	#menubtn.active a #line2 { margin-left: -10px; top: 44px; }
}









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


Mainv_index


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

#mainv_index { height: 780px; position: relative; z-index: -1; }
#mainv_index .box { position: absolute; top: 50%; left: 50%;  -webkit-transform: translate(-50%, -50%); /* Safari用 */ transform: translate(-50%, -50%); }
#mainv_index .logo { width: 372px; float: left; margin-top: 90px; }
#mainv_index .txt { width: 272px; margin-left: 450px; }
#mainv_index li { background-image: url(../img/index/mainv_bg1.jpg); background-size: cover; background-position: center center; width: 100%; height: 780px; }
#mainv_index li img { width: 100%; }
#mainv_index li .box { padding: 60px 80px; border: 1px solid #fff; position: absolute; top: 50%; left: 50%; font-feature-settings: normal; transform: translateY(-50%) translateX(-50%); box-sizing: border-box; }
#mainv_index li .box>.copy { font-size:32px; color: #fff; }
@media screen and (max-width: 1040px){
	#mainv_index .logo { width: 279px; float: left; margin-top: 60px; }
	#mainv_index .txt { width: 204px; margin-left: 320px; }
}
@media screen and (max-width: 767px){
	#mainv_index { height: 560px; }
	#mainv_index li { height: 560px; }
	#mainv_index .logo { width: 240px; float: none; margin-top: -20px; }
	#mainv_index .txt { width: 200px; margin: 30px auto 0; padding-left: 30px; }
}









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


Mainv


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

#mainv { height: 450px; position: relative; z-index: -1; background-image: url(../img/company/mainv.jpg); background-size: cover; background-position: center center; width: 100%; }
#mainv .box { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); /* Safari用 */ transform: translate(-50%, -50%); margin-top: 40px; }
@media screen and (max-width: 1040px){
}
@media screen and (max-width: 767px){
	#mainv { height: 300px; }
}
@media screen and (max-width: 479px){
	#mainv { height: 240px; }
}












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


Pankuzu


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

#pankuzu { line-height: 1.4; padding-top:15px; }
#pankuzu ol { margin: 0 60px; }
#pankuzu ol li { display:inline-block; }
#pankuzu ol li:before { content:"/"; display: inline-block; margin-right: 3px }
#pankuzu ol li:first-child:before { display: none; }
#pankuzu ol li a:hover { opacity: 0.7; transition: 0.3s; }
@media screen and (max-width: 767px) { 
	#pankuzu{ display: none; }
}






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


Content


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

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










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


Cntside


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

#side {  }













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


Footer


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

#footer {  }

/* contactbox */
#footer .contactbox { margin-bottom: 60px; text-align: center; }
#footer .contactbox .copy { font-size: 34px; margin-bottom: 20px; letter-spacing: -0.1em; }
#footer .contactbox .box { display: flex; justify-content: center; }
#footer .contactbox .box .tel {  }
#footer .contactbox .box .tel span { font-size: 34px; margin-right: 3px; vertical-align: middle; }
#footer .contactbox .box .btn { display: inline-block; margin-left: 30px; }
#footer .contactbox .box .btn svg { width: 25px; height: 18px; margin-right: 5px; vertical-align: middle;}
@media screen and (max-width: 1040px) {
	#footer .contactbox .copy { font-size: 28px; }
	#footer .contactbox .box { display: block; }
	#footer .contactbox .box .btn { display: inline-block; width: auto; margin-left: 0px; margin-top: 10px; width: 350px;}
	#footer .contactbox .box .btn svg { width: 25px; margin-right: 5px; vertical-align: text-top;  }
	#footer .contactbox .box .btn span { vertical-align: middle; }
}
@media screen and (max-width: 767px) {
	#footer .contactbox .copy { font-size: 20px; }
	#footer .contactbox .box .tel { line-height: 1.5; margin-bottom: 10px; }
	#footer .contactbox .box .tel span { font-size: 30px; margin-right: 0px; display: block; }
	#footer .contactbox .box .btn { width: auto;}
	#footer .contactbox .box .btn span span { display: none; }
}

/* map */
#footer .map { margin-bottom: 0; line-height: 0; }
#footer .map iframe { height: 500px; }
@media screen and (max-width: 767px) {
	#footer .map iframe { height: 350px; }
}


/* #pagetop */
#pagetop a { width: 100%; display: block; background: #000; color: #fff; text-align: center; text-decoration: none; padding: 10px 0; transition: 0.3s; }
#pagetop a:hover { background: #eee; color: #191919; }
@media screen and (max-width: 767px) {
	#pagetop a { width: auto; display: inline; background: none; color: #191919; text-align: right; padding: 10px; position: fixed; right: 10px; bottom: 10px; }
	#pagetop a:hover { background: none; color: inherit; }
}


/* footerinfo */
#footer .footerinfo .incnt { display: flex; align-items: flex-end; justify-content: space-between; }
#footer .footerinfo { margin: 60px 0; }
#footer .infobox .logo { width: 370px; margin-bottom: 30px; }
#footer .infobox .addresslist>li { display:inline-block; }
#footer .infobox .addresslist>li:first-child { margin-right:30px; }
#footer .infobox .txt1 { margin-bottom: 20px; }
#footer .navbox { text-align: right; }
#footer .navbox .cr { font-size: 14px; }
#footer .navbox #fnav { margin-bottom: 10px; }
#footer .navbox #fnav ul { text-align: right; }
#footer .navbox #fnav li { text-align: left; margin-left: 10px; display: inline-block; }
#footer .navbox #fnav li a { text-decoration: none; color: #191919;  }
#footer .navbox #fnav li a:hover { text-decoration: underline;  }
#footer .navbox .copyright { display: flex; justify-content: flex-end;}
#footer .navbox .copyright a { margin-right:1em; text-decoration: none;}
#footer .navbox .copyright a:hover {text-decoration: underline;}
@media screen and (max-width: 1300px) {
	#footer .footerinfo .incnt { display: block; text-align: center; }
	#footer .infobox .logo { width: 370px; margin: 0 auto 30px; }
	#footer .infobox .addresslist>li { display:block; }
	#footer .navbox { text-align: center; margin-top: 30px; }
	#footer .navbox #fnav { display: none; }
	#footer .navbox .copyright { display: flex; justify-content: center;}
}
@media screen and (max-width: 767px) {
	#footer .footerinfo { margin: 40px 0; }
	#footer .infobox .logo { width: 280px; margin-bottom: 20px; }
	#footer .navbox { margin-top: 20px; }
}
@media screen and (max-width: 480px) {
	#footer .navbox .copyright { display: block;}
}