/*
=======================================

Filename: news.css

======================================= */

/* ==========================
// news common style
========================== */
.news {
    position: relative;
}

.news .wp-block-image {
    text-align: center;
}

@media screen and (min-width: 1921px) {
    .news.layout-container {
        width: 806px;
        margin: auto;
        transform: none;
    }
}

@media screen and (max-width: 1920px) and (min-width: 1441px) {
    .news.layout-container {
        width: 806px;
    }
}

@media screen and (max-width: 1440px) and (min-width: 768px) {
    .news.layout-container {
        max-width: 806px;
        margin: auto;
    }
}


/* ==========================
// news__title__wrap style
========================== */
.news__title__wrap {
    display: none;
}

@media screen and (min-width: 1300px) {
    .news__title__wrap {
        display: block;
        position: fixed;
        left: 8rem;
    }

    .news__title__wrap img {
        width: 12rem;
    }

    .news__title__wrap .back__btn {
        transform: scaleX(-1);
    }

    .news__title__wrap .button__txt {
        width: 5rem;
    }
}

/* ==========================
// main__wrap style
========================== */
.news .main__wrap {
    padding: 8rem 1.2rem 2rem;
    margin-top: 0;
}

.news article img {
    border-radius: 1rem;
}

.news_thumbnail img {
    width: 100%;
}

.news h1 {
    font-size: 1.8rem;
    letter-spacing: .4rem;
    margin: 3.5rem auto 1rem;
}

.news .wp-block-post-date {
    font-size: 1.2rem;
    color: var(--color-main);
    margin-bottom: 4rem;
    font-family: "Montserrat", sans-serif;
}

.news p {
    font-size: 1.2rem;
    letter-spacing: .3rem;
    line-height: 1.5;
    font-weight: 300;
}

.news h2 {
    color: #1d2088;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 4rem auto 2rem;
}

.news .wp-block-columns {
    margin: 3.5rem auto 3.5rem;
}

body .is-layout-flex {
    gap: 1rem;
}


@media screen and (min-width: 767px) {
    .news .main__wrap {
        padding: 15rem 0 2rem;
    }

    .news h1 {
        font-size: 2.2rem;
    }

    .news p {
        font-size: 1.6rem;
        line-height: 2;
    }

    .news h2 {
        font-size: 2rem;
    }

    .news .wp-block-columns {
        margin: 4.7rem auto 7.5rem;
    }
}

/* ==========================
// news__main__sns__button style
========================== */
.news__main__sns__button_wrap {
    display: flex;
    justify-content: end;
    gap: 1.5rem;
    border-bottom: solid 2px #D2D2E9;
    margin-top: 6rem;
    padding-bottom: 2rem;
}

.news__main__sns__button img {
    border-radius: initial;
}

.news__main__sns__txt {
    width: 4.5rem;
}

.news__main__sns__button {
    height: 2.2rem;
}

@media screen and (min-width: 767px) {
    .news__main__sns__button_wrap {
        margin-top: 10rem;
    }
}

/* ==========================
// post_navigation style
========================== */
.post_navigation {
    display: flex;
    justify-content: space-between;
}

.post_navigation.only-prev {
    justify-content: flex-start;
    /* 前の記事（左）しかないとき → 左寄せ */
}

.post_navigation.only-next {
    justify-content: flex-end;
    /* 次の記事（右）しかないとき → 右寄せ */
}

.post_navigation a {
    margin-left: initial;
}

.news__post_navigation .prev__btn {
    transform: scaleX(-1);
}

.news__post_navigation .prev__btn .button__txt,
.news__post_navigation .next__btn .button__txt {
    left: calc(60% * -0.72);
}

@media screen and (min-width: 767px) {

    .news__post_navigation .prev__btn .button__txt,
    .news__post_navigation .next__btn .button__txt {
        left: calc(40% * -0.72);
    }
}



/* ==========================
// news_archive common style
========================== */

.news_archive {
    position: relative;
}

.news_archive .main__wrap {
    padding-top: 8rem;
    margin-top: 0;
}

.news_archive .wp-block-image {
    text-align: center;
}

@media screen and (min-width: 1921px) {
    .news_archive.layout-container {
        width: 1200px;
        margin: auto;
        transform: none;
    }
}

@media screen and (max-width: 1920px) and (min-width: 1441px) {
    .news_archive.layout-container {
        width: 1200px;
    }
}

@media screen and (max-width: 1440px) and (min-width: 768px) {
    .news_archive.layout-container {
        max-width: 1200px;
        margin: auto;
    }
}


/* ==========================
// archive_container style
========================== */
.news_archive .main__wrap {
    padding: 10rem 1.2rem 6rem;
}

.news_archive h1 img {
    margin: 0 auto 4rem;
    width: 9rem;
}

.news_archive_news_item__wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: flex-start;
    margin: auto;
    border-bottom: solid 2px #D2D2E9;
}

.news_archive_news_item {
    width: 100%;
    transition: .3s;
}

.news_archive_news_item:hover {
    opacity: .8;
}

.news_archive_news_thumbnail img {
    border-radius: 1rem;
    width: 100%;
}

.news_title {
    margin-top: 2rem;
}


.news_archive_news_content h2 {
    font-size: 1.4rem;
    text-align: justify;
    line-height: 1.7;
}

.news_archive_news_date {
    font-size: 1.2rem;
    color: var(--color-main);
    margin-top: 1rem;
    margin-bottom: 3rem;
}


/* pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 3rem auto 0;
}

.page-numbers {
    font-size: 1.8rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 3.8rem;
    height: 3.8rem;
}

.page-numbers.current {
    color: #fff;
    background-color: var(--color-main);
    border-radius: 50rem;
}

@media screen and (min-width: 767px) {
    .news_archive .main__wrap {
        padding: 5rem 6rem 0;
    }

    .news_archive h1 img {
        margin-bottom: 6rem;
    }

    .news_archive .news_archive_news_item__wrap {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5%;
    }

    .news_archive_news_item {
        flex: 0 0 calc((100% - 12rem) / 3);
        width: 36rem;
        max-width: 33.33%;
    }

    .archive .news_title {
        height: 11rem;
    }

    .news_archive_news_content h2 {
        font-size: 1.4rem;
    }

    .news_archive_news_date {
        margin-top: 0;
        margin-bottom: 5rem;
    }
}

/* ==========================
// breadcrumb style
========================== */
.news .breadcrumb,
.news_archive .breadcrumb {
    display: none;
}


@media screen and (min-width: 767px) {

    .news .breadcrumb,
    .news_archive .breadcrumb {
        display: block;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        padding: 0 8rem 2rem;
    }

    .news_archive .breadcrumb {
        padding: 0 6rem 2rem;
    }

    .news .breadcrumb {
        width: 100vw;
    }

    .news .breadcrumb a,
    .news_archive .breadcrumb a {
        text-decoration: underline;
    }
}