/* /recruit/ ページ固有スタイル
   共有の style.css / main.js は変更せず、このページでのみ使う新規クラスを定義する。
   既存クラス（.visual-panel / .blueprint-texture / .step-list など）の定義には手を入れない。 */

/* ============================================================
   §1 — iHoldingsで働く理由: 十字（クロス）レイアウト（.why-cross）
   中央の核「あなた」から4方向に細い線（スポーク）が伸び、4つの理由につながる
   「放射」構造。ベン図（重なる円）・合流図（多→一）・路線図（直列）とは異なる。
   巨大アウトライン数字（ベント語彙）は使わず、小さな連番のみ添える。
   ============================================================ */
.why-cross {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 52px minmax(180px, 224px) 52px minmax(200px, 1fr);
  grid-template-rows: auto 52px minmax(140px, auto) 52px auto;
  grid-template-areas:
    ".    .    top    .    ."
    ".    .    tsp    .    ."
    "left lsp  core   rsp  right"
    ".    .    bsp    .    ."
    ".    .    bottom .    .";
  align-items: center;
  justify-items: center;
  max-width: 900px;
  margin-inline: auto;
  padding-block: 8px;
}

.cross-core {
  grid-area: core;
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(104px, 11vw, 132px);
  height: clamp(104px, 11vw, 132px);
  border-radius: 50%;
  background: var(--g-brand);
  box-shadow: 0 12px 32px -12px rgba(43, 92, 255, 0.5);
}

.cross-core-you {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
  letter-spacing: 0.04em;
}

.cross-spoke {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgba(43, 92, 255, 0.5), rgba(0, 196, 204, 0.5));
}

.cross-spoke--top,
.cross-spoke--bottom {
  grid-column: core;
  width: 2px;
  height: 100%;
  justify-self: center;
}

.cross-spoke--top { grid-area: tsp; }
.cross-spoke--bottom { grid-area: bsp; background: linear-gradient(0deg, rgba(43, 92, 255, 0.5), rgba(0, 196, 204, 0.5)); }

.cross-spoke--left,
.cross-spoke--right {
  height: 2px;
  width: 100%;
  align-self: center;
  background: linear-gradient(90deg, rgba(43, 92, 255, 0.5), rgba(0, 196, 204, 0.5));
}

.cross-spoke--left { grid-area: lsp; }
.cross-spoke--right { grid-area: rsp; background: linear-gradient(270deg, rgba(43, 92, 255, 0.5), rgba(0, 196, 204, 0.5)); }

.cross-item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  max-width: 260px;
  padding: 4px 6px;
}

.cross-item--top { grid-area: top; }
.cross-item--right { grid-area: right; }
.cross-item--bottom { grid-area: bottom; }
.cross-item--left { grid-area: left; }

.cross-item-num {
  font-family: "Inter", var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
}

.cross-item-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--c-ink);
  line-height: 1.4;
  /* 「最前線」等の語の途中で折り返さないよう、<wbr>指定位置でのみ改行を許可する */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.cross-item-text {
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--c-text-sub);
}

/* ---- reveal: 核が先に現れ、線が伸び、理由が順に現れる ---- */
.cross-core[data-reveal] {
  transform: scale(0.35);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: 0s;
}
.cross-core[data-reveal].is-visible { transform: scale(1); }

.cross-spoke[data-reveal] {
  opacity: 1;
  transition: transform 0.55s var(--ease-out);
  transition-delay: 0.24s;
}
.cross-spoke--top[data-reveal],
.cross-spoke--bottom[data-reveal] { transform: scaleY(0); }
.cross-spoke--top[data-reveal] { transform-origin: bottom center; }
.cross-spoke--bottom[data-reveal] { transform-origin: top center; }
.cross-spoke--left[data-reveal],
.cross-spoke--right[data-reveal] { transform: scaleX(0); }
.cross-spoke--left[data-reveal] { transform-origin: right center; }
.cross-spoke--right[data-reveal] { transform-origin: left center; }

.cross-spoke--top[data-reveal].is-visible,
.cross-spoke--bottom[data-reveal].is-visible { transform: scaleY(1); }
.cross-spoke--left[data-reveal].is-visible,
.cross-spoke--right[data-reveal].is-visible { transform: scaleX(1); }

.cross-item--top[data-reveal] { transition-delay: 0.4s; }
.cross-item--right[data-reveal] { transition-delay: 0.48s; }
.cross-item--bottom[data-reveal] { transition-delay: 0.56s; }
.cross-item--left[data-reveal] { transition-delay: 0.64s; }

