@charset "utf-8";

.video-js .vjs-slider:focus {
	text-shadow: none;
	box-shadow: none;
}

.video-js .vjs-time-tooltip {
	width: 50px;
	box-sizing: border-box;
}

.video-js .vjs-control-bar {
	width: 90%; 
	margin: auto;
	left: 0;
	right: 0;
	background: none;
}

.vjs-subs-caps-button {
	display: none !important;
}

.video-js .vjs-play-progress {
	background: #8d8e93;
}
.video-js .vjs-slider {
	background: rgba(141,142,148,0.7);
}
.vjs-has-started .vjs-control-bar {
	position: absolute;
	bottom: 72px;
	z-index: 2;
}

.vjs-big-play-button {
	position: absolute;
	bottom: 0;
	top: 0;
	margin: auto;
	right: 0;
	left: 0;
	z-index: 999;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder::before {
	line-height: 45px;
}

#content.live_now .vjs-control-bar {
	display: none;
}

#content.live_now .comments {
	margin: 0 0 60px !important;
}

#wrapper {
	min-height: 720px;
}

#content {
	/* background: url(../images/live/movie.jpg) no-repeat center center #000; */
	background: -webkit-linear-gradient(#650976 0%, #185c73 100%);
	background-size: cover;
	position: relative;
	transition: 0.5s;
	min-height: 720px;
}

/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){
	#wrapper, #content {
		min-height: 0;
	}
	
}

	#content .overlay_bg {
		position: absolute;
		width: 100%;
		height: 100%;
		background: url(../images/overlay_bg.png) no-repeat center center;
		background-size: cover;
		top: 0;
		left: 0;
		z-index: 1;
	}

#video_error {
	display: none;
	position: absolute;
	background: none;
	width: 100%;
	height: 9vh;
	top: 0;
	bottom: 0;
	margin: auto;
	display: none;
}

