@charset "utf-8";
/*inviewのスタイル
-----------------------------*/
/*==待機中==/
/*共通設定（待機中）*/
.transform1,
.transform2,
.up,
.left,
.right {
  opacity: 0;/*透明度（透明の状態）*/
  position: relative;
}
/*transform1スタイル。その場で回転するスタイル（待機中）*/
.transform1 {
  transform: scaleX(0);
  /*幅を0%でスタート*/
}
/*transform2スタイル。倒れた状態から起き上がるスタイル（待機中）*/
.transform2 {
  transform: perspective(400px) rotateX(100deg);
  /*perspective:数字が小さいとパースがきつくなる*/
}
/*upスタイル。下から上にフェードインしてくるスタイル（待機中）*/
.up {
  bottom: -50px;
  /*基準値の下50pxの場所からスタート*/
}
/*leftスタイル。左からフェードインしてくるスタイル（待機中）*/
.left {
  left: -100px;
  /*基準値より左に100pxの場所からスタート*/
}
/*rightスタイル。右からフェードインしてくるスタイル（待機中）*/
.right {
  right: -100px;
  /*基準値より右に100pxの場所からスタート*/
}
/*==================================*/
/*==================================*/
/*==要素が見えたら実行するアクション==*/
/*共通設定（要素が見えたら実行するアクション）*/
.transform1style,
.transform2style,
.upstyle,
.leftstyle,
.rightstyle  {
  opacity: 1;
  /*透明度（色が100%出た状態）*/
  transition: 1.5s 0.5s;
  /*1sはアニメーションの実行時間1.5秒。
  0.5sは0.5秒遅れてスタートする指定。*/
}
/*要素が見えたら実行するアクション*/
.transform1style {
  transform: scaleX(1);
  /*幅を100%に戻す*/
}
/*要素が見えたら実行するアクション*/
.transform2style {
  transform: none;
}
/*要素が見えたら実行するアクション*/
.upstyle {
  bottom: 0;
  /*基準値まで戻す*/
}
/*要素が見えたら実行するアクション*/
.leftstyle {
  left: 0;
  /*基準値まで戻す*/
}
/*要素が見えたら実行するアクション*/
.rightstyle {
  right: 0;
  /*基準値まで戻す*/
}