@charset "utf-8";
/********************************************
common
********************************************/
.fadeIn{
    opacity: 0;
    transition: opacity 1.2s ease;
}
.fadeIn.fadeUnder{
    transform: translateY(50px);
}
.fadeIn.fadeLeft{
    transform: translateX(-50px);
}
.fadeIn.fadeRight{
    transform: translateX(50px);
}

.fadeIn.scrollIn,
.fadeIn.fadeUnder.scrollIn,
.fadeIn.fadeUnder.scrollIn,
.fadeIn.fadeUnder.scrollIn{
    opacity: 1;
    transform: translate(0,0);
}


#head__fixed__menu{
    transition: opacity 0.4s ease-in;
}
.open #head__fixed__menu{
    left: 0;
}

/********************************************
arrow
********************************************/
.arrow{
    opacity:0;
    transition: opacity 1.4s 0.6s ease;
}
.move .arrow{
    opacity:1;
}

/********************************************
fixed logo
********************************************/
.logo__s__mark{
    opacity: 0;
    transition: all 0.6s ease;
}
.logo__s__text{
    opacity: 0;
    transition: all 1.2s 0.4s ease;
}
.show .logo__s__mark{
    opacity: 1;
    animation:rorate 0.6s 1;
}
.show .logo__s__text{
    opacity: 1;
}

@keyframes rorate {
   0% { transform:rotate(0deg); }
   100% { transform:rotate(360deg); }
}

/********************************************
bar
********************************************/
.bar{
    opacity: 0;
    transition: opacity 0.6s ease;
}
.active .bar{
    opacity: 0.5;
}

.bar.horizon__01{ transition: opacity 0.6s 0.2s ease; }
.bar.horizon__02{ transition: opacity 0.3s ease; }
.bar.horizon__03{ transition: opacity 0.6s 1.2s ease; }
.bar.horizon__04{ transition: opacity 1.1s 0.4s ease; }
.bar.horizon__05{ transition: opacity 0.2s ease; }
.bar.horizon__06{ transition: opacity 0.6s 0.8s ease; }
.bar.horizon__12{ transition: opacity 0.8s 0.3s ease; }
.bar.horizon__13{ transition: opacity 0.3s 0.9s ease; }
.bar.horizon__14{ transition: opacity 0.9s ease; }
.bar.horizon__15{ transition: opacity 1.0s 0.3s ease; }
.bar.horizon__16{ transition: opacity 0.7s ease; }

.bar.horizon__07{ transition: opacity 0.3s 0.7s ease; }
.bar.horizon__08{ transition: opacity 0.9s 0.9s ease; }
.bar.horizon__09{ transition: opacity 0.3s 0.2s ease; }
.bar.horizon__10{ transition: opacity 1.1s ease; }
.bar.horizon__11{ transition: opacity 0.6s 0.6s ease; }

.bar.vertical__01{ transition: opacity 0.8s 0.2s ease; }
.bar.vertical__02{ transition: opacity 0.9s 1.4s ease; }
.bar.vertical__03{ transition: opacity 0.4s 1.7s ease; }
.bar.vertical__18{ transition: opacity 0.9s 1.1s ease; }
.bar.vertical__19{ transition: opacity 0.6s 0.7s ease; }
.bar.vertical__20{ transition: opacity 0.2s 1.8s ease; }

.bar.vertical__04{ transition: opacity 0.6s 1.2s ease; }
.bar.vertical__05{ transition: opacity 0.4s 1.7s ease; }
.bar.vertical__06{ transition: opacity 0.1s 1.0s ease; }
.bar.vertical__07{ transition: opacity 0.9s 0.6s ease; }
.bar.vertical__08{ transition: opacity 1.3s 0.2s ease; }
.bar.vertical__09{ transition: opacity 1.0s 0.8s ease; }

.bar.vertical__10{ transition: opacity 0.8s 0.4s ease; }
.bar.vertical__11{ transition: opacity 0.5s 1.1s ease; }
.bar.vertical__12{ transition: opacity 1.3s 0.7s ease; }
.bar.vertical__13{ transition: opacity 0.3s 0.9s ease; }

.bar.vertical__14{ transition: opacity 0.2s 0.4s ease; }
.bar.vertical__15{ transition: opacity 1.0s 0.2s ease; }
.bar.vertical__16{ transition: opacity 0.7s 0.3s ease; }
.bar.vertical__17{ transition: opacity 0.9s 0.7s ease; }


