@charset "utf-8";

/* 背景画像 */

.bg-item {
  position: absolute;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}

/* 1足跡*/
.bg-item-footprint {
  background-image: url("../img/bg_asiato.png");
  background-size: contain;
  left: 5%;
  top: 0%;
  width: 200px;
  height: 600px;
  animation: flicker-foot1 3s ease-in-out infinite alternate;
}
@keyframes flicker-foot1 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
/* 2足跡*/
.bg-item-footprint2 {
  background-image: url("../img/bg_asiato2.png");
  background-size: contain;
  right: 0%;
  top: 0%;
  width: 200px;
  height: 600px;
  animation: flicker-foot2 3s ease-in-out infinite alternate;
}
@keyframes flicker-foot2 {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
/* 3足跡*/
.bg-item-footprint3 {
  background-image: url("../img/bg_asiato.png");
  background-size: contain;
  left: 5%;
  bottom: 15%;
  width: 200px;
  height: 600px;
  animation: flicker-foot3 3s ease-in-out infinite alternate;
}
@keyframes flicker-foot3 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
/* ペンギン */
.bg-item-penguin {
  background-image: url("../img/bg_pengin.png");
  background-size: 100px;
  right: 10%;
  bottom: 10%;
  width: 100px;
  height: 100px;
  animation: sway-penguin 2.5s ease-in-out infinite alternate;
}

@keyframes sway-penguin {
  0% {
    transform: translate(0, 0) rotate(-10deg);
  }
  100% {
    transform: translate(5px, -5px) rotate(10deg);
  }
}

/* 泡1 */
.bg-item-awa {
  background-image: url("../img/bg_awa.png");
  background-size: contain;
  right: 3%;
  bottom: 15%;
  width: 150px;
  height: 700px;
  animation: flicker-awa1 2s ease-in-out infinite alternate;
}

@keyframes flicker-awa1 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

/* 泡2 */
.bg-item-awa2 {
  background-image: url("../img/bg_awa.png");
  background-size: contain;
  right: 3%;
  top: 5%;
  width: 150px;
  height: 700px;
  animation: flicker-awa2 2s ease-in-out infinite alternate;
}

@keyframes flicker-awa2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}
/* 泡3 */
.bg-item-awa3 {
  background-image: url("../img/bg_awa2.png");
  background-size: contain;
  left: 3%;
  bottom: 15%;
  width: 150px;
  height: 700px;
  animation: flicker-awa3 2s ease-in-out infinite alternate;
}

@keyframes flicker-awa3 {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}
/* たつ */
.bg-item-tatu {
  background-image: url("../img/bg_tatu.png");
  background-size: contain;
  left: 5%;
  bottom: 10%;
  width: 80px;
  height: 80px;
  animation: sway-tatu 2s ease-in-out infinite alternate;
}

@keyframes sway-tatu {
  0% {
    transform: translate(0, 0) rotate(-10deg);
  }
  100% {
    transform: translate(5px, -5px) rotate(10deg);
  }
}

/* くらげ右1 */

.bg-item-kurage1r {
  background-image: url("../img/bg_kurage2.png");
  background-size: contain;
  right: 0%;
  top: 5%;
  width: 150px;
  height: 150px;
  animation: sway-kurage1r 2.5s ease-in-out infinite alternate;
}

@keyframes sway-kurage1r {
  0% {
    transform: translate(0, 0) rotate(-2deg);
  }
  100% {
    transform: translate(20px, -20px) rotate(2deg);
  }
}

/* くらげ右2 */
.bg-item-kurage2r {
  background-image: url("../img/bg_kurage2.png");
  background-size: contain;
  right: 2%;
  top: 18%;
  width: 100px;
  height: 100px;
  animation: sway-kurage2r 3s ease-in-out infinite alternate;
}

@keyframes sway-kurage2r {
  0% {
    transform: translate(0, 0) rotate(2deg);
  }
  100% {
    transform: translate(-15px, 15px) rotate(-2deg);
  }
}

/* くらげ左1 */
.bg-item-kurage1l {
  background-image: url("../img/bg_kurage2.png");
  background-size: contain;
  left: 0%;
  top: 40%;
  width: 150px;
  height: 150px;
  animation: sway-kurage1l 2.5s ease-in-out infinite alternate;
}

@keyframes sway-kurage1l {
  0% {
    transform: translate(0, 0) rotate(-3deg);
  }
  100% {
    transform: translate(20px, -20px) rotate(3deg);
  }
}

/* ちんあなご */

.bg-item-anago {
  background-image: url("../img/bg_chinanago.png");
  background-size: contain;
  left: 5%;
  bottom: 15%;
  width: 100px;
  height: 100px;
  animation: sway-anago 2.5s ease-in-out infinite alternate;
}

@keyframes sway-anago {
  0% {
    transform: translate(0, 0) rotate(-20deg);
  }
  100% {
    transform: translate(2px, -2px) rotate(20deg);
  }
}

/* さんご */
.bg-item-sango {
  background-image: url("../img/bg_sango.png");
  background-size: contain;
  right: 0%;
  bottom: 0%;
  width: 150px;
  height: 150px;
}
/* にも1 */
.bg-item-nimo1 {
  background-image: url("../img/bg_nimo1.png");
  background-size: contain;
  left: 3%;
  top: 5%;
  width: 150px;
  height: 150px;
  animation: sway-nimo1 1.5s ease-in-out infinite alternate;
}

@keyframes sway-nimo1 {
  0% {
    transform: translate(0, 0) rotate(1deg);
  }
  100% {
    transform: translate(10px, -25px) rotate(-1deg);
  }
}
/* イベントページ */
.bg-item-tatu-ev {
  background-image: url("../img/bg_tatu.png");
  background-size: contain;
  left: 5%;
  bottom: 5%;
  width: 80px;
  height: 80px;
  animation: sway-tatu-ev 2s ease-in-out infinite alternate;
}

@keyframes sway-tatu-ev {
  0% {
    transform: translate(0, 0) rotate(-10deg);
  }
  100% {
    transform: translate(5px, -5px) rotate(10deg);
  }
}

.bg-item-anago-ev {
  background-image: url("../img/bg_chinanago.png");
  background-size: contain;
  left: 5%;
  bottom: 8%;
  width: 100px;
  height: 100px;
  animation: sway-anago-ev 2.5s ease-in-out infinite alternate;
}

@keyframes sway-anago-ev {
  0% {
    transform: translate(0, 0) rotate(-20deg);
  }
  100% {
    transform: translate(2px, -2px) rotate(20deg);
  }
}
.bg-item-nimo2-ev {
  background-image: url("../img/bg_nimo2.png");
  background-size: contain;
  right: 3%;
  top: 35%;
  width: 150px;
  height: 150px;
  animation: sway-nimo2 1.5s ease-in-out infinite alternate;
}

@keyframes sway-nimo2 {
  0% {
    transform: translate(0, 0) rotate(1deg);
  }
  100% {
    transform: translate(10px, -25px) rotate(-1deg);
  }
}

.bg-item-awa3-ev {
  background-image: url("../img/bg_awa2.png");
  background-size: contain;
  left: 3%;
  bottom: 0%;
  width: 150px;
  height: 700px;
  animation: flicker-awa3-ev 2s ease-in-out infinite alternate;
}

@keyframes flicker-awa3-ev {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}
@media screen and (max-width: 768px) {
  .bg-item-awa {
    z-index: 9;
  }
}