@charset "utf-8";

#top{
   background-color: #fff;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    -ms-align-items: center;
    align-items:center ;
}



@media print,screen and (min-width: 769px) {

    #top img{
        width: 100%;
    }
    #top .backarea{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;

    }

    #top .backarea .base{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url(../top/img/image.jpg);
        -webkit-background-size: cover;
        background-size:cover ;
        background-position: center center;
        transition-property: opacity;
        transition-duration: 200ms;

        opacity: 0;

    }

/*
    #top.open .backarea .base{
        transition-delay: 4000ms;
        transition-duration: 500ms;
        opacity: 1;
    }
*/


    #top .backarea .back{
        position: absolute;
        left: 50%;
        top: 50%;
        transition-property: opacity;
        transition-duration: 1000ms;
       visibility: hidden;
    }

    #top.open .backarea .back{
        visibility: visible;
    }

    #top .backarea .back div{
        position: absolute;
        left: 0;
        top: 0;
    }
    #top .backarea .back div div{
        width: 100%;
        height: 100%;
        position: relative;
        background-image: url(../top/img/image.jpg);
    }



    #top .backarea .back .canvasarea{
/*        background-color: #0f0;*/
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 1280px;
        height: 800px;
        margin-left: -640px;
        margin-top: -400px;
    }
    #top .backarea .back .canvasarea canvas{
        width: 1280px;
        height: 800px;
    }


    #top h1{
        position: absolute;
        left: 40%;
        top: 35%;
        opacity:0;
        transition-duration: 400ms;
        transition-timing-function: ease;
        transition-property:opacity;
    }

    #top.open  h1{
        opacity:1;
    }

    #top h1 .t1{
        position: relative;
        display: block;
        background-image: url(../top/img/title1.png);
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        width: calc( 100vw * 0.399 / 1.5 );
        height: calc( 100vw * 0.399 / 1.5  / 429 * 90 );
        text-indent: -9999px;
        overflow: hidden;
        opacity:0;
        transform:translateX(100px);
        transition-duration: 400ms;
        transition-timing-function: ease;
        transition-property: transform,opacity;
    }

    #top h1 .t2{
        margin-top: 2vw;
        margin-left: 4vw;
        position: relative;
        display: block;
        background-image: url(../top/img/title2.png);
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        width: calc( 100vw * 0.372 / 1.5 );
        height: calc( 100vw * 0.372 / 1.5 / 336 * 83 );
        text-indent: -9999px;
        overflow: hidden;
        opacity:0;
        transform:translateX(100px);
        transition-duration: 400ms;
        transition-timing-function: ease;
        transition-property: transform,opacity;
    }

    #top h1 .t3{
        position: relative;
        margin-top: 2vw;
        margin-left: 8vw;
        display: block;
        background-image: url(../top/img/title3.png);
        -webkit-background-size:100% 100%;
        background-size: 100% 100%;
        width: calc( 100vw * 0.588 / 1.5 );
        height: calc( 100vw * 0.588 / 1.5  / 549 * 89 );
        text-indent: -9999px;
        overflow: hidden;
        opacity:0;
        transform:translateX(100px);
        transition-duration: 400ms;
        transition-timing-function: ease;
        transition-property: transform,opacity;
    }


    #top.open  h1 .t1{
        transition-delay: 3600ms;
        opacity:1;
        transform:translateX(0px);
    }
    #top.open  h1 .t2{
        transition-delay: 3800ms;
        opacity:1;
        transform:translateX(0px);
    }
    #top.open  h1 .t3{
        transition-delay: 4000ms;
        opacity:1;
        transform:translateX(0px);
    }


    #top .obj1{
        position: absolute;
        right: 2%;
        top: 10%;
        width: 20vw;
        opacity:0;
        transition-duration: 400ms;
        transition-timing-function: linear;
        transition-property: opacity;
