@charset "utf-8";

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

/* トレーラー本体 */
#videoPlayer {
	position:absolute;
	width:990px;
	height:554px;
	z-index:999;
	padding:0;
	left:50%;
	top:100px;
	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: 60px;
    height: 60px;
	cursor:pointer;
}

#closeBtn{
	position: absolute;
    width: 60px;
    height: 60px;
    cursor: pointer;
    right: 0;
    top: -75px;
    overflow: hidden;
}
#closeBtn {
	position: absolute;
    width: 60px;
    height: 60px;
    cursor: pointer;
    right: 0;
    top: -75px;
    overflow: hidden;
    background: url("../img/close.jpg") no-repeat center top;
}
#closeBtn:hover{
	opacity: 0.8;
}
.close_icon{
	background: url("../img/close.jpg") center;
	background-size: 60px auto;
	width: 60px;
	height: 60px;
}

/* ナビゲーション */
#movieNavi{
	position: absolute;
	width:1000px;
	top: 560px;
	left: 50%;
	margin-left: -500px;
	padding-bottom: 50px;
  font-family: vdl-v7mincho, sans-serif;
}

#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: 12px;
	left: 10px;
	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{
		overflow:auto;
		-webkit-overflow-scrolling: touch;
	}
	#closeBtn{
		width: 14%;
		height: 0;
    padding-top:14%;
		top: 2%;
    position: fixed;
	}
    #closeBtn .close_icon{
        position: absolute;
        width:100%;
        height: 100%;
        left:0;
        top:0;
      background:#ff0012;
    }
  #closeBtn a{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    display:block;
  }
  #closeBtn a:before {
    position: absolute;
    width: 40%;
    left: 30%;
    height: 3px;
    background: #FFF;
    transform-origin: center center;
    content:"";
    top: 50% !important;
    transform: rotate(45deg);
    z-index:1;
  }
  #closeBtn a:after {
    position: absolute;
    width: 40%;
    left: 30%;
    height: 3px;
    background: #FFF;
    transform-origin: center center;
    content:"";
    top: 50% !important;
    transform: rotate(-45deg);
  }    
	.sp_2{
	}
	.sp_2 .thm_btn{
		padding: 5px 0;
		/*font-size:9px !important;*/
		line-height: 14px !important;
		height:  auto !important;
	}
	.sp_2 .thm_btn_over{
		padding: 5px 0;
		/*font-size:9px !important;*/
		line-height: 14px !important;
		height:  auto !important;
	}
	.sp_3 .thm_btn{
		padding: 5px 0;
		font-size:8px !important;
		line-height: 14px !important;
		height:  auto !important;
	}
	.sp_3 .thm_btn_over{
		padding: 5px 0;
		font-size:8px !important;
		line-height: 14px !important;
		height:  auto !important;
	}
	
	#videoPlayer{
		width: 100%;
		left: 0; 
		top: 100px;
		margin-left: 0; 
		padding-bottom: 56.25%;
		height:0px !important;
	}
	#videoPlayer iframe{
		position: absolute;
		top: 0;
		left: 2.5%;
		width: 95%;
		height: 95%;	
    margin-top:4%;
	}
	#movieNavi{
		width: 98.4%;
		left: 0;
		right: 0;
		top: 0;
		margin: 58.5% 0 0 1.5%;
	}
	#movieNavi ul li{
		width: 47%!important;
    margin: 1%;
	}
  
	#movieNavi ul li:nth-child(odd){
		margin-right: 1%!important;
	}
	.thm_btn,.thm_btn_over{
		width: 100%!important;
		font-size: 3.4vw!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 {
		left: -4px!important;
		transform: scale(0.7);
	}
	#closeBtn {
		right: 2.7%;
	}
	
	/*-----------------------
	SP
	------------------------*/
	#video_title{
		/*margin-bottom: 10px;*/
	}
	#video_wrap {
		padding: 0;
		background-size:100% auto;
	}
	#iframeWrap {
		position: relative;
		width:auto;
		padding-top: 56.25%;
		background:#000000;
	}
	#iframeWrap iframe {
		position: absolute;
		top: 0;
		left: 0px;
		width: 100%;
		height: 100%;
	}
	#video_title img{
		display:block;
	}

	/*------
	ボタン
	------*/
	.yt_tr{
		margin-top: 3.28%;
	}
	.yt_tr:first-child{
		margin-top: 0;
	}
	#VideoNaviWrap{
		font-size:12px;
		line-height:14px;
		list-style:none;
		position:relative;
		overflow:hidden;
		width:100%;
		border-collapse:collapse;
		margin-top: 1.5%;
	}

	#VideoNaviWrap td{
		position:relative;
		width:50%;
		text-align:center;
		color:#fff;
		margin:0;
    font-family: vdl-v7mincho, sans-serif;
	}
	/*偶数だけ*/
	#VideoNaviWrap td:nth-child(even){
		padding-left:1px;
	}
	/*奇数だけ*/
	#VideoNaviWrap td:nth-child(odd){
		padding-right:1.5%;
	}
	.yt_title_l{
		display:block;
		height: 50px;
    line-height: 50px;
		margin-bottom: 3.28%;
    font-size: 3.4vw!important;
    
	}
	.yt_title_r{
		display:block;
		height: 50px;
    line-height: 50px;
		padding:0px;
    font-size: 3.4vw!important;
	}

	/*-----------------------
	NEWアイコン
	------------------------*/
	.newicon{
		position: absolute;
		top: 1%;
		left: 1px;
		padding: 1%;
	}
	/*左側*/
	.yt_title_l .newicon{
		left: 0px;
	}
	/*右側*/
	.yt_title_r{
		left: 2px;
	}
  
  .yt_load{
    margin: 3% 1.5%;
  }

	
}