@charset "utf-8";


html { scroll-behavior: smooth; }
main{ position: relative; }
#mv{
    position: relative; width: 100%; background: url(../img/bg_mv.webp) no-repeat center center; background-size: cover; z-index: 1; overflow: hidden;

    & .content{ height: 100%;}
    &::after{ position: absolute; bottom: 0; left: 0; content: ''; width: 100vw;  height: 59.92vw; background: url(../img/illust_mv01.webp) center; background-repeat: no-repeat; background-size: cover; z-index: 2;  opacity: 0; transform: translateY(100%);
    transition: opacity 1s ease 2s, transform 2s ease 1.5s; }
    &.is-view::after{ opacity: 1;  transform: translateY(0);}
    & h1{ margin: 0 auto; padding: 13vw 0 22.46vw; text-align: center; width: 32vw; z-index: -1; opacity: 0;  
        &.is-view{ opacity: 1; transition: opacity 0s ease 0s, transform 0s ease 0s; }
    }
    & .subtit{ position: absolute; top: 10px; font-size: clamp( 30px , 5.69vw , 74px); line-height: 1.2; color: #a96047; letter-spacing: 0.1em; z-index: 2; opacity: 0;  transform: translateX(-100px); 
        &.is-view{ opacity: 1; transition: opacity 1.5s ease 1.5s, transform 1.5s ease 1.5s; transform: translateX(0);}
    }
    & .txt{ position: absolute; top: 0; right: 0; writing-mode: vertical-rl; font-size: 2.23vw; letter-spacing: 0.2em; margin-top: 20px; opacity: 0;
        &.is-view{ opacity: 1; transition: opacity 3s ease 1.5s;}
    }

}


