@charset "UTF-8";

/*  アニメーションスタイル
-------------------------------------------*/
.fade_in,
.slide_left,
.slide_right,
.slide_up {
  transition-duration:2s;
  transition-timing-function: var(--Baseeasing);
}

/*--- フェードイン ---*/
.first_fade_in {
  animation: fadeIn 2s var(--Baseeasing) 0s 1 normal;
  -webkit-animation: fadeIn 2s var(--Baseeasing) 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-property: left;
}
.slide_left.is_show {
  left: 0;
}
/*--- 左から右 ---*/
.slide_right {
  position: relative;
  right: 100vw;
  transition-property: right;
}
.slide_right.is_show {
  right: 0;
}

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

.fade_in {
  opacity: 0;
  transition-property: opacity;
}
.fade_in.is_show {
  opacity: 1;
}