body {

  margin: 0;
  font-family: arial;
  width: 100%;
  height: 100vh;
  animation: bugfix infinite 1s;
  -webkit-animation: bugfix infinite 1s;
}

@keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}


/*==================================================
　5-3-7 上下に線が伸びて背景になる
===================================*/

.gnavi li a{
    /*線の基点とするためrelativeを指定*/
	position: relative;
    /*はみ出る要素を隠す*/
	overflow: hidden;
    /*アニメーションの指定*/
	transition: all .2s;
}

/*現在地とhoverの設定*/
.gnavi li.current a,
.gnavi li a:hover{
    /*背景色をつける*/
    background: #f7e47c94;
	color:#333;
}

/*背景がつくのアニメーションの開始を0.5秒遅らせる*/
.gnavi li a:hover{
	transition-delay: .5s;
}

/*線の設定*/
.gnavi li a:before,
.gnavi li a:after {
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    left: 0;
    /*線の形状*/
    height: 2px;
    width:100%;
    background: #f7e47c94;
    /*アニメーションの指定*/
	transition: all .5s;
}

/*線の位置と変化*/
.gnavi li a::before {
    top: 0;
	transform: translateX(-100%);/*X方向に-100%移動*/
}
.gnavi li a::after {
    bottom: 0;
	transform: translateX(100%);/*X方向に100%移動*/
}

/*hoverした際の線の変化*/
.gnavi li a:hover::before ,
.gnavi li a:hover::after {
	transform: translateX(0);/*X方向に0%移動*/
}
/*========================================*/


.pc-nav nav ul{
	display: flex;
	justify-content: flex-end;
}
/*footer ul{
	display: flex;
	justify-content:center;
}*/
.pc-nav nav ul li,footer ul li{
	display: block;
	padding: 0 2%;
/*  text-shadow: 0px 0px 10px #fff;
*/	
}
.pc-nav nav ul li a,footer ul li a{
	display: block;
color:#000;  transition : all 0.5s ease 0s;	font-size: 20px;
}
.pc-nav nav ul li a:hover,footer ul li a:hover{color: #333;
}
#overlay-button {
  position: fixed;
  right: 1em;
  top: 0;
  padding: 26px 11px;
  z-index: 9999999;
  cursor: pointer;
  user-select: none;
}
#overlay-button span {
  height: 4px;
  width: 35px;
  border-radius: 2px;
  background-color: #272727;
  position: relative;
  display: block;
  transition: all .2s ease-in-out;
}
#overlay-button span:before {
  top: -10px;
  visibility: visible;
}
#overlay-button span:after {
  top: 10px;
}
#overlay-button span:before, #overlay-button span:after {
  height: 4px;
  width: 35px;
  border-radius: 2px;
  background-color: #272727;
  position: absolute;
  content: "";
  transition: all .2s ease-in-out;
}
#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
  background: #272727;
}

input[type=checkbox] {
  display: none; 
  
}

input[type=checkbox]:checked ~ #overlay {
  visibility: visible; 
     top: 0;
    left: 0;

}

input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
  background: transparent;
  
  
}
input[type=checkbox]:checked ~ #overlay-button span:before {
  transform: rotate(45deg) translate(7px, 7px);

}
input[type=checkbox]:checked ~ #overlay-button span:after {
  transform: rotate(-45deg) translate(7px, -7px);


}

#overlay {
  height: 100vh;
  width: 100vw;
  background: #6799bf;
/*     background: rgb(181,100,217);
    background: linear-gradient(90deg, rgba(238,96,156,1) 0%, rgba(181,100,217,1) 100%);
*/   z-index: 9999;
  visibility: hidden;
  position: fixed;

}
#overlay.active {

}
#overlay ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  height: 100vh;
  padding-left: 0;
  list-style-type: none;
}
#overlay ul li {
  padding: 1em;
}
#overlay ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 1.5em;
}
#overlay ul li a:hover {
  color: #000!important;
}