@use "../global" as *;

@keyframes sdl {
      0% {
            transform: translateY(0);
      }


      100% {
            transform: translateY(200%);
      }

}

@keyframes gradientAnimation {
      0% {
            background: linear-gradient(to right, rgba(210, 20, 90, 1) 0%, rgba(240, 140, 180, 1) 83%);
      }



      100% {
            background: linear-gradient(-45deg, rgba(210, 20, 90, 1) 0%, rgba(240, 140, 180, 1) 83%);
      }
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
      0% {
            height: 0;
            top: 0;
            opacity: 0;
      }

      30% {
            height: 30px;
            opacity: 1;
      }

      100% {
            height: 0;
            top: 50px;
            opacity: 0;
      }
}

@keyframes logoAnimation {
      0% {
            background-position: 0 0;
      }

      100% {
            background-position: 30000px 0;
      }
}

@keyframes drawer-main {
      0% {
            opacity: 0;
      }

      50% {
            opacity: 0.66;
      }

      100% {
            opacity: 1;
      }
}

.c-img-hover-zoom {
      transition: ease-in-out .37s;

      &:hover {
            transform: scale(1.1);
            opacity: 1;
      }
}

.c-text-link {
      color: $key_pink;
      transition: linear .11s;

      &:hover {
            color: $key_black;
      }
}