/* 採用：仕事を知る — ヒーロー・WHAT WE DO・目次バー・FV の動き・セクションまたぎ（2026-10-07 B1） 正: design/指示書_セクション.md H／I／N、指示書_v1.md §6 E-1〜E-3、裁定 M7・M14。 写し元（現物）: 環境を知る rc-environment.css（出典の行番号は各所のコメント）。名前だけ .rc-page-environment→.rc-page-work・env-→wk-・--env-→--wk-・画像 rc-environment-hero-dots→rc-work-hero-dots・フィルタ #env-fig-sl→#wk-fig-sl に替え、 違う所（写真 7 枚の窓・導入・バーの高さ・値）だけ直した。 寸法の記法: rem＝Figma px ÷ 10（PC は rem＝幅/192）。変数（--wk-st／--wk-cv／--wk-pow1／--wk-wipe／--wk-t-*）は rc-work-base.css。 動きは全部 html.motion の下だけ（no-motion・reduced-motion では最初から最終状態で静止）。 */ /* ===================================================================== H. ヒーロー（section.wk-hero・Figma 0〜920。ステージは炎の縁の下まで＝--wk-st） 現物: rc-environment.css 6〜55 行 写真群・網点・グラデは同じステージ（isolation の箱）の直下に置く（混ぜ方の相手が変わると黒や素通しになる＝TOP p9）。 .wk-hero__bg は箱を作らない（display:contents）＝clip-path・transform・opacity・filter・mask を付けない ===================================================================== */ .rc-page-work .wk-hero{position:relative;height:var(--wk-st);overflow:clip;background:var(--wk-hero-base)} .rc-page-work .wk-hero__stage{position:relative;height:var(--wk-st);overflow:hidden;isolation:isolate;background:var(--wk-hero-base)} .rc-page-work .wk-hero__bg{display:contents} /* H-2 網点（img と、同じ画像を上下に裏返して元の下端に続ける＝継ぎ目で粒がつながる。現物: CT rc-crosstalk.css 63〜67 行と同じ作り） 素材は「灰色 #494949 の粒＋透明」（ENV F2-1）。Figma（ドット粒子）は粒を LINEAR_DODGE（足し算）で金の地 #a2895a に重ねる → plus-lighter（足し算）で地の上の「明るい粒」。 写真群が不透明の normal なので、網点は写真の上（z-index:1。見出し群の z 2 より下）。粒の相手は写真と地（直下のステージ＝isolation の箱） */ .rc-page-work .wk-hero__dots{position:absolute;left:0;top:0;z-index:1;width:192rem;height:92rem;max-width:none;mix-blend-mode:plus-lighter} .rc-page-work .wk-hero__dots--ext{display:block;top:92rem;z-index:1;background:url(../../images/recruit/rc-work-hero-dots.webp) 0 0/100% 100% no-repeat;transform:scaleY(-1);pointer-events:none;mix-blend-mode:plus-lighter} @supports not (mix-blend-mode:plus-lighter){ /* plus-lighter の無いブラウザは screen（足し算に近い・粒は明るくなる） */ .rc-page-work .wk-hero__dots,.rc-page-work .wk-hero__dots--ext{mix-blend-mode:screen} } /* H-3 写真群（下端 96.06rem＝Figma の clip 920 の下 4rem で消える。写真自身に mask を付けるのは可・親には付けない） Figma の SOFT_LIGHT は CSS の soft-light と式が違うので、写真群は normal で描き、写真 1 枚ずつ（.wk-hero__ph）に SVG フィルタ #wk-fig-sl（hero.php）を掛ける（ENV F3） ＝「地 #a2895a の上の Figma の SOFT_LIGHT」を、写真の R・G・B の値 0・.5・1 の 3 点を結ぶ折れ線の表にした物。地が一定の金なので正確。どの写真に差し替えても同じ式。 フィルタを写真群に掛けない理由: FV の出方（写真ごとの opacity・translate）の間、毎コマ群れ全体のフィルタを計算し直すことになるため。 SP（≤1023）の上書きは写真群の位置と大きさだけで、重ね方・フィルタは触らない。 写真 7 枚の窓（箱 192×96.06rem に対する %）は 指示書_セクション H-3 の表（A2 が geometry.json の window_pct と一致を確認済み）。DOM 順＝重なり順（2 が 1 の上） */ .rc-page-work .wk-hero__photos{position:absolute;left:0;top:0;width:192rem;height:96.06rem;mix-blend-mode:normal;overflow:clip; -webkit-mask-image:linear-gradient(#000 95.773%,transparent 100%);mask-image:linear-gradient(#000 95.773%,transparent 100%)} .rc-page-work .wk-hero__ph{position:absolute;display:block;overflow:hidden;filter:url(#wk-fig-sl)} .rc-page-work .wk-hero__img{display:block;width:100%;height:100%;max-width:none;object-fit:cover} .rc-page-work .wk-hero__ph--1{left:65.000%;top:63.918%;width:27.135%;height:32.648%} .rc-page-work .wk-hero__ph--2{left:55.672%;top:28.071%;width:34.588%;height:40.624%} .rc-page-work .wk-hero__ph--3{left:36.250%;top:50.281%;width:29.486%;height:30.032%} .rc-page-work .wk-hero__ph--4{left:82.083%;top:53.821%;width:21.831%;height:21.555%} .rc-page-work .wk-hero__ph--5{left:6.198%;top:18.530%;width:34.518%;height:66.146%} .rc-page-work .wk-hero__ph--6{left:38.385%;top:69.051%;width:21.465%;height:35.564%} .rc-page-work .wk-hero__ph--7{left:-4.479%;top:59.130%;width:27.502%;height:39.993%} /* H-4 見出し群（z 2）。TSV の rot −0.57° は描かない */ .rc-page-work .wk-hero__head{position:absolute;left:24.2rem;top:38.5rem;width:auto;z-index:2;color:#fff} /* LEAD-CUT（2026-11-02・先方FB「これは2行で表示させたい」）: 幅 76.4rem だと 1 行 28 字のリード（98.5rem）が入らず、出てくる時の clip-path（箱の範囲）で右が切れていた → 箱を中身の幅に（右の画面の端までは使える）。入らない長さになったら「、」で折れる（hero.php） */ .rc-page-work .wk-hero__en{display:flex;align-items:center;gap:.9rem;height:5.4rem;font:600 3.6rem/5.4rem var(--cormorant);letter-spacing:-.126rem;white-space:nowrap} .rc-page-work .wk-hero__en-s{flex:none;width:3rem;height:5rem;max-width:none} .rc-page-work .wk-hero__en{position:relative;z-index:1} /* SEL-B03（2026-10-14・文字選択）原因: 次の大きな題 .wk-hero__title は字が大きく（13.4rem・行の高さ 14.1rem）、字体の高さが上の英字ラベルの下半分にかぶる。後ろにある題の文字が先に当たり、ラベルをなぞると題が選ばれた（1280 幅など）。ラベルを題より上に出す。字の位置・見た目は変えない（インクはかぶっていない）。位置指定のみ・ずらしなし */ .rc-page-work .wk-hero__title{margin:0;font:700 13.406rem/14.132rem var(--serif);white-space:nowrap;color:#fff} .rc-page-work .wk-hero__lead{margin:2.9rem 0 0;font:900 3.2rem/5.5rem var(--serif);letter-spacing:.319rem;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;color:#fff} /* LEAD-CUT（2026-11-02）: nowrap だと箱の右で切れた → 「、」のかたまりで折る（hero.php） */ .rc-page-work .wk-hero__lead-ph{display:inline-block;max-width:100%} /* H-5 大きな炎の S（z 3）。Figma は SCREEN（ENV で決め済み） */ .rc-page-work .wk-hero__s{position:absolute;left:22.084rem;top:12.399rem;width:24.916rem;height:73.123rem;max-width:none;z-index:3;pointer-events:none;mix-blend-mode:screen} /* H-6 グラデ（COLOR_BURN・最前面。続きは縁の下まで同じ色で） */ .rc-page-work .wk-hero__grad{position:absolute;left:0;top:24.3rem;width:192rem;height:69.8rem;z-index:4;mix-blend-mode:color-burn;pointer-events:none; background:linear-gradient(0deg,rgba(177,162,129,.44) 0%,rgba(212,185,106,.43) 26%,rgba(191,160,90,.10) 49%,rgba(191,160,90,0) 70%)} .rc-page-work .wk-hero__grad--ext{top:94.1rem;height:calc(var(--wk-st) - 94.1rem);background:rgba(177,162,129,.44)} /* ===================================================================== I. WHAT WE DO（section.wk-intro・Figma 961〜4147。背景画像＝金の地＋上の炎の縁＋網点。縁の透けた所はヒーローが見える＝M7） 現物: rc-environment.css 57〜74 行（静止の形）。flow-root: 先頭の子の margin と負の margin-top の相殺を止める（CT と同じ） 背景画像（rc-work-intro-bg・1 倍 1920×3186）に炎の縁・金の地・網点が全部入っている。CSS の地は --wk-cv（33.4rem＝金が不透明になる行）から下だけ金 ===================================================================== */ .rc-page-work .wk-intro{position:relative;display:flow-root;height:318.6rem;margin-top:calc(var(--wk-cv) * -1); background:url(../../images/recruit/rc-work-intro-bg.webp) 0 0/192rem auto no-repeat,linear-gradient(to bottom,transparent var(--wk-cv),var(--wk-intro) var(--wk-cv))} .rc-page-work .wk-intro__in{position:static} .rc-page-work .wk-intro__block{position:absolute;left:30.4rem;margin:0} .rc-page-work .wk-intro__block--1{top:47.7rem;width:70rem} .rc-page-work .wk-intro__block--2{top:116.45rem;width:70rem} .rc-page-work .wk-intro__block--3{top:194.45rem;width:75.8rem} /* I-2 ブロック 1（eyebrow は rc-work-base.css の .wk-eyebrow） */ .rc-page-work .wk-intro__kicker{margin:4.4rem 0 0;font:700 2.4rem/3.4rem var(--serif);color:var(--wk-brown);white-space:nowrap} .rc-page-work .wk-intro__rule{display:block;width:63rem;height:max(.1rem,1px);margin:2.1rem 0 0;background:var(--wk-gold)} .rc-page-work .wk-intro__title{margin:1.46rem 0 0;font:900 6rem/9.6rem var(--serif);letter-spacing:.36rem;color:var(--wk-brown);white-space:nowrap} .rc-page-work .wk-intro__sub{margin:2.5rem 0 0;font:700 3.2rem/6rem var(--serif);color:var(--wk-brown);white-space:nowrap} /* WK-INTRO-SUB（2026-10-30・先方FB「私たちがつくっているのは、お店に並ぶ製品ではありません。／その製品をつくるために、お客様の生産現場で使われる「専用機」です。」）: 前の文（2 行・各 20 字ほど）より長く、3.2rem の 1 行のままでは右の写真の下にもぐる（1 行 33 字＝105rem・写真の左端まで約 81rem）。 2 行のまま収まる 2.4rem（行送りは前と同じ比 1.875）に。幅は箱（.wk-intro__block--1 の 70rem）より広い 81rem＝写真の手前まで（前も nowrap で箱の外へ出ていた）。 もっと長い文は写真の手前で文節の切れ目で折り返す（intro.php の ）。SP は下の SP の塊で width:auto */ .rc-page-work .wk-intro__sub{width:81rem;max-width:none;font-size:2.4rem;line-height:4.5rem;white-space:normal;word-break:keep-all;overflow-wrap:anywhere} /* WK-PHRASE（2026-10-30）: 箱の説明は文節の切れ目だけで折る（intro.php の 。「手をつ／なぐ」「つくり込／みます」にしない） */ .rc-page-work .wk-intro__step-d{word-break:keep-all;overflow-wrap:anywhere} @media (min-width:1024px) and (max-width:1280px) and (orientation:landscape){ .rc-page-work .wk-intro__sub{font-size:max(2.4rem,14px);line-height:max(4.5rem,1.7em)} /* 1024〜1280 は本文の下限 14px（FB-04 と同じ考え）。収まらない行は文節で折り返す */ } /* I-3 ブロック 2・I-4 の見出し（h3 は 2 つとも同じ形） */ .rc-page-work .wk-intro__h{font:900 4.8rem/7.1rem var(--serif);color:var(--wk-brown);white-space:nowrap} .rc-page-work .wk-intro__p{width:66.6rem;font:500 var(--wk-t-p)/4.77rem var(--serif);letter-spacing:.099rem;color:var(--wk-brown)} .rc-page-work .wk-intro__p{width:72rem} /* WK-INTRO-P（2026-10-30・本人「す。まで入るように調整してほしい」）: 新しい本文 1 が 1 行 32 字で「す。」だけの 4 行目になった → 幅 66.6 → 72rem（1 行約 2.5 字増・右の写真 112.8rem まで約 10rem 空く）。最後の文節は intro.php で途中改行しない */ .rc-page-work .wk-intro__p{word-break:keep-all;overflow-wrap:anywhere} /* WK-INTRO-P2（2026-11-02）: 文節（）の所でだけ折る */ .rc-page-work .wk-intro__sub .wk-ln,.rc-page-work .wk-intro__p .wk-ln{display:block;text-wrap:balance} /* WK-LINES（2026-11-03・本人の改行どおりにしたら SP・1024 は 1 行に入らず「です。」「つくる、」だけの行ができた）: 行（intro.php の span.wk-ln）ごとに、入らない行は長さをそろえて折る（文節の切れ目＝ だけ）。入る行は前のまま 1 行 */ .rc-page-work .wk-intro__block--2 .wk-intro__h+.wk-intro__p{margin-top:2.72rem} .rc-page-work .wk-intro__block--2 .wk-intro__p+.wk-intro__p{margin-top:5.39rem} /* I-4 ブロック 3 の箱 3 つ。面は ::before（MULTIPLY #71634b）＋白の内側の線と影。 箱とその祖先に .reveal・transform・opacity・filter・isolation を付けない（MULTIPLY の相手が変わる＝箱が平らな #71634b になる）。 高さは min-height（15.214／17.693／14.988rem）＝1024 で文字が下限で大きくなったら伸びる。中身は grid（番号の枠 6.783rem｜題 24.342rem｜説明 37.528rem＋左の間 1.24rem） */ .rc-page-work .wk-intro__steps{margin:9.15rem 0 0;display:flex;flex-direction:column;gap:2.367rem} .rc-page-work .wk-intro__step{position:relative;display:grid;grid-template-columns:6.783rem 24.342rem 38.768rem;column-gap:0;align-items:start;box-sizing:border-box;width:75.8rem;min-height:15.214rem;padding:4.057rem 2.954rem 2rem;margin:0} .rc-page-work .wk-intro__step:nth-child(2){min-height:17.693rem;padding-top:5.297rem} .rc-page-work .wk-intro__step:nth-child(3){min-height:14.988rem;padding-top:3.832rem} .rc-page-work .wk-intro__step::before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;background:var(--wk-box);mix-blend-mode:multiply;pointer-events:none; box-shadow:inset 0 0 0 .066rem #fff,inset 0 .213rem .426rem rgba(142,142,142,.25)} .rc-page-work .wk-intro__step>*{position:relative} /* 番号の枠（四つ角の持ち主）は行の上端から .338rem 下（Figma Frame 1738＝行の Frame 1739 より 3.38px 下）。数字・題は行の上端から 6.424rem の中央（Figma は 01 だけ字間 +.263rem） */ .rc-page-work .wk-intro__num{display:flex;align-items:center;justify-content:center;height:6.424rem;margin-top:.338rem;padding-bottom:.676rem;font:900 5.268rem/3.91rem var(--serif);letter-spacing:-.263rem;color:#fff; --wk-cw:.563rem;--wk-ch:.451rem;--wk-cs:max(.087rem,1px);--wk-cc:#fff} .rc-page-work .wk-intro__step-t{display:flex;align-items:center;justify-content:center;height:6.424rem;font:900 3.288rem/2.44rem var(--serif);letter-spacing:.164rem;color:#fff;white-space:nowrap} .rc-page-work .wk-intro__step-d{margin-left:1.24rem;font:500 var(--wk-t-step)/3.16rem var(--serif);letter-spacing:.112rem;color:#fff} /* PC 幅だけ（SP は縦積みなので使わない）: ① Figma の「01」だけ字間が +.263rem（02・03 は −.263rem）② 説明の上下: Figma は説明の箱（高さ 64／77.76／77.76px）の中で文字が上下中央（2・3 行を超える／足りない分は両側へ）。 1 つ目は行の上端、2 つ目は 3 行で 8.5px 上へ、3 つ目は 2 行で 7.3px 下へ（＋Chromium との字面の差 1px） */ @media (min-width:1024px) and (orientation:landscape), (min-width:1367px){ .rc-page-work .wk-intro__step:first-child .wk-intro__num{letter-spacing:.263rem} /* STEP-MID（2026-11-02・先方FB「03 現場で動かす」の下に空き＋「文字中央に」）: FB の文で説明が 3〜5 行に伸び、番号と題が箱の上に寄っていた → 番号・題・説明を箱の上下の真ん中にそろえる（3 つとも同じ作り）。 上下の余白は 3 つとも 3.2rem。前の箱ごとの padding-top（4.057／5.297／3.832rem）と説明の上下のずらし（.1／−.75／.83rem）は Figma の行数に合わせた値なので外した */ .rc-page-work .wk-intro__step,.rc-page-work .wk-intro__step:nth-child(2),.rc-page-work .wk-intro__step:nth-child(3){align-items:center;min-height:15.214rem;padding-top:3.2rem;padding-bottom:3.2rem} .rc-page-work .wk-intro__step .wk-intro__step-d{margin-top:0} } /* 番号の四つ角: 箱（li）に乗ったら開く（持ち主は箱。値は土台の .wk-corner と同じ＝±.7rem・#d4b87a）。html.motion・(hover:hover) の中だけ */ @media (hover:hover){ html.motion .rc-page-work .wk-intro__step:hover .wk-intro__num>.wk-corner--tl{transform:translate(-.7rem,-.7rem);border-color:var(--wk-corner-hover)} html.motion .rc-page-work .wk-intro__step:hover .wk-intro__num>.wk-corner--tr{transform:translate(.7rem,-.7rem);border-color:var(--wk-corner-hover)} html.motion .rc-page-work .wk-intro__step:hover .wk-intro__num>.wk-corner--br{transform:translate(.7rem,.7rem);border-color:var(--wk-corner-hover)} html.motion .rc-page-work .wk-intro__step:hover .wk-intro__num>.wk-corner--bl{transform:translate(-.7rem,.7rem);border-color:var(--wk-corner-hover)} } /* I-5 結び */ .rc-page-work .wk-intro__note{margin:11.05rem 0 0;font:700 2.6rem/5.2rem var(--serif);color:var(--wk-brown);white-space:nowrap} /* I-6 写真 3 枚（同じ写真 1N6A7584 の繰り返し＝Figma のまま・M5）。ぼかしの縁は mask（Figma は LAYER_BLUR r50.1）。現物: rc-environment.css 68〜74 行。縁の幅は 10rem（ENV）→ 9rem に変えた: 8〜12rem（線形）を composed/frame_1756_mask_group@2x.png の α と比べ、平均 |Δα| が最小（9rem＝8.6／255・10rem＝10.4・12rem＝18.3） */ /* 2026-10-08 修正: 3 枚は右の列 .wk-intro__photos（写真 1 の上端 47.7rem 〜 写真 3 の下端 293.8rem）の中。no-motion は前と同じ位置（列の上端から 0／84.5／169rem）。 PC＋motion は下の「写真の固定と切り替え」で枠 .wk-intro__stick を sticky にして 3 枚を重ねる */ .rc-page-work .wk-intro__photos{position:absolute;left:112.8rem;top:47.7rem;width:59.858rem;height:246.1rem} .rc-page-work .wk-intro__stick{position:relative;height:100%} .rc-page-work .wk-intro__photo{position:absolute;left:0;width:100%;height:77.1rem;margin:0; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9rem,#000 calc(100% - 9rem),transparent 100%),linear-gradient(to bottom,transparent 0,#000 9rem,#000 calc(100% - 9rem),transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent 0,#000 9rem,#000 calc(100% - 9rem),transparent 100%),linear-gradient(to bottom,transparent 0,#000 9rem,#000 calc(100% - 9rem),transparent 100%); mask-composite:intersect} .rc-page-work .wk-intro__photo--1{top:0} .rc-page-work .wk-intro__photo--2{top:84.5rem} .rc-page-work .wk-intro__photo--3{top:169rem} .rc-page-work .wk-intro__img{display:block;width:100%;height:100%;max-width:none;object-fit:cover} /* 写真の固定と切り替え（2026-10-08 修正・PC＋motion だけ）: 枠をヘッダーの下の残りの真ん中に止め、文字だけが流れる。 3 枚は枠の中で重ね、今の 1 枚（.is-cur＝rc-work.js が文字のブロックの位置で付け替える）が上に重なりながら出る（.8s・曲線は .reveal と同じ --ease）。 前の 1 枚は出終わるまで下に残してから消す（重ねて溶かす＝途中で地の金が透けない）。出る前（.reveal の .is-in 前）は .reveal のまま隠れている。 高さは画面の高さ − ヘッダー − 6rem まで（低い画面で上下が切れない）。中の写真は object-fit:cover */ @media (min-width:1024px) and (orientation:landscape), (min-width:1367px){ html.motion .rc-page-work .wk-intro__stick{--wk-ph-h:min(77.1rem,calc(100vh - 16.4rem));position:sticky;top:calc(10.4rem + (100vh - 10.4rem - var(--wk-ph-h)) / 2);height:var(--wk-ph-h)} html.motion .rc-page-work .wk-intro__stick>.wk-intro__photo{top:0;height:100%} html.motion .rc-page-work .wk-intro__stick>.wk-intro__photo:not(.is-cur){z-index:1;opacity:0;transition:opacity 0s .8s,transform 0s .8s} html.motion .rc-page-work .wk-intro__stick>.wk-intro__photo.is-cur{z-index:2;transition:opacity .8s var(--ease),transform .8s var(--ease)} /* 間隔（2026-10-08 修正 2・本人「間隔が狭いから切り替わりが早すぎて微妙」）: Figma のブロックの間（68.75／78rem）だと 1 枚が止まっている間が 1920×1080 で 192／285px しかない。 ブロックの上端どうしを 1 画面分（--wk-g＝100vh。78〜150rem に収める）離す＝1 枚ずつ約 585px 止まり、前の文が画面の上へ抜けたところで次の文と写真が出る。 伸ばした分は高さに足す（47.7＋124.15＝171.85rem＝ブロック 1 の上端＋ブロック 3 の上端から下端まで。Figma の間ならちょうど 318.6rem）。写真の列は下端 24.8rem（写真 3 の下端＝元の 293.8rem と同じ関係）まで。 背景画像の下の網点は下端に合わせる: 下から 270rem（画像の 48.6〜318.6rem＝炎の縁より下）を ::before で下端に重ねる（上の重なりは画像の無地の所どうし＝継ぎ目は見えない）。 ::before は先頭の positioned＝ブロック・写真より下に塗られる（ブロック 3 の箱の MULTIPLY の相手もこの地） */ html.motion .rc-page-work .wk-intro{--wk-g:max(78rem,min(100vh,150rem));height:calc(171.85rem + var(--wk-g) * 2)} html.motion .rc-page-work .wk-intro::before{content:"";position:absolute;left:0;right:0;bottom:0;height:270rem;pointer-events:none; background:url(../../images/recruit/rc-work-intro-bg.webp) 0 100%/192rem auto no-repeat var(--wk-intro)} html.motion .rc-page-work .wk-intro__block--2{top:calc(47.7rem + var(--wk-g))} html.motion .rc-page-work .wk-intro__block--3{top:calc(47.7rem + var(--wk-g) * 2)} html.motion .rc-page-work .wk-intro__photos{height:auto;bottom:24.8rem} } /* I-7 FB-06（2026-10-09・実装FBシート No.6「左の網点を固定し、文章だけ流す」）PC＋motion だけ。 地の画像の中段の網点（画像の y 1240〜2360）を別の層（rc-work-intro-dots_1009・1920×1120）に分け、写真の列と同じ範囲（上は金が不透明になる --wk-cv・下は写真の列と同じ 24.8rem）の中で sticky にして画面に止める。 地は中段の網点だけを抜いた画像（rc-work-intro-bg-nodots_1009。帯の外は元と同じ）。下端の炎の網点は地のまま＝セクションといっしょに流れる。 background-attachment:fixed は使わない（iOS で効かない）。no-motion・reduced・SP は前のまま（層は出さない・元の画像）。層の上下 10rem は mask で溶かす（入る時・抜ける時に線が出ない） */ .rc-page-work .wk-intro__dots{display:none} @media (min-width:1024px) and (orientation:landscape), (min-width:1367px){ html.motion .rc-page-work .wk-intro{background-image:url(../../images/recruit/rc-work-intro-bg-nodots_1009.webp),linear-gradient(to bottom,transparent var(--wk-cv),var(--wk-intro) var(--wk-cv))} html.motion .rc-page-work .wk-intro::before{background-image:url(../../images/recruit/rc-work-intro-bg-nodots_1009.webp)} html.motion .rc-page-work .wk-intro__dots{display:block;position:absolute;left:0;right:0;top:var(--wk-cv);bottom:24.8rem;pointer-events:none} html.motion .rc-page-work .wk-intro__dots-stick{position:sticky;top:0;display:block;height:100vh; background:url(../../images/recruit/rc-work-intro-dots_1009.webp) 0 50%/192rem auto no-repeat; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10rem,#000 calc(100% - 10rem),transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 10rem,#000 calc(100% - 10rem),transparent 100%)} } /* FB-04（2026-10-09・実装FBシート No.4「1024〜1280 で文字に下限」）WHAT WE DO の小さな日本語を 14px 以上に（1024〜1280 だけ。--wk-t-p・--wk-t-step は rc-work-base.css）。SP・1281px 以上は前のまま */ @media (min-width:1024px) and (max-width:1280px) and (orientation:landscape){ .rc-page-work .wk-intro__kicker{font-size:max(2.4rem,14px)} .rc-page-work .wk-intro__note{font-size:max(2.6rem,14px)} .rc-page-work .wk-intro__step-d{line-height:max(3.16rem,1.6em)} } /* ===================================================================== N. 目次バー（nav.wk-bar・14.426rem・#141414・sticky。親は .wk-body＝overflow を付けない） 現物: rc-environment.css 76〜95 行（元 CT rc-crosstalk.css 180〜200 行）。違いは高さだけ（Figma Frame 1631 は 144.26。ENV は 142） ===================================================================== */ .rc-page-work .wk-bar{position:sticky;top:10.4rem;z-index:50;height:14.426rem;background:var(--wk-bar);box-shadow:inset 0 -1px 0 rgba(191,160,90,.2)} .rc-site.admin-bar.rc-page-work .wk-bar{top:calc(10.4rem + 32px)} .rc-page-work .wk-bar__list{display:flex;width:159.2rem;height:100%;margin:0 auto} .rc-page-work .wk-bar__item{position:relative;flex:1 1 0;min-width:0;border-left:max(.1rem,1px) solid var(--wk-gold);border-right:max(.1rem,1px) solid var(--wk-gold)} .rc-page-work .wk-bar__a{position:relative;display:block;height:100%;overflow:hidden;color:#fff} .rc-page-work .wk-bar__glow{position:absolute;left:0;right:0;top:3.837rem;height:10.589rem;background:linear-gradient(0deg,rgba(202,170,110,.5) 0%,rgba(180,156,111,0) 63%);pointer-events:none} .rc-page-work .wk-bar__num{position:absolute;left:5.55rem;top:5.68rem;height:2.6rem;width:auto;max-width:none} /* 実測で ENV の 5.45／5.78 から +.1／−.1（Figma の数字 x 221・y 4204 に合わせた） */ .rc-page-work .wk-bar__label{position:absolute;left:10.7rem;top:5.45rem;font:700 3.044rem/1 var(--serif);letter-spacing:.152rem;white-space:nowrap;color:#fff} .rc-page-work .wk-bar__arrow{position:absolute;left:34.9rem;top:5.8rem;width:2.7rem;height:2.9rem;max-width:none} /* 下線（clip の外で見えていない金の線）＝ホバーと現在地の印 */ .rc-page-work .wk-bar__line{position:absolute;left:0;right:0;bottom:0;height:.184rem;background:linear-gradient(90deg,#bfa05a,#d4b96a 50%,#bfa05a);transform:scaleX(0);transform-origin:0 50%;pointer-events:none} .rc-page-work .wk-bar__a[aria-current="true"] .wk-bar__line{transform:scaleX(1)} html.motion .rc-page-work .wk-bar__line{transition:transform .3s ease-out} /* ease-out＝現物 CT rc-crosstalk.css 198 行（rc-common.css 123 行・四つ角と同じ） */ @media (hover:hover){ html.motion .rc-page-work .wk-bar__a:hover .wk-bar__line{transform:scaleX(1)} } /* 止まったとき（2026-10-08 依頼 F-hd・本人「ヘッダーと一体型に」）PC だけ。共通部分（ヘッダーを隠す・バーを最上部へ上げて 5.8rem 切る・ハンバーガー・ドロワー・transition）は rc-bar-hd.css／rc-bar-hd.js（body.rc-hd-off）。 現物＝クロストーク rc-crosstalk.css 218〜241 行（M19）の中身の縮め方の写し。バーの箱は 14.426rem・見えている帯は 5.8〜14.426rem＝8.626rem・その縦の真ん中＝10.113rem。 番号・文字・矢印を 1 点（縦＝3 つの範囲 5.45〜8.7rem の真ん中 7.075rem・横＝項目の真ん中 19.9rem＝159.2÷4÷2）を中心に 0.85 倍し、帯の縦の真ん中へ +3.038rem（10.113−7.075）動かす。 0.85＝止まったときの文字の大きさを CT の止まった語（3.725rem×0.7≒2.6rem）とそろえる値（この語 3.044rem×0.85≒2.6rem）。 transform-origin＝その 1 点を各要素の箱の左上から測った値（CT の書き方どおり。left/top は上の N の値: 番号 5.55／5.68・文字 10.7／5.45・矢印 34.9／5.8）。 金のグラデは帯の下端（箱の下端）を基準に縦だけ 8.626/14.426＝.598 倍（CT 232 行。origin 縦＝グラデの高さ 10.589rem）。ハンバーガーは CT 233 行の 2.9rem を、この箱の真ん中 7.1→10.113 に替えて 3.013rem */ @media (min-width:1024px) and (orientation:landscape), (min-width:1367px){ .rc-page-work .wk-bar{--hd-menu-y:3.013rem} .rc-page-work.rc-hd-off .wk-bar__num{transform:translateY(3.038rem) scale(.85);transform-origin:14.35rem 1.395rem} .rc-page-work.rc-hd-off .wk-bar__label{transform:translateY(3.038rem) scale(.85);transform-origin:9.2rem 1.625rem} .rc-page-work.rc-hd-off .wk-bar__arrow{transform:translateY(3.038rem) scale(.85);transform-origin:-15rem 1.275rem} .rc-page-work.rc-hd-off .wk-bar__glow{transform:scaleY(.598);transform-origin:50% 10.589rem} html.motion:not(.no-motion) .rc-page-work :is(.wk-bar__num,.wk-bar__label,.wk-bar__arrow,.wk-bar__glow){transition:transform .45s cubic-bezier(.43,.05,.17,1)} /* CT 238 行 */ } /* FB-05（2026-10-09・実装FBシート No.5「目次を 3 項目に」）PC: 1 項目の幅は前の 4 分割と同じ 39.8rem のまま、まとめて中央に（中身の位置・止まったときの縮め方は前のまま）。SP は前のまま（3 等分） */ @media (min-width:1024px) and (orientation:landscape), (min-width:1367px){ .rc-page-work .wk-bar__list{width:max-content} .rc-page-work .wk-bar__item{flex:0 0 39.8rem} } /* ===================================================================== E-1 FV の出方（現物: 東急 development2 kvAnimation＝環境を知る rc-environment.css 97〜104 行。GSAP の power1.out は cubic-bezier に＝--wk-pow1） ===================================================================== */ html.motion .rc-page-work .wk-hero:not(.is-in) .wk-hero__ph{opacity:0;translate:0 5%} html.motion .rc-page-work .wk-hero__ph{transition:opacity .3s var(--wk-pow1) calc(var(--i) * .2s),translate .3s var(--wk-pow1) calc(var(--i) * .2s)} /* 現物: 東急 .cd-kv-hgroup-wrapper の幅 0→100%（1.5s cubic-bezier(.51,.32,0,.96)）を clip に。最後の写真の終わり＝(n−1)×.2＋.3 秒 */ html.motion .rc-page-work .wk-hero:not(.is-in) .wk-hero__head{clip-path:inset(0 100% 0 0)} html.motion .rc-page-work .wk-hero__head{clip-path:inset(0 0 0 0);transition:clip-path var(--wk-wipe) calc((var(--n) - 1) * .2s + .3s)} /* ===================================================================== E-2 セクションまたぎ（現物: 環境を知る rc-environment.css 106〜116 行＝CT rc-crosstalk.css 42〜48・115〜125・130〜133 行＝裁定 CT M12/M15） 静止（上の H・I）: .wk-hero と ステージの高さ＝--wk-st・導入の margin-top＝−--wk-cv → 導入の上端 96.1rem（Figma 961）・金の上端 129.5rem（Figma 1295）。 PC＋motion: ステージを sticky で止め、導入（先頭が炎の縁）が下から覆う。止める区間＝ステージ 1 枚分（--wk-st）、導入はその分上に重ねる＝ 導入の金の不透明な上端が画面上端に届いた所ちょうどで止めが外れる。導入以降の位置・全高は motion／no-motion で同じ。 層のずらしは rc-work.js（OSMO）。no-motion・reduced（html.motion が付かない）・SP は止めない ===================================================================== */ @media (min-width:1024px) and (orientation:landscape), (min-width:1367px){ html.motion .rc-page-work .wk-hero{height:calc(var(--wk-st) * 2);overflow:visible} html.motion .rc-page-work .wk-hero__stage{position:sticky;top:0;height:var(--wk-st);overflow:hidden} html.motion .rc-page-work .wk-intro{margin-top:calc(var(--wk-st) * -1 - var(--wk-cv))} } /* ===================================================================== SP（≤1023。指示書_セクション SP 表のヒーロー・WHAT WE DO・目次バー。rem は SP の rem＝min(幅/39,13px)） 現物: rc-environment.css 132〜173 行 ===================================================================== */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ .rc-page-work{--wk-cv:calc(var(--vw,100vw) * .174)} /* ヒーロー: 高さ auto。写真群の箱を高さ基準（高さ 60rem・幅 119.9rem）にして右端寄せ（下の「寄せ」）。中の写真は % のまま。網点・S・グラデも同じ倍率・同じ寄せ */ /* ENV F1: PC ではヘッダーが浮いて隠れる Figma の上の余白（写真群の最上端）を SP では切り落とす。ステージごと上へ（網点・写真群・S・グラデは同じ量動く＝ 写真群の下端と炎の縁の距離・見出しの位置は不変）。ヒーローを flow-root にして、ステージの負の margin が親の外へ抜けない（ヒーローの高さがその分詰まる）ようにする */ .rc-page-work .wk-hero{display:flow-root;height:auto;overflow:clip;--wk-up:calc(60rem * .2807)} .rc-page-work .wk-hero__stage{height:auto;min-height:60rem;box-sizing:content-box;padding-bottom:calc(var(--vw,100vw) * .174);margin-top:calc(var(--wk-up) * -1)} /* 寄せ（B1 が実測で決めた）: 箱（高さ 60rem・幅 119.9rem）の右から 10.5%（＝写真 2 の右端 90.26% の少し内側）を画面の右端に揃える＝左端 left:calc(100% − 107.3rem)。 375〜507（rem＝幅/39）では箱が画面の 3.07 倍で、画面に入る範囲は箱の 57.7〜89.3%（写真 2 の幅いっぱい・上の段に金の隙間が出ない）、508 以上（rem 13px 固定）でも同じ式で人物の顔（頭のキャップの人物・女性・男性）が入る （走査: 窓に入る人物の顔 3 つ・写真の無い面積 8.5%（390）／15〜16%（768〜1023）が最小）。translate は使わない。大きな S は箱の左端＋13.79rem・グラデは箱の左端に揃える */ .rc-page-work .wk-hero__photos{left:calc(100% - 107.3rem);width:auto;height:60rem;aspect-ratio:1920/960.6} .rc-page-work .wk-hero__dots{left:calc(100% - 107.3rem);width:auto;height:57.46rem;aspect-ratio:1920/920} .rc-page-work .wk-hero__dots--ext{top:57.46rem} .rc-page-work .wk-hero__s{left:calc(100% - 93.51rem);top:7.745rem;width:15.563rem;height:45.67rem} .rc-page-work .wk-hero__grad{left:calc(100% - 107.3rem);top:15.18rem;width:119.9rem;height:43.6rem} .rc-page-work .wk-hero__grad--ext{left:0;width:100%;top:58.78rem;height:auto;bottom:0} .rc-page-work .wk-hero__head{left:var(--gut);right:var(--gut);bottom:calc(var(--vw,100vw) * .174 + 4rem);top:auto;width:auto} .rc-page-work .wk-hero__en{height:2.4rem;gap:.5rem;font-size:1.6rem;line-height:2.4rem;letter-spacing:-.06rem} .rc-page-work .wk-hero__en-s{width:1.4rem;height:2.4rem} .rc-page-work .wk-hero__title{font-size:5.6rem;line-height:1.2;white-space:normal} .rc-page-work .wk-hero__lead{margin-top:1rem;font-size:max(1.5rem,13px);line-height:1.7;letter-spacing:.1rem;white-space:normal} /* WHAT WE DO: 炎の縁の分だけヒーローにかぶせる。ステージの下に同じだけの余白（炎の縁の下にヒーローの地がある）。 ブロックは static・全幅で縦に（ブロック 1 → 写真 1 → ブロック 2 → 写真 2 → ブロック 3 → 写真 3） */ .rc-page-work .wk-intro{isolation:isolate;margin-top:calc(var(--vw,100vw) * -.174);height:auto;padding:calc(var(--vw,100vw) * .174 + 6rem) var(--gut) 8rem; background:linear-gradient(to bottom,transparent var(--wk-cv),var(--wk-intro) var(--wk-cv))} /* 背景の画像は上の炎の縁と網点の分だけ敷く（高さ auto の SP では下端が切れて見える）→ 疑似要素にして下端を溶かす */ .rc-page-work .wk-intro::before{content:"";position:absolute;left:0;top:0;z-index:-1;width:100%;aspect-ratio:1920/1000;max-height:100%;pointer-events:none; background:url(../../images/recruit/rc-work-intro-bg.webp) 0 0/100% auto no-repeat; -webkit-mask-image:linear-gradient(#000 calc(100% - 9rem),transparent 100%);mask-image:linear-gradient(#000 calc(100% - 9rem),transparent 100%)} .rc-page-work .wk-intro__in{display:flex;flex-direction:column} .rc-page-work .wk-intro__block{position:static;width:auto} .rc-page-work .wk-intro__block--1{order:1} .rc-page-work .wk-intro__photo--1{order:2} .rc-page-work .wk-intro__block--2{order:3} .rc-page-work .wk-intro__photo--2{order:4} .rc-page-work .wk-intro__block--3{order:5} .rc-page-work .wk-intro__photo--3{order:6} .rc-page-work .wk-intro .wk-eyebrow{height:3rem;gap:.7rem;font-size:2rem;line-height:3rem;letter-spacing:-.07rem} .rc-page-work .wk-intro .wk-eyebrow__s{width:1.1rem;height:3rem} .rc-page-work .wk-intro__kicker{margin-top:1.6rem;font-size:max(1.3rem,12px);line-height:1.7;white-space:normal} .rc-page-work .wk-intro__rule{width:100%;margin-top:1rem} .rc-page-work .wk-intro__title{margin-top:1.2rem;font-size:2.6rem;line-height:1.5;letter-spacing:.04em;white-space:normal} .rc-page-work .wk-intro__sub{margin-top:1.4rem;font-size:1.7rem;line-height:1.7;white-space:normal;width:auto} .rc-page-work .wk-intro__h{font-size:2.2rem;line-height:1.5;white-space:normal} .rc-page-work .wk-intro__p{width:auto;margin-top:1.4rem;font-size:max(1.4rem,13px);line-height:2.1;letter-spacing:.05em} .rc-page-work .wk-intro__block--2 .wk-intro__h+.wk-intro__p{margin-top:1.4rem} .rc-page-work .wk-intro__block--2 .wk-intro__p+.wk-intro__p{margin-top:1.2rem} .rc-page-work .wk-intro__steps{margin-top:2rem;gap:1.2rem} .rc-page-work .wk-intro__step,.rc-page-work .wk-intro__step:nth-child(2),.rc-page-work .wk-intro__step:nth-child(3){display:grid;grid-template-columns:auto 1fr;column-gap:1.2rem;row-gap:1.2rem;align-items:center;width:auto;min-height:0;padding:2rem 1.6rem} .rc-page-work .wk-intro__num{height:auto;min-width:5rem;margin-top:0;padding:.6rem 1rem;font-size:3.6rem;line-height:1;letter-spacing:-.05em; --wk-cw:.5rem;--wk-ch:.5rem} .rc-page-work .wk-intro__step-t{justify-content:flex-start;height:auto;font-size:1.8rem;line-height:1.4;white-space:normal} .rc-page-work .wk-intro__step-d{grid-column:1/-1;margin-left:0;font-size:max(1.3rem,12px);line-height:1.8} .rc-page-work .wk-intro__note{margin-top:2rem;font-size:max(1.5rem,13px);line-height:1.9;white-space:normal} .rc-page-work .wk-intro__photo{position:relative;left:auto;top:auto;width:min(100%,40rem);height:auto;aspect-ratio:598.58/771;margin:3rem auto 0; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 3rem,#000 calc(100% - 3rem),transparent 100%),linear-gradient(to bottom,transparent 0,#000 3rem,#000 calc(100% - 3rem),transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 3rem,#000 calc(100% - 3rem),transparent 100%),linear-gradient(to bottom,transparent 0,#000 3rem,#000 calc(100% - 3rem),transparent 100%)} .rc-page-work .wk-intro__photo--1,.rc-page-work .wk-intro__photo--2,.rc-page-work .wk-intro__photo--3{top:auto} .rc-page-work .wk-intro__photos,.rc-page-work .wk-intro__stick{display:contents} /* 2026-10-08: 写真は前と同じく .wk-intro__in の並び（order）に入る＝ブロックと交互の縦積み */ /* 目次バー: 上に sticky の 4 列・矢印なし・押せる高さ 6.4rem・番号（上）＋文字 2 行まで中央 */ .rc-page-work .wk-bar,.rc-site.admin-bar.rc-page-work .wk-bar{top:0;height:6.4rem} .rc-page-work .wk-bar__list{width:100%} .rc-page-work .wk-bar__a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;padding:0 .3rem;text-align:center} .rc-page-work .wk-bar__glow{top:1.5rem;height:4.9rem} .rc-page-work .wk-bar__num{position:relative;left:auto;top:auto;height:1.6rem} .rc-page-work .wk-bar__label{position:relative;left:auto;top:auto;font-size:max(1.1rem,11px);line-height:1.3;letter-spacing:.04em;white-space:normal;text-align:center} .rc-page-work .wk-bar__arrow{display:none} }