/*==================================================
フェードアニメ
===================================*/
/*z-index調整*/
.companybtn_z{
  position: relative;
  z-index: 5!important;
}

/* その場で */
.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;
}


/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time02{
animation-delay: 0.2s;
}

.delay-time04{
animation-delay: 0.4s;
}

.delay-time06{
animation-delay: 0.6s;
}

.delay-time08{
animation-delay: 0.8s;
}

.delay-time10{
animation-delay: 1s;
}

.delay-time12{
animation-delay: 1.2s;
}

.delayttl{
  top: 0;
  left: 0px;
  z-index: 100;
}

/*====== SCROLL DOWN =======*/

/*スクロールダウン全体の場所*/
.scrolldown1{
    position:fixed;
    right: 4%;
    bottom: 0;
    /*全体の高さ*/
    height:80px;
    z-index: 1;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
    transform: rotate(90deg);
    text-transform: uppercase;
    position: absolute;
    left:-20px;
    top: -35px;
    /*テキストの形状*/
    color: #357A95;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

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

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


/*====== PAGE TOP =======*/

/*リンクを右下に固定*/
#page-top {
position: fixed;
right: 1%;
z-index: 10;
    /*はじめは非表示*/
opacity: 0;
/*transform: translateY(100px);*/
}

/*リンクの形状*/
#page-top a{
  position:absolute;
  right: 0%;
    /*全体の高さ*/
  height:20px;
  transform: rotate(90deg);
  text-transform: uppercase;
  position: absolute;
  left:-86px;
  top: 150px;
    /*テキストの形状*/
  color: #42BCEB;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}


#page-top a:hover{
/*background: #777;*/
opacity: 0.5;
}

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

/*pagetopupテキストの描写*/
.pagetopup span{
    /*描画位置*/
  transform: rotate(90deg);
  text-transform: uppercase;
  position: absolute;
    /*テキストの形状*/
  color: #42BCEB;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

/* 線の描写 */
.pagetopup::before{
  content: "";
    /*描画位置*/
  position: absolute;
    /*線の形状*/
  width: 1px;
  height: 60px;
  right: 42px;
  background: #42BCEB;
    /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pagetopline 2s ease-in-out infinite;
  opacity:0;
}

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


/*　上に上がる動き　*/

#page-top.UpMove{
animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
/*transform: translateY(100px);*/
  }
  to {
    opacity: 1;
/*transform: translateY(0);*/
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  opacity: 1;
/*transform: translateY(0);*/
  }
  to {
  opacity: 0;
/*transform: translateY(100px);*/
  }
}



/* TOPページ動きのある設定用ここまで*******************************/