@charset "UTF-8";
/* media-queries */
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanjp.min.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap");
@media screen and (max-width: 767px) {
  .orientation_landscape .landscape {
    display: block;
  }
  .orientation_landscape .portrait {
    display: none;
  }
  .orientation_portrait .landscape {
    display: none;
  }
  .orientation_portrait .portrait {
    display: block;
  }
}
.sp {
  display: none;
}

.tb {
  display: none;
}

.pc {
  display: none;
}

.sp-tb {
  display: none;
}

.tb-pc {
  display: none;
}

.js-media-queries {
  display: none;
}

@media screen and (max-width: 767px) {
  .sp {
    display: block;
  }
  .sp-tb {
    display: block;
  }
  .tb-pc {
    display: none;
  }
  .pc {
    display: none;
  }
  .js-media-queries {
    font-family: "sp";
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .sp {
    display: none;
  }
  .tb {
    display: block;
  }
  .sp-tb {
    display: block;
  }
  .tb-pc {
    display: block;
  }
  .js-media-queries {
    font-family: "tb";
  }
}
@media screen and (min-width: 1024px) and (max-width: 1440px) {
  .sp {
    display: none;
  }
  .tb-pc {
    display: block;
  }
  .pc {
    display: block;
  }
  .js-media-queries {
    font-family: "pc";
  }
}
@media screen and (min-width: 1440px) {
  .sp {
    display: none;
  }
  .tb-pc {
    display: block;
  }
  .pc {
    display: block;
  }
  .js-media-queries {
    font-family: "pc";
  }
}
@media print {
  .sp {
    display: none;
  }
  .tb {
    display: none;
  }
  .pc {
    display: block;
  }
}
/*! http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

ul li,
ol li {
  list-style: none;
}

/*! HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*
Google Fonts
Noto  Sans JP
font-family: 'Noto Sans JP', sans-serif;
300, 400, 500, 700
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

YakuHanJP ゴシック
font-family: YakuHanJP;
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanjp.min.css');
YakuHanMP 明朝
font-family: YakuHanMP;
*/
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  border: none;
}

*:focus {
  outline: none;
}

html {
  margin: 0;
  padding: 0;
}

