@charset "utf-8";
footer {
    background-color: #56CFF3;
}
header ,main,footer{
    margin: 0 auto;
    width: 1000px;
    text-align: center;
}
nav ul {
    padding: 15px;
    list-style-type: none;
    display: flex;
    justify-content: space-between;
}
nav a {
    text-decoration: none;
    color: #76A4FC;
}
nav a:hover {
    background-color: #76A4FC;
    color: #90A8FF;
}
.hero{
    box-sizing: border-box;
    width: 100%;
    padding: 100px;
    backround-image: url("img/hero.jpg");
    backround-side: cover;
    border: 10px double rgba(132,235,251,1.00);
}
.page{
	padding: 30px ;
	background-color: rgba(0,0,0,0.40);
	color: white;
}
/*モバイル指定*/

@media screen and (max-width:767px){
	header,main,footer{
		width: 90%;
	}
	.hero{
		max-width: 100%;
		padding: 15% 0;
		height: 100vh;
		background-image: url("img/mobail.jpg");
		background-position: center;
	}
	img.index{
		max-width: 100%;
		height: 28vh;
	}
}