/* =====================================================
   override.css
   役割：今回変更したい装飾アニメーションだけを上書き
   ※ top_job_category など背景画像系はここでは触らない
===================================================== */

/* =========================
   gradation line override
   4案目：斜めワイプ
========================= */

.gradationline_left,
.gradationline_right{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2600px;
  height: 1000px;
  z-index: -1;
  opacity: 0;
  transform: translate(-50%, 0);
  background: linear-gradient(90deg, #3E4A3F 0%, #6B8E75 45%, #D8CFC2 100%);
}

.gradationline_left.isPlay,
.gradationline_right.isPlay{
  animation: diagonalReveal 1s ease forwards;
}

@keyframes diagonalReveal{
  0%{
    opacity: 0;
    clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
  }
  100%{
    opacity: 1;
    clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
  }
}