/**
 * Archive Page Styles
 * アーカイブページのスタイル
 */

/* ===========================================
    archive page
   =========================================== */
.archive-page {
    padding-top: 0;
}

section.archive {
    width: 100%;
    padding: var(--space-5xl) 0;

    .wrapper:not(.site-header .wrapper):not(.site-footer .wrapper) {
        /* layout_ATVIIH */
        display: flex;
        flex-direction: column;
        gap: 96px;
        width: 100%;
        max-width: var(--max-width);
        padding: 0 220px;
        margin: 0 auto;
    }

    .title-frame {
        /* layout_7D11U9 */
        flex-shrink: 0;
        /* layout_7D11U9 */
        width: 149px;
    }

    .content {
        /* layout_3LNJL2 */
        flex: 1;

        .tab-list {
            /* layout_RP1WT3 */
            display: flex;
            flex-direction: row;
            gap: var(--space-md);
            align-self: stretch;
            margin-bottom: var(--space-md);

            button {
                font-size: 16px;
                color: var(--color-gray);
                cursor: pointer;
                background: none;
                border: none;

                &[aria-selected="true"] {
                    /* stroke_30RV21 */
                    color: var(--color-black);
                    border-bottom: 1px solid var(--color-black);
                }
            }
        }

        .archive-list {
            /* layout_HSNLZE */
            display: flex;
            flex-direction: column;
            align-self: stretch;
            padding: 0;
            margin: 0;
            list-style: none;

            /* Category filtering */
            &:not(.is-show) {
                display: none;
            }

            > li {
                /* news_list - layout_XYWAYV */
                border-bottom: 1px solid var(--color-border);

                &:first-child {
                    border-top: 1px solid var(--color-border);
                }

                a {
                    display: flex;
                    flex: 1;
                    flex-direction: row;
                    gap: var(--space-xl);
                    align-items: center;
                    padding: var(--space-md) 0;
                    text-decoration: none;
                    transition: var(--transition);

                    &:hover {
                        opacity: 0.7;
                    }

                    .date {
                        /* text-en */
                        flex-shrink: 0;
                        /* text-en */
                        flex-basis: 100px;
                        font-size: 16px;
                        color: var(--color-text);
                    }

                    .category {
                        flex-shrink: 0;
                        flex-basis: 120px;
                        font-size: 16px;
                        color: var(--color-gray);
                    }

                    .text {
                        /* text-ja-normal */
                        flex: 1;
                        font-size: 16px;
                        color: var(--color-text);
                    }

                    .icon {
                        flex-shrink: 0;
                        width: 20px;
                    }
                }
            }
        }

        .no-posts {
            padding: var(--space-3xl) 0;
            font-size: 16px;
            color: var(--color-text);
            text-align: center;
        }

        .pagination-wrapper {
            /* layout_PTL6JF */
            display: flex;
            justify-content: center;
            padding-top: var(--space-xl);
        }
    }
}

html #wpadminbar {
    display: none;
}

/* ===========================================
    SP Styles (max-width: 1279px)
   =========================================== */
@media (max-width: 1279px) {
    section.archive {
        padding: var(--space-3xl) 0;

        .wrapper:not(.site-header .wrapper):not(.site-footer .wrapper) {
            flex-direction: column;
            gap: var(--space-xl);
            padding: 0 var(--space-md);
        }

        .site-header .wrapper {
            flex-direction: row;
            padding: var(--space-md);
        }

        .title-frame {
            width: 100%;
        }

        .content {
            .tab-list {
                flex-wrap: wrap;
            }

            .archive-list {
                > li {
                    a {
                        flex-direction: column;
                        gap: var(--space-sm);
                        align-items: flex-start;

                        .date {
                            flex-basis: auto;
                        }

                        .category {
                            flex-basis: auto;
                        }

                        .text {
                            flex-basis: auto;
                        }
                    }
                }
            }

            .pagination-wrapper {
                justify-content: center;
            }
        }
    }
}