@charset "UTF-8";
@font-face {
  font-family: "Makushka";
  src: url("/assets/font/Makushka.ttf.woff") format("woff");
}

body {
  position: relative;
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.9em;
  line-height: 1.8em;
  color: #ff6ec2;
  background-color: #ffffff;
  background-image: radial-gradient(#f3f3f3 13%, rgba(255, 255, 255, 0) 16%), radial-gradient(#f3f3f3 13%, rgba(255, 255, 255, 0) 16%);
  background-position: 0 0, 25px 25px;
  background-size: 50px 50px;
}

body.hidden {
  overflow: hidden;
}

h1 {
  margin: 0;
  font-family: 'Damion', cursive;
  font-size: 5.0em;
  line-height: 0.8em;
  font-weight: normal;
  color: #ff6ec2;
}

h2 {
  margin: 0;
  border-bottom: 5px solid #ff6ec2;
  font-size: 35px;
  padding-bottom: 10px;
  margin-bottom: 25px;
}

p {
  margin: 0;
  margin-top: 16px;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 600px) {
  h1 {
    font-size: 6.0em;
  }
}

#loading {
  width: 100vw;
  height: 100vh;
  -webkit-transition: all 3.0s;
  transition: all 3.0s;
  background-color: #091731;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#loading p {
  margin-top: 0;
  color: #fff;
  -webkit-animation-name: loading-efect;
          animation-name: loading-efect;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

@-webkit-keyframes loading-efect {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes loading-efect {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.wave-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.wave {
  width: 15px;
  height: 15px;
  background-color: #fff;
  margin-right: 3px;
}

.wave:last-of-type {
  margin-right: 0;
}

.wave1 {
  -webkit-animation-name: wave-efect1;
          animation-name: wave-efect1;
  -webkit-animation-duration: 1.0s;
          animation-duration: 1.0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}

.wave2 {
  -webkit-animation-name: wave-efect2;
          animation-name: wave-efect2;
  -webkit-animation-duration: 1.0s;
          animation-duration: 1.0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}

.wave3 {
  -webkit-animation-name: wave-efect3;
          animation-name: wave-efect3;
  -webkit-animation-duration: 1.0s;
          animation-duration: 1.0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}

.wave4 {
  -webkit-animation-name: wave-efect4;
          animation-name: wave-efect4;
  -webkit-animation-duration: 1.0s;
          animation-duration: 1.0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}

.wave5 {
  -webkit-animation-name: wave-efect5;
          animation-name: wave-efect5;
  -webkit-animation-duration: 1.0s;
          animation-duration: 1.0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}

@-webkit-keyframes wave-efect1 {
  0% {
    -webkit-transform: none;
            transform: none;
  }
  25% {
    -webkit-transform: scaleY(2);
            transform: scaleY(2);
  }
  50% {
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
  }
  75% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  100% {
    -webkit-transform: scaleY(1.5);
            transform: scaleY(1.5);
  }
}

@keyframes wave-efect1 {
  0% {
    -webkit-transform: none;
            transform: none;
  }
  25% {
    -webkit-transform: scaleY(2);
            transform: scaleY(2);
  }
  50% {
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
  }
  75% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  100% {
    -webkit-transform: scaleY(1.5);
            transform: scaleY(1.5);
  }
}

@-webkit-keyframes wave-efect2 {
  0% {
    -webkit-transform: scaleY(6);
            transform: scaleY(6);
  }
  25% {
    -webkit-transform: scaleY(3);
            transform: scaleY(3);
  }
  50% {
    -webkit-transform: scaleY(4);
            transform: scaleY(4);
  }
  75% {
    -webkit-transform: scaleY(2);
            transform: scaleY(2);
  }
  100% {
    -webkit-transform: scaleY(7);
            transform: scaleY(7);
  }
}

@keyframes wave-efect2 {
  0% {
    -webkit-transform: scaleY(6);
            transform: scaleY(6);
  }
  25% {
    -webkit-transform: scaleY(3);
            transform: scaleY(3);
  }
  50% {
    -webkit-transform: scaleY(4);
            transform: scaleY(4);
  }
  75% {
    -webkit-transform: scaleY(2);
            transform: scaleY(2);
  }
  100% {
    -webkit-transform: scaleY(7);
            transform: scaleY(7);
  }
}

@-webkit-keyframes wave-efect3 {
  0% {
    -webkit-transform: scaleY(7);
            transform: scaleY(7);
  }
  25% {
    -webkit-transform: scaleY(6);
            transform: scaleY(6);
  }
  50% {
    -webkit-transform: scaleY(4);
            transform: scaleY(4);
  }
  75% {
    -webkit-transform: scaleY(5);
            transform: scaleY(5);
  }
  100% {
    -webkit-transform: scaleY(6);
            transform: scaleY(6);
  }
}

@keyframes wave-efect3 {
  0% {
    -webkit-transform: scaleY(7);
            transform: scaleY(7);
  }
  25% {
    -webkit-transform: scaleY(6);
            transform: scaleY(6);
  }
  50% {
    -webkit-transform: scaleY(4);
            transform: scaleY(4);
  }
  75% {
    -webkit-transform: scaleY(5);
            transform: scaleY(5);
  }
  100% {
    -webkit-transform: scaleY(6);
            transform: scaleY(6);
  }
}

@-webkit-keyframes wave-efect4 {
  0% {
    -webkit-transform: scaleY(8);
            transform: scaleY(8);
  }
  25% {
    -webkit-transform: scaleY(4);
            transform: scaleY(4);
  }
  50% {
    -webkit-transform: scaleY(7);
            transform: scaleY(7);
  }
  75% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  100% {
    -webkit-transform: scaleY(3);
            transform: scaleY(3);
  }
}

@keyframes wave-efect4 {
  0% {
    -webkit-transform: scaleY(8);
            transform: scaleY(8);
  }
  25% {
    -webkit-transform: scaleY(4);
            transform: scaleY(4);
  }
  50% {
    -webkit-transform: scaleY(7);
            transform: scaleY(7);
  }
  75% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  100% {
    -webkit-transform: scaleY(3);
            transform: scaleY(3);
  }
}

@-webkit-keyframes wave-efect5 {
  0% {
    -webkit-transform: scaleY(2);
            transform: scaleY(2);
  }
  25% {
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
  }
  50% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  75% {
    -webkit-transform: scaleY(0.2);
            transform: scaleY(0.2);
  }
  100% {
    -webkit-transform: scaleY(1.3);
            transform: scaleY(1.3);
  }
}

@keyframes wave-efect5 {
  0% {
    -webkit-transform: scaleY(2);
            transform: scaleY(2);
  }
  25% {
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
  }
  50% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  75% {
    -webkit-transform: scaleY(0.2);
            transform: scaleY(0.2);
  }
  100% {
    -webkit-transform: scaleY(1.3);
            transform: scaleY(1.3);
  }
}

.loaded {
  -webkit-transform: translateY(2000px);
          transform: translateY(2000px);
  visibility: hidden;
}

header {
  margin: 32px 16px 0px 16px;
}

header img {
  width: 100%;
}

@media (min-width: 800px) {
  header {
    width: calc(100% - 32px);
    margin: 32px auto 0 auto;
    max-width: 800px;
  }
}

main {
  position: relative;
  width: calc(100% - 32px);
  margin: 0 auto;
  padding: 16px 0 0 0;
}

main section {
  margin-bottom: 64px;
}

main section:last-of-type {
  margin-bottom: 0;
}

main .statement .download {
  display: block;
  width: 70%;
  line-height: 32px;
  padding: 7px 0;
  text-align: center;
  border: 2px solid #ff6ec2;
  background-color: #fff;
  border-radius: 5px;
  margin: 32px auto 0;
}

main .statement .shadow {
  width: 70%;
  height: 15px;
  margin: 0 auto;
  border: 2px solid #ff6ec2;
  border-radius: 5px;
  position: relative;
  top: -10px;
  z-index: -1;
  background-color: #ff6ec2;
  background-image: repeating-linear-gradient(-45deg, #fff, #fff 4px, transparent 0, transparent 6px);
}

main .credit .kashi {
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1.6em;
  margin-bottom: 50px;
}

main .credit .meta li {
  margin-bottom: 8px;
}

main .credit .meta li:last-of-type {
  margin-bottom: 0;
}

main .credit .song > li {
  margin-bottom: 100px;
}

main .credit .engineer {
  background-color: #ff6ec2;
  padding: 10px;
  color: white;
}

main .credit .engineer p {
  margin: 0 0 16px 0;
}

main .credit .engineer p:last-of-type {
  margin-bottom: 0;
}

main .profile img {
  display: block;
  width: 100%;
  margin-top: 16px;
}

main .profile .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

main .profile .insta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  margin-top: 32px;
}

main .profile .insta i {
  font-size: 3.0em;
  margin-bottom: 8px;
}

main .movie .movie-wrap {
  position: relative;
  padding-bottom: 56.25%;
  /*アスペクト比 16:9の場合の縦幅*/
  height: 0;
  overflow: hidden;
  margin-top: 16px;
}

main .movie .movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-width: 600px) {
  main .song {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 50px;
  }
  main .song > li {
    width: calc((100% - 50px) / 2);
  }
}

@media (min-width: 800px) {
  main {
    width: calc(100% - 80px);
    margin: 0 auto;
    max-width: 800px;
  }
  main .song {
    gap: 80px;
  }
  main .song > li {
    width: calc((100% - 80px) / 2);
  }
}

#illustwrap {
  position: absolute;
  width: 100%;
  z-index: -1;
}

#illustwrap .illust {
  width: 100%;
  height: 110px;
  background-repeat: no-repeat;
}

