@charset "utf-8";
@media screen and (max-width: 800px) {
    *{
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        list-style: none;
    }
	#load_fade{
		position:fixed;
		width:100%;
		height: 100%;
		background: #000 url("../img/loader.gif") no-repeat center center;
		background-size:100px auto;
		z-index: 999;
	}
	#wrapper{
		position:relative;
		width:100%;
		height: 100%;
		left: 0;
		top:0;
		overflow: hidden;
	}
    
    .pc_view{
        position: fixed;
        left:-9999px;
        top:0;
        z-index:0;
        visibility: hidden;
    }
    .sp_view{
        position: relative;
        width:100%;
        overflow: hidden;
    }

    #sp_visual{
        position: relative;
        width:100%;
        background: url("../img/sp/sp_main.jpg") no-repeat left top;
        background-size:100% auto;
        padding-top:129.3%;
    }
    #sp_cn1{
        position: relative;
        width:100%;
        background: url(../img/sp/cloud_bg.jpg) no-repeat left top;
        background-size:100% auto;
/*        padding-top:11.8%;*/
        padding-top:2%;
        padding-bottom:42%;
    }
    .sp_sns{
        position: relative;
        width: 27.4%;
        background: url(../img/sp/official_sns.png) no-repeat left top;
        background-size:100% auto;
        padding-top: 2.2%;
        margin: 0 auto;
        height: 0;
    }
    .sp_sns_list{
        position: relative;
        height: auto;
        width:40%;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        padding-top:3.1%;
        padding-bottom:9.4%;
    }
    .sp_sns_list a{
        position: relative;
        width:22%;
        padding-top:18%;
    }
    .sp_sns_list a:nth-child(1) .sp_sns_icon{
        position:absolute;
        background: url(../img/sp/tw.png) no-repeat left top;
        background-size:100% auto;
        width:100%;
        height: 100%;
        left:0;
        top:0;
    }
    .sp_sns_list a:nth-child(2) .sp_sns_icon{
        position:absolute;
        background: url(../img/sp/fb.png) no-repeat left top;
        background-size:100% auto;
        width:100%;
        height: 100%;
        left:0;
        top:0;
    }
    .sp_sns_list a:nth-child(3) .sp_sns_icon{
        position:absolute;
        background: url(../img/sp/yt.png) no-repeat left top;
        background-size:100% auto;
        width:100%;
        height: 100%;
        left:0;
        top:0;
    }
    .sp_bnr_area{
        position: relative;
        width:87.5%;
        background-image: url(../img/sp/bnr_gt.png),url(../img/sp/bnr_gb.png);
        background-position:left top ,left bottom;
        background-size:100% auto,100% auto;
        background-repeat: no-repeat,no-repeat;
        padding:4.7% 0;
        margin: 0 auto;
        z-index: 1;
    }
    .sp_bnr1{
        width:100%;
        padding-top:27%;
    }
    .sp_bnr_area a:nth-child(1) .sp_bnr1{
        background: url("../img/dvd_bnr3.png") no-repeat left center;
        background-size:100% auto;
    }
    .sp_bnr_area a:nth-child(2) .sp_bnr1{
        background: url("../img/bnr3.png") no-repeat left center;
        background-size:100% auto;
    }
    .sp_bnr_area a:nth-child(3) .sp_bnr1{
        background: url("../img/eigacom.jpg") no-repeat left center;
        background-size:100% auto;
    }
    .sp_bnr_area a:nth-child(4) .sp_bnr1{
        background: url("../img/link_btn.png") no-repeat left center;
        background-size:100% auto;
    }
    .sp_bnr_flex{
        width:100%;
        display: flex;
        justify-content: space-between;
    }
    .sp_bnr_flex a{
        display: block;
        width:48%;
    }
    .sp_bnr_flex a:nth-child(1) .sp_bnr2{
        background: url("../img/mvt.jpg") no-repeat left center;
        background-size:100% auto;
        padding-top:30%;
        width:100%
    }
    .sp_bnr_flex a:nth-child(2) .sp_bnr2{
        background: url("../img/mrj.gif") no-repeat left center;
        background-size:100% auto;
        padding-top:30%;
        width:100%
    }
    .sp_bnr_list{
        position: relative;
        width:89%;
        margin: 0 auto;
    }
    
    
    .sp_trailer_area{
        position: relative;
        width:91%;
        margin: 0 auto;
        padding-top:31%;
        margin-top:-58%;
    }
    #sp_cn1 .sp_h2{
        width:100%;
        height: 0;
        padding-top:13.8%;
        background: url("../img/sp/trailer.png") no-repeat center top;
        background-size:90% auto;
    }
    .sp_trailer_thumbg{
        width:100%;
        height: 0;
        padding-top:43.2%;
        background: url("../img/sp/trailer_thumb.jpg") no-repeat left top;
        background-size:100% auto;
    }
    .sp_spot_are{
        position: relative;
        width:100%;
    }
    .sp_spot{
        position: relative;
        width:100%;
        font-size:3.75vw;
        color: #f8f003;
        padding-top:10%;
        padding-bottom:5%;
        text-align: center;
    }
    .sp_spot_list{
        position: relative;
        width:100%;
        padding-bottom:46%;;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .sp_spot_li{
        position: absolute;
        top:0;
        width:67%;
    }
    .iframe_spot_sp{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .iframe_spot_sp iframe{
        position: absolute;
        width: 100%;
        height: 9;
        height: 85%;
        left: 0;
        top: 0;
    }
    .sp_spot_li:last-child .iframe_spot_sp{
        width:93.3%;
    }
    .spot_link{
        position: relative;
    }
    
    
    .sp_spot_img{
        position: relative;
        width:100%;
        padding-top:57%;
        height:0;
    }
    .sp_spot_title{
        width:100%;
        color: #FFF;
        font-size:3.1vw;
        text-align: center;
        padding-top:1.2%;
    }
    
    .sp_spot_li:nth-child(1){
        left:16.4%;
    }
    .sp_spot_li:nth-child(2){
        left:calc(16.4% + 75%);
    }
    .sp_spot_li:nth-child(3){
        left:calc(16.4% + 75%*2);
    }
    .sp_spot_li:nth-child(4){
        left:calc(16.4% + 75%*3);
    }
    .sp_spot_li:nth-child(5){
        left:calc(16.4% + 75%*4);
    }
    .sp_spot_li:nth-child(6){
        left:calc(16.4% + 75%*5);
    }
    .sp_spot_li:last-child{
        padding-right:4.7%;
    }

    .sp_spot_li:nth-child(1) .sp_spot_img{
        background: url(../img/sp/spot1.jpg) no-repeat left top;
        background-size:100% auto;        
    }
    .sp_spot_li:nth-child(2) .sp_spot_img{
        background: url(../img/sp/spot2.jpg) no-repeat left top;
        background-size:100% auto;        
    }
    .sp_spot_li:nth-child(3) .sp_spot_img{
        background: url(../img/sp/spot3.jpg) no-repeat left top;
        background-size:100% auto;        
    }
    .sp_spot_li:nth-child(4) .sp_spot_img{
        background: url(../img/sp/spot4.jpg) no-repeat left top;
        background-size:100% auto;        
    }
    .sp_spot_li:nth-child(5) .sp_spot_img{
        background: url(../img/sp/spot5.jpg) no-repeat left top;
        background-size:100% auto;        
    }
    .sp_spot_li:nth-child(6) .sp_spot_img{
        background: url(../img/sp/spot6.jpg) no-repeat left top;
        background-size:100% auto;        
    }
    
    
    #sp_cn2{
        position: relative;
        width:100%;
        background-image: url(../img/sp/intro_bg1.png),url(../img/sp/intro_bg2.png);
        background-position: left top,left bottom;
        background-repeat:no-repeat, no-repeat;
        background-size:100% auto,100% auto;
        padding-top:42.1%;
        padding-bottom:38%;
        margin-top:-31%;
        z-index: 1;
    }
    .sp_cn2_bg{
        position: absolute;
        width: 100%;
        top: 33%;
        padding-top: 208%;
        background: #00223e;
    }
    
    #sp_cn2 .sp_h2{
        width: 100%;
        height: 0;
        padding-top: 13.8%;
        background: url(../img/sp/introduction.png) no-repeat center top;
        background-size: 90% auto;
        padding-bottom: 8%;
        margin-top: -14%;
        position: relative;
        z-index: 1;
    }
    .sp_intro_img1{
        position: relative;
        width:84.3%;
        margin: 0 auto;
        padding-top:42%;
        background: url("../img/sp/intro_img1.jpg") no-repeat left top;
        background-size:100% auto;
        margin-top:-4%;
    }
    .sp_intro_img2{
        position: relative;
        width:84.3%;
        margin: 0 auto;
        padding-top:57%;
        background: url("../img/sp/intro_img2.png") no-repeat left top;
        background-size:100% auto;
    }
    .sp_intro_img3{
        position: relative;
        width:84.3%;
        margin: 0 auto;
        padding-top:44%;
        background: url("../img/sp/intro_img3.jpg") no-repeat left top;
        background-size:100% auto;
    }
    .sp_intro_img4{
        position: relative;
        width:84.3%;
        margin: 0 auto;
        padding-top:54%;
        background: url("../img/sp/intro_img4.png") no-repeat left top;
        background-size:100% auto;
    }
    .sp_intro_text{
        position: relative;
        width:84.3%;
        margin: 0 auto 5.6%;
        font-size:3.125vw;
        line-height: 6vw;
        color: #FFF;
        letter-spacing:-0.1vw;
    }
    .sp_intro_title1{
        position: relative;
        width:84.3%;
        margin: 0 auto;
        background: url("../img/sp/intro_h1.png") no-repeat left top;
        background-size:100% auto;
        padding-top:7%;
        height: 0;
    }
    .sp_intro_title2{
        position: relative;
        width:84.3%;
        margin: 0 auto;
        background: url("../img/sp/intro_h2.png") no-repeat left top;
        background-size:100% auto;
        padding-top:7%;
        height: 0;
    }
    .sp_intro_title3{
        position: relative;
        width:84.3%;
        margin: 0 auto;
        background: url("../img/sp/intro_h3.png") no-repeat left top;
        background-size:100% auto;
        padding-top:7%;
        height: 0;
    }
    .sp_intro_title4{
        position: relative;
        width:84.3%;
        margin: 0 auto;
        background: url("../img/sp/intro_h4.png") no-repeat left top;
        background-size:100% auto;
        padding-top:7%;
        height: 0;
    }
    
    
    
    
    
    
    #sp_cn3{
        position: relative;
        width:100%;
        background-image: url(../img/sp/spider_bg1.jpg),url(../img/sp/spider_bg2.jpg);
        background-position: left -25%,left bottom;
        background-repeat:no-repeat, no-repeat;
        background-size:100% auto,100% auto;
        padding-top:42.1%;
        padding-bottom:38%;
        margin-top:-31%;
    }
    #sp_cn3 .sp_h2{
        width:100%;
        height: 0;
        padding-top:13.8%;
        background: url("../img/sp/character.png") no-repeat center top;
        background-size:90% auto;
        padding-bottom:2%;
        margin-top:-4%;
    }
    .sp_ch1{
        position: relative;
        background: url("../img/sp/ch01.jpg") no-repeat left top;
        width:68.75%;
        padding-top:90.6%;
        height: 0;
        background-size:100% auto;
        margin-left:23%;
    }
    .sp_ch1_text{
        position: relative;
        width:81.25%;
        background: rgba(0,0,0,0.8);
        border:solid 1px #0068b7;
        box-sizing: border-box;
        padding-top:5%;
        margin-left:7.8%;
        margin-top:-9%;
        margin-bottom:9%;
    }
    .sp_ch1_text .sp_ch_name{
        position: relative;
        background: url("../img/sp/ch_name1.png") no-repeat left top;
        background-size:100% auto;
        width:100%;
        padding-top:5.8%;
    }
    .sp_ch_text{
        position: relative;
        font-size:3.125vw;
        line-height: 6vw;
        color: #FFF;
        letter-spacing:-0.1vw;
        margin: 0 4.6%;
        padding: 2% 0 5.5%;
    }
    .sp_ch2{
        position: relative;
        background: url("../img/sp/ch02.jpg") no-repeat left top;
        width:68.75%;
        padding-top:90.6%;
        height: 0;
        background-size:100% auto;
        margin-left:7.8%;
    }
    .sp_ch2_text{
        position: relative;
        width:81.25%;
        background: rgba(0,0,0,0.8);
        border:solid 1px #0068b7;
        box-sizing: border-box;
        padding-top:5%;
        margin-left:9.3%;
        margin-top:-9%;
        margin-bottom:9%;
    }
    .sp_ch2_text .sp_ch_name{
        position: relative;
        background: url("../img/sp/ch_name2.png") no-repeat left top;
        background-size:100% auto;
        width:100%;
        padding-top:5.8%;
    }

    .sp_ch3{
        position: relative;
        background: url("../img/sp/ch03.jpg") no-repeat left top;
        width:68.75%;
        padding-top:90.6%;
        height: 0;
        background-size:100% auto;
        margin-left:23%;
    }
    .sp_ch3_text{
        position: relative;
        width:81.25%;
        background: rgba(0,0,0,0.8);
        border:solid 1px #0068b7;
        box-sizing: border-box;
        padding-top:5%;
        margin-left:7.8%;
        margin-top:-9%;
    }
    .sp_ch3_text .sp_ch_name{
        position: relative;
        background: url("../img/sp/ch_name3.png") no-repeat left top;
        background-size:100% auto;
        width:100%;
        padding-top:5.8%;
    }
    .sp_ch_oh{
        width:84.3%;
        margin: 0 auto;
        background: rgba(0,0,0,0.8);
        border:solid 1px #0068b7;
        padding-top:7%;
        margin-top: 10%;
    }
    .sp_oh_name1{
        width:100%;
        background: url(../img/sp/oh_name1.png) no-repeat left top;
        background-size:100% auto;
        padding-top:5.6%;
    }
    .sp_oh_name2{
        width:100%;
        background: url(../img/sp/oh_name2.png) no-repeat left top;
        background-size:100% auto;
        padding-top:5.6%;
    }
    .sp_oh_name3{
        width:100%;
        background: url(../img/sp/oh_name3.png) no-repeat left top;
        background-size:100% auto;
        padding-top:5.6%;
    }
    .sp_oh_name4{
        width:100%;
        background: url(../img/sp/oh_name4.png) no-repeat left top;
        background-size:100% auto;
        padding-top:5.6%;
    }
    .sp_oh_name5{
        width:100%;
        background: url(../img/sp/oh_name5.png) no-repeat left top;
        background-size:100% auto;
        padding-top:5.6%;
    }
    .sp_ch_text2{
        position: relative;
        font-size:3.125vw;
        line-height: 6vw;
        color: #FFF;
        letter-spacing:-0.1vw;
        margin: 0 9%;
        padding: 1% 0 7.8%;
    }

    #sp_cn4{
        position: relative;
        width:100%;
        background-image: url(../img/sp/gallery_img.png);
        background-position: left top;
        background-repeat:no-repeat;
        background-size:100% auto;
        padding-top:42.1%;
        margin-top:-51%;
        padding-bottom:17%;
    }
    #sp_cn4 .sp_h2{
        position: relative;
        width:100%;
        height: 0;
        padding-top:6.8%;
        background: url("../img/sp/gallery.png") no-repeat center top;
        background-size:90% auto;
        z-index: 1;
        margin-top:-1%;
    }
    .sp_gallery_area{
        position: relative;
        padding-top:8%;
    }
    .sp_gallery_load{
        position:absolute;
        width:100%;
        height: 100%;
        left:0;
        top:0;
        background:url("../img/sp/gallery1.jpg") no-repeat left top;
        background-size:100%;
    }
    .sp_gallery_wrap{
        position: relative;
        width:84%;
        margin: 0 auto;
        padding-top: 109%;
        height: 0;
        background: #000;
        background-size:100%;
        transition:0.3s;
        overflow: hidden;
    }
    
    
    .gallery_anim{
        transition:0.3s ease-out;
    }
    .sp_next_icon{
        position: absolute;
        background: url(../img/sp/ga_icon.png) no-repeat left top;
        background-size:100% auto;
        width:4.4%;
        height: 0;
        padding-top:8.6%;
        left:5%;
        top:46%;
    }
    .sp_back_icon{
        position: absolute;
        background: url(../img/sp/ga_icon.png) no-repeat left top;
        background-size:100% auto;
        width:4.4%;
        height: 0;
        padding-top:8.6%;
        right:5%;
        top:46%;
        transform:scale(-1,1);
    }
    .sp_ga_ca{
        display: flex;
        justify-content:center;
        padding:4% 0;
    }
    .sp_ga_cursor{
        position: relative;
        width:4%;
        padding-top:4%;
        height: 0;
        border-radius: 100%;
        margin: 0 1.5%;
    }
    .sp_ga_ta{
        position: absolute;
        width:100%;
        height: 100%;
        left:0;
        top:0;
        border-radius: 100%;
        overflow: hidden;
    }
    .sp_ga_base{
        position: absolute;
        width:50%;
        height: 50%;
        background: rgba(255,255,255,1);
        left:25%;
        top:25%;
        border-radius: 100%;
    }
    .sp_ga_target .sp_ga_ta{
        background: rgba(255,0,0,0.5);
    }
    .sp_ga_target .sp_ga_base{
        background: rgba(255,0,0,1);
    }

    .share{
        justify-content: center;
        display: flex;
    }
    .share li{
        margin: 0 8px;
    }

    
    
    
    footer{
        position: relative;
        width:100%;
        background: #000;
        padding-bottom:12%;
    }
    .sp_footer_text{
        background: url("../img/sp/footer1.gif") no-repeat left top;
        background-size:100% auto;
        backgroun-size:100% auto;
        padding-top:42%;
        height: 0;
        width:100%;
    }
    .sp_footer_text2{
        background: url("../img/sp/footer2.gif") no-repeat left top;
        background-size:100% auto;
        backgroun-size:100% auto;
        padding-top:29%;
        height: 0;
        width:100%;
    }
    .sp_footer_link{
        text-align: center;
        color: #858585;
        padding-bottom:10%;
    }
    footer a{
        font-size:2.8vw;
        line-height: 3vw;
        color: #858585;
    }
    
    .sp_spider1{
        position:relative;
        background: url(../img/sp/spider1.png) no-repeat left top;
        background-size: 100% auto;
        left: 69.74%;
        top: 0;
        width: 30.6%;
        padding-top: 60.6%;
        z-index: 1;
        margin-top:-28%;
    }    
    .sp_web1{
        position:relative;
        background: url(../img/sp/web1.png) no-repeat left top;
        background-size: 100% auto;
        left: 0.5%;
        top: 0;
        width: 99.5%;
        padding-top: 43%;
        margin-top:-20%;
    }
    .sp_spider2{
        position:relative;
        background: url(../img/sp/spider2.png) no-repeat left top;
        background-size: 100% auto;
        left: 0;
        top: 0;
        width: 100%;
        padding-top: 57.8%;
        z-index: 1;
        margin-top:-43%;
    }
    .sp_web2{
        position:relative;
        background: url(../img/sp/web2.png) no-repeat left top;
        background-size: 100% auto;
        left: 0;
        top: 0;
        width: 100%;
        padding-top: 47.8%;
        margin-top:-47%;
        z-index: 1;
    }
    .sp_spider3{
        position:relative;
        background: url(../img/sp/spider3.png) no-repeat left top;
        background-size: 100% auto;
        left: 51%;
        top: 0;
        width: 49%;
        padding-top: 53.9%;
        z-index: 1;
        margin-top:-50%;
    }
    .sp_web3{
        position:relative;
        background: url(../img/sp/web3.png) no-repeat left top;
        background-size: 100% auto;
        left: 0;
        top: 0;
        width: 100%;
        padding-top: 55.1%;
        margin-top:-33%;
        z-index: 1;
    }
    
    #sp_navi{
        position: fixed;
        width:100%;
        height: 100%;
        background: url(../img/sp/sp_navi_base.jpg) no-repeat left top #000;
        background-size:100%;
        left:0;
        top:-100%;
        z-index: 90;
        transition:0.3s ease-in-out;
    }
    #sp_navi_btns{
        position: absolute;
        width:53%;
        left:23.5%;
        top:23%;
    }
    .sp_navi_btn{
        position: relative;
        width:100%;
        padding-top:26%;
        height: 0;
    }
    #sp_navi_btns a:nth-child(1) .sp_navi_btn{
        background:url("../img/sp/trailer_btn.png") no-repeat left top;
        background-size: 100% auto;
    }
    #sp_navi_btns a:nth-child(2) .sp_navi_btn{
        background:url("../img/sp/intro_btn.png") no-repeat left top;
        background-size: 100% auto;
    }
    #sp_navi_btns a:nth-child(3) .sp_navi_btn{
        background:url("../img/sp/chara_btn.png") no-repeat left top;
        background-size: 100% auto;
    }
    #sp_navi_btns a:nth-child(4) .sp_navi_btn{
        background:url("../img/sp/gallery_btn.png") no-repeat left top;
        background-size: 100% auto;
    }
    #sp_navi_btns a:nth-child(5) .sp_navi_btn{
        background:url("../img/sp/thetaer_btn.png") no-repeat left top;
        background-size: 100% auto;
    }
    #sp_navi_open{
        position: fixed;
        left:0;
        top:0;
        width:15.6%;
        padding-top:15.6%;
        background:url("../img/sp/navi_btnbk.jpg") no-repeat left top;
        background-size: 100% auto;
        z-index: 90;
    }
    #sp_navi_base{
        position: absolute;
        left:0;
        top:0;
        width:100%;
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .hr{
        position: absolute;
        left:30%;
        width:40%;
        padding-top:4%;
        background: #F00;
        transition:0.3s ease-in-out;
    }
    .hr:nth-child(1){
        top:34%;
    }
    .hr:nth-child(2){
        top:48%;
    }
    .hr:nth-child(3){
        top:62%;
    }

    .sp_navi_ac{
        background: none !important;
    }
    .sp_navi_ac  .hr:nth-child(1){
        transform:rotate(45deg);
        left:30%;
        top:48%
    }
    .sp_navi_ac  .hr:nth-child(2){
        opacity: 0;
    }
    .sp_navi_ac  .hr:nth-child(3){
        transform:rotate(-45deg);        
        left:30%;
        top:48%
    }
    .page_top{
        position: fixed;
        right:2%;
        bottom:-20%;
        background: url("../img/sp/pagetop.png") no-repeat left top;
        background-size:100% auto;
        width:18%;
        padding-top:18%;
        z-index: 10;
        transition:0.3s;
    }
    .page_top_active{
        bottom:2% !important;
    }
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
}