@charset "UTF-8";
/* CSS Document */

/*ヘッダー*/
/*body,#head_wrapper,#wrapper,#wrapper_back {
	background-image: none!important;
}*/




/****************************************************************************
セクション　タイトルアニメーション
****************************************************************************/
.title,
.title-delay,
.title-onload {
    display: flex;
    overflow: hidden;
    font-size: 32px;
}


.title span,
.title-onload span {
    display: block;
    transform: translate(0, 105%);
    transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1s;
}
/*ディレイを入れるやつと入れないやつの記述を分ける*/

.title-delay span {
    display: block;
    transform: translate(0, 105%);
    transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1s 0.2s;
}


.title.-visible span,
.title-onload.-visible span,
.title-delay.-visible span {
    transform: translate(0, 0);
}

.title span:nth-child(2),
.title-onload span:nth-child(2) {
    transition-delay: 0.06s;
}
.title span:nth-child(3),
.title-onload span:nth-child(3) {
    transition-delay: 0.12s;
}
.title span:nth-child(4),
.title-onload span:nth-child(4) {
    transition-delay: 0.18s;
}
.title span:nth-child(5),
.title-onload span:nth-child(5) {
    transition-delay: 0.24s;
}
.title span:nth-child(6),
.title-onload span:nth-child(6) {
    transition-delay: 0.30s;
}
.title span:nth-child(7),
.title-onload span:nth-child(7) {
    transition-delay: 0.36s;
}
.title span:nth-child(8),
.title-onload span:nth-child(8) {
    transition-delay: 0.42s;
}
.title span:nth-child(9),
.title-onload span:nth-child(9) {
    transition-delay: 0.48s;
}
.title span:nth-child(10),
.title-onload span:nth-child(10) {
    transition-delay: 0.54s;
}
.title span:nth-child(11),
.title-onload span:nth-child(11) {
    transition-delay: 0.6s;
}
.title span:nth-child(12),
.title-onload span:nth-child(12) {
    transition-delay: 0.66s;
}
.title span:nth-child(13),
.title-onload span:nth-child(13) {
    transition-delay: 0.72s;
}
.title span:nth-child(14),
.title-onload span:nth-child(14) {
    transition-delay: 0.78s;
}
.title span:nth-child(15),
.title-onload span:nth-child(15) {
    transition-delay: 0.84s;
}
.title span:nth-child(16),
.title-onload span:nth-child(16) {
    transition-delay: 0.9s;
}
.title span:nth-child(17),
.title-onload span:nth-child(17) {
    transition-delay: 0.96s;
}
.title span:nth-child(18),
.title-onload span:nth-child(18) {
    transition-delay: 1.02s;
}
.title span:nth-child(19),
.title-onload span:nth-child(19) {
    transition-delay: 1.08s;
}
.title span:nth-child(20),
.title-onload span:nth-child(20) {
    transition-delay: 1.14s;
}
.title span:nth-child(21),
.title-onload span:nth-child(21) {
    transition-delay: 1.2s;
}


.title-delay span:nth-child(2) {
    transition-delay: 0.26s;
}
.title-delay span:nth-child(3) {
    transition-delay: 0.32s;
}
.title-delay span:nth-child(4) {
    transition-delay: 0.38s;
}
.title-delay span:nth-child(5) {
    transition-delay: 0.44s;
}
.title-delay span:nth-child(6) {
    transition-delay: 0.50s;
}
.title-delay span:nth-child(7) {
    transition-delay: 0.56s;
}
.title-delay span:nth-child(8) {
    transition-delay: 0.62s;
}
.title-delay span:nth-child(9) {
    transition-delay: 0.68s;
}
.title-delay span:nth-child(10) {
    transition-delay: 0.74s;
}
.title-delay span:nth-child(11) {
    transition-delay: 0.80s;
}
.title-delay span:nth-child(12) {
    transition-delay: 0.96s;
}
.title-delay span:nth-child(13) {
    transition-delay: 1.02s;
}
.title-delay span:nth-child(14) {
    transition-delay: 1.08s;
}



/****************************************************************************
カーテンアニメーション
****************************************************************************/
/*カーテンアニメーションスクロールレフト*/
.curtain {
  position: relative;
	display:inline-block;
  font-size: 0;
  line-height: 0;
  display: block;
  
}
/* span要素 最初は非表示 */
.curtain span {
  transition: all 0s 0.5s ease;
  opacity: 0;
  padding: 0;
}

