/* ==========================================================================
                            採用情報ページのスタイル
   ========================================================================== */

.recruit-section .section-title__lg {
    --font-color: var(--primary-color);

    @media screen and (width <=600px) {
        .en {
            font-size: 3.25rem;
        }
    }
}

.recruit-intro {
    padding-top: clamp(3rem, calc(1.585rem + 3.774vw), 4rem);
    /* min: 48px, max: 64px */
    padding-bottom: clamp(3rem, calc(-3.368rem + 16.981vw), 7.5rem);
    /* min: 48px, max: 120px */
}

.recruit-works {
    padding-top: clamp(3rem, calc(0.877rem + 5.66vw), 4.5rem);
    /* min: 48px, max: 72px */
    padding-bottom: clamp(1.5rem, calc(-3.453rem + 13.208vw), 5rem);
    /* min: 24px, max: 80px */
}

.recruit-intro__content,
.recruit-works__content {
    margin-top: clamp(2.5rem, calc(-1.038rem + 9.434vw), 5rem);
    /* min: 40px, max: 80px */
    margin-bottom: clamp(2.5rem, calc(0.377rem + 5.66vw), 4rem);
    /* min: 40px, max: 64px */
    text-align: center;

    h3 {
        font-size: clamp(1rem, calc(-0.415rem + 3.774vw), 2rem);
        /* min: 16px, max: 32px */
        letter-spacing: 0.1em;
        font-weight: 500;
    }

    p {
        margin-top: clamp(2rem, calc(1.292rem + 1.887vw), 2.5rem);
        /* min: 32px, max: 40px */
        line-height: 2;
    }

    @media screen and (width <=600px) {
        p {
            text-align: left;

            br {
                display: none;
            }
        }
    }
}

.infinite-slider {
    --image-width: 1785px;
    --slider-gap: 2rem;
    --slider-speed: 30s;
    --slider-direction: normal;

    overflow: hidden;
    width: 100%;

    .infinite-slider__track {
        display: flex;
        gap: var(--slider-gap);
        animation: scroll var(--slider-speed) linear var(--slider-direction) infinite;

        &.--reverse {
            animation: scroll-reverse var(--slider-speed) linear infinite;
        }
    }


    .infinite-slider__item {
        flex-shrink: 0;
        width: var(--image-width);

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

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(var(--image-width) * -1 - var(--slider-gap)));
    }
}

@keyframes scroll-reverse {
    from {
        transform: translateX(calc((var(--image-width) + var(--slider-gap)) * -1));
    }

    to {
        transform: translateX(0);
    }
}

.recruit-intro__photo-slider {
    --image-width: 1785px;
    --slider-gap: 2rem;
    --slider-speed: 60s;

    @media screen and (width <=600px) {
        --image-width: 892px;
    }
}

.recruit-works__photo-slider {
    --image-width: 1680px;
    --slider-gap: 0rem;
    --slider-speed: 120s;
    --slider-direction: reverse;

    @media screen and (width <=600px) {
        --image-width: 988px;
        --slider-speed: 90s;
    }
}

.recruit-interview__wrapper {
    margin-top: clamp(2.5rem, calc(-8.113rem + 28.302vw), 10rem);
    /* min: 40px, max: 160px */
    margin-bottom: clamp(2.5rem, calc(-1.038rem + 9.434vw), 5rem);
    /* min: 40px, max: 80px */
    padding: 4rem;
    /* min: 12px, max: 64px */
    background-color: #146EC8;
    border-radius: 2.5rem;
    max-width: min(1280px, 92%);

    @media screen and (width <=600px) {
        padding: 0;
        padding-top: 3rem;
        padding-bottom: 1rem;
    }
}

