/* 限定正社員 採用サイト 構築 v5（公開準備版）用 CSS。site.css・apply.css・v2.css・v3.css・v4.css のあとに読む。
   本人 10/08 の直し: 公開できる形に（内部向けの印・説明を出さない）・人の写真を戻す（社内で生成したイメージ写真）・SNS はロゴ・
   ステップアップ。元の色（青緑 #78CDCF・橙 #F98607）と書体はそのまま。 */

/* ===== トップの頭：写真が順に切り替わる（動画の代わり）。止めるボタンつき ===== */
.v5-hero { position: relative; min-height: min(820px, 100svh); padding: calc(var(--h-header) + 56px) 0 170px; overflow: hidden; display: flex; align-items: center; background: #dff3f3; }
.v5-slides { position: absolute; inset: 0; overflow: hidden; }
.v5-slide { position: absolute; inset: 0; opacity: 0; }
.v5-slide:first-child { opacity: 1; }
.v5-slide img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; transform-origin: 65% 45%; animation: v5Zoom 18s ease-in-out infinite alternate; }
.v5-slide:not(:first-child) { animation: v5Show 18s ease-in-out infinite; animation-delay: calc((var(--i) - 1) * 6s); }
@keyframes v5Show { 0%, 33% { opacity: 0; } 37%, 64% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes v5Zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.v5-hero.is-paused .v5-slide, .v5-hero.is-paused .v5-slide img { animation-play-state: paused; }
.v5-hero .hero__veil { background: linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.82) 38%, rgba(255,255,255,0.1) 72%), linear-gradient(0deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0) 28%); }
.v5-hero .hero__in { position: relative; z-index: 2; }
.v5-hero__text { max-width: 640px; }
.v5-hero .hero__title { font-size: clamp(34px, 5.4vw, 74px); line-height: 1.16; letter-spacing: -0.01em; }
.v5-hero .hero__title .ln { display: block; word-break: keep-all; overflow-wrap: anywhere; }
.js .v5-hero .hero__title .ln { opacity: 0; transform: translateY(0.4em); }
.js .v5-hero.hero-ready .hero__title .ln { animation: fadeUp 0.8s var(--ease) both; animation-delay: calc(var(--i, 0) * 160ms + 150ms); }
.v5-hero .hero__lead { font-size: clamp(16px, 1.3vw, 19px); }
.v5-pause { position: absolute; z-index: 3; right: 20px; bottom: 132px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px; border-radius: 999px; border: 1px solid rgba(15, 95, 102, 0.35); background: rgba(255, 255, 255, 0.9); color: var(--c-deeper); font-size: 13px; font-weight: 700; }
.v5-pause::before { content: ""; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.v5-pause[aria-pressed="true"]::before { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.v5-hero .hero__note { z-index: 3; }

/* ===== 写真の枠（写真はイメージです） ===== */
.v5-photo { position: relative; margin: 0; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); }
.v5-photo img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.v5-photo figcaption { position: absolute; right: 10px; bottom: 10px; font-size: 12px; color: var(--c-ink2); background: rgba(255, 255, 255, 0.9); border-radius: 999px; padding: 0 10px; line-height: 1.8; }
.v5-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }

