@charset "utf-8";


@-webkit-keyframes fedein1 {
  0% { opacity:0;}
  30% { opacity:0;}
  99% { opacity:1;}
  100% { opacity:1;}
}

@keyframes fedein1 {
  0% { opacity:0;}
  30% { opacity:0;}
  99% { opacity:1;}
  100% { opacity:1;}
}
@keyframes popup {
	0% {transform:translateY(0px) ; opacity:0 ;}
	70% {transform:translateY(0px) ; opacity:0 ;}
	80% {transform:translateY(-10px) ; opacity:1;}
	90% {transform:translateY(3px) ; opacity:1;}
	99% {transform:translateY(0px); opacity:1;}
	100% {transform:translateY(0px); opacity:1;}
}
@keyframes ups {
  0% {transform:translateY(-20px) ; opacity:0 ;}
  70% {transform:translateY(0px) ; opacity:0 ;}
  80% {transform:translateY(-10px) ; opacity:1;}
  90% {transform:translateY(3px) ; opacity:1;}
  99% {transform:translateY(0px); opacity:1;}
  100% {transform:translateY(0px); opacity:1;}
}
/*MVの動き*/
  @keyframes mv_ups01 {
	0%{
		transform:translate(0, 0);
		opacity: 0;
	}
	20% {
		transform:translate(-30px,-20px);
		opacity: 1;
	  }
	60% {
		transform:translate(10px, 8px);
		opacity: 1;
	  }
	80% {
		transform:translate(0px, 0px);
		opacity: 1;
	}
	100% {
		transform:translate(0, 0);
		opacity: 1;
	  }
  }
  @keyframes mv_ups02 {
	0%{
		transform:translate(0, 0px);
		opacity: 0;
	}
	20% {
		transform:translate(-30px,-15px);
		opacity: 1;
	  }
	60% {
		transform:translate(4px, 2px);
		opacity: 1;
	  }
	80% {
		transform:translate(0px, 0px);
		opacity: 1;
	}
	100% {
		transform:translate(0, 0);
		opacity: 1;
	}
  }
  @keyframes mv_ups03 {
	0%{
		transform:translate(0, 0px);
		opacity: 0;
	}
	20% {
		transform:translate(30px,-15px);
		opacity: 1;
	  }
	60% {
		transform:translate(-4px, 2px);
		opacity: 1;
	  }
	80% {
		transform:translate(0px, 0px);
		opacity: 1;
	}
	100% {
		transform:translate(0, 0);
		opacity: 1;
	}
  }
  @keyframes mv_ups04 {
	0%{
		transform:translate(0, 0);
		opacity: 0;
	}
	20% {
		transform:translate(-25px,-20px);
		opacity: 1;
	  }
	60% {
		transform:translate(-4px, 2px);
		opacity: 1;
	  }
	80% {
		transform:translate(0px, 0px);
		opacity: 1;
	}
	100% {
		transform:translate(0, 0);
		opacity: 1;
	}
  }
  @keyframes mv_ups05 {
	0%{
		transform:translate(0, 0);
		opacity: 0;
	}
	20% {
		transform:translate(25px,-20px);
		opacity: 1;
	  }
	60% {
		transform:translate(-4px, 2px);
		opacity: 1;
	  }
	80% {
		transform:translate(0px, 0px);
		opacity: 1;
	}
	100% {
		transform:translate(0, 0);
		opacity: 1;
	}
  }
  @keyframes mv_ups06 {
	0%{
		transform:translate(0, 0);
		opacity: 0;
	}
	20% {
		transform:translate(-35px,-10px);
		opacity: 1;
	  }
	60% {
		transform:translate(-4px, 2px);
		opacity: 1;
	  }
	80% {
		transform:translate(0px, 0px);
		opacity: 1;
	}
	100% {
		transform:translate(0, 0);
		opacity: 1;
	}
  }
  @keyframes mv_ups07 {
	0%{
		transform:translate(0, 0);
		opacity: 0;
	}
	20% {
		transform:translate(35px,-10px);
		opacity: 1;
	  }
	60% {
		transform:translate(-4px, 2px);
		opacity: 1;
	  }
	80% {
		transform:translate(0px, 0px);
		opacity: 1;
	}
	100% {
		transform:translate(0, 0);
		opacity: 1;
	}
  }
  @keyframes mv_animation01 {
	0% {
		transform: translatey(0%);
	  }
	  50% {
		transform: translatey(-2%);
	  }
	  100% {
		transform: translatey(0%);
	  }
  }

  @keyframes mv_animation02 {
	0% {
		transform: rotate(0);
	  }
	  50% {
		transform: rotate(-4deg);
	  }
	  100% {
		transform: rotate(0);
	  }
  }
  @keyframes mv_animation03 {
	0% {
		transform: rotate(0);
	  }
	  50% {
		transform: rotate(4deg);
	  }
	  100% {
		transform: rotate(0);
	  }
  }
  @keyframes mv_animation04 {
	0% {
		transform: translatey(-3%);
	  }
	  100% {
		transform: translatey(3%);
	  }
  }
  @keyframes mv_animation05 {
	0% {
		transform: translatey(0%);
	  }
	  50% {
		transform: translatey(3%);
	  }
	  100% {
		transform: translatey(0%);
	  }
  }
  @keyframes mv_animation06 {
	0% {
		transform: translatey(0%);
	  }
	  50% {
		transform: translatey(4%);
	  }
	  100% {
		transform: translatey(0%);
	  }
  }
  @keyframes mv_animation07 {
	0% {
		transform: rotate(0);
	  }
	  50% {
		transform: rotate(6deg);
	  }
	  100% {
		transform: rotate(0);
	  }
  }
  @keyframes mv_ups01 {
	0%   { transform: scale(0.8, 1.1) translate(0%, -100%); opacity:0; }
	10%  { transform: scale(0.8, 1.1) translate(0%, -5%); opacity:0; }
	20%  { transform: scale(1.1, 0.6) translate(0%, 10%); opacity:1; }
	30%  { transform: scale(0.9, 1) translate(0%, -5%); opacity:1; }
	40%  { transform: scale(0.95, 1.1) translate(0%, -10%); opacity:1; }
	50%  { transform: scale(0.95, 1.1) translate(0%, -5%); opacity:1; }
	60%  { transform: scale(1.1, 0.9) translate(0%, 5%); opacity:1; }
	70%  { transform: scale(1.0, 1.0) translate(0%, 0%); opacity:1; }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%); opacity:1; }
  }







