@charset "utf-8";
* {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: "MS Pゴシック","MS P Gothic","ＭＳ ゴシック",sans-serif,"ヒラギノ角ゴ","Hiragino Kaku Gothic Pro",Osaka;
    text-align:justify;
    text-justify:distribute;
}
html,body{
	background:#000;
}
a{
	color: #999999;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
#load_fade{
	position:fixed;
	width:100%;
	height: 100%;
	background: #000 url("../img/loader.gif") no-repeat center center;
	z-index: 999;
}
.fb-share-button span{
	vertical-align: top !important;
	display: block;
/*	margin-top:5px;*/
}
.img_text{
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
@media screen and (min-width: 801px) {
	.sp_view{
        position: fixed;
        left:-9999px;
        top:0;
        z-index: 0;
        visibility:hidden;
	}
    .pc_view{
        display: block;
    }
    /*------
    navi
    -------*/
    #navigation{
        position:fixed;
        top:0;
        background: url(../img/navi.jpg) no-repeat left top #000a15;
        width:360px;
        height: 100%;
        z-index: 10;
        transition:0.3s ease-in-out;
    }
	.navi_open{
		left:0 !important;
		transition:0.3s ease-in-out;
		transition-delay: 0.3s;
	}
	.navi_tab{
		position: fixed;
		width:80px;
		height: 100%;
		left:-80px;
		top:0;
		z-index: 90;
	}
	.navi_bar{
		position: absolute;
		width:60px;
		left:0;
		top:0;
		background: #000c15;
		height: 100%;
	}
	.navi_img{
		position: absolute;
		width:80px;
		height: 100%;
		background: url(../img/bar.png) no-repeat left center;
		left:0;
		top:0;	
	}
    .navi_padidng{
        position: fixed;
        top:0;
        left:0;
        height: 100%;
        background: #000;
        z-index: 90;
    }
    #navi_menu{
        position: absolute;
        top:100px;
        left:82px;
        width:200px;
    }
    .navi_btn{
        position: relative;
        width:200px;
        height: 40px;
        margin-bottom:10px;
        transition:0.5s;
    }
    .navi_btn:hover{
        opacity: 0.6;
    }
    #navi_menu a:nth-child(1) .navi_btn{
        background: url(../img/navi_btn1.png) no-repeat left top;
    }
    #navi_menu a:nth-child(2) .navi_btn{
        background: url(../img/navi_btn2.png) no-repeat left top;
    }
    #navi_menu a:nth-child(3) .navi_btn{
        background: url(../img/navi_btn3.png) no-repeat left top;
    }
    #navi_menu a:nth-child(4) .navi_btn{
        background: url(../img/navi_btn4.png) no-repeat left top;
    }
    #navi_menu a:nth-child(5) .navi_btn{
        background: url(../img/navi_btn5.png) no-repeat left top;
    }
    #sns{
        position: relative;
        width:250px;
        display: flex;
        justify-content: center;
        margin: 15px auto 0;
    }
    .sns_btn{
        width:30px;
        height: 30px;
        margin: 0 13px;
        transition:0.5s;
    }
    .sns_btn:hover{
        opacity: 0.6;
    }
    #sns a:nth-child(1) .sns_btn{
        background: url(../img/tw.png) no-repeat left top;
    }
    #sns a:nth-child(2) .sns_btn{
        background: url(../img/fb.png) no-repeat left top;
    }
    #sns a:nth-child(3) .sns_btn{
        background: url(../img/yt.png) no-repeat left top;
    }
    .sns_btn:nth-child(4){
        background: url(../img/share.png) no-repeat left top;
        cursor: pointer;
    }
    .timeline{
        position: absolute;
        width:300px;
        height: 340px;
        left:30px;
        top:408px;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,09303f+100&0.75+0,0.75+50 */
        background: -moz-linear-gradient(top,  rgba(0,0,0,0.75) 0%, rgba(5,24,32,0.75) 50%, rgba(9,48,63,0.75) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(0,0,0,0.75) 0%,rgba(5,24,32,0.75) 50%,rgba(9,48,63,0.75) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(0,0,0,0.75) 0%,rgba(5,24,32,0.75) 50%,rgba(9,48,63,0.75) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf000000', endColorstr='#bf09303f',GradientType=0 ); /* IE6-9 */
       /* border:1px solid #025089;*/
        box-sizing: border-box;
        margin-bottom:30px;
    }
	.shares{
		position: absolute;
		left: 60px;
		top: 45px;
		text-align: right;
		visibility: hidden;
	}
    .share{
        display: flex;
        justify-content: center;
    }
	.shares li{
		opacity: 0;
		transition:0.2s ease-in-out;
		transform:translateY(5px);
		vertical-align: top;
        list-style: none;
        margin: 0 5px;

	}
	.open_play{
		visibility: visible;
		opacity: 1;
	}
	.open_play li:nth-child(1){
		opacity: 1;
		transform:translateY(0);
	}
	.open_play li:nth-child(2){
		opacity: 1;
		transform:translateY(0);
		transition-delay:0s;
	}
	.open_play li:nth-child(3){
		opacity: 1;
		transform:translateY(0);
		transition-delay:0s;
	}    
    
    
    
    #visual{
        position:absolute;
        background-image: url("../img/visual_t.jpg"),url("../img/visual_b.png");
        background-repeat:no-repeat,no-repeat;
        background-position: left top,left bottom;
        width:970px;
        height: 759px;
        left:360px;
        top:0;
        transform-origin:left top;
        z-index: 1;
    }
    h1{
        position: absolute;
        width:474px;
        height: 199px;
        left:112px;
        top:556px;
        z-index: 1;
    }
    .h1_img{
        position: absolute;
        background: url(../img/logo.png) no-repeat left top;
        width:488px;
        height: 210px;
        left:0;
        top:0;
    }
    #world_premiere{
        position: absolute;
        background: url("../img/world_premiere.png") left top;
        width:184px;
        height: 224px;
        left:610px;
        top:540px;
        z-index: 5;
    }
    #copy1{
        position:absolute;
        width:911px;
        height: 70px;
        left:5px;
        top:0;
        transform-origin: left top;
        z-index: 1;
    }
    .copy1_img{
        position:absolute;
        background: url("../img/copy1.png") no-repeat left top;
        width:100%;
        height:100%;
        left:0;
        top:0;
    }
    #copy2{
        position:absolute;
        width:48px;
        height: 545px;
        left:865px;
        top:70px;
        transform-origin: center top;
        z-index: 1;
    }
    .copy2_img{
        position:absolute;
        background: url("../img/copy2.png") no-repeat left top;
        width:100%;
        height:100%;
        left:0;
        top:0;
    }
    #bnr_area_w{
        position: absolute;
        /*left:50%;*/
        left:50%;
       /* top:840px;*/
        top:800px;
        /*width:580px;*/
        width:450px;
        /*padding: 20px 0;*/
        /*margin-left:-290px;*/
        margin-left:-149px;
        z-index: 1;
        opacity: 1 !important;
    }
    #bnr_area{
        position: absolute;
        width:100%;
        border-left:solid 1px #025089;
        border-right:solid 1px #025089;
        z-index: 1;
        background-image: url("../img/border_top.png"),url("../img/border_top.png");
        background-position:left top,left bottom;
        background-size:100% auto,100% auto;
        background-repeat: no-repeat,no-repeat;
        padding: 20px 0;
    }
    .bnr_tr{
        position: relative;
        width:400px;
        /*margin: 0 auto 20px;*/
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }
    .bnr_img{
        width: 400px;
        height: 125px;
    }
    .bnr_tr:nth-child(1) a:nth-child(1) .bnr_img{
        background: url(../img/dvd_bnr3.png) no-repeat left top;
        background-size:100% auto;
    }
    .bnr_tr:nth-child(1) a:nth-child(2) .bnr_img{
        background: url(../img/bnr3.png) no-repeat left top;
        background-size:100% auto;
    }
    .bnr_tr:nth-child(2) a:nth-child(1) .bnr_img{
        background: url(../img/eigacom.jpg) no-repeat left top;
        background-size:100% auto;
    }
    .bnr_tr:nth-child(2) a:nth-child(2) .bnr_img{
        background: url(../img/link_btn.png) no-repeat left top;
        background-size:100% auto;
    }
    
    
    
    .bnr_tickets{
        position: relative;
        width:500px;
        height: 95px;
        margin: 0 auto;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#025089+0,025089+100&0+0,0.5+15,0.5+85,0+100 */
        background: -moz-linear-gradient(left,  rgba(2,80,137,0) 0%, rgba(2,80,137,0.5) 15%, rgba(2,80,137,0.5) 85%, rgba(2,80,137,0) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left,  rgba(2,80,137,0) 0%,rgba(2,80,137,0.5) 15%,rgba(2,80,137,0.5) 85%,rgba(2,80,137,0) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right,  rgba(2,80,137,0) 0%,rgba(2,80,137,0.5) 15%,rgba(2,80,137,0.5) 85%,rgba(2,80,137,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00025089', endColorstr='#00025089',GradientType=1 ); /* IE6-9 */
    }
    .tickets_flex{
        position: relative;
        width:350px;
        margin:0 auto 0;
        padding-top:20px;
        display: flex;
        justify-content: space-between;
    }
    .bnr_tk{
        width:166px;
        height: 54px;
    }
    .tickets_flex a:nth-child(1) .bnr_tk{
        background: url("../img/mvt.jpg") no-repeat left top;
        background-size:100% auto;
    }
    .tickets_flex a:nth-child(2) .bnr_tk{
        background: url("../img/mrj.gif") no-repeat left top;
        background-size:100% auto;
    }
    


    
    #wrapper{
        position: relative;
        overflow:hidden;
        width:100%;
        max-width:1920px;
        min-width:1200px;
        margin: 0 auto;
    }
	.movieNavi{
        margin-bottom:15px;
    }
    
    
    #page1{
        position: relative;
        width:100%;
        height: 2100px;
        z-index: 1;
    }
    .bg_gd{
        position:absolute;
        width:100%;
        left: 0;
        top:0;
        height: 654px;
        background: url("../img/repeat_pnga.jpg") repeat-x left top;
        transform-origin: left top;

    }
    #cloud_bg{
        position: absolute;
        background: url(../img/intro_bg.jpg) repeat left top #000;
        left:0;
