@charset "UTF-8";

.main {
    overflow: hidden;
}

.section--cpProfile {
    padding: 72px 4.2% 72px;
}

.section--cpProfile .title {
    position: relative;
}

.section--cpProfile .title::after {
    content: 'PROFILE';
    font-family: 'Wittgenstein';
    position: absolute;
    top: -75%;
    left: 50%;
    transform: translateX(-50%);
    color: #E0EBE2;
    opacity: 40%;
    font-size: 6.4rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.03em;
    z-index: -10;
}

.profile__txt {
    margin-top: 88px;
    position: relative;
}

.profile__content {
    position: relative;
}

.profile__content::after {
    content: '';
    position: absolute;
    width: 104%;
    height: 114%;
    background-color: #E0EBE2;
    border-radius: 0 48px 0 0;
    top: -17px;
    right: -4.2%;
    z-index: -10;
}

.profileImg__pc {
    display: none;
}

.profileImg__sp {
    margin: 0 calc(50% - 50vw);
    border-radius: 0 48px 0 0;
}

.cpName__e {
    font-family: 'Wittgenstein';
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    position: absolute;
    bottom: 102%;
    left: 0;
}

.cpName__j {
    font-family: 'Wittgenstein';
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1;
    position: absolute;
    bottom: -11%;
    right: -4.2%;
}

.cp__txt {
    margin-top: 80px;
    font-size: 1.6rem;
    text-align: center;
    line-height: 2;
    letter-spacing: 0.05em;
}

.information__list {
    margin: 56px auto;
    width: fit-content;
    position: relative;
}

/* .information__list::after {
    content: '';
    background-image: url(../img/cp-piano-pc2.png);
    width: 60%;
    height: 60%;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 482px;
    left: -18%;
    z-index: -5;
    transform: scale(-1,1);
} */



.information__item:first-of-type {
    position: relative;
}

.information__item:first-of-type::after {
    content: '';
    width: 540px;
    height: 4px;
    background-color: #E0EBE2;
    transform: rotate(83deg);
    position: absolute;
    top: 318px;
    left: -194px;
    z-index: -1;
}

.day {
    width: 80px;
    height: 80px;
    background-color: #E0EBE2;
    border-radius: 50%;
    text-align: center;
    padding-top: 18px;
    font-size: 1.4rem;
}

