@charset "UTF-8";

/* === アニメーション ============== */

.toppage {
  position: relative;
}

.anime_area {
  opacity: 0;
}

.anime_area.after_anime {
  opacity: 1;
}

/* アニメ枠 */
.anime_area {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 180px;
  width: 100%;
}

.anime_area div {
  position: absolute;
}
/* 鳥 */
.bird_anime01 {
  width: min(6vw,25px);
  top: 20%;
  right: 45vw;
  z-index: 1;
  
}

.bird_anime01.scrolled,
.anime_area.scrolled .bird_anime01 {
  animation: bird_anime01 2s ease-out 1 both;
}

@keyframes bird_anime01 {
  0% {

    transform: translate(55vw, -10px);
  }

  100% {
    transform: translate(0);

  }
}

.bird_anime02 {
  width: min(5.5vw,23px);
  top: 10%;
  right: 35vw;
  z-index: 2;
}

.bird_anime02.scrolled,
.anime_area.scrolled .bird_anime02 {
  animation: bird_anime02 1.5s ease-out 0.5s 1 both;
}

@keyframes bird_anime02 {
  0% {
    transform: translate(45vw, -10px);

  }

  100% {
    transform: translate(0);
  }
}


/* 家族 */
.family_anime {
  width: min(60vw, 330px);
  left: -5px;
  bottom: 0;
  z-index: 4;
}

.family_anime.scrolled,
.anime_area.scrolled .family_anime {
  animation: family_anime 0.5s ease-out 1s 1 both;
}

@keyframes family_anime {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}



/* 民家 */
.house_anime {
  width: min(52vw, 300px);
  right: -15px;
  bottom: 20%;
  z-index: 3;
}

.house_anime.scrolled,
.anime_area.scrolled .house_anime {
  animation: house_anime 0.5s ease-out 1.2s 1 both;
}

@keyframes house_anime {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}



/* ロード後飛んでくる鳥 PCのみ */
.bird01,
.bird02 {
  opacity: 0;
  display: none;
}



@media (min-width:750px) {
  /* アニメ枠 */
.anime_area {
height: 100%;
top: 0;
left: 0;


}
  /* 鳥 */
.bird_anime01 {
  width: 30px;
  top: 20px;
  right: 100px;

}


.bird_anime01.scrolled,
.anime_area.scrolled .bird_anime01 {
  animation: bird_anime01 1s ease-out 3.5s 1 both ;
}

@keyframes bird_anime01 {
  0% {
      transform: translate(150px, -10px) scale(1.2); 
  }

  100% {
    transform: translate(0) scale(1);
  }
}


.bird_anime02 {
  width: 30px;
  top: 0;
  right: 50px;

}

.bird_anime02.scrolled,
.anime_area.scrolled .bird_anime02 {
  animation: bird_anime02 0.7s ease-out 3.8s 1 both ;
}

@keyframes bird_anime02 {
   0% {
      transform: translate(110px, 0) scale(1.2);
  }

  100% {
    transform: translate(0) scale(1);
  }
}


/* 家族 */
.family_anime {
  width: min(35vw, 350px);
  left: 20px;
  bottom: 0;
}

.family_anime.scrolled,
.anime_area.scrolled .family_anime {
  animation: family_anime 0.5s ease-out 3.5s 1 both ;
}

/* 民家 */
.house_anime {
  width: min(32vw,330px);
  right: 20px;
  bottom: 6%;
}

.house_anime.scrolled,
.anime_area.scrolled .house_anime {
  animation: house_anime 0.5s ease-out 3.8s 1 both ;
}

  /* ロード後飛んでくる鳥 */
  .bird01,
  .bird02 {
    display: block;
    opacity: 0;
    position: absolute;
    width: 30px;
    transform: scale(-1, 1);
  }

  .bird01.scrolled {
    animation: bird01_anime 3s linear 0s 1 both;
  }

  @keyframes bird01_anime {
    0% {
      opacity: 1;
      top: 100px;
      left: -40px;
      transform: scale(-1, 1);
    }

    30% {
      top: 250px;
    }

    99% {
      top: 400px;
      left: 110vw;
      opacity: 1;
    }
    100% {
      top: 400px;
      left: 110vw;
      opacity: 0;
      transform: scale(-1.5, 1.5);
    }
  }

  .bird02.scrolled {
    animation: bird02_anime 3.2s linear 0.2s 1 both;

  }

  @keyframes bird02_anime {
    0% {
      opacity: 1;
      top: 50px;
      left: -45px;
      transform: scale(-1, 1);
    }

    30% {
      top: 170px;
    }

    99% {
      top: 300px;
      left: 110vw;
      opacity: 1;
    }
    100% {
      top: 300px;
      left: 110vw;
      opacity: 0;
      transform: scale(-1.5, 1.5);
    }
  }

}

