# Sansan Midcareer Recruitment — Style Reference

> A spacious recruitment story populated by miniature people, precise blue controls, and red geometric fragments.

**Website:** [Sansan Midcareer Recruitment](https://jp.corp-sansan.com/recruit/midcareer/)
**Original URL:** https://jp.corp-sansan.com/recruit/midcareer/
**Final URL:** https://jp.corp-sansan.com/recruit/midcareer/
**Theme:** light in the supplied captures; no alternate theme was verified.
**Inspected:** September 23, 2026, at 06:25:57 JST; supplied retrieval timestamp: September 22, 2026, at 21:25:57.225 UTC.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current recruitment homepage. Visual evidence covers the desktop opening, Business section, and footer, plus the mobile opening and lower footer. Rendered DOM and computed-style evidence additionally cover the introductory statements, CHRO Message, Culture, Member, Interviews, and job previews. Linked destinations and expanded navigation were not inspected.

This is a corporate recruitment hub with editorial storytelling, topic navigation, and job discovery. Its opening is unusually quiet: a pale gray field, a compact white-on-black Japanese message, scattered red and blue fragments, and small blue-gray human figures. A white capsule header floats above the scene on desktop. Rounded black and outlined white buttons provide a clear route into vacancies and casual interviews.

The middle of the page gives each topic substantial space. Large blue English headings, short red rules, Japanese explanations, and circular arrow links sit around central scene imagery. The jobs section becomes more compact and practical, using pale blue cards and grouped vacancies. A pale blue footer returns to the people motif while providing a comprehensive site directory.

## How to Read This Reference

- **Measured** values come from the supplied rendered DOM, element rectangles, and computed styles. They describe the two captured viewport configurations.
- **Calculated** values are arithmetic derived from those measurements, such as card gaps or a composited background color.
- **Visual estimates** describe screenshot geometry or colors whose underlying declarations were not included. Estimated hex values are implementation approximations, not sampled brand specifications.
- **Recommendations** are explicitly identified. The Quick Start supplies an adaptable static implementation, not recovered source code.
- **Named tokens** are descriptive aliases unless identified as original custom properties.
- An element can appear in a DOM extract without being visible in the screenshot. This matters particularly for mobile navigation and offscreen job cards.
- Some extracted headings repeat their first character, such as `BBusiness`. The visible heading is `Business`; the cause of the extraction duplication is unverified.

## Tokens — Colors

### Default Palette

| Name | Value | Evidence | Role |
| --- | --- | --- | --- |
| Page White | `#fbfbfb` | Measured body and jobs-section background | Main document surface |
| Brand Blue | `#004e98` | Measured heading and detail-link text | Topic headings, job titles, navigational emphasis |
| Black | `#000000` | Measured | Body text, hero message backing, primary vacancy buttons |
| White | `#ffffff` | Measured | Reversed labels and secondary button surfaces |
| Job Tint | `rgba(0, 78, 152, 0.05)` | Measured card background | Subtle distinction between job cards and the page |
| Composited Job Tint | Approximately `#eef2f6` | Calculated over `#fbfbfb` | Solid-color substitute for the translucent card fill |
| Scene Gray | Approximately `#ebebeb` | Visual estimate | Opening scene and rectangular Business artwork field |
| Signal Red | Approximately `#e60020` | Visual estimate | Geometric fragments, logo underline, and short heading rules |
| Footer Ice | Approximately `#eff8fd` | Visual estimate | Large footer field |

The measured blue also visually corresponds to the logo and circular controls, but their individual graphic fills were not extracted. The human figures contain several blue-gray shades and directional shadows; they should not be reduced to one flat blue token.

Use red as a small graphic accent. The strongest recruitment action is black, while blue identifies exploration and section navigation. The page does not use red as a general button fill.

Only the light appearance is evidenced. There is no basis for adding theme presets to a faithful reference.

## Tokens — Typography

### Declared Latin and Japanese Families

The original custom property `--font-en` declares `"sofia-pro", "Helvetica Neue"`. The Japanese stack begins with Yu Gothic variants and includes Noto Sans CJK JP and Hiragino fallbacks.

The computed body family combines those stacks and ends with `sans-serif`. This establishes the declared typography system; it does not prove which font file rendered each glyph. No font loading report or font asset URLs were supplied.

The visible effect is a rounded, approachable Latin sans paired with clear Japanese Gothic text. Most emphasis comes from weight, spacing, and color. The browser-serif family reported on the HTML element is not the visible body typography.

### Type Scale

Sizes and line heights below are measured CSS values. A slash separates font size from line height.

| Role | Desktop | Mobile | Weight | Tracking |
| --- | --- | --- | --- | --- |
| Base body | `16 / 18.4px` | `16 / 18.4px` | 400 | Normal |
| Desktop navigation | `16 / 18.4px` | Not visible in collapsed header | 700 | Normal |
| Header CTA | `13 / 13px` | Expanded-state appearance unverified | 700 | `0.025em` on desktop |
| Hero message | `33.7335 / 33.7335px` | `24 / 24px` | 700 | `0.05em` |
| Hero CTA | `16 / 18.4px` | `16 / 18.4px` | 700 | Normal |
| Introductory statements | `24 / 36px` | `14 / 21px` | 700 | `0.07em` |
| English section heading | `48 / 48px` | `36 / 36px` | 700 | `-0.02em` |
| Japanese section subtitle | `18 / 27px` | `18 / 27px` | 700 | Normal |
| Section description | `14 / 28px` | `14 / 28px` | 400 | Normal |
| Detail-link label | `16 / 18.4px` | `14 / 16.1px` | 700 | Normal |
| Jobs heading | `32 / 32px` | `24 / 28.8px` | 700 | Normal |
| Job-group heading | `24 / 36px` | `20 / 30px` | 700 | Normal |
| Job category | `12 / 12px` | `12 / 12px` | 700 | Normal |
| Job title | `18 / 27px` | `18 / 27px` | 700 | Normal |
| Job description | `12 / 21px` | `12 / 21px` | 400 | Normal |
| Footer message | `24 / 36px` | `13 / 19.5px` | 700 | `0.05em` |
| Footer primary links | Mostly `16 / 28.8px` | Mostly `20 / 30px` | 700 | Normal |
| Footer child links | `12 / 21.6px` | `16 / 28.8px` | 400 | Normal |
| Legal and social links | `12 / 21.6px` | `12 / 21.6px` | 400 | Normal |

The mobile footer's `Sansanの人` group label is an observed exception: `16 / 24px`, weight 700.

The desktop hero message is smaller than the English section headings. Its prominence comes from the black backing and surrounding empty space. Avoid enlarging it into a screen-filling display headline.

### Heading and Copy Relationships

English headings are compact, bold, blue, and slightly tightly tracked. Japanese subtitles are smaller and black. Descriptions remain restrained at 14px with a generous 28px line height on both viewports.

For Business, the heading rectangle is 68px high on desktop and 56px on mobile, although the font line heights are 48px and 36px. The screenshot shows a short red rule below the heading. Treat the heading, its decoration, and the following clearance as separate layout concerns.

## Tokens — Spacing & Shapes

**Density:** very spacious storytelling, moderate-density navigation, and compact job information.

There is no supplied source spacing scale. The recurring measured values suggest useful implementation aliases at 8, 16, 24, 32, 64, and 128px, but these should not be presented as original variables.

### Spacing Scale

| Use | Value | Evidence |
| --- | --- | --- |
| Desktop header top inset | `16px` | Measured header padding |
| Desktop header outside horizontal inset | `32px` | Measured padding and screenshot |
| Main desktop content inset | `72px` | Repeated measured x-coordinate; equals 5% of 1440px |
| Main mobile content inset | `32px` | Measured headings, CTAs, cards, and footer |
| Desktop navigation item separation | `24px` | Calculated between successive item rectangles |
| Desktop header CTA separation | `8px` | Calculated |
| Hero CTA separation | About `33.72px` desktop; `16px` mobile | Calculated |
| Section heading box to subtitle | `64px` | Calculated from repeated rectangles |
| Subtitle to description | `32px` | Calculated |
| Mobile description to detail link | `32px` | Calculated |
| Job-card internal padding | `24px 32px` | Measured |
| Desktop job-card gap | `32px` | Calculated |
| Mobile job-track gap | `16px` | Calculated |
| Job category to title | `8px` | Calculated |
| Job title to description | `16px` | Calculated |
| Job-group separation | `64px` | Calculated |
| Mobile topic-section top padding | `128px` | Measured |
| Jobs-section padding | Desktop `128px 0 256px`; mobile `64px 0 128px` | Measured |

### Border Radius

| Element | Value | Evidence |
| --- | --- | --- |
| Hero message strips | `0` | Measured desktop parent and visible mobile strips |
| Scene image boundary | Square corners | Screenshot observation |
| Job cards | `24px` | Measured |
| CTA pills | `1000px` desktop; `844px` mobile | Measured computed values |
| Mobile menu control | `50%` | Measured |
| Desktop header capsule | Approximately `41px` effective radius | Visual estimate from an approximately 82px-high surface |
| Arrow controls | Circular | Screenshot observation |

The very large CTA radii simply produce fully rounded ends at these dimensions. A reusable `999px` radius is an appropriate adaptation; the evidence does not establish the formula behind the source values.

### Layout Measurements

| Element | Desktop, 1440 × 1000 | Mobile, 390 × 844 |
| --- | --- | --- |
| Document height | `17873.11px` | `10939.19px` |
| Header outer rectangle | `1440 × 98px` | `390 × 66px` |
| Visible desktop header capsule | Approximately `1376 × 82px`, at `(32, 16)` | Capsule absent in captured collapsed state |
| Logo box | `75 × 28px`, at `(72, 43)` | `66 × 24.63px`, at `(34, 31.69)` |
| Menu control | Not shown | `48 × 48px`, at `(326, 20)` |
| Hero message rectangle | `557.08 × 55.73px`, at `(126.5, 365)` | Parent `358 × 80px`, at `(32, 244.75)` |
| Hero CTAs | Two `260 × 50px` pills | Two `326 × 50px` pills |
| Hero down control | `64 × 64px`, at `(1344, 904)` | `48 × 48px`, at `(322, 776)` |
| Topic copy width | `410.66px` | `326px` |
| Business scene | Approximately `692 × 462px`, centered | Middle-section imagery not visually supplied |
| Topic detail link | `162 × 64px` | `136 × 48px` |
| Job-card width | `410.66px` | `312px` |
| Business job-card height | `237px` | `258px` |
| Creator job-card height | `189px` | `237px` |
| Footer height | `730.11px` | `1221.83px` |

The mobile hero message parent extends to the viewport edge, but its black backgrounds hug the two text lines. Do not turn the entire 358px parent into a single black rectangle.

## Components

### Persistent Desktop Header

**Role:** retain identity, topic access, and recruitment actions while the page is explored.

The white capsule begins 32px from either desktop edge and 16px from the top. Its logo is aligned 40px inside the capsule's left boundary. Navigation occupies the right side, leaving a substantial open interval after the logo.

The navigation contains three button-based groups—`事業・業務内容`, `Sansanの人`, and `カルチャー`—with small downward chevrons, plus the direct `イベント` link. Two pills follow: outlined white `カジュアル面談` and black `求人一覧`.

The header appears at the same screen location in all supplied desktop scroll captures. This supports a persistent visual treatment; the source positioning declaration was not included. No strong interface shadow is visible.

The DOM contains additional group links, but no expanded dropdown was captured. Opening trigger, dismissal behavior, panel geometry, and keyboard interaction remain unverified.

### Collapsed Mobile Header

**Role:** preserve compact identity and access to navigation.

The mobile capture shows the 66px-wide logo directly over the scene and a 48px blue circular menu button near the upper-right corner. The desktop white capsule and horizontal links are absent.

The same controls remain visible over the lower footer capture. The transparent header can therefore visually overlap scrolled text in this state. A new implementation should address that overlap without changing the initial composition unnecessarily.

The DOM includes white 18px navigation labels and additional CTA elements that are not visible in the opening screenshot. These are evidence of navigation structure, not evidence that a menu is open. Do not infer its background, animation, or complete layout from those rectangles alone.

### Opening Scene and Message

**Role:** establish the recruitment theme before introducing detailed content.

The desktop opening uses a full-screen pale gray scene. Small people occupy the lower-right region, with long blue shadows extending across the ground. Red and blue rectilinear fragments interrupt the upper-left and lower edges. Much of the center remains empty.

The message `「出会い」の可能性を切り拓く人へ。` sits in a single square-cornered black strip at approximately 8.8% of the viewport width and 36.5% of its height. Its measured padding is `10px 12px 12px`, with white bold text.

On mobile, the same message becomes two independently backed lines, beginning at x=32px and y≈245px. Each visible line occupies roughly 40px of height. The fragments are more heavily cropped. No people are visible in this particular mobile opening frame; this does not establish that they are permanently disabled on mobile.

The human scene and geometric fragments are the expressive material. The interface around them stays simple and comparatively small.

### Recruitment CTA Pair

**Role:** separate direct vacancy browsing from a lower-commitment conversation.

The hero has two equally sized pills. On desktop, `カジュアル面談` is left and `求人一覧` is right, centered together around y=796px. Each is 260px wide and 50px high.

On mobile, their visual order reverses: black `求人一覧` appears first at y≈544px, followed by outlined `カジュアル面談` at y≈610px. Both span the 326px content width, with a 16px gap.

Header versions are smaller, at 46px high with 13px labels. Footer desktop versions are about 308px wide and 45–47px high. The recurring distinction is solid black versus outlined white, not two competing accent colors.

The destinations are directly evidenced links to `/recruit/midcareer/jobs/` and `/recruit/midcareer/casualinterview/`. Destination-page behavior was not tested.

### Circular Direction Controls

**Role:** signal progression through the page and entry into a topic.

The opening down control is a blue circle with a fine white arrow. Its desktop diameter is 64px, with 32px right and bottom clearances. Mobile uses 48px and 20px clearances.

Topic links combine a blue text label, `詳しくみる`, with a 64px desktop or 48px mobile circle containing a right arrow. The combined rectangles are 162px and 136px wide respectively. An approximately 18px text-to-circle gap reproduces these proportions.

The footer has a separate, small upward-arrow button. Its measured element box is only 16 × 16px; a larger invisible hit area is recommended. Arrow directions suggest intended navigation, but no activation result or scroll duration was supplied.

### Introductory Statement Sequence

**Role:** articulate the company’s recruitment proposition before the topic directory.

Two substantial Japanese statements precede CHRO Message. Their desktop text is bold at 24px with 36px line height and `0.07em` tracking. They begin at x=72px, at document y-coordinates around 2232px and 4188px.

Mobile reduces these statements to 14px with 21px line height. Their measured left position is approximately 20.55px, which differs from the 32px inset used by most later content. Preserve this distinction when matching the evidence; it is not a universal page gutter.

The large intervals establish a staged scroll narrative. The measurements alone do not reveal whether text or scene layers are pinned, transformed, or scrubbed by scrolling.

### Topic Feature Section

**Role:** introduce a recruitment topic and route the visitor to a dedicated page.

The repeated content anatomy is:

1. A blue English section heading with a short red underline.
2. A bold black Japanese subtitle.
3. A concise black description at 14px with double line spacing.
4. A blue detail link with a circular arrow.
5. Scene imagery where visible.

The five evidenced topics are CHRO Message, Business, Culture, Member, and Interviews. The DOM confirms consistent typography and text widths, but only Business has a supplied desktop middle-section screenshot.

In that Business view, the copy starts at x=72px. A square-cornered scene occupies approximately x=374–1066px and y=269–731px. The detail link sits far right at x≈1206px, vertically centered near y=500px.

The scene and copy are layered: the copy column extends to x≈483px, overlapping the image’s leftmost region by approximately 109px. This is not a conventional set of three isolated columns. Retain the visual relationship while checking that text remains readable over the artwork.

The blue `Business` title uses 48px type. Its red rule is visually about 32 × 4px. A 64px clearance separates the heading box from the Japanese subtitle, followed by 32px before the description.

Mobile DOM geometry shows a 326px-wide copy column, 36px English headings, and a right-aligned detail link below the description. The exact mobile image placement is not visually verified.

### Job Group and Preview Card

**Role:** turn the recruitment story into actionable vacancy discovery.

The jobs area groups openings into business, engineering/research, corporate, and creative roles. Counts in the capture are 58, 26, 10, and 12 respectively. These are dated content values, not permanent design tokens.

A desktop group places its category heading and count at the left, with a `More` link and circular arrow toward the right. Preview cards occupy three equal columns beneath it. Although the group container reports two grid columns in the DOM, the measured card rectangles establish the visible three-card arrangement.

Each card is a full linked surface with:

- A small black category label at 12px, weight 700.
- A blue job title at 18px, weight 700, line height 27px.
- A compact black summary at 12px, line height 21px.
- One or more location labels below the summary.

Cards use a 5% blue fill, 24px corners, and `24px 32px` padding. There is no observed image, badge cluster, or raised shadow inside them. Height varies by group and content; do not enforce one universal height from a single example.

Preview links point to vacancy records on `open.talentio.com`. The `More` links point to the site’s general jobs page. No filtering or external application behavior was tested.

On mobile, the cards remain side by side: x=32, 360, and 688px, each 312px wide. This establishes horizontal-track geometry with a 16px gap. Swipe behavior, clipping, snapping, and carousel controls were not supplied. A native horizontal scroller is a recommended implementation, not a verified source mechanism.

The corporate group has a count and `More` link but no preview cards in either supplied extract. That does not imply there are no corporate openings.

### Recruitment Footer

**Role:** provide a final recruitment invitation and a structured directory.

Desktop uses a large pale blue field with the recruitment statement on the left and two CTA pills on the right. Below the CTA region, five navigation groups cover business, people, events, culture, and FAQs. Group labels use bold 16px type; child links use 12px text.

The footer deliberately leaves a broad open area before its legal and social utility row. Larger human figures rise from the bottom edge, with portions cropped by the frame.

Mobile becomes a much taller, single-column directory. Primary links are mostly 20px, while retained child links are 16px and indented 40px. Business, event, and FAQ child links visible on desktop are absent from the supplied mobile rendered link list. People and culture retain their child links. The desktop footer CTA pair is also absent from the mobile rendered evidence.

Legal links and social destinations form separate vertical lists. Copyright sits toward the right near the final social link, followed by the small up arrow. A row of miniature people occupies the bottom of the mobile footer.

The captured desktop utility row uses white text against the pale rendered footer and appears low contrast. Mobile utility text is measured black and is clearly more legible. Preserve this as an observed issue; use dark utility text in a new implementation unless a verified darker background is present.

## Tokens — Motion & Interaction

| Treatment | Supplied value or evidence | What is established |
| --- | --- | --- |
| Header visibility | `opacity 0.2s linear` | An explicit opacity transition is declared |
| Logo visibility | `opacity 0.2s linear, visibility 0.2s linear` | Both properties have declared transitions |
| Desktop navigation labels | `color 0.2s linear` | Color changes are intended to transition |
| CTA pills | Background, border, and color each `0.2s linear` | A consistent 200ms feedback vocabulary |
| Job cards | `background-color 0.2s linear` | Card fill can transition |
| Opening down control | Opacity and visibility, each `0.2s linear` | Visibility changes are declared |
| Scene animation | No timeline supplied | Movement speed, loop, and trigger remain unknown |
| Topic scroll choreography | Long section geometry | Pinning and scroll-linked interpolation remain unverified |
| Mobile menu | Button and menu subtree present | Opening, closing, focus, and dismissal were not exercised |
| Mobile job rail | Offscreen horizontal card coordinates | Horizontal arrangement is measured; gesture behavior is not |

Many sampled elements report `animation: none`. This does not establish that the artwork is static: motion can occur on unsampled descendants or in script-rendered graphics. Likewise, a generic computed `transition: all` without a supplied duration is not evidence for a particular timed effect.

The original custom properties include `--canvas-scale-target: 0.48`, but a variable name does not establish a rendering library or a 48% scaling rule. Do not claim Three.js, WebGL, parallax, or a specific animation engine from this evidence.

For an adaptation, preserve the verified 200ms linear color feedback. Add scene motion only after defining and testing it separately. Keep an equivalent static scene available.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Document | Nearly white `#fbfbfb` | Neutral reading surface |
| Opening scene | Pale gray, estimated `#ebebeb` | Spatial field for people and geometry |
| Desktop header | White capsule | Persistent navigation separated by shape |
| Hero message | Solid black, square corners | Concentrated contrast around the recruitment copy |
| Recruitment actions | Black fill or white fill with a thin black outline | Distinguish primary and secondary routes |
| Detail controls | Blue circles with white arrows | Repeated exploration affordance |
| Job cards | Transparent blue tint, 24px corners | Group practical information without strong elevation |
| Footer | Pale blue, estimated `#eff8fd` | Close the narrative and house the directory |

There is no evidenced general-purpose UI shadow system. The people’s directional ground shadows belong to the artwork and are important to its sense of scale. Preserve the distinction between scene lighting and interface elevation.

## Imagery

The visible imagery resembles a sparse architectural model populated by small blue-gray people. Figures have simplified, softly shaded bodies, ordinary clothing silhouettes, and walking or standing poses. They are human enough to imply encounters without becoming detailed portraits.

In the desktop opening, people occupy a relatively small portion of the viewport and cast long shadows toward the right. Red and blue shapes are hard-edged and rectilinear, with fragments cut off by the viewport boundary. Their geometry contrasts with the soft modeling of the people.

The Business scene uses many fine red and blue rectangular outlines arranged into a curved, receding structure. Small figures appear below it on a gray ground. The geometry is dense in one region and dissolves into finer lines elsewhere.

The footer reuses the people motif with different scale and framing. Desktop figures are larger and cropped at the bottom; mobile shows a small group close to the bottom edge. Do not reproduce both states by stretching the same image indiscriminately.

### Observed Asset References

No original asset URLs, model files, video sources, or image manifests were supplied. The inventory below describes visible material without inventing filenames.

| Asset or graphic | Observed use | Implementation guidance |
| --- | --- | --- |
| Sansan wordmark with red underline | Desktop and mobile header | Use an authorized logo asset; do not recreate it as ordinary italic text |
| Miniature people and ground shadows | Desktop opening and both footers | Preserve small scale, blue-gray shading, and directional shadows |
| Red and blue fragments | Opening scene | Keep hard edges, asymmetry, and intentional viewport cropping |
| Curving rectangular line structure | Desktop Business scene | Preserve the fine line density and central composition |
| Down and right arrows | Circular navigation controls | Use simple fine strokes with generous internal clearance |
| Menu glyph | Mobile blue circle | Match the small white horizontal strokes visible in the capture |

The actual scene-rendering technology is unknown. Authorized still imagery can reproduce a settled state; animation or real-time rendering requires a separate specification. Do not substitute unrelated office stock photography for the evidenced scene language.

## Layout & Responsive Behavior

### Desktop: Long Stages and a Broad Composition

The main desktop content width is 1296px, from x=72 to x=1368. The 410.66px copy and job-card width matches one third of that width after two 32px gaps.

The document allocates approximately 6000px before CHRO Message. CHRO Message, Business, Culture, and Member each have measured section heights of 2001px. Interviews occupies 1000px. These dimensions support a deliberately extended narrative, but they should not be copied as empty spacers without understanding the missing motion behavior.

The Business screenshot presents one settled, nearly viewport-sized composition within that longer section. The persistent header, left copy, central scene, and far-right arrow distribute attention across the page rather than concentrating everything in a narrow reading column.

### Mobile: Reflowed Content and a Horizontal Job Track

Mobile does more than shrink the desktop composition:

- The white header capsule becomes separate logo and menu controls.
- The hero headline splits into two fitted black strips.
- The vacancy CTA moves above the casual-interview CTA.
- Topic copy uses a 326px column and 36px headings.
- Detail links sit below descriptions and align right.
- Topic sections become roughly 719–747px tall, with 128px top padding.
- Job cards retain substantial width and extend horizontally beyond the initial card.
- The footer becomes a tall directory with larger links and fewer visible child groups.

The first topic begins at document y=4232px on mobile, compared with y=6000px on desktop. The jobs section begins around y=7920.56px, compared with y=15404px. The shorter total mobile document is therefore not caused solely by smaller typography.

No intermediate viewport or exact breakpoint query was supplied. Any breakpoint used in an adaptation must be labeled as a recommendation.

### Original Viewport Variables

| Original property | Desktop value | Mobile value |
| --- | --- | --- |
| `--vh` | `10px` | `8.44px` |
| `--initial-vh` | `10px` | `8.44px` |
| `--vw` | `14.4px` | `3.9px` |
| `--aspect` | `1.44` | Approximately `0.4620853` |
| `--larger-vh` | `10px` | `10px` |
| `--canvas-scale-target` | `0.48` | `0.48` |

These are observed values, not recovered formulas. In particular, the unchanged mobile `--larger-vh` does not establish its update logic. For a new implementation, use modern viewport units and test browser-toolbar changes rather than assuming the original variable lifecycle.

## Do’s and Don’ts

### Do

- Preserve the balance of large empty fields and small human figures.
- Use measured `#004e98` for blue text and navigational emphasis.
- Keep red confined to geometric accents and short rules.
- Give the recruitment headline fitted, square-cornered black backing.
- Retain both recruitment actions and their distinct solid/outline treatments.
- Preserve the observed mobile CTA order.
- Pair English topic headings with Japanese subtitles and restrained descriptions.
- Keep the desktop scene, copy, and detail link spatially separated while allowing the evidenced overlap.
- Use pale 24px-radius cards for practical job information.
- Respect the measured mobile job-track geometry.
- Treat opening, topic content, jobs, and footer as different density zones.
- Keep motion claims separate from static screenshot observations.

### Don’t

- Don’t turn every topic into a boxed feature card.
- Don’t fill the opening’s empty space with extra copy, badges, or decorative panels.
- Don’t enlarge the miniature people into dominant character illustrations.
- Don’t make the main recruitment button red or blue by default.
- Don’t round the hero’s black text strips.
- Don’t replace scene shadows with a generic UI elevation system.
- Don’t interpret mobile offscreen cards as a vertical list.
- Don’t interpret hidden navigation DOM as an observed open menu.
- Don’t hardcode captured vacancy counts as permanent content.
- Don’t treat absent corporate teaser cards as proof of zero vacancies.
- Don’t reproduce low-contrast white footer utilities without checking their rendered background.
- Don’t invent animation timing, asset paths, production credits, or font-loading results.

## Recommended Implementation Additions

These recommendations are improvements or implementation choices, not verified original features:

- Give the logo link, menu button, down arrow, and up arrow explicit accessible names. The supplied extract does not establish their accessible names.
- Provide a meaningful page heading and a coherent heading hierarchy. The sampled original H1 contains the logo, while the opening message is a paragraph.
- Implement menu state with `aria-expanded`, an associated panel, keyboard operation, and focus restoration. If the panel is modal, implement appropriate modal focus handling.
- Keep visual order and keyboard order understandable when reversing the mobile recruitment actions; CSS reordering alone does not change focus order.
- Use dark desktop footer utility text on the pale footer surface.
- Increase the up-arrow hit area to at least 44 × 44px while retaining the small glyph.
- Make the mobile job track keyboard reachable and independently scrollable. Offer a clear way to reach all cards without relying on an undocumented gesture.
- Keep decorative scene layers outside the accessibility tree and prevent them from intercepting pointer events.
- Offer reduced-motion and static-scene behavior. Script-rendered motion needs explicit handling in addition to CSS media queries.
- Prevent the persistent mobile header from obscuring footer links, using suitable spacing or a readable scrolled-header treatment.
- Test larger text, long role titles, narrow screens, landscape phones, and the absence of the declared webfont.
- Keep jobs and recruitment destinations available when decorative scene rendering fails.

## Agent Prompt Guide

### Quick Color Reference

- Page: measured `#fbfbfb`.
- Headings, job titles, detail labels: measured `#004e98`.
- Primary recruitment action and hero backing: measured `#000000`.
- Reversed labels and secondary CTA surface: measured `#ffffff`.
- Job cards: measured `rgba(0, 78, 152, 0.05)`.
- Scene gray: approximate `#ebebeb`.
- Red accents: approximate `#e60020`.
- Footer field: approximate `#eff8fd`.

### Overall Prompt

“Create a Japanese corporate recruitment homepage with the spatial restraint of the supplied Sansan reference. Use a nearly white document, a pale gray opening scene, small blue-gray people with long ground shadows, and sparse red and blue geometric fragments. Place a modest white Japanese headline on a fitted black strip. On desktop, use a white capsule header with a compact logo, Japanese navigation, and black/outlined recruitment pills. Build spacious topic sections with 48px blue English headings, short red rules, 18px Japanese subtitles, 14px descriptions, central scene imagery, and blue circular arrow links. Follow with pale blue job cards and a large pale blue directory footer. On mobile, use a logo plus circular menu button, two black headline strips, vacancies above casual interviews, 36px topic headings, and a horizontal job track. Treat imagery and motion as separately supplied assets.”

### Example Component Prompts

1. **Desktop header:** “Create an approximately 82px-high white capsule, inset 32px horizontally and 16px from the top. Put a 75px-wide logo on the left and compact 16px bold Japanese navigation on the right. Finish with 46px-high outlined casual-interview and black vacancy pills. Use no prominent shadow.”
2. **Hero:** “Compose a pale gray 1440 × 1000 opening with a fitted black message strip around x=127, y=365. Use 34px white bold Japanese text, miniature blue-gray people toward the lower right, and cropped red/blue fragments around the edges. Center two 260 × 50px recruitment pills near y=796.”
3. **Business feature:** “Place blue 48px ‘Business’ text and a short red rule at the left of an open desktop scene. Below it, add a bold 18px Japanese subtitle and 14px text at 28px line height. Center a roughly 692 × 462px geometric scene behind part of the copy region. Put a labeled 64px blue arrow circle near the right edge.”
4. **Job card:** “Create a pale blue-tinted linked card with 24px corners and 24px vertical, 32px horizontal padding. Stack a 12px black category, an 18px bold blue role title, a 12px summary at 21px line height, and location text. Desktop cards are about 411px wide; mobile cards are 312px wide with 16px horizontal gaps.”
5. **Mobile footer:** “Create a tall pale blue footer with 32px side insets, bold 20px main links, 16px child links indented by 40px, separate 12px legal and social lists, and a small copyright/up-arrow row. Anchor a modest group of blue-gray miniature people near the bottom. Keep utility text dark and readable.”

## Quick Start

### CSS Custom Properties

This is a recommended static adaptation. It retains measured colors, typography, card geometry, and CTA dimensions. Estimated artwork colors remain estimates. The `64rem` breakpoint and viewport-relative hero positioning are adaptation choices, not recovered source rules.

The feature CSS represents a settled composition in ordinary document flow. It does not reconstruct the original long scroll timeline. Mobile feature artwork is placed below its detail link as a recommended arrangement because that part of the mobile page was not visually supplied.

Suggested anatomy: a `.site-header` containing brand, navigation, actions, and menu control; a `.hero` containing scene, title lines, actions, and down control; a `.feature-stage` containing artwork, copy, and detail link; and a `.job-group` containing its heading, card track, and `More` link. Supply authorized graphics separately; no asset URLs are assumed below.

```css
:root {
  /* Measured interface colors */
  --color-page: #fbfbfb;
  --color-blue: #004e98;
  --color-ink: #000;
  --color-white: #fff;
  --color-card: rgb(0 78 152 / 5%);

  /* Visual approximations for artwork and its surroundings */
  --color-scene: #ebebeb;
  --color-red: #e60020;
  --color-footer: #eff8fd;

  /* Source-declared families; font loading is separate */
  --font-en: 'sofia-pro', 'Helvetica Neue';
  --font-ja: '游ゴシック体', YuGothic, '游ゴシック Medium',
    'Yu Gothic Medium', '游ゴシック', 'Yu Gothic',
    'Noto Sans CJK JP', 'ヒラギノ角ゴ Pro W3',
    'Hiragino Kaku Gothic Pro';
  --font-body: var(--font-en), var(--font-ja), sans-serif;

  --page-gutter: 5vw;
  --space-small: 16px;
  --space-card: 24px;
  --space-grid: 32px;
  --space-section: 64px;
  --space-stage: 128px;
  --radius-card: 24px;
  --radius-pill: 999px;
  --control-size: 64px;
  --motion-feedback: 200ms linear;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 112px; }
body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-page);
  font-family: var(--font-body);
  font-size: 16px;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
.container { margin-inline: var(--page-gutter); }

.site-header {
  position: fixed;
  z-index: 30;
  inset: 16px 32px auto;
  display: flex;
  align-items: center;
  min-height: 82px;
  padding: 18px 16px 18px 40px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
}
.brand { display: block; width: 75px; margin-right: auto; }
.brand img { display: block; width: 100%; height: auto; }
.desktop-nav, .header-actions {
  display: flex;
  align-items: center;
}
.desktop-nav { gap: 24px; font-size: 16px; font-weight: 700; }
.desktop-nav a, .desktop-nav button {
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-decoration: none;
  transition: color var(--motion-feedback);
}
.header-actions { gap: 8px; margin-left: 40px; }
.menu-toggle { display: none; }

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 10px 12px 12px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  background: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--motion-feedback),
    border-color var(--motion-feedback), color var(--motion-feedback);
}
.cta--jobs { color: var(--color-white); background: var(--color-ink); }
.header-actions .cta {
  min-height: 46px;
  padding: 15px 24px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .025em;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  background: var(--color-scene);
}
.hero .scene {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-title {
  position: absolute;
  top: 36.5%;
  left: 8.785%;
  display: flex;
  margin: 0;
  padding: 10px 12px 12px;
  color: var(--color-white);
  background: var(--color-ink);
  font-size: clamp(24px, 2.343vw, 33.7335px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}
.hero-line { display: block; }
.hero-actions {
  position: absolute;
  top: 79.573%;
  left: 50%;
  display: flex;
  gap: 33.72px;
  transform: translateX(-50%);
}
.hero-actions .cta { width: 260px; }

.circle-control {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--control-size);
  height: var(--control-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--color-white);
  background: var(--color-blue);
}
.circle-control svg { width: 24px; height: 24px; }
.scroll-cue { position: absolute; right: 32px; bottom: 32px; }
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: var(--color-blue);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
}

.feature-stage {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-inline: var(--page-gutter);
}
.feature-copy {
  position: relative;
  z-index: 1;
  width: calc((100vw - 2 * var(--page-gutter) - 64px) / 3);
}
.section-title {
  position: relative;
  margin: 0 0 64px;
  padding-bottom: 20px;
  color: var(--color-blue);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}
.section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 4px;
  background: var(--color-red);
}
.feature-subtitle {
  margin: 0 0 32px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.feature-description { margin: 0; font-size: 14px; line-height: 2; }
.feature-art {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 48vw;
  aspect-ratio: 3 / 2;
  transform: translate(-50%, -50%);
  object-fit: contain;
  background: var(--color-scene);
}
.feature-stage > .arrow-link {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: var(--page-gutter);
  transform: translateY(-50%);
}

.jobs { padding-block: 128px 256px; }
.jobs-title {
  margin: 0;
  color: var(--color-blue);
  font-size: 32px;
  line-height: 1;
}
.job-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  margin-top: 64px;
}
.job-group-title {
  grid-column: 1;
  align-self: center;
  margin: 0;
  font-size: 24px;
  line-height: 1.5;
}
.job-more { grid-column: 2; grid-row: 1; justify-self: end; }
.job-track {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  min-width: 0;
}
.job-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 189px;
  padding: 24px 32px;
  border-radius: var(--radius-card);
  background: var(--color-card);
  text-decoration: none;
  transition: background-color var(--motion-feedback);
}
.job-category { margin: 0 0 8px; font-size: 12px; font-weight: 700; line-height: 1; }
.job-title { margin: 0 0 16px; color: var(--color-blue); font-size: 18px; font-weight: 700; line-height: 1.5; }
.job-description { margin: 0; font-size: 12px; line-height: 1.75; }
.job-location { margin: auto 0 0; padding-top: 16px; font-size: 12px; line-height: 1.75; }

.site-footer {
  position: relative;
  padding: 177px var(--page-gutter) 160px;
  background: var(--color-footer);
}
.footer-top { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.footer-message { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.5; letter-spacing: .05em; }
.footer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.footer-actions .cta { min-height: 47px; font-size: 13px; }
.footer-nav { display: flex; justify-content: flex-end; gap: 32px; margin-top: 80px; }
.footer-group-title { margin: 0 0 12px; font-size: 16px; font-weight: 700; line-height: 1.8; }
.footer-group-links { display: grid; gap: 12px; }
.footer-group-links a { font-size: 12px; line-height: 1.8; text-decoration: none; }
.footer-utilities {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  margin-top: 128px;
  color: var(--color-ink); /* Recommended contrast improvement */
  font-size: 12px;
  line-height: 1.8;
}
.footer-people { position: absolute; bottom: 0; left: 0; width: 100%; pointer-events: none; }

/* Recommended feedback endpoints; original endpoints were not supplied. */
@media (hover: hover) {
  .desktop-nav a:hover, .desktop-nav button:hover { color: var(--color-blue); }
  .cta:hover { border-color: var(--color-blue); }
  .job-card:hover { background: rgb(0 78 152 / 9%); }
}
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 4px;
}

/* Recommended breakpoint, not a recovered source media query. */
@media (max-width: 64rem) {
  :root { --page-gutter: 32px; --control-size: 48px; }
  html { scroll-padding-top: 88px; }
  .site-header {
    inset: 20px 16px auto 34px;
    min-height: 48px;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }
  .brand { width: 66px; }
  .desktop-nav, .header-actions { display: none; }
  .menu-toggle { display: inline-grid; }
  .hero-title {
    top: 29%;
    left: 32px;
    flex-direction: column;
    align-items: flex-start;
    max-width: calc(100% - 32px);
    padding: 0;
    background: transparent;
    font-size: 24px;
  }
  .hero-line { padding: 8px; background: var(--color-ink); }
  .hero-actions { top: 64.477%; width: calc(100% - 64px); flex-direction: column; gap: 16px; }
  .hero-actions .cta { width: 100%; }
  .hero-actions .cta--jobs { order: -1; }
  .scroll-cue { right: 20px; bottom: 20px; }
  .arrow-link { font-size: 14px; }
  .feature-stage { flex-direction: column; align-items: stretch; min-height: 0; padding-top: 128px; }
  .feature-copy { order: 0; width: 100%; }
  .section-title { font-size: 36px; }
  .feature-stage > .arrow-link { position: static; order: 1; align-self: flex-end; margin-top: 32px; transform: none; }
  .feature-art { position: static; order: 2; width: 100%; margin-top: 32px; transform: none; }
  .jobs { padding-block: 64px 128px; }
  .jobs-title { font-size: 24px; line-height: 1.2; }
  .job-group-title { font-size: 20px; }
  .job-track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(312px, 100%);
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    padding-block: 4px;
  }
  .job-card { min-height: 237px; scroll-snap-align: start; }
  .job-more { grid-row: 3; }
  .site-footer { padding-top: 64px; }
  .footer-top { display: block; }
  .footer-message { font-size: 13px; }
  .footer-actions { display: none; }
  .footer-nav { display: grid; justify-content: stretch; gap: 32px; margin-top: 64px; }
  .footer-group-title { font-size: 20px; line-height: 1.5; }
  .footer-group-links { gap: 24px; padding-left: 40px; }
  .footer-group-links a { font-size: 16px; }
  .footer-desktop-only { display: none; }
  .footer-utilities { display: grid; gap: 64px; margin-top: 64px; }
}

/* Recommended fallback for short viewports and enlarged text. */
@media (max-height: 700px) {
  .hero { display: flex; flex-direction: column; gap: 64px; padding: 160px 32px 120px; }
  .hero-title { position: static; align-self: flex-start; max-width: 100%; flex-wrap: wrap; }
  .hero-actions { position: static; align-self: center; max-width: 100%; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .cta, .job-card, .desktop-nav a,
  .desktop-nav button { transition: none; }
  .job-track { scroll-snap-type: none; }
  /* Pause any separately implemented scene animation in its controller. */
}
```

The CSS does not implement dropdown state, menu focus management, scene rendering, or arrow activation. Use real links for destinations and buttons for state changes. Verify the two reference viewports before refining unobserved intermediate widths.

### Tailwind v4 Token Mapping

Optional aliases for an implementation that already uses Tailwind v4. This does not imply that the original page uses Tailwind. Define the variables above first.

```css
@theme inline {
  --color-page: #fbfbfb;
  --color-brand: #004e98;
  --color-ink: #000000;
  --color-card: rgb(0 78 152 / 5%);
  --color-scene: #ebebeb;
  --color-signal: #e60020;
  --color-footer: #eff8fd;

  --font-sans: var(--font-body);
  --text-caption: 12px;
  --text-copy: 14px;
  --text-subtitle: 18px;
  --text-topic-mobile: 36px;
  --text-topic: 48px;

  --spacing-page: var(--page-gutter);
  --spacing-card: 24px;
  --spacing-grid: 32px;
  --spacing-section: 64px;
  --spacing-stage: 128px;

  --radius-card: 24px;
  --radius-pill: 999px;
}
```

## Sources & Evidence

- **Inspected original and final page:** [Sansan Midcareer Recruitment](https://jp.corp-sansan.com/recruit/midcareer/). The supplied browser record reports HTTP 200 with no URL change.
- **Capture timestamp:** `2026-09-22T21:25:57.225Z`, equivalent to September 23, 2026, 06:25:57.225 JST.
- **Desktop visual evidence:** three 1440 × 1000 captures showing the opening, Business section, and footer.
- **Mobile visual evidence:** two 390 × 844 captures showing the opening and lower footer.
- **Rendered evidence:** page title, text, link destinations, element rectangles, computed typography, colors, padding, radius, transitions, and original custom-property values at both viewports.
- **Identity evidence:** the original page title names Sansan株式会社, and its `© Sansan, Inc.` footer link points to [the corporate homepage](https://jp.corp-sansan.com/).
- **Capture procedure:** the supplied record describes an initial observation of at least five seconds, bounded load/layout/image readiness checks, and traversal through intermediate scroll positions. Perpetual animations were temporarily paused during readiness checks and resumed afterward. These procedures do not establish complete animation behavior or semantic completeness.
- **Limitations:** no click or hover recordings, expanded menu capture, asset manifest, font-load verification, exact breakpoint rules, scene timeline, or source script inspection was supplied. SharedWorkers and service workers were disabled during capture. Mobile middle-section imagery is not visually documented. Linked destinations were recorded but not inspected for this reference.

This document describes the supplied current-page evidence. Measured geometry, visual approximations, and recommended implementation choices are identified separately.