/*============
body
=============*/
.body{
    background-image: linear-gradient(90deg, rgba(251, 213, 251, 0.4), rgba(149, 233, 243, 0.2));
}
/*============
animation
=============*/
.slide-up, .slide-up100{
    opacity: 0;
}
.slide-up.active{
    animation: slide-up10 0.6s ease-in-out forwards 0.2s;
}
.slide-up100.active{
    animation: slide-up100 1.2s ease forwards 0.2s;
}
.fade{
    opacity: 0;
}
.fade.active{
    animation: fade 1s ease-in-out forwards 0.2s;
}
/*============
mv
=============*/
.mv{
    position: relative;
    margin-top: -6%;
}
.mv .photo{
    width: 100%;
    margin-inline: auto;
    padding: 10% 20% 10%;
}
.mv .photo.active{
    animation: clippath-bottom01 1.6s ease-in-out forwards 0s;
}
.mv .title{
    position: absolute;
    top: 74%;
    left: 50%;
    translate: -50% 0;
    color: var(--color-black);
    font-family: var(--font-KaiseiOpti);
    font-size: calc(57 / 1280* 100vw);
    font-weight: normal;
    line-height: 1.2;
    clip-path: inset(0 100% 0 0);
}
.mv .title.active{
    animation: clippath-left01 1s ease forwards 1s;
}
.mv .date{
    position: absolute;
    bottom: 3%;
    right: 2%;
    color: var(--color-black);
    font-family: var(--font-NotoSansJP);
    font-size: calc(12 / 1280 * 100vw);
    letter-spacing: 0.6em;
    opacity: 0;
}
.mv .date.active{
    animation: fade 0.6s ease-out forwards 0.8s;
}
/*============
scroll-wrapper
=============*/
.scroll-wrapper{
    position: relative;
    margin-top: 3%;
}
.scroll-wrapper .bg-title{
    position: sticky;
    top: 30%;
    color: var(--color-black);
    font-family: var(--font-BebasNeue);
    font-size: calc(368 / 1280 * 100vw);
    opacity: 0.1;
    z-index: -1;
}
.scroll-wrapper .inner{
    width: 60%;
    margin: -18% auto -6%;
    padding: 0 0 8%;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
}
/*============
text-box 
=============*/
.scroll-wrapper .text-box{
    position: relative;
    width: 82%;
    margin: 10% auto 0;
    padding: 6% 10%;
    background: var(--color-white);
    border-top: 10px solid hotpink;
}
.scroll-wrapper .text-box .main-text{
    font-family: var(--font-NotoSansJP);
    font-size: calc(16 / 1280 * 100vw);
    line-height: 1.8;
}
.scroll-wrapper .text-box .main-text:not(:first-child){
    margin-top: 4em;
}
.scroll-wrapper .text-box .main-text._01{
    font-weight: bold;
    font-size: calc(30 / 1280* 100vw);
    letter-spacing: 0.04em;
}
.scroll-wrapper .text-box .main-text._01 span{
    font-family: var(--font-BebasNeue);
}
.scroll-wrapper .text-box .main-text._01 span:first-child{
    margin-right: 0.5em;
}
.scroll-wrapper .text-box .main-text._01 span:last-child{
    margin-left: -0.25em;
}
.scroll-wrapper .text-box .main-text._02 span{
    margin-top: -0.3em;
    font-size: calc(36 / 1280 * 100vw);
    line-height: 1;
    font-weight: 500;
}
.scroll-wrapper .text-box .main-text._03{
    margin-top: 2em;
}
.credit{
    margin-top: 20%;
    font-family: var(--font-NotoSansJP);
    font-size: calc(10 / 1280 * 100vw);
}
/*============
@media (max-width: 768px)
=============*/
@media (max-width: 768px){
    .mv .photo{
        padding: 10% 8% 20%;
    }
    .mv .title{
        top: 67%;
        width: 100%;
        text-align: center;
        font-size: calc(22 / 375* 100vw);
        line-height: 1.2;
    }
    .mv .date{
        font-size: calc(10 / 375 * 100vw);
    }
    .scroll-wrapper{
        width: 100%;
        margin-top: 12%;
    }
    .scroll-wrapper .bg-title{
        position: relative;
    }
    .scroll-wrapper .inner{
        width: 90%;
    }
    .scroll-wrapper .text-box{
        width: 90%;
        padding: 6% 3% 6% 5%;
    }
    .scroll-wrapper .text-box .main-text{
        font-size: calc(14 / 375 * 100vw);
    }
    .scroll-wrapper .text-box .main-text._01{
        margin-bottom: -2em;
        font-size: calc(17 / 375 * 100vw);
    }
    .scroll-wrapper .text-box .main-text._02 span{
        font-size: calc(36 / 375 * 100vw);
    }
    .credit{
        font-size: calc(7 / 375 * 100vw);
    }
}