@charset "utf-8";
/*---スクロールアニメーション---*/
/* ズームイン */
.zoomIn{
  animation-name:zoomInAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}
@keyframes zoomInAnime{
  from {
  transform: scale(0.6);
  opacity: 0;
  }

  to {
    transform: scale(1);
  opacity: 1;
  }
}
/* ふわっと */
.fadeIn{
    animation-name:fadeInAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* じわっと */
.blur{
	animation-name:blurAnime;
	animation-duration:1s;
	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;
}
/* 文字が左から右へ */
.slide-in {
	overflow: hidden;
    display: inline-block;
}
.slide-in_inner {
	display: inline-block;
}
/*左右のアニメーション*/
.leftAnime{
    opacity: 0;
}
.slideAnimeLeftRight {
	animation-name: slideTextX100;
	animation-duration: 1s;
	animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes slideTextX100 {
  from {
	transform: translateX(-100%);
        opacity: 0;
  }
  to {
	transform: translateX(0);
    opacity: 1;
  }
}
.slideAnimeRightLeft {
	animation-name: slideTextX-100;
	animation-duration: 1s;
	animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes slideTextX-100 {
  from {
	transform: translateX(100%);
    opacity: 0;
  }
  to {
	transform: translateX(0);
    opacity: 1;
  }
}
/*---br---*/
.br-sp,
.br-sp450{
    display: none;
}
@media screen and (max-width: 540px) {
    .br-sp{
        display: block;
    }
}
@media screen and (max-width: 450px) {
    .br-sp450{
        display: block;
    }
}