@import url('../../common/css/base.css') layer(common);
@import url('../../release_text/css/base.css') layer(base);

@layer custom {
    .category {
        color: #0068b2;
        width: fit-content;
        border-radius: initial;
        font-size: 1.6rem;

        @media(width <= 768px) {
            font-size: 2.4rem;
        }
    }

    .date {
        text-align: right;
    }

    figcaption {
        font-size: 1.3rem !important;

        @media(width <= 768px) {
            font-size: 2.4rem !important;
        }
    }

    h1{
        position: relative;
        padding-left: 1em;
        margin-top: 4rem;

        @media(width <= 768px){
            font-size: 4rem;
        }

        &::before {
            top: 0.125em;
            bottom: 0.125em;
            content: "";
            position: absolute;
            background: linear-gradient(to top, #0f3b6b, #0068af, #0082cf);
            width: 0.2em;
            left: 0;
            translate: 0 0.05em;
            pointer-events: none;
        }
    }

    .pickup_text_sub_title{
        margin-top: 1em;
    }

    .release_header{
        padding-bottom: 4rem;
        
        @media(width <= 768px) {
            padding-top: 0;
        }
    }

    article{
        .inner{
            @media(width <= 768px) {
                padding-top: 2rem;
            }
        }
    }

    #sns_set{
        .inner{
            max-width: 97rem;
            padding-top: 0;

            @media(width < 768px){
                max-width: 67rem;
            }
        }
    }

    h2, h3, h4 {
        scroll-margin-top: 9rem;

        @media(width <= 768px) {
            scroll-margin-top: 12rem;
        }
    }
}