/* 採用 TOP：CROSS TALK の下の金の地（全て読む）→ REAL VOICES の黒 の切り替わり（PC・SP 共通の部品）
   JAMI（2026-10-12・本人「ここのセクションの切り替わり方なんだけど、コーポレートの私たちについてのセクションの企業理念のところのジャミジャミをまねしてほしい」）
   指示書: C:\AI事業部\クライアント案件\鯖江精機\jami_20261012\design\指示書.md

   写した現物（コーポレート「私たちについて」の 代表挨拶 → 企業理念 の背景ブラインド。参考は toyokoh.com/recruit の .Background）:
     CSS  テーマ assets/css/main.css 6614〜6641 行（.cp-blinds／.cp-blinds__line／.cp-cover.js-blinds…／reduced-motion）
          同 6643〜6650 行（情報はブラインドが閉じきってから：.cp-phil.js-blinds:not(.blinds-done) .cp-inner .anim-up）
          同 3761〜3768 行（.anim-up の出方：opacity・28px・.7s ease）
     HTML template-parts/page-company.php 223 行（スラット 50 本の PHP の for）
     JS   pages/about-us.php 116〜143 行（上端が画面の下 3/4 で is-bgin・1150ms 後に blinds-done）
   値はそのまま: スラット 50 本・厚み calc(2% + 2px)・margin-top −1px・scaleY(0)→(1)（中心から開く）・
                 transform .6s cubic-bezier(0,.55,.45,1)・遅れ i×.01s（行きも戻りも上→下）・発火 innerHeight×.75・中身は 1150ms 後
   置き換えた所:
     ・色: 明 #F5F3EF → 金 var(--gold)（上の金の地と同じ）／暗 var(--kuro) → var(--ink)（#people の地と同じ #1a1a1a）
     ・場所: コーポレートは「不透明なセクションの間の透明なセクション」の後ろに画面全面の固定層を敷く。ここは #people の中なので、
       黒の地の範囲の箱（.pe-jami）に clip-path:inset(0) を掛け、その中に画面全面の固定層（.cp-blinds）を置く＝箱の外には出ない。
       縞の太さ・波の流れ方は画面に対してで、コーポレートと同じ見え方になる。
     ・金の地の下辺: 斜め（左 42.245rem → 右 31.095rem）を、その真ん中の高さ 36.67rem の水平にした（コーポレートの境目は水平。
       「全て読む」は今と同じく帯の上下の真ん中のまま）。SP も同じ考えで、斜め（100% → 100% − 2.6rem）の真ん中 100% − 1.3rem。
       金の地は箱の下へ 2px もぐらせる（金と金の継ぎ目に地の黒の細い線が出ないように。箱が後ろの DOM なので上に重なる）。
     ・中身を伏せる対象: 黒の地の上に乗る物（？の印・？・見出しの枠・四隅・見出し・リング／カード・炎・矢印）。
       transform ではなく translate で 28px 下げる（リングの矢印などが持つ transform を消さない）。
   演出なし（JS 無し・html.no-motion・prefers-reduced-motion）: スラットは閉じたまま＝最初から黒・中身も出たまま（＝コーポレートと同じ）。 */

/* == 部品（コーポレートの .cp-blinds の写し。場所だけ .pe-jami の中）== */
.pe-jami .cp-blinds{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden;pointer-events:none;background-color:var(--gold)}
.pe-jami .cp-blinds__line{flex:0 0 auto;width:100%;height:calc(2% + 2px);margin-top:-1px;background-color:var(--ink);transform:scaleY(1)}
/* JS 未実行時はスラットが閉じたまま＝最初から黒（正しい見た目） */
.pe-jami.js-blinds .cp-blinds__line{transform:scaleY(0);transition:transform .6s cubic-bezier(0,.55,.45,1);transition-delay:calc(var(--i, 0) * .01s)}
.pe-jami.js-blinds.is-bgin .cp-blinds__line{transform:scaleY(1)}
@media (prefers-reduced-motion:reduce){
  .pe-jami.js-blinds .cp-blinds__line{transform:scaleY(1);transition:none}
}

/* == 情報はブラインドが閉じきってから（コーポレート main.css 6643〜6650 行の写し。is-bgin から 1150ms 後に JS が blinds-done）== */
#people.js-blinds:not(.blinds-done)>:is(.pe-soft,.pe-q,.pe-label-box,img[src*="people_group_165_corners"],.pe-label),
#people.js-blinds:not(.blinds-done) .pe-carousel>*{opacity:0!important;translate:0 28px!important;transition:none!important}
/* 出方は .anim-up（main.css 3761〜3768 行）: opacity .7s ease・28px 上がる .7s ease */
#people.js-blinds>:is(.pe-soft,.pe-q,.pe-label-box,img[src*="people_group_165_corners"],.pe-label),
#people.js-blinds .pe-carousel>*{transition:opacity .7s ease,translate .7s ease}
@media (prefers-reduced-motion:reduce){
  #people.js-blinds>:is(.pe-soft,.pe-q,.pe-label-box,img[src*="people_group_165_corners"],.pe-label),
  #people.js-blinds .pe-carousel>*{opacity:1!important;translate:none!important;transition:none!important}
}

/* == PC（1024px 以上）: 黒の地の箱＝金の地の新しい下辺（金の地の上端 457.055rem ＋ 36.67rem）から #people の下端まで ==
   金の地と同じく p16 の --ct-dy だけ上げる（recruit.css 638 行の :is(#people>.pe-gold,…){top:calc(var(--y) * .1rem - var(--ct-dy))} と同じ考え） */
@media (min-width:1024px) and (orientation:landscape), (min-width:1367px){
  #people>.pe-jami{position:absolute;left:0;right:0;bottom:0;top:calc(493.725rem - var(--ct-dy, 0rem));clip-path:inset(0);pointer-events:none}
  #people>.pe-gold{clip-path:polygon(0 12.58rem,100% 0,100% calc(36.67rem + 2px),0 calc(36.67rem + 2px))}   /* 元 recruit.css 214 行 polygon(0 12.58rem,100% 0,100% 31.095rem,0 100%)。上辺はそのまま */
}

/* == SP（1023px 以下）: 黒の地の箱＝「？」の段から #people の下端（下の余白 8rem も含む）まで ==
   recruit-sp.css 348〜350 行: #people は grid（段 rvh／rv／rvc／ct／more／q／label／car）・下の余白 8rem・--o の無い子は display:none */
@media (max-width:1023px), (max-width:1366px) and (orientation:portrait){
  #people>.pe-jami{display:block;position:relative;grid-row:q-start / -1;grid-column:1;align-self:stretch;margin:-1.3rem 0 -8rem;clip-path:inset(0);pointer-events:none}
  #people>.pe-gold{clip-path:polygon(0 2.6rem,100% 0,100% calc(100% - 1.3rem + 2px),0 calc(100% - 1.3rem + 2px))}   /* 元 recruit-sp.css 388 行 polygon(0 2.6rem,100% 0,100% calc(100% - 2.6rem),0 100%)。上辺はそのまま */
}