:root{
    --darkgray: var(--vk-color-primary);
    --blue: var(--wp--preset--color--vk-color-custom-1);
    --lightblue: var(--wp--preset--color--vk-color-custom-2);
}

/* 見出しはブロックエディタとクラシックエディタ両対応させる */
h2{
    @media (max-width: 991.98px){
        font-size: 1.5rem;
    }
}
:where(.entry-body),:where(.is-root-container){
    h2{
        color: #fff;
        background: var(--darkgray);
        padding: 1rem .5rem;
        text-spacing-trim: trim-start;
        position: relative;
        border-radius: 4px;
        &:after{
            content: "";
            display: block;
            left: .25rem;
            right: .25rem;
            bottom: .25rem;
            top: .25rem;
            position: absolute;
            pointer-events: none;
            border-style: dashed;
            border-width: 1px 0;
        }
    }
    h3{
        background: var(--lightblue);
        padding: 1rem .5rem;
        border-color: var(--blue);
        border-radius: 4px;
        position: relative;
        &:after {
            content: "";
            display: block;
            left: .25rem;
            right: .25rem;
            bottom: .25rem;
            top: .25rem;
            position: absolute;
            border-width: 1px 0;
            border-style: solid;
            border-color: var(--blue);
            pointer-events: none;
        }
    }
    h4{
        border: solid 1px var(--blue);
        border-radius: 4px 4px 0;
        padding: .5rem;
        position: relative;
        &:after {
            content: "";
            display: block;
            background: var(--blue);
            right: 0;
            bottom: 0;
            width: .5rem;
            height: .5rem;
            position: absolute;
            pointer-events: none;
            clip-path: polygon(100% 0, 100% 100%, 0% 100%);
        }
    }
    h5{
        border-style: solid;
        border-width: 2px;
        border-color: var(--lightblue);
        border-radius: 4px;
        padding: .5rem;
    }
}

/* ブロックスタイルとウィジェット */
.is-style-dashed-ribbon,.wp-block-archives__label{
    color: #fff;
    background: var(--darkgray);
    padding: 1rem .5rem;
    text-spacing-trim: trim-start;
    position: relative;
    border-radius: 4px;
    &:after{
        content: "";
        display: block;
        left: .25rem;
        right: .25rem;
        bottom: .25rem;
        top: .25rem;
        position: absolute;
        pointer-events: none;
        border-style: dashed;
        border-width: 1px 0;
    }
}
/* END ブロックスタイル */