.archive {
	.area-grid {
		@media(width < 862px) {
			display: block;
		}
	}

	.pickup {
		display: flex;
		gap: clamp(2rem, 0.2222rem + 3.7037vw, 3rem);
		justify-content: space-between;
		margin-bottom: clamp(1.5rem, -0.2778rem + 3.7037vw, 2.5rem);

		@media(width < 862px) {
			flex-direction: column;
		}

		article {
			flex: 1;
			max-width: 408px;
		}

		.card-link {
			overflow: initial;
			position: relative;

			&::before {
				background: url(../img/com/icon-pickup.png) no-repeat;
				background-size: contain;
				content: "";
				display: inline-block;
				width: 52px;
				height: 52px;
				position: absolute;
				top: -10px;
				left: -10px;
				z-index: 1;
			}
		}

		.card-img {
			aspect-ratio: 408 / 272;

		}

		img {
			border-radius: var(--radius--lg);
		}

		.card-body {
			font-family: var(--font--sans);
			padding-top: 8px;
		}

		.card-title {
			color: var(--color--text);
			font-size: var(--font--md);
		}
	}

	.card-grid--3cols {
		@media(width < 862px) {
			grid-template-columns: 1fr 1fr;
		}
	}

	.aside {
		@media(width < 862px) {
			display: block;
			margin-top: var(--space--4);
		}
	}

	.search-text {
		margin-bottom: 10px;

		& + .search {
			max-width: 615px;
		}
	}
}

/* -----------------------------------
 * Search
 * --------------------------------- */
.search:has(+ .archive)  {
	margin-bottom: clamp(1.5rem, -0.2778rem + 3.7037vw, 2.5rem);

	.search-word {
		border-bottom: 1px solid var(--color--border);
		font-size: clamp(1.5rem, 0.8333rem + 1.3889vw, 1.875rem);
		padding-bottom: clamp(0.5rem, 0.2778rem + 0.463vw, 0.625rem);
	}
	
	.search-num {
		font-size: clamp(1.25rem, 0.8056rem + 0.9259vw, 1.5rem);
		line-height: 1.55;

		span {
			font-size: var(--font-size--base);
			margin-left: 4px;
		}
	}
}