@charset "utf-8";

/***********************
youtube
************************/
#fade{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#fff;
	z-index:989;
}

#v_fade {
	position: fixed;
	overflow: auto;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    opacity: 1;
    /* background: linear-gradient(rgba(77, 174, 167, 0.9) 0%, rgba(125, 219, 198, 0.9) 35%, rgba(223, 233, 190, 0.9) 74%); */
	background-color: rgba(0,0,0,1);
	opacity: 0.6;
    z-index: 998;
}

#video_bg {
	opacity: 1;
  background-color: rgba(0, 0, 0);
  position: relative;
  left: 50%;
	margin-left: -550px;
  top: 60px;
  width: 1100px;
  height: 935px;
}

/* トレーラー本体 */
#videoPlayer {
	position:absolute;
	width:990px;
	height:554px;
	z-index:999;
	padding:0;
	left:50%;
	top:190px;
	margin-left:-495px;
	z-index:990;
}

#videoPlayer jsframe{
	width:990px;
	height:600px;
}

#youtube {
	cursor:pointer;
	width:100px;
	height:20px;
	line-height:20px;
	background:#333;
	color:#FFFFFF;
	text-align:center;
}


/* 閉じるボタン */
#close{
    width: 43px;
    height: 43px;
	cursor:pointer;
}
.close_icon {
    position: absolute;
    width: 42px;
    height: 65px;
    left: 0;
    top: 0;
    background: url("../img/common/bt_close.png") no-repeat left top;
	background-size: 42px auto;
}

#closeBtn {
	position: absolute;
    width: 42px;
    height: 65px;
    cursor: pointer;
	right: -26px;
    top: -99px;
    overflow: hidden;
    cursor: pointer;
	transition: 0.3s;
}

#closeBtn:hover{
	opacity: 0.7;
}
/*#closeBtn:hover .close_icon{
	transform: rotate(-180deg) scale(0.7);
}*/


/* ナビゲーション */
#movieNavi{
	position: absolute;
	width:1000px;
	height:530px;
	top: 570px;
	left: 50%;
	margin-left: -500px;
	padding-bottom: 50px;
	font-family: "ヒラギノ角ゴ", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "MS P Gothic";
}

#movieNavi ul{
	list-style:none;
}

#movieNavi ul li{
	list-style:none;
	float:left;
	margin:5px;
	position:relative;
	width:323px;
/*	width:488px;*/
	height:38px;
	line-height:38px;
	/*font-weight:bold !important;*/
}

#movieNavi ul a:link{
	text-decoration:none;
}

/*ロールオーバー設定*/
.thm_btn{
	margin:0px;
	width:323px;
/*	width:488px;*/
	background-color:#000000;
	border:2px #CFF solid;
	color:#CFF;
	font-size:16px;
	text-align:center;
	/*font-weight:bold !important;*/
}

.thm_btn_over{
	position:absolute;
	left:0;
	top:0;
	margin:0px;
	width:323px;
/*	width:488px;*/
	background-color:#333;
	border:2px #DDD solid;
	color:#FFF;
	font-size:16px;
	text-align:center;
	/*font-weight:bold !important;*/
}

/* #trailer{
	cursor:pointer;
} */

#m_trailer{
	cursor:pointer;
}

.nicon{
	position:absolute;
	top: 8px;
	left: 8px;
	z-index:1;
}

/*---------------
top埋め込み用
----------------*/
#yt_load_frame{
	position: relative;
	position: absolute;
	width:610px;
	top: 20px;
	right: 50px;
}
#yt_load_frame img{
	vertical-align: top;
}
#yt_prev{
    position: absolute;
    left: 0;
    top: 0;
    width: 610px;
    height: 343px;
    background: #000;
}
#yt_hitarea{
    position: absolute;
    left: 0;
    top: 0;
    width: 610px;
    height: 343px;
    background: rgba(0,0,0,0.5);
	cursor:pointer;
	transition:0.3s;
}
.yt_cover{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
#yt_video{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
#yt_hitarea:hover{
    background: rgba(0,0,0,0);
}
#play_icon{
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-33px;
	margin-top:-23.5px;
	background:url(../img/common/play_r.png) no-repeat center center;
	transition:0.3s;
}
#yt_hitarea:hover #play_icon img{
	opacity:0;
}
#yt_name{
    position: absolute;
    left: 0;
    top: 355px;
    width: 610px;
    height: 10px;
	text-align:center;
	font-size:14px;
	font-weight:bold;
}

