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



/*
base #333
main #005188
*/



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


Header


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

#header { width: 100%; z-index: 100; margin-bottom: 80px; }
#header .mainbox { display: flex; align-items: center; justify-content: space-between; height: 120px; }
#header .cap { flex:1; margin-left:30px; font-size:1.4rem; line-height:1.6; }
#header .logo { line-height: 0; margin-left: 60px; }
#header .logo img { width: 360px; }
@media screen and (max-width: 1280px) {
	#header .cap { display: none; }
}
@media screen and (max-width: 1040px) {
}
@media screen and (max-width: 767px) {
	#header,
	#header .mainbox { height: 80px; }
	#header { margin-bottom: 40px; }
	#index #header { margin-bottom: 80px; }
	#header .logo { margin-left: 20px; }
	#header .logo img { width: 200px; }
}

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






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


Nav


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

#gnav { }
#gnavbg { display: none; }
#gnav .navlogo { display: none; }
#gnav .navbox { display: flex; flex-direction: column-reverse; }
#gnav ul.main { display: flex; justify-content: flex-end; align-items: center; }
#gnav ul.main>li { display: inline-block; position: relative; margin-left: 20px; line-height: 1; }
#gnav ul.main>li a { text-decoration: none; position: relative; vertical-align: middle; font-family: 'Roboto Condensed', sans-serif; letter-spacing: 0.05em; font-size: 2.0rem; position: relative; }
#gnav ul.main>li a:after { position: absolute; content: ""; background: #8a8a8a; height: 1px; width: 0; bottom: -6px; left: 0; transition: 0.3s; }
#gnav ul.main>li a:hover:after { width: 100%; }
#gnav ul.main>li a:hover { color: #aaa; opacity: 1; }
#gnav ul.main>li[data-cat="contact"] { }
#gnav ul.main>li[data-cat="contact"] a { padding: 16px 30px; display: block; background: #666; color: #fff; }
#gnav ul.main>li[data-cat="contact"] a:after { display: none; }
	
/* lan */
#gnav ul.lan { display: flex; font-size: 1.4rem; justify-content: flex-end; margin-right: 60px; margin-bottom: 10px; }
#gnav ul.lan li { line-height: 1; }
#gnav ul.lan li:first-child { margin-right: 10px; line-height: 1; }
#gnav ul.lan li a { text-decoration: none; color: #ccc; }
#gnav ul.lan li.current a { text-decoration: underline; pointer-events: none; color: #8a8a8a; }
#gnav ul.lan li a:hover { color: #8a8a8a; }
@media screen and (max-width: 1040px){
	#gnav{ z-index: 1002; position: fixed; top: 0; right: -640px; display: flex; justify-content: center; align-items: center; height: 100%; width: 640px; pointer-events: none; background: #8a8a8a; transition: right 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0s; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; }
	#gnav::-webkit-scrollbar { display: none; }
	#gnav .navbox {z-index: 10; display:block; }
	#gnav.is-open{ pointer-events: auto; right: 0; }
	
	#gnavbg { display: block;  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 1000; background: #0062bf; visibility: hidden; cursor: default; box-sizing: border-box; animation: bgfadeout 1.0s ease-out 0.3s 1 normal both; opacity:0; }
	#gnavbg.is-open{ pointer-events: auto; animation: bgfadein 0.3s ease-out 0s 1 normal both;visibility: visible; }
	
	#gnav ul.main { position: static; display: block; text-align: center; }
	#gnav ul.main>li a { font-size: 6.0rem; color: #fff; }
	#gnav ul.main>li { display: block!important; margin: 0; margin-bottom: 1.5em;  margin-left: 2em; opacity: 0;}
    #gnav ul.main>li[data-cat="contact"] a { padding: 0; background: none; }
    #gnav ul.main>li a:after { display: none; }
	
	/* sub */	
	#gnav ul.lan { position: static; display: block; text-align: center; margin: 0; margin-top: 40px; opacity: 0; }
    #gnav ul.lan li { display:inline-block; }
    #gnav ul.lan li a { text-decoration: none; color: #ccc; }
    #gnav ul.lan li.current a {  color: #fff; }
	
	
	#gnav.is-open ul.main>li { margin-left: 0; opacity: 1; transition: 1.3s; }
	#gnav.is-open ul.main>li:nth-child(1) { -webkit-transition-delay: .3s; transition-delay: .3s; }
	#gnav.is-open ul.main>li:nth-child(2) { -webkit-transition-delay: .6s; transition-delay: .6s; }
	#gnav.is-open ul.main>li:nth-child(3) { -webkit-transition-delay: .9s; transition-delay: .9s; }
	#gnav.is-open ul.main>li:nth-child(4) { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; }
	#gnav.is-open ul.lan { transition: 1.3s; -webkit-transition-delay: 1.5s; transition-delay: 1.5s; opacity: 1; }
}
@media screen and (max-width: 639px){
	#gnav{ width: 100vw;}
	#gnav ul.main>li a { font-size: 3.8rem; }
}	







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


