/* page-recruit
 * 採用情報ページ
 ============================================================================ */

.recruit-page .site-main {
  background: url('../../images/common/bg-02.webp') center center / 100% 1628px repeat;
}

/*================ l-lead ================*/

.l-lead {
  .section-shell+.section-shell {
    margin-top: calc(40 / 1440 * 100cqi);

    @media (max-width: 767px) {
      margin-top: 56px;
    }
  }
}


.l-lead-title {
  min-width: calc(440 / 1440 * 100cqi);

  @media (max-width: 767px) {
    min-width: 100%;
    padding: 20px;
  }
}

.l-lead-inner {
  margin-top: calc(40 / 1440 * 100cqi);
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;

  @media (max-width: 767px) {
    flex-direction: column-reverse;
  }
}

.l-lead-img {
  aspect-ratio: 500/334;
  width: calc(500 / 1440 * 100cqi);
  overflow: hidden;

  @media (max-width: 767px) {
    width: 100%;
    aspect-ratio: auto;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: scale(1.05);
    transition: transform var(--umi-transition-slow);
  }

  &.is-inview img {
    transform: scale(1);
  }
}

.l-lead-text {
  flex: 1;
  position: relative;
  padding: calc(24 / 1440 * 100cqi);
  color: var(--umi-color-surface);
  letter-spacing: 0.05em;
  line-height: 1.7;
  font-weight: bold;

  &::before {
    content: "";
    position: absolute;
    inset: 0px;
    background: rgb(0 0 0 / 40%);
    z-index: 0;
  }

  @media (max-width: 767px) {
    padding: 20px;
  }
}

.l-lead-text__text {
  position: relative;
  z-index: 1;

  &+& {
    margin-top: 1em;
  }
}

/*================ l-place ================*/

.l-place {
  margin-top: calc(60 / 1440 * 100cqi);

  @media (max-width: 767px) {
    margin-top: 80px;
  }

  .section-shell {
    background: url('../../images/recruit/bg-01.webp') center center / cover no-repeat;
    padding-block: calc(40 / 1440 * 100cqi) calc(60 / 1440 * 100cqi);
    padding-inline: calc(70 / 1440 * 100cqi);

    @media (max-width: 767px) {
      padding-block: 40px 60px;
      padding-inline: 20px;
      width: 100%;
    }
  }

  .c-title__text {
    font-size: calc(30 / 1440 * 100cqi);

    @media (max-width: 767px) {
      font-size: 30px;
    }
  }

  .c-title__eyebrow {
    font-size: calc(24 / 1440 * 100cqi);

    @media (max-width: 767px) {
      font-size: 24px;
    }
  }
}

.l-place-items {
  margin-top: calc(40 / 1440 * 100cqi);
  display: block grid;
  gap: calc(30 / 1440 * 100cqi);
  grid-template-columns: repeat(3, minmax(min(2rem, 100%), 1fr));

  @media (max-width: 767px) {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 30px;
  }
}

.l-place-item {
  background-color: #492700;
  color: #fff;
  text-align: center;
  padding: calc(12 / 1440 * 100cqi) calc(12 / 1440 * 100cqi);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  @media (max-width: 767px) {
    padding: 30px;
  }
}

.l-place-item__small {
  font-size: calc(11 / 1440 * 100cqi);
  line-height: 1.3;

  @media (max-width: 767px) {
    font-size: 11px;
  }
}

/*================ セクション名 ================*/
@keyframes recruit-bg-drift {
  from {
    background-position: 0 center;
  }

  to {
    background-position: 856.5px center;
  }
}

.l-recruit-inner {
  position: relative;
  background-color: #492700;
  color: #fff;
  padding-block: calc(120 / 1440 * 100cqi) calc(80 / 1440 * 100cqi);
  padding-inline: calc(50 / 1440 * 100cqi);

  @media (max-width: 767px) {
    padding-block: 108px 64px;
    padding-inline: 20px;
  }

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../../images/recruit/txt-01.webp') repeat center center / 856.5px 160px;
    opacity: 0.3;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
    animation: recruit-bg-drift 30s linear infinite;
  }

  >* {
    position: relative;
    z-index: 1;
  }
}

.l-recruit-title {
  z-index: 1;
  min-width: calc(548 / 1440 * 100cqi);

  @media (max-width: 767px) {
    min-width: 180px;
    padding: 20px;
  }
}

.l-recruit-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(24 / 1440 * 100cqi);

  @media (max-width: 767px) {
    grid-template-columns: 1fr;
    gap: 50px;
  }
}

.l-recruit-item {
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.05em;
}

.l-recruit-item__title {
  font-size: calc(24 / 1440 * 100cqi);
  border-left: 3px solid #F5BB00;
  padding-left: calc(15 / 1440 * 100cqi);
  margin-bottom: calc(24 / 1440 * 100cqi);
  font-weight: 500;

  &:not(:first-of-type) {
    margin-top: calc(24 / 1440 * 100cqi);

    @media (max-width: 767px) {
      margin-top: 20px;
    }
  }

  @media (max-width: 767px) {
    font-size: 24px;
    margin-bottom: 20px;
    padding-left: 15px;
  }
}

.l-recruit-list {
  li {
    list-style: disc inside;
    padding-left: 1.5em;
    text-indent: -1.5em;
  }
}

.l-recruit-text-highlight {
  background-color: #fff;
  font-weight: bold;
  border: 2px solid #F84A05;
  color: #F84A05;
  padding: 10px 20px;
  margin-top: calc(20 / 1440 * 100cqi);
  width: fit-content;

  @media (max-width: 767px) {
    font-size: 18px;
    padding: 10px 20px;
    margin-top: 20px;
  }
}

