body {
    margin: 0 auto;
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ", Meiryo,"ＭＳ Ｐゴシック",sans-serif;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    background-color: #000;
}

* {
    box-sizing: border-box;
}

app, area-video, area-ui, origin, bkimgs, bkimg, toggle-cover, 
toggle-btn-box, tgb-loading, tgb-key {
    display: block;
}

app {
    position: relative;
    max-width: 800px;
    width: 100%;
    height: 100svh;
    margin: 0 auto;
}

area-video, area-ui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

area-video {
    z-index: 1;
}

area-video[type="video"] > origin > bkimgs, area-video[type="img"] > origin > video {
    opacity: 0;
}

area-ui {
    z-index: 2;
}

origin {
    position: relative;
    width: 100%;
    height: 100%;
}

video, bkimgs {
    position: absolute;
    top: 0;
    left: 0;
}

@media (aspect-ratio: 16/9) {
    video {
        width: 100%;
        z-index: 1;
    }
}

video, bkimgs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: calc(100% + 17.5px);
}

video {
    z-index: 1;
}

bkimgs {
    aspect-ratio: 9/16;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2;
}

bkimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

bkimg[status="false"] {
    opacity: 0;
}

div.x {
    position: fixed;
    top: 0;
    left: 0;
    font-size: 22pt;
}