Menubtn


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

#menubtn {display: none; z-index: 1004; }
@media screen and (max-width: 1040px){
	#menubtn { position: fixed; top: 20px; right: 20px; 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: 60px; height: 2px; background: #8c8c8c; position: absolute; left: 50%; margin-left: -30px;
		-webkit-transition: all 0.3s; transition: all 0.3s;
	}
	#menubtn a #line1 { top: 24px; transition-delay: .3s;}
	#menubtn a #line2 { top: 36px; transition-delay: .4s;}
	#menubtn a #line3 { top: 20px; transition-delay: .0s;
		-webkit-transform:translateY(10px) translateX(0) rotate(-30deg) scale(0,1);
		transform:translateY(10px) translateX(0) rotate(-30deg) scale(0,1);
	}
	#menubtn a #line4 { top: 40px; transition-delay: .0s;
		-webkit-transform:translateY(-10px) translateX(0) rotate(30deg) scale(0,1); 
		transform:translateY(-10px) translateX(0) rotate(30deg) scale(0,1);
	}
	/*#menubtn a:hover #line1 { top: 28px; }
	#menubtn a:hover #line2 { top: 32px; }*/
	#menubtn.active a .line { background: #fff; } 
	#menubtn.active a #line1 { transition-delay: .0s; width: 0; }
	#menubtn.active a #line2 { transition-delay: .1s; width: 0; }
	#menubtn.active a #line3 {
		transition-delay: .8s;
		-webkit-transform:translateY(10px) translateX(0) rotate(-30deg) scale(1,1);
		transform:translateY(10px) translateX(0) rotate(-30deg) scale(1,1);
	}
	#menubtn.active a #line4 { 
		transition-delay: .9s;
		-webkit-transform:translateY(-10px) translateX(0) rotate(30deg)  scale(1,1); 
		transform:translateY(-10px) translateX(0) rotate(30deg)  scale(1,1);
	}
}
@media screen and (max-width: 767px){
	#menubtn { position: fixed; top: 10px; right: 10px; width: 50px; height: 50px;}
	#menubtn a .line { width: 50px; }
}










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


Mainv.index


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

/* mainv */
#mainv.index { position: relative; }
#mainv.index .mainbox {display:flex;align-items: center;}
#mainv.index .mainbox .txtbox{ width:48%; display:flex; justify-content:center; flex-direction:column; align-items:center;}
#mainv.index .mainbox .txtbox .inbox { }
#mainv.index .mainbox .txtbox .maincopy{font-family:'Roboto Condensed', sans-serif; font-size:7.4rem; line-height:1.1; color:#666; margin-bottom:30px;}
#mainv.index .mainbox .txtbox .subtxt{font-family: 'Noto Sans JP', sans-serif; font-size:3.2rem; color:#666; line-height:1.8; letter-spacing:0.16em; font-feature-settings : "palt";}
#mainv.index .imgbox{ width:52%; height:800px; }
#mainv.index .imgbox img{width:100%; height:100%; object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/}
@media screen and (max-width: 1040px) {
	#mainv.index .mainbox { display:block; }
	#mainv.index .mainbox .txtbox { margin-bottom:50px; width:100%; align-items:flex-start;}
	#mainv.index .mainbox .txtbox .subtxt br{display:none;}
	#mainv.index .imgbox{ height:500px; margin:0 -7%; width:114%;}
}
@media screen and (max-width: 767px) {
	#mainv.index .mainbox .txtbox .maincopy{font-size:4.2rem;  margin-bottom:20px;}
	#mainv.index .mainbox .txtbox .subtxt{font-size:2.0rem; letter-spacing:0.1em;}
	#mainv.index .imgbox { height:340px; }
}

#mainv.index .scrolltxt { position: absolute; align-items: center; bottom: 0; display: flex; flex-direction: column; left: 0;  }
#mainv.index .scrolltxt p:nth-child(1) { width: 21px; }
#mainv.index .scrolltxt p:nth-child(2) {width: 15px; animation: sdb 3s infinite; margin-top : 2px; }
@media screen and (max-width: 750px) { 
	#mainv.index .scrolltxt { display : none; }
}
@keyframes sdb { 
	0% { transform: translate(0, 0);}
	40% { transform: translateY(50%); }
	80% { transform: translate(0, 0); }
}







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


Mainv.under


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

