@charset "UTF-8";
/* CSS Document */

div.map3d-area {
	position: relative;
	width: 100%;
}

div#map3d {
	width: 100%;
	height: 600px;
}

div.map3d-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;

	background-color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	color: #333;
}

/* スマートフォンでの読み込み確認 */
div.map3d-confirm {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
	padding: 20px;

	background-color: #f5f5f5;
	font-size: 14px;
	color: #333;
}

div.map3d-confirm p {
	margin: 0 0 16px;
	line-height: 1.6;
}

div.map3d-confirm .map3d-confirm-size {
	font-weight: bold;
}

div.map3d-confirm .map3d-confirm-note {
	font-size: 12px;
	color: #777;
}

div.map3d-confirm button {
	padding: 10px 32px;
	border: none;
	border-radius: 4px;

	background-color: #e5528b;
	font-size: 14px;
	color: #fff;
	cursor: pointer;
}

@media screen and (max-width: 767px) {
	div#map3d {
		height: 400px;
	}
}

/* 表示の切り替えツールバー(地図の左側に浮かせる) */
div.map3d-toolbar {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;

	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 150px;
	padding: 8px;
	box-sizing: border-box;
	border-radius: 6px;

	background-color: rgba(255, 255, 255, 0.92);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

div.map3d-toolbar button.map3d-full {
	/*
	 * 見た目はモードの釦と揃えるが、クラスは分ける。
	 *
	 * map3d-tool を付けると「地図」「歩いてみる」「飛んでみる」と同じ
	 * 択一の仲間として扱われ、押した時に行き先の分からない状態になる。
	 */
	display: block;
	width: 100%;
	margin: 6px 0 0;
	padding: 6px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	font-size: 12px;
	line-height: 1.4;
	color: #333;
	cursor: pointer;
}

div.map3d-toolbar button.map3d-full:hover {
	background: #f2f2f2;
}

div.map3d-toolbar button.map3d-full.is-active {
	border-color: #999;
	background: #eee;
}

div.map3d-toolbar button.map3d-tool {
	padding: 7px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;

	background-color: #fff;
	font-size: 13px;
	color: #333;
	cursor: pointer;
	text-align: center;
}

div.map3d-toolbar button.map3d-tool:hover {
	background-color: #f2f2f2;
}

div.map3d-toolbar button.map3d-tool.is-active {
	border-color: #e5528b;

	background-color: #e5528b;
	color: #fff;
}

div.map3d-toolbar p.map3d-toolbar-help {
	margin: 2px 0 0;

	font-size: 11px;
	line-height: 1.5;
	color: #666;
}

/* 歩行中はカーソルを変えて、視点操作できることを示す */
div.map3d-area.is-walking div#map3d {
	cursor: move;
}

@media screen and (max-width: 767px) {
	div.map3d-toolbar {
		width: 128px;
		padding: 6px;
	}

	div.map3d-toolbar button.map3d-tool {
		padding: 9px 8px;
		font-size: 12px;
	}
}

div.map3d-toolbar label.map3d-toggle {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 2px;

	font-size: 12px;
	color: #333;
	cursor: pointer;
}

/* 詳細表示で読み込んでいる区画数とテクスチャの量 */
div.map3d-toolbar p.map3d-detail-note {
	margin: 1px 0 0 18px;

	font-size: 11px;
	line-height: 1.4;
	color: #888;
}

/* 歩行中の移動用。画面右下に置く。 */
div.map3d-stick {
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 3;

	width: 120px;
	height: 120px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.8);

	background-color: rgba(0, 0, 0, 0.25);
	touch-action: none;
	cursor: pointer;
}

div.map3d-stick .map3d-stick-knob {
	position: absolute;
	top: 50%;
	left: 50%;

	width: 48px;
	height: 48px;
	margin: -24px 0 0 -24px;
	border-radius: 50%;

	background-color: rgba(255, 255, 255, 0.85);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	pointer-events: none;
}

@media screen and (max-width: 767px) {
	div.map3d-stick {
		right: 14px;
		bottom: 14px;
		width: 104px;
		height: 104px;
	}

	div.map3d-stick .map3d-stick-knob {
		width: 42px;
		height: 42px;
		margin: -21px 0 0 -21px;
	}
}

/*
 * 地面に重ねて出す地名。
 *
 * 地面の画像には焼き込まない。焼き込むと地図と一緒に回転し、傾けたときに
 * 遠くの文字が縦に潰れて読めなくなる。ここに置けば常に水平・等倍になる。
 */
div.map3d-labels span.map3d-label {
	font-size: 12px;
	line-height: 1.2;
	color: #333;
	/* 地図の色に紛れないよう、白で縁取る */
	text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
	user-select: none;
}

