@charset "UTF-8";

/*===================================
ローディング/ロゴアニメーション
===================================*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 5;
    text-align: center;
}

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

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

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

/*===================================
粒子が集まってタイポグラフィーを形成
===================================*/

#wrapper {
    /*描画されるテキストを中央寄せにする*/
    background: linear-gradient(180deg, #00ddff, gold);
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

#particle {
    width: 100%;
    height: 100vh;
    vertical-align: bottom;
    /*canvasタグ下に余白が生まれるのを防ぐ*/
}

/*===================================
テキストの動き/背景色が伸びて出現（左から右）
===================================*/

/*全共通*/

.bgextend {
    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;
    }
}

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

@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);
    }
}

/*左から右(h3)*/
.bgLRextend2::before {
    animation-name: bgLRextend2Anime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #333;
    /*伸びる背景色の設定*/
}

@keyframes bgLRextend2Anime {
    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);
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger,
.bgLRextend2Trigger {
    opacity: 0;
}

/*===================================
スクロールしたらふわっ（その場で/左から/右から）
===================================*/

.fadeInTrigger,
.fadeUpTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
    opacity: 0;
}

/* その場で */
.fadeIn {
    animation-name: fadeInAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 下から */
.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);
    }
}

/* 左から */
.fadeLeft {
    animation-name: fadeLeftAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeLeftAnime {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

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

/* 右から */
.fadeRight {
    animation-name: fadeRightAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeRightAnime {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

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

/*===================================
スクロールしたらパタッ（左へ）
===================================*/

.flipLeftTrigger {
    opacity: 0;
}

.flipLeft {
    animation-name: flipLeftAnime;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    perspective-origin: left center;
    opacity: 0;
}

@keyframes flipLeftAnime {
    from {
        transform: perspective(600px) translate3d(0, 0, 0) rotateY(15deg);
        opacity: 0;
    }

    to {
        transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
        opacity: 1;
    }
}

/*===================================
背景の動き/波打つ（1つ 重なりあり）
===================================*/

.wave {
    position: relative;
    margin-top: 50px;
    height: 200px;
    /*何も表示されない場合は各波の親要素に高さを持たせましょう。*/
}

canvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}