html {
    height: 100%;
    /* Safari対策 */
    -webkit-text-size-adjust: 100%;
    overflow: hidden;
    touch-action: manipulation;
}

body{
    touch-action: none;/*ピンチイン禁止*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


#contents-root, #ui-contents-root {
    position: absolute;
    top: calc(50% + 22px);
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    -webkit-transform: translate3d(-50%, -50%) rotate(0deg);
    margin: auto;
}


#three-js-canvas, #three-ui-canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: manipulation;
}

#three-ui-canvas {
/*    background-color: blue; */
}


#loading {
    position: absolute;
    top: 43px;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    background-color: black;
    align-items: center;
    justify-content: center;
}

#load-wrapp {
    width: 50vw;
    height: 50vh;
    display: none;
    justify-content: center;
    align-items: center;
}
#camera-permission-error-message, #orient-permission-error-message {
    padding-top: 43px;
}

#camera-error-message-wrapper,#reload-button-wrapper,#orient-error-message-wrapper,#asset-error-message {
    padding: 20px;
}

#asset-error-message,#camera-permission-error-message, #orient-permission-error-message {
    width: 100svw;
    height: calc(100svh - 43px);
    display: none;
    background-color:white;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 17px;
    font-family: sans-serif;
}



#reload-button-wrapper{
    position:absolute;
    bottom: 20px;
    display:block;
    right: 0;
    left:  0;
    margin: 0 auto;
}

#reload-button{
    display: block;
    max-width: 450px;
    width: 100%;
    margin: 0 auto;
}

#loading p {
    color : white;
    font-size: 2rem;
    text-align: center;
    margin: 0;
}


.line {
    display: inline-block;
    width: 3vh;
    height: 3vh;
    border-radius: 3vh;
    margin:0.5vh;
    background-color: #4b9cdb;
}
  
.load-3 .line:nth-last-child(1) {
  animation: loadingC 0.6s 0.1s linear infinite;
}
.load-3 .line:nth-last-child(2) {
  animation: loadingC 0.6s 0.2s linear infinite;
}
.load-3 .line:nth-last-child(3) {
  animation: loadingC 0.6s 0.3s linear infinite;
}

.a-enter-vr-button {
  visibility: hidden;
}

.a-enter-ar-button {
  visibility: hidden;
}


@keyframes loadingC {
    0% {
      transform: translate(0, 0);
    }
    50% {
      transform: translate(0, 3vh);
    }
    100% {
      transform: translate(0, 0);
    }
  }

#error-popup{
    display:none;
}