/* 種類ごとに見分けをつける。区名・町名を主役にし、施設名と通り名は控えめに。 */
div.map3d-labels span.map3d-label.is-place {
	font-size: 13px;
	font-weight: bold;
}

div.map3d-labels span.map3d-label.is-poi {
	font-size: 11px;
	color: #555;
}

div.map3d-labels span.map3d-label.is-road {
	font-size: 11px;
	color: #4a6fa5;
}

/*
 * 名前で探す。
 *
 * 画面の上の中ほどに置く。ツールバーは左上にあるので、そこを避けて
 * 中央に寄せる。狭い画面では場所を譲り、ツールバーの下へ回す。
 */
div.map3d-search {
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;

	width: 380px;
	max-width: calc(100% - 200px);
}

div.map3d-search input {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;

	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	font-size: 14px;
}

div.map3d-search input:focus {
	outline: none;
	border-color: #e5528b;
}

div.map3d-search span {
	display: block;
	margin-top: 3px;
	padding-left: 2px;

	font-size: 11px;
	color: #333;
	text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}

@media screen and (max-width: 767px) {
	/* 下に置くと、歩行中の円と重なる。ツールバーの右隣へ。 */
	div.map3d-search {
		top: 10px;
		left: 148px;
		right: 10px;
		transform: none;

		width: auto;
		max-width: none;
	}

	div.map3d-search input {
		padding: 8px 10px;
		font-size: 13px;
	}
}

/*
 * 雨。
 *
 * 地図の上に重ねる。地図より前、操作の部品より後ろ。触れないように
 * しておかないと、この上でドラッグしても地図が動かなくなる。
 */