.recruit-interview {

    .recruit-interview__content {
        background-color: var(--white-color);
        padding: clamp(2.5rem, calc(-1.038rem + 9.434vw), 5rem) clamp(1rem, calc(-3.245rem + 11.321vw), 4rem);
        margin-top: clamp(1.5rem, calc(0.085rem + 3.774vw), 2.5rem);
        /* min: 24px, max: 40px */
        border-radius: 2rem;
        display: grid;
        grid-template-columns: 380px 1fr;
        grid-template-rows: auto 1fr;
        column-gap: 2rem;
        row-gap: 1.5rem;

        .recruit-interview__thumbnail {
            grid-area: 1 / 1 / 2 / 2;

            img {
                width: 100%;
                aspect-ratio: 1;
            }
        }

        .recruit-interview__title {
            grid-area: 2 / 1 / 3 / 2;

            h3,
            p {
                font-size: clamp(1rem, calc(0.646rem + 0.943vw), 1.25rem);
                /* min: 16px, max: 20px */
                font-weight: 500;
                letter-spacing: 0.1em;
            }
        }

        .recruit-interview__faq {
            line-height: 2;
            grid-area: 1 / 2 / 3 / 3;
            counter-reset: question;

            dt {
                color: var(--primary-color);
                font-size: clamp(1rem, calc(0.823rem + 0.472vw), 1.125rem);
                /* min: 16px, max: 18px */
                letter-spacing: 0.1em;
                display: flex;
                align-items: center;
            }

            dt::before {
                color: var(--primary-color);
                font-family: var(--font-en);
                font-size: clamp(1.5rem, calc(1.146rem + 0.943vw), 1.75rem);
                /* min: 24px, max: 28px */
                font-weight: 600;
                margin-right: 0.5rem;
                counter-increment: question;
                content: "Q" counter(question) ".";
                white-space: nowrap;
            }

            dd {
                padding-left: 3em;
                margin-top: 0.5em;
            }

            dd+dt {
                margin-top: 2rem;
            }
        }
    }

    /* Swiper関連の設定 */
    .interview-swiper__container {
        position: relative;
    }

    .interview-swiper-button-next,
    .interview-swiper-button-prev {
        --swiper-navigation-sides-offset: -4rem;
        --swiper-navigation-size: 2rem;
        z-index: 1;

        svg {
            display: none;
        }

        @media screen and (width <=600px) {
            --swiper-navigation-sides-offset: -1.25rem;
            --swiper-navigation-size: 1.75rem;
            --swiper-navigation-top-offset: 200px;

            img {
                filter: drop-shadow(1px 1px #146EC8) drop-shadow(1px -1px #146EC8) drop-shadow(-1px 1px #146EC8) drop-shadow(-1px -1px #146EC8);
            }
        }
    }

    .interview-swiper-button-prev {
        transform: rotate(180deg);
    }

    @media (width <=1200px) {

        .recruit-interview__content {
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto;
            row-gap: 0.5rem;

            .recruit-interview__thumbnail {
                grid-area: 1 / 1 / 2 / 2;
                width: 80%;
                margin-inline: auto;
            }

            .recruit-interview__title {
                grid-area: 2 / 1 / 3 / 2;
                width: 80%;
                margin-inline: auto;
            }

            .recruit-interview__faq {
                grid-area: 3 / 1 / 4 / 2;
                margin-top: 1.75rem;

                dt {
                    align-items: baseline;
                }

                dd {
                    padding-left: 0;
                }

                dd+dt {
                    margin-top: 1.5rem;
                }
            }
        }
    }
}

.recruit-recruitment,
.recruit-company {
    padding-top: 5rem;

    .recruit__content__wrapper {
        margin-top: 2.5rem;
        padding: 5rem 2rem;
        background-color: var(--bg-color);
        border-radius: 2.5rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.16);

        .recruit__content {
            max-width: min(720px, 100%);
            margin-inline: auto;

            dl {
                display: grid;
                grid-template-columns: 1fr 3fr;
                row-gap: 2rem;
            }

            dt,
            dd {
                line-height: 2;
            }
        }
    }

    @media screen and (width <=600px) {
        .recruit__content__wrapper {
            padding: 3rem 1.5rem;

            .recruit__content {
                dl {
                    grid-template-columns: 1fr;
                    row-gap: 0.25rem;
                    margin-top: 0;

                    dt {
                        font-size: 1rem;
                        font-weight: 500;
                    }

                    dd+dt {
                        margin-top: 1.5rem;
                    }

                    dd {
                        padding-left: 0.5em;
                    }
                }
            }
        }
    }
}

.recruit-company {
    margin-bottom: 7.5rem;

    @media screen and (width <=600px) {
        margin-bottom: 6.25rem;

        .recruit__content__wrapper .recruit__content dl dd br {
            display: none;
        }
    }
}

.entry-button__container {
    margin-bottom: 10rem;

    .entry-button {
        display: block;
        background-color: var(--primary-color);
        color: var(--white-color);
        max-width: 1000px;
        width: 100%;
        height: 10rem;
        display: flex;
        align-items: center;
        gap: 2rem;
        padding: 0 5rem;
        margin-inline: auto;
        position: relative;

        .en {
            text-transform: uppercase;
            font-size: clamp(2.5rem, 0.377rem + 5.66vw, 4rem);
            font-weight: 700;
            letter-spacing: 0.1em;
            z-index: 2;
        }

        .ja {
            font-size: clamp(1.125rem, 0.948rem + 0.47vw, 1.25rem);
            font-weight: 500;
            letter-spacing: 0.1em;
            z-index: 2;
        }

        &::after {
            content: '';
            display: inline-block;
            margin-left: 0.5rem;
            background-image: url(../assets/images/common/btn-icon--blue.svg);
            width: 2rem;
            aspect-ratio: 1;
            background-size: contain;
            background-repeat: no-repeat;
            justify-self: end;
            z-index: 2;
            transition: background-image 0.3s ease;
        }

        &::before {
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            background-color: var(--accent-color);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.2s ease;
        }

        &:hover {
            &::before {
                transform: scaleX(1);
                transform-origin: left;
            }

            &::after {
                background-image: url(../assets/images/common/btn-icon--yellow.svg);
            }
        }
    }

    @media screen and (width <=768px) {
        margin-bottom: 6.25rem;

        .entry-button {
            display: grid;
            grid-template-columns: auto 1fr;
            height: auto;
            padding: 1.75rem 2.5rem;
            column-gap: 0.5rem;
            row-gap: 0;

            .en {
                grid-column: 1 / 3;
                line-height: 1.5;
            }

            .ja {
                grid-column: 1 / 2;
            }

            &::after {
                width: 1.5rem;
            }
        }
    }
}