/*---------------------
共通
-----------------------*/

.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;
}

/*-----------------------
回るボタン
------------------------*/
@keyframes hover_anim {
  0% { 
    transform: rotate(0deg);
  }
  100% { 
    transform: rotate(360deg);
  }
}
/*-----------------------
グラデーションボタン
------------------------*/
#news_more img{
	position: absolute;
	top: 0;
}
#news_more{
	display: block;
	position: relative;
	width: 236px;
    height: 34px;
	margin: 56px auto 50px;
	cursor: pointer;
	overflow: hidden;
    border: solid 2px #262b8d;
}
.news_more_btn{
	position: absolute;
    top: -110px;
    width: 500px;
    height: 300px;
    margin: 0 auto;
    left: -50%;
    transform-origin: center;
}
#news_more:hover{
	border: solid 2px rgba(255,255,255,0);
}
#news_more:hover .news_more_btn{
	background: linear-gradient(270deg, #4bceab, #e2e34a, #f78429, #4bceab, #e2e34a, #f78429);
	background-size: 1200% 1200%;
	-webkit-animation: btn_anime 5s linear infinite;
	-moz-animation: btn_anime 5s linear infinite;
	animation: btn_anime 5s linear infinite;
	border: solid 2px rgba(255,255,255,0);
}

#bnr_more img{
	position: absolute;
	top: 0;
}
#bnr_more{
	display: block;
	position: relative;
	width: 236px;
    height: 34px;
	margin: 10px auto 0;
	cursor: pointer;
	overflow: hidden;
    border: solid 2px #da0581;
}
.bnr_more_btn{
	position: absolute;
    top: -110px;
    width: 500px;
    height: 300px;
    margin: 0 auto;
    left: -50%;
    transform-origin: center;
}
#bnr_more:hover{
	border: solid 2px rgba(255,255,255,0);
}
#bnr_more:hover .bnr_more_btn{
	background: linear-gradient(270deg, #4bceab, #e2e34a, #f78429, #4bceab, #e2e34a, #f78429);
	background-size: 1200% 1200%;
	-webkit-animation: btn_anime 5s linear infinite;
	-moz-animation: btn_anime 5s linear infinite;
	animation: btn_anime 5s linear infinite;
	border: solid 2px rgba(255,255,255,0);
}

@-webkit-keyframes btn_anime {
	0%{background-position:10% 51%;
		transform: rotate(0deg);
	}
	50%{background-position:90% 50%;
		transform: rotate(180deg);
	}
	100%{background-position:10% 51%;
		transform: rotate(360deg);
	}
}
@-moz-keyframes btn_anime {
	0%{background-position:10% 51%;
		transform: rotate(0deg);
	}
	50%{background-position:90% 50%;
		transform: rotate(180deg);
	}
	100%{background-position:10% 51%;
		transform: rotate(360deg);
	}
}
@keyframes btn_anime {
	0%{background-position:10% 51%;
		transform: rotate(0deg);
	}
	50%{background-position:90% 50%;
		transform: rotate(180deg);
	}
	100%{background-position:10% 51%;
		transform: rotate(360deg);
	}
}
/*---------------------
navi
-----------------------*/
#navi{
	position: fixed;
    top: 60px;
    right: -300px;
    width: 300px;
    height: 100%;
    z-index: 10;
	background-color: rgba(255,255,255,0.95);
}
.animation{
	transition: 0.5s;
}

#navi ul{
	/*position: absolute;
	right: 0px;*/
	margin-top: 120px;
}
#navi li{
	margin-top: 28px;
}
/*menu dc*/
.menu_dc_wrap{
	position: absolute;
    right: 27px;
	padding-bottom: 10%;
}
.menu_dc{
	position: absolute;
	right: 93px;
}
.menu_dc_ig{
	position: absolute;
	right: 47px;
	transition: 0.3s;
}
.menu_dc_ig img{
	transition: 0.3s;
}
.menu_dc_ig a{
	display: block;
}
.menu_dc_ig :hover img{
	opacity: 0;
}
.menu_dc_ig :hover{
	background: url(../img/wb_common/dc_ig_over.png) no-repeat center top;
}
.menu_dc_tw{
	position: absolute;
	right: 0;
	transition: 0.3s;
}
.menu_dc_tw img{
	transition: 0.3s;
}
.menu_dc_tw a{
	display: block;
}
.menu_dc_tw:hover img{
	opacity: 0;
}
.menu_dc_tw :hover{
	background: url(../img/wb_common/dc_tw_over.png) no-repeat center top;
}

.bt_home{
	position: relative;
	left: 215px;
	width: 55px;
	height: 17px;
	background: url(../img/menu/home_over.jpg) no-repeat center left;
}
.bt_home:hover img{
	opacity: 0;
}
.bt_home:hover {
	animation: hurueru .1s  infinite;
}

