@charset "utf-8";

#gHeader{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50;
	width: 100%;
	transform: translateY(0);
	transition: all 0.4s ease;
	will-change: transform;
}

#gHeader >.inner{width: 1000px; margin: 0 auto; position: relative;}

#gHeader h1{ width: 80px; position: absolute; left: 0; top: 65px;}

#gHeader nav{
  display:flex;
  justify-content:flex-end;
padding-top: 80px;
}

#gHeader nav ul{
  display:flex;
  gap:60px;
}

#gHeader nav ul li{
  text-align:center;
}

#gHeader nav ul li a{ color: #fff; line-height: 1.2em;}
#gHeader nav ul li a span{ display: block;}
#gHeader nav ul li a span.main{ font-size: 11px;}
#gHeader nav ul li a span.sub{ font-size: 50%;}

body.OTHER #gHeader nav{padding-top: 95px;}
body.OTHER #gHeader.min nav{padding-top: 40px;padding-bottom: 22px;}


@media(max-width:750px){
#gHeader >.inner{width: auto; margin: 0 auto; position: relative;}

#gHeader h1{ width: 90px; position: absolute; left: 44px; top: 60px;}

#gHeader nav{
  display:flex;
  justify-content:flex-end;
padding-top: 90px;
padding-right: 40px;
}

#gHeader nav ul{
  display:flex;
  gap:60px;
}

#gHeader nav ul li{
  text-align:center;
}

#gHeader nav ul li a{ color: #fff; line-height: 1.2em;}
#gHeader nav ul li a span{ display: block;}
#gHeader nav ul li a span.main{ font-size: 21px;}
#gHeader nav ul li a span.sub{ font-size: 50%;}

}

.headerBg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(180deg,rgba(15, 18, 37, 0.8) 0%,rgba(15, 18, 37, 0.6) 30%, rgba(15, 18, 37, 0) 100%); transition: all 0.2s ease;
}
.headerBgW{ position: absolute; left: 0; width: 100%; height: 100%;
background: #162236; transition: all 0.2s ease; top: 0;opacity: 0;
}



#gHeader.min .headerBgW{ opacity: 1;}
#gHeader.min h1{ width: 50px; position: absolute; left: 0; top: 20px;}
#gHeader.min nav{padding-top: 30px; padding-bottom: 10px;}


@media(max-width:750px){

#gHeader.min .headerBgW{ opacity: 1;}
#gHeader.min h1{ width: 70px; position: absolute; left: 0; top: 35px; left: 40px;}
#gHeader.min nav{padding-top: 70px; padding-bottom: 0;}
#gHeader.min nav .sub{ opacity: 0;}

body.OTHER #gHeader.min nav {
    padding-top: 70px;
    padding-bottom: 25px;
}

}

/*サブヘッダー*/






.lang{ display:block; position: absolute; right: 0; width: 100%;z-index: 5;}
.lang ul{ display: flex; width: 1000px; margin: 0 auto; gap: 10px;  justify-content: right;}
.lang ul li{ font-size: 10px; color: #ccc; border:; line-height: 1em;}
.lang ul li a{ display: block;border: 1px solid #ccc; border-width: 0 1px 1px; border-radius: 0 0 5px 5px; width: 80px; text-align: center; color: #fff;padding: 10px 0 5px; position: relative; top: -5px;}
.lang ul li a:hover{ top: 0;  background: #162236; opacity: 1;}

@media(max-width:750px){

.lang ul{ display: flex; width: auto; margin: 0 auto; gap: 10px;  justify-content: right;}
.lang ul li{ font-size: 15px; color: #ccc; border:; line-height: 1em;}
.lang ul li a{ display: block;border: 1px solid #ccc; border-width: 0 1px 1px; border-radius: 0 0 5px 5px; width: 110px; text-align: center; color: #fff;padding: 15px 0 ; position: relative; top: 0;}
.lang ul li a:hover{ top: 0;  background: #162236; opacity: 1;}

}