#top_fade{
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 989;	
}
/*---------------------
共通
-----------------------*/

.sp_view{
	display:none !important;
}
.pc_view{
	display:block;
}

/*hover_opacity*/
.over_anim{
	transition:0.3s;
}
.over_anim:hover{
	opacity:0.8 !important;
}
/*hover_画像*/
.over_anim2 img{
	transition:0.3s;
}
.over_anim2 :hover{
	opacity:0 !important;
}


/*---------------------
menu
-----------------------*/
.menu_logo{
	position: absolute;
    top: 37px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 66px;
	display: block;
}
.open{
	position: fixed;
    top: 0;
	cursor: pointer;
	z-index: 2;
/*	left: 0;*/
}
.menu_close{
	position: fixed;
    top: 100px;
	cursor: pointer;
	z-index: 15;
/*	left: -300px;*/
	display: none;
}
.close_icon2{
	margin-top: 2px;
	margin-left: 7px;
    border: solid 1px #000;
/*	transition: 0.3s;*/
}
/*
.menu_close:hover .close_icon2{
	transform: scale(0.9);
}
*/
.close_line{
    position: absolute;
    width:26px;
    height: 13px;
    transform-origin: center center;
    border-radius: 2px;
    overflow: hidden;
}
.close_l{
    left:6px;
    top: 20px;
}
.close_r{
    left: 6px;
    top: 20px;
}
.close_l2{
    left: 6px;
    top: 33px;
}
.close_r2{
    left: 6px;
    top: 33px;
}
.close_b{
    position: absolute;
    width:26px;
    height: 100%;
    left:0;
    top:0;
    overflow: hidden;
    transition: 0s;
}

.close_l2 .close_b img{
    margin-top:-13px;
    transition: 0s;
}
.close_r2 .close_b img{
    margin-top:-13px;
    transition: 0s;
}

/*
.close_l .close_b{
    background: #f08437;
    background: url("../img/common/close_l.png") no-repeat left top;
}
.close_r .close_b{
    background: #f08437;
    background: url("../img/common/close_r.png") no-repeat right top;
}
.close_l2 .close_b{
    background: #f08437;
    background: url("../img/common/close_r.png") no-repeat left bottom;
}
.close_r2 .close_b{
    background: #f08437;
    background: url("../img/common/close_l.png") no-repeat right bottom;
}
*/
.left_mask{
    position: fixed;
    right:0;
    top:0;
    height: 100%;
    background: #000;
    z-index: 1001;
}


/* 左上・左下 */
.close_def:hover .close_l .close_b{
    animation: animec 0.5s linear 0s 1 alternate;
}
.close_def:hover .close_l .close_b img{
    animation: animei 0.5s linear 0s 1 alternate;
}
.close_def:hover .close_l2 .close_b{
    animation: animec 0.5s linear 0.05s 1 alternate;
}
.close_def:hover .close_l2 .close_b img{
    animation: animei 0.5s linear 0.05s 1 alternate;
}

.menu_close_anim .close_l .close_b{
    animation: animecc 0.4s ease 0s 1 alternate;
}
.menu_close_anim .close_l .close_b img{
    animation: animeii 0.4s ease 0s 1 alternate;
}
.menu_close_anim .close_l2 .close_b{
    animation: animecc 0.4s ease 0.05s 1 alternate;
}
.menu_close_anim .close_l2 .close_b img{
    animation: animeii 0.4s ease 0.05s 1 alternate;
}
@keyframes animec {
    0% {width: 26px;left:0;}
    50% {width: 0;left:26px;}
    51% {width: 0;left:0;}
    100% {width: 26px;left:0;}
}
@keyframes animei {
    0% {margin-left: 0;}
    50% {margin-left: -26px;}
    51% {margin-left:0;}
    100% {margin-left: 0;}
}
@keyframes animecc {
    0% {transform:scale(0)}
    50% {transform:scale(0)}
    100% {transform:scale(1)}
}
@keyframes animeii {
    0% {transform:scale(0)}
    50% {transform:scale(0)}
    100% {transform:scale(1)}
}
/* 右上・右下 */
.close_def:hover .close_r .close_b{
    animation: animec2 0.5s linear 0.1s 1 alternate;
}
.close_def:hover .close_r .close_b img{
    animation: animei2 0.5s linear 0.1s 1 alternate;
}
.close_def:hover .close_r2 .close_b{
    animation: animec2 0.5s linear 0.15s 1 alternate;
}
.close_def:hover .close_r2 .close_b img{
    animation: animei2 0.5s linear 0.15s 1 alternate;
}
.menu_close_anim .close_r .close_b{
    animation: animec3 0.4s ease 0.1s 1 alternate;
}
.menu_close_anim .close_r .close_b img{
    animation: animei3 0.4s ease 0.1s 1 alternate;
}
.menu_close_anim .close_r2 .close_b{
    animation: animec3 0.4s ease 0.15s 1 alternate;
}
.menu_close_anim .close_r2 .close_b img{
    animation: animei3 0.4s ease 0.15s 1 alternate;
}
@keyframes animec2 {
    0% {width: 26px;left:0;}
    50% {width: 0;left:0;}
    51% {width: 0;left:26px;}
    100% {width: 26px;left:0;}
}
@keyframes animei2 {
    0% {margin-left: 0;}
    50% {margin-left:0;}
    51% {margin-left: -26px;}
    100% {margin-left: 0;}
}
@keyframes animec3 {
    0% {transform:scale(0)}
    50% {transform:scale(0)}
    100% {transform:scale(1)}

}
@keyframes animei3 {
    0% {transform:scale(0)}
    50% {transform:scale(0)}
    100% {transform:scale(1)}
}


