@charset "utf-8";

/*------------------------------------------------------------------------------------------------ ▼ #cover --*/

.product-pickup {
	.products {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.products a {
		display: flex;
		align-items: center;
		position: relative;
		aspect-ratio: 16 / 12;
		border: 0px solid #000;
		border-radius: var(--border-radius-light);
		background: #fff;
		box-shadow: 0 0 3px #aaa;
		overflow: hidden;
	}

	.products a.soon {
		cursor: auto;
	}

	.products a.soon::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		opacity: 0;
		z-index: 90;
	}

	.products a.soon::after {
		content: 'お問い合わせ';
		display: block;
		width: 100%;
		opacity: 0;
		z-index: 100;
		font-size: 42px;
		color: #fff;
		text-align: center;
	}

	.products .copy,
	.products .title {
		position: absolute;
		left: 0;
		width: 100%;
		padding: 15px 20px;
		z-index: 10;
		font-family: NotoSans-B;
		color: #fff;
		text-shadow: 0 0 5px #000;
	}

	.products .copy {	
		top: 0;
		background: rgba(0, 0, 0, 0.5);
		background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
	}

	.products .title {
		bottom: 0;
		background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1));
		text-align: center;
	}

	.products .background {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-position: center;
		background-size: cover;
		z-index: 1;
	}

	@media (1281px <= width) {
		.products a {
			width: calc((100% - 100px) / 3);
			aspect-ratio: 16 / 11;
		}

		.products a:nth-child(n + 2):not(:nth-child(3n + 1)) {
			margin-left: 50px;
		}

		.products a:nth-child(n + 4) {
			margin-top: 50px;
		}

		.products .copy,
		.products .title {
			font-size: 24px;
		}
	}

	@media (1023px <= width <= 1280px) {
		.products a {
			width: calc((100% - 30px) / 3);
			aspect-ratio: 16 / 10;
		}

		.products a:nth-child(n + 2):not(:nth-child(3n + 1)) {
			margin-left: 15px;
		}

		.products a:nth-child(n + 4) {
			margin-top: 15px;
		}

		.products .copy,
		.products .title {
			font-size: 20px;
		}
	}

	@media (768px <= width <= 1024px) {
		.products a {
			width: calc((100% - 15px) / 2);
			aspect-ratio: 16 / 9;
		}

		.products a:nth-child(n + 2):not(:nth-child(2n + 1)) {
			margin-left: 15px;
		}

		.products a:nth-child(n + 3) {
			margin-top: 15px;
		}

		.products .copy,
		.products .title {
			font-size: 20px;
		}
	}

	@media (width <= 767px) {
		.products a {
			width: 100%;
			aspect-ratio: 16 / 9;
		}

		.products a:nth-child(n + 2) {
			margin-top: 15px;
		}

		.products a.soon::beforea {
			background: url(/asset/image/general/soon.png) no-repeat center / 50% auto, rgba(0, 0, 0, 0.3);
			opacity: 1;
		}

		.products .copy,
		.products .title {
			font-size: 18px;
		}
	}

	@media (hover: hover) and (pointer: fine) {
		.products a.soon::before,
		.products .background {
			transition: var(--transition);
		}

		.products a.soon:hover::before,
		.products a.soon:hover::after {
			opacity: 1;
		}

		.products a:hover .background {
			transform: scale(1.1);
		}
	}
}