# Winfield Japan — Style Reference

> Rural landscapes, community portraits, and generous white space frame an energy company’s relationship with people and place.

**Website:** [winfieldjapan.com](https://winfieldjapan.com/)
**Original URL:** https://winfieldjapan.com/
**Final URL:** https://winfieldjapan.com/
**Theme:** light, with forest-green text, white surfaces, natural photography, and orange contact actions.
**Inspected:** supplied browser capture recorded September 16, 2026, at 19:16:07.656 UTC; September 17, 2026, at 04:16:07.656 JST.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current corporate homepage: navigation, hero, Latest News, Business, Topics, Works, Voices, Our Story, Company and Recruit links, Contact, and footer. Visual captures directly cover the desktop hero, one desktop story position, desktop Contact/footer, and mobile hero and Contact/footer. Other sections are documented from supplied rendered DOM measurements and computed styles.

Winfield Japan presents energy infrastructure through ordinary landscapes and human relationships. The desktop opening photograph shows five people standing together in a green rural setting. A broad green curve crosses the photograph, connecting the image to the looping brand mark. The white slogan, “電力を、縁力に。”, sits near the lower left. A floating white navigation bar and a translucent story link give the photograph room to remain the main subject.

The homepage continues as a substantial corporate information hub. It combines an asymmetric business grid, categorized news, a horizontal project rail, customer information, and a spacious photographic story sequence. Large English labels establish section identity; smaller Japanese labels explain the destination. Orange is concentrated in contact actions, while dark green supports ordinary navigation. Preserve this hierarchy when extending the design.

## How to Read This Reference

- **Measured** means a value appears in the supplied computed styles, custom properties, or element rectangles. Measurements are CSS pixels unless stated otherwise.
- **Calculated** means arithmetic based on those measurements, such as gaps or proportions.
- **Estimated** means a visual reading of a supplied original-page screenshot. It is not an extracted CSS declaration or sampled color.
- **Recommended** means implementation guidance for a new build, including the CSS Quick Start. Recommendations are not claims about existing behavior.
- **Source tokens** retain the original custom-property names where useful. Other token names are descriptive implementation aliases.
- The source root is **10px at both inspected widths**. Its `1.4rem` therefore computes to 14px. The Quick Start keeps a conventional root size and converts dimensions explicitly.
- An element’s recorded box does not prove that it was visible. The closed mobile menu still has measurable descendants, and story content has offscreen coordinates.
- Many heading and button wrappers report 10px while their visible child labels are larger. Wrapper typography must not be copied as the final label size.
- Only supplied evidence was used. Linked pages, menu opening, filtering, carousel controls, hover outcomes, and form behavior were not independently exercised.

## Tokens — Colors

### Default Palette

| Name | Value | Source or alias | Evidence and role |
| --- | --- | --- | --- |
| White | `#ffffff` | Source `--color-bg-primary`; alias `--wf-white` | Declared token and measured section/footer fill; visibly forms the navigation bar and principal canvas |
| Text Green | `#203424` | Measured `rgb(32, 52, 36)`; alias `--wf-ink` | Actual computed body, paragraph, heading-wrapper, and navigation text color |
| Dark Green | `#2a402f` | Source `--color-dark`; alias `--wf-dark` | Measured fill of ordinary More buttons and the selected JP circle |
| Brand Green | `#479560` | Source `--color-green`; alias `--wf-green` | Declared brand color; also assigned to Swiper theme and pagination tokens; visually consistent with the mobile hero base |
| Contact Orange | `#f08c1e` | Source `--color-orange`; alias `--wf-orange` | Measured header contact and large Contact button fill |
| Warm Gray | `#f0efe9` | Source `--color-grey` and `--color-bg-grey`; alias `--wf-gray` | Measured Works section fill and mobile menu-disc background |
| Light Neutral | `#f7f7f4` | Source `--color-bg-light`; alias `--wf-light` | Declared supporting surface; its specific visible use is not established by the sampled elements |
| Neutral Rule | `#dbdad1` | Source `--color-border-primary`; alias `--wf-line` | Declared border token; do not assume every separator uses it without checking its element |
| Reversed Text | `#ffffff` | Source `--color-font-secondary` | Measured hero slogan, story-link text, and large Contact link color |
| Story-Link Veil | `rgba(0, 0, 0, 0.4)` | Measured anchor background | Translucent story portal over photography on desktop and over the green base on mobile |

**Keep Text Green and Dark Green distinct.** The source’s dark button fill is not the same color as ordinary text. Both are green-black, but their measured values differ.

The photographic sky, foliage, clothing, and fields expand the visible palette without becoming interface tokens. The hero ribbon and logo contain greens that appear lighter than the dark typography; their exact asset colors were not supplied. Do not claim the entire ribbon is precisely `#479560`.

The rendered page exposes numerous platform preset colors, gradients, and shadows. Their presence in custom properties does not establish their use in this design. The supplied captures show no general rainbow palette or shadow-based card system.

### Color Hierarchy

1. White provides most of the reading surface.
2. Text Green carries information and navigation.
3. Brand Green connects identity, landscape, and the mobile hero base.
4. Dark Green marks secondary destination buttons.
5. Orange gives contact actions a separate, recognizable priority.

No alternate theme or user-controlled color scheme was evidenced.

## Tokens — Typography

### Main Interface and Japanese Text

**Declared and computed family stack:**

```css
'Poppins', hiragino-kaku-gothic-pron, 'Hiragino Sans',
'Hiragino Kaku Gothic ProN', 'Yu Gothic', yugothic, meiryo, sans-serif
```

Poppins leads the main stack, followed by Japanese Gothic families. This describes the declared selection order; the evidence does not identify which font file rendered every glyph.

Regular paragraphs use weight 400. Navigation, the hero slogan, the footer slogan, and several Japanese labels use 600. The main reading rhythm is spacious: ordinary explanatory copy measures 14px with 28px line height and 1.12px tracking.

### English Section Labels

**Source family token:** `--font-family-eng: 'Ubuntu', sans-serif`.

Ubuntu is directly recorded on the Latest News heading. Large labels such as Our Story and Contact visually share a soft, open sans-serif character. Their individual child spans were not included in the computed-style sample, so applying Ubuntu consistently to them is a source-informed implementation recommendation rather than a per-element font verification.

The wordmark is graphic identity. Its slanted lettering and looping symbol should remain an authorized logo asset, not be reconstructed by italicizing an interface font.

### Measured Type Scale

| Role | Desktop | Mobile | Weight and tracking | Evidence |
| --- | --- | --- | --- | --- |
| Hero slogan | `56px / 56px` | `32px / 32px` | 600; `0.15em` | Measured H1 |
| Desktop navigation | `13px / 19.5px` | Not visible in the closed mobile state | 600; `0.05em` | Measured links |
| Mobile menu link declarations | — | `16px / 24px` | 600; `0.08em` | Computed latent menu descendants; open state not captured |
| Latest News label | `24px / 24px` | `16px / 16px` | Ubuntu, 400; normal tracking | Measured H2 |
| Latest News article title | `14px / 22.4px` | Same | 400; `0.08em` | Measured H3 |
| Business and Voices paragraphs | `14px / 28px` | Same | 400; `0.08em` | Measured paragraphs |
| Topics article title | `16px / 25.6px` | `12px / 19.2px` | 400; `0.08em` | Measured H3 |
| Story explanatory copy | `16px / 38.4px` | `14px / 33.6px` | 400; `0.15em` | Measured paragraph; offscreen in initial DOM sample |
| Contact explanatory copy | `16px / 32px` | `14px / 28px` | 600; `0.08em` | Measured paragraph |
| Footer slogan | `18px / 18px` | Same | 600; `0.15em` | Measured paragraph |
| Footer navigation | `12px / 19.2px` | Same | 600; `0.08em` | Measured links |
| Language labels | `12px / 18px` | Same declarations | Poppins, 400; normal tracking | Mobile controls are not visible in the closed capture |

The desktop Our Story display label is **visually estimated at approximately 56px**. A 36px English section label on mobile is a useful recommended starting point; its exact child-span size is not available in the supplied sample.

### Declared Heading Tokens

These are real source variables, but they are not a complete map of the large English display labels.

| Source token | Desktop value → pixels | Mobile value → pixels |
| --- | --- | --- |
| `--font-size-heading-xl` | `4rem` → 40px | `2.8rem` → 28px |
| `--font-size-heading-lg` | `3.2rem` → 32px | `2.4rem` → 24px |
| `--font-size-heading-md` | `2.4rem` → 24px | `1.8rem` → 18px |
| `--font-size-heading-sm` | `1.8rem` → 18px | `1.6rem` → 16px |
| `--font-size-heading-xs` | `1.5rem` → 15px | `1.4rem` → 14px |
| `--font-size-body-lg` | `1.6rem` → 16px | Same |
| `--font-size-body-md` | `1.4rem` → 14px | Same |
| `--font-size-body-xs` | `1.2rem` → 12px | Same |

Source line-height tokens include body `2`, compact body `1.8`, heading `1.6`, and English heading `1.1`. The measured hero and Latest News override these with a line-height ratio of 1.

## Tokens — Spacing & Shapes

### Spacing Scale

The source changes spacing tokens at the mobile viewport instead of uniformly scaling the entire interface.

| Source token | Desktop | Mobile |
| --- | --- | --- |
| `--space-8` | 8px | 6px |
| `--space-16` | 16px | 12px |
| `--space-24` | 24px | 16px |
| `--space-32` | 32px | 24px |
| `--space-40` | 40px | 30px |
| `--space-64` | 64px | 48px |
| `--space-72` | 72px | 56px |
| `--space-128` | 128px | 80px |
| `--space-200` | 200px | 128px |

The main gutter is source `--site-padding: 5.5555555556vw`, computing to **80px** at 1440px. At 390px it becomes `2.5rem`, or **25px**. This creates a 1280px desktop reading area and a 340px mobile reading area at the inspected widths. These measurements do not establish a universal maximum container width.

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 |
| --- | --- | --- |
| Header | `x40, y24`, 1360 × 80px | `x5, y5`, 380 × 60px |
| Header logo link width | 216px | 160px |
| Hero section | 1440 × 1000px | 390 × 844px |
| Hero story link | `x980, y860`, 380 × 100px | `x10, y740`, 370 × 64px |
| Mobile hero base | No equivalent separate band visible | 120px high, beginning at y724 |
| Standard More link | 200 × 56px | 200 × 56px |
| Business padding | 128px top and bottom | 80px top and bottom |
| Works padding | 160px top, 128px bottom | 96px top, 80px bottom |
| Project card | 290 × 435px | Approximately 299.28 × 448.92px |
| Project-card gap | 40px, calculated | 40px, calculated |
| Contact content width | Approximately 1066.69px | 340px |
| Large Contact link | 400 × 72px | 340 × 64px |
| Full Contact section | 616px high | Approximately 478.39px high |
| Footer | Approximately 538.72px high | Approximately 589.28px high |
| Footer logo link width | 240px | 240px |

Logo link rectangles are inline line boxes. Their recorded 15px height is not the displayed graphic’s actual height; preserve the asset’s intrinsic proportions.

### Border Radius and Edges

| Element | Value or appearance | Evidence |
| --- | --- | --- |
| Floating white header surface | Approximately 8px radius | Visual estimate; the sampled outer header itself reports zero radius and transparent fill |
| Hero story link | 8px | Measured |
| Header contact link | 40px | Measured; produces a pill at 40px height |
| More links | 56px | Measured; produces a pill at 56px height |
| Large Contact link | 56px | Measured |
| Language selection and mobile menu disc | 100% | Measured circles |
| Story photograph masks | Approximately 8px | Visual estimate |
| Business and Works anchor boxes | 0px | Measured anchors; nested image-mask styling was not sampled |

Round controls and selected photographic masks, while keeping the main page structure clean and rectangular. Large soft shadows are not part of the visible hierarchy.

## Components

### Floating Navigation Header

**Anatomy:** home-linked logo → eight primary links → orange contact link → JP/EN language pair.

At desktop, the white bar sits 40px from each viewport edge and 24px below the top. The logo begins at x80, giving the bar a 40px internal inset. Primary navigation uses 13px semibold text and calculated 16px gaps. A 112 × 40px orange pill follows the primary links. JP is a 24px dark-green circle; EN occupies an adjacent unfilled 24px box.

The eight navigation labels cover brand story, business, topics, projects, customer voices, company information, CSR, and recruitment. This is broad corporate navigation, not a short campaign menu. The header recruitment link points to an external recruitment service; the later Recruit portal and footer link point to `/recruit/`. Preserve destination intent rather than assuming every repeated label has the same href.

The contact label appears white in the screenshot although its outer anchor reports inherited dark text. This is another reason to inspect inner labels rather than copying wrapper styles mechanically.

On mobile, the bar shrinks to a 5px outer inset with a 160px logo and a 32px warm-gray menu disc. The closed capture does not display the primary links or language pair. At the bottom of the page, the isolated menu disc remains at the upper right while the white bar and logo are absent. The precise scroll threshold and transition are unverified.

### Full-Viewport Hero

**Anatomy:** edge-to-edge photograph → decorative green curve → white slogan → story portal; mobile adds a green base and a downward link.

The desktop photograph emphasizes five smiling people, navy work clothing, trees, fields, and an ordinary local road. The group fills much of the lower two thirds. The green curve crosses the photographic field without becoming a rectangular container.

The slogan sits at x80 and y874 in a 56px line box. It is 70px above the viewport bottom. Its tracking is unusually broad at `0.15em`, allowing a short Japanese phrase to hold visual weight without extra copy.

The mobile capture shows a different photographic state: blue sky dominates, trees form a low horizon, and solar panels occupy the bottom edge. The slogan moves to the upper center at approximately y139, using 32px type. This may reflect image selection, responsive art direction, or a timed sequence; the supplied evidence does not establish which. Do not declare a verified slideshow or a permanent device-specific image swap.

The mobile photo ends at y724, followed by the 120px green base. Keeping the portal outside the photograph’s main subject area is a defining mobile composition.

### Hero Story Portal

**Anatomy:** English title at left → short two-line Japanese message → slim right arrow.

The desktop link measures 380 × 100px, is inset 80px from the right and 40px from the bottom, and uses a black 40% veil with an 8px radius. Its visible English title is approximately 24px; the supporting text is much smaller. Both are white.

On mobile, the link becomes 370 × 64px with 10px outer side margins. It sits 16px below the top of the green base. The English title is visually approximately 18px, and the supporting message remains a compact two-line block. A separate downward chevron below links to `/#news`; scrolling smoothness was not tested.

The whole portal links to `/brand-story/`. Use one coherent link target rather than nesting several clickable text fragments.

### Latest News Strip

**Anatomy:** section label → current dated article → View All link.

The desktop strip begins immediately after the hero at document y1000 and occupies 161px. Its measured padding is 56px top and bottom. The label has a 190px-wide box; the article begins at x318; View All sits near the right content edge. This is a compact information bridge between the photographic opening and the business section.

On mobile, the strip becomes a vertical arrangement with 40px top and 24px bottom padding. The heading, dated article, and View All each occupy the 340px content width. The latest article title remains 14px, while the English label reduces from 24px to 16px.

The captured current item is dated August 10, 2026. Treat it as CMS content rather than permanent decorative copy. Specific divider rendering was not supplied for this section.

### Bilingual Section Heading

**Anatomy:** prominent English name + smaller Japanese explanation.

Desktop Business, Topics, Works, Voices, and Contact heading wrappers measure 56px high. Our Story uses a stacked heading composition in its captured scene. Mobile standard heading wrappers measure approximately 70.39px, consistent with a vertically stacked bilingual arrangement.

The hierarchy is deliberately unequal: the English word is the visual landmark, while Japanese supplies immediate meaning. Recommended implementation uses separate spans within a meaningful heading element, with individual sizes and line heights. Do not apply the wrapper’s measured 10px size to both labels.

### Business Mosaic

**Anatomy:** introductory heading and paragraph → five destination tiles → More link.

The desktop introduction puts the heading at x80 and a 640px-wide explanatory paragraph at x720. A 64px gap separates this introduction from the tile grid.

The measured mosaic is 1280px wide:

- BESS occupies the left half: 638 × 480px.
- Four smaller destinations occupy a two-by-two arrangement at right: 317 × 238px each.
- Both horizontal and vertical gaps are 4px, calculated from adjacent rectangles.
- Labels begin 24px from the tile’s left edge and 32px from its top.

The destinations are “系統用蓄電池”, “太陽光発電”, “ソーラーシェアリング”, O&M, and “データセンター”, each paired with an English label. White text is measured on the tile links. The particular tile image files and crops were not provided.

On mobile, the introduction uses the 25px reading gutter, but the mosaic expands to 10px side gutters. BESS becomes a 370px-wide first row. The remaining four tiles form two columns of 183.5px, separated by 3px. All three rows measure approximately 247.59px high, so the smaller tiles become tall rather than retaining their desktop landscape shape. Label insets reduce to 16px horizontally and 24px vertically.

The More link stays 200 × 56px. It is right-aligned on desktop and centered on mobile.

### Topics Filters and Article Rows

**Anatomy:** bilingual heading → category controls → four dated article links → More link.

Desktop category controls form a vertical list beginning at x80. Article links occupy an 840px-wide area beginning near x520. Each sampled article link is 120px high, with successive row starts 185px apart. The title box begins 320px into the row and has a 24px left inset and 64px right inset.

The category controls include All, a regional study-support category, Information, CSR, Works, and Conversation. All has white computed text and a pill-shaped control box. Its fill may be supplied by a child or pseudo-element; the sampled button background itself is transparent. Do not invent the exact selected-state implementation.

On mobile, the controls share one horizontal line with calculated 20px gaps. Later controls extend beyond the viewport. This establishes an overflowing horizontal arrangement, but the exact scrolling mechanism was not tested.

Article links become approximately 350px wide at x20. Their title region begins 120px into the row, with a further 16px text inset. Titles reduce to 12px and wrap. The evidence does not fully sample the leading media and metadata elements, so do not describe the entire 120px or 320px leading region as a verified thumbnail size.

Filtering results, transitions, empty states, and selected-state semantics remain unverified.

### Works Project Rail

**Anatomy:** warm-gray section → bilingual heading → horizontal portrait project links → two navigation controls → More link.

The measured project cards have a consistent **2:3 aspect ratio**. Each contains an index, prefecture, installation date, Japanese project title, and English project type. White text is measured on the links, with titles positioned near the bottom and inset 24px on desktop or 16px on mobile. Image file references and exact overlay treatment were not supplied.

At desktop, the first sampled project starts at x410, reserving a 330px area after the normal x80 gutter. Three 290px-wide cards fit through x1360, with 40px gaps. Additional cards continue offscreen.

At mobile, the first card starts at x25 and is approximately 299.28px wide. The next begins at x364.28, leaving a narrow preview at the right edge. The 40px gap remains. This is a horizontal rail, not a responsive grid of small thumbnails.

Two unlabelled-in-the-extract controls are present. Their outer boxes measure 76 × 60px on desktop and 64 × 48px on mobile, including 8px horizontal padding. Swiper-named custom properties support the carousel interpretation, but autoplay, dragging, looping, and button results were not exercised.

### Voices Introduction

**Anatomy:** bilingual heading → supporting visual area → short explanatory paragraph → More link.

The recorded copy introduces regional land partners and corporate customers. It does not provide individual testimonial quotes or ratings in the extracted text. Avoid adding star ratings, review badges, or invented quote cards as though they were observed.

The desktop paragraph occupies approximately 510px at the left, with a left-aligned More link below. Mobile uses a 340px-wide paragraph that wraps to three 28px lines and centers the button. The exact visual composition between the heading and paragraph is outside the supplied screenshot coverage.

### Our Story Sequence

**Anatomy in the visible desktop frame:** a tall landscape slice at left → large white field with a bilingual title → separated portrait photographs at different heights.

In the supplied 1440px-wide story capture, the landscape slice occupies roughly 338px at the left. The English title begins near x575 and y435. A narrow solar-field photograph sits high on the right, approximately 222 × 298px. A larger photograph of seated rural residents appears lower and farther right, partially cropped by the viewport edge. The photo corners appear approximately 8px rounded.

The large empty areas are intentional compositional space. Images feel distributed along a narrative sequence rather than arranged in an ordinary equal-width card grid.

The initial DOM records story content far beyond the viewport’s right edge. The section itself measures one viewport high. The distance from its start to the following Company section is **8000px on desktop and 6752px on mobile**, calculated as exactly eight times the respective viewport height. This is strong evidence of an extended scroll allocation associated with the horizontal story composition.

The precise pinning mechanism, scroll-to-translation mapping, easing, image movement, and full sequence were not supplied. The shown frame and offscreen measurements must not be turned into a fabricated animation specification. The four-line story paragraph and its More link exist later in the recorded horizontal arrangement even though they are not visible in the supplied middle frame.

### Company and Recruit Portals

Two destination links follow the story region. Desktop boxes are approximately 531.84 × 258px, side by side with a calculated 1px gap and 40px internal padding. Mobile stacks approximately 338px-wide boxes with 30px padding and heights around 126–127px.

Each combines an English destination name with a Japanese label. Their sampled rectangles extend into the beginning of the subsequent Contact section, which may reflect overlap or transforms. The exact border, imagery, and layering are not visually established by the supplied captures. Preserve the paired desktop and stacked mobile relationship without claiming an unverified decorative treatment.

### Contact Landscape Banner

**Anatomy:** rural infrastructure photograph → white bilingual heading and explanatory copy → oversized orange pill link.

The photograph shows fields, local buildings, utility poles, and transmission towers beneath a pale sky. It continues the relationship between energy infrastructure and familiar surroundings. The image is visually subdued enough for white text, but the exact overlay color and opacity were not supplied.

Desktop content is centered within approximately 1066.69px. The heading begins 280px below the section start. Below it, the paragraph occupies the left side and a 400 × 72px Contact link sits at right. The button has centered English text and a small arrow near its right end.

Mobile places the heading, two-line paragraph, and 340 × 64px button in one column with 25px side gutters. The paragraph-to-button gap is 32px. The full section is approximately 478.39px high.

The bottom screenshots begin partway through this banner. Desktop shows about 461px of its 616px height; mobile shows about 255px of its 478px height. **The Contact heading is above the mobile screenshot’s top edge, not proven hidden by a mobile rule.**

### Footer

**Anatomy:** logo and slogan → two navigation columns → privacy link → copyright.

The footer is white and spacious. Desktop puts the 240px-wide logo at the left content gutter and the two navigation columns at x740 and x1070. The slogan beneath the logo uses 18px semibold text with `0.15em` tracking. Navigation uses 12px semibold text, with row starts approximately 43.19px apart.

On mobile, the logo remains 240px wide, visibly larger than the 160px header logo. The brand block sits above the two navigation columns, which begin at x25 and x205. Row spacing tightens to approximately 35.19px. There is substantial separation before the legal block.

The privacy and copyright text appear muted in the screenshots. Since the privacy anchor’s computed color still reports Text Green, this may involve ancestor opacity or another unsampled layer; a distinct gray text token was not verified.

## Tokens — Motion & Interaction

| Treatment | Recorded evidence | What is established |
| --- | --- | --- |
| More and large Contact links | `background-color 0.3s cubic-bezier(0.33, 1, 0.68, 1)` | A 300ms background-color transition is declared; destination color and trigger were not captured |
| Footer links | `background-size 0.6s cubic-bezier(0.25, 1, 0.5, 1)` | A 600ms background-size transition is declared; exact underline appearance is unverified |
| Mobile menu disc | `background-color 0.3s` | Background-color transition exists; opening animation is not established |
| Hero imagery | Different desktop and mobile photographic states | Image variation is visible; its timing and cause are unknown |
| Our Story | Offscreen horizontal content, a scrolled narrative frame, and an eight-viewport allocation | Supports a scroll-driven horizontal narrative interpretation; implementation and timing remain unverified |
| Works | Horizontal card positions, two controls, and Swiper-related tokens | Carousel structure is supported; autoplay and interaction results are unverified |
| Topics | Category button elements | Controls exist; filtering was not exercised |
| Mobile downward chevron | Link to `/#news` | Destination is verified; smooth scrolling is not |
| Scrolled mobile header | Only the menu disc remains visible | A different scrolled presentation is visible; threshold and motion are unknown |

The value `transition: all` reported on many elements supplies no useful duration by itself. Likewise, `animation: none` on sampled wrappers does not prove that child elements, SVGs, or JavaScript-driven transforms are static.

The capture process waited for sampled stability and finite animation readiness, with bounded timeouts, and temporarily paused perpetual animations during checks. It does not prove that every delayed reveal or interaction state was reached.

**Recommended motion direction:** keep ordinary control feedback short and restrained. If implementing a horizontal story sequence, make its progress understandable and provide a normal-flow alternative for reduced motion. Do not invent a precise autoplay interval or long cinematic easing curve from these still captures.

## Surfaces

| Layer | Appearance | Function |
| --- | --- | --- |
| Main canvas | White | Lets photography and bilingual headings establish hierarchy |
| Header | Floating white rounded bar | Separates dense navigation from the hero photograph |
| Hero | Full-bleed natural photography | Establishes people, place, and energy infrastructure |
| Story portal | Black at 40% opacity, white labels, 8px radius | Creates readable navigation over variable backgrounds |
| Mobile hero base | Solid green field | Gives the portal and downward cue a stable home |
| Works | Warm gray `#f0efe9` | Separates the project rail from white information sections |
| More links | Dark-green pills | Consistent secondary destination action |
| Contact links | Orange pills | Gives inquiry actions a distinct visual priority |
| Footer | White with generous empty space | Returns the page to a calm, legible corporate directory |

A thin green vertical mark, approximately 5px wide, appears along the left edge in scrolled desktop captures. Its purpose and changing extent are not established. Do not automatically describe it as a verified scroll-progress indicator.

## Imagery

Use natural photography that connects infrastructure to real places and people. The supplied original-page captures establish three recurring subjects:

- **Community:** people of different ages, relaxed expressions, practical clothing, and everyday rural settings.
- **Landscape and generation:** blue sky, woodland, fields, and solar arrays photographed as part of the environment.
- **Infrastructure in context:** transmission towers, power lines, local houses, and agricultural land sharing the same frame.

The photographs are bright and gently softened in appearance, with abundant green and blue. This is a visual description, not evidence of a particular filter or color-grading pipeline. Skin, clothing, and vegetation retain natural color rather than becoming monochrome brand graphics.

Cropping is a major design tool. The desktop hero gives the group room across the width; the mobile hero leaves open sky for the slogan. Story images use tall crops with large areas of white between them. Contact uses a broad landscape whose horizon remains identifiable at both widths.

### Observed Asset References

| Asset role | Supplied evidence | Reuse guidance |
| --- | --- | --- |
| Brand logo | Visible in desktop/mobile header and footer | Use an authorized original asset and preserve its aspect ratio |
| Desktop hero photograph | Five people in a rural landscape | Keep faces and body language readable; do not crop it like a generic abstract background |
| Mobile hero photographic state | Sky, forest, and solar panels | Preserve open sky for the upper slogan |
| Hero green curve | Broad looping graphic across the desktop photograph | Use authorized vector artwork where available; exact path and colors were not supplied |
| Story photography | Solar field and seated rural residents | Retain mixed portrait sizes and substantial surrounding white space |
| Contact photograph | Fields, homes, and transmission towers | Preserve landscape continuity behind text and the orange action |
| Arrows and menu symbol | Small directional marks and a two-stroke menu symbol | Simple CSS or SVG is a reasonable implementation choice; original file format is unknown |

No image URLs, logo file path, intrinsic image dimensions, or original SVG path data were included. Asset filenames must not be invented. Business, Topics, Works, and Voices media should be selected from verified assets before attempting exact visual reproduction.

## Layout & Responsive Behavior

The homepage combines ordinary vertical sections with a horizontally composed story region. Its recorded document height is approximately **14,997.72px on desktop** and **13,550.41px on mobile**. These are capture-state measurements, not recommended fixed page heights.

| Relationship | Desktop observation | Mobile observation |
| --- | --- | --- |
| Navigation | Eight links, contact pill, language pair | Compact logo bar and menu disc; menu remains closed |
| Hero slogan | Lower left, 56px | Upper center, 32px |
| Story portal | Over photograph, bottom right | Nearly full-width inside a green base |
| Main reading gutter | 80px at 1440px | 25px at 390px |
| Latest News | Horizontal arrangement | Stacked heading, article, and View All |
| Business introduction | Heading left, paragraph right | Heading above paragraph |
| Business mosaic | Large left tile plus four right tiles | Wide first tile plus two rows of tall half-width tiles |
| Topics controls | Vertical sidebar | Single overflowing horizontal row |
| Works rail | Three full sampled cards after a reserved left area | One main card with a narrow next-card preview |
| More links | Generally right-aligned; Voices is left-aligned | Centered |
| Story | Horizontal composition with substantial allocated scroll distance | Offscreen horizontal content and the same eight-viewport allocation ratio |
| Company / Recruit | Side by side | Stacked |
| Contact | Copy left, button right | Copy above full-width button |
| Footer | Brand left, navigation right | Brand above two navigation columns |

The actual CSS breakpoint values were not supplied. The Quick Start uses proposed breakpoints and must be tuned against intermediate widths. Do not claim that 768px, 1024px, or 1200px is an original breakpoint.

Preserve distinct gutter systems: 25px for mobile reading, 10px for the business mosaic and story portal, and 5px for the header. Applying one uniform gutter would erase an important part of the observed mobile composition.

## Do’s and Don’ts

### Do

- Keep the page recognizable as a corporate information hub with multiple destination types.
- Use white space, dark-green text, and natural photography as the main design structure.
- Preserve `#203424` for measured body text and `#2a402f` for ordinary filled buttons.
- Reserve orange for contact priority.
- Keep the hero slogan short, white, semibold, and widely tracked.
- Preserve the difference between the 216px desktop header logo, 160px mobile header logo, and 240px footer logo.
- Maintain the asymmetric five-item business composition and its distinct mobile rearrangement.
- Keep project cards portrait-oriented and allow the next card to remain partially visible on mobile.
- Give the story sequence substantial negative space and varied image placement.
- Treat measured sizes, visual estimates, and implementation choices as separate evidence classes.

### Don’t

- Don’t reduce the homepage to a generic hero followed by interchangeable feature cards.
- Don’t replace local people and rural infrastructure with unrelated futuristic energy illustrations.
- Don’t spread orange across every heading, category, and card.
- Don’t add soft shadows, glossy surfaces, or decorative gradients throughout the interface.
- Don’t reconstruct the logo using an italic text font.
- Don’t copy the source’s numeric rem values into a default 16px root: `12.8rem` would become 204.8px instead of 128px.
- Don’t mistake 10px wrapper typography for the visible size of every English heading or button label.
- Don’t infer an opened mobile menu from measurable but invisible menu descendants.
- Don’t remove the mobile Contact heading because it is outside the final screenshot’s crop.
- Don’t convert the story’s allocated scroll distance into thousands of pixels of permanent blank content.
- Don’t claim verified autoplay, hover colors, filter results, or scroll easing from still images.

## Recommended Implementation Additions

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

- Use semantic navigation landmarks, headings, article links, and actual buttons for menu, filter, and carousel controls.
- Keep the mobile menu’s visible 32px disc but expand its interactive area to at least 44 × 44px. Give it an accessible name and synchronized expanded state.
- Ensure a closed menu is removed from keyboard navigation; offscreen positioning or opacity alone is insufficient.
- Check contrast for white labels on orange and on photography. Adjust the orange tone, label color, or image veil where necessary rather than assuming the observed combination passes.
- Add a visible focus treatment that remains legible on white, photography, and dark-green buttons.
- Provide descriptive alternatives for meaningful people and project photographs. Mark the ribbon and purely decorative arrows as decorative.
- Make horizontally overflowing controls and project cards reachable by keyboard and touch without causing document-wide horizontal overflow.
- Expose filter selection and announce changed results if category filtering is implemented.
- Provide a normal vertical reading alternative for the story sequence when reduced motion is requested or scripting is unavailable.
- Keep explanatory content visible before optional entrance animations run.
- Use responsive image sources and explicit intrinsic dimensions. Load the first hero image promptly and defer lower-page media without shifting layout.
- Retain content flexibility: long Japanese news titles should wrap rather than rely on fixed text heights.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas and footer: `#ffffff`.
- Body and navigation text: `#203424`.
- Standard More links and selected language circle: `#2a402f`.
- Brand field and supporting green: `#479560`.
- Contact priority: `#f08c1e`.
- Works surface and menu-disc neutral: `#f0efe9`.
- Story portal: black at 40% opacity with white text.
- Photography supplies sky blue, foliage green, and clothing color; these are not extra interface accents.

### Overall Prompt

“Create a Japanese energy-company corporate homepage inspired by Winfield Japan’s current visual system. Use natural photography of local people, fields, solar generation, and utility infrastructure. Combine a white canvas, deep-green text, restrained green identity graphics, and orange contact pills. Place a broad white rounded navigation bar over a full-screen desktop photograph. Set a short Japanese slogan in widely tracked white semibold type near the lower left, with a translucent Our Story portal at the lower right. Follow with compact news, an asymmetric five-destination business mosaic, categorized article rows, a warm-gray portrait project rail, customer information, a spacious photographic story section, company and recruitment links, and a landscape Contact banner. Use the recorded Poppins/Japanese Gothic stack and source-defined Ubuntu English family. On mobile, center the slogan high in the hero, place the story portal in a 120px green base, and preserve the distinct 5px, 10px, and 25px gutter systems. Treat uncertain motion and exact breakpoints as implementation decisions rather than verified source behavior.”

### Example Component Prompts

1. **Header:** “Build a white floating corporate header at 40px horizontal and 24px top inset on a 1440px desktop. Use an authorized 216px logo, 13px semibold green navigation, an orange contact pill, and JP/EN controls. On a 390px phone, use a 380 × 60px bar at x5/y5, a 160px logo, and a 32px menu disc with a larger accessible hit area.”
2. **Hero:** “Use a full-viewport rural photograph with a 56px white Japanese slogan at the lower left and a 380 × 100px translucent story link at the lower right. For the mobile composition, use 32px centered slogan text above open sky and a 370 × 64px story link in a green base beneath the image. Do not assume an autoplay mechanism.”
3. **Business mosaic:** “Arrange five business links as one 638 × 480px primary tile beside four 317 × 238px tiles with 4px gaps. Overlay Japanese names and smaller English labels in white. At 390px, use a 370px-wide leading tile above two columns of 183.5px-wide, approximately 248px-tall tiles with 3px gaps.”
4. **Projects:** “Create a warm-gray project section with 2:3 portrait links, white metadata, bottom-aligned project titles, and 40px gaps. Show three full cards after a reserved left area on desktop. On mobile, show one approximately 299px-wide card and a small preview of the next. Provide accessible manual navigation.”
5. **Story:** “Compose a quiet white narrative frame with a tall landscape slice at left, a large English title with a smaller Japanese label near the center, a small portrait solar-field image high at right, and a larger community portrait lower and partly outside the frame. Keep generous empty space. Any scroll-driven implementation must include a normal-flow alternative.”
6. **Contact and footer:** “Place white copy over a muted rural infrastructure panorama with an orange 400 × 72px Contact pill on desktop and a 340 × 64px pill on mobile. Follow with a white footer using a 240px logo, a tracked Japanese slogan, two small navigation columns, and a separated legal block. Keep the footer logo large on mobile.”

## Quick Start

### CSS Custom Properties

This is a reusable adaptation, not extracted production CSS. It preserves measured colors and key dimensions while keeping a conventional root font size. Supply authorized images as actual `picture`/`img` elements; no asset URLs are assumed.

The proposed breakpoints are **1200px for compact navigation** and **768px for narrow content layouts**. English display sizes outside the measured Latest News heading, image veils, hover colors, and the larger menu hit area are recommendations. The story remains in normal flow here; this starter does not invent the unverified pinned sequence.

```css
:root {
  /* Measured colors and declared source palette */
  --wf-white: #fff;
  --wf-ink: #203424;
  --wf-dark: #2a402f;
  --wf-green: #479560;
  --wf-orange: #f08c1e;
  --wf-gray: #f0efe9;
  --wf-light: #f7f7f4;
  --wf-line: #dbdad1;
  --wf-story-veil: rgb(0 0 0 / 40%);

  /* Declared source families; font files must be supplied separately */
  --wf-font-main: 'Poppins', hiragino-kaku-gothic-pron,
    'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
    'Yu Gothic', yugothic, meiryo, sans-serif;
  --wf-font-eng: 'Ubuntu', sans-serif;

  /* Desktop source dimensions converted from the 10px source root */
  --wf-gutter: 5.5555555556vw;
  --wf-space-8: 8px;
  --wf-space-16: 16px;
  --wf-space-24: 24px;
  --wf-space-32: 32px;
  --wf-space-40: 40px;
  --wf-space-64: 64px;
  --wf-space-72: 72px;
  --wf-space-128: 128px;
  --wf-space-200: 200px;
  --wf-header-height: 80px;
  --wf-hero-base: 120px;
  --wf-radius-small: 8px;
  --wf-radius-pill: 999px;
  --wf-tracking-body: 0.08em;
  --wf-tracking-slogan: 0.15em;
  --wf-motion-color: 300ms cubic-bezier(0.33, 1, 0.68, 1);
  --wf-motion-line: 600ms cubic-bezier(0.25, 1, 0.5, 1);
}

* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  color: var(--wf-ink);
  background: var(--wf-white);
  font-family: var(--wf-font-main);
  font-size: 0.875rem;
  line-height: 2;
  letter-spacing: var(--wf-tracking-body);
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
[hidden] { display: none !important; }

.wf-container { margin-inline: var(--wf-gutter); }
.wf-section { padding-block: var(--wf-space-128); }
.wf-section-title {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin: 0;
}
.wf-section-title__en {
  font-family: var(--wf-font-eng);
  font-size: clamp(36px, 3.8889vw, 56px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
.wf-section-title__ja {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
}

.wf-header {
  position: absolute;
  z-index: 20;
  inset: 24px 40px auto;
  display: flex;
  align-items: center;
  height: var(--wf-header-height);
  padding-inline: 40px;
  background: var(--wf-white);
  border-radius: var(--wf-radius-small);
}
.wf-header__logo { flex: 0 0 216px; }
.wf-header__logo img { width: 100%; height: auto; }
.wf-header__nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
.wf-header__nav a {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-decoration: none;
  white-space: nowrap;
}
.wf-header__tools {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: 24px;
}
.wf-header__contact {
  display: grid;
  place-items: center;
  width: 112px;
  min-height: 40px;
  color: white;
  background: var(--wf-orange);
  border-radius: var(--wf-radius-pill);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.wf-languages { display: flex; gap: 8px; }
.wf-language {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  letter-spacing: 0;
  text-decoration: none;
}
.wf-language[aria-current='page'] {
  color: white;
  background: var(--wf-dark);
}
.wf-menu-toggle { display: none; }

.wf-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: clip;
  background: var(--wf-green);
}
.wf-hero__media { position: absolute; inset: 0; }
.wf-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wf-hero__ribbon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.wf-hero__slogan {
  position: absolute;
  left: var(--wf-gutter);
  bottom: 70px;
  margin: 0;
  color: white;
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--wf-tracking-slogan);
}
.wf-story-link {
  position: absolute;
  right: var(--wf-gutter);
  bottom: 40px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 16px;
  align-items: center;
  gap: 24px;
  width: 380px;
  min-height: 100px;
  padding: 16px 32px;
  color: white;
  background: var(--wf-story-veil);
  border-radius: 8px;
  text-decoration: none;
}
.wf-story-link__title {
  font-family: var(--wf-font-eng);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
}
.wf-story-link__copy { font-size: 10px; line-height: 1.8; }
.wf-hero__down { display: none; }

.wf-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  min-height: 56px;
  padding: 12px 48px;
  border: 0;
  border-radius: var(--wf-radius-pill);
  color: white;
  background: var(--wf-dark);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  text-decoration: none;
  transition: background-color var(--wf-motion-color);
}
.wf-pill__arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}
.wf-section-action { margin-top: 48px; text-align: right; }

.wf-business-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 64px;
}
.wf-business-intro p { margin: 0; }
.wf-business-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.wf-service-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  color: white;
  background: var(--wf-dark);
  text-decoration: none;
}
.wf-service-card:first-child {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}
.wf-service-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Recommended readability veil; not a measured source overlay */
.wf-service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 18%);
}
.wf-service-card__label {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 32px 24px;
  font-size: 18px;
  line-height: 1.6;
}
.wf-service-card__label small { font-size: 10px; font-weight: 400; }

.wf-works {
  padding-block: 160px 128px;
  background: var(--wf-gray);
}
/* Manual scrolling is a recommended fallback, not a source claim */
.wf-works-rail {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  margin-top: 72px;
  padding-inline: calc(var(--wf-gutter) + 330px) var(--wf-gutter);
  scroll-snap-type: x proximity;
}
.wf-work-card {
  position: relative;
  flex: 0 0 290px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  color: white;
  background: var(--wf-dark);
  scroll-snap-align: start;
}
.wf-work-card img { width: 100%; height: 100%; object-fit: cover; }
.wf-work-card__title { position: absolute; inset: auto 24px 24px; }

.wf-contact {
  position: relative;
  isolation: isolate;
  padding-block: 280px 160px;
  color: white;
  background: var(--wf-dark);
}
.wf-contact__image {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Recommended starting veil; tune against the supplied photograph */
.wf-contact::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgb(32 52 36 / 24%);
}
.wf-contact__inner {
  width: min(calc(100% - 2 * var(--wf-gutter)), 1066.69px);
  margin-inline: auto;
}
.wf-contact__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  align-items: center;
  margin-top: 48px;
}
.wf-contact__row p {
  margin: 0;
  padding-right: 60px;
  font-size: 16px;
  font-weight: 600;
  line-height: 2;
}
.wf-pill--contact {
  width: 100%;
  min-height: 72px;
  background: var(--wf-orange);
  font-size: 18px;
}

.wf-footer { padding-block: 150px 48px; background: white; }
.wf-footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.wf-footer__logo { width: 240px; height: auto; }
.wf-footer__slogan {
  margin: 40px 0 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.15em;
}
.wf-footer__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.wf-footer__nav ul { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.wf-footer__nav a {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
}
.wf-footer__legal {
  margin-top: 96px;
  font-size: 12px;
  line-height: 1.6;
  opacity: 0.65; /* Visual approximation; source opacity is unverified */
}
.wf-footer__copyright { margin: 16px 0 0; font-size: 11px; letter-spacing: 0; }

/* Recommended focus and hover behavior */
:where(a, button):focus-visible {
  outline: 3px solid var(--wf-green);
  outline-offset: 4px;
}
.wf-hero :focus-visible,
.wf-contact :focus-visible { outline-color: white; }
@media (hover: hover) {
  .wf-pill:not(.wf-pill--contact):hover { background: var(--wf-green); }
}

/* Proposed compact-navigation breakpoint */
@media (max-width: 1200px) {
  .wf-header { inset: 5px 5px auto; height: 60px; padding-inline: 20px; }
  .wf-header__logo { flex-basis: 160px; }
  .wf-header__nav, .wf-header__tools { display: none; }
  .wf-menu-toggle {
    position: fixed;
    top: max(13px, env(safe-area-inset-top, 0px));
    right: 14px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .wf-menu-toggle__disc {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--wf-ink);
    background: var(--wf-gray);
    transition: background-color 300ms;
  }
}

/* Proposed narrow-content breakpoint */
@media (max-width: 768px) {
  :root {
    --wf-gutter: 25px;
    --wf-space-8: 6px;
    --wf-space-16: 12px;
    --wf-space-24: 16px;
    --wf-space-32: 24px;
    --wf-space-40: 30px;
    --wf-space-64: 48px;
    --wf-space-72: 56px;
    --wf-space-128: 80px;
    --wf-space-200: 128px;
    --wf-header-height: 60px;
  }
  .wf-section-title { flex-direction: column; align-items: flex-start; gap: 8px; }
  .wf-section-title__en { font-size: 36px; line-height: 1.1; }
  .wf-section-title__ja { font-size: 14px; }
  .wf-hero__media { bottom: var(--wf-hero-base); }
  .wf-hero__ribbon { display: none; }
  .wf-hero__slogan {
    inset: 16.5% 0 auto;
    text-align: center;
    font-size: 32px;
  }
  .wf-story-link {
    right: 10px;
    left: 10px;
    bottom: 40px;
    width: auto;
    min-height: 64px;
    padding-block: 12px;
  }
  .wf-story-link__title { font-size: 18px; }
  .wf-hero__down {
    position: absolute;
    bottom: 8px;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 22px;
    color: white;
    text-decoration: none;
  }
  .wf-section-action { margin-top: 32px; text-align: center; }
  .wf-business-intro { grid-template-columns: 1fr; gap: 32px; margin-bottom: 48px; }
  .wf-business-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(248px, auto);
    gap: 3px;
    margin-inline: -15px;
  }
  .wf-service-card { aspect-ratio: auto; }
  .wf-service-card:first-child { grid-column: 1 / -1; grid-row: auto; }
  .wf-service-card__label { padding: 24px 16px; font-size: 14px; }
  .wf-works { padding-block: 96px 80px; }
  .wf-works-rail { margin-top: 48px; padding-inline: var(--wf-gutter); }
  .wf-work-card { flex-basis: 76.74vw; }
  .wf-work-card__title { inset: auto 16px 16px; }
  .wf-contact { padding-block: 144px 80px; }
  .wf-contact__row { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
  .wf-contact__row p { padding: 0; font-size: 14px; }
  .wf-pill--contact { min-height: 64px; }
  .wf-footer { padding-block: 96px 24px; }
  .wf-footer__top { grid-template-columns: 1fr; gap: 80px; }
  .wf-footer__nav { gap: 20px; }
  .wf-footer__nav ul { gap: 16px; }
  .wf-footer__copyright { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .wf-pill, .wf-menu-toggle__disc { transition: none; }
  .wf-works-rail { scroll-snap-type: none; scroll-behavior: auto; }
}
```

The CSS keeps observed white-on-orange labels for visual correspondence; validate contrast before production use. Menu opening and its focus management require a separate implementation. If a story animation is added, disabling CSS transitions alone will not disable its JavaScript scroll driver.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This is not evidence that the original website uses Tailwind. Define the custom properties above first.

```css
@theme inline {
  --color-wf-ink: var(--wf-ink);
  --color-wf-dark: var(--wf-dark);
  --color-wf-green: var(--wf-green);
  --color-wf-orange: var(--wf-orange);
  --color-wf-gray: var(--wf-gray);
  --color-wf-light: var(--wf-light);
  --color-wf-line: var(--wf-line);

  --font-wf-main: var(--wf-font-main);
  --font-wf-english: var(--wf-font-eng);

  --spacing-wf-gutter: var(--wf-gutter);
  --spacing-wf-section: var(--wf-space-128);
  --spacing-wf-header: var(--wf-header-height);
  --spacing-wf-hero-base: var(--wf-hero-base);

  --radius-wf-small: var(--wf-radius-small);
  --radius-wf-pill: var(--wf-radius-pill);
}
```

## Sources & Evidence

- **Inspected original and final page:** [https://winfieldjapan.com/](https://winfieldjapan.com/). Both URLs are identical; the supplied browser observation reports HTTP 200 and the title “Winfield Japan｜株式会社ウィンフィールドジャパン”.
- **Capture timestamp:** September 16, 2026, 19:16:07.656 UTC, equivalent to September 17, 2026, 04:16:07.656 JST.
- **Desktop evidence:** 1440 × 1000 CSS-pixel viewport; supplied original-page captures of the hero, one story position, and Contact/footer; rendered document height approximately 14,997.72px.
- **Mobile evidence:** 390 × 844 CSS-pixel viewport; supplied original-page captures of the hero and Contact/footer; rendered document height approximately 13,550.41px.
- **DOM and computed-style evidence:** page text, observed hrefs, custom properties, selected element bounds, font declarations, colors, padding, radii, and transition declarations at both widths. These support measurements for sections not included in the visual captures.
- **Observed navigation and state limits:** scrolling supplied the different page positions. Menu opening, category selection, carousel operation, hover outcomes, contact submission, and linked-page content were not demonstrated. Hrefs establish destinations without verifying the destination pages.
- **Capture limitations:** readiness checks used finite waiting limits and sampled stability, with perpetual animation handling. Service workers and SharedWorkers were disabled during inspection. Delayed content and unexercised behavior may therefore remain undocumented.
- **Implementation limits:** individual heading spans, complete stylesheets, breakpoint rules, asset URLs, SVG paths, and motion-driver code were not supplied. The Quick Start is an unexecuted adaptation for reuse, not a claim of source-code equivalence.

This reference describes the current homepage represented by the supplied original-page evidence. Measured values, visual estimates, calculated relationships, and recommended additions are identified separately throughout.