body {
  line-height: 0;
  -moz-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
       text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  overflow-x: hidden;
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

body {
  background-color: #2753f5;
  font-family: "YakuHanJP", "Noto Sans JP", "游ゴシック Medium", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 140%;
}

body {
  max-height: 100vw;
  aspect-ratio: 1366/1440;
}

.enekids {
  position: relative;
  width: 100%;
  aspect-ratio: 1366/1024;
  background-image: url(/kids/assets/img/enekids-illust-bg.jpg);
  background-size: 100% 100%;
  background-position: center center;
  min-width: 1023px;
}
.enekids-instruction {
  position: fixed;
  left: 0;
  bottom: 30px;
  z-index: 99;
  font-family: "YakuHanJP", "Noto Sans JP", "游ゴシック Medium", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 100%;
  font-weight: 800;
  color: #fff !important;
  background-color: #1DAA7D;
  color: #1DAA7D;
  padding: 4px 20px 8px 20px;
  border-radius: 0 50px 50px 0;
  border-top: 4px solid #fff;
  border-right: 4px solid #fff;
  border-bottom: 4px solid #fff;
}
.enekids-instruction rt {
  font-size: 0.5em !important;
  line-height: 0 !important;
  margin-bottom: -4px;
}

body.is-modal-open {
  overflow: hidden;
}

.enekids-title {
  position: fixed;
  top: 0;
  left: 20px;
  z-index: inherit 99;
  padding: 10px 40px;
  background-color: #fff;
  border-radius: 0px 0px 30px 30px;
  z-index: 99;
}
.enekids-title__logo {
  width: 438px;
}

.enekids-modal__container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  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;
  z-index: 999;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity 0.25s ease, visibility 0.25s ease;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.enekids-modal__container.is-hidden {
  opacity: 0;
  visibility: hidden !important;
  pointer-events: none !important;
}
.enekids-modal__container.is-open {
  opacity: 1;
  visibility: visible !important;
  pointer-events: auto !important;
}
.enekids-modal__container.is-hidden.is-open {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.enekids-modal__inner {
  position: relative;
  width: 80%;
  max-width: 840px;
  background-color: #fff;
  border: 8px solid #1DAA7D;
  border-radius: 30px;
  padding: 20px 0;
}
.enekids-modal__heading {
  font-family: "YakuHanJP", "Noto Sans JP", "游ゴシック Medium", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 140%;
  font-weight: 900;
  color: #1DAA7D;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
}
.enekids-modal__movie {
  position: relative;
  padding-top: 12px;
  padding-bottom: 10px;
}
.enekids-modal__movie-embed {
  position: relative;
  width: 80%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 16/9;
}
.enekids-modal__movie-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
}
.enekids-modal__movie-embed iframe.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}
.enekids-modal__movie-select {
  width: 100%;
  border-left: 2px solid #1DAA7D;
  border-right: 2px solid #1DAA7D;
  border-bottom: 2px solid #1DAA7D;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 80%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}
.enekids-modal__movie-select-btn {
  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;
  background-color: #fff;
  width: 50%;
  color: #1DAA7D;
  font-weight: 700;
  font-size: 16px;
  padding: 12px;
  cursor: pointer;
}
.enekids-modal__movie-select-btn.is-selected {
  background-color: #1DAA7D;
  color: #fff;
}
.enekids-modal__caption {
  width: 90%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 1024px) {
  .enekids-modal__caption {
    width: 90%;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1139px) {
  .enekids-modal__caption {
    width: 100%;
  }
}
.enekids-modal__caption-thumb {
  width: 20%;
}
.enekids-modal__caption-text {
  width: 80%;
  font-family: "YakuHanJP", "Noto Sans JP", "游ゴシック Medium", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 180%;
  font-weight: 700;
  color: #1DAA7D;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 30px;
}
.enekids-modal__btn-close {
  position: absolute;
  top: -34px;
  right: -34px;
  width: 68px;
  height: 68px;
  cursor: pointer;
}
@media screen and (min-width: 1024px) {
  .enekids-modal__btn-close {
    -webkit-transition: all 400ms 0s ease-out;
    transition: all 400ms 0s ease-out;
  }
  .enekids-modal__btn-close:hover {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}

.enekids-pin {
  position: absolute;
  width: 3%;
  cursor: pointer;
}
.enekids-pin__pin {
  position: absolute;
  bottom: 0px;
  left: 0;
  -webkit-animation: pinJump 3s ease-in-out infinite;
          animation: pinJump 3s ease-in-out infinite;
  -webkit-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
          transform-origin: center bottom;
  z-index: 5;
}
.enekids-pin__shadow {
  position: relative;
  bottom: -10px;
  left: 0;
  -webkit-animation: shadowScale 3s ease-in-out infinite;
          animation: shadowScale 3s ease-in-out infinite;
  z-index: 4;
}
.enekids-pin#pin_aquarium {
  bottom: 28%;
  right: 27%;
}
.enekids-pin#pin_vegetablefactory {
  top: 29%;
  left: 39.6%;
}
.enekids-pin#pin_sewagetreatmentplant {
  top: 52%;
  left: 55%;
}
.enekids-pin#pin_containerterminal {
  bottom: 25%;
  left: 24%;
}
.enekids-pin#pin_electricbus {
  top: 39%;
  left: 48%;
}
.enekids-pin#pin_landbasedaquaculture {
  bottom: 36%;
  left: 39%;
}
.enekids-pin#pin_thermalpowerplant {
  bottom: 37%;
  left: 16%;
}
.enekids-pin#pin_nuclearpowerplant {
  bottom: 14%;
  left: 65%;
}
.enekids-pin#pin_hydroelectricpowerplant {
  top: 14%;
  left: 85%;
}
.enekids-pin#pin_solarpowerplant {
  top: 29%;
  left: 85%;
}
.enekids-pin#pin_windpowerplant {
  top: 18%;
  left: 94%;
}

