.visual .logomoji3 img {
        display: block;
        position: absolute;
        bottom:25px;
        right: 1%;
        animation: cloud ease-in-out 12s normal both;
        -webkit-animation: cloud ease-in-out 12s normal both;
        -moz-animation: cloud ease-in-out 12s normal both;
    }

@keyframes cloud {
    0% {
        transform: translate(0%, 0%);
        opacity: 1;
    }

    25% {
        transform: translate(-15px, 0%);
        opacity: 0;
    }

    50% {
        transform: translate(-15px, 0%);
        opacity: 0;
    }


    100% {
        transform: translate(-30px, 0%);
        opacity: 0;
    }
}

@-webkit-keyframes cloud {
    0% {
        transform: translate(0%, 0%);
        opacity: 1;
    }

    25% {
        transform: translate(-15px, 0%);
        opacity: 0;
    }

    50% {
        transform: translate(-15px, 0%);
        opacity: 0;
    }

    100% {
        transform: translate(-30px, 0%);
        opacity: 0;
    }
}

@-moz-keyframes cloud {
    0% {
        transform: translate(0%, 0%);
        opacity: 1;
    }

    25% {
        transform: translate(-15px, 0%);
        opacity: 0;
    }

    50% {
        transform: translate(-15px, 0%);
        opacity: 0;
    }

    100% {
        transform: translate(-30px, 0%);
        opacity: 0;
    }
}

    /* name,duration,timing,delay,iteration-count,direction,fill-mode,play-state
        順不同、ただしdurationとdelayは先に書いたものがduration,後に書いたものがdelay
    */

.visual .logomoji4 img {
    position: absolute;
    left: 0;
    right: 0;
    top: 130px;
    margin: auto;
    animation: cloud2 12s ease-in-out 2s both normal;
    -webkit-animation: cloud2 12s ease-in-out 2s both normal;
    -moz-animation: cloud2 12s ease-in-out 2s both normal;
}
@keyframes cloud2 {
    0% {
        transform: translate(0%, 0%);
        display: none;
        opacity: 0;
    }

    25% {
        transform: translate(0%, 0%);
        display: inline-block;
        opacity: 1;
    }

    50% {
        transform: translate(0%, 0%);

        opacity: 0;
    }

    75% {
        transform: translate(0%, 0%);
        opacity: 0;
    }

    100% {
        display: none;
        transform: translate(0%, 0%);
        opacity: 0;
    }
}

@-webkit-keyframes cloud2 {
    0% {
        transform: translate(0%, 0%);
        display: none;
        opacity: 0;
    }

    25% {
        transform: translate(0%, 0%);
        display: inline-block;
        opacity: 1;
    }

    50% {
        transform: translate(0%, 0%);
        opacity: 0;
    }

    75% {
        transform: translate(0%, 0%);
        opacity: 0;
    }

    100% {
        display: none;
        transform: translate(0%, 0%);
        opacity: 0;
    }
}

@-moz-keyframes cloud2 {
    0% {
        transform: translate(0%, 0%);
        display: none;
        opacity: 0;
    }

    25% {
        transform: translate(0%, 0%);
        display: inline-block;
        opacity: 1;
    }

    50% {
        transform: translate(0%, 0%);
        opacity: 0;
    }

    75% {
        transform: translate(0%, 0%);
        opacity: 0;
    }

    100% {
        display: none;
        transform: translate(0%, 0%);
        opacity: 0;
    }
}
.visual .logomoji6 img {
    display: block;
    position: absolute;
    bottom: 25px;
    left: 1%;
    animation: cloud3 12s ease-in-out 8s both normal;
    -webkit-animation: cloud3 12s ease-in-out 8s both normal;
    -moz-animation: cloud3 12s ease-in-out 8s both normal;
}

@keyframes cloud3 {
    0% {
        transform: translate(0%, 0%);
        display: none;
        opacity: 0;
    }

    25% {
        transform: translate(0%, 0%);
        display: inline-block;
        opacity: 1;
    }

    50% {
        transform: translate(0%, 0%);
        opacity: 0;
    }

    75% {
        transform: translate(0%, 0%);
        opacity: 0;
    }

    100% {
        display: none;
        transform: translate(0%, 0%);
        opacity: 0;
    }
}

