body {animation: disableScroll .1s linear 5s both}
.steam {
  position: absolute;
  opacity: 0;
  filter: blur(20px);
  transition: all 1s;
  z-index: 2;
}
.steam::before {
  content: "";width: 130vw;height: 110vh;
  position: absolute;display: block;
  opacity: 0;background: url(../img/steam_01.svg) no-repeat center / 100%;
  filter: blur(20px);
  transition: all 1s;
  z-index: 2;
}
.steam svg {
  width: 100vw;height: 100vh;
}
.steam-01 {
  left: calc(50% - 30vw);
  -webkit-animation: steam-move-01 4s linear;
  animation: steam-move-01 4s linear;
}
.steam-01::before {
  left: calc(50% - 30vw);
  -webkit-animation: steam-move-03 4s linear;
  animation: steam-move-03 4s linear;
}
.steam-02 {
  left: calc(50% - 60vw);
  -webkit-animation: steam-move-02 4s linear;
  animation: steam-move-02 4s linear;
}
.steam-02::before {
  left: calc(50% - 60vw);
  -webkit-animation: steam-move-01 4s linear;
  animation: steam-move-01 4s linear;
}
.steam-03 {
  left: calc(50% - 80vw);
  -webkit-animation: steam-move-03 4s linear;
  animation: steam-move-03 4s linear;
}
.steam-03::before {
  display: none;
}
@keyframes steam-move-01 {
  0% {
    filter: blur(20px);
    transform: scale(.8, .8) rotateY(0);
    opacity: 0;
    bottom: -20vh;
  }
  6% {opacity: .3;}
  33% {
    transform: scale(.9, 1) rotateY(30deg);
    opacity: .8;
  }
  66% {transform: scaleY(1, .8) rotateY(4deg);}
  100% {
    filter: blur(25px);
    transform: scaleY(1.5, 1.3) rotateY(50deg);
    opacity: 0;
    bottom: 20vh;
  }
}
@keyframes steam-move-02 {
  0% {
    filter: blur(17px);
    transform: scale(.7, .8) rotateY(0);
    opacity: 0;
    bottom: -17vh;
  }
  6% {opacity: .4;}
  50% {
    transform: scale(1, 1) rotateY(35deg);
    opacity: .9;
  }
  66% {transform: scaleY(.7, .8) rotateY(10deg);}
  100% {
    filter: blur(25px);
    transform: scaleY(1.7, 1.4) rotateY(55deg);
    opacity: 0;
    bottom: 22vh;
  }
}
@keyframes steam-move-03 {
  0% {
    filter: blur(15px);
    transform: scale(.8, .9) rotateY(0);
    opacity: 0;
    bottom: -22vh;
  }
  6% {opacity: .2;}
  22% {
    transform: scale(.6, .8) rotateY(20deg);
    opacity: .8;
  }
  66% {transform: scaleY(1.1, 1) rotateY(4deg);}
  100% {
    filter: blur(27px);
    transform: scaleY(1.5, 1.3) rotateY(60deg);
    opacity: 0;
    bottom: 19vh;
  }
}
#loading {
  width: 100%;height: 100%; background: #000;
  position: fixed;top: 0;left: 0;z-index: 99999;
  animation: disable .1s linear 5s both
}
#loading::before {
  content: "";width: calc(100% + 30px);height: calc(100% + 30px);
  background: url(../img/lead01-sp@2x.jpg) no-repeat center / cover;
  -webkit-filter: blur(15px);
  filter: blur(15px);
  opacity: .8;
  position: absolute;top: -15px;left: -15px;right: -15px;bottom: -15px;z-index: 0;
}
#icon {
  width: 42vw;height: 57vw;margin: auto;opacity: 0;
  position: absolute;top: -100%;bottom: -100%;left: -100%;right: -100%;
  animation: fade .3s linear 4s both
}
@keyframes fade {
  0%{opacity: 0;}
  100%{opacity: 1;}
}
@keyframes disableScroll {
  0%{overflow: hidden}
  100%{overflow: auto}
}
@media (min-width: 415px) {
  /* pc */
  #loading::before {
    background: url(../img/lead01@2x.jpg) no-repeat center / cover;
  }
  #icon {width: 300px;height: 406px}
  .steam svg {min-width: 100vw;min-height: 100vh;}
  @keyframes steam-move-01 {
    0% {
      filter: blur(40px);
      transform: scale(.8, .8) rotateY(0);
      opacity: 0;
      bottom: -20vh;
    }
    6% {opacity: .2;}
    33% {
      transform: scale(.9, 1) rotateY(30deg);
      opacity: .7;
    }
    66% {transform: scaleY(1, .8) rotateY(4deg);}
    100% {
      filter: blur(50px);
      transform: scaleY(1.5, 1.3) rotateY(50deg);
      opacity: 0;
      bottom: 20vh;
    }
  }
  @keyframes steam-move-02 {
    0% {
      filter: blur(34px);
      transform: scale(.7, .8) rotateY(0);
      opacity: 0;
      bottom: -17vh;
    }
    6% {opacity: .3;}
    50% {
      transform: scale(1, 1) rotateY(35deg);
      opacity: .8;
    }
    66% {transform: scaleY(.7, .8) rotateY(10deg);}
    100% {
      filter: blur(50px);
      transform: scaleY(1.7, 1.4) rotateY(55deg);
      opacity: 0;
      bottom: 22vh;
    }
  }
  @keyframes steam-move-03 {
    0% {
      filter: blur(30px);
      transform: scale(.8, .9) rotateY(0);
      opacity: 0;
      bottom: -22vh;
    }
    6% {opacity: .1;}
    22% {
      transform: scale(.6, .8) rotateY(20deg);
      opacity: .7;
    }
    66% {transform: scaleY(1.1, 1) rotateY(4deg);}
    100% {
      filter: blur(50px);
      transform: scaleY(1.5, 1.3) rotateY(60deg);
      opacity: 0;
      bottom: 19vh;
    }
  }
}