/*
----------
探検しよう
----------
*/
/*
----------------------------------------------------------
keyvisual
----------------------------------------------------------
*/

.mainvisual button.btn_motion {
  position: fixed;
  top: 260px;
  right: 2%;
  z-index: 10;
  width: 185px;
  transition: all .3s;
}

@media screen and (max-width: 767px) {
  .mainvisual button.btn_motion {
    top: 380px;
    width: 92px;
  }
}

.mainvisual button.btn_motion:hover {
  opacity: .8;
}

.map-button {
  z-index: 3;
}

.animation {
  position: absolute;
  z-index: 1;
}

.animation img{
  width: 100%;
  height: auto;
}

.animation_kirakira {
  top: 34%;
  left: 8%;
  width: 84%;
}

@media screen and (max-width: 767px) {
  .animation_kirakira {
    top: 41%;
  }
}

.animation_kirakira.is-moving {
  animation: kirakira infinite 2s ease-in-out;
}

.animation_dolphin {
  top: 40%;
  left: 9.3%;
  width: 4.4%;
}

@media screen and (max-width: 767px) {
  .animation_dolphin {
    top: 46%;
    left: 9%;
  }
}

.animation_dolphin.is-moving {
  animation: dolphin infinite 2s ease-in-out;
}

.animation_windmill01 img:nth-of-type(1),
.animation_windmill02 img:nth-of-type(1),
.animation_windmill03 img:nth-of-type(1) {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 37%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.animation_windmill01,
.animation_windmill02,
.animation_windmill03 {
  top: 35.7%;
  width: 5.5%;
}

@media screen and (max-width: 767px) {
  .animation_windmill01,
  .animation_windmill02,
  .animation_windmill03 {
    top: 41.7%;
  }
}

.animation_windmill01.is-moving img:nth-of-type(2),
.animation_windmill02.is-moving img:nth-of-type(2),
.animation_windmill03.is-moving img:nth-of-type(2) {
  animation: windmill infinite 2s linear;
}

.animation_windmill01 {
  left: 26.7%;
}

@media screen and (max-width: 767px) {
  .animation_windmill01 {
    left: 26.5%;
  }
}

.animation_windmill02 {
  left: 32.4%;
}

@media screen and (max-width: 767px) {
  .animation_windmill02 {
    left: 32.2%;
  }
}

.animation_windmill03 {
  left: 37.5%;
}

@media screen and (max-width: 767px) {
  .animation_windmill03 {
    left: 37.3%;
  }
}

.animation_plane {
  top: 35%;
  left: 50.5%;
  width: 5.9%;
}

@media screen and (max-width: 767px) {
  .animation_plane {
    top: 41%;
  }
}

.animation_plane.is-moving {
  animation: plane infinite 2s ease-in-out;
}

.animation_balloon {
  top: 34.4%;
  right: 21.2%;
  width: 3.8%;
}

@media screen and (max-width: 767px) {
  .animation_balloon {
    top: 40.4%;
  }
}

.animation_balloon.is-moving {
  animation: balloon infinite 2s ease-in-out;
}

@keyframes kirakira {
  50% { opacity: 0; }
}

@keyframes dolphin {
  50% { transform: translateY(-8px) rotate(-5deg); }
}

@keyframes windmill {
  100% { transform: rotate(360deg); }
}

@keyframes plane {
  50% { transform: translateY(-8px); }
}

@keyframes balloon {
  50% { transform: translateY(-8px); }
}