# Nealle RECRUIT — Style Reference

> An airy recruitment site where rounded workplace photographs sit across a pale blue field, anchored by confident black typography.

**Original URL:** [https://jobs.nealle.com/](https://jobs.nealle.com/)
**Final URL:** [https://jobs.nealle.com/](https://jobs.nealle.com/) — HTTP 200; unchanged URL.
**Theme:** light surfaces, pale blue gradients, charcoal controls, and a charcoal footer. No alternate theme was evidenced.
**Inspected:** supplied evidence retrieved September 17, 2026 at 05:04 JST; exact timestamp `2026-09-16T20:04:08.556Z`.
**Viewports:** desktop `1440 × 1000` and mobile `390 × 844` CSS pixels.
**Scope:** the current recruitment homepage. Visual captures cover the desktop opening, Casual Talk section, and footer, plus the mobile opening and footer. Rendered DOM and computed styles cover the longer homepage, including work categories, recruitment information, workplace information, editorial content, magazine links, and company presentations. Linked pages and expanded interaction states were not inspected.

Nealle uses photography, space, and scale to introduce its workplace before asking visitors to apply. The opening composition distributes photographs across the viewport at different sizes, with some images cropped by the screen edge and others visibly blurred. A subtle grain sits over a cool, nearly white background. The Japanese statement, “あらゆる未来が、発つ場所を。”, gives this dispersed imagery a strong horizontal anchor on desktop.

This is a recruitment website with a substantial information architecture: company purpose, job families, working conditions, employee stories, company decks, and two recurring recruitment routes. Large Termina section labels establish rhythm, while Japanese text provides the practical detail. The design alternates open photographic compositions with structured lists and grids. White rounded sections and a solid dark footer give the long page distinct chapters.

## How to Read This Reference

- **Measured** means a value was supplied by the rendered DOM or computed styles. Measurements use CSS pixels and are rounded where additional decimals would not help implementation.
- **Calculated** means a value was evaluated from a supplied custom-property expression. A declared token does not prove that every component uses it.
- **Estimated** means a dimension or treatment was read visually from a supplied original-page capture. Image dimensions, grain strength, and some border treatments fall into this category.
- **Recommended** means implementation guidance for a new build. Proposed breakpoints, accessibility additions, fallback lettering, and the Quick Start selectors are not original source code.
- The desktop document measured approximately `11,225px` high; the mobile document measured approximately `11,815px`. These describe the captured content state, not heights to hardcode.
- Text wrappers with `font-size: 0` occur around the logo, hero lettering, and composite links. Their visible children must be considered separately; zero is not their apparent type size.
- The two tested widths establish endpoint behavior. Tablet layouts, the exact breakpoint thresholds, and layouts wider than 1440px remain unverified.

## Tokens — Colors

### Default Palette

| Name | Value | Source token | Role and evidence |
| --- | --- | --- | --- |
| Charcoal | `#222222` | `--color-black` | Measured body text, filled actions, menu buttons, and footer background |
| White | `#ffffff` | `--color-white` | Measured reversed text and white action surfaces; also visible in the large recruitment sections |
| Mist gradient, left | `#f2f4f8` | First stop of `--color-bg-gradient-linear` | Near-white side of the main cool backdrop |
| Mist gradient, right | `#d8e9f8` | Last stop of `--color-bg-gradient-linear` | Pale blue side of the backdrop |
| Background fallback | `#eef3f8` | `--color-bg-gradient-start` | Additional declared background color; distinct from the linear gradient's first stop |
| Slate blue | `#bac5d8` | `--color-path` | Matches the broad recruitment-action band above the footer |
| Light gray | `#e0e2e4` | `--color-gray` | Declared neutral suitable for the fine separations visible around white sections; exact border binding was not supplied |

The supplied background expression is:

```css
linear-gradient(to right, #f2f4f8 0%, #d8e9f8 100%)
```

Keep this gradient quiet. The blue supports photography and atmosphere; charcoal carries the strongest interactive contrast. Most prominent recruitment buttons are charcoal or white rather than saturated blue.

### Supporting Source Colors

| Source token | Declared value | Interpretation |
| --- | --- | --- |
| `--color-hover-line` | `#016cdd` | Named hover-line accent; no hovered screenshot was supplied |
| `--color-blue-gradient-start` | `#016cdd` | Supporting blue gradient endpoint |
| `--color-blue-gradient-end` | `#014ea3` | Supporting deep blue endpoint |
| `--color-blue-gradient-radial` | `radial-gradient(50% 50% at 50% 50%, #016cdd 0%, #014ea3 100%)` | Declared supporting treatment; not a description of the resting hero |
| `--color-swup-gradient-start` | `#93c7ff` | Transition-related light blue token |
| `--color-swup-gradient-end` | `#016cdd` | Transition-related strong blue token |
| `--color-path-20`, `-40`, `-80` | `rgb(186 201 216 / 20%)`, `/ 40%`, `/ 80%` | Declared translucent colors; application was not established |

The translucent path colors use RGB `186, 201, 216`, while solid `#bac5d8` uses `186, 197, 216`. Preserve the supplied values if reproducing the tokens; the alpha variants are not simply opacity versions of the solid token.

## Tokens — Typography

### Japanese Body and Interface

**Measured family:** `YakuHanJPs, "Noto Sans JP", sans-serif`.

Body text uses weight `400`, line height `1.9`, and approximately `0.05em` tracking. At desktop this becomes `16px / 30.4px` with `0.8px` letter spacing. On mobile it becomes `15.0146px / 28.5277px` with `0.75073px` letter spacing.

This generous leading is important to the tone. Paragraphs remain relaxed even when their columns are narrow. The opening manifesto has a separate, larger scale and a `2` line-height ratio.

Navigation and buttons use the same Japanese stack, usually at weights `500` or `700`. Many small labels inherit the body's computed tracking rather than receiving a new proportional tracking value.

### English Section Labels

**Measured family:** `Termina, sans-serif`; the corresponding source variable is `--font-family-en`.

Major section labels use weight `600` and line height `1.2`. Their wide letterforms create visual breadth without heavy ornament. Work-family names such as Business, Products, and Corporate use the same family at weight `400`.

English labels and Japanese headings are distinct elements. The supplied DOM often places the large English label in a paragraph and the smaller Japanese title in an `h2` or `h3`. Preserve the bilingual hierarchy visually, while ensuring a useful heading outline in a new implementation.

### Logo and Hero Lettering

The logo link and hero statement wrapper both measure `font-size: 0`. The visible shapes are not explained by the wrapper's font declaration. Their exact child asset format and lettering font were not supplied.

- Desktop logo/recruit link box: approximately `166.53 × 40px`.
- Mobile logo/recruit link box: approximately `134.67 × 30.22px`.
- Desktop hero statement bounds: approximately `899.97 × 65.86px`, presented on one line.
- Mobile hero statement bounds: `330 × 88.73px`, presented on two lines with a measured `23px` wrapper gap.

Use the actual brand and statement artwork when available. A text approximation is acceptable for a prototype, but its font size should be labeled as a recommendation rather than an extracted value.

### Type Scale

| Role | Desktop measurement | Mobile measurement | Weight / treatment |
| --- | --- | --- | --- |
| Main body | `16 / 30.4px` | `15.01 / 28.53px` | Japanese stack, `400` |
| Opening manifesto | `25 / 50px` | `16.13 / 32.25px` | Japanese stack, `400` |
| Standard English section label | `60 / 72px` | `25.49 / 30.59px` | Termina, `600` |
| What We Do / Environment label | `75 / 90px` | `30.63 / 36.76px` | Termina, `600` |
| English category name | `24.99 / 29.99px` | `20.07 / 24.08px` | Termina, `400` |
| Japanese section heading | `16 / 30.4px` | `15.01 / 28.53px` | Usually `400` |
| Japanese category subtitle | `12 / 22.8px` | `12 / 22.8px` | `400` |
| Standard pill action | `14 / 17.5px` | `14 / 17.5px` | `500` |
| Desktop header action | `12 / 18px` | Not visible in the mobile header | `700` |
| Desktop opening navigation | `12 / 19.8px` | Hidden from the opening layout | `500` |
| Footer navigation | `12 / 22.8px` | `12 / 22.8px` | `500` |
| Bottom recruitment block | `18 / 21.6px` | `16.03 / 19.23px` | `500` |
| Magazine introduction title | `18 / 30.6px` | `17.01 / 28.92px` | `400` |
| Small notes and magazine descriptions | `12 / 22.8px` | `12 / 22.8px` | `400` |
| Presentation description | `14 / 26.6px` | `14 / 26.6px` | `400` |

The document root is `10px` at both supplied viewports. Do not transplant source rem values into a conventional 16px-root project without conversion. The Quick Start uses ordinary pixel-based fluid expressions and leaves the root size unchanged.

## Tokens — Spacing & Shapes

### Responsive Unit

The source exposes viewport-derived units equivalent to the following mathematical relationship:

```text
W = viewport width in CSS pixels
s = max(1440, W) / 1440
source --px  = 1px × s
source --rem = 1rem × s
```

At both inspected widths, `s = 1`. Fluid clamp expressions still change spacing and type between the two widths. Above 1440px, the declared units begin scaling; that wider behavior was not visually inspected.

Although `--max-width: 1440px` is declared, its name alone does not establish a hard maximum for the entire page.

### Spacing Scale

Values below are calculated from supplied custom properties, except where an element measurement is explicitly identified.

| Source token / use | At 1440px | At 390px | Practical role |
| --- | --- | --- | --- |
| `--spacing-xs` | `30px` | `20.14px` | Small content separation |
| `--spacing-sm` | `40px` | `30.14px` | Standard inset or separation |
| `--spacing-md` | `60px` | `40.28px` | Paragraph-to-action and group spacing |
| `--spacing-lg` | `80px` | `60.28px` | Large row padding and footer spacing |
| `--spacing-xl` | `120px` | `60.85px` | Larger compositional interval |
| `--spacing-xxl` | `200px` | `101.41px` | Major section entry spacing |
| `--grid-column-margin` | `40px` | `30.14px` | Main structural grid inset |
| `--grid-column-gutter` | `40px` | `15.35px` | Structural grid gutter |
| Work-card horizontal gap, measured | `20px` | Single column | Independent from the structural gutter |
| Work-card vertical separation, measured | Same-row cards | `60px` | Mobile spacing between job families |

### Border Radius

| Element | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Pill controls | `99990px` | `99990px` | Computed value; use a practical full-pill radius |
| Magazine cards | `20px` | `15px` | Measured |
| Bottom recruitment blocks | `20px` | `15px` | Measured |
| Casual Talk section top corners | `40px` | `30px` | Measured |
| Job Description section | Not established by its desktop wrapper | `30px` | Mobile wrapper measured |
| Large and small photographic crops | About `20px` | About `15–20px` | Visual estimate |
| Footer | Square | Square | Measured wrapper and visible captures |

### Layout Measurements

| Element | Desktop | Mobile |
| --- | --- | --- |
| Header horizontal extent | `x: 40`, width `1360px` | `x: 20.28`, width `349.44px` |
| Main structural grid | 14 tracks, approximately `60px` each, `40px` gutters | 6 tracks, approximately `42.16px` each, `15.35px` gutters |
| Work / Environment section inset | `70px` | `30.56px` |
| Work-card width | `420px` | `328.88px` |
| Standard action height | `59.5px` | `49.5px` |
| Compact desktop header action | `160 × 40px` | Not shown |
| Menu pill | `60 × 40px` in scrolled captures | `50 × 30px` |
| Bottom recruitment block | `620 × 101.58px` | `328.88 × 61.77px` |
| Footer height | `403.06px` | `655.16px` |

The 14-track grid is a compositional framework, not a rule that every card gap must be 40px. The three work cards use their own `420 / 20 / 420 / 20 / 420px` arrangement inside a 1300px region.

## Components

### Application Header

**Role:** identity, motion affordance, and persistent recruitment access.

At the desktop opening, the brand is aligned at `x: 40px`, with its link box beginning at `y: 40px`. The right group contains the small “モーション” control, a white outlined “カジュアル面談” pill, and a charcoal “募集要項” pill. The two recruitment links are each `160 × 40px`, separated by `10px`.

A five-link navigation list sits below the brand: company future, mission and values, working environment, work, and new-graduate recruitment. Its pale backing overlaps the photo composition and ends in a rounded lower-right corner. Link starts are about `35px` apart vertically.

In the supplied scrolled desktop captures, a charcoal menu pill occupies the top-left position while the two recruitment pills remain at top right. On mobile, the opening header shows the brand at left, the motion control toward the right, and a `50 × 30px` menu pill at the far right. The mobile footer capture retains the menu pill near the same screen position.

These captures support a persistent, changing header treatment. The exact scroll threshold, positioning mechanism, and opened menu appearance were not supplied. Text belonging to an expanded navigation exists in the DOM, but its presence does not establish how the overlay looks or behaves.

### Hero Photo Field

**Role:** introduces people and atmosphere through a deliberately uneven composition.

The desktop hero is a broad photographic field rather than a single full-width image. Approximate visible image geometry in the opening capture is:

| Image | Estimated desktop geometry | Composition |
| --- | --- | --- |
| Smiling colleague holding a laptop | `600 × 400px`, near `x: 174, y: 130` | Largest anchor, partly overlapped by the left navigation surface |
| Colleague working at a laptop | `420 × 280px`, near `x: 974, y: 370` | Strong lower-right counterweight |
| Outdoor workplace scene | `240 × 160px`, near `x: 874, y: 170` | Smaller upper-right accent |
| Additional edge photographs | Partially visible | Establish a composition extending beyond the viewport |
| Blurred image patches | Bounds and blur radius unmeasured | Add visual depth between the sharp photographs |

Use rounded image windows, natural crops, and broad empty intervals. The blur belongs to selected image layers; it is not a general frosted-glass treatment on controls.

On mobile, the same field is cropped and repositioned. The outdoor image is approximately `120 × 80px`; the laptop-working image is approximately `210 × 140px`. A large photograph extends off the left edge, leaving only a narrow part visible. This edge clipping is a defining feature of the supplied mobile composition.

### Hero Statement and Mission Route

**Role:** establishes the recruitment proposition and connects it to the company's values.

On desktop, the statement sits below the photo field at approximately `x: 80, y: 684`, with bounds near `900 × 66px`. A charcoal mission-and-values pill sits to its right at approximately `x: 1118, y: 691`, measuring `252 × 59.5px`.

On mobile, the statement moves above the images, starting at `x: 30, y: 130`. It breaks after “あらゆる未来が、”. The mission action is absent from this opening row and appears after the complete manifesto, at approximately document `y: 1064`.

Preserve this content-order change. Simply shrinking the desktop row would lose the mobile hierarchy and make the opening much denser.

### Opening Manifesto and About Us

**Role:** develops the connection between parking, mobility, and future possibilities before introducing the business.

The manifesto begins around document `y: 930` on desktop and `y: 609` on mobile. Desktop paragraphs occupy a `660px` box starting near `x: 140`; mobile paragraphs occupy `330px` starting at `x: 30`.

The supplied copy uses deliberate short lines and four paragraph groups. Desktop type is approximately `25px` with `50px` leading; mobile type is approximately `16.13px` with `32.25px` leading. Paragraph groups are separated by about `20px`.

The subsequent About Us content shifts right on desktop: its heading and 500px description column begin at `x: 800`. On mobile the heading and paragraph return to the main left edge, and the action is centered below. Keep this alternation between broad visual space and a restrained reading column.

### Bilingual Section Heading

**Role:** provides clear chapter markers throughout the long homepage.

The component combines a large Termina English label with a smaller Japanese heading. Standard English labels are `60px` on desktop; the larger What We Do and Environment labels reach `75px`. Japanese titles remain at body size.

The pairing is context-dependent. What We Do, Environment, and Contents place the Japanese title beside the English label on desktop. About Us and Casual Talk place it below. Mobile places these Japanese headings below the English line.

Job Description is especially responsive: the desktop English label occupies two lines in a `431.94 × 144px` box, while the mobile label fits on one line in a roughly `249.97 × 30.59px` box. A narrower viewport does not always mean more wrapping because the font and composition also change.

### Work Category Card

**Role:** routes visitors to Business, Products, or Corporate roles.

Each complete card is an anchor containing a number, a media region, an English category name, a Japanese subtitle, and a short list of relevant functions. Desktop cards measure `420 × 496.17px` and sit three across. The text group starts about `70px` inside each card; descriptive copy has a measured width near `249px`.

On mobile, each anchor is approximately `328.88 × 342.72px`, with the text aligned to its left edge and about `60px` between cards. English category names reduce from approximately `25px` to `20px`; Japanese subtitles remain `12px`.

The anchor background is transparent and its computed radius is zero. Do not interpret the whole component as a filled rounded card merely because its media may have rounded corners. Detailed work-card imagery was not included in the selected visual captures.

### Job Description Feature

**Role:** explains the breadth of open positions and directs visitors to recruitment details.

Desktop content is widely separated: the heading starts near `x: 140`, while the body and action begin near `x: 1040` in a `260px` column. The section wrapper measures 1000px high in the captured state, with `200px` top padding and `240px` bottom padding.

The mobile section becomes a white, single-column panel with `30px` corners, approximately `30px` horizontal insets, and about `101px` top padding. Heading, intervening visual content, body, note, and centered action are vertically sequenced. The primary paragraph becomes approximately `330px` wide. Its secondary note stays at `12px / 22.8px`.

Use these measurements to understand the rhythm, not to impose a fixed 1000px height on different content.

### Casual Talk Feature

**Role:** makes the lower-commitment recruitment route feel personal and approachable.

The desktop capture shows a white section with a faint boundary and rounded upper corners. Its composition has three photographs:

- A main portrait crop of a conversation participant, approximately `420 × 560px`, positioned around `x: 140`.
- A `160 × 160px` portrait near the upper right.
- A `160 × 160px` city view overlapping the main photograph's lower-right area.

The English heading begins near `x: 700`, rather than directly above the paragraph. The body begins farther right at `x: 940` and measures `360px` wide. A `192.20 × 59.5px` charcoal action sits below it, with approximately `60px` of separation after the paragraph.

This staggered arrangement is central to the section: image, title, text, and button do not share one simple left edge. Mobile DOM measurements show the heading and body returning to the same approximately 30px inset, with a centered `176.86 × 49.5px` action. The exact mobile arrangement of its photographs was not visually captured.

### Environment Link Row

**Role:** exposes Workstyle, Data, and FAQ as distinct information routes.

On desktop, each row spans `1300px` and measures approximately `340.5px` high. Computed padding is `80px` vertically. Its grid includes a narrow number column, a broad text region, a secondary region, and a narrow terminal column. The text begins near `x: 140`.

On mobile, each row is approximately `328.88 × 398.45px`, with `60.28px` vertical padding and a main-plus-terminal-column structure. English titles are approximately `20px`, Japanese subtitles `12px`, and descriptions use the mobile body scale.

The links point to `#style`, `#data`, and `#faq` on the environment page. They are navigation links, not evidenced in-place accordion controls. Adjacent row bounds are separated by approximately 1px, consistent with a fine separator; its exact border color was not measured.

### Editorial Content and More Control

**Role:** connects candidates to videos, interviews, and company explanations.

The supplied DOM contains six initial articles or videos. Desktop anchors form two rows of three at `420px` per column. Titles are inset about `40px` from each card's left edge and retain the relaxed body leading.

Mobile switches to a vertical list of approximately `329px` anchors, with `40px` between entries and content-dependent heights. Their internal six-track grids differ from the desktop block layout. The title begins about `92px` below each anchor's start; image dimensions and precise mobile image placement were not supplied.

The centered “さらに表示” control is a real button. It measures `166 × 61.5px` on desktop and approximately `150.77 × 51.5px` on mobile. Its post-activation content, loading state, and focus behavior were not tested.

### Magazine Cards and Company Presentations

**Role:** supplies deeper employer information near the end of the page.

The magazine area combines an introductory block with three white cards. Desktop cards are `280 × 190.78px`, have `20px` corners, and use approximately `35px 30px` padding. Mobile cards stack at approximately `288.59 × 169.19px`, use `15px` corners, and have roughly `25px 20px` padding. Their descriptions remain `12px / 22.8px`.

The two company presentations occupy `620px` columns at desktop positions `x: 70` and `x: 750`. On mobile they stack at approximately `329px` wide. The desktop lower-page capture shows presentation frames with embedded navigation, share, and fullscreen affordances. Separate external-view links sit beneath them.

The page links identify Speaker Deck destinations, but embedded controls were not exercised. Their gray overlays belong to the embedded presentation interface and should not become the general site's button style.

### Recruitment Action Band

**Role:** repeats the two main next steps just before the footer.

A full-width slate-blue band contains a white Casual Talk block and a charcoal Job Description block. On desktop, both measure `620 × 101.58px`, with `60px` between them and approximately `80px` vertical band padding. Each uses a left-aligned label and a small right-aligned arrow.

On mobile, the blocks stack with a `20px` gap inside approximately `30.56px` side insets. They become roughly `61.77px` high with `15px` corners and `16.03px` text. These broad rounded rectangles are visually distinct from the smaller pill actions used inside sections.

### Footer

**Role:** closes the recruitment journey with navigation, editorial access, and corporate links.

The footer is solid `#222` with white content. Desktop composition places the logo at `x: 40`, two navigation columns near `x: 840` and `1040`, and a white `160 × 40px` official-note pill at `x: 1240`. A thin horizontal divider separates this upper area from legal and corporate links below. Copyright is right aligned.

On mobile, the footer becomes substantially taller. The logo sits above two navigation columns beginning near `x: 20` and `x: 203`. The white note pill follows below. Corporate, security, and privacy links stack vertically beneath the divider, and copyright remains right aligned near the bottom.

Keep the footer's generous vertical rhythm. Its mobile structure is a purposeful navigation area, not a compressed desktop strip.

## Tokens — Motion & Interaction

The evidence contains precise transition declarations and visible controls, but no interaction recording. Treat declared timing separately from verified behavior.

| Treatment | Supplied value or observation | Confidence and limitation |
| --- | --- | --- |
| Header entrance opacity | `1.2s cubic-bezier(.18, .06, .23, 1) 1.6s` | Measured transition declaration on the header |
| Mission action entrance opacity | Same `1.2s` duration and `1.6s` delay | Measured on the mission action |
| Navigation underline | `background-size .3s cubic-bezier(.18, .06, .23, 1)` | Measured declaration; hovered result not captured |
| General duration tokens | `.15s`, `.3s`, `.4s`, `.6s` | Declared fast, default, slow, and slower values; component assignments incomplete |
| General easing | `cubic-bezier(.18, .06, .23, 1)` | Declared source easing |
| Transition hide | `.35s`, `cubic-bezier(.18, .06, .23, 1)` | Transition-related variables; route navigation not tested |
| Transition show | `.375s`, `cubic-bezier(.77, 0, .175, 1)` | Transition-related variables; route navigation not tested |
| Image scale tokens | `1.05` and `1.1` | Declared values; target elements and triggers not established |
| Motion control | “モーション” with a circular pause glyph | Visible on both opening captures; activation and persistence unverified |
| Menu control | Charcoal pill containing fine horizontal lines | Visible; expanded state unverified |
| More-content button | “さらに表示” | Present in the DOM; result unverified |

Static photographs placed at different depths do not establish parallax, a carousel, or a particular looping trajectory. Likewise, `animation: none` on sampled text and section wrappers does not prove that descendants or decorative layers are static.

For a new implementation, use the measured easing and restrained timing as a starting point. Keep content visible without animation, connect the motion control to actual decorative movement, and provide an immediate static state for reduced-motion preferences.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Opening canvas | Pale horizontal gradient with visible fine grain | Soft atmosphere around people and headline |
| Photograph windows | Sharp, rounded crops with selected blurred companion images | Human presence and compositional depth |
| Feature section | White with large rounded upper boundaries | Clear chapter change around recruitment information |
| General content links | Mostly transparent, using typography and image grouping | Maintains an open editorial layout |
| Magazine cards | White, moderately rounded | Groups secondary reading destinations |
| Recruitment band | Solid slate blue | Separates final actions from the footer |
| Footer | Solid charcoal with reversed text and a fine divider | Strong visual endpoint |

There is no visible general-purpose shadow elevation system. Most separation comes from spacing, surface color, borders, and photographic crops. The Casual Talk wrapper itself computes as transparent, so its visible white field should not be attributed to that one wrapper without inspecting its children or surrounding layers.

## Imagery

Photography shows colleagues conversing, working with laptops, and spending time in bright office and outdoor settings. Cool window light, green planting, pale interiors, dark clothing, and natural expressions reinforce the restrained palette. The city-view accent connects the workplace to a broader urban setting.

The opening balances landscape crops at several scales. Casual Talk changes the dominant shape to a tall portrait and adds small square companions. Repetition comes from corner treatment and color temperature, not from identical image dimensions.

### Observed Asset References

Original image URLs and filenames were not included in the supplied evidence. The following is a visual inventory, not a list of downloadable assets.

| Asset group | Observed use | Reproduction guidance |
| --- | --- | --- |
| Nealle wordmark and RECRUIT label | Header identity; white wordmark in footer | Supply real brand artwork; do not infer its lettering font from the wrapper |
| Japanese hero statement | One desktop line; two mobile lines | Preserve wording and line grouping; exact child artwork is unresolved |
| Workplace landscape photographs | Opening collage | Use individually positioned rounded crops rather than one flattened collage |
| Conversation portrait | Main Casual Talk image | Preserve a tall crop and an approachable eye-level viewpoint |
| Small portrait and city view | Casual Talk companions | Keep their smaller scale and offset placement |
| Grain | Visible over the cool opening background | Source technique and opacity unknown; use a subtle supplied texture in an adaptation |
| Direction and external-link icons | Actions, footer links, presentation links | Small, restrained line symbols; avoid making them dominant |
| Presentation covers | Embedded company decks | Treat as embedded content with its own visual language |

No image motion path, exact blur radius, image-loading strategy, or asset format was established. The Quick Start therefore provides containers and optional texture hooks rather than invented asset paths.

## Layout & Responsive Behavior

### Desktop Composition

The desktop layout alternates three different systems: a free-positioned opening collage, a fine structural grid for offset features, and straightforward grids or lists for practical information. The main structural grid has 14 tracks. Header and footer chrome generally use 40px side insets; work and editorial sections use 70px; certain reading columns begin at 140px.

Large sections repeatedly use about 200px of top spacing. This rhythm lets broad photography and sparse typography coexist without turning every area into a boxed component. Preserve the differences between section types instead of assigning a universal card layout to the whole page.

### Mobile Composition

| Region | Observed adaptation at 390px |
| --- | --- |
| Header | Brand, motion control, and menu remain; desktop recruitment pills and side navigation disappear |
| Hero | Statement moves above the images; image field remains edge-clipped and asymmetric |
| Mission action | Moves below all four manifesto paragraphs |
| Structural grid | Changes from 14 tracks to 6 |
| English headings | Reduce substantially; Japanese labels move below them |
| Work cards | Three columns become one vertical sequence |
| Feature copy | Offset desktop columns become approximately 330px reading columns |
| Standard actions | Height reduces from about 60px to 50px; many become centered |
| Editorial links | Three-column grid becomes a stacked list with changed internal geometry |
| Magazine cards | Stack with narrower padding and 15px corners |
| Company decks | Two columns become one |
| Final recruitment actions | Side-by-side blocks become stacked blocks |
| Footer | Two internal navigation columns remain, while identity, note link, legal links, and copyright move into vertical groups |

A recommended implementation breakpoint is `64rem`, but this is not an extracted source breakpoint. Validate intermediate widths, particularly the wide Termina headings and the crowded desktop header. The Quick Start caps some desktop dimensions for predictability; it does not reproduce the source's untested scaling above 1440px.

## Do’s and Don’ts

### Do

- Keep the pale `#f2f4f8 → #d8e9f8` gradient and charcoal `#222` as the main visual relationship.
- Use white and charcoal recruitment actions consistently across header, sections, and the final band.
- Combine large Termina labels with quieter Japanese titles and generously led body copy.
- Preserve the difference between free photographic compositions and structured information sections.
- Let selected photographs extend beyond the viewport while keeping readable content inside its gutters.
- Keep the mobile hero statement above the images and its mission link after the manifesto.
- Maintain the offset title and paragraph positions in desktop Casual Talk.
- Use approximately 20px image/card corners and much rounder section boundaries where evidenced.
- Retain both recruitment routes throughout the long page.
- Treat motion controls, navigation links, and load-more controls as functional interface elements.

### Don't

- Don't turn every section into an identical grid of filled cards.
- Don't make saturated blue the resting fill for all primary actions.
- Don't replace the photo field with a single generic full-width banner.
- Don't interpret blur in decorative imagery as permission to blur text or controls.
- Don't add strong shadows, glossy surfaces, or heavy image borders.
- Don't copy the zero font size from logo and hero wrappers as a visible type specification.
- Don't scale the desktop layout uniformly to create the mobile page.
- Don't assume a declared image-scale token proves a particular hover animation.
- Don't invent an expanded menu, photo motion path, or content-loading sequence from static evidence.
- Don't hardcode measured document or section heights when copy and assets may change.

## Recommended Implementation Additions

These recommendations are not verified features of the original page:

- Preserve the evidenced skip link and ensure it becomes visible on keyboard focus and reaches the main content.
- Give the menu and motion controls explicit accessible names and exposed state. The supplied extraction does not establish their accessible-name attributes.
- Increase effective hit areas around the small motion and menu controls to approximately 44px where practical, while retaining their compact visible shapes.
- Provide focus indicators that remain visible on both the pale page and charcoal footer.
- Respect `prefers-reduced-motion`, and make the motion toggle control all relevant decorative animation consistently.
- Keep photographic positioning independent from the logical reading order. Avoid using absolute positioning for primary copy.
- Provide meaningful alternatives for informative imagery; mark purely decorative duplicate and blurred images appropriately.
- Give embedded decks descriptive titles and retain their ordinary external-view links.
- Keep existing content visible during failures to load more articles, and announce successful additions accessibly.
- Check Japanese line breaking, 200% zoom, and heading overflow at intermediate widths. Do not solve overflow by hiding meaningful text.

## Agent Prompt Guide

### Quick Color Reference

- Main backdrop: `linear-gradient(to right, #f2f4f8, #d8e9f8)`.
- Text, primary pills, menu, footer: `#222222`.
- Feature surfaces and secondary actions: `#ffffff`.
- Final recruitment band: `#bac5d8`.
- Supporting rule token: `#e0e2e4`.
- Declared hover-line accent: `#016cdd`; keep it secondary to charcoal controls.
- Texture: very fine grain, with implementation and opacity treated as estimates.

### Overall Prompt

“Create a Japanese recruitment homepage inspired by Nealle RECRUIT. Use a very pale horizontal blue gradient, charcoal text, generous empty space, and rounded photographs of people working and talking. Build an asymmetric opening photo field with several image sizes, cropped screen-edge images, and a few blurred decorative companions. Place a broad Japanese statement below the desktop photos and above them on mobile. Use Termina for large English section labels and YakuHanJPs with Noto Sans JP for Japanese text. Alternate offset photographic features with practical work-category grids, workplace-information rows, editorial links, and company presentations. Repeat white Casual Talk and charcoal Job Description actions, then finish with a slate-blue action band and a spacious charcoal footer. Treat mobile as a recomposition with changed order and alignment.”

### Example Component Prompts

1. **Desktop opening:** “At 1440px, position a large 600 × 400 workplace photograph toward the left, a 420 × 280 photograph lower right, and a 240 × 160 outdoor photograph above it. Use approximately 20px corners, pale grainy blue space between images, a small left navigation panel, and compact white and charcoal recruitment pills at top right. Keep the headline and mission action below the image field.”
2. **Mobile opening:** “At 390px, use a 30px text gutter and a two-line Japanese statement above an edge-clipped photo field. Show a small landscape image near the center and a larger working portrait toward the right. Follow with short manifesto paragraphs at approximately 16px with double leading. Put the mission action after the full manifesto.”
3. **Casual Talk feature:** “Create a white desktop section with large rounded upper corners. Place a 420 × 560 portrait at left, a 160px square portrait high at right, and a 160px square city image overlapping the main portrait's lower-right edge. Put the 60px English title near the middle, then offset the 360px paragraph and charcoal pill farther right.”
4. **Work categories:** “Create three transparent linked modules for Business, Products, and Corporate. Include a category number, media, a 25px English category name, a 12px Japanese subtitle, and relaxed body copy. Use 420px desktop columns with 20px gaps. Stack them with 60px spacing on mobile and reduce English names to approximately 20px.”
5. **Recruitment band and footer:** “Use a slate-blue band with two broad rounded links: white Casual Talk and charcoal Job Description, each with a small right arrow. Stack them on mobile. Below, use a charcoal footer with a white wordmark, two compact navigation columns, a white editorial-link pill, a fine divider, and separate legal links.”

## Quick Start

### CSS Custom Properties

This is an implementation adaptation, not extracted source CSS. It preserves measured palette values, body typography, common action dimensions, and the main desktop/mobile relationships. Display-heading interpolation, the `64rem` breakpoint, fallback hero lettering, and unmeasured photographic details are recommendations. It keeps a conventional root font size.

Load the named fonts through the project's own font setup. Supply real logo, lettering, and photograph assets separately. The optional `--grain-image` hook defaults to no texture rather than requesting an invented file.

The header accepts `data-compact='true'` for a separately implemented scroll state. CSS alone does not open the menu, pause JavaScript animation, or load articles.

```css
:root {
  /* Measured palette and declared background gradient */
  --ink: #222222;
  --surface: #ffffff;
  --mist-left: #f2f4f8;
  --mist-right: #d8e9f8;
  --canvas: #eef3f8;
  --slate: #bac5d8;
  --rule: #e0e2e4;
  --accent: #016cdd;
  --page-gradient: linear-gradient(to right, var(--mist-left), var(--mist-right));
  --grain-image: none;

  /* Declared font families; font assets are supplied separately */
  --font-jp: YakuHanJPs, 'Noto Sans JP', sans-serif;
  --font-en: 'Termina', sans-serif;
  --body-size: clamp(15px, calc(14.648px + .094vw), 16px);
  --manifesto-size: clamp(16px, calc(12.831px + .845vw), 25px);
  --body-leading: 1.9;

  /* Recommended interpolation between measured display sizes */
  --section-size: clamp(25.5px, calc(12.7px + 3.286vw), 60px);
  --section-size-lg: clamp(30.6px, calc(14.14px + 4.226vw), 75px);

  /* Source-equivalent spacing through the inspected width range */
  --space-xs: clamp(20px, calc(16.479px + .939vw), 30px);
  --space-sm: clamp(30px, calc(26.479px + .939vw), 40px);
  --space-md: clamp(40px, calc(32.958px + 1.878vw), 60px);
  --space-lg: clamp(60px, calc(52.958px + 1.878vw), 80px);
  --space-xl: clamp(60px, calc(38.873px + 5.634vw), 120px);
  --space-xxl: clamp(100px, calc(64.787px + 9.39vw), 200px);
  --grid-gap: clamp(15px, calc(6.199px + 2.347vw), 40px);
  --grid-inset: var(--space-sm);

  /* Endpoint-fitted chrome and section insets */
  --chrome-inset: clamp(20px, calc(12.958px + 1.878vw), 40px);
  --section-inset: clamp(30px, calc(15.915px + 3.756vw), 70px);
  --radius-card: 20px;
  --radius-section: 40px;
  --radius-pill: 9999px;

  /* Declared timing tokens */
  --ease-main: cubic-bezier(.18, .06, .23, 1);
  --ease-show: cubic-bezier(.77, 0, .175, 1);
  --duration-fast: 150ms;
  --duration-default: 300ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;
  --hero-fade-duration: 1200ms;
  --hero-fade-delay: 1600ms;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  background-image: var(--page-gradient);
  font-family: var(--font-jp);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: var(--body-leading);
  letter-spacing: .05em;
}
button, input, textarea { font: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { cursor: pointer; }

/* Recommended focus and skip-link behavior */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 20px;
  color: var(--ink);
  background: var(--surface);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.site-header {
  position: fixed;
  z-index: 50;
  top: 40px;
  left: var(--chrome-inset);
  right: var(--chrome-inset);
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand { display: inline-flex; align-items: center; gap: 20px; }
.brand__logo { width: 90px; }
.brand__label { font-size: 10px; letter-spacing: 0; }
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  padding: 2px 6px;
  color: inherit;
  background: transparent;
  font-size: 11px;
}
.menu-toggle {
  display: none;
  place-items: center;
  width: 60px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--surface);
  background: var(--ink);
}
.site-header[data-compact='true'] .brand,
.site-header[data-compact='true'] .motion-toggle { display: none; }
.site-header[data-compact='true'] .menu-toggle { display: grid; }

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 20px 60px 22px 30px;
  color: var(--surface);
  background: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
}
.button::after {
  content: '→';
  position: absolute;
  right: 30px;
  transition: transform var(--duration-fast) var(--ease-main);
}
.button--light { color: var(--ink); background: var(--surface); }
.button--outline { border: 1px solid var(--ink); }
.button--compact {
  width: 160px;
  min-height: 40px;
  padding: 0 40px 0 20px;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}
.button--compact::after { right: 20px; }
@media (hover: hover) {
  /* Recommended feedback; this arrow movement was not measured. */
  .button:hover::after { transform: translateX(3px); }
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-areas: 'photos' 'copy';
  gap: 34px;
  padding-top: 130px;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain-image);
  opacity: .035; /* Recommended starting point; source opacity unknown. */
  pointer-events: none;
}
.hero__photos {
  grid-area: photos;
  position: relative;
  height: min(36.111vw, 520px);
}
.hero-photo {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  aspect-ratio: 3 / 2;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo--main { left: 12.083%; top: 0; width: 41.667%; }
.hero-photo--small { left: 60.694%; top: 7.692%; width: 16.667%; }
.hero-photo--right { left: 67.639%; top: 46.154%; width: 29.167%; }
.hero-photo--soft {
  left: 49%;
  top: 62%;
  width: 17%;
  filter: blur(9px); /* Recommended approximation. */
}
.hero__copy {
  grid-area: copy;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-left: clamp(30px, 5.556vw, 80px);
  margin-right: var(--section-inset);
}
.hero__title {
  margin: 0;
  font-size: clamp(36px, 4.445vw, 64px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0;
}
.hero__title span { display: inline; }
.hero__nav {
  position: absolute;
  z-index: 2;
  top: 120px;
  left: 0;
  width: 240px;
  padding: 8px 40px 40px;
  border-bottom-right-radius: 20px;
  background: var(--mist-left);
}
.hero__nav a {
  display: block;
  padding-block: 7px;
  font-size: 12px;
  font-weight: 500;
  line-height: 21px;
  text-decoration: none;
}
.manifesto {
  max-width: 660px;
  margin-top: 180px;
  margin-left: calc(var(--chrome-inset) + 100px);
  font-size: var(--manifesto-size);
  line-height: 2;
}
.manifesto p { margin: 0 0 20px; }
.mission-link--mobile { display: none; }

.layout-grid {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-inline: var(--grid-inset);
}
.section {
  padding: var(--space-xxl) var(--section-inset) 0;
}
.section-heading__en {
  margin: 0;
  font-family: var(--font-en);
  font-size: var(--section-size);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
}
.section-heading--large .section-heading__en {
  font-size: var(--section-size-lg);
}
.section-heading__jp {
  margin: 6px 0 0;
  font-size: inherit;
  font-weight: 400;
}
.section-heading--inline { display: flex; align-items: baseline; gap: 20px; }
.work-grid, .content-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 80px 20px;
  margin-top: var(--space-xl);
}
.work-card { color: inherit; text-decoration: none; }
.work-card__content { padding: 20px 30px 0 70px; }
.work-card__name {
  font-family: var(--font-en);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
}
.work-card__copy { max-width: 249px; }
.magazine-card {
  padding: 35px 30px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background: var(--surface);
  text-decoration: none;
}
.magazine-card p { font-size: 12px; line-height: 1.9; }

/* Desktop feature composition; photograph positions are visual estimates. */
.feature {
  margin-top: var(--space-xxl);
  padding: 200px var(--chrome-inset) 160px;
  border-radius: var(--radius-section) var(--radius-section) 0 0;
  background: var(--surface);
}
.feature__layout {
  position: relative;
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 140px;
  max-width: 1160px;
  margin-inline: auto;
}
.feature__main { width: 420px; aspect-ratio: 3 / 4; object-fit: cover; }
.feature__main, .feature__portrait, .feature__city { border-radius: 20px; }
.feature__aside { padding-top: 90px; }
.feature__copy { max-width: 360px; margin: 80px 0 0 auto; }
.feature__copy .button { margin-top: 60px; }
.feature__portrait, .feature__city {
  position: absolute;
  width: 160px;
  aspect-ratio: 1;
  object-fit: cover;
}
.feature__portrait { top: -50px; right: -40px; }
.feature__city { top: 495px; left: 355px; }

.recruit-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
  padding: 80px var(--section-inset);
  background: var(--slate);
}
.recruit-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 40px 30px 40px 25px;
  border-radius: var(--radius-card);
  color: var(--ink);
  background: var(--surface);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}
.recruit-block--dark { color: var(--surface); background: var(--ink); }
.site-footer { color: var(--surface); background: var(--ink); }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px 180px 160px;
  gap: 20px;
  padding: 80px var(--chrome-inset) 86px;
}
.footer__nav { display: grid; align-content: start; gap: 13px; padding-top: 6px; }
.footer__nav a { font-size: 12px; font-weight: 500; line-height: 1.9; text-decoration: none; }
.footer__bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  padding: 40px var(--chrome-inset);
  border-top: 1px solid rgb(255 255 255 / 20%);
  font-size: 11px;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 27px; }
.footer__legal a { text-decoration: none; }

/* Recommended breakpoint; the original threshold was not supplied. */
@media (max-width: 63.999rem) {
  :root { --radius-card: 15px; --radius-section: 30px; }
  .site-header { top: 30px; gap: 16px; }
  .brand { gap: 10px; }
  .brand__logo { width: 68px; }
  .header-actions .button { display: none; }
  .menu-toggle { display: grid; width: 50px; height: 30px; }
  .site-header[data-compact='true'] .menu-toggle { margin-left: auto; }
  .button { padding: 15px 50px 17px 25px; }
  .button::after { right: 25px; }
  .button--compact { min-height: 40px; padding: 0 40px 0 20px; }
  .button--compact::after { right: 20px; }

  .hero { grid-template-areas: 'copy' 'photos'; gap: 64px; padding-top: 130px; }
  .hero__copy { display: block; margin-inline: 30px; }
  .hero__title { display: flex; flex-direction: column; gap: 23px; font-size: 34px; line-height: 1; }
  .hero__title span { display: block; }
  .hero__copy .button, .hero__nav { display: none; }
  .hero__photos { height: 260px; }
  .hero-photo--main { width: 300px; left: -221px; top: 0; }
  .hero-photo--small { width: 120px; left: calc(50% - 66px); top: 20px; }
  .hero-photo--right { width: 210px; left: calc(50% - 16px); top: 120px; }
  .hero-photo--soft { display: none; }
  .manifesto { max-width: none; margin: 64px 30px 0; }
  .mission-link--mobile { display: flex; margin: 40px auto 0; }

  .layout-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .section-heading--inline { display: block; }
  .section-heading__jp { margin-top: 10px; }
  .work-grid, .content-grid { grid-template-columns: minmax(0, 1fr); gap: 60px; }
  .work-card__content { padding: 20px 30px 0 0; }
  .work-card__name { font-size: 20px; }
  .work-card__copy { max-width: none; }
  .magazine-card { padding: 25px 20px; }

  /* Recommended mobile feature simplification; photo arrangement unverified. */
  .feature { padding: var(--space-xxl) var(--grid-inset); }
  .feature__layout { display: flex; flex-direction: column; gap: 40px; }
  .feature__aside { display: contents; }
  .feature__heading { order: 0; }
  .feature__main { order: 1; width: 100%; max-height: 340px; }
  .feature__copy { order: 2; max-width: none; margin: 0; }
  .feature__copy .button { display: flex; margin: 40px auto 0; }
  .feature__portrait, .feature__city { display: none; }

  .recruit-band { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 60px; }
  .recruit-block { padding: 20px 25px 22px 20px; font-size: 16px; }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 35px 15px; padding-block: 60px; }
  .footer__brand, .footer__note { grid-column: 1 / -1; }
  .footer__nav { padding-top: 0; }
  .footer__bottom { flex-direction: column; gap: 35px; padding-block: 60px; }
  .footer__legal { flex-direction: column; gap: 15px; }
  .footer__copyright { align-self: flex-end; }
}

/* Recommended static-mode support; JavaScript animation needs matching logic. */
[data-motion='paused'] *,
[data-motion='paused'] *::before,
[data-motion='paused'] *::after {
  animation-play-state: paused !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
```

For the mobile feature ordering above, place `.feature__heading` and `.feature__copy` inside `.feature__aside`, with `.feature__main` as its sibling. Give the menu and motion buttons real markup and event handlers. Use the header's compact state only after choosing and testing an appropriate scroll threshold.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This does not identify the original site's framework. Define the custom properties above first.

```css
@theme inline {
  --color-ink: var(--ink);
  --color-paper: var(--surface);
  --color-mist-start: var(--mist-left);
  --color-mist-end: var(--mist-right);
  --color-recruit-band: var(--slate);
  --color-divider: var(--rule);
  --color-link-accent: var(--accent);

  --font-body: var(--font-jp);
  --font-display: var(--font-en);
  --text-body: var(--body-size);
  --text-manifesto: var(--manifesto-size);
  --text-section: var(--section-size);
  --text-section-large: var(--section-size-lg);

  --spacing-content-inset: var(--section-inset);
  --spacing-section: var(--space-xxl);
  --spacing-grid: var(--grid-gap);
  --radius-panel: var(--radius-card);
  --radius-chapter: var(--radius-section);
  --radius-action: var(--radius-pill);
}
```

## Sources & Evidence

- **Original and final page:** [Nealle RECRUIT](https://jobs.nealle.com/). The supplied browser result reports HTTP 200 with no URL change. Its title identifies the recruitment site, and its visible footer carries Nealle Inc. branding and corporate links.
- **Capture timestamp:** `2026-09-16T20:04:08.556Z`, equivalent to September 17, 2026 at 05:04 JST. This reference analyzes that supplied inspection rather than claiming a separate live visit.
- **Desktop visual evidence:** three `1440 × 1000` original-page captures showing the opening composition, Casual Talk feature, and presentation/action/footer area.
- **Mobile visual evidence:** two `390 × 844` original-page captures showing the opening composition and action/footer area.
- **Rendered evidence:** document text, link destinations, element bounds, computed font families and sizes, colors, padding, grids, radii, transition declarations, and custom properties at both viewports. Long-page sections without matching captures are described from this evidence with visual limitations stated.
- **Interaction evidence:** page traversal produced opening and scrolled header states. The supplied record does not document clicking the menu, motion toggle, load-more button, recruitment routes, or embedded presentation controls.
- **Inspection limitations:** the collector waited for load, visible image decoding, finite animations, and sampled layout stability within time limits. Perpetual animations were temporarily paused during readiness checks and resumed afterward. This does not establish their trajectories, durations, or semantic completeness. SharedWorkers and service workers were disabled. Exact image URLs, complete stylesheets, font files, expanded overlays, and intermediate responsive widths were not supplied.

All measurements and visual claims above concern the current page represented by this evidence. Estimates and implementation recommendations are labeled separately from observed behavior.