@charset "utf-8";


/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 .fadeInTrigger{
    opacity: 0;
}


/*　画像の拡大　*/
.zoomIn2 img{
	transform: scale(1);
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomIn2 a:hover img{/*hoverした時の変化*/
	transform: scale(1.33);/*拡大の値を変更したい場合はこの数値を変更*/
}

/*　画像のマスク　*/
.mask2{
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}


/*==================================================
じわっ
===================================*/

.blur{
  animation-name:blurAnime;
  animation-duration:2.0s;
  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;
}



/*==================================================
iframe用
===================================*/
  iframe.fade {
    opacity: 1;
    transition: opacity 0.3s ease;
  }

  iframe.fade.hidden {
    opacity: 0;
  }