@keyframes slime1 {
  0% {
    transform: scale(1, 1) translate(0%, 0%); }
  15% {
    transform: scale(0.9, 0.9) translate(0%, 5%); }
  30% {
    transform: scale(1.3, 0.8) translate(0%, 10%); }
  50% {
    transform: scale(0.8, 1.3) translate(0%, -10%); }
  70% {
    transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% {
    transform: scale(1, 1) translate(0%, 0%); } }

@keyframes slime2 {
  0% {
    transform: scale(1, 1) translate(0%, 0%); }
  20% {
    transform: scale(1, 1.06) translate(-5%, -4%) skew(6deg, 0deg); }
  50% {
    transform: scale(1, 0.94) translate(5%, 4%) skew(-6deg, 0deg); }
  65% {
    transform: scale(1, 1.03) translate(2%, -2%) skew(-3deg, 0deg); }
  80% {
    transform: scale(1, 0.97) translate(-2%, 2%) skew(3deg, 0deg); }
  100% {
    transform: scale(1, 1) translate(0%, 0%); } }

@keyframes skew {
  0% {
    transform: skew(0deg, 0deg); }
  5% {
    transform: skew(5deg, 4.2deg); }
  10% {
    transform: skew(-4deg, -3deg); }
  15% {
    transform: skew(3deg, 2.2deg); }
  20% {
    transform: skew(-2deg, -1.5deg); }
  25% {
    transform: skew(0.9deg, 0.9deg); }
  30% {
    transform: skew(-0.6deg, -0.6deg); }
  35% {
    transform: skew(0.3deg, 0.3deg); }
  40% {
    transform: skew(-0.2deg, -0.2deg); }
  45% {
    transform: skew(0.1deg, 0.1deg); }
  50% {
    transform: skew(0deg, 0deg); } }

@keyframes long_skew {
  0% {
    transform: skew(0deg, 0deg); }
  2% {
    transform: skew(6deg, 5.2deg); }
  4% {
    transform: skew(-5deg, -4deg); }
  6% {
    transform: skew(5deg, 4.2deg); }
  8% {
    transform: skew(-4deg, -3deg); }
  10% {
    transform: skew(4deg, 3.2deg); }
  12% {
    transform: skew(-3deg, -2deg); }
  14% {
    transform: skew(2deg, 2.2deg); }
  20% {
    transform: skew(-2deg, -1.5deg); }
  25% {
    transform: skew(0.9deg, 0.9deg); }
  30% {
    transform: skew(-0.6deg, -0.6deg); }
  35% {
    transform: skew(0.3deg, 0.3deg); }
  40% {
    transform: skew(-0.2deg, -0.2deg); }
  45% {
    transform: skew(0.1deg, 0.1deg); }
  50% {
    transform: skew(0deg, 0deg); } }

@keyframes bounce {
  0%, 100%, 50%, 80% {
    transform: translateY(0px); }
  20%, 40% {
    transform: translateY(-30px); }
  60% {
    transform: translateY(-15px); } }

@keyframes keyvisual {
  0% {
    transform: translateX(-50%) translateY(-45%) rotate(-7.11deg) scale(0.8); }
  80% {
    transform: translateX(-50%) translateY(-55%) rotate(-7.11deg); }
  100% {
    transform: translateX(-50%) translateY(-50%) rotate(-7.11deg) scale(1); } }

.lazy {
  opacity: 0;
  transform: translateY(30%);
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.275, 1.52), opacity 0.3s; }
  .lazy.animate {
    opacity: 1;
    transform: translateY(0); }

.keyvisual img.copy.bounce {
  animation: keyvisual 1s ease-out; }

article#desc .ices img {
  opacity: 0;
  transform: translateY(30%);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.275, 1.52), opacity 0.3s; }
  article#desc .ices img.animate {
    opacity: 1;
    transform: translateY(0); }

article#desc .ices svg {
  opacity: 0;
  transition: opacity .3s; }
  article#desc .ices svg.animate {
    opacity: 1; }

article#about header .about_title_left, article#about header .about_title_right {
  width: 190px;
  height: 190px;
  margin-right: -40px;
  margin-bottom: -18px;
  margin-left: -40px;
  margin-top: -20px; }
  @media screen and (max-width: 640px) {
    article#about header .about_title_left, article#about header .about_title_right {
      width: 26vw;
      height: 26vw;
      margin-right: -5vw;
      margin-bottom: -18px;
      margin-left: -5vw;
      margin-top: -20px; } }
  article#about header .about_title_left.skew, article#about header .about_title_right.skew {
    animation: skew 1s; }
  article#about header .about_title_left.slime2, article#about header .about_title_right.slime2 {
    animation: slime2 .7s; }
  article#about header .about_title_left.bounce, article#about header .about_title_right.bounce {
    animation: bounce 1s ease; }

article#lineup > a:hover .lineup_text {
  opacity: .8; }

article#lineup > a:hover .lineup_icon {
  animation: slime2 .5s; }

article#characters ul li button {
  cursor: pointer; }
  article#characters ul li button img:first-child {
    z-index: 2; }
  article#characters ul li button svg:last-child {
    position: relative;
    z-index: 1; }
  article#characters ul li button svg {
    width: 100%;
    height: 100%; }
  article#characters ul li button svg.skew, article#characters ul li button img.skew {
    animation: skew 1s; }
  article#characters ul li button svg.slime1, article#characters ul li button img.slime1 {
    animation: slime1 .5s; }
  article#characters ul li button svg.slime2, article#characters ul li button img.slime2 {
    animation: slime2 .7s; }
  article#characters ul li button svg.bounce, article#characters ul li button img.bounce {
    animation: bounce 1s ease; }
  article#characters ul li button svg.long_skew, article#characters ul li button img.long_skew {
    animation: long_skew 6s; }
  article#characters ul li button svg.very_long_skew, article#characters ul li button img.very_long_skew {
    animation: long_skew 15s; }