/* === 採用堂：鎌倉投信風ヘッダーイラスト＋歩く人 === */

.saiyou-hero {
  width: 100%;
  background: #fff;
}

/* 背景の上に文字や歩く人を重ねるための土台 */
.saiyou-hero__inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

/* 背景（picture対応） */
.saiyou-hero__bg,
.saiyou-hero__bg > img {
  width: 100%;
  height: auto;
  display: block;
}

/* === ヘッダーコピー：横中心／縦40%（上から40%） === */
.saiyou-hero__copy {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;                     /* 左右0で中央寄せの土台 */
  transform: translateY(-50%);  /* 40%を基準に中央揃え */

  z-index: 2;
  text-align: center;

  width: min(1100px, 92vw);
  margin: 0 auto;

  background: none;
  padding: 0;
  backdrop-filter: none;
}

/* メインコピー */
.saiyou-hero__copyMain {
  margin: 0 0 18px;
  font-weight: 800;
  line-height: 1.15;

  font-size: clamp(34px, 3vw, 64px);
  letter-spacing: 0.03em;

  color: #d7262e; /* 採用堂の赤 */
}

/* サブコピー */
.saiyou-hero__copySub p {
  margin: 0 0 12px;
  line-height: 1.8;
  font-weight: 500;

  font-size: clamp(14px, 1.2vw, 17px);
  letter-spacing: 0.02em;
  color: #333;
}

/* === 歩く人（左→右に移動） === */
.saiyou-hero__walker {
  position: absolute;
  bottom: 0;
  left: 0;

  /* サイズ：PC 30px / SP 20px */
  width: 30px;
  height: auto;

  transform: translateX(var(--saiyou-walk-start, -200px));
  animation: saiyou-walk var(--saiyou-walk-duration, 14s) linear infinite;
  will-change: transform;
  pointer-events: none;
  user-select: none;

  z-index: 1; /* 文字の背面 */
}

/* スマホだけ 20px */
@media (max-width: 768px) {
  .saiyou-hero__walker {
    width: 20px;
  }
}

/* 左の画面外→右の画面外まで */
@keyframes saiyou-walk {
  0%   { transform: translateX(var(--saiyou-walk-start, -200px)); }
  100% { transform: translateX(var(--saiyou-walk-end, 1600px)); }
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce) {
  .saiyou-hero__walker {
    animation: none;
    transform: translateX(0);
  }
}