@charset 'UTF-8';
/*----------------------------------------

	- first
		- first_link

-----------------------------------------*/

/*----------------------------------------
first
-----------------------------------------*/

.first {
	margin-top: 48px;
}

@media screen and (max-width: 800px) {
	.first {
		margin-top: 32px;
	}
}

/*----------------------------------------
first_link
-----------------------------------------*/
.first_link {
	margin-top: 80px;
	display: grid;
	grid-template-columns: repeat(2, minmax(auto, 400px));
	justify-content: center;
	gap: 64px;
}

.first_link a {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 16px;
	overflow: hidden;;
}

@media (hover: hover) {
	.first_link a:hover figure {
		position: relative;
		height: 100%;
		width: 100%;
	}

	.first_link a:hover figure::after {
		content: "";
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}

	.first_link a:nth-of-type(1):hover figure::after {
		background-image: url(/first/img/i01_p01-hover.webp);
	}

	.first_link a:nth-of-type(2):hover figure::after {
		background-image: url(/first/img/i01_p02-hover.webp);
	}
}

@media screen and (max-width: 800px) {
	.first_link {
		margin-top: 64px;
		grid-template-columns: minmax(auto, 400px);
		gap: 32px;
	}
}