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 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

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.”
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.”
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.”
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.”
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.

: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.

@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. 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; 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.