@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * UNDER_BANNER........下部バナー
 * CONTENTS............コンテンツ
 */





/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
.lists {}

    .lists__inner {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
        grid-column-gap: max(24px, 3.125%);
        grid-row-gap: clamp(48px, calc(100vw * (60 / var(--innerContainerSize))), 60px);
        padding-top: clamp(48px, calc(100vw * (64 / var(--innerContainerSize))), 64px);
        padding-bottom: clamp(96px, calc(100vw * (136 / var(--innerContainerSize))), 136px);
    }

        .lists__item {}

            .lists__link {
                display: flex;
                flex-wrap: wrap;
                column-gap: max(5%, 12px);
                row-gap: clamp(16px, calc(100vw * (18 / var(--innerContainerSize))), 18px);
                padding-top: clamp(16px, calc(100vw * (20 / var(--innerContainerSize))), 20px);
                padding-inline: clamp(16px, calc(100vw * (20 / var(--innerContainerSize))), 20px);
                padding-bottom: clamp(24px, calc(100vw * (26 / var(--innerContainerSize))), 26px);
                border-radius: 10px;
                background-color: white;
                transition: background-color .3s var(--easeOutQuart);
            }
            .lists__link:hover { background-color: var(--primaryColor-200) }

            .lists__image {
                position: relative;
                width: 100%;
                padding-bottom: clamp(20px, calc(100vw * (23 / var(--innerContainerSize))), 23px);
                border-radius: 10px;
                overflow: hidden;
            }
            .lists__image img {
                aspect-ratio: 400 / 256;
                width: 100%;
                height: 100%;
                border-radius: 10px;
                object-fit: cover;
            }

            .blog__list .lists__image img {
                object-fit: cover;
            }

            .blog__list .lists__image {
                padding-bottom: clamp(10px, calc(100vw * (10 / var(--innerContainerSize))), 10px);
            }

            .lists__item.is-new .lists__image::before {
                content: "NEW";
                position: absolute;
                top: 0;
                left: 0;
                transform: translateX(-50%) rotate(-45deg);
                transform-origin: 50% 0;
                width: 7.5em;
                padding-top: 1.5625em;
                padding-left: .05em;
                padding-bottom: 0.625em;
                border-bottom: 2px solid white;
                background-color: var(--accentColor-400);
                color: white;
                font-family: var(--font);
                font-size: clamp(1.4rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem);
                font-weight: 900;
                line-height: 1;
                letter-spacing: .05em;
                text-align: center;
            }

                .lists__name {
                    margin-bottom: calc(1em * (7 / 24));
                    color: var(--primaryColor-800);
                    font-size: clamp(2.0rem, calc(100vw * (24 / var(--innerContainerSize))), 2.4rem);
                    line-height: 1;
                    letter-spacing: .05em;
                }

                .lists__text {
                    margin-bottom: 0.8125em;
                    font-family: var(--font);
                    font-size: clamp(1.4rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem);
                    line-height: 1.625;
                    letter-spacing: .05em;
                }

                .lists__tag {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 8px;
                    margin-bottom: 19px;
                    color: var(--primaryColor-800);
                    font-size: 1.4rem;
                    font-weight: 700;
                    line-height: calc(22 / 14);
                    text-align: center;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }

                    .lists__tag__item {
                        width: 100px;
                        border: 1px solid var(--primaryColor-800);
                        border-radius: 99px;
                        background-color: var(--secondaryColor-100);
                    }


                .lists__button {
                    font-size: 1.4rem;
                    line-height: calc(23 / 14);
                    letter-spacing: .05em;
                }

                    .lists__button__link {
                        display: flex;
                        align-items: center;
                        column-gap: 9px;
                        padding-block: 4px;
                    }
                    .lists__button__link::after {
                        content: "";
                        display: block;
                        width: calc(1em * (23 / 14));
                        height: calc(1em * (23 / 14));
                        background-repeat: no-repeat;
                        background-position: 50% 50%;
                        background-image: url(../images/common/icon-button-faq.png);
                        background-image:
                            image-set(
                                url(../images/common/icon-button-faq.png) 1x,
                                url(../images/common/icon-button-faq@2x.png) 2x
                            );
                        background-image:
                            -webkit-image-set(
                                url(../images/common/icon-button-faq.png) 1x,
                                url(../images/common/icon-button-faq@2x.png) 2x
                            );
                        background-size: contain;
                    }



.pagination { margin-top: clamp(32px, calc(100vw * (64 / var(--innerContainerSize))), 64px) }
.lists .pagination {
    padding-bottom: clamp(96px, calc(100vw * (136 / var(--innerContainerSize))), 136px);
    margin-top: calc(-1 * clamp(32px, calc(100vw * (64 / var(--innerContainerSize))), 64px));
}

    .pagination__list {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 12px;
    }

        .pagination__item a {
            aspect-ratio: 1 / 1;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 2em;
            border: 1px solid var(--neutralColor-300);
            border-radius: 8px;
            font-size: 1.6rem;
            line-height: 2;
            transition: background-color .3s var(--easeOutQuart);
        }
        .pagination__item a:not(.is-active):hover { background-color: var(--primaryColor-200) }
        .pagination__item a.is-active {
            border-color: var(--primaryColor-900);
            background-color: var(--primaryColor-500);
            color: white;
            pointer-events: none;
        }