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

.career-top-page {

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

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

    .title {
        display: flex;
        align-items: center;
        gap: 40px;
    }

    .icon_recruitment {
        border-radius: 50px;
        background-color: var(--c-footer);
        padding: 10px;
        width: 80px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .icon_recruitment img {
        width: 50px;
        padding: 4px;
    }


    .detailed-information {
        margin: 20px auto 0 120px;
    }

    .title-text {
        color: var(--c-primary);
        font-weight: bold;
        font-size: 32px;
    }

    .recruitment-type-text ul,
    .requirements-text ul,
    .preferential-conditions-text ul {
        text-align: left;
        list-style-position: inside;
    }

    .recruitment-type-text li {
        font-size: 18px;
        font-weight: bold;
        list-style: none;
    }

    .recruitment-type-text li::before {
        content: "";
        display: inline-block;
        width: 18px;
        height: 18px;
        background-color: var(--c-primary);
        border-radius: 50%;
        margin-right: 20px;
        vertical-align: middle;
    }

    .job-description-inner {
        text-align: left;
    }


    .job-description-text p {
        margin: 0 0 1rem;
    }


    .specific-example {
        margin: 40px 0;
    }

    .specific-example-list {
        list-style-type: disc;
        padding-left: 20px;
    }


    .requirements-text li {
        margin: 0 0 2rem;
    }

    .icon_requirements img {
        padding: 4px 4px 4px 10px;
    }

    .requirements-items {
        width: 100%;
    }

    .requirements-sub-title {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        margin: 0 0 1rem;
    }

    .icon-area_sub-checkbox {
        min-width: 20px;
    }

    .requirements-sub-title img {
        width: 30px;
        margin: 0.5em 0 0;
    }

    .requirements-sub-title-text {
        background-color: #e8f3fb;
        font-weight: bold;
        font-size: 20px;
        padding: 5px 20px 5px 20px;
        width: 9em;

        margin: 0 0 0.5em;
    }


    .preferential-conditions-area {
        display: flex;
        align-items: center;
    }

    .preferential-conditions-title {
        color: var(--c-primary);
        font-weight: bold;
        font-size: 20px;
        padding: 10px;
        border: solid 2px var(--c-primary);
        border-radius: 50px;
        width: 200px;
    }


    .preferential-conditions-title-line {
        display: inline-block;
        background-color: var(--c-primary);
        height: 2px;
        width: 100%;
    }

    .benefits-text {
        text-align: left;
    }

    .benefits-list {
        display: flex;
        gap: 20px;
    }

    .benefits-list:not(:first-child) {
        padding-top: 2em;
    }

    .benefits-list:not(:last-child) {
        border-bottom: solid 2px var(--c-border);
        padding-bottom: 2em;
    }

    .benefits-list-title,
    .benefits-list-sub-title {
        font-weight: bold;
    }

    .benefits-list-title {
        min-width: 6em;
    }

    .benefits-list-description:not(:last-child) {
        padding: 0 0 1em;
    }

    .recruitment-flow-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .flow-chart {
        width: 100%;
        max-width: 600px;
        padding: 2rem 0;
    }

    .career-btn-area {
        margin: 4rem 0 2rem;
    }

    .career-btn {
        border-radius: 30px;
        background-color: #62a9d8;
        color: #ffffffff;
        font-weight: bold;
        filter: drop-shadow(0px 6px 8px rgba(0, 0, 0, 0.3));
        padding: 20px 50px;

    }


    /* 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;
        }

        .recruitment-type-text li {
            font-size: 16px;
        }

        .title {
            gap: 20px;
        }

        .title-text {
            font-size: 24px;
        }

        .detailed-information {
            margin: 20px auto 0 10px;
        }


        .icon_recruitment {
            width: 60px;
            height: 60px;
        }

        .icon_recruitment img {
            width: 40px;
        }


        .requirements-sub-title {
            gap: 10px;
        }


        .requirements-sub-title-text {
            font-size: 16px;
            width: 100%;
        }


        .preferential-conditions-title {
            font-size: 16px;
        }


        .career-btn {
            padding: 20px 30px;
        }
    }

}