:root {
    --effect: hover 2s linear infinite; 
  }
  *{
     margin:0;
  }
.loading {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    width: 100vw;
    height: 100vh;
    background: black;
    align-items: center;
    justify-content: center;
}
.loading.hide{
    opacity: 0;
    pointer-events: none;
    transition: opacity 1000ms;
}
.loading p{
display: inline-block;
text-transform: uppercase;
text-align: center;
font-size: 4em;
font-family: arial;
font-weight: 600;
transform: scale(.5);
color: #000000;
-webkit-text-stroke: 2px rgb(0, 0, 0);
}

.loading p:nth-child(1) {
animation: var(--effect);
}

.loading p:nth-child(2) {
animation: var(--effect) .125s;
}

.loading p:nth-child(3) {
animation: var(--effect) .25s;
}

.loading p:nth-child(4) {
animation: var(--effect) .375s;
}

.loading p:nth-child(5) {
animation: var(--effect) .5s;
}

.loading p:nth-child(6) {
animation: var(--effect) .675s;
}

.loading p:nth-child(7) {
animation: var(--effect) .75s;
}

@keyframes hover {
0% {
    transform: scale(.5);
    color: #000000;
    -webkit-text-stroke: 2px rgb(0, 0, 0);
}
20% {
    transform: scale(1);
    color: #C30000;
    -webkit-text-stroke: 3px red;
    /* filter: drop-shadow(0 0 1px rgb(240, 251, 41))drop-shadow(0 0 1px rgb(241, 255, 40))drop-shadow(0 0 3px rgb(0, 0, 0))drop-shadow(0 0 5px rgb(0, 0, 0))hue-rotate(10turn); */
}
50% {
    transform: scale(.5);
    color: #000000;
    -webkit-text-stroke: 2px rgb(0, 0, 0);
}
}

/*-----------------------------------------
ファーストビューアニメ
------------------------------------------*/
@keyframes rogo {
    0% { transform: rotateY(0deg); }
    5% { transform: rotateY(360deg); }
    30% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}
/* 星がキラキラ光るアニメーション */
@keyframes twinkle {
    0% {
      opacity: 0;
    } 
    50% {
      transform: scale(1.1);
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: scale(1);
    }
  }

/*-----------------------------------------
馬が飛び出す
------------------------------------------*/
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}