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

.graduate-top-page {

    img {
        width: 100%;
    }

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

    .sp-top-img {
        display: none;
    }

    /* news ============================== */

    .news-inner {
        display: flex;
        justify-content: center;
        text-align: left;
        gap: 20px;
        align-items: stretch;
    }

    .news-title {
        color: #1b1464;
        font-size: xx-large;
        font-weight: bold;
        padding: 0 1rem 0 0;
        margin: 10px 20px;
        border: solid #1b1464;
        border-width: 0px 4px 0 0;
    }

    .news-inner li {
        display: flex;
        gap: 20px;
    }

    /* message ============================== */

    .message-catchphrase {
        background-color: var(--c-primary);
    }

    .message-contents {
        display: flex;
        gap: 40px;
    }


    .message-text {
        text-align: left;
        padding: 2rem;
        border: solid 2px var(--c-primary);
        background-image: url("/img/recruit/graduate/message-text_pc.png");
        background-size: contain;
        background-repeat: no-repeat;
        max-width: 650px;
    }

    .message-text p:not(:last-child) {
        margin: 0 0 1rem;
    }

    .message-ceo img {
        min-width: 240px;
    }

    .message-img-bottom {
        background: linear-gradient(to top, #fafaf0 50%, transparent 50%);
    }



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

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

        .pc-top-img {
            display: none;
        }

        .sp-top-img {
            display: block;
        }

        .news-inner {
            flex-direction: column;
            align-items: center;
        }

        .news-title {
            padding: 0 0 4px 0;
            margin: 10px 20px;
            border: solid #1b1464;
            border-width: 0px 0 4px 0;
        }

        .message-contents {
            gap: 20px;
            flex-direction: column;
            align-items: center;
        }

        .message-ceo img {
            width: 300px;
        }


    }
}