@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{
    position: relative;
    width: 100vw;
    height: 100vh;
    /* font-family: "Noto Sans", sans-serif; */
    font-family: "Jost", sans-serif;
    font-weight: 400;
    font-optical-sizing: auto;
    font-style: normal;
    /* font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
    "wdth" 100; */
    color: var(--primary-black);
    background-color: var(--primary-white);
}
@media screen and (max-width:1000px){
    body{
        height: 125vh;
    }
}
/*----------- menubar -----------*/
.menu{
    z-index: 10000;
    position: fixed;
    display: flex;
    width: 100%;
    height: 4.629vh;
}
.space{
    display: flex;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    width: 200px;
    color: var(--primary-white);
    background-color: var(--primary-black);
}
.profile__icon{
    display: block;
    width: 30px;
    height: 30px;
    margin-right: 10px;
}
.btn__top{
    display: flex;
    position: relative;
    /* left:0%;
    top: 50%;
    transform:translateY(-50%);
    font-size: 1.8rem; */
    width: 200px;
    height: 100%;
    justify-content: center;
    align-items: center;
    transition:all 0.4s; 
    background-color: var(--primary-black);
}
.btn__top::after{
    content: '';
    position: absolute;
    border-right: solid 1px;
    height: 35px;
    right: 0%;
}
.btn__top:hover{
    background-color: var(--primary-white);
    color:var(--primary-black)
}
.Top{
    font-size: 1.8rem;
}
.menuBar{
    width: 100%;
    height: 100%;
    background-color: var(--primary-black);
    display: flex;
    justify-content: center;
    /* position: relative; */
}
.menuBar__btn{
    gap: 8px;
    height: 100%;
    display: flex;
    align-items: center;

}
.btn__works,
.btn__about,
.btn__contact{
    border-radius: 500px;
    width: 180px;
    height: 75%;
    font-size: 1.6rem;
    display: flex;
    justify-content: center;
    align-items: center;

}
.btn__works{
    background-color: var(--primary-white);
}
.btn__top,
.btn__about,
.btn__contact{
    color: var(--primary-white);
}
.btn__about:hover,
.btn__contact:hover{
    transition:all 0.4s; 
}
.btn__about:hover,
.btn__contact:hover{
    background-color: var(--primary-white);
    color: var(--primary-black);
}
.menu--sp{
    display: none;
}
@media screen and (max-width:1000px) {
    .menu{
       display:none;
    }
}
/*----------- playlist -----------*/
.playlist{
    position: absolute;
    background: var(--primary-white);
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
}
.playlist__container{
    position: relative;
    width: 100%;
    height: 100vh;
    /* background-color: chartreuse; */
}
.playlist__title{
    /* position: absolute; */
    /* padding-top: 4.4444vh; */
    font-size: 3.2rem;
}
.container__flex{
    position: absolute;
    z-index: 100;
    display: flex;
    width: 100%;
    height: 100vh;
    align-items:center;
    /* background-color: brown; */
}

.slider__container{
    width: 100vw;
    height: 100vh;
    /* background-color: #FF9997; */
    padding-top: 7.5919vh;
    padding-left: 60px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
@media screen and (max-width:1000px) {
    .playlist{
        height: 125vh;
    }
    .menu{
       display:none;
    }
    .container__flex{
        padding-top: 7.5919vh;
        z-index: 100;
        width: 100vw;
        height: 125vh;
        align-items:flex-start;
    }
    .slider__container{
        padding: 0 2.0833vw 0;
        width: 100vw;
        height: 125vh;
    }
/*----------- slider -----------*/
}
.slider__title{
    margin-top: 1.4815vh;
    font-size: 1.6rem;
}
.slider{
    margin-top: 1.4815vh;
    /* background-color: aqua; */
    width: 46.5vw;
    height: 23.5vh;
    min-height: 48.5px;
    overflow-y: scroll;
    position: relative;
    border-bottom: solid 1px var(--primary-grey);
}
.banner__slider{
    border-bottom: none;
}
.items {
    display: flex;
    gap: 1.0466vw;
    overflow-x: scroll;           /* ← 必要！ */
}
.hp__item,
.lp__item,
.banner__item{
    position: absolute;
}
.items::-webkit-scrollbar {
    display: none;              /* Chrome/Safariでスクロールバー非表示 */
}
.itemContainer{
    transition:all 0.4s; 
    width: 12vw;
    min-width: 165px;
    height: 100%;
}
.itemContainer:hover{
    opacity: 0.5;
}
.item__img{
    width: 100%;
    /* filter: drop-shadow(0 0 0.3rem #696969); */
}
.item__title{
    margin-top: 6px;
    font-size: 1.1rem;
}
@media screen and (max-width:1000px) {
    .slider{
        width: 100%;
        height: 30vh;
    }
        .items {
        /* display: flex; */
        gap: 2.0833vw;
    }
  /* .hp__item{
    position: relative;
}
.lp__item{
      position: unset;
      
    }
    .banner__item {
      position: absolute;
  }
  .items {
    display: flex;
    gap: 1.0466vw;
    overflow-x: scroll; 
} */
}
/*----------- showcase -----------*/
.showcase{
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    height: 100vh;
    padding-top: 4.629vh;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    /* background-color: aqua; */
}
.showcase__container{
    width: 700px;
    height: 700px;
    /* background-color: #FF9997; */
}
.preview__img {
  display: none;
  width: 100%;
  height: auto;

}

@media screen and (max-width:1000px) {
    .showcase{
       display:none;
    }
}
/*----------- spScreen--sticky -----------*/
.spScreen--sticky{
    display: none;
}


@media screen and (max-width:1000px) {
    .sticky__container--above,
    .sticky__container--below{
        
        z-index: 8000;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .sticky__container--above{
        position:fixed;
        background-color: var(--primary-white);
        height: 5vh;
        display: flex;
        align-items: center;
        padding: 0 2.0833vw;
    }
    .sticky__container--below{
        position:fixed;
        background-color: var(--primary-white);
        height: 10vh;
        display: flex;
        align-items: center;
        padding: 0 2.0833vw;
        bottom: 0;
    }
    .menu__btn{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.6rem;
        border-radius: 500px;
        background-color: var(--primary-black);
        color: var(--primary-white);
        width: 30vw;
        height: 7vh;
    }
        .name__sp{
        font-size: 1.6rem;
    }
        .works--lead{
        font-size: 1.6rem;
    }
}
@media screen and (max-width:1000px) {
    .menu--sp{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        z-index: 9000;
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background-color: var(--primary-white);
        transform: translate(-100%,0);
        transition: 0.4s;
    }
    .menu--sp.active{
        transform: translate(0,0);
    }
    .menu--main{
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 2.0833vh 0 4.1666vh;
    }
    .menu--title{
        display: flex;
        font-size: 3.2rem;
        width: 100%;
        padding: 0px 2.0833vw 2vh;
    }
    .menu__listBtn--container{
        /* height: %; */
        width: 100%;
        display: flex;
        flex-direction: column;
        gap:4vh;
        padding: 0 4.1666vw 0;
    }
    .menu__listBtn{
        font-size: 2.4rem;
    }
    .menu__close--container{
        width: 100%;
        height: 11.1666vh;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 2.0833vw 0;
    }
    .menu__close{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.6rem;
        border-radius: 500px;
        background-color: var(--primary-black);
        color: var(--primary-white);
        width: 30vw;
        height: 7vh;
    }
}