body {
    font-family: 'Meiryo UI', sans-serif;
}

#main-div {
    display: block;
    /*grid-template-columns:250px 1fr;*/
}

#pagemenu{
    position:absolute;
    left:0;
    top:0;
    width:250px;
}

#page {
    position: absolute;
    left: 250px;
    top: 0;
    
}

ol.sample1 {
    counter-reset: list;
    list-style-type: none;
    /*font: 14px/1.6 'Mei', sans-serif;*/
    padding: 0;
}

    ol.sample1 li {
        position: relative;
        margin: 7px 0 7px 0px;
        padding-left: 40px;
        font-weight: bold;
        font-size: 14px;
        line-height: 30px;
        border: solid 1px #F6A38B;
        border-radius: 20px;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -o-transition: 0.3s;
        -ms-transition: 0.3s;
        transition: 0.3s;
    }

        ol.sample1 li:before {
            counter-increment: list;
            content: counter(list);
            position: absolute;
            left: 0px;
            width: 30px;
            height: 30px;
            text-align: center;
            color: #fff;
            line-height: 30px;
            background: #F6A38B;
            border-radius: 50%;
            top: 50%;
            -moz-transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
        }


        ol.sample1 li:hover {
            background: #F6A38B;
            color: red;
            /*color: #fff;*/
        }

            ol.sample1 li:hover:before {
                background: #fff;
                /*color: #F6A38B;*/
                color: #F6A38B;
            }

.flipbook{
    margin-left:30px;
    margin-top:20px;
}

.node {
    padding: 0;
    margin: 0;
    color:black;
}