@charset "UTF-8";

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

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

    .time {
        font-size: calc((100vw / var(--vw-large))*20);
        color: #616161;
    }

    .title {
        font-size: calc((100vw / var(--vw-large))*20);
        font-weight: 700;
        width: calc((100vw / var(--vw-large))*767);
        margin: 0 auto calc((100vw / var(--vw-large))*24) 0;
        line-height: 140%;
    }

    p {
        font-size: calc((100vw / var(--vw-large))*16);
        margin: 0 auto calc((100vw / var(--vw-large))*24) 0;
    }

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

}

@media screen and (max-width: 768px) {
    .l_article {
        padding: calc((100vw / var(--vw-small))*74) 0;
        width: calc((100vw / var(--vw-small))*330);

        .time {
            font-size: calc((100vw / var(--vw-small))*18);
        }

        .title {
            font-size: calc((100vw / var(--vw-small))*16);
            width: calc((100vw / var(--vw-small))*330);
            margin: 0 auto calc((100vw / var(--vw-small))*24) 0;
        }

        p {
            font-size: calc((100vw / var(--vw-small))*16);
            margin: 0 auto calc((100vw / var(--vw-small))*24) 0;
        }

        .wp-block-image,
        img {
            margin: 0 auto calc((100vw / var(--vw-small))*24);
            width: 100%;
        }

    }
}