.header_area{
    background-image: url("../image/top-bar.jpg");
    background-size:cover;
    width:100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
.header_area_index{
    background-image: url("../image/background_top.png");
    background-size:cover;
    width:100%;
}
.header_wrap{
    display:flex;
    justify-content:space-between;
    width:100%;
    margin:0 auto;
}
.header_logo p{
    margin-left:35px;
    margin-top:10px;
    color:#fff;
}
#header_logo{
    width:400px;
}

.gnav ul{
    margin-top:10px;
    padding-right:35px;
    display:flex;
    list-style-type:none;
}
.gnav ul li{
    padding-left:20px;
}
.gnav ul li a{
    color:#fff;
    text-decoration:none;
}
.gnav ul li a:hover{
    opacity:.8;
}

#btn-gnav-menu{
    position:fixed;
    top:0;
    right:0;
    width:50%;
}
#btn-gnav-menu ul{
    background-color:rgba(64,77,159,0.5);
    list-style:none;
}
#btn-gnav-menu ul li{
    padding:16px;
}

#btn-gnav-menu ul li a{
    color:#fff;
    text-decoration:none;
    font-size:24px;
}

#btn-gnav-menu ul li:hover{
    background-color:rgba(64,77,159);
}

.d-none{
    display:none;
}

/*ハンバーガーメニュー*/
@media screen and (max-width:951px){
    .gnav{
        display:none;
    }
    #btn-gnav{
    	position: fixed;
    	top: 20px;
    	right: 20px;
    	width: 30px;
    	height: 24px;
    	z-index: 5;
    	cursor: pointer;
    	transition: all 400ms;
    	-webkit-transition:all 400ms;
    }

    #btn-gnav span {
      	position: absolute;
      	width: 30px;
      	height: 4px;
      	background: #fff;
      	border-radius: 10px;
      	-webkit-transition: all 400ms;
      	transition: all 400ms
    }

    #btn-gnav span:nth-child(1){
            top: 0;
    }

    #btn-gnav span:nth-child(2){
            top: 10px;
    }

    #btn-gnav span:nth-child(3){
            top: 20px;
    }

    #btn-gnav.active{
            transform: rotate(180deg);
            -webkit-transform:rotate(180deg);
    }

    #btn-gnav.active span{
            background: #fff;
            right:0;
    }

    #btn-gnav.active span:nth-child(1){
            width: 24px;
            transform: translate(-8px,18px) rotate(45deg);
            -webkit-transform: translate(-8px,18px) rotate(45deg);
    }

    #btn-gnav.active span:nth-child(3){
            width: 24px;
            transform: translate(-8px,-18px) rotate(-45deg);
            -webkit-transform: translate(-8px,-18px) rotate(-45deg);
    }

}

/*　レスポンシブ（768px以下） */
@media screen and (max-width:768px){
	.header_wrap{
        width:100%;
	}
    #header_logo{
        width:300px;
    }
    .header_logo p{
        margin-left:25px;
    }
}

/*　レスポンシブ（450px以下） */
@media screen and (max-width:450px){
	.header_wrap{
        width:100%;
	}
    #header_logo{
        width:200px;
    }
    .header_logo p{
        margin-left:15px;
    }
}