@charset "UTF-8";









/*******************************　　使用 figureタグ　　***********************************/


/*元画像*/
.hover-parent{
	width:100%;
	max-width:100%;
	height:auto;
	
	position:relative;
	margin-bottom:0px;
	overflow:hidden;
}




/*縦写真用*/
figcaption.hover-mask{
	width:0px;
	height:0px;
	
}



.hover-parent:hover figcaption.hover-mask{/*マウスオーバーで文字出す*/
	padding-bottom:0px;
	opacity:0;
	
	transition:all 0s ease;
}



/*画像下 番号*/
.hover-parent h1{
	font-size:13px;
	
		font-family:"Kosugi" , sans-serif;
		
	
	color:#666;
}


/*横写真用*/


figcaption.hover-mask-yoko{
	width:0px;
	height:0px;
	
	font-size:0em;
	
}



.hover-parent:hover figcaption.hover-mask-yoko{/*マウスオーバーで文字出す*/
padding-bottom:0px;
	opacity:0;
	
	transition:all 0s ease;
	
}






@media screen and (min-width: 480px) {/*480以上*/




/*元画像*/
.hover-parent{
	width:100%;
	max-width:100%;
	height:auto;
	
	position:relative;
	margin-bottom:0px;
	overflow:hidden;
}






/*縦写真用*/
figcaption.hover-mask{
		width:100%;
	max-width:100%;
	height:98.3%;
	
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background-color:rgba(246,240,211,0.4);/*黄色指定*/
	opacity:0;
	color:#fff;/*文字色*/
	display:flex;
	align-items:center;
	
	font-size:0.88em;
	
	-webkit-transition:all 0.6s ease;
	transition:all 0.6s ease;
	
	padding-left:20px;
	
	font-family:"Kosugi" , sans-serif;
}







.hover-parent:hover figcaption.hover-mask{/*マウスオーバーで文字出す*/
	padding-bottom:20px;
	opacity:1;
	
	transition:all 0.6s ease;
}






/*横写真用*/


figcaption.hover-mask-yoko{
		width:100%;
	max-width:100%;
	height:97%;
	
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:rgba(0,0,0,0.7);/*文字のせの背景色 当初は半透明かけず0,0,0,2*/
	opacity:0;
	color:#fff;/*文字色*/
	display:flex;
	align-items:center;
	
	font-size:0.88em;
	
	-webkit-transition:all 0.6s ease;
	transition:all 0.6s ease;
	
	padding-left:20px;
	
	font-family:"Kosugi" , sans-serif;
}



.hover-parent:hover figcaption.hover-mask-yoko{/*マウスオーバーで文字出す*/
	padding-bottom:10px;
	opacity:1;
	
	transition:all 0.6s ease;
	
}

}