@media (prefers-reduced-motion: reduce) {
  .cross-core[data-reveal],
  .cross-spoke[data-reveal],
  .cross-item[data-reveal] {
    transition-delay: 0s !important;
    transform: none !important;
  }
}

@media (max-width: 800px) {
  .why-cross {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 420px;
  }
  .cross-core { order: 0; margin-bottom: 28px; }
  .cross-item--top { order: 1; }
  .cross-item--right { order: 2; }
  .cross-item--bottom { order: 3; }
  .cross-item--left { order: 4; }
  .cross-item {
    width: 100%;
    max-width: none;
    position: relative;
    padding-top: 30px;
    margin-bottom: 4px;
  }
  .cross-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 28px;
    background: linear-gradient(180deg, rgba(43, 92, 255, 0.5), rgba(0, 196, 204, 0.5));
    transform: translateX(-50%);
  }
  /* デスクトップ用スポークはモバイルで非表示（1本の縦線に統合） */
  .cross-spoke { display: none; }
}

/* ============================================================
   §2 — 私たちが大切にしていること: ダーク全幅 × アウトライン英字 × デュオトーン実写
   （.val-section / .val-row / .val-photo / .val-en / .val-copy / .val-evidence）
   代表差し戻し（毛筆体7rem拡大が「安っぽい」「証拠ゼロ」「和の書だけ浮いている」）を受け、
   セクション全体を作り直し。共有の .section--dark（site/index.html AIセクションで使用中）を
   土台に、このセクション専用のクラスを足す。
   各行は写真パネル（46%前後）＋テキスト側（54%前後）の非対称2カラム。2行目のみ左右反転。
   英字見出しは中抜き→塗りつぶし（背景グラデを background-size で流し込む）が主役の表現で、
   サイト内でまだ使っていない語彙。写真はグレースケール+mix-blend-mode:luminosityで
   ダークな紺〜シアンのデュオトーンに合成し、元写真の色かぶり・生活感を消す（元画像は無加工）。
   直上の「Why iHoldings」セクションが十字（放射）レイアウトのため、明確に別構造にしている。
   ============================================================ */
.val-list {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 9vw, 108px);
  margin-top: clamp(8px, 2vw, 20px);
}

.val-row {
  display: flex;
  align-items: center;
  gap: clamp(32px, 6vw, 72px);
}

.val-row--reverse {
  flex-direction: row-reverse;
}

/* ---- 写真: デュオトーン（グレースケール画像 + luminosity合成のグラデ地） ---- */
.val-photo {
  position: relative;
  flex: 0 1 46%;
  max-width: 46%;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 3 / 2;
  background: linear-gradient(140deg, #0f1b3f, #0a6472);
}

.val-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(0.86);
  mix-blend-mode: luminosity;
  opacity: 0.92;
}

/* ---- テキスト側 ---- */
.val-body {
  position: relative;
  z-index: 2;
  flex: 1 1 0%;
  min-width: 0;
}

/* 巨大英字: 初期状態は中抜き（stroke のみ）。.is-visible でブランドグラデが
   左から右へ流し込まれるが、100%まで塗り切らず 58% で止める。
   完全に塗りきると .text-gradient（トップ/EC事業ページで既出）と同じ「ただの
   グラデーション文字」に見えてしまい、このセクション固有の表現として成立しないため、
   中抜き→塗りの「途中で止まった」状態そのものを最終形として残す（意図的な仕様）。 */
.val-en {
  position: relative;
  display: block;
  /* background-size の % は「要素の幅」基準なので、display:block のまま列幅いっぱいに
     広がっていると、短い語ほど塗り率が上がる（実測: 列613.6pxに対しSPEEDの文字実幅は
     282.7pxしかなく、58%=355.9px は文字幅の125.9%＝中抜きが消える）。
     fit-content で背景ボックスを文字幅に一致させ、3語とも同じ比率で割れるようにする。 */
  width: fit-content;
  font-family: "Inter", var(--font-sans);
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.42);
  background-image: var(--g-brand);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-size 1.1s var(--ease-out) 0.15s;
  /* テキスト側から写真側へわずかにはみ出させる（通常行=左揃え、negative margin-left）。
     .val-row の gap（clamp(32px,6vw,72px)）より常に大きい負値になるよう幅を取り、
     どのビューポート幅でも写真側に確実に数十px重なるようにしている。 */
  margin-left: clamp(-120px, -8vw, -64px);
}

