/*----------------------------------------
アニメーション
プラグイン『inview.js』

●.inview と合わせて動かしたい対象に付ける
●繰り返す場合は .inview_re
----------------------------------------*/

/* フェードイン（ふわっと）：.fadeIn */

.fadeIn {
  opacity: 0;
  transition: 1.5s;
}

.fadeIn.is-show {
  opacity: 1;
}

/* 下からフェードイン（ふわっと）：.fadeIn_up */

.fadeIn_up {
  opacity: 0;
  transform: translate(0, 10%);
  transition: 1.5s;
  -webkit-transform: translate(0, 10%);
  -moz-transform: translate(0, 10%);
  -ms-transform: translate(0, 10%);
  -o-transform: translate(0, 10%);
}

.fadeIn_up.is-show {
  transform: translate(0, 0) !important;
  opacity: 1;
  -webkit-transform: translate(0, 0) !important;
  -moz-transform: translate(0, 0) !important;
  -ms-transform: translate(0, 0) !important;
  -o-transform: translate(0, 0) !important;
}

/* 左からフェードイン（ふわっと）：.fadeIn_left */

.fadeIn_left {
  opacity: 0;
  transform: translate(-10%, 0);
  transition: 1.5s;
  -webkit-transform: translate(-10%, 0);
  -moz-transform: translate(-10%, 0);
  -ms-transform: translate(-10%, 0);
  -o-transform: translate(-10%, 0);
}

.fadeIn_left.is-show {
  transform: translate(0, 0) !important;
  opacity: 1;
  -webkit-transform: translate(0, 0) !important;
  -moz-transform: translate(0, 0) !important;
  -ms-transform: translate(0, 0) !important;
  -o-transform: translate(0, 0) !important;
}


/* 右からフェードイン（ふわっと）：.fadeIn_right */

.fadeIn_right {
  opacity: 0;
  transform: translate(10%, 0);
  transition: 1.5s;
  -webkit-transform: translate(10%, 0);
  -moz-transform: translate(10%, 0);
  -ms-transform: translate(10%, 0);
  -o-transform: translate(10%, 0);
}

.fadeIn_right.is-show {
  transform: translate(0, 0) !important;
  opacity: 1;
  -webkit-transform: translate(0, 0) !important;
  -moz-transform: translate(0, 0) !important;
  -ms-transform: translate(0, 0) !important;
  -o-transform: translate(0, 0) !important;
}



/*----------------------------------------
フェードイン以外

.visible

●.visible と合わせて動かしたい対象に付ける
●繰り返す場合は .visible_re
----------------------------------------*/

/* カーテンを開くように表示 */

.visible{
	position: relative;
	overflow: hidden;
}
.visible::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /*必要なら微調整する*/height: 100%;
  background: #fff;
  transform-origin: right top;
  /*アニメーションの軸となる座標*/z-index: 2;
  transition: 1.3s;
  -webkit-transition: 1.3s;
  -moz-transition: 1.3s;
  -ms-transition: 1.3s;
  -o-transition: 1.3s;
  transition-timing-function: ease-out;
}
.effect.visible::before {
  transform: scale(0, 1);
}

/* 要素のスライドアップ＆フェードインアニメーション */

.visible.v-fadeIn{
  position: relative;
  overflow: hidden;
  opacity: 0;/* 初期設定：透明度を0にする */
  transform: translateY(30px);/* 初期設定：30px下に下げる */
}
.visible.v-fadeIn::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 101%;
  height: 100%;
  background: #000;
  background: rgba(255,255,255,0.4);
  transform-origin: right top;
  transition: 1.3s;
  z-index: 2;
  -webkit-transition: 1.3s;
  -moz-transition: 1.3s;
  -ms-transition: 1.3s;
  -o-transition: 1.3s;
}
.effect.visible.v-fadeIn::before {
    transform: scale(1, 0);
}
.effect.visible.v-fadeIn {
  animation-name: effect_anime; /*アニメーション名*/
  opacity: 1; /*アニメーションが到達した状態*/
  transition: 0.5s; /*0.5秒かけてアニメーションする*/
  transform: translateY(0px); /* アニメーションが到達した状態 */
}
@keyframes effect_anime {
  0% {/* 初期値 */
    opacity: 0;
    transform: translateY(30px);
  }
  100% {/* アニメーションが到達した状態 */
    opacity: 1;
    transform: translateY(0px);
  }
}

.effect:nth-last-of-type(3n-1) {/* 2列目 */
	transition-delay: 0.2s;
}
.effect:nth-last-of-type(3n-2) {/* 3列目 */
	transition-delay: 0.4s;
}


/* ================================

動作のオプション

==================================*/

/* 親要素につけてスクロールバー非表示 */

.hidden {
  overflow: hidden;
}

.hidden-x {
  overflow-x: hidden;
}

/* 動きの調整 */

/* かなり大きく動く */
.fadeIn_up.move-XL {
  transform: translate(0, 50%);
  -webkit-transform: translate(0, 50%);
  -moz-transform: translate(0, 50%);
  -ms-transform: translate(0, 50%);
  -o-transform: translate(0, 50%);
}

.fadeIn_left.move-XL {
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
}

