:root {
    --modal_close_width: calc(49vh - 42px);
    /*smartPhoneサイズを流用*/
    --sp_img_height: calc(92vh - 53px);
    /*Tablet風の比率に変換*/
    --to_vertical: calc(92vh * 0.7);
    --to_vertical_modal: calc(70vh * 0.7);
}

/* smarphoneで見るときは"sp"のclassがついた画像を表示 */
.sp { display: block !important; }
.tablet { 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: var(--to_vertical);
    height: 92vh;
}
#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: var(--to_vertical);
    height: 92vh;
    overflow: hidden;
}
#video {
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    text-align: center;
    margin: auto;
    width: var(--to_vertical);
    height: 92vh;
}
#canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    text-align: center;
    margin: auto;
    width: var(--to_vertical);
    height: 92vh;
}
.button_container {
    position: absolute;
    text-align: center;
    top: 6;
    left: 0;
    width: 100vw;
    height: 92vh;
    z-index: 11;
}
.button_wrap{
    position: relative;
    top: var(--sp_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:11;
}

#modal{
    background:#fff;
    width: var(--to_vertical_modal);
    height: 65vh;
    padding-top:12vh;
    padding-bottom:5vh;
    border-radius:10px;
    position:absolute;
    top:40px;
    left:0;
    right:0;
    margin:0 auto;
    transition:transform 0.4s;
    z-index:12;
}

#capture_container {
    display: inline;
    position:absolute;
    text-align: center;
}

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


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

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