@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

.single_c_wrap {
    background: url(../img/topics/post_bg.jpg);
    background-size: cover;
}

.single_contents {
    padding-top: 15.531vw;
    padding-bottom: 16.117vw;
    width: 51.282vw;
    min-width: 51.282vw;
    margin: auto;
    color: #6C584C;
}

img {
    height: auto;
    vertical-align: bottom;
}

span.post_date {
    color: #6C584C;
    font-family: Roboto;
    font-size: 1.172vw;
    font-style: normal;
    font-weight: 500;
    line-height: 2.564vw;
    letter-spacing: 0.11vw;
}

span.post_taxonomy {
    color: #FFF;
    font-family: Roboto;
    font-size: 1.026vw;
    font-style: normal;
    font-weight: 700;
    line-height: 2.564vw;
    letter-spacing: 0.11vw;
    padding: 0.22vw 0.586vw;
    border-radius: 0.879vw;
    background: #398D78;
    margin-left: 1.465vw;
}

h1.single_ttl {
    color: #6C584C;
    font-family: Roboto;
    font-size: 1.758vw;
    font-style: normal;
    font-weight: 700;
    line-height: 2.564vw;
    letter-spacing: 0.11vw;
    margin: 1.099vw 0 1.319vw;
}

.single_content {
    margin-top: 1.319vw;
}

h2 {
    color: #6C584C;
    font-family: "Noto Sans JP";
    font-size: 1.465vw;
    font-style: normal;
    font-weight: 700;
    line-height: 2.784vw;
    margin: 0.586vw 0;
}

h3 {
    color: #6C584C;
    font-family: "Noto Sans JP";
    font-size: 1.319vw;
    font-style: normal;
    font-weight: 700;
    line-height: 2.491vw;
    margin: 0.366vw 0;
}

.single_content img {
    margin: 0.733vw 0;
}

.post_navigation {
    margin-top: 3.37vw;
    display: flex;
    justify-content: center;
}


.prev_post a {
    width: 14.872vw;
    height: 2.564vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6c584c;
    color: #fff;
    text-decoration: unset;
    border-radius: 1.245vw;
    margin: 0 1.282vw;
}

.next_post a {
    width: 14.872vw;
    height: 2.564vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6c584c;
    color: #fff;
    text-decoration: unset;
    border-radius: 1.245vw;
    margin: 0 1.282vw;
}

@media(max-width:767px) {

    .single_c_wrap {
        background: url(../img/topics/post_bg.jpg);
        background-size: cover;
    }

    .single_contents {
        padding-top: 33.59vw;
        padding-bottom: 20.513vw;
        width: 89.744vw;
        min-width: unset;
        margin: auto;
        color: #6C584C;
    }

    img {
        height: auto;
        vertical-align: bottom;
    }

    span.post_date {
        color: #6C584C;
        font-family: Roboto;
        font-size: 4.103vw;
        font-style: normal;
        font-weight: 500;
        line-height: 8.974vw;
        letter-spacing: 0.385vw;
    }

    span.post_taxonomy {
        color: #FFF;
        font-family: Roboto;
        font-size: 3.59vw;
        font-style: normal;
        font-weight: 700;
        line-height: 8.974vw;
        letter-spacing: 0.385vw;
        padding: 0.769vw 2.051vw;
        border-radius: 3.077vw;
        background: #398D78;
        margin-left: 5.128vw;
    }

    h1.single_ttl {
        color: #6C584C;
        font-family: Roboto;
        font-size: 6.154vw;
        font-style: normal;
        font-weight: 700;
        line-height: 8.974vw;
        letter-spacing: 0.385vw;
        margin: 3.846vw 0 4.615vw;
    }

    .single_content {
        margin-top: 4.615vw;
    }

    h2 {
        color: #6C584C;
        font-family: "Noto Sans JP";
        font-size: 5.128vw;
        font-style: normal;
        font-weight: 700;
        line-height: 9.744vw;
        margin: 2.051vw 0;
    }

    h3 {
        color: #6C584C;
        font-family: "Noto Sans JP";
        font-size: 4.615vw;
        font-style: normal;
        font-weight: 700;
        line-height: 8.718vw;
        margin: 1.282vw 0;
    }

    .single_content img {
        margin: 2.564vw 0;
    }

    .post_navigation {
        margin-top: 10.256vw;
        display: flex;
        justify-content: center;
    }


    .prev_post a {
        width: 41.795vw;
        height: 8.974vw;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #6c584c;
        color: #fff;
        text-decoration: unset;
        border-radius: 4.359vw;
        margin: 0 2.821vw;
    }

    .next_post a {
        width: 41.795vw;
        height: 8.974vw;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #6c584c;
        color: #fff;
        text-decoration: unset;
        border-radius: 4.359vw;
        margin: 0 2.821vw;
    }
}