.val-en.is-visible {
  background-size: 58% 100%;
}

.val-row--reverse .val-en {
  /* fit-content 化により text-align では寄らないので margin-left:auto で右に寄せる */
  margin-left: auto;
  margin-right: clamp(-120px, -8vw, -64px);
}

.val-copy {
  max-width: 52ch;
}

.val-title {
  font-family: var(--font-sans);
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.55rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
}

.val-text {
  font-size: 0.96rem;
  line-height: 1.85;
  color: var(--c-dark-sub);
}

.val-evidence {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--c-dark-line);
}

.val-evidence-num {
  font-family: "Inter", var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.val-evidence-note {
  font-size: 0.86rem;
  color: var(--c-dark-sub);
}

@media (prefers-reduced-motion: reduce) {
  /* .val-en 本体の transition/background-size 定義より後ろに置かないと、
     同じ詳細度では先に書いた側が上書きされて無効になる（実際に起きたバグ）。
     静止状態も .is-visible と同じ 58% にする（0%の空の中抜きのまま固めない）。 */
  .val-en {
    transition: none;
    background-size: 58% 100%;
  }
}

@media (max-width: 860px) {
  .val-row,
  .val-row--reverse {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .val-photo {
    flex-basis: auto;
    max-width: none;
  }
  .val-en,
  .val-row--reverse .val-en {
    font-size: clamp(2.2rem, 12vw, 3.2rem);
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  .val-copy {
    max-width: none;
  }
}

/* ============================================================
   §3 — 募集職種: 「入社チケット」（.job-tickets / .job-ticket）
   横長カード＋左右の半円の切り欠き＋左1/4のミシン目で「半券」を区切る、
   切符の紙メタファー。荷札カード（穴+紐）やドッグイヤー提案書（business/ec）
   とは異なる第三の紙メタファーとして意図的に差別化する。
   ============================================================ */
.job-tickets {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 4px;
}

.job-ticket {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr 32px;
  align-items: stretch;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: visible;
  color: inherit;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}

.job-ticket:hover,
.job-ticket:focus-visible {
  transform: translateX(8px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--jt-accent, var(--c-brand)) 40%, var(--c-line));
}

/* 左右の半円の切り欠き（券の背景色でパンチ穴風に抜く） */
.job-ticket::before,
.job-ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  transform: translateY(-50%);
  z-index: 2;
  transition: border-color 0.35s var(--ease-out);
}

.job-ticket::before { left: -11px; }
.job-ticket::after { right: -11px; }

[data-accent="ec"].job-ticket { --jt-accent: var(--c-ec-text); }
[data-accent="welfare"].job-ticket { --jt-accent: var(--c-welfare-text); }
[data-accent="ai"].job-ticket { --jt-accent: var(--c-ai-text); }

.job-ticket-stub {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 8px;
  border-right: 2px dashed var(--c-line);
}

.job-ticket-no {
  font-family: "Inter", var(--font-sans);
  font-weight: 800;
  font-size: 1rem;
  color: var(--jt-accent, var(--c-brand));
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.job-ticket-biz {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--jt-accent, var(--c-brand));
  background: color-mix(in srgb, var(--jt-accent, var(--c-brand)) 12%, transparent);
  padding: 2px 8px;
  border-radius: var(--r-full);
}

.job-ticket-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 20px 18px;
  min-width: 0;
}

.job-ticket-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-ink);
}

.job-ticket-text {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--c-text-sub);
}

.job-ticket-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--jt-accent, var(--c-brand));
  transition: transform 0.35s var(--ease-out);
}

.job-ticket:hover .job-ticket-arrow,
.job-ticket:focus-visible .job-ticket-arrow {
  transform: translateX(4px);
}

