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

body {
	background:#000000;
	color:#ffffff;
	position: fixed;
	width: 100%;
	height: 100%;
	padding:0;
	margin:0;
	overflow:hidden;
}
body *,
body *::before,
bory *::after{
  box-sizing: border-box;
}
a:link,a:visited{
	cursor:pointer;
	text-decoration:none;
}
a{
  outline:none;
	transition:opacity 0.2s;
	-webkit-tap-highlight-color:transparent;
}
li{
	list-style: none;
}
#scene{
	left: 0px;
	top: 0px;
	position: absolute;
	width:100%;
	height:100%;
	overflow:hidden;
}

/*
#loading{
  background:#FFFFFF;
  position: fixed;
	width: 100%;
	height: 100%;
	padding:0;
	margin:0;
	overflow:hidden;
  z-index: 10;
}
#loading span{
	font-size: 30px;
	color: #000;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
*/

/*loader*/

#loading{
	width: 100%;
	height: 100%;
	background:#000;
	color: #FFF;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 12;
}
#loadImg {
	color: #ffffff;
	font-size: 45px;
	text-indent: -9999em;
	overflow: hidden;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	opacity: 0.5;
	margin: -0.5em 0 0 -0.5em;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: loadImg 1.7s infinite ease, round 1.7s infinite ease;
	animation: loadImg 1.7s infinite ease, round 1.7s infinite ease;
}
#loadCount{
	font-size: 16px;
	line-height: 1;
	font-family: 'Oswald', sans-serif;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
/*	display: none;*/
}
@media screen and (max-width: 768px) {
	#loadImg{
		font-size: 30px;
	}
	#loadCount{
		font-size: 14px;
	}
}
@-webkit-keyframes loadImg {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@keyframes loadImg {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@-webkit-keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes loadRotation{
  0%{ transform: translate(-50%, -50%) rotate(0);}
  100%{ transform: translate(-50%, -50%) rotate(360deg);}
}
@keyframes loadRotation{
  0%{ transform: translate(-50%, -50%) rotate(0);}
  100%{ transform: translate(-50%, -50%) rotate(360deg);}
}
#loadImg.stop{
	-webkit-animation: none;
	animation: none;
}

/*startwindow*/
#startwindow{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: RGBA(0,0,0,0.8);
}
#title{
  position: absolute;
  top: 40%;
  left: 50%;
  width: 60%;
  height: 8%;
  transform: translate(-50%, -50%);
}
#title p{
  text-align: center;
  font-size: 60px;
  margin: 0;
  font-weight: bold;
}
#startBtn{
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: bold;
  background-color: #FFF;
  color: #000;
  width: 25%;
  height: auto;
  text-align: center;
  border-radius: 6px;
}

