/* REVEAL */
/* revealContentを最初は消しておく */
.revealContent {
    opacity: 0;
}

/* revealActiveクラスが追加されて.3s後に表示する */
.revealActive .revealContent {
    -webkit-transition-delay: .3s;
         -o-transition-delay: .3s;
            transition-delay: .3s;
    opacity: 1;
}

.revealItem {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

/* before擬似要素の黒いblockにanimationをつけておく */
.revealItem.revealActive::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--GRAY);
    z-index: 10;}


 
 .revealItem.lr.revealActive::before {
	 -webkit-animation: hideFromLeft .3s forwards, showFromLeft .3s forwards .3s;
            animation: hideFromLeft .3s forwards, showFromLeft .3s forwards .3s;}

 .revealItem.rl.revealActive::before {
	 -webkit-animation: hideFromRight .3s forwards, showFromRight .3s forwards .3s;
            animation: hideFromRight .3s forwards, showFromRight .3s forwards .3s;}

.revealItem.d-blue.revealActive::before {background: var(--D-GRAY);}




/* before擬似要素を左から右にスライドイン */
@-webkit-keyframes hideFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}
@keyframes hideFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}

/* before擬似要素を右から左にスライドイン */
@-webkit-keyframes hideFromRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0%);
    }
}

@keyframes hideFromRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0%);
    }
}



/* before擬似要素を左から右にスライドアウト */
@-webkit-keyframes showFromLeft {
    0% {
        -webkit-transform: translateX(0%);
                transform: translateX(0%);
    }
    100% {
        -webkit-transform: translateX(102%);
                transform: translateX(102%);
    }
}

@keyframes showFromLeft {
    0% {
        -webkit-transform: translateX(0%);
                transform: translateX(0%);
    }
    100% {
        -webkit-transform: translateX(102%);
                transform: translateX(102%);
    }
}



/* before擬似要素を右から左にスライドアウト */
@-webkit-keyframes showFromRight {
    0% {
        -webkit-transform: translateX(0%);
                transform: translateX(0%);
    }
    100% {
        -webkit-transform: translateX(-102%);
                transform: translateX(-102%);
    }
}

@keyframes showFromRight {
    0% {
        -webkit-transform: translateX(0%);
                transform: translateX(0%);
    }
    100% {
        -webkit-transform: translateX(-102%);
                transform: translateX(-102%);
    }
}



/* 画像を使うときはvertical-align bottomをしないと下に余白ができてしまうので注意！！ */
.revealImg {
    width: 300px;
    height: 200px;
    -o-object-fit: cover;
       object-fit: cover;
    vertical-align: bottom;
}