# Tanseisha Recruit — Style Reference

> A recruitment site assembled like an oversized poster: angular black lettering, bright paper strips, candid portraits, and tactile white stock.

**Website:** [Tanseisha Recruit](https://www.tanseisha.co.jp/recruit/potential/)
**Original URL:** https://www.tanseisha.co.jp/recruit/potential/
**Final URL:** https://www.tanseisha.co.jp/recruit/potential/
**Theme:** light, with white and textured paper surfaces, black typography, and five prominent accent colors.
**Inspected:** September 12, 2026, from supplied browser evidence retrieved at 11:19:55.538 UTC / 20:19:55.538 JST.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current recruitment home page, including the opening composition, introductory statement, NEWS, ABOUT, JOB&TALK, PROJECT, WORKS, WORK STYLE, recruitment invitation, and footer. Visual captures cover the desktop opening, the employee-to-project transition, the closing photo collage and footer, and the mobile opening and footer. Other section details come from the supplied rendered DOM and computed styles. Linked pages and the application portal were not inspected.

Tanseisha presents recruitment through the visual vocabulary of an energetic exhibition poster. Oversized Japanese lettering crosses the opening screen on red, blue, pink, and lavender strips. A dominant red message, “満たせ、はみ出せ。”, sits above two separate yellow English labels. The composition extends beyond the viewport, making the browser feel like a crop into a much larger arrangement.

Below that opening, the design becomes tactile and photographic. Circular employee portraits, narrow colored name labels, rectangular project photographs, and white caption strips sit against wrinkled or speckled paper. Very large English section names establish rhythm, while compact Japanese text supplies practical information. The persistent logo, black ENTRY link, and pale menu square provide stable navigation through the changing compositions.

This is a recruitment hub with multiple editorial and informational destinations. Its structure supports learning about the company, people, projects, working conditions, and application requirements. Preserve that breadth when adapting the design.

## How to Read This Reference

- **Measured** means a value appears in the supplied computed styles or element bounds. Bounds are rounded here for readability.
- **Calculated** means arithmetic derived from those measurements, such as the gap between neighboring cards.
- **Estimated** means a visual approximation from the original-page captures. Estimated colors and sizes are not source declarations.
- **Recommended** means an implementation choice for a new site, including the CSS examples and proposed responsive breakpoint.
- **Named tokens** are reusable aliases unless a source custom property is explicitly identified.
- **Transformed bounds** include rotation or scaling. They are not necessarily the element's untransformed CSS width and height.
- The element sample omits many nested spans, images, pseudo-elements, and event handlers. An inherited `12px` on a heading wrapper does not describe the large lettering inside it.
- Static captures establish appearance and layout. Transition declarations establish configured durations, but do not prove triggers, autoplay, drag behavior, or complete animation sequences.

## Tokens — Colors

### Default Palette

| Name | Value | Source / suggested token | Role and evidence |
| --- | --- | --- | --- |
| White | `#FFFFFF` | Suggested `--color-white` | Measured root background; visible opening canvas, caption labels, and inactive project selectors |
| Black | `#000000` | Suggested `--color-ink` | Measured text and ENTRY fill; visible display lettering, menu strokes, footer rules, and corporate mark |
| Signal Red | `#FD2C2C` | Source `--red`; alias `--color-red` | Measured planner name label and recruitment pill; red also dominates the opening artwork |
| Electric Blue | `#0076FF` | Source `--blue`; alias `--color-blue` | Measured selected project button, data-analyst label, and office link; visible graphic strips and project backdrop |
| Poster Pink | `#FCADD7` | Source `--pink`; alias `--color-pink` | Measured ABOUT frames and production name label; visually central to the PROJECT paper panel |
| Lavender | `#A394FC` | Source `--ppl`; alias `--color-lavender` | Measured job-introduction link, sales label, and training link; visible opening strips |
| Pale Neon Yellow | `#FFFF81` | Source `--yel`; alias `--color-yellow` | Measured ABOUT label, designer name label, and welfare link; related yellow artwork appears in the opening |
| Menu Gray | `#EDEDEA` | Source `--gray_ed`; alias `--color-menu` | Measured menu-control background at both viewports |
| Label Gray | `#BCBCBC` | Source `--gray_bc` | Measured experience-creator name label |

The central opening banner looks more intensely red than some interface fills. Its artwork color was not exposed separately. Use `#FD2C2C` for the verified interface token; do not claim that every red pixel inside an image uses that exact value. The same distinction applies to the yellow English artwork and textured pink paper.

### Additional Declared Colors

| Source property | Value | Evidence limit |
| --- | --- | --- |
| `--ppl02` | `#A293FB` | Declared; a specific visible component assignment was not supplied |
| `--yel02` | `#E0E000` | Declared; a specific visible component assignment was not supplied |
| `--yel03` | `#FFFF77` | Declared; a specific visible component assignment was not supplied |
| `--gray_ee` | `#EEEEEE` | Declared; a specific visible component assignment was not supplied |

The DOM also exposes general WordPress palette, gradient, shadow, spacing, and aspect-ratio presets. Their presence does not establish use in this design. The inspected compositions rely on flat color, paper texture, overlap, and photography; there is no evidenced site-wide gradient or elevation system.

### Color Relationships

Use black as the common ink across the five accent colors. Keep white text concentrated on black controls and labels, as seen in ENTRY and the works link. Color distinguishes paper pieces and content categories without changing the overall ink treatment.

The first six employee labels use lavender, red, yellow, pink, blue, and gray respectively. This is an observed sequence for the six roles, not evidence of an extensible semantic color system.

## Tokens — Typography

### Japanese Interface and Editorial Text

- **Measured family:** `'Zen Kaku Gothic New', sans-serif`.
- **Measured body weight:** `500`.
- **Measured editorial emphasis:** `700` on the introductory statement, news summaries, ABOUT label, and project descriptions.
- **Character:** clear Japanese sans-serif with generous tracking and deliberately varied scale.
- **Suggested alias:** `--font-body`.

The body computes to `12px / 12px` with `1.2px` tracking. Actual reading blocks override that tight inherited line height. Reuse their component-specific leading rather than applying the body line height to paragraphs.

### Secondary Latin and Numeric Typography

`'Afacad Flux', sans-serif` is directly measured on the numbered project buttons at weight `700`, and on WORK STYLE link wrappers at weight `600`.

The oversized English headings look like bold sans-serif display typography, but their nested font declarations were not included. Afacad Flux is an evidenced available family and a reasonable recommended display choice; its use on every large English heading is not verified.

### Opening Lettering and Logos

The Japanese opening message uses highly angular, condensed, geometric lettering. It reads as designed artwork, with cuts and extended strokes that are not explained by the inherited body font. The sampled H1 contains no extracted text even though the message is visible.

Treat the Japanese message and the two English opening labels as graphic assets when reproducing the original appearance. Their file types, font construction, and alternative text were not supplied. Neither the recruitment wordmark nor the corporate logo should be recreated by guessing a font.

The HTML element's measured `Times` family is an inherited root default. It does not establish a serif design direction for this page.

### Type Scale

| Role | Desktop measured value | Mobile measured value | Tracking / interpretation |
| --- | --- | --- | --- |
| Base interface | `12px / 12px`, weight `500` | Same | `1.2px` |
| ENTRY | `50px / 50px`, weight `500` | `30px / 30px`, weight `500` | `1.5px` / `0.9px`, both `0.03em` |
| Introductory statement | `19px / 47px`, weight `700` | `16px / 37px`, weight `700` | `2.85px` / `1.2px` |
| News summary | `16px / 28px`, weight `700` | Same | `1.2px` |
| ABOUT Japanese label | `29px / 29px`, weight `700` | Same | `1.2px` |
| Job-introduction link | `45px / 45px`, weight `500` | `33px / 33px`, weight `500` | `1.2px` |
| Employee name label | `16px / 16px`, weight `500` | `10px / 10px`, weight `500` | `2.4px` / `1.5px`, both `0.15em` |
| Project description | `25px / 42px`, weight `700` | `16px / 26.88px`, weight `700` | `1.2px` |
| Project selector number | `26px`, weight `700` | Same | Afacad Flux; `0.6px` tracking |
| Works credit text | `12px / 20px`, weight `500` | Same | `1.2px` |
| Works-index link | `41px / 41px`, weight `500` | `33px / 33px`, weight `500` | `1.2px` |
| WORK STYLE Japanese label | `25.875px / 25.875px`, weight `700` | `16px / 16px`, weight `700` | Black fill, white text |
| Recruitment pill text | Wrapper inherits `12px`; inner display size unavailable | `30px / 30px`, weight `500` | Do not use the desktop wrapper size as its visible type size |
| Footer navigation links | `12px / 21.2308px`, weight `500` | Same | `1.8px`, equivalent to `0.15em` |
| Footer policy links | `10px / 15px`, weight `500` | `11px / 22px`, weight `500` | `0.5px` / `0.55px` |
| Copyright | `10px / 10px` | `11px / 11px` | `0.05em` |

**Visual estimates:** the desktop PROJECT heading is approximately `130–150px`; the visible Japanese project title is approximately `64–72px`. These are estimates from the capture, not computed font sizes. The Quick Start uses recommended display sizes rather than pretending the heading-wrapper measurements reveal the nested typography.

## Tokens — Spacing & Shapes

### Source Sizing Context

The measured root font size is `100px` at both viewports. Consequently, one source `rem` would equal `100px` in these captures. The Quick Start keeps conventional document sizing and uses explicit pixel and viewport values instead.

The source declares these width-related properties:

| Property | Desktop | Mobile | Evidence limit |
| --- | --- | --- | --- |
| `--maxw_px` | `1400px` | `1400px` | Declared maximum-width reference |
| `--inw_px` | `1160px` | `1160px` | Declared inner-width reference |
| `--atw_px` | `1280px` | `390px` | Changes between supplied viewport samples |
| `--atw` | `1280` | `390` | Unitless counterpart |

The declarations do not expose their complete formulas or every consumer. Actual sections use different widths; do not force the entire page into one `1160px` container.

### Spacing Scale

The design uses local spacing systems rather than one proven universal increment.

| Use | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Header left inset | `30px` | `10px` | Measured |
| News horizontal padding | `25px` | `25px` | Measured |
| News vertical padding | `100px` | `50px` | Measured |
| ABOUT outer padding | `250px 50px` | `80px 25px 100px` | Measured |
| ABOUT thick / thin frame insets | `75px` / `10px` | `50px` / `5px` | Measured; sides alternate between panels |
| Employee-card gap | `60px` | `25px` | Calculated from adjacent card bounds |
| Project-selector gap | `20px` | `15px` | Calculated from button positions |
| Works-card gap | `46px` | `25px` | Calculated from adjacent image positions |
| Works credit inset | `25px` per side | `15px` per side | Calculated from image and paragraph bounds |
| Footer padding | `95px 25px 65px` | `45px 20px` | Measured |

### Border Radius

| Element | Measured radius | Design role |
| --- | --- | --- |
| Opening strips and standard section links | `0` | Cut-paper rectangles |
| ABOUT panels and project imagery wrappers | `0` | Strong rectangular framing |
| Employee-photo crop | `9999px` | Circular portraits inside square bounds |
| Employee name labels | `9999px` | Narrow capsules contrasting with angular artwork |
| Project selectors | `50%` | Circular numbered controls |
| Recruitment link | `9999px` | Large pill-shaped invitation |

### Layout Measurements

| Element | Desktop | Mobile |
| --- | --- | --- |
| Header | `1440 × 65px` | `390 × 44px` |
| Recruitment-logo wrapper | `197 × 26px`, x = `30px` | `182 × 26px`, x = `10px` |
| ENTRY target | `190 × 65px` | `124 × 44px` |
| Menu target | `65 × 65px` | `44 × 44px` |
| Main message transformed bounds | `912.0 × 306.8px`, x ≈ `264.0`, y ≈ `247.0` | `399.4 × 178.7px`, x ≈ `−4.7`, y ≈ `289.2` |
| Introductory statement | `524.4 × 423px` | `340 × 370px` |
| News heading container | `900px` wide | `340px` wide |
| ABOUT panel | `611.1 × 418.1px` | `340 × 250px` |
| Employee portrait | `450 × 450px` | `290 × 290px` |
| Active project image wrapper | `1023.75 × 593.05px` | `360 × 305px` |
| Project selector | `80 × 80px` | `80 × 80px` |
| Works image | `590 × 363.31px` | `320 × 197.05px` |
| Recruitment section | `1440 × 1000px` | `390 × 844px` |
| Recruitment pill | `420 × 115px` | `224 × 65px` |
| Footer | Approximately `643.1px` high | Approximately `1063.1px` high |

### Rotation

The source exposes angle tokens of `−4deg`, `−6deg`, `−8deg`, `−12deg`, and `6deg`; mobile additionally exposes `−2deg` and `2deg`. Their exact component assignments were not supplied.

Visually, the main red opening message slopes down toward the right, while the yellow TANSEISHA label rises toward the right. The PROJECT paper panel rises gently toward the right. The Quick Start approximates those relationships with explicitly recommended transforms. These should be tuned with the actual artwork rather than inferred from bounding-box width alone.

## Components

### Persistent Recruitment Header

**Role:** maintain identity, application access, and navigation throughout the page.

The header spans the viewport with a transparent background. The recruitment logo sits at the left; ENTRY and a square menu target form a flush group at the upper-right edge. There is no visible header border or shadow. The same controls remain at the top in the middle and footer captures, supporting persistent positioning.

ENTRY uses a black rectangular fill, white uppercase lettering, and square corners. It measures `190 × 65px` on desktop and `124 × 44px` on mobile. Its observed destination is `https://www.i-note.jp/tanseisha/select/27_28select.html`; this is a link to an external application-selection page, whose contents were not inspected.

The adjacent menu square uses `#EDEDEA` and two black horizontal strokes. Its observed target is an anchor ending in `#`. The header DOM contains a navigation inventory, but no open-menu capture or activation result was supplied. Do not infer a full-screen overlay, drawer direction, or focus behavior.

### Opening Typographic Composition

**Role:** deliver the recruitment identity before the editorial content begins.

The composition has four distinct layers:

1. A clean white full-screen field.
2. Numerous diagonally oriented colored strips with repeated black Japanese lettering, cropped by every edge.
3. A dominant red message strip reading “満たせ、はみ出せ。”.
4. Two separate yellow labels reading TANSEISHA and RECRUIT, each with its own position and angle.

The lettering is exceptionally large and geometrically cut. Background strips pass behind the central message; their collision and clipping create the sense of scale. The yellow labels remain independent pieces rather than becoming a single horizontal subtitle.

At 1440px wide, the red message's transformed bounds are about 912px wide and centered. At 390px, they extend about 4.7px outside each horizontal edge. This slight clipping is part of the mobile composition. Avoid extending that overflow behavior to navigational or editorial text.

The mobile yellow labels form a stepped arrangement: TANSEISHA occupies the left and upper position, while RECRUIT sits lower and farther right. The supplied mobile opening is clearly recomposed rather than uniformly reduced from desktop.

### Introductory Statement

**Role:** connect the graphic message with the company's approach to creating spaces.

The statement is a bold, narrow Japanese reading block. Its first line is “空間とは、こころを動かす体験のメディア。”. Desktop bounds place it near the horizontal center at x ≈ `458px`, with `19px` type and `47px` leading. Its generous line spacing gives the prose a deliberate, manifesto-like pace.

On mobile, the block becomes `340px` wide with `25px` side insets, `16px` type, and `37px` leading. It starts at document y = `944px`, below the 844px opening capture. Keep this text in normal document flow and allow natural Japanese wrapping.

An additional graphic wrapper follows the text: approximately `410px` wide on desktop and `280px` on mobile. Its file and exact artwork content were not exposed.

### News List

**Role:** provide timely recruitment updates within the expressive page.

The supplied text contains three dated announcements. The desktop heading container is centered at `900px` wide. Summary paragraphs begin at x = `445px`, leaving a separate left region for the dates. Their measured vertical step is `53px` in the captured desktop state.

Mobile summaries remain `16px / 28px`, but use narrower `310px` blocks beginning at x = `40px`. The first two wrap to two lines, and the third to three. The NEWS section consequently becomes taller on mobile: `607px` versus approximately `502px` on desktop, despite reduced section padding.

Additional announcement detail exists inside the section text sample, but no expansion interaction was recorded. Treat the dated list as established; accordion controls and expansion behavior remain unverified.

### ABOUT Feature Panels

**Role:** route visitors to the company's philosophy and a short company introduction.

Two large pink link panels use deliberately uneven framing. The first leaves thick pink space at the left and bottom; the second leaves it at the top and right. Their destinations correspond to “丹青社の想い” and “5分でわかる丹青社”.

On desktop, each panel is approximately `611 × 418px`. Their left edges are at `50px` and `779px`, and the second begins `180px` lower than the first. Inner image wrappers are approximately `526 × 333px`. This creates a staggered editorial pairing.

On mobile, the panels stack at x = `25px`, each `340 × 250px`, with a `100px` gap. The asymmetric frames remain, using `50px` thick sides and `5px` thin sides. The yellow Japanese section label appears before the first panel in the mobile DOM geometry; on desktop its bounds sit near the lower part of the paired composition.

These dimensions and fills are DOM-supported. No dedicated ABOUT screenshot was supplied, so the inner image subjects and complete decorative background cannot be specified confidently.

### JOB&TALK Portrait Rail

**Role:** introduce six job families through conversations between employees.

Each destination combines a Japanese role label, an English role name, a pair of employee names, and a circular photograph. The desktop capture shows the first three portraits: naturally lit employee pairs photographed in office settings. The colored name labels overlap the lower-left portion of the circular crops and arrange Japanese characters vertically along a tilted capsule.

Portraits measure `450px` square on desktop and `290px` square on mobile. Desktop positions advance by `510px`, giving a calculated `60px` gap. Mobile positions advance by `315px`, giving a `25px` gap. The next card remains partly visible at the right edge. This is a horizontal rail, not a stacked list of all six portraits.

The label padding changes from `16px 12px` to `10px 7.5px`, while its type changes from `16px` to `10px`. The large rotated label bounds should not be mistaken for its unrotated width.

The lavender “職種紹介” link is positioned beside the heading on desktop and after the portrait rail on mobile. Its desktop target is `320 × 90px`; its mobile transformed bounds are about `203 × 66px`.

Horizontal arrangement and linked cards are established. Touch swiping, dragging, arrow controls, and automatic progression were not exercised.

### PROJECT Feature Stage

**Role:** present three substantial editorial stories about the company's work.

The desktop capture shows a broad pink textured sheet over a blue layer. Its upper edge is tilted, and the oversized PROJECT heading occupies the upper-right region with the Japanese descriptor below. A large, square-cornered photograph sits horizontally beneath it.

White caption strips overlap the image near its upper-left edge. The visible description reads “空間演出の専門チームが仕掛ける、自主実践型の研究成果発表イベント”, followed by the larger title “超文化祭”. The captions are level even though the surrounding sheet and heading are angled. Separate the decorative rotation from readable content when implementing this component.

Three story anchors share the same layout rectangle, supporting a layered slide presentation. The desktop active image wrapper measures about `1024 × 593px`. Mobile uses `360 × 305px`, a substantially taller crop relative to its width. The active description also shrinks from `25px / 42px` to `16px / 26.88px`.

The numbered buttons remain `80px` circles at both viewports. On desktop they sit toward the lower-right of the stage with `20px` gaps; on mobile they begin at x = `15px` with `15px` gaps below the image. The selected fill is blue, and the remaining fills are white, all with black numbers.

The desktop DOM records item 1 as selected; mobile records item 2. This is evidence of different captured states, not a rule to change the story at a breakpoint. Autoplay timing and button-activation results are unverified.

### WORKS Project Rail

**Role:** demonstrate the range of completed spatial projects.

The DOM provides six unique works, including a fitness facility, a public park, a hotel, an exhibition booth, a showroom, and a museum renewal. Each item combines an image, a project title, and compact owner/service-scope information.

Image wrappers measure `590 × 363.31px` on desktop and `320 × 197.05px` on mobile. Both preserve an approximately `1.624:1` ratio. Credit paragraphs have narrower widths of `540px` and `290px`, with `12px / 20px` type.

Neighboring cards extend beyond the viewport. Repeated sets of the six projects appear in the DOM, consistent with a looping rail implementation. That duplication does not establish autoplay, its direction, or a specific carousel library.

A black rectangular “実績紹介” link follows the rail. It measures `290 × 75px` on desktop, with `41px` type. On mobile it has `33px` type and approximately `203 × 66px` transformed bounds, aligned toward the right.

The rail geometry and content are DOM-supported. A full WORKS visual capture was not supplied, so image grading and the complete section background remain outside the visual evidence.

### WORK STYLE Links

**Role:** route visitors to training, benefits, and office information.

The measured links form three tall adjacent colored strips: lavender for training, yellow for benefits, and blue for the working environment. Desktop link bounds are `150 × 866.5px`. Mobile bounds include transforms and measure about `115.6 × 404.9px`; those widths are not untransformed strip widths.

The section also includes repeated WORK STYLE text and a contrasting black Japanese label with white text. On mobile, that label's narrow transformed bounds indicate a strong change in orientation compared with the desktop label.

Preserve the strip-based navigation concept when adapting this section. The supplied data does not establish the full decorative composition, exact writing-mode declarations, or interaction endpoints.

### Recruitment Invitation and Closing Photography

**Role:** create a final application-information destination before the sitemap.

The recruitment section measures exactly one inspected viewport high: `1000px` on desktop and `844px` on mobile. Its DOM contains the bilingual RECRUIT heading and a red pill linking to “募集要項”.

The desktop pill is `420 × 115px` and appears below the heading. The mobile pill is `224 × 65px`, with `30px` text, positioned above the heading and toward the right in the measured layout. This reordering is a responsive composition change.

The desktop footer capture reveals the lower portion of a photographic collage immediately above the footer: meeting scenes and shelves of books or samples, divided into overlapping angled crops. The complete recruitment composition was not captured, so do not infer an exact full-screen photo arrangement from that partial view.

### Footer Sitemap

**Role:** consolidate all recruitment destinations and provide corporate and policy links.

The footer uses a lightly speckled white paper surface with black typography and generous empty space. At desktop width, its approximately `1000px` inner region starts at x = `220px` and forms four groups of columns:

1. TOP, NEWS, and ABOUT.
2. JOB&TALK and PROJECT.
3. WORKS and WORK STYLE.
4. RECRUIT and the corporate mark, separated by a thin vertical rule.

English category labels sit above smaller Japanese descriptors. Sub-links are closely stacked at approximately `21.23px` leading. Legal links form a single underlined row near the bottom, with copyright below.

On mobile, the footer becomes a sequence of category rows. Labels occupy a `140px` left column beginning at x = `20px`; destination lists begin at x = `160px`. The longest job title wraps within the right column. These are visibly expanded lists, not an evidenced accordion.

A horizontal rule separates the navigation from the corporate mark. The mark grows from approximately `134 × 29px` on desktop to `168 × 38px` on mobile. Policy links stack vertically at `11px / 22px`, followed by copyright. The mark links to the corporate root, and the page title and copyright independently identify Tanseisha as the site operator.

## Tokens — Motion & Interaction

| Treatment | Measured declaration or state | Interpretation and limit |
| --- | --- | --- |
| Main opening message | `transform 0.25s 1.2s, opacity 0.05s 1.2s` | Configured delayed transform and short opacity change; start/end transforms were not supplied |
| TANSEISHA opening label | `transform 0.25s 1.21s, opacity 0.05s 1.21s` | Starts 10ms after the main message according to the declaration |
| RECRUIT opening label | `transform 0.25s 1.22s, opacity 0.05s 1.22s` | Starts a further 10ms later |
| Menu control | `background 0.3s` | Background transition exists; its interactive destination color was not sampled |
| Decorative news/project wrappers | `transform 0.5s` | Supports geometric changes; the trigger and endpoints are unknown |
| Job, works, and recruitment links | `transform 0.25s` | Short transform feedback is configured; exact hover transforms are unknown |
| Active project image wrapper | `transform 0.25s, opacity 0.05s` | Slide-state transition properties are exposed |
| Active project description | `transform 0.25s 0.15s, opacity 0.05s 0.15s` | Text transition is delayed by 150ms relative to the image declaration |
| Footer destination links | `background 0.35s` | A background response is configured; no hover capture establishes its final appearance |
| Project selection | Item 1 blue on desktop, item 2 blue on mobile | Distinct captured states; no verified cause or interval |
| Horizontal rails | Offscreen items and repeated WORKS groups | Structural evidence for rail behavior; input method and continuous movement unverified |

Many sampled elements report `animation: none` and a bare `transition: all`. Neither proves the entire page is static or supplies a meaningful duration. Child elements, pseudo-elements, and script-driven effects are not fully represented.

The capture process waited for initial observation and finite visible geometry to settle, temporarily paused perpetual animations during readiness checks, and then resumed them. This supports analysis of settled states, not reconstruction of the complete motion choreography.

**Recommended motion direction:** short rotations or translations that retain the paper-piece metaphor, using approximately `250ms` for direct feedback and `500ms` for larger decorative changes. These durations are source-informed; proposed endpoints and easing remain adaptation choices. Keep all content visible without animation and provide a reduced-motion mode.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Opening canvas | Flat white | Lets bright strips and black letterforms dominate |
| Opening artwork | Solid colored rectangles with sharp black lettering | Carries the recruitment message and scale |
| Editorial background | White paper with wrinkles or fine speckles | Connects people and projects to a physical, printed medium |
| PROJECT backdrop | Tilted pink textured sheet over blue | Marks a major chapter change |
| Captions | Flat white rectangles with black text | Makes editorial copy readable over photographs |
| Portraits | Circular photographic crops | Gives people a distinct shape within the angular system |
| Name and recruitment labels | Colored capsules | Adds selective softness and a recognizable link treatment |
| Footer | Quiet speckled paper with fine black rules | Returns the long page to a practical information hierarchy |

Depth comes from overlapping edges, changes in scale, and photographic texture. No general soft-shadow or glass-blur treatment is evidenced.

## Imagery

The image system has three separate responsibilities.

**Lettering artwork** delivers the opening impact. Use crisp edges, strongly condensed proportions, and large repeated characters. Preserve the difference between the central readable message and peripheral fragments that are intentionally cropped.

**Employee photography** supplies personal credibility. The visible portraits show real pairs of people in naturally lit office environments, with dark clothing, bookshelves, desks, and informal expressions. Circular cropping keeps faces prominent while allowing the environment to remain present. Avoid replacing these with isolated studio headshots if the aim is to preserve the observed character.

**Project and workplace photography** communicates spatial practice. The visible PROJECT image is a large horizontal editorial photograph with dark areas behind the subject. The closing collage mixes people at work with shelves and interior details. Let these photographs retain natural tonal variation; the accent colors belong mainly to the surrounding paper and labels.

Texture should stay subtle enough to support small text. The portrait-to-project transition shows broad wrinkles, while the footer shows a finer speckled stock. Treat them as distinct texture scales. Photography should use normal image rendering; the site does not exhibit a pixel-art treatment.

### Observed Asset References

The evidence does not expose image `src` values, filenames, native resolutions, or downloadable font files. The following inventory identifies observed roles rather than inventing asset paths.

| Asset role | Evidence | Implementation guidance |
| --- | --- | --- |
| Recruitment wordmark | Desktop and mobile header captures | Use an authorized logo asset with its original proportions |
| Japanese opening message | Desktop and mobile opening captures; empty-text H1 wrapper | Preserve as artwork or faithfully authored vector lettering; retain an accessible text equivalent |
| TANSEISHA / RECRUIT labels | Both opening captures; separately measured wrappers | Keep as independent layers with separate placement |
| Repeated colored message strips | Both opening captures | Use decorative variants and hide redundant repetitions from assistive technology |
| Paper textures | Desktop middle/footer and mobile footer captures | Supply texture files explicitly; no source path or tile size is known |
| Employee-pair portraits | Desktop middle capture and six linked DOM entries | Provide circular focal crops at desktop and mobile sizes |
| PROJECT photography | Desktop middle capture and three story entries | Support a wider desktop frame and taller mobile crop |
| WORKS imagery | Image-wrapper dimensions and project text in the DOM | Use project-specific photography; native source sizes are unavailable |
| Closing workplace collage | Upper part of desktop footer capture | Compose angled photo pieces while keeping important faces clear |
| Corporate mark | Desktop and mobile footer captures | Use the original black mark, scaled independently from the header logo |

## Layout & Responsive Behavior

The page is a long scrolling document with a persistent header. Its measured document height is approximately `9015.73px` on desktop and `7465.83px` on mobile. These are captured content heights, not recommended fixed dimensions.

### Section Rhythm

| Section | Desktop measured height | Mobile measured height | Responsive interpretation |
| --- | --- | --- | --- |
| NEWS | `502.25px` | `607px` | Wrapping increases height despite smaller padding |
| ABOUT | `1098.06px` | `873px` | Staggered side-by-side panels become stacked panels |
| JOB&TALK | `930px` | `627px` | Smaller portraits; horizontal rail retained |
| PROJECT | `958.05px` | `804.98px` | Taller image proportion and selectors below content |
| WORKS | `1057.31px` | `766.05px` | Smaller image cards; horizontal rail retained |
| WORK STYLE | `866.5px` | `399.31px` | Large strip composition becomes more compact and transformed |
| Recruitment | `1000px` | `844px` | Equals the viewport height in both supplied samples |
| Footer | `643.06px` | `1063.11px` | Four-column sitemap becomes stacked label/list rows |

### Desktop Composition

Full-width decoration alternates with narrower reading regions. The statement is about `524px` wide, NEWS uses a `900px` heading container, and the footer uses an approximately `1000px` inner region. ABOUT panels spread almost edge to edge, while the portrait and works rails continue outside the viewport.

This changing width is essential to the rhythm. A single uniform content container would flatten the transitions between poster, editorial text, portrait rail, and sitemap.

### Mobile Composition

The mobile design preserves large-scale graphics and selective overlap. It does not reduce every desktop dimension proportionally:

- Header height changes from `65px` to `44px`, but the logo remains almost as wide.
- The main opening message becomes slightly wider than the viewport.
- Yellow opening labels shift into a staggered vertical arrangement.
- ABOUT panels stack while retaining their opposing thick frame edges.
- Job and works rails keep one main card and a visible neighboring fragment.
- The job-index link moves below the portraits.
- Project selectors retain their `80px` diameter.
- The recruitment pill moves above the heading.
- Footer category labels and their link lists remain side by side within each stacked row.

Only two viewport sizes were supplied. The original breakpoint, tablet behavior, landscape layout, and behavior below 390px are unknown. The Quick Start's `767px` breakpoint is a recommended adaptation choice.

Clip decorative strips inside their own layers. Keep text, focus indicators, and interactive targets reachable. Reserve enough horizontal rail padding for overlapping name labels, and use explicit mobile focal positions for photographs where necessary.

## Do’s and Don’ts

### Do

- Build the opening around independently positioned graphic strips and a single dominant Japanese message.
- Preserve white space between the colored pieces so that overlap remains legible.
- Use the verified red, blue, pink, lavender, and pale yellow as a coordinated paper palette.
- Keep the header compact, persistent, and visually direct.
- Pair large English section markers with smaller Japanese descriptors.
- Separate rotated decorative sheets from horizontal reading text and photographs.
- Use circular employee photographs and narrow tilted name capsules.
- Preserve asymmetric ABOUT frames and the mobile stacking change.
- Maintain real project titles and service-scope text within the works content.
- Recompose the mobile opening and footer rather than scaling a desktop screenshot.
- Keep the footer calm, dense, and navigable after the more expressive sections.

### Don't

- Don't replace the opening's custom lettering with ordinary body-font text and claim an exact reproduction.
- Don't treat the main message's transformed bounds as its CSS width and height.
- Don't turn all content into identical rounded cards.
- Don't rotate every paragraph or place small text directly on busy photographs.
- Don't recolor photographic subjects with the full accent palette.
- Don't add generic gradients, floating shadows, or glass surfaces.
- Don't shrink the complete desktop sitemap into four unreadably narrow mobile columns.
- Don't interpret repeated DOM items as additional unique projects.
- Don't assume different active project slides indicate different mobile content.
- Don't invent autoplay intervals, menu-open animation, drag controls, or hover endpoints.
- Don't copy the source's numeric `rem` values into a conventional root-size setup without conversion.
- Don't use small source caption sizes as a reason to make essential new content difficult to read.

## Recommended Implementation Additions

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

- Give the menu control a button element, an accessible name, and an accurate expanded state. If it opens a modal navigation panel, implement focus management and Escape dismissal.
- Provide a real textual H1 for “満たせ、はみ出せ。” while marking redundant decorative strips as hidden from assistive technology.
- Keep graphics visible by default. Apply entrance states only after enhancement is ready, and bypass them for reduced motion.
- Make every offscreen rail item reachable through keyboard and touch input. If a scripted rail is used, provide explicit controls and stop automatic progression during interaction.
- Exclude cloned rail items from the accessibility tree and tab order.
- Identify the selected project using semantics and a visible non-color cue, such as a ring around its number.
- Consider raising mobile employee names and policy text to at least `12px`, and increasing essential works text when the content allows. This intentionally improves on the smaller observed sizes.
- Supply responsive image variants, meaningful alternative text, and reserved aspect ratios. Prioritize the opening assets and defer below-the-fold photography.
- Provide a white fallback when paper textures cannot load. Texture must not carry information.
- Test at 390px, intermediate widths, narrow phones, landscape heights, and enlarged text. The supplied evidence verifies only the two listed viewport sizes.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas and caption strips: `#FFFFFF`.
- Text, display lettering, rules, and ENTRY fill: `#000000`.
- Recruitment and red labels: `#FD2C2C`.
- Blue paper and selected project number: `#0076FF`.
- Pink feature framing: `#FCADD7`.
- Lavender role and training accents: `#A394FC`.
- Pale yellow labels: `#FFFF81`.
- Menu square: `#EDEDEA`.
- Paper texture: a separate image layer with a white fallback, not a gradient.

### Overall Prompt

“Create a Japanese recruitment hub inspired by the inspected Tanseisha page. Use a white canvas, black ink, and flat red, blue, pink, lavender, and pale-yellow paper pieces. Open with an oversized custom-lettering composition: diagonal repeated Japanese strips behind one dominant red message and two independent yellow English labels. Keep a transparent persistent header with the recruitment logo at left and a black ENTRY rectangle plus pale two-line menu square at right. Continue into a generously spaced Japanese statement, dated news, staggered pink company panels, a horizontal rail of circular employee-pair portraits with tilted vertical name capsules, and a pink project stage with white caption strips over photography. Finish with work examples, colored work-style links, a recruitment invitation, and a textured sitemap footer. On mobile, recompose the opening, stack the company panels, retain the horizontal rails, and use footer rows with a category column beside each link list. Preserve readable text and use motion only as progressive enhancement.”

### Example Component Prompts

1. **Opening:** “Compose a white 390 × 844 recruitment opening with diagonal colored strips extending beyond the screen. Place a red angular Japanese message almost edge to edge near the vertical middle. Put TANSEISHA on a yellow strip toward the lower-left and RECRUIT on a separate yellow strip below and to the right. Keep the fixed 44px header legible above the artwork.”
2. **Employee rail:** “Build a horizontal sequence of employee-pair photographs cropped into 450px circles on desktop and 290px circles on mobile. Leave a neighboring card partly visible. Overlap each circle's lower-left edge with a slim colored capsule containing vertically arranged names. Use lavender, red, yellow, pink, blue, and gray across the six roles.”
3. **Project stage:** “Place a gently tilted pink paper sheet over a blue backing layer. Set a very large black PROJECT heading toward the upper-right. Keep the main photograph horizontal and overlap its upper-left edge with white rectangular Japanese caption strips. Add three 80px circular number buttons, using blue for the selected item.”
4. **Company panel pair:** “Create two square-cornered pink feature panels. Give the first a thick left and bottom frame, and the second a thick top and right frame. Stagger them vertically on desktop; stack them with generous separation on mobile. Preserve the opposing frame directions.”
5. **Footer:** “Design a black-on-white speckled-paper recruitment sitemap. Use four desktop columns with a thin vertical rule before the recruitment and corporate-logo column. At 390px, switch to stacked rows with a 140px category column and a flexible link column. Place a horizontal rule, black corporate mark, stacked underlined policies, and small copyright below.”

## Quick Start

### CSS Custom Properties

This is an implementation scaffold, not extracted source CSS. It uses measured interface colors and endpoint dimensions, plus recommended display sizes, hero transforms, and a `767px` breakpoint. It intentionally starts with visible static content and a native horizontally scrollable portrait rail.

Load Zen Kaku Gothic New and Afacad Flux separately if available and authorized. Supply the opening graphics, logos, photographs, and `--paper-texture` yourself; no asset URLs were exposed in the evidence. Hero rules assume straight, unrotated artwork. If an asset already includes rotation or surrounding whitespace, normalize it or remove the corresponding transform.

The expected component classes are a `.recruit-site` root; a header containing `.brand` and `.header-actions`; a hero with decorative `.hero-strip` elements and three named foreground graphics; editorial sections; a `.portrait-rail`; a `.project-stage`; and a footer containing columns of category/link groups.

```css
:root {
  /* Measured source colors, exposed through reusable aliases. */
  --color-white: #ffffff;
  --color-ink: #000000;
  --color-red: #fd2c2c;
  --color-blue: #0076ff;
  --color-pink: #fcadd7;
  --color-lavender: #a394fc;
  --color-yellow: #ffff81;
  --color-menu: #ededea;
  --color-label-gray: #bcbcbc;

  /* Measured families; display usage below is an adaptation. */
  --font-body: 'Zen Kaku Gothic New', sans-serif;
  --font-display: 'Afacad Flux', sans-serif;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Measured desktop endpoints. */
  --header-height: 65px;
  --header-inset: 30px;
  --brand-width: 197px;
  --entry-width: 190px;
  --entry-type: 50px;
  --portrait-size: 450px;
  --portrait-gap: 60px;
  --portrait-inset: 100px;
  --name-type: 16px;
  --selector-size: 80px;
  --selector-gap: 20px;
  --footer-width: 1000px;

  /* Recommended shared aliases and supplied-asset hooks. */
  --page-inset: 25px;
  --paper-texture: none;
  --radius-pill: 9999px;
  --motion-feedback: 250ms;
  --motion-sheet: 500ms;
  --safe-top: env(safe-area-inset-top, 0px);
}

.recruit-site,
.recruit-site * {
  box-sizing: border-box;
}

.recruit-site {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--weight-medium);
  line-height: 1.75;
}

.recruit-site img {
  display: block;
  max-width: 100%;
}

.recruit-site a {
  color: inherit;
}

.recruit-site button {
  font: inherit;
  cursor: pointer;
}

.recruit-site :focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 4px;
}

.recruit-site [id] {
  scroll-margin-top: calc(var(--header-height) + 20px);
}

.paper {
  background-color: var(--color-white);
  background-image: var(--paper-texture);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Persistent header with measured endpoint dimensions. */
.recruit-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--header-height) + var(--safe-top));
  padding: var(--safe-top) 0 0 var(--header-inset);
  background: transparent;
}

.brand {
  display: block;
  flex-shrink: 0;
  width: min(var(--brand-width), calc(100vw - 178px));
}

.brand img {
  width: 100%;
  max-height: 26px;
  object-fit: contain;
  object-position: left center;
}

.header-actions {
  display: flex;
  align-self: stretch;
  flex-shrink: 0;
}

.recruit-site .entry-link {
  display: grid;
  place-items: center;
  width: var(--entry-width);
  color: var(--color-white);
  background: var(--color-ink);
  font-size: var(--entry-type);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.menu-button {
  position: relative;
  width: var(--header-height);
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--color-ink);
  background: var(--color-menu);
  transition: background-color 300ms;
}

/* Stroke dimensions are visual approximations. */
.menu-button::before,
.menu-button::after {
  content: '';
  position: absolute;
  left: 25%;
  width: 50%;
  height: 3px;
  background: currentColor;
}

.menu-button::before { top: 42%; }
.menu-button::after { top: 58%; }

.recruit-site .entry-link:focus-visible,
.menu-button:focus-visible {
  outline-color: currentColor;
  outline-offset: -5px;
}

/* Recommended static hero geometry, tuned to the supplied captures. */
.recruit-hero {
  position: relative;
  isolation: isolate;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  background: var(--color-white);
}

.hero-decoration {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Assign each decorative strip its own placement variables. */
.hero-strip {
  position: absolute;
  left: var(--strip-x, 0%);
  top: var(--strip-y, 0%);
  width: var(--strip-width, 60%);
  transform: rotate(var(--strip-angle, -12deg));
  transform-origin: center;
}

.hero-banner,
.hero-tanseisha,
.hero-recruit {
  position: absolute;
  margin: 0;
}

.hero-banner {
  left: 50%;
  top: 40%;
  width: 62.5%;
  aspect-ratio: 4.5;
  transform: translate(-50%, -50%) rotate(7deg);
}

.hero-tanseisha {
  left: 34.8%;
  top: 61.7%;
  width: 33.2%;
  aspect-ratio: 4.6;
  transform: translate(-50%, -50%) rotate(-12deg);
}

.hero-recruit {
  left: 63.3%;
  top: 61.7%;
  width: 26.8%;
  aspect-ratio: 3.75;
  transform: translate(-50%, -50%) rotate(4deg);
}

.hero-banner img,
.hero-tanseisha img,
.hero-recruit img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Reading blocks keep their own measured leading. */
.manifesto {
  width: min(524.4px, calc(100% - 50px));
  margin: 0 auto;
  padding-block: 100px;
  font-size: 19px;
  font-weight: 700;
  line-height: 47px;
  letter-spacing: 2.85px;
}

.news-section {
  padding: 100px var(--page-inset);
}

.news-inner {
  max-width: 900px;
  margin-inline: auto;
}

.news-row {
  display: grid;
  grid-template-columns: 175px minmax(0, 1fr);
  padding-block: 12px;
}

.news-summary {
  margin: 0;
  padding-right: 40px;
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 1.2px;
}

/* Opposing frame directions are retained on mobile. */
.about-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: clamp(40px, 8.18vw, 118px);
  padding: 100px 50px 250px;
}

.about-panel {
  display: block;
  padding: 10px 10px 75px 75px;
  background: var(--color-pink);
  text-decoration: none;
}

.about-panel:nth-child(2) {
  margin-top: 180px;
  padding: 75px 75px 10px 10px;
}

.about-panel img {
  width: 100%;
  aspect-ratio: 526.1 / 333.1;
  object-fit: cover;
}

/* Native scrolling is a recommended fallback, not a source claim. */
.portrait-rail {
  display: flex;
  gap: var(--portrait-gap);
  overflow-x: auto;
  padding: 35px var(--portrait-inset) 65px;
  scroll-padding-inline: var(--portrait-inset);
  scroll-snap-type: x proximity;
}

.portrait-card {
  position: relative;
  flex: 0 0 var(--portrait-size);
  width: var(--portrait-size);
  scroll-snap-align: start;
  text-decoration: none;
}

.portrait-photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-pill);
}

/* Vertical writing and rotation approximate the visible labels. */
.portrait-name {
  position: absolute;
  left: 5%;
  bottom: -4%;
  margin: 0;
  padding: 16px 12px;
  border-radius: var(--radius-pill);
  background: var(--label-color, var(--color-lavender));
  font-size: var(--name-type);
  line-height: 1;
  letter-spacing: 0.15em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  transform: rotate(-22deg);
}

/* The sheet rotates independently from the readable content. */
.project-stage {
  position: relative;
  isolation: isolate;
  padding: 200px 15px 100px;
}

.project-stage::before,
.project-stage::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.project-stage::before {
  background: var(--color-blue);
}

.project-stage::after {
  background-color: var(--color-pink);
  background-image: var(--paper-texture);
  transform: rotate(-3deg);
}

.project-heading {
  position: relative;
  margin: 0 15px 35px;
  text-align: right;
  transform: rotate(-3deg);
}

/* Display sizes are recommended, not measured nested values. */
.section-heading-en {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(80px, 9.72vw, 140px);
  font-weight: 700;
  line-height: 0.95;
}

.project-card {
  position: relative;
  width: min(1023.75px, 100%);
  margin-inline: auto;
}

.project-photo {
  width: 100%;
  aspect-ratio: 1023.75 / 593.05;
  object-fit: cover;
}

.project-caption {
  position: absolute;
  z-index: 1;
  top: -65px;
  left: -15%;
  max-width: 450px;
}

.project-description {
  margin: 0 0 25px;
  font-size: 25px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: 1.2px;
}

.paper-label {
  padding: 0.15em 0.35em;
  color: var(--color-ink);
  background: var(--color-white);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.project-selectors {
  display: flex;
  justify-content: flex-end;
  gap: var(--selector-gap);
  margin-top: 35px;
  padding-right: 5%;
}

.project-selector {
  width: var(--selector-size);
  height: var(--selector-size);
  padding: 3px;
  border: 0;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.6px;
}

.project-selector[aria-pressed='true'] {
  background: var(--color-blue);
  /* Recommended non-color selected-state cue. */
  box-shadow: inset 0 0 0 2px var(--color-ink);
}

.recruit-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(420px, 100%);
  min-height: 115px;
  padding: 20px 35px 20px 40px;
  border-radius: var(--radius-pill);
  background: var(--color-red);
  font-size: 40px;
  line-height: 1;
  text-decoration: none;
  transition: transform var(--motion-feedback);
}

/* Desktop column proportions approximate the measured positions. */
.recruit-footer {
  padding: 95px 25px 65px;
}

.footer-inner {
  max-width: var(--footer-width);
  margin-inline: auto;
}

.footer-columns {
  display: grid;
  grid-template-columns: 21.5% 30.9% 20.8% 26.8%;
}

.footer-column--company {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 377px;
  padding-left: 60px;
  border-left: 1px solid var(--color-ink);
}

.footer-group {
  margin-bottom: 36px;
}

.footer-label {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
}

.footer-label small {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  letter-spacing: 0.1em;
}

.footer-links,
.footer-legal {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  font-size: 12px;
  line-height: 21.2308px;
  letter-spacing: 1.8px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.footer-corporate img {
  width: 134px;
  height: auto;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 70px;
}

.footer-legal a {
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 0.05em;
  text-decoration: underline;
}

.footer-copyright {
  margin: 10px 0 0;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

/* Recommended breakpoint; the original breakpoint is unknown. */
@media (max-width: 767px) {
  :root {
    --header-height: 44px;
    --header-inset: 10px;
    --brand-width: 182px;
    --entry-width: 124px;
    --entry-type: 30px;
    --portrait-size: 290px;
    --portrait-gap: 25px;
    --portrait-inset: 45px;
    --name-type: 10px;
    --selector-gap: 15px;
  }

  .hero-banner {
    top: 44.85%;
    width: 100%;
    transform: translate(-50%, -50%) rotate(14deg);
  }

  .hero-tanseisha {
    left: 40%;
    top: 63.1%;
    width: 72.3%;
  }

  .hero-recruit {
    left: 61.5%;
    top: 70.85%;
    width: 59%;
    transform: translate(-50%, -50%) rotate(6deg);
  }

  .manifesto {
    font-size: 16px;
    line-height: 37px;
    letter-spacing: 1.2px;
  }

  .news-section {
    padding-block: 50px;
  }

  .news-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
    padding: 25px 15px;
  }

  .news-summary {
    padding-right: 25px;
  }

  .about-panels {
    grid-template-columns: minmax(0, 1fr);
    gap: 100px;
    padding: 80px 25px 100px;
  }

  .about-panel {
    padding: 5px 5px 50px 50px;
  }

  .about-panel:nth-child(2) {
    margin-top: 0;
    padding: 50px 50px 5px 5px;
  }

  .about-panel img {
    aspect-ratio: 285 / 195;
  }

  .portrait-name {
    padding: 10px 7.5px;
  }

  .project-stage {
    padding: 100px 15px 80px;
  }

  .project-heading {
    margin-inline: 0;
  }

  .project-photo {
    aspect-ratio: 360 / 305;
  }

  .project-caption {
    position: relative;
    top: auto;
    left: auto;
    max-width: 100%;
    margin-bottom: 20px;
  }

  .project-description {
    font-size: 16px;
    line-height: 26.88px;
  }

  .project-selectors {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 60px;
    padding-right: 0;
  }

  .recruit-pill {
    width: 224px;
    min-height: 65px;
    padding: 15px 15px 15px 30px;
    font-size: 30px;
  }

  .recruit-footer {
    padding: 45px 20px;
  }

  .footer-columns {
    display: block;
  }

  .footer-column {
    display: contents;
  }

  .footer-group {
    display: grid;
    grid-template-columns: min(140px, 40%) minmax(0, 1fr);
    margin-bottom: 30px;
  }

  .footer-label {
    margin: 0;
    padding-top: 6px;
    font-size: 18px;
  }

  .footer-corporate {
    display: block;
    margin-top: 10px;
    padding-top: 36px;
    border-top: 1px solid var(--color-ink);
  }

  .footer-corporate img {
    width: 168px;
  }

  .footer-legal {
    display: block;
    margin-top: 36px;
  }

  .footer-legal a {
    font-size: 11px;
    line-height: 22px;
  }

  .footer-copyright {
    font-size: 11px;
  }
}

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

Place the project caption before the image in document order so that the mobile static layout reads naturally. Apply paper texture to decorative pseudo-elements only when its contrast would interfere with caption text. The scaffold does not implement a menu, slide controller, automatic rail, or entrance choreography; those behaviors require explicit implementation and testing. If motion is later added with JavaScript, reduced-motion handling must also stop its timers and transforms.

### Tailwind v4 Token Mapping

Optional mapping for a project already using Tailwind v4. These aliases do not imply that the original site uses Tailwind. Define the properties above first.

```css
@theme inline {
  --color-ink: #000000;
  --color-paper: #ffffff;
  --color-poster-red: #fd2c2c;
  --color-poster-blue: #0076ff;
  --color-poster-pink: #fcadd7;
  --color-poster-lavender: #a394fc;
  --color-poster-yellow: #ffff81;
  --color-menu-gray: #ededea;

  --font-editorial: 'Zen Kaku Gothic New', sans-serif;
  --font-display: 'Afacad Flux', sans-serif;

  --text-news: 16px;
  --text-selector: 26px;
  --text-entry: var(--entry-type);
  --text-person-name: var(--name-type);

  --spacing-header: var(--header-height);
  --spacing-portrait: var(--portrait-size);
  --spacing-portrait-gap: var(--portrait-gap);
  --spacing-page-inset: 25px;
  --spacing-selector: 80px;

  --radius-paper: 0px;
  --radius-capsule: 9999px;
}
```

## Sources & Evidence

- **Inspected original and final page:** [Tanseisha Recruit](https://www.tanseisha.co.jp/recruit/potential/). Both supplied URLs are identical, and the recorded HTTP status is `200`.
- **Capture date:** September 12, 2026. Supplied retrieval timestamp: `2026-09-12T11:19:55.538Z`.
- **Desktop evidence:** `1440 × 1000` CSS-pixel viewport, approximately `9015.73px` document height; opening capture, employee/project transition capture, and closing collage/footer capture.
- **Mobile evidence:** `390 × 844` CSS-pixel viewport, approximately `7465.83px` document height; opening and footer captures, with rendered DOM measurements for the intervening sections.
- **Rendered DOM and computed styles:** page title, section and link inventory, element bounds, font families and sizes, spacing, fills, radii, source custom properties, transition declarations, and captured project-selection states.
- **Inspection method:** the supplied browser process observed the initial page for at least five seconds, waited for bounded layout and image readiness, traversed intermediate scroll positions, and conservatively waited for finite geometric motion. Perpetual animations were paused during readiness checks and resumed afterward. SharedWorkers and service workers were disabled.
- **Limits:** this reference analyzes the supplied evidence without additional browsing or file inspection. No source image URLs, full stylesheets, font files, event handlers, open-menu state, hover endpoints, carousel input tests, autoplay interval, reduced-motion behavior, or linked-page captures were supplied. Some sections are supported by DOM geometry without a corresponding visual capture. Delayed content and unexercised interactions remain unverified.

This reference describes the current page represented by the September 12, 2026 evidence. Measured endpoint values, visual estimates, and recommended implementation choices are labeled separately throughout.