<!DOCTYPE html>
<html>
<head>
	<title>360°VR　バーチャルモデルルーム - 不動産　住宅メーカー　インテリア　向け</title><!--　※注意：タイトルを書き換え忘れないように※　-->
	<meta name="description" content="不動産・住宅メーカー向け。360°VRで体験するバーチャルモデルルーム。最新技術を活用したバーチャルツアーを提供します。">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="mobile-web-app-capable" content="yes" />
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta http-equiv="x-ua-compatible" content="IE=edge" />
	<style>
		html { height:100%; }
		body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
	</style>

<!--　注意：テンプレの内容を追記すること　（ファイルは全て「customize」に格納）================================================================================================================================================================　-->
	<link rel="stylesheet" href="customize/style.css">
	<link rel="stylesheet" href="customize/viewpoint.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap">
<!--　注意：テンプレの内容を追記すること　（ファイルは全て「customize」に格納）================================================================================================================================================================　-->
</head>
<body>

<script src="tour.js"></script>


<!--　以下、テキスト系の設定　================================================================================================================================================================　-->

<!--　【画面左上のタイトル】　-->
<div class="Project-title">
	<h1></h1>
</div>

<div class="annotation">
	<p>※こちらのVRは計画段階の図面を基に制作しており実際の納まりと異なる場合がございます。<br>
	また、表現の一部は有償プランの内容となり、家具や小物は販売価格に含まれません。</p>
</div>

<!--　【コピーライツ】　-->
<div class="copy-rights"><p>© 2024 SILQ DESIGN.inc</p></div>

<!--　以上、テキスト系の設定　================================================================================================================================================================　-->



<!--　以下、メニューボタンの一覧です。　（ファイルは全て「customize」に格納）================================================================================================================================================================　-->

<!--　【フロアマップのボタン】　-->
<div class="main-btn">
	<button id="openbtn1" class="clear-background"><img id="plan-img" src="customize/img/plan.png" alt="Plan Image"></button>
	<p>MAP</p>
</div>


<!--　【次送り矢印のボタン】　--><!--※カラーセレクトでシーンが増えると使いづらくなるため通常は使用しないことにする
<div class="arrow-container">
	<div class="arrow-right" onclick="nextScene()"><img src="customize/img/arrow.png"></div>
	<div class="arrow-left" onclick="prevScene()"><img src="customize/img/arrow.png"></div>
</div>-->

<!--　【画面下部のボタン一覧】　-->
<div class="menu-btn">
	<!--　ベーシックボタン　-->
	<button id="select-btn" class="clear-background"><img src="customize/img/furniture.png"></button>
	<!--　昼夜ボタン　-->
	<button id="daynight-btn" class="clear-background"><img src="customize/img/day-night.png"></button>
	<!--　家具ボタン　
	<button id="furniture-btn" class="clear-background"><img src="customize/img/furniture.png"></button>-->
	<!--　サムネイルボタン　-->
	<button id="thumbnail-btn" class="clear-background"><img src="customize/img/thumbnail.png"></button>
	<!--　ヘルプボタン　
	<button id="help-btn" class="clear-background"><img src="customize/img/help.png"></button>-->
	<!--　拡大ボタン　-->
	<button id="fullscreen-btn" class="clear-background"><img src="customize/img/fullscreen.png"></button>
</div>

<div class="hidden-skin"><span></span><span></span><span></span></div><!--　スキンを押せなくする　-->

<!--　以上、メニューボタンの一覧です。　（ファイルは全て「customize」に格納）================================================================================================================================================================　-->







<!--　以下、デフォルトのギミックです　（ファイルは全て「customize」に格納）================================================================================================================================================================　-->

