/* ==========================================================================
   Hero + Whiteboard animation
   ========================================================================== */
.hero { position: relative; overflow: hidden; background: var(--color-paper); --hero-paper: #f4f4ed; }
.hero__media { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 82svh; background: var(--hero-paper, #faf8f2); overflow: hidden; }
.hero__media > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media .wb__poster, .hero__media .hero__poster, .hero__media .hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media .wb__poster { opacity: 1; transition: opacity .4s; z-index: 1; }
.hero__media.is-ready .wb__poster { opacity: 0; pointer-events: none; }
.hero__media .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media .hero__poster { z-index: 1; opacity: 0; pointer-events: none; transition: opacity .3s; }
.hero__media.is-static .hero__poster { opacity: 1; }
.hero__media.is-static .hero__video { visibility: hidden; }
/* 動画セルの縁を紙色（--hero-paper）へフェードして、コピー側との境界を出さない（PC=左端 / SP=下端） */
.hero--top, .hero--recruit { background: var(--hero-paper); }
.hero--top .hero__media::after, .hero--recruit .hero__media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgb(244 244 237 / 0) 78%, var(--hero-paper) 100%); }
@media (min-width: 900px) {
  .hero--top .hero__media::after, .hero--recruit .hero__media::after { background: linear-gradient(90deg, var(--hero-paper) 0, rgb(244 244 237 / 0) clamp(110px, 16%, 220px)); }
}
.hero__unmute { position: absolute; right: 12px; bottom: 12px; z-index: 3; padding: .4rem .9rem; border-radius: var(--radius-pill); background: rgb(31 52 80 / .75); color: #fff; font-size: .8rem; backdrop-filter: blur(6px); }
.hero__inner { position: relative; z-index: 2; }
.hero__copy { padding-block: clamp(1.75rem, 4vw, 3rem); max-width: 40em; }
.hero__label { display: inline-block; font-family: var(--font-hand); color: var(--color-water-deep); letter-spacing: .12em; margin-bottom: .4rem; }
.hero__title { font-size: var(--fs-3xl); color: var(--color-navy-deep); letter-spacing: .01em; }
.hero__sub { margin-top: var(--sp-4); font-size: var(--fs-lg); color: var(--color-ink-soft); max-width: 34em; }
.hero__btns { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.hero__scroll { display: none; }
/* 採用ラベルは pages/recruit.css（水色）より後勝ちで濃色に統一 */
.hero--recruit .hero__label { color: var(--color-water-deep); }
/* PC: 2カラム（左＝コピー / 右＝動画）。動画は自分の列に置き、コピーと重ねない。右端までブリード */
@media (min-width: 900px) {
  .hero--top, .hero--recruit {
    --hero-copy-w: 30rem;
    background: var(--hero-paper);
    display: grid;
    grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, min(var(--hero-copy-w), 42%)) minmax(0, calc(var(--container) - var(--hero-copy-w))) minmax(var(--gutter), 1fr);
    min-height: min(calc(100svh - var(--header-h)), 820px, 56vw); /* 56vw: 動画セルの縦横比 ≥ 約0.95 を保証（中央の線画が切れない） */
    align-items: stretch;
  }
  .hero--top .hero__inner, .hero--recruit .hero__inner { grid-column: 2; grid-row: 1; align-self: center; width: auto; margin: 0; }
  .hero--top .hero__copy, .hero--recruit .hero__copy { max-width: none; padding-block: clamp(3rem, 5vw, 4.5rem); padding-inline-end: clamp(1.5rem, 3vw, 3rem); }
  .hero--top .hero__media, .hero--recruit .hero__media { grid-column: 3 / -1; grid-row: 1; align-self: stretch; position: relative; inset: auto; width: 100%; height: auto; min-height: 0; max-height: none; aspect-ratio: auto; }
  .hero--top .hero__media .hero__video, .hero--recruit .hero__media .hero__video,
  .hero--top .hero__media .hero__image, .hero--recruit .hero__media .hero__image,
  .hero--top .hero__media .hero__poster, .hero--recruit .hero__media .hero__poster,
  .hero--top .hero__media .wb__poster, .hero--recruit .hero__media .wb__poster { object-fit: cover; object-position: center; }
  .hero--top .hero__title { font-size: clamp(2.25rem, 1rem + 2.6vw, 3.2rem); line-height: 1.25; letter-spacing: .03em; } /* 8文字×2行のキャッチが左カラム（最大30rem）に収まる上限 */
  .hero--recruit .hero__title { font-size: var(--fs-3xl); color: var(--color-navy-deep); }
  .hero--recruit .hero__sub { color: var(--color-ink-soft); }
}
/* SP: 動画を上（中央トリミング）、コピーを下 */
@media (max-width: 899px) {
  .hero--top .hero__media, .hero--recruit .hero__media { aspect-ratio: 4 / 3; max-height: 62svh; }
  .hero--top .hero__media .hero__video, .hero--recruit .hero__media .hero__video,
  .hero--top .hero__media .hero__image, .hero--recruit .hero__media .hero__image,
  .hero--top .hero__media .hero__poster, .hero--recruit .hero__media .hero__poster,
  .hero--top .hero__media .wb__poster, .hero--recruit .hero__media .wb__poster { object-fit: cover; object-position: center; }
}

/* whiteboard SVG runtime */
.wb svg { background: transparent; }
.wb .wb-hand { pointer-events: none; will-change: transform; }
.wb--static .wb-hand { display: none; }
.wb--static .wb-eraser { display: none; }
@media (prefers-reduced-motion: reduce) { .wb .wb-hand { display: none; } }