.curtain.active {
    opacity: 1;
    font-size: 0;
    line-height: 0;
    display: block;
}
/* .curtainに.activeがついたらspanを表示（この場合は1s後に表示させる） */
.curtain.active span {
  opacity: 1;
  color:#333;
}
/* .curtainに擬似要素を追加して、transformで横幅を0にしておく scaleX(0)
		あと、position→left:0 でスタート位置を左にしておく
*/
.curtain:after {
  display: inline;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  background: #000;
    z-index: 1000;
}
/* .curtainに.activeがついたら擬似要素のアニメーションを開始させる */
.curtain.active:after {
  animation: curtainEffect 1s ease-in-out 0s 1 normal both running;
}
/* アニメーションname duration 変化の度合い delay 回数 再生方向 アニメーションの開始前、終了後のスタイル アニメーションの再生・停止*/

/*　transform-originで変形における原点を設定（最初は左・上下の中央にセット）
		そのままscaleX(1)で右側いっぱいまで要素を伸ばし、
		伸ばした状態で原点を右・上下中央にセットし直す。
		原点が右に変わったことでscaleX(0)に戻る際、右側に消えるように流れる*/

@keyframes curtainEffect {
  0% {
    transform-origin: left center;
    transform: scaleX(0);
  }
  49.999% {
    transform-origin: left center;
    transform: scaleX(1);
  }
  50% {
    transform-origin: right center;
    transform: scaleX(1);
  }
  100% {
    transform-origin: right center;
    transform: scaleX(0);
  }
}



/*カーテンアニメーションオンロードレフト*/
.curtainOnload {
  position: relative;
	display:inline-block;
  opacity: 0;
  font-size: 0;
  line-height: 0;
  display: block;
}
/* span要素 最初は非表示 */
.curtainOnload span {
  transition: all 0s 0.5s ease;
  opacity: 0;
  padding: 0;
}

.curtainOnload.active {
    opacity: 1;
    font-size: 0;
    line-height: 0;
    display: block;
}
/* .curtainに.activeがついたらspanを表示（この場合は1s後に表示させる） */
.curtainOnload.active span {
  opacity: 1;
  color:#333;
}
/* .curtainに擬似要素を追加して、transformで横幅を0にしておく scaleX(0)
		あと、position→left:0 でスタート位置を左にしておく
*/
.curtainOnload:after {
  display: inline;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  background: #000;
    z-index: 1000;
}
/* .curtainに.activeがついたら擬似要素のアニメーションを開始させる */
.curtainOnload.active:after {
  animation: curtainOnloadEffect 1s ease-in-out 0s 1 normal both running;
}
/* アニメーションname duration 変化の度合い delay 回数 再生方向 アニメーションの開始前、終了後のスタイル アニメーションの再生・停止*/

/*　transform-originで変形における原点を設定（最初は左・上下の中央にセット）
		そのままscaleX(1)で右側いっぱいまで要素を伸ばし、
		伸ばした状態で原点を右・上下中央にセットし直す。
		原点が右に変わったことでscaleX(0)に戻る際、右側に消えるように流れる*/

@keyframes curtainOnloadEffect {
  0% {
    transform-origin: left center;
    transform: scaleX(0);
  }
  49.999% {
    transform-origin: left center;
    transform: scaleX(1);
  }
  50% {
    transform-origin: right center;
    transform: scaleX(1);
  }
  100% {
    transform-origin: right center;
    transform: scaleX(0);
  }
}



/*カーテンアニメーションスクロールライト*/
.curtainRight {
  position: relative;
	display:inline-block;
}
/* span要素 最初は非表示 */
.curtainRight span {
  transition: all 0s 0.5s ease;
  opacity: 0;
  padding: 0;
}

.curtainRight.active {
    opacity: 1;
}
/* .curtainに.activeがついたらspanを表示（この場合は1s後に表示させる） */
.curtainRight.active span {
  opacity: 1;
  color:#333;
}
/* .curtainに擬似要素を追加して、transformで横幅を0にしておく scaleX(0)
		あと、position→left:0 でスタート位置を左にしておく
*/
.curtainRight:after {
  display: inline;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  background: #000;
    z-index: 1000;
}
/* .curtainに.activeがついたら擬似要素のアニメーションを開始させる */
.curtainRight.active:after {
  animation: curtainRight 1s ease-in-out 0s 1 reverse both running;
}
/* アニメーションname duration 変化の度合い delay 回数 再生方向 アニメーションの開始前、終了後のスタイル アニメーションの再生・停止*/