#bottomsafe{
  position: absolute;
  bottom: 0;
  height: 10%;
  width: 100%;
}
.modal {
	z-index: 11;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none;
}
.modal::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	background-color: RGBA(0,0,0,0.9);
	transform: scale(0.8);
	transition: all 1s .5s cubic-bezier(.210, .60, .350, 1);
}
.modal.active::before {
	transition: all 1s cubic-bezier(.210, .60, .350, 1);
	opacity: 1;
	transform: scale(1);
}
.modal .modal_window {
	width: 100%;
	height: 100%;
	text-align: left;
	font-size: 0;
}
.modal_inner {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.modal_image,
.modal3D {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 0;
	transition: opacity .5s cubic-bezier(.210, .60, .350, 1);
}
.modal.active .modal_image,
.modal.active .modal_3d {
	transition: opacity .5s 1s cubic-bezier(.210, .60, .350, 1);
	opacity: 1;
}
#itemCvs,
#itemVdo{
	width: auto;
	height: 90%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition: transform .2s, width .2s, height .2s;
	display: none;
}
#itemCvs.h100,
#itemVdo.h100{
	width: 90%;
	height: auto;
}
#itemCvs.scale1,
#itemVdo.scale1{
	/* width: 120%; */
	/* width: auto; */
	/* height: auto; */
	/* height: 100%; */
	/* 220204 fukuda id65対応 ----------start----------*/
	transform: translate(-50%,-50%) scale(1.2);
	/* 220204 fukuda id65対応 ----------end----------*/
	
}
#itemCvs.h100.scale1,
#itemVdo.h100.scale1{
	width: auto;
	height: 120%;
}
#itemCvs.scale2,
#itemVdo.scale2{
	/* width: 140%; */
	/* width: auto; */
	/* height: auto; */
	/* height: 120%; */
	/* 220204 fukuda id65対応 ----------start----------*/
	transform: translate(-50%,-50%) scale(1.4);
	/* 220204 fukuda id65対応 ----------end----------*/
}
#itemCvs.h100.scale2,
#itemVdo.h100.scale2{
	width: auto;
	height: 140%;
}
#itemCvs.scale3,
#itemVdo.scale3{
	/* width: 160%; */
	/* width: auto; */
	/* height: auto; */
	/* height: 140%; */
	/* 220204 fukuda id65対応 ----------start----------*/
	transform: translate(-50%,-50%) scale(1.6);
	/* 220204 fukuda id65対応 ----------end----------*/
}
#itemCvs.h100.scale3,
#itemVdo.h100.scale3{
	width: auto;
	height: 160%;
}
#itemCvs.scale4,
#itemVdo.scale4{
	/* width: 180%; */
	/* width: auto; */
	/* height: auto; */
	/* height: 160%; */
	/* 220204 fukuda id65対応 ----------start----------*/
	transform: translate(-50%,-50%) scale(1.8);
	/* 220204 fukuda id65対応 ----------end----------*/
}
#itemCvs.h100.scale4,
#itemVdo.h100.scale4{
	width: auto;
	height: 180%;
}
#itemCvs.scale5,
#itemVdo.scale5{
	/* width: 200%; */
	/* width: auto; */
	/* height: auto; */
	/* height: 180%; */
	/* 220204 fukuda id65対応 ----------start----------*/
	transform: translate(-50%,-50%) scale(2.0);
	/* 220204 fukuda id65対応 ----------end----------*/
}
#itemCvs.h100.scale5,
#itemVdo.h100.scale5{
	width: auto;
	height: 200%;
}
#itemCvs.scale-1,
#itemVdo.scale-1{
	transform: translate(-50%,-50%) scale(0.8);
}
#itemCvs.scale-2,
#itemVdo.scale-2{
	transform: translate(-50%,-50%) scale(0.6);
}
#iframe3D {
	width: 100%;
	height: 100%;
	position: absolute;
}
#itemSignage.scale1{
	transform: translate(-50%,-50%) scale(1.2) !important;
}
#itemSignage.scale2{
	transform: translate(-50%,-50%) scale(1.4) !important;
}
#itemSignage.scale3{
	transform: translate(-50%,-50%) scale(1.6) !important;
}
#itemSignage.scale4{
	transform: translate(-50%,-50%) scale(1.8) !important;
}
#itemSignage.scale5{
	transform: translate(-50%,-50%) scale(2.0) !important;
}
#itemSignage.scale-1{
	transform: translate(-50%,-50%) scale(0.8) !important;
}
#itemSignage.scale-2{
	transform: translate(-50%,-50%) scale(0.6) !important;
}



