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


/*----------

背景が伸びて出現

----------*/

.bgextend{
    display: inline-block;/*幅をオブジェクトに合わせる*/
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;
	opacity:0;
    }
    @keyframes bgextendAnimeBase{
        from {
            opacity:0;
            }
        to {
            opacity:1;  
            }
        }
/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
    }
    @keyframes bgextendAnimeSecond{
        0% {
            opacity: 0;
            }
        100% {
            opacity: 1;
            }
       }

/*--------- 左から --------*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;/*伸びる背景色の設定*/
    }

    @keyframes bgLRextendAnime{
        0% {
            transform-origin:left;
            transform:scaleX(0);
            }
        50% {
            transform-origin:left;
            transform:scaleX(1);
            }
        50.001% {
            transform-origin:right;
            }
        100% {
            transform-origin:right;
            transform:scaleX(0);
            }
        }





/*■CSSの transform、opacity 、transitionの組み合わせに注意！

要素にopacity（透過）を指定し、さらにtransformやtransitionを組み合わせて変形させると、
要素の一部が消えたり意図しない挙動になることがあります。
その際は、親要素や対象の要素にbackface-visibility(三次元になった際に裏面を可視化するかどうか)
を指定すると多くの場合解決します。

＜解決方法＞

●●（要素 orクラス/ ID名）{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}*/