/* recruit.css — 採用エントリーCTA（Figma: recruit Frame 1920 2278:16251 / 全体TOP 4038:8310）
   採用ページと全体TOPで共通のモジュール（recruit-entry）。
   実値: pt120 pb80 / パネル 青グラデ radius32 py80 / 透かし ENTRY 白 op.2 左下
         写真2枚 248x350.7 radius16 段違い / 話す4 イラスト */

/* すべて見る／エントリー ボタン（Figma: 幅272px 内側208px） */
.recruit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 17rem;
  padding: var(--space-16) var(--space-32);
  border-radius: var(--radius-full);
  background: var(--color-primary-dark);
  color: var(--color-white);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.recruit-btn::after {
  content: "";
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  background: currentColor;
  mask: url("../../images/icon-arrow-right.svg") center / contain no-repeat;
  -webkit-mask: url("../../images/icon-arrow-right.svg") center / contain no-repeat;
  transition: transform 0.2s ease;
}

.recruit-btn--bordered {
  border: 1px solid var(--color-white);
}

/* hover（invert＋矢印移動）: 濃青塗り → 白地＋濃青字 */
@media (hover: hover) {
  .recruit-btn:hover {
    background: var(--color-white);
    color: var(--color-primary-dark);
  }
  .recruit-btn:hover::after {
    transform: translateX(var(--space-4));
  }
}

.recruit-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-120) 0 var(--space-80);
}

/* 全体TOPのみ（Figma: Frame 1920 4038:8310 = pt0 pb120。前セクションのpb120が上余白を担う） */
.home .recruit-entry {
  padding: 0 0 var(--space-120);
}

.recruit-entry__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--layout-max);
  padding: var(--space-80) 0;
  border-radius: var(--radius-32);
  background: var(--gradient-recruit-blue);
  /* overflow は切らない：ロボット図（__figure）が panel 下端からはみ出す（Figma準拠）。
     角丸は背景の border-radius で保たれ、透かし ENTRY は bottom:0 で panel 内に収まる。 */
}

.recruit-entry__watermark {
  position: absolute;
  bottom: 0;
  left: 3rem; /* ⚠ Figma実値 */
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-watermark);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
  opacity: 0.2;
  pointer-events: none;
}

.recruit-entry__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 var(--space-80);
}

.recruit-entry__body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-80);
  align-items: flex-start;
}

.recruit-entry__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding-right: var(--space-40);
}

.recruit-entry__title {
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

.recruit-entry__text {
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
  text-align: justify;
}

.recruit-entry__photos {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  gap: var(--space-24);
  height: 19.9375rem; /* Figma実値 */
}

.recruit-entry__photo {
  position: relative;
  flex: 1;
  min-width: 0;
}

.recruit-entry__photo img {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.recruit-entry__photo--first img {
  top: -1.98375rem; /* ⚠ Figma実値（段違い配置）*/
}

.recruit-entry__photo--second img {
  top: 0;
}

.recruit-entry__figure {
  position: absolute;
  top: 16.43125rem; /* ⚠ Figma実値 */
  left: 62.25rem; /* ⚠ Figma実値 916 + 内側オフセット80 */
  width: 10.625rem;
  height: 12.9375rem;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
}

/* --- SP: 本文→写真の縦積み ------------------------------------------------- */
@media (max-width: 767px) {
  .recruit-entry {
    padding: var(--space-40) var(--space-24) var(--space-40);
  }
  .home .recruit-entry {
    padding: 0 var(--space-24) var(--space-40);
  }
  .recruit-entry__panel {
    padding: var(--space-32) 0 var(--space-24);
    border-radius: var(--radius-lg);
  }
  .recruit-entry__watermark {
    font-size: var(--font-size-en-title);
    left: 1rem;
  }
  .recruit-entry__inner {
    flex-direction: column;
    gap: var(--space-40);
    padding: 0 var(--space-24);
  }
  .recruit-entry__body {
    width: 100%;
    gap: var(--space-40);
  }
  .recruit-entry__heading {
    padding-right: 0;
  }
  .recruit-entry__photos {
    width: 100%;
    flex: none;
    height: auto;
    padding-top: var(--space-16); /* 段違い写真の上はみ出し分 */
  }
  .recruit-entry__photo img {
    position: static;
    height: auto;
  }
  .recruit-entry__photo--first img {
    margin-top: calc(-1 * var(--space-16)); /* 段違い配置を弱めて維持 */
  }
  /* ロボット：パネル右下基準に置き直して縮小 */
  .recruit-entry__figure {
    display: none;
    top: auto;
    bottom: -1rem;
    left: auto;
    right: var(--space-8);
    width: 6.5rem;
    height: 8rem;
  }
  .recruit-btn {
    max-width: 100%;
    margin-inline: auto;
  }
}