# Mirai Works — Style Reference

> A spacious corporate directory anchored by a red emblem, restrained serif headings, and precise horizontal rules.

**Website:** [mirai-works.co.jp](https://mirai-works.co.jp/)
**Original URL:** https://mirai-works.co.jp/
**Final URL:** https://mirai-works.co.jp/
**Response:** HTTP 200, with no URL change reported.
**Theme:** pale warm-gray content canvas with a charcoal service footer.
**Inspected:** supplied browser capture from October 2, 2026, 03:59 JST — October 1, 2026, 18:59:11.282 UTC.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Scope:** the current corporate homepage. Visual evidence covers the desktop hero, part of the embedded video, corporate and investor-relations links, the news heading, and the service footer; mobile captures cover the hero and lower footer. Supplied rendered DOM and computed styles additionally document audience routes, news rows, promotional links, and navigation content. Linked destination pages and the opened menu were not inspected.

Mirai Works establishes its identity through scale and restraint. A small brand lockup sits in the header while a much larger red, three-part emblem occupies the center of a nearly empty first viewport. The Japanese statement “プロ人材を、解放する。” appears underneath. The background is subtly warmer than white, and most interface text is charcoal rather than pure black.

The page then becomes a corporate navigation hub: individual and business audience routes, company and IR access, recent announcements, recruitment and research links, and a service directory. A 760px desktop content width holds this material inside unusually generous margins. English serif headings provide hierarchy; Japanese sans-serif captions and article text provide detail. The full-width charcoal footer closes the page with an orderly directory rather than another promotional hero.

## How to Read This Reference

- **Measured** means a value appears in the supplied element rectangles or computed styles. Coordinates describe the captured state, not necessarily the underlying CSS declaration.
- **Calculated** means simple arithmetic using those measurements, such as a gap between two rectangles.
- **Visual estimate** means an approximate dimension, color, or appearance read from a current-page screenshot. It is not a pixel-sampled or stylesheet-confirmed value.
- **Recommended** means a proposed implementation choice. The Quick Start is an adaptation, not recovered source code.
- All named tokens are reference aliases. The only supplied source custom property is `--vh`, measured as `10px` on desktop and `8.44px` on mobile.
- Computed font-family lists establish declared stacks, not proof that a particular font file supplied every visible glyph.
- Extracted navigation and duplicated text can have nonzero rectangles while remaining visually concealed. DOM presence alone does not establish an open menu or an active hover state.

## Tokens — Colors

### Default Palette

| Name | Value | Reference token | Evidence and role |
| --- | --- | --- | --- |
| Warm Canvas | `#f5f2f2` | `--mw-paper` | Measured HTML and header background; the principal light surface |
| Charcoal | `#2c2c2c` | `--mw-ink` | Measured navigation, link text, and service-section background |
| Accent Red | `#bc0900` | `--mw-red` | Measured on alternate duplicated promotional-label layers; suitable for restrained interaction emphasis |
| White | `#ffffff` | `--mw-white` | Measured promotional-link backgrounds and service-footer text |
| Heading Black | `#000000` | `--mw-black` | Measured on the NEWS heading and inherited root text; distinguish it from charcoal link text |
| Light Rule | Approximately `#dedada` | `--mw-rule` | Visual approximation for fine rules on the light canvas; exact border color was not supplied |
| Dark-Surface Rule | Approximately `#737373` | `--mw-rule-dark` | Visual approximation for service-row separators |
| Deep Emblem Red | Approximately `#501007` | Asset color, not a general UI token | Visual approximation of the emblem’s darkest shading; preserve the authorized artwork when available |

The emblem contains several reds and darker shaded regions. The measured `#bc0900` belongs to text layers and should not be described as the exact fill of every emblem facet. The corporate and IR illustrations introduce lighter red and pink regions within the same visual family.

Color is concentrated in identity and illustration. Most of the content remains neutral. White promotional bars gain separation from the slightly darker canvas without requiring shadows.

### Surface Color Behavior

There is no evidence of a selectable theme system. The charcoal footer is a section treatment within the same page. Its white text, fine gray rules, and white social symbols reverse the light section’s contrast while preserving the same restrained geometry.

The embedded video includes black player chrome. Treat that as third-party media UI, not as an additional site-wide surface style.

## Tokens — Typography

### Editorial Serif

**Measured source family:** `CrimsonText, serif`.

This stack is declared for major English headings, compact English route titles, the Scroll cue, See all, and the copyright line. Most sampled instances use weight `400`; the copyright uses `500`.

The serif gives the page a formal editorial quality without heavy display weight. Tracking is generous, especially in uppercase headings. Preserve that combination of regular weight and spacing instead of substituting a bold geometric sans-serif.

### Japanese and Utility Sans Serif

**Measured source stack:** `'Noto Sans Japanese', 'Helvetica Neue', 'Segoe UI', Helvetica, 游ゴシック体, YuGothic, 'Yu Gothic M', '游ゴシック Medium', 'Yu Gothic Medium', メイリオ, Meiryo`.

The base is `14px / 21px`, weight `400`, with `1.68px` letter spacing. Navigation reduces tracking to `1.12px`; article titles increase line height to `24.5px` while retaining the 14px size.

Do not assume that the Latin serif font supplies Japanese glyphs in elements that inherit the serif stack. Actual fallback selection was not reported.

### Brand and Hero Lettering

The header logo and hero statement appear as artwork rather than ordinary sampled text. Their H1 and H2 nodes have empty extracted text, despite visible lettering in the screenshots. Asset format and accessible names were not provided.

Consequently, the H1’s computed `28px` and the hero H2’s computed `21px` are not reliable measurements of the visible logo or slogan lettering. Preserve the authorized artwork and its proportions; do not attempt to identify a Japanese display font from these values.

### Type Scale

Values in this table are measured unless explicitly marked otherwise.

| Role | Desktop size / line height | Mobile size / line height | Weight | Tracking |
| --- | --- | --- | --- | --- |
| Base interface text | `14px / 21px` | Same | 400 | `1.68px` |
| Desktop primary navigation | `14px / 21px` | Replaced by menu control | 400 | `1.12px` |
| Header audience labels | `11px / 16.5px` | Not visible in closed mobile header | 400 | `1.68px` |
| PERSONAL / BUSINESS | `50px / 75px` | `40px / 60px` | 400 | `4px` / `3.2px` |
| NEWS | `50px / 65px` | `40px / 52px` | 400 | `4px` / `3.2px` |
| CORPORATE / IR | `24px / 36px` | `20px / 30px` | 400 | `1.92px` / `1.6px` |
| Promotional English titles | `24px / 36px` | `20px / 30px` | 400 | `1.92px` / `1.6px` |
| Promotional Japanese captions | `10px / 15px` | Same | 400 | `0.8px` |
| See all | `24px / 36px` | `20px / 30px` | 400 | `1.92px` / `1.6px` |
| News article titles | `14px / 24.5px` | Same | 400 | `1.68px` |
| Service directory links | `14px / 24px` | Same | 400 | `1.68px` |
| Scroll | `16px / 24px` | `20px / 30px` | 400 | `0.64px` / `0.8px` |
| Policy link | `12px / 24px` | Same | 400 | `0.9px` |
| Copyright | `14px / 40px` | Same | 500 | `1.1px` |

The mobile Scroll label is larger than its desktop equivalent. Responsive typography here is not a uniform percentage reduction.

The visible SERVICE lettering is serif and approximately 36px in the desktop screenshot. Its inner text element was not sampled. The enclosing H3’s `16.38px` computed size should not be substituted for the visibly larger child lettering. A 36px serif heading is an implementation approximation.

## Tokens — Spacing & Shapes

**Density:** sparse at the page level, compact within labels and utility controls.
**Shape language:** square rectangles, hairline rules, long thin arrows, and circular social symbols.

### Spacing Scale

The evidence supports a practical family of 10, 20, 30, 40, 60, 80, and 160px intervals, but it does not establish a single universal spacing grid. Preserve the observed exceptions.

| Use | Value | Evidence |
| --- | --- | --- |
| Desktop section wrapper padding | `10px` each side | Measured inside a 780px wrapper |
| Desktop header side inset | `40px` | Measured logo and rightmost navigation alignment |
| Mobile main-content inset | `31.2px`, or `8vw` at 390px | Measured padding |
| Mobile footer side inset | `30px` | Measured service-content alignment |
| Desktop primary-nav gap | Approximately `18px` | Calculated between adjacent links |
| Desktop route artwork-to-title gap | `53px` | Calculated from the 140px image and title position |
| Gap between CORPORATE and IR rows | `60px` desktop; `40px` mobile | Calculated from row rectangles |
| Desktop service-column gap | `60px` | Calculated between two 350px tracks |
| Gap between service-link boxes | `38px` desktop; `28px` mobile | Calculated from row strides and 43px link height |
| Promotional-bar gap | `40px` desktop; `30px` mobile | Calculated |
| Major gap after IR before NEWS | `160px` desktop; `80px` mobile | Calculated |
| Gap after news before promotional bars | `160px` desktop; `80px` mobile | Calculated |
| Footer vertical padding | `83px` top and bottom | Measured at both viewports |

### Border Radius and Rules

| Element | Treatment | Status |
| --- | --- | --- |
| Sampled links, sections, and promotional bars | `0px` radius | Measured |
| Corporate and IR artwork | Square presentation | Visible |
| White arrow backing | Tall, square-cornered rectangle | Visible |
| Content and service separators | Approximately 1px | Visual estimate, also consistent with measured row spacing |
| Social symbols | Circular white forms | Visible artwork, not a measured CSS radius |
| General elevation | No visible shadow system | Screenshot observation |

### Layout Measurements

| Element | Desktop: 1440 × 1000 | Mobile: 390 × 844 | Status |
| --- | --- | --- | --- |
| Header height | `97px` | `62.86px` | Measured |
| Visible brand lockup | `196 × 29.88px` | `150 × 22.86px` | Measured H1 bounds and screenshot agreement |
| Hero section | `1440 × 1000px` | `390 × 844px` | Measured |
| Hero emblem | Approximately `306 × 296px` | Approximately `180 × 174px` | Visual estimate |
| Hero statement container | `431 × 37.77px` | `296 × 31.5px` | Measured H2 bounds |
| Main inner content width | `760px` | `327.63px` | Measured |
| CORPORATE / IR link box | `760 × 140px` | `327.63 × 107px` | Measured |
| Promotional link box | `760 × 120px` | `327.63 × 120px` | Measured |
| Footer inner width | `760px` | `330px` | Measured |
| Service-link box | `350 × 43px` | `330 × 43px` | Measured |
| Footer height | `778px` | `1169.39px` | Measured |
| Document height | Approximately `4979.34px` | Approximately `5102.58px` | Measured; content-dependent |

The mobile logo’s enclosing anchor was separately reported as 196px wide, although the visible H1 is 150px wide. Use the visible brand dimensions for visual reproduction and audit the actual clickable area independently.

## Components

### Persistent Corporate Header

**Role:** identity, corporate navigation, and immediate audience routing.

The desktop header is a pale strip spanning the viewport. The 196px-wide brand lockup starts 40px from the left. Six compact links sit toward the right: “会社情報”, “事業内容”, “お知らせ”, “IR情報”, “お問い合わせ”, and “採用情報”. The recruitment link includes a small outward-arrow symbol.

Two additional audience links occupy the far-right area. Their 11px labels wrap into two lines, followed by narrow charcoal arrow blocks. The labels are “仕事をお探しの個人の方” and “人材をお探しの法人の方”. These controls are visually compact; their importance comes from placement and repetition elsewhere on the page.

A fine horizontal rule is visible under the header in the scrolled desktop captures. The header remains at the top in both middle and bottom captures, supporting persistent positioning. The evidence does not distinguish fixed positioning from a sticky implementation.

### Mobile Menu Control

**Role:** replaces the full desktop navigation within a narrow header.

At 390px, the brand begins approximately 31.2px from the left and 20px from the top. A control at the right shows two thin horizontal lines with MENU underneath. Its sampled button box is approximately `43.33 × 37.5px`.

The DOM contains both MENU and CLOSE labels, along with primary navigation, audience links, and promotional destinations. Only the closed state is visually documented. Do not infer the opened panel’s background, entrance direction, scroll locking, or focus behavior from these off-state nodes.

### Full-Viewport Brand Hero

**Role:** establish identity before introducing the site’s many destinations.

The hero fills exactly one captured viewport at both sizes. Its content cluster is centered horizontally and approximately centered vertically as a group, including the slogan.

On desktop, the emblem occupies roughly x=567–873 and y=303–599. The statement container begins at y=658.75, leaving approximately 60px between the emblem and text. On mobile, the emblem occupies roughly x=105–285 and y=299–473; the statement container begins at y=513.25, giving approximately 40px of separation.

The three red facets are distinct shapes with pale gaps between them. The middle facet has pointed ends; the outer facets have slanted edges. Their shading belongs to the brand artwork. Preserve the proportions and internal gaps with an authorized asset.

The only lower hero label is Scroll. Its desktop box begins at y=919.5; the mobile box begins at y=760.5. A very faint downward indicator is visible below the desktop label. The sampled Scroll element is a paragraph, and no click behavior was demonstrated.

### Audience Route Links

**Role:** separate individual job-seeking needs from business staffing needs.

The DOM documents PERSONAL and BUSINESS routes with large English serif titles and smaller Japanese descriptions. Desktop link boxes are approximately `466.52 × 268.88px`. PERSONAL is aligned to the right side of the 760px content area; BUSINESS is aligned to its left.

On mobile, both link boxes span the same `327.63px` content width and become 106px tall, with 30px of bottom padding. The English headings reduce from 50px to 40px.

The supplied screenshots do not show the complete audience-route compositions. Associated artwork, cropping, and the mechanism behind their generous surrounding space are therefore unverified. Reuse the documented text hierarchy and responsive alignment without inventing portraits or decorative scenes.

### Embedded Video Region

**Role:** introduces a media-based explanation between the audience routes and corporate links.

The middle desktop screenshot shows the lower part of a 760px-wide YouTube player aligned with the main content column. Visible content includes presenter footage, Japanese subtitles, and player controls. Approximately 160px of pale space separates its visible bottom from the CORPORATE row.

The complete player height, aspect ratio, embed URL, playback state, and audio behavior are not supplied. A responsive 16:9 wrapper is a reasonable implementation recommendation, not a measured source ratio.

### Corporate and IR Route Rows

**Role:** provide compact access to company and investor information.

Each desktop row combines four parts:

1. A 140px square red illustration at the left.
2. A text group beginning 193px from the row’s left edge, equivalent to the artwork width plus a 53px gap.
3. An English serif title with a small Japanese caption beneath it.
4. A thin right-pointing arrow extending across a white vertical rectangle at the far right.

CORPORATE uses a geometric building illustration. IR uses a circular chart with ascending bars. Both use red and pink tonal variations with sharp edges.

The divider starts at the text column rather than running beneath the left-hand image. It reaches the right edge of the 760px row. The arrow’s white backing is visually about `40 × 60px`; the line extends to the left of the backing.

Mobile rectangles are 107px tall, and title groups begin 80px inside each row. The supplied evidence does not separately measure mobile artwork dimensions. A 64px artwork plus 16px gap is a useful adaptation consistent with that offset, not a confirmed source specification.

### NEWS Heading and See All Link

**Role:** introduce the current announcement list and its archive.

The title group sits left, with NEWS in 50px serif lettering and the Japanese label “お知らせ” below. See all sits at the right with the same thin-arrow and white-backing treatment used by the route rows.

The heading and archive link remain on one horizontal line at the inspected mobile width. NEWS reduces to 40px, and See all to 20px. The archive-link box changes from 60px to 48px high.

### News List Row

**Role:** present recent announcements as readable linked records.

Three entries are documented, dated September 29, September 25, and September 18, 2026. Each link contains a date/year group, a category such as “お知らせ” or “メディア掲載”, and a Japanese article title.

On desktop, the row spans 760px. The title begins 325px after the row’s left edge and has a 435px text track. Its typography is `14px / 24.5px`. Links use 37px top padding and 40px bottom padding; the sampled heights are 139px and 150.5px, depending on title wrapping.

On mobile, the title spans the full `327.63px` width below the metadata. Padding becomes 40px on both vertical sides. The sampled titles occupy three or four lines, producing row heights of 235.5px and 260px. Preserve this reflow rather than shrinking article text or truncating every headline.

Only the desktop news links expose a confirmed timed transition: `color 0.3s ease-out`. The resulting hovered color was not captured.

### Promotional Destination Bars

**Role:** connect the homepage to recruitment, research, and editorial destinations.

Three bars are documented: RECRUIT, MWRI, and CAREER Knock. Each combines a regular-weight English serif title with a 10px Japanese caption.

The main-page bars have a white background, square corners, and a 120px height at both inspected widths. Desktop text starts 40px inside the bar; mobile text starts 30px inside it. The bars are separated by 40px on desktop and 30px on mobile.

The DOM includes overlapping charcoal and red label copies. This supports the existence of alternate presentation layers but does not establish their trigger or movement. A new implementation should expose one semantic label and hide any decorative duplicate from assistive technology.

### Service Directory Footer

**Role:** provide a comprehensive set of service destinations and close the page with a strong tonal change.

The footer spans the viewport in `#2c2c2c`, with white text and 83px vertical padding. Its desktop content retains the same 760px alignment as the main sections.

A large SERVICE label and a small Japanese caption precede ten service links. Desktop uses two 350px columns separated by 60px. The sequence is row-major: “フリーコンサルタント.jp” beside “Skill Shift（スキルシフト）”, then MOREWORKS beside “コンサルネクスト”, continuing through the remaining services.

Each service link has a thin bottom rule and a small outward-arrow symbol at the right. The text is `14px / 24px`, with `1.68px` tracking and 18px bottom padding. Link boxes are 43px tall, with an 81px row-to-row stride on desktop.

At 390px, the directory becomes one 330px column with a 71px stride. Source order is retained: the former right-hand entry follows its corresponding left-hand entry. Some arrow-marked destinations remain on the same domain, so the symbol alone does not prove an external domain or a new-tab target.

### Policy, Copyright, and Social Links

**Role:** finish the footer with institutional and social information.

Desktop places the policy link and copyright at the lower left, with Facebook, X, and LinkedIn symbols at the lower right. The copyright reads “© Mirai Works Inc. All Rights Reserved.”

On mobile, the visible order changes to social symbols, policy link, then copyright. The social artwork increases from approximately 24px to 32px wide and is left aligned. The mobile screenshot and element positions establish this visual order even though extracted text lists the copyright before the policy link.

The icon anchors have smaller reported line boxes than the visible artwork. Do not use those inline rectangles as accessibility target-size specifications.

## Tokens — Motion & Interaction

| Treatment | Evidence | Implementation consequence |
| --- | --- | --- |
| Desktop news-link feedback | Computed `color 0.3s ease-out` | A 300ms ease-out color transition is directly supported |
| Mobile news-link feedback | Serialized transition is only `all` | No nonzero duration or visible transition is established |
| Alternate route and promotional labels | Overlapping charcoal and red text layers appear in the DOM | A layered interaction is plausible; trigger, direction, and timing remain unverified |
| Mobile navigation | MENU and CLOSE labels exist; screenshot shows MENU | Closed-state appearance is verified; opening behavior is not |
| Header persistence | Header remains at the viewport top in scrolled captures | Persistent behavior is visible; exact positioning method is unknown |
| Scroll cue | Label and faint desktop downward marks are visible | Do not assume click-to-scroll or a looping bounce |
| Hero emblem | Settled screenshots show the brand mark | No supported entrance sequence, morph, or scroll animation |
| Embedded video | Player chrome is visible | Playback, autoplay, sound, and interaction behavior were not exercised |
| Sampled animations | Sampled nodes report `animation: none` | This does not exclude scripts, pseudo-elements, unsampled children, or media motion |

The capture procedure waited for initial rendering and bounded stability checks. Perpetual animations were temporarily paused during readiness checks and then resumed. These procedures do not provide a motion timeline.

**Recommended adaptation:** keep added feedback limited to subtle color or opacity changes around 150–300ms. Preserve content and layout under reduced motion. Do not add parallax, emblem rotation, or dramatic page transitions without separate evidence or a new design requirement.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Main canvas | Solid `#f5f2f2` | Continuous neutral field for the hero and corporate content |
| Header | Same pale fill; thin rule visible in scrolled desktop views | Persistent navigation without a separate visual theme |
| Open content rows | Canvas background with thin separators | Organize routes and news without enclosing every item in a card |
| Promotional bars | White, square, unshadowed | Quiet emphasis through a slight surface contrast |
| Arrow backing | Small white vertical rectangle | Gives a fine line arrow a defined endpoint |
| Service footer | Full-width charcoal with white text | Strong closing section and dense directory |
| Media player | Video imagery and player-provided chrome | A bounded embedded-media region |

The hierarchy comes from whitespace, type scale, illustration, and the transition to the dark footer. It does not depend on floating panels, soft shadows, large radii, or translucent surfaces.

## Imagery

The visual identity uses clean geometric artwork and a limited red palette. The central emblem is the strongest image; its empty surroundings are part of its presentation. Smaller illustrations translate corporate information into simple architectural and chart motifs.

Photography appears within the cropped video player. The evidence does not establish a broader photographic system for the audience routes or other unseen regions.

### Observed Asset References

No image `src`, SVG path, font-file URL, or video embed URL was included in the supplied evidence. The following are visual references, not downloadable asset paths.

| Asset | Observed use | Dimensions or limitations |
| --- | --- | --- |
| Mirai Works lockup | Header identity | 196px wide desktop; 150px wide mobile |
| Three-part red emblem | Hero centerpiece | Approximately 306 × 296px desktop; 180 × 174px mobile |
| Japanese hero statement | Beneath emblem | Container widths 431px desktop and 296px mobile |
| Red building illustration | CORPORATE route | 140px square in the desktop screenshot |
| Red circular chart illustration | IR route | 140px square in the desktop screenshot |
| Presenter footage and captions | Embedded video | Only part of the 760px-wide player is visible |
| Long line arrow and white backing | Route rows and archive link | Fine line, square backing, no filled round button |
| Outward-arrow glyph | Recruitment and service destinations | Small outlined symbol; link-target behavior unverified |
| Facebook, X, LinkedIn symbols | Footer | White circular forms; larger on mobile |

Use authorized original artwork when available. For a new brand, reproduce the compositional principle with its own emblem and illustrations. Do not redraw the Mirai Works logo approximately and present it as an original asset, or introduce fabricated asset URLs into the implementation.

## Layout & Responsive Behavior

### Desktop Composition

The header spans almost the entire viewport with 40px outer insets, while the body content occupies only 760px. At 1440px, this creates 340px margins on either side of the main content — a substantially narrower measure than the header.

The hero occupies the first 1000px of document height. Subsequent content uses a mixture of alternating audience-route alignment and full-width rows within the narrow column. Major 160px gaps separate the IR, news, and promotional regions.

The footer changes the background across the entire viewport while retaining the 760px inner alignment. Its two-column service grid is the most consistently repeated multi-column structure in the visible lower page.

### Mobile Composition

The 390px layout retains the full-height hero and generous vertical breathing room. The large mark becomes approximately 180px wide, while the hero statement remains nearly the width of the content area.

Main sections use 8vw horizontal padding, producing about 327.6px of usable width. Footer content uses a separate 30px inset, producing 330px. Preserve this small distinction when closely matching the supplied view.

The major responsive changes are structural:

- Desktop navigation is replaced by the compact MENU control.
- Audience routes share one left alignment.
- Major English headings reduce from 50px to 40px; smaller route titles reduce from 24px to 20px.
- News titles move below their metadata and retain their 14px reading size.
- Promotional bars retain their 120px height.
- Service links become a single ordered column.
- Social links move above policy and copyright and become larger.
- Major 160px section gaps reduce to 80px.

The page remains long: approximately 5103px on mobile versus 4979px on desktop. Smaller graphics do not make it shorter overall because text and directory links stack vertically.

### Responsive Limits

Only 390px and 1440px widths were supplied. Exact breakpoints, tablet layouts, landscape behavior, browser zoom behavior, and safe-area handling are unverified.

The Quick Start recommends a 1200px header breakpoint to avoid navigation collisions and a 768px content breakpoint. These are implementation choices, not extracted media-query values. The source `--vh` values equal one percent of the captured viewport heights, but the expressions consuming that property were not supplied.

## Do’s and Don’ts

### Do

- Keep the pale canvas exact at `#f5f2f2` and the primary charcoal at `#2c2c2c`.
- Give the hero emblem substantial empty space and preserve its relationship to the Japanese statement.
- Maintain the contrast between a wide header and a narrow 760px desktop content column.
- Use regular-weight serif English headings with generous tracking.
- Preserve readable Japanese article text when it wraps on mobile.
- Use fine rules, square illustrations, and restrained white promotional bars.
- Let long arrows extend beyond their small white backing rectangles.
- Retain the two-column-to-one-column service sequence in reading order.
- Treat individual, business, corporate, IR, news, and service destinations as a coherent corporate navigation system.
- Keep measured values, visual estimates, and implementation additions distinguishable.

### Don’t

- Don’t convert the homepage into a single-purpose sales funnel with repeated oversized conversion buttons.
- Don’t fill the hero’s empty space with stock photography, badges, or invented supporting copy.
- Don’t replace the route rows with rounded, shadowed cards.
- Don’t use red as the background of every section or control.
- Don’t flatten the emblem’s multiple red facets into an unrelated generic icon.
- Don’t infer the hero lettering’s font from the empty H2’s computed font size.
- Don’t shrink mobile article text to preserve desktop row heights.
- Don’t display duplicated DOM labels as two visible copies.
- Don’t assume every outward-arrow symbol opens an external domain or new tab.
- Don’t invent menu transitions, hover choreography, autoplay behavior, or undocumented asset paths.

## Recommended Implementation Additions

These are recommendations for a new implementation, not verified features of the inspected site:

- Give the header logo and hero statement meaningful accessible equivalents. If the slogan is artwork, ensure its actual wording is exposed once to assistive technology.
- Use one semantic label per link. Mark decorative interaction copies `aria-hidden='true'`.
- Add visible keyboard focus indicators on both light and dark surfaces.
- Expand compact menu and social targets to at least 44 × 44px without unnecessarily enlarging their artwork.
- Implement the menu with `aria-expanded`, `aria-controls`, an appropriate accessible name, Escape handling, and reliable focus restoration. Hidden navigation must not remain in the tab order.
- Preserve logical reading order when the footer moves social links above legal information.
- Reserve media and artwork dimensions to reduce layout shifts. Add an iframe title and make video playback user controlled.
- Consider increasing 10px explanatory captions to 12px where legibility matters more than exact reproduction.
- Ensure persistent navigation does not conceal anchor targets; apply an appropriate `scroll-margin-top`.
- Respect `prefers-reduced-motion` for any additional animated states.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas and header: `#f5f2f2`.
- Primary interface text and footer background: `#2c2c2c`.
- Measured alternate-label red: `#bc0900`.
- Promotional bars and footer text: `#ffffff`.
- Light divider approximation: `#dedada`.
- Dark divider approximation: `#737373`.
- Emblem shading: use the authorized artwork; do not treat one UI red as the entire asset palette.

### Overall Prompt

“Create a Japanese corporate homepage with the spatial discipline of the inspected Mirai Works page. Use a pale warm-gray canvas, charcoal text, restrained red brand artwork, regular serif English headings, and small Japanese sans-serif supporting labels. Make the first viewport a centered brand emblem and one Japanese statement, with extensive empty space and a low Scroll cue. Keep desktop content in a 760px column beneath a wide persistent header. Build audience routes, illustrated company and IR rows, an announcement list, and white promotional bars. Finish with a full-width charcoal service directory that changes from two columns to one on mobile. Use thin rules, square corners, and long line arrows. Treat menu behavior and extra animation as separate implementation decisions.”

### Example Component Prompts

1. **Hero:** “A full-viewport pale-gray corporate hero with an authorized red geometric emblem centered above the Japanese statement ‘プロ人材を、解放する。’. Use a roughly 306px-wide mark on desktop and 180px on a 390px phone. Keep about 60px between emblem and statement on desktop and 40px on mobile. Add a small serif Scroll label near the bottom.”
2. **Corporate route:** “A 760px-wide, 140px-high company-information link. Place a square red building illustration at the left, a regular 24px serif CORPORATE title and small Japanese caption after a 53px gap, then a thin right arrow crossing a 40 × 60px white backing. Draw the bottom rule beneath the text-and-arrow region only.”
3. **News list:** “A restrained announcement list on a warm pale canvas. Use date and category metadata at the left and a 435px headline track at the right inside a 760px row. Japanese titles use 14px type with 24.5px line height. On mobile, place the title below metadata, keep the text size, and allow three or four lines.”
4. **Promotional bar:** “A square-cornered white bar, 120px tall, with a regular serif destination title above a small Japanese explanatory caption. Use 40px left padding on desktop and 30px on mobile. Keep the separation tonal and avoid a shadow.”
5. **Service footer:** “A full-width charcoal footer with a centered 760px directory, a serif SERVICE heading, and ten white text links arranged in two columns. Each link has a thin gray bottom rule and a small outward-arrow symbol. On a 390px screen, use a 330px single column and place larger social symbols above the policy link and copyright.”

### Evidence-Safe Extension Prompt

“Extend only the documented visual system. Preserve confirmed colors, type hierarchy, content widths, and responsive reflow. Label proposed breakpoints, interaction timings, and missing-asset substitutions as recommendations. Do not infer the open-menu appearance, audience illustrations, or video behavior from off-state DOM entries.”

## Quick Start

### CSS Custom Properties

This is a reusable styling foundation based on the measured proportions. Rule colors, SERVICE typography, mobile route artwork size, and breakpoints are explicit approximations or recommendations. It does not supply brand assets, load font files, or implement menu state and video behavior.

Use authorized artwork for `.brand-image`, `.hero-mark`, `.hero-copy img`, and `.route-art`. The serif family name matches the supplied declaration; it requires an available font definition to render beyond its generic fallback.

```css
:root {
  /* Measured palette */
  --mw-paper: #f5f2f2;
  --mw-ink: #2c2c2c;
  --mw-red: #bc0900;
  --mw-white: #ffffff;
  --mw-black: #000000;

  /* Visual approximations */
  --mw-rule: #dedada;
  --mw-rule-dark: #737373;

  /* Declared families; font assets are not included */
  --mw-serif: CrimsonText, serif;
  --mw-sans: 'Noto Sans Japanese', 'Helvetica Neue', 'Segoe UI',
    Helvetica, '游ゴシック体', YuGothic, 'Yu Gothic M',
    '游ゴシック Medium', 'Yu Gothic Medium', 'メイリオ',
    Meiryo, sans-serif;

  --mw-content: 760px;
  --mw-header-height: 97px;
  --mw-heading: 50px;
  --mw-row-title: 24px;
  --mw-section-gap: 160px;
  --mw-tracking: 0.08em;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--mw-ink);
  background: var(--mw-paper);
  font-family: var(--mw-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 1.68px;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* 780px outer wrapper, 760px inner desktop measure */
.content-wrap {
  width: min(100%, 780px);
  margin-inline: auto;
  padding-inline: 10px;
}

.section-gap { margin-top: var(--mw-section-gap); }

/* Fixed is an adaptation of the observed persistent header. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  height: var(--mw-header-height);
  background: var(--mw-paper);
}

.header-inner {
  display: flex;
  align-items: center;
  height: 100%;
  margin-inline: 40px;
  padding-top: 10px;
}

.site-header.is-scrolled .header-inner {
  border-bottom: 1px solid var(--mw-rule);
}

.brand { flex: none; margin: 0; }
.brand-image { width: 196px; height: auto; }

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 39px;
  margin-left: auto;
}

.primary-links,
.audience-links {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-links { gap: 18px; }
.primary-links a { font-size: 14px; letter-spacing: 1.12px; }
.audience-links { gap: 30px; }

.audience-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  line-height: 16.5px;
}

.audience-arrow {
  display: grid;
  place-items: center;
  width: 15px;
  height: 28px;
  color: var(--mw-white);
  background: var(--mw-ink);
}

.menu-toggle {
  display: none;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

/* Stable viewport height is a recommended modern adaptation. */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
}

.hero-cluster {
  display: grid;
  justify-items: center;
  gap: 60px;
}

.hero-mark {
  width: 306px;
  aspect-ratio: 306 / 296;
  object-fit: contain;
}

.hero-copy {
  display: grid;
  align-items: center;
  width: 431px;
  min-height: 37.77px;
  margin: 0;
}

.hero-copy img { width: 100%; height: auto; }

.hero-scroll {
  position: absolute;
  bottom: 56.5px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  font-family: var(--mw-serif);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.04em;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.section-title,
.audience-title,
.route-title {
  margin: 0;
  font-family: var(--mw-serif);
  font-weight: 400;
  letter-spacing: var(--mw-tracking);
}

.section-title {
  color: var(--mw-black);
  font-size: var(--mw-heading);
  line-height: 1.3;
}

.audience-title {
  font-size: var(--mw-heading);
  line-height: 1.5;
}

.route-title { font-size: var(--mw-row-title); line-height: 1.5; }

.small-caption {
  display: block;
  margin: 0;
  font-family: var(--mw-sans);
  font-size: 10px;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: 0.8px;
}

.audience-copy {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 268.88px;
  width: min(100%, 466.52px);
  padding-bottom: 40px;
}

.audience-copy.is-right { margin-left: auto; }

.route-list { display: grid; gap: 60px; }

.route-link {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 53px;
}

.route-art { width: 140px; aspect-ratio: 1; object-fit: contain; }

.route-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 140px;
  border-bottom: 1px solid var(--mw-rule);
}

.arrow-tile {
  position: relative;
  display: block;
  flex: 0 0 40px;
  width: 40px;
  height: 60px;
  background: var(--mw-white);
}

.arrow-tile::before {
  content: '';
  position: absolute;
  left: -17px;
  top: 50%;
  width: 44px;
  border-top: 1px solid currentColor;
}

.arrow-tile::after {
  content: '';
  position: absolute;
  right: 13px;
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.see-all {
  display: flex;
  align-items: center;
  gap: 40px;
  font-family: var(--mw-serif);
  font-size: var(--mw-row-title);
  line-height: 1.5;
  letter-spacing: var(--mw-tracking);
}

.news-list { list-style: none; margin: 40px 0 0; padding: 0; }
.news-list > li { border-block-start: 1px solid var(--mw-rule); }
.news-list > li:last-child { border-block-end: 1px solid var(--mw-rule); }

.news-row {
  display: grid;
  grid-template-columns: 295px minmax(0, 1fr);
  align-items: center;
  gap: 30px;
  padding-block: 37px 40px;
}

/* Metadata subdivision is an adaptation, not a sampled track. */
.news-meta {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 62px;
}

.news-title {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 24.5px;
}

.promo-list { display: grid; gap: 40px; }

.promo-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 120px;
  padding-inline: 40px 24px;
  background: var(--mw-white);
}

.service-footer {
  padding-block: 83px;
  color: var(--mw-white);
  background: var(--mw-ink);
}

.footer-wrap {
  width: min(var(--mw-content), calc(100% - 60px));
  margin-inline: auto;
}

/* Visible SERVICE typography is approximated. */
.footer-title {
  margin: 0;
  font-family: var(--mw-serif);
  font-size: 36px;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: 0.08em;
}

.service-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 38px 60px;
  list-style: none;
  margin: 54px 0 0;
  padding: 0;
}

.service-link {
  position: relative;
  display: block;
  padding: 0 16px 18px 0;
  border-bottom: 1px solid var(--mw-rule-dark);
  font-size: 14px;
  line-height: 24px;
}

.service-link .outbound-icon {
  position: absolute;
  right: 0;
  top: 6px;
  width: 11px;
  height: 11px;
}

.footer-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'policy social' 'copyright social';
  gap: 6px 24px;
  margin-top: 57px;
}

.policy-link {
  grid-area: policy;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 0.9px;
}

.copyright {
  grid-area: copyright;
  margin: 0;
  font-family: var(--mw-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 1.1px;
}

.social-links {
  grid-area: social;
  display: flex;
  align-items: center;
  align-self: end;
  gap: 20px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.social-links img { width: 24px; height: 24px; }

/* Recommended accessible focus treatment */
:where(a, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

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

@media (min-width: 768px) {
  .news-row { transition: color 300ms ease-out; }
}

/* Red hover is recommended; the captured hovered result is unknown. */
@media (hover: hover) {
  .news-row:hover { color: var(--mw-red); }
  .service-link:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* Recommended header breakpoint, not an extracted source value */
@media (max-width: 1199px) {
  :root { --mw-header-height: 62.86px; }
  .header-inner {
    align-items: flex-start;
    margin-inline: 8vw;
    padding-top: 20px;
  }
  .brand-image { width: 150px; }
  .desktop-nav { display: none; }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    font-family: var(--mw-serif);
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.08em;
  }
  .menu-lines {
    width: 40px;
    height: 10px;
    border-block: 1px solid currentColor;
  }
}

/* Recommended content breakpoint */
@media (max-width: 767px) {
  :root {
    --mw-heading: 40px;
    --mw-row-title: 20px;
    --mw-section-gap: 80px;
  }
  .content-wrap { padding-inline: 8vw; }
  .hero-cluster { gap: 40px; }
  .hero-mark { width: 180px; }
  .hero-copy { width: min(296px, 84vw); min-height: 31.5px; }
  .hero-scroll { bottom: 53.5px; font-size: 20px; line-height: 30px; }
  .audience-copy { width: 100%; min-height: 106px; padding-bottom: 30px; }
  .route-list { gap: 40px; }
  .route-link {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    min-height: 107px;
    padding-bottom: 42px;
    border-bottom: 1px solid var(--mw-rule);
  }
  .route-art { width: 64px; }
  .route-body { min-height: 64px; border: 0; }
  .arrow-tile { flex-basis: 32px; width: 32px; height: 48px; }
  .arrow-tile::before { left: -13px; width: 35px; }
  .arrow-tile::after { right: 10px; }
  .see-all { gap: 28px; }
  .news-row { grid-template-columns: 1fr; gap: 20px; padding-block: 40px; }
  .promo-list { gap: 30px; }
  .promo-link { padding-left: 30px; }
  .service-list { grid-template-columns: 1fr; gap: 28px; margin-top: 36px; }
  .footer-meta {
    grid-template-columns: 1fr;
    grid-template-areas: 'social' 'policy' 'copyright';
    margin-top: 80px;
  }
  .social-links { justify-self: start; gap: 30px; margin: 0 0 32px; }
  .social-links img { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .news-row { transition: none; }
}
```

The route structure expects an anchor containing `.route-art` and `.route-body`; the body contains its title/caption group and a decorative `.arrow-tile`. News rows expect `.news-meta` followed by `.news-title`. Footer metadata should use the named classes so visual reordering stays explicit.

Do not ship a nonfunctional menu control: connect the button to a real navigation disclosure before release. The `.is-scrolled` class also requires application logic if the header rule is to appear only after scrolling. The CSS intentionally leaves asset URLs and unverified menu-panel styling unspecified.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-canvas: var(--mw-paper);
  --color-ink: var(--mw-ink);
  --color-brand: var(--mw-red);
  --color-surface: var(--mw-white);
  --color-rule: var(--mw-rule);
  --color-rule-dark: var(--mw-rule-dark);

  --font-editorial: var(--mw-serif);
  --font-interface: var(--mw-sans);

  --text-section: var(--mw-heading);
  --text-route: var(--mw-row-title);
  --text-caption: 10px;

  --spacing-content: var(--mw-content);
  --spacing-section: var(--mw-section-gap);
  --spacing-header: var(--mw-header-height);
  --radius-flat: 0px;
}
```

## Sources & Evidence

- [Mirai Works homepage](https://mirai-works.co.jp/): original and final URL in the supplied browser record, with HTTP 200 and capture timestamp `2026-10-01T18:59:11.282Z`.
- **Desktop evidence:** three current-page screenshots at 1440 × 1000, covering the hero, a middle-page region, and the footer; supplied rendered element rectangles, link destinations, computed styles, and document height.
- **Mobile evidence:** two current-page screenshots at 390 × 844, covering the hero and lower footer; a separate rendered DOM and computed-style snapshot at that viewport.
- **Directly supported identity:** the page title names Mirai Works, and the footer displays “© Mirai Works Inc. All Rights Reserved.” No production-credit claim is established by the supplied original-page evidence.
- **Collection limits:** readiness checks included document load, bounded waits for relevant finite animations, sampled text and layout stability, and visible-image decoding. Looping animations were temporarily paused during readiness checks and resumed. SharedWorkers and service workers were disabled during collection.
- **Interaction limits:** scroll-position captures support header persistence and responsive layout observations. No supplied interaction trace establishes menu opening, hover results, keyboard behavior, video playback, or a hero animation sequence.
- **Coverage limits:** complete asset URLs, font files, source media queries, and every intermediate visual region were not supplied. Linked destination pages were not inspected, and no additional browsing or file access was used to prepare this reference.

This reference describes the current homepage evidenced by the supplied capture. CSS dimensions copied from measured rectangles reproduce those states approximately; proposed breakpoints, missing-asset handling, accessibility additions, and unverified interaction choices remain implementation recommendations.