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

/*javascript無効時の画像の設定 */
img.lazy {
	display: none;
}


/*ここまで*/
.works {
	width:100%;
	height:100%;
	position:relative;
}

.works .mask {
	width:100%;
	height:100%;
	position:absolute;	/* 絶対位置指定 */
	top:0;
	left:0;
	opacity:0;	/* マスクを表示しない */
	background-color:rgba(255,255,255,0.6);
	transition:all 0.5s ease;
}

.works .caption {
	font-size: 130%;
	text-align: center;
	padding-top: 14%;
	color: #000;
	font-style: italic;
}

.works .caption h3{
	font-size: 75%;
	line-height: 2em;
	font-weight: normal;
}

/* マスクを表示する */
.works:hover .mask {
	opacity:1;	
}

/* 文字を表示する */
.works:hover .caption {
	opacity:1;	
}

/* サムネイル画像間の距離 */
#contents ul li {
	margin-bottom: 4%;
}


@media screen and (max-width: 600px) {
/* マスクを表示しない */
.works:hover .mask {
	opacity:0;	
}

/* 文字を表示しない */
.works:hover .caption {
	opacity:0;	
}
}