@charset "utf-8";
html {
    font-size: 62.5% ;
}
:root {
    --primary-black: #1A1A1A;
    --primary-grey: #dedede;
    --primary-white: #FDFDFD;
    --primary-padding_sp: 4.2% ;
    --primary-padding_hp: 4.166667% ;
}
body{
    width: 100%;
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: var(--primary-black);
    background-color: var(--primary-black);
}
/* ----------- loading -----------*/
.loading{
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-black);
    z-index: 11000;
}
.loading__item{
    position: relative;
    width: 250px;
    height: 250px;
}
.ripple__origin{
    width: 100%;
    height: 100%;
    position: absolute;
    border: solid 1px var(--primary-white);
    border-radius: 500px;
}
.ripple{
    width: 100%;
    height: 100%;
    position: absolute;
    border: solid 1px var(--primary-white);
    border-radius: 500px;
    animation: wave 1.5s infinite ease-in-out;
}
.ripple:nth-of-type(2) {
    animation: wave 1.5s 0.5s infinite ease-in-out;
}
.ripple:nth-of-type(3) {
    animation: wave 1.5s 1s infinite ease-in-out;
}
@keyframes wave{
    0%{
       opacity: 1;
       transform: scale(1,1);
    }
    100%{
       opacity: 0;
       transform: scale(1.5,1.5);
    }

}
.loading__text{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content:center;
    align-items: center;
    /* background-color: #54e3fc; */
    color: var(--primary-white);
    font-size: 1.6rem;
    position: absolute;
}

.loading {
    transition: opacity 0.5s ease-out;
}

.loading.fade-out {
    opacity: 0;
}
@media screen and (max-width:1000px) {
    .loading{
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-black);
    z-index: 11000;
}
.loading__item{
    position: relative;
    width: 230px;
    height: 230px;
}
.ripple__origin{
    width: 100%;
    height: 100%;
    position: absolute;
    border: solid 1px var(--primary-white);
    border-radius: 500px;
}
.ripple{
    width: 100%;
    height: 100%;
    position: absolute;
    border: solid 1px var(--primary-white);
    border-radius: 500px;
    animation: wave 1.5s infinite ease-in-out;
}
.ripple:nth-of-type(2) {
    animation: wave 1.5s 0.5s infinite ease-in-out;
}
.ripple:nth-of-type(3) {
    animation: wave 1.5s 1s infinite ease-in-out;
}
@keyframes wave{
    0%{
       opacity: 1;
       transform: scale(1,1);
    }
    100%{
       opacity: 0;
       transform: scale(1.5,1.5);
    }

}
.loading__text{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content:center;
    align-items: center;
    /* background-color: #54e3fc; */
    color: var(--primary-white);
    font-size: 1.5rem;
    position: absolute;
}

.loading {
    transition: opacity 0.5s ease-out;
}