.enekids-name {
  position: absolute;
  cursor: pointer;
}
.enekids-name__name {
  position: absolute;
  bottom: 0px;
  left: 0;
  -webkit-animation: nameJump 3s ease-in-out infinite;
          animation: nameJump 3s ease-in-out infinite;
  -webkit-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
          transform-origin: center bottom;
  z-index: 5;
  font-family: "YakuHanJP", "Noto Sans JP", "游ゴシック Medium", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 100%;
  font-weight: 800;
  background-color: #fff;
  color: #1DAA7D;
  padding: 3px 20px 4px 20px;
  border-radius: 30px;
  border: 4px solid #1DAA7D;
  line-height: 0 !important;
  white-space: nowrap !important;
}
.chrome .enekids-name__name, .edge .enekids-name__name {
  padding: 12px 20px 2px 20px;
  line-height: 160% !important;
}
.enekids-name__name rt {
  font-size: 0.5em !important;
  line-height: 0 !important;
  margin-bottom: -4px !important;
}
.chrome .enekids-name__name rt, .edge .enekids-name__name rt {
  margin-bottom: 2px !important;
}
.enekids-name__name span {
  display: inline-block;
  width: 100%;
  font-size: 16px !important;
  line-height: 1 !important;
  padding: 6px 0px 6px 0px;
  white-space: nowrap;
}
@media screen and (min-width: 1024px) {
  .enekids-name__name {
    -webkit-transition: all 400ms 0s ease-out;
    transition: all 400ms 0s ease-out;
  }
  .enekids-name__name:hover {
    background-color: #1DAA7D;
    color: #fff;
  }
}
.enekids-name#name_aquarium {
  bottom: 30%;
  right: 27%;
}
.enekids-name#name_vegetablefactory {
  top: 34%;
  left: 34%;
}
.enekids-name#name_sewagetreatmentplant {
  top: 54%;
  left: 50%;
  z-index: 30;
}
.enekids-name#name_containerterminal {
  bottom: 20%;
  left: 8%;
}
.enekids-name#name_electricbus {
  top: 35%;
  left: 53%;
}
.enekids-name#name_landbasedaquaculture {
  bottom: 38%;
  left: 30%;
}
.enekids-name#name_thermalpowerplant {
  bottom: 37%;
  left: 14%;
}
.enekids-name#name_nuclearpowerplant {
  bottom: 12%;
  left: 68%;
}
.enekids-name#name_hydroelectricpowerplant {
  top: 14%;
  left: 80%;
}
.enekids-name#name_solarpowerplant {
  top: 30%;
  left: 78%;
}
.enekids-name#name_windpowerplant {
  top: 18%;
  left: 94%;
}