/* ===== ステップアップ ===== */
.v5-career { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: end; margin: 0; padding: 0; list-style: none; }
.v5-career li { position: relative; display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--c-line); border-radius: 18px; padding: 18px 16px 16px; box-shadow: var(--shadow); }
.v5-career li:nth-child(1) { min-height: 220px; }
.v5-career li:nth-child(2) { min-height: 250px; }
.v5-career li:nth-child(3) { min-height: 280px; }
.v5-career li:nth-child(4) { min-height: 310px; }
.v5-career li:nth-child(5) { min-height: 340px; background: linear-gradient(180deg, #fff, var(--c-tint)); border-color: var(--c-main); }
.v5-career__step { font-family: var(--f-en); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; color: var(--c-deep); }
.v5-career__role { font-weight: 700; font-size: 17px; color: #1d3c40; line-height: 1.4; }
.v5-career__rank { font-size: 12.5px; color: var(--c-ink2); }
.v5-career__num { margin-top: auto; font-family: var(--f-num); font-weight: 700; font-size: clamp(26px, 2.4vw, 34px); color: var(--c-deeper); line-height: 1.1; }
.v5-career__num small { font-family: var(--f-jp); font-size: 0.45em; margin-left: 2px; }
.v5-career__kind { font-size: 12px; color: var(--c-ink2); }
.v5-career__add { font-size: 12.5px; font-weight: 700; color: #9a4a00; }
.v5-premise { margin-top: 18px; font-size: 13.5px; color: var(--c-ink2); line-height: 1.8; }
.v5-premise li { margin-bottom: 2px; }
.js [data-reveal] .v5-career li { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--n) * 110ms + 100ms); }
.js [data-reveal].is-in .v5-career li { opacity: 1; transform: none; }
.js [data-reveal].v5-stagger { transform: none; }

/* ===== 募集中の求人（いまは宮城の 1 件） ===== */
.v5-job { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0; background: #fff; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); }
.v5-job .v5-photo { border-radius: 0; box-shadow: none; height: 100%; }
.v5-job .v5-photo img { aspect-ratio: auto; min-height: 100%; }
.v5-job__body { padding: 28px 30px; display: grid; gap: 10px; align-content: start; }
.v5-job__area { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; color: #1d3c40; line-height: 1.3; }
.v5-job__area small { font-size: 15px; font-weight: 500; margin-left: 6px; }
.v5-job__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 4px; }
.v5-job__facts div { background: var(--c-tint); border-radius: 12px; padding: 10px 12px; }
.v5-job__facts dt { font-size: 12px; color: var(--c-ink2); }
.v5-job__facts dd { margin: 0; font-weight: 700; color: var(--c-deeper); font-size: 15px; }
.v5-job__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.v5-other { margin-top: 22px; background: var(--c-tint); border-radius: 16px; padding: 18px 22px; }
.v5-other b { display: block; color: #1d3c40; margin-bottom: 4px; }
.v5-other p { margin: 0 0 10px; }

/* ===== 公式SNS（会社のサイトと同じロゴ） ===== */
.v5-sns { margin-top: 24px; }
.v5-sns__t { font-weight: 700; font-size: 14px; color: var(--c-deeper); margin: 0 0 10px; }
.v5-sns__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.v5-sns__list a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-deep); transition: background 0.3s, transform 0.3s var(--ease); }
.v5-sns__list a:hover { background: var(--c-deeper); transform: translateY(-2px); }
.v5-sns__list img { width: 20px; height: 20px; object-fit: contain; }

/* ===== 960px 以下 ===== */
@media (max-width: 960px) {
  .v5-career { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .v5-career li:nth-child(n) { min-height: 0; }
  .v5-split, .v5-job { grid-template-columns: 1fr; }
  .v5-job .v5-photo img { aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
  .v5-hero { padding: calc(var(--h-header) + 28px) 0 150px; min-height: 0; }
  .v5-hero .hero__veil { background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.78) 60%, rgba(255,255,255,0.45) 100%); }
  .v5-pause { right: 12px; bottom: 112px; }
  .v5-career { grid-template-columns: 1fr; }
  .v5-job__facts { grid-template-columns: 1fr; }
}

/* ===== 動きを減らす設定：写真は 1 枚目で止める・止めるボタンは出さない ===== */
@media (prefers-reduced-motion: reduce) {
  .v5-slide:not(:first-child) { display: none; }
  .v5-pause { display: none; }
  .js .v5-hero .hero__title .ln, .js [data-reveal] .v5-career li { opacity: 1 !important; transform: none !important; }
}

/* 給与の例 4 枚（夜勤の仮定の例は載せない） */
@media (min-width: 1101px) { .stairs.v5-stairs4 { grid-template-columns: repeat(4, 1fr); } }