@charset "utf-8";
* { margin: 0; padding: 0; line-height:1.8em; font-size: 15px;}


.loading {
    display: none;
    max-width: 100%;
    min-width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
  background: #201323;
  z-index: 99998;
    background-size: cover;
}

/* Loading画像中央配置　*/
.loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.loader img {
	width: 80px
}



/*==================================================
ふわっ
===================================*/
/* 下から */



.fadeIn{
animation-name:fadeInAnime;
animation-duration: 2s;
animation-fill-mode:forwards;
opacity:0;
	animation-delay: 0.2s;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeUp{
animation-name:fadeUpAnime;
animation-duration: 0.8s;
animation-fill-mode:forwards;
opacity:0;
	animation-delay: 0.2s;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(50px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.fadeUpTrigger{
    opacity: 0;
}


/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2{  
	animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{  
	animation-iteration-count: infinite;/*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05{  
	animation-delay: 0.5s;
}

.delay-time1{  
	animation-delay: 1s;
}

.delay-time15{  
	animation-delay: 1.5s;
}

.delay-time2{  
	animation-delay: 2s;
}

.delay-time25{  
	animation-delay: 2.5s;
}
.delay-time3{  
	animation-delay: 3s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05{  
	animation-duration: 0.5s;
}

.change-time1{  
	animation-duration: 1s;
}

.change-time15{  
	animation-duration: 1.5s;
}

.change-time2{  
	animation-duration: 2s;
}

.change-time25{  
	animation-duration: 2.5s;
}