.enekids-illust {
  position: absolute;
  pointer-events: none;
}
.enekids-illust#illust_hydroelectricpowerplant {
  width: 9.8%;
  top: 12.1%;
  left: 80.8%;
}
.enekids-illust#illust_windpowerplant {
  width: 9.2%;
  top: 16%;
  left: 88.6%;
}
.enekids-illust#illust_aquarium {
  width: 14.5%;
  bottom: 16%;
  left: 66.5%;
}
.enekids-illust#illust_vegetablefactory {
  width: 4.5%;
  top: 29.5%;
  left: 45.8%;
}
.enekids-illust#illust_sewagetreatmentplant {
  width: 5.7%;
  bottom: 36.7%;
  left: 47.9%;
}
.enekids-illust#illust_containerterminal-1 {
  width: 9.1%;
  bottom: 21.4%;
  left: 0.4%;
}
.enekids-illust#illust_containerterminal-2 {
  width: 11%;
  bottom: 14.2%;
  left: 24.3%;
}
.enekids-illust#illust_containerterminal-man {
  width: 4.7%;
  bottom: 23.1%;
  left: 20.8%;
}
.enekids-illust#illust_thermalpowerplant {
  width: 4.6%;
  bottom: 37%;
  left: 2.4%;
}
.enekids-illust#illust_hatake {
  width: 16.7%;
  bottom: 30.8%;
  left: 77.4%;
}
.enekids-illust#illust_hiking {
  width: 4.9%;
  top: 10.4%;
  left: 70.2%;
}
.enekids-illust#illust_soccer {
  width: 4.9%;
  top: 37.1%;
  left: 74.4%;
}
.enekids-illust#illust_denkibus {
  width: 5.7%;
  -webkit-animation: denkibusLoop 7s linear infinite;
          animation: denkibusLoop 7s linear infinite;
  will-change: top, left, opacity;
  z-index: 11;
}
.enekids-illust#illust_shiplng {
  position: absolute;
  top: 80.5%;
  left: 3.1%;
  width: 12.4%;
  -webkit-animation: shiplngLoop 8s linear infinite;
          animation: shiplngLoop 8s linear infinite;
  will-change: top, left, opacity;
}
.enekids-illust#illust_shipcontainer {
  position: absolute;
  top: 86.5%;
  left: 36.2%;
  width: 12.4%;
  -webkit-animation: shipcontainerLoop 14s linear infinite;
          animation: shipcontainerLoop 14s linear infinite;
  will-change: top, left, opacity;
}
.enekids-illust#illust_cloudtop1 {
  width: 10%;
  -webkit-animation: cloudtop1 60s linear infinite;
          animation: cloudtop1 60s linear infinite;
  will-change: top, left, opacity;
}
.enekids-illust#illust_cloudtop2 {
  width: 11%;
  -webkit-animation: cloudtop2 50s linear infinite;
          animation: cloudtop2 50s linear infinite;
  will-change: top, left, opacity;
}
.enekids-illust#illust_cloudbottom {
  width: 12.4%;
  -webkit-animation: cloudbottom 60s linear infinite;
          animation: cloudbottom 60s linear infinite;
  will-change: top, left, opacity;
}
.enekids-illust#illust_cycle {
  width: 2.7%;
  -webkit-animation: cycleLoop 10s linear infinite;
          animation: cycleLoop 10s linear infinite;
  will-change: top, left, opacity;
  z-index: 80;
}
.enekids-illust#illust_carleft {
  width: 3.6%;
  -webkit-animation: carleftLoop 6s linear infinite;
          animation: carleftLoop 6s linear infinite;
  will-change: top, left, opacity;
}
.enekids-illust#illust_carright1 {
  width: 3.4%;
  -webkit-animation: carright1Loop 10s linear infinite;
          animation: carright1Loop 10s linear infinite;
  will-change: top, left, opacity;
}
.enekids-illust#illust_carright2 {
  width: 3.4%;
  -webkit-animation: carright2Loop 6s linear infinite;
          animation: carright2Loop 6s linear infinite;
  will-change: top, left, opacity;
}
.enekids-illust#illust_sup1 {
  width: 3.9%;
  -webkit-animation: sup1Loop 3s linear infinite;
          animation: sup1Loop 3s linear infinite;
  will-change: top, left, opacity;
}
.enekids-illust#illust_sup2 {
  width: 3.9%;
  -webkit-animation: sup2Loop 4s linear infinite;
          animation: sup2Loop 4s linear infinite;
  will-change: top, left, opacity;
}
.enekids-illust#illust_canoe {
  width: 3%;
  top: 12.1%;
  left: 40.5%;
  -webkit-animation: canoeLoop 2s linear infinite;
          animation: canoeLoop 2s linear infinite;
  will-change: top, left, opacity;
}
.enekids-illust#illust_tree {
  width: 4.2%;
  top: 48.6%;
  left: 39.8%;
  z-index: 22;
}
.enekids-illust#illust_shop {
  width: 8.6%;
  top: 43.7%;
  left: 46.5%;
  z-index: 22;
}
.enekids-illust#illust_busstop {
  width: 5%;
  top: 33.9%;
  left: 53.6%;
}

@-webkit-keyframes canoeLoop {
  0% {
    top: 12.1%;
    left: 40.5%;
  }
  50% {
    top: 11.9%;
    left: 40.5%;
  }
  100% {
    top: 12.1%;
    left: 40.5%;
  }
}

