# NII Recruit 2027 — Style Reference

> A recruitment story drawn with blue ink, coral ellipses, oversized faces, and small everyday questions.

**Website:** [NII Recruit 2027](https://www.nii.co.jp/2027recruit/index.html)  
**Original URL:** https://www.nii.co.jp/2027recruit/index.html  
**Final URL:** https://www.nii.co.jp/2027recruit/index.html — unchanged; supplied response status: HTTP 200.  
**Theme:** one observed light presentation.  
**Inspected:** September 12, 2026; supplied retrieval timestamp `2026-09-12T12:13:24.192Z`, equivalent to 21:13:24 JST.  
**Viewports:** desktop `1440 × 1000` and mobile `390 × 844` CSS pixels.  
**Scope:** the current recruitment home page, using three desktop captures, two mobile captures, and rendered DOM/computed-style evidence. Coverage includes the opening composition, a desktop middle section, the closing entry area, navigation records, and linked graphic elements. Destination pages and menu-open states were not inspected.

The original document title identifies this as the 2027 graduate recruitment site of 日本情報産業株式会社. Its design connects everyday interests with curiosity about IT and working life. A cream canvas carries deep-blue typography and linework, salmon shapes, yellow highlights, and white oval links outlined in red. Blue-treated photographic portraits alternate with playful cutout figures whose heads are dramatically enlarged.

The organizing structure is a narrow central story surrounded by a much wider desktop collage. Curving blue ribbons connect graphic destinations and tall oval frames. Small questions drift visually across the composition as independent links. On mobile, the central story expands to the available width while the identity remains compact at the top. Preserve this relationship between a readable center, scattered secondary discoveries, and expressive artwork.

## How to Read This Reference

- **Measured values** come from the supplied rendered element rectangles and computed styles. Coordinates in measurement tables are document coordinates unless described as screenshot positions.
- **Source SVG values** come from inline SVG declarations included in the evidence. SVG stroke units are not automatically equivalent to CSS pixels after scaling.
- **Visual estimates** describe shapes or imagery visible in the original-page captures but absent from the measured element list.
- **Derived values** are calculations from the supplied measurements. They describe the inspected sizes without claiming access to the complete source formulas.
- **Implementation aliases and recommendations** are proposed for reuse. The CSS below is an adaptation, not extracted production CSS.
- **Visibility limits matter:** the mobile opening artwork is visible, while its corresponding central area is blank in the supplied desktop opening capture. Several tall oval frames also have blank interiors. Their intended contents and visibility triggers remain unresolved.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Warm Canvas | `#f2efe7` | `--color-paper` | Measured `MAIN` background: `rgb(242, 239, 231)` at both viewports. Covers the visible page. |
| Deep Blue | `#0000a5` | `--color-ink` | Measured narrative text and inline SVG fills/strokes. Used for typography, brand artwork, outlines, and arrow details. |
| Question Red | `#f00a19` | `--color-red` | Measured desktop navigation and bubble text; declared bubble strokes and entry lettering. |
| Salmon | `#ffaaa0` | `--color-salmon` | Declared inline SVG fill in header artwork and the entry graphic. Visually used by large discs and the entry ellipse. |
| Pale Yellow | `#fff58c` | `--color-yellow` | Declared fill in the employee-voices link artwork; visually consistent with the softer yellow graphic accents. |
| White | `#ffffff` | `--color-white` | Declared bubble fills and white arrow strokes. Also visible in the mobile spotlight composition. |
| Footer Blue | `#191e8c` | `--color-footer` | Declared fill in the footer SVG. Preserve when reusing that asset. |
| Bright Spotlight Yellow | Approximately `#ffff3c` | `--color-yellow-bright` | Visual estimate from the mobile opening circle. Its exact source fill was not supplied. |

**Use the painted element as the authority.** Several parent anchors compute to cyan `#00b5e2`, but their child SVGs and paragraphs paint the visible blue, red, or white details. Cyan should not become a new design accent. Likewise, the white `BODY` background sits behind the cream `MAIN`; the visible canvas is cream.

The photographic blues contain a tonal range. The exact treatment of those assets and the ribbon's painted blue were not separately measured. Deep Blue is a practical adaptation token for new linework; it should not be applied as a flat fill over the photographs.

### Theme Presets

Only this light presentation is evidenced. No alternate palette, dark mode, or theme selector was inspected.

## Tokens — Typography

### Japanese Interface and Narrative Text

The measured stack for navigation, question labels, and narrative copy is:

```css
DNPShueiGoGinStd-M, 'Helvetica Neue', Arial,
'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
'Noto Sans JP', Meiryo, sans-serif
```

The measured weight is `400`. The stack declaration establishes the intended family order; it does not prove which fallback rendered each glyph. A new implementation needs the appropriate font files and licensing to use the first family.

The interface contrasts small, tightly spaced questions with open, generously led narrative text. Navigation uses modest positive tracking. Avoid imposing one global letter-spacing rule on all three roles.

### Display Artwork and Wordmarks

The opening `You &IT` and closing `Entry` use conspicuous italic serif lettering with red fill and a fine blue edge. The central IT destination uses expressive Japanese lettering. These graphic treatments should be handled as artwork where authorized source assets are available.

The header and footer identities are SVG artwork. Their anchor font size of `16px` does not measure the visible wordmark lettering. No particular serif font has been established for the display graphics.

A browser serif such as Georgia is offered below only as a **recommended approximation** for editable English display text. It is not an identification of the original face. The `Times` family on root wrappers also does not establish the campaign's display font.

### Type Scale

| Role | Desktop measurement | Mobile measurement | Tracking | Notes |
| --- | --- | --- | --- | --- |
| Question label | `12px / 16px` | `12.48px / 16.64px` | `-0.02em` | Regular weight; one or two centered lines. |
| Desktop navigation | `16px / 30.0433px` | — | `0.035em` | Red text in the visible desktop oval. |
| Mobile navigation records | — | `21.83px / 41.0685px` | About `0.035em` | Blue computed text; the menu is not visibly open in the captures. |
| Narrative paragraph | `18px / 36px` | `18.72px / 37.44px` | `0.065em` | Regular blue type, centered and deliberately spacious. |
| Header identity | SVG box `230 × 24.84px` | SVG link box `182 × 20.36px` | Artwork-defined | Measure the asset box, not the inherited font. |
| Footer identity and copyright | SVG link box `203 × 45.44px` | `211.11 × 47.25px` | Artwork-defined | Includes the compact identity/copyright composition. |
| Entry subtitle | Approximately `18–20px` visually | Approximately `18–20px` visually | Unmeasured | Actual label: `エントリーしてみる`. |
| Entry display lettering | Approximately `80–90px` apparent type scale | Similar apparent scale | Artwork-defined | Visual estimate; no source font-size measurement. |

The narrative's measured height accommodates twelve lines: `432px` on desktop and approximately `449.25px` on mobile. Preserve its short-line cadence instead of widening it into conventional paragraph prose.

## Tokens — Spacing & Shapes

**Measured structural anchor:** a `375px` central column on desktop and a `390px` column at the inspected mobile viewport.

The original root font size remains `16px`. There is no evidence for a special tiny-root rem system. The Quick Start introduces its own proportional unit to reproduce the measured relationships without changing the root.

### Source Constants and Derived Scaling

The supplied custom properties are:

```css
--media_pc: 1366;
--common_width: 2560;
--media_sp: 750;
```

These are observed, unitless source constants. Their names suggest layout reference dimensions, but the excerpt does not establish the complete media queries or formulas. Do not equate `--common_width: 2560` with the actual document width.

Many central elements scale by approximately `390 / 375 = 1.04` between the two inspections. Narrative font size follows that ratio exactly. Bubble dimensions and header identity use different responsive rules.

### Spacing Scale

The following are measured placements or calculated gaps, rather than a recovered universal spacing scale.

| Relationship | Desktop | Mobile | Interpretation |
| --- | --- | --- | --- |
| Header identity left inset | `65px` | `15px` | Strong reduction of peripheral spacing. |
| Header identity top inset | `20px` | `20px` | Stable top placement. |
| Navigation line step | About `30.04px` | About `41.07px` in DOM | Mobile navigation typography grows. |
| Narrative end to first tall frame | `94.17px` | `97.89px` | Broad pause after the introductory copy. |
| First tall frame end to IT graphic | `40.50px` | `42.11px` | Shorter connection between graphic nodes. |
| Second tall frame end to About graphic | `88px` | `91.52px` | More breathing room around a major destination. |
| Final tall frame end to entry link box | `62.98px` | `65.52px` | Ribbon occupies part of this visual connection. |
| Entry link box end to footer | `58px` | `30.16px` | The mobile closing gap is specifically compressed. |
| Footer artwork end to document end | `40px` | `20.80px` | Compact mobile finish. |

### Border Radius and Linework

| Element | Evidence | Reuse guidance |
| --- | --- | --- |
| Small question oval | SVG outline; source stroke `0.5` | Use a true ellipse with a visually fine edge. A `1px` CSS border is a practical approximation. |
| Desktop navigation | Thin red ellipse, visually estimated | Keep its tall, narrow silhouette and transparent interior. |
| Entry shape | Tilted salmon ellipse with blue outline | Tilt the shape while keeping the text readable and approximately level. |
| Tall central frames | Visually elliptical; later anchor wrappers compute to `720px` radius on desktop and `195px` on mobile | Wrapper radius does not fully specify the painted SVG outline. |
| Photographic panels | Square corners in the captures | Preserve clean rectangular edges. |
| Connecting ribbon | Thick curved blue line with rounded ends | Use an SVG path, not a chain of rotated rectangles. |
| IT destination | Irregular scalloped burst | Preserve its authored contour; ordinary rounded corners lose its character. |

### Layout Measurements

| Element | Desktop `1440 × 1000` | Mobile `390 × 844` |
| --- | --- | --- |
| Document height | `4954.67px` | `5101.64px` |
| Central column | `x = 532.5px`, width `375px` | `x = 0`, width `390px` |
| Narrative | `375 × 432px`, starts at `y = 956.05px` | `390 × 449.25px`, starts at `y = 992.78px` |
| Each of three tall frame link boxes | `375 × 666.44px` | `390 × 693.80px` |
| IT destination link | `362 × 215.50px` | `376.47 × 223.97px` |
| Small illustrated link to `fun01` | `195 × 92.16px` | `202.80 × 95.70px` |
| About destination link | `320 × 180.98px` | `332.80 × 188.08px` |
| Employee-voices destination link | `250 × 169.09px` | `259.98 × 175.72px` |
| Entry link | `375 × 209.98px` | `390 × 218.25px` |
| Question link box | `120 × 50px` | `133.11 × 55.31px` |

These are element boxes, which can include transparent SVG margins. The painted ellipse or lettering may occupy less space.

## Components

### Persistent Brand

**Role:** maintain identity and a route back to the recruitment home.

The blue `NII Recruit 2027` identity sits near the upper-left corner, with no solid header strip or dividing rule. Its position remains visually consistent across the supplied scroll captures. The header wrapper itself has a measured height of zero, consistent with content positioned outside normal flow; its exact positioning declaration was not supplied.

The identity links to the inspected recruitment URL. On desktop, its box begins at `(65, 20)` and is `230px` wide. On mobile it begins at `(15, 20)` and is `182px` wide. Keep the SVG's proportions and avoid turning the identity into a large navigation bar.

### Desktop Oval Navigation

**Role:** provide a stable overview of the recruitment site's destinations.

A transparent, thin red ellipse sits in the opening composition's upper-right area. Its visible bounds are approximately `230 × 340px`, beginning near `(1044, 28)` in the desktop capture. Seven left-aligned links sit inside it:

`TOP`, `ITってなに？`, `先輩に聞く`, `NIIのはなし`, `会社情報`, `エントリーする`, and `NII公式サイト`.

Internal destinations use delicate rightward arrows; the official-site link has a diagonal arrow. Text is `16px`, regular, red, and spaced on approximately `30px` lines. The shape supplies the enclosure, so individual links remain unboxed.

The desktop navigation ellipse is visible in the opening capture. Its persistence during scrolling was not established; only the brand's repeated placement is visually supported.

### Mobile Navigation Marker

**Role:** a compact navigation affordance, with behavior unverified.

The mobile captures show a small salmon circle with a blue outline near the upper-right corner. Its painted diameter is approximately `20px`. No menu-opening interaction or expanded menu screenshot was supplied.

The mobile DOM includes seven navigation links with larger, blue typography. Their recorded rectangles do not prove that they are visible or operable in the captured closed state: ancestor visibility, opacity, and interaction state were not included.

For a new implementation, retain the small visual marker inside a comfortably sized control, give it an explicit accessible name, and implement a complete keyboard-operable menu. The hit area and opening behavior would be recommended additions.

### Opening Poster Composition

**Role:** establish a friendly, surprising recruitment identity.

The mobile opening capture supplies the clearest evidence. A natural-color photographic head, much larger than the attached body, overlaps a white spotlight-like shape. The small body wears a white shirt and dark trousers in an animated-looking pose. A bright yellow circle sits toward the upper left. A large salmon disc below carries the red, blue-edged `You &IT` lettering.

At `390px` wide, the salmon disc is visually about `367px` across, beginning approximately `10px` from the left and `283px` from the top. The yellow circle is approximately `125px` across. The cutout extends from near the top edge to around `375px` down the screenshot. These are visual estimates, not DOM asset measurements.

The next yellow oval introduces the source copy `キミとITで なに動かす？`. Small question links overlap this region in the captured state.

The desktop opening capture leaves the corresponding center area blank. This reference therefore establishes the opening artwork from the current mobile capture and does not claim a verified desktop placement or reveal sequence. A new implementation should provide a complete visible default composition as an explicit implementation decision.

### Introductory Narrative

**Role:** connect familiar activities with the company's work in IT.

A narrow, centered paragraph uses Deep Blue, regular Japanese type, `18px` text, `36px` line height, and `0.065em` tracking on desktop. It starts with `きょうもニュースが届く。` and moves through convenience-store sweets, music, everyday infrastructure, and the possibility of working with IT.

Keep the lines intentionally short and centered. The paragraph belongs to the central oval-and-ribbon composition, with generous space around it. Avoid adding a boxed card, a heading above every sentence, or small explanatory icons beside each example.

On mobile, the text grows to `18.72px / 37.44px` while its available width becomes `390px`. This preserves the original reading rhythm at the inspected size.

### Question-Link Field

**Role:** offer conversational shortcuts into specific recruitment and IT content.

The DOM contains **34 question-link records**. Each combines a white SVG ellipse, a fine red outline, and a centered red paragraph. Desktop anchor boxes measure `120 × 50px`; mobile boxes measure approximately `133.11 × 55.31px`. Labels use one or two lines with negative tracking.

These are genuine destination links, not category filters. Their language sounds like a thought, concern, or casual conversation. They appear at irregular positions around photographs, graphics, and empty canvas. Some overlap other content in the supplied captures, and many recorded positions lie outside the viewport.

| Source label | Recorded destination | Function suggested by the destination |
| --- | --- | --- |
| `#あの新刊 もう読んだ？` | `/2027recruit/it/fun.html#fun02` | Connects an everyday interest with IT content. |
| `#今日のニュースは？` | `/2027recruit/it/work.html#work02` | Links to a specific work-related IT example. |
| `#先輩 やさしいといいな` | `/2027recruit/voice/index.html#voice02` | Opens a specific employee-voice section. |
| `#理系はいいよなー` | `/2027recruit/about/index.html#about03` | Links to a company-information section. |
| `#研修って 何するんだろ` | `/2027recruit/about/index.html#about05` | Links to a training-related question destination. |

The URLs were extracted from the home page; destination contents and successful anchor positioning were not tested.

For reuse, keep the small ellipses distinct from the larger illustrated section links. Their positions should be treated as a compositional system rather than copied from one transient snapshot.

### Tall Oval Frames and Arrow Motifs

**Role:** create a repeated vertical rhythm through the central story; their complete content and action semantics remain unknown.

Three recorded anchor-like elements have nearly portrait `9:16` proportions: approximately `375 × 666px` on desktop and `390 × 694px` on mobile. The visible portions show fine blue oval outlines and white circular right-arrow motifs near their lower areas.

Their supplied `href` values are empty, and the captured interiors are blank. The evidence does not establish video playback, slides, a carousel, modal behavior, or destination navigation. Do not supply invented panel content under the label of an observed feature.

The useful reusable detail is the geometry: a very tall outlined oval, a small circular arrow, and a thick ribbon entering or leaving its edge. If a new site assigns functionality to it, use a named link or button with a real action.

### Illustrated Destination Links

**Role:** turn major content routes into graphic events along the story.

The clearest visible example is the IT destination: a salmon burst with irregular scalloped edges, large blue Japanese lettering reading `ITって なんだっけ？`, and a small yellow circular arrow at its lower-right edge. It links to `/2027recruit/it/index.html` and measures `362 × 215.5px` on desktop.

Below it, a smaller white illustrated oval links to `/2027recruit/it/fun.html#fun01`. A salmon circular arrow overlaps its lower-right area. A natural-color figure with an enlarged head stands beside this part of the central composition. A floating question label obscures some of the oval's text in the capture, so that text should not be reconstructed from guesswork.

Additional SVG destinations are evidenced by their DOM records:

| Destination | Confirmed details | Visual limitation |
| --- | --- | --- |
| `/2027recruit/about/index.html` | `320 × 180.98px` desktop box; SVG declarations include white and blue | Complete artwork is outside the supplied visible middle section. |
| `/2027recruit/voice/index.html` | `250 × 169.09px` desktop box; pale-yellow and blue SVG fills | Complete shape and lettering are not established by the captures. |

Preserve their differing proportions and authored silhouettes when assets are available. A uniform grid of equally sized buttons would remove the observed rhythm.

### Desktop Photographic Field

**Role:** surround the central story with a human presence and visual scale.

Rectangular photographs sit at different horizontal positions and heights, with considerable cream space between them. Their blue treatment unifies the scenes while allowing faces, clothing, stairs, and windows to retain photographic detail.

In the desktop opening capture, a narrow portrait begins near `(144, 581)` and is about `267px` wide. A larger horizontal scene begins near `(970, 695)` and continues to the right edge. In the middle capture, a portrait near the left edge is approximately `307 × 503px`; another scene occupies the upper-right area. These are screenshot estimates, and cropped views do not establish native asset dimensions.

Use square corners, varied aspect ratios, and deliberate crops. The photographs are separate from the natural-color cutout figures. Applying the same blue treatment to every image would erase that distinction.

### Blue Ribbon and Oversized Letter Fragments

**Role:** connect destinations and extend the visual world beyond the central column.

The ribbon is a thick, solid blue path with rounded ends and broad bends. It sometimes passes behind a frame or illustrated destination. Its visible stroke is approximately `30–40px` in the captures, substantially heavier than the surrounding outlines.

Large red outline serif letter fragments also appear near the desktop edges, partially cropped by the viewport. Their scale makes the page feel larger than the central story. Keep these fragments subordinate to readable content and outside the keyboard interaction model when decorative.

Use SVG for the ribbon and outlined display artwork. Preserve smooth curves and clean edges; there is no visible pixel-art treatment.

### Entry Ellipse

**Role:** provide the final, prominent route into the recruitment entry process.

The closing link combines a salmon ellipse, a thin blue outline, oversized red italic `Entry` lettering with a blue edge, and the blue subtitle `エントリーしてみる`. The ellipse rises toward the right by approximately `20°`, while the lettering remains approximately level. A blue ribbon connects it with the preceding oval.

The desktop anchor box is `375 × 209.98px` at document `y = 4601.25px`. The mobile box is `390 × 218.25px` at `y = 4785.19px`. The painted ellipse occupies less than the full box because the SVG includes internal space.

The destination is `/2027recruit/entry/index.html`. It is a page link; no submission form or application completion behavior was inspected.

### Footer Signature

**Role:** close the story with a compact identity and copyright.

The footer remains centered under the entry graphic. Its SVG uses `#191e8c` and presents `NII Recruit 2027` above the small copyright line `© 2025 Nippon Information Industry Corp.` The displayed copyright year is 2025 even though the recruitment identity says 2027 and the capture occurred in 2026.

The footer link returns to the recruitment home. Keep it visually light and compact. The supplied design does not show a full-width, multi-column corporate footer in this closing area.

## Tokens — Motion & Interaction

| Treatment | Evidence | What can be concluded |
| --- | --- | --- |
| Brand and selected illustrated anchors | Computed transition shorthand `0.3s` | A 300ms transition is declared; changed properties and visual hover endpoints were not supplied. |
| Most sampled elements | Computed animation `none` | No CSS animation was reported on those sampled nodes. This does not rule out JavaScript or descendant animation. |
| Question placement | Script excerpt refers to an animation area and a collection of balls; screenshot positions differ slightly from DOM positions | Consistent with script-positioned movement. Speed, trajectories, collisions, and pointer response are unverified. |
| Persistent identity | Similar upper-left placement in multiple scroll captures | Visual persistence is supported; its complete positioning rules are not available. |
| Navigation and question links | Explicit `href` values | Link destinations are established; click results and transitions were not exercised. |
| Mobile marker | Closed-state circle visible | Opening, closing, focus management, and backdrop behavior are unverified. |
| Tall oval arrow motifs | White arrow artwork and empty `href` values | Their actual action cannot be established. |
| Opening graphic visibility | Visible on mobile; absent from the desktop opening capture | A visibility difference exists. Its cause and timing are unknown. |

The supplied capture process waited for document readiness, finite motion, layout/text stability, and visible image decoding within bounded limits. Perpetual animation was paused during readiness checks and resumed afterward. These checks improve capture stability but do not prove that all delayed content appeared.

**Recommended motion direction:** keep the central reading content stable. If ambient label movement is implemented, make it slow enough to read and select, pause it for keyboard focus, and offer a static alternative. Short `150–300ms` opacity or transform feedback can complement the artwork, but those durations and behaviors are recommendations beyond the limited source transition evidence.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Page canvas | Solid warm cream | Connects every section into one continuous composition. |
| Question link | White fill, fine red ellipse, red text | Separates small conversational destinations from surrounding imagery. |
| Major graphic destination | Salmon, pale yellow, or white with blue details | Provides section identity through shape and lettering. |
| Tall frame | Fine blue oval with a visually blank interior in the captures | Supplies vertical structure; full content remains unverified. |
| Photography | Blue tonal treatment, rectangular crop | Adds human imagery and larger visual masses at the sides. |
| Cutout figure | Natural-color head and clothing, transparent-looking silhouette | Creates surprise through exaggerated proportions. |
| Footer | Unboxed blue artwork on cream | Finishes the central story quietly. |

There is no visible general-purpose shadow or elevation system. Separation comes from outlines, flat fills, photographic boundaries, and overlap. Photographic tonal variation should not be confused with a glossy gradient treatment on UI surfaces.

## Imagery

The strongest contrast is between blue photographic scenes and natural-color caricature-like cutouts. Enlarged heads make the figures playful while their clothing remains ordinary. The surrounding graphic vocabulary is simple but highly authored: discs, tilted ellipses, a spotlight wedge, scalloped bursts, looping blue paths, and oversized italic lettering.

Use everyday scenes with expressive posture and clear silhouettes. Keep photograph edges crisp and rectangular. Preserve natural detail in the cutout faces and clean transparency around the bodies. There is no evidence for halftone, grain, dither, or intentionally pixelated scaling.

### Observed Asset References

The supplied evidence establishes artwork types and inline SVG declarations, but does not provide external image asset URLs.

| Asset group | Original-page evidence | Reuse requirement |
| --- | --- | --- |
| Header identity | Home-linked inline SVG with blue fill | Preserve its proportions and use a meaningful link name. |
| Footer signature | Home-linked inline SVG with `#191e8c` fill | Preserve the compact identity/copyright relationship. |
| Question ellipse | Repeated inline SVG with white fill and red `0.5` stroke | Can be approximated with a CSS ellipse and live text. |
| Entry artwork | Inline SVG with red lettering, blue stroke, and salmon fill | Prefer authorized artwork for exact lettering and geometry. |
| IT destination graphic | Linked SVG, visibly scalloped in the middle capture | Preserve its irregular outline and expressive lettering. |
| Blue photographs | Visible desktop image panels | Exact asset paths, native sizes, and color-processing method are unknown. |
| Enlarged-head figures | Visible mobile opening and desktop middle composition | Exact source files and compositing method are unknown. |
| Ribbon and large outline lettering | Visible original-page graphics | SVG is a suitable implementation format; original paths were not supplied. |

Do not invent asset filenames or identify the photographer, designer, or pictured person from visual resemblance. CSS can reproduce much of the framing, but the photographic cutouts and authored lettering carry a substantial part of the identity.

## Layout & Responsive Behavior

### Desktop Composition

At `1440px` wide, the story column is exactly `375px` wide and centered, leaving `532.5px` on either side. Photographs, labels, and letter fragments occupy this surrounding field at independent positions. The navigation ellipse sits to the upper right, while the identity stays near the upper left.

The page is a vertically scrolling recruitment home with links into a larger site. The supplied document height is approximately `4955px`. Its structure should remain content-driven; that measured height is a snapshot, not a fixed height to copy into production CSS.

The opening desktop capture contains substantial blank space in the center. Because the mobile opening graphic is visible, the blank desktop area must be treated as a capture-state limitation rather than a confirmed intentional empty hero.

### Mobile Composition

At `390px`, the story column occupies the full viewport width. Many of its elements become approximately 4% larger than their desktop counterparts. The hero disc nearly spans the viewport, the entry link retains its strong visual scale, and the paragraph keeps its twelve-line cadence.

The header identity becomes narrower and moves to a `15px` left inset. The large desktop navigation ellipse is absent from the visible mobile state, which instead shows the small circular marker. Question labels become about 11% wider and taller, while their text grows by 4%.

The side photographs are absent from the supplied mobile opening and closing captures. Their treatment throughout the unpictured mobile middle section cannot be established. Hiding peripheral photographs on small screens is a reasonable adaptation choice, not a verified rule for the whole original page.

### Responsive Differences to Preserve

| Relationship | Observed change | Practical consequence |
| --- | --- | --- |
| Main column | `375px → 390px` | Preserve a prominent mobile story rather than scaling the desktop canvas down uniformly. |
| Narrative type | `18px → 18.72px` | Maintain comfortable reading size and generous leading. |
| Question box | `120 × 50px → 133.11 × 55.31px` | Give labels their own mobile sizing rule. |
| Header identity width | `230px → 182px` | Keep the fixed identity from competing with the mobile artwork. |
| Entry-to-footer gap | `58px → 30.16px` | Compress the ending independently of the central artwork scale. |
| Total height | `4954.67px → 5101.64px` | Mobile retains the long story and is slightly taller. |

Only two viewport sizes were supplied. Intermediate widths, landscape phones, browser zoom, and safe-area behavior were not tested. Use a deliberate tablet rule instead of assuming that all source constants directly describe breakpoints.

Some question-link coordinates extend beyond the viewport while the root element width remains equal to the viewport width. The exact clipping rules and keyboard reachability of offscreen links were not supplied. In a new implementation, clip decorative artwork locally and keep essential navigation reachable.

## Do’s and Don’ts

### Do

- Use measured cream `#f2efe7` as the continuous canvas and Deep Blue `#0000a5` for the main readable content.
- Preserve the red/white question ovals and salmon/blue entry treatment.
- Build around a narrow central story with independently placed desktop imagery.
- Keep the narrative centered, regular-weight, and generously led.
- Use distinct sizing rules for the story, question links, and header identity.
- Preserve natural-color cutout figures alongside blue photographic panels.
- Keep the shapes varied: circles, tall ovals, tilted ellipses, and the irregular IT burst.
- Use large curved paths with rounded ends to connect graphic destinations.
- Retain actual destination links behind conversational labels and illustrated graphics.
- Record blank or unexercised states as limitations instead of supplying invented content.

### Don’t

- Don’t convert the composition into uniform feature cards or an equal-column content grid.
- Don’t widen the narrative to fill the desktop viewport.
- Don’t treat all image content as blue duotone; the natural-color figures are a separate visual role.
- Don’t introduce cyan as a visible accent based on inherited anchor styles.
- Don’t replace authored lettering with an asserted font identification.
- Don’t rotate the entire entry label just because its background ellipse is tilted.
- Don’t add shadows, glass blur, textured paper, or pixel effects without a new design rationale.
- Don’t make every small oval a filter chip or imply that its hashtag changes an on-page selection.
- Don’t infer video playback, carousels, parallax, or physics behavior from a blank oval or one screenshot.
- Don’t hardcode transient question positions or the measured document height as the layout system.

## Recommended Implementation Additions

These are improvements for a new implementation, not verified features of the original page:

- Provide a visible, complete opening state before optional animation begins. Essential headings and links should remain available if an animation or media asset fails.
- Keep a stable navigation route to every important section, even when decorative question links move offscreen.
- Place the mobile marker inside a minimum `44 × 44px` control and provide an explicit name, expanded state, and keyboard behavior.
- Pause ambient movement while a question link is hovered or focused. Under reduced motion, place links in stable, readable positions.
- Reserve clear space around narrative copy and important controls. The supplied captures show question labels overlapping other graphics.
- Use real text for conversational labels. Give SVG-only destination links meaningful names, and hide purely decorative arrow shapes from assistive technology.
- Check red text on cream and white arrow strokes on cream for their intended accessibility roles. Use a stronger blue treatment where an arrow is necessary to understand an action.
- Keep photo dimensions reserved during loading and load distant photographs progressively. Exact formats and image-loading behavior were not supplied.
- Use content-aware sizing at zoomed text sizes. An ellipse should grow or reflow rather than clip its label.
- Preserve the source's visual hierarchy while allowing the footer and body copy to wrap at narrow or enlarged-text settings.

## Agent Prompt Guide

### Quick Color Reference

- Canvas: `#f2efe7`.
- Main typography and linework: `#0000a5`.
- Question labels and outlines: `#f00a19` on `#ffffff`.
- Entry ellipse: `#ffaaa0`, with blue edging and red display lettering.
- Softer graphic accent: `#fff58c`.
- Footer SVG: `#191e8c`.
- Bright opening circle: visually estimated around `#ffff3c`; verify against authorized artwork for exact reproduction.

### Overall Prompt

“Create a Japanese graduate recruitment home page with a warm cream canvas, deep-blue linework, salmon ellipses, pale-yellow accents, and small white question links outlined in red. Organize the story around a centered 375px column at a 1440px desktop viewport, expanding to 390px at a 390px mobile viewport. Surround the desktop story with asymmetrically placed blue photographic portraits and occasional oversized outline serif letter fragments. Use an enlarged-head photographic cutout and a large salmon disc with red italic display lettering for the opening artwork, following the observed mobile composition. Connect graphic destinations with thick curved blue ribbons. Keep Japanese narrative copy centered at approximately 18px with double line height. Finish with a tilted salmon Entry ellipse and a compact blue footer. Use real links to recruitment content, preserve distinct component proportions, and keep the default content visible. Treat motion and the mobile menu as explicitly specified implementation decisions.”

### Example Component Prompts

1. **Question link:** “Create a white ellipse with a fine red outline and centered red Japanese text. Use a 120 × 50px desktop box, 12px text, 16px line height, and -0.02em tracking. Support one or two lines, such as `#研修って 何するんだろ`. Implement it as a real link and keep its text readable during focus.”
2. **Desktop navigation:** “Place seven unboxed red navigation links inside a tall transparent ellipse approximately 230 × 340px. Use regular 16px Japanese sans-serif text, approximately 30px line spacing, small rightward arrows, and a fine red perimeter. Position the group in the opening composition's upper-right area.”
3. **IT destination:** “Create an authored salmon burst with irregular scalloped edges, a fine blue outline, expressive blue lettering reading `ITって なんだっけ？`, and a small yellow circular arrow overlapping the lower-right edge. Give the complete graphic one accessible destination link.”
4. **Entry link:** “Build a 375 × 210px graphic link with a salmon ellipse tilted upward to the right by about 20 degrees. Keep large red italic Entry lettering and its blue outline approximately level. Place `エントリーしてみる` beneath it in blue. Use a thin blue perimeter and no shadow.”
5. **Photographic field:** “Arrange rectangular blue-treated portraits at different heights on both sides of a narrow centered story. Preserve square corners, wide cream gaps, and varied crops. Add a separate natural-color cutout with an exaggerated head near a central graphic destination.”
6. **Responsive adaptation:** “At 390px, let the central story fill the width, retain approximately 18.72px narrative type and 37.44px leading, reduce the header identity to 182px, and enlarge question boxes to roughly 133 × 55px. Keep a stable navigation alternative and avoid letting decorative links obscure the story.”

## Quick Start

### CSS Custom Properties

This is a usable component foundation, not a reconstruction of the complete source. It preserves measured colors and the central desktop/mobile proportions. The `750px` breakpoint is an adaptation informed by a source constant, not a verified original media query. The `480px` mobile-column cap is a recommended tablet safeguard.

The CSS uses a conventional root font size and introduces `--u` as one proportional design pixel. At the inspected desktop size it equals `1px`; at `390px` mobile width it equals `1.04px`. The display serif, hover feedback, focus treatment, and static layout choices are recommendations. Exact hero artwork, photo processing, SVG letterforms, and menu behavior require their own assets or implementation.

```css
:root {
  /* Measured colors, except the explicitly estimated bright yellow. */
  --color-paper: #f2efe7;
  --color-ink: #0000a5;
  --color-red: #f00a19;
  --color-salmon: #ffaaa0;
  --color-yellow: #fff58c;
  --color-white: #ffffff;
  --color-footer: #191e8c;
  --color-yellow-bright: #ffff3c; /* Visual approximation. */

  /* Observed interface stack; font files are not included. */
  --font-body: DNPShueiGoGinStd-M, 'Helvetica Neue', Arial,
    'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
    'Noto Sans JP', Meiryo, sans-serif;
  --font-display: Georgia, 'Times New Roman', serif;
  /* Display stack above is an adaptation, not a source identification. */

  --story-width: 375px;
  --u: calc(var(--story-width) / 375);
  --text-body: calc(18 * var(--u));
  --text-question: calc(12 * var(--u));
  --question-width: 120px;
  --question-height: 50px;
  --rule: 1px; /* CSS approximation of fine SVG linework. */
  --feedback-duration: 300ms; /* Recommended feedback behavior. */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-body);
  font-weight: 400;
}

.recruit-page {
  position: relative;
  isolation: isolate;
  min-block-size: 100vh;
}

.story {
  position: relative;
  z-index: 1;
  inline-size: min(100%, var(--story-width));
  margin-inline: auto;
}

.brand {
  position: fixed;
  z-index: 30;
  inset-block-start: 20px;
  inset-inline-start: 65px;
  inline-size: 230px;
  color: var(--color-ink);
}

.brand svg,
.hero-artwork,
.destination-artwork {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.desktop-nav {
  position: absolute;
  z-index: 10;
  inset-block-start: 28px;
  inset-inline-end: 11.5vw;
  display: grid;
  place-content: center;
  inline-size: 230px;
  block-size: 340px;
  border: var(--rule) solid var(--color-red);
  border-radius: 50%;
}

.desktop-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.desktop-nav a {
  display: block;
  color: var(--color-red);
  font-size: 16px;
  line-height: 30.0433px;
  letter-spacing: 0.035em;
  text-decoration: none;
}

.story-copy {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-body);
  line-height: 2;
  letter-spacing: 0.065em;
  text-align: center;
}

.story-node {
  margin-block-start: calc(48 * var(--u));
}

.topic-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--question-width);
  min-block-size: var(--question-height);
  padding: 6px 10px;
  border: var(--rule) solid var(--color-red);
  border-radius: 50%;
  color: var(--color-red);
  background: var(--color-white);
  font-size: var(--text-question);
  line-height: 1.333333;
  letter-spacing: -0.02em;
  text-align: center;
  text-decoration: none;
}

/* Apply clipping only to peripheral decoration, not the reading column. */
.collage-layer {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: clip;
  pointer-events: none;
}

.photo {
  position: absolute;
  margin: 0;
}

.photo img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: 0;
}

/* Approximate placements from the desktop opening capture. */
.photo--left {
  inset-block-start: 580px;
  inset-inline-start: 10%;
  inline-size: 18.6%;
}

.photo--right {
  inset-block-start: 695px;
  inset-inline-end: 0;
  inline-size: 32.7%;
}

/* Geometry only: the original frame contents remain unverified. */
.tall-oval {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 375 / 666.44;
  border: var(--rule) solid var(--color-ink);
  border-radius: 50%;
}

.ribbon {
  display: block;
  inline-size: 100%;
  block-size: calc(160 * var(--u));
  overflow: visible;
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 34;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.entry-link {
  position: relative;
  isolation: isolate;
  display: grid;
  place-content: center;
  inline-size: 100%;
  aspect-ratio: 375 / 210;
  color: var(--color-ink);
  text-align: center;
  text-decoration: none;
}

/* Rotate the ellipse independently from its readable text. */
.entry-link::before {
  position: absolute;
  z-index: -1;
  inset: 10% 3%;
  border: var(--rule) solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-salmon);
  transform: rotate(-20deg);
  content: '';
}

.entry-title {
  display: block;
  color: var(--color-red);
  font-family: var(--font-display);
  font-size: calc(88 * var(--u));
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  -webkit-text-stroke: 0.65px var(--color-ink);
}

.entry-caption {
  display: block;
  margin-block-start: calc(8 * var(--u));
  font-size: var(--text-body);
  line-height: 1.5;
}

.site-footer {
  margin-block-start: calc(58 * var(--u));
  padding-block-end: 40px;
  color: var(--color-footer);
  text-align: center;
}

.footer-artwork {
  display: block;
  inline-size: calc(203 * var(--u));
  block-size: auto;
  margin-inline: auto;
}

/* Recommended interaction feedback; source hover endpoints are unknown. */
.recruit-page a {
  transition: opacity var(--feedback-duration) ease;
}

@media (hover: hover) {
  .topic-bubble:hover,
  .entry-link:hover,
  .desktop-nav a:hover {
    opacity: 0.8;
  }
}

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

@media (max-width: 750px) {
  :root {
    --story-width: min(100vw, 480px);
    --question-width: calc(128 * var(--u));
    --question-height: calc(53.2 * var(--u));
  }

  .brand {
    inset-inline-start: 15px;
    inline-size: 182px;
  }

  /* Provide an implemented mobile menu before hiding this navigation. */
  .recruit-page.has-mobile-menu .desktop-nav {
    display: none;
  }

  /* Recommended simplification; the complete mobile middle was not shown. */
  .collage-layer {
    display: none;
  }

  .site-footer {
    margin-block-start: calc(29 * var(--u));
    padding-block-end: calc(20 * var(--u));
  }
}

@media (prefers-reduced-motion: reduce) {
  .recruit-page a,
  .moving-decoration {
    animation: none;
    transition: none;
  }
  /* Any JavaScript movement must also honor this preference. */
}
```

### Minimal Component Markup

This demonstrates a question link and the closing entry treatment using recorded destinations. The ribbon path is newly authored illustrative geometry, not an extracted original path. Exact brand, hero, and destination artwork should occupy the corresponding SVG/image slots when available.

```html
<div class='recruit-page'>
  <main class='story'>
    <a class='topic-bubble'
       href='https://www.nii.co.jp/2027recruit/about/index.html#about05'>
      <span lang='ja'>#研修って<br>何するんだろ</span>
    </a>

    <svg class='ribbon' viewBox='0 0 375 160'
         aria-hidden='true' focusable='false'>
      <path d='M135 15 C110 65 45 30 60 65 C72 88 134 128 175 155' />
    </svg>

    <a class='entry-link'
       href='https://www.nii.co.jp/2027recruit/entry/index.html'>
      <span class='entry-title' lang='en'>Entry</span>
      <span class='entry-caption' lang='ja'>エントリーしてみる</span>
    </a>
  </main>
</div>
```

For a full page, add semantic sections in document flow and position decorative imagery relative to those sections. Do not assemble the entire story from absolute document coordinates. A mobile menu should expose all seven recorded primary destinations before the desktop navigation is hidden.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. Define the CSS properties above first. This mapping does not imply that the original website uses Tailwind.

```css
@theme inline {
  --color-paper: #f2efe7;
  --color-ink: #0000a5;
  --color-question: #f00a19;
  --color-salmon: #ffaaa0;
  --color-pale-yellow: #fff58c;
  --color-footer: #191e8c;

  --font-japanese: var(--font-body);
  --font-campaign: var(--font-display);

  --text-narrative: calc(18 * var(--u));
  --text-question: calc(12 * var(--u));
  --text-entry: calc(88 * var(--u));

  --spacing-story: var(--story-width);
  --spacing-question: var(--question-width);
  --spacing-story-gap: calc(48 * var(--u));
  --radius-oval: 50%;
}
```

## Sources & Evidence

- [NII Recruit 2027 — original and final inspected URL](https://www.nii.co.jp/2027recruit/index.html): the supplied response returned HTTP 200 with no URL change. This page is the authority for the title, recruitment identity, extracted destinations, and current design observations.
- **Capture date:** September 12, 2026. Supplied retrieval timestamp: `2026-09-12T12:13:24.192Z` / 21:13:24 JST.
- **Desktop evidence:** `1440 × 1000` CSS-pixel viewport; opening, middle, and closing captures; measured document height `4954.671875px`.
- **Mobile evidence:** `390 × 844` CSS-pixel viewport; opening and closing captures; measured document height `5101.640625px`.
- **Rendered evidence:** element rectangles, computed colors and typography, transition/animation summaries, inline SVG declarations, three source custom properties, and home-page link records.
- **Observed state limitations:** blank desktop opening center; blank interiors in visible portions of tall oval frames; no exercised menu, hover, keyboard, media, or entry-form interactions. Destination pages were not opened.
- **Capture limitations:** bounded readiness checks do not guarantee semantic completeness. Continuous motion was resumed after readiness checks. SharedWorkers and service workers were disabled by the supplied inspection process.

This reference analyzes the supplied current-page evidence only. No additional browsing, command execution, or asset-file inspection was performed. Measured values, visual estimates, derived relationships, and implementation recommendations are identified separately throughout.