@media (max-width: 640px) {
  .job-ticket {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .job-ticket-stub {
    flex-direction: row;
    justify-content: flex-start;
    padding: 14px 18px;
    border-right: none;
    border-bottom: 2px dashed var(--c-line);
  }
  .job-ticket-main {
    padding: 16px 18px 18px;
  }
  .job-ticket-arrow {
    position: absolute;
    right: 18px;
    bottom: 16px;
  }
  .job-ticket::before,
  .job-ticket::after {
    top: auto;
    bottom: auto;
  }
  .job-ticket::before { top: 0; left: 50%; transform: translate(-50%, -50%); }
  .job-ticket::after { top: auto; bottom: 0; left: 50%; right: auto; transform: translate(-50%, 50%); }
}

@media (prefers-reduced-motion: reduce) {
  .job-ticket,
  .job-ticket-arrow {
    transition: none;
  }
}

/* ============================================================
   §4 — 採用FAQ（.recruit-faq）
   details/summaryの開閉機構はstyle.cssの.faq-itemをそのまま流用しつつ、
   見た目をAI LPの.faq-itemと差別化: 左にQ.01等の連番、開いた回答には
   左にブランドグラデの縦ルール、開閉アイコンは矢印の回転で表現する。
   ============================================================ */
.recruit-faq {
  counter-reset: recruitfaq;
}

.recruit-faq .faq-item {
  counter-increment: recruitfaq;
  border-radius: var(--r-lg);
}

.recruit-faq .faq-item summary {
  gap: 18px;
  padding: 22px 26px;
}

.recruit-faq .faq-item summary::before {
  content: "Q." counter(recruitfaq, decimal-leading-zero);
  font-family: "Inter", var(--font-sans);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--c-brand);
  flex: none;
  align-self: center;
}

.recruit-faq .faq-item summary::after {
  display: none;
}

.recruit-faq-q {
  flex: 1;
}

.recruit-faq-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-left: auto;
  color: var(--c-text-sub);
  transition: transform 0.35s var(--ease-out), color 0.3s;
}

.recruit-faq .faq-item[open] .recruit-faq-arrow {
  transform: rotate(90deg);
  color: var(--c-brand);
}

.recruit-faq .faq-answer {
  position: relative;
  padding-left: 58px;
}

.recruit-faq .faq-answer::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 2px;
  bottom: 4px;
  width: 2px;
  background: var(--g-brand);
  border-radius: var(--r-full);
}

@media (prefers-reduced-motion: reduce) {
  .recruit-faq-arrow { transition: none; }
}

/* ============================================================
   §5 — ヒーロー: 斜め分割（.page-hero--split）
   サイト内の他ヒーロー（フルブリード動画+スクリム／3分割モザイク／プレーン）とは
   異なる構図。左側が明るいテキスト面（既存 .page-hero の薄グラデをそのまま流用）、
   右側がチーム写真（上端55%〜下端42%地点を結ぶ斜辺）。境界は垂直ではなく clip-path
   による斜辺で区切り、
   .hero-split-edge がその斜辺に沿って2〜3px幅のブランドグラデーション・ラインを
   走らせて意匠として明示する（写真パネルよりわずかに広い多角形を写真の下に敷き、
   はみ出た数pxだけを縁取りとして見せる手法）。
   ロード時のみ: 写真が右→左へ開くclip-pathワイプで現れ、続いてテキストがフェードイン
   （main.js/motion-v3.js の data-reveal 系は使わず、このセクション内で完結する
   純粋なCSSアニメーション。ページ内スクロールに応じたリビールではない）。
   スクロール連動: 写真のみ motion-v3.js の [data-scroll-progress] → --progress を使い
   ±12px程度の軽いパララックス（JSはmain.js/motion-v3.js既存機構を流用、追加JSなし）。
   モバイルは同じ斜辺モチーフを保ったまま上下構成（上が写真・下がテキスト）に変換する。
   ============================================================ */
.page-hero--split {
  display: flex;
  align-items: center;
  min-height: clamp(560px, 74vh, 760px);
  padding-block: calc(var(--header-h) + clamp(32px, 5vw, 56px)) clamp(40px, 6vw, 64px);
}

.page-hero--split > .container {
  position: relative;
  z-index: 2;
}

/* コピー列はコンテナ中央寄せだと斜辺までの余白が細りすぎるため、
   デスクトップではヘッダーのロゴと揃う左寄せ（padding-inline ≈ 100px）に変更して幅を確保する。
   （下端で斜辺がx=42vwまで食い込むため、開始x + 幅 ≤ 42vw を保つ設計:
   7.5vw + 34vw = 41.5vw ≤ 42vw が全デスクトップ幅で成立）
   ※モバイル（≤900px、縦積みレイアウト）では34vwが細くなりすぎるため適用しない */
@media (min-width: 901px) {
  .page-hero--split > .container {
    max-width: none;
    margin: 0;
    padding-inline: clamp(24px, 7.5vw, 100px);
  }
  .hero-split-copy {
    max-width: min(420px, 34vw);
  }
}

/* .page-title と同じタイポグラフィを継承する専用見出し。
   （.page-title を使うとmain.jsの文字分割対象になり、狭いカラムで
   分割spanの折返しが<br>を無視して暴れるため、意図的に別クラスにしている） */
