@charset "UTF-8";
#profile-detail{
    width: 100%;
    margin: 0;
    padding: 200px 0 150px;
    background: var(--base);
}
#profile-detail h3 {
    border-bottom: none;
    padding-bottom: 0;
    font-family: var(--en);
    font-size: clamp(24px, calc(24px + 8 * ((100vw - 320px) / 1120)), 32px);
    margin-bottom: clamp(10px, calc(10px + 14 * ((100vw - 320px) / 1120)), 24px);
    font-weight: initial;
}
#profile-detail h4 {
    font-size: var(--font-size-xl);
    font-family: var(--en);
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--font);
    color: var(--accent);
}
#profile-detail #group .lead p {
    font-size: var(--font-size-md);
    line-height: 1.8;
}
#profile-detail #group .lead{
    margin-top: 24px;
}
#profile-detail #member {
    margin-top: clamp(56px, calc(56px + 24 * ((100vw - 320px) / 1120)), 80px);
}
#profile-detail #member ul {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(56px, calc(56px + 24 * ((100vw - 320px) / 1120)), 80px) 24px;
}
#profile-detail #member ul li {
    width: calc((100% - 48px)/3);
}
#profile-detail #member ul li .member-info {
    margin-top: clamp(10px, calc(10px + 6 * ((100vw - 320px) / 1120)), 16px);
}
#profile-detail #member ul li .member-info .name {
    font-size: var(--font-size-xl);
    font-family: var(--en);
    margin-bottom: 10px;
}
#profile-detail #member ul li .member-info .birthday,
#profile-detail #member ul li .member-info .place{
    font-size: var(--font-size-xs);
}
#profile-detail .snsLink {
    display: flex;
    justify-content: end;
    gap: clamp(16px, calc(16px + 2 * ((100vw - 320px) / 1120)), 18px);
    margin: clamp(16px, calc(16px + 8 * ((100vw - 320px) / 1120)), 24px) 0 0;
}
#profile-detail #member .snsLink {
    gap: 16px;
    margin: -24px 0 0 0;
}
#profile-detail .snsLink li {
    width: clamp(24px, calc(24px + 8 * ((100vw - 320px) / 1120)), 32px) !important;
}
#profile-detail #member .snsLink li {
    width: clamp(20px, calc(20px + 4 * ((100vw - 320px) / 1120)), 24px) !important;
}
#profile-detail .snsLink li a:hover{
    opacity: 0.5;
}
@media screen and (max-width: 1000px){
    #profile-detail{
        padding: 100px 0 80px;
    }
    #profile-detail #member ul li{
        width: calc((100% - 32px)/2);
    }
    #profile-detail .snsLink{
        margin-top: 13px;
    }
    #profile-detail.deepsquad #group .lead{
        margin-top: clamp(40px, calc(40px + 16 * ((100vw - 320px) / 448)), 56px);
    }
}
@media screen and (max-width: 500px){
    #profile-detail #member ul li{
        width: 100%;
    }
}