@charset "utf-8";
header{
    background-color: #5a5a5a;
}
.top-news{
    opacity: 0;
}
.top-works{
    opacity: 0;
}
.top-message__inner > div{
    opacity: 0;
}
.building-detail__grid-item{
    opacity: 0;
}
.building-section{
    opacity: 0;
}
.main-visual{
    opacity: 0;
}
.main-visual .main-visual__text{
    opacity: 0;
}
.origin-section > div{
    opacity: 0;
}
.company-profile-section > div{
    opacity: 0;
}
.staff-card{
    opacity: 0;
}
.privacy__content{
    opacity: 0;
}
.footer__logo{
    opacity: 0;
}
.footer__nav{
    opacity: 0;
}
.footer__icon a{
    opacity: 0;
}


.top-works__item{
    overflow: hidden;

}
.top-works__item a{
    transition: opacity .3s ease-out;
}
.top-works__item a img{
    transition: transform .3s ease-out;
}
.top-works__item a:hover{
    opacity: 1;
}
.top-works__item a:hover img{
    transform: scale(1.1);
}


.building-section__works a{
    overflow: hidden;
    transition: opacity .3s ease-out;
}
.building-section__works a img{
    transition: transform .3s ease-out;
}
.building-section__works a:hover{
    opacity: 0.8;
}
.building-section__works a:hover img{
    transform: scale(1.1);
}



/* その場で */
.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:1s;
animation-fill-mode:forwards;
opacity:0;
}

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

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


.fadeUpx2{
animation-name:fadeUpx2;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpx2{
  from {
    opacity: 0;
	transform: translateY(50px);
  }

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


.fadeUpMv{
animation-name:fadeUpMv;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpMv{
  from {
    opacity: 0;
	background-position-y:50px;
  }

  to {
    opacity: 1;
	background-position-y:0px;
  }
}

/* 上から */

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