.main-image {
	background: url(../images/bg_top.jpg) center/cover;
}

.genre-list {
	max-width: 1100px;
	width: 100%;
	margin: auto;
	gap: 0 20px;
}
.card {
	position: relaitive;
	margin-bottom: 20px;
}
.card a {
	position: relative;
	display: block;
	overflow: hidden;
	padding-top: ;
	text-decoration: none;
}
.card img {
	transition: transform 1.0s;
	transform: scale(1.0);
	filter: brightness(0.8);
}
.card:hover img {
	transform: scale(1.2);
}

.card h3 {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	text-align: center;
	color: #fff;
	font-weight: bold;
	letter-spacing: 0.25em;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
	pointer-events: none;
}


@media screen and (max-width: 800px) {
	/* flex box /grid box(横並びブレイクポイント) -----------*/
	.genre-list[data-column="3"],
	.genre-list[data-column="4"],
	.genre-list[data-column="5"],
	.genre-list[data-column="6"] {
		--data-column: 2 !important;
	}
	.card a {
		padding-top: 62.5%;
	}
}


@media screen and (max-width: 600px) {
	.genre-list[data-column] {
		--data-column: 1 !important;
	}
	.card a {
		padding-top: 60%;
	}
}