@-webkit-keyframes cloud3 {
    0% {
        transform: translate(0%, 0%);
        display: none;
        opacity: 0;
    }

    25% {
        transform: translate(0%, 0%);
        display: inline-block;
        opacity: 1;
    }

    50% {
        transform: translate(0%, 0%);
        opacity: 0;
    }

    75% {
        transform: translate(0%, 0%);
        opacity: 0;
    }

    100% {
        display: none;
        transform: translate(0%, 0%);
        opacity: 0;
    }
}

@-moz-keyframes cloud3 {
    0% {
        transform: translate(0%, 0%);
        display: none;
        opacity: 0;
    }

    25% {
        transform: translate(0%, 0%);
        display: inline-block;
        opacity: 1;
    }

    50% {
        transform: translate(0%, 0%);
        opacity: 0;
    }

    75% {
        transform: translate(0%, 0%);
        opacity: 0;
    }

    100% {
        display: none;
        transform: translate(0%, 0%);
        opacity: 0;
    }
}

.logomoji7 {
    display: block;
    position: absolute;
    bottom: 25px;
    left: 1%;
    animation: cloud4 12s ease-in-out 14s both normal;
    -webkit-animation: cloud4 12s ease-in-out 14s both normal;
    -moz-animation: cloud4 12s ease-in-out 14s both normal;
}

@keyframes cloud4 {
    0% {
        transform: translate(0%, 0%);
        display: none;
        opacity: 0;
    }

    25% {
        transform: translate(0%, 0%);
        display: inline-block;
        opacity: 1;
    }

    50% {
        transform: translate(0%, 0%);
        opacity: 0;
    }

    75% {
        transform: translate(0%, 0%);
        opacity: 0;
    }

    100% {
        display: none;
        transform: translate(0%, 0%);
        opacity: 0;
    }
}

@-webkit-keyframes cloud4 {
    0% {
        transform: translate(0%, 0%);
        display: none;
        opacity: 0;
    }

    25% {
        transform: translate(0%, 0%);
        display: inline-block;
        opacity: 1;
    }

    50% {
        transform: translate(0%, 0%);
        opacity: 0;
    }

    75% {
        transform: translate(0%, 0%);
        opacity: 0;
    }

    100% {
        display: none;
        transform: translate(0%, 0%);
        opacity: 0;
    }
}

@-moz-keyframes cloud4 {
    0% {
        transform: translate(0%, 0%);
        display: none;
        opacity: 0;
    }

    25% {
        transform: translate(0%, 0%);
        display: inline-block;
        opacity: 1;
    }

    50% {
        transform: translate(0%, 0%);
        opacity: 0;
    }

    75% {
        transform: translate(0%, 0%);
        opacity: 0;
    }

    100% {
        display: none;
        transform: translate(0%, 0%);
        opacity: 0;
    }
}


@keyframes jump {
    0% {
        transform: translate(0,0px);
    }

    3% {
        transform: translate(0,-20px);
    }

    5% {
        transform: translate(0,0px);
    }

    6% {
        transform: translate(0,-5px);
    }

    7% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,0px);
    }
}

@-webkit-keyframes jump {
    0% {
        -webkit-transform: translate(0,0px);
    }

    3% {
        -webkit-transform: translate(0,-20px);
    }

    5% {
        -webkit-transform: translate(0,0px);
    }

    6% {
        -webkit-transform: translate(0,-5px);
    }

    7% {
        -webkit-transform: translate(0,0px);
    }

    100% {
        -webkit-transform: translate(0,0px);
    }
}


.logomoji01 {

    animation: engine 0.2s ease-in-out 20s infinite normal;
    -webkit-animation: engine 0.2s ease-in-out 20s infinite normal;
    -moz-animation: engine 0.2s ease-in-out 20s infinite normal;
}
@keyframes engine {
    0% {
        transform: scale(1.0, 1.0) translate(0%, 0%);
    }

    50% {
        transform: scale(1.0, 0.98) translate(0%, 1.5%);
    }

    100% {
        transform: scale(1.0, 1.0) translate(0%, 0%);
    }
}


