@charset "UTF-8";
/* ページ遷移 */
body:not(.home){
	animation: fadeIn 2s ease 0s 1 normal;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
  }
  @keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
  }
  
  @-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
  }

/* キャッチコピー */


/* テキスト出現時 */
.blur{
    transition: all 0.5s;
    filter: blur(10px);
    &.scrollin{
      filter: blur(0);
    }
}
/* キャッチコピー */

/* header */
.header{
  animation-name: slideIn !important;
  animation-duration: 5s;
  animation-delay: 10s;
  animation-timing-function: ease;
  -webkit-animation: spin 1.6s ease infinite;
  -moz-animation: spin 1.6s ease infinite;
  animation-iteration-count: 1;
}
@keyframes slideIn{
  0% { 
    transform: translateY(-100px);
  }
  100% { 
    transform: translateY(0px);
  }
}
 
/* kv */
.top_kv img{
  animation-name: spin;
  animation-duration: 5s;
  animation-delay: 10s;
  animation-timing-function: ease;
  -webkit-animation: spin 1.6s ease infinite;
  -moz-animation: spin 1.6s ease infinite;
  animation-iteration-count: 1;
}
@keyframes spin{
  0% { 
    transform: scale(0.8);
    opacity: 0;
    filter: blur(2px);
  }
  100% { 
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

/*
animation-name	アニメーションに名前を付けます。
animation-duration	1回のアニメーションの時間を設定します。
animation-delay	アニメーションを開始するまでの時間を設定します。
animation-iteration-count	アニメーションを繰り返させる回数を指定します。
animation-direction	アニメーションを繰り返す際の最初の状態を指定します。
animation-fill-mode	アニメーションが終了した後の状態を指定できます。
animation-play-state	アニメーションを途中で止めるかどうかを指定できます。
animation-timing-function	アニメーションの実行速度を設定できます。
*/

/* ページ見出し */
.page_head .head_txt{
  animation: slideInB 2s ease-in-out infinite;
  animation-iteration-count: 1;
}
@keyframes slideInB{
  0%{
    transform: translateY(0);
    opacity: 0;
    filter: blur(1px);
  }
  100%{
    transform: translateY(-43px);
    opacity: 1;
    filter: blur(0px);
  }
}


@media screen and (max-width: 840px) {
	/* 840px以下に適用されるCSS（タブレット用） */
}


@media screen and (max-width: 540px) {
	/* 540px以下に適用されるCSS（スマホ用） */
}