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

.delay01 { animation-delay:0.2s; }
.delay02 { animation-delay:0.4s; }
.delay03 { animation-delay:0.6s; }
.delay04 { animation-delay:0.8s; }
.delay05 { animation-delay:1.0s; }
.delay06 { animation-delay:1.2s; }
.delay07 { animation-delay:1.4s; }
.delay08 { animation-delay:1.6s; }

/*画像が横から少しずつスライド表示*/
.smooth {
  clip-path: inset(0 100% 0 0);
  transition: 1.0s cubic-bezier(0.9, 0.2, 0.1, 0.9);
  transition-property: clip-path;
  line-height: 1;
}
.smooth.is-animated {
  clip-path: inset(0);
}

/*テキスト背景が上がる*/
.textUp {
  color: transparent;
  font-size: 36px;
  font-weight: bold;
  overflow: hidden;
  position: relative;
  transition: color 0ms 450ms;
}
.textUp::after {
  background: #000;
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0, 100%);
}
 
.textUp.add-show {
  color: #000;
}
.textUp.add-show::after {
  animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}
 
@keyframes mask-bg {
  0% {
    transform: translate(0, 101%)
  }
  40%, 60% {
    transform: translate(0, 0%)
  }
  100% {
    transform: translate(0, -100%)
  }
}


/*フワッと表示*/
.fadeup { opacity: 0; }
.fadeup.add-show {
	animation-name: fadeupAnime;/*アニメーションの定義名*/
	animation-duration:.5s;/*アニメーション変化時間 ※デフォルト*/
	animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
}
/*アニメーションの開始から終了までを指定する*/
@keyframes fadeupAnime{
  from {
	  opacity: 0;
	  transform: translateY(100px);
  }
  to {
	  opacity: 1;
	  transform: translateY(0);
  }
}


/*テキストスライド*/
.slide-in {
  overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
  display: inline-block;

}

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

.slideAnimeLeftRight {
  animation-name:slideTextX100;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
    opacity: 0;
}

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

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

.slideAnimeRightLeft {
  animation-name:slideTextX-100;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
    opacity: 0;
}


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

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

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

@media screen and (max-width: 767px) {
	.scrolldown1{
		position:absolute;
		left:6%;
		bottom:10px;
		/*全体の高さ*/
		height:50px;
		z-index: 100;
	}
}

/*Scrollテキストの描写*/
.scrolldown1 span{
	/*描画位置*/
	position: absolute;
	left:-15px;
	top: -15px;
	/*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	font-family:'Roboto Condensed', sans-serif; font-weight:bold;
}

/* 線の描写 */
.scrolldown1::after{
  content: "";
    /*描画位置*/
  position: absolute;
  top: 0;
    /*線の形状*/
  width: 1px;
  height: 30px;
  background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height:30px;
    opacity: 1;
  }
  100%{
    height:0;
    top:50px;
    opacity: 0;
  }
}