/* /recruit/interviews/<slug> インタビュー詳細（templates/recruit/interview.mjs）。カード格子と RECRUIT INFO は recruit/interviews-index.css を併読
   実測: docs/design-recruit.md §3-8、capture/recruit-preview/interviews__staff1-1/slices/{pc1280,fold344,open841}-*.png、capture/compare/recruit__interviews__staff〈番号〉の slices（2026-09-18 見比べ）
   ブレークポイント: 〜599 / 600〜767 / 768〜1079（展開した折りたたみ＝独立した帯）/ 1080〜
   規約: 100vh 禁止（帯は内容高さ）・center+overflow-x 併用禁止・body overflow-x:hidden 禁止・タップ標的 44px・ch 単位禁止・色はトークンのみ */

/* ---------- ヒーロー（オレンジ→ピーチ横グラデの帯、radius 16） ---------- */
/* （.ivd-hero-wrap の基本の上余白 12 は、上のコメントの「*」「/」で直前が崩れて効いていなかった。効かない状態で現行と画素合わせ済みなので消した。2026-09-28） */
.ivd-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); background: linear-gradient(90deg, var(--c-orange), var(--c-peach)); border-radius: var(--r-m); color: var(--c-white); }
.ivd-smile { left: -6%; bottom: -14%; opacity: 0.1; }
/* 〜767: 写真の下に 32〜40 空けてラベル（344 の実物: 写真下端 440 → ラベル 483） */
.ivd-hero-text { display: grid; gap: 16px; padding: 32px 24px 40px; }
.ivd-label { position: relative; display: block; padding: 0 0 12px 24px; font-family: var(--f-en); font-size: var(--fs-label); letter-spacing: var(--ls-label); line-height: 1.7; text-transform: uppercase; border-bottom: 1px dashed color-mix(in srgb, var(--c-white) 50%, transparent); }
.ivd-label::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 10px; height: 10px; border-radius: 50%; background: var(--c-white); }
.ivd-title { font-size: 24px; line-height: 1.8; color: var(--c-white); letter-spacing: 0.06em; text-wrap: pretty; }
.ivd-who { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 8px; }
.ivd-name { font-family: var(--f-round); font-size: 28px; line-height: 1.3; letter-spacing: 0.06em; }
.ivd-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 16px; border-radius: var(--r-pill); background: var(--c-white); color: var(--c-orange); font-size: 14px; line-height: 1.5; letter-spacing: 0.04em; }
/* 写真: 〜1079 は帯の上に中央（344 の実物: 幅 220、841 の実物: 幅 360）。帯の下端に接地させる 2 カラムは 1080〜 */
.ivd-photo { order: -1; display: flex; justify-content: center; padding: 24px 24px 0; }
.ivd-photo-img { display: block; width: 220px; max-width: 100%; height: auto; }

/* 600〜767: 写真 260、文字は 20〜28 */
@media (min-width: 600px) {
  .ivd-photo-img { width: 260px; }
  .ivd-hero-text { padding: 40px 40px 48px; gap: 20px; }
  .ivd-title { font-size: 26px; }
}
/* 768〜1079: 841 の実物どおり縦積み（写真 360 を中央、文字は左右 13% の内寄せ・H1 26px 1 行・氏名 32）。帯は内容の高さ（100vh 禁止） */
@media (min-width: 768px) and (max-width: 1079px) {
  .ivd-hero-wrap { padding-top: 16px; }
  .ivd-photo { padding: 64px 40px 0; }
  .ivd-photo-img { width: 360px; }
  .ivd-hero-text { padding: 48px clamp(40px, 13%, 108px) 72px; gap: 24px; }
  .ivd-title { font-size: 26px; }
  .ivd-name { font-size: 32px; }
  .ivd-chip { font-size: 15px; }
}
/* 1080〜: PC 実測（帯 640、左 padding 80、H1 40px lh1.85、氏名 40px、写真 480 幅で右余白 80・下端接地） */
@media (min-width: 1080px) {
  .ivd-hero-wrap { padding-top: 24px; }
  .ivd-hero { grid-template-columns: minmax(0, 1fr) min(560px, 46%); column-gap: 40px; align-items: end; min-height: 640px; }
  .ivd-hero-text { align-self: center; max-width: 600px; padding: 80px 0 80px 80px; gap: 32px; }
  .ivd-label { font-size: 16px; }
  .ivd-title { font-size: 40px; line-height: 1.85; max-width: 520px; }
  .ivd-name { font-size: 40px; }
  .ivd-who { gap: 16px 20px; }
  .ivd-photo { order: 0; align-self: end; justify-content: flex-end; padding: 24px 80px 0 0; }
  .ivd-photo-img { width: 100%; }
  .ivd-smile { left: 0; bottom: -8%; }
}
/* 1080〜 帯は画面幅に追従（現行 1280/1440 とも帯は左右 40・上端 120＝ヘッダー下 12。容器 1200 に閉じると 1440 で左右 120 に縮んでいた）。
   文字列は帯の残り幅いっぱい（1440 で点線 120〜765 ＝ H1 が 1 行 15 字、1280 で 120〜604）。写真列 560・列間 76（2026-09-25 現行照合） */