/*        top:500px;*/
        top:650px;
        width:300%;
        height: 2008px;
        background-size:3840px auto;
        -webkit-animation: bgroop2 100s linear infinite;
        animation: bgroop2 100s linear infinite;
    }
    #page2{
        position: relative;
        width:100%;
        height: 6142px;
    }
    .bg_img{
        position: absolute;
        left:0;
        width:100%;
        height: 3850px;
        top:1500px;
        top:50px;
        background: url("../img/contents_bg.jpg") no-repeat center top;
        background-size:1920px auto;
    }
    #front_bg{
        position: absolute;
        width:100%;
        height: 1882px;
        background: url(../img/front_bg.png) no-repeat center top;
        background-size:1920px auto;
/*        top:1650px;*/
        top:2066px;
        top:calc(2066px*0.8);
        left:0;
        z-index: 1;

    }
    #front_bg2{
        position: absolute;
        width:100%;
        height: 1343px;
        bottom:0;
        left:0;
        overflow: hidden;
    }
    #front_patern{
        position: absolute;
        width:200%;
        height: 200%;
        background: url(../img/front_patern.jpg) repeat left top #014476;
        top:40px;
        left:0;
        z-index: 1;
        background-position: 0 0;
        -webkit-animation: bgroop 60s linear infinite;
        animation: bgroop 60s linear infinite;
        transform:rotate(-14deg);
    }
    #ef_web_wrap1{
        position: absolute;
        width:100%;
        top:calc(596px*0.9);
        height: 1330px;
        left:0;
        z-index: 1;
        transform-origin: center center;
    }    
    #ef_web1{
        position: absolute;
        width:100%;
        top:0;
        height: 1330px;
        left:0;
        background: url("../img/web.png") no-repeat center top;
        z-index: 1;
        transform:scale(1.1);
        transform-origin: center center;
    }
    #ef_web_wrap2{
        position: absolute;
        width:100%;
        top:calc(3300px*0.9);
        height: 1023px;
        left:0;
        z-index: 1;
    }    
    #ef_web2{
        position: absolute;
        width:100%;
        top:0;
        height: 1023px;
        left:0;
        background: url("../img/web2.png") no-repeat center top;
        z-index: 1;
    }
    #ef_web_wrap3{
        position: absolute;
        width:100%;
        top:calc(6542px*0.9);
        height: 1124px;
        left:0;
        z-index: 1;
    }    
    #ef_web3{
        position: absolute;
        width:100%;
        top:0;
        height: 1124px;
        left:0;
        background: url("../img/web3.png") no-repeat center top;
        z-index: 1;
    }
    #trailer{
        position:absolute;
        width:1000px;
        height: 378px;
        left:50%;
        margin-left:-500px;
        top:1280px;
        z-index: 2;
    }
    #trailer h2{
        position: relative;
        width:268px;
        height: 43px;
        margin:0 auto;
        transform:scale(1.5);
    }
    #trailer h2 .h2_img{
        position: relative;
        background: url(../img/trailer.png) no-repeat center top;
        width:268px;
        height: 43px;
    }
    .yt_spot{
        position: relative;
        transform:translateY(50px);
    }
    #spot{
        position: relative;
        color: #f8f003;
        font-size:16px;
        line-height: 28px;
        margin-top:50px;
        margin-bottom:30px;
        margin-left:auto;
        margin-right:auto;
        text-align: center;
        width:82px;
        height: 20px;
        background: url(../img/spot_6.png) no-repeat left center;
    }
    .spot_back{
        position: absolute;
        width:16px;
        height: 32px;
        left:0;
        top:103px;
    }
    .spot_back .iconimg{
        position: absolute;
        background: url("../img/nexticon.png") no-repeat left top;
        transform:scale(-1,1);
        width:100%;
        height: 100%;
        left:0;
        top:0;
    }
    .spot_next{
        position: absolute;
        width:16px;
        height: 32px;
        right:0;
        top:103px;
    }
    .spot_next .iconimg{
        position: absolute;
        background: url("../img/nexticon.png") no-repeat left top;
        width:100%;
        height: 100%;
        left:0;
        top:0;
    }
    .spot_back:hover{
        opacity: 0.8;
    }
    .spot_next:hover{
        opacity: 0.8;
    }
    #spot_set{
        position: relative;
    }
    #spot_wrap{
        position: relative;
        width:900px;
        overflow: hidden;
        margin: 0 auto;
    }
    #spot_area{
        position: relative;
        width:calc(430px*6 + 40px * 5);
        display: flex;
        justify-content: space-between;
        transition:0.5s ease-in-out;
    }
    .spot_name{
        position: absolute;
        width:100%;
        text-align: center;
        left:0;
        top:250px;
        color: #FFF;
        font-size:14px;
        font-weight: bold;
    }
    .spot_img{
        position: relative;
        width:430px;
        height: 280px;
    }
    .spot_thumb{
        position: absolute;
        width:430px;
        height: 240px;
        border: solid 1px #ff0000;
        box-sizing: border-box;
        left:0;
        top:0;
    }
    .spot_img:nth-child(1) .spot_thumb{
        background: url(../img/spot1.jpg) no-repeat left top;
    }
    .spot_img:nth-child(2) .spot_thumb{
        background: url(../img/spot2.jpg) no-repeat left top;
    }
    .spot_img:nth-child(3) .spot_thumb{
        background: url(../img/spot3.jpg) no-repeat left top;
    }
    .spot_img:nth-child(4) .spot_thumb{
        background: url(../img/spot4.jpg) no-repeat left top;
    }
    .spot_img:nth-child(5) .spot_thumb{
        background: url(../img/spot5.jpg) no-repeat left top;
    }
    .spot_img:nth-child(6) .spot_thumb{
        background: url(../img/spot6.jpg) no-repeat left top;
    }
    
    .yt_frame{
        position: relative;
        width:898px;
        height: 378px;
        margin: 50px auto 0;
        transform:translateY(50px);
    }
    .yt_player{
        position: relative;
        background: url("../img/trailer_thumb.jpg") no-repeat center top;
        width:898px;
        height: 378px;
        border: solid 1px #ff0000;
    }
    #play_icon{
        position: absolute;
        width:110px;
        height: 110px;
        border-radius: 100%;
        border: solid 2px #ff0000;
        left:50%;
        margin-left:-55px;
        top:50%;
        margin-top:-55px;
        transition:0.3s ease-in-out;
    }
    .yt_ef{
        position: absolute;
        width:100%;
        height: 100%;
        background: rgba(255,255,255,0);
        transition:0.3s;
    }
    .yt_player:hover #play_icon{
        transform:scale(0.8);
    }
    .yt_player:hover .yt_ef{
        background: rgba(255,160,160,0.05);
    }
    #picon{
        position: absolute;
        width:53px;
        height: 53px;
        background: url("../img/playicon.png") no-repeat center top;
        left:50%;
        top:50%;
        margin:-26px 0 0 -26px;
        
    }
    .play_icon{
        position: absolute;
        width:58px;
        height: 58px;
        border-radius: 100%;
        border: solid 2px #ff0000;
        left:50%;
        margin-left:-29px;
        top:90px;
        transition:0.3s ease-in-out;
    }
    .picon{
        position: absolute;
        width:30px;
        height: 30px;
        background: url("../img/playicon.png") no-repeat center top;
        left:50%;
        top:50%;
        margin:-15px 0 0 -15px;
        background-size:100% auto;
    }
    .spot_img .yt_ef{
        height: 240px !important;
    }
    .spot_img:hover .play_icon{
        transform:scale(0.8);
    }
    .spot_img:hover .yt_ef{
        background: rgba(255,160,160,0.1);
    }
    #spider_ch1{
        position: absolute;
        width: 348px;
        height: 517px;
        left: 50%;
        top: 990px;
        z-index: 3;
        margin-left: 290px;
        transform:scale(1) translateY(40px);
    }
    #intro_spider{
        position: absolute;
        background: url(../img/intro_spider.png) no-repeat center top;
        width: 348px;
        height: 517px;
        left: 0;
        tot:0;
    }
    #spider_ch2{
        position: absolute;
        width: 989px;
        height: 507px;
        left: 50%;
        top: 2170px;
        z-index: 1;
        margin-left: -780px;
        transform:scale(1) translateX(50px);
    }
    #intro_spider2{
        position: absolute;
        background: url(../img/intro_spider2.png) no-repeat center top;
        width: 989px;
        height: 507px;
        left: 0;
        top: 0;
        z-index: 1;
    }
    #introduction{
        position: absolute;
        width:1000px;
        top:2400px;
        left:50%;
        margin-left:-500px;
        z-index: 2;
    }
    #introduction h2{
        position: relative;
        width:455px;
        height: 43px;
        margin: 0 auto;
        transform:scale(1.5);
    }
    #introduction h2 .h2_img{
        position: relative;
        background: url(../img/introduction.png) no-repeat center top;
        width:455px;
        height: 43px;
    }
    #intro_text{
        position: relative;
        margin-top:80px;
    }
    .intro_h1{
        position: relative;
        width:434px;
        height: 28px;
        margin: 0 0 15px 94px;
    }
    .intro_h1 .text_img{
        position: relative;
        background: url("../img/intro1_head.png") no-repeat center top;
        width:434px;
        height: 28px;
    }
    .intro_text1{
        position: relative;
        width:506px;
        height: 134px;
        margin: 0 0 60px 94px;
    }
    .intro_text1 .text_img{
        position: relative;
        background: url("../img/intro1_text.png") no-repeat center top;
        width:506px;
        height: 134px;
    }
    .intro_img1{
        position: absolute;
        left:540px;
        top:15px;
        width:340px;
        height:180px;
    }
    .intro_img1 .text_img{
        position: absolute;
        background: url(../img/intro1_img.jpg) no-repeat left top;
        left:0;
        top:0;
        width:340px;
        height:180px;        
    }
    .intro_h2{
        position: relative;
        width:566px;
        height: 27px;
        margin: 0 0 15px 240px;
    }
    .intro_h2 .text_img{
        position: relative;
        background: url("../img/intro2_head.png") no-repeat center top;
        width:566px;
        height: 27px;        
    }
    .intro_text2{
        position: relative;
        width:579px;
        height: 139px;
        margin: 0 0 60px 240px;
    }
    .intro_text2 .text_img{
        position: relative;
        background: url("../img/intro2_text.png") no-repeat center top;
        width:579px;
        height: 139px;        
    }
    .intro_img2{
        position: absolute;
        left:-40px;
        top:263px;
        width:310px;
        height:164px;
    }
    .intro_img2 .text_img{
        position: absolute;
        background: url(../img/intro2_img.jpg) no-repeat left top;
        left:0;
        top:0;
        width:310px;
        height:164px;
    }
    .intro_h3{
        position: relative;
        width:571px;
        height: 33px;
        margin: 0 0 15px 94px;
    }
    .intro_h3 .text_img{
        position: relative;
        background: url("../img/intro3_head.png") no-repeat center top;
        width:571px;
        height: 33px;        
    }
    .intro_text3{
        position: relative;
        width:610px;
        height: 129px;
        margin: 0 0 60px 94px;
    }
    .intro_text3 .text_img{
        position: relative;
        background: url("../img/intro3_text.png") no-repeat center top;
        width:610px;
        height: 129px;        
    }
    .intro_img3{
        position: absolute;
        left: 592px;
        top: 495px;
        width: 330px;
        height: 175px;
    }
    .intro_img3 .text_img{
        position: absolute;
        background: url(../img/intro3_img.jpg) no-repeat left top;
        left: 60px;
        top: 0;
        width: 330px;
        height: 175px;        
    }
    
    .intro_h4{
        position: relative;
        width:562px;
        height: 29px;
        margin: 0 0 15px 240px;
    }
    .intro_h4 .text_img{
        position: relative;
        background: url("../img/intro4_head.png") no-repeat center top;
        width:562px;
        height: 29px;
    }
    .intro_text4{
        position: relative;
        width:627px;
        height: 109px;
        margin: 0 0 60px 240px;
    }
    .intro_text4 .text_img{
        position: relative;
        background: url("../img/intro4_text.png") no-repeat center top;
        width:627px;
        height: 109px;
    }
    .intro_img4{
        position: absolute;
        left: -40px;
        top: 710px;
        width: 364px;
        height: 193px;
    }
    .intro_img4 .text_img{
        position: absolute;
        background: url(../img/intro4_img.jpg) no-repeat left top;
        left: 0;
        top: 0;
        width: 364px;
        height: 193px;
    }
    
    
    #introf_img{
        position: relative;
        width:900px;
        margin: 30px auto 0;
    }
    .intro_f{
        position: absolute;
        transform:translateY(60px);    
    }
    .intro_f:nth-child(1){
        left:0;
        top:20px;
        width:240px;
        height: 126px;
        transform:translateY(30px);
    }
    .intro_f:nth-child(1) .text_img{
        left:0;
        top:0;
        width:240px;
        height: 126px;
        background:url(../img/introf_1.jpg) no-repeat left top;
    }
    .intro_f:nth-child(2){
        left:420px;
        top:20px;
        width:270px;
        height: 148px;
        transform:translateY(30px);
    }
    .intro_f:nth-child(2) .text_img{
        left:0;
        top:0;
        width:270px;
        height: 148px;
        background:url(../img/introf_3.jpg) no-repeat left top;
    }
    .intro_f:nth-child(3){
        left:232px;
        top:48px;
        width:213px;
        height: 112px;
        transform:translateY(40px);
    }
    .intro_f:nth-child(3) .text_img{
        left:0;
        top:0;
        width:213px;
        height: 112px;
        background:url(../img/introf_2.jpg)  no-repeat left top;
    }
    .intro_f:nth-child(4){
        left:680px;
        top:0;
        width:220px;
        height: 117px;
        transform:translateY(40px);
    }
    .intro_f:nth-child(4) .text_img{
        left:0;
        top:0;
        width:220px;
        height: 117px;
        background:url(../img/introf_4.jpg) no-repeat left top;
    }
    
    
    #character{
        position: absolute;
        width:1000px;
        top:3840px;
        left:50%;
        margin-left:-500px;
        z-index: 2;
    }
    #character h2 .h2_img{
        position: relative;
        background: url(../img/character.png) no-repeat center top;
        width:484px;
        height: 44px;
    }
    #character h2{
        position: relative;
        width:484px;
        height: 44px;
        margin:0 auto 80px;
        transform:scale(1.5);
    }
    .chara_wrap{
        position: relative;
        height: 740px;
        width:900px;
        margin-bottom:80px;
    }

    .chara_wrap:nth-child(2) .chara_img_w{
        width:540px;
        height: 740px;
        margin-left:300px;
        overflow: hidden;
    }
    .chara_wrap:nth-child(2) .chara_img{
        background: url(../img/ch_bk1.jpg) no-repeat center center;
        width:540px;
        height: 740px;
        overflow: hidden;
    }
    .chara_wrap:nth-child(2) .chara_img .ch_img{
        background: url(../img/ch_1.png) no-repeat left top;
        width:640px;
        height: 840px;
        margin-left:-50px;
        margin-top:-50px;
    }    
    .chara_wrap:nth-child(2) .chara_img_t{
        position: absolute;
        width:440px;
        height: 280px;
        top:340px;
        left:0;
    }
    .chara_wrap:nth-child(2) .chara_text{
        position: absolute;
        background: url("../img/chara_text1.png") no-repeat center top;
        width:440px;
        height: 280px;
        top:0;
        left:0;
    }
    .chara_wrap:nth-child(3) .chara_img_w{
        overflow: hidden;
        width:540px;
        height: 740px;
        margin-left:4.shares0px;
    }
    .chara_wrap:nth-child(3) .chara_img{
        overflow: hidden;
        background: url(../img/ch_bk2.jpg) no-repeat center center;
        width:540px;
        height: 740px;
    }
    .chara_wrap:nth-child(3) .chara_img_t{
        position: absolute;
        width:440px;
        height: 230px;
        top:340px;
        left:460px;
    }
    .chara_wrap:nth-child(3) .chara_text{
        position: absolute;
        background: url("../img/chara_text2.png") no-repeat center top;
        width:440px;
        height: 230px;
        top:0;
        left:0;
    }
    .chara_wrap:nth-child(3) .chara_img .ch_img{
        background: url(../img/ch_2.png) no-repeat left top;
        width:640px;
        height: 840px;
        margin-left:-50px;
        margin-top:-50px;
    }
    .chara_wrap:nth-child(4) .chara_img_w{
        overflow: hidden;
        width:540px;
        height: 740px;
        margin-left:300px;
    }
    .chara_wrap:nth-child(4) .chara_img{
        overflow: hidden;
        background: url(../img/ch_bk3.jpg) no-repeat center center;
        width:540px;
        height: 740px;
    }
    .chara_wrap:nth-child(4) .chara_img_t{
        position: absolute;
        width:440px;
        height: 250px;
        top:340px;
        left:0;
    }
    .chara_wrap:nth-child(4) .chara_text{
        position: absolute;
        background: url("../img/chara_text3.png") no-repeat center top;
        width:440px;
        height: 250px;
        top:0;
        left:0;
    }
    .chara_wrap:nth-child(4) .chara_img .ch_img{
        background: url(../img/ch_3.png) no-repeat left top;
        width:640px;
        height: 840px;
        margin-left:-50px;
        margin-top:-50px;
    }
    .chara_img_wo{
        position: relative;
        width:900px;
        height: 450px;
        transform:translateY(80px);
    }
    .chara_otehr{
        position: relative;
        background: url(../img/chara_other.png) no-repeat center top;
        width:900px;
        height: 450px;
    }
    #gallery{
        position: absolute;
        width:1000px;
        top:7234px;
        left:50%;
        margin-left:-500px;
        z-index: 2;
    }
    #gallery_left{
        position: absolute;
        left: -40px;
        background: url("../img/nexticon.png") no-repeat left top;
        top:380px;
        width:16px;
        height: 32px;
        transform:scale(-1,1);
        cursor: pointer;
    }
    #gallery_right{
        position: absolute;
        right: -40px;
        background: url("../img/nexticon.png") no-repeat left top;
        top:380px;
        width:16px;
        height: 32px;
        cursor: pointer;
    }
    #gallery_left:hover{
        opacity: 0.8;
    }
    #gallery_right:hover{
        opacity: 0.8;
    }
    #gallery h2 .h2_img{
        position: relative;
        width:290px;
        height: 45px;
        background: url(../img/gallery.png) no-repeat center top;
    }
    #gallery h2{
        position: relative;
        width:290px;
        height: 45px;
        margin:0 auto 80px;
        transform:scale(1.5);
    }
    #spider_ch3{
        position: absolute;
        width: 510px;
        height: 460px;
        left: 50%;
        top: 6822px;
        z-index: 3;
        margin-left: 240px;
        transform:scale(1) translateX(50px);
    }
    #gallery_spider{
        position: absolute;
        background: url(../img/gallery_spider.png) no-repeat center top;
        width: 510px;
        height: 460px;
        left: 0;
        top: 0;
    }    
    
    footer{
        position: relative;
        width:100%;
        background: #000;
        padding-bottom:140px;
    }    
    #footer_text{
        background: url(../img/footer_text.gif) no-repeat center top;
        width:826px;
        height: 50px;
        margin: 100px auto 30px;
    }
    #song_text{
        position: relative;
        background: url("../img/song.gif") no-repeat center top;
        width:368px;
        height: 30px;
        margin: 0 auto;
    }
    #footer_logo{
        position:absolute;
        left:80px;
        bottom:40px;
        background: url("../img/footer_logo.gif") no-repeat left top;
        width:216px;
        height: 59px;
    }
    #copyright{
        position: absolute;
        background: url(../img/copyright.gif) no-repeat left top;
        width:289px;
        height: 13px;
        left:50%;
        margin-left:-145px;
        bottom:40px;
    }
    #tarms{
        position: absolute;
        bottom:40px;
        right:40px;
        color:#FFF;
        font-size:11px;
    }

    #gallery_img{
        position: relative;
        width:1000px;
        height: 700px;
        margin: 50px auto 0;
        background: #000;
        transition:0.3s ease-in-out;
        overflow: hidden;
    }
    .gallery_load{
        position: absolute;
        width:100%;
        height: 100%;
        left:0;
        top:0;
        background: url("../img/gallery1.jpg") no-repeat left top;
        background-size:100% auto;
    }
    .gallery_anim{
        transition:0.3s ease-out;
    }
    #gallery_set{
        position: absolute;
        width:100%;
        height: 100%;
        left:0;
        top:50px;       
    }
    #gallery_wrap{
        position: absolute;
        width:100%;
        height: 100%;
        left:0;
        top:0;
    }
    .gallery_icon{
        position: relative;
        width: 160px;
        display: flex;
        justify-content: space-between;
        margin: 780px auto 0;
        transition:0.3s ease-in-out;
    }
    .ga_cursor{
        width:22px;
        height: 22px;
        border-radius: 100%;
        cursor: pointer;
    }
    .ga_base{
        margin: 6px 0 0 6px;
        width:10px;
        height: 10px;
        border-radius: 100%;
        background: #FFF;
    }
    .ga_target{
        width:22px;
        height: 22px;
        border-radius: 100%;
        background: rgba(255,0,0,0.5);
    }
    .ga_target .ga_base{
        background: rgba(255,0,0,1);
    }

    
    
    /*
    .tilt_a{
        transition:0.7s cubic-bezier(0,0,0.25,1);
    }
    .move_a{
        transition:0.7s cubic-bezier(0,0,0.25,1);
    }
    .tilt_b{
        transition:0.8s cubic-bezier(0,0,0.25,1);
    }
    .move_b{
        transition:1s cubic-bezier(0,0,0.25,1);
    }
    .move_c{
        transition:1s cubic-bezier(0,0,0.25,1);
    }
    .move_d{
        transition:0.6s cubic-bezier(0,0,0.25,1);
    }
    .spider_a{
        transition:1s cubic-bezier(0,0,0.25,1);
    }
    .chara_move{
        transition:0.5s cubic-bezier(0,0,0.25,1);
    }
    */
    
    
    
    
    
    .parallax{
        opacity: 0;
        transition:0.4s cubic-bezier(0,0,0.25,1) !important;
        height: auto;
        transform-origin:center center;
    }
    .parallax2{
        opacity: 0;
        transition:0.5s cubic-bezier(0,0,0.25,1)  !important;
        height: auto;
        transform-origin:center center;
    }
    .parallax3{
        opacity: 0;
        transition:0.5s cubic-bezier(0,0,0.25,1)  !important;
        height: auto;
        transform-origin:center center;
    }
    .p_intro_t{
        opacity: 0;
        transition:0.5s cubic-bezier(0,0,0.25,1)  !important;
        transform:scale(1.1);
        transform-origin:center center;
    }
    .p_intro_t2{
        opacity: 0;
        transition:1s linear  !important;
        transform-origin:center center;
    }
    .p_intro_r{
        opacity: 0;
        transition:0.5s cubic-bezier(0,0,0.25,1)  !important;
        transform:scale(1) translateX(25px) translateY(0) !important;        
        transform-origin:center center;
    }
    .p_intro_l{
        opacity: 0;
        transition:0.5s cubic-bezier(0,0,0.25,1)  !important;
        transform:scale(1) translateX(-25px) translateY(0) !important;        
        transform-origin:center center;
    }

    .para_play{
        opacity: 1;
        transition:0.4s cubic-bezier(0,0,0.25,1) !important;
        transform:scale(1) translateX(0) translateY(0) !important;        
        transform-origin:center center;
    }
    .para_play2{
        opacity: 1;
        transform:scale(1) translateX(0) translateY(0) !important;        
        transform-origin:center center;
    }
    .para_play3{
        opacity: 1;
        transition:0.7s cubic-bezier(0,0,0.25,1)  !important;
        transform:scale(1) translateX(0) translateY(0) !important;        
        transform-origin:center center;
    }
    
    

    
    .spid_anim{
        opacity: 0;
        transition:0.4s cubic-bezier(0,0,0.25,1) !important;
        transform-origin:center center;
    }
    .spid_anim_play{
        opacity: 1 !important;
        transform:scale(1) translateX(0) translateY(0) !important;        
    }
    
    .p_chara_img{
        opacity: 0;
        transition:0.5s cubic-bezier(0,0,0.25,1) !important;
        transform:scale(1.1);
    }
    .p_chara_img2{
        opacity: 0;
        transition:0.5s cubic-bezier(0,0,0.25,1) !important;
        transform:scale(1.1);
    }
    .para_play4{
        opacity: 1 !important;
        transform:scale(1) translateX(0) translateY(0) !important;        
    }
    .chara_wrap:nth-child(2) .p_chara_img2{
        transform:scale(1.1) translateX(-30px);
    }
    .chara_wrap:nth-child(3) .p_chara_img2{
        transform:scale(1.1) translateX(30px);
    }
    .chara_wrap:nth-child(4) .p_chara_img2{
        transform:scale(1.1) translateX(-30px);
    }
    
    
    
    
    .iframe_spot,.spotload{
        position: absolute;
        left:0;
        top:0;
        width:430px;
        height:230px;
    }
    .bnr_a div{
        transition:0.1s;
    }
    .bnr_a div:hover{
        opacity: 0.9;
    }
    .page_top{
        position: fixed;
        right:10px;
        bottom:-105px;
        background: url("../img/pagetop.png") no-repeat left top;
        background-size:100% auto;
        width:95px;
        height: 95px;
        z-index: 10;
        cursor: pointer;
        transition:0.3s;
    }
    .page_top_active{
        bottom:10px !important;
    }
    
}




@-webkit-keyframes bgroop {
    from {
        background-position: 0  0;
    }
    to {
        background-position: 1234px -1684px;
    }
}
@keyframes bgroop {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 1234px -1684px;
    }
}
@-webkit-keyframes bgroop2 {
    from {
        background-position: -3840px 0;
    }
    to {
        background-position: 0 0;
    }
}
@keyframes bgroop2 {
    from {
        background-position: -3840px 0;
    }
    to {
        background-position: 0 0;
    }
}