.l-recruit-text__small {
  font-size: calc(11 / 1440 * 100cqi);

  @media (max-width: 767px) {
    font-size: 12px;
  }
}

/* ------ option ------ */
.l-title-wrap {
  position: absolute;
  top: calc(-33 / 1440 * 100cqi);
  left: 0;
  right: 0;
  margin: auto;

  @media (max-width: 767px) {
    top: calc(-20 / 390 * 100cqi);
  }
}


.l-title-wrap-inner {
  position: relative;
  width: fit-content;
  margin-inline: auto;
}

/*================ l-person ================*/

.l-person {
  margin-top: calc(180 / 1440 * 100cqi);

  @media (max-width: 767px) {
    margin-top: 108px;
  }
}

.l-person .l-title-wrap-inner::before {
  content: '';
  background: url('../../images/recruit/ico-01.webp') no-repeat center center / contain;
  width: calc(144 / 1440 * 100cqi);
  height: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(-94 / 1440 * 100cqi);
  aspect-ratio: 144/190;
  z-index: 3;

  @media (max-width: 767px) {
    left: calc(-80 / 390 * 100cqi);
    width: calc(100 / 390 * 100cqi);
  }
}

/*================ l-appeal ================*/

.l-appeal {
  margin-top: calc(125 / 1440 * 100cqi);

  @media (max-width: 767px) {
    margin-top: 108px;
  }
}

.l-appeal .l-title-wrap-inner::before {
  content: '';
  background: url('../../images/recruit/ico-02.webp') no-repeat center center / contain;
  width: calc(153 / 1440 * 100cqi);
  height: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(-94 / 1440 * 100cqi);
  aspect-ratio: 153/193;
  z-index: 3;

  @media (max-width: 767px) {
    right: calc(-80 / 390 * 100cqi);
    width: calc(100 / 390 * 100cqi);
  }
}

.l-appeal-lead {
  line-height: 1.7;
  margin-bottom: calc(24 / 1440 * 100cqi);

  @media (max-width: 767px) {
    margin-bottom: 20px;
  }
}

/*================ l-salary ================*/

.l-salary {
  margin-top: calc(125 / 1440 * 100cqi);

  @media (max-width: 767px) {
    margin-top: 108px;
  }
}

.l-salary .l-title-wrap-inner::before {
  content: '';
  background: url('../../images/recruit/ico-03.webp') no-repeat center center / contain;
  width: calc(175 / 1440 * 100cqi);
  height: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(-94 / 1440 * 100cqi);
  aspect-ratio: 144/189.74;
  z-index: 3;

  @media (max-width: 767px) {
    left: calc(-70 / 390 * 100cqi);
    width: calc(100 / 390 * 100cqi);
  }
}

/*================ l-about-message ================*/

.l-about-message {
  overflow: hidden;
  padding-bottom: calc(157 / 1440 * 100cqi);

  @media (max-width: 767px) {
    padding-bottom: 213px;
    margin-top: 50px;
  }
}

.l-about-message-inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(65 / 1440 * 100cqi);
  margin-top: calc(62 / 1440 * 100cqi);
  max-width: calc(1200 / 1440 * 100cqi);
  margin-inline: auto;
  position: relative;

  @media (max-width: 767px) {
    flex-direction: column;
    gap: 30px;
    margin-top: 0;
    padding-inline: 20px;
    max-width: 100%;
  }
}

.l-about-message-img {
  max-width: calc(397 / 1440 * 100cqi);

  @media (max-width: 767px) {
    max-width: 100%;
  }
}

.l-about-message-text {
  flex: 1;
  position: relative;
  /* isolation: isolate を外す */
  padding: calc(50 / 1440 * 100cqi) calc(130 / 1440 * 100cqi) calc(38 / 1440 * 100cqi) calc(77 / 1440 * 100cqi);
  color: var(--umi-color-surface);
  letter-spacing: 0.05em;
  line-height: 1.7;
  font-weight: bold;

  @media (max-width: 767px) {
    padding: 40px 20px;
  }
}

.l-about-message-text::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../../images/frontpage/about-bg-02.webp') no-repeat center center / cover;
  mix-blend-mode: multiply;
  z-index: 0;
}

.l-about-message-img-ceo {
  position: absolute;
  top: 0;
  right: calc(-100 / 1440 * 100cqi);
  width: calc(215 / 1440 * 100cqi);
  z-index: 1;

  @media (max-width: 767px) {
    top: auto;
    bottom: calc(-150 / 390 * 100cqi);
    right: 0;
    width: calc(80 / 390 * 100cqi);

  }
}

.l-about-message-text-inner {
  position: relative;
  z-index: 1;
}

.l-about-message-text__title {
  font-size: calc(20 / 1440 * 100cqi);
  margin-bottom: calc(8 / 1440 * 100cqi);

  @media (max-width: 767px) {
    font-size: 20px;
    margin-bottom: 8px;
  }
}

.l-about-message-text__text {
  font-size: calc(16 / 1440 * 100cqi);

  @media (max-width: 767px) {
    font-size: 16px;
  }
}

.l-about-message-text__name {
  font-size: calc(16 / 1440 * 100cqi);
  margin-top: calc(24 / 1440 * 100cqi);
  text-align: right;

  @media (max-width: 767px) {
    font-size: 16px;
    margin-top: 16px;
    text-align: left;
  }
}


.l-recruit-backbtn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: calc(60 / 1440 * 100cqi);
  flex-wrap: wrap;
  margin-top: 0;
  padding-bottom: calc(100 / 1440 * 100cqi);
  margin-top: 100px;

  @media (max-width: 767px) {
    flex-direction: column;
    gap: 20px;
    margin-top: 60px;
    padding-bottom: 60px;
  }
}