#yt_icons{
    position: absolute;
    left: 0;
    top: 373px;
    width: 610px;
    height: 10px;
	text-align:center;
}
.icons{
	width:9px;
	height:9px;
	border-radius:100%;
	background:#000;
	display:inline-table;
	cursor:pointer;
	margin:0 5px;
}
.icon_target{
	background:#f1c232 !important;
}

/*上書き*/
#yt_name{
	color: #fff;
}
#yt_load_frame{
	position: absolute;
	top: 20px;
	left: 50%;
	margin-left: -60px;
	width: 640px;
    height: 343px;
}
.icons {
    background: #fff;
    display: block;
    margin: 10px 0;
}
.icon_target{
	background:#f1c232 !important;
}
#yt_icons {
    position: absolute;
    left: 0;
    left: 620px;
    top: 373px;
    top: 50%;
    width: 610px;
    height: 125px;
    text-align: center;
    transform: translateY(-50%);
}

.sp_3 .thm_btn{
	font-size:14px !important;
}
.sp_3 .thm_btn_over{
	font-size:14px !important;
}

@media screen and (min-width: 0px) and (max-width: 800px) {
	#v_fade{
		background: initial;
	}
	#video_bg {
		overflow:auto;
		opacity: 1;
		position: relative;
		left: 0;
		top: 0;
		margin-left: initial;
		width: 100%;
		height: 100%;
	}
	#closeBtn{
		height: 0;
		padding-top: 13%;
		top: -24%;
		right: 0;
		width: 8%;
	}
    #closeBtn .close_icon{
        position: absolute;
        width:100%;
        height: 100%;
        left:0;
        top:0;
		background-size: 100% auto;
    }
	.sp_2 .thm_btn{
		padding: 12px 0;
		font-size:11px !important;
		line-height: 14px !important;
		height:  auto !important;
	}
	.sp_2 .thm_btn_over{
		padding: 12px 0;
		font-size:11px !important;
		line-height: 14px !important;
		height:  auto !important;
	}
	.sp_3 .thm_btn{
		padding: 5px 0;
		font-size:11px !important;
		line-height: 14px !important;
		height:  auto !important;
	}
	.sp_3 .thm_btn_over{
		padding: 5px 0;
		font-size:11px !important;
		line-height: 14px !important;
		height:  auto !important;
	}

	#videoPlayer {
		position: absolute;
		width: 90%!important;
		height: auto!important;
		padding: 0!important;
		padding-top: 50.6%!important;
		left: 0!important;
		margin-left: 5%!important;
		z-index: 999!important;
	}
	#videoPlayer iframe{
		position: absolute;
		top: 0;
		/*left: 2.5%;*/
		width: 100%;
		height: 100%;
	}
	#movieNavi{
		width: 102.5%;
		left: 0;
		right: 0;
		top: 0;
		margin-top: 57%;
		margin: 57% 0 0 -1%;
	}
	#movieNavi ul li{
		width: 47.5%!important;
		margin: 1%!important;
	}
	.thm_btn,.thm_btn_over{
		width: 100%!important;
		font-size: 11px!important;
		line-height: 38px;
	}
	.sp_font{
		font-size: 10px!important;
	}
	.sp_thumb {
		overflow: hidden;
		background: url(../img/youtube/11HNtYJ8YHY.jpg) no-repeat center #000;
		background-size: 100% auto;
	}
	.m_list span{
		display: block;
	}
	.nicon {
		top: -2px!important;
		left: -6px!important;
		transform: scale(0.6);
	}

}