@charset "UTF-8";

/* =====================
profile
======================= */
.section--sslProfile {
    padding: 80px 4.2%;
    background-color: #262626;
    position: relative;
    z-index: -5;
}

/* star~ */
.section--sslProfile::before {
    content: '';
    background-image: url(../img/star-left-up.svg);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -105px;
    left: -18%;
    z-index: -5;
}

.section--sslProfile::after {
    content: '';
    background-image: url(../img/star-right-up.svg);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -221px;
    right: -16%;
    z-index: -5;
}

.section--sslProfile .title::before {
    content: '';
    background-image: url(../img/star-center-up.svg);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -14px;
    left: -3%;
    z-index: -5;
}

/* 星全部のやつ */
/* .profile__txt::after {
    content: '';
    background-image: url(../img/star.svg);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -14px;
    left: -3%;
    z-index: -5;
} */

.profile__txt::before {
    content: '';
    background-image: url(../img/star-left-down.svg);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 28px;
    right: -30%;
    z-index: -5;
}

.profile__txt::after {
    content: '';
    background-image: url(../img/star-right-down.svg);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 70px;
    left: 92%;
    z-index: -5;
}
/* ~star */

.section--sslProfile .title {
    text-align: center;
    position: relative;
}


.section--sslProfile .title::after {
    content: 'PROFILE';
    font-family: 'Wittgenstein';
    color: #51207b;
    opacity: 30%;
    font-size: 5.6rem;
    font-weight: 900;
    line-height: 1;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -10;
}

.sslImg__sp {
    max-width: none;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    margin-top: 48px;
}

.sslImg__pc {
    display: none;
}

.ssl--sp {
    text-align: center;
    margin-top: 8px;
    position: relative;
}

.ssl--pc {
    display: none;
}

/* .ssl::after {
    content: '';
    background-image: url(../img/ssl-profile-light1.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -34px;
    left: -42px;
    z-index: -10;
} */

.sslTxt__j,
.sslTxt__e {
    color: #F5F5F5;
    font-size: 1.6rem;
    letter-spacing: 0.08em;
    line-height: 1.8;
}

.sslTxt__e {
    margin-top: 24px;
    position: relative;
}

