@charset "utf-8";

/* それぞれ変化前と変化後 */

.zoom-in{
opacity: 0;
transform: scale(2, 2);
transition: .8s;
transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);
}
.zoomIn{
opacity: 1;
transform: scale(1, 1);
}

.zoom-in-inner:before,
.zoom-in-inner:after{
opacity: 0;
transform: scale(2, 2);
transition: .8s;
}
.zoomInInner:before,
.zoomInInner:after{
opacity: 1;
transform: scale(1, 1);
}


.zoom-in-light{
opacity: 0;
transform: scale(1.15, 1.15);
transition: .8s;
}
.zoomInLight{
opacity: 1;
transform: scale(1, 1);
}

.zoom-in-light-inner:before,
.zoomInLight-inner:after{
opacity: 0;
transform: scale(1.15, 1.15);
transition: .8s;
}
.zoomInLightInner:before,
.zoomInLightInner:after{
opacity: 1;
transform: scale(1, 1);
}


.zoom-up{
opacity: 0;
transform: scale(.1, .1);
transition: .8s;
}
.zoomUp{
opacity: 1;
transform: scale(1, 1);
}

.zoom-up-inner:before,
.zoom-up-inner:after{
opacity: 0;
transform: scale(.1, .1);
transition: .8s;
}
.zoomUpInner:before,
.zoomUpInner:after{
opacity: 1;
transform: scale(1, 1);
}


.zoom-up-light{
opacity: 0;
transform: scale(.8, .8);
transition: .8s;
}
.zoomUpLight{
opacity: 1;
transform: scale(1, 1);
}

.zoom-up-light-inner:before,
.zoom-up-light-inner:after{
opacity: 0;
transform: scale(.8, .8);
transition: .8s;
}
.zoomUpLightInner:before,
.zoomUpLightInner:after{
opacity: 1;
transform: scale(1, 1);
}


.slide-in-left{
opacity: 0;
transform: translate(30px, 0);
transition: .8s;
}
.slideInLeft{
opacity: 1;
transform: translate(0, 0);
transition-delay:.2s;
}

.slide-in-left-inner:before,
.slide-in-left-inner:after{
opacity: 0;
transform: translate(-100%, 0);
transition: .8s;
}
.slideInLeftInner:before,
.slideInLeftInner:after{
opacity: 1;
transform: translate(0, 0);
}

.slide-in-left-blur{
opacity: 0;
transform: translate(100px, 0);
transition: .8s;
filter:blur(10px);
}
.slideInLeftBlur{
opacity: 1;
transform: translate(0, 0);
filter:blur(0);
}



.slide-out-left{
opacity: 1;
transform: translate(0, 0);
transition: .8s;
}
.slideOutLeft{
opacity: 0;
transform: translate(-100%, 0);
}

.slide-out-left-inner:before,
.slide-out-left-inner:after{
transform: translate(0, 0);
transition: .8s;
}
.slideOutLeftInner:before,
.slideOutLeftInner:after{
transform: translate(-120%, 0);
}

.slide-out-right-inner:before,
.slide-out-right-inner:after{
transform: translate(0, 0);
transition: .8s;
}
.slideOutRightInner:before,
.slideOutRightInner:after{
transform: translate(110%, 0);
}


.slide-in-right{
opacity: 0;
transform: translate(-30px, 0);
transition: .8s;
}
.slideInRight{
opacity: 1;
transform: translate(0, 0);
transition-delay:.2s;
}

.slide-in-right-inner:before,
.slide-in-right-inner:after{
opacity: 0;
transform: translate(100%, 0);
transition: .8s;
}
.slideInRightInner:before,
.slideInRightInner:after{
opacity: 1;
transform: translate(0, 0);
}


.slide-in-top{
opacity: 0;
transform: translate(0, 30px);
transition: .8s;
}
.slideInTop{
opacity: 1;
transform: translate(0, 0);
}

.slide-in-top-inner:before,
.slide-in-top-inner:after{
opacity: 0;
transform: translate(0, 100%);
transition: .8s;
}
.slideInTopInner:before,
.slideInTopInner:after{
opacity: 1;
transform: translate(0, 0);
}


.slide-in-bottom{
opacity: 0;
transform: translate(0, -100px);
transition: .8s;
}
.slideInBottom{
opacity: 1;
transform: translate(0, 0);
transition-delay:.2s;
}

.slide-in-bottom-inner:before,
.slide-in-bottom-inner:after{
opacity: 0;
transform: translate(0, -100%);
transition: .8s;
}
.slideInBottomInner:before,
.slideInBottomInner:after{
opacity: 1;
transform: translate(0, 0);
}


.fade-in{
opacity: 0;
transition: .8s;
}
.fadeIn{
opacity: 1;
}

.fade-in-inner:before,
.fade-in-inner:after{
opacity: 0;
transition: .8s;
}
.fadeInInner:before,
.fadeInInner:after{
opacity: 1;
}


.fade-out{
opacity: 1;
transition: .8s;
}
.fadeOut{
opacity: 0;
}

