@charset "UTF-8";

body{
	font-family:Arial, sans-serif;
	-webkit-font-smoothing:antialiased;
	color:#333;
	background-color: #f8f4e6;
     background-image: url('../img/d1.png');
    background-position: center;
background-size: cover;
min-height: 100vh;
}


main{
	display:block;
	width:1100px;
	margin:0 auto;
	padding:60px 40px;
    
}

@media only screen and (max-width: 768px) {
	main {
		width: 100%;
	}
}
main li{
	position:relative;
	float:left;
	width:320px;
	margin:0 50px 70px 0;
	color:#FFF;
	line-height:2em;
}

main li:nth-child(3n){
	margin-right:0;
}

main li img{
	vertical-align:bottom;
}

main div{
	position:absolute;
	display:none;
	width:101%;
	height:100%;
	padding:20px;
	background:rgba(0, 0, 0, .7);
	top:0;
	left:0;
	box-sizing:border-box;
}

main p{
	position:relative;
	top:10px;
}


.kage3 {
box-shadow: 5px 5px 10px gray;
padding: 10px;
border: solid 1px #666;
}




h4{
font-weight:bold;
text-align: center;
color:red;
font-size: 24px;
padding: 20px;
margin: 20px 0;
background-color: rgba(255,255,255,0.6)

}