:root {
    --tablet_img_height: calc(90vh - 92px);
    --modal_close_width: calc(70vw - 42px);
}

/* tabletで見るときは"tablet"のclassがついた画像を表示 */
.tablet { display: block !important; }
.sp { display: none !important; }

#txt {
    text-align: center;
    margin-top: 10vh;
}

#loading_container{
    position: absolute;
    top: 30vh;
    left: 0;
    z-index: 3;
    text-align: center;
    margin: auto;
    width: 96vw;
    height: 90vh;
}
#loading_spinner {
    margin:0 auto;
    width: 10vw;
    height: 10vw;
    border-radius: 50%;
    border: 0.25em solid yellow;
    border-top-color: rgb(0, 98, 255);
    animation: spinner 1.5s linear infinite;
}
#loading_container.hidden{
    display:none;
}
#loading_spinner.hidden{
    display:none;
}
@keyframes spinner {
    to {
      transform: rotate(360deg);
    }
}

.container {
    position: relative;
    text-align: center;
    margin:0 auto;
    top: 0;
    width: 97vw;
    height: 90vh;
    overflow: hidden;
}
#video {
    display:block;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    text-align: center;
    margin: auto;
    width: 97vw;
    height: 90vh;
}
#canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    text-align: center;
    margin: auto;
    width: 97vw;
    height: 90vh;
}
.button_container {
    display:inline-block;
    position: absolute;
    text-align: center;
    top: 0px;
    left: 8px;
    width: 96vw;
    height: 90vh;
    z-index: 11;
}
.button_wrap{
    position: relative;
    top: var(--tablet_img_height);
    display:inline-block;
    z-index: 12;
}

#mask{
    background:rgba(0,0,0,0.4);
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:30;
}

#modal{
    background:#fff;
    width:70vw;
    height:60vh;
    padding-top:10vh;
    padding-bottom:5vh;
    border-radius:10px;
    position:absolute;
    top:40px;
    left:0;
    right:0;
    margin:0 auto;
    transition:transform 0.4s;
    z-index:40;
}

#capture_container {
    display: inline;
    position:absolute;
    text-align: center;
    margin-top: 0vh;
}

#capture_img {
    width: 80%;
    height: 80%;
}

#modal_close {
    position:absolute;
    top: 10px;
    left: var(--modal_close_width);
}

#mask.hidden{
    display:none;
}
 
#modal.hidden{
    transform:translate(0,-120vh);
}