@keyframes showHide {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    pointer-events: none;
  }
}


.move .animation-bg {
  background: #6FC083;
  display: block;
  content: "";
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  position: fixed;
  z-index: 50;


}



@keyframes showHide {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    pointer-events: none;
  }
}



 
.btt .animation-bg {
    
      animation: PageAnime-btt 1s ease-in-out forwards;
 

  animation-name: PageAnime-btt;
}
@keyframes PageAnime-btt {
  0% {
    transform-origin: bottom;
    transform: scaleY(1);
  }
  50% {
    transform-origin: bottom;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: top;
  }
  100% {
    transform-origin: top;
    transform: scaleY(0);
  }
}
 


.op-gazou{
    width: 80%;
    left: 5%;
}
.op-fead-tittle{
 position: absolute;
 top: 30%;
left: 10%;
 position: fixed;
  z-index: 60;

}



.cheers-wrap {
  position: relative;
  left: -10vw;
  width: 100vw;
  margin: 10rem auto;
}





@media (min-width: 768px) {
.op-gazou{
    width: 50%;
}
.op-fead-tittle{
 position: absolute;
 z-index: 60;
 top: 35%;
 left: 35%;
 position: fixed;
}


.cheers-wrap {
  position: relative;
  left: -15vw;
  width: 40vw;
  margin: 30vh auto;
}


.glass img {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: bottom center;
}

}


/* グラス共通 */
.glass {
  position: absolute;
  bottom: 0;
  width: 30%;               /* サイズは親基準 */
  transition: transform 0.6s cubic-bezier(.25,1.4,.5,1);
}

/* 初期位置 */
.cocktail {
  left: 0;
  transform: translateX(0) rotate(0deg);
}

.wine {
  right: 0;
  transform: translateX(0) rotate(0deg);
}

/* 乾杯状態（距離は控えめ） */
.cheers .cocktail {
  transform: translateX(20%) rotate(15deg);
}

.cheers .wine {
  transform: translateX(-20%) rotate(-15deg);
}