@charset "UTF-8";

/*  アニメーションスタイル
-------------------------------------------*/
/*--- フェードイン ---*/
.fade_in {
  animation: fadeIn 1s ease 0s 1 normal;
  -webkit-animation: fadeIn 1s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
/*--- 右から左 ---*/
.slide_left {
  position: relative;
  left: 100vw;
  transition: left 1s ease-in-out;
}
.slide_left.is_show {
  left: 0;
}
/*--- 左から右 ---*/
.slide_right {
  position: relative;
  right: 100vw;
  transition: right 1s ease-in-out;
}
.slide_right.is_show {
  right: 0;
}

/*--- 下からふわっと表示 ---*/
.slide_up {
  position: relative;
  opacity: 0;
  transform:translateY(200px);
  transition: transform 1s,opacity 1s;
}
.slide_up.is_show {
  opacity: 1;
  transform:translateY(0);
}

.a_fade_in {
  opacity: 0;
  transition: opacity 1s,opacity 1s;
}
.a_fade_in.is_show {
  opacity: 1;
}