@charset "UTF-8";

/* デフォルトは block にする */
.wipein {
  position: relative;
  color: transparent;
  display: block;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  --wipe-color: #001440;
}

/* テキスト系要素のみ inline-block にする */
h1.wipein,
h2.wipein,
h3.wipein,
h4.wipein,
h5.wipein,
h6.wipein,
.c-title.wipein,
.title_lead {
  display: inline-block;
}

figure.wipein img {
	opacity: 0;
}

.wipein::after {
  display: inline-block;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 100%;
  background: var(--wipe-color);
  z-index: 1;
}

.wipein.show {
  animation: wipecolor 0.8s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
  opacity: 1;
}

figure.wipein.show img {
  opacity: 1;
}

.wipein.show::after {
  animation: wipebar 0.8s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
}

@keyframes wipebar {
  0%   { left: 0;   right: 100%; }
  50%  { left: 0;   right: 0; }
  100% { left: 100%; right: 0; }
}

@keyframes wipecolor {
  0%, 50%   { color: transparent; }
  51%, 100% { color: var(--text-color); }
}