@charset "UTF-8";

/*--------------------------------------
top
----------------------------------------*/
.p-hero__box {
	width:100%;
	position:relative;
}

#main{
	width:650rem;
	height:530rem;
	position:relative;
	margin:100rem auto 0;
	box-sizing:border-box;
}

#logo{
	width:650rem;
	height:390rem;
	position:relative;
}

#logo ul{
	width:650rem;
	height:390rem;
	position:absolute;
	left:0;
	top:0;
}

#logo ul li:nth-child(1){
  width: 125rem;
	position:absolute;
	left:35rem;
	top:30rem;
}

#logo ul li:nth-child(2){
	width:650rem;
	position:absolute;
	left:0;
	top:0;
}

#logo ul li:nth-child(3){
	width:650rem;
	position:absolute;
	left:0;
	bottom:0;
}

#date{
	width:290rem;
	height:120rem;
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
}

#date ul{
	width:290rem;
	height:120rem;
	position:absolute;
	left:0;
	top:0;
}

#date ul li:nth-child(1){
	width:290rem;
	position:absolute;
	left:0;
	top:0;
}

#date ul li:nth-child(2){
	width:290rem;
	position:absolute;
	left:0;
	bottom:0;
}

#navi ul{
	width:570rem;
	margin:60rem auto 0;
  justify-content: space-between;
  align-items: center;
	display: flex;
	flex-wrap: wrap;
}

#navi ul li{
	width:570rem;
	margin-bottom:30rem;
}


/*--------------------------------------
mvtkWidget
----------------------------------------*/

#mvtk{
	width:100%;
	margin:0  auto;
	position:relative;
}

#mvtkWidget{
	position:relative;
}

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

#bnr ul{
	width:570rem;
	margin:0 auto 40rem;
  justify-content: center;
  align-items: center;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

#bnr ul li{
	width:570rem;
}
/*
#bnr ul li:nth-child(1){
	margin-right:30rem;
}

#bnr ul li:last-child{
	box-size:border-box;
	border:1px solid #e8e8e8;
}
*/


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

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

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

@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);
  }
}

#mvtk,
#logo ul li,
#date ul li,
#navi ul li,
#bnr ul li img{
	opacity:0;
}

.is-loaded #logo ul li:nth-child(1){
  animation: poyon 0.8s linear 0.6s forwards;
}

.is-loaded #logo ul li:nth-child(2){
  animation: poyon 0.8s linear 0.8s forwards;
}

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

.is-loaded #date ul li:nth-child(1){
  animation: poyon 0.8s linear 1.6s forwards;
}

.is-loaded #date ul li:nth-child(2){
  animation: poyon 0.8s linear 1.8s forwards;
}

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

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

.is-loaded #navi ul li:nth-child(3){
  animation: fadeInUp 1.0s cubic-bezier(.17,.67,.3,.92) 2.6s forwards;
}


.is-loaded #bnr ul li:nth-child(1) img{
  animation: poyon 0.8s linear 3.0s forwards;
}

.is-loaded #mvtk{
  animation: fadeInUp 1.0s cubic-bezier(.17,.67,.3,.92) 3.2s forwards;
}