@charset "utf-8";
/* CSS Document */


/* =====================
   worksページ専用スタイル
===================== */ 

@keyframes floating-Y30 {
  0% {   transform: translateY( 30px); opacity: 0;}
  100% { transform: translateY( 0%); opacity: 1;}
}

@keyframes floating-Y100 {
  0% {   transform: translateY( 100%); opacity: 1;}
  100% { transform: translateY( 0%);   opacity: 1;}
}

@keyframes floating-X30 {
  0% {   transform: translateX( 30px); opacity: 0;}
  100% { transform: translateX( 0%); opacity: 1;}
}


@keyframes zoom {
  0% {   transform: scale( 0%); opacity: 0;}
  50% {  transform: scale( 110%); opacity: 1;}
  60% {  transform: scale( 100%); opacity: 1;}
  80% {  transform: scale( 90%); opacity: 1;}
  100% { transform: scale( 100%); opacity: 1;}
}

@keyframes bgiLoop {
  0% {   background-position: 0 0;}
  100% { background-position: 49px 0px;}
}

@keyframes arrowLoop {
  0% {   transform: translateY( -10px); opacity: 0.0;}
  50% {  transform: translateY(   0px); opacity: 1.0;}
  100% { transform: translateY(  10px); opacity: 0.0;}
}



/*PC_px*/
/*@media screen and (min-width: 1680px) {}*/



/*PC*/
@media print, screen and (min-width: 768px) {


.sec01 {}

.sec01 h2 { overflow: hidden;}
.sec01 h2 span { display: block; opacity: 0;}
.sec01 h2.is-active span { animation: floating-Y100 1.0s ease 0.0s forwards; overflow: inherit;}

.sec01 .works-list {}
.sec01 .works-list .card { opacity: 0; overflow: hidden;}
.sec01 .works-list .card.is-active:nth-child(2n+1) { animation: floating-Y30 0.5s ease 0.5s forwards; overflow: inherit;}
.sec01 .works-list .card.is-active:nth-child(2n+2) { animation: floating-Y30 0.5s ease 0.8s forwards; overflow: inherit;}


}



/*sp*/
@media only screen and (max-width: 767px) {


.sec01 {}

.sec01 h2 { overflow: hidden;}
.sec01 h2 span { display: block; opacity: 0;}
.sec01 h2.is-active span { animation: floating-Y100 1.0s ease 0.0s forwards; overflow: inherit;}

.sec01 .works-list {}
.sec01 .works-list .card { opacity: 0; overflow: hidden;}
.sec01 .works-list .card.is-active { animation: floating-Y30 0.5s ease 0.5s forwards; overflow: inherit;}


}