@import url("../tokens.css");

.career-input-page {

    .greeting-title {
        color: var(--c-primary);
        font-weight: bold;
        font-size: large;
        margin: 0 0 1rem;
    }

    .greeting-inner-content {
        margin: 0 0 2rem;

    }

    .things-to-check {
        padding: 10px 0 0;

    }

    .things-to-check,
    .content-caution {
        text-align: left;
    }

    .things-to-check li,
    .content-caution li {
        list-style: disc;
    }




    .celebration-money-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .celebration-money-title {
        background-color: var(--c-footer);
        border-radius: 50px;
        color: var(--c-primary);
        font-weight: bold;
        font-size: x-large;
        padding: 20px 60px;
        margin: 20px;
        position: relative;
    }

    .celebration-money-title img {
        width: 320px;
    }


    /* .celebration-money-banner img {
        width: 2000px;
    } */

    .pc-banner {
        width: 60%;
    }

    .sp-banner {
        display: none;
    }

    .celebration-money-text {
        margin: 1rem 0;
    }

    .celebration-money-text ul {
        text-align: left;
        margin: 20px 160px;
        list-style-type: circle;
    }

    .celebration-money-text-subtitle {
        font-weight: bold;
        font-size: 16px;
        padding: 0 0 1rem;
    }





    .contactform_badge-required {
        color: var(--c-required);
        font-weight: bold;
        font-size: 20px;
        padding-left: 10px;
    }

    .contactform_input {
        background-color: #fff;
        border: solid 1px var(--c-border);

        margin: 10px 0;
        padding: 10px;
        border-radius: 4px;
        width: 100%;
    }

    .contactform_input-error {
        background-color: #FFC8C8;
        border: solid 1px var(--c-required);
    }

    .form-input-inner label {
        width: 25%;
        display: inline-flex;
        font-weight: bold;
        cursor: default;
        text-align: left;
        padding: 0 2rem 1rem 0;
    }

    .input-items {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 70%;

        text-align: left;
    }

    .caution-text {
        color: var(--c-required);
        margin-top: -8px;
    }



    .contactform_section {
        display: flex;
        align-items: baseline;
        margin: 10px 0 20px;
    }

    .contactform_section .column .sub-text {
        color: var(--c-muted);
    }

    .input-group {
        display: flex;
        gap: 10px;
        width: 100%;
    }

    .input-group input {
        flex: 1;
    }





    /* 個人情報保護 ＝＝＝＝＝＝＝＝== */

    .personal-info-inner {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .personal-info {
        text-decoration: underline;
        text-underline-offset: 5px;
    }

    .personal-info-text {
        margin: 0 20px 0;
    }

    .personal-info-check {
        border: solid 1px var(--c-border);
        border-radius: 4px;
        padding: 10px 40px;
        display: flex;
        align-items: center;
        margin: 10px;
    }

    /* checkbox ＝＝＝＝＝＝＝＝== */

    .custom-checkbox {
        display: none;
    }

    /* checkbox-label ＝＝＝＝＝＝＝＝== */

    .personal-info-inner .custom-checkbox+label {
        position: relative;
        /* padding-left: 30px; */
        padding: 0 0 0 30px;
        cursor: pointer;
        display: inline-block;
        line-height: 20px;
    }

    .form-input-inner .personal-info-check label {
        width: 100%;
    }

    /* checkbox-box ＝＝＝＝＝＝＝＝== */
    .custom-checkbox+label::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 20px;
        height: 20px;
        border: 2px solid var(--c-border);
        border-radius: 4px;
        background-color: #fff;
        transition: all 0.3s;
    }

    /* checkbox-check-after ＝＝＝＝＝＝＝＝== */
    .custom-checkbox+label::after {
        content: '';
        position: absolute;
        left: 7px;
        top: 2px;
        width: 6px;
        height: 12px;
        border-right: 3px solid #fff;
        border-bottom: 3px solid #fff;
        transform: rotate(45deg) scale(0);
        transition: all 0.3s;
    }

    /* checkbox-check-before ＝＝＝＝＝＝＝＝== */
    .custom-checkbox:checked+label::before {
        background-color: #3498db;
        border-color: #3498db;
    }

    .custom-checkbox:checked+label::after {
        transform: rotate(45deg) scale(1);
    }



    /* SP
================================================*/

    @media screen and (max-width: 768px) {

        .celebration-money-title {
            padding: 20px 16px;
            margin: 0 0 20px;
        }

        .celebration-money-title img {
            width: 100%;
            max-width: 260px;
        }

        .pc-banner {
            display: none;
        }

        .sp-banner {
            display: block;
        }


        .celebration-money-text ul {
            margin: 20px 0 20px 40px;
        }

        .celebration-money-text {
            margin: 1rem 0;
        }

        .celebration-money-text ul,
        .specific-example ul {
            font-size: 14px;
        }









        .personal-info-inner {
            flex-direction: column;
        }

        .form-input-inner label,
        .contactform_input {
            width: 100%;
        }

        .form-input-inner label {
            padding: 0;
        }

        .contactform_input {
            margin: 10px 0 20px;
        }

        .input-items {
            width: 100%;
        }

        .caution-text {
            margin-top: -18px;
        }

        .input-group {
            gap: 0px;
        }

        .input-group input {
            margin: 10px 0
        }

        .input-group input:last-child {
            margin: 0 0 20px;
        }


        .work-history-textarea,
        .key-selling-points-textarea {
            height: calc(6em * 1.5 + 1rem);
        }




        .content-submit {
            padding: 0 0 40px;
        }

        .content-submit button a {
            width: 120px;
            padding: 10px;
        }



    }
}