@media screen {

.popup{
	opacity:0 ;
	transform:translateY(-20px)
}
.once.popup{
	animation:popup 1.4s forwards;
}
.ups{
	opacity:0 ;
	transform:translateY(-20px);
}
.once.ups{
	animation:ups 1.4s forwards;
}
.once.popups{
	animation:none;
	opacity:1 ;
	transform:translateY(0)
}
.popups > *{
	opacity:0;
	transform:translateY(-20px);
}
.once.popups > *{
	animation:popup 1.4s forwards;
	-webkit-animation:popup 1.4s forwards;
}
.once.popups > *:nth-child(2){ -webkit-animation-delay: 0.2s; animation-delay: 0.2s;}
.once.popups > *:nth-child(3){ -webkit-animation-delay: 0.4s; animation-delay: 0.4s;}
.once.popups > *:nth-child(4){ -webkit-animation-delay: 0.6s; animation-delay: 0.6s;}
.once.popups > *:nth-child(5){ -webkit-animation-delay: 0.8s; animation-delay: 0.8s;}
.once.popups > *:nth-child(6){ -webkit-animation-delay: 1.0s; animation-delay: 1.0s;}
.once.popups > *:nth-child(7){ -webkit-animation-delay: 1.2s; animation-delay: 1.2s;}
.once.popups > *:nth-child(8){ -webkit-animation-delay: 1.4s; animation-delay: 1.4s;}
.once.popups > *:nth-child(9){ -webkit-animation-delay: 1.6s; animation-delay: 1.6s;}
.once.popups > *:nth-child(10){ -webkit-animation-delay: 1.8s; animation-delay: 1.8s;}

.feder,
.feder_row{
	opacity:0 ;
}


.once.feder{
	animation:fedein1 1.2s forwards;
	-webkit-animation:fedein1 1.2s forwards;
}
.once.feder_row{
	animation:fedein1 2.0s ease-out forwards;
	-webkit-animation:fedein1 2.0s ease-out forwards;
}

.feders > *{
	opacity:0 ;
}
.once.feders > *{
	animation:fedein1 1.8s forwards;
	-webkit-animation:fedein1 1.8s forwards;
}


.once.delay_set > *:nth-child(2),
.once.delay_1{ -webkit-animation-delay: 0.2s; animation-delay: 0.2s;}
.once.delay_set > *:nth-child(3),
.once.delay_2{ -webkit-animation-delay: 0.4s; animation-delay: 0.4s;}
.once.delay_set > *:nth-child(4),
.once.delay_3{ -webkit-animation-delay: 0.6s; animation-delay: 0.6s;}
.once.delay_set > *:nth-child(5),
.once.delay_4{ -webkit-animation-delay: 0.8s; animation-delay: 0.8s;}
.once.delay_set > *:nth-child(6),
.once.delay_5{ -webkit-animation-delay: 1.0s; animation-delay: 1.0s;}


.vertical_open,
.holizon_open,
.bg_flash,
.bg_blackout{
	position:relative;
	overflow:hidden;
}
.vertical_open:before,
.vertical_open:after,
.holizon_open:before,
.holizon_open:after,
.bg_blackout:before{
	content:"";
	width:100%;
	height:100%;
	z-index: 55;
	background:#fff;
	display:block;
	position:absolute;
	left:0;
	right:0;
	top:0;
	transition:height .2s;
}
.vertical_open:after{
	top:auto;
	bottom:0;
}
.vertical_open.once:before,
.vertical_open.once:after{
	height:0;
}

.holizon_open:before,
.holizon_open:after{
	bottom:0;
	right:0;
	left:auto;
	transition:width .4s .2s ease-out;
}

.holizon_open:after{
	left:0;
	right:auto;
}
.holizon_open.once:before,
.holizon_open.once:after{
	width:0;
}

.mv_ups{
	opacity:0 ;
	transform:translateY(0)
}
.once.mv_ups{
	animation:mv_ups 1s 1s forwards;
}
.mv_ups01 {
	opacity: 0;
	transform: scale(0.8, 1.4) translate(0%, -100%);
	transform-origin: bottom center;
	animation:mv_ups01  1s  1s forwards;
}
.mv_ups02{
	opacity:0 ;
	transform:translate(0)
}
.once.mv_ups02{
	animation:mv_ups02  1s  1s forwards;
}
.mv_ups03{
	opacity:0 ;
	transform:translate(0)
}
.once.mv_ups03{
	animation:mv_ups03  1s  1s forwards;
}
.mv_ups04{
	opacity:0 ;
	transform:translate(0)
}
.once.mv_ups04{
	animation:mv_ups04  1s  1s forwards;
}
.mv_ups05{
	opacity:0 ;
	transform:translate(0)
}
.once.mv_ups05{
	animation:mv_ups05  1s 1s  forwards;
}
.mv_ups06{
	opacity:0 ;
	transform:translate(0)
}
.once.mv_ups06{
	animation:mv_ups06  1s 1s forwards;
}
.mv_ups07{
	opacity:0 ;
	transform:translate(0)
}
.once.mv_ups07{
	animation:mv_ups07  1s 1s forwards;
}
.mv_animation01{
	animation: mv_animation01 2s 2.5s ease-in-out infinite;
}
.mv_animation02{
	animation: mv_animation02 2s 2.8s ease-in-out infinite;
}
.mv_animation03{
	animation: mv_animation03 2s 3.3s ease-in-out infinite;
}
.mv_animation04{
	animation: mv_animation05 2s 3.1s ease-in-out infinite;
}
.mv_animation05{
	animation: mv_animation05 2s 4.3s ease-in-out infinite;
}
.mv_animation06{
	animation: mv_animation06 2s 3.7s ease-in-out infinite;
}
.mv_animation07{
	animation: mv_animation07 2s 3s ease-in-out infinite;
}
}