/* Engineer 採用ページ専用スタイル（/recruit/engineer/） * * ⚠️ ここに置くのは「forward.css / role.css では表現できない Engineer 固有のUI」だけ。 * 面（.fwd-scene--*）・見出し（.fwd-scene__title）・eyebrow・左レール（.fwd-rail）・ * reveal（.fwd-reveal）・募集要項（.fwdr-info）・選考（.fwd-process）・ * ENTRY（.fwdr-entry-cta）・PRODUCTS（.fwdr-layers）・HOW WE WORK（.fwdr-reasons）・ * MIGRATION の年表（.fwd-stepline）・STACK（.fwdr-stack）・PROMOTION（.fwd-stepline）・ * Q&A（.fwd-faq）・WHO（.fwdr-spec）は、すべて既存の共通部品をそのまま使っている。 * 同じ見た目を Engineer 側で再定義しないこと。 * * ⚠️ セレクタは必ず .fwdr-page-engineer 配下へ書く。Sales / Creative は同じ * forward.css / role.css を読むので、素の .fwdr-* を上書きすると波及する。 * * ⚠️ ダークモードは持たない（他の Recruit ページに無いため）。色は site.css の * ブランドトークン（--brand-deep / --brand-cyan / --brand / --border / * --muted-foreground）だけを使い、独自のテーマ変数を作らない。 */ /* ------------------------------------------------------------------ 01 — HERO の補助 Sales / Creative と同じ .fwdr-hero をそのまま使う。Engineer だけ主コピーが 長い（「ルールもナレッジも、人と AI が同じものを読む。」）ため、 .fwdr-hero__title の max-width:18ch では PC で不自然に折り返る。 このページに限って行長を広げ、明示した
の位置で折れるようにする。 ------------------------------------------------------------------ */ .fwdr-page-engineer .fwdr-hero__title { max-width: 26ch; /* 日本語を語中で切らない。「ナ / レッジ」のような折り返しを防ぐ。 */ word-break: keep-all; overflow-wrap: break-word; } /* HERO の「使ってきた道具」。チップの羅列にせず、mono のラベル＋薄い罫線で technical label として置く。 */ .fwdr-page-engineer .fwde-tools { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.4rem; margin: 2.25rem 0 0; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, 0.22); max-width: 34rem; } /* PC では h1 が 1000px 近くまで伸びるのに、lead と「使ってきた道具」だけが 34〜40rem に留まって、HERO の下半分が極端に小さく見えていた。 行長は 48rem（全角48文字ぶん）までに抑え、可読性を保ったまま 横方向のスケールを合わせる。罫線の幅も lead と同じにして左右で揃える。 ⚠️ SP（1023px 以下）は現状のままにする。 */ @media (min-width: 1024px) { .fwdr-page-engineer .fwdr-hero__lead, .fwdr-page-engineer .fwde-tools { max-width: 48rem; } } .fwdr-page-engineer .fwde-tools__label { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; color: var(--brand-cyan); white-space: nowrap; } .fwdr-page-engineer .fwde-tools__list { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0; padding: 0; list-style: none; } .fwdr-page-engineer .fwde-tools__list li { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; line-height: 1.6; color: rgba(255, 255, 255, 0.86); } /* ------------------------------------------------------------------ 04 — MIGRATION のグラフ 月あたりコミット数の相対値（最大月＝100）。数字自慢に見せたくないので、 ピーク月だけを強調する塗り分けはしない。全月を同じ一段抑えたブルーで置き、 目盛りは 0 / 50 / 100 の3本だけにする。 ⚠️ 実数ではなく相対値。値を変えないこと。 ------------------------------------------------------------------ */ .fwdr-page-engineer .fwde-chart { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, 0.18); } .fwdr-page-engineer .fwde-chart__caption { margin: 0 0 1.5rem; max-width: 34rem; font-size: 0.82rem; line-height: 1.85; color: rgba(255, 255, 255, 0.76); } .fwdr-page-engineer .fwde-chart__caption b { display: block; margin-bottom: 0.35rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; color: var(--brand-cyan); } /* 狭い画面ではグラフだけ横スクロールする。ページ全体は横に出さない。 */ .fwdr-page-engineer .fwde-chart__shell { position: relative; overflow-x: auto; } .fwdr-page-engineer .fwde-chart__svg { display: block; width: 100%; height: auto; min-width: 34rem; } .fwdr-page-engineer .fwde-chart__bar { fill: var(--brand); opacity: 0.85; } /* ホバー中の棒だけ不透明に戻す。 ⚠️ JS 側で setAttribute('opacity', …) にしてはいけない（#227）。 presentation attribute はカスケードで最下位なので、上の `opacity: .85` という CSS 宣言に必ず負け、computed 値が動かない。 状態クラスで上書きすること。 */ .fwdr-page-engineer .fwde-chart__bar.is-active { opacity: 1; } .fwdr-page-engineer .fwde-chart__grid { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; shape-rendering: crispEdges; } .fwdr-page-engineer .fwde-chart__tick, .fwdr-page-engineer .fwde-chart__axis { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; fill: rgba(255, 255, 255, 0.6); } /* 月別の値を支援技術へ渡す表。見た目には出さない（#237-1）。 グラフと同じ data 配列から engineer.js が生成する。 ⚠️ display: none や visibility: hidden にはしない。どちらも 支援技術からも消えるので、渡したいものが渡らなくなる。 ⚠️ 以前ここには .fwde-chart__hit:focus-visible のフォーカスリングが あったが、当たり判定からキーボードフォーカスを外した（月別の値は この表が担当する）ため不要になった。 */ .fwdr-page-engineer .fwde-chart__data { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .fwdr-page-engineer .fwde-chart__tip { position: absolute; z-index: 2; pointer-events: none; opacity: 0; transform: translate(-50%, -125%); padding: 0.35rem 0.55rem; border: 1px solid rgba(255, 255, 255, 0.24); background: var(--brand-deep); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.68rem; line-height: 1.55; white-space: nowrap; color: #fff; transition: opacity 140ms ease; } /* SP ではラッパーに余白を持たせない。各 note の margin-top がそのまま 効いて、ラッパーを足す前と同じ間隔になる。 */ .fwdr-page-engineer .fwde-chart__notes { margin-top: 0; } .fwdr-page-engineer .fwde-chart__note { margin: 1.25rem 0 0; max-width: 34rem; font-size: 0.86rem; line-height: 1.9; color: rgba(255, 255, 255, 0.82); } /* グラフはページ幅いっぱいを使うのに、その下の注釈だけ 34rem へ縮んで 右側が大きく空いていた。PC では3つの注釈を図の脚注として横に並べ、 グラフと同じ幅まで使う。1行を長くするのではなく、段を増やして 横幅を使うやり方にしている（文章は変更していない）。 */ @media (min-width: 1024px) { .fwdr-page-engineer .fwde-chart__caption { max-width: 48rem; } .fwdr-page-engineer .fwde-chart__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; margin-top: 2rem; } .fwdr-page-engineer .fwde-chart__note { margin: 0; max-width: none; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.18); } } .fwdr-page-engineer .fwde-chart__note strong { color: #fff; font-weight: 700; } @media (prefers-reduced-motion: reduce) { .fwdr-page-engineer .fwde-chart__tip { transition: none; } } /* ------------------------------------------------------------------ 05 — STRUCTURE 「1つの巨大なリポジトリでも、バラバラでもない。役割で分ける。」を、 表ではなく階層と接続で見せる。上段＝顧客に届くものと社内のもの（間に 契約の境界線）、下段＝それを支える基盤。細い罫線だけで構成し、 カードの影やフローチャートは使わない。 SPでは図を縮小せず、同じ順序の縦積みへ落とす。 ------------------------------------------------------------------ */ .fwdr-page-engineer .fwde-arch { margin-top: 3rem; } .fwdr-page-engineer .fwde-arch__tier { margin-top: 2.25rem; } .fwdr-page-engineer .fwde-arch__tier:first-child { margin-top: 0; } .fwdr-page-engineer .fwde-arch__tier-label { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 1.1rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; color: var(--brand-cyan); } .fwdr-page-engineer .fwde-arch__tier-label::after { content: ""; flex: 1; height: 1px; background: var(--border); } .fwdr-page-engineer .fwde-arch__row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .fwdr-page-engineer .fwde-arch__cell { padding-top: 0.95rem; border-top: 2px solid var(--brand-deep); } .fwdr-page-engineer .fwde-arch__tier--support .fwde-arch__cell { border-top-width: 1px; border-top-color: var(--border); } .fwdr-page-engineer .fwde-arch__name { display: block; margin: 0 0 0.45rem; font-size: 1rem; font-weight: 900; letter-spacing: 0.01em; color: var(--brand-deep); } .fwdr-page-engineer .fwde-arch__desc { margin: 0; font-size: 0.88rem; line-height: 1.8; color: var(--muted-foreground); } /* 上段2つの間に置く「境界」。両者が互いのDBを直接見ない、という 構成上の線引きを、そのまま1本の線として見せる。 */ .fwdr-page-engineer .fwde-arch__boundary { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.75rem; margin: 1.5rem 0 0; padding: 0.7rem 0 0; border-top: 1px dashed var(--brand-cyan); } .fwdr-page-engineer .fwde-arch__boundary-label { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; color: var(--brand-cyan); } .fwdr-page-engineer .fwde-arch__boundary-text { margin: 0; font-size: 0.84rem; line-height: 1.75; color: var(--muted-foreground); } @media (min-width: 768px) { .fwdr-page-engineer .fwde-arch__row { grid-template-columns: 1fr 1fr; gap: 2.5rem; } .fwdr-page-engineer .fwde-arch__tier--support .fwde-arch__row { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; } .fwdr-page-engineer .fwde-arch__boundary { grid-template-columns: auto minmax(0, 40rem); } } /* ------------------------------------------------------------------ 09 — WHO .fwdr-spec（Sales / Creative と同じ2カラムの見た目）をそのまま使いつつ、 Engineer は区分が3つ（合いそうな人 / やってもらうこと / 働き方）なので このページでだけ3カラムにする。色・罫線・文字サイズは .fwdr-spec のまま。 ------------------------------------------------------------------ */ @media (min-width: 980px) { .fwdr-page-engineer .fwde-spec--three { grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; } } /* ------------------------------------------------------------------ 02 — PRODUCTS の本文レイアウト .fwdr-layers（role.css）は縦積み前提で、本文が max-width: 32rem に 絞られていた。PC では右側が大きく空き、番号・ラベル・見出し・本文が すべて左端に寄って読みづらい（#audit）。 1024px 以上では「左＝番号とラベル（索引）／右＝見出しと本文」の 2カラムへ組み替え、本文の行長を素直に広げる。 ⚠️ .fwdr-layers は Engineer だけが使うが、定義は共有の role.css に あるため、上書きは必ず .fwdr-page-engineer 配下に書く。 ⚠️ 文言・色・番号・区切り線の意匠は変えていない。 ------------------------------------------------------------------ */ @media (max-width: 1023px) { .fwdr-page-engineer .fwdr-layer__headline, .fwdr-page-engineer .fwdr-layer__lead, .fwdr-page-engineer .fwdr-layer__list { max-width: 40rem; } } @media (min-width: 1024px) { .fwdr-page-engineer .fwdr-layer { display: grid; /* 左列は一番長いラベル（STOREFRONT）が収まる幅。狭いと字面が 右列へはみ出して見出しにぶつかる。 */ grid-template-columns: minmax(9rem, 14rem) minmax(0, 40rem); column-gap: 3.5rem; } /* 左列（番号＋英字ラベル）は「右の見出しと同じ高さから始まるひとかたまり」 として置く。ベースライン揃えだと番号のフォントが小さいぶん字面が 15px 下がり、さらにラベルが行2の頭（＝見出しより34.7px下）へ落ちていて、 node / 番号 / ラベル / 見出しの4つが全部ちがう高さから始まっていた。 番号の字面上端を見出しの字面上端に合わせ、ラベルをその真下へ詰める。 */ .fwdr-page-engineer .fwdr-layer__num { grid-column: 1; grid-row: 1; align-self: start; line-height: 1.4; } .fwdr-page-engineer .fwdr-layer__label { grid-column: 1; /* ⚠️ grid-template-rows を書いていないので行はすべて暗黙行になる。 ここで `2 / -1` と書くと -1 が「明示グリッドの終端（＝1本目の線）」に 解決され、範囲が反転して 1行目に戻ってしまう（番号と重なる原因だった）。 span で数えること。 行1〜3にまたがらせているのは、行1だけに置くと 48px の行ボックスが 行1を押し広げて右列の lead まで下がってしまうため。span + align-self: start なら行の高さに影響しない。 */ grid-row: 1 / span 3; align-self: start; /* 番号の行ボックス（1.4 × 0.72rem ≒ 16px）のぶんだけ下げて、 番号のすぐ下にラベルを置く。 */ margin-top: 1.05rem; } /* 目印の四角は番号の字面の中心に合わせる（role.css の 0.35rem は ベースライン揃えだった頃の位置）。 */ .fwdr-page-engineer .fwdr-layer__node { top: 0.2rem; } .fwdr-page-engineer .fwdr-layer__headline { grid-column: 2; grid-row: 1; /* 左列の番号を字面の上端で揃えるので、見出し側も上端基準にする。 */ align-self: start; margin-top: 0; max-width: none; } .fwdr-page-engineer .fwdr-layer__lead { grid-column: 2; grid-row: 2; max-width: none; } .fwdr-page-engineer .fwdr-layer__list { grid-column: 2; grid-row: 3; max-width: none; /* 本文幅を広げた分、2カラムのままだと箇条書きが左右に離れすぎる。 列幅を抑えて左寄せにし、本文とのまとまりを保つ。 */ grid-template-columns: repeat(2, minmax(0, 18rem)); justify-content: start; column-gap: 2rem; } } /* ------------------------------------------------------------------ セクション冒頭のリード文の行長 .fwd-scene__lead（forward.css・全 Recruit ページ共通）は 42rem。 Engineer は本文列を 40rem まで広げたので、その導入にあたるリード文だけが 先に折り返して「幅が足りなくて折れている」ように見えていた。 HERO の lead と同じ 48rem（1rem の本文で全角48文字ぶん）に揃える。 1行を長くしすぎない範囲での調整で、手動の
は足していない。 ⚠️ forward.css は変更しない（Sales / Creative / Recruit TOP は 42rem のまま）。 ------------------------------------------------------------------ */ @media (min-width: 1024px) { .fwdr-page-engineer .fwd-scene__lead { max-width: 48rem; } } /* ------------------------------------------------------------------ 03 — HOW WE WORK の縦1列レイアウト 01〜06 は PC / Tablet / SP とも「縦1列」。一度 1024px 以上を2カラムに したが、1件あたりの行長が短くなって視線が左右に飛び、Recruit の他ページの 落ち着いた縦の流れから浮いた。右に余白が残っても、上から順に読み進められる ことを優先して1列へ戻してある。 そのうえで、1列として揃って見えるところまで3点だけ整える。 1) 番号と見出しをベースラインで揃える （番号 0.72rem mono と見出し clamp 1.05〜1.25rem でフォントサイズが 大きく違い、箱の上端で揃えると番号が上下にずれて見える） 2) 見出し 32rem / 本文 34rem で食い違っていた行長を揃える 3) 罫線の上下の余白を同じにして縦のリズムを均一にする ⚠️ カードにしない。面・影・角丸・アイコンは足さず、role.css の thin rule と typography と余白だけで整える。 ⚠️ 2カラム化は行わない。 ⚠️ .fwdr-reasons は role.css にあり Creative と共有なので、上書きは必ず .fwdr-page-engineer 配下に書く。 ------------------------------------------------------------------ */ @media (min-width: 700px) { .fwdr-page-engineer .fwdr-reasons__num { /* role.css の `grid-row: 1 / 3`（2行にまたがって上寄せ）を、 見出しと同じ1行目だけに戻したうえでベースライン揃えにする。 どちらの字送りを後から変えてもズレない。 */ grid-row: 1; align-self: baseline; } .fwdr-page-engineer .fwdr-reasons__headline { align-self: baseline; } /* PRODUCTS の本文列と同じ 40rem に揃える。0.9rem の本文で全角44文字ぶん。 ページ内の本文幅を1種類にして、セクションごとに右端が動かないようにする。 */ .fwdr-page-engineer .fwdr-reasons__headline, .fwdr-page-engineer .fwdr-reasons__body { max-width: 40rem; } /* 罫線の上下を同じ量あけて、01〜06 の縦のリズムを均一にする。 */ .fwdr-page-engineer .fwdr-reasons__item { padding: 1.75rem 0; } } /* ------------------------------------------------------------------ 05 — STRUCTURE の階層表現 RUNTIME と FOUNDATION が同じ見た目で並んでいたため、上位（動いている もの）と下位（それを支えるもの）の関係が図から読み取りにくかった（#audit）。 内容は変えずに、次の3点だけで階層を見せる。 1) RUNTIME を淡い面で1枚に囲い、BOUNDARY までが同じグループだと示す 2) FOUNDATION も面で囲うが、RUNTIME より薄い面＋破線にして下位だと示す 3) 2つのグループを縦の連結線で結び、「下が上を支える」向きを明示する ⚠️ かっこよさより分かりやすさを優先し、影やアイコンは足さない。 ------------------------------------------------------------------ */ /* 上下2段それぞれを「1つの層」として面で示す。同じ箱を2個並べるのではなく、 上位（動いているもの）は濃く・実線、下位（それを支えるもの）は白寄りに 薄く・破線にして、濃度と線種の差だけで上下関係を伝える。 面の色はこの図でしか使わないので、--brand-light を起点にした2段階を ここで名前を付けて持つ（新しいテーマ変数をグローバルへ足さない）。 */ .fwdr-page-engineer .fwde-arch { --fwde-tier-runtime: var(--brand-light); /* --brand-light(#eaf6ff) を白へ寄せた色。面が白の上に置かれるので、 RUNTIME より一段薄く、それでも「面がある」と分かる濃さにする。 */ --fwde-tier-foundation: #f1f8fd; --fwde-tier-line: #bcdcf4; --fwde-tier-line-support: #cfe2f2; } .fwdr-page-engineer .fwde-arch__tier { position: relative; padding: 1.5rem 1.5rem 1.75rem; border: 1px solid var(--fwde-tier-line); background: var(--fwde-tier-runtime); } .fwdr-page-engineer .fwde-arch__tier--support { margin-top: 3.25rem; border-style: dashed; border-color: var(--fwde-tier-line-support); background: var(--fwde-tier-foundation); } /* 上位→下位の連結線。FOUNDATION が RUNTIME を支えている向きを1本の線で示す。 */ .fwdr-page-engineer .fwde-arch__tier--support::before { content: ""; position: absolute; left: 50%; top: -3.25rem; width: 1px; height: 3.25rem; background: var(--fwde-tier-line); } .fwdr-page-engineer .fwde-arch__tier-label { margin-bottom: 1.25rem; } /* 面の上に置くので、セル上端の罫線は面と同じ濃さの関係を保つ。 */ .fwdr-page-engineer .fwde-arch__tier--support .fwde-arch__cell { border-top-color: var(--border); } /* BOUNDARY は RUNTIME の2セルに掛かる約束事。面の中に収めて所属を明示する。 */ .fwdr-page-engineer .fwde-arch__boundary { margin-top: 1.5rem; padding-top: 0.85rem; } @media (min-width: 768px) { .fwdr-page-engineer .fwde-arch__boundary { /* 1列目が auto なので余白を全部吸ってしまい、BOUNDARY のラベルと 本文が画面の左端と右端に離れて見えていた。左に詰めて一組にする。 */ justify-content: start; } } @media (max-width: 767px) { /* SPではラベルを横に置くと本文の幅が足りない。上下に積む。 */ .fwdr-page-engineer .fwde-arch__boundary { grid-template-columns: 1fr; align-items: start; gap: 0.4rem; } } /* ------------------------------------------------------------------ 狭幅（〜359px）での見出しの行送り HEROの主コピー「ルールもナレッジも、人と AI が同じものを読む。」は .fwdr-hero__title の clamp() 下限 2rem が 320px でも効くため、1行目の 「ルールもナレッジも、」（10文字）が入り切らず「ナレッジ / も、」や 句読点だけの行が出ていた（#audit）。360px 以上の表示は変えたくないので、 359px 以下でだけ字送りを詰める。 セクション見出し（.fwd-scene__title）も同じ理由で、意味の切れ目に置いた
の各行が 320px で入り切るところまで下げる。 ⚠️ コピー・改行位置・360px 以上の見た目は変更しない。 ------------------------------------------------------------------ */ @media (max-width: 359px) { .fwdr-page-engineer .fwdr-hero__title { font-size: 1.6rem; } .fwdr-page-engineer .fwd-scene__title { font-size: 1.45rem; } } /* ------------------------------------------------------------------ 07 — PROMOTION の SP レイアウト 共通の .fwd-stepline は Recruit TOP の 5 工程（奇数）を前提に 「最後の1つを全幅中央へ置く」ルールを持つ（forward.css）。 Engineer の PROMOTION は 4 工程（偶数）なので、そのままだと 01/02 → 03 → 04 の「2＋1＋1」になり、03 の右が空いてしまう。 このページの stepline だけ last-child の特例を解除して 2＋2 に戻す。 ⚠️ forward.css は変更しない（Recruit TOP の 5 工程が崩れるため）。 ⚠️ 700px 以上は flex の横一列なので、この上書きは効かない＝無変更。 ------------------------------------------------------------------ */ @media (max-width: 699px) { .fwdr-page-engineer .fwd-stepline__step:last-child { grid-column: auto; max-width: none; margin: 0; } } /* ------------------------------------------------------------------ 09 — WHO のタブレット幅 .fwdr-spec は role.css で 700px から 2 カラムになるが、Engineer は 区分が 3 つあるため 700〜979px では「2＋1」になり、右半分が大きく 空いていた（#audit）。3 カラムへ切り替わる 980px までは 1 カラムで 通す。980px 以上は現行どおり 3 カラム。 ⚠️ role.css は変更しない（Sales / Creative の 2 区分は 2 カラムのまま）。 ------------------------------------------------------------------ */ @media (min-width: 700px) and (max-width: 979px) { .fwdr-page-engineer .fwde-spec--three { grid-template-columns: 1fr; } }