/*==================================================
スライダーのためのcss
===================================*/
.slider {
    position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	height: 100%;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/

.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}



/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.scrolldown1{
	position:absolute;
	left:5%;
	bottom:0;
	height:100px;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	position: absolute;
	left:-30px;
	top: -30px;
    /*テキストの形状*/
	color: #333333;
	font-size: 1.8rem;
	letter-spacing: 0.2em;
}

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

@media(max-width:800px){
  .scrolldown1{
	position:absolute;
	left:50%;
	bottom:0;
	height:100px;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	position: absolute;
	left:-30px;
	top: -30px;
    /*テキストの形状*/
	color: #333333;
	font-size: 1.8rem;
	letter-spacing: 0.2em;
}
  
  
}


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


/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

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

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


/* その場でフェードイン */
.fadeIn {
  transition: 2s;
  opacity: 0;
}

.fadeIn.animated {
  opacity: 1;
}

/* 上からフェードイン */
.fadeIn-top {
  transform: translate3d(0, -50px, 0);
  transition: 2s;
  opacity: 0;
}

.fadeIn-top.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* 下からフェードイン */
.fadeIn-under {
  transform: translate3d(0, 50px, 0);
  transition: 2s;
  opacity: 0;
}
.fadeIn-under.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* 右からフェードイン */
.fadeIn-right {
  transform: translate3d(50px, 0, 0);
  transition: 2s;
  opacity: 0;
}

.fadeIn-right.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}


/* 左からフェードイン */
.fadeIn-left {
    transform: translate3d(-50px, 0, 0);
    transition: 2s;
    opacity: 0;
}

.fadeIn-left.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}