@charset "utf-8";




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




/* =========================
   下スクロール時（min）
   ========================= */

#gHeader.min h1 img.bg{
transform: top:-90px;}





@media(min-width:751px){

}



#gHeader >.inner{ display: flex; width: 1000px; margin: 0 auto; height: 93px; }
#gHeader h1{ width: 250px; padding-top: 30px;padding-left: 0; position: relative;}

#gHeader h1 img.bg{ width: auto; height: 219px; position: absolute; top: 0; right: 100%;transform: translateX(270px);z-index: -1; opacity: 1;}
#gHeader h1 img.bg:hover{ opacity: 1 !important;}

#gHeader h1 img.logo{width: 180px;}
#subPage #gHeader h1 img.logo{width: 240px;}


#subPage #gHeader h1{ width: 250px; padding-top: 25px;padding-left: 0; position: relative;}
#subPage #gHeader h1 img.bg{ width: auto; height: 110px; top:4px;transform: translateX(320px);z-index: -1; opacity: 1;}


#gHeader.min h1{padding-top:10px;}
#topPage #gHeader.min h1 img.logo{width:80px;}
#gHeader.min h1 img.bg{top:-130px;}



#gHeader nav{ width: calc(100% - 400px);}
#gHeader #contactBtn{ width: 200px;padding-top: 14px; padding-right: 0; text-align: right;}

#gHeader nav ul{
    max-width: 500px;
    margin: 13px 0 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 2px;
    row-gap: 2px;
}

#gHeader nav ul li{ text-align: center; font-size: 9px; line-height: 1.2em;}

#gHeader nav ul li a{ display: block;height: 80px;box-sizing: border-box;color: #14aae1;}
#gHeader nav ul li a.now{border-bottom: 3px solid #14aae1;}

#gHeader nav ul li a .img{ width: 60%; margin: 0 auto; display: block; margin-bottom: 5px;}
#gHeader nav ul li a .txt{ font-size: 9px;}

#gHeader h1:hover a{opacity: 0.8;}
#gHeader #contactBtn a:hover{opacity: 0.8;}

#gHeader #contactBtn img{ width: 150px;}

@media(max-width:750px){

#gHeader{height: 260px; width: 100%;}
#gHeader >.inner{ display: flex; width: 100%; margin: 0 auto; height: 93px; }

#gHeader h1 img.logo{width: 240px;}
#gHeader h1,
#subPage #gHeader h1{ width: 320px; padding-top: 30px;padding-left: 0; position: absolute; top: 5px; left: 15px;}
#gHeader.min h1 img.logo{width:100%;}
#gHeader.min h1 img.bg{top:0;}


#gHeader >.inner{ display: block;}
#gHeader nav{ width: 100%; position: absolute; top: 130px; border-top: 1px solid #ddd;}
#gHeader nav ul{
    max-width:none;
    margin: 2px 10px 0;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 2px;
    row-gap: 2px;
}
#gHeader nav ul li{  font-size: 20px; }

#gHeader nav ul li a .img{ width: 60%; margin: 0 auto; display: block; margin-bottom: 5px;}
#gHeader nav ul li a .txt{ font-size: 16px;line-height: 1.2em;}

#gHeader nav ul li a.now{border-top: 3px solid #14aae1;}
#gHeader nav ul li a.now{border-bottom: none;}

#gHeader #contactBtn{ width: 280px; position: absolute; right: 10px; top: 10px;}
#gHeader #contactBtn{ width: 280px;padding-top:0; padding-right: 0;}

#gHeader nav ul li a{ display: block;background: none; padding-top: 10px;height: 125px;box-sizing: border-box;}

#gHeader #contactBtn img{ width: 200px;margin-top: 10px;}


#gHeader.min{ top: -130px;}
#gHeader.min h1 img.logo{width:100%;}
#gHeader.min h1 img.bg{top:-130px;}




}



/*サブヘッダー*/