# Nakamura Sogo Kaitai — Recruitment Style Reference

> Documentary machinery photographs arranged like a recruitment poster around a quiet white reading column.

**Website:** [nakasokaitai.co.jp/recruit](https://nakasokaitai.co.jp/recruit)
**Original URL:** https://nakasokaitai.co.jp/recruit
**Final URL:** https://nakasokaitai.co.jp/recruit
**Theme:** light; cool gray collage canvas, white reading surface, teal identity, and ochre annotations.
**Inspected:** September 13, 2026, at 02:38 JST. Supplied inspection timestamp: `2026-09-12T17:38:09.724Z`.
**Viewports:** desktop `1440 × 1000` and mobile `390 × 844` CSS pixels.
**Scope:** the current recruitment page, including its opening composition, message, company information, benefit summaries, four member profiles, work descriptions, training steps, recruitment requirements, contact links, application link, and footer. Visual captures cover the desktop opening, member-to-Works transition, desktop footer, mobile opening, and mobile footer. Other sections are supported primarily by rendered DOM and computed styles.

The page presents metal recycling through the equipment, people, and practical conditions of the workplace. Rectangular photographs of excavators, cranes, trucks, cable reels, and scrap occupy an irregular field of pale gray. A large italic English slogan crosses the central photograph. Vertical Japanese annotations and an ochre circular recruitment badge give the composition the directness of a printed hiring notice.

The desktop reading experience is unusually narrow: a `540px` white column moves through the middle of the photographic setting, with a teal navigation tab immediately beside it. On mobile, the photographic composition is deliberately rearranged into the opening area, followed by a full-width white document. The essential design relationship is between an expansive industrial collage and restrained, closely organized information.

## How to Read This Reference

- **Measured** means a value supplied in rendered element geometry or computed styles. Measurements describe the captured state and viewport.
- **Calculated** means arithmetic derived from those measurements, such as the inner column occupying approximately `82%` of its parent.
- **Visual estimate** means a dimension, crop, or treatment assessed from the current-page captures. It is not an extracted CSS declaration.
- **Recommendation** means an implementation choice for a new project. Starter CSS, accessible enhancements, and untested intermediate layouts belong to this category.
- Descriptive token names are adaptation aliases. Opaque source variable names are included where available.
- Element rectangles do not establish visibility by themselves. Extracted interview and benefit text extends beyond compact summary rows; clipping and disclosure state must be considered before treating those paragraphs as visible content.
- The supplied evidence does not include activated menus, disclosure transitions, hover states, form submission, or a motion recording.

## Tokens — Colors

### Default Palette

| Name | Value | Adaptation token | Source evidence and role |
| --- | --- | --- | --- |
| Recycling Teal | `#086c6d` | `--color-teal` | Source `--s-color-bd8e6d7d: #086c6dff`; measured on the hero slogan, navigation text accents, section subheadings, and mobile menu fill |
| Worksite Ochre | `#9d7c41` | `--color-ochre` | Source `--s-color-4fb100d4: #9d7c41ff`; measured on vertical recruitment conditions and training numerals; visible recruitment badge fill |
| Application Yellow | `#ffd67d` | `--color-yellow` | Source `--s-color-5aa603c2: #ffd67dff`; measured on the navigation application label and supporting line; visible in the main application button |
| Cool Canvas | `#eceeee` | `--color-canvas` | Source `--s-color-538fdafa`; measured body background and backing strips behind several vertical annotations |
| Reading White | `#ffffff` | `--color-white` | Source `--s-color-829a3a4c`; measured section-heading surfaces and navigation labels; visible central reading surface |
| Body Charcoal | `#323232` | `--color-ink` | Source `--s-color-b2a77638`; measured body paragraphs, profile names, and company facts |
| Secondary Gray | `#646464` | `--color-muted` | Source `--s-color-f3a99b41`; declared token, but its specific visible assignment is not established by the sampled elements |

The application color arrangement is specific: the large button has a teal fill with yellow lettering and a yellow circular arrow marker. Ochre carries employment conditions and the recruitment badge. These two warm colors should retain separate roles.

### Supporting Tints

| Source variable | Declared value | Interpretation |
| --- | --- | --- |
| `--s-color-27a3a82c` | `#9d7c411a` | Ochre at approximately `10.2%` alpha |
| `--s-color-1b847dcb` | `#ffd67d1a` | Yellow at approximately `10.2%` alpha |

These declarations establish available tints, not the exact background of every disclosure or information group. Their component assignments were not supplied.

The opening canvas has a fine grain visible in the captures. During desktop reading, the surrounding photographs and annotations appear paler while the white center remains solid. The responsible texture asset, overlay opacity, and compositing rules are unverified. Do not substitute a measured foreground color with a faded screenshot approximation.

## Tokens — Typography

### Poppins — English Display and Numerals

**Measured source family:** `Poppins`, also declared as `--s-font-fb8e8d10`.

Poppins supplies the three-line hero slogan, the small English company descriptor, oversized background lettering, profile-name overlays, and training labels and numbers. The hero and descriptor visibly use an italic treatment. The evidence records their family, weight, size, and line height but does not include `font-style`; italic appearance is established visually.

The hero reads `Scrap / Makes / Future.` with deliberate line breaks. Its strong forward slant and close line spacing provide the main graphic gesture. The footer repeats `Scrap Makes Future.` horizontally in upright lettering.

### Japanese Display — Aoto Gothic B

**Measured source family:** `'あおとゴシック B'`, declared as `--s-font-e787946e`.

This family appears on vertical annotations, recruitment-badge lettering, Japanese section leads, navigation labels, profile names, and small section headings. Its substantial glyphs create a consistent voice from very small labels to large employment conditions.

Computed weights vary by element: many visibly bold labels report `400`, while headings and names report `600` or `700`. Preserve the named face and per-role settings when the licensed font is available. A family name containing a bold designation is not evidence of a variable font or a complete set of available weights.

### Body Text — Gothic MB101 R JIS2004

**Measured source family:** `'ゴシックMB101 R JIS2004'`, declared as `--s-font-6193062d`.

Main paragraphs use `15px`, weight `500`, `28.5px` line height, and `1.5px` letter spacing. These values remain unchanged between the inspected desktop and mobile viewports. The resulting `1.9` line height and `0.1em` tracking make substantial Japanese copy comfortable inside the narrow column.

Company facts and recruitment details use smaller `13px` text. Profile birth and joining dates use `11px` text with lighter tracking.

### Identity and Icons

The company identity is a multi-line lockup inside a home link and an `h1`. Its child typography is not individually measured. The parent heading reports generic sans-serif `32px`, which should not be interpreted as the font size of every visible line in the lockup.

Font Awesome family variables are present in the supplied styles. The captures show an Instagram outline symbol, plus controls, a hamburger, and circular arrow markers. The extracted strings `person` and `arrow_forward` indicate icon-related content, but do not independently identify the font used for those particular glyphs.

### Type Scale

All numeric values below are measured unless explicitly marked as estimates.

| Role | Desktop | Mobile | Weight and spacing |
| --- | --- | --- | --- |
| Hero slogan | `88px / 94.16px` | `40px / 42.8px` | Poppins `700`; normal tracking; italic visually observed |
| English company descriptor | `22px / 28.6px` | `12px / 15.6px` | Poppins `700`; italic visually observed |
| Background company lettering | `201.6px / 201.6px` | `54.6px / 54.6px` | Poppins `700`; both sizes equal `14vw` at the sampled widths |
| Opening Japanese heading | `34px / 47.6px` | `28px / 39.2px` | Aoto Gothic B `700` |
| Company and member section leads | `26px / 36.4px` | `24px / 33.6px` | Aoto Gothic B `600` |
| Works section lead | `26px / 36.4px` | `24px / 33.6px` | Aoto Gothic B `400` |
| Section subheading | `18px / 25.2px` | Same | Aoto Gothic B `700` |
| Main body | `15px / 28.5px` | Same | Gothic MB101 `500`; `0.1em` tracking |
| Company-fact value | `13px / 23.4px` | Same | Gothic MB101 `500`; `0.1em` tracking |
| Member name over photograph | `24px / 24px` | `19.5px / 19.5px` | Poppins `700` |
| Japanese member name | `18px / 25.2px` | `16px / 22.4px` | Aoto Gothic B `700` |
| Member dates | `11px / 17.6px` | Same | Gothic MB101 `500`; `0.05em` tracking |
| Member disclosure invitation | `10px / 14px` | Same | Aoto Gothic B `400` |
| Desktop navigation label | `16px / 19.2px` | Rail absent | Aoto Gothic B `400` |
| Desktop navigation application label | `18px / 21.6px` | Rail absent | Aoto Gothic B `400` |
| Desktop navigation supporting line | `12px / 14.4px` | Rail absent | Aoto Gothic B `400` |
| Vertical growth statement | `20px / 28px` | `16px / 22.4px` | Aoto Gothic B `400` |
| Vertical safety statement | `32px / 44.8px` | `18px / 25.2px` | Aoto Gothic B `400`; `0.05em` tracking |
| Recruitment-badge main text | `24px / 33.6px` | `16px / 22.4px` | Aoto Gothic B `400` |
| Recruitment-badge age line | `14px / 19.6px` | `10px / 14px` | Aoto Gothic B `400`; `0.05em` tracking |
| Salary number | `46px / 46px` | `34px / 34px` | Poppins `600`; `-0.04em` tracking |
| Salary Japanese lettering | `39px / 54.6px` | `30px / 42px` | Aoto Gothic B `400`; `0.02em` tracking |
| English section-name lettering | Approximately `34px` | Approximately `28px` | Visual/geometry estimate; child style not supplied |
| Footer English slogan | Approximately `30px` | Approximately `24px` | Visual estimate |

The typography has two responsive behaviors: graphic headline elements shrink substantially, while long-form reading text keeps its size. Do not scale the entire page as one miniature desktop canvas.

## Tokens — Spacing & Shapes

**Observed character:** square photographs and information rows, narrow text measures, generous section separation, and a few large circular or pill-shaped accents.

There is no confirmed universal spacing scale. The following values are reusable because they recur in the measured anatomy.

### Spacing Scale

| Use | Value | Evidence |
| --- | --- | --- |
| Identity left/top offset | `14px / 12px` | Measured at both viewports |
| Mobile menu right/top offset | `12px / 14px` | Calculated from its measured rectangle |
| Section-title inset | `24px` left, `8px` top | Measured heading wrappers |
| Mobile body gutter | `24px` | Measured main text starts at `x = 24` and ends at `x = 366` |
| Desktop inner gutter | `48.59px` per side | Calculated from the `540px` section and `442.80px` text width |
| Disclosure-button padding | `16px 12px 16px 20px` | Measured on benefit buttons at both viewports |
| Space between benefit summaries | `16px` | Calculated from consecutive button rectangles |
| Space between member summary rows | Approximately `30px` | Calculated at both viewports |
| Lead-to-body gap | `36px` | Calculated in company and Works sections |
| Opening English subline-to-body gap | `60px` | Calculated at both viewports |
| Desktop section-title-to-lead gap | `44px` | Calculated from heading and lead rectangles |
| Desktop section bottom space | `90px` | Measured on message, company, and member sections |
| Mobile photo-section top space | `85px` | Measured on company, member, and Works sections |
| Recruitment-section bottom space | `120px` | Measured at both viewports |

The opening mobile section has a measured `130px` top inset from its section box. Its visible white surface begins lower than the section box, so this value must be understood with the overlapping hero artwork.

### Border Radius

| Element | Treatment | Evidence |
| --- | --- | --- |
| Photographs | Square | Current captures |
| Member and benefit summary buttons | `0` | Computed styles |
| Mobile menu button | `0` | Computed styles |
| Recruitment badge | Circle; approximately `160px` desktop and `110px` mobile | Visual estimate |
| Main application link | Pill; approximately `244 × 74px` | Visual estimate in both footer captures |
| Application arrow marker | Circle; approximately `30px` | Visual estimate |
| Desktop navigation tab | Primarily square, with an approximately `20px` lower-right radius | Visual estimate |
| Member plus marker | Circle; approximately `34px` in the desktop capture | Visual estimate |
| Corporate-site link | Thin outlined pill | Current footer captures |

### Layout Measurements

| Element | Desktop `1440 × 1000` | Mobile `390 × 844` |
| --- | --- | --- |
| Identity link | `268 × 80.38px`, at `(14, 12)` | `224 × 66.97px`, at `(14, 12)` |
| Reading-section width | `540px`, from `x = 450` to `990` | `390px`, from `x = 0` to `390` |
| Main text width | `442.80px` | `342px` |
| Main text left edge | `498.59px` | `24px` |
| First message section top | Document `y = 1003px` | Document `y = 641px` |
| First message heading top | Document `y = 1103px` | Document `y = 771px` |
| Member summary | Approximately `442.80 × 178.5px` | Approximately `342 × 124.4px` |
| Benefit summary, two lines | `438.80 × 82.38px` | `338 × 82.38px` |
| Benefit summary, one line | `438.80 × 64px` | `338 × 64px` |
| Company-fact label column | `80px` | `80px` |
| Company-fact value column | `362.80px` | `262px` |
| Mobile menu button | Not visible | `54 × 54px`, at `(324, 14)` |
| Document height | `12505.66px`, rounded report `12506px` | `12296.31px`, rounded report `12296px` |

The desktop text width is approximately `82%` of the section width. This is a calculated proportion, not a recovered source rule. The starter CSS uses that proportion as a practical adaptation.

## Components

### Persistent Company Identity

**Role:** maintains company, location, industry, and recruitment context throughout the page.

The upper-left lockup contains a small location/industry line, the larger company name `中村総合解体`, an adjacent `1965年創業` label bounded by horizontal rules, and `Recruiting Site` beneath. It is teal and sits directly over the surrounding page surface.

The link and `h1` share the same measured box. Desktop width is `268px`; mobile width is `224px`. The `14px` left and `12px` top offsets remain constant. The identity remains at the top in the supplied scrolled captures, establishing persistent visual behavior; the exact positioning declaration is not included.

Preserve the lockup as a unit. Its small factual lines are part of the identity hierarchy, rather than independent navigation items.

### Opening Photographic Composition

**Role:** establishes the physical work and recruitment proposition before the long-form information.

Use a pale textured field containing several independent rectangular photographs. Vary size, orientation, and placement. The composition includes images cropped by the viewport edges, a large central excavator photograph, and smaller worksite details distributed around it.

The teal hero slogan crosses the lower-left region of the central photograph. At desktop, its measured text box starts at approximately `(374.41, 548.77)`. The English descriptor starts much farther right at `(982.5, 628)`. On mobile, the slogan starts at `(105.31, 342.83)` and the descriptor moves below it to `(129.13, 479.22)`.

Oversized white `NAKAMURA / SOGO / KAITAI` lettering sits behind the photographs. It is intentionally low contrast. The recorded font sizes equal `14vw` at both viewports, making `14vw` a supported adaptation, although the original declaration was not supplied.

The composition is not a uniform masonry grid. Its relationships are individually art-directed: central machine, overlapping slogan, left vertical statement, and right employment conditions.

### Recruitment Badge and Vertical Conditions

**Role:** lets applicants scan the main employment facts without entering the reading column.

At the lower left, an ochre circle contains two centered lines, `正社員 / 大募集`, followed by the smaller age line `（22〜40才）`. A separate ochre vertical `未経験者歓迎` label sits beside it.

At the upper left, the teal vertical growth statement begins below the identity. `安全第一` appears separately in ochre, closer to the central composition. Lower-right annotations emphasize `定時退社`, break time, and `月給30万円`, with smaller family-allowance and bonus copy.

Several of these annotations have canvas-colored backing strips. They remain readable where they cross photographs. The salary number uses Poppins and stays horizontal within the vertically organized sign.

**Recommended implementation:** use vertical writing for Japanese character runs and a separate horizontal block for the salary number. Keep the full meaning in a sensible DOM reading order. Click behavior was not established for the circular recruitment badge.

### Desktop Navigation Tab

**Role:** provides section access and a persistent application route beside the long reading column.

In the scrolled desktop captures, the teal tab occupies approximately `x = 990–1140`, `y = 343–657`. Its left edge attaches directly to the white column. The five section links are stacked above a yellow application label and a smaller yellow company-visit line.

The labels are `メッセージ`, `私たちについて`, `メンバー紹介`, `仕事紹介`, and `募集要項`. Rendered links target `#message`, `#company`, `#member`, `#works`, and `#recruit-info` respectively.

Measured text starts approximately `18.44px` inside the tab. Consecutive section-label tops are about `41.19px` apart, including a `19.19px` line box. The application pair uses a measured `6px` internal gap.

A white circular Instagram control overlaps the upper-right corner. Its measured link box is `50 × 50px`; the capture shows a curved Instagram caption above it. No rotation behavior was verified.

The tab is absent from the initial desktop screenshot but appears at the same viewport position in the supplied reading and footer captures. Reproduce that reading-state relationship without assuming an independently verified trigger or sticky offset.

### Mobile Menu Control

**Role:** replaces the desktop rail with a compact navigation affordance.

The mobile button is a measured `54px` teal square at `(324, 14)`, with three thin white horizontal lines. It remains visible in the opening and footer captures. The closed state has no visible word label.

Opening behavior, panel appearance, focus management, and dismissal were not exercised. A reproduction should implement an accessible menu, but any proposed drawer or overlay layout must be labeled as a new choice.

### White Reading Column and Opening Message

**Role:** provides a calm, consistent surface for extensive Japanese information.

The desktop column is `540px` wide and centered. Main paragraphs use an approximately `442.8px` inner width. At mobile, the section expands to the full `390px` viewport with `24px` gutters.

The opening message begins with `金属スクラップが / 未来をつくる`, followed by a small teal English slogan and substantial body copy. It explains the recycling process and connects the company's work to future value. A cutout of scrap metal bridges the mobile hero and white section.

Maintain the hierarchy of one strong Japanese heading, one compact English subline, and open paragraphs. Preserve the generous line height instead of fragmenting the explanation into unrelated cards.

### Section Photograph and Bilingual Title Tab

**Role:** introduces major chapters with a visual workplace moment and a recognizable heading treatment.

The desktop Works capture shows a roughly `520 × 346px` photograph of two colleagues talking in the yard. The photograph sits about `10px` inside the white column on each side. A white title tab overlaps its lower-left edge, with a slanted extension on the right.

The tab carries a large teal English chapter name and a smaller Japanese label. The measured `h2` wrapper has `24px` left padding and `8px` top padding. The actual English child size is not in the supplied style sample; approximately `34px` desktop and `28px` mobile are useful estimates.

Company and Member headings use the same measured wrapper pattern. After the tab, a Japanese lead introduces the section, followed by body copy. Avoid assigning the generic `24px` wrapper font size to every child in this bilingual heading.

### Benefit Disclosure Summaries

**Role:** organizes workplace support into compact, expandable-looking topics.

The DOM identifies eight benefit summaries as buttons, divided into two groups. The first covers working hours, breaks, workwear, and machinery handling heavy work. The second covers compensation, qualification support, insurance, and benefits.

Two-line summaries measure `82.38px` high; single-line summaries measure `64px`. Both use `16px 12px 16px 20px` padding and square corners. The button background itself is transparent. Parent fills, borders, and active-state details are not established by the available screenshots.

Supporting paragraphs exist in the DOM, but their rectangles overlap subsequent summary positions. That is insufficient evidence that all answers are simultaneously displayed. The exact expanded state, one-open-versus-many-open behavior, and animation remain unverified.

**Recommended implementation:** use native disclosures or buttons with `aria-expanded` and `aria-controls`, keep the summary text left aligned, and allow answers to expand in document flow.

### Member Profile Summary

**Role:** introduces real employees and offers a route to their longer interviews.

Each member summary is a single button containing a landscape workplace portrait on the left and a compact information stack on the right. The visible desktop example shows `深町信之` beside a portrait with the overlaid Roman-letter name `FUKAMACHI / NOBUYUKI`.

The full desktop row is approximately `442.8 × 178.5px`. The photograph is approximately `267 × 178px`, with an approximately `18px` gap before the information. The image keeps square corners and a roughly `3:2` crop. The name overlay sits near the lower-left corner in pale Poppins capitals.

The right stack contains the Japanese name, two small date lines, a two-line interview invitation, and a teal plus inside a pale circular marker. The entire summary is a button; the small plus should not be treated as the only activation target.

At mobile, the row remains side by side and measures approximately `342 × 124.4px`. Information begins at `x = 229.06`; the image area is approximately `187px` wide. Japanese names reduce from `18px` to `16px`, and Roman-letter overlays reduce from `24px` to `19.5px`. Dates remain `11px`.

Long interview answers and colleague comments are present in the DOM. Their visible expansion was not captured, so do not invent a modal presentation or a specific opening animation.

### Work Descriptions and Training Steps

**Role:** explains the actual tasks and the progression after joining.

The Works section separates truck work, heavy-machinery work, and other tasks using teal `18px` subheadings, photographs, and charcoal paragraphs. The observed chapter lead states that new employees initially accompany experienced colleagues and assist them.

The training sequence has four vertically arranged steps. Each combines a small Poppins `Step` label, an ochre numeral, and teal explanatory text. The label is `10px / 10px`; the numeral is `16px / 16px`; the explanation is `15px / 24px` with `0.1em` tracking.

The explanation starts `64px` to the right of the main text edge at both inspected widths. Its measured width is `362.8px` desktop and `262px` mobile. The first three step-label tops are `114px` apart. The fourth explanation grows to three lines on mobile, so the implementation must permit content-driven height.

Connector shapes and step-container fills are not established by the supplied visual captures. Keep any proposed timeline line or background treatment explicitly optional.

### Company Facts and Recruitment Requirements

**Role:** makes factual comparison straightforward after the narrative content.

Company facts use a measured `80px` label column at both widths, with the value taking the remaining space. Both sides use `13px / 23.4px`; the label uses Aoto Gothic B and the value uses Gothic MB101.

Recruitment content includes suitability lists, eligibility, working conditions, and contact information. The mobile salary row places the label above its multi-line value. This differs from the company-facts table, which remains side by side on mobile. Do not impose a single responsive table rule on both structures.

The desktop contact capture uses fine horizontal separators, a teal heading with a small ochre ring, and simple phone/email rows. Phone and email are actual `tel:` and `mailto:` links in the supplied DOM.

### Application Link

**Role:** provides the main application action after the requirements and contact information.

A centered teal pill contains the yellow label `応募はこちら` and a yellow circular arrow marker. Its visible size is approximately `244 × 74px` at both inspected widths. Above it, a teal line states `＼応募前の会社見学も受付中／`.

The original link target is `https://forms.gle/n5M78fRSmYMvciXi8`. The page therefore provides an external application link; an embedded application form was not observed. The destination and its submission behavior were not inspected.

Keep the surrounding white space. The button is a clear endpoint after detailed information, with a second application route available in desktop navigation.

### Footer

**Role:** closes the recruitment narrative and reconnects it to the company.

A small photographic excavator cutout sits between two horizontal charcoal rules. Beneath it are the upright English slogan, its Japanese translation, two centered rows of section links, Instagram, and the company identity and address.

The footer names `有限会社 中村総合解体` and displays the address `福井県敦賀市木崎77-3-1`. A small outlined pill labeled `コーポレートサイトへ` links to the corporate root URL. The visible copyright reads `©2025 中村総合解体`; that year is page content, not the inspection date.

The footer stays within the desktop white column. On mobile it occupies the white viewport width, retaining the centered arrangement. The machinery cutout is approximately `120 × 90px` in both captures. The corporate-site pill is approximately `162 × 30px`; increasing its interactive hit area is a recommended addition.

## Tokens — Motion & Interaction

### Measured Transition Declarations

| Element group | Supplied value | What it establishes |
| --- | --- | --- |
| Hero text, header, and mobile menu button | `0.3s cubic-bezier(0.3, 0.67, 0.31, 0.69)` | A declared transition timing; the triggering property change is not demonstrated |
| Many content elements and links | `0.3s cubic-bezier(0.4, 0.4, 0, 1)` | A repeated timing pattern for interface changes |
| Benefit and member buttons | `0.4s cubic-bezier(0.4, 0.4, 0, 1)` | Button transition timing; not proof of a 400ms answer expansion |
| Body background | `background 0.5s cubic-bezier(0.4, 0.4, 0, 1)` | A transition defined for background changes |
| Sampled element animations | `none` | No named animation reported on those sampled elements at collection time |

Many transitions also list gradient-related custom properties. Their sampled colors are transparent. Those declarations do not establish a visible animated-gradient design.

### Observed Behavior and Limits

| Feature | Evidence | Limit |
| --- | --- | --- |
| Persistent desktop setting | The same peripheral photographs and annotations remain in the reading and footer captures | Exact fixed/sticky implementation and any scroll-linked movement are unverified |
| Background attenuation | The surrounding collage appears paler in reading captures | Overlay opacity, trigger, and transition duration are unknown |
| Persistent identity and mobile menu | Both remain at the viewport top in scrolled captures | Underlying positioning rules were not supplied |
| Section navigation | Rendered anchor destinations are present | Click response, scroll duration, and active-link updates were not tested |
| Member and benefit disclosures | Buttons and associated long-form text exist | Opening, closing, focus behavior, and expanded geometry were not exercised |
| Application action | External form URL is present | Destination availability and submission were not inspected |

The capture process waited for page readiness and finite motion, and temporarily paused perpetual animations during readiness checks. Settled screenshots cannot establish an entrance sequence, photo drift, parallax, or an absence of motion elsewhere.

**Recommended motion direction:** preserve the calm reading experience. Use short color or opacity feedback and optional disclosure transitions. Keep content accessible without animation, and honor reduced-motion preferences. Do not add continuous machinery movement merely because the images show machines.

## Surfaces

| Layer | Appearance | Function |
| --- | --- | --- |
| Outer canvas | Cool gray with fine grain | Unifies the irregular photographic composition |
| Background lettering | Very large, low-contrast white capitals | Adds identity without competing with the foreground slogan |
| Worksite photographs | Natural color, rectangular crops, square corners | Supplies physical detail and visual energy |
| Reading column | Solid white | Separates dense Japanese information from the collage |
| Section title tab | White overlap with an angled right edge | Joins image and heading into one chapter introduction |
| Navigation rail | Solid teal with white labels and yellow application copy | Creates a compact, persistent utility surface |
| Recruitment badge | Solid ochre circle with white text | Acts as a prominent hiring notice |
| Main application link | Teal pill with yellow text and circular arrow | Marks the main action |
| Facts and contact rows | Open white surface with fine separators where visible | Keeps detailed information orderly |

The captures show no general shadow-based elevation system. Depth comes from photographs crossing behind text, the white column covering the middle of the composition, and small controls protruding from surfaces.

## Imagery

Use documentary photographs with the visual specificity of the workplace: excavator attachments, green crane trucks, scrap containers, cable reels, weathered metal, open sky, and employees in workwear. Machinery is shown at work or in its actual yard context. The photographs carry natural orange, yellow, green, and sky-blue accents that complement the restrained interface palette.

The hero's energy comes from crop and placement. Photographs do not need rounded frames, captions, equal dimensions, or decorative rotations. Human imagery appears within the reading sequence, including individual portraits and an informal conversation between colleagues.

Cutout photography has a separate role. The scrap-metal cutout bridges the mobile opening and the first white section; the excavator cutout becomes a small footer emblem. Keep these isolated objects distinct from the rectangular documentary photographs.

### Observed Asset References

No complete, usable image asset URLs were included in the supplied evidence. The table identifies current-page imagery and visible frame estimates without inventing filenames. Some DOM snippets contain truncated background-image references; they are insufficient for asset retrieval.

| Asset or frame | Desktop appearance | Mobile appearance | Evidence status |
| --- | --- | --- | --- |
| Central excavator and truck | Approximately `448 × 448px`, beginning near `(491, 267)` | Approximately `177 × 178px`, near `(137, 196)` | Visual estimates from opening captures |
| Excavator over a scrap container | Approximately `233 × 312px`, near `(98, 290)` | Approximately `69 × 93px`, near `(43, 301)` | Visual estimates |
| Truck beside warehouse | Approximately `271 × 180px` visible at the top | Approximately `85 × 56px`, near `(85, 111)` | Visual estimates |
| Crane handling a large cable reel | Approximately `249 × 229px` visible at the top | Approximately `79 × 103px`, near `(201, 75)` | Visible frames; desktop crop is viewport-limited |
| Crew conversation photograph | Approximately `520 × 346px` in the Works introduction | Not included in a mobile visual capture | Desktop visual estimate |
| Member workplace portrait | Approximately `267 × 178px` | Approximately `187 × 124px` | Desktop visual estimate; mobile geometry-derived estimate |
| Scrap-metal cutout | Opening-section use not visually documented on desktop | Overlaps the gray-to-white boundary near the right side | Current mobile opening capture |
| Footer excavator cutout | Approximately `120 × 90px` | Approximately `120 × 90px` | Visual estimates from footer captures |

For a new implementation, use authorized imagery and provide intrinsic dimensions. Use cover crops for photographic frames and contain sizing for cutouts. Avoid pixelated rendering or artificial duotone processing; neither characterizes these photographs.

## Layout & Responsive Behavior

### Desktop

The opening fills the first viewport with the collage. The first message section begins at document `y = 1003px`, just below the `1000px` viewport. The white reading column then occupies the centered `540px` strip while the peripheral setting stays visible.

The white column's left edge is `450px`; its right edge is `990px`. The navigation tab begins at that right edge, creating an asymmetric extension without moving the reading column off center. Main prose is inset another `48.59px` on each side.

The hero headline is not centered inside the reading column. Its left edge begins farther left, around `26%` of the viewport width, and its descriptor sits to the right of the central image. Preserve this independence between opening typography and document alignment.

### Mobile

At `390 × 844`, the composition is rebuilt around the available width. The main image moves to the upper middle; the slogan crosses its lower-left edge; the English descriptor sits below. Recruitment information remains distributed around the composition rather than becoming a conventional row of cards.

The gray field visually meets the white reading surface near `y = 681px`. The first message section's measured box begins earlier, at `y = 641px`, while its heading begins at `y = 771px`. The overlap and cutout artwork explain why the surface boundary should not be used as the section's exact DOM start.

The desktop rail disappears, and the `54px` menu square appears at the upper right. The identity becomes narrower but retains its position. The footer capture shows underlying contact text passing behind the persistent identity; a solid reading-state header backing would be a useful implementation improvement.

Main prose remains `15px / 28.5px` and becomes `342px` wide. Member rows retain their photograph-and-information arrangement. Company facts keep two columns, while the observed salary requirement uses a label-above-value arrangement. The main application pill remains approximately the same size as on desktop.

### Breakpoints and Untested Sizes

The supplied style text explicitly includes a `max-width: 1110px` breakpoint for conditional line breaks. It does not establish that every layout or navigation change occurs there. No tablet or intermediate-width screenshots were supplied.

The Quick Start uses `1110px` as a recommended adaptation boundary and reproduces the two inspected layouts approximately. Test intermediate widths, text zoom, and short landscape viewports before adopting that boundary as a final production rule.

## Do’s and Don’ts

### Do

- Preserve teal `#086c6d`, ochre `#9d7c41`, yellow `#ffd67d`, and the cool gray/white surface distinction.
- Build the opening from separately positioned workplace photographs with varied proportions.
- Keep `Scrap / Makes / Future.` on three lines with strong italic Poppins lettering.
- Maintain vertical Japanese annotations as part of the opening composition.
- Keep salary numerals horizontal and visually distinct within the vertical sign.
- Preserve the centered `540px` desktop document and approximately `443px` prose measure.
- Retain `15px` body text, `1.9` line height, and `0.1em` tracking at the inspected mobile scale.
- Keep member portraits rectangular, with Roman-letter names over the photographs.
- Use white angled title tabs to connect chapter imagery and bilingual headings.
- Keep recruitment conditions, contact details, and application access easy to locate through the long page.

### Don't

- Don't replace the photographic composition with a single generic full-bleed construction photograph.
- Don't turn all workplace information into an equal-sized rounded-card grid.
- Don't apply a global desktop-to-mobile scale transform.
- Don't widen long paragraphs to fill the entire desktop viewport.
- Don't substitute generic serif typography because the root element reports a browser-default family.
- Don't infer visible open answers from extracted text or overlapping descendant rectangles.
- Don't invent hover effects, menu layouts, photo motion, or disclosure behavior and present them as observed features.
- Don't use yellow and ochre interchangeably across every label and control.
- Don't add heavy shadows, glossy gradients, or glass effects to the reading surface.
- Don't infer production authorship from font declarations, hosting paths, or framework-related markup.

## Recommended Implementation Additions

These are recommendations for a new implementation, not verified features of the inspected page.

- Give the mobile menu button an accessible name and expose its expanded state. Keep focus order and dismissal predictable.
- Implement profile and benefit summaries as keyboard-operable disclosures with associated panels. Use the complete summary row as the target.
- Add a skip link and appropriate anchor scroll margins so the persistent identity does not obscure section headings.
- Provide a solid or sufficiently opaque header surface during mobile reading to prevent body text showing through the lockup.
- Enlarge the effective hit area of small plus markers, footer navigation links, and the corporate-site pill without enlarging every visible shape.
- Check small ochre lettering and white text on the ochre badge for the intended accessibility target. Adjust supporting text treatments where needed.
- Keep decorative background words and repeated ornamental photos out of the accessibility tree. Give meaningful work and employee photographs useful alternatives.
- Preserve source order for vertical employment conditions and provide an understandable spoken salary phrase.
- Supply responsive image sizes and intrinsic dimensions. Load the central opening image promptly and defer lower-page photographs where appropriate.
- Keep essential content visible without entrance animation and provide reduced-motion handling for any added transitions.

## Agent Prompt Guide

### Quick Color Reference

- Outer canvas: `#eceeee`, with a subtle grain treatment.
- Reading surface and title tabs: `#ffffff`.
- Identity, hero slogan, navigation fill, and section accents: `#086c6d`.
- Recruitment badge and vertical employment annotations: `#9d7c41`.
- Application lettering and circular arrow marker: `#ffd67d` on teal.
- Long-form copy and footer rules: `#323232`.
- Photographs: natural workplace color, square frames, no global color filter.

### Overall Prompt

“Create a Japanese metal-recycling recruitment page with an art-directed collage of real excavators, green crane trucks, scrap containers, and workplace photographs on a subtly textured cool gray canvas `#eceeee`. Overlay a large teal `#086c6d` Poppins italic slogan on three lines: ‘Scrap / Makes / Future.’ Add low-contrast oversized white company lettering behind the photographs, vertical Japanese recruitment annotations in ochre `#9d7c41`, and a circular ochre hiring badge. On desktop, place the long-form content in a centered white column `540px` wide with approximately `443px` prose and a narrow teal section-navigation tab attached to its right edge during reading. Use white angled bilingual heading tabs, rectangular employee portraits with overlaid English names, compact benefit disclosures, factual recruitment details, and a teal application pill with yellow `#ffd67d` text. At `390px`, recompose the collage, use a `54px` square menu control, and continue into a full-width white document with `24px` gutters. Keep body copy at `15px / 1.9` with `0.1em` tracking. Treat unverified interactions as implementation choices.”

### Example Component Prompts

1. **Opening composition:** “Arrange a large square excavator photograph near the middle of a cool gray canvas, with smaller landscape and portrait worksite photographs around it. Cross its lower-left area with a three-line teal italic slogan. Put a vertical growth statement at the far left, an ochre safety label higher in the composition, an ochre circular recruitment badge at the lower left, and vertical salary information at the lower right. Reposition these elements for mobile instead of scaling the desktop layout as one image.”
2. **Section introduction:** “Inside a white `540px` reading column, show a wide photograph of colleagues in the yard. Overlap the lower-left edge with a white title tab and a small angled extension. Set ‘Works’ in large teal English lettering and ‘仕事紹介’ beneath. Follow with a strong two-line Japanese lead and charcoal `15px` body text at `28.5px` line height.”
3. **Member summary:** “Create a square-cornered employee disclosure row approximately `443 × 179px`. Use a `3:2` workplace portrait on the left, pale Poppins capitals over its lower-left corner, and a narrow information stack on the right. Include a Japanese name, birth and joining dates, a short interview invitation, and a teal plus on a pale circle. Keep the whole row keyboard operable. At `390px`, retain the side-by-side arrangement within `342px`.”
4. **Benefit disclosure:** “Create a compact Japanese benefit summary with square corners, `16px` vertical padding, `20px` left padding, and an accessible disclosure control. Preserve the established teal, charcoal, and white palette. Answers should expand in normal document flow. This opening behavior is a recommended implementation, not a verified source interaction.”
5. **Application and footer:** “Center a teal pill approximately `244 × 74px` with yellow Japanese application text and a `30px` yellow circular arrow. Place a small teal company-visit note above. Leave substantial white space before a photographic excavator cutout between two charcoal rules, an upright English slogan, two rows of navigation, Instagram, company details, and a small outlined corporate-site link.”

## Quick Start

### CSS Custom Properties

This is an implementation adaptation, not recovered source code. It combines measured colors, typography, column widths, and control dimensions with explicitly estimated photographic positions, heading-tab geometry, and footer spacing.

The named fonts must be supplied through authorized font loading; no font files or image files are bundled here. The photographic classes expect ordinary image elements. `--yard-texture` is optional and defaults to no texture. The `data-reading='true'` state is a recommended application hook for the desktop rail and background wash; its original trigger was not verified.

Use a `.recruit-page` wrapper containing the backdrop, persistent header, main content, and desktop rail. Inside the main content, place `.hero` before `.paper`; put the reading sections and footer inside `.paper`. The CSS retains normal document scrolling.

```css
:root {
  /* Measured source colors */
  --color-teal: #086c6d;
  --color-ochre: #9d7c41;
  --color-yellow: #ffd67d;
  --color-canvas: #eceeee;
  --color-white: #ffffff;
  --color-ink: #323232;
  --color-muted: #646464;
  --color-ochre-tint: #9d7c411a;
  --color-yellow-tint: #ffd67d1a;

  /* Measured families with recommended fallbacks */
  --font-display: 'Poppins', sans-serif;
  --font-heading: 'あおとゴシック B', sans-serif;
  --font-body: 'ゴシックMB101 R JIS2004', sans-serif;

  --text-body: 15px;
  --leading-body: 1.9;
  --tracking-body: 0.1em;
  --text-fact: 13px;
  --text-lead: 26px;
  --text-hero: 88px;
  --text-descriptor: 22px;

  /* Measured dimensions and calculated proportions */
  --paper-width: 540px;
  --copy-width: 82%;
  --mobile-gutter: 24px;
  --menu-size: 54px;
  --brand-width: 268px;

  /* Visual estimates and adaptation choices */
  --rail-width: 150px;
  --application-width: 244px;
  --application-height: 74px;
  --arrow-size: 30px;
  --section-title-size: 34px;
  --footer-title-size: 30px;
  --rule-color: #e8e8e8;
  --yard-texture: none;
  --reading-wash: 0.3;

  /* Measured timing declarations */
  --motion-ui: 300ms cubic-bezier(0.4, 0.4, 0, 1);
  --motion-graphic: 300ms cubic-bezier(0.3, 0.67, 0.31, 0.69);
  --motion-button: 400ms cubic-bezier(0.4, 0.4, 0, 1);
}

* { box-sizing: border-box; }
body { margin: 0; }

.recruit-page {
  position: relative;
  isolation: isolate;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-body);
}

.recruit-page img { display: block; max-width: 100%; }
.recruit-page button { font: inherit; }
.recruit-page a { color: inherit; }
.recruit-page [id] { scroll-margin-top: 100px; }

.yard-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--color-canvas);
  background-image: var(--yard-texture);
}

.yard-wordmark {
  position: absolute;
  top: 30px;
  left: 20px;
  margin: 0;
  color: var(--color-white);
  opacity: 0.4; /* Estimated decorative contrast */
  font: 700 14vw / 1 var(--font-display);
}

.yard-photo {
  position: absolute;
  object-fit: cover;
  border-radius: 0;
}

/* Estimated frames from the current opening capture */
.yard-photo--warehouse {
  left: 31.25%; top: 0; width: 18.82%; aspect-ratio: 3 / 2;
}
.yard-photo--reel {
  left: 58.4%; top: 0; width: 17.3%; aspect-ratio: 249 / 229;
}
.yard-photo--scrap {
  left: 6.8%; top: 29%; width: 16.2%; aspect-ratio: 3 / 4;
}
.yard-photo--truck {
  right: 0; top: 5.3%; width: 18.7%; aspect-ratio: 5 / 4;
}
.yard-photo--fleet {
  right: 8.9%; top: 33.4%; width: 18.1%; aspect-ratio: 261 / 288;
}
.yard-photo--lower {
  left: 18.75%; top: 81.5%; width: 21%; aspect-ratio: 3 / 2;
}
.yard-photo--tree {
  right: 15.5%; top: 77.5%; width: 22.4%; aspect-ratio: 3 / 2;
}

.vertical-claim {
  position: absolute;
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--color-ochre);
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.4;
}

.vertical-claim--growth {
  left: 14px;
  top: 120px;
  color: var(--color-teal);
  font-size: 20px;
}

.vertical-claim--safety {
  left: 26.89%;
  top: 16.56%;
  font-size: 32px;
  letter-spacing: 0.05em;
}

.hiring-badge {
  position: absolute;
  left: 46px;
  bottom: 16px;
  display: grid;
  place-content: center;
  width: 160px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--color-white);
  background: var(--color-ochre);
  text-align: center;
  font: 400 24px / 1.4 var(--font-heading);
}

.hiring-badge small {
  margin-top: 5px;
  font-size: 14px;
  letter-spacing: 0.05em;
}

.yard-wash {
  position: absolute;
  inset: 0;
  background: var(--color-canvas);
  opacity: 0;
  transition: opacity var(--motion-ui);
}

.recruit-page[data-reading='true'] .yard-wash {
  opacity: var(--reading-wash);
}

.recruit-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  padding: 12px 12px 0 14px;
  pointer-events: none;
}

.brand {
  display: block;
  width: var(--brand-width);
  color: var(--color-teal);
  text-decoration: none;
  pointer-events: auto;
}

.brand img { width: 100%; height: auto; }

.menu-toggle {
  position: absolute;
  top: 14px;
  right: 12px;
  display: none;
  place-content: center;
  gap: 6px;
  width: var(--menu-size);
  height: var(--menu-size);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--color-teal);
  cursor: pointer;
  pointer-events: auto;
}

.menu-toggle span {
  display: block;
  width: 30px;
  height: 2px;
  background: var(--color-white);
}

.recruit-main { position: relative; z-index: 1; }

.hero {
  position: relative;
  height: calc(100svh + 3px);
}

.hero-photo {
  position: absolute;
  left: 34.1%;
  top: 26.6%;
  width: 31.1%;
  aspect-ratio: 1;
  object-fit: cover;
}

.hero-slogan {
  position: absolute;
  left: 26%;
  top: 54.7%;
  margin: 0;
  color: var(--color-teal);
  font: italic 700 var(--text-hero) / 1.07 var(--font-display);
}

.hero-slogan span { display: block; }

.hero-descriptor {
  position: absolute;
  left: 68.23%;
  top: 62.6%;
  margin: 0;
  color: var(--color-teal);
  font: italic 700 var(--text-descriptor) / 1.3 var(--font-display);
}

.paper {
  width: min(100%, var(--paper-width));
  margin-inline: auto;
  background: var(--color-white);
}

.copy { width: var(--copy-width); margin-inline: auto; }
.reading-section { position: relative; padding-bottom: 90px; }
.message-section { padding-top: 100px; }

.body-copy {
  font-size: var(--text-body);
  font-weight: 500;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

.body-copy p { margin: 0 0 1.9em; }

.message-heading {
  margin: 0;
  font: 700 34px / 1.4 var(--font-heading);
}

.message-subline {
  margin: 17px 0 60px;
  color: var(--color-teal);
  font: 700 16px / 1.07 var(--font-display);
}

.section-photo {
  width: calc(100% - 20px);
  margin-inline: 10px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.section-title {
  position: relative;
  display: table;
  margin: -28px 0 44px;
  padding: 8px 0 0 24px;
  color: var(--color-teal);
  background: var(--color-white);
}

/* Estimated angled extension; keep text outside the clipped shape */
.section-title::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 100%;
  width: 40px;
  background: var(--color-white);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.section-title__en {
  display: block;
  font: 700 var(--section-title-size) / 1.07 var(--font-display);
}

.section-title__ja {
  display: block;
  font: 400 13px / 1.4 var(--font-heading);
}

.section-lead {
  margin: 0 0 36px;
  font: 400 var(--text-lead) / 1.4 var(--font-heading);
}

.section-subheading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 50px 0 24px;
  color: var(--color-teal);
  font: 700 18px / 1.4 var(--font-heading);
}

.section-subheading::before {
  content: '';
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border: 3px solid var(--color-ochre);
  border-radius: 50%;
}

.member-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 157px;
  gap: 18px;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--color-ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.member-portrait { position: relative; }
.member-portrait img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.member-roman-name {
  position: absolute;
  left: 22px;
  bottom: 18px;
  margin: 0;
  color: var(--color-canvas);
  font: 700 24px / 1 var(--font-display);
}

.member-name { margin: 0 0 6px; font: 700 18px / 1.4 var(--font-heading); }
.member-dates { font-size: 11px; line-height: 1.6; letter-spacing: 0.05em; }
.member-invitation { font: 400 10px / 1.4 var(--font-heading); }
.member + .member { margin-top: 30px; }

/* Recommended native disclosure structure */
.benefit { margin: 0 2px 16px; border-bottom: 1px solid var(--rule-color); }
.benefit summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 16px 12px 16px 20px;
  font: 400 18px / 1.4 var(--font-heading);
  cursor: pointer;
  list-style: none;
}
.benefit summary::-webkit-details-marker { display: none; }
.benefit summary::after { content: '+'; color: var(--color-teal); }
.benefit[open] summary::after { content: '−'; }
.benefit-answer { padding: 0 20px 20px; }

.facts { margin: 0; font-size: 13px; line-height: 1.8; }
.fact-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  padding-block: 11px;
  border-bottom: 1px solid var(--rule-color);
}
.facts dt { font-family: var(--font-heading); }
.facts dd { margin: 0; letter-spacing: 0.1em; overflow-wrap: anywhere; }

.training-step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  padding-block: 22px;
  color: var(--color-teal);
}
.training-step__number { color: var(--color-ochre); font: 600 16px / 1 var(--font-display); }
.training-step__text { font-size: 15px; line-height: 1.6; letter-spacing: 0.1em; }

.application-block { padding-block: 50px 120px; text-align: center; }
.application-note { margin: 0 0 14px; color: var(--color-teal); font-family: var(--font-heading); }

.recruit-page .application-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100%, var(--application-width));
  min-height: var(--application-height);
  padding: 18px 24px;
  border-radius: 999px;
  color: var(--color-yellow);
  background: var(--color-teal);
  font: 400 20px / 1.4 var(--font-heading);
  text-decoration: none;
}

.application-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 var(--arrow-size);
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-radius: 50%;
  color: var(--color-teal);
  background: var(--color-yellow);
}

.reading-rail {
  position: fixed;
  left: calc(50% + 270px);
  top: 50%;
  z-index: 10;
  width: var(--rail-width);
  padding: 32px 20px 30px 18px;
  border-radius: 0 0 20px 0;
  color: var(--color-white);
  background: var(--color-teal);
  transform: translateY(-50%);
  visibility: hidden;
}

.recruit-page[data-reading='true'] .reading-rail { visibility: visible; }
.reading-rail nav { display: grid; gap: 22px; }
.reading-rail a { font: 400 16px / 1.2 var(--font-heading); text-decoration: none; }
.reading-rail .rail-application { color: var(--color-yellow); font-size: 18px; }

.recruit-footer { padding: 0 24px 20px; text-align: center; }
.footer-machine {
  display: grid;
  grid-template-columns: 1fr 120px 1fr;
  align-items: center;
  gap: 12px;
}
.footer-machine::before,
.footer-machine::after { content: ''; height: 2px; background: var(--color-ink); }
.footer-machine img { width: 120px; height: 90px; object-fit: contain; }
.footer-slogan { margin: 12px 0 4px; font: 700 var(--footer-title-size) / 1.3 var(--font-display); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 24px; margin-block: 40px 28px; }
.footer-links a { font: 400 12px / 1.4 var(--font-heading); text-decoration: none; }

.recruit-page :focus-visible { outline: 2px solid var(--color-teal); outline-offset: 4px; }
.reading-rail :focus-visible,
.menu-toggle:focus-visible { outline-color: var(--color-yellow); }

/* Recommended adaptation boundary; the full source breakpoint is unverified */
@media (max-width: 1110px) {
  .recruit-page {
    --brand-width: 224px;
    --text-hero: 40px;
    --text-descriptor: 12px;
    --text-lead: 24px;
    --section-title-size: 28px;
    --footer-title-size: 24px;
  }
  .yard-backdrop { position: absolute; bottom: auto; height: 681px; }
  .yard-wordmark { left: 26px; top: 67px; }
  .yard-photo--warehouse { left: 21.8%; top: 111px; width: 21.8%; }
  .yard-photo--reel { left: 51.54%; top: 75px; width: 20.26%; aspect-ratio: 79 / 103; }
  .yard-photo--scrap { left: 11%; top: 301px; width: 17.7%; }
  .yard-photo--truck { right: auto; left: 79.75%; top: 61px; width: 28%; }
  .yard-photo--fleet { right: auto; left: 85.6%; top: 236px; width: 20%; }
  .yard-photo--lower { left: 0; top: 429px; width: 22.8%; aspect-ratio: 3 / 4; }
  .yard-photo--tree { right: auto; left: 81.8%; top: 405px; width: 25%; }
  .vertical-claim--growth { top: 104px; font-size: 16px; }
  .vertical-claim--safety { left: 16.88%; top: 191px; font-size: 18px; }
  .hiring-badge { left: 12px; top: 550px; bottom: auto; width: 110px; font-size: 16px; }
  .hiring-badge small { font-size: 10px; }
  .menu-toggle { display: grid; }
  .reading-rail { display: none; }
  .hero { height: 681px; }
  .hero-photo { left: 35.13%; top: 196px; width: 45.38%; }
  .hero-slogan { left: 27%; top: 342.83px; }
  .hero-descriptor { left: 33.11%; top: 479.22px; }
  .copy { width: auto; margin-inline: var(--mobile-gutter); }
  .reading-section { padding-block: 85px 5px; }
  /* Uses the visible surface boundary instead of the source's overlapping box */
  .message-section { padding-top: 90px; }
  .message-heading { font-size: 28px; }
  .section-title { margin-bottom: 39px; }
  .member-summary { grid-template-columns: minmax(0, 1fr) 137px; }
  .member-roman-name { left: 8px; bottom: 4px; font-size: 19.5px; }
  .member-name { font-size: 16px; }
  .employment-facts .fact-row { grid-template-columns: 1fr; gap: 4px; }
  /* Recommended protection against text showing behind persistent identity */
  .recruit-page[data-reading='true'] .recruit-header {
    min-height: 90px;
    background: var(--color-white);
  }
}

@media (prefers-reduced-motion: reduce) {
  .recruit-page *,
  .recruit-page *::before,
  .recruit-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
```

The CSS covers the principal layout and component treatments. Supply the remaining employment-sign composition, image cutouts, actual content, and navigation/disclosure controllers separately. In particular, do not expose an inert hamburger: implement its menu panel and state before using it. The starter has not been executed or visually tested during this analysis.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This does not identify the framework used by the original page. Define the properties above first.

```css
@theme inline {
  --color-recycle: var(--color-teal);
  --color-worksite: var(--color-ochre);
  --color-application: var(--color-yellow);
  --color-yard: var(--color-canvas);
  --color-reading: var(--color-white);
  --color-copy: var(--color-ink);

  --font-recruit-display: var(--font-display);
  --font-recruit-heading: var(--font-heading);
  --font-recruit-body: var(--font-body);

  --text-recruit-body: 15px;
  --text-recruit-fact: 13px;
  --text-recruit-lead: var(--text-lead);
  --text-recruit-hero: var(--text-hero);

  --spacing-reading-column: 540px;
  --spacing-mobile-gutter: 24px;
  --spacing-menu-control: 54px;
  --radius-application: 999px;
}
```

## Sources & Evidence

- **Inspected original and final page:** [Nakamura Sogo Kaitai recruitment](https://nakasokaitai.co.jp/recruit). The supplied browser evidence reports HTTP `200` and an unchanged final URL.
- **Inspection timestamp:** `2026-09-12T17:38:09.724Z`, equivalent to September 13, 2026, 02:38:09.724 JST. Separate timestamps for individual images were not supplied.
- **Desktop evidence:** three current-page captures at `1440 × 1000`, covering the opening, member-to-Works transition, and contact/application/footer area; rendered document geometry and computed styles at the same viewport.
- **Mobile evidence:** two current-page captures at `390 × 844`, covering the opening and application/footer area; rendered document geometry and computed styles at the same viewport.
- **Rendered DOM:** page title, section text, semantic elements, button roles, link destinations, element rectangles, font families, sizes, weights, line heights, tracking, padding, custom properties, and transition declarations.
- **Original-page identity evidence:** the company-information section and footer name `有限会社 中村総合解体`. The rendered corporate-site link targets [nakasokaitai.co.jp](https://nakasokaitai.co.jp/); that separate page was not inspected here.
- **Inspection limitations:** readiness checks waited for load, finite motion, layout/text stability, and visible image decoding within stated time limits. They do not guarantee delayed-content completeness. SharedWorkers and service workers were disabled. No additional browsing, commands, file inspection, menu activation, disclosure activation, hover testing, or external-form interaction was performed for this reference.

This reference describes the current page represented by the supplied inspection. Measured values, visual estimates, and recommended implementation choices are distinguished throughout.