.gnavi{
    display: flex;
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
    /*margin:0 0 0 0px;*/
    list-style: none;
   
}
.gnavi li a{
    display: block;
    padding:10px 30px;
    text-decoration: none;
    color: #333;
}
.gnavi li{
    margin-bottom:10px;
}

/*背景の設定*/

.gnavi li a{
    /*背景色の基点とするためrelativeを指定*/
	position: relative;
    margin: 0 auto;
}

.gnavi li a::after {
	content: '';
    /*絶対配置で線の位置を決める*/
	position: absolute;
	z-index: -1;
	bottom: 0;
	left:0;
   
       /*背景の形状*/
	width: 0;
	height:100%;
	background:#0481A2;
     /*アニメーションの指定*/
	transition:all .5s;
	opacity: 0;/*はじめは透過0*/
}
/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
    /*背景の形状*/
	width: 200%;/*横幅を伸ばす*/
	opacity: 1;/*不透明に*/
}
.gnavi li.current a,
.gnavi li a:hover{
  	color: rgb(255, 255, 255);
}