@charset "utf-8";

.sample1 {
	width:			1000px;
	height:			900px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;	/* 相対位置指定 */
	color:    #000000;
}
.sample1 .caption {
	font-size:		200%;
	text-align: 		left;
	padding-top:		80px;
	padding-left:		30px;
	color:			#FFFFDD;
}
.sample1 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;	/* 絶対位置指定 */
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}
.sample1:hover .mask {
	opacity:		1;	/* マスクを表示する */
	background-color:	rgba(0.0,0.0,0.0,0.7);	/* より暗く */
}