#video_error p {
	color: #fff; 
	text-align: center;
	background: none;
	font-size: 50px;
}

	#video {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 1;
	}
	#content #video-player { 
		height: 100%;
	}
	
	#content #video-player video { 
		pointer-events: none; 
	}

	#content .video-js {
		top: 0;
		left: 0;
		z-index: 1;
		/* background: #242424; */
		height: 100%;
		width: 100%;
		position: relative;
		overflow: hidden;
		opacity: 1;
		transition: opacity 1s;
		-webkit-transform-style: preserve-3d;
	}

	#content #video-player video {
		z-index: 0;
		position: absolute;
		width: 100vw;
		height: auto;
		max-width: 100%;
		min-width: 56.6vh;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	
	
	#content .inner .live_header {
		padding: 15px 0;
		position: relative;
		z-index: 1;
	}
	
		#content .inner .live_header .title_sound {
			padding: 0 0 10px;
		}
		
			#content .inner .live_header .title_sound .title {
				float: left;
				width: calc(100% - 50px);
			}
			
				#content .inner .live_header .title_sound .title .logo {
					float: left;
					width: 40px;
					margin: 0 10px 0 0;
				}
				
				#content .inner .live_header .title_sound .title h1 {
					float: left;
					text-align: center;
					width: calc(100% - 55px);
					overflow: hidden;
				}
				
					#content .inner .live_header .title_sound .title h1 span {
						display: inline-block; *display: inline; *zoom: 1;
						vertical-align: top;
						padding: 0 0 0 100%;
						margin: 10px 0 0;
						white-space: nowrap;
						font-size: 17px;
						font-family: 'Noto-Sans-JP-Light';
						line-height: 1em;
						color: #fff;
						animation: marquee 7s linear infinite;
					}
				
					@keyframes marquee {
						0% { transform: translateX(0)}
						100% { transform: translateX(-100%)}
					}
		
			#content .inner .live_header .title_sound .sound_switch {
				float: right;
				margin: 5px 0 0;
			}
			
				#content .inner .live_header .title_sound .sound_switch .sound_off {
					display: none;
				}
				
				#content .inner .live_header .title_sound .sound_switch.off .sound_off {
					display: block;
				}
				
				#content .inner .live_header .title_sound .sound_switch.off .sound_on {
					display: none;
				}
		
		#content .inner .live_header ul li {
			float: left;
			color: #fff;
			font-size: 14px;
			font-family: 'Noto-Sans-JP-Light';
			margin: 0 15px 0 0;
		}
		
		#content .inner .live_header ul li:last-child {
			margin: 0;
		}
		
		#content .inner .live_header ul .status {
			background: #ea4a62;
			font-size: 12px;
			font-family:HelveticaNeue;
			font-weight: bold;
			padding: 4px 6px;
			border-radius: 4px; 
			letter-spacing: 1px;
		}
		
		#content .inner .live_header ul .like_count {
			background: url(../images/live/like_count.svg) no-repeat left 2px/14px;
			padding: 0 0 0 20px;
		}
		
		#content .inner .live_header ul .comment_count {
			background: url(../images/live/comment_count.svg) no-repeat left 2px/14px;
			padding: 0 0 0 20px;
		}
		
	#content .inner .live_bottom {
		z-index: 1;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 15px;
		width: 90%;
		margin: 0 auto;
		max-width: 600px;
	}
	
		#content .inner .live_bottom .comments {
			-webkit-overflow-scrolling: touch;
			box-sizing: border-box;
			padding: 40px 0 0;
			height: 30vh;
			overflow-y: scroll;
			margin: 0 0 90px;
			-ms-overflow-style: none; 
			scrollbar-width: none;
			 -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 100%);
			 mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 100%);
			 bottom: 12px;
			 position: absolute;
			 z-index: 99;
			 width: 100%;
		}
		
			#content .inner .live_bottom .comments .comment_box {
				margin: 0 auto 10px;
			}
			
				#content .inner .live_bottom .comments .comment_box .avatar {
					float: left;
					width: 27px;
					height: 27px;
					color: #fff;
					font-size: 14px;
					text-align: center;
					line-height: 24px;
					border-radius: 100px; 
					margin: 0 20px 0 0;
				}
				
				#content .inner .live_bottom .comments .comment_box .black_box {
					float: left;
					width: calc(100% - 47px);
					background: rgba(0,0,0,0.6);
					border-radius: 12px; 
					padding: 12px;
					box-sizing: border-box;
				}
				
					#content .inner .live_bottom .comments .comment_box .black_box .username {
						font-size: 11px;
						color: #fff;
						font-family: 'Noto-Sans-JP-Bold';
						letter-spacing: 1px;
						padding: 0 0 8px;
					}
					
					#content .inner .live_bottom .comments .comment_box .black_box .comment {
						font-size: 13px;
						line-height: 140%;
						color: #fff;
						font-family: 'Noto-Sans-JP-Light';
					}
		
		#content .inner .live_bottom .control_bar {			
			position: absolute;
			height: 45px;
			width: 100%;
			bottom: 0;
			text-align: center;
			font-size: 0;
			z-index: 150;
		}
		
			#content .inner .live_bottom .control_bar li {
				display: inline-block; *display: inline; *zoom: 1;
				width: 45px;
				height: 45px;
				line-height: 45px;
				background: rgba(0,0,0,0.6);
				border-radius: 50%; 
				margin: 0 4.5%;
				touch-action:none;
			}
			
			#content .inner .live_bottom .control_bar .cart_btn {
				position: relative;
			}
			
				#content .inner .live_bottom .control_bar .cart_btn span {
					position: absolute;
					right: 0;
					top: 0;
					display: block;
					width: 20px;
					height: 20px;
					line-height: 18px;
					border-radius: 50%; 
					font-size: 11px;
					color: #fff;
					background: #ea4a62;
				}
			
			#content .inner .live_bottom .control_bar .like_btn {
				position: relative;
			}
			
			#content .inner .live_bottom .control_bar .like_btn .effect {
				position: absolute;
				animation: heart 3s ease;
				left: 15px;
			} 
			
			@keyframes heart {
				0% { 
					transform: translateY(0);
					opacity: 1;
				}
				100% { 
					transform: translateY(-150px); 
					opacity: 0;
				}
			}
		
		#content .inner .live_bottom .pmClose {
			display: none;
		}
	

/* ------------------------------------------------------------ purchase_menuがopenしてるとき */
#content.pmOpen {
	background-size: contain;
	transition: 0.5s;
}
	
	#content.pmOpen .live_bottom .comments,
	#content.pmOpen .live_bottom .control_bar {
		display: none;
	}
	
	#content.pmOpen .live_bottom {
		position: fixed;
		text-align: right;
		bottom: calc(65vh + 15px);
	}
			
	#content.pmOpen .live_bottom .pmClose {
		display: inline-block; *display: inline; *zoom: 1;
		font-size: 12px;
		color: #fff;
		border: solid 1px #434343;
		padding: 7px 10px;
		cursor: pointer;
	}

/* ------------------------------------------------------------ mask */
#mask {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
}

/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){

#video_error p {
	font-size: 24px;
}
}