.plus::before, .minus::before {
	content: "";
	display: block;
	width: 14px;
	height: 4px;
	background: #000;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.close{
	position: fixed;
	right: 10px;
	top: 10px;
	width: 50px;
	height: 50px;
	border: none;
	cursor: pointer;
	/* background: #000; */
}
.modal .close {
	opacity: 0;
	transition: opacity .5s cubic-bezier(.210, .60, .350, 1);
}
.modal.active .close {
	transition: opacity .5s 1s cubic-bezier(.210, .60, .350, 1);
	opacity: 1;
}
.modal_box{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	max-height: 82%;
	min-height: 160px;
	overflow-y: auto;
	padding: 2px 70px 2px 40px;
	background: rgba(0,0,0,0.8);
	opacity: 0;
	transition: opacity .5s cubic-bezier(.210, .60, .350, 1);
}
.modal_text {
	width: 100%;
	padding: 38px 0;
}
.modal_text.nextMovie{
	float: left;
	width: 38%;
	padding-right: 40px;
}
.modal.active .modal_box {
	transition: opacity .5s 1.4s cubic-bezier(.210, .60, .350, 1);
	opacity: 1;
}
.modal_name h2{
	font-size: 16px;
	line-height: 2.0;
}
.modal_overview p,
.modal_link p,
.modal_download p{
	font-size: 12px;
	line-height: 1.5;
}
.modal_link a,
.modal_download a{
	color: #FFF;
}
.modal_movie {
	float: right;
	width: 62%;
	max-width: 820px;
}
.modal_movie .video {
	position: relative;
}
.modal_movie .video::before {
	content: "";
	display: block;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
}
.modal_movie .video iframe {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.modal
.itemMenu{
	position: fixed;
	bottom: 20px;
	right: 22px;
	z-index: 1;
}
.itemInfo,
.itemMenu .plus,
.itemMenu .minus {
	width: 40px;
	height: 40px;
	position: relative;
	cursor: pointer;
}
.itemInfo{
	display: none;
}
.itemInfo::before {
	content: "";
	display: block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
	position: absolute;
	top: 17.85%;
	left: 50%;
	transform: translate(-50%,0%);
}
.itemInfo::after {
	content: "";
	display: block;
	width: 4px;
	height: 20px;
	background: #fff;
	border-radius: 2px;
	position: absolute;
	top: 44.28%;
	left: 50%;
	transform: translate(-50%,0%);
}
.itemMenu .plus::before,
.itemMenu .minus::before{
	content: "";
	display: block;
	width: 30px;
	height: 2px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: #fff;
}
.itemMenu .plus::after{
	content: "";
	display: block;
	width: 2px;
	height: 30px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: #fff;
}
.modal_box_close {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 50px;
	height: 50px;
	background-color: rgba(200, 200, 230, 0);
	border: none;
	cursor: pointer;
}
.modal_box_close::before, .modal_box_close::after {
	content: "";
	display: block;
	width: 80%;
	margin: auto;
	height: 2px;
	background-color: #fff;
	border-radius: 2px;
	position: absolute;
	left: 0;
	right: 0;
	top: calc((100% - 4px)/2);
}
.modal_box_close::before {
	transform: rotate(45deg);
}
.modal_box_close::after {
	transform: rotate(-45deg);
}
.modal_box::after {
	content: "";
	display: block;
	clear: both;
}

.close::before,.close::after{
	content: "";
	display: block;
	width: 80%;
	margin: auto;
	height: 2px;
	background-color: #fff;
	border-radius: 2px;
	position: absolute;
	left: 0;
	right: 0;
	top: calc((100% - 4px)/2);
}
.close::before{
	transform: rotate(45deg);
}
.close::after{
	transform: rotate(-45deg);
}
#signageWindow .imageBox{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%);
}
#signageWindow .imageBox img{
	position: absolute;
	width: 100%;
	opacity: 0;
	animation: change-img-anim 15s infinite;
}
#signageWindow .imageBox .image1 {
	animation-delay: 0s;
}
#signageWindow .imageBox .image2 {
	animation-delay: 5s;
}
#signageWindow .imageBox .image3 {
	animation-delay: 10s;
}

@keyframes change-img-anim {
	0%{ opacity: 0;}
	30%{ opacity: 1;}
	36%{ opacity: 1;}
	45%{ opacity: 0;}
	100%{ opacity: 0;}
}
@media screen and (max-width: 768px){
	.close, .menu_close {
			width: 30px;
			height: 30px;
	}
}
/*
#loadImg {
	display: none;
	position: absolute;
	width: 6%;
	height: auto;
	top: 50%;
	left: 50%;
	font-size: 13px;
	transform: translate(-50%, -50%);
	z-index: 99;
}
#loadImg img{
	vertical-align: top;
	border: 0;
	max-width: 100%;
	height: auto;
	backface-visibility: hidden;
}*/

/*map*/
#map{
  position: absolute;
  bottom: 0;
  left: 0;
}
#map.hidden{
  bottom: -350px;
}
#map_image{
  background-image: url("../common/img/map.png");
  width: 350px;
  height: 350px;
  background-repeat: no-repeat;
  background-size: contain;
}
.map_style{
  width: 350px;
  height: 350px;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 0;
}
#map_desk{
  background-image: url("../common/img/desk.png");
}
#map_wall{
  background-image: url("../common/img/wall.png");
}
#map_gate{
  background-image: url("../common/img/gate.png");
}
#map_cursor{
  width: 14px;
  height: 14px;
  border-radius: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-7px, -7px);
  background-color: #FFF;
}
#map_view{
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50px, -50px);
}
#map_fov{
  background-image: url("../common/img/map_fov.png");
  background-size: contain;
  width: 100%;
  height: 100%;
}
#map_close{
  width: 50px;
  height: 50px;
  background-color: RGBA(0,0,0,0.9);
  position: absolute;
  top: 0;
  margin-top: -50px;
}
#map_close_arrow{
  height: 18px;
  width: 18px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-9px,-10px) rotate(135deg);
  border-top: 5px solid #FFF;
  border-right: 5px solid #FFF;
}
#map_close_arrow.hidden{
  transform: translate(-9px,-4px) rotate(-45deg);
}
#map .point{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: #FFF;
  border-radius: 4px;
  transform: translate(-4px, -4px);
  cursor: pointer;
}