.information__item {
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.information__item:first-of-type {
    margin-top: 0;
}

.information__item:nth-of-type(2) {
    margin-left: 4%;
}

.information__item:nth-of-type(3) {
    margin-left: 8%;
}

.information__item:nth-of-type(4) {
    margin-left: 12%;
}

.information__item:nth-of-type(5) {
    margin-left: 16%;
}

.information__item:nth-of-type(6) {
    margin-left: 20%;
}




.day {
    display: block;
}

.content {
    width: 71%;
    letter-spacing: 0.05em;
}



.member__group {
    margin: 80px calc(50% - 50vw) 0;
    width: 100vw;
}

.member__title {
    font-family: 'Wittgenstein';
    font-size: 2.4rem;
    color: #4E9C6F;
    text-align: center;
    width: 112px;
    margin: 0 auto;
    position: relative;
}

.member__title::before {
    content: '';
    width: 80px;
    height: 1px;
    background-color: #4E9C6F;
    position: absolute;
    top: 16px;
    left: -72%;
}

.member__title::after {
    content: '';
    width: 80px;
    height: 1px;
    background-color: #4E9C6F;
    position: absolute;
    top: 16px;
    right: -72%;
}

.player__list {
    margin-top: 88px;
}

.player__item {
    margin-top: 48px;
    position: relative;
}

/* .player__item:first-of-type {
    height: 105vh;
}

.player__item:nth-of-type(2) {
    height: 75vh;
} */

.player__item:first-of-type img {
    margin-top: 0;
}


.player__item::after {
    content: '';
    width: 91.5%;
    height: 99%;
    background-color: #E0EBE2;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -10;
}

.player__item:nth-of-type(2)::after,
.player__item:nth-of-type(4)::after {
    right: unset;
    left: 0;
}

.player__item:first-of-type::after {
    top: -4%;
    height: 103.5%;
}

.player__item img {
    margin-top: 40px;
    width: 91.5%;
}

.player__item:nth-of-type(2) img,
.player__item:nth-of-type(4) img {
    margin-left: 8.5%;
}


.part {
    font-size: 1.6rem;
    position: absolute;
    top: 0.2%;
    left: 92%;
    writing-mode: vertical-rl;
    letter-spacing: 0.08em;
}

.player__item:nth-of-type(2) .part {
    top: 5%;
    left: unset;
    right: 92%;
}

.player__item:nth-of-type(4) .part {
    top: 5%;
    left: unset;
    right: 92%;
}

.player__item:nth-of-type(3) .part {
    top: 4%;
}

.player__item:last-of-type .part {
    top: 3.2%;
}


/* .player__item:nth-of-type(2) .part,
.player__item:nth-of-type(4) .part {
    right: unset;
    left: 1%;
} */

.name__group {
    position: absolute;
    top: 1%;
    left: 12.8%;
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.player__item:first-of-type .name__group {
    top: -3.5%;
}

.player__item:nth-of-type(2) .name__group,
.player__item:nth-of-type(4) .name__group {
    left: unset;
    right: 12.8%;
    top: 0.8%;
}

.player__item:nth-of-type(3) .name__group,
.player__item:nth-of-type(5) .name__group {
    top: 0.5%;
}


.name {
    font-size: 2rem;
    font-weight: 700;
    position: relative;
    letter-spacing: 0.05em;
    background-color: transparent;
}

.name::after {
    content: '';
    background-color: #3f3f3f;
    width: 2px;
    height: 20px;
    position: absolute;
    bottom: 4px;
    right: -10px;
}

.katakana {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.player__txt {
    font-size: 1.6rem;
    width: 91.5%;
    margin-left: 8.5%;
    background-color: rgb(245, 245, 245, 0.85);
    position: relative;
    padding: 16px;
    margin-top: -32px;
    z-index: 10;
    letter-spacing: 0.15em;
    line-height: 2;
}

.player__item:nth-of-type(2) .player__txt,
.player__item:nth-of-type(4) .player__txt {
    margin-left: unset;
    margin-right: 8.5%;
}

/* profile tablet ~320px */
@media screen and (max-width: 320px) {
    .player__item:first-of-type::after {
        top: -3%;
        height: 103%;
    }

    .player__item:first-of-type .name__group {
        top: -2.7%;
    }
    
    .cp__txt,
    .content {
        font-size: 1.4rem;
    }

    .information__item:first-of-type::after {
        transform: rotate(84deg);
        left: -201px;
    }
}


/* profile tablet 425px~ */
 @media screen and (min-width: 425px) {
    .profile__content::after {
        top: -22px;
    }

    .player__item:last-of-type .part {
        top: 3.5%;
    }

    .cpName__e {
        bottom: 103%;
    }

    .cpName__j {
        bottom: -10%;
    }

    .information__sp2 {
        display: none;
    }

    .information__list {
        margin: 80px auto 96px;
    }

    .information__item:first-of-type::after {
        transform: rotate(82deg);
        left: -189px;
    }
}


/* profile tablet 600px~ */
@media screen and (min-width: 600px) {
    .profile__content::after {
        top: -28px;
    }
    
    .player__item:last-of-type .part {
        top: 3.7%;
    }

    .cp__txt {
        margin: 80px auto 0;
        letter-spacing: 0.3em;
    } 

    .information__list {
        margin: 80px auto;
    }

    .information__sp {
        display: none;
    }

    .information__item:first-of-type::after {
        transform: rotate(80deg);
        left: -178px;
    }
}

/* profile tablet 768px~ */
@media screen and (min-width: 768px) {
    .profileImg__pc {
        display: block;
        margin-left: -12.8%;
        max-width: 116%;
        border-radius: 0 48px 0 0;
    }

    .cpName__e {
        bottom: 105%;
    }

    .cpName__j {
        bottom: -16%;
        right: -11.8%;
        font-size: 2rem;
    }

    .profile__content::after {
        width: 117%;
        height: 122%;
        top: -36px;
        right: -11.8%;
    }

    .cp__txt {
        max-width: 600px;
        margin: 100px auto 0;
        position: relative;
        line-height: 2.1;
        letter-spacing: 0.1em;
    }



    /* .profileImg__pc {
        display: block;
        border-radius: 0 48px 0 0;
        width: 101%;
        height: fit-content;
        max-width: 110%;
        margin-left: -14%;
    } */

    .section--cpProfile {
        padding: 120px 9.7%;
    }

    .section--cpProfile .title::after {
        font-size: 8.8rem;
        top: -32px;
    }

    .profileImg__sp {
        display: none;
    }

    /* .profile__content::after {
        width: 100%;
        height: 93%;
        top: -30px;
        right: 6%;
    }


    .profile__click {
        margin-top: 120px;
    }
    
    .cp__name {
        margin-top: 80px;
    }
    
    .cpName__j {
        line-height: 1.3;
        font-size: 2rem;
        bottom: 11%;
        right: 6%;
    }
    
    .cpName__e {
        font-size: 3.2rem;
        line-height: 1.3;
        bottom: 102%;
    } */

    /* .cp__line {
        width: 300px;
        top: 78px;
    } */
    
    .profile__txt {
        margin-top: 120px;
    }

    .information__list::after {
        content: '';
        background-image: url(../img/cp-piano-pc2.png);
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        right: -52%;
        transform: translateX(15%);
        top: -5px;
        width: 100%;
        height: 100%;
        opacity: 30%;
        z-index: -5;
    }

    .member__group {
        margin: 120px auto 0;
        max-width: 1160px;
        width: 100%;
    }

    .member__title {
        margin: 0;
        font-size: 3.2rem;
        width: 120px;
        margin-left: 9.7%;
    }

    .member__title::before {
        top: 24px;
        left: -88%;
    }

    .member__title::after {
        top: 24px;
        right: -88%;
    }


    /* .cp__txt {
        writing-mode: vertical-rl;
        text-align: left;
        margin-top: unset;
        letter-spacing: 0.3em;
    } */

    .information__list {
        margin-top: 64px;
        margin-left: unset;
    }
    
    .member__group {
        margin: 120px calc(50% - 50vw) 0;
        width: 100vw;
    }

    .player__list {
        margin-top: 120px;
    }

    .player__item:first-of-type::after{
        top: -6%;
        height: 106%;
    }

    .player__item {
        margin-top: 120px;
    }

    .player__item::after {
        width: 90.3%;
        top: -24px;
        height: 102%;
    }

    .player__item img {
        width: 90.3%;
    }

    .player__item:nth-of-type(2) img,
    .player__item:nth-of-type(4) img {
        margin-left: 9.7%;
    }

    .player__item:first-of-type .name__group {
        left: 11.6%;
        top: -5%;
    }

    .player__item:nth-of-type(2) .name__group,
    .player__item:nth-of-type(4) .name__group {
        left: unset;
        right: 11.6%;
        top: -1%;
    }

    .player__item:nth-of-type(3) .name__group,
    .player__item:nth-of-type(5) .name__group {
        top: -1%;
        left: 11.6%;
    }
    
    
    .player__txt {
        width: 90.3%;
        margin-left: 9.7%;
        margin-top: -64px;
    }
    
    .player__item:nth-of-type(2) .player__txt,
    .player__item:nth-of-type(4) .player__txt {
        margin-left: unset;
        margin-right: 9.7%;
    }

    /* .player__item:nth-of-type(2)::after,
    .player__item:nth-of-type(3)::after,
    .player__item:nth-of-type(4)::after,
    .player__item:nth-of-type(5)::after {
        top: -24px;
        height: 102%;
    } */


    .name__group {
        gap: 20px;
    }

    .name {
        font-size: 2.4rem;
    }

    .name::after {

        height: 24px;
    }

    .part {
        right: 4%;
        font-size: 2rem;
    }

    .player__item:nth-of-type(2) .part,
    .player__item:nth-of-type(4) .part {
        left: 4%;
    }

    .player__item:last-of-type .part {
        top: 4%;
    }
}



/* profile pc 900px */
@media screen and (min-width: 900px) {
    .cpName__j {
        bottom: -17%;
    }

    .cp__txt {
        margin: 120px auto 0;
    }

    .information__list::after {
        right: -72%;
    }
}    

/* profile pc 1024px */
@media screen and (min-width: 1024px) {
    .profileImg__pc {
        display: block;
        /* margin: 0 calc(50% - 45.5vw); */
        border-radius: 0 48px 0 0;
        width: 100%;
        max-width: 100%;
        margin-left: -13.8%;
    }

    .section--cpProfile {
        padding: 160px 9.7% 120px;
        
    }

    .section--cpProfile .title::after {
        font-size: 9.6rem;
        top: -30px;
    }

    .profile__content::after {
        width: 100%;
        height: 104%;
        top: -48px;
        right: 7%;
    }

    .profileImg__sp {
        display: none;
    }

    .profile__click {
        margin-top: 120px;
    }
    
    .cp__name {
        margin-top: 80px;
    }
    
    .cpName__j {
        line-height: 1.3;
        font-size: 2.4rem;
        bottom: 2.5%;
        right: 8%;
    }
    
    .cpName__e {
        font-size: 4.8rem;
        line-height: 1.3;
        bottom: 103%;
    }

    .cp__line {
        width: 300px;
        top: 78px;
    }
    
    .profile__txt {
        display: flex;
        margin-top: 160px;
    }

    .profile__txt::after {
        background-image: url(../img/cp-piano-pc.png);
        left: unset;
        right: -88%;
        top: 619px;
        width: 120%;
        height: 120%;
    }
    
    .member__group {
        margin: 120px auto 0;
        max-width: 1160px;
        width: 100%;
    }

    .member__title {
        margin: 0;
        font-size: 3.2rem;
        width: 120px;
    }

    .member__title::before {
        top: 24px;
        left: -88%;
    }

    .member__title::after {
        top: 24px;
        right: -88%;
    }


    .cp__txt {
        writing-mode: vertical-rl;
        text-align: left;
        margin-top: 16px;
        letter-spacing: 0.3em;
    }




    /* .cp__txt::after {
        width: 200%;
        top: -200px;
    } */

    .information__list {
        margin: 120px 0 200px;
        width: unset;
        max-width: 648px;
    }

    .information__item {
        gap: 32px;
    }

    .information__item:first-of-type::after {
        transform: rotate(76deg);
        left: -161px;

    }

    .information__sp {
        display: none;
    }

    .player__list {
        margin-top: 120px;
        max-width: none;
    }

    .player__item {
        display: flex;
        gap: 40px;
        position: relative;
        justify-content: space-between;
        margin-top: 160px;
    }

    
    .player__item::before {
        max-width: 960px;
        position: absolute;
        top: -40px;
    }
    
    .player__item::after {
        top: -8%;
        height: 336px;
        width: 72%;
        right: -12%;
    }

    .player__item:first-of-type::after {
        top: -8%;
        height: 336px;
        width: 72%;
        right: -12%;
    }

    .player__item:nth-of-type(2)::after,
    .player__item:nth-of-type(4)::after {
        top: -14%;
        right: unset;
        left: -12%;
    }



    .player__item img {
        margin-top: 0;
        width: 50%;
        height: 50%;
        object-fit: cover;
        object-position: center;
    }

    .player__item:nth-of-type(2) img {
        object-position: top;
        margin-left: 0;
    }

    .player__item:nth-of-type(4) img {
        margin-left: 0;
    }

    .player__item:first-of-type img {
        min-width: 413px;
    }

    .part {
        position: static;
        margin-top: 0;
        writing-mode: unset;
    }

    .player__item:nth-of-type(2) .part,
    .player__item:nth-of-type(4) .part {
        text-align: end;
    }

    .player__content {
        width: 456px;
    }

    .player__item:nth-of-type(2),
    .player__item:nth-of-type(4) {
        flex-direction: row-reverse;
    }

    .name__group {
        position: static;
    }

    .player__item:nth-of-type(2) .name__group,
    .player__item:nth-of-type(4) .name__group {
        justify-content: flex-end;
    }

    .player__txt {
        width: 100%;
        padding: 0;
        background-color: transparent;
        margin-top: 8px;
        margin-left: 0;
        margin-right: 0;
    }

    .player__item:nth-of-type(2) .player__txt,
    .player__item:nth-of-type(4) .player__txt {
        margin-right: 0;
    }
}

/* profile pc 1149px
@media screen and (min-width: 1149px) {
    .player__item:nth-of-type(2)::after,
    .player__item:nth-of-type(4)::after {
        height: 62%;
    }
} */

/* profile pc 1440px */
@media screen and (min-width: 1440px) {
    .section--cpProfile {
        padding: 160px 0 200px;
        max-width: 1160px;
        margin: 0 auto;
    }



    .cp__txt {
        font-size: 2.4rem;
    }

    .cpName__j {
        bottom: 1%;
        right: 7%;
    }

    .information__list::after {
        right: -121%;
        top: -12px;
        width: 120%;
        height: 120%;
    }
}

/* profile pc 1800px */
@media screen and (min-width: 1800px) {
    /* .section--cpProfile {
        padding: 185px 17% 120px;
    } */

    .profile__txt {
        max-width: 1160px;
        margin: 160px auto 0;
    }
}