* {
    box-sizing: border-box;
}

body {
    margin: 0px;
}

#resize-bar {
    position: absolute;
    cursor: col-resize;
    z-index: 10;
    padding: 5px;
    background-color: transparent;
    width: 5px;
    background-image: url(../../css/v3/splitter.png)
}

#container {
    /*background-color: #f1f1f1;*/
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;  
}

#left-container, #right-container {
    float: left;
    height: 100%;
    
}

#left-container {
    z-index: 20;
    position: relative;
    
}

@media screen and (max-width:813px) {
    /*　スマホ　*/
    #left-container {
        display: none;
    }

    #right-container {
        width: 100%;
    }

    .umaTocHeader {
        display: block;
    }

    #resize-bar {
        display:none;
    }

    .umaSmallOnly {
        display:inline;
    }

    div.umaSmallOnly {
        display:block;
    }

    .umaLargeOnly {
        display: none;
    }
}
@media screen and (min-width:813px) {
    /*　PC 　*/
    #left-container {
        width: 20%;
    }

    #right-container {
        width: 80%;
    }

    .umaTocHeader {
        display: none;
    }

     #resize-bar {
        display:block;
    }

    .umaSmallOnly {
        display: none;
    }

    .umaLargeOnly {
        display:inline;
    }

    div.umaLargeOnly {
        display:block;
    }
}

#left-content, #right-content {
    height: 100%;  /* ** */
    width: 100%;
    padding-bottom: 10px;
    padding-top: 1px;
}

#left-content {
    padding-left: 10px;
    padding-right: 5px;
    background-color: lightskyblue;
    /*background-color: #f9f9f9;*/
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-color: gray lightskyblue;
    /*scrollbar-color: dimgrey #f9f9f9;*/
}

#left-content::-webkit-scrollbar {
    width: auto;
}

#left-content::-webkit-scrollbar-track {
    background-color: lightskyblue;
    /*background-color: #f9f9f9;*/
}

#left-content::-webkit-scrollbar-thumb {
    background-color:gray;
}

#left-content::-webkit-scrollbar-button:single-button:vertical:decrement {
    height: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='gray'><polygon points='50,20 0,100 100,100'/></svg>");
    background-repeat: no-repeat;
}

#left-content::-webkit-scrollbar-button:single-button:vertical:increment {
    height: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='gray'><polygon points='50,100 0,20 100,20'/></svg>");
    background-repeat: no-repeat;
}

#right-content {
    padding-left: 20px;
    padding-right: 10px;
    background-color: white;
    overflow: scroll; 
}

#header-container {
    display: none;
}


.umaTocHeader {
    padding-bottom: 2em;
}