@charset "utf-8";

/*
 * 採用トップ　キービジュアル
 */
@layer components {

  .recruit-kv {
    overflow: clip;
    background: linear-gradient(180deg, #00389E 0%, #014FE0 67.78%);
    animation: kvfade .8s ease-in forwards;
  }

  .recruit-kv__main {
    width: 100%;
    aspect-ratio: 1440 / 550;
    overflow: clip;
    position: relative;
    margin-block-end: -44px;
  }

  .recruit-kv__main svg {
    width: 53.958333%;
    height: auto;
    aspect-ratio: 777 / 530;
    position: absolute;
    top: calc(var(--height-header) * -1);
    left: 50%;
    translate: -50% 0;
    z-index: 2;
  }

  .recruit-kv__main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .recruit-kv__main--img1 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    opacity: 0;
    animation: kvfade .1s .8s ease-in forwards;
  }

  .recruit-kv__main--img2 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    animation: kvfade .8s ease-in forwards;
  }

  #lineCircle path {
    stroke-dasharray: 4000;
    stroke-dashoffset: 4000;
    /* animation: fill .6s 1.1s cubic-bezier(0.95, 0.05, 0.8, 0.04) forwards; */
    animation: fill .95s 1.1s cubic-bezier(0.95, 0.05, 0.78, 0.74) forwards;

    @media (width > 768px) {
      animation: fill 1.2s 1.1s cubic-bezier(0.95, 0.05, 0.54, 0.65) forwards;
    }
  }

  #lineCircle {
    mask: url(#mask-wrapper);
  }

  #linemask path {
    stroke: white;
    fill: none;
    stroke-dasharray: 4300;
    stroke-dashoffset: 4300;
    stroke-linejoin: round;
    stroke-width: 140px;
    /* animation: fill .6s 1.1s cubic-bezier(0.95, 0.05, 0.8, 0.04) forwards; */
    animation: fill .95s 1.1s cubic-bezier(0.95, 0.05, 0.78, 0.74) forwards;

    @media (width > 768px) {
      animation: fill 1.2s 1.1s cubic-bezier(0.95, 0.05, 0.54, 0.65) forwards;
    }
  }

  .recruit-kv__container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 54px;
    max-width: 852px;
    margin-inline: auto;
    padding-inline: 16px;
    padding-block-end: 110px;
    position: relative;
    z-index: 5;
  }

  .recruit-kv__container::before {
    content: '';
    width: 194px;
    height: 194px;
    background: url('/recruit/img/img-kv-circle.svg') center no-repeat;
    background-size: contain;
    position: absolute;
    top: -98px;
    right: -50px;
    opacity: 0;
    animation: kvfade .85s 2.2s ease-in forwards;

    @media (width > 768px) {
      animation-delay: 2.4s;
    }
  }

  .recruit-kv__word {
    width: 621px;
    height: auto;
    opacity: 0;
    animation: kvfade .8s 2s ease-in forwards;

    @media (width > 768px) {
      animation-delay: 2.2s;
    }
  }

  .recruit-kv__word img {
    width: 100%;
    height: auto;
  }

  .recruit-kv__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
    opacity: 0;
    animation: kvfade .8s 2.4s ease-in forwards;

    @media (width > 768px) {
      animation-delay: 2.5s;
    }
  }

  .recruit-kv__text {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--color-white);
    line-height: 2.1;
    letter-spacing: calc(1em * 0.04);

    b {
      margin-block: 0;
      color: var(--color-white);
    }

    @media (width < 768px) {
      font-size: 1.3rem;
      line-height: 1.8;
    }
  }

  @keyframes kvfade {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes kvslideup {
    0% {
      opacity: 0;
      translate: 0 40px;
    }

    100% {
      opacity: 1;
      translate: 0 0;
    }
  }

  @keyframes fill {
    0% {
      stroke-dashoffset: 4300;
    }

    66% {
      stroke-dashoffset: 2630;
    }

    100% {
      stroke-dashoffset: 0;
    }
  }

  @media (width < 1023px) {

    .recruit-kv__main {
      aspect-ratio: 375 / 210;
      margin-block-end: 32px;
    }

    .recruit-kv__main svg {
      width: 75.2%;
      top: -5px;
    }

    .recruit-kv__container {
      gap: 24px;
      padding-block-end: clamp(4.625rem, 5.547vw + 3.325rem, 6.875rem);
    }

    .recruit-kv__block {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .recruit-kv__container .is-pc {
      display: none;
    }

    .recruit-kv__container::before {
      content: '';
      width: 124px;
      height: 124px;
      top: -118px;
      right: 80px;
    }

    .recruit-kv__word {
      width: clamp(17.938rem, 51.464vw + 5.876rem, 38.813rem);
    }
  }

  @media (width < 576px) {
    .recruit-kv__container::before {
      width: 54px;
      height: 54px;
      top: -74px;
      right: 40px;
    }
  }
}