@charset "UTF-8";

/* document */
.section__doc {
    @media (min-width: 1024px) {
        padding-block: 2.75rem 3.12rem;
        padding-inline-start: calc(6.25rem + 7.0025rem);
    }
    @media (min-width: 768px) {
        padding-inline-start: calc(1.5rem + 7.0025rem);
    }
}
.doc__heading {
    margin-block: 2.25rem 1rem;
    color: var(--c-accent);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.03375rem;
    line-height: 1.125;
}

.doc__list {
    > li:not(:last-child) {
        margin-block-end: 1rem;
    }

    .doc__item {
        display: flex;
        gap: 0.5rem 1rem;
        justify-content: space-between;
        padding: 0.88rem 1.3125rem;
        border-radius: 0.25rem;
        border: 1px solid var(--c-accent);
        background-color: var(--c-white);
        color: var(--c-accent);
        font-weight: 700;
        position: relative;
        line-height: 1.5;

        @media (max-width: 767px) {
            flex-direction: column;
        }

        a {
            display: flex;
            align-items: center;
            column-gap: 0.5rem;

            @media (hover: hover) {
                &:hover span {
                    color: var(--c-link-hover);
                }
            }

            span {
                text-decoration: underline;
                font-size: 0.8125rem;
                @media (hover: hover) {
                    transition: color 0.3s ease-out;
                    will-change: color;
                }
            }
        }
    }

    .doc__title {
        font-size: 0.9375rem;
        letter-spacing: 0.02813rem;
    }

    .doc__type {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding: 0.25rem;
        width: 6.3125rem;
        border-radius: 0.1875rem;
        background-color: var(--c-accent);
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--c-white);

        @media (min-width: 768px) {
            position: absolute;
            left: -7.0025rem;
            top: 0;
            bottom: 0;
        }
    }

    .note {
        margin-block-start: 0.6875rem;
        line-height: 1.35;
        font-weight: 400;
        font-size: 0.875rem;
    }
}