.fadeIn_right.move-XL {
  transform: translate(50%, 0);
  -webkit-transform: translate(50%, 0);
  -moz-transform: translate(50%, 0);
  -ms-transform: translate(50%, 0);
  -o-transform: translate(50%, 0);
}

/* 大きく動く */

.fadeIn_up.move-L {
  transform: translate(0, 30%);
  -webkit-transform: translate(0, 30%);
  -moz-transform: translate(0, 30%);
  -ms-transform: translate(0, 30%);
  -o-transform: translate(0, 30%);
}

.fadeIn_left.move-L {
  transform: translate(-30%, 0);
  -webkit-transform: translate(-30%, 0);
  -moz-transform: translate(-30%, 0);
  -ms-transform: translate(-30%, 0);
  -o-transform: translate(-30%, 0);
}

.fadeIn_right.move-L {
  transform: translate(30%, 0);
  -webkit-transform: translate(30%, 0);
  -moz-transform: translate(30%, 0);
  -ms-transform: translate(30%, 0);
  -o-transform: translate(30%, 0);
}


/* やや大きく動く */
.fadeIn_up.move-M {
  transform: translate(0, 20%);
  -webkit-transform: translate(0, 20%);
  -moz-transform: translate(0, 20%);
  -ms-transform: translate(0, 20%);
  -o-transform: translate(0, 20%);
}

.fadeIn_left.move-M {
  transform: translate(-20%, 0);
  -webkit-transform: translate(-20%, 0);
  -moz-transform: translate(-20%, 0);
  -ms-transform: translate(-20%, 0);
  -o-transform: translate(-20%, 0);
}

.fadeIn_right.move-M {
  transform: translate(20%, 0);
  -webkit-transform: translate(20%, 0);
  -moz-transform: translate(20%, 0);
  -ms-transform: translate(20%, 0);
  -o-transform: translate(20%, 0);
}


/* 小さく動く */
.fadeIn_up.move-S {
  transform: translate(0, 5%);
  -webkit-transform: translate(0, 5%);
  -moz-transform: translate(0, 5%);
  -ms-transform: translate(0, 5%);
  -o-transform: translate(0, 5%);
}

.fadeIn_left.move-S {
  transform: translate(-5%, 0);
  -webkit-transform: translate(-5%, 0);
  -moz-transform: translate(-5%, 0);
  -ms-transform: translate(-5%, 0);
  -o-transform: translate(-5%, 0);
}

.fadeIn_right.moves-S {
  transform: translate(5%, 0);
  -webkit-transform: translate(5%, 0);
  -moz-transform: translate(5%, 0);
  -ms-transform: translate(5%, 0);
  -o-transform: translate(5%, 0);
}


/* 動きの速さ */

/* 速く */
.time-fast,
.time-fast.visible::before {
  transition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
}

/* やや速く */
.time-fast-ltl,
.time-fast-ltl.visible::before {
  transition: 1.2s;
  -webkit-transition: 1.2s;
  -moz-transition: 1.2s;
  -ms-transition: 1.2s;
  -o-transition: 1.2s;
}

/* やや遅く */
.time-slow-ltl,
.time-slow-ltl.visible::before {
  transition: 2s;
  -webkit-transition: 2s;
  -moz-transition: 2s;
  -ms-transition: 2s;
  -o-transition: 2s;
}

/* 遅く */
.time-slow,
.time-slow.visible::before {
  transition: 2.5s;
  -webkit-transition: 2.5s;
  -moz-transition: 2.5s;
  -ms-transition: 2.5s;
  -o-transition: 2.5s;
}

/* かなり遅く */
.time-slow2,
.time-slow2.visible::before {
  transition: 3s;
  -webkit-transition: 3s;
  -moz-transition: 3s;
  -ms-transition: 3s;
  -o-transition: 3s;
}



/* 時間差で動く */

.delay-item1,
.delay-item1.visible::before {
  transition-delay: 0.3s;
}

.delay-item2,
.delay-item2.visible::before {
  transition-delay: 0.5s;
}

.delay-item3,
.delay-item3.visible::before {
  transition-delay: 0.8s;
}

.delay-item4,
.delay-item4.visible::before {
  transition-delay: 1s;
}

@media screen and (min-width:769px) {
  .delay-item1--pc,
  .delay-item1--pc.visible::before {
    transition-delay: 0.3s;
  }

  .delay-item2--pc,
  .delay-item2--pc.visible::before {
    transition-delay: 0.5s;
  }

  .delay-item3--pc,
  .delay-item3--pc.visible::before {
    transition-delay: 0.8s;
  }

  .delay-item4--pc,
  .delay-item4--pc.visible::before {
    transition-delay: 1s;
  }
}

@media screen and (max-width:768px) {
  .delay-item1--sp,
  .delay-item1--sp.visible::before {
    transition-delay: 0.3s;
  }

  .delay-item2--sp,
  .delay-item2--sp.visible::before {
    transition-delay: 0.5s;
  }

  .delay-item3--sp,
  .delay-item3--sp.visible::before {
    transition-delay: 0.8s;
  }

  .delay-item4--sp,
  .delay-item4--sp.visible::before {
    transition-delay: 1s;
  }



}