﻿:is(.editor-styles-wrapper, .post-contents) h1,
:is(.editor-styles-wrapper, .post-contents) h2,
:is(.editor-styles-wrapper, .post-contents) h3,
:is(.editor-styles-wrapper, .post-contents) h4,
:is(.editor-styles-wrapper, .post-contents) h5,
:is(.editor-styles-wrapper, .post-contents) h6 {
    margin: 0;
    font: inherit;
    line-height: inherit;
    letter-spacing: normal;
    text-transform: none;
    font-weight: inherit
}

:is(.editor-styles-wrapper, .post-contents) ul,
:is(.editor-styles-wrapper, .post-contents) ol {
    margin: 0;
    padding: 0;
    list-style: none
}

:is(.editor-styles-wrapper, .post-contents) li {
    margin: 0;
    padding: 0
}

:is(.editor-styles-wrapper, .post-contents) table {
    border-collapse: collapse;
    border-spacing: 0;
    width: auto;
    margin: 0;
    max-width: 100%
}

:is(.editor-styles-wrapper, .post-contents) th,
:is(.editor-styles-wrapper, .post-contents) td {
    padding: 0;
    border: 0;
    text-align: inherit;
    vertical-align: top;
    font: inherit;
    line-height: inherit
}

:is(.editor-styles-wrapper, .post-contents) button,
:is(.editor-styles-wrapper, .post-contents) input[type=button],
:is(.editor-styles-wrapper, .post-contents) input[type=submit],
:is(.editor-styles-wrapper, .post-contents) input[type=reset] {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
    text-decoration: none;
    cursor: pointer
}

:is(.editor-styles-wrapper, .post-contents) .wp-block-buttons>.wp-block-button {
    display: inline-flex
}

:is(.editor-styles-wrapper, .post-contents) .wp-block-button .wp-block-button__link {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-decoration: none;
    display: inline-block
}

:is(.editor-styles-wrapper, .post-contents) a:where(:not(.wp-element-button)) {
    text-decoration: none
}

