@charset "utf-8";

.left{
  transform: translateX(-60px);
	opacity: 0;
	transition: opacity 1s, transform 2s;

}
.left-fadein {
  opacity: 1;
  transform: translateX(0);
}


.right{

  transform: translate(60px, 0);
  opacity: 0;
  transition: opacity 1s, transform 2s;
}
.right-fadein {
  opacity: 1;
  transform: translate(0, 0);
}

/* company */
/*==================================================
スーッ
===================================*/

/*枠線が伸びて出現*/
main .line{
  position: relative; /* 枠線が書かれる基点*/
}

/*上下線*/
main .line::before,
main .line::after{
  position: absolute;
  content:"";
  width:0;
  height:1px;
  background:#333;/* 枠線の色*/
}

/*左右線*/
main .line2::before,
main .line2::after{
  position: absolute;
  content:"";
  width: 1px;
  height:0;
  background:#333;/* 枠線の色*/
}

/*上線*/
main .line::before {
  top:0;
  left:0;
  animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
main .line2::before{ 
  top:0;
  right:0;
  animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
main .line::after { 
  bottom:0;
  right:0;
  animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
main .line2::after{ 
  bottom:0;
  left:0;
  animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
  0% {width:0%;}
    100%{width:100%;}
}

@keyframes lineAnime2 {
  0% {height:0%;}
    100%{height:100%;}
}

/*枠線内側の要素*/
main .line main .lineinappear{
  animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0;/*初期値を透過0にする*/ 
}

@keyframes lineInnerAnime{
  0% {opacity:0;}
    100% {opacity:1;}
}


/*========= レイアウトのためのCSS ===============*/

main .line{
  width: 220px;
  padding: 20px;
  margin:0 20px 20px 20px;
  box-sizing:border-box;
}
.fadeUpX {
    animation-name:fadeUpXAnime;
    animation-duration: 1s;
    animation-fill-mode:forwards;
    opacity: 0;
    }
    @keyframes fadeUpXAnime{
      from {
        opacity: 0;
      transform: translateX(80px);
      }
      to {
        opacity: 1;
      transform: translateX(0);
      }
    }
    /* アニメーションスタートの遅延時間を決めるCSS*/
    .delay-time02{
    animation-delay: 0.5s;
    }
    .delay-time04{
    animation-delay: 1s;
    }

/*========= くるくる回るテキスト ===============*/

.rollAnime.roll span {
    transition-property: opacity,transform;
    transform: rotateY(360deg);
    transition: all .8s cubic-bezier(.77,0,.175,1);
    transition-timing-function: cubic-bezier(.77,0,.175,1);
    display: inline-block;
}
  @keyframes blurAnime{
    from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;

    }
  
    to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;

    }
  }
   
  .blurTrigger{
      opacity: 0;
  }

  .box{
    opacity: 0;
  }
  
  /*==================================================
  ふわっ
  ===================================*/
.fadeUp{
  opacity: 0;
}

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

/*==================================================
ボンッ
===================================*/

/* 拡大 */
.zoomIn{
    animation-name:zoomInAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
  }
  
  @keyframes zoomInAnime{
    from {
    transform: scale(0.6);
    }
  
    to {
        transform: scale(1);
    }
  }
  /*==================================================
じわっ
===================================*/

.blur{
    animation-name:blurAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
  }
  
  @keyframes blurAnime{
    from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
    }
  
    to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
    }
  }
   
  .blurTrigger{
      opacity: 0;
  }
/* detaile */
.slideinLeft {
  animation: slideinLeft 3s ;
  animation-fill-mode:forwards;
}

@keyframes slideinLeft {
  0% {
    transform: translateX(-100px);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.slideinRight {
  animation: slideinRight 3s ;
  animation-fill-mode:forwards;
}

@keyframes slideinRight {
  0% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}