@media screen and (min-width: 801px) {
	/*--------------------------------------
	メニュー
	--------------------------------------*/
	.pc_view{
		display: block;
	}
	.sp_view{
		display: none;
	}
	.menu_open_wrap{
		position: fixed;
		right: 0;
		top: -100px;
		z-index: 10;
	}
	.menu_open{
		background: url("../img/menu_open.png") no-repeat left top;
		width: 192px;
		height: 103px;
		/*position: fixed;
		right: 0;*/
		top: -100px;
		z-index: 11;
		transition: 0.4s ;
		cursor: pointer;
	}
	.menu_page{
		width: 100%;
		height: 100%;
		z-index: 10;
		position: fixed;
		background: #fbf9eb;
		transform: translateY(-100%);
		transition: 0.3s ease-in-out;
		overflow: auto;
	}
	.menu_close{
		background: url("../img/menu_close.png") no-repeat left top;
		width: 192px;
		height: 103px;
		position: fixed;
		right: 0;
		top: 0;
		transition: 0.3s;
		z-index: 11;
		cursor: pointer;
	}
	.menu_close:hover{
		transform: translateY(-5px)!important;
	}
	.menu_btn_wrap{
		position: relative;
		top:47px;
		margin-bottom: 60px;
	}
	.menu_btn_wrap li{
		cursor: pointer;
	}
	.menu_btn{
		margin: 0 auto 14px;
		display: none;
	}
	.menu_btn:hover{
		opacity: 0.7;
	}
	.menu_title:hover{
		opacity: 1;
	}

	.menu_title{
		background: url("../img/menu_title.jpg") no-repeat left top;
		width: 228px;
		height: 251px;
		position: relative;
		margin-bottom: 50px;
	}
	.menu_btn1{
		background: url("../img/home.jpg") no-repeat left top;
		width: 464px;
		height: 71px;
		position: relative;
	}
	.menu_btn2{
		background: url("../img/trailer.jpg") no-repeat left top;
		width: 464px;
		height: 71px;
		position: relative;
	}
	.menu_btn3{
		background: url("../img/about.jpg") no-repeat left top;
		width: 464px;
		height: 71px;
		position: relative;
	}
	.menu_btn4{
		background: url("../img/news.jpg") no-repeat left top;
		width: 464px;
		height: 71px;
		position: relative;
	}
	.menu_btn5{
		background: url("../img/ticket.jpg") no-repeat left top;
		width: 464px;
		height: 71px;
		position: relative;
	}
	.menu_btn6{
		background: url("../img/media.jpg") no-repeat left top;
		width: 464px;
		height: 71px;
		position: relative;
	}
	.menu_btn7{
		background: url("../img/dvd.jpg") no-repeat left top;
		width: 464px;
		height: 71px;
		position: relative;
	}

	/*page_top*/
	.page_top:hover{
		-webkit-animation:buruburu 0.1s infinite linear alternate;
		animation:buruburu 0.1s infinite linear alternate;
	}

}

.page_top{
	background: url("../img/pagetop.png") no-repeat left top;
	position:fixed;
	width: 107px;
	height: 50px;
	right:40px;
	bottom:490px;
	cursor:pointer;
	z-index:5;
	display:none;
}
.pagetop_chara{
	background: url(../img/pagetop_chara.png) no-repeat left top;
	width: 81px;
	height: 69px;
	position: absolute;
	top: -62px;
	right: 12px;
}

.pagetop_chara{
	animation: rotateAreaB 0.15s ease-in;
	transform-origin: center;
}


@-webkit-keyframes rotateArea {
	0% {-webkit-transform: translateY(0px);}
	100% {-webkit-transform: translateY(-10px);}
}
@keyframes rotateArea {
	0% {transform: translateY(0px);}
	100% {transform: translateY(-10px);}
}

@-webkit-keyframes rotateAreaB {
	0% {-webkit-transform: translateY(-50px);}
	100% {-webkit-transform: translateY(0px);}
}
@keyframes rotateAreaB {
	0% {transform:translateY(-30px);}
	100% {transform: translateY(0px);}
}
@-webkit-keyframes buruburu {
	0% {-webkit-transform:translate(0, 0) rotate(-3deg);}
	50% {-webkit-transform:translate(0, -1px) rotate(0deg);}
	100% {-webkit-transform:translate(0, 0)rotate(3deg);}
}
@keyframes buruburu {
	0% {transform:translate(0, 0) rotate(-3deg);}
	50% {transform:translate(0, -1px) rotate(0deg);}
	100% {transform:translate(0, 0)rotate(3deg);}
}




