@charset "UTF-8";


/*---------------------
top スクロールダウン
---------------------*/  
/*スクロールダウン全体の場所*/
.scrolldown2{
  /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:10px;
  right:90px;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
  /*描画位置*/
  position: absolute;
  left:-5px;
  bottom:75px;
  /*テキストの形状*/
  color: #fff;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  height: 80px;
  }

/* 丸の描写 */
.scrolldown2:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom:0;
  left:-4px;
  /*丸の形状*/
  width:10px;
  height:10px;
  border-radius: 50%;
  background:#fff;
  /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
  circlemove 1.6s ease-in-out infinite,
  cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
  0%{bottom:75px;}
  100%{bottom:-5px;}
}

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
  0%{opacity:0}
  50%{opacity:1;}
  80%{opacity:0.9;}
  100%{opacity:0;}
  }

/* 線の描写 */
.scrolldown2:after{
  content:"";
  /*描画位置*/
  position: absolute;
  bottom:0;
  left:0;
  /*線の形状*/
  width:2px;
  height: 75px;
  background:#fff;
}



/*---------------------
アニメーション　ふわっと
---------------------*/  

/* その場で */
.fadeIn{
  animation-name:fadeInAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.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);
  }
}

/* 上から */

.fadeDown{
  animation-name:fadeDownAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:0;
}

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

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

/* 左から */

.fadeLeft{
  animation-name:fadeLeftAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

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

/* 右から */

.fadeRight{
  animation-name:fadeRightAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

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

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}





/*---------------------------------------
sp
---------------------------------------*/

@media(max-width: 768px) {

  

.scrolldown2 {
  position: absolute;
  bottom: 10px;
  right: 4%;
}
  
  
  
  
  
  
}