<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>3D Graph with Rankings</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			height: 100vh;
		}

		#container {
			display: flex;
			flex: 1;
			width: 100%;
		}

		#three {
			flex: 1;
			background-color: aliceblue;
			height: 100%;
		}

		#info {
			position: fixed;  /* fixedに変更して、スクロールしても位置が固定されるようにする */
			top: 10px;
			right: 10px;
			background-color: #fff;
			padding: 10px;
			border: 1px solid #ccc;
			border-radius: 5px;
			width: 300px;
			max-height: 900px;
			overflow-y: auto;
			z-index: 10;
		}

		#rankTable {
			position: fixed; /* 左上に固定表示 */
			top: 10px;
			left: 10px;
			background-color: #fff;
			padding: 10px;
			border: 1px solid #ccc;
			border-radius: 5px;
			width: 300px;
			max-height: 900px;
			overflow-y: auto;
			z-index: 10;
			font-size: 12px;
		}

		/* レスポンシブ対応 */
		@media screen and (max-width: 768px) {
			#container {
				flex-direction: column;
			}
			#rankTable {
				width: 100%;
			}
			#three {
				width: 100%;
				height: 400px;
			}
		}
	</style>
</head>
<body>

	<!-- 左上にランク表 -->
	<div id="rankTable">
		<table>
			<thead>
				<tr>
					<th>産業部門名</th>
					<th>順列</th>
				</tr>
			</thead>
			<tbody>
				<tr><td>生産用機械</td><td>1</td></tr>
				<tr><td>医療・福祉</td><td>2</td></tr>
				<tr><td>教育・研究</td><td>3</td></tr>
				<tr><td>対個人サービス</td><td>4</td></tr>
				<tr><td>飲食料品</td><td>5</td></tr>
				<tr><td>農林漁業</td><td>6</td></tr>
				<tr><td>水道</td><td>7</td></tr>
				<tr><td>他に分類されない会員制団体</td><td>8</td></tr>
				<tr><td>分類不明</td><td>9</td></tr>
				<tr><td>公務</td><td>10</td></tr>
				<tr><td>輸送機械</td><td>11</td></tr>
				<tr><td>情報通信機器</td><td>12</td></tr>
				<tr><td>事務用品</td><td>13</td></tr>
				<tr><td>業務用機械</td><td>14</td></tr>
				<tr><td>建設</td><td>15</td></tr>
				<tr><td>はん用機械</td><td>16</td></tr>
				<tr><td>電気機械</td><td>17</td></tr>
				<tr><td>電子部品</td><td>18</td></tr>
				<tr><td>窯業・土石製品</td><td>19</td></tr>
				<tr><td>金属製品</td><td>20</td></tr>
				<tr><td>鉄鋼</td><td>21</td></tr>
				<tr><td>非鉄金属</td><td>22</td></tr>
				<tr><td>廃棄物処理</td><td>23</td></tr>
				<tr><td>繊維製品</td><td>24</td></tr>
				<tr><td>その他の製造工業製品</td><td>25</td></tr>
				<tr><td>パルプ・紙・木製品</td><td>26</td></tr>
				<tr><td>プラスチック・ゴム製品</td><td>27</td></tr>
				<tr><td>化学製品</td><td>28</td></tr>
				<tr><td>電力・ガス・熱供給</td><td>29</td></tr>
				<tr><td>石油・石炭製品</td><td>30</td></tr>
				<tr><td>鉱業</td><td>31</td></tr>
				<tr><td>商業</td><td>32</td></tr>
				<tr><td>運輸・郵便</td><td>33</td></tr>
				<tr><td>不動産</td><td>34</td></tr>
				<tr><td>金融・保険</td><td>35</td></tr>
				<tr><td>情報通信</td><td>36</td></tr>
				<tr><td>対事業所サービス</td><td>37</td></tr>
			</tbody>
		</table>
	</div>

	<!-- 真ん中に3Dグラフ -->
	<div id="three"></div>

	<!-- 右上にノード情報 -->
	<div id="info">
		<!-- ノードの情報がここに表示されます -->
	</div>

	<!-- JavaScript ライブラリの読み込み -->
	<script type="module" src="https://unpkg.com/three@0.158.0/build/three.js" defer></script>
	<script type="module" src="https://unpkg.com/3d-force-graph@1.73.0/dist/3d-force-graph.min.js" defer></script>
	<script type="module" src="https://unpkg.com/three-spritetext@1.8.1/dist/three-spritetext.min.js" defer></script>
	<script src="./static/main2_0114.js" charset="utf-8" defer></script>
</body>
</html>
