/*--エフェクト--*/
figure {
position: relative;
overflow: hidden;
width:100%;
padding:0;
margin:0;
display:inline-block;
}
figcaption {
position:absolute;
top:0;
left:-100%;
z-index:2;
width:100%;
height:100%;
background:rgba(0,0,0,.6);
-webkit-transition: .3s;
transition:.3s;
opacity:1;
padding:0;
margin:0;
display:inline-block;
}
figure:hover figcaption {
top:0;
left:0;
padding:0;
margin:0;
display:inline-block;
}
/*回転とzoom effect*/
.rotate {overflow:hidden;}
.rotate img {-webkit-transition: 0.2s ease; transition: 0.2s ease;} /*--rotateとzoom共通--*/
.rotate img:hover {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
.zoom-2 img {-webkit-transition: 0.2s ease; transition: 0.2s ease;} /*--rotateとzoom共通--*/
.zoom-2 img:hover {-webkit-transform:scale(1.2); transform:scale(1.2);}
.rotate-y:hover img {-webkit-transform:rotatey(360deg); transform:rotatey(360deg);}
.rotate-y img, .rotate-y:hover img {-webkit-transition: 0.6s ease; transition: 0.6s ease;}


/*ecアニメーションcss animation(prefixes are cut)*/
.appear {transform-origin:center top; animation:show 0.5s both;}
span.appear {display:inline-block;}
.d1 {animation-delay:1.0s;}
.d2 {animation-delay:2.0s;}
.d3 {animation-delay:2.5s;}
@keyframes show {
0% {transform:translate(0,2em); opacity:0; text-shadow:0 0 1.0em #fff;}
50% {text-shadow:0 0 3.0em #fff;}
100% {transform:translate(0,0); opacity:1;}
}

/*effect*/
.delighter.splash {
transition: all 2s ease-out;
}
.delighter.splash.ended {
background: #fff;
}
.delighter.right { transform:translate(-100%); opacity:0; transition: all .75s ease-out; }
.delighter.right.started { transform:none; opacity:1; }

.delighter.left { transform:translate(100%); opacity:0; transition: all .75s ease-out; }
.delighter.left.started { transform:none; opacity:1; }

.delighter.bottom { transform:translatey(300%); opacity:0; transition: all .75s ease-out; }
.delighter.bottom.started { transform:none; opacity:1; }

.delighter div { opacity: 0; transform: translatey(400%); transition: all .7s ease-out; }
.delighter.started div{ opacity: 1; transform: none; }
.delighter.started div:nth-child(n+1) { transition: all .7s ease-out .1s; }

.delighter p { opacity: 0; transform: translatey(400%); transition: all .7s ease-out; }
.delighter.started p{ opacity: 1; transform: none; }
.delighter.started p:nth-child(n+1) { transition: all .7s ease-out .1s; }

.delighter li { opacity: 0; transform: translatey(400%); transition: all .7s ease-out; }
.delighter.started li{ opacity: 1; transform: none; }
.delighter.started li:nth-child(n+1) { transition: all .7s ease-out .1s; }

.delighter pre {
display: block;
transition: all 2s ease-out;
opacity: 0;
padding: 20px 0;
width: 1px; overflow: hidden;
}
.delighter.started pre {max-width: 99999px; width: 100%; opacity: 1;}
.delighter .box { transition: all 1s ease-out; }
.delighter .box:nth-child(1) { transform: translate(-100%, 0); }
.delighter .box:nth-child(2) { transform: translate(170%, -70%); }
.delighter .box:nth-child(3) { transform: translate(20%, 0%); }

.delighter.started .box:nth-child(1) { transform: translate(0, 0); }
.delighter.started .box:nth-child(2) { transform: translate(70%, -70%); }
.delighter.started .box:nth-child(3) { transform: translate(20%, -120%); }