@charset "UTF-8";
/* CSS Animation */
/*マウスオーバー時に画像を拡大・縮小*/
.img_mouseover_big {
overflow: hidden;
width: 100%;
height: 100%;
}
.img_mouseover_big img {
display: block;
transition-duration: 0.5s;
overflow: hidden;
}
.img_mouseover_big:hover img{
transform: scale(1.2,1.2);
transition-duration: 0.5s;
}

/* 上からフェードイン */
.slide-top {
	opacity: 0;
	transform: translate(0, -20px);
	transition: all 1s ease-out;
 }

/* 下からフェードイン */
.slide-bottom {
	opacity: 0;
	transform: translate(0, 20px);
	transition: all 1s ease-out;
 }

 /* 左からフェードイン */
.slide-left {
	opacity: 0;
	transform: translate(-20px, 0);
	transition: all 1s ease-out;
 }


/* 右からフェードイン */
.slide-right {
	opacity: 0;
	transform: translate(20px, 0);
	transition: all 1s ease-out;
 }


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


/* ブロックアニメーション
HTML
<div class="block_animation-1"><p>APPEAR</p></div>
*/
.block_animation-1 {
  margin: 50px 0;
  display:inline-block;
  overflow:hidden;
  position:relative;
}
.block_animation-1:after{  
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color:#F9CE00;
  animation: secondaryImageOverlayIn 0.6s 0s cubic-bezier(.77,0,.175,1),secondaryImageOverlayOut 0.6s 0.6s cubic-bezier(.77,0,.175,1);
  animation-fill-mode: both;
}
.block_animation-1 p {
  margin: 0.05em;
  line-height:1;
  color: #09194F;
  animation:fadeIn 0.1s 0.5s; 
  animation-fill-mode: both;
}
@keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
@keyframes secondaryImageOverlayIn {
    0% {
      width: 0;
    }
    100% {
      width:  100%;
    }
  }
  @keyframes secondaryImageOverlayOut {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(102%);
    }
  }