/*--背景色→画像--*/

.isPlay01 {
  overflow: hidden;
  position: relative;
}

.isPlay01.show.animated::before {
  animation: img-wrap 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #191918;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}


/*--背景色→テキスト--*/

.isPlay02 {
  overflow: hidden;
  position: relative;
}

.isPlay02.show.animated::before {
  animation: img-wrap 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #191918;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

/* -------------------------------------------------------
見出し下からフェードイン
------------------------------------------------------- */

.gjs-dashed .anime01,
.gjs-dashed .anime01-title,
.gjs-dashed .anime01-sub {
	opacity: 1;
	transform: translateY(0);
}

.anime01-sub {
	opacity: 0;
}

.anime01-sub.complete {
	opacity: 1;
}

.anime01-title {
	opacity: 0;
	overflow: hidden;
}

.anime01-title > span {
	opacity: 0;
	transform: translateY(1.5em);
    display: inline-block;
}

.animated .anime01-title {
	opacity: 1;
}

.animated .anime01-title > span {
	animation-name: separateFadeUp;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes separateFadeUp {
	0% {
		opacity: 0;
		transform: translateY(1.5em);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}