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

/*=================== ローディング画面のアニメーション ======================
=======================================================================*/

/* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#000;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  letter-spacing: 0.05em;
}

/*ローディングバー*/
.loadingBar {
  width: 2000px;
  height: 1px;
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: linear-gradient(
    90deg,
    transparent,
    white 50%,
    transparent 50%,
    transparent
  );
  background-size: 200%, 100%;
/*  border-radius: 5px;*/
/*  box-shadow: 0 2px 1px rgba(0, 0, 0, 15%);*/
  animation-name: loading-bar;
  animation-duration: 1.4s;
  animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1); /* easeInOutQuintのイージング */
  animation-iteration-count: infinite;
}

@keyframes loading-bar {
  0% {
    background-position: 100% 0;
  }

  50% {
    background-position: 0% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

/*=================== top背景画像のアニメーション ======================
=======================================================================*/

.bgchange {
  animation: bgchange 2.2s linear;
}

/*拡大とぼかし*/
@keyframes bgchange {
  0% {
    transform: scale(2.5);
    filter: blur(100px);
  }
  100% {
    transform: scale(1);
    filter: blur(0);
  }
}

/*=================== h1とh2を左から表示させるアニメーション ======================
=======================================================================*/

/*========= 流れるテキスト ===============*/

/*全共通*/
.slide-in {
	overflow: hidden;
/*  display: inline-block;*/
}

.slide-in_inner {
/*	display: inline-block;*/
}

/*左右のアニメーション*/
.leftAnime,
.leftAnime_top,
.leftAnime_2nd {
  opacity: 0;/*事前に透過0にして消しておく*/
}

/*h1の表示*/
.slideAnimeLeftRight_top {
	animation-name:slideTextX100;
	animation-duration:0.7s;
	animation-fill-mode:forwards;
  opacity: 0;
}

/*h2(about)の表示*/
.slideAnimeLeftRight,
.slideAnimeLeftRight_2nd {
	animation-name:slideTextX100;
	animation-duration:2.5s;
	animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes slideTextX100 {
  from {
	transform: translateX(-100%); /*要素を左の枠外に移動*/
  opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
  opacity: 1;
  }
}

/*h1の表示*/
.slideAnimeRightLeft_top {
	animation-name:slideTextX-100;
	animation-duration:0.7s;
	animation-fill-mode:forwards;
  opacity: 0;
}

/*h2(about)の表示*/
.slideAnimeRightLeft,
.slideAnimeRightLeft_2nd {
	animation-name:slideTextX-100;
	animation-duration:2.5s;
	animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes slideTextX-100 {
  from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
  opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
  opacity: 1;
  }
}

/*=================== top scrollbarのアニメーション ======================
=======================================================================*/

/*スクロールダウン全体の場所*/
.scrollBar{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	left:50%;
	bottom:20px;
    /*全体の高さ*/
	height:100px;
}

/*Scrollテキストの描写*/
.scrollBar span{
    /*描画位置*/
	position: absolute;
	left:50%;
	top: 0;
    /*テキストの形状*/
	color: #fff;
	font-size: 1rem;
	letter-spacing: 0.1em;
  line-height: 1.8;
  writing-mode: vertical-lr;
  margin: 0 auto;
}

/* 線の描写 */
.scrollBar::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 120px;
	background: #fff;
    /*線の動き1.5秒かけて動く。永遠にループ*/
	animation: scroll 1.5s cubic-bezier(1, 0, 0, 1) infinite;
} 

/*線の動きを指定*/
@keyframes scroll{
	0% {
		transform: scale(1,0);
    transform-origin: 0 0;
	}
	50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}



/*=================== コンテンツをフェードインするアニメーション ======================
=======================================================================*/
.fadeUpTrigger{
opacity: 0;
}

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(100px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}