@charset "UTF-8";

/*--------------------------------------
bg
----------------------------------------*/
#bg{
	width:100%;
	min-width: 1380px;
	position:fixed;
	height:100vh;
	background: url(../img/bg.jpg);
	z-index:0;
}

#bg {
  animation: position-dot 50s linear infinite;
  will-change: background-position; 
}

@keyframes position-dot {
  0% {
    background-position: 0 0, 0 0; 
  }100% {
    background-position: -1700px 0, 0 0; 
	}
}


/*--------------------------------------
mvtkWidget
----------------------------------------*/
#mvtk{
	width:100%;
	min-width: 1200rem;
	margin:80rem auto 0;
}

#mvtkWidget{
	position:relative;
}

#mvtk-widgets-container{
	margin:0 auto;
}



/* --------------------------------------------------
animation
-------------------------------------------------- */

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px);
		pointer-events: none;
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
		pointer-events: auto;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale(0.8);
    transform:scale(0.8);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1.0);
    transform:scale(1.0);
  }
}

@keyframes zoomOut {
  from {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform:scale(1.2);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1.0);
    transform:scale(1.0);
  }
}

@keyframes poyon {
  0%   { transform: scale(0.3, 0.3); }
  20%  { opacity: 1; transform: scale(1.1, 1.1); }
  40%  { opacity: 1; transform: scale(0.8, 0.8); }
  60%  { opacity: 1; transform: scale(1.05, 1.05); }
  80%  { opacity: 1; transform: scale(0.95, 0.95); }
  100% { opacity: 1; transform: scale(1.0, 1.0); }
}

@keyframes blur {
  0% {
	  opacity: 0;
    filter: blur(40rem);
  }
  100% {
	  opacity: 1;
    filter: blur(0);
  }
}

@keyframes maskIn {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(-10px);
  }
}

#main ul li,
#logo,
#date,
.p-topNav ul li,
.c-sns{
	opacity:0;
}

.c-sns {
  opacity: 0;
  pointer-events: none;
}


.is-loaded #main ul li:nth-child(3){
  animation: blur 1.0s linear 1.0s forwards;
}

.is-loaded #main ul li:nth-child(4){
  animation: blur 1.0s linear 1.2s forwards;
}

.is-loaded #main ul li:nth-child(9){
  animation: blur 1.0s linear 1.6s forwards;
}

.is-loaded #main ul li:nth-child(6){
  animation: blur 1.0s linear 1.8s forwards;
}

.is-loaded #main ul li:nth-child(1){
  animation: blur 1.0s linear 2.0s forwards;
}

.is-loaded #main ul li:nth-child(7){
  animation: blur 1.0s linear 2.2s forwards;
}

.is-loaded #main ul li:nth-child(10){
  animation: blur 1.0s linear 2.4s forwards;
}

.is-loaded #main ul li:nth-child(2){
  animation: blur 1.0s linear 2.6s forwards;
}

.is-loaded #main ul li:nth-child(5){
  animation: blur 1.0s linear 2.8s forwards;
}

.is-loaded #main ul li:nth-child(8){
  animation: blur 1.0s linear 3.0s forwards;
}

.is-loaded #logo{
  animation: blur 1.4s linear 1.0s forwards;
}

.is-loaded #date{
  animation: blur 1.4s linear 1.4s forwards;
}

.is-loaded .p-topNav ul li:nth-child(1){
  animation: fadeInUp 1.0s cubic-bezier(.17,.67,.3,.92) 2.0s forwards;
}

.is-loaded .p-topNav ul li:nth-child(2){
  animation: fadeInUp 1.0s cubic-bezier(.17,.67,.3,.92) 2.2s forwards;
}

.is-loaded .c-sns{
	animation: fadeInDown 1.0s cubic-bezier(.17,.67,.3,.92) 2.2s forwards;
}