@media (min-width:1025px) {
    /* 鳥 */
.bird_anime01 {
  width: 40px;
  right: 130px;
  top: 20px;
}

.bird_anime01.scrolled,
.anime_area.scrolled .bird_anime01 {
  animation: bird_anime01 0.7s ease-out 5s 1 both ;
}


@keyframes bird_anime01 {
  0% {
    top: 0%;
    right: -60px;
    transform: scale(1.2);
  }

  100% {
    right: 130px;
  top: 20px;
  transform: scale(1);
  }
}

.bird_anime02 {
  width: 40px;
}

.bird_anime02.scrolled,
.anime_area.scrolled .bird_anime02 {
  animation: bird_anime02 0.4s ease-out 5.3s 1 both ;
}


/* 家族 */
.family_anime {
  left: auto;
  right: 65%;
  width: min(35vw, 400px);
  bottom: 20px;

}

.family_anime.scrolled,
.anime_area.scrolled .family_anime {
  animation: family_anime 0.5s ease-out 4.3s 1 both ;
}


/* 民家 */
.house_anime {
  right: auto;
  left: 65%;
  width: min(32vw,450px);
  bottom: 60px;
}


.house_anime.scrolled,
.anime_area.scrolled .house_anime {
  animation: house_anime 0.5s ease-out 4.5s 1 both ;
}

  /* ロード後飛んでくる鳥 */
  .bird01,
  .bird02 {
    width: 45px;
  }

  .bird01.scrolled {
    animation: bird01_anime 4s linear 0s 1 both;

  }

  @keyframes bird01_anime {
    0% {
      opacity: 1;
      top: 100px;
      left: -45px;
      transform: scale(-1, 1);
    }

    35% {
      top: 300px;
    }

    99% {
      top: 400px;
      left: 110vw;
      opacity: 1;
    }
    100% {
      opacity: 0;
      top: 400px;
      left: 110vw;
      transform: scale(-1.5, 1.5);
    }
  }

  .bird02.scrolled {
    animation: bird02_anime 4s linear 0.5s 1 both;

  }

  @keyframes bird02_anime {
    0% {
      opacity: 1;
      top: 200px;
      left: -45px;
      transform: scale(-1, 1);
    }

    50% {
      top: 350px;
    }

    99% {
      top: 400px;
      left: 110vw;
      opacity: 1;
    }
    100% {
      display: block;
      opacity: 0;
      top: 400px;
      left: 110vw;
      transform: scale(-1.5, 1.5);
    }
  }

}

@media (min-width:1500px) {
      /* 鳥 */
.bird_anime01 {
  width: 50px;
}

.bird_anime02 {
  width: 50px;
}

  /* ロード後飛んでくる鳥 */
  .bird01,
  .bird02 {
    width: 50px;
  }

  .bird01.scrolled {
    animation: bird01_anime 4s linear 0s 1 both;

  }

  @keyframes bird01_anime {
    0% {
      opacity: 1;
      top: 100px;
      left: -55px;
      transform: scale(-1, 1);
    }

    35% {
      top: 350px;
    }

    99% {
      top: 550px;
      left: 110vw;
      opacity: 1;
    }
    100% {
      opacity: 0;
      top: 550px;
      left: 110vw;
      transform: scale(-1.5, 1.5);
    }
  }

  .bird02.scrolled {
    animation: bird02_anime 4s linear 0.7s 1 both;

  }

  @keyframes bird02_anime {
    0% {
      opacity: 1;
      top: 200px;
      left: calc((-100vw + 1500px) / 2 - 55px);
      transform: scale(-1, 1);
    }

    50% {
      top: 350px;
    }

    99% {
      top: 400px;
      left: 110vw;
      opacity: 1;
    }
    100% {
      opacity: 0;
      top: 400px;
      left: 110vw;
      transform: scale(-1.5, 1.5);
    }
  }


}