#index .illust .obj{
    position: absolute;
    transition-property: transform,opacity;
/*    display: none;*/
}

#index .illust .obj.delay0{
    transition-delay: 0ms !important;
}

#index .illust .obj span{
    display: block;
    width: 100%;
    height: 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}



#index .illust .obj.fade.init{
   opacity:0;
}
#index .illust .obj.fade.init.open{
    opacity:1;
    transition-duration: 400ms;
    transition-timing-function: linear;
}





#index .illust .obj.zoom.init{
    transform:scale(0);
}
#index .illust .obj.zoom.init.open{
    transition-duration: 750ms;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */

    transition-property: transform;
    transform:scale(1);
}



#index .illust .obj.leftBottom.init{
    transform:translate(-100px,100px);
    opacity:0;
}
#index .illust .obj.leftBottom.init.open{
    transition-duration: 400ms;
    transition-timing-function: ease-out;
    transition-property: transform,opacity;
    transform:translate(0,0);
    opacity:1;
}


#index .illust .obj.rightBottom.init{
    transform:translate(100px,100px);
    opacity:0;
}
#index .illust .obj.rightBottom.init.open{
    transition-duration: 400ms;
    transition-timing-function: ease-out;
    transition-property: transform,opacity;
    transform:translate(0,0);
    opacity:1;
}


#index .illust .obj.leftTop.init{
    transform:translate(-100px,-100px);
    opacity:0;
}
#index .illust .obj.leftTop.init.open{
    transition-duration: 400ms;
    transition-timing-function: ease-out;
    transition-property: transform,opacity;
    transform:translate(0,0);
    opacity:1;
}


#index .illust .obj.rightTop.init{
    transform:translate(100px,-100px);
    opacity:0;
}
#index .illust .obj.rightTop.init.open{
    transition-duration: 400ms;
    transition-timing-function: ease-out;
    transition-property: transform,opacity;
    transform:translate(0,0);
    opacity:1;
}




#index .illust .obj.left.init{
    transform:translate(-100px,0px);
    opacity:0;
}
#index .illust .obj.left.init.open{
    transition-duration: 400ms;
    transition-timing-function: ease-out;
    transition-property: transform,opacity;
    transform:translate(0,0);
    opacity:1;
}

#index .illust .obj.right.init{
    transform:translate(100px,0px);
    opacity:0;
}
#index .illust .obj.right.init.open{
    transition-duration: 400ms;
    transition-timing-function: ease-out;
    transition-property: transform,opacity;
    transform:translate(0,0);
    opacity:1;
}





#index .illust .obj.top.init{
    transform:translate(0px,-100px);
    opacity:0;
}
#index .illust .obj.top.init.open{
    transition-duration: 400ms;
    transition-timing-function: ease-out;
    transition-property: transform,opacity;
    transform:translate(0,0);
    opacity:1;
}






