@charset "utf-8";
/**** arrow ****/
.mv__arrow span{
    animation: arrow-move 2s ease-in-out infinite;
}
.mv__arrow span.arrow__02{
    animation: arrow-move 2s 1s ease-in-out infinite;
}
@keyframes arrow-move {
    0% { opacity: 0; transform: translate(-50%,-30%);}
   70% { opacity: 1; transform: translate(-50%,0)}
  100% { opacity: 0;}
}

/**** title ****/
.js-text-effect em{
    display: inline-block;
    opacity: 0;
    visibility: visible;
    transform: rotateY(90deg);
}

/**** fade ****/
.fadeIn{
    opacity: 0;
    transition: all 1.2s ease-in-out;
}
.fadeIn.EF__fade{ filter: blur(1.5rem); }
.fadeIn.EF__bottom{ transform: translateY(20%); transition: all 0.6s ease-in-out;}
.fadeIn.EF__right{ transform: translateX(20%); transition: all 0.6s ease-in-out;}

.fadeIn.scrollIn{
    opacity: 1;
}
.fadeIn.EF__fade.scrollIn{
    filter: blur(0);
}
.fadeIn.EF__bottom.scrollIn{
    transform: translateY(0);
}
.fadeIn.EF__right.scrollIn{
    transform: translateX(0);
}

/**** firest view ****/
.start__logo,
.start__text dt b,
.start__text dt span,
.start__text dd{
    opacity: 0;
}

.start__logo{
    animation: fv-logo 2.2s ease-in-out forwards;
}
.start__text dt b{
    animation: fv-text 2.2s 1.0s ease-in-out forwards;
}
.start__text dt span{
    animation: fv-text 2.2s 2.4s ease-in-out forwards;
}
.start__text dd{
    animation: fv-text 1.4s 4.0s ease-in-out forwards;
}

@keyframes fv-logo {
    0% { opacity: 0; filter: blur(1.5rem);}
   25% { opacity: 1; filter: blur(0);}
   80% { opacity: 1; filter: blur(0);}
  100% { opacity: 0;}
}
@keyframes fv-text {
    0% { opacity: 0; filter: blur(1.5rem);}
   100% { opacity: 1; filter: blur(0);}
}

.star__area{
    animation: fv-end 1.5s 8.5s ease-in-out forwards;
}
@keyframes fv-end {
    0% { opacity: 1; filter: blur(0); transform: translateY(0);}
   100% { opacity: 0; filter: blur(1.5rem); transform: translateY(-50%);}
}

/**** contents ****/
.yoru__contents{
    filter: blur(1.5rem);
    opacity: 0;
    animation: contents-box 2s 7.3s ease-in-out forwards;
}
@keyframes contents-box {
    0% { opacity: 0; filter: blur(1.5rem);}
   100% { opacity: 1; filter: blur(0);}
}

.mv__area h1 span:nth-child(1){
    opacity: 0;
    animation: contents-text 2s 7.5s ease-in-out forwards;
}
.mv__area h1 span:nth-child(2){
    opacity: 0;
    animation: contents-text 2s 8.0s ease-in-out forwards;
}
@keyframes contents-text {
    0% { opacity: 0; filter: blur(1.5rem); transform: translateY(-50%);}
   100% { opacity: 1; filter: blur(0); transform: translateY(0);}
}

/**** btn ****/
.fixed__btn.yoru__btn{
    opacity: 0;
    animation: btn-fade 1.5s 8.0s ease-in-out forwards;
}
.menu__sche{
    opacity: 0;
    animation: btn-fade 1.5s 7.5s ease-in-out forwards;
}
.menu__buy{
    opacity: 0;
    animation: btn-fade 1.5s 7.6s ease-in-out forwards;
}

@keyframes btn-fade {
    0% { opacity: 0; filter: blur(1.5rem);}
   100% { opacity: 1; filter: blur(0);}
}

a{
    transition: opacity 0.6s ease;
}
a:hover{
    opacity: 0.7;
}