* {
  box-sizing: border-box;
}

nav {
    text-align: center;
}

ul {
font-family: 'Righteous', cursive;
  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;
 border: 1px solid #808080;
  border-radius: 15px;
     width: 100%;
     max-width: 650px;
     margin: auto;
     margin-bottom: 10px;

}

.menu0 {
	background-color: #FF77A0;
	color: #ffffff;
   width: 100px;
}
.menu {
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
 	position: relative;
	display: inline-block;
	transition: .3s;
	color: #808080;
   width: 100px;
}
.menu:hover {
	background-color: #FF77A0;
	color: #ffffff;
}
.menu::before,
.menu::after {
	position: absolute;
	content: '';
	width: 0;
	background-color: #ff69b4;
	transition: .3s;
}
.menu::before {
	left: 0;
}
.menu::after {
	left: 0;
}
.menu:hover::before,
.menu:hover::after {
	width: 100%;
}




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

@media (max-width: 640px) {


ul {
 border:0;
 display: block;
font-family: 'Righteous', cursive;
  padding: 0;
  margin: 0;
     width: 100%;
     margin: auto;
     margin-bottom: 7px;
     letter-spacing: 0.1em
}

.menu0 {
 border: 1px solid #808080;
  border-radius: 15px;
     margin-bottom: 3px;
	background-color: #FF77A0;
	color: #ffffff;
   width: 100%;
}
.menu {
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
 border: 1px solid #808080;
  border-radius: 15px;
     margin-bottom: 3px;
	transition: .3s;
	color: #808080;
   width: 100%;
}
.menu:hover {
	background-color: #FF77A0;
	color: #ffffff;
}
.menu::before,
.menu::after {
	position: absolute;
	content: '';
	width: 0;
	background-color: #ff69b4;
	transition: .3s;
}
.menu::before {
	left: 0;
}
.menu::after {
	left: 0;
}
.menu:hover::before,
.menu:hover::after {
	width: 100%;
}


}

.title {
display: block;
text-decoration: none;
  border-radius: 15px;
  height:217px;
     width: 100%;
     max-width: 650px;
     margin: auto;
     margin-bottom: 10px;
  background:url('../img/header.png') no-repeat center top;
  background-size: auto 100%;
}
.title:hover{
text-decoration: none;
  background:url('../img/header-.png') no-repeat center top;
  background-size: auto 100%;
}
.title2 {
display: block;
text-decoration: none;
  border-radius: 15px;
  height:120px;
     width: 100%;
     max-width: 650px;
     margin: auto;
     margin-bottom: 10px;
  background:url('../img/header2.png') no-repeat center top;
  background-size: auto 100%;
	font-size : 50px;
}
.title2:hover{
text-decoration: none;
  background:url('../img/header2-.png') no-repeat center top;
  background-size: auto 100%;
}


.footer {
position: relative;
display: block;
text-decoration: none;
  border-radius: 15px;
  height:80px;
     width: 100%;
     max-width: 650px;
     margin: auto;
  background:url('../img/footer.png') no-repeat center top;
  background-size: auto 120%;
  color: #808080;
  text-shadow: 4px 4px 4px #ffffff, -4px -4px 4px #ffffff,
  -4px 4px 4px #ffffff,  4px -4px 4px #ffffff,
  4px 0 4px #ffffff, -4px  0 4px #ffffff,
  0 4px 4px #ffffff,  0 -4px 4px #ffffff;
}
.footer_item {
   position: absolute;          /* 位置指定 */
   top: 50%;                    /* 親要素の半分下にずらす */
   left: 50%;                   /* 親要素の半分右にずらす */
   transform: translateY(-50%) translateX(-50%);    /* 要素自体の半分、上と左にずらす */
}