#index .illust .obj.bottom.init{
    transform:translate(0px,100px);
    opacity:0;
}
#index .illust .obj.bottom.init.open{
    transition-duration: 400ms;
    transition-timing-function: ease-out;
    transition-property: transform,opacity;
    transform:translate(0,0);
    opacity:1;
}









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










    #index #sen{
        width: 1306px;
        height: 1306px;
        left: 6810px;
        top: 0px;
    }
    #index #sen span{
        background-image: url("../img/obj/sen.png");
    }

    #index #build{
        width: 2996px;
        height: 1199px;
        left: calc(4350px + 400px);
        top: 380px;
    }
    #index #build span{
        background-image: url("../img/obj/build.png");
    }



    #index #kemuri_pink_1{
        width: 1039px;
        height: 685px;
        left: calc(2830px );
        top: 810px;
    }

    #index #kemuri_pink_1 span{
        background-image: url("../img/obj/kemuri_pink_1.png");
    }


    #index #kemuri_pink_2{
        width: 1214px;
        height: 1262px;
        left: calc(430px);
        top: -390px;
    }
    #index #kemuri_pink_2 span{
        background-image: url("../img/obj/kemuri_pink_2.png");
    }

    #index #kemuri_pink_3{
        width: 1357px;
        height: 933px;
        left: calc(6040px);
        top: 470px;
    }
    #index #kemuri_pink_3 span{
        background-image: url("../img/obj/kemuri_pink_3.png");
    }





    #index #kemuri_ao_1{
        width: 995px;
        height: 617px;
        left: calc(520px);
        top: 910px;
    }
    #index #kemuri_ao_1 span{
        background-image: url("../img/obj/kemuri_ao_1.png");
    }

    #index #kemuri_ao_2{

        width: 563px;
        height: 960px;
        left: calc(1900px);
        top: 610px;
    }
    #index #kemuri_ao_2 span{
        background-image: url("../img/obj/kemuri_ao_2.png");
    }

    #index #kemuri_ao_3{

        width: 1139px;
        height: 967px;
        left: calc(2090px);
        top:-260px;
    }
    #index #kemuri_ao_3 span{
        background-image: url("../img/obj/kemuri_ao_3.png");
    }

    #index #kemuri_ao_4{

        width: 1793px;
        height: 1262px;
        left: calc(7100px);
        top: 590px;
    }
    #index #kemuri_ao_4 span{
        background-image: url("../img/obj/kemuri_ao_4.png");
    }



    #index #kemuri_shiro_1{

        width: 315px;
        height: 314px;
        left: 5500px;
        top: 190px;
    }
    #index #kemuri_shiro_1 span{
        background-image: url("../img/obj/kemuri_shiro_1.png");
    }


    #index #kemuri_shiro_2{

        width: 1172px;
        height: 636px;
        left: calc(7170px);
        top: 850px;
    }
    #index #kemuri_shiro_2 span{
        background-image: url("../img/obj/kemuri_shiro_2.png");
    }


    #index #ebi1{

        width: 720px;
        height: 531px;
        left:1440px;
        top: -130px;
    }
    #index #ebi1 span{
        background-image: url("../img/obj/ebi1.png");
    }

    #index #ebi2{

        width: 196px;
        height: 133px;
        left:1820px;
        top: 330px;
    }
    #index #ebi2 span{
        background-image: url("../img/obj/ebi2.png");
    }

    #index #ebi3{

        width: 127px;
        height: 145px;
        left:2200px;
        top: 520px;
    }
    #index #ebi3 span{
        background-image: url("../img/obj/ebi3.png");
    }



    #index #sakana1{

        width: 928px;
        height: 904px;
        left:calc(6240px);
        top: 60px;
    }
    #index #sakana1 span{
        background-image: url("../img/obj/sakana1.png");
    }

    #index #sakana2{

        width: 1100px;
        height: 908px;
        left:3420px;
        top: -80px;
    }
    #index #sakana2 span{
        background-image: url("../img/obj/sakana2.png");
    }







    #index #kani{
        width: 501px;
        height: 307px;
        left:5400px;
        top:1120px;
        z-index: 1;
    }
    #index #kani span{
        background-image: url("../img/obj/kani.png");
    }



    #index #kamaboko{

        width: 255px;
        height: 213px;
        left:6020px;
        top:480px;
    }
    #index #kamaboko span{
        background-image: url("../img/obj/kamaboko.png");
    }



    #index #aji1{

        width: 503px;
        height: 406px;
        left:calc(5530px);
        top:0px;
    }
    #index #aji1 span{
        background-image: url("../img/obj/aji1.png");
    }


    #index #aji2{

        width: 408px;
        height: 219px;
        left:1750px;
        top:1100px;
    }
    #index #aji2 span{
        background-image: url("../img/obj/aji2.png");
    }




    #index #bento{

        width: 973px;
        height: 881px;
        left:6100px;
        top:680px;
    }
    #index #bento span{
        background-image: url("../img/obj/bento.png");
    }


    #index #chikuwa{
        width: 770px;
        height: 643px;
        left:3010px;
        top:-50px;
    }
    #index #chikuwa span{
        background-image: url("../img/obj/chikuwa.png");
    }



    #index #don{

        width: 284px;
        height: 250px;
        left:calc(2530px);
        top:600px;
    }
    #index #don span{
        background-image: url("../img/obj/don.png");
    }



    #index #sake1{
        width: 936px;
        height: 794px;
        left:calc( 10px + 550px );
        top:870px;
    }
    #index #sake1 span{
        background-image: url("../img/obj/sake1.png");
    }



    #index #sake2{
        width: 469px;
        height: 398px;
        left:480px;
        top:410px;
    }
    #index #sake2 span{
        background-image: url("../img/obj/sake2.png");
    }


    #index #sake3{

        width: 548px;
        height: 367px;
        left:4100px;
        top:40px;
    }
    #index #sake3 span{
        background-image: url("../img/obj/sake3.png");
    }


    #index #shirasu{

        width:730px;
        height: 422px;
        left:2710px;
        top:870px;
    }
    #index #shirasu span{
        background-image: url("../img/obj/shirasu.png");
    }






    #index #woman1{

        width:482px;
        height: 682px;
        left:calc(1840px );
        top:610px;
    }
    #index #woman1 span{
        background-image: url("../img/obj/woman1.png");
    }


    #index #woman2{

        width:926px;
        height: 1784px;
        left:calc(7940px - 400px);
        top:70px;
    }
    #index #woman2 span{
        background-image: url("../img/obj/woman2.png");
    }



    #index #man1{
        width:1435px;
        height: 1030px;
        left:calc(640px + 300px);
        top:310px;
        transition-delay: 200ms !important;
    }
    #index #man1 span{
        background-image: url("../img/obj/man1.png");
    }



    #index #man1_2{
        width:834px;
        height: 1000px;
        left:calc(1040px + 300px);
        top:80px;
        transition-delay: 200ms !important;
    }
    #index #man1_2 span{
        background-image: url("../img/obj/man1_2.png");
    }




    #index #man2{
        width:618px;
        height: 840px;
        left:1380px;
        top:470px;
    }
    #index #man2 span{
        background-image: url("../img/obj/man2.png");
    }


    #index #man3{
        width:354px;
        height: 618px;
        left:2220px;
        top:630px;
    }
    #index #man3 span{
        background-image: url("../img/obj/man3.png");
    }


    #index #man4{

        width:436px;
        height: 802px;
        left:calc( 7270px - 120px );
        top:580px;
    }
    #index #man4 span{
        background-image: url("../img/obj/man4.png");
    }


    #index #man5{
        width:308px;
        height: 598px;
        left:calc(6860px - 50px);
        top:780px;
    }
    #index #man5 span{
        background-image: url("../img/obj/man5.png");
    }



    #index #grade{

        width:8320px;
        height: 350px;
        left:calc(8320px / 2);
        bottom:0px;
        mix-blend-mode: darken;
        opacity:0.8;
    }
    #index #grade span{
        /*background-image: url("../img/obj/grade.png");*/
    }









}