.menu_wrap{
    position: absolute;
    top: 100px;
    right: 40px;
    z-index: 1;
    height: 32px;
    width: 35px;
}
.menu_def:hover .menu_line1{
    animation: anime1 0.3s linear 0s 1 alternate;
}
.menu_wrap_anim .menu_line1{
    animation: anime11 0.4s ease 0s 1 alternate;
}
@keyframes anime1 {
    0% {width: 35px;left:0;}
    50% {width: 0;left:0;}
    51% {width: 0;left:35px;}
    100% {width: 35px;left:0}
}
@keyframes anime11 {
    0% {width: 0;right:0;}
    70% {width: 0;right:0;}
    71% {width: 0;right:35px;}
    100% {width: 35px;right:0}
}
.menu_def:hover .menu_line2{
    animation: anime2 0.5s linear 0s 1 alternate;
}
.menu_wrap_anim .menu_line2{
    animation: anime22 0.5s ease 0s 1 alternate;
}

@keyframes anime2 {
    0% {width: 20px;left:15px;}
    50% {width: 0;left:15px;}
    51% {width: 0;left:35px;}
    100% {width: 20px;left:15px;}
}
@keyframes anime22 {
    0% {width: 0 !important;right:0 !important;}
    70% {width: 0 !important;right:0 !important;}
    71% {width: 0 !important;right:20px !important;}
    100% {width: 20px !important;right:0 !important;}
}

.menu{
	position: absolute;
    top: 0;
    left: 0;
}
.menu_line1{
	position: absolute;
	bottom: 8px;
	right: 0;
	width: 35px;
	height: 2px;
	background: #f08437;
    transition: 0s;
}
.menu_line2{
	position: absolute;
	bottom: 0;
	left: 15px;
	width: 20px;
	height: 2px;
	background: #f08437;
    transition: 0s;
}
#navi{
	position: fixed;
    top: 60px;
    right: -300px;
    width: 300px;
    height: 100%;
    z-index: 10;
	background-color: #000;
    overflow: hidden;
}
.animation{
	transition: 0.5s;
}

#navi ul{
	margin-top: 128px;
}

.bt_home{
    position: relative;
    width: 100%;
    height: 50px;
    margin-left: 0;
}
/*homeボタン*/
.bt_home:nth-child(1) .hover_ef{
    position: absolute;
    right: -200px;
    top: 0;
    width: 200px;
    height: 100%;
    background: url("../img/menu/menu_btn_hover.png") no-repeat  left center;
    transition: 0.3s ease-in-out;
}
.bt_home:nth-child(1) .rollover_bt_fade_{
	display: block;
    width: 100% !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
}
.bt_home:nth-child(1) .rollover_bt_fade_ img{
	position: absolute;
    right: 50px;
    top: 16px;
}
.bt_home:nth-child(1) .rollover_bt_fade_::after{
	content:"";
	position: absolute;
	right:0;
	top:0;
	width:100%;
	height: 100%;
	background: url("../img/menu/home_over.png") no-repeat 195px 16px;
	opacity: 0;
    transition: 0.3s ease-in-out;
}
.bt_home:nth-child(1):hover .rollover_bt_fade_::after{
	opacity: 1;	
}

