/*フェード*/
[class*='js-fade'] {
    transition: transform 0.8s, opacity 1s;
}
.js-fade,.js-fade-child > * > * > * {
    opacity: 0;
}
.js-fade-up,.js-fade-up-child > * > * > * {
    opacity: 0;
    transform: translateY(50px);
}
.js-fade-left,.js-fade-left-child > * > * > * {
    opacity: 0;
    transform: translateX(50px);
}
.js-fade-down,.js-fade-down-child > * > * > * {
    opacity: 0;
    transform: translateY(-50px);
}
.js-fade-right,.js-fade-right-child > * > * > * {
    opacity: 0;
    transform: translateX(-50px);
}
.js-fade-scalesmaller,.js-fade-scalesmaller-child > * > * > * {
    opacity: 0;
    transform: scale(1.2);
}
.js-fade-scalebigger,.js-fade-scalebigger-child > * > * > * {
    opacity: 0;
    transform: scale(0.8);
}
[class*='js-fade'].is-active,[class*='js-fade'][class*="child"] > * > * > *.is-active {
	opacity: 1;
    transform: translate(0,0);
}
.is-edit-mode[class*='js-fade'],.is-edit-mode[class*='js-fade'][class*="child"] > * > * > * {
	opacity: 1;
    transform: translate(0,0);
}
/*クリップ*/
.js-clip-up,.js-clip-up-child > * > * > *  {
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
    transition: clip-path 2s, -webkit-clip-path 2s;	    
}
.js-clip-left,.js-clip-left-child > * > * > *  {
	    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
    transition: clip-path 2s, -webkit-clip-path 2s;	    
}
.js-clip-down,.js-clip-down-child > * > * > *  {
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 2s, -webkit-clip-path 2s;	    
}
.js-clip-right,.js-clip-right-child > * > * > *  {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
}
[class*='js-clip'].is-active,[class*='js-clip'][class*="child"] > * > * > *.is-active{
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
    transition: clip-path 2s, -webkit-clip-path 2s;	    
}
/*ブラー*/
.js-blur,.js-blur-child > * > * > *   {
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);

}
.js-blur-up,.js-blur-up-child > * > * > *  {
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);    
    transform: translateY(50px);
}
.js-blur-left,.js-blur-left-child > * > * > *  {
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);    
    transform: translateX(-50px);
}
.js-blur-down,.js-blur-down-child > * > * > *  {
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);    
    transform: translateY(-50px);
}
.js-blur-right,.js-blur-right-child > * > * > *  {
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);    
	transform: translateX(50px);
}
[class*='js-blur'].is-active ,[class*='js-blur'][class*="child"] > * > * > *.is-active {
	opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
    transform: translate(0,0);	
	transition: transform 0.8s, opacity 1s ease-out .3s,filter 1s ease-out .3s,-webkit-filter 1s ease-out .3s;
}

/*点滅*/
.js-blink span{
	opacity: 0;
}
.js-blink.is-active span{
    animation: blink 1s linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.js-blink.is-active span:nth-of-type(2n){
	animation-delay: 1.2s
}
.js-blink.is-active span:nth-of-type(3n){
	animation-delay: 1.0s
}
.js-blink.is-active span:nth-of-type(4n){
	animation-delay: 0.95s
}
.js-blink.is-active span:nth-of-type(5n){
	animation-delay: 1.1s
}
.js-blink.is-active span:nth-of-type(6n){
	animation-delay: 1.25s
}
.js-blink.is-active span:nth-of-type(7n){
	animation-delay: 1.15s
}
@keyframes blink {
    0% {
        opacity: 1
    }

    3% {
        opacity: 0
    }

    9% {
        opacity: 1
    }

    15% {
        opacity: 0
    }

    22% {
        opacity: 1
    }

    26% {
        opacity: 1
    }

    33% {
        opacity: 0
    }

    47% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    53% {
        opacity: 0
    }

    75% {
        opacity: 0
    }

    76% {
        opacity: 1
    }

    77% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}