@media (min-width: 1080px) {
  .ivd-hero-wrap { padding-top: 12px; }
  .ivd-hero-wrap > .container { width: calc(100% - 80px); max-width: none; }
  .ivd-hero { column-gap: 76px; }
  .ivd-hero-text { max-width: none; }
  .ivd-title { max-width: none; }
}

/* ---------- 本文 Q&A（幅 960。H2 はピーチ帯・オレンジ、段落 15/16px lh2.1〜2.2） ---------- */
/* 実測: 帯→本文 48（344）/ 80（841・PC）。H2 帯の高さ 44（344・16px）/ 48（841〜・20px）。節の間 64（344）/ 88（841〜） */
.ivd-body-wrap { padding-block: clamp(48px, 6vw, 80px) 0; }
.ivd-body { max-width: 960px; margin-inline: auto; }
.ivd-body h2 { margin: 64px 0 16px; padding: 8px 12px; background: var(--c-peach-soft); border-radius: 0; color: var(--c-orange); font-size: 16px; line-height: 1.75; letter-spacing: 0.06em; text-wrap: pretty; }
.ivd-body h2:first-child { margin-top: 0; }
.ivd-body p { margin: 0; font-size: 15px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-deep); }
.ivd-body p + p { margin-top: 1em; }
.ivd-body ul, .ivd-body ol { margin: 0; padding-left: 1.4em; line-height: 2; }
.ivd-body a { color: var(--c-orange); text-decoration: underline; text-underline-offset: 3px; padding-block: 6px; }
.ivd-body strong { color: var(--c-orange); }
.ivd-back-row { max-width: 960px; margin: clamp(40px, 5vw, 64px) auto 0; text-align: center; }
.ivd-back { min-height: 56px; }
@media (min-width: 768px) {
  .ivd-body-wrap { padding-top: 80px; }
  .ivd-body h2 { margin: 88px 0 16px; padding: 8px 16px; font-size: 20px; line-height: 1.6; }
  .ivd-body p { font-size: 16px; line-height: 2.1; }
}
/* 768〜1079: 本文の幅は 841 の実物どおり内寄せ（75〜766 = 690） */
@media (min-width: 768px) and (max-width: 1079px) {
  .ivd-body, .ivd-back-row { max-width: 720px; }
}
/* 「一覧へ戻る」を出さないとき（既定。現行に無い）: 最後の段落の字下→OTHER STAFF のラベル字頭を現行に合わせる
   現行実測: 390・841 で 150、1280・1440 で 229（2026-09-25）。ボタンぶんの高さをここで持つ */
.ivd-body-wrap.is-noback { padding-bottom: 80px; }
@media (min-width: 768px) { .ivd-body-wrap.is-noback { padding-bottom: 41px; } }
@media (min-width: 1080px) { .ivd-body-wrap.is-noback { padding-bottom: 85px; } }

