@charset "utf-8";
/* CSS Document */

/*========= レイアウトのためのCSS ===============*/

.hide_area{
	color: #000;
}


/*========= クリックしたら別のものが動く際の指定 ===============*/

/*----ボタンの形状----*/

.btn{
  cursor: pointer;
  height: 50px;
  width: 220px;
  border: 1px solid #000;
  margin: 0 auto;
text-align: center;
font-size: 20px;
margin-top: 50px;
}

/*非表示エリアをはじめは隠す*/
  .hide_area{
    display: none;
  }

/*クリックされたら fadeUpクラスを付与し、display:block;で表示させる*/
  .hide_area.fadeUp {
    display:block;
  }

/* ボタンがクリックされた後にボタン自体が非表示になる　*/ 
  .btn.disp_none{
    display: none;
  }

/*==================================================
ふわっ
===================================*/

/* fadeUp */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}