.bt_about{
	position: relative;
	left: 96px;
	width: 175px;
	height: 17px;
	background: url(../img/menu/about_over.jpg) no-repeat center left;
}
.bt_about:hover img{
	opacity: 0;
}
.bt_about:hover {
	animation: hurueru .1s  infinite;
}

.bt_harleyquinn{
	position: relative;
	left: 26px;
	width: 247px;
	height: 27px!important;
}
.bt_harleyquinn:hover img{
	opacity: 0;
}
.bt_harleyquinn:hover {
	background: url(../img/menu/harley_over.png?id=1) no-repeat center left;
}
.bt_harleyquinn:hover {
	animation: hurueru .1s  infinite;
}


.bt_theater{
	width: 161px;
	position: relative;
	left: 115px;
	margin-top: 19px!important;
}
.bt_theater:hover img{
	opacity: 0;
}
.bt_theater:hover{
	background: url("../img/menu/theater_over.png")no-repeat center top;
}
.bt_theater:hover{
	animation: hurueru .1s  infinite;
}

.bt_chara{
	position: relative;
	left: 144px;
	width: 126px;
	height: 17px;
	background: url("../img/menu/characters_over.jpg") no-repeat center left;
}
.bt_chara:hover img{
	opacity: 0;
}
.bt_chara:hover {
	animation: hurueru .1s  infinite;
}


.bt_comments{
	width: 183px;
	position: relative;
	left: 89px;
	margin-top: 28px!important;
}
.bt_comments:hover img{
	opacity: 0;
}
.bt_comments:hover{
	background: url("../img/menu/comments_over.png?id=1")no-repeat center top;
}
.bt_comments:hover{
	animation: hurueru .1s  infinite;
}

/*.bt_comments{
	position: relative;
	left: 165px;
	width: 244px;
	height: 24px;
	background: url("../img/menu/comments_over.png") no-repeat center left;
}
.bt_comments:hover img{
	opacity: 0;
}
.bt_comments:hover {
	animation: hurueru .1s  infinite;
}*/

.bt_hukikae{
	position: relative;
	left: 185px;
	width: 87px;
	height: 17px;
	background: url("../img/menu/hukikae_over.jpg") no-repeat center left;
}
.bt_hukikae:hover img{
	opacity: 0;
}
.bt_hukikae:hover {
	animation: hurueru .1s  infinite;
}

.bt_news{
	width: 53px;
	background: url("../img/menu/news_over.jpg")no-repeat center top;
	position: relative;
	left: 217px;
}
.bt_news:hover img{
	opacity: 0;
}
.bt_news:hover{
	animation: hurueru .1s  infinite;
}

.bt_dvd{
	width: 230px;
	position: relative;
	left: 41px;
	margin-top: 19px!important;
}
.bt_dvd:hover img{
	opacity: 0;
}
.bt_dvd:hover{
	background: url("../img/menu/dvd_over.png")no-repeat center top;
}
.bt_dvd:hover{
	animation: hurueru .1s  infinite;
}

.bt_theater{
	width: 161px;
	position: relative;
	left: 115px;
	margin-top: 19px!important;
}
.bt_theater:hover img{
	opacity: 0;
}
.bt_theater:hover{
	background: url("../img/menu/theater_over.png")no-repeat center top;
}
.bt_theater:hover{
	animation: hurueru .1s  infinite;
}

.menu_logo{
	position: absolute;
    top: 37px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 66px;
	display: block;
}
.open{
	position: fixed;
    top: 78px;
	cursor: pointer;
	z-index: 2;
	right: -30px;
	right: -150px;
	transition: 0.3s;
	background: url(../img/menu/open_over.png) no-repeat top right -1px;
}
.open img{
	transition: 0.3s;
}
.open:hover img{
	opacity: 0;
}
.open:hover{
	right: -20px!important;
}

.close{
	position: absolute;
    top: 30px;
	cursor: pointer;
	z-index: 11;
	right: 30px;
}
.close:hover{
	animation: hurueru .1s  infinite;
}
.left_mask{
    position: fixed;
    right:0;
    top:0;
    height: 100%;
    background: #000;
    z-index: 1001;
}
/*-----------------------
ブルブルボタン
------------------------*/
@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}




