/*回転とzoom effect*/
.rotate img {overflow:hidden;}

.zoom-2, .rotate {
-webkit-transition: 1.0s ease;
transition: 1.0s ease;
} /*--rotateとzoom共通--*/

.zoom-2 img{
-webkit-transition: 0.8s ease;
transition: 0.8s ease;
}
.zoom-2 :hover{
-webkit-transform:scale(1.1);
transform:scale(1.1);
opacity:1.0;
}

.rotate :hover{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.rotate-y :hover{
-webkit-transform:rotatey(360deg);
transform:rotatey(360deg);
}
.rotate-y img, .rotate img{
-webkit-transition: 1.6s ease;
transition: 1.6s ease;
}
/*ec-css animation (prefixes are cut)*/
.appear {top; animation:show 0.5s both;}
span.appear {display:inline-block;}
@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% {opacity:1;}
}
/*ec-css animation (prefixes are cut)*/
/*effect*/
.delighter.splash {transition: all 2s ease-out;}
.delighter.splash.ended {background: #fff;}
.delighter.right {transform:translate(-100%); opacity:0; transition: all .50s ease-out; }
.delighter.right.started { transform:none; opacity:1; }
.delighter.left {transform:translate(100%); opacity:0; transition: all .50s ease-out; }
.delighter.left.started {transform:none; opacity:1; }

.delighter.bottom { transform:translatey(300%); opacity:0; transition: all .1s ease-in; }
.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(1) {transition: all .7s ease-out .5s;}
.delighter.started div:nth-child(2) {transition: all .7s ease-out .7s;}
.delighter.started div:nth-child(3) {transition: all .7s ease-out .9s;}
.delighter.started div:nth-child(4) {transition: all .7s ease-out .11s;}
.delighter li { opacity: 0; transform: translatey(400%); transition: all .7s ease-out; }
.delighter.started li{opacity: 1; transform: none; }
.delighter.started li:nth-child(1) {transition: all .7s ease-out .1s;}
.delighter.started li:nth-child(2) {transition: all .7s ease-out .2s;}
.delighter.started li:nth-child(3) {transition: all .7s ease-out .3s;}
.delighter.started li:nth-child(4) {transition: all .7s ease-out .4s;}
.delighter p {opacity: 0; transform: translatey(400%); transition: all .7s ease-out; }
.delighter.started p{ opacity: 1; transform: none; }
.delighter.started p:nth-child(1) {transition: all .7s ease-out .2s;}
.delighter.started p:nth-child(2) {transition: all .7s ease-out .3s;}
.delighter.started p:nth-child(3) {transition: all .7s ease-out .4s;}
.delighter.started p:nth-child(4) {transition: all .7s ease-out .5s;}
.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%); }