body {
    #font-size: 40px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    #overflow: hidden;
    #font-family: 'M PLUS 1p';
    font-family: "Zen Dots", serif;
    font-style: normal;
    font-weight: 400;
    color: #111;
    font-size: 36px;
    background-color: #334;
}

.popup-bg-cover {
    position: fixed;
    /* ブラウザの定位置に固定 */
    background: rgba(0, 0, 0, .5);
    background-image: url("asset/image/loading.gif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 5%;
    /* 背景色を半透明の黒色に */
    width: 100%;
    /* 要素の横幅を画面全体に */
    height: 100%;
    /* 要素の高さを画面全体に */
    top: 0;
    /* 要素の固定位置をブラウザ最上部に合わせる */
    left: 0;
    /* 要素の固定位置をブラウザ左側に合わせる */
    z-index: 1000;
    /* 要素をコンテンツより前面に（要調整） */
    visibility: hidden;
}

.zen-dots-regular {
    font-family: "Zen Dots", sans-serif;
    font-weight: 400;
    font-style: normal;
}

#wrapper {
    #border: 1px solid #f00;
    width: 100%;
    margin: 0 auto;
    #height: 100%;
    #background-color: bisque;
}

#canvas_view {
    background-color: #333;
    #border: 2px dotted #ccc;
    position: absolute;
    left: 10px;
    #margin-right: -50%;
    top: 0px;
    #transform: translate(-50%, 0%);
    #max-width: 100%;
    #background-image: url("./asset/image/frame.png");
    background-size: cover;
    width: 75%;
    height: calc(1080px * 0.75);
    #display: flex;
    text-align: center;
    line-height: calc(1080px * 0.75);
    font-size: 18px;
    color: #fff;
    background: linear-gradient(#444, #333) padding-box, white border-box;
}

#videoPlayer {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

#canvas_chara {
    background-color: #333;
    border: 2px solid #000;
    position: absolute;
    left: 76%;
    #margin-right: -50%;
    top: 0px;
    font-family: "Zen Dots", sans-serif;
    background-size: cover;
    width: 22%;
    font-size: 1vh;
    color: #fff;
    padding: 20px;
    height: auto;
    #max-height: 70%;
}

.selectbox {
    background-color: #333;
    color: #fff;
    padding: 5px;
}

#canvas_gauge {
    background-color: #333;
    border: 2px solid #000;
    position: absolute;
    #left: 75.5%;
    #margin-right: -50%;
    #transform: translate(-50%, 0%);
    #max-width: 100%;
    #background-image: url("./asset/image/frame.png");
    background-size: cover;
    width: 24%;
}


#canvas_timeline {
    background-color: #333;
    border: 2px solid #000;
    position: absolute;
    left: 50%;
    margin-right: -50%;
    #top: 810px;
    transform: translate(-50%, 0%);
    bottom: 88px;
    #max-width: 100%;
    #background-image: url("./asset/image/frame.png");
    background-size: cover;
}

#div_system {
    position: absolute;
    border: 2px solid #000;
    background-color: #333;
    border: 1px solid #000;
    left: 50%;
    #opacity: 0;
    #top: 1030px;
    bottom: 5px;
    width: 1280px;
    height: 76px;
    transform: translate(-50%, 0%);
}


#timestamp {
    position: absolute;
    border: 1px solid #555;
    background-color: #333;
    color: #fff;
    top: -5px;
    left: 100px;
    width: 300px;
    height: 30px;
    font-size: 28px;
}

#div_ts {
    position: absolute;
    #border: 1px solid #555;
    #background-color: #000;
    color: #fff;
    top: 8px;
    left: 3px;
    width: 300px;
    height: 30px;
    font-size: 20px;
}

#frame {
    position: absolute;
    border: 1px solid #555;
    background-color: #333;
    color: #fff;
    top: -5px;
    left: 100px;
    width: 300px;
    height: 30px;
    font-size: 28px;
}

#div_frame {
    position: absolute;
    #border: 1px solid #555;
    #background-color: #000;
    color: #fff;
    top: 43px;
    left: 3px;
    width: 300px;
    height: 30px;
    font-size: 20px;
}

#btn_play {
    position: absolute;
    border: 1px solid #555;
    top: 3px;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 200px;
    height: 50px;
    background-color: #00F;
    color: #fff;
    font-weight: 800;
    font-size: 0.5em;
}

#btn_render {
    #position: absolute;
    background-color: #F00;
    border: 1px solid #fff;
    color: #FFF;
    top: 3px;
    #left: 90%;
    #transform: translate(-100%, 0%);
    #width: 8%;
    padding: 10px;
    display: block;
    margin-left: auto;
}

#btn_load {
    position: absolute;
    border: 1px solid #555;
    top: 3px;
    left: 81%;
    transform: translate(-100%, 0%);
    width: 130px;
    height: 50px;
}


hr {
    border: none;
    background-color: #555;
    border-width: 1px 0 0 0;
    border-top: double;
    border-color: #333;
}

.inputRange {
    appearance: none;
    width: 70%;
    height: 12px;
    border: 1px solid #555555;
    background: #333333;
    cursor: pointer;
}

/* ツマミ：Chrome, Safari, Edge用 */
.inputRange::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 24px;
    border: 1px solid #333333;
    background: #ffffff;
    box-shadow: none;
}

/* ツマミ：Firefox用 */
.inputRange::-moz-range-thumb {
    border-radius: 0;
    width: 10px;
    height: 24px;
    border: 1px solid #333333;
    background: #ffffff;
    box-shadow: none;
}

#bitrate_number {
    width: 15%;
    padding: 5px;
    border: 1px solid #555555;
    background: #333333;
    color: #fff;
}

#normaliz_number {
    width: 15%;
    padding: 5px;
    border: 1px solid #555555;
    background: #333333;
    color: #fff;
}

#out_filename {
    width: 300px;
    padding: 5px;
    border: 1px solid #555555;
    background: #333333;
    color: #fff;
}

.toggleButton {
    position: relative;
    display: block;
    #left: 20px;
    width: 56px;
    height: 28px;
    border: 1px solid #555555;
    border-radius: 9999px;
    background-color: #dddddd;
    cursor: pointer;
}

.toggleButton:has(:focus-visible) {
    outline: auto;
    outline: auto -webkit-focus-ring-color;
}

.toggleButton:has(:checked) {
    background-color: #4ade80;
}

.toggleButton__checkbox {
    appearance: none;
    position: absolute;
    top: calc(50% - 3px);
    left: 2px;
    width: 24px;
    height: 24px;
    border: 1px solid #555555;
    border-radius: 9999px;
    transform: translateY(-50%);
    outline: none;
    background-color: #ffffff;
    transition: left 0.2s;
    cursor: pointer;
}

.toggleButton__checkbox:checked {
    left: calc(100% - 30px);
}


#userSound {
    visibility: hidden;
}

.buttonA {
    color: #fff;
    background-color: #eb6100;
    border-radius: 100vh;
    padding: 5px 15px 5px 15px;
    font-size: 18px;
    font-weight: 200;
    font-family: "Mochiy Pop P One", serif;
    font-size: 1.0em;
}

.buttonA:hover {
    color: #fff;
    background: #f56500;
}