@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
	-----------------------*/
	#navi_sp{
		position: fixed;
		width: 100%;
		right: 0;
		top: -150%;
		z-index: 900;
		background: #fff;
		height: 100%;
		overflow: auto;
	}
	.menu_title{
		margin-bottom: 13%!important;
	}
	.open_sp{
		position: fixed;
		top: 60px;
		left: 10px;
		height: 0%;
		width: 14%;
		padding-bottom: 15%;
		z-index: 10;
	}
	.close_sp{
		position: absolute;
		top: 0;
		left: 10px;
		height: 0%;
		width: 16%;
	}
	.menu_item_sp{
		position: absolute;
    	top: 710px;
		z-index: 10;
	}
	.menu_title_sp{
		margin: 40px 0;
	}
	#navi_sp ul{
		margin-top:16%;
	}
	#navi_sp li {
    	width: 100%!important;
		margin-bottom: 12%;
	}
	
	/*DCSNSボタン*/
	.sp_menu_dc_wrap{
		margin-top: 0;
		padding-bottom: 0px;
	}
	.dcico_wrap {
		width: 29%;
		margin: 0 auto 50%;
	}
	.sp_menu_dc_ig{
		float: left;
		width: 50%;
		background: url("../img/sp/menu/menu_ig_over.jpg") no-repeat;
		background-size: 100% auto;
	}
	.sp_menu_dc_ig img:hover{
		opacity: 0;
	}
	.sp_menu_dc_tw{
		float: right;
		width: 50%;
		background: url("../img/sp/menu/menu_tw_over.jpg") no-repeat;
		background-size: 100% auto;
	}
	.sp_menu_dc_tw img:hover{
		opacity: 0;
	}
	
	/*定番ボタン*/
	.sp_menu_home{
		background: url("../img/sp/menu/home_over.jpg") no-repeat center top ;
		background-size: 100% auto;
	}
	.sp_menu_home:hover img{
		opacity: 0;
	}
	.sp_menu_home:hover {
		animation: hurueru .1s  infinite;
	}
	
	.sp_menu_about{
		background: url("../img/sp/menu/about_over.jpg") no-repeat center top ;
		background-size: 100% auto;
	}
	.sp_menu_about:hover img{
		opacity: 0;
	}
	.sp_menu_about:hover {
		animation: hurueru .1s  infinite;
	}
	
	.sp_menu_harleyquinn{
		background: url("../img/sp/menu/harleyquinn_over.jpg") no-repeat center top ;
		background-size: 100% auto;
	}
	.sp_menu_harleyquinn:hover img{
		opacity: 0;
	}
	.sp_menu_harleyquinn:hover {
		animation: hurueru .1s  infinite;
	}
	
	.sp_menu_chara{
		background: url("../img/sp/menu/characters_over.jpg") no-repeat center top ;
		background-size: 100% auto;
	}
	.sp_menu_chara:hover img{
		opacity: 0;
	}
	.sp_menu_chara:hover {
		animation: hurueru .1s  infinite;
	}
	
	.sp_menu_comments{
		background: url("../img/sp/menu/comments_over.jpg") no-repeat center top ;
		background-size: 100% auto;
	}
	.sp_menu_comments:hover img{
		opacity: 0;
	}
	.sp_menu_comments:hover {
		animation: hurueru .1s  infinite;
	}
	
	.sp_menu_hukikae{
		background: url("../img/sp/menu/hukikae_over.jpg") no-repeat center top ;
		background-size: 100% auto;
	}
	.sp_menu_hukikae:hover img{
		opacity: 0;
	}
	.sp_menu_hukikae:hover {
		animation: hurueru .1s  infinite;
	}
	
	.sp_menu_news{
		background: url("../img/sp/menu/news_over.jpg") no-repeat center top ;
		background-size: 100% auto;
		margin-bottom: 10%!important;
	}
	.sp_menu_news:hover img{
		opacity: 0;
	}
	.sp_menu_news:hover {
		animation: hurueru .1s  infinite;
	}
	
	.sp_menu_dvd{
		background: url("../img/sp/menu/dvd_over.jpg") no-repeat center top ;
		background-size: 100% auto;
		margin-bottom: 10%!important;
	}
	.sp_menu_dvd:hover img{
		opacity: 0;
	}
	.sp_menu_dvd:hover {
		animation: hurueru .1s  infinite;
	}
	
	.sp_menu_theater{
		background: url("../img/sp/menu/theater_over.jpg") no-repeat center top ;
		background-size: 100% auto;
	}
	.sp_menu_theater:hover img{
		opacity: 0;
	}
	.sp_menu_theater:hover {
		animation: hurueru .1s  infinite;
	}
	
	/*---------------------
	グラデーションボタン
	-----------------------*/
	#news_more {
		width: 46.7%;
		height: 0;
		padding-top: 9%;
		margin: 45px auto 0px;
		border: solid 1px #262b8d;
	}
	#news_more img{
		position: absolute;
		top: 5px;
	}
	.news_more_btn {
		position: absolute;
		top: -210px;
		width: 200%;
		height: 500px;
		margin: 0 auto;
		left: 50%;
		right: 0;
		margin-left: -100%;
		transform-origin: center;
	}

	#bnr_more {
		width: 46.7%;
		height: 0;
		padding-top: 9%;
		margin: 0 auto 0px;
		border: solid 1px #da0581;
	}
	#bnr_more img{
		position: absolute;
		top: 5px;
	}
	.bnr_more_btn {
		position: absolute;
		top: -210px;
		width: 200%;
		height: 500px;
		margin: 0 auto;
		left: 50%;
		right: 0;
		margin-left: -100%;
		transform-origin: center;
	}


}