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

.graduate-page {

    /* voice ============================== */

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

    .content-voice {
        background-color: #fafaf0;
    }

    .voice-title img,
    .entry-title img {
        width: auto;
        height: 60px;
        margin: 2rem;
    }

    .voice-title {
        position: relative;
    }

    .voice-title::before {
        position: absolute;
        right: 0;
        content: "";
        background-image: url("/img/recruit/graduate/voice/voice-title-radiation.png");
        background-size: contain;
        background-repeat: no-repeat;
        display: inline-block;
        width: 40px;
        height: 40px;
        margin: 1rem 0 0;
    }

    .voice-inner ul {
        display: flex;
        gap: 40px;
    }

    .voice-inner li {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #39b54a;
        font-weight: bold;
    }

    .voice-icon {
        width: 200px;
        border: solid 4px #39b54a;
        border-radius: 100px;
        background-color: var(--c-bg);
        margin: 0 0 1rem;
        filter: drop-shadow(10px 10px 0px #f6f4e1);
    }

    .voice-inner li:hover .voice-icon {
        background-color: #39b54a;
    }

    .voice-inner li:hover a {
        opacity: 1;
    }


    /* about ============================== */

    .about-img-top,
    .about-img-bottom {
        width: 100%;
    }


    .content-about {
        background-color: #f0fafa;
    }

    .about-inner {
        background-image: url("/img/recruit/graduate/about-menu/about-img-back.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .about-inner .menu {
        display: grid;
        justify-content: center;
        grid-template-columns: 240px 240px;
        gap: 80px 120px;
    }

    .icon-card {
        filter: drop-shadow(20px 10px #97bed8);
    }

    .icon-card img {
        margin: 0 0 2rem 0;
    }

    .about-inner .menu .text {
        font-weight: bold;
        font-size: medium;
        padding: 10px 20px;
        background-color: #fafaf0;
        border: solid 4px #603813;
        border-radius: 50px;
        color: #603813;
    }

    .icon-card:hover a {
        opacity: 1;
    }

    .icon-card:hover .text {
        background-color: #603813;
        color: #fafaf0;
    }

    .menu-border {
        border: dashed 4px #603813;
        margin: 4rem;
    }

    /* entry ============================== */

    .entry-inner {
        display: flex;
        gap: 20px;
        flex-direction: column;
        align-items: center;
    }


    .entry-contents {
        display: flex;
        justify-content: center;
        gap: 40px;
        margin: 0 0 40px;
    }

    .icon-area {
        border-radius: 100px;
        display: flex;
        width: 200px;
        height: 200px;
        padding: 20px;
        text-align: -webkit-center;
    }

    .mynavi-area {
        border: solid 4px #02abeb;
    }

    .mynavi-area:hover,
    .requirements-area:hover {
        background-color: var(--c-footer);
    }

    .requirements-area {
        border: solid 4px var(--c-primary);
    }

    .title-entry-mynavi,
    .title-graduate-requirements {
        padding: 1rem;
    }

    .title-graduate-requirements {
        width: 152px;
    }

    .external {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        mask-image: url("/img/icon-external.svg");
        mask-size: contain;
        background-color: #008cd2;
        margin: 1rem 0 0;
    }

    .img-graduate-requirements {
        width: 80px;
    }

    .content-entry {
        position: relative;
    }

    .content-entry::before {
        position: absolute;
        right: 10%;
        bottom: -20%;
        content: "";
        background-image: url("/img/recruit/graduate/entry/character.png");
        background-size: contain;
        background-repeat: no-repeat;
        display: inline-block;
        width: 150px;
        height: 348px;
    }


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

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

        /* voice ============================== */

        .voice-inner ul {
            gap: 20px;
        }

        .voice-title img,
        .entry-title img {
            margin: 2rem 0;
        }


        .voice-title::before {
            right: -30px;
            top: 0px;
        }


        .voice-icon {
            border: 2px solid rgb(57, 181, 74);
        }

        /* about ============================== */

        .about-inner {
            background-image: url("/img/recruit/graduate/about-menu/about-img-back_sp.png");
        }

        .icon-card {
            filter: drop-shadow(10px 6px #97bed8);
        }

        .icon-card img {
            margin: 0 0 1rem 0;
        }

        .about-inner .menu .text {
            border: solid 2px #603813;
            /* font-size: x-small; */
            font-size: 14px;
        }

        .menu-border {
            border: dashed 2px #603813;
            margin: 2rem 0;
        }

        /* entry ============================== */

        .entry-contents {
            gap: 10px;
        }

        .icon-area {
            width: 160px;
            height: 160px;
            padding: 20px;
        }

        .entry-inner {
            padding: 1.25rem 1.25rem 6rem;
        }
    }



    /* tablet
================================================*/
    @media screen and (max-width: 767px) {
        .about-inner .menu {
            grid-template-columns: 0.8fr 0.8fr;
            gap: 40px;
        }
    }



    @media (min-width: 426px) and (max-width: 768px) {
        .about-inner .menu {
            gap: 60px;
        }
    }



    @media screen and (max-width: 960px) {
        .content-entry::before {
            right: 0%;
            bottom: -20%;
            width: 120px;
            height: 219px;
        }
    }

}

/* animation
================================================*/

.floating-box-mynavi,
.floating-box-requirements {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: floatAnime 2s ease-in-out infinite alternate;
}


.floating-box-mynavi::before {
    content: '';
    background: rgba(2, 131, 216, 0.3);
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    bottom: -35%;
    left: 50%;
    transform: translateX(-50%);
    animation: move-y-shadow 2s infinite alternate ease-in-out;
}

.floating-box-requirements::before {
    content: '';
    background: rgba(31, 110, 180, 0.3);
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    bottom: -35%;
    left: 50%;
    transform: translateX(-50%);
    animation: move-y-shadow 2s infinite alternate ease-in-out;
}

@keyframes floatAnime {
    0% {
        transform: translateY(0);
        box-shadow: 0 15px 15px rgba(49, 174, 228, 0.2);
    }

    100% {
        transform: translateY(-20px);
        box-shadow: 0 5px 5px rgba(109, 202, 242, 0.4);
    }
}

@keyframes move-y-shadow {
    from {
        width: 57%;
        height: 25%;
    }

    to {
        width: 50%;
        height: 20%;
    }
}