@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * CHANGE_STYLES.......スタイル変更
 * RECRUIT.............採用について
 * ENTRY...............各職種のエントリーはこちらから
 * FAQ.................よくある質問
 * INTERVIEW...........インタビュー
 * DETAILS.............詳細
 */





/*------------------------------------*\
    $CHANGE_STYLES
\*------------------------------------*/
.main-visual__wrapper { height: min(480px, 56.25vw) }


input:not([type=checkbox]):not([type=radio]), textarea, select {
    display: block;
    width: 100%;
    padding-block: 10px;
    padding-inline: clamp(16px, calc(100vw * (16 / 375)), 20px);
    border: 1px solid var(--fontSubBrown);
    border-radius: 6px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.875;
    letter-spacing: .1em;
}
:is(input, textarea)::placeholder { color: #9b9a99 }

textarea {
    resize: none;
    height: clamp(150px, calc(100vw * (150 / 375)), 300px);
}

input[type=checkbox] {
    width: 20px;
    height: 20px;
    border: 1px solid var(--fontSubBrown);
}
input[type=checkbox]:checked {
    background-color: var(--fontSubBrown);
    background-image: url(../images/form/icon-checkbox.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

input[type=radio] {
    width: 20px;
    height: 20px;
    border: 1px solid var(--fontSubBrown);
    border-radius: 100%;
}
input[type=radio]:checked {
    background-color: var(--fontSubBrown);
    background-image: radial-gradient(var(--fontSubBrown) 0%, var(--fontSubBrown) 50%, white 50.1%);
    background-repeat: no-repeat;
    background-size: contain;
}






/*------------------------------------*\
    $DETAILS
\*------------------------------------*/
@media screen and (max-width: 767px) {
    .form__details { margin-inline: calc(var(--sidePadding) / -2) }
}

    .form__details__tab {}

        .form__details__tab__list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-column-gap: clamp(4px, calc(100vw * (4 / 375)), 8px);
        }

            .form__details__tab__item label {
                position: relative;
                display: block;
                height: 100%;
                padding-top: clamp(16px, calc(100vw * (16 / 375)), 22px);
                padding-left: .1em;
                padding-bottom: clamp(28px, calc(100vw * (28 / 375)), 34px);
                background-color: var(--primaryColor);
                color: var(--fontSubBrown);
                font-size: clamp(1.4rem, calc(100vw * (14 / 375)), 2.0rem);
                font-weight: 500;
                line-height: 1.2;
                letter-spacing: .1em;
                text-align: center;
                cursor: pointer;
                transition: background-color .3s var(--easeOutQuart);
            }
            .form__details__tab__item label:hover,
            .flag-01:checked ~ .form__details__tab .form__details__tab__item label.tab-01,
            .flag-02:checked ~ .form__details__tab .form__details__tab__item label.tab-02,
            .flag-03:checked ~ .form__details__tab .form__details__tab__item label.tab-03,
            .flag-04:checked ~ .form__details__tab .form__details__tab__item label.tab-04 { background-color: white }
            .form__details__tab__item label::before,
            .form__details__tab__item label::after {
                content: "";
                position: absolute;
                bottom: 22px;
                height: 2px;
            }
            .form__details__tab__item label::before {
                left: 50%;
                transform: translateX(-50%);
                width: calc(100% * (374 / 422));
                background-color: white;
            }
            .form__details__tab__item label::after {
                right: calc(100% * (24 / 422));
                width: 0;
                background-color: var(--primaryColor);
                transition: width .3s var(--linear);
            }
            .form__details__tab__item label:hover::after,
            .flag-01:checked ~ .form__details__tab .form__details__tab__item label.tab-01::after,
            .flag-02:checked ~ .form__details__tab .form__details__tab__item label.tab-02::after,
            .flag-03:checked ~ .form__details__tab .form__details__tab__item label.tab-03::after,
            .flag-04:checked ~ .form__details__tab .form__details__tab__item label.tab-04::after {
                right: auto;
                left: calc(100% * (24 / 422));
                width: calc(100% * (374 / 422));
            }


    .form__details__main {}

        .form__details__list { display: grid }

            .form__details__item {
                grid-area: 1 / -1;
                opacity: 0;
                pointer-events: none;
            }
            .flag-01:checked ~ .form__details__main .form__details__item.target-01,
            .flag-02:checked ~ .form__details__main .form__details__item.target-02,
            .flag-03:checked ~ .form__details__main .form__details__item.target-03,
            .flag-04:checked ~ .form__details__main .form__details__item.target-04 {
                opacity: 1;
                pointer-events: visible;
            }

                .form__container {
                    background-color: white;
                    padding-top: clamp(48px, calc(100vw * (48 / 375)), 80px);
                    padding-inline: clamp(24px, calc(100vw * (24 / 375)), 112px);
                    padding-bottom: clamp(64px, calc(100vw * (64 / 375)), 117px);
                    color: black;
                }

                    .form__caution {
                        display: flex;
                        column-gap: 10px;
                        color: var(--fontSubBrown);
                        font-size: 1.6rem;
                        line-height: 1.125;
                        letter-spacing: .1em;
                    }

                        .icon-required {
                            display: block;
                            width: 1.125em;
                            height: 1.125em;
                            margin-bottom: 0.875em;
                            background-image: url(../images/form/icon-required.svg);
                            background-repeat: no-repeat;
                            background-size: contain;
                        }


                    .form__list {
                        margin-bottom: clamp(48px, calc(100vw * (48 / 375)), 80px);
                        border-bottom: 1px solid var(--background1);
                    }

                        .form__item { border-top: 1px solid var(--background1) }

                            .form__column {
                                display: flex;
                                flex-wrap: wrap;
                                column-gap: clamp(12px, calc(100vw * (12 / 375)), 16px);
                                width: 100%;
                            }

                                .form__label {
                                    flex-grow: 1;
                                    width: min(352px, 100%);
                                    padding-top: 28px;
                                    padding-bottom: 26px;
                                    border-top: 2px solid var(--background1);
                                }

                                    .form__label label {
                                        position: relative;
                                        display: flex;
                                        align-items: center;
                                        column-gap: 12px;
                                        padding-block: 4px;
                                        padding-inline: clamp(12px, calc(100vw * (12 / 375)), 20px);
                                        font-size: 1.6rem;
                                        line-height: 1.5;
                                        letter-spacing: .1em;
                                        white-space: nowrap;
                                    }

                                    .form__label label::before {
                                        content: "";
                                        position: absolute;
                                        top: calc(50% - 1em);
                                        left: clamp(6px, calc(100vw * (6 / 375)), 10px);
                                        width: 2px;
                                        height: 2em;
                                        background-color: var(--primaryColor);
                                    }

                                    .form__label label.required::after {
                                        content: "";
                                        display: block;
                                        width: 1.125em;
                                        height: 1.125em;
                                        background-image: url(../images/form/icon-required.svg);
                                        background-repeat: no-repeat;
                                        background-size: contain;
                                    }

                                .form__content {
                                    flex-grow: 1;
                                    width: calc(100% - 352px - clamp(12px, calc(100vw * (12 / 375)), 16px));
                                    min-width: 50%;
                                    max-width: 100%;
                                    padding-top: 16px;
                                    padding-bottom: 18px;
                                }

                                    .form__check {}

                                        .form__check__list {
                                            display: flex;
                                            flex-direction: column;
                                            row-gap: 16px;
                                        }

                                        .form__check__wrapper {
                                            display: flex;
                                            align-items: center;
                                            column-gap: 14px;
                                            cursor: pointer;
                                        }

                                            .form__check__wrapper span {
                                                font-size: 1.6rem;
                                                font-weight: 500;
                                                line-height: 1.25;
                                            }


                                    .form__radio { height: 100% }

                                        .form__radio__list {
                                            display: flex;
                                            align-items: center;
                                            column-gap: 26px;
                                            row-gap: 16px;
                                            height: 100%
                                        }

                                            .form__radio__wrapper {
                                                display: flex;
                                                align-items: center;
                                                column-gap: 10px;
                                                cursor: pointer;
                                            }

                                                .form__radio__wrapper span {
                                                    font-size: 1.6rem;
                                                    font-weight: 500;
                                                    line-height: 1.25;
                                                }


                                    .form__multiple {
                                        display: flex;
                                        flex-direction: column;
                                        row-gap: 10px;
                                        width: 100%;
                                    }

                                        .form__multiple__block {
                                            display: flex;
                                            align-items: center;
                                            flex-wrap: wrap;
                                            column-gap: 12px;
                                            row-gap: 8px;
                                            width: 100%;
                                        }

                                            .form__multiple__label {
                                                flex-grow: 1;
                                                width: 98px;
                                                font-size: 1.6rem;
                                                letter-spacing: .1em;
                                                white-space: nowrap;
                                            }
                                            @media screen and (min-width: 768px) {
                                                .form__multiple__label { text-align: right }
                                            }

                                            .form__multiple__content {
                                                flex-grow: 1;
                                                display: flex;
                                                flex-wrap: wrap;
                                                align-items: center;
                                                column-gap: 22px;
                                                row-gap: 16px;
                                                width: max(calc(100% - 110px), 480px);
                                                max-width: 100%;
                                            }

                                                .form__multiple__content input:not(:only-child) { max-width: 208px }

                                                .form__multiple__button {
                                                    position: relative;
                                                    display: block;
                                                    width: 160px;
                                                    padding-block: clamp(8px, calc(100vw * (8 / 375)), 13px);
                                                    padding-left: 20px;
                                                    border: 2px solid var(--primaryColor);
                                                    /* background-color: var(--primaryColor); */
                                                    background-image: linear-gradient(90deg, white 0%, white 50%, var(--primaryColor) 50%, var(--primaryColor) 100%);
                                                    background-repeat: no-repeat;
                                                    background-position: 100% 50%;
                                                    background-size: 200% 100%;
                                                    color: var(--primaryVariant);
                                                    font-family: var(--fontEn);
                                                    font-size: 1.4rem;
                                                    line-height: 1;
                                                    letter-spacing: .1em;
                                                    transition:
                                                        background-position .3s var(--easeOutQuart),
                                                        color .3s var(--easeOutQuart);
                                                }
                                                .form__multiple__button:hover {
                                                    background-position: 0% 50%;
                                                    color: var(--fontSubBrown);
                                                }
                                                .form__multiple__button::before {
                                                    content: "";
                                                    position: absolute;
                                                    top: calc(50% - 8px);
                                                    right: 16px;
                                                    transform: rotate(90deg);
                                                    width: 16px;
                                                    height: 16px;
                                                    border-radius: 100%;
                                                    background-color: white;
                                                    background-image: url(../images/common/icon-nav-arrow-blue.svg);
                                                    background-repeat: no-repeat;
                                                    background-size: contain;
                                                    transition: background-color .3s var(--easeOutQuart);
                                                }
                                                .form__multiple__button:hover::before {
                                                    background-color: var(--primaryColor);
                                                    background-image: url(../images/common/icon-nav-arrow.svg);
                                                }



                    .form__terms { margin-bottom: 48px; margin-top: 48px; }

                        .form__terms__container {
                            height: clamp(120px, calc(100vw * (120 / 375)), 200px);
                            padding-block: 18px;
                            padding-inline: 14px;
                            margin-bottom: clamp(20px, calc(100vw * (20 / 375)), 22px);
                            border: 1px solid var(--fontSubBrown);
                            color: var(--fontSubBrown);
                            overflow-y: auto;
                        }

                            .form__terms__title {
                                margin-bottom: 1em;
                                font-size: 1.6rem;
                                font-weight: 500;
                                line-height: 1.5;
                                letter-spacing: .1em;
                            }

                            .form__terms__description {
                                font-size: 1.4rem;
                                line-height: calc(26 / 14);
                            }


                        .form__terms__check {
                            width: fit-content;
                            margin-inline: auto;
                        }

                            .form__terms__check__wrapper {
                                display: flex;
                                align-items: center;
                                column-gap: 14px;
                                cursor: pointer;
                            }

                                .form__terms__check__wrapper span {
                                    font-size: 1.6rem;
                                    font-weight: 500;
                                    line-height: 1.25;
                                }