/*　transform-originで変形における原点を設定（最初は左・上下の中央にセット）
		そのままscaleX(1)で右側いっぱいまで要素を伸ばし、
		伸ばした状態で原点を右・上下中央にセットし直す。
		原点が右に変わったことでscaleX(0)に戻る際、右側に消えるように流れる*/

@keyframes curtainRight {
  0% {
    transform-origin: left center;
    transform: scaleX(0);
  }
  49.999% {
    transform-origin: left center;
    transform: scaleX(1);
  }
  50% {
    transform-origin: right center;
    transform: scaleX(1);
  }
  100% {
    transform-origin: right center;
    transform: scaleX(0);
  }
}

/*カーテンアニメーションここまで*/



/****************************************************************************
スライドインアニメーション
****************************************************************************/
/*スクロールレフト*/
.slideIn-left.active {
  animation: slideInLeft 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
 
@keyframes slideInLeft {
  0% {
    transform: translateX(-10%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}


/*スクロールライト*/
.slideIn-right.active {
  animation: slideInRight 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
 
@keyframes slideInRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}



/*スクロールボトム*/
.slideIn-bottom {
    opacity: 0;
}
.slideIn-bottom.active {
  animation: slideInBottom 1s cubic-bezier(0.25, 1, 0.5, 1)  1 forwards;
}
 
@keyframes slideInBottom {
  0% {
    transform: translateY(50%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
  }
  40%,100% {
    opacity: 1;
  }
}


/*オンロードボトム*/
.slideInOnload-bottom {
    opacity: 0;
}
.slideInOnload-bottom.active {
    animation: slideInOnloadbottom 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
  }
   
  @keyframes slideInOnloadbottom {
    0% {
      transform: translateY(30%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }


/*オンロードレフト*/
.slideInOnload-left.active {
  animation: slideInOnloadLeft 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
 
@keyframes slideInOnloadLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}



/*オンロードライト*/
.slideInOnload-right.active {
  animation: slideInOnloadright 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
 
@keyframes slideInOnloadright {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}



/*ディレイ*/
.delay-01 {
    animation-delay: 0.1s!important;   
}
.delay-02 {
    animation-delay: 0.2s!important;   
}
.delay-03 {
    animation-delay: 0.3s!important;   
}
.delay-04 {
    animation-delay: 0.4s!important;   
}
.delay-05 {
    animation-delay: 0.5s!important;   
}
.delay-06 {
    animation-delay: 0.6s!important;   
}
.delay-07 {
    animation-delay: 0.7s!important;   
}
.delay-08 {
    animation-delay: 0.8s!important;   
}
.delay-085 {
    animation-delay: 0.85s!important;   
}
.delay-09 {
    animation-delay: 0.9s!important;   
}
.delay-095 {
    animation-delay: 0.95s!important;   
}
.delay-10 {
    animation-delay: 1s!important;   
}
.delay-105 {
    animation-delay: 1.05s!important;   
}
.delay-11 {
    animation-delay: 1.1s!important;   
}
.delay-115 {
    animation-delay: 1.15s!important;   
}
.delay-12 {
    animation-delay: 1.2s!important;   
}
.delay-125 {
    animation-delay: 1.25s!important;   
}
.delay-13 {
    animation-delay: 1.3s!important;   
}
.delay-135 {
    animation-delay: 1.35s!important;   
}
.delay-14 {
    animation-delay: 1.4s!important;   
}
.delay-145 {
    animation-delay: 1.45s!important;   
}
.delay-15 {
    animation-delay: 1.5s!important;   
}
.delay-155 {
    animation-delay: 1.55s!important;   
}
.delay-16 {
    animation-delay: 1.6s!important;   
}
.delay-165 {
    animation-delay: 1.65s!important;   
}
.delay-17 {
    animation-delay: 1.7s!important;   
}
.delay-175 {
    animation-delay: 1.75s!important;   
}
.delay-18 {
    animation-delay: 1.8s!important;   
}
.delay-185 {
    animation-delay: 1.85s!important;   
}
.delay-19 {
    animation-delay: 1.9s!important;   
}
.delay-20 {
    animation-delay: 2.0s!important;   
}
.delay-22 {
    animation-delay: 2.2s!important;   
}
.delay-24 {
    animation-delay: 2.4s!important;   
}
.delay-26 {
    animation-delay: 2.6s!important;   
}
.delay-28 {
    animation-delay: 2.8s!important;   
}
.delay-30 {
    animation-delay: 3.0s!important;   
}