#illustwrap #illust1 {
  background-image: url(../img/illust/1.png);
  -webkit-animation: i-move1 3s linear infinite alternate;
          animation: i-move1 3s linear infinite alternate;
}

#illustwrap #illust2 {
  background-image: url(../img/illust/2.png);
  -webkit-animation: i-move2 3s linear infinite alternate;
          animation: i-move2 3s linear infinite alternate;
}

#illustwrap #illust3 {
  background-image: url(../img/illust/3.png);
  -webkit-animation: i-move3 3s linear infinite alternate;
          animation: i-move3 3s linear infinite alternate;
}

#illustwrap #illust4 {
  background-image: url(../img/illust/4.png);
  -webkit-animation: i-move4 3s linear infinite alternate;
          animation: i-move4 3s linear infinite alternate;
}

#illustwrap #illust5 {
  background-image: url(../img/illust/5.png);
  -webkit-animation: i-move5 3s linear infinite alternate;
          animation: i-move5 3s linear infinite alternate;
}

#illustwrap #illust6 {
  background-image: url(../img/illust/6.png);
  -webkit-animation: i-move6 3s linear infinite alternate;
          animation: i-move6 3s linear infinite alternate;
}

#illustwrap #illust7 {
  background-image: url(../img/illust/7.png);
  -webkit-animation: i-move7 3s linear infinite alternate;
          animation: i-move7 3s linear infinite alternate;
}