canvas.map3d-rain {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;

	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* 描画の速さ。目安を見るためのものなので、控えめに右下へ置く。 */
div.map3d-fps {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 4;

	width: 168px;
	padding: 6px 8px;
	border-radius: 4px;

	/*
	 * 高さの上限。
	 *
	 * 項目が増えて、畳まずに見ていると地図の上まで届くようになった。
	 * 器の高さから上下の隙間を引いた分で頭打ちにし、あふれる分は中身
	 * だけを繰る。見出しと釦は動かないので、どこまで繰っても押せる。
	 *
	 * 拡大表示では器が画面いっぱいになるので、上限もそれに合わせて
	 * 広がる。数を決め打ちにしない。
	 */
	max-height: calc(100% - 16px);
	display: flex;
	flex-direction: column;

	background-color: rgba(0, 0, 0, 0.55);
	font-size: 11px;
	font-family: monospace;
	line-height: 1.5;
	color: #fff;

	/*
	 * 文字として写せるようにする。
	 *
	 * 触れないようにしていたため、なぞって選べなかった。触れるように
	 * すると、この上で押しても地図側には伝わらなくなるので、なぞっても
	 * 地図が動かない。
	 */
	user-select: text;
	cursor: text;
}

div.map3d-fps div {
	clear: both;
}

/*
 * 中身。ここだけが繰れる。
 *
 * min-height を 0 にしておかないと、flex の既定では中身の高さより
 * 縮まないため、上限を超えて伸びてしまう。
 */
div.map3d-fps div.map3d-fps-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/* 見出しと釦は縮めない。中身だけを繰る。 */
div.map3d-fps div.map3d-fps-head,
div.map3d-fps button.map3d-fps-copy {
	flex: none;
}

/*
 * 見出しの帯。押すと中身を畳む。
 *
 * 項目が増えて縦に長くなり、地図を隠すようになった。畳んでいる間も
 * FPS だけは帯に出るので、様子は分かる。
 */
div.map3d-fps div.map3d-fps-head {
	margin: -6px -8px 4px;
	padding: 4px 8px;
	border-radius: 4px 4px 0 0;

	background-color: rgba(255, 255, 255, 0.12);
	color: #cfe6ff;
	cursor: pointer;
	user-select: none;
}

div.map3d-fps div.map3d-fps-head:hover {
	background-color: rgba(255, 255, 255, 0.22);
}

div.map3d-fps div.map3d-fps-head:focus-visible {
	outline: 1px solid #7ec8ff;
	outline-offset: -1px;
}

/* 開け閉めの向きを、三角で示す */
div.map3d-fps div.map3d-fps-head::after {
	content: "BE";
	float: right;
	color: #9ab;
}

div.map3d-fps.is-shut div.map3d-fps-head {
	margin-bottom: -6px;
	border-radius: 4px;
}

div.map3d-fps.is-shut div.map3d-fps-head::after {
	content: "B8";
}

/* 項目名は左、値は右へ寄せる */
div.map3d-fps span {
	float: left;
	color: #bbb;
}

div.map3d-fps em {
	display: block;
	overflow: hidden;

	font-style: normal;
	text-align: right;
}

/* 見出し */
div.map3d-fps b {
	display: block;

	color: #7ec8ff;
	font-weight: normal;
}

/* 区切り */
div.map3d-fps hr {
	clear: both;
	margin: 4px 0;
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* 歩行・飛行中は右下に円が出るので、ぶつからないよう上へ逃がす */
div.map3d-area.is-walking div.map3d-fps {
	bottom: 150px;
	/* 上へ逃がした分だけ、伸びられる高さも減る */
	max-height: calc(100% - 158px);
}

/* 空の見た目の選択 */
div.map3d-toolbar label.map3d-select {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 3px;

	font-size: 12px;
	color: #333;
}

div.map3d-toolbar label.map3d-select select {
	flex: 1;
	min-width: 0;
	padding: 3px 4px;
	border: 1px solid #ccc;
	border-radius: 4px;

	font-size: 12px;
}

/* 移動の速さのつまみ */
div.map3d-toolbar label.map3d-speed input[type="range"] {
	flex: 1;
	min-width: 0;
	margin: 0;
}

/* 街の写真。3Dの表示を主役にしたいので、隅に小さく出す。 */
div.map3d-street {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 3;

	width: 260px;
	padding: 4px;
	border-radius: 5px;

	background-color: rgba(255, 255, 255, 0.92);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

div.map3d-street img {
	display: block;
	width: 100%;
	border-radius: 3px;
}

div.map3d-street p.map3d-street-note {
	margin: 3px 2px 1px;

	font-size: 10px;
	color: #666;
}

@media screen and (max-width: 767px) {
	div.map3d-street {
		width: 160px;
	}
}

/* 検索バーの中のボタン。入力欄の右端に重ねて置く。 */
div.map3d-search div.map3d-search-row {
	position: relative;
}

div.map3d-search div.map3d-search-row input {
	/* ボタン2つぶんの場所を空ける */
	padding-right: 66px;
}

div.map3d-search button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);

	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	line-height: 1;
}

div.map3d-search button.map3d-search-clear {
	right: 64px;

	width: 22px;
	height: 22px;
	border-radius: 50%;

	font-size: 17px;
	color: #999;
}

div.map3d-search button.map3d-search-clear:hover {
	background-color: #eee;
	color: #555;
}

div.map3d-search button.map3d-search-do {
	right: 36px;

	width: 24px;
	height: 24px;
	color: #e5528b;
}

div.map3d-search button.map3d-search-do svg {
	display: block;
	width: 20px;
	height: 20px;

	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

div.map3d-search button.map3d-search-do:hover {
	color: #c73f70;
}

/*
 * 探した結果。
 *
 * 一覧が長いと地図が隠れてしまうので、高さを決めて中で送る。
 */
div.map3d-search div.map3d-result {
	margin-top: 4px;
	border-radius: 6px;
	overflow: hidden;

	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

div.map3d-search div.map3d-result-head {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 5px 6px 5px 10px;
	border-bottom: 1px solid #eee;
}

div.map3d-search div.map3d-result-head span {
	flex: 1;
	margin: 0;
	padding: 0;

	font-size: 12px;
	color: #333;
	text-shadow: none;
}

div.map3d-search div.map3d-result-head button {
	position: static;
	transform: none;

	width: 24px;
	height: 24px;
	border-radius: 4px;
	color: #666;
}

div.map3d-search div.map3d-result-head button:hover {
	background-color: #f0f0f0;
	color: #222;
}

div.map3d-search div.map3d-result-head button[disabled] {
	color: #ccc;
	cursor: default;
}

div.map3d-search div.map3d-result-head button svg {
	display: block;
	width: 20px;
	height: 20px;

	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

div.map3d-search ul.map3d-result-list {
	margin: 0;
	padding: 0;
	max-height: 190px;
	overflow-y: auto;

	list-style: none;
}

div.map3d-search ul.map3d-result-list li {
	padding: 6px 10px;
	border-bottom: 1px solid #f2f2f2;

	font-size: 12px;
	color: #333;
	cursor: pointer;
}

div.map3d-search ul.map3d-result-list li:hover {
	background-color: #fbf0f4;
}

div.map3d-search ul.map3d-result-list li.is-current {
	background-color: #fce4ec;
	font-weight: bold;
}

div.map3d-search ul.map3d-result-list li span.map3d-result-kind {
	margin-left: 6px;

	font-size: 10px;
	font-weight: normal;
	color: #999;
}

@media screen and (max-width: 767px) {
	div.map3d-search ul.map3d-result-list {
		max-height: 120px;
	}
}

/* 絞り込みを開くボタン */
div.map3d-search button.map3d-search-filter {
	right: 90px;

	width: 22px;
	height: 22px;
	color: #999;
}

div.map3d-search button.map3d-search-filter svg {
	display: block;
	width: 18px;
	height: 18px;

	fill: currentColor;
	stroke: none;
}

div.map3d-search button.map3d-search-filter:hover,
div.map3d-search button.map3d-search-filter.is-active {
	color: #e5528b;
}

div.map3d-search div.map3d-search-row input {
	/* ボタン3つぶんの場所を空ける */
	padding-right: 120px;
}

/* 絞り込みの窓。条件が増えたらここへ足していく。 */
div.map3d-search div.map3d-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 4px;
	padding: 8px;
	border-radius: 6px;

	background-color: rgba(255, 255, 255, 0.96);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

div.map3d-search button.map3d-filter-item {
	position: static;
	transform: none;

	padding: 4px 9px;
	border: 1px solid #ddd;
	border-radius: 12px;

	background-color: #fff;
	font-size: 12px;
	color: #444;
}

div.map3d-search button.map3d-filter-item:hover {
	border-color: #e5528b;
	color: #e5528b;
}

div.map3d-search button.map3d-filter-item.is-active {
	border-color: #e5528b;

	background-color: #e5528b;
	color: #fff;
}

/*
 * 探しているあいだの見せ方。
 *
 * 探した結果を目立たせたいので、それ以外は控えめにする。地名は薄くし、
 * 結果の名前は地名の入り切りに関わらず出す。
 */
/*
 * 探しているあいだも、まわりの地名は読めるようにしておく。近くに何が
 * あるかが分かると、結果の位置をつかみやすい。薄くしすぎない。
 */
div.map3d-area.is-searching div.map3d-labels:not(.map3d-labels-pin) span.map3d-label {
	opacity: 0.75;
}

/* 探した結果の名前。背景は敷かず、色と縁取りで見分ける。 */
div.map3d-labels-pin span.map3d-label.is-pin {
	font-size: 12px;
	font-weight: bold;
	color: #e5187a;
	text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 4px #fff;
}

/* いま見ているもの */
div.map3d-labels-pin span.map3d-label.is-pin.is-current {
	font-size: 14px;
	color: #1565d8;
}

/*
 * こまかい設定の板。
 *
 * 中身は口が返す項目から組み立てるので、項目ごとの見た目は決めていない。
 * 名前を左、入れ物を右に置く一列だけを決めてある。
 */
div.map3d-area div.map3d-tune {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 8;
	transform: translate(-50%, -50%);

	width: min(420px, calc(100% - 32px));
	max-height: calc(100% - 64px);
	display: flex;
	flex-direction: column;
	border-radius: 6px;

	background-color: rgba(20, 22, 28, 0.94);
	color: #fff;
	font-size: 13px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

div.map3d-area div.map3d-tune-head,
div.map3d-area div.map3d-tune-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
}

div.map3d-area div.map3d-tune-head {
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	font-weight: bold;
}

div.map3d-area div.map3d-tune-foot {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

div.map3d-area div.map3d-tune-head button {
	border: none;
	background: none;
	font-size: 18px;
	line-height: 1;
	color: #bbb;
	cursor: pointer;
}

div.map3d-area div.map3d-tune-head button:hover { color: #fff; }

/*
 * どの一式を使うか。
 *
 * 見出しのすぐ下に置く。ここを変えると板の中身も変わるので、項目より
 * 上にあるほうが分かりやすい。
 */
div.map3d-area div.map3d-tune-pick {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* プルダウンの名札。畳まれないよう、幅は文字なりに取る。 */
div.map3d-area div.map3d-tune-pick label {
	flex: none;
	color: #b9c2cf;
}

div.map3d-area div.map3d-tune-pick select {
	flex: 1;
	min-width: 0;
	padding: 4px 6px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 3px;

	background-color: rgba(255, 255, 255, 0.1);
	font-size: 12px;
	color: #fff;
}

div.map3d-area div.map3d-tune-pick select option {
	background-color: #1b1f27;
	color: #fff;
}

div.map3d-area div.map3d-tune-pick button {
	flex: 0 0 auto;
	width: 26px;
	padding: 4px 0;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 3px;

	background-color: rgba(255, 255, 255, 0.08);
	font-size: 12px;
	line-height: 1;
	color: #ddd;
	cursor: pointer;
}

div.map3d-area div.map3d-tune-pick button:hover {
	background-color: rgba(255, 255, 255, 0.22);
	color: #fff;
}

div.map3d-area div.map3d-tune-pick button:disabled {
	opacity: 0.35;
	cursor: default;
}

/* 項目が増えても板が伸びきらないよう、ここだけ流す */
/*
 * 項目と「保存」を包む form。
 *
 * 板は縦に並べる入れ物で、中身だけが繰れる形にしてある。form を挟むと
 * その並びが1段深くなるので、form 自身も同じ形にして、高さを引き継ぐ。
 *
 * min-height を 0 にしておかないと、中身の高さより縮まず、板の上限を
 * 超えて伸びてしまう。
 */
div.map3d-area form.map3d-tune-form {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

div.map3d-area div.map3d-tune-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 6px 14px;
}

div.map3d-area div.map3d-tune-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

div.map3d-area div.map3d-tune-row label {
	flex: 1;
	/* 名前が長くても、入れ物を押し出さない */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * 説明を出す「?」。
 *
 * 名前のすぐ右に置く。押すと吹き出しが出る。触れただけでは何も起きない。
 */
div.map3d-area button.map3d-tune-ask {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;

	background: none;
	font-size: 10px;
	line-height: 1;
	color: #bcd;
	cursor: pointer;
}

div.map3d-area button.map3d-tune-ask:hover {
	border-color: #7ec8ff;
	color: #7ec8ff;
}

/*
 * 説明の吹き出し。
 *
 * 下地の板も暗いので、同じ暗さだと境目が見えない。少し明るい面にし、
 * 縁と、外へ広がる薄い輪をつけて浮かせる。
 */
div.map3d-area div.map3d-tip {
	position: absolute;
	z-index: 9;

	display: flex;
	align-items: flex-start;
	gap: 8px;
	max-width: 260px;
	padding: 9px 11px;
	border: 1px solid rgba(126, 200, 255, 0.55);
	border-radius: 5px;

	background-color: #2c3444;
	font-size: 12px;
	line-height: 1.6;
	color: #eef2f8;
	box-shadow: 0 0 0 3px rgba(10, 12, 16, 0.55),
		0 8px 24px rgba(0, 0, 0, 0.6);
}

div.map3d-area div.map3d-tip p {
	margin: 0;
}

div.map3d-area div.map3d-tip button {
	flex: 0 0 auto;
	padding: 0;
	border: none;
	background: none;
	font-size: 14px;
	line-height: 1;
	color: #9ab;
	cursor: pointer;
}

/* 初期設定に戻す。押し間違えないよう、保存とは離して置く */
div.map3d-area div.map3d-tune-reset {
	padding: 8px 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	text-align: center;
}

div.map3d-area div.map3d-tune-reset button {
	padding: 4px 14px;
	border: 1px solid rgba(255, 160, 150, 0.4);
	border-radius: 3px;

	background: none;
	font-size: 11px;
	color: #f0a89f;
	cursor: pointer;
}

div.map3d-area div.map3d-tune-reset button:hover {
	background-color: rgba(255, 120, 110, 0.18);
}

/*
 * ギアの絵。文字の左に置く。
 *
 * 白い面に濃い灰の枠。暗い下地の上でも形がはっきり出る。
 */
svg.map3d-gear {
	vertical-align: -3px;
	margin-right: 5px;
	fill: #fff;
	stroke: #555;
	stroke-width: 1.1;
	/* 角が尖りすぎないよう、繋ぎ目を丸める */
	stroke-linejoin: round;
}

div.map3d-area div.map3d-tune-row input[type="text"],
div.map3d-area div.map3d-tune-row input[type="number"],
div.map3d-area div.map3d-tune-row select {
	width: 110px;
	padding: 3px 6px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 3px;

	background-color: rgba(255, 255, 255, 0.1);
	font-size: 12px;
	color: #fff;
}

/*
 * 名前と覚え書きの欄。
 *
 * ほかの項目より入れる字が多いので、幅を広めに取る。覚え書きは何行にも
 * なるので、縦にだけ伸ばせるようにする。
 */
div.map3d-area div.map3d-tune-row .map3d-tune-word {
	width: 190px;
	padding: 3px 6px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 3px;

	background-color: rgba(255, 255, 255, 0.1);
	font-size: 12px;
	font-family: inherit;
	color: #fff;
	box-sizing: border-box;
}

div.map3d-area div.map3d-tune-row textarea.map3d-tune-word {
	resize: vertical;
	line-height: 1.5;
}

/* 一式そのものの欄と、設定の項目とを分ける線 */
div.map3d-area hr.map3d-tune-line {
	margin: 4px 0 8px;
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/*
 * 開いた選択肢の色。
 *
 * select には色を指定してあるが、開いた一覧はその下地を継がない。機器に
 * よっては白地に白文字になって読めなくなるため、option にも指定する。
 */
div.map3d-area div.map3d-tune-row select option {
	background-color: #1b1f27;
	color: #fff;
}

/* つまみ。右に数字を添えるので、その分だけ幅を詰める */
div.map3d-area div.map3d-tune-row input[type="range"] {
	width: 84px;
	accent-color: #7ec8ff;
}

div.map3d-area span.map3d-tune-now {
	flex: 0 0 auto;
	width: 22px;
	font-size: 12px;
	text-align: right;
	color: #cfe6ff;
	font-variant-numeric: tabular-nums;
}

div.map3d-area div.map3d-tune-row input[type="color"] {
	width: 40px;
	height: 24px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: none;
}

div.map3d-area span.map3d-tune-note {
	flex: 1;
	font-size: 11px;
	color: #9ab;
}

div.map3d-area div.map3d-tune-foot button {
	padding: 5px 16px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 3px;

	background-color: rgba(255, 255, 255, 0.14);
	font-size: 12px;
	color: #fff;
	cursor: pointer;
}

div.map3d-area div.map3d-tune-foot button:hover {
	background-color: rgba(255, 255, 255, 0.26);
}

/* 保存は、この板でいちばん押したい釦なので色を付ける */
div.map3d-area button#map3d-tune-save {
	border-color: #2f7fd0;
	background-color: #2f7fd0;
	font-weight: bold;
	color: #fff;
}

div.map3d-area button#map3d-tune-save:hover {
	border-color: #4394e4;
	background-color: #4394e4;
}

div.map3d-area div.map3d-tune-foot button:disabled {
	opacity: 0.4;
	cursor: default;
}

/* キャンセルは、保存より控えめに見せる */
div.map3d-area button.map3d-tune-cancel {
	border-color: rgba(255, 255, 255, 0.2);
	background-color: transparent;
	color: #bbb;
}

div.map3d-area button.map3d-tune-cancel:hover {
	background-color: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* デバッグ表示を写す釦 */
div.map3d-fps button.map3d-fps-copy {
	display: block;
	clear: both;
	width: 100%;
	margin-top: 6px;
	padding: 3px 0;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 3px;

	background-color: rgba(255, 255, 255, 0.12);
	font-size: 10px;
	font-family: monospace;
	color: #fff;
	cursor: pointer;
}

div.map3d-fps button.map3d-fps-copy:hover {
	background-color: rgba(255, 255, 255, 0.25);
}

/*
 * 全画面。
 *
 * 包んでいる入れ物ごと広げる。既定では中身が上下に寄るため、
 * 高さを画面いっぱいに直す。
 */
div.map3d-area:fullscreen,
div.map3d-area:-webkit-full-screen {
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
}

div.map3d-area:fullscreen div#map3d,
div.map3d-area:-webkit-full-screen div#map3d {
	height: 100%;
}

/*
 * 拡大表示。
 *
 * タブの中いっぱいに広げる。全画面とは違い、タブの枠や住所欄は残る。
 * 頭や脇は下に隠れる。
 */
div.map3d-area.is-wide {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	max-width: none;
	margin: 0;
	padding: 0;
	/* 頭や脇より前に出す */
	z-index: 2000;
	background: #fff;
}

div.map3d-area.is-wide div#map3d {
	height: 100%;
}

/*
 * 探す範囲。
 *
 * 種別は重ねて選べるが、こちらは択一。同じ並びに置くと見分けが
 * つかないので、行を分けて見出しを付ける。
 */
div.map3d-search div.map3d-filter-range {
	display: flex;
	align-items: center;
	flex-basis: 100%;
	gap: 6px;
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1px solid #eee;
}

div.map3d-search div.map3d-filter-range > span {
	font-size: 12px;
	color: #888;
}

div.map3d-search button.map3d-filter-near {
	position: static;
	transform: none;

	padding: 4px 9px;
	border: 1px solid #ddd;
	border-radius: 12px;

	background-color: #fff;
	font-size: 12px;
	color: #444;
}

div.map3d-search button.map3d-filter-near:hover {
	border-color: #e5528b;
	color: #e5528b;
}

div.map3d-search button.map3d-filter-near.is-active {
	border-color: #e5528b;

	background-color: #e5528b;
	color: #fff;
}

/*
 * お気に入り。
 *
 * 星の釦で開く。絞り込みと同じ場所に出すので、片方を開くと
 * もう片方は閉じる。
 */
div.map3d-search button.map3d-search-mark {
	/*
	 * この入れ物の釦は、みな絶対位置で右から並べてある。
	 * 位置を書かないと重なって見えなくなる。
	 */
	right: 8px;

	width: 22px;
	height: 22px;
	color: #bbb;
}

div.map3d-search button.map3d-search-mark svg {
	display: block;
	width: 20px;
	height: 20px;

	fill: currentColor;
	stroke: none;
}

div.map3d-search button.map3d-search-mark:hover {
	color: #e5528b;
}

div.map3d-search button.map3d-search-mark.is-active {
	color: #e5528b;
}

div.map3d-search div.map3d-mark {
	/* 透けていると地図が透けて、文字が読めない */
	background-color: #fff;

	max-height: 320px;
	padding: 10px 12px;
	overflow-y: auto;
	border-top: 1px solid #eee;
}

/*
 * この入れ物の釦は、既定で絶対位置になっている。検索窓の右端に並べる
 * ためのもので、一覧の中の釦にまで効くと、みな同じ場所へ重なってしまう。
 * 並びに戻す。
 */
div.map3d-search div.map3d-mark button {
	position: static;
	transform: none;
}

div.map3d-mark div.map3d-mark-head {
	margin-bottom: 8px;
}

div.map3d-mark button#map3d-mark-add {
	padding: 5px 10px;
	border: 1px solid #e5528b;
	border-radius: 4px;
	background-color: #fff;
	font-size: 12px;
	color: #e5528b;
	cursor: pointer;
}

div.map3d-mark button#map3d-mark-add:hover {
	background-color: #e5528b;
	color: #fff;
}

div.map3d-mark ul.map3d-mark-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

div.map3d-mark ul.map3d-mark-list > li {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
	border-bottom: 1px solid #f2f2f2;
}

/* 名前は伸ばして、押しやすくする */
div.map3d-mark button.map3d-mark-go {
	flex: 1 1 auto;
	min-width: 0;
	padding: 4px 6px;
	border: none;
	background: none;
	text-align: left;
	font-size: 13px;
	color: #333;
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

div.map3d-mark button.map3d-mark-go:hover {
	color: #e5528b;
}

div.map3d-mark button.map3d-mark-edit,
div.map3d-mark button.map3d-mark-drop {
	flex: 0 0 auto;
	padding: 3px 7px;
	border: 1px solid #ddd;
	border-radius: 3px;
	background-color: #fff;
	font-size: 11px;
	color: #888;
	cursor: pointer;
}

div.map3d-mark button.map3d-mark-edit:hover {
	border-color: #e5528b;
	color: #e5528b;
}

div.map3d-mark button.map3d-mark-drop:hover {
	border-color: #d33;
	color: #d33;
}

div.map3d-mark p.map3d-mark-empty,
div.map3d-mark p.map3d-mark-guide {
	margin: 4px 0;
	font-size: 12px;
	line-height: 1.7;
	color: #888;
}

div.map3d-mark p.map3d-mark-guide a {
	color: #e5528b;
	text-decoration: underline;
}

/*
 * 知らせ。
 *
 * 保存できたことなどを、画面の右上へ少しの間だけ出す。設定の板を閉じて
 * しまうと、板の中の文字では伝わらないため。
 *
 * 押しても地図に伝わらないと、知らせの下が触れなくなる。触れないように
 * しておき、中身だけ触れるようにする。
 */
div.map3d-toast {
	position: absolute;
	top: 12px;
	right: 12px;
	/* 設定の板(8)や名前を聞く窓(20)より前に出す */
	z-index: 30;

	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;

	max-width: calc(100% - 24px);
	pointer-events: none;
}

div.map3d-toast div.map3d-toast-item {
	max-width: 320px;
	padding: 10px 14px;
	border-radius: 4px;
	border-left: 4px solid #3aa76d;

	background-color: rgba(38, 42, 50, 0.94);
	font-size: 13px;
	line-height: 1.5;
	color: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
	pointer-events: auto;
	cursor: pointer;

	/* 出るときは下から、消えるときは薄く */
	animation: map3d-toast-in 0.18s ease-out;
}

div.map3d-toast div.map3d-toast-item.is-warn {
	border-left-color: #d8a13a;
}

div.map3d-toast div.map3d-toast-item.is-bad {
	border-left-color: #d8553a;
}

div.map3d-toast div.map3d-toast-item.is-gone {
	opacity: 0;
	transform: translateX(12px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

@keyframes map3d-toast-in {
	from {
		opacity: 0;
		transform: translateX(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/*
 * 名前と覚え書きを聞く窓。
 *
 * prompt は見た目を揃えられず、覚え書きも一緒に入れられない。
 *
 * 地図の器いっぱいに広げ、その真ん中に出す。器は拡大表示のときに
 * position:fixed になるので、こちらは absolute でよい。fixed にすると、
 * transform を持つ親があったときに、そちらを基準にしてしまう。
 */
div.map3d-ask {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	/* 設定の板(8)より前に出す */
	z-index: 20;
	background-color: rgba(0, 0, 0, 0.35);
}

div.map3d-ask div.map3d-ask-box {
	width: 320px;
	max-width: 90%;
	padding: 18px;
	border-radius: 6px;
	background-color: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

div.map3d-ask p.map3d-ask-title {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: bold;
	color: #333;
}

div.map3d-ask input,
div.map3d-ask textarea {
	display: block;
	width: 100%;
	margin-bottom: 10px;
	padding: 7px 9px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 13px;
	font-family: inherit;
	color: #333;
	box-sizing: border-box;
}

div.map3d-ask input:focus,
div.map3d-ask textarea:focus {
	outline: none;
	border-color: #e5528b;
}

div.map3d-ask textarea {
	resize: vertical;
}

div.map3d-ask div.map3d-ask-foot {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 4px;
}

div.map3d-ask button {
	padding: 6px 14px;
	border-radius: 4px;
	font-size: 13px;
	cursor: pointer;
}

div.map3d-ask button.map3d-ask-cancel {
	border: 1px solid #ddd;
	background-color: #fff;
	color: #777;
}

div.map3d-ask button.map3d-ask-ok {
	border: 1px solid #e5528b;
	background-color: #e5528b;
	color: #fff;
}

div.map3d-ask button.map3d-ask-ok:hover {
	background-color: #c73f70;
	border-color: #c73f70;
}

/*
 * 夜。
 *
 * 地面を暗くすると、黒っぽい地名が読めなくなる。文字を明るくし、
 * 縁取りも暗い側に回す。
 */
div.map3d-area.is-night span.map3d-label {
	color: #e8ecf5;
	text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.7);
}

/*
 * 前へ跳ぶ釦。
 *
 * 操作板の脇に置く。歩いている手の届くところでないと、
 * 詰まったときに押せない。
 */
div.map3d-area button.map3d-warp {
	position: absolute;

	/*
	 * 操作板の真上に、中心を揃えて置く。
	 *
	 * 操作板は右から20px、幅120px なので、中心は右から80px。釦の右端を
	 * そこに置いてから、幅の半分だけ右へ戻すと中心が重なる。文字数が
	 * 変わっても揃ったままになる。
	 */
	right: 80px;
	bottom: 152px;
	transform: translateX(50%);
	z-index: 5;
	padding: 10px 14px;
	border: none;
	border-radius: 20px;
	background-color: rgba(0, 0, 0, 0.45);
	font-size: 12px;
	color: #fff;
	cursor: pointer;
}

/*
 * 飛んでいるときの高さの釦。
 *
 * 前へ跳ぶと同じ場所(操作板の真上)に置く。歩きと飛びで出るものが
 * 入れ替わるので、位置を揃えておくと目移りしない。
 */
div.map3d-area div.map3d-lift {
	position: absolute;
	right: 80px;
	bottom: 152px;
	transform: translateX(50%);
	z-index: 5;

	display: flex;
	gap: 6px;
}

div.map3d-area button.map3d-lift-btn {
	width: 40px;
	padding: 8px 0;
	border: none;
	border-radius: 20px;

	background-color: rgba(0, 0, 0, 0.45);
	font-size: 13px;
	line-height: 1;
	color: #fff;
	cursor: pointer;
	/* 長押しで、選択や拡大が始まらないようにする */
	user-select: none;
	touch-action: none;
}

div.map3d-area button.map3d-lift-btn:hover {
	background-color: rgba(0, 0, 0, 0.65);
}

div.map3d-area button.map3d-lift-btn.is-on {
	background-color: rgba(126, 200, 255, 0.75);
	color: #06121d;
}

div.map3d-area button.map3d-warp:hover {
	background-color: rgba(0, 0, 0, 0.65);
}

div.map3d-area button.map3d-warp:active {
	background-color: rgba(0, 0, 0, 0.7);
	transform: translateX(50%) scale(0.94);
}

/*
 * 押しっぱなしの間。
 *
 * 色を濃くするだけだと、押した瞬間と続いている間の区別が付かない。
 * 光を横へ流して、進み続けていることが分かるようにする。
 *
 * 動かすのは background-position だけ。transform には中心を合わせる
 * ための移動が入っているので、そちらには触れない。
 */
div.map3d-area button.map3d-warp.is-on {
	background-color: rgba(0, 0, 0, 0.6);
	background-image: linear-gradient(100deg,
		rgba(255, 255, 255, 0) 20%,
		rgba(255, 255, 255, 0.5) 45%,
		rgba(255, 255, 255, 0) 70%);
	background-size: 220% 100%;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
	animation: map3d-warp-flow 0.9s linear infinite;
}

@keyframes map3d-warp-flow {
	from {
		background-position: 130% 0;
	}

	to {
		background-position: -70% 0;
	}
}

/* 動きを控えたい設定のときは、明滅させずに縁だけで示す */
@media (prefers-reduced-motion: reduce) {
	div.map3d-area button.map3d-warp.is-on {
		background-image: none;
		animation: none;
	}

	div.map3d-toast div.map3d-toast-item {
		animation: none;
	}

	div.map3d-toast div.map3d-toast-item.is-gone {
		transform: none;
		transition: opacity 0.25s ease;
	}
}

/* 初期設定に戻す。押し間違えると設定が消えるので、控えめに置く。 */
div.map3d-toolbar button.map3d-reset {
	color: #999;
}

div.map3d-toolbar button.map3d-reset:hover {
	border-color: #d33;
	color: #d33;
	background: #fff;
}