/* ---------- OTHER STAFF（見出しは全幅で左寄せ。PC は格子 1106 の左端に揃える） ---------- */
.ivd-others { padding-block: var(--section-y) 0; }
.ivd-others .sec-head { margin-bottom: 24px; }
@media (min-width: 768px) { .ivd-others .sec-head { margin-bottom: 40px; } }
/* 1080〜: 現行どおり一覧（/recruit/interviews）と同じ容器 1280・左右 80（1280〜）に置き、見出しは格子の左端に揃える
   （現行実測 2026-09-29: 1440 で見出し・カードとも x=80、カード 406.3 × 3 列。旧: 容器 1200・見出しだけ 1106 の中央で 47 右にずれていた） */
@media (min-width: 1080px) {
  .page-recruit-interview .ivd-others { --container: 1280px; }
  /* 見出しの縦: 現行は ラベル 27.2 → 16 → 見出し 54.4 → 40 → カード（1920/1440/1280 同じ）。ラベルは 4 右（x=84）。2026-09-29 照合で 0 / 48 から直した */
  .ivd-others .sec-head { gap: 16px; margin-bottom: 40px; }
  .page-recruit-interview .ivd-others .sec-head .sec-label { padding-left: 4px; }
}
@media (min-width: 1121px) { .page-recruit-interview .ivd-others { --gutter: 80px; } }   /* 現行は 1121〜 で左右 80（一覧と同じ。2026-09-29 照合）。1080〜1120 は 40 */
/* 詳細ページの格子の下は RECRUIT INFO が続くので下余白を持たない */
.page-recruit-interview .ivd-others .ivl-grid { margin-bottom: 0; }

/* ======================================================================
   SP（〜767）の細部を参照 440/393/344 の実測に合わせる（capture/sp-compare/recruit__interviews__staff1-1、2026-09-24）
   3 幅とも同じ値（帯は左右 8・上 80、写真 239 幅で帯の上端から 42、ラベル字頭 483）。768〜 は上の値のまま
   ====================================================================== */
@media (max-width: 767px) {
  .ivd-hero-wrap { padding-top: 10px; }   /* 帯の上端 80（参照 3 幅。ヘッダー 70 の下 10） */
  .ivd-hero-wrap > .container { width: calc(100% - 16px); }
  .ivd-photo { padding: 42px 0 0; }
  .ivd-photo-img { width: 239px; }   /* 写真のインク 224 幅・下端は帯の上端＋349（参照 440/344） */
  /* 文字: 左右 32（点線 40〜399）。写真下→ラベル枠 41、点線はラベル字頭 +27、点線→H1 字頭 35（H1 24px lh1.7 字送り 0.04em）、
     H1 字下→氏名 43（氏名 24px、所属チップは氏名の下 18・高さ 30）、チップ下→帯の下端 40 */
  .ivd-hero-text { gap: 0; padding: 42px 32px 40px; }
  .ivd-label { padding-bottom: 8px; }
  .ivd-title { margin-top: 25px; line-height: 1.7; letter-spacing: 0.04em; }
  .ivd-who { display: grid; justify-items: start; gap: 12px; margin-top: 27px; }
  .ivd-name { font-size: 24px; }
  .ivd-chip { min-height: 30px; padding: 2px 16px; }
  /* 白スマイル: 幅 239 を帯の左 32・上 389（大きい点の中心が帯の左上から 88,410。3 幅とも同じ位置＝上基準） */
  .ivd-hero .smile.ivd-smile { width: 239px; left: 32px; top: 389px; bottom: auto; }

  /* 本文: 左右 32・14px lh2.2（字送り 30.8）・色 #574D45。見出し帯は高さ 42（16px lh1.625＋上下 8）、前の段落→帯 56、帯→段落 9 */
  .ivd-body-wrap { padding-top: 56px; }
  .ivd-body-wrap > .container { width: calc(100% - 64px); }
  .ivd-body h2 { margin: 56px 0 9px; line-height: 1.625; }
  .ivd-body h2:first-child { margin-top: 0; }
  .ivd-body p { font-size: 14px; color: var(--c-ink-soft); padding-right: 8px; }   /* 段落の行幅は W−72（参照: 440 で 24 字・393 で 21 字/行。W−64 だと 1 字多く入って 440 の最初の段落が 1 行減る） */
  /* 一覧へ戻る（参照に無い追加。最後の段落→OTHER STAFF のラベル字頭 146 の間に収める） */
  .ivd-back-row { margin-top: 24px; }
  /* 344 で 2 行に折れて 13px 伸び、OTHER STAFF が参照より下がっていた。1 行（高さ 56）に収める */
  .ivd-back { padding: 10px 20px 10px 48px; font-size: 15px; white-space: nowrap; }
  .ivd-back .btn-arrow { left: 24px; }
  .ivd-others { padding-top: 50px; }
  .ivd-others .sec-head { gap: 15px; margin-bottom: 25px; }
  .page-recruit-interview .rinfo { margin-top: 86px; }   /* OTHER STAFF の最後のカード→RECRUIT INFO の弧の頂 86（参照 440/344。現状は 48） */
}
/* 〜767 の 3 周目（2026-09-26。現行プレビューの計算済みスタイルと突き合わせ）:
   ラベル「STAFF INTERVIEWS」は Roboto 400・16px・字間 0.25em、白い点は 8 角で字の左 12（字頭 x60）、下線は白の点線 1px（旧は 50% の破線）。
   H1 24px/0.06em（幅 305）・所属チップ 14px/0.06em（旧 0.04em） */