<!--　====================【　フロアマップ　】　====================-->
 <div id="floor-map" class="show">
	<img id="floor-map-close-btn" src="customize/img/close.png" alt="close Image">
	<div class="tab_container">
		<!-- フロアマップA --><!-- checked="checked"が視点アイコンのデフォルトとなる。 -->
		<input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" /><label class="tab-label" for="TAB-01"><p>FLOOR MAP</p></label>
		<div class="tab-content">
			<div class="plan"><!-- 以下　図面 -->
				<img src="customize/img/floor-plan_A.png" alt="一階平面図">
			</div>
			<div id="view-1"><!-- 以下　視点のボタン -->
				<div class="point-A"><div class="element p-button" onclick="switchScene('scene_view-A')"></div></div>
				<div class="point-B"><div class="element p-button" onclick="switchScene('scene_view-B')"></div></div>
				<div class="point-C"><div class="element p-button" onclick="switchScene('scene_view-C')"></div></div>
				<!-- ※　視点を追加する場合はここを適宜解除する
				<div class="point-D"><div class="element p-button" onclick="switchScene('scene_view-D')"></div></div>
				<div class="point-E"><div class="element p-button" onclick="switchScene('scene_view-E')"></div></div>
				-->
			</div>
			<div id="view-2"><!-- 以下　視点のボタン -->
				<div class="point-A"><div class="element p-button" onclick="switchScene('scene_view-A2')"></div></div>
				<div class="point-B"><div class="element p-button" onclick="switchScene('scene_view-B2')"></div></div>
				<div class="point-C"><div class="element p-button" onclick="switchScene('scene_view-C2')"></div></div>
				<!-- ※　視点を追加する場合はここを適宜解除する
				<div class="point-D"><div class="element p-button" onclick="switchScene('scene_view-D')"></div></div>
				<div class="point-E"><div class="element p-button" onclick="switchScene('scene_view-E')"></div></div>
				-->
			</div>
			<div id="view-3"><!-- 以下　視点のボタン -->
				<div class="point-A"><div class="element p-button" onclick="switchScene('scene_view-A3')"></div></div>
				<div class="point-B"><div class="element p-button" onclick="switchScene('scene_view-B3')"></div></div>
				<div class="point-C"><div class="element p-button" onclick="switchScene('scene_view-C3')"></div></div>
				<!-- ※　視点を追加する場合はここを適宜解除する
				<div class="point-D"><div class="element p-button" onclick="switchScene('scene_view-D')"></div></div>
				<div class="point-E"><div class="element p-button" onclick="switchScene('scene_view-E')"></div></div>
				-->
			</div>

		</div>

		<!-- フロアマップ B　-----　※　フロアマップを追加する場合はここを解除して使用する
		<input id="TAB-02" type="radio" name="TAB" class="tab-switch" checked="checked" /><label class="tab-label" for="TAB-01"><p>FLOOR-B</p></label>
		<div class="tab-content">
			<div class="plan">
				<img src="customize/img/floor-plan_A.png" alt="一階平面図">
			</div>
			<div>
				<div class="point-A"><div class="element p-button" onclick="switchScene('scene_view-A')"></div></div>
				<div class="point-B"><div class="element p-button" onclick="switchScene('scene_view-B')"></div></div>
				<div class="point-C"><div class="element p-button" onclick="switchScene('scene_view-C')"></div></div>
				<div class="point-D"><div class="element p-button" onclick="switchScene('scene_view-D')"></div></div>
				<div class="point-E"><div class="element p-button" onclick="switchScene('scene_view-E')"></div></div>
				<div class="point-F"><div class="element p-button" onclick="switchScene('scene_view-F')"></div></div>
			</div>
		</div>
		-->
		
	</div>
 </div>

<!--　====================【　　ヘルプ　　】　====================-->
<div class="help-container">
	<img id="help-close-btn" src="customize/img/close.png" alt="close Image">
  </div>
<!--　====================【　サムネイル　】　====================-->
<div class="thumbnail-container">
	<p class="container-title">視点選択</p>
	<img id="thumbnail-close-btn" src="customize/img/close.png" alt="close Image">
	<div class="thumbnail-view">
		<div class="pallet">
			<div class="thumbnail-set"><div class="select-icon" onclick="switchScene('scene_view-A')"><img src="customize/img/thumbnail-A.png"></div><p>廊下</p></div>
			<div class="thumbnail-set"><div class="select-icon" onclick="switchScene('scene_view-B')"><img src="customize/img/thumbnail-B.png"></div><p>キッチン</p></div>
			<div class="thumbnail-set"><div class="select-icon" onclick="switchScene('scene_view-C')"><img src="customize/img/thumbnail-C.png"></div><p>リビング</p></div>
		</div>
	</div>
  </div>

<!--　以上、デフォルトのギミックです　（ファイルは全て「customize」に格納）================================================================================================================================================================　-->






<!--　以上、オプションのギミックです　（ファイルは全て「customize」に格納）================================================================================================================================================================　-->

<!--　====================【　ベーシック・切り替え　】　====================-->
<div class="select-container">
	<p class="container-title">家具</p>
	<img id="select-close-btn" src="customize/img/close.png" alt="close Image">
	<div class="scene-view scene_view-A"><!--「scene-view scene_view-A」はシーン毎の表示切替用です。スタイルに関係はありません。-->
		<div class="pallet">
			<div class="select-set" onclick="switchScene('scene_view-A')"><div class="select-icon"><img src="customize/img/select-A.png"></div><p>あり</p></div>
			<div class="select-set" onclick="switchScene('scene_view-A3')"><div class="select-icon" ><img src="customize/img/select-C.png"></div><p>なし</p></div>
		</div>
	</div>
	<div class="scene-view scene_view-B"><!--「scene-view scene_view-B」はシーン毎の表示切替用です。スタイルに関係はありません。-->
		<div class="pallet">
			<div class="select-set" onclick="switchScene('scene_view-B')"><div class="select-icon"><img src="customize/img/select-A.png"></div><p>あり</p></div>
			<div class="select-set" onclick="switchScene('scene_view-B3')"><div class="select-icon" ><img src="customize/img/select-C.png"></div><p>なし</p></div>
		</div>
	</div>
	<div class="scene-view scene_view-C"><!--「scene-view scene_view-B」はシーン毎の表示切替用です。スタイルに関係はありません。-->
		<div class="pallet">
			<div class="select-set" onclick="switchScene('scene_view-C')"><div class="select-icon"><img src="customize/img/select-A.png"></div><p>あり</p></div>
			<div class="select-set" onclick="switchScene('scene_view-C3')"><div class="select-icon" ><img src="customize/img/select-C.png"></div><p>なし</p></div>
		</div>
	</div>
  </div>
  <!--　====================【　昼夜切り替え専用　】　====================-->
