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



/* ------------- フェードイン ------------- */

.fadein{
  -webkit-transition: all 2s linear;
  -o-transition: all 2s linear;
  transition: all 2s linear;
  opacity: 0;
}
.fadein.active{
  opacity: 1;
}

.fadein_ver02 {
  transform: scale(1.2) rotate(0deg);
  margin-top: 100px;
  opacity: 0;
  /*transition: all 2.3s;*/
  transition: 1s cubic-bezier(0.77, 0, 0.175, 1); /* easeOutSine */
}

.fadein_ver02.active {
  transform: scale(1) rotate(0deg);
  margin-top: 0;
  opacity: 1;
}


/* ------------- 左からフェードイン ------------- */

.fadein-left{
opacity: 0;
}
.fadein-left.active{
	  animation: fadein-left 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes fadein-left {
	
  0% {
  -webkit-transform: translateX(-200px);
  -moz-transform: translateX(-200px);
  -ms-transform: translateX(-200px);
  transform: translateX(-200px);
  opacity: 0;}
	
  100% {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  }
}

/* ------------- 右からフェードイン ------------- */
.fadein-right{
opacity: 0;
}
.fadein-right.active{
	  animation: fadein-right 0.7s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes fadein-right {
	
  0% {
  -webkit-transform: translateX(200px);
  -moz-transform: translateX(200px);
  -ms-transform: translateX(200px);
  transform: translateX(200px);
  opacity: 0;}
	
  100% {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  }
}



/* ------------- 下からフェードイン ------------- */
.bottom-fadein{
  opacity: 0;
}
.bottom-fadein.active {
  animation: b-fadein 1s both; 
}

@keyframes b-fadein {
from {
    opacity: 0;
    transform: translateY(150px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}




/* ------------- ぼんやりフェードイン ------------- */

.blur-fadein{
    text-align: center;
    color: transparent;
}
.blur-fadein.active{
    animation: blurFadeIn 2.0s ease-in forwards;
}
@keyframes blurFadeIn {
    0% {
        opacity: 0;
        text-shadow: #000 1px 0px 20px ;
    }
    50% {
        opacity: 0.5;
        text-shadow: #000 1px 0px 10px ;
    }
    100% {
        opacity: 1;
        text-shadow: #000 0px 0px 0px ;
    }
}
	
/* ------------- 上から徐々に ------------- */


.roll-top{
  overflow: hidden;
  position: relative;
}

.roll-top:before {
  background:#d00f33;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

.roll-top.active:before {
  animation: roll-top 1.3s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  
}

@keyframes roll-top {
  100% {
    transform: translateY(100%);
  }
}

/* ------------- 下から徐々に ------------- */


.roll-bottom{
  overflow: hidden;
  position: relative;
}

.roll-bottom:before {
  background:#fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

.roll-bottom.active:before {
  animation: roll-bottom 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  
}

@keyframes roll-bottom {
  100% {
    transform: translateY(-100%);
  }
}

/* ------------- 右から徐々に ------------- */


.roll-right{
  overflow: hidden;
  position: relative;
}

.roll-right:before {
	background:#002171;
	bottom: 0;
	content: '';
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 0;
}

.roll-right.active:before {
  animation: roll-right 1.3s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  
}

@keyframes roll-right {
  100% {
    transform: translateX(100%);
  }
}

/* ------------- ↓以下activeなしアニメーション↓ ------------- */


/* ------------- フェードイン ------------- */

.fadein_ver02_start{
	animation: fadein_ver02_start 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}


@keyframes fadein_ver02_start {
	
  0% {
  transform: scale(1.4) rotate(0deg);
  opacity: 0;
}
	
  100% {
  transform: scale(1) rotate(0deg);
  margin-top: 0;
  opacity: 1;
  }
}

/* ------------- 左からフェードイン ------------- */

.fadein-left_start{
opacity: 0;
}
.fadein-left_start{
	  animation: fadein-left_start 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes fadein-left_start {
	
  0% {
  -webkit-transform: translateX(-200px);
  -moz-transform: translateX(-200px);
  -ms-transform: translateX(-200px);
  transform: translateX(-200px);
  opacity: 0;}
	
  100% {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  }
}