/*============
body
=============*/
.body{
    background: #ded1c6;
}
/*============
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;
}
.mv .slide-box{
    width: 48%;
    margin-right: 0;
    margin-left: auto;
}
.mv .image{
    width: 100%;
    object-fit: cover;
    object-position: 32%;
}
.mv .image.active{
    animation: zoomin01 3.6s ease-in-out forwards 0s;
}
.mv .title{
    width: fit-content;
    position: absolute;
    top: 54%;
    left: 2%;
    translate: 0 -50%;
    color: var(--color-black);
    font-family: var(--font-KaiseiOpti);
    font-size: calc(57 / 1280* 100vw);
    font-weight: normal;
    line-height: 2;
    clip-path: inset(0 100% 0 0);
}
.mv .title.active{
    animation: clippath-left01 1s ease forwards 0.4s;
}
.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{
    width: 60%;
    margin: 0 auto -6%;
    padding: 10% 0 8%;
    background: var(--color-white);
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
}
/*============
text-box 
=============*/
.text-box{
    position: relative;
    width: 62%;
    margin: 6% auto 0;
}
.text-box .main-text{
    font-family: var(--font-NotoSansJP);
    font-size: calc(16 / 1280 * 100vw);
    line-height: 1.8;
}
.text-box .main-text:not(:first-child){
    margin-top: 4em;
}
.text-box .main-text._01{
    position: relative;
    margin-left: -44%;
    background: white;
    width: fit-content;
    padding: 0.5em 0.5em 0.5em 1em;
    border: 4px solid var(--color-black);
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
    transform: rotate(-2deg);
    font-weight: bold;
    font-size: calc(18 / 1280* 100vw);
    opacity: 0;
}
.text-box .main-text._01.active{
    animation: clippath-left01 1s ease forwards 0.2s;
}
.text-box .main-text._02{
    margin-top: 78%;
}
.text-box .decorative-text{
    margin-top: 0.2em;
    text-decoration: underline;
    font-family: var(--font-BebasNeue);
    font-size: 8vw;
    line-height: 1;
    white-space: nowrap;
}
.photo01{
    margin-top: -30%;
    outline: 4px solid var(--color-black);
}
.photo02{
    width: 30%;
    margin: -11% -36% -16% auto;
}
.photo03-box{
    width: 56%;
    margin: -6% auto -33% -69%;
    transform: rotate(-9deg);
}
.photo03-box .decorative-text{
    text-align: center;
    font-size: calc(20 / 1280* 100vw);
    text-decoration: none;
}
.photo04{
    width: 30%;
    margin: -6% -48% -20% auto;
    transform: rotate(-2deg);
}
.photo05-box{
    align-items: center;
    width: 21%;
    margin: 4% auto -11% -42%;
    transform: rotate(-2deg);
}
.photo05-box .image{
    margin-right: 13%;
}
.photo05-box .image:nth-child(1){
    animation-delay: 0.2s;
}
.photo05-box .image:nth-child(2){
    animation-delay: 0.6s;
}
.photo05-box .image:nth-child(3){
    animation-delay: 1s;
}
.diamond-box{
    width: 30%;
    margin: -2% -11% -18% auto;
}
.diamond-box .image{
    animation: flashing01 infinite 1400ms;
}
.text-box .decorative-box._01{
    position: absolute;
    left: -51%;
    margin-top: 12%;
}
.text-box .decorative-box._02{
    text-align: center;
}
.text-box .decorative-box._02 .decorative-text{
    font-size: 1.2vw;
    letter-spacing: 0.1em;
    text-decoration: none;
}
.credit{
    margin-top: 20%;
    font-family: var(--font-NotoSansJP);
    font-size: calc(10 / 1280 * 100vw);
}
/*============
@media (max-width: 768px)
=============*/
@media (max-width: 768px){
    .mv{
        height: fit-content;
    }
    .mv .image{
        height: 69vh;
        object-fit: cover;
        object-position: 54% 0;
    }
    .mv .title{
        top: 60%;
        font-size: calc(22 / 375* 100vw);
        line-height: 2.2;
    }
    .mv .date{
        font-size: calc(10 / 375 * 100vw);
    }
    .scroll-wrapper{
        width: 90%;
    }
    .text-box{
        width: 70%;
    }
    .photo01{
        margin-top: 16%;
    }
    .text-box .main-text._01{
        margin: 0 auto;
        padding: 0;
        border: none;
        box-shadow: none;
        font-size: calc(14 / 375* 100vw);
        transform: rotate(0);

    }
    .text-box .main-text{
        font-size: calc(14 / 375 * 100vw);
    }
    .text-box .main-text._02{
        margin-top: 84%;
    }
    .text-box .decorative-box._01{
        margin-top: 23%;
        left: -6%;
    }
    .text-box .decorative-text{
        font-size: 10vw;
    }
    .photo02{
        width: 33%;
        margin: 0% -29% -16% auto;
    }
    .photo03-box{
        width: 53%;
        margin: 16% auto -12% -19%;
    }
    .photo03-box .decorative-text{
        font-size: 3vw;
    }
    .photo04{
        width: 44%;
        margin: -9% -24% -30% auto;
    }
    .photo05-box{
        width: 21%;
        margin: 12% auto -11% -25%;
    }
    .diamond-box{
        width: 34%;
        margin: 6% -12% -18% auto;
    }
    .text-box .decorative-box._02 .decorative-text{
        font-size: calc(10 / 375 * 100vw);
    }
    .credit{
        font-size: calc(7 / 375 * 100vw);
    }
}