@charset "UTF-8";

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


header h1{
	padding:20px 25px;
	color:black;
	background:#8fbc8f;
	font-weight:bold;
	text-align: center;
	font-size: 24px;
}

main{
	display:block;
	width:1000px;
	margin:0 auto;
	padding:60px 20px;
}


@media only screen and (max-width: 768px) {
	main {
		width: 100%;
	}
}
main li{
	position:relative;
	float:left;
	width:320px;
	margin:0 20px 50px 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:100%;
	height:100%;
	padding:20px;
	background:rgba(0, 0, 0, .7);
	top:0;
	left:0;
	box-sizing:border-box;
}
.kage5 {
box-shadow: 5px 5px 10px black;
padding: 10px;
border: solid 1px #666;
}

main p{
	position:relative;
	top:10px;
}
footer {
    background:#8fbc8f;
    text-align: center;
    padding: 15px 0;
	margin-top: 80px;
}
footer p {
    color: black;
    font-size: 1rem;}
    .kage7 {
filter: drop-shadow(2px 4px 8px gray);
}