#concept{
    padding-bottom: 9vw; z-index: 2;

    &::before{ position: absolute; top: -46vw; right: 40px; content: ''; width: 25vw; height: 36vw; background: url(../img/illust_mv02.webp) center; background-repeat: no-repeat; background-size: cover; z-index: 2; opacity: 0;  transform: translateX(20px); }
    &.is-view::before{ opacity: 1; transform: translateX(0); transition:opacity 2s ease 1.5s, transform 2s ease 1.5s;}
    &::after{  content: ''; position: absolute; top: -9vw; bottom: 0; left: 0; right: 0; background-color: #a96047; transform: skewY(-10deg); z-index: 1;}
    & .txtBox{ transform: skewY(-10deg); margin: 0 auto; max-width: 700px; text-align: center; color: #fff;}
    & h2{ z-index: 3; position: relative; font-size: max( 30px , 4.7vw); display: inline-block; letter-spacing: 0.1em;
        &::after{ content: ""; width: 1px; height: 132px; display: block; margin: 20px auto ; background: url(../img/border.webp) center; background-repeat: no-repeat; background-size: cover;
        transform-origin: top center; transform: scaleY(0); opacity: 0; transition: transform 1s ease 1s, opacity 1s ease 1s;
        }
    }
    &.is-view h2::after{ transform: scaleY(1); opacity: 1; }
}


#story{ 
    background: url(../img/bg_01.webp) no-repeat center center; background-size: cover; margin-top: -15vw; padding: 15vw 0; position: relative; z-index: 1;

    & .frame{ position: relative;}
    & .frame::after{ content: ''; position: fixed; width: 100%; height: 10.5vw; bottom: -10.15vw; left: 0; right: 0; background-color: #a96047; transform: skewY(-9.5deg); z-index: 3;}
    & .frame.lastStop::after{ display: none;}

    & section:not(#intro, #artwork) {
        overflow: visible;
        z-index: 4;

        &::after{ position: sticky; content: "";  z-index: 4; opacity: 0; transition: opacity 2.5s ease 1.2s, transform 1.5s ease 1.2s; transform: translateX(-100px);}
        &.is-view::after{ opacity: 1; transform: translateX(0);}

        & .content{ position: relative; margin: clamp( 130px , 13.84vw , 180px) 0 0; 
            &::before{ content: ''; position: fixed; width: 100%; height: 10.5vw;  left: 0; right: 0; background-color: #a96047; transform: skewY(-9.5deg); z-index: 3;}
        }
        & h2{ 
            transform: skewY(-10deg) translateX(-100px); justify-content: left; color: #a96047; position: sticky; top: -4vw; opacity: 0; 
            &.is-view{ opacity: 1; transition: opacity 2s ease, transform 2s ease; transform: skewY(-10deg) translateX(0);}

            & span{ display: inline-block; position: relative; font-size: 113px; margin-left: 10px; z-index: 2;}
            & span::after{ position: absolute; display: block; content: ''; width: 110%; height: 0.2em; background-color: #c48f97; left: 0; bottom: 0.2em;  z-index: -1; opacity: 0.6; }
        }
        & h3{ position: sticky; top: 8vw; width: 74px; margin: 0 auto; z-index: 5; transform: translateX(50px); opacity: 0; transform:scale(2);
            &.is-view{ opacity: 1; transform:scale(1); transition: opacity 2.5s ease 0.8s, transform 2.2s ease 0.3s; }
        }
        & .txtBox{ width: 100%; font-size: 1.2vw; padding: 0 20px 0 100px; z-index: -1; opacity: 0; 

            &.is-view{ opacity: 1; transition: opacity 2s ease 0.8s;  }
            & p{ width: 34.5%; margin: 0 0 0 auto; 
            }
            & p:nth-of-type(2){ margin-top: 2em; }
        }
    }
}

#family{
    &::before{ position: absolute; bottom: -5vw; right: 0; content: ''; width: 100vw; height: 119vw; background: url(../img/illust_tree01.webp) center; background-repeat: no-repeat; background-size: contain; z-index: 5;}

    &::after{ width: 38.23vw; height: 41.5vw; bottom: -6vw; left: 7.6vw;  display: block; background: url(../img/illust_family01.webp) no-repeat;  background-size: contain; 
    }
    & .content{
        &::before{ bottom: 7vw;}
    }

}

#memory{
    &::before{ position: absolute; bottom: -12.53vw; left: 0; content: ''; width: 16vw; height: 54.15vw; background: url(../img/illust_tree02.webp) center; background-repeat: no-repeat; background-size: contain; z-index: 3;}
    &::after{ width: 44.69vw; height: 39.46vw; bottom: -10vw; left: 16vw;  display: block; background: url(../img/illust_memory01.webp)no-repeat;  background-size: contain; }

    & .content{
        &::before{ bottom: 5vw;}
    }

    & h2{ 
        & span::after{ background-color: #a2b294; }
    }
}

#intro{
    margin-top: 50px;

    & h3{ max-width: 1080px; margin: 0 auto -0.5em; transform: rotate(-10deg); font-size: clamp( 30px , 3vw , 40px); color: #a35e45;}
    &::before{ position: absolute; top: 35vw; left: 0; content: ''; width: 100%; height: 97.76vw; background: url(../img/illust_tree03.webp) center; background-repeat: no-repeat; background-size: cover; z-index: 3;}

    & .content{
        z-index: 4;

        &::before{ bottom: -36.4vw;}
    }
    
    & .inner{ max-width: 1080px; margin: 0 auto 10px;

        &::before , &::after{ content:"";  width: 100%; height: clamp( 100px , 14.8vw , 160px); display: block; background: url(../img/bg_introduce.webp) no-repeat; background-size: cover;}
        &::after{ transform: rotate(180deg);}
    }
    
    & .list_content{  background: #fff;  padding: 0 40px;

        & .list_tit{ text-align: right; color: #a96047; font-size: clamp( 18px , 2vw , 26px); line-height: 1.8;}
            
        
        & ol:not(:last-of-type){ border-bottom: 1px solid #a96047; }
        & ol{ display: grid; grid-template-columns: repeat(3, 1fr); max-width: 870px; margin: 40px auto; gap: 40px;

            & li{ display: grid; grid-template-rows: subgrid; grid-row: span 4; gap: 10px;}
            & h4{ 
                font-weight: bold; 
    
                & .num{ font-size: 36px; color: #a96047; letter-spacing: 0.1em;}
            }
            & p{ font-size: 13px; line-height: 1.8; }
            & .link_list{ 
                justify-content: flex-start; margin: 1em 0 40px; gap: 14px;

                & li{ font-size: 12px; color: #a96047;}
            }
        }
        & .list_caption{ font-size: 12px; max-width: 870px; margin: 0 auto;}
    }
}

#routine{
    &::after{ width: 57.3vw; height: 43.06vw; bottom: -15vw; display: block; background: url(../img/illust_routine01.webp)no-repeat;  background-size: contain; }
    & .content{
        &::before{ bottom: 8.4vw;}
    }
    & h2{ 
        & span::after{ background-color: #d8cd79; }
    }
}

#asia{
    &::before{ position: absolute; top: 16vw; right: 0; content: ''; width: 16vw; height: 25vw; background: url(../img/illust_asia02.webp) center; background-repeat: no-repeat; background-size: contain; z-index: 2; opacity: 0;}
    &.is-view::before{ opacity: 1; transition:opacity 2s ease 1.5s;}

    &::after{ width: 46vw; height: 45.5vw; bottom: -15vw; left: 8.69vw; display: block; background: url(../img/illust_asia01.webp)no-repeat;  background-size: contain; }
    & .content{
        &::before{ bottom: 8.5vw;}
    }
    & h2{ 
        & span::after{ background-color: #cda68d; }
    }
}

#spring{
    &::after{ width: 53.3vw; height: 44.76vw; bottom: -7.5vw; display: block; background: url(../img/illust_spring01.webp)no-repeat;  background-size: contain; }
    & .content{
        &::before{ bottom: 8.7vw;}
    }
    & h2{
        & span::after{ background-color: #a99dce; }
    }
}

#session{
    margin-bottom: 0;

    &::after{ width: 53.1vw; height:48vw; bottom: -10vw; left: 2%; display: block; background: url(../img/illust_session01.webp)no-repeat;  background-size: contain; }
    
    & .content{
        &::before{ bottom: 9vw;}
    }
    & h2{
        & span::after{ background-color: #94b6c6; }
    }
}

#artwork{ 
    margin-top: 10vw;

    & .content{ padding: 0 40px; max-width: 1090px; align-content: flex-start;}
    & h2{
        color: #a96047; transform: skewY(-10deg); margin-bottom: 90px; letter-spacing: 0.1em;

        &::after{ position: absolute; display: inline-block; content: ''; width: 6em; height: 0.6em; background-color: #d8b3a4; left: 1.5em; bottom: 0.1em;  z-index: -1; opacity: 0.6;}
    }
    & .profile{ width: 47%;
        & figure{ width: 35.3%;}
        & .txtBox{ width: 58.54%; }
        & p{ letter-spacing: 0.08em; line-height: 1.8;}
        & p span{ display: block; margin-bottom: 1em;}
    }
    & .comment{ width: 52.5%; margin-top: -50px;}

}

@media (max-width: 1149px){  
    #intro {
        &::before { z-index: -1;}
    }
}

@media (max-width: 768px){  
    main{ overflow: hidden;}

    #mv{ 
        &::after{ width: 100vw; left: 0;  height: 100%; background: url(../img/illust_mv01_sp.webp) no-repeat left bottom; background-size: contain; }
        & .content{ display: flex; height: 100vh; flex-direction: column; justify-content: center; align-items: center;}
        & h1{ width: min( 68vw , 315px); height: 75vw; margin-top: 0; padding-top: 0;}
        & .subtit{ left: 20px; font-size: min( 13vw , 50px);}
        & .txt{ font-size: min( 6.8vw , 30px);}

    }
    &::after{ content: none; }

    #concept{ padding-bottom: 80px;

        & h2{
            &::after{ height: 8vw; width: 0.1vw;}
        }
        &::before { width: 37.5vw; height: 53.83vw; right: -9.4vw; top: -60vw;
            &::before{ position: absolute; top: -46vw; right: 40px; content: ''; width: 25vw; height: 36vw; background: url(../img/illust_mv02.webp) center; background-repeat: no-repeat; background-size: cover; z-index: 2; opacity: 0;  transform: translateX(20px); }}
        &.is-view::before { opacity: 1; transform: translateX(0); transition: opacity 1s ease 0s, transform 1s ease 0s;}
    
    }

    #story{
        padding: 15vw 0 0;

        & .frame::after { content: none;}
        & section:not(#intro, #artwork) {
            display: flex; flex-wrap: wrap; 

            & .content{ display: flex; flex-wrap: wrap; margin: 0 auto; order: 2; width: 100%;

                &::before{ display: none;}
            }

            & h2{ position: absolute; top: -140vw; font-size: 4vw; left: 20px;
                & span{ font-size: 18.8vw;}
            }
            & h3{ position: absolute; width: 15vw; top: -145vw; right: 30px; transform: translateX(0);}
            &::after { position: static;  margin: 140px 0 55px; transition: opacity 2s ease 1.5s, transform 2s ease 1.5s;
            } 
            & .txtBox{ order: 3; width: 100%; padding: 0; margin: 0 auto;
                &.is-view { transition: opacity 1s ease 0.5s;}
                & p{ width: 100%; text-align: center; font-size: 16px;}
            }
        }
            
    }

    #family{
        margin-bottom: 100px;

        &::before{ position: absolute; top: 88vw; right: 0; content: ''; width: 100vw; height: 200vw; background: url(../img/illust_tree01_sp.webp) center; background-repeat: no-repeat; background-size: cover; z-index: 5;}
        &::after{ width: 100vw; height: 96vw; bottom: -6vw; left: 7.6vw;  display: block; background: url(../img/illust_family01_sp.webp) no-repeat;  background-size: contain; }
    }

    #memory{
        margin-bottom: 100px;

        &::before{ content:none;}
        &::after{ width: 100vw; height: 92.5vw; bottom: -10vw; left: 16vw;  display: block; background: url(../img/illust_memory01_sp.webp)no-repeat;  background-size: contain; }
    
        & h2{ 
            & span::after{ background-color: #a2b294; }
        }
    }

    #intro {
        margin-top: 0px; padding-top: 0;
        & h3{ margin-bottom: -1em;}
        &::before, &::after{ content: none;}

        & .inner {
            &::before, &::after {
                background: url(../img/bg_introduce_sp.webp) no-repeat center bottom; background-size: contain;
            }
        }
        & .content{ overflow: hidden; padding-top: 50vw;}
        & .more{ display: block; background: none; position: absolute; bottom: 70px; right: 5em; z-index: 3; transform: rotate(-10deg); font-size: 5vw; font-weight: 500; color: #a35e45; letter-spacing: 0.1em;} 
        & .more::before{ content: ""; display: inline-block; width: 28px; height: 19px; margin-right: .5em; background-color: #a96047; clip-path: polygon(50% 19px, 0% 0%, 28px 0%);}
        & .more.show{ display: none;}
        & .list_content {
            & ol:not(:last-of-type){ border-bottom: none;}
            & ol { 
                position: relative;
                grid-template-columns: repeat(1, 1fr); 
                    
                    & li{ border-bottom: 1px solid #a96047;}
                    & li.sp_hide{ display: none; opacity: 0;}
                    &::before{ position: absolute; top: -95vw; right: -25vw; left: auto; content: ''; width: min(34vw , 157px); height: min(91.6vw , 406px); background: url(../img/illust_tree04_sp.webp) center; background-repeat: no-repeat; background-size: cover; z-index: 5;}
                    &::after{ position: absolute; top: 150vw; left: -33vw; content: ''; width: 34vw; height: 91.6vw; background: url(../img/illust_tree03_sp.webp) center; background-repeat: no-repeat; background-size: cover; z-index: 5;}
                    & p{ font-size: 3.2vw;}
                }
            & ol:nth-of-type(2){ 
                &::before{ display: none;}
                &::after{ display: none;}
            }
            & ol:nth-of-type(3){ 
                &::before{ top: 150vw; right: -31vw;}
                &::after{ display: none;}
            }
            & ol:nth-of-type(4){ 
                &::before{ display: none;}
                &::after{ top: 56vw;}
            }


            & ol:last-of-type li:last-of-type{ border-bottom: none;}
        }
        & .list_caption{ padding-bottom: 2em;}
    }

    #routine{
        margin-bottom: 100px;

        &::after{ width: 100vw; height: 105vw; bottom: -15vw; display: block; background: url(../img/illust_routine01_sp.webp)no-repeat;  background-size: contain; }
        & h2{ 
            & span::after{ background-color: #d8cd79; }
        }
        & .txtBox{ position: relative; z-index: 2;
            &::before{ position: absolute; top: auto; bottom: -70px; left: -5vw; content: ''; width: 97px; height: 351px; background: url(../img/illust_routine02_sp.webp) center; background-repeat: no-repeat; background-size: contain; z-index: -1;}
        }
    }
    
    #asia{
        margin-bottom: 100px;

        &::before{ content: none;}
        &::after{ width: 100vw; height: 97.5vw; bottom: -15vw; display: block; background: url(../img/illust_asia01_sp.webp)no-repeat;  background-size: contain; }
        & h2{ 
            & span::after{ background-color: #cda68d; }
        }

        & .txtBox{ position: relative; z-index: 2;
            &::before{ position: absolute; top: auto; bottom: -180px; right: -5vw; content: ''; width: 235px; height: 275px; background: url(../img/illust_asia02.webp) center; background-repeat: no-repeat; background-size: contain; z-index: -1;}
        }
    }
    
    #spring{
        &::after{ width: 100vw; height: 102.3vw; bottom: -9vw; display: block; background: url(../img/illust_spring01_sp.webp)no-repeat;  background-size: contain; }
        & h2{
            & span::after{ background-color: #a99dce; }
        }

        & .txtBox{ position: relative; z-index: 2;
            &::before{ position: absolute; top: auto; bottom: -180px; right: -24vw; content: ''; width: 249px; height: 358px; background: url(../img/illust_spring02_sp.webp) center; background-repeat: no-repeat; background-size: contain; z-index: -1;}
        }
    }

    #session{
        margin-bottom: 0; padding-bottom: 0;
    
        &::after{ width: 100vw; height:104.8vw; bottom: -8.8vw; display: block; background: url(../img/illust_session01_sp.webp)no-repeat;  background-size: contain; }
        & h2{
            & span::after{ background-color: #94b6c6; }
        }
    }

    #artwork{ 
        & h2{ margin-bottom: 50px;}
        & .content{ padding: 0 20px; }
        & .profile{ width: 100%;
        
            & p{ letter-spacing: 0.08em; font-size: 14px; line-height: 1.5;}
        }
        & .comment{ width: 100%; margin-top: 20px; }
    
    }
    }

@media (max-width: 458px){  
    #story{
        & section:not(#intro, #artwork) {
            & h3{ position: absolute; width: 15vw; top: -145vw; transform: scale(2);}
            }
        }

    #intro {
        &::after{ left: 0;}
        &::before{ top: -10vw;}
    }
}