/* //////////////////

animationのcss

///////////////////*/

/*--------------------------
メニューボタンのアニメーション
(animation.jsと連動)
---------------------------*/

.bar-translate{
    background: #fff;    
    transform: translateX(100px);
    opacity: 0;
}
.bar-rotate01{
    background: #fff;    
    top: 7px;
    width: 29px;
    transform: rotate(45deg);
}
.bar-rotate02{
    background: #fff;    
    top: 7px;
    transform: rotate(-45deg);
}
.js-slide-menu-nav{
    opacity: 1;
    visibility: visible;
    overflow-y: scroll;
    width: 100%;
}

/* タグライン */
.main-slide-in{
  opacity: 1;
  transform: translate( 0, 0);
  transition: 1s;
}
.sub-slide-in{
  opacity: 1;
  transform: translate( 0, 0);
  transition: 1s .5s;
}

/*--------------------------
スクロールダウン
---------------------------*/
@keyframes scroll-down{
    0% {
        transform: translateY(-38px);
    }
    50%, 100% {
        transform: translateY(0px);
        /* height: 0; */
    }
}


/* 画像のスライド */

  /* マスク要素をスライドアウトする */
  @keyframes play {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes maskOut {
    0% {
      transform: translateX(0%);
    }
    
    100% {
      transform: translateX(100%);
    }
  }
.isBox-mask {
    animation: play .5s ease-in-out forwards;
    animation-timing-function: cubic-bezier(.8,0,.5,1);
    position: relative;
    opacity: 1 !important;
  }
  
  /* isPlayの疑似要素にマスクとマスクを外すアニメーションを設定  */
  .isBox-mask:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    height: 100%;
    background: var(--blue);
  }
  .isBox-mask:after {
    animation:maskOut .5s ease-in-out forwards .5s;
    content: '';
    position: absolute;
    top: 0;
    right: -1%;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: var(--blue);
  }

.slide-in{
    opacity: 0;
    transform: translate( -10px, 0);
    transition: 1s;
}
.isSlide-in{
    opacity: 1;
    transform: translate( 0, 0);
}
.slide-up{
    opacity: 0;
    transform: translate(0, 10px);
    transition: 1s;
}
.isSlide-up{
    opacity: 1;
    transform: translate(0,0);
}
@keyframes note-fadein{
  0%{
    opacity: 1;
  }
  50%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
.note-fadein{
  animation: note-fadein 1s;
}


/* ホバーアニメーションのCSS */
@media only screen and (min-width: 960px){
  .gnav-hover-link:hover{
    transition: .25s;
    color: var(--blue);
  }
  .gnav-hover-btn:hover{
    transition: .25s;
    opacity: 0.7;
  }
  .hover-b-btn:hover{
    transition: .25s;
    background: #fff ;
    color: var(--blue);
  }
  .hover-w-btn:hover{
    transition: .25s;
    background: var(--blue);
    color: #fff;
  }
  .service-sec-btn:hover::before,
  .service-sec-btn:hover::after{
      background: #fff;
  }
  .works-sec-btn:hover::before,
  .works-sec-btn:hover::after{
      background: var(--blue);
  }
  .blog-sec-btn:hover::before,
  .blog-sec-btn:hover::after{
      background: #fff;
  }
  .contact-sec-btn:hover::before,
  .contact-sec-btn:hover::after{
      background: #fff;
  }
  
  .service-btn:hover::before,
  .service-btn:hover::after{
      background: var(--blue);
  }
  
  .hover-note-link:hover{
    transition: .25s;
    opacity: 0.95;
  }
  .hover-news-link:hover{
    transition: .25s;
    opacity: 0.5;
  }
  .hover-l-btn:hover{
    transition: .25s;
    opacity: 0.9;
  }
  .fnav-hover-link:hover{
    transition: .25s;
    opacity: 0.8;
  }
  .news-entry:hover{
    opacity: 0.7;
  }
  .wp-pagenavi a:hover{
    opacity: 0.7;
    background: #C4C4C4;
  }

}