.move .bar.horizon__01{ animation: horizon_anim 9s 2s infinite; }
.move .bar.horizon__02{ animation: horizon_anim 8.1s infinite; }
.move .bar.horizon__03{ animation: horizon_anim 12s 2s infinite; }
.move .bar.horizon__04{ animation: horizon_anim_rev 10s infinite; }
.move .bar.horizon__05{ animation: horizon_anim 8.4s infinite; }
.move .bar.horizon__06{ animation: horizon_anim_rev 11.2s infinite; }

.move .bar.horizon__07{ animation: horizon_anim_rev 10.8s infinite; }
.move .bar.horizon__08{ animation: horizon_anim 13.2s 2s infinite; }
.move .bar.horizon__09{ animation: horizon_anim 8.8s infinite; }
.move .bar.horizon__10{ animation: horizon_anim 9.7s 2s infinite; }
.move .bar.horizon__11{ animation: horizon_anim_rev 11.1s infinite; }

.move .bar.horizon__12{ animation: horizon_anim_rev 7.5s infinite; }
.move .bar.horizon__13{ animation: horizon_anim 9.1s 2s infinite; }
.move .bar.horizon__14{ animation: horizon_anim_rev 10.2s infinite; }
.move .bar.horizon__15{ animation: horizon_anim_rev 11.3s infinite; }
.move .bar.horizon__16{ animation: horizon_anim 10.2s 2s infinite; }


.move .bar.vertical__01{ animation: vertical_anim 35.9s infinite; }
.move .bar.vertical__02{ animation: vertical_anim 38.3s 2s infinite; }
.move .bar.vertical__03{ animation: vertical_anim_rev 39.1s infinite; }
.move .bar.vertical__04{ animation: vertical_anim 36.1s 2s infinite; }

.move .bar.vertical__05{ animation: vertical_anim 33.2s infinite; }
.move .bar.vertical__06{ animation: vertical_anim_rev 35.9s infinite; }
.move .bar.vertical__07{ animation: vertical_anim_rev 37.4s infinite; }

.move .bar.vertical__08{ animation: vertical_anim 35.1s infinite; }
.move .bar.vertical__09{ animation: vertical_anim 33.8s 2s infinite; }

.move .bar.vertical__10{ animation: vertical_anim 39s 2s infinite; }
.move .bar.vertical__11{ animation: vertical_anim_rev 34.9s infinite; }
.move .bar.vertical__12{ animation: vertical_anim 37.1s infinite; }
.move .bar.vertical__13{ animation: vertical_anim_rev 35.6s 2s infinite; }

.move .bar.vertical__14{ animation: vertical_anim_rev 38.1s infinite; }
.move .bar.vertical__15{ animation: vertical_anim_rev 37.7s infinite; }

.move .bar.vertical__16{ animation: vertical_anim_rev 30.1s 2s infinite; }

.move .bar.vertical__17{ animation: vertical_anim 32.9s 2s infinite; }
.move .bar.vertical__18{ animation: vertical_anim 37.1s infinite; }
.move .bar.vertical__19{ animation: vertical_anim_rev 38.4s infinite; }
.move .bar.vertical__20{ animation: vertical_anim_rev 35.2s 2s infinite; }

@keyframes horizon_anim{
    0%{
        transform: translateY(0);
    }
    40%{
        transform: translateY(100vh);
    }
    80%{
        transform: translateY(0);
    }
}
@keyframes horizon_anim_rev{
    0%{
        transform: translateY(0);
    }
    40%{
        transform: translateY(-100vh);
    }
    80%{
        transform: translateY(0);
    }
}

@keyframes vertical_anim{
    0%{
        transform: translateX(0);
    }
    20%{
        transform: translateX(0);
    }
    60%{
        transform: translateX(100vw);
    }
    100%{
        transform: translateX(0);
    }
}
@keyframes vertical_anim_rev{
    0%{
        transform: translateX(0);
    }
    20%{
        transform: translateX(0);
    }
    60%{
        transform: translateX(-100vw);
    }
    100%{
        transform: translateX(0);
    }
}

/*****************************
        logo innner
*****************************/
.bar.circle__01{ transition: opacity 0.9s 1.8s ease; }
.bar.circle__02{ transition: opacity 0.4s 1.7s ease; }
.bar.circle__03{ transition: opacity 1.2s 2.0s ease; }
.bar.circle__04{ transition: opacity 0.5s 1.9s ease; }

.bar.dia__01{ transition: opacity 0.5s 3.8s ease; }
.bar.dia__02{ transition: opacity 0.4s 4.2s ease; }
.bar.dia__03{ transition: opacity 0.2s 4.6s ease; }
.bar.dia__04{ transition: opacity 0.3s 3.9s ease; }
.bar.dia__05{ transition: opacity 0.8s 3.3s ease; }
.bar.dia__06{ transition: opacity 0.1s 4.0s ease; }
.bar.dia__07{ transition: opacity 0.7s 3.8s ease; }