@media (max-width: 767px) {
  .ivd-label { padding-left: 20px; font-size: 16px; font-weight: 400; letter-spacing: 0.25em; border-bottom: 1px dotted var(--c-white); }
  .ivd-label::before { width: 8px; height: 8px; top: 9px; }
  .ivd-title { letter-spacing: 0.06em; }
  .ivd-chip { letter-spacing: 0.06em; }
  .ivd-body h2 { border-radius: 2px; }   /* Q の帯の角丸 2（原本） */
}

/* ======================================================================
   演出（docs/MOTION.md。html.mo の下だけ＝reduce・JS なし・検査用 Playwright では何もしない。静止した見た目は変えない）
   ヒーロー（読み込み時の入場）: 帯が左から伸びる（motion.css の wipe を「先端が帯と同じ角丸」に差し替え）→ 人物写真が写真の下端からせり上がる
   → ラベルは点が pop・英字が 1 字ずつ・点線ごと左から開く → H1 rise → 氏名 up → 所属チップ pop（遅れは interview.mjs）。
   横方向に動くのは clip-path だけ（待機中も横幅は増えない）。写真は縦だけ（帯は overflow: clip）。
   Q の帯: motion.css の wipe（左から）＋ 題 rise（帯の中で下からせり上がる）。答えの塊は短く up。
   ====================================================================== */
.ivd-q-t { display: block; }   /* h2 の中身の包み（rise の枠）。block でも素の h2 と同じ行・同じ高さ */
@keyframes ivd-band { from { clip-path: inset(0 100% 0 0 round var(--r-m)); } to { clip-path: inset(0 0 0 0 round var(--r-m)); } }
html.mo .ivd-hero[data-mo].is-in { animation-name: ivd-band; animation-duration: calc(var(--mo-dur) * 1.4); }

/* 人物写真: 枠（.ivd-photo）の下端より下を切り、写真だけが下からせり上がる。切りは入場の間だけ（keyframes の中）で、終われば素の見た目 */
@keyframes ivd-photo-frame {
  from { opacity: 0; clip-path: polygon(-50% -50%, 150% -50%, 150% 100%, -50% 100%); }
  22% { opacity: 1; }
  to { opacity: 1; clip-path: polygon(-50% -50%, 150% -50%, 150% 100%, -50% 100%); }
}
@keyframes ivd-photo-rise { from { translate: 0 64%; } }
html.mo .ivd-photo[data-mo].is-in { animation-name: ivd-photo-frame; animation-duration: calc(var(--mo-dur) * 1.8); animation-timing-function: linear; }
html.mo .ivd-photo[data-mo].is-in > .ivd-photo-img { animation: ivd-photo-rise calc(var(--mo-dur) * 1.6) var(--mo-ease) var(--mo-d, 0ms) backwards; }

/* ラベル: 英字は motion.css の letters、ラベル全体（点線の下線ごと）は左から開き、先頭の白い点は pop */
html.mo .ivd-label[data-mo].is-in { animation: mo-wipe calc(var(--mo-dur) * 1.4) var(--mo-ease) var(--mo-d, 0ms) backwards; }
html.mo .ivd-label[data-mo].is-in::before { animation: mo-pop calc(var(--mo-dur) * .8) var(--mo-ease-pop) var(--mo-d, 0ms) backwards; }