.logomoji02 img {

     animation: jump 5s 22s infinite;
     -webkit-animation: jump 5s 22s infinite;
     -moz-animation: jump 5s 22s infinite;
}

.logomoji03 img {

    opacity: 0;
    animation: koton 0.5s 20s 1 forwards;
    -webkit-animation: koton 0.5s 20s 1 forwards;
    -moz-animation: koton 0.5s 20s 1 forwards;
}

@keyframes koton {
    0% {
        transform: translate(0%, -100%);
        opacity: 0;
    }

    20% {
        transform: translate(0%, 0%);
    }

    30% {
        transform: translate(0%, -10%);
    }

    50% {
        transform: translate(0%, 0%);
    }

    60% {
        transform: translate(0%, -3%);
        opacity: 1;
    }

    80% {
        transform: translate(0%, 0%);
    }

    90% {
        transform: translate(0%, -1%);
    }

    100% {
        transform: translate(0%, 0%);
        opacity: 1;
    }
}

@-webkit-keyframes koton {
    0% {
        -webkit-transform: translate(0%, -100%);
        opacity: 0;
    }

    20% {
        -webkit-transform: translate(0%, 0%);
    }

    30% {
        -webkit-transform: translate(0%, -10%);
    }

    50% {
        -webkit-transform: translate(0%, 0%);
    }

    60% {
        -webkit-transform: translate(0%, -3%);
        opacity: 1;
    }

    80% {
        -webkit-transform: translate(0%, 0%);
    }

    90% {
        -webkit-transform: translate(0%, -1%);
    }

    100% {
        -webkit-transform: translate(0%, 0%);
        opacity: 1;
    }
}

@-moz-keyframes koton {
    0% {
        -moz-transform: translate(0%, -100%);
        opacity: 0;
    }

    20% {
        -moz-transform: translate(0%, 0%);
    }

    30% {
        -moz-transform: translate(0%, -10%);
    }

    50% {
        -moz-transform: translate(0%, 0%);
    }

    60% {
        -moz-transform: translate(0%, -3%);
        opacity: 1;
    }

    80% {
        -moz-transform: translate(0%, 0%);
    }

    90% {
        -moz-transform: translate(0%, -1%);
    }

    100% {
        -moz-transform: translate(0%, 0%);
        opacity: 1;
    }
}




.main_visual {

    animation: kirikae  0.5s 19.5s 1 forwards;
    -webkit-animation: kirikae  0.5s 19.5s 1 forwards;
    -moz-animation: kirikae 0.5s 19.5s 1 forwards;
}
@keyframes kirikae {
    0% {background: #d4eef7;}

    20% {background: #d4eef7;}
    30% {background: #d4eef7;}
    50% {background: #d4eef7;}
    60% {background: #d4eef7;}
    80% {background: #d4eef7;}
    90% {background: #d4eef7;}
    100% {
        background: white;
    }
}






header nav ul {
    display: block;
    overflow: hidden;
    position: relative;
    list-style-type: none;
    padding: 0;
    width: 100%;
    text-align: center;
    letter-spacing: -6px;
}
    header nav ul li {
        display: inline-block;
        border-bottom: none;
        margin: 20px 3px;
        text-align: center;
        font-size: 20px;
        font-weight: 500;
        
        letter-spacing: normal;
        border-radius: 3px;
        
    }


        header nav ul a,
        header nav ul li a:link, header nav ul li a:visited {
            padding: 10px 15px;
            text-decoration: none;
            color: lightslategrey;
        }

        header nav ul li a:hover {
            color: #f158e0;
            
            
            
        }


header nav ul li a:active {
    color: #ffffff;
}
/* color: #c55cd3;*/


/* さわらび明朝中井良尚*/
.wf-sawarabimincho {
    font-family: "Sawarabi Mincho";
}