@charset "utf-8";
@import (once) "../css/default.less";

/* ////////////////////////////////// */
.zoomOut{
animation-name:fadeInAnime;
animation-duration:.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
from {
transform: scale(10);
opacity: 0;
}
to {
opacity: 1;
}
}


/* ////////////////////////////////// */
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(150px);
}
to {
opacity: 1;
transform: translateY(0);
}
}


/* ////////////////////////////////// */
.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
from {
opacity: 0;
transform: translateX(-200px);
}
to {
opacity: 1;
transform: translateX(0);
}
}


/* ////////////////////////////////// */
.fadeRight{
animation-name:fadeRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
from {
opacity: 0;
transform: translateX(200px);
}
to {
opacity: 1;
transform: translateX(0);
}
}


/* ////////////////////////////////// */
.flipDownTrigger{ opacity:0; }
.flipDown{
animation-name:flipDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipDownAnime{
from {
transform: perspective(2500px) rotateX(100deg);
opacity: 0;
}

to {
transform: perspective(2500px) rotateX(0);
opacity: 1;
}
}


/* ////////////////////////////////// */
.eachTextAnime span{
opacity: 0;
}
.eachTextAnime.appeartext span{
animation:text_anime_on 1s ease-out forwards;
}

@keyframes text_anime_on {
from {
opacity:0;
}
to {
opacity:1;
}
}


/* ////////////////////////////////// */
.scroll{
.pa;
bottom:60px;
left:0;
right:0;
.center;
height:60px;
width:1px;
}

.scroll p{
.dn;
position: absolute;
left:-20px;
top: -20px;
color: #FFF;
}

.scroll::after{
content: "";
position: absolute;
top: 0;
width: 1px;
height: 60px;
background: #FFF;
animation: pathmove 1.4s ease-in-out infinite;
opacity:0;
}

@keyframes pathmove{
0%{
height:0;
top:0;
opacity: 0;
}
30%{
height:30px;
opacity: 1;
}
100%{
height:0;
top:50px;
opacity: 0;
}
}


/* リンク表示 ///////////////////////*/
@keyframes tatchPointAnime{
0% {
opacity: 0;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.4, .4, .4);
transform: scale3d(.4, .4, .4);
}
75% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}

.memory dt p::before{
animation-name: tatchPointAnime;
animation-duration:3s;
animation-iteration-count: infinite;
}
.profile .sns a::before{
animation-name: tatchPointAnime;
animation-duration:3s;
animation-iteration-count: infinite;
}
.question dt a::before{
animation-name: tatchPointAnime;
animation-duration:3s;
animation-iteration-count: infinite;
}
.profile .touch p::before{
animation-name: tatchPointAnime;
animation-duration:3s;
animation-iteration-count: infinite;
}


/* モーダル表示 ///////////////////////*/
.show{
.db !important;
animation-name:fadeIn;
animation-duration:.5s;
animation-fill-mode:forwards;
}

@keyframes fadeIn{
from {
opacity:0;
}
to {
opacity:1;
}
}


/* 回答表示 host1 ///////////////////////*/
.show .host1{
opacity: 0;
animation-name:fadeUp;
animation-duration:1.3s;
animation-fill-mode:forwards;
}

@keyframes fadeUp{
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}


/* 回答表示 host2 ///////////////////////*/
.show .host2{
opacity: 0;
animation-name:fadeUp;
animation-duration:1s;
animation-delay:.3s;
animation-fill-mode:forwards;
}

@keyframes fadeUp{
from {
opacity: 0;
transform: translateY(150px);
}
to {
opacity: 1;
transform: translateY(0);
}
}


/* テーブル表示  ///////////////////////*/
.show .desk{
opacity: 0;
animation-name:fadeUp;
animation-duration:1s;
animation-delay:.3s;
animation-fill-mode:forwards;
}

@keyframes fadeUp{
from {
opacity: 0;
transform: translateY(150px);
}
to {
opacity: 1;
transform: translateY(0);
}
}


/* メモリー表示  ///////////////////////*/
.show .photo{
opacity: 0;
animation-name:fadeUp;
animation-duration:1s;
animation-delay:.3s;
animation-fill-mode:forwards;
}

@keyframes fadeUp{
from {
opacity: 0;
transform: translateY(150px);
}
to {
opacity: 1;
transform: translateY(0);
}
}


/* ////////////////////////////////// */
.memoryIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
from {
transform: scale(3);
top:50vh;
left:0vw;
opacity: 0;
}
to {
opacity: 1;
}
}