@charset "utf-8";

/**
 *
 *  トップページ ＭＶビデオ
 *
 */

/*--------------------------------------------------------------------------
   overwrite  - 共通CSSの上書き -
---------------------------------------------------------------------------*/



/*--------------------------------------------------------------------------
  	Content
---------------------------------------------------------------------------*/

/* 再生ボタンダシワケ
-----------------------------------------------------------------*/

.vjs-controls-disabled .vjs-big-play-button,
.vjs-has-started .vjs-big-play-button,
.vjs-using-native-controls .vjs-big-play-button,
.vjs-error .vjs-big-play-button {
 	 display: block;
}
.vjs-playing .vjs-big-play-button{
	display: none;
}

/* 再生ボタン
-----------------------------------------------------------------*/
.video-js .vjs-big-play-button,
.video-js .vjs-big-play-button:hover{
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
  -webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	opacity: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 88px;
	height: 88px;
	border: none;
	margin: -44px 0 0 -44px; 
  filter:none;
	background: url(../images/index/movie_ico_play.png) no-repeat;
	background-size: 88px 88px;
}

.vjs-default-skin div.vjs-big-play-button:hover {
  -webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.vjs-default-skin div.vjs-big-play-button span{
	background: none;
}

.video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus{
	background-color: rgba(0, 0,0, 0);
}
.vjs-icon-play:before, .video-js .vjs-big-play-button:before, .video-js .vjs-play-control:before{
	content:none;
}
#video{
	width: 800px;
	height: 450px;
}

/* @SP */
@media all and (max-width: 767px) {
	/* videoの比率によって合わせる */
	#video{
		width: 100%!important;
		height: auto!important;
		max-width: 100%;
		line-height: 1;
	}
	.video-js .vjs-tech{
		position: static;
		width: 100%!important;
		height: auto!important;
		max-width: 100%;
	}
	/* コントロールバー */

	#video img.vjs-poster{
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: auto;
		margin: 0 auto;
		text-align: center;
	}
	.video-js .vjs-big-play-button,
	.video-js .vjs-big-play-button:hover{
		width: 60px;
		height: 60px;
		margin: -30px 0 0 -30px;
		background-size: 60px 60px;
	}	
}