@charset "UTF-8";
/* CSS Document */


.img-fbox{
    overflow: hidden;
    position: relative;
}
.img-fade{
    display: block;
    opacity: 0;
    position: relative;
    transition:all .5s .3s ease; 
    z-index: 0;
}

.opa,.opa_late {
    opacity: 0;
    transition:all .9s .5s cubic-bezier(0.65, 0, 0.35, 1);
   filter: brightness(400%);
}

.opa_delay {
    opacity: 0;
    transition:all .9s .5s cubic-bezier(0.65, 0, 0.35, 1);
   filter: brightness(400%);
}


.img-fbox:before{
    background: #9ac000;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transform: translateX(-100%);
    transition:all .8s 0s ease; 
    width: 100%;
    z-index: 1;     
}
.fade {
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s 0s cubic-bezier(0.56, 0, 0.24, 1);
	    z-index: 60;  
}

.fade_delay {
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s 1s cubic-bezier(0.56, 0, 0.24, 1);
}

.besideL_R {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 1s 0s cubic-bezier(0.56, 0, 0.24, 1); 
}
        
.video-fbox{
    opacity: 0;
    transition: all .8s .1s ease;
}



/*アニメーションするプロパティを設定します*/
.img-fbox.active .img-fade {
    opacity: 1;
}
.img-fbox.active:before{
    transform: translateX(100%);        
}
 
.opa.active,.opa_late.active,.opa_delay.active {
    opacity: 1;
   filter: brightness(100%);
}

.fade.active,.fade_delay.active{
    opacity: 1;
    transform: translateY(0);
}
.besideL_R.active {
    opacity: 1;
    transform: translateX(0);
}

 .video-fbox.active{
    opacity: 1;
    transition: all .8s .5s ease;
}