/* key-visual
================================================ */
.p-key-visual {
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #e4e7f1;
}

.p-key-visual__background {
  position: relative;
  width: 100%;
  z-index: 1;
  aspect-ratio: 1366 / 576;
  overflow: hidden;
}

.p-key-visual__bg-image {
  width: 100%;
  height: auto;
  display: block;
}

.p-key-visual__content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: calc(50 / 1366 * 100vw) calc(150 / 1366 * 100vw);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: calc(50 / 1366 * 100vw);
}

.p-key-visual__category {
  font-size: calc(20 / 1366 * 100vw);
  line-height: 1;
  font-weight: normal;
}

.p-key-visual__category-cockpit {
  color: #152a6d;
  font-weight: 600;
  font-family: var(--font-family-en);
}

.p-key-visual__category-recruitment {
  color: #e60012;
  font-weight: 600;
  font-family: var(--font-family-en);
  margin-left: 4px;
}

.p-key-visual__title {
  font-size: calc(64 / 1366 * 100vw);
  line-height: 1.25;
  display: flex;
  align-items: baseline;
}

.p-key-visual__title-refa {
  color: #152a6d;
  font-weight: bold;
  font-family: var(--font-family-primary);
}

.p-key-visual__copy {
  display: flex;
  flex-direction: column;
}

.p-key-visual__copy-line1,
.p-key-visual__copy-line2 {
  background: var(
    --CockPit-Recruitment_gra01,
    linear-gradient(90deg, var(--cockPit_blue01, #152a6d) 49.52%, var(--CockPit-Recruitment_red01, #f61a3c) 100%)
  );
  color: #fff;
  font-size: calc(20 / 1366 * 100vw);
  font-weight: bold;
  padding: calc(8 / 1366 * 100vw) calc(16 / 1366 * 100vw);
  display: inline-block;
  width: fit-content;
  line-height: 1.4;
}

.p-key-visual__copy-line1 sup {
  font-size: 0.7em;
  vertical-align: super;
}

.p-key-visual__note {
  font-size: calc(12 / 1366 * 100vw);
  color: #152a6d;
  font-weight: 600;
  margin-top: calc(8 / 1366 * 100vw);
}

@media screen and (width <= 750px) {
  .p-key-visual {
    background: linear-gradient(to bottom, #f2f5ff, #c0c7e0);
  }

  .p-key-visual__background {
    aspect-ratio: unset;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .p-key-visual__bg-image {
    position: absolute;
    width: 100%;
    height: 94.5%;
    top: 2.76%;
    left: 0;
    object-fit: cover;
  }

  .p-key-visual__content {
    position: relative;
    transform: none;
    padding: calc(100 / 375 * 100vw) calc(20 / 375 * 100vw) calc(300 / 375 * 100vw);
    gap: calc(20 / 375 * 100vw);
    align-items: flex-start;
  }

  .p-key-visual__category {
    display: inline-block;
    font-size: calc(14 / 375 * 100vw);
    background-color: #fff;
    padding: 5px;
  }

  .p-key-visual__title {
    font-size: calc(48 / 375 * 100vw);
    line-height: 1.25;
  }

  .p-key-visual__copy-line1,
  .p-key-visual__copy-line2 {
    font-size: calc(14 / 375 * 100vw);
    padding: 0;
    background: none;
    display: block;
    width: auto;
    line-height: 2.2;
  }

  .p-key-visual__copy-line1 > span,
  .p-key-visual__copy-line2 > span {
    background: var(
      --CockPit-Recruitment_gra01,
      linear-gradient(90deg, var(--cockPit_blue01, #152a6d) 49.52%, var(--CockPit-Recruitment_red01, #f61a3c) 100%)
    );
    padding: calc(6 / 375 * 100vw) calc(12 / 375 * 100vw);
    box-decoration-break: clone;
  }

  .p-key-visual__note {
    font-size: calc(10 / 375 * 100vw);
    margin-top: 0;
  }
}