/*
** ttlAnime
----------------------------------*/
.__ttl {
  opacity: 0;
  transition: 0.3s all;
}
.__drawing .__ttl {
  opacity: 1;
  display: block;
  fill: #fff;
  stroke: #fff;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  stroke-width: 1px;
  -webkit-animation: ttlAnime 2s ease-in 0s;
  animation: ttlAnime 2s ease-in 0s;
}
@keyframes ttlAnime {
  0% {
    stroke-dashoffset: 2000;
    fill: transparent;
  }
  40% {
    stroke-dashoffset: 2000;
    fill: transparent;
  }
  60% {
    fill: transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #fff;
  }
}

/*
** blockAnime
----------------------------------*/
.blockAnime {
	display: inline-block;
	position: relative;
  overflow: hidden;
  opacity: 0;
  transition: 0.3s all;
}
.blockAnime2 {
	display: block;
	position: relative;
  overflow: hidden;
  opacity: 0;
  transition: 0.3s all;
}
.blockAnime::before,
.blockAnime2::before {
	position: absolute;
	content: '';
	display: block;
	width: 100%;
	left: 0;
	top: 0;
	bottom: 0;
	background: rgba(255,255,255,1.0);
	z-index: 20;
	-webkit-transform: translate3d(-101%, 0, 0);
	transform: translate3d(-101%, 0, 0);
	-webkit-transition: 0.3s all 0.3s cubic-bezier(0, 1.07, 1, 1);
	transition: 0.3s all 0.3s cubic-bezier(0, 1.07, 1, 1);
}
.show1.blockAnime::before,
.show1.blockAnime2::before {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.show2.blockAnime::before,
.show2.blockAnime2::before {
	-webkit-transform: translate3d(105%, 0, 0);
	transform: translate3d(105%, 0, 0);
}
.show2 {
	opacity: 1;
}
