h1 {
  position: absolute;
  left: 50%;
  top: 65%;
  width:72%;
  transform: translate(-50%, -60%);
  -webkit-transform: translate(-50%, -60%);
  -ms-transform: translate(-50%, -60%);
}

.sky {
  position: relative;

  animation: cloud 25s linear infinite;
  background: url(../images/clouds.svg), rgba(255 ,255 ,255 , 1);

  background-position-x: 0%;
  background-position-y: 24px;

  background-repeat: repeat-x;
  background-size: 100% auto;
  height: 480px;
}

@keyframes cloud {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: 800px;
  }
}

.grass {
  position: absolute; 
  bottom: 0; 
  width: 100%;
  height: 32px;
  background-image: url("../images/grass.svg");
  background-size: 640px 32px;
  background-repeat: repeat-x;
}

.fence {
  position: absolute; 
  left: 5%; 
  bottom: -20px; 
  width: 25%;
}


@media screen and (max-width: 480px) {
  h1 {
    top: 60%;
    width:90%;
    transform: translate(-50%, -60%);
    -webkit-transform: translate(-50%, -60%);
    -ms-transform: translate(-50%, -60%);
  }

  .sky {
    height: 320px;
  }
}


@media screen and (min-width: 900px) {
  .sky {
    background-size: 100% 50%;
    height: 600px;
  }
}


@media screen and (min-width: 1024px) {
  h1 {
    width: 720px;
  }

  .fence {
    width: 320px;
  }

  .sky {
    background-size: 100% 45%;
    height: 600px;
  }
}

.Navy-block-padding {
  padding-top: 45px;
}



:root {
  --svg_logoAnime_x: 0;
  --svg_logoAnime_y: 0;

  --svg_logoAnime_w: 1;
  --svg_logoAnime_h: 1;
}

@keyframes moveToLogoAnime {
  100% {
    transform-origin: left top 0;
    transform: translate(var(--svg_logoAnime_x) , var(--svg_logoAnime_y)) scale(var(--svg_logoAnime_w), var(--svg_logoAnime_h));
  }
}

svg.moveToLogo#logoAnime {
  animation-name: moveToLogoAnime;
  animation-duration: .5s;
  animation-timing-function: ease;
}


@keyframes fadeinAnime {
  0% {
    display: none;
    opacity: .5;
  }

  100% {
    opacity: 1;
  }
}

.navi-menu #logo a.fadein {
  display: flex;
  opacity: 0;
  animation: fadeinAnime 1s ease-in .5s forwards; /* .7秒後に0.5秒かけて"late-open"を実行する */
}

.displayOff {
  display: none !important;
}