@charset "utf-8";

/*open_shutter*/
.shutt_logo {
	position: fixed;
	left:1%;
	bottom:2%;	
}
.shutt_logo img{
	width: 40%;
}
.shutter{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#ffff00;
	z-index:9999;
	animation: byeShutter 1.0s forwards;
}
.shutter::before,
.shutter::after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    margin:auto;
}
.shutter::before{
    background-color:#72FFF8;
    width:0;
    height:1px;
    animation: shutterOpen1 2.0s forwards;
  }
.shutter::after{
    width:120%;
    height:0;
    margin-left:-10%;
    background-color:#f3f3f3;
    animation: shutterOpen2 1.0s forwards;
  }
}
#container{
	animation: contentScale 1.0s forwards;
}
@keyframes byeShutter{
  70%{
    opacity:1;
  }
  100%{
    opacity:0;
    display:none;
    z-index:-1;
  }
}
@keyframes shutterOpen1{
  0%{
    width:100%;
    height:0;
  }
  70%{
    width:150%;
    height:150%;
    transform:rotate(-180deg);
  }
  100%{
    width:300%;
    height:100%;
    transform:rotate(-360deg);
  }
}
@keyframes shutterOpen2{
  60%{
    width:120%;
    height:0;
    transform:rotate(5deg);
  }
  90%{
    width:120%;
    height:100%;
    transform:rotate(-5deg);
  }
  100%{
    width:120%;
    height:100%;
    transform:rotate(-5deg);
  }
}
@keyframes contentScale{
  70%{
    transform:perspective(800px) scale(0.9) rotateX(15deg);
  }
  100%{
    transform:perspective(800px) scale(1) rotateX(0);
  }
}