.gra_title .inner{
	position: relative;
	z-index: 2;
  }
  .gra_title span {
	color: transparent;
	display: inline-block;
	padding: 10px 15px 15px 15px;
	position: relative;
  }

  .gra_title span::before {
	content: '';
	  display: inline-block;
	  width: 0;
	  height: 100%;
	  position: absolute;
	  left: 0;
	  top: 0;
	  z-index: 1;
	  background: var(--red);
  }
  .sp1 .gra_title span::before {
	  background: var(--blue);
  }
  .sp2 .gra_title span::before {
	background: var(--green);
}





  .gra_title.move span {
	animation: textAnime forwards 1.5s 1 ease 0.5s normal;
	
  }
  .gra_title.move span::before {
	animation: barAnime forwards 1.5s 1 ease 0.1s normal;
	
  }
  @keyframes textAnime{
	0% {
    color: transparent;
  }
	50% {
    color: transparent;
  }
	100% {
    color: #fff;
  }
}

.photoArea figure {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.photoArea figure::before {
  content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background: #000;
}
.photoArea.move figure::before {
  animation: barAnime forwards 1.5s 1 ease 0.1s normal;
}
.photoArea figure img {
  opacity: 0;
  transform: scale(1.1);
}
.photoArea.move figure img {
  animation: photoAnime forwards 1.5s 1 ease 0.5s normal;
}
@keyframes mvAnime{
  0% {
		opacity: 0;
    transform: scale(1.3);
	}
  100% {
		opacity: 1;
    transform: scale(1);
	}
}
@keyframes barAnime{
	0% {
		left: 0;
		width: 0;
	}
	50% {
		left: 0;
		width: 100%;
	}
	51% {
		left: 0;
		width: 100%;
	}
	68% {
		left: 0;
		width: 100%;
	}
  100% {
		left: 100%;
		width: 0;
	}
}

@keyframes photoAnime{
	0% {
    opacity: 0;
    transform: scale(1.3);
  }
	50% {
    opacity: 0;
    transform: scale(1.3);
  }
	100% {
    opacity: 1;
    transform: scale(1);
  }
}