@charset "UTF-8";

:root {
    --vw-large: 1360;
    /* PC */
    --vw-small: 390;
    /* SP */
}

.l_article {
    background-color: initial;
    width: calc((100vw / var(--vw-large))*1000);
    padding: calc((100vw / var(--vw-large))*150) 0 calc((100vw / var(--vw-large))*100);
    text-align: left;
    margin: 0 auto;

    @media screen and (max-width: 768px) {
        width: calc((100vw / var(--vw-small))*360);
        padding: calc((100vw / var(--vw-small))*150) 0 calc((100vw / var(--vw-small))*60);
    }

    .category {
        border-radius: calc((100vw / var(--vw-large))*31);
        border: calc((100vw / var(--vw-large))*1) solid var(--brown, #524D38);
        -webkit-border-radius: calc((100vw / var(--vw-large))*31);
        -moz-border-radius: calc((100vw / var(--vw-large))*31);
        -ms-border-radius: calc((100vw / var(--vw-large))*31);
        -o-border-radius: calc((100vw / var(--vw-large))*31);
        font-size: calc((100vw / var(--vw-large))*12);
        font-weight: 500;
        line-height: normal;
        display: flex;
        height: calc((100vw / var(--vw-large))*25);
        padding: calc((100vw / var(--vw-large))*10) calc((100vw / var(--vw-large))*40);
        align-items: center;
        justify-content: center;
        max-width: calc((100vw / var(--vw-large))*120);
        margin-bottom: calc((100vw / var(--vw-large))*60);

        @media screen and (max-width: 768px) {
            border-radius: calc((100vw / var(--vw-small))*31);
            border: calc((100vw / var(--vw-small))*1) solid var(--brown, #524D38);
            -webkit-border-radius: calc((100vw / var(--vw-small))*31);
            -moz-border-radius: calc((100vw / var(--vw-small))*31);
            -ms-border-radius: calc((100vw / var(--vw-small))*31);
            -o-border-radius: calc((100vw / var(--vw-small))*31);
            font-size: calc((100vw / var(--vw-small))*12);
            height: calc((100vw / var(--vw-small))*25);
            padding: calc((100vw / var(--vw-small))*10) calc((100vw / var(--vw-small))*20);
            max-width: calc((100vw / var(--vw-small))*120);
            margin-bottom: calc((100vw / var(--vw-small))*30);
        }
    }

    h2 {
        font-size: calc((100vw / var(--vw-large))*28);
        font-weight: 700;
        line-height: normal;
        text-align: left;
        margin-bottom: calc((100vw / var(--vw-large))*20);

        @media screen and (max-width: 768px) {
            font-size: calc((100vw / var(--vw-small))*28);
            margin-bottom: calc((100vw / var(--vw-small))*10);
        }
    }

    .time {
        color: #7D7D7D;
        font-weight: 700;
        line-height: normal;
        margin-bottom: calc((100vw / var(--vw-large))*45);

        @media screen and (max-width: 768px) {
            font-size: calc((100vw / var(--vw-small))*14);
            margin-bottom: calc((100vw / var(--vw-small))*20);
        }
    }


    p {
        font-size: calc((100vw / var(--vw-large))*16);
        font-weight: 400;
        line-height: 200%;
        /* 32px */
        letter-spacing: calc((100vw / var(--vw-large))*1.6);
        margin: 0 auto calc((100vw / var(--vw-large))*24) 0;

        @media screen and (max-width: 768px) {
            font-size: calc((100vw / var(--vw-small))*16);
            letter-spacing: calc((100vw / var(--vw-small))*1.6);
            margin: 0 auto calc((100vw / var(--vw-small))*24) 0;
        }
    }

    .wp-block-image,
    img {
        margin: 0 auto calc((100vw / var(--vw-large))*24);
        width: calc((100vw / var(--vw-large))*850);
        text-align: center;
        display: block;

        @media screen and (max-width: 768px) {
            margin: 0 auto calc((100vw / var(--vw-small))*24);
            width: calc((100vw / var(--vw-small))*330);
        }
    }

    .btn_wrap {
        text-align: center;

        a {
            text-decoration: none;
            color: #524D38;
            font-size: calc((100vw / var(--vw-large))*20);

            @media screen and (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*18);
            }

            spna {
                line-height: 1;
            }

            .back_btn {
                justify-content: center;

                img {
                    width: calc((100vw / var(--vw-large))*20);
                    margin: 0 calc((100vw / var(--vw-large))*20) 0 0;

                    @media screen and (max-width: 768px) {
                        width: calc((100vw / var(--vw-small))*20);
                        margin: 0 calc((100vw / var(--vw-small))*20) 0 0;
                    }
                }
            }
        }
    }

}