html {
        background-color: ghostwhite;
    }

    .red {
        color: red;
    }

    ul>li {
        list-style-type: disc;
    }

    ul>li>ul>li {
        list-style-type: square;
    }

    ul>li>ul>li>ul>li {
        list-style-type: lower-alpha;
    }

    body {
        font-family: YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic';
        padding: 0;
        background-color: white;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .hrbar {
        display: block;
        width: 100%;
        background-color: darkgreen;
    }


    @media screen and (min-width:981px) {
        body {
            margin: 5px;
            font-size: 15px;
        }

        .hrbar {
            height: 5px;
        }

        h1 {
            font-size: 24px;
        }

        li {
            font-size: 18px;
        }

        ul>li>ul>li,
        .small,
        div,
        summary {
            font-size: 15px;
        }
    }

    @media screen and (max-width:980px) {
        body {
            margin: 2vw;
            font-size: 4vw;
        }

        h1 {
            font-size: 5vw;
        }

        .hrbar {
            height: 2vw;
        }

        /* li{
    font-size: 6vw;
    } */
        ul>li>ul>li,
        .small,
        div {
            font-size: 3vw;
        }

    }