.container{
	display: grid;
	grid-template-columns: 20vh 20vh;
	grid-template-rows: 20vh 20vh;
	gap: 5vh;
	justify-content: center;
}

.grid-item{
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:10px;
	
	font-size:5vh;
	text-align:center;
	block-size:20vh;
	box-shadow: 0px 3px #000000;
}

.grid-item:active{
	box-shadow: none;
	position:relative;
	top:3px
}

.home{
	background-color:#000080;
	color:#f0f8ff;
}

.yoyaku{
	background-color:#dc143c;
	color:#f0f8ff;
}

.access{
	background-color:#b0c4de;
	color:#363636;
}

.menu{
	background-color:#006400;
	color:#f0f8ff;
}

.haikei{
	z-index:999;
	display:flex;
	justify-content:center;
	align-items:center;
	width:15vh;
	height:15vh;
	background-image:url();
	background-position:center;
	background-size:cover;
	margin:auto;
	position: relative;
	top:30vh;
	border-radius10px;
}

.haikei:active{
	box-shadow:none;
	position:relative;
	top:31vh;
}

a {
	text-decoration: none;
}

footer{
	z-index:999;
	background: linear-gradient(0.25turn, transparent 0%,#f0f8ff ,#000080);
	width:100%;
	height: 90px;
	padding: 20px 50px;
	box-sizing: border-box;
	position: fixed;
	top: 85vh;
	left: 0;
	display: flex;
	align-items: center;
	font-size:5vh;
}

.anim-box.fadein.is-animated{
	animation: fadeIn 0.7s cubic-bezier(0.33,1,0.68,1) forwards;	
}

@keyframes fadeIn{
	0%{
	opacity:0;
	}
	100%{
	opacity:1;}
}

.footer-font{
	text-align:center;
}