@keyframes canoeLoop {
  0% {
    top: 12.1%;
    left: 40.5%;
  }
  50% {
    top: 11.9%;
    left: 40.5%;
  }
  100% {
    top: 12.1%;
    left: 40.5%;
  }
}
@-webkit-keyframes cloudtop1 {
  0% {
    top: 2%;
    left: 50%;
    opacity: 1;
  }
  50% {
    top: 2%;
    left: 100%;
    opacity: 1;
  }
  51% {
    top: 2%;
    left: 100%;
    opacity: 0;
  }
  52% {
    top: 2%;
    left: -11%;
    opacity: 0;
  }
  53% {
    top: 2%;
    left: -11%;
    opacity: 1;
  }
  100% {
    top: 2%;
    left: 50%;
    opacity: 1;
  }
}
@keyframes cloudtop1 {
  0% {
    top: 2%;
    left: 50%;
    opacity: 1;
  }
  50% {
    top: 2%;
    left: 100%;
    opacity: 1;
  }
  51% {
    top: 2%;
    left: 100%;
    opacity: 0;
  }
  52% {
    top: 2%;
    left: -11%;
    opacity: 0;
  }
  53% {
    top: 2%;
    left: -11%;
    opacity: 1;
  }
  100% {
    top: 2%;
    left: 50%;
    opacity: 1;
  }
}
@-webkit-keyframes cloudtop2 {
  0% {
    top: 6%;
    left: -10%;
    opacity: 1;
  }
  100% {
    top: 6%;
    left: 100%;
    opacity: 1;
  }
}
@keyframes cloudtop2 {
  0% {
    top: 6%;
    left: -10%;
    opacity: 1;
  }
  100% {
    top: 6%;
    left: 100%;
    opacity: 1;
  }
}
@-webkit-keyframes sup2Loop {
  0% {
    top: 34.8%;
    left: 7%;
  }
  50% {
    top: 34.3%;
    left: 7%;
  }
  100% {
    top: 34.8%;
    left: 7%;
  }
}
@keyframes sup2Loop {
  0% {
    top: 34.8%;
    left: 7%;
  }
  50% {
    top: 34.3%;
    left: 7%;
  }
  100% {
    top: 34.8%;
    left: 7%;
  }
}
@-webkit-keyframes sup1Loop {
  0% {
    top: 36%;
    left: 2%;
  }
  50% {
    top: 36.5%;
    left: 2%;
  }
  100% {
    top: 36%;
    left: 2%;
  }
}
@keyframes sup1Loop {
  0% {
    top: 36%;
    left: 2%;
  }
  50% {
    top: 36.5%;
    left: 2%;
  }
  100% {
    top: 36%;
    left: 2%;
  }
}
@-webkit-keyframes carright2Loop {
  0% {
    top: 47.5%;
    left: 87.5%;
    opacity: 0;
  }
  30% {
    top: 47.5%;
    left: 87.5%;
    opacity: 0;
  }
  50% {
    top: 47.5%;
    left: 87.5%;
    opacity: 1;
  }
  90% {
    top: 57.5%;
    left: 100%;
    opacity: 1;
  }
  100% {
    top: 57.5%;
    left: 100%;
    opacity: 0;
  }
}
@keyframes carright2Loop {
  0% {
    top: 47.5%;
    left: 87.5%;
    opacity: 0;
  }
  30% {
    top: 47.5%;
    left: 87.5%;
    opacity: 0;
  }
  50% {
    top: 47.5%;
    left: 87.5%;
    opacity: 1;
  }
  90% {
    top: 57.5%;
    left: 100%;
    opacity: 1;
  }
  100% {
    top: 57.5%;
    left: 100%;
    opacity: 0;
  }
}
@-webkit-keyframes carright1Loop {
  0% {
    top: 40%;
    left: 50%;
    opacity: 0;
  }
  0% {
    top: 40%;
    left: 50%;
    opacity: 0;
  }
  30% {
    top: 40%;
    left: 50%;
    opacity: 0;
  }
  40% {
    top: 40%;
    left: 50%;
    opacity: 1;
  }
  90% {
    top: 51.5%;
    left: 36%;
    opacity: 1;
  }
  100% {
    top: 51.5%;
    left: 36%;
    opacity: 0;
  }
}
@keyframes carright1Loop {
  0% {
    top: 40%;
    left: 50%;
    opacity: 0;
  }
  0% {
    top: 40%;
    left: 50%;
    opacity: 0;
  }
  30% {
    top: 40%;
    left: 50%;
    opacity: 0;
  }
  40% {
    top: 40%;
    left: 50%;
    opacity: 1;
  }
  90% {
    top: 51.5%;
    left: 36%;
    opacity: 1;
  }
  100% {
    top: 51.5%;
    left: 36%;
    opacity: 0;
  }
}
@-webkit-keyframes carleftLoop {
  0% {
    top: 38%;
    left: 20%;
    opacity: 0;
  }
  30% {
    top: 38%;
    left: 20%;
    opacity: 0;
  }
  40% {
    top: 38%;
    left: 20%;
    opacity: 1;
  }
  90% {
    top: 46%;
    left: 30%;
    opacity: 1;
  }
  100% {
    top: 46%;
    left: 30%;
    opacity: 0;
  }
}
@keyframes carleftLoop {
  0% {
    top: 38%;
    left: 20%;
    opacity: 0;
  }
  30% {
    top: 38%;
    left: 20%;
    opacity: 0;
  }
  40% {
    top: 38%;
    left: 20%;
    opacity: 1;
  }
  90% {
    top: 46%;
    left: 30%;
    opacity: 1;
  }
  100% {
    top: 46%;
    left: 30%;
    opacity: 0;
  }
}
@-webkit-keyframes cycleLoop {
  0% {
    top: 52.5%;
    left: 39%;
    opacity: 0;
  }
  10% {
    top: 52.5%;
    left: 39%;
    opacity: 1;
  }
  90% {
    top: 62.5%;
    left: 52%;
    opacity: 1;
  }
  100% {
    top: 62.5%;
    left: 52%;
    opacity: 0;
  }
}
@keyframes cycleLoop {
  0% {
    top: 52.5%;
    left: 39%;
    opacity: 0;
  }
  10% {
    top: 52.5%;
    left: 39%;
    opacity: 1;
  }
  90% {
    top: 62.5%;
    left: 52%;
    opacity: 1;
  }
  100% {
    top: 62.5%;
    left: 52%;
    opacity: 0;
  }
}
@-webkit-keyframes cloudbottom {
  0% {
    top: 82%;
    left: -10%;
  }
  100% {
    top: 82%;
    left: 110%;
  }
}
@keyframes cloudbottom {
  0% {
    top: 82%;
    left: -10%;
  }
  100% {
    top: 82%;
    left: 110%;
  }
}
@-webkit-keyframes shiplngLoop {
  0% {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    opacity: 0;
  }
  5% {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    opacity: 1;
  }
  60% {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    opacity: 1;
  }
  90% {
    -webkit-transform: translate(-150%, 120%);
            transform: translate(-150%, 120%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-150%, 120%);
            transform: translate(-150%, 120%);
    opacity: 0;
  }
}
@keyframes shiplngLoop {
  0% {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    opacity: 0;
  }
  5% {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    opacity: 1;
  }
  60% {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    opacity: 1;
  }
  90% {
    -webkit-transform: translate(-150%, 120%);
            transform: translate(-150%, 120%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-150%, 120%);
            transform: translate(-150%, 120%);
    opacity: 0;
  }
}
@-webkit-keyframes shipcontainerLoop {
  0% {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    opacity: 0;
  }
  5% {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    opacity: 1;
  }
  60% {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    opacity: 1;
  }
  90% {
    -webkit-transform: translate(400%, 300%);
            transform: translate(400%, 300%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(400%, 300%);
            transform: translate(400%, 300%);
    opacity: 0;
  }
}
@keyframes shipcontainerLoop {
  0% {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    opacity: 0;
  }
  5% {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    opacity: 1;
  }
  60% {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    opacity: 1;
  }
  90% {
    -webkit-transform: translate(400%, 300%);
            transform: translate(400%, 300%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(400%, 300%);
            transform: translate(400%, 300%);
    opacity: 0;
  }
}
@-webkit-keyframes denkibusLoop {
  0% {
    top: 35.5%;
    left: 54.2%;
    opacity: 0;
  }
  10% {
    top: 35.5%;
    left: 54.2%;
    opacity: 1;
  }
  30% {
    top: 35.5%;
    left: 54.2%;
    opacity: 1;
  }
  90% {
    top: 49%;
    left: 72.2%;
    opacity: 1;
  }
  99% {
    top: 49%;
    left: 72.2%;
    opacity: 0;
  }
  100% {
    top: 49%;
    left: 72.2%;
    opacity: 0;
  }
}
@keyframes denkibusLoop {
  0% {
    top: 35.5%;
    left: 54.2%;
    opacity: 0;
  }
  10% {
    top: 35.5%;
    left: 54.2%;
    opacity: 1;
  }
  30% {
    top: 35.5%;
    left: 54.2%;
    opacity: 1;
  }
  90% {
    top: 49%;
    left: 72.2%;
    opacity: 1;
  }
  99% {
    top: 49%;
    left: 72.2%;
    opacity: 0;
  }
  100% {
    top: 49%;
    left: 72.2%;
    opacity: 0;
  }
}
@-webkit-keyframes pinJump {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
  }
  15% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes pinJump {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
  }
  15% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes shadowScale {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.5;
  }
  10% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    opacity: 0.3;
  }
  15% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.5;
  }
}
@keyframes shadowScale {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.5;
  }
  10% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    opacity: 0.3;
  }
  15% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.5;
  }
}
@-webkit-keyframes nameJump {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
  }
  15% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes nameJump {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
  }
  15% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}