#illustwrap #illust8 {
  background-image: url(../img/illust/8.png);
  -webkit-animation: i-move8 3s linear infinite alternate;
          animation: i-move8 3s linear infinite alternate;
}

#illustwrap #illust9 {
  background-image: url(../img/illust/9.png);
  -webkit-animation: i-move9 3s linear infinite alternate;
          animation: i-move9 3s linear infinite alternate;
}

#illustwrap #illust10 {
  background-image: url(../img/illust/10.png);
  -webkit-animation: i-move10 3s linear infinite alternate;
          animation: i-move10 3s linear infinite alternate;
}

#illustwrap #illust11 {
  background-image: url(../img/illust/11.png);
  -webkit-animation: i-move11 3s linear infinite alternate;
          animation: i-move11 3s linear infinite alternate;
}

#illustwrap #illust12 {
  background-image: url(../img/illust/12.png);
  -webkit-animation: i-move12 3s linear infinite alternate;
          animation: i-move12 3s linear infinite alternate;
}

#illustwrap #illust13 {
  background-image: url(../img/illust/13.png);
  -webkit-animation: i-move13 3s linear infinite alternate;
          animation: i-move13 3s linear infinite alternate;
}

#illustwrap #illust14 {
  background-image: url(../img/illust/14.png);
  -webkit-animation: i-move14 3s linear infinite alternate;
          animation: i-move14 3s linear infinite alternate;
}

#illustwrap #illust15 {
  background-image: url(../img/illust/15.png);
  -webkit-animation: i-move15 3s linear infinite alternate;
          animation: i-move15 3s linear infinite alternate;
}

#illustwrap #illust16 {
  background-image: url(../img/illust/16.png);
  -webkit-animation: i-move1 3s linear infinite alternate;
          animation: i-move1 3s linear infinite alternate;
}

#illustwrap #illust17 {
  background-image: url(../img/illust/17.png);
  -webkit-animation: i-move2 3s linear infinite alternate;
          animation: i-move2 3s linear infinite alternate;
}

#illustwrap #illust18 {
  background-image: url(../img/illust/18.png);
  -webkit-animation: i-move3 3s linear infinite alternate;
          animation: i-move3 3s linear infinite alternate;
}

#illustwrap #illust19 {
  background-image: url(../img/illust/19.png);
  -webkit-animation: i-move4 3s linear infinite alternate;
          animation: i-move4 3s linear infinite alternate;
}

#illustwrap #illust20 {
  background-image: url(../img/illust/20.png);
  -webkit-animation: i-move5 3s linear infinite alternate;
          animation: i-move5 3s linear infinite alternate;
}

#illustwrap #illust21 {
  background-image: url(../img/illust/21.png);
  -webkit-animation: i-move6 3s linear infinite alternate;
          animation: i-move6 3s linear infinite alternate;
}

#illustwrap #illust22 {
  background-image: url(../img/illust/22.png);
  -webkit-animation: i-move7 3s linear infinite alternate;
          animation: i-move7 3s linear infinite alternate;
}

#illustwrap #illust23 {
  background-image: url(../img/illust/23.png);
  -webkit-animation: i-move8 3s linear infinite alternate;
          animation: i-move8 3s linear infinite alternate;
}

#illustwrap #illust24 {
  background-image: url(../img/illust/24.png);
  -webkit-animation: i-move9 3s linear infinite alternate;
          animation: i-move9 3s linear infinite alternate;
}

#illustwrap #illust25 {
  background-image: url(../img/illust/25.png);
  -webkit-animation: i-move10 3s linear infinite alternate;
          animation: i-move10 3s linear infinite alternate;
}

#illustwrap #illust26 {
  background-image: url(../img/illust/26.png);
  -webkit-animation: i-move11 3s linear infinite alternate;
          animation: i-move11 3s linear infinite alternate;
}

#illustwrap #illust27 {
  background-image: url(../img/illust/27.png);
  -webkit-animation: i-move12 3s linear infinite alternate;
          animation: i-move12 3s linear infinite alternate;
}

#illustwrap #illust28 {
  background-image: url(../img/illust/28.png);
  -webkit-animation: i-move13 3s linear infinite alternate;
          animation: i-move13 3s linear infinite alternate;
}

#illustwrap #illust29 {
  background-image: url(../img/illust/29.png);
  -webkit-animation: i-move14 3s linear infinite alternate;
          animation: i-move14 3s linear infinite alternate;
}

#illustwrap #illust30 {
  background-image: url(../img/illust/30.png);
  -webkit-animation: i-move15 3s linear infinite alternate;
          animation: i-move15 3s linear infinite alternate;
}

#illustwrap #illust31 {
  background-image: url(../img/illust/31.png);
  -webkit-animation: i-move1 3s linear infinite alternate;
          animation: i-move1 3s linear infinite alternate;
}

#illustwrap #illust32 {
  background-image: url(../img/illust/32.png);
  -webkit-animation: i-move2 3s linear infinite alternate;
          animation: i-move2 3s linear infinite alternate;
}

#illustwrap #illust33 {
  background-image: url(../img/illust/33.png);
  -webkit-animation: i-move3 3s linear infinite alternate;
          animation: i-move3 3s linear infinite alternate;
}