/*aboutボタン*/
.bt_home:nth-child(2) .hover_ef{
    position: absolute;
    right: -254px;
    top: 0;
    width: 254px;
    height: 100%;
    background: url("../img/menu/menu_btn_hover.png") no-repeat  left center;
    transition: 0.3s ease-in-out;
}
.bt_home:nth-child(2) .rollover_bt_fade_{
	display: block;
    width: 100% !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
}
.bt_home:nth-child(2) .rollover_bt_fade_ img{
	position: absolute;
    right: 50px;
    top: 16px;
}
.bt_home:nth-child(2) .rollover_bt_fade_::after{
	content:"";
	position: absolute;
	right:0;
	top:0;
	width:100%;
	height: 100%;
	background: url("../img/menu/about_over.png") no-repeat 64px 16px;
	opacity: 0;
    transition: 0.3s ease-in-out;
}
.bt_home:nth-child(2):hover .rollover_bt_fade_::after{
	opacity: 1;	
}

/*commentsボタン*/
.bt_home:nth-child(3) .hover_ef{
    position: absolute;
    right: -230px;
    top: 0;
    width: 230px;
    height: 100%;
    background: url("../img/menu/menu_btn_hover.png") no-repeat  left center;
    transition: 0.3s ease-in-out;
}
.bt_home:nth-child(3) .rollover_bt_fade_{
	display: block;
    width: 100% !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
}
.bt_home:nth-child(3) .rollover_bt_fade_ img{
	position: absolute;
    right: 50px;
    top: 16px;
}
.bt_home:nth-child(3) .rollover_bt_fade_::after{
	content:"";
	position: absolute;
	right:0;
	top:0;
	width:100%;
	height: 100%;
	background: url("../img/menu/comments_over.png") no-repeat 139px 16px;
	opacity: 0;
    transition: 0.3s ease-in-out;
}
.bt_home:nth-child(3):hover .rollover_bt_fade_::after{
	opacity: 1;	
}

/*newsボタン*/
.bt_home:nth-child(4) .hover_ef{
    position: absolute;
    right: -200px;
    top: 0;
    width: 200px;
    height: 100%;
    background: url("../img/menu/menu_btn_hover.png") no-repeat  left center;
    transition: 0.3s ease-in-out;
}
.bt_home:nth-child(4) .rollover_bt_fade_{
	display: block;
    width: 100% !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
}
.bt_home:nth-child(4) .rollover_bt_fade_ img{
	position: absolute;
    right: 50px;
    top: 16px;
}
.bt_home:nth-child(4) .rollover_bt_fade_::after{
	content:"";
	position: absolute;
	right:0;
	top:0;
	width:100%;
	height: 100%;
	background: url("../img/menu/news_over.png") no-repeat 194px 16px;
	opacity: 0;
    transition: 0.3s ease-in-out;
}
.bt_home:nth-child(4):hover .rollover_bt_fade_::after{
	opacity: 1;	
}

/*theaterボタン*/
.bt_home:nth-child(5) .hover_ef{
    position: absolute;
    right: -230px;
    top: 0;
    width: 230px;
    height: 100%;
    background: url("../img/menu/menu_btn_hover.png") no-repeat  left center;
    transition: 0.3s ease-in-out;
}
.bt_home:nth-child(5) .rollover_bt_fade_{
	display: block;
    width: 100% !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
}
.bt_home:nth-child(5) .rollover_bt_fade_ img{
	position: absolute;
    right: 50px;
    top: 16px;
}
.bt_home:nth-child(5) .rollover_bt_fade_::after{
	content:"";
	position: absolute;
	right:0;
	top:0;
	width:100%;
	height: 100%;
	background: url("../img/menu/theater_over.png") no-repeat 161px 16px;
	opacity: 0;
    transition: 0.3s ease-in-out;
}
.bt_home:nth-child(5):hover .rollover_bt_fade_::after{
	opacity: 1;	
}

