/*////// animation //////*/
/* .anime{
  animation-play-state: paused;
} */

.fd,.fdb,.fdl,.fdr,.fdu,.mnt_fdb{
  opacity:0;
}
/* アニメーションクラス */
.fade-in {
	-webkit-animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-in-bottom {
	-webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    /* opacity: 0; */
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    /* opacity: 0; */
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

.mnt_fade-in-bottom {
	-webkit-animation: mnt_fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: mnt_fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes mnt_fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px) translateX(-50%);
            transform: translateY(50px) translateX(-50%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) translateX(-50%);
            transform: translateY(0) translateX(-50%);
    opacity: 1;
  }
}
@keyframes mnt_fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px) translateX(-50%);
            transform: translateY(50px) translateX(-50%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) translateX(-50%);
            transform: translateY(0) translateX(-50%);
    opacity: 1;
  }
}

.fade-in-up {
	-webkit-animation: fade-in-up 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-up 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in-up {
  0% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    /* opacity: 0; */
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-up {
  0% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    /* opacity: 0; */
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

.fade-in-left {
	-webkit-animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in-left {
  0% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-left {
  0% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
.fade-in-right {
	-webkit-animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
.flip {
	-webkit-animation: flip 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: flip 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@keyframes flip{
	0%{
		opacity:0;
		transform: rotateY(0deg);
	}
	50%{
		opacity:.4;
		transform: rotateY(180deg);
	}
	100%{
		opacity: 1;
		transform: rotateY(360deg);
	}
}
@-webkit-keyframes flip{
	0%{
		opacity:0;
		transform: rotateY(0deg);
	}
	50%{
		opacity:.4;
		transform: rotateY(180deg);
	}
	100%{
		opacity: 1;
		transform: rotateY(360deg);
	}
}
/*////////////////////////////////////////*/

.swipsheet{
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height: calc(100% + 2px);
  background:white;
  display:block !important;
  visibility: visible !important;
  z-index: 60;
  margin-top:-1px;
}
.swip{
  animation: 1s .3s swipRight ;
  animation-timing-function: var(--easeOutQuart);
  animation-fill-mode:  forwards;
}
@keyframes swipRight {
  0%{
    transform:translateX(0) ;

  }
  100%{
    transform:translateX(100%);

  }
}