#illustwrap #illust34 {
  background-image: url(../img/illust/34.png);
  -webkit-animation: i-move4 3s linear infinite alternate;
          animation: i-move4 3s linear infinite alternate;
}

#illustwrap #illust35 {
  background-image: url(../img/illust/35.png);
  -webkit-animation: i-move5 3s linear infinite alternate;
          animation: i-move5 3s linear infinite alternate;
}

#illustwrap #illust36 {
  background-image: url(../img/illust/36.png);
  -webkit-animation: i-move6 3s linear infinite alternate;
          animation: i-move6 3s linear infinite alternate;
}

#illustwrap #illust37 {
  background-image: url(../img/illust/37.png);
  -webkit-animation: i-move7 3s linear infinite alternate;
          animation: i-move7 3s linear infinite alternate;
}

#illustwrap #illust38 {
  background-image: url(../img/illust/38.png);
  -webkit-animation: i-move8 3s linear infinite alternate;
          animation: i-move8 3s linear infinite alternate;
}

#illustwrap #illust39 {
  background-image: url(../img/illust/39.png);
  -webkit-animation: i-move9 3s linear infinite alternate;
          animation: i-move9 3s linear infinite alternate;
}

#illustwrap #illust40 {
  background-image: url(../img/illust/40.png);
  -webkit-animation: i-move10 3s linear infinite alternate;
          animation: i-move10 3s linear infinite alternate;
}

#illustwrap #illust41 {
  background-image: url(../img/illust/41.png);
  -webkit-animation: i-move11 3s linear infinite alternate;
          animation: i-move11 3s linear infinite alternate;
}

#illustwrap #illust42 {
  background-image: url(../img/illust/42.png);
  -webkit-animation: i-move12 3s linear infinite alternate;
          animation: i-move12 3s linear infinite alternate;
}

#illustwrap #illust43 {
  background-image: url(../img/illust/43.png);
  -webkit-animation: i-move13 3s linear infinite alternate;
          animation: i-move13 3s linear infinite alternate;
}

#illustwrap #illust44 {
  background-image: url(../img/illust/44.png);
  -webkit-animation: i-move14 3s linear infinite alternate;
          animation: i-move14 3s linear infinite alternate;
}

#illustwrap #illust45 {
  background-image: url(../img/illust/45.png);
  -webkit-animation: i-move15 3s linear infinite alternate;
          animation: i-move15 3s linear infinite alternate;
}

#illustwrap #illust46 {
  background-image: url(../img/illust/46.png);
  -webkit-animation: i-move1 3s linear infinite alternate;
          animation: i-move1 3s linear infinite alternate;
}

#illustwrap #illust47 {
  background-image: url(../img/illust/47.png);
  -webkit-animation: i-move2 3s linear infinite alternate;
          animation: i-move2 3s linear infinite alternate;
}

#illustwrap #illust48 {
  background-image: url(../img/illust/48.png);
  -webkit-animation: i-move3 3s linear infinite alternate;
          animation: i-move3 3s linear infinite alternate;
}

#illustwrap #illust49 {
  background-image: url(../img/illust/49.png);
  -webkit-animation: i-move4 3s linear infinite alternate;
          animation: i-move4 3s linear infinite alternate;
}

@-webkit-keyframes i-move1 {
  0% {
    background-position: 20% 0;
  }
  25% {
    background-position: 20% 5px;
  }
  50% {
    background-position: 20% 10px;
  }
  75% {
    background-position: 20% 15px;
  }
  100% {
    background-position: 20% 20px;
  }
}

@keyframes i-move1 {
  0% {
    background-position: 20% 0;
  }
  25% {
    background-position: 20% 5px;
  }
  50% {
    background-position: 20% 10px;
  }
  75% {
    background-position: 20% 15px;
  }
  100% {
    background-position: 20% 20px;
  }
}

@-webkit-keyframes i-move2 {
  0% {
    background-position: 90% 0;
  }
  25% {
    background-position: 80% 5px;
  }
  50% {
    background-position: 90% 10px;
  }
  75% {
    background-position: 80% 15px;
  }
  100% {
    background-position: 90% 20px;
  }
}

@keyframes i-move2 {
  0% {
    background-position: 90% 0;
  }
  25% {
    background-position: 80% 5px;
  }
  50% {
    background-position: 90% 10px;
  }
  75% {
    background-position: 80% 15px;
  }
  100% {
    background-position: 90% 20px;
  }
}

@-webkit-keyframes i-move3 {
  0% {
    background-position: 40% 0;
  }
  25% {
    background-position: 60% 5px;
  }
  50% {
    background-position: 40% 10px;
  }
  75% {
    background-position: 60% 15px;
  }
  100% {
    background-position: 40% 20px;
  }
}

@keyframes i-move3 {
  0% {
    background-position: 40% 0;
  }
  25% {
    background-position: 60% 5px;
  }
  50% {
    background-position: 40% 10px;
  }
  75% {
    background-position: 60% 15px;
  }
  100% {
    background-position: 40% 20px;
  }
}

@-webkit-keyframes i-move4 {
  0% {
    background-position: 0% 0;
  }
  10% {
    background-position: 5% 0;
  }
  20% {
    background-position: 0% 0;
  }
  30% {
    background-position: 5% 0;
  }
  40% {
    background-position: 0% 0;
  }
  50% {
    background-position: 5% 0;
  }
  60% {
    background-position: 0% 0;
  }
  75% {
    background-position: 0% 2px;
  }
  100% {
    background-position: 0% 5px;
  }
}

