.tab{
  margin:2em auto;
  text-align: center;
}
.tab label{
  margin:3em .2em;
  padding:.7em 3em;
  border: 3px solid rgba(128,234,128,.5);
  border-radius:5px;
  box-shadow: 0 2px 2px rgba(0,0,0,.01);
  color:#555;
}
.tab label:hover{
  background-color:rgba(128,234,128,.5);
  transform:scale(1.1);
  opacity:.7;
}
.tab input{
  display:none;
}
.foods{
  display:block;
  margin-top:2em;
  text-align:center;
}
.foods ul{
  display:none;
  color:#333;
  text-align:center;
  list-style: none;
  -webkit-animation: slide 0.5s ease-in-out 0s;
  animation:slide 0.5s ease-in-out 0s;
}
.foods ul li:before{
  font-family: "Font Awesome 5 Free";/*Font Awesomeの読み込み必要*/;
    color: #f8c678;
    font-weight: 900;
    padding-right:7px;
    padding-left:10px;
}
.tab input:nth-of-type(1):checked ~ .foods ul:nth-child(1),
.tab input:nth-of-type(2):checked ~ .foods ul:nth-child(2),
.tab input:nth-of-type(3):checked ~ .foods ul:nth-child(3){
  display:block;
}
.tab input:checked + label{
  background-color:rgba(128,234,128,.7);
  color:#fff;
}
@keyframes slide{
  0%{
    opacity:0;
    transform:translateY(20px);
  }
  100%{
    opacity:1;
    transform:translateY(0px);
  }
}