@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * ARCHIVE.............一覧
 * PAGER...............ページネーション
 */





/*------------------------------------*\
    $ARCHIVE
\*------------------------------------*/
.archive {}

    /*ul*/.archive__list {
        display: flex;
        flex-wrap: wrap;
    }

        @media screen and (orientation: landscape) {
            /*li*/.archive__item { width: 25% }
        }
        @media screen and (orientation: portrait) {
            /*li*/.archive__item { width: 50% }
        }

            .archive__link {
                position: relative;
                display: block;
                height: 100%;
                background-color: white;
            }

                .archive__image {
                    position: relative;
                    padding-bottom: 65.625%;
                    overflow: hidden;
                }
                    .archive__image img {
                        position: absolute;
                        inset: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        transition: transform .6s var(--easeOutBack);
                    }
                    .archive__link:hover .archive__image img { transform: scale(1.1) }

                .archive__content {
                    padding-top: 13px;
                }
                @media screen and (orientation: landscape) {
                    .archive__content {
                        padding-inline: 6.25%;
                        padding-bottom: 27px;
                    }
                }
                @media screen and (orientation: portrait) {
                    .archive__content {
                        padding-inline: 8%;
                        padding-bottom: 20px;
                    }
                }

                    .archive__title {
                        font-family: var(--font);
                        font-size: 1.8rem;
                        font-weight: 700;
                        line-height: calc(30 / 18);
                        letter-spacing: .04em;
                    }
                    @media screen and (orientation: landscape) {
                        .archive__title {
                            font-size: 1.8rem;
                            line-height: calc(30 / 18);
                        }
                    }
                    @media screen and (orientation: portrait) {
                        .archive__title {
                            margin-bottom: 4px;
                            font-size: 1.4rem;
                            line-height: calc(20 / 14);
                        }
                    }

                    @media screen and (orientation: landscape) {
                        .archive__status {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            flex-wrap: wrap;
                        }
                    }

                        .archive__date {
                            color: var(--fontGrayColor2);
                            font-weight: 700;
                            letter-spacing: .1em;
                            white-space: nowrap;
                        }
                        @media screen and (orientation: landscape) {
                            .archive__date {
                                margin-top: 4px;
                                padding-right: 1em;
                                font-size: 1.4rem;
                                line-height: calc(16 / 14);
                            }
                        }
                        @media screen and (orientation: portrait) {
                            .archive__date {
                                font-size: 1.1rem;
                                line-height: 1;
                            }
                        }

                        .archive__tag {
                            width: max-content;
                            background-color: var(--primaryColor);
                        }
                        @media screen and (orientation: landscape) {
                            .archive__tag {
                                padding-right: 9px;
                                padding-left: 18px;
                                margin-top: 4px;
                                clip-path: polygon(8px 0px, 100% 0, 100% 100%, 8px 100%, 0 50%);
                                font-size: 1.2rem;
                                line-height: calc(16 / 12);
                            }
                        }
                        @media screen and (orientation: portrait) {
                            .archive__tag {
                                padding-right: 4px;
                                padding-left: 12px;
                                margin-top: 8px;
                                clip-path: polygon(7.5px 0px, 100% 0, 100% 100%, 7.5px 100%, 0 50%);
                                font-size: 1.1rem;
                                line-height: calc(15 / 11);
                            }
                        }

                .archive__new {
                    position: absolute;
                    inset: 0;
                    width: max-content;
                    height: max-content;
                    background-color: black;
                    color: var(--primaryColor);
                    font-family: var(--fontEnB);
                    letter-spacing: .1em;
                }
                @media screen and (orientation: landscape) {
                    .archive__new {
                        padding-right: calc(22px - 0.1em);
                        padding-left: 22px;
                        font-size: 1.4rem;
                        line-height: 2;
                    }
                }
                @media screen and (orientation: portrait) {
                    .archive__new {
                        padding-right: calc(15px - 0.1em);
                        padding-left: 15px;
                        font-size: 1.2rem;
                        line-height: calc(20 / 12);
                    }
                }


    .archive__error {
        width: max-content;
        max-width: 100%;
        padding-block: 3em;
        padding-inline: clamp(30px, calc((100vw - 88px) * (60 / 1920)), 60px);
        margin-inline: auto;
        font-family: var(--fontEnB);
        font-size: 2.0rem;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: .04em;
    }





/*------------------------------------*\
    $PAGER
\*------------------------------------*/
.archive-pager {
    width: max-content;
    max-width: 100%;
    padding-top: 100px;
    padding-inline: clamp(30px, calc((100vw - 88px) * (60 / 1920)), 60px);
    padding-bottom: 120px;
    margin-inline: auto;
}

    .archive-pager__list {
        display: flex;
        flex-wrap: wrap;
    }

        .archive-pager__item { margin-right: 5px }

            .archive-pager__link {
                display: flex;
                justify-content: center;
                align-items: center;
                width: max-content;
                width: clamp(40px, calc(100vw * (80 / 750)), 50px);
                height: clamp(40px, calc(100vw * (80 / 750)), 50px);
                font-size: 1.4rem;
                transition:
                    background-color 1s var(--easeOutQuart),
                    color .3s var(--easeOutQuart);
            }
            .archive-pager__link.active,
            .archive-pager__link:hover {
                background-color: black;
                color: white;
            }
            .archive-pager__link.large { width: clamp(80px, calc(100vw * (160 / 750)), 100px) }
            .archive-pager__link.less-box { pointer-events: none }
            .archive-pager__link:not(.border-none) { border: 1px solid black }

                .archive-pager__link span { font-size: 1.2rem }