@charset "UTF-8";
/* CSS Document */

.babytech--loading{
	position: fixed;
	left:-20%;
	right:-20%;
	top:0;
	bottom:0;
	z-index: 100000000;
	overflow: hidden;
	transition:0.8s ease-in-out;
}
.loadcomplete .babytech--loading{
	pointer-events: none;
	transform: rotate(20deg) translateY(-30%);
	bottom:120%;
	top:-20%;
}
.showcomplete .babytech--loading{
	display: none;
}
.babytech--loading--bg{
	background: #009844;
	position: absolute;
	left:0;right:0;top:0;bottom:0;
}
.babytech--loading--logo{
	height:44px;
	width:657px;
    max-width:60%;
	position: absolute;
	left:0;right:0;top:0;bottom:0;
	margin:auto;
	transition:0.3s ease-in;
}
.babytech--loading--logo.hide{
	opacity: 0;
}

.cls-1{
	fill:rgba(255,255,255,0);
	stroke:rgba(255,255,255,0);
	stroke-width:1px;
	transition:fill 0.5s ease-out;
}
.on .cls-1{
	stroke:rgba(255,255,255,1);
}
.on.fill .cls-1{
	fill:rgba(255,255,255,1);
	stroke-width:0px;
}


/*タイトルアニメーション*/
.anim_t{
	opacity:0;
  display: inline-block;
	transform: translateY(10px);
}
.babytech--kv--note.anim_t{
	display: block;
}
body.showcomplete .anim_t{
	transition:0.3s ease-out;
	transform: translateY(0px);
	opacity:1;
}

.anim_in1{
	opacity:0;
}
body.showcomplete .anim_in1.in{
  animation: upIn 0.5s ease-out 0s;
  animation-fill-mode: both;
}

@keyframes upIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes fuwafuwa1 {
  0% {
   transform: scale(1) rotate(0deg) translateY(0px) skewX(0deg);
  }
  100% {
    transform: scale(1.03) rotate(-10deg) translateY(-5px) skewX(5deg);
  }
}

@keyframes fuwafuwa2 {
  0% {
    transform: scale(1) rotate(0) translate(0px,0px);
  }
  100% {
   transform: scale(0.95) rotate(-3deg) translate(-5px,-5px);
  }
}

@keyframes fuwafuwa3 {
  0% {
    transform: scale(0.85) rotate(-10deg) translateY(0%) skewX(0);
  }
  100% {
   transform: scale(1) rotate(0) translateY(-5px) skewX(5deg);
  }
}