@keyframes i-move4 {
  0% {
    background-position: 0% 0;
  }
  10% {
    background-position: 5% 0;
  }
  20% {
    background-position: 0% 0;
  }
  30% {
    background-position: 5% 0;
  }
  40% {
    background-position: 0% 0;
  }
  50% {
    background-position: 5% 0;
  }
  60% {
    background-position: 0% 0;
  }
  75% {
    background-position: 0% 2px;
  }
  100% {
    background-position: 0% 5px;
  }
}

@-webkit-keyframes i-move5 {
  0% {
    background-position: 100% 20px;
  }
  25% {
    background-position: 100% 5px;
  }
  50% {
    background-position: 100% 15px;
  }
  75% {
    background-position: 100% 10px;
  }
  100% {
    background-position: 100% 0px;
  }
}

@keyframes i-move5 {
  0% {
    background-position: 100% 20px;
  }
  25% {
    background-position: 100% 5px;
  }
  50% {
    background-position: 100% 15px;
  }
  75% {
    background-position: 100% 10px;
  }
  100% {
    background-position: 100% 0px;
  }
}

@-webkit-keyframes i-move6 {
  0% {
    background-position: 60% 0;
  }
  25% {
    background-position: 40% 5px;
  }
  50% {
    background-position: 60% 10px;
  }
  75% {
    background-position: 40% 15px;
  }
  100% {
    background-position: 60% 20px;
  }
}

@keyframes i-move6 {
  0% {
    background-position: 60% 0;
  }
  25% {
    background-position: 40% 5px;
  }
  50% {
    background-position: 60% 10px;
  }
  75% {
    background-position: 40% 15px;
  }
  100% {
    background-position: 60% 20px;
  }
}

@-webkit-keyframes i-move7 {
  0% {
    background-position: 10% 0;
  }
  25% {
    background-position: 20% 5px;
  }
  50% {
    background-position: 10% 10px;
  }
  75% {
    background-position: 20% 15px;
  }
  100% {
    background-position: 10% 20px;
  }
}

@keyframes i-move7 {
  0% {
    background-position: 10% 0;
  }
  25% {
    background-position: 20% 5px;
  }
  50% {
    background-position: 10% 10px;
  }
  75% {
    background-position: 20% 15px;
  }
  100% {
    background-position: 10% 20px;
  }
}

@-webkit-keyframes i-move8 {
  0% {
    background-position: 80% 15px;
  }
  25% {
    background-position: 80% 20px;
  }
  50% {
    background-position: 80% 10px;
  }
  75% {
    background-position: 80% 15px;
  }
  100% {
    background-position: 80% 20px;
  }
}

@keyframes i-move8 {
  0% {
    background-position: 80% 15px;
  }
  25% {
    background-position: 80% 20px;
  }
  50% {
    background-position: 80% 10px;
  }
  75% {
    background-position: 80% 15px;
  }
  100% {
    background-position: 80% 20px;
  }
}

@-webkit-keyframes i-move9 {
  0% {
    background-position: 40% 0;
  }
  25% {
    background-position: 60% 5px;
  }
  50% {
    background-position: 40% 10px;
  }
  75% {
    background-position: 60% 15px;
  }
  100% {
    background-position: 40% 20px;
  }
}

@keyframes i-move9 {
  0% {
    background-position: 40% 0;
  }
  25% {
    background-position: 60% 5px;
  }
  50% {
    background-position: 40% 10px;
  }
  75% {
    background-position: 60% 15px;
  }
  100% {
    background-position: 40% 20px;
  }
}

@-webkit-keyframes i-move10 {
  0% {
    background-position: 0% 0;
  }
  10% {
    background-position: 5% 0;
  }
  20% {
    background-position: 0% 0;
  }
  30% {
    background-position: 5% 0;
  }
  40% {
    background-position: 0% 0;
  }
  50% {
    background-position: 5% 0;
  }
  60% {
    background-position: 0% 0;
  }
  75% {
    background-position: 0% 2px;
  }
  100% {
    background-position: 0% 5px;
  }
}

@keyframes i-move10 {
  0% {
    background-position: 0% 0;
  }
  10% {
    background-position: 5% 0;
  }
  20% {
    background-position: 0% 0;
  }
  30% {
    background-position: 5% 0;
  }
  40% {
    background-position: 0% 0;
  }
  50% {
    background-position: 5% 0;
  }
  60% {
    background-position: 0% 0;
  }
  75% {
    background-position: 0% 2px;
  }
  100% {
    background-position: 0% 5px;
  }
}

@-webkit-keyframes i-move11 {
  0% {
    background-position: 90% 0;
  }
  3% {
    background-position: 80% 0;
  }
  6% {
    background-position: 95% 0;
  }
  9% {
    background-position: 75% 0;
  }
  12% {
    background-position: 100% 0;
  }
  15% {
    background-position: 70% 0;
  }
  75% {
    background-position: 70% 5px;
  }
  100% {
    background-position: 70% 10px;
  }
}

@keyframes i-move11 {
  0% {
    background-position: 90% 0;
  }
  3% {
    background-position: 80% 0;
  }
  6% {
    background-position: 95% 0;
  }
  9% {
    background-position: 75% 0;
  }
  12% {
    background-position: 100% 0;
  }
  15% {
    background-position: 70% 0;
  }
  75% {
    background-position: 70% 5px;
  }
  100% {
    background-position: 70% 10px;
  }
}