.hero-split-title {
  font-size: var(--fs-h1);
  font-weight: 900;
  color: var(--c-ink);
  line-height: 1.35;
}

/* ---- 写真パネル（絶対配置でビューポート右端・上端まで断ち落とす） ---- */
.hero-split-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* パララックスの可動域ぶんだけ上下に大きく敷いておき、
   ±12px 移動しても写真の下端・上端に隙間が見えないようにする */
.hero-split-parallax {
  position: absolute;
  inset: -16px 0;
  height: calc(100% + 32px);
  will-change: transform;
  transform: translateY(calc((var(--progress, 0.5) - 0.5) * 24px));
}

/* 斜辺のアクセントライン: 写真本体（.hero-split-media）と同じ多角形を
   9px分だけ左（モバイルは下）に広げた状態で写真の下に敷く。写真からはみ出た
   9px相当（見た目には斜辺に沿って2〜3px幅）だけがラインとして覗く。 */
.hero-split-edge {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(200deg, #2b5cff 0%, #00c4cc 100%);
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  animation-name: heroSplitEdgeWipe;
  animation-duration: 1.05s;
  animation-timing-function: var(--ease-out);
  animation-delay: 0.1s;
  animation-fill-mode: forwards;
}

.hero-split-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  animation-name: heroSplitMediaWipe;
  animation-duration: 1.05s;
  animation-timing-function: var(--ease-out);
  animation-delay: 0.1s;
  animation-fill-mode: forwards;
}

.hero-split-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}

/* ヘッダー（非invert=濃色ロゴ・ナビ）が写真の上に重なる場合の視認性対策。
   写真は上端まで断ち落とすため、固定ヘッダー直下だけ薄く白→透明のグラデを敷く。 */
.hero-split-topscrim {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  height: calc(var(--header-h) + 64px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

@keyframes heroSplitMediaWipe {
  from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
  to   { clip-path: polygon(55% 0, 100% 0, 100% 100%, 42% 100%); }
}

@keyframes heroSplitEdgeWipe {
  from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
  to   { clip-path: polygon(calc(55% - 9px) 0, 100% 0, 100% 100%, calc(42% - 9px) 100%); }
}

.hero-split-copy {
  opacity: 0;
  animation: heroSplitCopyIn 0.75s var(--ease-out) 0.55s forwards;
}

@keyframes heroSplitCopyIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-split-media,
  .hero-split-edge,
  .hero-split-copy,
  .hero-split-parallax {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .hero-split-media { clip-path: polygon(55% 0, 100% 0, 100% 100%, 42% 100%); }
  .hero-split-edge { clip-path: polygon(calc(55% - 9px) 0, 100% 0, 100% 100%, calc(42% - 9px) 100%); }
  .hero-split-copy { opacity: 1; }
}

/* ---- モバイル/タブレット: 上下構成（上55%が写真・下がテキスト）。
   斜辺は浅い角度に変え、写真下端の斜めカットとして残す ---- */
@media (max-width: 900px) {
  .page-hero--split {
    display: block;
    min-height: 0;
    padding-block: 0 clamp(40px, 9vw, 56px);
  }

  .page-hero--split > .container {
    padding-top: clamp(28px, 7vw, 40px);
  }

  .hero-split-copy {
    max-width: none;
  }

  .hero-split-visual {
    position: relative;
    inset: auto;
    margin-top: var(--header-h);
    width: 100%;
    height: clamp(280px, 62vw, 420px);
  }

  .hero-split-parallax {
    inset: -14px 0;
    height: calc(100% + 28px);
  }

  .hero-split-media,
  .hero-split-edge {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    animation-duration: 0.9s;
  }

  .hero-split-media { animation-name: heroSplitMediaWipeMobile; }
  .hero-split-edge { animation-name: heroSplitEdgeWipeMobile; }

  @keyframes heroSplitMediaWipeMobile {
    from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
    to   { clip-path: polygon(0 0, 100% 0, 100% 78%, 0 92%); }
  }

  @keyframes heroSplitEdgeWipeMobile {
    from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
    to   { clip-path: polygon(0 0, 100% 0, 100% calc(78% + 9px), 0 calc(92% + 9px)); }
  }

  .hero-split-topscrim {
    height: calc(var(--header-h) + 40px);
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-split-media { clip-path: polygon(0 0, 100% 0, 100% 78%, 0 92%); }
    .hero-split-edge { clip-path: polygon(0 0, 100% 0, 100% calc(78% + 9px), 0 calc(92% + 9px)); }
  }
}