@media screen and (min-width: 0px) and (max-width: 800px) {
	.sp_view{
		display: block;
	}
	.pc_view{
		display: none;
	}
    /*----------------
    SP page_top
    -----------------*/
	.page_top{
		transform:scale(0.6)translateX(0)!important;
		transform-origin: right bottom;
		right:10px !important;
		bottom:10px !important;
    }
    /*----------------
    SP navigation
    -----------------*/
    .sp_navi{
        position: fixed;
        left:0;
        top:-13.4%;
        background: url(../img/sp/sp_navi.png) no-repeat left top;
        background-size:100% auto;
        width:25%;
        padding-top:13.4%;
        z-index: 10;
        transition:0.8s ease-in-out;
        transition-delay:0.6s;
    }
    .sp_line{
        position:absolute;
        left:39.5%;
        width:18.75%;
        height: 0;
        padding-top:2.5%;
        border-radius: 10px;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fff292+50,edbc01+50 */
        background: rgb(255,242,146); /* Old browsers */
        background: -moz-linear-gradient(top,  rgba(255,242,146,1) 50%, rgba(237,188,1,1) 50%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(255,242,146,1) 50%,rgba(237,188,1,1) 50%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(255,242,146,1) 50%,rgba(237,188,1,1) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff292', endColorstr='#edbc01',GradientType=0 ); /* IE6-9 */
        transition:0.2s ease-out;
    }
    .sp_line:nth-child(1){
        top:20%;
    }
    .sp_line:nth-child(2){
        top:32%;
    }
    .sp_line:nth-child(3){
        top:45%;
    }
    
    .sp_active .sp_line:nth-child(1){
        transform:rotate(45deg);
        top:35%;
        left:39.5%;
        z-index: 1;
    }
    .sp_active .sp_line:nth-child(2){
        opacity: 0;
    }
    .sp_active .sp_line:nth-child(3){
        transform:rotate(-45deg);
        top:35%;
        left:39.5%;
    }
    .sp_navigation{
        position:fixed;
        left:0;
        top:-100%;
        width:100%;
        height: 100%;
        background:#fbf9eb;
        z-index: 10;
        transition:0.5s ease-in-out;
        overflow: auto;
         -webkit-overflow-scrolling: touch;
    }
    .sp_navi_btn{
        position: relative;
        height: 0;
        width:100%;
    }
    .sp_navi_btn a{
        position: absolute;
        width:100%;
        height: 100%;
        left:0;
        top:0;
        background: rgba(0,0,0,0);
        display: block;
    }
    .sp_navi_btn:nth-child(1){
        background: url("../img/sp/navi/logo.jpg") no-repeat left top;
        background-size:100% auto;
        padding-top:28.5%;
    }
    .sp_navi_btn:nth-child(2){
        background: url("../img/sp/navi/menu.jpg") no-repeat left top;
        background-size:100% auto;
        padding-top:19.8%;
    }
    .sp_navi_btn:nth-child(3){
        background: url("../img/sp/navi/home.jpg") no-repeat left top;
        background-size:100% auto;
        padding-top:14%;
        margin-bottom:3.1%;
    }
    .sp_navi_btn:nth-child(4){
        background: url("../img/sp/navi/trailer.jpg") no-repeat left top;
        background-size:100% auto;
        padding-top:14%;
        margin-bottom:3.1%;
    }
    .sp_navi_btn:nth-child(5){
        background: url("../img/sp/navi/intro.jpg") no-repeat left top;
        background-size:100% auto;
        padding-top:14%;
        margin-bottom:3.1%;
    }
    .sp_navi_btn:nth-child(6){
        background: url("../img/sp/navi/story.jpg") no-repeat left top;
        background-size:100% auto;
        padding-top:14%;
        margin-bottom:3.1%;
    }
    .sp_navi_btn:nth-child(7){
        background: url("../img/sp/navi/chara.jpg") no-repeat left top;
        background-size:100% auto;
        padding-top:14%;
        margin-bottom:3.1%;
    }
    .sp_navi_btn:nth-child(8){
        background: url("../img/sp/navi/staff.jpg") no-repeat left top;
        background-size:100% auto;
        padding-top:14%;
        margin-bottom:3.1%;
    }
    .sp_navi_btn:nth-child(9){
        background: url("../img/sp/navi/song.jpg") no-repeat left top;
        background-size:100% auto;
        padding-top:14%;
        margin-bottom:3.1%;
    }
	.sp_navi_btn:nth-child(10){
        background: url("../img/sp/navi/news.jpg") no-repeat left top;
        background-size:100% auto;
        padding-top:14%;
        margin-bottom:3.1%;
    }
	.sp_navi_btn:nth-child(11){
        background: url("../img/sp/navi/media.jpg") no-repeat left top;
        background-size:100% auto;
        padding-top:14%;
        margin-bottom:3.1%;
    }
    /*.sp_navi_btn:nth-child(12){
        background: url("../img/sp/navi/ticket.jpg") no-repeat left top;
        background-size:100% auto;
        padding-top:14%;
        margin-bottom:3.1%;
    }*/
	.sp_navi_btn:nth-child(12){
        background: url("../img/sp/navi/dvd.jpg") no-repeat left top;
        background-size:100% auto;
        padding-top:14%;
        margin-bottom:10%;
    }
	
	
	
}