@-webkit-keyframes i-move12 {
  0% {
    background-position: 30% 0;
  }
  20% {
    background-position: 10% 5px;
  }
  40% {
    background-position: 40% 10px;
  }
  60% {
    background-position: 20% 15px;
  }
  80% {
    background-position: 30% 20px;
  }
  100% {
    background-position: 10% 25px;
  }
}

@keyframes i-move12 {
  0% {
    background-position: 30% 0;
  }
  20% {
    background-position: 10% 5px;
  }
  40% {
    background-position: 40% 10px;
  }
  60% {
    background-position: 20% 15px;
  }
  80% {
    background-position: 30% 20px;
  }
  100% {
    background-position: 10% 25px;
  }
}

@-webkit-keyframes i-move13 {
  0% {
    background-position: 100% 15px;
  }
  25% {
    background-position: 100% 20px;
  }
  50% {
    background-position: 100% 10px;
  }
  75% {
    background-position: 100% 15px;
  }
  100% {
    background-position: 100% 20px;
  }
}

@keyframes i-move13 {
  0% {
    background-position: 100% 15px;
  }
  25% {
    background-position: 100% 20px;
  }
  50% {
    background-position: 100% 10px;
  }
  75% {
    background-position: 100% 15px;
  }
  100% {
    background-position: 100% 20px;
  }
}

@-webkit-keyframes i-move14 {
  0% {
    background-position: 0% 0px;
  }
  25% {
    background-position: 25% 10px;
  }
  50% {
    background-position: 50% 0px;
  }
  75% {
    background-position: 75% 10px;
  }
  100% {
    background-position: 100% 0px;
  }
}

@keyframes i-move14 {
  0% {
    background-position: 0% 0px;
  }
  25% {
    background-position: 25% 10px;
  }
  50% {
    background-position: 50% 0px;
  }
  75% {
    background-position: 75% 10px;
  }
  100% {
    background-position: 100% 0px;
  }
}

@-webkit-keyframes i-move15 {
  0% {
    background-position: 70% 0;
  }
  10% {
    background-position: 65% 0;
  }
  20% {
    background-position: 70% 0;
  }
  30% {
    background-position: 65% 0;
  }
  40% {
    background-position: 70% 0;
  }
  50% {
    background-position: 65% 0;
  }
  60% {
    background-position: 70% 0;
  }
  75% {
    background-position: 70% 2px;
  }
  100% {
    background-position: 70% 5px;
  }
}

@keyframes i-move15 {
  0% {
    background-position: 70% 0;
  }
  10% {
    background-position: 65% 0;
  }
  20% {
    background-position: 70% 0;
  }
  30% {
    background-position: 65% 0;
  }
  40% {
    background-position: 70% 0;
  }
  50% {
    background-position: 65% 0;
  }
  60% {
    background-position: 70% 0;
  }
  75% {
    background-position: 70% 2px;
  }
  100% {
    background-position: 70% 5px;
  }
}

