/* HOMEだけ通常ヘッダーをHeroへ重ねる。固定ヘッダーは既存仕様を使用。 */
.home-navigation .site-header--normal {
  position: absolute;
  inset: 0 0 auto;
  background: transparent;
}
.home-navigation .site-header--normal .site-header__logo,
.home-navigation .site-header--normal .global-nav { display: none; }

.home-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  background: #000;
}
.home-hero__slides {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('/i/home-compare/top_slide01.jpg') center / cover no-repeat;
  animation: home-hero-initial-fade 1.5s ease-out both;
}
.home-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  animation: home-hero-crossfade 30s linear infinite both;
}
/* 6秒間隔、1.8秒で次の画像を重ねる。下の画像はfade完了まで不透明を保つ。 */
.home-hero__slide:nth-child(1) { opacity: 1; animation-delay: -.3s; }
.home-hero__slide:nth-child(2) { animation-delay: 5.7s; }
.home-hero__slide:nth-child(3) { animation-delay: 11.7s; }
.home-hero__slide:nth-child(4) { animation-delay: 17.7s; }
.home-hero__slide:nth-child(5) { animation-delay: 23.7s; }
/* 初回fade完了後、01を4.2秒静止表示してから通常の切替へ。 */
@keyframes home-hero-initial-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes home-hero-crossfade {
  0% { opacity: 0; z-index: 2; }
  6%, 20% { opacity: 1; z-index: 2; }
  20.001%, 26% { opacity: 1; z-index: 1; }
  26.001%, 100% { opacity: 0; z-index: 0; }
}
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/i/home-movie-overlay.png') repeat,
    linear-gradient(rgba(85, 85, 85, .30), rgba(85, 85, 85, .30));
  pointer-events: none;
  z-index: -1;
}
.home-hero__copy { text-align: center; }
.home-hero__heading { margin: 0; line-height: 1; }
.home-hero .professional-staffing { display: block; width: 600px; height: auto; margin-inline: auto; }
.home-hero__japanese {
  margin: 26px 0 38px;
  color: #fff;
  font-family: var(--font-hero-japanese);
  font-size: 24px;
  font-weight: var(--font-weight-regular);
}
.home-hero__logo { display: block; width: 154px; height: auto; margin-inline: auto; }
.home-hero .home-hero__logo .st1 { fill: #fff; }
.home-hero__scroll {
  position: absolute;
  bottom: 0;
  left: calc(50% - 40px);
  width: 80px;
  height: 114px;
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  letter-spacing: .08em;
}
.home-hero__scroll::after {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 0;
  left: 50%;
  border-left: 1px solid #fff;
}
/* 旧HOMEの5px・2秒linear・80%まで不透明のドットを、現在の縦ラインへ移植。 */
.home-hero__scroll::before {
  content: "";
  position: absolute;
  top: 26px;
  left: calc(50% - 2px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  animation: home-scroll-dot 2s linear infinite;
}
@keyframes home-scroll-dot {
  0% { top: 26px; opacity: 1; }
  80% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.home-audiences { padding-block: 64px 76px; background: #f7f7f7; }
.home-audiences__grid { display: grid; grid-template-columns: repeat(2, 450px); gap: 60px; }
.home-audience { padding: 48px 35px 52px; border-radius: 16px; background: #fff; }
.home-audience__english { margin: 0 0 12px; color: var(--color-accent); font-size: 13px; }
.home-audience--business .home-audience__english { color: #004de6; }
.home-audience h2 { margin: 0; font-size: 30px; font-weight: var(--font-weight-bold); }
.home-audience__description { margin: 32px 0 36px; font-size: 14px; line-height: 2; }
.home-content { padding-top: 76px; padding-bottom: 100px; }
.home-news { padding-block: 72px 80px; background: #f7f7f7; }
.home-news__all { margin-top: 40px; }

@media (prefers-reduced-motion: reduce) {
  .home-hero__slides { animation: none; opacity: 1; }
  .home-hero__slide { animation: none; opacity: 0; }
  .home-hero__slide:first-child { opacity: 1; }
  .home-hero__scroll::before { animation: none; }
  .home-hero .professional-staffing [class*="svg-elem-"] { transition: none !important; }
}

/* SP共通ブレイクポイント：PCの既存指定は維持する。 */
@media (max-width: 480px) {
  .home-navigation .site-header--normal { position: relative; inset: auto; height: 0; }
  .home-navigation .site-header--normal .site-header__actions { height: 0; }
  .home-navigation .site-header--normal .site-header__logo { display: none; }
  .home-hero { height: 100svh; min-height: 100svh; }
  .home-hero__copy { width: 100%; padding: 80px 32px 130px; }
  .home-hero .professional-staffing { width: 320px; max-width: none; height: auto; margin-inline: calc((100% - 320px) / 2); }
  .home-hero__japanese { margin: 24px 0 28px; font-size: 20px; }
  .home-hero__logo { width: 120px; }
  .home-audiences { padding-block: 40px; }
  .home-audiences__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .home-audience { padding: 28px 24px; }
  .home-audience h2 { font-size: 24px; }
  .home-audience__description { margin-block: 24px; }
  .home-content { padding-top: 40px; padding-bottom: 56px; }

  .home-news { padding-block: 40px 48px; }
}

/* 正式HOME：支給3写真のHero。既存比較案へは適用しない。 */
.home-hero--test3 { background: #f7f7f7; }
.home-hero--test3::before { content: none; background: none; }
.hero-test3-slides { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: url('/i/top_slide01.jpg') center / cover no-repeat; }
.hero-test3-slide { position: absolute; inset: 0; opacity: 0; animation: hero-test3-photo 18s linear infinite both; will-change: transform, opacity; }
.hero-test3-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-test3-slide:nth-child(2) { animation-delay: 6s; }
.hero-test3-slide:nth-child(3) { animation-delay: 12s; }
/* 6秒ごとに次の写真を重ね、0.7秒でフェード。退場完了まで拡大を続ける。
   下の写真は不透明を維持し、リセットは次の写真に隠れてから行う。 */
@keyframes hero-test3-photo {
  0% { opacity: 0; z-index: 2; transform: scale(1); }
  3.888889% { opacity: 1; z-index: 2; }
  33.333333% { opacity: 1; z-index: 2; }
  33.333334% { opacity: 1; z-index: 1; }
  37.222222% { opacity: 1; z-index: 1; transform: scale(1.05); }
  37.222223%, 100% { opacity: 0; z-index: 0; transform: scale(1.05); }
}
.home-hero--test3 .home-hero__copy { transform: translateY(28px); }
.home-hero--test3 .home-hero__japanese { color: #3e3a39; }
.home-hero--test3 .home-hero__logo .st1 { fill: #231815; }
.home-hero--test3 .home-hero__scroll { color: #231815; }
.home-hero--test3 .home-hero__scroll::after { border-color: #231815; }
.home-hero--test3 .home-hero__scroll::before { background: #231815; }
@media (max-width: 480px) {
  .home-hero--test3 .home-hero__copy { transform: none; }
  .hero-test3-slide img { object-position: center center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-test3-slide { animation: none; opacity: 0; transform: none; will-change: auto; }
  .hero-test3-slide:first-child { opacity: 1; }
}

/* 第1比較案のファイルを変更せず、上書き前の写真を維持する。 */
.home-hero--test .home-hero__slide {
  content: url('/i/home-compare/top_slide01.jpg');
}

/* 正式HOME・三角形比較ページ共通：三角形の背後は白、都市写真は手前で上端を溶かす。 */
.home-hero--triangle { background: #fff; }
.home-hero--triangle .hero-triangle-photo,
.home-hero--triangle .hero-triangle-pattern {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.home-hero--triangle .hero-triangle-pattern { z-index: -2; }
.home-hero--triangle .hero-triangle-photo {
  z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 40%, #000 75%);
  mask-image: linear-gradient(to bottom, transparent 40%, #000 75%);
}
.hero-triangle-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.hero-triangle-pattern svg { display: block; width: 100%; height: 100%; }
.hero-triangle-pattern polygon {
  fill: #777777;
  opacity: .08;
  /* SVGの5〜8秒を8〜12秒へ換算。delayも同率で延ばして位相を保持する。 */
  --breath-period: calc(var(--breath-duration) * 4 / 3 + 4s / 3);
  animation: hero-triangle-breathe var(--breath-period) ease-in-out calc(var(--breath-delay) * (var(--breath-period) / var(--breath-duration))) infinite;
}
/* 75%で往復し、残り25%は薄い状態で待機。 */
@keyframes hero-triangle-breathe {
  0%, 75%, 100% { opacity: .025; }
  37.5% { opacity: var(--breath-peak, .12); }
}
/* 横棒と縦棒を不透明な白で合成してから、全体をぼかす。
   接続部で半透明レイヤーの濃度が加算されないT字。 */
.home-hero--triangle .home-hero__scroll { background: none; isolation: isolate; }
.home-hero--triangle .hero-triangle-scroll-halo {
  position: absolute;
  inset: -14px -28px -12px;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(#fff, #fff) center 8px / 68px 32px no-repeat,
    linear-gradient(#fff, #fff) center 30px / 22px calc(100% - 30px) no-repeat;
  filter: blur(6px);
  opacity: .92;
}
@media (prefers-reduced-motion: reduce) {
  .hero-triangle-pattern polygon { animation: none; opacity: .08; }
}