/*
        animation-name: rotate_right;
        animation-duration: 80000ms;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
*/
    }
    #top .obj2{
        position: absolute;
        right: 4%;
        bottom: 5%;
        width: 30vw;
        opacity:0;
        transition-duration: 400ms;
        transition-timing-function: linear;
        transition-property: opacity;
/*
        animation-name: rotate_left;
        animation-duration: 80000ms;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
*/
    }
    #top .obj3{
        position: absolute;
        left: -1%;
        top: 10%;
        width: 12vw;
        opacity:0;
        transition-duration: 400ms;
        transition-timing-function: linear;
        transition-property: opacity;
/*
        animation-name: rotate_right;
        animation-duration: 80000ms;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
*/
    }


    #top.open .obj1{
        transition-delay: 4000ms;
        opacity:1;
    }
    #top.open .obj2{
        transition-delay: 4200ms;
        opacity:1;
    }
    #top.open .obj3{
        transition-delay: 4400ms;
        opacity:1;
    }




}





@media only screen and (max-width: 768px) {

    #top{
        height: 100vh !important;
    }

    #top .backarea{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;

    }

    #top .backarea .base{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url(../top/img/image_sp.jpg);
        -webkit-background-size: cover;
        background-size:cover ;
        background-position: center center;
        transition-property: opacity;
        transition-duration: 200ms;

        opacity: 0;

    }

    #top.open .backarea .base{
/*        transition-delay: 4000ms;*/
        transition-duration: 500ms;
        opacity: 1;
    }


    #top .backarea .back{
        display: none;
    }


    #top h1{
        position: absolute;
        left: 6vw;
        top: 55%;
    }


    #top h1 .ttt{
        position: relative;
        display: block;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        text-indent: -9999px;
        overflow: hidden;
        opacity:0;
        transform:translateX(100px);
    }

    #top h1 .ttt{
        position: relative;
        display: block;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        text-indent: -9999px;
        overflow: hidden;
        opacity:0;
    }

    #top.open  h1 .ttt{
        transition-duration: 400ms;
        transition-timing-function: ease;
        transition-property: transform,opacity;
        opacity:1;
        transform:translateX(0px);
    }

    #top h1 .t1{
        background-image: url(../top/img/title1.png);
        width: calc( 100vw * 0.399 / 0.75 );
        height: calc( 100vw * 0.399 / 0.75  / 429 * 90 )
    }

    #top h1 .t2{
        margin-top: 2vw;
        margin-left: 4vw;
        background-image: url(../top/img/title2.png);
        width: calc( 100vw * 0.372 / 0.75 );
        height: calc( 100vw * 0.372 / 0.75 / 336 * 83 );
    }

    #top h1 .t3{
        margin-top: 2vw;
        margin-left: 8vw;
        background-image: url(../top/img/title3.png);
        width: calc( 100vw * 0.588 / 0.75 );
        height: calc( 100vw * 0.588 / 0.75  / 549 * 89 );
    }

    #top.open  h1 .t1{
        transition-delay: 600ms;
    }
    #top.open  h1 .t2{
        transition-delay: 800ms;
    }
    #top.open  h1 .t3{
        transition-delay: 1000ms;
    }


    #top .obj1{
        position: absolute;
        right: -10%;
        top: 20%;
        width: 50vw;
        opacity:0;
        transition-duration: 400ms;
        transition-timing-function: linear;
        transition-property: opacity;

    }
    #top .obj2{
        position: absolute;
        right: 2%;
        bottom: 2%;
        width: 60vw;
        opacity:0;
        transition-duration: 400ms;
        transition-timing-function: linear;
        transition-property: opacity;

    }
    #top .obj3{
        display: none;

    }


    #top.open .obj1{
        transition-delay: 1000ms;
        opacity:1;
    }
    #top.open .obj2{
        transition-delay: 1200ms;
        opacity:1;
    }
    #top.open .obj3{
        transition-delay: 1400ms;
        opacity:1;
    }




}