/*------------------------------------------------------------
	sliderのmaus-hover
------------------------------------------------------------*/
#aki-slider {
width:100%;
}
.slide {
	width:33.33%;
	height:auto;
	overflow:hidden;
	position:relative;	/* 相対位置指定 */
}
.slide img{
    max-width: 100%;
    height: auto;
}
.slide .caption {
	width:100%;
	font-size:130%;
	text-align:center;
	position:absolute;	/* 絶対位置指定 */
	top:50%;
	color:#fff;
}
.slide .caption p {
	background-color:rgba(0,0,0,0.5);	
}
.slide .mask {
	width:100%;
	height:100%;
	position:absolute;	/* 絶対位置指定 */
	top:0;
	left:0;
	opacity:0;	/* マスクを表示しない */
	background-color:rgba(0,0,0,0.7);	/* マスクは半透明 */
	-webkit-transition:all 0.2s ease;
	transition:all 0.2s ease;
}
.slide:hover .mask {
	opacity:1;	/* マスクを表示する */
}

/*------------------------------------------------------------
	sliderのmaus-hover
------------------------------------------------------------*/


.sample1 {
	width:320px;
	height:215px;
	overflow:hidden;
	margin:10px 8px 10px 16px;
	position:relative;	/* 相対位置指定 */
}
.sample1 .caption {
	font-size:130%;
	text-align:center;
	padding-top:80px;
	color:#fff;
}
/* スマホ時のキャプションサイズ */
@media only screen and (max-width:480px) {
	.caption {
	font-size: 3% !important;
	}
}
.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;	/* マスクを表示する */
}