@charset "UTF-8";
.sample11 {
	width:			200px;
	height:			100px;
	overflow:		hidden;
	position:		relative;
	float:left;
	margin-top: 3px;
	margin-bottom: 20px;
	margin-left: 15px;
}
.sample11 .caption {
	font-size:		98%;
	line-height:1.25;
	color:			#000;
	padding-top:		5px;
	padding-left:		10px;
	padding-right:		10px;
	letter-spacing: 0.1em;
}
.sample11 .mask {
	width:			50%;	/* 画像の半分の大きさにする */
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	margin-left:		-50%;	/* 枠の左に置いて表示させない */
	background-color:	rgba(255,255,255,100);
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
}
.sample11:hover .mask {
	margin-left:		0px;	/* 右にずらして表示する */
}
.sample11 img {
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
}
.sample11:hover img {
	margin-left:		50%;	/* 画像を半分サイズ、右にずらす */
}
.sdgscenter{
	text-align:center;
}
.sdgsclear {
		clear:both;
}