@charset "UTF-8";
/* CSS Document */

#listMovieItem {}

#listMovieItem .itemMv {
	width:25%;
	float:left;
	margin-bottom:25px;
	position:relative;
}
#listMovieItem .itemMv .frame {
	margin:0 15px 0 15px;
	background:#999;
	padding:5px;
	border-radius: 5px;        /* CSS3草案 */  
	-webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 5px;   /* Firefox用 */ 
}

#listMovieItem h3 {
	color:#fff;
	font-size:0.987em;
	border:none;
	padding:0;
	margin-bottom:0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#listMovieItem .itemMv .link {
	display:none;
}

#listMovieItem .itemMv .movie {
	margi-bottom:15px;
	width:100%;
	height:150px;
	border:solid 1px #fff;
	line-height:0;
	background:#fff;
}

#listMovieItem .itemMv .boxComment {
	font-size:0.91em;
	display:none; 
	position:relative;
}
#listMovieItem .itemMv .boxComment .inframe {
	position:absolute;
	left:25px;
	top:30px;
	border:solid 1px #ccc;
	padding:5px 15px;
	background:#fff;
	border-radius: 10px;        /* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;   /* Firefox用 */
	z-index:50;
}

#listMovieItem .itemMv .btmCom {}
#listMovieItem .itemMv .btmCom a {
	display:block;
	text-align:center;
	padding:7px 11px;
	background:#333;
	text-decoration:none;
	color:#fff;
	border-radius: 5px;        /* CSS3草案 */  
	-webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 5px;   /* Firefox用 */
}

#listMovieItem .itemMv .boxComment.show {
	display:block;
}

video {
	max-width:100%;
	padding:0;
	margin:0;
}

/**************************************************************************************
**************************************************************************************
画面サイズが1024pxより小さい場合
**************************************************************************************
**************************************************************************************/


@media screen and (max-width: 1024px){

	#listMovieItem .itemMv {
		width:33%;
	}
}

/**************************************************************************************
**************************************************************************************
画面サイズが640pxより小さい場合
**************************************************************************************
**************************************************************************************/


@media screen and (max-width: 640px){

	#listMovieItem .itemMv {
		width:50%;
	}
}

/**************************************************************************************
**************************************************************************************
画面サイズが460pxより小さい場合
**************************************************************************************
**************************************************************************************/


@media screen and (max-width: 460px){

	#listMovieItem .itemMv {
		width:auto;
		float:none;
	}
	
	#listMovieItem .itemMv .boxComment {
		display:block;
	}
	#listMovieItem .itemMv .boxComment .inframe {
		position: relative;
		left: auto;
		top: auto;
	}

	#listMovieItem .itemMv .btmCom {
		display:none;
	}
	
}