@media (min-width: 600px) {
  #illustwrap .illust {
    height: 65px;
  }
  #illustwrap #illust1 {
    background-image: url(../img/illust/1.png);
    background-size: auto 45px;
    -webkit-animation: i-move1 5s linear infinite alternate;
            animation: i-move1 5s linear infinite alternate;
  }
  #illustwrap #illust2 {
    background-image: url(../img/illust/2.png);
    background-size: auto 45px;
    -webkit-animation: i-move2 5s linear infinite alternate;
            animation: i-move2 5s linear infinite alternate;
  }
  #illustwrap #illust3 {
    background-image: url(../img/illust/3.png);
    background-size: auto 45px;
    -webkit-animation: i-move3 5s linear infinite alternate;
            animation: i-move3 5s linear infinite alternate;
  }
  #illustwrap #illust4 {
    background-image: url(../img/illust/4.png);
    background-size: auto 45px;
    -webkit-animation: i-move4 5s linear infinite alternate;
            animation: i-move4 5s linear infinite alternate;
  }
  #illustwrap #illust5 {
    background-image: url(../img/illust/5.png);
    background-size: auto 45px;
    -webkit-animation: i-move5 5s linear infinite alternate;
            animation: i-move5 5s linear infinite alternate;
  }
  #illustwrap #illust6 {
    background-image: url(../img/illust/6.png);
    background-size: auto 45px;
    -webkit-animation: i-move6 5s linear infinite alternate;
            animation: i-move6 5s linear infinite alternate;
  }
  #illustwrap #illust7 {
    background-image: url(../img/illust/7.png);
    background-size: auto 45px;
    -webkit-animation: i-move7 5s linear infinite alternate;
            animation: i-move7 5s linear infinite alternate;
  }
  #illustwrap #illust8 {
    background-image: url(../img/illust/8.png);
    background-size: auto 45px;
    -webkit-animation: i-move8 5s linear infinite alternate;
            animation: i-move8 5s linear infinite alternate;
  }
  #illustwrap #illust9 {
    background-image: url(../img/illust/9.png);
    background-size: auto 45px;
    -webkit-animation: i-move9 5s linear infinite alternate;
            animation: i-move9 5s linear infinite alternate;
  }
  #illustwrap #illust10 {
    background-image: url(../img/illust/10.png);
    background-size: auto 45px;
    -webkit-animation: i-move10 5s linear infinite alternate;
            animation: i-move10 5s linear infinite alternate;
  }
  #illustwrap #illust11 {
    background-image: url(../img/illust/11.png);
    background-size: auto 45px;
    -webkit-animation: i-move11 5s linear infinite alternate;
            animation: i-move11 5s linear infinite alternate;
  }
  #illustwrap #illust12 {
    background-image: url(../img/illust/12.png);
    background-size: auto 45px;
    -webkit-animation: i-move12 5s linear infinite alternate;
            animation: i-move12 5s linear infinite alternate;
  }
  #illustwrap #illust13 {
    background-image: url(../img/illust/13.png);
    background-size: auto 45px;
    -webkit-animation: i-move13 5s linear infinite alternate;
            animation: i-move13 5s linear infinite alternate;
  }
  #illustwrap #illust14 {
    background-image: url(../img/illust/14.png);
    background-size: auto 45px;
    -webkit-animation: i-move14 5s linear infinite alternate;
            animation: i-move14 5s linear infinite alternate;
  }
  #illustwrap #illust15 {
    background-image: url(../img/illust/15.png);
    background-size: auto 45px;
    -webkit-animation: i-move15 5s linear infinite alternate;
            animation: i-move15 5s linear infinite alternate;
  }
  #illustwrap #illust16 {
    background-image: url(../img/illust/16.png);
    background-size: auto 45px;
    -webkit-animation: i-move1 5s linear infinite alternate;
            animation: i-move1 5s linear infinite alternate;
  }
  #illustwrap #illust17 {
    background-image: url(../img/illust/17.png);
    background-size: auto 45px;
    -webkit-animation: i-move2 5s linear infinite alternate;
            animation: i-move2 5s linear infinite alternate;
  }
  #illustwrap #illust18 {
    background-image: url(../img/illust/18.png);
    background-size: auto 45px;
    -webkit-animation: i-move3 5s linear infinite alternate;
            animation: i-move3 5s linear infinite alternate;
  }
  #illustwrap #illust19 {
    background-image: url(../img/illust/19.png);
    background-size: auto 45px;
    -webkit-animation: i-move4 5s linear infinite alternate;
            animation: i-move4 5s linear infinite alternate;
  }
  #illustwrap #illust20 {
    background-image: url(../img/illust/20.png);
    background-size: auto 45px;
    -webkit-animation: i-move5 5s linear infinite alternate;
            animation: i-move5 5s linear infinite alternate;
  }
  #illustwrap #illust21 {
    background-image: url(../img/illust/21.png);
    background-size: auto 45px;
    -webkit-animation: i-move6 5s linear infinite alternate;
            animation: i-move6 5s linear infinite alternate;
  }
  #illustwrap #illust22 {
    background-image: url(../img/illust/22.png);
    background-size: auto 45px;
    -webkit-animation: i-move7 5s linear infinite alternate;
            animation: i-move7 5s linear infinite alternate;
  }
  #illustwrap #illust23 {
    background-image: url(../img/illust/23.png);
    background-size: auto 45px;
    -webkit-animation: i-move8 5s linear infinite alternate;
            animation: i-move8 5s linear infinite alternate;
  }
  #illustwrap #illust24 {
    background-image: url(../img/illust/24.png);
    background-size: auto 45px;
    -webkit-animation: i-move9 5s linear infinite alternate;
            animation: i-move9 5s linear infinite alternate;
  }
  #illustwrap #illust25 {
    background-image: url(../img/illust/25.png);
    background-size: auto 45px;
    -webkit-animation: i-move10 5s linear infinite alternate;
            animation: i-move10 5s linear infinite alternate;
  }
  #illustwrap #illust26 {
    background-image: url(../img/illust/26.png);
    background-size: auto 45px;
    -webkit-animation: i-move11 5s linear infinite alternate;
            animation: i-move11 5s linear infinite alternate;
  }
  #illustwrap #illust27 {
    background-image: url(../img/illust/27.png);
    background-size: auto 45px;
    -webkit-animation: i-move12 5s linear infinite alternate;
            animation: i-move12 5s linear infinite alternate;
  }
  #illustwrap #illust28 {
    background-image: url(../img/illust/28.png);
    background-size: auto 45px;
    -webkit-animation: i-move13 5s linear infinite alternate;
            animation: i-move13 5s linear infinite alternate;
  }
  #illustwrap #illust29 {
    background-image: url(../img/illust/29.png);
    background-size: auto 45px;
    -webkit-animation: i-move14 5s linear infinite alternate;
            animation: i-move14 5s linear infinite alternate;
  }
  #illustwrap #illust30 {
    background-image: url(../img/illust/30.png);
    background-size: auto 45px;
    -webkit-animation: i-move15 5s linear infinite alternate;
            animation: i-move15 5s linear infinite alternate;
  }
  #illustwrap #illust31 {
    background-image: url(../img/illust/31.png);
    background-size: auto 45px;
    -webkit-animation: i-move1 5s linear infinite alternate;
            animation: i-move1 5s linear infinite alternate;
  }
  #illustwrap #illust32 {
    background-image: url(../img/illust/32.png);
    background-size: auto 45px;
    -webkit-animation: i-move2 5s linear infinite alternate;
            animation: i-move2 5s linear infinite alternate;
  }
  #illustwrap #illust33 {
    background-image: url(../img/illust/33.png);
    background-size: auto 45px;
    -webkit-animation: i-move3 5s linear infinite alternate;
            animation: i-move3 5s linear infinite alternate;
  }
  #illustwrap #illust34 {
    background-image: url(../img/illust/34.png);
    background-size: auto 45px;
    -webkit-animation: i-move4 5s linear infinite alternate;
            animation: i-move4 5s linear infinite alternate;
  }
  #illustwrap #illust35 {
    background-image: url(../img/illust/35.png);
    background-size: auto 45px;
    -webkit-animation: i-move5 5s linear infinite alternate;
            animation: i-move5 5s linear infinite alternate;
  }
  #illustwrap #illust36 {
    background-image: url(../img/illust/36.png);
    background-size: auto 45px;
    -webkit-animation: i-move6 5s linear infinite alternate;
            animation: i-move6 5s linear infinite alternate;
  }
  #illustwrap #illust37 {
    background-image: url(../img/illust/37.png);
    background-size: auto 45px;
    -webkit-animation: i-move7 5s linear infinite alternate;
            animation: i-move7 5s linear infinite alternate;
  }
  #illustwrap #illust38 {
    background-image: url(../img/illust/38.png);
    background-size: auto 45px;
    -webkit-animation: i-move8 5s linear infinite alternate;
            animation: i-move8 5s linear infinite alternate;
  }
  #illustwrap #illust39 {
    background-image: url(../img/illust/39.png);
    background-size: auto 45px;
    -webkit-animation: i-move9 5s linear infinite alternate;
            animation: i-move9 5s linear infinite alternate;
  }
  #illustwrap #illust40 {
    background-image: url(../img/illust/40.png);
    background-size: auto 45px;
    -webkit-animation: i-move10 5s linear infinite alternate;
            animation: i-move10 5s linear infinite alternate;
  }
  #illustwrap #illust41 {
    background-image: url(../img/illust/41.png);
    background-size: auto 45px;
    -webkit-animation: i-move11 5s linear infinite alternate;
            animation: i-move11 5s linear infinite alternate;
  }
  #illustwrap #illust42 {
    background-image: url(../img/illust/42.png);
    background-size: auto 45px;
    -webkit-animation: i-move12 5s linear infinite alternate;
            animation: i-move12 5s linear infinite alternate;
  }
  #illustwrap #illust43 {
    background-image: url(../img/illust/43.png);
    background-size: auto 45px;
    -webkit-animation: i-move13 5s linear infinite alternate;
            animation: i-move13 5s linear infinite alternate;
  }
  #illustwrap #illust44 {
    background-image: url(../img/illust/44.png);
    background-size: auto 45px;
    -webkit-animation: i-move14 5s linear infinite alternate;
            animation: i-move14 5s linear infinite alternate;
  }
  #illustwrap #illust45 {
    background-image: url(../img/illust/45.png);
    background-size: auto 45px;
    -webkit-animation: i-move15 5s linear infinite alternate;
            animation: i-move15 5s linear infinite alternate;
  }
  #illustwrap #illust46 {
    background-image: url(../img/illust/46.png);
    background-size: auto 45px;
    -webkit-animation: i-move1 5s linear infinite alternate;
            animation: i-move1 5s linear infinite alternate;
  }
  #illustwrap #illust47 {
    background-image: url(../img/illust/47.png);
    background-size: auto 45px;
    -webkit-animation: i-move2 5s linear infinite alternate;
            animation: i-move2 5s linear infinite alternate;
  }
  #illustwrap #illust48 {
    background-image: url(../img/illust/48.png);
    background-size: auto 45px;
    -webkit-animation: i-move3 5s linear infinite alternate;
            animation: i-move3 5s linear infinite alternate;
  }
  #illustwrap #illust49 {
    background-image: url(../img/illust/49.png);
    background-size: auto 45px;
    -webkit-animation: i-move4 5s linear infinite alternate;
            animation: i-move4 5s linear infinite alternate;
  }
}

