@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;
}

/* **************************************************************** */
/* OS 側で「視差効果を減らす」が有効なときはアニメーションを止める
   （前庭障害のあるユーザー向け。WCAG 2.3.3）
*/
@media (prefers-reduced-motion: reduce) {
    .slide-up-out,
    .slide-up-in,
    .slide-down-out,
    .slide-left-out,
    .slide-right-out,
    .slide-bar-out,
    .show-out {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}