.map {
	font-size: 16px;
	line-height: 2;
	overflow-x: scroll;
}

.map div {
	box-sizing: initial;
}

.map .y {
	width: max-content;
}

.map .y div {
	display: inline-block;
	border: 1px solid #fff;
	width: 2.0em;
	height: 2.0em;
	text-align: center;
}

.map .y .landscape-0 {
	background: #328be2;
}
.map .y .landscape-1 {
	background: #3cf53c;
}
.map .y .landscape-2 {
	background: #efbf69;
}
.map .y .landscape-3 {
	background: #c0c0c0;
}
.map .y .landscape-4 {
	background: #1d89c6;
}
.map .y .landscape-5 {
	background: #32cde2;
}
.map .y .landscape-6 {
	background: #c89512;
}
.map .y .landscape-7 {
	background: #ffff99;
}
.map .y .landscape-8 {
	background: #f7f7f7;
}
.map .y .landscape-9 {
	background: #e7fff5;
}
.map .y .landscape-10 {
	background: #e9e9ff;
}
.map .y .landscape-11 {
	background: #ffff00;
}
.map .y .landscape-12 {
	background: #18bf18;
}
.map .y .landscape-13 {
	background: #ffcc00;
}
.map .y .landscape-14 {
	background: #198f19;
}
.map .y .landscape-15 {
	background: #ff9900;
}
.map .y .landscape-16 {
	background: #036903;
}