@charset "utf-8";

/* ローディングしたらロゴが出て、画面が開く */

/*========= ローディング画面のためのCSS ===============*/
#splash {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999999;
    text-align: center;
}

#splash-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* fadeUpをするアイコンの動き */
.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*========= 画面遷移のためのCSS ===============*/

body {
    background: #fff;
    /*遷移アニメーションと同じ色を指定*/
}

body.appear {
    background: #fff;
    /*画面を開いた後の背景色を指定*/
}

/*画面遷移アニメーション*/
.splashbg1,
.splashbg2 {
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg1,
body.appear .splashbg2 {
    display: block;
}

/*右に消えるエリア*/
body.appear .splashbg1 {
    animation-name: PageAnime;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    content: "";
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 50%;
    transform: scaleX(1);
    background-color: #333;
    /*伸びる背景色の設定*/
}

@keyframes PageAnime {
    0% {
        transform-origin: left;
        transform: scaleX(1);
    }

    50% {
        transform-origin: right;
    }

    100% {
        transform-origin: right;
        transform: scaleX(0);
    }
}

/*左に消えるエリア*/
body.appear .splashbg2 {
    animation-name: PageAnime2;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    content: "";
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
    right: 50%;
    transform: scaleX(1);
    background-color: #333;
    /*伸びる背景色の設定*/
}

@keyframes PageAnime2 {
    0% {
        transform-origin: right;
        transform: scaleX(1);
    }

    50% {
        transform-origin: left;
    }

    100% {
        transform-origin: left;
        transform: scaleX(0);
    }
}

/*画面遷移の後現れるコンテンツ設定*/
#wrapper {
    opacity: 0;
    /*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #wrapper {
    animation-name: PageAnimeAppear;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes PageAnimeAppear {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* ▲▲▲▲▲ローディング用はここまで▲▲▲▲▲ */

/* ▼▼▼▼▼文字が光る▼▼▼▼▼ */


.glowAnime.glow span {
    animation: glow_anime_on 2.5s ease-out forwards;
}

@keyframes glow_anime_on {
    0% {
        opacity: 0;
        text-shadow: 0 0 0 #fff, 0 0 0 #fff;
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 10px #fff, 0 0 15px #fff;
    }

    100% {
        opacity: 1;
        text-shadow: 0 0 0 #fff, 0 0 0 #fff;
    }
}

/* ▲▲▲▲▲文字が光るここまで▲▲▲▲▲ */

/* ▼▼▼▼▼施工事例の写真がフワっと出てくる▼▼▼▼▼ */

/* fadeUp */

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.fadeUpTrigger {
    opacity: 0;
}