.post-contents {
    --bpc-mt: 4.8rem;

    a[href][data-type=link] {
        color: var(--cc-blue-A);
        text-decoration: underline;

        @media(hover:hover) {
            &:hover {
                text-decoration: none
            }
        }
    }

    .bpc-block {
        +.bpc-block {
            margin-top: var(--bpc-mt)
        }
    }

    .bpc-paragraph,
    .bpc-list {
        .bpc-block+& {
            margin-top: var(--bpc-mt)
        }
    }

    .bpc-heading {
        font-weight: 700;

        &:is(h2) {
            margin-block: 7.2rem 4.8rem;
            color: #fff;
            padding: 1.2rem 2.8rem;
            font-size: 2.4rem;
            line-height: 1.5;
            background-color: var(--cc-blue-A);
            border-radius: var(--radius-C);

            @media(width<=767px) {
                margin-block: 8rem 6rem;
                padding: 1.6rem 3.2rem;
                font-size: 3.6rem
            }
        }

        &:is(h3) {
            margin-block: 6rem 2rem;
            padding-bottom: 1.2rem;
            padding-left: .4rem;
            font-size: 2.2rem;
            line-height: 1.5;
            border-bottom: 1px solid var(--cc-blue-A);

            @media(width<=767px) {
                margin-block: 8rem 3.6rem;
                padding-bottom: 1.6rem;
                font-size: 3.2rem
            }
        }

        &:is(h4, h5) {
            margin-block: 4.8rem 2rem;
            padding: .8rem 1.8rem;
            font-size: 2rem;
            line-height: 1.5;
            border-radius: var(--radius-C);

            @media(width<=767px) {
                margin-block: 6rem 3.6rem;
                padding: 1.2rem 2.4rem;
                font-size: 2.8rem
            }
        }

        &:is(h4) {
            background-color: #ccedf7
        }

        &:is(h5) {
            background-color: #fff
        }
    }

    .bpc-list {
        line-height: 1.5;

        li {
            position: relative;

            +li,
            .bpc-list {
                margin-top: .5lh
            }
        }

        &:is(ul) {
            >li {
                padding-left: 1.6rem;

                @media(width<=767px) {
                    padding-left: 3.2rem
                }

                &:before {
                    content: "";
                    display: inline-block;
                    border-radius: 50%;
                    width: 6px;
                    height: 6px;
                    background-color: #c4c4c4;
                    position: absolute;
                    top: calc(.5lh - 3px);
                    left: .02rem
                }
            }
        }

        &:is(ol) {
            counter-reset: num;

            >li {
                padding-left: 2em;

                &:before {
                    counter-increment: num;
                    content: counter(num, decimal-leading-zero);
                    width: 1.5em;
                    font-size: 1em;
                    background-image: linear-gradient(to bottom, transparent calc(1lh - 1em), var(--cc-black-A) calc(1lh - 1em), var(--cc-black-A) calc(.5lh + .5em), transparent calc(.5lh + .5em));
                    background-size: 1px 100%;
                    background-repeat: no-repeat;
                    background-position: center right;
                    position: absolute;
                    left: 0;
                    letter-spacing: -.05em
                }
            }
        }
    }

    .bpc-buttons {
        display: flex;

        @media(width<=767px) {
            &.aligncenter {
                justify-content: center
            }

            &.alignleft {
                justify-content: flex-start
            }

            &.alignright {
                justify-content: flex-end
            }
        }

        @media(width<=767px) {
            flex-direction: column;
            gap: 4rem
        }

        &:has(.l-button-A:nth-child(1):last-child) {
            @media(width<=767px) {
                justify-content: center
            }
        }

        &:has(.l-button-A:nth-child(2)) {
            .l-button-A {
                @media(width>767px) {
                    flex: 1;
                    width: auto
                }
            }
        }

        &:has(.l-button-A:nth-child(2):last-child) {
            @media(width>767px) {
                gap: 6rem
            }
        }

        &:has(.l-button-A:nth-child(3):last-child) {
            @media(width>767px) {
                gap: 5rem
            }
        }

        &:has(.l-button-A:nth-child(4)) {
            @media(width>767px) {
                flex-wrap: wrap;
                gap: 4rem
            }

            .l-button-A {
                @media(width>767px) {
                    min-width: calc((100% - 12rem)/4);

                    &:after {
                        content: none
                    }
                }
            }
        }

        .l-button-A {
            &:after {
                @media(width>767px) {
                    right: 2rem
                }
            }
        }
    }

    .bpc-button.l-button-A {
        padding-block: 0;

        @media(width<=767px) {
            min-width: 100%
        }
    }

    .bpc-image {
        width: fit-content;

        &.aligncenter {
            margin-inline: auto
        }

        &.alignright {
            margin-left: auto
        }

        &.alignleft {
            margin-right: auto
        }

        &:not(.aligncenter, .alignright, .alignleft) {
            margin-inline: auto
        }

        &.wp-block-image {
            display: block;
            max-width: 100%;

            >a {
                display: block
            }
        }

        figcaption {
            text-align: left;
            margin-top: .8rem;

            @media(width>767px) {
                font-size: 1.4rem;
                line-height: 1.5
            }
        }
    }

    a:not(.wp-block-button__link, .wp-element-button) {
        color: var(--cc-blue-A);
        text-decoration: underline;

        @media(hover:hover) {
            &:hover {
                text-decoration: none
            }
        }
    }
}

.wp-block-columns.bpc-columns {
    display: grid;

    @media(width>767px) {
        gap: 6rem;
        grid-template-columns: 1fr 1fr;
        margin-inline: auto;
        width: 96rem
    }

    @media(width<=767px) {
        gap: 4rem
    }
}

.wp-block-table.bpc-table {
    @media(width<=767px) {
        &.simplebar-scrollable-x {
            margin-left: -3.5rem;
            width: 100vw;

            .simplebar-content {
                &:after {
                    width: 1.75rem
                }
            }

            table {
                margin-left: 1.75rem
            }
        }
    }

    table {
        border-spacing: 2rem 0;
        border-collapse: separate;
        table-layout: auto;
        border: 0;
        line-height: 1.625;

        @media(width<=767px) {
            min-width: calc(var(--sp-min_w) - 3.5rem)
        }

        tr {
            :is(td, th) {
                border: 0;
                border-bottom: 1px solid;
                padding: 1.6rem .8rem;
                vertical-align: top;

                @media(width<=767px) {
                    padding: 2rem .8rem
                }

                &:first-child {
                    color: var(--cc-blue-A);
                    font-weight: 700;
                    white-space: nowrap
                }
            }

            &:first-child {
                :is(td, th) {
                    border-top: 1px solid
                }
            }
        }
    }
}