/* ==========================================================================
   お知らせ（home.php / archive.php / single.php）
   ========================================================================== */
.p-news {
    --navy: #063c70;
    --paper: #f6f6ee;
    --line: #abc7d7;

    color: var(--navy);
    background: var(--paper) url("../images/page/paper.jpg");
    font-family: var(--font-mincho);
    line-height: 1.8;

    a:focus-visible {
        outline: 3px solid #aa7220;
        outline-offset: 4px;
    }

    .container {
        width: 84%;
        max-width: 1200px;
        margin-inline: auto;
    }

    /* 見出し帯（左五右衛門についてのページのメインビジュアルと同じ寸法に揃える） */
    .c-page-header {
        min-height: calc(clamp(480px, 36vw, 640px) + var(--header-height));
        padding-block: var(--header-height) 0;
        display: flex;
        align-items: center;

        .c-page-header__inner {
            width: min(calc(100% - 160px), 1200px);
            padding-block: 52px 110px;
        }

        .c-page-header__label {
            letter-spacing: .24em;
            margin-bottom: 6px;
        }

        .c-page-header__title {
            font-size: clamp(32px, 3.3vw, 48px);
            font-weight: 600;
            line-height: 1.65;
            letter-spacing: .14em;
        }

        .c-breadcrumb {
            gap: 16px;
            margin-top: 0;
            padding-block: 14px;
            font-size: 11px;
        }
    }

    /* 一覧 */
    .news {
        max-width: 1000px;
        padding-block: 80px 120px;

        .filters {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
            margin-bottom: 30px;
        }

        .filters,
        .pagination {
            a > span,
            .page-numbers {
                display: grid;
                place-items: center;
                min-height: 50px;
                border: 1px solid #7399b4;
                letter-spacing: .12em;
                font-size: 16px;
            }

            a:hover > span,
            a.page-numbers:hover {
                box-shadow: inset 0 0 0 1px var(--navy);
            }

            [aria-current] > span,
            .page-numbers.current {
                color: white;
                background: var(--navy) url("../images/page/blue-paper.jpg") center / 700px auto;
            }
        }

        .news-list {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .news-item {
            border-bottom: 1px solid var(--line);

            > a {
                display: grid;
                grid-template-columns: 235px minmax(0, 1fr) 20px;
                gap: 42px;
                align-items: center;
                padding: 28px 5px;
                min-height: 94px;

                &:hover .article-title {
                    text-decoration: underline;
                    text-underline-offset: 5px;
                }
            }

            .metadata {
                display: flex;
                gap: 16px;
                align-items: center;
                white-space: nowrap;
            }

            .article-title {
                font-size: 19px;
                letter-spacing: .075em;
                overflow-wrap: anywhere;

                .new {
                    display: inline-block;
                    color: #c9001a;
                    font: 11px Georgia, serif;
                    margin-left: 20px;
                    letter-spacing: .02em;
                }
            }

            .arrow {
                font-size: 24px;
                text-align: center;
            }
        }

        .pagination {
            display: flex;
            justify-content: center;
            gap: 14px;
            margin-top: 38px;

            .page-numbers {
                width: 44px;
                min-height: 44px;
                font: 16px Georgia, serif;
                letter-spacing: 0;
            }

            .page-numbers.dots {
                border: 0;
            }
        }

        .c-no-results {
            padding-block: 40px;
            text-align: center;
        }
    }

    /* 日付・カテゴリー（一覧・詳細で共通） */
    .metadata {
        time {
            font: 16px Georgia, serif;
            letter-spacing: .04em;
        }

        .category {
            border: 1px solid #7e9db5;
            min-width: 86px;
            padding: 2px 8px;
            text-align: center;
            font-size: 11px;
            line-height: 1.5;
        }
    }

    /* 詳細 */
    .news-single {
        max-width: 1000px;
        padding-block: 64px 100px;

        .news-single__header {
            padding-bottom: 28px;
            margin-bottom: 40px;
            border-bottom: 1px solid var(--line);
        }

        .metadata {
            display: flex;
            gap: 16px;
            align-items: center;
        }

        .news-single__title {
            margin-top: 16px;
            font-size: 30px;
            font-weight: 600;
            line-height: 1.6;
            letter-spacing: .08em;
        }

        .news-single__thumbnail {
            margin-bottom: 40px;

            img {
                width: 100%;
                height: auto;
            }
        }

        /* 個人情報保護方針（privacy-policy.php） */
        &.privacy {
            .c-entry-content {
                h2 {
                    font-size: 20px;
                    font-weight: 600;
                    letter-spacing: .06em;
                    padding-bottom: 8px;
                    border-bottom: 1px solid var(--line);
                    margin-top: 2.5em;
                }

                > :first-child {
                    margin-top: 0;
                }

                h2 + * {
                    margin-top: 1em;
                }

                li + li,
                li > ol {
                    margin-top: .5em;
                }

                ol ol {
                    list-style: lower-roman;
                }

                ol ol ol {
                    list-style: lower-alpha;
                }
            }

            .privacy__contact {
                border-top: 1px solid var(--line);

                > div {
                    display: grid;
                    grid-template-columns: 160px minmax(0, 1fr);
                    gap: 20px;
                    padding: 14px 5px;
                    border-bottom: 1px solid var(--line);
                }

                dt {
                    font-weight: 600;
                }
            }

            .privacy__date {
                margin-top: 48px;
                text-align: right;
            }
        }

        .news-single__back {
            display: flex;
            justify-content: flex-end;
            margin-top: 64px;

            a {
                display: flex;
                align-items: center;
                gap: 24px;
                min-height: 44px;
                border-bottom: 1px solid #8aa0b5;
                font-size: 14px;
            }
        }
    }
}

@media (max-width:1024px) {
    .p-news {
        .container {
            width: calc(100% - 80px);
        }

        .c-page-header {
            min-height: calc(310px + var(--header-height));

            .c-page-header__inner {
                width: calc(100% - 80px);
            }

            .c-page-header__title {
                font-size: 36px;
            }
        }

        .news {
            .news-item {
                > a {
                    grid-template-columns: 200px minmax(0, 1fr) 16px;
                    gap: 25px;
                    padding-block: 24px;
                }

                .metadata {
                    gap: 12px;

                    time {
                        font-size: 14px;
                    }

                    .category {
                        min-width: 74px;
                    }
                }

                .article-title {
                    font-size: 16px;
                }
            }
        }

        .news-single {
            .news-single__title {
                font-size: 26px;
            }
        }
    }
}

@media (max-width:767px) {
    .p-news {
        .container {
            width: calc(100% - 40px);
        }

        /* about はページ内ナビの帯が写真下端に重なり見た目の高さが約 236px になるため、それに揃える */
        .c-page-header {
            min-height: calc(236px + var(--header-height));
            align-items: flex-start;

            .c-page-header__inner {
                width: calc(100% - 48px);
                padding-block: 24px 0;
            }

            .c-page-header__label {
                font-size: 11px;
                margin-bottom: 4px;
            }

            .c-page-header__title {
                font-size: 30px;
                line-height: 1.5;
                letter-spacing: .09em;
            }

            .c-breadcrumb {
                gap: 12px;
                padding-block: 17px 10px;
                font-size: 10px;
            }
        }

        .news {
            padding-block: 48px 80px;

            .filters {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
                margin-bottom: 14px;

                a > span {
                    font-size: 14px;
                    min-height: 44px;
                }
            }

            .news-item {
                > a {
                    grid-template-columns: minmax(0, 1fr) 16px;
                    gap: 10px 14px;
                    padding: 22px 0;
                }

                .metadata {
                    grid-column: 1;
                    gap: 14px;

                    time {
                        font-size: 13px;
                    }

                    .category {
                        font-size: 10px;
                        min-width: 70px;
                    }
                }

                .article-title {
                    grid-column: 1;
                    grid-row: 2;
                    font-size: 16px;
                    line-height: 1.8;
                    letter-spacing: .03em;

                    .new {
                        margin-left: 12px;
                        font-size: 10px;
                    }
                }

                .arrow {
                    grid-column: 2;
                    grid-row: 1 / 3;
                }
            }

            .pagination {
                gap: 10px;
                margin-top: 28px;
            }
        }

        .news-single {
            padding-block: 40px 64px;

            &.privacy {
                .c-entry-content h2 {
                    font-size: 18px;
                }

                .privacy__contact > div {
                    grid-template-columns: 1fr;
                    gap: 4px;
                }
            }

            .news-single__title {
                font-size: 22px;
            }
        }
    }
}