@charset "UTF-8";

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





/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
.lists { background-color: var(--primaryColor-100) }

    .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(32px, calc(100vw * (40 / var(--innerContainerSize))), 40px);
        padding-top: clamp(48px, calc(100vw * (64 / var(--innerContainerSize))), 64px);
        padding-bottom: clamp(96px, calc(100vw * (120 / var(--innerContainerSize))), 120px);
    }

        .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 {
                    width: max(96px, calc(100% * (164 / 360)));
                    height: fit-content;
                    padding: clamp(4px, calc(100vw * (9 / var(--innerContainerSize))), 9px);
                    border: 1px solid var(--primaryColor-800);
                    border-radius: 10px;
                }
                .lists__image img {
                    aspect-ratio: 1 / 1;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 10px;
                }

                .lists__content {
                    flex-grow: 1;
                    width: 1px;
                    padding-top: 10%;
                }

                    .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__job {
                        margin-bottom: 1em;
                        color: var(--primaryColor-800);
                        font-size: 1.4rem;
                        line-height: calc(20 / 14);
                        letter-spacing: .05em;
                    }

                    .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;
                        }


                .lists__text {
                    width: 100%;
                    font-size: 1.4rem;
                    line-height: calc(22 / 14);
                    letter-spacing: .05em;
                }