ol.statement {
    counter-reset: item;
    display: flex;
    flex-direction: column;
}

ol.statement>li .content {
    display: block;
}

ol.statement>li span.title {
    font-weight: 700;
}

ol.statement>li::before {
    content: "（" counter(item, cjk-ideographic) "）";
    counter-increment: item;
    font-weight: 700;
}

ol.inner_list {
    counter-reset: item_sm;
}

ol.inner_list>li {
    display: flex;
    flex-direction: row;
}

ol.inner_list>li::before {
    content: counter(item, decimal)"." counter(item_sm);
    counter-increment: item_sm;
    margin-right: .3vw;
    flex: none
}

@media(orientation: portrait) {
    ol.statement {
        row-gap: 4vw;
    }

    @media(min-width: 640px) {
        ol.statement {
            row-gap: 3.4vw;
        }
    }
}

@media(orientation: landscape) {
    ol.statement {
        row-gap: 4vw;
    }

    @media(min-width: 768px) {
        ol.statement {
            row-gap: 3vw;
        }
    }

    @media(min-width: 1536px) {
        ol.statement {
            row-gap: 2vw;
        }
    }
}