/*============
body
=============*/
.body{
    background: #fff;
}
video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: bottom; 
}
.splide__track,
.splide__list,
.splide__slide {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
/*============
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: -11.5%;
}
.mv .slide-box {
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    aspect-ratio: 1.6 / 1;
    overflow: hidden;
}
.mv .title{
    position: absolute;
    top: 72%;
    left: 5%;
    translate: 0 -50%;
    color: var(--color-white);
    font-family: var(--font-ZenOldMincho);
    font-size: calc(57 / 1280* 100vw);
    font-weight: normal;
    line-height: 2;
}
.mv .date{
    position: absolute;
    bottom: 3%;
    right: 2%;
    color: var(--color-white);
    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;
}
/*============
共通
=============*/
.main-text{
    font-family: var(--font-NotoSansJP);
    font-size: calc(14 / 1280 * 100vw);
    letter-spacing: 0.1em;
    line-height: 2.2;
}
.day{
    font-family: var(--font-ZenOldMincho);
    font-size: calc(18 / 1280 * 100vw);
    font-weight: bold;
    text-transform: uppercase;
}
.day span{
    margin-left: 0.5em;
    font-size: calc(10 / 1280 * 100vw);
    font-weight: normal;
}
div[class*="day0"] .text-box{
    margin: 2% auto 0;
}
div[class*="day0"] .text-box .main-text:not(:first-child){
    margin-top: 2em;
}
.caption{
    margin-top: 1em;
    font-family: var(--font-NotoSansJP);
    font-size: calc(10 / 1280 * 100vw);
}
/*============
lead
=============*/
.lead{
    margin-top: 6%;
}
.lead .main-text{
    margin-top: 2em;
    text-align: center;
}
/*============
day01
=============*/
.day01{
    margin-top: 6%;
}
.day01 .day{
    margin: 0 auto 0 20%;
}
.day01-1{
    align-items: flex-end;
    width: 60%;
    margin: 1% auto 0;
}
.day01-1 .video-wrapper{
    width: 50%;
    aspect-ratio: 1 / 1.2;
} 
.day01-1 .text-box{
    width: 50%;
    padding-left: 4%;
}
.day01-1 .text-box .main-text{
    padding-bottom: 26%;
    line-height: 4;
}
.day01-2{
    width: 80%;
    margin: 6% auto 0;
}
.day01-2 .photo{
    position: relative;
}
.day01-2 .photo._02{
    margin-top: 10%;
}
.day01-2 .photo._03{
    margin-top: 20%;
}
.day01-2 .photo._02 .caption{
    padding: 0 5%;
    text-align: center;
}
.day01-2 .photo._03 .caption{
    text-align: right;
}
.day01-2 .photo .mask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 2em);
    background: var(--color-white);
}
.day01-2 .photo .mask.active{
    animation: 1.6s slide-down100-100 ease-out 0.4s forwards;
}
.day01-3{
    position: relative;
    width: 34%;
    margin: 6% auto 0;
}
.day01-3 .video-wrapper{
    aspect-ratio: 1/1;
}
.day01-3 video{
    object-position: 0 73%;
}
.day01-3 .decorative-text{
    position: absolute;
    top: 1%;
    left: -26%;
    font-family: var(--font-NotoSansJP);
    font-size: calc(16 / 1280 * 100vw);
    font-weight: bold;
    line-height: 1.4;
}
.day01-4{
    width: 80%;
    margin: 6% auto 0;
}
.day01-4 video{
    aspect-ratio: 1000 / 1333;
}
.day01-4 .text-box{
    width: 60%;
}
.day01-5{
    width: 60%;
    margin: 6% auto 0;
}
.day01-5 .text-box{
    width: 80%;
}
/*============
day02
=============*/
.day02{
    margin-top: 10%;
}
.day02 .day{
    margin: 0 auto 0 10%;
}
.day02-1{
    width: 80%;
    margin: 1% auto 0;
}
.day02-1 .photo .image{
    opacity: 0;
    clip-path: inset(100% 0 0 0);
}
.day02-1 .photo .image.active{
    animation: 1s clippath-bottom01 ease 0s forwards;
}
.day02-1 .text-box{
    width: 60%;
    margin: 1% auto 0;
}
.day02-2{
    width: 34%;
    margin: 6% auto 0;
}
/*============
credit
=============*/
.credit{
    margin-top: 6%;
    margin-left: 33.333%;
    text-align: left;
    font-family: var(--font-ZenOldMincho);
    font-size: calc(10 / 1280 * 100vw);
}
/*============
top-about
=============*/
.top-about{
    background: var(--color-top-about);
}
/*============
@media (max-width: 768px)
=============*/
@media (max-width: 768px){
    .mv{
        height: 100vh;
        margin-top: -18%;
    }
    .mv .title{
        font-size: calc(30 / 375 * 100vw);
    }
    .mv .date{
        font-size: calc(12 / 375 * 100vw);
    }
    .main-text{
        font-size: calc(14 / 375 * 100vw);
        line-height: 1.8;
    }
    .caption,
    .day01-2 .photo._01 .caption,
    .day01-2 .photo._02 .caption,
    .day01-2 .photo._03 .caption{
        width: 90%;
        margin: 0.5em auto 0;
        padding: 0;
        text-align: left;
        font-size: calc(11 / 375 * 100vw);
        line-height: 1.8;
    } 
    div[class*="day0"]{
        width: 100%;
    }
    div[class*="day0"] .day{
        margin: 0 auto 0 6%;
        font-size: calc(16 / 375 * 100vw);
    }
    div[class*="day0"] .day span{
        font-size: calc(12 / 375 * 100vw);
    }
    div[class*="day0"] .text-box{
        width: 80%;
        margin-top: 3%;
        padding: 0;
    }
    div[class*="day0"] .text-box .main-text{
        padding: 0;
        line-height: 1.8;
    }
    .day01,
    .day02{
        margin-top: 20%;
    }
    .day01-1,
    .day02-1{
        flex-direction: column;
        margin: 3% auto 0;
    }
    .day01-1 .video-wrapper{
        width: 100%;
    }
    .day01-1 .video-wrapper video{
        aspect-ratio: 1 / 1;
    }
    .day01-2{
        flex-direction: column;
        width: 60% !important;
        margin: 12% auto 0;
    }
    .day01-2 .photo._01,
    .day01-2 .photo._02,
    .day01-2 .photo._03{
        margin-top: 6%;
    }
    .day01-3{
        margin-top: 6%;
    }
    .day01-5,
    .day02-2{
        margin-top: 14%;
    }
    .day01-3{
        width: 60% !important;
    }
    .day01-3 .decorative-text{
        font-size: calc(12 / 375 * 100vw);
    }
    .day01-4{
        margin-top: 14%;
    }
    .credit{
        margin-top: 10%;
        margin-left: 10%;
        font-size: calc(10 / 375 * 100vw);
    }
}