@charset "UTF-8";
/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2017 Daniel Eden
 */
 
/**
 * ----------------------------------------
 * チラツキ防止の為に下記2か所にクラス名を追加してください。
 * ----------------------------------------
 */
 
/*アニメーションクラス名を追加*/
.fade-in,
.fade-in-bottom,
.fade-in-left,
.fade-in-right,
.puff-in-center,
.shine-effect{ visibility:visible !important;}
/*.inview_を付けたアニメーションクラス名を追加*/
.inview_fade-in,
.inview_fade-in-bottom,
.inview_fade-in-left,
.inview_fade-in-right,
.inview_puff-in-center,
.inview_shine-effect{ visibility:hidden; }

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
.fade-in {
	-webkit-animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation fade-in-bottom
 * ----------------------------------------
 */
.fade-in-bottom {
	-webkit-animation: fade-in-bottom 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-bottom 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}


/**
 * ----------------------------------------
 * animation fade-in-left
 * ----------------------------------------
 */
.fade-in-left {
	-webkit-animation: fade-in-left 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-left 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes fade-in-left {
  0% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-left {
  0% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation fade-in-right
 * ----------------------------------------
 */
.fade-in-right {
	-webkit-animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation puff-in-center
 * ----------------------------------------
 */
.puff-in-center {
  -webkit-animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
          animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

@-webkit-keyframes puff-in-center {
  0% {
    -webkit-filter: blur(20px);
            filter: blur(20px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes puff-in-center {
  0% {
    -webkit-filter: blur(20px);
            filter: blur(20px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation shine-effect (inview対応版)
 * ----------------------------------------
 */

/* 1. アニメーションの「準備」をするクラス */
/* 普段はこのスタイルが適用されている */
.inview_shine-effect {
  position: relative;
  overflow: hidden;
}

.inview_shine-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  z-index: 2;
  display: block;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 100%);
  transform: skewX(-25deg);
  /* ここでは animation プロパティを指定しない */
}


/* 2. 画面内に入ったときに「アニメーションを実行」させるためのスタイル */
/* .shine-effect クラスが追加されたら、アニメーションを開始する */
.inview_shine-effect.shine-effect::before {
  -webkit-animation: shine 1s 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
          animation: shine 1s 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}


/* アニメーション本体の定義（変更なし） */
@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}




/**
 * ----------------------------------------
 * Delay / Iteration
 * ----------------------------------------
 */
.animeDelay-01s{
  -webkit-animation-delay:0.1s;
  animation-delay:0.1s;
  }
.animeDelay-02s{
  -webkit-animation-delay:0.2s;
  animation-delay:0.2s;
  }
.animeDelay-03s{
  -webkit-animation-delay:0.3s;
  animation-delay:0.3s;
  }
.animeDelay-04s{
  -webkit-animation-delay:0.4s;
  animation-delay:0.4s;
  }
.animeDelay-05s{
  -webkit-animation-delay:0.5s;
  animation-delay:0.5s;
  }
.animeDelay-1s{
  -webkit-animation-delay:1s;
  animation-delay:1s;
  }
.animeDelay-15s{
  -webkit-animation-delay:1.5s;
  animation-delay:1.5s;
  }

.animeDelay-2s{
  -webkit-animation-delay:2s;
  animation-delay:2s;
  }
.animeDelay-3s{
  -webkit-animation-delay:3s;
  animation-delay:3s;
  }
.animeDelay-4s{
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
}
.animeDelay-5s{
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
}
.animeIteration-5{  /* 5回繰り返す */
  -webkit-animation-iteration-count: 5;
  animation-iteration-count: 5;
}