<div class="daynight-container">
	<p class="container-title">情景変更</p>
	<img id="daynight-close-btn" src="customize/img/close.png" alt="close Image">
	<div class="daynight-view scene_view-A"><!--「scene-view scene_view-A」はシーン毎の表示切替用です。スタイルに関係はありません。-->
		<div class="pallet">
			<div class="daynight-set" onclick="switchScene('scene_view-A')"><div class="select-icon"><img src="customize/img/select-A.png"></div><p>昼</p></div>
			<div class="daynight-set" onclick="switchScene('scene_view-A2')"><div class="select-icon" ><img src="customize/img/select-B.png"></div><p>夜</p></div>
		</div>
	</div>
	<div class="daynight-view scene_view-B"><!--「scene-view scene_view-B」はシーン毎の表示切替用です。スタイルに関係はありません。-->
		<div class="pallet">
			<div class="daynight-set" onclick="switchScene('scene_view-B')"><div class="select-icon"><img src="customize/img/select-A.png"></div><p>昼</p></div>
			<div class="daynight-set" onclick="switchScene('scene_view-B2')"><div class="select-icon" ><img src="customize/img/select-B.png"></div><p>夜</p></div>
		</div>
	</div>
	<div class="daynight-view scene_view-C"><!--「scene-view scene_view-B」はシーン毎の表示切替用です。スタイルに関係はありません。-->
		<div class="pallet">
			<div class="daynight-set" onclick="switchScene('scene_view-C')"><div class="select-icon"><img src="customize/img/select-A.png"></div><p>昼</p></div>
			<div class="daynight-set" onclick="switchScene('scene_view-C2')"><div class="select-icon" ><img src="customize/img/select-B.png"></div><p>夜</p></div>
		</div>
	</div>
  </div>
  <!--　====================【　家具無し切り替え　専用　】　====================
<div class="furniture-container">
	<p class="container-title">FURNITURE</p>
	<img id="furniture-close-btn" src="customize/img/close.png" alt="close Image">
	<div class="furniture-view scene_view-A">
		<div class="pallet">
			<div class="furniture-set" onclick="switchScene('scene_view-A')"><div class="select-icon"><img src="customize/img/select-A.png"></div><p>家具あり</p></div>
			<div class="furniture-set" onclick="switchScene('scene_view-A3')"><div class="select-icon"><img src="customize/img/select-C.png"></div><p>家具なし</p></div>
		</div>
	</div>
	<div class="furniture-view scene_view-B">
		<div class="pallet">
			<div class="furniture-set" onclick="switchScene('scene_view-B')"><div class="select-icon"><img src="customize/img/select-B.png"></div><p>家具あり</p></div>
			<div class="furniture-set" onclick="switchScene('scene_view-B3')"><div class="select-icon"><img src="customize/img/select-C.png"></div><p>家具なし</p></div>
		</div>
	</div>
	<div class="furniture-view scene_view-C">
		<div class="pallet">
			<div class="furniture-set" onclick="switchScene('scene_view-C')"><div class="select-icon"><img src="customize/img/select-C.png"></div><p>家具あり</p></div>
			<div class="furniture-set" onclick="switchScene('scene_view-C3')"><div class="select-icon"><img src="customize/img/select-C.png"></div><p>家具なし</p></div>
		</div>
	</div>
  </div>-->
<!--　===============【　ポップアップ　インフォメーション　】　================-->

<div class="info-faucet hidden">
	<div class="close-btn"><img src="customize/img/close.png"></div>
	<div class="info-img"><img src="customize/img/info-faucet.png"></div>
</div>
<div class="info-stove hidden">
	<div class="close-btn"><img src="customize/img/close.png"></div>
	<div class="info-img"><img src="customize/img/info-stove.png"></div>
</div>

<!--　以上、オプションのギミックです　（ファイルは全て「customize」に格納）================================================================================================================================================================　-->






<!--　注意：テンプレの内容に置換すること================================================================================================================================================================　-->
<div id="pano" style="width:100%;height:100%;">
	<noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
	<!--<script>
		embedpano({xml:"tour.xml", target:"pano", passQueryParameters:"startscene,startlookat"});
	</script>-->
</div>
<!--　注意：テンプレの内容に置換すること================================================================================================================================================================　-->

<!--　注意：テンプレの内容を追記すること　（ファイルは全て「customize」に格納）================================================================================================================================================================　-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" closeorigin="anonymous"></script>
<script src="customize/general.js"></script><!-- 一般的な設定 -->
<script src="customize/select.js"></script><!-- セレクト切り替え用 -->
<!--　注意：テンプレの内容を追記すること　（ファイルは全て「customize」に格納）================================================================================================================================================================　-->

</body>
</html>
