.menu {
   width: 130px;
position: relative;
display: inline-block;
padding: 0.1em 0.3em;
text-decoration: none;
border-top: 1px solid #5B5B5B;/*上線*/
border-bottom: 1px solid #5B5B5B;/*下線*/
	color: #5B5B5B;
}
.menu:after,
.content a::before {
position: absolute;
bottom: 0;
content: '';
transition: all 0.3s ease;
}
.menu:after {
right: 50%;
left: 50%;
width: 0;
height: 100%;
background-color: #ff69b4;/*ホバー時の背景色*/
}
.menu:hover {
	color: #ff69b4;
}
.menu::before {
left: 0;
width: 100%;
height: calc(100% - 2px);
}
.menu:hover:after {
bottom: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.3;
}
.menu:hover::before {
right: 50%;
left: 50%;
width: 0%;
}
.menu2 {
   width: 130px;
position: relative;
display: inline-block;
padding: 0.1em 0.3em;
text-decoration: none;
border-top: 1px solid #5B5B5B;/*上線*/
border-bottom: 1px solid #5B5B5B;/*下線*/
	color: #fff;
	background-color: #ff69b4;/*ホバー時の背景色*/

}

* {
  box-sizing: border-box;
}

body {
}

header {
	font-size : 20px;
	color:#5B5B5B;
	font-family:'Comfortaa', cursive;
	     text-align: center;
 height: 185px;
  width: 100%;
  padding: 10px 15px;
  top: 0;
}

nav {
    text-align: center;
}

ul {
  display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}



/**********************************　
以下、ハンバーガーメニューの設定　
************************************/