/* 文字の大きさ */
h1,
h2 {
    margin: 0;
}

#Recruit {
    margin: 5% 0;
}



.Recruit-title h2 {
    font-size: 35px;
    font-weight: bold;
    background: linear-gradient(90deg, #F5CBA2, #F8DEAB);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 2% 5%;
}

.banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 100px;
    padding: 8px 16px;
    font-family: sans-serif;
    width: 1100px;
    height: 65px;
    margin: 30px auto;
    box-shadow: 3px 4px 3px rgba(0, 0, 0, 0.1);
    transition-duration: .4s;
}

.banner:hover {
    transform: scale(1.03);
}

#Beginner .banner {
    background: linear-gradient(90deg, #FFD8B9 20%, #FEE5B7 40%, #E4EBCD 75%, #D7EBD9 100%);
}

#Career .banner {
    background: linear-gradient(90deg, #FFD8B9 30%, #FFE6B4);
}


.badge {
    background-color: #000;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 6px 0px;
    margin-right: 2%;
    border-radius: 100px;
    width: 220px;
    text-align: center;
}

.banner .text {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    width: 100%;
}

.banner img {
    width: 40px;
    justify-content: right;
}

#Text {
    position: relative;
    margin: 9% 0 0 5%;
}

#Text h2 {
    font-size: 30px;
}

.ColorfulTitle {
    background: linear-gradient(90deg, #FCD9BE 0%, #FEE5B7 20%, #E4EBCD 35%, #D7EBD9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 85px;
    font-style: italic;
    text-align: left;
    font-weight: bold;
}

/* 画像サイズ */
#main #image {
    width: 60%;
    z-index: 1;
}

.svg-wrapper {
    position: absolute;
    z-index: 2;
    top: 100%;
    left: 50%;
}

#WORKSTYLE {
    margin-bottom: 10%;
}

.RelatedItems {
    margin: 4% auto;
}

/* アニメーション */

#Recruit {
    position: relative;
    z-index: 1;
}


@keyframes infinity-scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100vw);
    }
}

/* スマホ対応 */
@media screen and (max-width: 768px) {

    #TopView-Text {
        transform: translate(-50%, 55%);
      }

    #Recruit {
        margin: 25% 0;
    }

    .Recruit-title {
        margin-top: 15%;
    }

    .Recruit-title h2 {
        font-size: 25px;
    }

    .badge {
        display: none;
    }

    .banner {
        width: 330px;
        height: 40px;
        margin: 15px auto;
    }

    .banner .text {
        font-size: 14px;
        margin-left: 5%;
    }

    .banner img {
        width: 30px;
    }

    .ColorfulTitle {
        font-size: 45px;
    }

    #Text {
        margin: 20% 0 7% 3%;
    }

    #Text h2 {
        font-size: 27px;
    }

    .svg-wrapper {
        top: 40%;
        left: 45%;
    }

    #main #image {
        width: 85%;
    }

    #TopTriangle {
        position: absolute;
        top: 0%;
        left: -2%;
        width: 22%;
    }

    .RelatedItems {
        margin: 0 auto 5%;
        padding: 5%;
    }


    .back-ground-logo {
        display: none;
    }

    .svg-wrapper-top {
        top: 70%;
        left: 40%;
    }
}