/* ==========================================================================
   採用サイト固定バナー（右下）
   markup: parts-recruit-banner.php
   ========================================================================== */
.rc-banner {
  position: fixed;
  right: 20px;
  bottom: 80px; /* PC: スクロール後に出る pagetop ボタン(60px)の上 */
  z-index: 998;
  width: 300px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(30, 46, 79, 0.35);
}
.rc-banner.is-closed {
  display: none;
}
@keyframes rc-banner-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rc-banner__link {
  display: block;
  position: relative;
  min-height: 150px; /* 300x150 = 写真(860x430)と同比率 */
  color: #fff;
  text-decoration: none;
  background-color: #1e2e4f;
  animation: rc-banner-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both; /* 表示時にふわっと出す */
}
.rc-banner__link:hover {
  color: #fff;
  text-decoration: none;
}

.rc-banner__img {
  position: absolute;
  inset: 0;
  background-image: url(../img/recruit_banner.jpg); /* 溶接カット(860x430、左端は鏡像で補完)。溶接面がカード右半分の中央 */
  background-size: cover;
  background-position: center;
  filter: brightness(1.12); /* 元写真が暗めなので少しだけ持ち上げる */
  transition: transform 0.6s ease;
}
.rc-banner__img::after {
  content: '';
  position: absolute;
  inset: 0;
  /* 左の文字の背面だけ紺に落とし、右半分(溶接面)は見せる */
  background:
    linear-gradient(95deg, rgba(30, 46, 79, 0.96) 0%, rgba(30, 46, 79, 0.88) 40%, rgba(30, 46, 79, 0.45) 58%, rgba(30, 46, 79, 0.08) 78%, rgba(30, 46, 79, 0.04) 100%),
    linear-gradient(0deg, rgba(30, 46, 79, 0.35) 0%, rgba(30, 46, 79, 0) 40%);
}
.rc-banner__link:hover .rc-banner__img {
  transform: scale(1.05);
}

.rc-banner__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 150px;
  padding: 18px 44px 18px 20px; /* 右は閉じるボタンの逃げ */
  text-align: left;
}

.rc-banner__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  line-height: 1;
}
.rc-banner__tag-en {
  display: inline-block;
  padding: 3px 7px 4px; /* Oswald は字面が下に寄るので上を詰めて光学中央に */
  font-family: "Oswald", sans-serif;
  font-size: 11px;
  font-size: 1.1rem;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  background-color: #d50000;
  border-radius: 3px;
}
.rc-banner__tag-ja {
  opacity: 0.85;
}

.rc-banner__copy {
  font-size: 17px;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.rc-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding-bottom: 3px;
  font-size: 12px;
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
.rc-banner__cta i {
  font-size: 11px;
  transition: transform 0.25s ease;
}
.rc-banner__link:hover .rc-banner__cta i {
  transform: translateX(4px);
}

.rc-banner__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  line-height: 30px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.rc-banner__close:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   SP: PCと同じカードを一回り小さく、右下に
   -------------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
  .rc-banner {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: 236px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(30, 46, 79, 0.35);
    transition: bottom 0.3s ease, opacity 0.2s ease;
  }
  .rc-banner.is-raised {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)); /* 1画面目: ヘッダー(60px)の上 */
  }
  .rc-banner.is-nav-open {
    opacity: 0;
    pointer-events: none;
  }
  .rc-banner__link {
    min-height: 118px; /* 236x118 = PCと同比率 */
  }
  .rc-banner__link:hover .rc-banner__img {
    transform: none;
  }
  .rc-banner__body {
    gap: 6px;
    min-height: 118px;
    padding: 14px 36px 14px 16px;
  }
  .rc-banner__tag {
    gap: 6px;
    font-size: 10px;
    font-size: 1rem;
  }
  .rc-banner__tag-en {
    font-size: 10px;
    font-size: 1rem;
    padding: 2px 6px 3px;
  }
  .rc-banner__copy {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.45;
  }
  .rc-banner__cta {
    font-size: 11px;
    font-size: 1.1rem;
  }
  .rc-banner__close {
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    line-height: 26px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rc-banner__link {
    animation: none;
  }
  .rc-banner__img,
  .rc-banner__cta i {
    transition: none;
  }
}