footer {
  padding: 32px 0;
  text-align: center;
}

.effect-fade {
  opacity: 0;
  -webkit-transform: translate(0, 45px);
          transform: translate(0, 45px);
  -webkit-transition: opacity 500ms, -webkit-transform 500ms;
  transition: opacity 500ms, -webkit-transform 500ms;
  transition: opacity 500ms, transform 500ms;
  transition: opacity 500ms, transform 500ms, -webkit-transform 500ms;
}

.effect-fade.effect-scroll {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.huwa {
  -webkit-animation-name: huwa;
          animation-name: huwa;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

@-webkit-keyframes huwa {
  0% {
    -webkit-transform: none;
            transform: none;
  }
  50% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
}

@keyframes huwa {
  0% {
    -webkit-transform: none;
            transform: none;
  }
  50% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
}

.btn-efect {
  -webkit-animation-name: btn-efect;
          animation-name: btn-efect;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

@-webkit-keyframes btn-efect {
  0% {
    -webkit-transform: none;
            transform: none;
  }
  100% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
}

@keyframes btn-efect {
  0% {
    -webkit-transform: none;
            transform: none;
  }
  100% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
}

.shd-efect {
  -webkit-animation-name: shd-efect;
          animation-name: shd-efect;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}

@-webkit-keyframes shd-efect {
  0% {
    -webkit-transform: none;
            transform: none;
  }
  100% {
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
  }
}

@keyframes shd-efect {
  0% {
    -webkit-transform: none;
            transform: none;
  }
  100% {
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
  }
}
/*# sourceMappingURL=style.css.map */