.sslTxt__e::after {
    content: '';
    background-image: url(../img/ssl-profile-light6.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 120%;
    height: 120%;
    position: absolute;
    top: 64px;
    right: -60%;
    z-index: -10;
}

.kanji {
    position: relative;
}

.kanji::after {
    content: '';
    display: block;
    width: 4px;
    height: 3px;
    background-color: #262626;
    position: absolute;
    top: 4px;
    left: 6px;
    z-index: 1;
}

.profile__item {
    margin-top: 56px;
    position: relative;
}


.profile__item::before {
    content: '';
    background-image: url(../img/ssl-img-back.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100%;
    position: absolute;
    top: 80px;
    left: -4.2%;
    z-index: -10;
}

.profile__item:last-of-type::before {
    transform: scale(-1, 1);
}

.instrument {
    font-size: 7.8rem;
    font-weight: 700;
    color: #262626;
    letter-spacing: 0.05em;
    position: absolute;
    /* transform: rotate(90deg); */
    top: 147px;
    right: -126px;
    z-index: -10;
    writing-mode: vertical-rl;
}

.profile__item:last-of-type .instrument {
    top: 155px;
    right: unset;
    left: -134px;
    letter-spacing: 0.02em;
}

.ssl__name {
    display: flex;
    gap: 40px;
    align-items: flex-end;
    justify-content: space-between;
}
.roman {
    margin-top: 8px;
    color: #F5F5F5;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
}

.japan {
    margin-top: 4px;
    color: #f5f5f5;
    font-family: 'Wittgenstein';
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.15em;
    width: 144px;
}

.sns {
    display: flex;
    gap: 12px;
    align-items: center;
}

.sns img {
    width: auto;
    height: 20px;
}

.sns--kf li:last-of-type img {
    margin-left: 4px;
}

.sns--sh {
    margin-bottom: 4px;
}

.sns__blog {
    font-size: 1.6rem;
}

.item__txt {
    margin-top: 24px;
    color: #F5F5F5;
    font-size: 1.6rem;
    letter-spacing: 0.07em;
    line-height: 1.8;
    position: relative;
}

/* light */
.profile__item:first-of-type .item__txt::after {
    content: '';
    background-image: url(../img/ssl-profile-light6.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 125px;
    left: -48%;
    z-index: -10;
}

.profile__item:last-of-type .item__txt::before {
    content: '';
    background-image: url(../img/ssl-profile-light5.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 533px;
    right: -43%;
    z-index: -10;
}

.profile__item:last-of-type .item__txt::after {
    content: '';
    background-image: url(../img/ssl-profile-light5.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 600px;
    right: -12%;
    z-index: -10;
}
/* light */

/* profile ~374px */
@media screen and (max-width: 374px) {
    .ssl__name {
        display: block;
        margin-top: 8px;
    }

    .sns--sh {
        margin-bottom: 0;
    }

    /* star */
    .section--sslProfile::before {
        left: -23%;
    }
    
    .section--sslProfile::after {
        right: -7%;
    }
    /* star */


    /* light */
    .profile__item:first-of-type .item__txt::after {
        top : 190px;
    }

    .profile__item:last-of-type .item__txt::before {
        top: 700px;
    }

    .profile__item:last-of-type .item__txt::after {
        top: 730px;
    }
    /* light */
}



/* profile tablet 425px */
@media screen and (min-width: 425px) {
    /* star */
    .section--sslProfile::before {
        left: -12%;
    }

    .section--sslProfile::after {
        right: -20%;
    }
    /* star */

    .sslTxt__e::after {
        right: -78%;
    }

    /* light */
    .profile__item:first-of-type .item__txt::after {
        top: 105px;
        left: -40%;
    }

    .profile__item:last-of-type .item__txt::before {
        top: 476px;
    }

    .profile__item:last-of-type .item__txt::after {
        top: 530px;
    }
    /* light */
}

/* profile tablet 500px */
@media screen and (min-width: 500px) {
    /* star */
    .section--sslProfile::before {
        left: -8%;
    }

    .section--sslProfile::after {
        right: -34%;
    }
    /* star */

    /* light */
    .sslTxt__e::after {
        width: 150%;
        height: 150%;
        top: 6px;
        right: -103%;
    }

    .profile__item:first-of-type .item__txt::after {
        left: -28%;
    }

    .profile__item:last-of-type .item__txt::before {
        top: 395px;
    }

    .profile__item:last-of-type .item__txt::after {
        top: 530px;
    }
    /* light */
}

/* profile tablet 600px */
@media screen and (min-width: 600px) {
    .section--sslProfile {
        padding: 104px 9.7% 120px;
    }
    
    .sslImg__sp {
        display: none;
    }

    .sslImg__pc {
        display: block;
        width: auto;
        margin: 64px auto 0;
    }

    .profile__list {
        margin: 0 auto;
    }

    .sslTxt__j {
        margin-top: 8px;
    }

    .sslTxt__e {
        margin-top: 32px;
    }

    .profile__item::before {
        width: 102vw;
        height: 104%;
        left: -12%;
        background-size: contain;
    }

    .profile__item:last-of-type {
        margin-top: 120px;
    }

    .ssl__nameTxt {
        margin-top: 16px;
    }

    .profile__item:first-of-type .instrument {
        position: static;
        margin-right: -115%;
        margin-top: 14%;
    }

    .profile__item:last-of-type .instrument {
        position: static;
        margin-left: -111%;
        margin-top: 12%;
    }

    /* star */
    .section--sslProfile::before {
        left: -4%;
    }

    .section--sslProfile::after {
        top: -200px;
        right: -42%;
    }

    .profile__txt::after {
        top: 96px;
        left: 92%;
    }
    /* star */

    .sslTxt__e::after {
        width: 200%;
        height: 200%;
        top: 6px;
        right: -175%;
    }

    .profile__item:first-of-type .item__txt::after {
        width: 150%;
        height: 150%;
        top: 66px;
        left: -48%;
    }

    .profile__item:last-of-type .item__txt::before {
        top: 330px;
        right: -46%;
    }

    .profile__item:last-of-type .item__txt::after {
        top: 298px;
        right: -67%;
    }
    /* light */

}

/* profile pc 768px */
@media screen and (min-width: 768px) {
    .section--sslProfile {
        padding: 120px 9.7% 160px;
    }

    .section--sslProfile .title{
        text-align: left;
    }

    .section--sslProfile .title::after {
        font-size: 7.2rem;
        top: -22px;
        transform: unset;
        left: -13%;
    }

    
    .sslImg__pc {
        display: block;
        margin: 112px auto 0;
        width: 1160px;
    }
    
    .profile__txt {
        max-width: 1160px;
        margin: 0 auto;
    }
    
    .sslTxt__j {
        letter-spacing: 0.08em;
    }
    
    .sslTxt__e {
        margin-top: 40px;
        letter-spacing: 0.08em;
    }
    
    .ssl--sp {
        display: none;
    }
    
    .ssl--pc {
        display: block;
        width: 48%;
        margin: 0 auto;
    }
    
    .ssl__line {
        top: 55px;
        left: 50%;
        width: 480px;
    }
    
    .profile__list {
        max-width: unset;
    }
    
    .profile__item {
        display: flex;
        max-width: 1160px;
        margin: 120px auto 0;
        justify-content: space-between;
    }
    
    .profile__item:first-of-type {
        flex-direction: row-reverse;
    }
    
    .profile__item::before {
        background-image: url(../img/ssl-backpiano-tab.svg);
        top: 86px;
        left: unset;
        right: -12.5%;
        z-index: -10;
        width: 630px;
    }
    
    .profile__item:last-of-type::before {
        background-image: url(../img/ssl-backdrums-tab.svg);
        top: 85px;
        right: unset;
        left: -12.5%;
        z-index: -10;
        width: 630px;
        transform: unset;
    }
    
    .profile__item:first-of-type .profileItem__img {
        width: 336px;
        height: fit-content;
        margin-right: -8%;
    }
    
    .profile__item:last-of-type .profileItem__img {
        width: 412px;
        height: fit-content;
        margin-left: -15%;
    }
    
    .ssl__nameTxt {
        width: 56%;
        margin-top: 32px;
    }
    
    .ssl__name--kf {
        flex-direction: row-reverse;
        justify-content: space-between;
    }
    
    .roman {
        margin-top: 0;
        letter-spacing: 0.1em;
        margin-right: 2px;
    }
    
    .japan {
        width: auto;
        font-size: 2.8rem;
        letter-spacing: 0.1em;
        margin-top: 8px;
    }
    
    .item__txt {
        margin-top: 24px;
        text-align: start;
    }
    
    .sslTxt__e::after {
        top: -240px;
        right: -184%;
    }
    
    /* star~ */
    .section--sslProfile::before {
        top: -75px;
        left: 16%;
    }

    .section--sslProfile::after {
        top: -170px;
        right: -46%;
    }

    .section--sslProfile .title::before {
        top: 75px;
        left: -7%;
    }
    
    .profile__txt::before {
        top: 88px;
        right: -54%;
    }

    .profile__txt::after {
        top: 154px;
    }
/* ~star */

/* light~ */
    .profile__item:first-of-type .item__txt::after {
        background-image: url(../img/ssl-profile-light5.svg);
        top: -372px;
        left: -69%; 
    }

    .profile__item:last-of-type .item__txt::before {
        width: 150%;
        height: 150%;
        top: 79%;
        right: -66%; 
    }

    .profile__item:last-of-type .item__txt::after {
        width: 150%;
        height: 150%;
        top: 88%;
        right: -11%;
    }
/* ~light */

    .profile__item:last-of-type {
        margin-top: 80px;
    }

    .profile__item:first-of-type div {
        text-align: end;
    }

    .instrument {
        font-size: 8.8rem;
        letter-spacing: 0.03em;
        top: 154px;
        right: -222px;
    }

    .profile__item:last-of-type .instrument {
        top: 164px;
        left: -223px;
        letter-spacing: 0.02em;
    }

}

/* profile pc 900px */
@media screen and (min-width: 900px) {
    .profile__item:first-of-type .profileItem__img {
        margin-right: -4%;
    }

    .profile__item:last-of-type .profileItem__img {
        margin-left: -8%;
    }
}



/* profile pc 1024px */
@media screen and (min-width: 1024px) {
    .section--sslProfile .title::after {
        font-size: 9.6rem;
        top: -30px;
        left: -13%;
    }

    .ssl__nameTxt {
        width: 600px;
        margin-top: 24px;
    }

    .profile__item:last-of-type::before {
        right: 279px;
    }

    .profile__item::before {
        background-image: url(../img/ssl-img-back-pc2.svg);
        top: 81px;
        z-index: -10;
        width: 758px;
    }

    .profile__item:last-of-type::before {
        background-image: url(../img/ssl-backdrums-pc.svg);
        top: 81px;
        left: -12.5%;
        z-index: -10;
        width: 758px;
    }

    /* star */
    .section--sslProfile::after {
        right: -57%;
    }
    /* star */

    /* light */
    .sslTxt__e::after {
        top: -240px;
        right: -190%;
    }

    .profile__item:first-of-type .item__txt::after {
        width: 200%;
        height: 200%;
        top: -372px;
        left: -58%;
    }

    .profile__item:last-of-type .item__txt::before {
        top: 55%;
        right: -66%; 
    }

    .profile__item:last-of-type .item__txt::after {
        top: 64%;
        right: -26%;
    }
/* ~light */
}

/* profile pc 1440px */
@media screen and (min-width: 1440px) {
    .profile__item {
        justify-content: center;
        gap: 80px;
    }

    .profile__item:first-of-type div {
        margin-top: 30px;
    }

    .profile__item:first-of-type .profileItem__img {
        width: 400px;
        margin-right: unset;
    }

    .profile__item:last-of-type .profileItem__img {
        width: 480px;
        margin-left: unset;
    }

    .profile__item:last-of-type::before {
        top: 146px;
    }

    .profile__item::before {
        top: 156px;
        right: -12.5%;
    }

    .profile__item:first-of-type div {
        margin-top: 24px;
    }

    .japan {
        font-size: 4rem;
    }

    .item__txt {
        line-height: 2.5;
        letter-spacing: 0.1em;
    }

    .ssl__nameTxt {
        width: unset;
        margin-top: 0;
    }

    .profile__item:last-of-type .ssl__nameTxt {
        margin-top: 50px;
    }

    /* star */
    .section--sslProfile::after {
        top: -160px;
        right: -64%;
    }

    .section--sslProfile .title::before {
        left: -3%;
    }
    /* star */

    .sslTxt__e::after {
        right: -200%;
    }
    
    .profile__item:first-of-type .item__txt::after {
        top: -427px;
        left: -51%;
    }


}

/* profile pc 1800px */
@media screen and (min-width: 1800px) {
    .section--sslProfile {
        padding: 200px 9.7% 240px;
    }
    
    .section--sslProfile .title {
        text-align: center;
    }

    .section--sslProfile .title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    /* star */
    .section--sslProfile::before {
        top: -55px;
        left: 24%;
    }

    .section--sslProfile::after {
        top: -116px;
        right: -64%;
    }

    .section--sslProfile .title::before {
        top: 34px;
        left: 10%;
    }

    .profile__txt::before {
        top: 114px;
        right: -54%;
    }

    .profile__txt::after {
        top: 256px;
        left: 87%;
    }
    /* star */

    /* light */
    .profile__item:last-of-type .item__txt::before {
        top: 55%;
        right: -90%; 
    }

    .profile__item:last-of-type .item__txt::after {
        top: 64%;
        right: -47%;
    }
/* ~light */
}