@media screen and (max-width: 768px){
  #map{
    bottom: 20px;
    left: 20px;
  }
  #map.hidden{
  bottom: -200px;
}
  #map_image{
    width: 200px;
    height: 200px;
  }
  #map_cursor{
  width: 8px;
  height: 8px;
  border-radius: 4px;
  transform: translate(-4px, -4px);
  }
  #map_view{
    width: 80px;
    height: 80px;
    transform: translate(-40px, -40px);
  }
  #map .point{
    width: 6px;
    height: 6px;
    border-radius: 3px;
    transform: translate(-3px, -3px);
  }
}

/*camera position*/
#camera_pos{
  position: absolute;
  bottom: 20px;
  left: 350px;
}
#camera_pos ul{
  height: 30px;
  margin: 0;
}
#camera_pos ul li{
  list-style: none;
  float: left;
  padding: 0 40px 20px 0;
}
#camera_pos ul li p{
  margin: 0;
  padding: 5px 10px 5px 10px;
  background-color: RGBA(0,0,0,0.5);
}

/*autocamera infotext*/
#autoTitle{
  position: absolute;
  top: 0;
  height: 60px;
  background-color: RGBA(0,0,0,0.9);
  width: 100%;
  display: none;
}
#autoTitle span{
  left: 20px;
  top: 15px;
  position: absolute;
}

/*---------------------------------------------------------------
menue
---------------------------------------------------------------*/
.menue{
	position:fixed;
	top: 20px;
	right: 10px;
}
.menue #info_button{
}
.menue #list_button{
	background-color: rgba(200, 200, 230, 0);
	border: none;
  cursor: pointer;
	background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url(../img/icon_list.svg);
	width: 40px;
	height: 40px;
}
.menue #map_button{
}
.menue #help_button{
}
.menue #share_button{
}

/*---------------------------------------------------------------
list
---------------------------------------------------------------*/
.list{
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	transition: width 0s .5s;
	z-index: 10;
	overflow: hidden;
	display: none;
	padding: 80px 0;
	background-color: RGBA(255,255,255,0.95);
	color: #000;
}
.list .close::before,.list .close::after{
	background-color: #000;
}
.list .container{
	position: relative;
	width: 80%;
	height: 100%;
	margin: 0 auto;
	overflow-x: hidden;
	overflow-y: auto;
}
.list .container .containerInner > input{
	display: none;
}
.list .container .containerInner .panel_area .tab_panel {
	display: none;
}
#tab_image:checked ~ .panel_area #panel_image,
#tab_movie:checked ~ .panel_area #panel_movie,
#tab_signage:checked ~ .panel_area #panel_signage,
#tab_3dmodel:checked ~ .panel_area #panel_3dmodel {
	display: block;
}
.list .container .containerInner .tab_area label > div{
	display: inline-block;
	border-bottom: solid 2px transparent;
}
#tab_image:checked ~ .tab_area .tabimages_label > div ,
#tab_movie:checked ~ .tab_area .tabmovies_label > div ,
#tab_signage:checked ~ .tab_area .tabsignages_label > div ,
#tab_3dmodel:checked ~ .tab_area .tab3dmodels_label > div  {
	border-bottom: solid 2px #000000;
	font-family: "Noto Sans CJK JP Bold","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
}
.list .container .containerInner .tab_area label {
	width: 25%;
	display: inline-block;
	padding: 12px 0 100px;
	color: #000;
	text-align: center;
	font-size: 16px;
	cursor: pointer;
	float: left;
}
.list .container .containerInner .panel_area ul {
	width: 50%;
	margin: 0;
	padding: 0;
	height: 100%;
	float: left;
}
.list .container .containerInner .panel_area ul li {
	list-style: none;
	margin-bottom: 30px;
	margin-right: 30px;
	padding-right: 10px;
	cursor: pointer;
}
.list .container .containerInner .panel_area ul li::after{
	content: "";
	display: block;
	clear: both;
}
.list .container .containerInner .panel_area ul li .thumb{
	width: 40px;
	height: 40px;
	float: left;
	text-align: left;
}
.list .container .containerInner .panel_area ul li .thumb img{
	vertical-align: top;
	border: 0;
	max-width: 100%;
	height: auto;
	backface-visibility: hidden;
}
.list .container .containerInner .panel_area ul li .info{
	color: #000;
	margin-left: 50px;
	font-size: 12px;
	line-height: 1.2;
	text-align: left;
}