@charset "utf-8";








.slide-up-out {
  opacity: 0;
  -webkit-transform: translate(0, 60px);
          transform: translate(0, 60px);
  -webkit-transition: opacity .6s ease-in-out, -webkit-transform .6s ease-in-out;
  transition: opacity .6s ease-in-out, -webkit-transform .6s ease-in-out;
  transition: opacity .6s ease-in-out, transform .6s ease-in-out;
  transition: opacity .6s ease-in-out, transform .6s ease-in-out, -webkit-transform .6s ease-in-out;
}

.slide-up-in {
  opacity: 1.0;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.slide-left-out {
  opacity: 0;
  -webkit-transform: translate(-60px, 0);
          transform: translate(-60px, 0);
  -webkit-transition: opacity .6s ease-in-out, -webkit-transform .6s ease-in-out;
  transition: opacity .6s ease-in-out, -webkit-transform .6s ease-in-out;
  transition: opacity .6s ease-in-out, transform .6s ease-in-out;
  transition: opacity .6s ease-in-out, transform .6s ease-in-out, -webkit-transform .6s ease-in-out;
}

.slide-left-in {
  opacity: 1.0;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.slide-right-out {
  opacity: 0;
  -webkit-transform: translate(60px, 0);
          transform: translate(60px, 0);
  -webkit-transition: opacity .6s ease-in-out, -webkit-transform .6s ease-in-out;
  transition: opacity .6s ease-in-out, -webkit-transform .6s ease-in-out;
  transition: opacity .6s ease-in-out, transform .6s ease-in-out;
  transition: opacity .6s ease-in-out, transform .6s ease-in-out, -webkit-transform .6s ease-in-out;
}

.slide-right-in {
  opacity: 1.0;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}





.slide-bar-out {
		-webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition: -webkit-transform .4s ease-in-out 0s;
    transition: -webkit-transform .4s ease-in-out 0s;
    transition: transform .4s ease-in-out 0s;
    transition: transform .4s ease-in-out 0s, -webkit-transform .4s ease-in-out 0s;
}
.slide-bar-in {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);		
		-webkit-transition-delay: .8s;
						transition-delay: .8s;			
}





.show-out {
	
-webkit-transform: scale(1.2);
    transform: scale(1.2);
	
		-webkit-transition: -webkit-transform .4s linear 0s;
    transition: -webkit-transform .4s linear 0s;
    transition: transform .4s linear 0s;
    transition: transform .4s linear 0s, -webkit-transform .4s linear 0s;
}
.show-in {

		-webkit-transform: scale(1);
				transform: scale(1);
		
}



.anime-delay-1 {
  -webkit-transition-delay: 0s;
  /* transition-delay: 0s; */
}
.anime-delay-2 {
  -webkit-transition-delay: .2s;
          transition-delay: .2s;
}
.anime-delay-3 {
  -webkit-transition-delay: .4s;
          transition-delay: .4s;
}
.anime-delay-4 {
  -webkit-transition-delay: .6s;
          transition-delay: .6s;
}
.anime-delay-5 {
  -webkit-transition-delay: .8s;
          transition-delay: .8s;
}
.anime-delay-6 {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
.anime-delay-7 {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}
.anime-delay-8 {
  -webkit-transition-delay: 1.4s;
          transition-delay: 1.4s;
}
.anime-delay-9 {
  -webkit-transition-delay: 1.6s;
          transition-delay: 1.6s;
}
.anime-delay-10 {
  -webkit-transition-delay: 1.8s;
          transition-delay: 1.8s;
}

.anime-delay-11 {
  -webkit-transition-delay: 2.0s;
          transition-delay: 2.0s;
}
.anime-delay-12 {
  -webkit-transition-delay: 2.2s;
          transition-delay: 2.2s;
}
.anime-delay-13 {
  -webkit-transition-delay: 2.4s;
          transition-delay: 2.4s;
}
.anime-delay-14 {
  -webkit-transition-delay: 2.6s;
          transition-delay: 2.6s;
}
.anime-delay-15 {
  -webkit-transition-delay: 2.8s;
          transition-delay: 2.8s;
}














.blinking{
  -webkit-animation:blink 1s ease-in-out infinite alternate;
  -moz-animation:blink 1s ease-in-out infinite alternate;
  animation:blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{0% {opacity:0;}100% {opacity:1;}}
@-moz-keyframes blink{0% {opacity:0;}100% {opacity:1;}}
@keyframes blink{0% {opacity:0;}100% {opacity:1;}}

/* ボタンのアニメーション */
.animation {
  visibility: visible !important;
  animation-fill-mode: both !important;
  -webkit-animation-fill-mode: both !important;
}
.replay {
  -webkit-animation-iteration-count: infinite !important;
  animation-iteration-count: infinite !important;
}

/*bounce-in*/
.bounce-in {
  -webkit-animation: bounce-in 1.8s;
          animation: bounce-in 1.8s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
@keyframes bounce-in {
  0%  {transform: scale(1);opacity: 1;}
  25% {transform: scale(1.1);}
  40% {transform: scale(.8);}
  50% {transform: scale(1.1);}
  60% {transform: scale(.9);}
  70% {transform: scale(1.05);opacity: 1;}
  80% {transform: scale(.95);}
  90% {transform: scale(1.01);}
  100%{transform: scale(1);}
}
@-webkit-keyframes bounce-in {
  0%  {transform: scale(1);opacity: 1;}
  25% {transform: scale(1.1);}
  40% {transform: scale(.8);}
  50% {transform: scale(1.1);}
  60% {transform: scale(.9);}
  70% {transform: scale(1.05);opacity: 1;}
  80% {transform: scale(.95);}
  90% {transform: scale(1.01);}
  100%{transform: scale(1);}
}




.shiny-btn1 {
  position: relative;
  overflow: hidden;
}
.shiny-btn1::before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: shiny-btn1 4s ease-in-out infinite;
}
@-webkit-keyframes shiny-btn1 {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}