.button-area {
    position: absolute;
    top: 700px;
    left: 800px;
}

/* 1.不動池 */
.button-area1 {
    position: absolute;
    top: 229px;
    left: 308px;
    opacity: 0;
    animation: fadeIn1 1s ease 0s 1 forwards,bound2  1s ease 0s forwards;
}

@keyframes fadeIn1 { /*animetion-nameで設定した値を書く*/
  0% {opacity: 0} /*アニメーション開始時は不透明度0%*/
  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/

}

@keyframes bound1 {
  0% { transform:translateY(0px) }
  25% { transform:translateY(300px) }
  40% { transform:translateY(290px) }
  60% { transform:translateY(300px) }
  100% { transform:translateY(300px) }
}


/* 2.韓国岳 */
.button-area2 {
    position: absolute;
    top: 202px;
    left: 405px;
    opacity: 0;
    animation: fadeIn2 1s ease 0.1s 1 forwards,bound2  1s ease 0.1s forwards;
}

@keyframes fadeIn2 { /*animetion-nameで設定した値を書く*/
  0% {opacity: 0} /*アニメーション開始時は不透明度0%*/
  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/

}

@keyframes bound2 {
  0% { transform:translateY(0px) }
  25% { transform:translateY(300px) }
  40% { transform:translateY(290px) }
  60% { transform:translateY(300px) }
  100% { transform:translateY(300px) }
}


/* 3.ビジターセンター */
.button-area3 {
    position: absolute;
    top: 442px;
    left: 738px;
    opacity: 0;
    animation: fadeIn3 1s ease 0.2s 1 forwards,bound3  1s ease 0.2s forwards;
}

@keyframes fadeIn3 { /*animetion-nameで設定した値を書く*/
  0% {opacity: 0} /*アニメーション開始時は不透明度0%*/
  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/

}

@keyframes bound3 {
  0% { transform:translateY(0px) }
  25% { transform:translateY(300px) }
  40% { transform:translateY(290px) }
  60% { transform:translateY(300px) }
  100% { transform:translateY(300px) }
}


/* 4.御鉢 */
.button-area4 {
    position: absolute;
    top: 310px;
    left: 1018px;
    opacity: 0;
    animation: fadeIn4 1s ease 0.3s 1 forwards,bound4  1s ease 0.3s forwards;
}

@keyframes fadeIn4 { /*animetion-nameで設定した値を書く*/
  0% {opacity: 0} /*アニメーション開始時は不透明度0%*/
  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/

}

@keyframes bound4 {
  0% { transform:translateY(0px) }
  25% { transform:translateY(300px) }
  40% { transform:translateY(290px) }
  60% { transform:translateY(300px) }
  100% { transform:translateY(300px) }
}


/* 5.高千穂峰 */
.button-area5 {
    position: absolute;
    top: 270px;
    left: 1182px;
    opacity: 0;
    animation: fadeIn5 1s ease 0.4s 1 forwards,bound5  1s ease 0.4s forwards;
}

@keyframes fadeIn5 { /*animetion-nameで設定した値を書く*/
  0% {opacity: 0} /*アニメーション開始時は不透明度0%*/
  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/

}

@keyframes bound5 {
  0% { transform:translateY(0px) }
  25% { transform:translateY(300px) }
  40% { transform:translateY(290px) }
  60% { transform:translateY(300px) }
  100% { transform:translateY(300px) }
}


/* 6.二子石 */
.button-area6 {
    position: absolute;
    top: 320px;
    left: 1391px;
    opacity: 0;
    animation: fadeIn6 1s ease 0.5s 1 forwards,bound6  1s ease 0.5s forwards;
}

@keyframes fadeIn6 { /*animetion-nameで設定した値を書く*/
  0% {opacity: 0} /*アニメーション開始時は不透明度0%*/
  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/

}

@keyframes bound6 {
  0% { transform:translateY(0px) }
  25% { transform:translateY(300px) }
  40% { transform:translateY(290px) }
  60% { transform:translateY(300px) }
  100% { transform:translateY(300px) }
}



.button1 {
  display: inline-block;
  padding: 7px 20px;
  border-radius: 25px;
  text-decoration: none;
  color: blue;
  background-color: #2c2c96;
  /* 変化させるプロパティ */
  transition-property: background-color, color;
  /* アニメーションにかける時間(秒) */
  transition-duration: 0.5s;
}

.button1:hover {
  color: red;
  background-color: #5d87d4;
}

.button2 {
  display: inline-block;
  padding: 7px 44px;
  border-radius: 25px;
  text-decoration: none;
  color: blue;
  background-color: #2c2c96;
  /* 変化させるプロパティ */
  transition-property: background-color, color;
  /* アニメーションにかける時間(秒) */
  transition-duration: 0.5s;
}

.button2:hover {
  color: red;
  background-color: #5d87d4;
}

.button3 {
  display: inline-block;
  border: 1px solid #fff;
  padding: 3px 12px;
  border-radius: 25px;
  text-decoration: none;
  color: #000088;
  background-color: #fe8900;
  /* アニメーションにかける時間(秒) */
  transition: transform 0.3s linear;
}

.button3:hover {
  color: red;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    cursor: pointer;
}


.button-area10 {
    position: absolute;
    top: 850px;
    left: 960px;
}


  /* movieページのボタン  */
.m_button-area1 {
    position: absolute;
    top: 500px;
    left: 530px;
}


 .button-m1{
  background:url(image/movie_karakunidake.png);
  color:#fff;
  padding:50px 107px;
}

 .button-m2{
  background:url(image/movie_oonami.png);
  color:#fff;
  padding:50px 107px;
}

 .button-m3{
  background:url(image/movie_iouyama.png);
  color:#fff;
  padding:50px 107px;
}

 .button-m4{
  background:url(image/movie_ike.png);
  color:#fff;
  padding:50px 107px;
}




.m_button-area2 {
    position: absolute;
    top: 670px;
    left: 540px;
}


.m_button1 {
  display: inline-block;
  font-size: 0.8em;
  padding: 6px 100px;
  border-radius: 25px;
  text-decoration: none;
  color: blue;
  background-color: #2c2c96;
  /* 変化させるプロパティ */
  transition-property: color;
  /* アニメーションにかける時間(秒) */
  transition-duration: 0.5s;
}

.m_button1:hover {
  color: red;
}

.m_button2 {
  display: inline-block;
  font-size: 0.8em;
  padding: 6px 100px;
  border-radius: 25px;
  text-decoration: none;
  color: blue;
  background-color: #7c7c7c;
  /* 変化させるプロパティ */
  transition-property: background-color, color;
  /* アニメーションにかける時間(秒) */
  transition-duration: 0.5s;
}

.m_button2:hover {
  color: red;
  background-color: #2c2c96;
}


.m_button-area3 {
    position: absolute;
    top: 730px;
    left: 900px;
}


.m_button3 {
  display: inline-block;
  font-size: 0.7em;
  padding: 6px 30px;
  border-radius: 25px;
  text-decoration: none;
  color: blue;
  background-color: #2c2c96;
  /* 変化させるプロパティ */
  transition-property: background-color, color;
  /* アニメーションにかける時間(秒) */
  transition-duration: 0.5s;
}

.m_button3:hover {
  color: red;
  background-color: #5d87d4;
}