@charset "utf-8";
/* CSS Document */
html {
	min-height: 100%;
    position: relative;
}
.toppage {
	padding-bottom: 100px;
}
.box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 100px 0;
	gap: 40px;
}
.box p {
	width: calc((100% - 40px) / 2);
	line-height: 2;
	transition: .3s;
}
.box p a {
	text-align: center;
	padding: 20px;
	display: block;
	transition: .3s;
}
.box-item {
	border: solid 2px #004b8a;
}
.box-item:hover {
	background-color: #004b8a;
}
.box-item a {
	color: #004b8a;	
}
.box-item:hover a {
	color: #fff;	
}
.box-item2 {
	border: solid 1px #004b8a;
	width: 30%;
}
.box-item2:hover {
	background-color: #004b8a;
}
.box-item2:hover a {
	color: #fff;	
}
.box-item2 a {
	color: #004b8a;
    text-align: center;
	padding: 10px;
	display: block;
	transition: .3s;
}
footer {
	position: absolute;
}

@media screen and (max-width: 899px) {
	.box {
		flex-direction: column;
		margin: 50px 0 100px;
		gap: 20px;
	}
	.box p {
		width: 100%;
		box-sizing: border-box;
		margin: 0 auto;
	}
	.box-item2 {
		width: 50%;
	}
}
@media screen and (max-width: 478px) {
	.title {
		padding: 15px 5px;
		font-size: 20px;
	}
}