.scene-10 {
	margin-inline: auto;
	max-width: var(--max-width);
	overflow: hidden;
}

.scene-10::before {
	background-color: var(--wood);
	clip-path: polygon(0 103%, 0 100%, 100% 0, 100% 103%);
	content: '';
	display: block;
	height: min(5vw, 128px);
}

.scene-10 .background {
	background-color: var(--wood);
}

.scene-10 .content {
	padding-bottom: clamp(40px, 5%, 128px);
	padding-inline: 10%;
	padding-top: clamp(32px, 4%, 102.4px);
}

.scene-10 .text-1 {
	color: var(--black);
	font-size: var(--font-size-80-20);
	line-height: 1.2;
	margin-top: 1em;
}

.scene-10 .text-2 {
	color: var(--brown);
	font-size: var(--font-size-250-40);
	font-weight: 500;
	line-height: 1.2;
	margin-bottom: .5em;
	text-align: right;
}

.scene-10 .polygon {
	background-color: var(--wood);
	clip-path: polygon(0 30%, 62% 0, 68% 100%, 0 100%);
	height: min(10vw, 256px);
	width: 100%;
}

.scene-10 .map {
	/*height: 70vh;*/
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
	width: 100%;
}

.scene-10 .picture-inner-ring {
	animation: 10s infinite scene-10-inner-ring;
	position: absolute;
	inset: 0;
	height: 100%;
	opacity: 0;
	width: 100%;
}

@keyframes scene-10-inner-ring {
	0% { opacity: 0; }
	10% { opacity: 0; }
	25% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

.scene-10 .picture-outer-ring {
	animation: 10s infinite scene-10-outer-ring;
	position: absolute;
	inset: 0;
	height: 100%;
	opacity: 0;
	width: 100%;
}

@keyframes scene-10-outer-ring {
	0% { opacity: 0; }
	20% { opacity: 0; }
	35% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

.scene-10 .picture-labels {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
}

.scene-10 .image {
	display: block;
	height: 100%;
	width: auto;
}

@media (min-width: 800px) or (min-aspect-ratio: 500/610) {
	.scene-10 .map {
		height: auto;
		overflow-y: auto;
	}

	.scene-10 .image {
		height: auto;
		width: 100%;
	}
}