header {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	padding: 5px 20px 20px 20px;
	box-sizing: border-box;
}

.header, .navi-mid, .content {
	margin: 0 auto;
}
	
.img {
	float: left;
	margin-right: 20px;
}
	
.navi ul {
	list-style-type: none;
	display: flex;
}
	
.navi li {
	padding-right: 20px;
}
	
.title {
	margin-top: 50px;
}
	
.mid {
	position: absolute;
	top: 280px;
	left: 0px;
	width: 100%;
}
	
.navi-mid {
	display: flex;
	justify-content: space-around;
}
	
.box {
	display: flex;
	align-items: center;
	justify-content: center;
}
	
content {
	position: absolute;
	top: 500px;
	left: 0px;
	width: 100%;
}
	
.content {
	display: flex;
	flex-wrap: wrap;
}

.block {
	left: 10px;	
	padding-left: 5px;
	flex: calc(33% - 60px);
}

.large-block {
	padding: 0px 1em;
	flex: 100%;
}
	
@keyframes color-change {
	from {color: #000000;}
	to {color: #FFFFFF;}
}

@media screen and (min-width: 992px){
.large-block { padding: 0px; }
.large { display: block !important; }
.mobile {display: none !important;}
.no-mobile {display: block !important;}
}

@media (max-width: 991px) {
.navi-mid, .content { width: 100%; }
.box { width: 30%; }
.block { flex: calc(50% - 60px); padding: 1em; box-sizing: border-box; }
.large { display: block !important; }
.no-mobile { display: none !important; }
.mobile { display: none !important; }
}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
body { font-size: 16}
.header, .navi-mid, .content { width: 100%; }
.img { float: none; text-align: center; }
.title { margin-top: 0px; text-align: center; }
.navi-mid { flex-wrap: wrap; }
.box { flex: 45%; width: 100%; margin: 5px; }
.block { flex: 100%; padding: 1em; box-sizing: border-box; }
.large { display: none !important; }
.no-mobile { display: none !important; }
.mobile { display: block !important;}
.mid { top: 365px; }
content { top: 675px; }
}