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

.graduate-work-page {

    .work-top-img {
        display: flex;
        gap: 30px;
        justify-content: center;
        align-items: center;
    }

    .content-work-top {
        background-image: url("/img/recruit/graduate/work/work-page-top-back.png");
        background-repeat: no-repeat;
        background-position: top;
        background-size: 100%;
    }


    .work-icon {
        width: 200px;
        filter: drop-shadow(10px 10px 0px #f6f4e1);
    }

    .speech-bubble img {
        width: 600px;
    }

    .work-top-text {
        text-align: left;
        margin: 4rem 2rem;
    }

    .items-img-top {
        width: 100%;
    }



    /* anchor-link ============================== */

    .anchor-links {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-auto-flow: column;
        justify-content: space-evenly;
        gap: 10px;
    }

    .anchor-link-inner li {
        display: flex;
    }

    .anchor-link-item {
        border: solid 4px #ffce6e;
        border-radius: 10px;
        background-color: #ffffff;
        color: #603813;
        font-size: large;
        font-weight: bold;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .anchor-link-item:hover {
        background-color: #ffce6e;
        opacity: 1;
    }

    .anchor-link-title {
        margin: 0 0 4px;
    }

    .downward-triangle {
        width: 28px;
    }

    /* content-work ============================== */

    .content-work {
        text-align: left;
        scroll-margin-top: 100px;
    }

    .content-work .title {
        display: flex;
        align-items: center;
        gap: 2rem;
        border-bottom: solid 2px var(--c-primary);
        padding: 0 0 1rem;

    }

    .content-work .title-asset {
        width: 50px;
    }

    .content-work .title-text {
        height: 50px;
    }

    .content-work p {
        padding: 2rem;
    }


    .item__img-back-area {
        position: relative;
        height: 80px;
    }

    .item__img-back {
        position: absolute;
        transform: translate(0%, -50%);
        width: 300px;
        right: 0;
        top: 0;
    }



    .supplementary-information,
    .supplementary-information-project {
        display: flex;
        gap: 1rem;
        align-items: baseline;
    }

    .supplementary-information {
        margin: 0 0 1rem;
    }

    .supplementary-information-project {
        margin: 0 0 2rem;
    }

    .item-title {
        color: #eb6a21;
        border: solid 1px #eb6a21;
        border-radius: 100px;
        padding: 4px 24px;
    }

    .item-project-title {
        color: #eb6a21;
        border: solid 1px #eb6a21;
        border-radius: 100px;
        padding: 4px 24px;
        width: fit-content;
    }

    .item-project-text ul {
        list-style-type: disc;
        padding-left: 20px;
    }

    .supplementary-information ol {
        display: flex;
        flex-wrap: wrap;
    }


    .supplementary-information li {
        position: relative;
    }

    .supplementary-information li:not(:first-child) {
        margin-left: 32px;
    }

    .supplementary-information li:not(:first-child):before {
        bottom: 0;
        content: "/";
        left: -22px;
        position: absolute;
        top: 0;
        color: #4d4d4d;
    }


    /* PC_1024px --- tablet
================================================*/

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

        /* anchor-link ============================== */

        .anchor-links {
            grid-template-columns: 1fr 1fr;
            grid-auto-flow: row;
        }
    }

    /* tablet
================================================*/
    @media screen and (max-width: 768px) {

        /* content-work ============================== */

        .item__img-back-01 {
            position: absolute;
            right: 0;
            top: 0px;
            width: 180px;
        }
    }


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

    @media screen and (max-width: 767px) {
        .work-top-img {
            flex-direction: column;
        }

        .work-top-text {
            margin: 2rem 0rem;
        }

        .sp-no-display {
            display: none;
        }


        /* anchor-link ============================== */

        .anchor-links {
            grid-template-columns: 1fr;
            grid-auto-flow: row;
        }

        /* content-work ============================== */


        .content-work {
            scroll-margin-top: 10px;
        }

        .content-work .title {
            gap: 0.8rem;
            padding: 0 0 0.5rem;
        }

        .content-work .title-asset {
            width: 30px;
            height: 30px;
        }

        .content-work .title-text {
            height: 32px;
        }

        .content-work p {
            padding: 2rem 0;
        }

        .supplementary-information {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
            margin: 0 0 1.5rem;
        }

        .supplementary-information-project {
            flex-direction: column;
        }

        .supplementary-information ol {
            margin: 0 0 0 32px;
        }


        .item__img-back {
            top: 40px;
            width: 180px;
        }

    }

}