.loading.fade-out {
    opacity: 0;
}
}
/* ----------- menubar -----------*/
.menu{
    position: fixed;
    display: flex;
    justify-content: space-between;
    width: 100vw;
    height: 4.4444vh;
    z-index: 10000;
}
.video__title{
    width: 100%;
    height: 4.4444vh;
    background-color:var(--primary-black);
    display: flex;
    align-items: center;
    padding-left: 16px;
    font-size: 1.6rem;
    color: var(--primary-white);
}
.menuBar{
    width: 100vw;
    height:4.4444vh;
    background-color: var(--primary-black);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    bottom: 0;
    padding-right: 16px;
    z-index: 10000;
}
.menuBar__btn{
    gap: 8px;
    display: flex;
    height: 100%;
    align-items: center;
}
.btn__works,
.btn__top,
.btn__contact{
    width: 150px;
    height: 80%;
    font-size: 1.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-black);
    color: var(--primary-white);
    border: solid 1px var(--primary-white);
    border-radius: 500px;
    transition:all 0.4s; 
}
.btn__works:hover,
.btn__top:hover,
.btn__contact:hover{
    background-color: var(--primary-white);
    color: var(--primary-black);
}
@media screen and (max-width:1000px) {
.menu{
    position: fixed;
    display: flex;
    justify-content: space-between;
    width: 100vw;
    z-index: 10000;
}
.video__title{
    width: 100%;
    height: 7.196vh;
    background-color:var(--primary-black);
    display: flex;
    align-items: center;
    padding-left: 16px;
    font-size: 1.6rem;
    color: var(--primary-white);
}
.menuBar{
    width: 100vw;
    height:8.3958vh;
    background-color: var(--primary-black);
    display: flex;
    justify-content:center;
    align-items: center;
    position: fixed;
    padding: 0 8px;
    z-index: 10000;
}
.menuBar__btn{
    gap: 8px;
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}
.btn__works,
.btn__top,
.btn__contact{
    width: 110px;
    height: 80%;
    font-size: 1.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-black);
    color: var(--primary-white);
    border: solid 1px var(--primary-white);
    border-radius: 500px;
    transition:all 0.4s; 
}
.btn__works:hover,
.btn__top:hover,
.btn__contact:hover{
    background-color: var(--primary-white);
    color: var(--primary-black);
}
}
/*--------------- main ---------------*/
/*----------- mv -----------*/
.mv{
    width: 100%;
    height: 200vh;
    background-color: var(--primary-black);
}
.mv__sticky{
    width: 100%;
    height: 100vh;
    position: sticky;
    top:0;
}
.mv__item{
    width: 100%;
    height: 100vh;
    position: relative;
}
.mv__container{
    position: absolute;
    width: 100%;
    height: 100vh;
}
.mv__img{
    width: 100%;
    height: 82vh;
    background-size:cover;
    background-image: url(../img/mv_img.png);
    background-position: 50% 45%;
}
.cover--1,
.cover--2{
    height: 9vh;
    background-color: var(--primary-black);
}
.title-artist{
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: absolute;
    color: var(--primary-white);
    font-size: 24rem;
    font-family: "Poiret One", sans-serif;
    font-weight: 400;
    font-style: normal;
    top: 50%;
    left: 4vh;
    transform: translateY(-50%);
    z-index: 300;
    opacity:1;
    filter: drop-shadow(#2a2a2a 0px 0px 4px);
}
.mv__artist{
    font-family: "Jost", sans-serif;
    font-size: 4rem;
    margin-left: 7px;
    filter: drop-shadow(#2a2a2a 0px 0px 2px);
}
.mv__info{
    position: absolute;
    font-size: 1.6rem;
    z-index: 200;
    right: 4vw;
    bottom: 14vh;
    line-height: 1.8;
    opacity: 0;
    color: var(--primary-white);
    filter: drop-shadow(#2a2a2a 0px 0px 4px);
}
.mv__info--container{
    display: flex;
    justify-content: end;
    padding-right: 4vw;
    position: sticky;
    top: 64%;
}
@media screen and (max-width:1000px) {
    .cover--1,
    .cover--2{
       display: none;
    }
    .mv__img{
        width: 100%;
        height: 100vh;
        background-size:cover;
        background-image: url(../img/mv_img.png);
        background-position: 50% 45%;
    }
    .mv__info{
        position: absolute;
        font-size: 1.4rem;
        z-index: 200;
        right: 0vw;
        bottom: 7.5vh;
        padding: 0 4.2666vw;
        line-height: 1.7;
        opacity: 0;
        color: var(--primary-white);
        filter: drop-shadow(#2a2a2a 0px 0px 4px);
    }
    .brPc{
        display: none;
    }
    .brSp{
        display: block;
    }
    .title-artist{
        font-size: 3.2rem;
    }
    .title-artist{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        position: absolute;
        color: var(--primary-white);
        font-size: 10rem;
        top: 6%;
        left: 50%;
        transform: translateY(0) translateX(-50%);
        z-index: 300;
        opacity:1;
        filter: drop-shadow(#2a2a2a 0px 0px 4px);
    }
    .mv__artist{
        font-size: 3rem;
        margin-left: 0px;
        filter: drop-shadow(#2a2a2a 0px 0px 4px);
    }
}
/*----------- biography -----------*/
.biography{
    width: 100vw;
    height: 315vh;
    /* border:  solid 1px #9dfc54; */
}
.biography__title{
    position: sticky;
    top:4vh;
    color: var(--primary-white);
    font-size: 5.6rem;
    width: 100%;
    display: flex;
    justify-content: end;
    padding: 0 4vw 4vh;
}
.biography__flex{
    width: 100%;
    position: relative;
    height: 315vh;
}
.biography__item--container{
    width: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}
.biography__img--container{
    top: 0;
    left: 0;
    width: 100%;
    height: 315vh;
    position: absolute;
    display: flex;
    justify-content: flex-end;
    /* border:  solid 1px var(--primary-white); */
}
.biography__img--containerFlex{
    width: 60%;
    height: 100vh;
    position: sticky;
    top: 0;
}
.biography__img--containerPosition{
    width: 100%;
    height: 100vh;
    position: relative;
}
.biography__img--item{
    width: 200px;
    filter: drop-shadow(#1b1b1b 0px 0px 5px);
}
.biography__img--item1{
    width: 180px;
    transform: translate(25%, -2%);
    opacity: 0;
}
.biography__img--item2{
    width: 180px;
    transform: translate(-25%, 2%);
    opacity: 0;
}
.biography__img--item3{
    width: 250px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.biography__img--item6{
    transform: translate(19%, 27%);
    opacity: 0;
}
.biography__img--item4{
    width: 190px;
    transform: translate(-48%, 0%);
    opacity: 0;
}
.biography__img--item5{
    width: 190px;
    transform: translate(38%, -18%);
    opacity: 0;
}
.biography__img--item7{
    transform: translate(-20%, 12%);
    opacity: 0;
}
.biography__img--item8{
    width: 230px;
    transform: translate(21%, -18%);
    opacity: 0;
}
.biography__img--item9{
    width: 230px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.biography__img--group1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    /* background-color: #54e3fc; */
}
.biography__img--group2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    /* background-color: #54e3fc; */
}
.biography__img--group3{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    /* background-color: #54e3fc; */
    
}
.biography__img--groupBanner{
    position: absolute;
    width: 285px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.biography__img--item10{
    width: 125px;
    height: 125px;
    transform: translate(0%, 0%);
    opacity: 0;
}
.biography__img--item11{
    width: 110px;
    height: 110px;
    transform: translate(-5%, 26%);
    opacity: 0;
}
.biography__img--item12{
    width: 90px;
    height: 90px;
    transform: translate(27%, 6%);
    opacity: 0;
}
.biography__img--item13{
    width: 125px;
    height: 125px;
    transform: translate(8%, 21%);
    opacity: 0;
}
.biography__img--item14{
    width: 85px;
    height: 85px;
    transform: translate(-31%, -45%);
    opacity: 0;
}   
.biography__img--item15{
    width: 110px;
    height: 110px;
    transform: translate(-42%, 8%);
    opacity: 0;
}
.biography__item--flex{
    display: flex;
    width: 100%;
    padding-left: 4vw;
}

.biography__item--year{
    /* display: block; */
    width: 6vw;
    font-size: 3.2rem;
    color: var(--primary-white);
}
.biography__text--main{
    font-size: 3.2rem;
    color: var(--primary-white);
}
.biography__text--para{
    
    margin-top: 2vh;
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--primary-white);
}
.item-space{
    height: 70vh;
    border-left: solid 1px var(--primary-white);
    margin: 4vh 0;
}
@media screen and (max-width:1000px) {
    .biography{
        height: 380vh;
    }
    .biography__title{
        position:unset;
        font-size: 3.2rem;
        display: flex;
        justify-content: flex-start;
        padding: 8vh 4vw;
    }
    .biography__item--flex{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 4vw;
}
.biography__flex{
    /* display: flex; */
    width: 100%;
    /* overflow: hidden; */
    position: relative;
    height: 360vh;
    /* background-color: #ff820e; */
}
.biography__img--container{
    top: 0;
    left: 0;
    /* background-color: #54e3fc; */
    width: 100%;
    height: 360vh;
    position: absolute;
    display: flex;
    justify-content: flex-end
}
.biography__img--containerFlex{
    position: sticky;
    top:0;
    width: 100%;
    height: 100vh;
}
.biography__img--containerPosition{
    width: 100%;
    height: 100vh;
    position: relative;
}
.biography__img--item{
    width: 200px;
    filter: drop-shadow(#1b1b1b 0px 0px 5px);
}
.biography__img--item1{
    width: 100px;
    transform: translate(25%, -2%);
}
.biography__img--item2{
    width: 100px;
    transform: translate(-25%, 2%);
}
.biography__img--item3{
    width: 190px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.biography__img--item6{
    width: 120px;
    transform: translate(19%, 29%);
}
.biography__img--item4{
    width: 110px;
    transform: translate(-48%, 0%);
}
.biography__img--item5{
    width: 110px;
    transform: translate(38%, -23%);
}
.biography__img--item7{
    width: 160px;
    transform: translate(-20%, 12%);
}
.biography__img--item8{
    width: 180px;
    transform: translate(21%, -18%);
}
.biography__img--item9{
    width: 180px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.biography__img--group1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    /* background-color: #54e3fc; */
}
.biography__img--group2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    /* background-color: #54e3fc; */
}
.biography__img--group3{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    /* background-color: #54e3fc; */

}
.biography__img--groupBanner{
    position: absolute;
    width: 285px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.biography__img--item10{
    width: 125px;
    height: 125px;
    transform: translate(0%, 0%);
}
.biography__img--item11{
    width: 110px;
    height: 110px;
    transform: translate(-5%, 26%);
}
.biography__img--item12{
width: 90px;
    height: 90px;
    transform: translate(27%, 6%);
}
.biography__img--item13{
    width: 125px;
    height: 125px;
    transform: translate(8%, 21%);
}
.biography__img--item14{
    width: 85px;
    height: 85px;
    transform: translate(-31%, -45%);
}   
.biography__img--item15{
    width: 110px;
    height: 110px;
    transform: translate(-42%, 8%);
}
.biography__item--container{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* background: #dedede; */
    z-index: 1000;
}
.biography__item--year{
    /* display: block; */
    width: 6vw;
    font-size: 3.2rem;
    color: var(--primary-white);
    filter: drop-shadow(0px 0px 5px #000000);
}
.biography__text--main{
    margin-top: 4vh;
    font-size: 2.4rem;
    color: var(--primary-white);
    filter: drop-shadow(0px 0px 5px #000000);
}
.biography__text--para{
    
    margin-top: 2vh;
    font-size: 1.4rem;
    line-height: 1.7;
    color: var(--primary-white);
    filter: drop-shadow(0px 0px 5px #000000);
}
.item-space{
    height: 60vh;
    border-left: solid 1px var(--primary-white);
    margin: 6vh 0;
}
.biography__img--group{
    display: flex;
    flex-direction: column;
    /* background-color:#54e3fc; */
    /* gap: 32px; */
}
}
/*----------- Skill -----------*/
.background__gra{
    position: absolute;
    width: 100vw;
    height: 100vw;
    background-image:  radial-gradient( #545a59, #1a1a1a 60% );
    /* background-color: #dedede; */
    z-index: -1000;
}
.skill{
    position: relative;
    width: 100%;
    height: 280vh;
    /* background-color: azure; */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: -2000;
    overflow: hidden;
}
.skill__container{
    position: relative;
    height: 100vh;
    width: 100%;
}
.skill__letter--container{
    /* background-color:aqua; */
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vw;
    position: absolute;
}
.skill__s{
    margin-top: 15vh;
    align-items: center;
    height: 100%;
    display: flex;
    
}
.skill__k{
    margin-top: 7vh;
    align-items: center;
    height: 100%;
    display: flex;
    
}
.skill__i{
    align-items: center;
    height: 100%;
    display: flex;
    
}
.skill__l{
    margin-bottom: 4vh;
    align-items: center;
    height: 100%;
    display: flex;
    
}
.skill__l-2{
    margin-bottom: 12vh;
    align-items: center;
    height: 100%;
    display: flex;
    
}
.skill__letter--img--s{
    height: 52vh;
    opacity: 0;
    translate: -2500px;
    transform:scaleX(6);
}
.skill__letter--img--k{
    height: 55.5vh;
    opacity: 0;
    translate: 0 -2500px;
    transform:scaleY(6);
}
.skill__letter--img--i{
    height: 53vh;
    opacity: 0;
    translate: 0 2500px;
    transform:scaleY(6);
}
.skill__letter--img--l{
    height: 53vh;
    opacity: 0;
    translate: 0 -2500px;
    transform:scaleY(6);
}
.skill__letter--img--l-2{
    height: 53vh;
    opacity: 0;
    translate: 2500px;
    transform:scaleX(6);
}
.html{
    font-size: 20rem;
    top:7%;
    left:15%;
    translate: -2400px;
}
.css{
    font-size: 32rem;
    top:9%;
    left:60%;
    translate: -1800px;
}
.js{
    font-size: 14rem;
    top:29%;
    left:13%;
    translate: -1700px;
}
.figma{
    font-size: 16rem;
    top:44%;
    left:47%;
    translate: -1800px;
}
.ai{
    font-size: 20rem;
    top:60%;
    left:7%;
    translate: -2600px;
}
.ps{
    font-size: 12rem;
    top:80%;
    left:51%;
    translate: -1800px;
}
.skill__item--container{
    
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: 3000;
    /* background-color: cornflowerblue; */
}
.skill__item{
    position: relative;
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
   
}
.skill__item--main{
    position: absolute;
    color: #fff;
}
.skill__item--sub{
    /* mix-blend-mode:screen; */
    position: absolute;
    filter: blur(10px);
    background-image: linear-gradient(90deg, #54e3fc, #ff820e);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sub--2{
    color: #fff;
}

/* .blur{
    position: absolute;
    width: 100%;
    height: 100vh;
    backdrop-filter: blur(30px);
    z-index: 4000;
    mask-image:
    linear-gradient(to top, rgb(0 0 0 / 100%) 100%, rgb(0 0 0 / 0%) 0%),
    linear-gradient(to bottom, rgb(0 0 0 / 100%) 100%, rgb(0 0 0 / 0%) 0%),
    linear-gradient(to left, rgb(0 0 0 / 100%) 100%, rgb(0 0 0 / 0%) 0%),
    linear-gradient(to right, rgb(0 0 0 / 100%) 100%, rgb(0 0 0 / 0%) 0%)
    ;
    mask-composite: intersect;
} */
 @media screen and (max-width:1000px) {
    .background__gra{
        position: absolute;
        top:0;
        width: 100vh;
        height: 100vh;
        background-image:  radial-gradient( #545a59, #1a1a1a 60% );
        /* background-color: #dedede; */
        z-index: -1000;
    }
    .skill{
        position: relative;
        width: 100%;
        height: 200vh;
        /* background-color: azure; */
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: -2000;
        overflow: hidden;
    }
    .skill__container{
        position: relative;
        height: 100vh;
        width: 100%;
    }
    .skill__letter--container{
        /* background-color:aqua; */
        height: 100vh;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1vw;
        position: absolute;
    }
    .skill__s{
        margin-top: 8vh;
        align-items: center;
        height: 100%;
        display: flex;
        
    }
    .skill__letter--img--s{
        height: 25vh;
        opacity: 0;
        translate: -2500px;
        transform:scaleX(6);
    }
    .skill__k{
        margin-top: 3.3vh;
        align-items: center;
        height: 100%;
        display: flex;
    }
    .skill__letter--img--k{
        height: 26vh;
        opacity: 0;
        translate: 0 -2500px;
        transform:scaleY(6);
    }
    .skill__i{
        align-items: center;
        height: 100%;
        display: flex;
        
    }
    .skill__letter--img--i{
        height: 25vh;
        opacity: 0;
        translate: 0 2500px;
        transform:scaleY(6);
    }
    .skill__l{
        margin-bottom: 2vh;
        align-items: center;
        height: 100%;
        display: flex;
    }
    .skill__letter--img--l{
        height: 25vh;
        opacity: 0;
        translate: 0 -2500px;
        transform:scaleY(6);
    }
    .skill__l-2{
        margin-bottom: 5.5vh;
        align-items: center;
        height: 100%;
        display: flex;
        
    }
    .skill__letter--img--l-2{
        height: 25vh;
        opacity: 0;
        translate: 2500px;
        transform:scaleX(6);
    }
    .html{
        font-size: 10rem;
        top:7%;
        left:15%;
        translate: -600px;
    }
    .css{
        font-size: 13rem;
        top:11%;
        left:60%;
        translate: -500px;
    }
    .js{
        font-size: 7rem;
        top:27%;
        left:13%;
        translate: -900px;
    }
    .figma{
        font-size: 11rem;
        top:55%;
        left:47%;
        translate: -660px;
    }
    .ai{
        font-size: 9rem;
        top:65%;
        left:7%;
        translate: -1200px;
    }
    .ps{
        font-size: 7rem;
        top:80%;
        left:51%;
        translate: -900px;
    }
    .skill__item--container{
        
        position: absolute;
        width: 100%;
        height: 100vh;
        z-index: 3000;
        /* background-color: cornflowerblue; */
    }
    .skill__item{
        position: relative;
        font-family: "Jost", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
    
    }
    .skill__item--main{
        position: absolute;
        color: #fff;
    }
    .skill__item--sub{
        /* mix-blend-mode:screen; */
        position: absolute;
        filter: blur(10px);
        background-image: linear-gradient(90deg, #54e3fc, #ff820e);
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .sub--2{
        color: #fff;
    }
}
 /*----------- strength -----------*/
.strength{
    position: relative;
    width: 100%;
    height: 400vh;
    background-image: linear-gradient(180deg, #1A1A1A,#545a59, #1A1A1A);
 }
.strength__title{
    position: sticky;
    top:0;
    height: 30vh;
    /* background-color: #54e3fc; */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
 }
.strength__title--text{
    font-family: "Jost", sans-serif;
    font-weight: 200;
    font-size: 25rem;
    color: rgba(255, 255, 255, 0.1);
    /* background-image: linear-gradient(90deg, #8a8a8a, #4c4c4c); */
    /* background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
 }
.strength__group{
    position: absolute;
    top: 0;
    width: 100%;
    height: 300vh;
 }
.strength__container{
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 300;
    font-style: normal;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    
}
.strength__container::after{
    content:url('');
    position: absolute;
    height: 90px;
    border-left: solid 1px var(--primary-white);
    opacity: 0.2;
    top: 55%;
    left: 50%;
    transform: translateX(-50%);
}
 .strength--1{
    margin-top: 30vh;
    position: relative;
 }
.circle__container{
    position: sticky;
    top:0;
    width: 100%;
    height: 100vh;
    /* background-color: #54e3fc; */
}
.circle__item--container{
    position: relative;
    width: 100%;
    height: 100vh;
    /* background-color: #ff820e; */
 }
.circle--1{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translateX(-50%) translateY(-82%);
}
.circle--2{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translateX(-22%) translateY(-33.5%);
}
.circle--3{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translateX(-78%) translateY(-33.5%);
}
.circle{
    border: solid 1px rgba(255, 255, 255, 0.15);
    border-radius: 300px;
    width: 47.3vh;
    height: 47.3vh;
    opacity: 0;
}
.strength__text--para{
    position: absolute;
    top:65%;
    left: 50%;
    transform: translateX(-50%);
    width: 50vw;
    text-align: center;
    font-size: 1.6rem;
    line-height: 1.8;
    letter-spacing: 0.2rem;
    opacity: 1;
}
.strength__text--main{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 6rem;
    opacity: 1;
}
.strength__text--container{
    position: relative;
    color: var(--primary-white);
    width: 100vw;
    height: 100vh;
 }
@media screen and (max-width:1000px) {
    .strength{
    position: relative;
    width: 100%;
    height: 400vh;
    background-image: linear-gradient(180deg, #1A1A1A,#545a59, #1A1A1A);
 }
    .strength__text--para{
        width: 100%;
        padding: 4.2666vw;
        text-align:left;
    }
    .strength__title{
    position: sticky;
    top:0;
    height: 16vh;
    /* background-color: #fc54a5; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #54e3fc; */
    width: 100%;
 }
.strength__title--text{
    font-family: "Jost", sans-serif;
    font-weight: 200;
    font-size: 9rem;
    color: rgba(255, 255, 255, 0.1);
    /* background-image: linear-gradient(90deg, #8a8a8a, #4c4c4c); */
    /* background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
 }
.strength__group{
    position: absolute;
    top: 0;
    width: 100%;
    height: 300vh;
    /* border: solid 1px blue; */
    /* background-color: rgba(255, 130, 14,0.5); */
 }
.strength__container{
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 300;
    font-style: normal;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* border: solid 1px var(--primary-white); */
    margin-bottom: 20vh;
    /* background-color: #54e3fc; */
    
}
.strength__container::after{
    content:url('');
    position: absolute;
    height: 78px;
    border-left: solid 1px var(--primary-white);
    opacity: 0.2;
    top: 55%;
    left: 50%;
    transform: translateX(-50%);
}
 .strength--1{
    margin-top: 16vh;
    position: relative;
 }
.circle__container{
    position: sticky;
    top:0;
    width: 100%;
    height: 100vh;
    /* background-color: #54e3fc; */
    /* border:solid 1px #54e3fc; */
}
.circle__item--container{
    position: relative;
    width: 100%;
    height: 100vh;
    /* background-color: #ff820e; */
 }
.circle--1{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translateX(-50%) translateY(-82%);
}
.circle--2{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translateX(-22%) translateY(-33.5%);
}
.circle--3{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translateX(-78%) translateY(-33.5%);
}
.circle{
    border: solid 1px rgba(255, 255, 255, 0.15);
    border-radius: 300px;
    width: 30vh;
    height: 30vh;
    opacity: 0;
}
.strength__text--container{
    position: relative;
    color: var(--primary-white);
    width: 100vw;
    height: 100vh;
}
.strength__text--main{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 4rem;
    opacity: 1;
}
}
/* ----------hobby---------- */
.hobby{
    width: 100%;
    /* height: 850vh; */
    /* overflow: hidden; */
}
.hobby__title--container{
    display: flex;
    justify-items: center;
    width: 100%;
    height: 200vh;
}
.hobby__title--containerSticky{
    position: sticky;
    top: 0%;
    width: 100%;
    height: 100vh;
}
.hobby__title--itemContainer{
    width: 100%;
    height: 100vh;
    /* overflow: hidden; */

}
.hobby__title{
    position: relative;
    height: 100vh;
    width: 100%;
    font-size: 25rem;
    color: var(--primary-white);
    font-family: "Hina Mincho", serif;
    font-weight: 400;
    font-style: normal;
    overflow: hidden;
}
.hobby__title--letter{
    opacity: 0;
}
.hobby__title--letter1{
    position: absolute;
    left: 21.5%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) scaleY(1.4) skew(-10deg, -10deg);
    mix-blend-mode: difference;
}
.hobby__title--letter2{
    position: absolute;
    left: 31%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) scaleY(1.4) skew(-10deg, -10deg);
    mix-blend-mode: difference;
}
.hobby__title--letter3{
    position: absolute;
    left: 38.5%;
    top: 53%;
    transform: translateX(-50%) translateY(-50%) scaleY(1.4) skew(-10deg, -10deg);
    mix-blend-mode: difference;
    font-size: 20rem;
}
.hobby__title--letter4{
    position: absolute;
    left: 46%;
    top: 55%;
    transform: translateX(-50%) translateY(-50%) scaleY(1.4) skew(-10deg, -10deg);
    mix-blend-mode: difference;
    font-size: 20rem;
}
.hobby__title--letter5{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) scaleY(1.4) skew(-10deg, -10deg);
    mix-blend-mode:difference;
}
.hobby__title--letter6{
    position: absolute;
    left: 59%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) scaleY(1.4) skew(-10deg, -10deg);
    mix-blend-mode: difference;
    font-size: 20rem;
}
.hobby__title--letter7{
    position: absolute;
    left: 67%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) scaleY(1.4) skew(-10deg, -10deg);
    mix-blend-mode: difference;
}
.hobby__title--letter8{
    position: absolute;
    left: 77%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) scaleY(1.4) skew(-10deg, -10deg);
    mix-blend-mode: difference;
}
.hobby__title--letter9{
    width: 5%;
    height: 30%;
    position: absolute;
    left: 81.5%;
    top: 59.5%;
    transform: translateX(-50%) translateY(-50%) scaleY(1.4) skew(-10deg, -10deg);
    mix-blend-mode: difference;
    font-size: 20rem;
    overflow: hidden;
}
.hobby__mainImg{
    position: absolute;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: -1000;
}
@media screen and (max-width:1000px) {
    .hobby{
        width: 100%;
        /* height: 1000vh; */
        /* overflow: hidden; */
    }
    .hobby__title--container{
        display: flex;
        justify-items: center;
        width: 100%;
        height: 180vh;
    }
    .hobby__title--containerSticky{
        position: sticky;
        top: 0%;
        width: 100%;
        height: 100vh;
    }
    .hobby__title--itemContainer{
        width: 100%;
        height: 100vh;
        /* overflow: hidden; */

    }
    .hobby__title{
        position: relative;
        height: 100vh;
        width: 100%;
        font-size: 9rem;
        color: var(--primary-white);
        font-family: "Hina Mincho", serif;
        font-weight: 400;
        font-style: normal;
        overflow: hidden;
    }
    .hobby__title--letter{
        opacity: 0;
    }
    .hobby__title--letter1{
        position: absolute;
        left: 44.5%;
        top: 19%;
        font-size: 10rem;
        transform: translateX(-50%) translateY(-50%) scaleY(1.4) skew(-10deg, -10deg);
        mix-blend-mode: difference;
    }
    .hobby__title--letter2{
        position: absolute;
        left: 58%;
        top: 28.5%;
        transform: translateX(-50%) translateY(-50%) scaleY(1.4) skew(-10deg, -10deg);
        mix-blend-mode: difference;
    }
    .hobby__title--letter3{
        position: absolute;
        left: 38.5%;
        top: 38.5%;
        transform: translateX(-50%) translateY(-50%) scaleY(1.4) skew(-10deg, -10deg);
        mix-blend-mode: difference;
        font-size: 6rem;
    }
    .hobby__title--letter4{
        position: absolute;
        left: 48%;
        top: 38%;
        transform: translateX(-50%) translateY(-50%) scaleY(1.4) skew(-10deg, -10deg);
        mix-blend-mode: difference;
        font-size: 5rem;
    }
    .hobby__title--letter5{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%) scaleY(1.4) skew(-10deg, -10deg);
        mix-blend-mode:difference;
    }
    .hobby__title--letter6{
        position: absolute;
        left: 63%;
        top: 60%;
        transform: translateX(-50%) translateY(-50%) scaleY(1.4) skew(-10deg, -10deg);
        mix-blend-mode: difference;
        font-size: 6rem;
    }
    .hobby__title--letter7{
        position: absolute;
        left: 44%;
        top: 72%;
        transform: translateX(-50%) translateY(-50%) scaleY(1.4) skew(-10deg, -10deg);
        mix-blend-mode: difference;
    }
    .hobby__title--letter8{
        position: absolute;
        left: 56%;
        top: 82%;
        transform: translateX(-50%) translateY(-50%) scaleY(1.4) skew(-10deg, -10deg);
        mix-blend-mode: difference;
    }
    .hobby__title--letter9{
        width: 7%;
        height: 20%;
        position: absolute;
        left: 62%;
        top: 92%;
        transform: translateX(-50%) translateY(-50%) scaleY(1.4) skew(-10deg, -10deg);
        mix-blend-mode: difference;
        font-size: 6rem;
        overflow: hidden;
    }
    .hobby__mainImg{
        position: absolute;
        width: 80%;
        height: unset;
        left: 50%;
        top: 20%;
        transform: translateX(-50%);
        z-index: -1000;
    }
}
/* ----------illust---------- */
.illustrator__titleContainer{
    position: relative;
    width: 100%;
    height: 30vh;
    display: flex;
    justify-content: center;
    z-index: 6000;
}

.illustrator__title{
    position: absolute;
    display: flex;
    width: 260px;
    height: 895px;
    font-size: 35rem;
    background-image: linear-gradient(270deg, #fdfdfd1a, rgba(253, 253, 253, 0));
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Explora", serif;
    font-weight: 400;
    font-style: normal;
    transform: rotate(0deg) translate(100%, 15%);
    writing-mode: vertical-rl;
    justify-content: flex-start;
    align-items: center;
    letter-spacing: 2rem;
    /* border: solid 1px var(--primary-grey); */
}
.illustrator__title--sub{
    position: absolute;
    display: flex;
    width: 120px;
    height: 460px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    transform: rotate(0deg) translate(230%, 72%) scaleY(1.4) skewY(0deg);
    color: #fff;
    font-size: 12rem;
    letter-spacing: -1rem;
    justify-content: center;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 500;
   /* background-color: #54e3fc; */
}
.illustrator__works--sticky{
    width: 100%;
    height: 100vh;
}
.illustrator__works--container{
    width: 100%;
    overflow: hidden;
    height: 180vh;
    /* background-color: #ff820e; */
}   
.illustrator__works--item{
    position: relative;
    width: 100%;
    height: 180vh;
    /* background-color: #54e3fc; */
}
.illust__1--img1{
    width: 50%;
    top: 0;
    left: 17%;
    position: absolute;
    opacity: 1;
}
.illust__1--img2{
    width: 50%;
    top: 0;
    left: 17%;
    position: absolute;
    opacity: 0;
}
.illust__1--square1{
    position: absolute;
    top: 50vh;
    left: 19.5%;
    width: 45vw;
    height: 45vw;
    border-top: solid 6px;
    border-image: linear-gradient(to right,  rgba(253, 253, 253, 1),rgba(253, 253, 253, 1)) 1;
    transform: rotate(45deg);
    z-index: -1000;
}
.illust__1--square2{
    position: absolute;
    top: 50vh;
    left: 19.5%;
    width: 45vw;
    height: 45vw;
    border-right: solid 6px;
    border-image: linear-gradient(to right,  rgba(253, 253, 253, 1),rgba(253, 253, 253, 1)) 1;
    transform: rotate(45deg);
}
.illust__1--square3{
    position: absolute;
    top: 50vh;
    left: 19.5%;
    width: 45vw;
    height: 45vw;
    border-bottom: solid 6px;
    border-image: linear-gradient(to left, #FDFDFD, rgb(152, 152, 152)) 1;
    transform: rotate(45deg);
}
.illust__1--square4{
    position: absolute;
    top: 50vh;
    left: 19.5%;
    width: 45vw;
    height: 45vw;
    border-left: solid 6px;
    border-image: linear-gradient(to top,  rgb(152, 152, 152),#1a1a1a) 1;
    transform: rotate(45deg);
    z-index: -1000;
}
.illust__2--container1{
    position: absolute;
    top: 110vh;
    left: 51%;
    width: 45vh;
    height: 45vh;
    filter: drop-shadow(0 10px 10px #1a1a1a);
    background-image: url(../img/hobby/illust/2023.png);
    background-size: cover;
}
.illust__2--1{
    position: absolute;
    top: 110vh;
    left: 51%;
    border: solid 4px;
    border-image: linear-gradient(to top, #ababab,#e1e1e1) 1;
    width: 45vh;
    height: 45vh;
    filter: drop-shadow(0 5px 5px #1a1a1a);
}
.illust__2--1-2{
    top: 110vh;
    left: 51%;
    background-image: url(../img/hobby/illust/2023_grey.png);
    background-size: cover;
    position: absolute;
    width: 45vh;
    height: 45vh;
    filter: drop-shadow(0 5px 5px #1a1a1a);
    opacity: 1;
}
.illust__2--container2{
    position: absolute;
    top: 140vh;
    left: 32%;
    width: 38vh;
    height: 38vh;
    border: solid 8px;
    border-image: linear-gradient(to top, #ababab,#e1e1e1) 1;
    filter: drop-shadow(0 5px 5px #1a1a1a);
    overflow: hidden;
}
.illust__2--2{
    width: 100%;
    height: 100%;
    transform: translate(100%,0);
    opacity: 0;
    filter: drop-shadow(0 5px 5px #1a1a1a);
}
.illust__2--3{
    width: 100%;
    height: 100%;
    transform: translate(-100%,-100%);
    opacity: 0;
    filter: drop-shadow(0 5px 5px #1a1a1a);
}
@media screen and (max-width:1000px) {
    .illustrator__titleContainer{
        position: relative;
        width: 100%;
        height: 30vh;
        display: flex;
        justify-content: center;
        z-index: 6000;
    }
    .illustrator__title--sub{
        position: absolute;
        display: flex;
        width: 66px;
        height: 230px;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        transform: rotate(0deg) translate(200%, 50%) scaleY(1.4) skewY(0deg);
        color: #fff;
        font-size: 6rem;
        letter-spacing: -1rem;
        justify-content: center;
        font-family: "Zen Kaku Gothic Antique", sans-serif;
        font-weight: 500;
    /* background-color: #54e3fc; */
    }
    .illustrator__works--sticky{
        width: 100%;
        height: 100vh;
    }
    .illustrator__works--container{
        width: 100%;
        overflow: hidden;
        height: 180vh;
        /* border: solid 1px var(--primary-white); */
    }   
    .illustrator__works--item{
        position: relative;
        width: 100%;
        height: 180vh;
        /* background-color: #54e3fc; */
        /* border: solid 1px#54e3fc; */
    }
    .illust__1--img1{
        width: 100%;
        top: 8%;
        left: 0;
        position: absolute;
        opacity: 1;
    }
    .illust__1--img2{
        width: 100%;
        top: 8%;
        left: 0;
        position: absolute;
        opacity: 0;
    }

    .illust__2--container1{
        position: absolute;
        top: 100vh;
        left: 4%;
        width: 43vh;
        height: 43vh;
        filter: drop-shadow(0 10px 10px #1a1a1a);
        background-image: url(../img/hobby/illust/2023.png);
        background-size: cover;
    }
    .illust__2--1{
        position: absolute;
        top: 100vh;
        left: 4%;
        border: solid 3px;
        border-image: linear-gradient(to top, #ababab,#e1e1e1) 1;
        width: 43vh;
        height: 43vh;
        filter: drop-shadow(0 5px 5px #1a1a1a);
    }
    .illust__2--1-2{
        top: 100vh;
        left: 4%;
        background-image: url(../img/hobby/illust/2023_grey.png);
        background-size: cover;
        position: absolute;
        width: 43vh;
        height: 43vh;
        filter: drop-shadow(0 5px 5px #1a1a1a);
        opacity: 1;
    }
    .illust__2--container2{
        position: absolute;
        top: 140vh;
        left: 28%;
        width: 38vh;
        height: 38vh;
        border: solid 6px;
        border-image: linear-gradient(to top, #ababab,#e1e1e1) 1;
        filter: drop-shadow(0 5px 5px #1a1a1a);
        overflow: hidden;
    }
    .illust__2--2{
        width: 100%;
        height: 100%;
        transform: translate(100%,0);
        opacity: 0;
        filter: drop-shadow(0 5px 5px #1a1a1a);
    }
    .illust__2--3{
        width: 100%;
        height: 100%;
        transform: translate(-100%,-100%);
        opacity: 0;
        filter: drop-shadow(0 5px 5px #1a1a1a);
    }
}
/* ----------photo---------- */
.photo__title--container{
    position: relative;
    width: 100%;
    height: 100vh;
    z-index: 6000;
}
.photo__title--sub{
    width: 190x;
    height: 200px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    color: #fff;
    font-size: 12rem;
    letter-spacing: -1rem;
    font-family: "Jost", sans-serif;
    font-weight: 200;
    letter-spacing: 2rem;
    opacity: 0.5;
}
.photo__title--sub1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-100px,-80px) skewY(-7deg) scaleY(1.1);
    
}
.photo__title--sub2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(20px,80px) skewY(5deg) scaleY(1.1);
}
.photo__item--container{
    width: 100%;
    height: 600vh;

}
.photo__item--sticky{
    width: 100vw;
    height: 100vh;
    position: sticky;
    top:0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* overflow: hidden; */
    /* background-color: rgb(255, 255, 255); */
}
.photo__item--sp{
    width: 80vh;
    height: 80vh;
    position: relative;
    /* overflow:visible; */
}
.photo__item--bubble{
    position: absolute;
    position: relative;
    width: 80vh;
    height:  80vh;
    border-radius: 500px;
    overflow: hidden;
    transform: scale(1);
    animation: move linear 20s infinite;
    }
    @keyframes move {
    0%{ 
    transform: translate(0,0);
    }
    25%{ 
    transform: translate(10px,-10px); 
    }
    50%{ 
    transform: translate(-5px,2px); 
    }
    75%{ 
    transform: translate(7px,10px); 
    }
    100%{ 
    transform: translate(0,0); 
    }
}
.bubble__light--white1{
    border-radius: 500px;
    position: absolute;
    width: 100%;
    animation: rotate 20s infinite;
    }
    @keyframes rotate {
    0%{ 
    transform:rotate(0);
    }
    100%{ 
    transform:rotate(360deg); 
    }
}
.bubble__light--white2{
    border-radius: 500px;
    position: absolute;
    width: 100%;
    height: 100%;
}
.bubble__light--white3{
    border-radius: 500px;
    position: absolute;
    width: 100%;
    height: 100%;
}
.bubble__light--highLight{
    border-radius: 500px;
    position: absolute;
    top:2%;
    left:2%;
   
    width: 95%;
    height: 95%;
    border-top: solid 10px var(--primary-white);
    /* background-color: var(--primary-white); */
    mix-blend-mode:overlay;
    filter: blur(3px);
    /* transform: translate(0,0) skewY(-40deg); */
    animation: rotate 25s infinite;
    }
    @keyframes rotate {
    0%{ 
    transform:rotate(0);
    }
    100%{ 
    transform:rotate(360deg); 
    }
}
.bubble__light--yellow{
    overflow: hidden;
    border-radius: 500px;
    position: absolute;
    width: 100%;
    height: 100%;
    mix-blend-mode:overlay;
    animation: rotate reverse 25s infinite;
    }
    @keyframes rotate {
    0%{ 
    transform:rotate(0);
    }
    100%{ 
    transform:rotate(360deg); 
    }
}
.bubble__light--red{
    border-radius: 500px;
    position: absolute;
    width: 100%;
    height: 100%;
    mix-blend-mode:overlay;
    animation: rotate 20s infinite;
    }
    @keyframes rotate {
    0%{ 
    transform:rotate(0);
    }
    100%{ 
    transform:rotate(360deg); 
    }
}
.bubble__light--pink{
    border-radius: 500px;
    position: absolute;
    width: 100%;
    height: 100%;
    mix-blend-mode:overlay;
    filter: blur(20px);
    animation: rotate reverse 30s infinite;
    }
    @keyframes rotate {
    0%{ 
    transform:rotate(0);
    }
    100%{ 
    transform:rotate(360deg); 
    }
}
.bubble__light--orange{
    border-radius: 500px;
    position: absolute;
    width: 100%;
    height: 100%;
    mix-blend-mode:overlay;
    animation: rotate reverse 30s infinite;
    }
    @keyframes rotate {
    0%{ 
    transform:rotate(0);
    }
    100%{ 
    transform:rotate(360deg); 
    }
}
.bubble__title--container1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,50%);
    animation: move linear 20s infinite;
    }
    @keyframes move {
    0%{ 
    transform: translate(0,0);
    }
    25%{ 
    transform: translate(10px,-10px); 
    }
    50%{ 
    transform: translate(-5px,2px); 
    }
    75%{ 
    transform: translate(7px,10px); 
    }
    100%{ 
    transform: translate(0,0); 
    }
}
.bubble__title--container2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,50%);
     animation: move linear 15s infinite;
    }
    @keyframes move {
    0%{ 
    transform: translate(0,0);
    }
    25%{ 
    transform: translate(5px,-7px); 
    }
    50%{ 
    transform: translate(-7px,-10px); 
    }
    75%{ 
    transform: translate(2px,5px); 
    }
    100%{ 
    transform: translate(0,0); 
    }
}
.bubble__title--container1{
    /* position: absolute; */
    width: 8vh;
    height: 8vh;
    border-radius: 500px;
    border: solid 1px var(--primary-white);
}
.bubble__title--container2{
    /* position: absolute; */
    width: 4vh;
    height: 4vh;
    border-radius: 500px;
    border: solid 1px var(--primary-white);
}

.photo__background{
    background-image: linear-gradient(#1a1a1a,#545a59);
    position: relative;
}

/* ----------photoItem---------- */
.photo__item1{
    position: absolute;
    width: 100%;
}
.photo__item2{
    position: absolute;
    width: 100%;
    opacity:1;
}
.photo__item3{
    position: absolute;
    width: 100%;
    opacity:1;
}
.photo__item4{
    position: absolute;
    width: 100%;
}
.photo__item5{
    position: absolute;
    width: 100%;
}
.photo__item6{
    position: absolute;
    width: 100%;
}
.photo__item7{
    position: absolute;
    width: 100%;
}
.photo__item8{
    position: absolute;
    width: 100%;
}
@media screen and (max-width:1000px) {
.photo__title--container{
    position: relative;
    width: 100%;
    height: 100vh;
    z-index: 6000;
}
.photo__title--sub{
    width: 190x;
    height: 200px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: 10rem;
    opacity: 0.5;
}
.photo__title--sub1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-90px,-90px) skewY(-7deg) scaleY(1.1);
    
}
.photo__title--sub2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(5px,50px) skewY(5deg) scaleY(1.1);
}
.photo__item--container{
    width: 100%;
    height: 600vh;
}
.photo__item--sticky{
    width: 100vw;
    height: 100vh;
    position: sticky;
    top:0;
    display: flex;
    justify-content: center;
    align-items: center;

    /* border: solid 4px var(--primary-white); */
}
.photo__item--sp{
    width: 120vw;
    height: 100vh;
    position: relative;
    overflow:hidden;
    /* border: solid 1px blue; */
    transform: translate(0,5%);
}
.photo__item--bubble{
    /* border: solid 1px var(--primary-white); */
    position: absolute;
    position: relative;
    width: 80vh;
    height:  80vh;
    border-radius: 500px;
    top: 5%;
    left: -23%;
    overflow: hidden;
    transform: scale(1);
    animation: move linear 20s infinite;
    }
    @keyframes move {
    0%{ 
    transform: translate(0,0);
    }
    25%{ 
    transform: translate(10px,-10px); 
    }
    50%{ 
    transform: translate(-5px,2px); 
    }
    75%{ 
    transform: translate(7px,10px); 
    }
    100%{ 
    transform: translate(0,0); 
    }
}
.bubble__light--white1{
    border-radius: 500px;
    position: absolute;
    width: 100%;
    animation: rotate 20s infinite;
    }
    @keyframes rotate {
    0%{ 
    transform:rotate(0);
    }
    100%{ 
    transform:rotate(360deg); 
    }
}
.bubble__light--white2{
    border-radius: 500px;
    position: absolute;
    width: 100%;
    height: 100%;
}
.bubble__light--white3{
    border-radius: 500px;
    position: absolute;
    width: 100%;
    height: 100%;
}
.bubble__light--highLight{
    border-radius: 500px;
    position: absolute;
    top:2%;
    left:2%;
   
    width: 95%;
    height: 95%;
    border-top: solid 10px var(--primary-white);
    /* background-color: var(--primary-white); */
    mix-blend-mode:overlay;
    filter: blur(3px);
    /* transform: translate(0,0) skewY(-40deg); */
    animation: rotate 25s infinite;
    }
    @keyframes rotate {
    0%{ 
    transform:rotate(0);
    }
    100%{ 
    transform:rotate(360deg); 
    }
}
.bubble__light--yellow{
    overflow: hidden;
    border-radius: 500px;
    position: absolute;
    width: 100%;
    height: 100%;
    mix-blend-mode:overlay;
    animation: rotate reverse 25s infinite;
    }
    @keyframes rotate {
    0%{ 
    transform:rotate(0);
    }
    100%{ 
    transform:rotate(360deg); 
    }
}
.bubble__light--red{
    border-radius: 500px;
    position: absolute;
    width: 100%;
    height: 100%;
    mix-blend-mode:overlay;
    animation: rotate 20s infinite;
    }
    @keyframes rotate {
    0%{ 
    transform:rotate(0);
    }
    100%{ 
    transform:rotate(360deg); 
    }
}
.bubble__light--pink{
    border-radius: 500px;
    position: absolute;
    width: 100%;
    height: 100%;
    mix-blend-mode:overlay;
    filter: blur(20px);
    animation: rotate reverse 30s infinite;
    }
    @keyframes rotate {
    0%{ 
    transform:rotate(0);
    }
    100%{ 
    transform:rotate(360deg); 
    }
}
.bubble__light--orange{
    border-radius: 500px;
    position: absolute;
    width: 100%;
    height: 100%;
    mix-blend-mode:overlay;
    animation: rotate reverse 30s infinite;
    }
    @keyframes rotate {
    0%{ 
    transform:rotate(0);
    }
    100%{ 
    transform:rotate(360deg); 
    }
}
.bubble__title--container1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,50%);
    animation: move linear 20s infinite;
    }
    @keyframes move {
    0%{ 
    transform: translate(0,0);
    }
    25%{ 
    transform: translate(10px,-10px); 
    }
    50%{ 
    transform: translate(-5px,2px); 
    }
    75%{ 
    transform: translate(7px,10px); 
    }
    100%{ 
    transform: translate(0,0); 
    }
}
.bubble__title--container2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,50%);
     animation: move linear 15s infinite;
    }
    @keyframes move {
    0%{ 
    transform: translate(0,0);
    }
    25%{ 
    transform: translate(5px,-7px); 
    }
    50%{ 
    transform: translate(-7px,-10px); 
    }
    75%{ 
    transform: translate(2px,5px); 
    }
    100%{ 
    transform: translate(0,0); 
    }
}
.bubble__title--container1{
    /* position: absolute; */
    width: 8vh;
    height: 8vh;
    border-radius: 500px;
    border: solid 1px var(--primary-white);
}
.bubble__title--container2{
    /* position: absolute; */
    width: 4vh;
    height: 4vh;
    border-radius: 500px;
    border: solid 1px var(--primary-white);
}

.photo__background{
    background-image: linear-gradient(#1a1a1a,#545a59);
    position: relative;
}
.photo__backgroundBubble--container{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 200vh;
    overflow: hidden;
    bottom: 0;
    left: 0;

}
.photo__backgroundBubble--1{
    width: 50vh;
    height: 50vh;
    /* background-color:rgb(255, 255, 255); */
    transform: translate(-75%,0);
    border: solid 1px #ffffff;
    /* filter:blur(5px) */
}
.photo__backgroundBubble--2{
    width: 35vh;
    height: 35vh;
    border: solid 1px #ffffff;
    /* background-color:rgb(255, 255, 255); */
    transform: translate(90%,40%);
    /* filter:blur(10px) */
}
.photo__backgroundBubble--3{
    width: 20vh;
    height: 20vh;
    border: solid 1px #ffffff;
    /* background-color:rgb(255, 255, 255); */
    
    transform: translate(-120%,30%);
    /* filter:blur(5px) */
}
.photo__backgroundBubble--4{
    width: 15vh;
    height: 15vh;
    /* background-color:rgb(255, 255, 255); */
    border: solid 1px #ffffff;
    transform: translate(130%,35%);
    /* filter:blur(5px) */
}
.photo__backgroundBubble--5{
    width: 10vh;
    height: 10vh;
    border: solid 1px #ffffff;
    /* background-color:rgb(255, 255, 255); */
    transform: translate(-20%,-15%);
    /* filter:blur(5px) */
}
/* ----------photoItem---------- */
.photo__item1{
width: 100%;
}
}
.endRoll{
    background-color: #545a59;
    color: var(--primary-white);
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 16vh;
    /* border: solid 1px #dedede; */

}
.design{
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    gap: 16px;
}
.design--1{
    /* background-color: #54e3fc; */
    width:300px;
    font-size: 1.4rem;
    display: flex;
    justify-content: center;
    line-height: 1.8;
}
.design--2{
    /* background-color: #54e3fc; */
    width:300px;
    font-size: 2.4rem;
}
.specialThanks{
    font-size: 4rem;
    text-align: center;
    /* line-height: 4; */
}
.specialThanks--group{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.st__name{
    font-size: 2.4rem;
}
.fin{
    background-color: #545a59;
    color: var(--primary-white);
    width: 100%;
    height: 100vh;
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
}
/* .fin__replay,
.fin__works,
.fin__top,
.fin__contact{
    filter: drop-shadow(-3px -3px 3px #646d6c);

} */

.fin__replay--box,
.fin__works--box,
.fin__top--box,
.fin__contact--box{
    width: 10.4166vw;
    height: 5.997vh;
    background-image: linear-gradient(135deg, #646d6c,#545a59);
    /* filter: drop-shadow(-2px -2px 2px #797d7c); */
    /* filter: drop-shadow(3px 3px 3px #474b4a); */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    border-radius: 500px;
    transition: 0.6s;
}
.fin__replay--box:hover,
.fin__works--box:hover,
.fin__top--box:hover,
.fin__contact--box:hover{
    background-color: var(--primary-white);
    background-image:none;
    color: #545a59;
}
@media screen and (max-width:1000px) {
    .endRoll{
    background-color: #545a59;
    color: var(--primary-white);
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 16vh;
    /* border: solid 1px #dedede; */
}
.design{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 16px;
}
.design--1{
    /* background-color: #54e3fc; */
    width:300px;
    font-size: 1.4rem;
    display: flex;
    justify-content: center;
    /* text-align: right; */
    /* line-height: 1.8; */
}
.design--2{
    /* background-color: #54e3fc; */
    width:300px;
    font-size: 2.4rem;
}
.specialThanks{
    font-size: 4rem;
    text-align: center;
    /* line-height: 4; */
}
.specialThanks--group{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.st__name{
    font-size: 2.4rem;
}
.specialThanks{
    font-size: 3.2rem;
    text-align: center;
}
.fin{
    background-color: #545a59;
    color: var(--primary-white);
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    align-items: center;
}
.fin__replay--box,
.fin__works--box,
.fin__top--box,
.fin__contact--box{
    width: 53.3333vw;
    height: 8.9955vh;
    background-image: linear-gradient(135deg, #646f6e,#545a59);
    /* filter: drop-shadow(-2px -2px 2px #797d7c); */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    border-radius: 500px;
    transition: 0.6s;
}
.fin__replay--box:hover,
.fin__works--box:hover,
.fin__top--box:hover,
.fin__contact--box:hover{
    background-color: var(--primary-white);
    background-image:none;
    color: #545a59;
}
}