html > body {
	background-image: url(../image/back.webp);
	background-position: 50% 50%;
}
section.header {
	width: 100%;
	height: 70px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-block: 5px;
	padding-inline: 5vw;
	> figure {
		> img {
			max-width: 100%;
		}
	}
}
section.content {
	> div {
		background-color: #fff;
		display: grid;
		grid-template-rows: 1fr;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		@media (width < 630px) {
			grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
			grid-template-columns: 1fr;
		}
		> a {
			height: calc(100svh - 86px - 70px - 70px);
			@media (width < 630px) {
				height: calc((100svh - 50px - 70px - 40px) / 5);
			}
			text-decoration: none;
			background-position: 50% 50%;
			background-size: cover;
			display: flex;
			justify-content: center;
			align-items: center;
			> picture {
				> img {
					max-width: calc(100vw - 20px);
					max-height: calc(100svh - 86px - 70px - 70px - 20px);
				}
			}
			&:nth-of-type(1),
			&:nth-of-type(2),
			&:nth-of-type(3),
			&:nth-of-type(4),
			&:nth-of-type(5) {
				> picture {
					> img {
						filter: drop-shadow(0 0 3px #000) drop-shadow(0 0 3px #000);
					}
				}
			}
			&:nth-of-type(1) {
				background-image: url(../image/item01.webp);
			}
			&:nth-of-type(2) {
				background-image: url(../image/item02.webp);
			}
			&:nth-of-type(3) {
				background-image: url(../image/item03.webp);
			}
			&:nth-of-type(4) {
				background-image: url(../image/item04.webp);
			}
			&:nth-of-type(5) {
				background-image: url(../image/item05.webp);
			}
			&:hover {
				opacity: 0.8;
			}
		}
	}
}
section.footer {
	overflow: hidden;
	height: 70px;
	padding-inline: 2%;
	@media (width < 630px) {
		height: 30px;
	}
	> div {
		padding-block: 20px;
		height: 100%;
		display: flex;
		align-items: center;
		color: #000;
		> div {
			display: flex;
			align-items: center;
			font-size: 0.8rem;
			line-height: 1.5;
			color: currentColor;
			border-right: solid 1px currentColor;
			height: 100%;
			padding-right: 15px;
		}
		> a {
			display: flex;
			text-decoration: none;
			align-items: center;
			font-size: 0.8rem;
			line-height: 2;
			color: currentColor;
			border-right: solid 1px currentColor;
			height: 100%;
			padding-inline: 15px;
		}
	}
	@media (width < 630px) {
		> div {
			display: none;
		}
	}
}