.fade-out-inner:before,
.fade-out-inner:after{
opacity: 1;
transition: .8s;
}
.fadeOutInner:before,
.fadeOutInner:after{
opacity: 0;
}


.rotate-right-10deg{
transform: rotate:(-10deg);
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
opacity: 0;
transition: .8s;
}
.rotateRight10deg{
transform: rotate:(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
opacity: 1;
}

.rotate-right-20deg{
transform: rotate:(-20deg);
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
opacity: 0;
transition: .8s;
}
.rotateRight20deg{
transform: rotate:(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
opacity: 1;
}

.rotate-right-60deg{
transform: rotate:(-60deg);
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
opacity: 0;
transition: .8s;
}
.rotateRight60deg{
transform: rotate:(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
opacity: 1;
}



.before-white:before{
content: "";
display: inline-block;
background-color: #fff;
width: 100%;
height:100%;
z-index: 100;
position: absolute;
}


.before-black:before{
content: "";
display: inline-block;
background-color: #000;
width: 100%;
height:100%;
z-index: 100;
position: absolute;
}


.before-blue:before{
content: "";
display: inline-block;
background-color: #4eb5d4;
width: 100%;
height:100%;
z-index: 100;
position: absolute;
}

.before-beige:before{
content: "";
display: inline-block;
background-color: #f7f7f5;
width: 100%;
height:100%;
z-index: 100;
position: absolute;
}

.before-lightblue:before{
content: "";
display: inline-block;
background-color: #e5f4f9;
width: 100%;
height:100%;
z-index: 100;
position: absolute;
}





/* transition-delay */
.delay0,.delay0:before,.delay0:after{ transition-delay:0s;animation-delay:0; }
.delay01,.delay01:before,.delay01:after{ transition-delay:.1s;animation-delay:.1s; }
.delay02,.delay02:before,.delay02:after{ transition-delay:.2s;animation-delay:.2s; }
.delay03,.delay03:before,.delay03:after{ transition-delay:.3s;animation-delay:.2s; }

.delay04,.delay04:before,.delay04:after{ transition-delay:.4s;animation-delay:.4s; }
.delay05,.delay05:before,.delay05:after{ transition-delay:.5s;animation-delay:.5s; }
.delay06,.delay06:before,.delay06:after{ transition-delay:.6s;animation-delay:.6s; }
.delay07,.delay07:before,.delay07:after{ transition-delay:.7s;animation-delay:.7s; }
.delay08,.delay08:before,.delay08:after{ transition-delay:.8s;animation-delay:.8s; }
.delay09,.delay09:before,.delay09:after{ transition-delay:.9s;animation-delay:.9s; }
.delay1,.delay1:before,.delay1:after{ transition-delay:1s;animation-delay:1s; }
.delay12,.delay11:before,.delay11:after{ transition-delay:1.1s;animation-delay:1.1s; }
.delay12,.delay12:before,.delay12:after{ transition-delay:1.2s;animation-delay:1.2s; }
.delay13,.delay13:before,.delay13:after{ transition-delay:1.3s;animation-delay:1.3s; }
.delay14,.delay14:before,.delay14:after{ transition-delay:1.4s;animation-delay:1.4s; }
.delay15,.delay15:before,.delay15:after{ transition-delay:1.5s;animation-delay:1.5s; }
.delay16,.delay16:before,.delay16:after{ transition-delay:1.6s;animation-delay:1.6s; }
.delay17,.delay17:before,.delay17:after{ transition-delay:1.7s;animation-delay:1.7s; }
.delay18,.delay18:before,.delay18:after{ transition-delay:1.8s;animation-delay:1.8s; }
.delay19,.delay19:before,.delay19:after{ transition-delay:1.9s;animation-delay:1.9s; }
.delay2,.delay2:before,.delay2:after{ transition-delay:2s;animation-delay:2s; }
.delay21,.delay21:before,.delay21:after{ transition-delay:2.1s;animation-delay:2.1s; }
.delay22,.delay22:before,.delay22:after{ transition-delay:2.2s;animation-delay:2.2s; }
.delay23,.delay23:before,.delay23:after{ transition-delay:2.3s;animation-delay:2.3s; }
.delay24,.delay24:before,.delay24:after{ transition-delay:2.4s;animation-delay:2.4s; }
.delay25,.delay25:before,.delay25:after{ transition-delay:2.5s;animation-delay:2.5s; }
.delay26,.delay26:before,.delay26:after{ transition-delay:2.6s;animation-delay:2.6s; }
.delay27,.delay27:before,.delay27:after{ transition-delay:2.7s;animation-delay:2.7s; }
.delay28,.delay28:before,.delay28:after{ transition-delay:2.8s;animation-delay:2.8s; }
.delay29,.delay29:before,.delay29:after{ transition-delay:2.9s;animation-delay:2.9s; }
.delay3,.delay3:before,.delay3:after{ transition-delay:3s;animation-delay:3s; }
.delay32,.delay32:before,.delay32:after{ transition-delay:3.2s;animation-delay:3.2s; }
.delay34,.delay34:before,.delay34:after{ transition-delay:3.4s;animation-delay:3.4s; }
.delay36,.delay36:before,.delay36:after{ transition-delay:3.6s;animation-delay:3.6s; }
.delay38,.delay38:before,.delay38:after{ transition-delay:3.8s;animation-delay:3.8s; }
.delay4,.delay4:before,.delay4:after{ transition-delay:4s;animation-delay:4s; }
.delay42,.delay42:before,.delay42:after{ transition-delay:4.2s;animation-delay:4.2s; }
.delay44,.delay44:before,.delay44:after{ transition-delay:4.4s;animation-delay:4.4s; }
.delay46,.delay46:before,.delay46:after{ transition-delay:4.6s;animation-delay:4.6s; }
.delay48,.delay48:before,.delay48:after{ transition-delay:4.8s;animation-delay:4.8s; }
.delay5,.delay5:before,.delay5:after{ transition-delay:5s;animation-delay:5s; }


/* transition-duration */
.duration0,.duration0:before,.duration0:after{transition-duration: 0s;animation-duration: 0s;}
.duration02,.duration02:before,.duration02:after{transition-duration: .2s;animation-duration: 0.2s;}
.duration04,.duration04:before,.duration04:after{transition-duration: .4s;animation-duration: .4s;}
.duration06,.duration06:before,.duration06:after{transition-duration: .6s;animation-duration: .6s;}
.duration08,.duration08:before,.duration08:after{transition-duration: .8s;animation-duration: .8s;}
.duration1,.duration1:before,.duration1:after{transition-duration: 1s;animation-duration: 1s;}
.duration12,.duration12:before,.duration12:after{transition-duration: 1.2s;animation-duration: 1.2s;}
.duration14,.duration14:before,.duration14:after{transition-duration: 1.4s;animation-duration: 1.4s;}
.duration16,.duration16:before,.duration16:after{transition-duration: 1.6s;animation-duration: 1.6s;}
.duration18,.duration18:before,.duration18:after{transition-duration: 1.8s;animation-duration: 1.8s;}
.duration2,.duration2:before,.duration2:after{transition-duration: 2s;animation-duration: 2s;}



/* easing */
.easeInSine,.easeInSine:before,.easeInSine:after{ transition-timing-function:cubic-bezier(0.47, 0, 0.745, 0.715); }
.easeOutSine,.easeOutSine:before,.easeOutSine:after{ transition-timing-function:cubic-bezier(0.39, 0.575, 0.565, 1); }
.easeInOutSine,.easeInOutSine:before,.easeInOutSine:after{ transition-timing-function:cubic-bezier(0.445, 0.05, 0.55, 0.95); }
.easeInOutQuad,.easeInOutQuad:before,.easeInOutQuad:after{ transition-timing-function:cubic-bezier(0.455, 0.03, 0.515, 0.955); }
.easeInCubic,.easeInCubic:before,.easeInCubic:after{ transition-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.easeOutCubic,.easeOutCubic:before,.easeOutCubic:after{ transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); }
.easeInOutCubic,.easeInOutCubic:before,.easeInOutCubic:after{ transition-timing-function:cubic-bezier(0.645, 0.045, 0.355, 1); }
.easeInOutQuart,.easeInOutQuart:before,.easeInOutQuart:after{ transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1); }
.easeInOutQuint,.easeInOutQuint:before,.easeInOutQuint:after{ transition-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
.easeOutCirc,.easeOutCirc:before,.easeOutCirc:after{ transition-timing-function:cubic-bezier(0.075, 0.82, 0.165, 1); }
.easeOutExpo,.easeOutExpo:before,.easeOutExpo:after{ transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1); }
.easeInOutExpo,.easeInOutExpo:before,.easeInOutExpo:after{ transition-timing-function:cubic-bezier(1, 0, 0, 1); }
.easeInBack,.easeInBack:before,.easeInBack:after{ transition-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.easeOutBack,.easeOutBack:before,.easeOutBack:after{ transition-timing-function:cubic-bezier(0.6, -0.28, 0.735, 0.045); }
.easeInOutBack,.easeInOutBack:before,.easeInOutBack:after{ transition-timing-function:cubic-bezier(0.68, -0.55, 0.265, 1.55); }


.trans-l,.trans-l:before,.trans-l:after{transform-origin:left center;}
.trans-r,.trans-r:before,.trans-r:after{transform-origin:right center;}
.trans-t,.trans-t:before,.trans-t:after{transform-origin:center top;}
.trans-b,.trans-b:before,.trans-b:after{transform-origin:center bottom;}
.trans-tl,.trans-tl:before,.trans-tl:after{transform-origin:left top;}
.trans-tr,.trans-tr:before,.trans-tr:after{transform-origin:right top;}
.trans-bl,.trans-bl:before,.trans-bl:after{transform-origin:left top;}
.trans-br,.trans-br:before,.trans-br:after{transform-origin:right top;}





@media screen and (min-width:768px) {
}/* min-width:768px; */


@media screen and (min-width:960px) {
}/* min-width:960px; */