/* mainv */
#mainv.under { position: relative; }
#mainv.under .mainbox {display:flex;align-items: center;}
#mainv.under .mainbox .txtbox{ width:46%; display:flex; justify-content:center; flex-direction:column; align-items:center; background: #666; height: 500px; margin-right: -6%; margin-top: 20px; z-index: 1; }
#mainv.under .imgbox{ width:60%; height:620px; }
#mainv.under .imgbox img{width:100%; height:100%; object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/}
@media screen and (max-width: 1280px) {
	#mainv.under .mainbox .txtbox{ width:56%; margin-right: -16%; }
}
@media screen and (max-width: 1040px) {
	#mainv.under .mainbox .txtbox{ width:66%; margin-right: -26%; }
}
@media screen and (max-width: 767px) {
	#mainv.under .mainbox {display:flex; flex-direction: column-reverse;}
	#mainv.under .mainbox .txtbox{ width:100%; height: auto; margin: -40px 0 20px; padding: 20px 0; }
	#mainv.under .imgbox{ width:114%; height:280px; margin:0 -7%; }
}










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


Pankuzu


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

#pankuzu { line-height: 1.4; padding:15px 0; background: #f7f7f7; }
#pankuzu ol { margin: 0 60px; font-size: 0; }
#pankuzu ol li { display:inline; font-size: 16px; }
#pankuzu ol li:before { content:"/"; display: inline-block; margin: 0 5px }
#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; }
	#pankuzu ol { margin: 0 6%; }
}






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


Content


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

#main { margin-top: 0; margin-bottom: 260px;}
#index #main { margin-bottom: 120px;}
@media screen and (max-width: 1040px) { 
	#main { margin-top: 0; margin-bottom: 120px; }
	#index #main { margin-bottom: 120px;}
}










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


Cntside


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

#side {  }













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


Footer


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

#footer { padding-bottom: 20px; }
#footer .contactbox { margin-bottom: 180px; }
#footer .contactbox .box { display: flex; justify-content: space-between; align-items: center;}
#footer .contactbox .box .txtbox{ flex:1; margin-right: 4% }
#footer .contactbox .box .txtbox .telbox{ display:flex; align-items: baseline; margin-top: 40px;}
#english #footer .contactbox .box .txtbox .telbox{ display:block; margin-top: 40px;}
#english #footer .contactbox .box .txtbox .telbox .tel { font-size:4.8rem; margin-bottom: 20px;  }
#footer .contactbox .box .txtbox .telbox .tel{font-family:'Roboto Condensed', sans-serif; font-size:3.2rem; color:#666666; margin-right:20px; line-height: 1;}
#footer .contactbox .box .txtbox .telbox .tel a { font-size:4.8rem; color:#666666; text-decoration:none; }
#footer .contactbox .box .txtbox .telbox .txt .fax { margin-left:15px;}
@media screen and (max-width: 1280px) {
	#footer .contactbox .box .txtbox .telbox { display:block; }
	#footer .contactbox .box .txtbox .telbox .tel { margin-right:0px; margin-bottom:20px; }
}
@media screen and (max-width: 1040px) {
	#footer .contactbox .box{ display:block; margin-bottom: 60px;}
	#footer .contactbox .box .txtbox{ width:100%; margin-bottom: 40px; margin-right: 0; }
}
@media screen and (max-width: 767px) {
	#footer .contactbox { margin-bottom: 80px; }
	#footer .contactbox .box .txtbox{ margin-bottom: 30px;  }

	#footer .contactbox .box .txtbox .telbox .tel { font-size:1.8rem; } 
	#footer .contactbox .box .txtbox .telbox .tel a { font-size:2.8rem; }
    #english #footer .contactbox .box .txtbox .telbox .tel { font-size:2.8rem; }
}
@media screen and (max-width: 639px) {
	#footer .contactbox .box .txtbox .telbox .txt .fax { margin-left:0; display: block; }
}


/* footerinfo */
#footer .footerinfo{display:flex;justify-content:space-between;align-items: flex-end;margin-bottom: 60px;}
#footer .footerinfo .fnav ul.main{display:flex;justify-content:space-between;}
#footer .footerinfo .fnav ul.main>li a{font-family:'Roboto Condensed', sans-serif; font-size:2.0rem; margin-right:15px; text-decoration:none; color: #666666;}
#footer .footerinfo .fnav ul.main>li:last-child a { margin-right:0px; }
#footer .footerinfo .fnav ul.lan { display: flex; font-size: 1.4rem; justify-content: flex-end; margin-right: 0; margin-bottom: 10px; }
#footer .footerinfo .fnav ul.lan li { line-height: 1; }
#footer .footerinfo .fnav ul.lan li:first-child { margin-right: 10px; line-height: 1; }
#footer .footerinfo .fnav ul.lan li a { text-decoration: none; color: #ccc; }
#footer .footerinfo .fnav ul.lan li.current a { text-decoration: underline; pointer-events: none; color: #8a8a8a; }
#footer .footerinfo .fnav ul.lan li a:hover { color: #8a8a8a; }
#footer .cr{font-family:'Roboto Condensed', sans-serif; font-size:1.8rem;}
@media screen and (max-width: 1240px) {
	#footer .footerinfo .fnav { display:none; }
}
@media screen and (max-width: 767px) {
	#footer .footerinfo { margin-bottom: 30px; }
	#footer .cr { font-size:1.4rem;}
}