.areas-mobile-compare {
	display: none;
}

@media (max-width: 900px) {
	.areas-table-scroll {
		overflow: visible;
	}

	.areas-table-scroll .areas-table {
		display: none;
	}

	.areas-mobile-compare {
		display: grid;
		gap: 12px;
		margin-top: 18px;
	}

	.areas-mobile-card {
		border: 1px solid var(--tama-line, #d8d1c3);
		background: var(--tama-white, #fff);
		box-shadow: 4px 4px 0 rgba(99, 168, 185, .22);
	}

	.areas-mobile-card__summary {
		position: relative;
		display: grid;
		gap: 4px;
		padding: 15px 46px 15px 16px;
		cursor: pointer;
		list-style: none;
	}

	.areas-mobile-card__summary::-webkit-details-marker {
		display: none;
	}

	.areas-mobile-card__summary:focus-visible {
		outline: 2px solid var(--tama-orange, #db744b);
		outline-offset: -3px;
	}

	.areas-mobile-card__name {
		color: var(--tama-orange, #db744b);
		font-size: 1.05rem;
		font-weight: 700;
		line-height: 1.45;
	}

	.areas-mobile-card__lead {
		padding-right: 4px;
		color: var(--tama-ink, #242724);
		font-size: .86rem;
		line-height: 1.65;
	}

	.areas-mobile-card__marker {
		position: absolute;
		top: 50%;
		right: 17px;
		color: var(--tama-orange, #db744b);
		font-size: 1.45rem;
		font-weight: 500;
		line-height: 1;
		transform: translateY(-50%);
	}

	.areas-mobile-card[open] .areas-mobile-card__marker {
		font-size: 1.65rem;
	}

	.areas-mobile-card__body {
		padding: 4px 16px 16px;
		border-top: 1px solid var(--tama-line, #d8d1c3);
	}

	.areas-mobile-card__item {
		display: grid;
		grid-template-columns: 5.5rem minmax(0, 1fr);
		gap: 12px;
		padding: 11px 0;
		border-bottom: 1px solid rgba(216, 209, 195, .72);
	}

	.areas-mobile-card__label {
		color: var(--tama-muted, #746f67);
		font-size: .76rem;
		font-weight: 700;
		line-height: 1.6;
	}

	.areas-mobile-card__value {
		min-width: 0;
		color: var(--tama-ink, #242724);
		font-size: .86rem;
		line-height: 1.7;
		word-break: break-word;
	}

	.areas-mobile-card__link {
		display: inline-block;
		margin-top: 14px;
		color: var(--tama-orange, #db744b);
		font-size: .84rem;
		font-weight: 700;
		text-decoration: none;
	}

	.areas-mobile-card__link:hover,
	.areas-mobile-card__link:focus-visible {
		text-decoration: underline;
	}
}

@media (max-width: 480px) {
	.areas-mobile-card__summary {
		padding-left: 14px;
		padding-right: 42px;
	}

	.areas-mobile-card__body {
		padding-left: 14px;
		padding-right: 14px;
	}

	.areas-mobile-card__item {
		grid-template-columns: 4.8rem minmax(0, 1fr);
		gap: 9px;
	}
}