/*============
body
=============*/
.body{
    background: rgb(248, 245, 239);
}
/*============
mv
=============*/
.mv{
    position: relative;
    aspect-ratio: 2560 / 1720;
    width: 100%;
    height: 100vh;
}
.mv .chikuwa_bg{
    min-width: auto;
    height: 100%;
}
.mv .chikuwa-box{
    position: absolute;
    bottom: 0;
    right: 16%;
    width: 20%;
    animation: shake 2s ease-out infinite 2s;
    transform-origin: center bottom ;
}
@keyframes  shake{
  0%{
    rotate: 0deg;
  }
  40%{
    rotate: 0deg;
  }
  45%{
    rotate: -10deg;
  }
  50%{
    rotate: 0deg;
  }
  55%{
    rotate: 10deg;
  }
  60%{
    rotate: 0deg;
  }
  100%{
    rotate: 0deg;
  }
}
.mv .chikuwa-box .chikuwa{
    position: relative;
    animation: chikuwa 0.6s ease-out forwards 0s;
    opacity: 0;
}
@keyframes  chikuwa{
  0%{
    transform: rotateY(0) translateY(50%);
    opacity: 1;
  }
  100%{
    transform: rotateY(360deg) translateY(0);
    opacity: 1;
  }
}
.mv .chikuwa-box .chikuwa:nth-child(2){
    animation-delay: 0.5s;
    z-index: 2;
}
.mv .chikuwa-box .chikuwa:nth-child(3){
    animation-delay: 1s;
    z-index: 2;
}
.mv .title{
    position: absolute;
    bottom: 5%;
    left: 4%;
    color: var(--color-white);
    font-family: var(--font-RocknRollOne);
    font-size: calc(68 / 1280 * 100vw);
    font-weight: normal;
    line-height: 1.4;
     clip-path: inset(0 100% 0 0);
}
.mv .title span{
    margin-left: 5em;
}
.mv .title.active{
    animation: clippath-left01 1s ease forwards 0.8s;
}
.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-wrapper
=============*/
.content-wrapper{
    position: relative;
    margin-top: -128%;
    padding-top: 6%;
}
.content-wrapper .icon-box{
    position: sticky;
    flex-direction: column;
    top: 0;
    left: 1%;
    width: 1%;
    opacity: 0.6;
    z-index: -1;
    overflow: hidden;
}
.content-wrapper .icon-box:nth-child(2){
    top: -10%;
    left: 3%;
    margin-bottom: -2%;
}
.content-wrapper .icon-box .icon{
    animation: shake 2s ease-out infinite 2s;
}
/*============
text-box 
=============*/
.text-box{
    position: relative;
    width: 62%;
    margin-inline: auto;
}
.text-box .main-text{
    font-family: var(--font-NotoSansJP);
    font-size: calc(16 / 1280 * 100vw);
    line-height: 1.8;
    translate: 0 10%;
    opacity: 0;
}
.text-box .main-text:not(:first-child){
    margin-top: 2em;
}
.text-box .main-text.active{
    animation: slide-up10 1s ease-out forwards 0s;
}
.bike-box{
    width: 100%;
    overflow: hidden;
}
.bike{
    width: 10%;
    margin-top: 6%;
    overflow: hidden;
    translate: 163% 0;
    rotate: -3deg;
}
.bike.active{
    animation: bike 2s ease-out infinite 0.6s;
}
@keyframes  bike{
  0%{
    translate: 163% 0;
    rotate: -3deg;
  }
  90%{
    translate: 700% -10%;
    rotate: -3deg;
  }
  100%{
    translate: 1000% -100%;
    rotate: -45deg;
  }
}
.credit{
    font-family: var(--font-NotoSansJP);
    font-size: calc(12 / 1280 * 100vw);
    margin: 6% auto 0 19%;
}
/*============
@media (max-width: 768px)
=============*/
@media (max-width: 768px){
    .mv{
        height: 80vh;
    }
    .mv .chikuwa_bg{
        width: 200%;
        max-width: inherit;
    }
    .mv .chikuwa-box{
        right: 29%;
    }
    .mv .title{
        bottom: 9%;
        font-size: calc(28 / 375* 100vw);
        line-height: 1.6;
    }
    .mv .title span{
        margin-left: 0;
    }
    .mv .date{
        font-size: calc(10 / 375 * 100vw);
    }
    .content-wrapper{
        margin-top: -200%;
    }
    .content-wrapper .icon-box{
        width: 3%;
    }
    .content-wrapper .icon-box:nth-child(2){
        display: none;
    }
    .text-box{
        width: 80%;
        margin-top: 10%;
    }
    .text-box .main-text{
        font-size: calc(14 / 375 * 100vw);
    }
    .bike{
        width: 20%;
        margin-top: 20%;
        translate: 38% 0;
    }
    .bike.active{
        animation-duration: 1.2s;
    }
    @keyframes  bike{
        0%{
            translate: 38% 0;
            rotate: -3deg;
        }
        90%{
            translate: 300% 0;
            rotate: -3deg;
        }
        100%{
            translate: 500% -100%;
            rotate: -45deg;
        }
    }
    /*============
    credit
    =============*/
    .credit{
        margin: 14% auto 0 11%;
        font-size: calc(10 / 375* 100vw);
    }
}