/*dvdボタン*/
.bt_home:nth-child(6) .hover_ef{
    position: absolute;
    right: -254px;
    top: 0;
    width: 254px;
    height: 100%;
    background: url("../img/menu/menu_btn_hover.png") no-repeat  left center;
    transition: 0.3s ease-in-out;
}
.bt_home:nth-child(6) .rollover_bt_fade_{
	display: block;
    width: 100% !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
}
.bt_home:nth-child(6) .rollover_bt_fade_ img{
	position: absolute;
    right: 50px;
    top: 16px;
}
.bt_home:nth-child(6) .rollover_bt_fade_::after{
	content:"";
	position: absolute;
	right:0;
	top:0;
	width:100%;
	height: 100%;
	background: url("../img/menu/dvd_over.png") no-repeat 62px 16px;
	opacity: 0;
    transition: 0.3s ease-in-out;
}
.bt_home:nth-child(6):hover .rollover_bt_fade_::after{
	opacity: 1;	
}

/*▼常に一番下に記述*/
.bt_home:nth-child(1):hover .hover_ef{
	right:-60px;
}
/*▼常に一番下に記述*/
.bt_home:nth-child(2):hover .hover_ef{
	right:0;
}
/*▼常に一番下に記述*/
.bt_home:nth-child(3):hover .hover_ef{
	right:-30px;
}
/*▼常に一番下に記述*/
.bt_home:nth-child(4):hover .hover_ef{
	right:-60px;
}
/*▼常に一番下に記述*/
.bt_home:nth-child(5):hover .hover_ef{
	right:-60px;
}
/*▼常に一番下に記述*/
.bt_home:nth-child(6):hover .hover_ef{
	right:0px;
}










@media screen and (min-width: 0px) and (max-width: 800px) {
	/*---------------------
	共通
	-----------------------*/
	.sp_view{
		display:block !important;
	}
	.pc_view{
		display:none !important;
	}
	
	/*hover*/
	.over_anim{
		transition:0s;
	}
	.over_anim:hover{
		opacity:1;
	}

	/*---------------------
	header
	-----------------------*/
	.sp_title_link{
		position: absolute;
		width: 40%;
		height: 0;
		padding-bottom: 23%;
		top: 60px;
		right: 0;
		left: 0;
		margin: 0 auto;
		z-index: 1;
		/*background: rgba(0,0,0,0.8);*/
	}
	/*---------------------
	navi
	-----------------------*/
	#sp_navi{
		position: fixed;
		width: 100%;
		right: 0;
		top: -100%;
		z-index: 900;
		background: #000;
		height: 100%;
		overflow: auto;
	}
	.open_sp{
		position: fixed;
		top: 70px;
		right: 10px;
		height:0%;
		width: 12%;
		padding-bottom:15%;
		z-index: 20;
	}
	.menu_close_sp{
		position: absolute;
		top: 0;
		right: 10px;
        height: 0%;
		width: 12%;
	}

	#sp_navi ul{
		margin-top: 23%;
	}
	#sp_navi li {
    	width: 100%!important;
		margin-bottom: 20px;
	}
	.sp_menu_home{
		background: url("../img/sp/menu/home_over.jpg") no-repeat center bottom;
		background-size: 100% auto;
	}
	.sp_menu_home img:hover{
		opacity: 0;
	}
	/*.sp_menu_intro{
		background: url("../img/sp/menu/intro_over.jpg") no-repeat center bottom;
		background-size: 100% auto;
	}
	.sp_menu_intro img:hover{
		opacity: 0;
	}*/
	.sp_menu_about{
		background: url("../img/sp/menu/about_over.jpg") no-repeat center bottom;
		background-size: 100% auto;
	}
	.sp_menu_about img:hover{
		opacity: 0;
	}
	.sp_menu_comments{
		background: url("../img/sp/menu/comments_over.jpg") no-repeat center bottom;
		background-size: 100% auto;
	}
	.sp_menu_comments img:hover{
		opacity: 0;
	}
	.sp_menu_news{
		background: url("../img/sp/menu/news_over.jpg") no-repeat center bottom;
		background-size: 100% auto;
	}
	.sp_menu_news img:hover{
		opacity: 0;
	}
	.sp_menu_theater{
		background: url("../img/sp/menu/theater_over.jpg") no-repeat center bottom;
		background-size: 100% auto;
	}
	.sp_menu_theater img:hover{
		opacity: 0;
	}
	.sp_menu_dvd{
		background: url("../img/sp/menu/dvd_over.jpg") no-repeat center bottom;
		background-size: 100% auto;
	}
	.sp_menu_dvd img:hover{
		opacity: 0;
	}
	
}