.move .bar.dia__01{ animation: rotate_45 13s 1s infinite; }
.move .bar.dia__02{ animation: rotate_45 15s infinite; }
.move .bar.dia__03{ animation: rotate_45 10s infinite; }
.move .bar.dia__04{ animation: rotate_45 9s 3s infinite; }
.move .bar.dia__05{ animation: rotate_45 11s infinite; }
.move .bar.dia__06{ animation: rotate_45 8s 2s infinite; }
.move .bar.dia__07{ animation: rotate_12 18s infinite; }

@keyframes rotate_45{
    0%{
        transform:rotate(-45deg);
    }
    40%{
        transform:rotate(0);
    }
    80%{
        transform:rotate(-45deg);
    }
}
@keyframes rotate_12{
    0%{
        transform:rotate(-12deg);
    }
    40%{
        transform:rotate(0);
    }
    80%{
        transform:rotate(-12deg);
    }
}

/*****************************
        logo
*****************************/
#logo_N img{
    opacity: 0;
    transform: translateX(10vw);
    transition: all 0.3s 2.4s ease;
}
#logo_O img{
    opacity: 0;
    transition: all 0.8s 1.8s ease;
}
#logo_R img{
    opacity: 0;
    transform: translateX(-10vw);
    transition: all 0.4s 3.0s ease;
}
.active #logo_N img,
.active #logo_O img,
.active #logo_R img{
    opacity: 1;
    transform: translate(0);
}

#logo__under .under__01{
    opacity: 0;
    transform: translateX(9vw);
    transition: opacity 0.6s 1.8s ease, transform 0.6s 1.8s ease;
}
#logo__under .under__02{
    opacity: 0;
    transition: opacity 0.6s 1.8s ease, transform 0.6s 1.8s ease;
}
#logo__under .under__03{
    opacity: 0;
    transform: translateX(-9vw);
    transition: opacity 0.6s 1.8s ease, transform 0.6s 1.8s ease;
}
#logo__under .under__04{
    opacity: 0;
    transform: translateX(-9vw);
    transition: opacity 0.6s 2.4s ease, transform 0.6s 2.4s ease;
}
#logo__under .under__05{
    opacity: 0;
    transform: translateX(-9vw);
    transition: opacity 0.6s 2.4s ease, transform 0.6s 2.4s ease;
}
#logo__under .under__06{
    opacity: 0;
    transform: translateX(-9vw);
    transition: opacity 0.6s 2.4s ease, transform 0.6s 2.4s ease;
}
#logo__under .under__07{
    opacity: 0;
    transform: translateX(-9vw);
    transition: opacity 0.6s 2.4s ease, transform 0.6s 2.4s ease;
}
#logo__under .under__08{
    opacity: 0;
    transform: translateX(-9vw);
    transition: opacity 0.6s 2.4s ease, transform 0.6s 2.4s ease;
}
#logo__under .under__09{
    opacity: 0;
    transform: translateX(-9vw);
    transition: opacity 0.6s 2.4s ease, transform 0.6s 2.4s ease;
}
#logo__under .under__10{
    opacity: 0;
    transform: translateX(-9vw);
    transition: opacity 0.6s 2.4s ease, transform 0.6s 2.4s ease;
}
#logo__under .under__11{
    opacity: 0;
    transform: translateX(-9vw);
    transition: opacity 0.6s 2.4s ease, transform 0.6s 2.4s ease;
}


.active #logo__under .under__01,
.active #logo__under .under__02,
.active #logo__under .under__03,
.active #logo__under .under__04,
.active #logo__under .under__05,
.active #logo__under .under__06,
.active #logo__under .under__07,
.active #logo__under .under__08,
.active #logo__under .under__09,
.active #logo__under .under__10,
.active #logo__under .under__11{
    opacity: 1;
    transform: translate(0);
}

/*****************************
        smile
*****************************/
.about__mouth{
    animation: smile 0.3s  infinite;
}
@keyframes smile {
    0% {transform: translate( calc( -50% + 0px ), 0px) rotateZ(0deg)}
    25% {transform: translate( calc( -50% + 3px ), 3px) rotateZ(2deg)}
    50% {transform: translate( calc( -50% + 0px ), 3px) rotateZ(0deg)}
    75% {transform: translate( calc( -50% + 3px ), 0px) rotateZ(-2deg)}
    100% {transform: translate( calc( -50% + 0px ), 0px) rotateZ(0deg)}
}