ul.sake-list li > a {
  display: block;
  position: relative;
  overflow: hidden;
}

ul.sake-list li > a:hover img {
  opacity: 1;
  transform: scale(1.1);
}


.overlay-black {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0);
  transition: 0.3s;
  z-index: 1;
}
.overlay-black p.wave {
  color: rgba(255,255,255,0);
  font-size: 24px;
  transition: 0.3s;
  position: absolute;
  top: calc(50% - 12px);
  width: 100%;
  left: 0;
  letter-spacing: .1em;
  font-family: "ÞâÌÀÄ«", YuMincho, "Hiragino Mincho ProN W3", "¥Ò¥é¥®¥ÎÌÀÄ« ProN W3", "Hiragino Mincho ProN", "HGÌÀÄ«E", "£Í£Ó £ÐÌÀÄ«", "£Í£Ó ÌÀÄ«", serif;
}

ul.sake-list li > a:hover .overlay-black {
  background-color: rgba(0,0,0,0.3);
}
ul.sake-list li > a:hover .overlay-black p.wave {
  color: rgba(255,255,255,1);
}

ul.sake-list li > a .overlay-black p.wave span {
  display: inline-block;
}




@keyframes wave {
  100% {
    transform: translate3d(0, -10px, 0);
  }
}

ul.sake-list li > a:hover .overlay-black p.wave span {
  animation-name: wave;
  animation-duration: .2s;
  animation-direction: alternate;
  animation-iteration-count: 2;
}

ul.sake-list li > a:hover .overlay-black p.wave span:nth-child(2) {
  animation-delay: .1s;
}

ul.sake-list li > a:hover .overlay-black p.wave span:nth-child(3) {
  animation-delay: .2s;
}

ul.sake-list li > a:hover .overlay-black p.wave span:nth-child(4) {
  animation-delay: .3s;
}