@charset "utf-8";

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

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

#videoPlayer jsframe{
	width:900px;
	height:506px;
}

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


/* 閉じるボタン */
#close{
    width: 43px;
    height: 43px;
	cursor:pointer;
}

#closeBtn{
	position: absolute;
    width: 60px;
    height: 60px;
    cursor: pointer;
    right: 0;
    top: -70px;
    overflow: hidden;
}


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

#movieNavi ul{
	list-style:none;
}
.m_list{
	width:100%;
	display: flex;
	justify-content:flex-start;
}

#movieNavi ul li{
	list-style:none;
	margin:0;
	position:relative;
	width:49%;
	height:38px;
	line-height:38px;
	font-weight:bold !important;
}
#movieNavi ul li:nth-child(1){
	margin-right:0;
}
#movieNavi ul li:nth-child(2){
	margin-left:2%;	
}
#movieNavi ul li:nth-child(3){
	margin-right:0;	
}


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

/*ロールオーバー設定*/
.thm_btn{
	margin:0px;
	width:323px;
/*	width:488px;*/
	background-color:#000000;
	border:1px #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:1px #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%);
}



@media screen and (min-width: 801px) {
    
    .movieNavi{
        margin-bottom:15px;
    }
    /*
    .movieNavi:nth-child(4) .m_list li{
        width:48% !important;
    }
    */
	.ytplayer{
		height: 506px;
	}
    .movieNavi:nth-child(6) .m_list li {
        width: 49% !important;
    }
}
@media screen and (max-width: 800px) {
    .thm_btn,.thm_btn_over{
        left:0;
        top:0;
        line-height: 4vw !important;
        padding:3% 0;
        flex-direction: column;
    }
    .movieNavi{
        margin-bottom:1%;
    }

    .movieNavi li span{
        display: block;
        text-align: center;
    }
    
	#videoPlayer {
		position: absolute;
		width: 90%;
		height: auto;
		padding: 0;
		padding-top: 0px;
		left: 0;
		margin-left: 5%;
		z-index: 999;
	}
	#videoPlayer{
	  position:absolute;
	  width: 90%;
	  padding-top: 50.6%;
	}
	#videoPlayer iframe{
	  position: absolute;
	  top: 20px;
	  right: 0;
	  width: 100% !important;
	  height: 100% !important;	
	  margin-top: -60px;
	}

	.play_icon{
		position: absolute;
		width:100%;
		height: 100%;
		background: rgba(0,0,0,0.7);
		left:0;
		top:0;
		cursor: pointer;
		transition: 0.5s;
	}
	.icon_img{
		position: absolute;
		left: 50%;
		top:50%;
		transform:translate(-50%,-50%);
		width:18.4%;
		height: auto;
		border-radius: 100%;
		box-shadow: 0 0 2px #5487ef;
		border: solid 1px #5487ef;
	}


	.icon_border {
		position: absolute;
		left: 50%;
		top:50%;
		transform:translate(-50%,-50%);
		width:100%;
		height: 100%;
		border-radius: 100%;
		border: solid 0 #5487ef;
		box-shadow: 0 0 2px #5487ef;
		opacity: 1;
		overflow: hidden;
	}
	#closeBtn {
		position: absolute;
        width: 30px;
        height: 30px;
        cursor: pointer;
        right: 0;
        top: -80px;
        overflow: hidden;
        left: auto;
        margin: 0;
    }
	#closeBtn img{
		width:100%;
		height: auto;
	}
	#movieNavi {
		position: absolute;
		width: 100%;
		height: 35px;
		top: 90%;
		left: 0;
		margin-left: 0;
		padding-bottom: 50px;
	}
	#movieNavi ul .m_list{
		width:100%;
		display: flex;
		justify-content:flex-start;
	}
	#movieNavi ul li {
		list-style: none;
		float:none;
		margin: 0;
		position: relative;
		width: 50%;
		font-weight: bold !important;
		font-size:2vw !important;
        height: auto !important;
	}    
	.thm_btn,.thm_btn_over{
		width: 100% !important;
		height: auto !important;
		font-size:2.8vw !important;
		padding: 0;
	}
    .thm_btn,.thm_btn_over{
        left:0;
        top:0;
        line-height: 4vw !important;
        padding:3% 0;
        flex-direction: column;
    }
    .movieNavi{
        margin-bottom:1%;
    }

    .movieNavi li span{
        display: block;
    }
    .movieNavi:nth-child(5) .m_list li:nth-child(1) .thm_btn{
        padding: 7.4% 0;
    }
    .movieNavi:nth-child(5) .m_list li:nth-child(1) .thm_btn_over{
        padding: 7.4% 0;
    }
    .movieNavi:nth-child(5) .m_list li:nth-child(2) .thm_btn{
        padding: 7.4% 0;
    }
    .movieNavi:nth-child(5) .m_list li:nth-child(2) .thm_btn_over{
        padding: 7.4% 0;
    }
    .movieNavi:nth-child(4) .m_list li:nth-child(2) .thm_btn{
        padding: 7.4% 0;
    }
    .movieNavi:nth-child(4) .m_list li:nth-child(2) .thm_btn_over{
        padding: 7.4% 0;
    }
    .movieNavi:nth-child(6) .m_list li .thm_btn{
        padding: 7.4% 0;
    }
    .movieNavi:nth-child(6) .m_list li .thm_btn_over{
        padding: 7.4% 0;
    }
    .movieNavi:nth-child(6) .m_list li{
        width:49% !important;
    }
/*
    .movieNavi:nth-child(4) .m_list li .thm_btn{
        padding: 7.4% 0;
    }
    .movieNavi:nth-child(4) .m_list li .thm_btn_over{
        padding: 7.4% 0;
    }
    .movieNavi:nth-child(4) .m_list li .thm_btn{
        padding: 7.4% 0;
    }
    .movieNavi:nth-child(4) .m_list li .thm_btn_over{
        padding: 7.4% 0;
    }
    .movieNavi:nth-child(4) .m_list li{
        width:49% !important;
    }
*/
    
}