/* 答え: 本文なので距離は短く */
html.mo .ivd-a[data-mo] { --mo-dist: 20px; }

/* ======================================================================
   下部 CTA の案 r08（2026-09-30〜。旗が立ったときだけ HTML に出る。templates/recruit/interview.mjs）
   ====================================================================== */
/* Q&A の直後の 2 行（その職種のページ・見学。文字リンク link-arrow のまま）: 本文と同じ幅・左端。最後の段落から 40（〜767 は 32） */
.ivd-next { display: grid; justify-items: start; max-width: 960px; margin: 40px auto 0; }
.ivd-next-row { margin: 0; }
@media (min-width: 768px) and (max-width: 1079px) { .ivd-next { max-width: 720px; } }
@media (max-width: 767px) { .ivd-next { margin-top: 32px; } }

/* OTHER STAFF のカルーセル（〜767）: 本人を外した 5 枚を、採用トップの先輩スタッフの声（home.css の「10b」）と同じ横送りにする。
   部品は autoCarousel（外枠 .ivd-car・並び .ivl-grid・操作列 .acar-ctrl）、自動送りは carousel-auto.js、操作列の見た目は components.css。
   768〜 は外枠が素の箱なので、並び .ivl-grid は今までどおりの格子（2 列・3 列）。
   並びは容器の外（左右 32。〜767 の OTHER STAFF の容器は W−64）まで広げ、内側の余白と吸い付く位置を 32 にする＝カードの左端は見出しの左端と同じ。
   カードの幅はトップと同じ: 〜599 は画面の 82%（上限 360・並びの字の幅まで）で次のカードの端が見える、600〜767 は 2 枚＋次の端 40。
   JS が無くても指で送れて 5 人とも読める（CSS の横スクロール）。スクロールバーは出さない（base.css の main の規則） */
@media (max-width: 767px) {
  .ivd-car { --ivd-side: 32px; min-width: 0; }
  .ivd-car .ivl-grid { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--ivd-side); padding: 8px var(--ivd-side); margin: -8px calc(var(--ivd-side) * -1); }
  .ivd-car .ivl-grid > .iv-card { flex: none; width: min(calc((100% + var(--ivd-side) * 2) * .82), 360px, 100%); scroll-snap-align: start; align-content: start; }
}
@media (min-width: 600px) and (max-width: 767px) {
  .ivd-car .ivl-grid > .iv-card { width: calc((100% - 32px) / 2); }   /* (W − 左 32 − 間 12 × 2 − 次の端 40) ÷ 2。W＝並びの幅＋64 */
}
/* 操作列: 〜599 は点 5 つが右下の丸（電話・さがす）に当たるので「2 / 5」の数（トップと同じ）。〜359 は数の箱を 44 に */
@media (max-width: 599px) {
  .ivd-car .acar-dots { display: none; }
  .ivd-car .acar-count { display: block; }
}
@media (max-width: 359px) { .ivd-car .acar-count { min-width: 44px; } }
/* 演出（〜767）: トップの 10b と同じく、横に並んだカードを 1 枚ずつ隠さず、外枠（並び＋操作列）ごと 1 回だけ up。
   カードの中の写真（unveil）・文（interviewGrid が付ける up +280）も止める。詳細度は motion.css の待機の規則（0,6,1）より強く（0,6,2） */
@media (max-width: 767px) {
  html.mo body.page-recruit-interview .ivd-car .ivl-grid > .iv-card[data-mo],
  html.mo body.page-recruit-interview .ivd-car .iv-card .iv-photo[data-mo],
  html.mo body.page-recruit-interview .ivd-car .iv-card .iv-body[data-mo] { opacity: 1; animation: none; clip-path: none; }
  html.mo body.page-recruit-interview .ivd-car .iv-card .iv-photo[data-mo] img { animation: none; }
  html.mo .ivd-car:not(:has(> .ivl-grid > .is-in)) { opacity: 0; }
  html.mo .ivd-car:has(> .ivl-grid > .is-in) { animation: mo-up var(--mo-dur) var(--mo-ease) backwards; }
}