div#join {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: calc(7.5rem + var(--header-height)) 19.625rem 7.5rem;
}

.join-wrap {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    max-width: 670px;
    margin: 0 auto;
}
.join-title {
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .8125rem;
    padding : 1.5rem 0;
}

.join-title > span {
    font-size: var(--font-size-24);
    font-weight: 500;
    line-height: 100%; /* 1.5rem */
    letter-spacing: -0.03125rem;
}

.join-title > h2 {
    font-size: var(--font-size-36);
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 2.25rem */
    letter-spacing: -0.03125rem;
}
.join-logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
}

.join-logo > p {
    font-size: var(--font-size-24);
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 1.5rem */
    letter-spacing: -0.03125rem;
}

.join-logo > div > svg.logo-svg {
    width: 4.03744rem;
    height: 2.41044rem;
}

.join-logo > div > svg.text-svg {
    width: 10.54488rem;
    height: 1.19713rem;
}

.join-logo > div {
    align-items: center;
    display: flex;
    gap: 1.125rem;
}

.user-corporation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.875rem;
    margin-bottom: 12.625rem;
}

.user-corporation > a {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
    border-radius: 5px;
    border: 2px solid #DEDEDE;
    padding: 3.125rem 7rem;
    height: 15rem;
    font-size: var(--font-size-24);
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -0.03125rem;
    color: #000;
    width: 100%;
}

.user-corporation > a:hover {
    border : 2px solid var(--primary-color);
}
.user-corporation > a:hover > svg > path {
    fill: var(--primary-color);
}

@media screen and (max-width: 767.9px) {
    div#join {
        padding: 0;
    }
    .join-wrap {
        padding: 5rem 1rem;
        gap:2.5rem;
    }
    .user-corporation{
        gap: 1rem;
    }
    .user-corporation svg{
        width: 2.5rem;
        height: 2.5rem;
    }
    .user-corporation > a{
        padding: 1.5rem 2.5rem;
        height: 100%;
        font-size: var(--font-size-16);
    }
    .join-title{
        gap:.25rem;
        padding : 1.8125rem 0 0 0;
    }
    .join-title > span{
        font-size: var(--font-size-16);
    }
    .join-title > h2{
        font-size: var(--font-size-20);
        line-height: 140%;
    }
    .join-logo > div > svg.logo-svg{
        width: 2.92388rem;
        height: 1.74563rem;
    }
    .join-logo > div > svg.text-svg{
        width: 7.63644rem;
        height: 0.86706rem;
    }
    .join-logo{
        gap: 0.5rem;
    }
    .join-logo > p{
        font-size: var(--font-size-14);
    }
    
}