# JFE Systems — Style Reference

> A spacious corporate information grid, anchored by navy utilities and a floating photographic polyhedron.

**Website:** [www.jfe-systems.com](https://www.jfe-systems.com/)
**Original URL:** https://www.jfe-systems.com/
**Final URL:** https://www.jfe-systems.com/
**Theme:** light, with a white canvas, navy controls, and a slate-gray footer.
**Inspected:** October 6, 2026, 01:37 JST. The supplied retrieval timestamp is October 5, 2026, 16:37:55.271 UTC.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Scope:** the current Japanese corporate homepage: persistent navigation, purpose hero, news preview, Topics carousel, news filters and articles, products, company introduction, photographic navigation panels, footer, and the visible cookie notice. Five current-page captures and the supplied rendered DOM/computed-style records inform this reference. Linked pages and opened navigation states were not inspected.

JFE Systems combines a restrained information architecture with a visually expressive opening. White space dominates. A faint vertical grid organizes the page into broad columns, while black headings, gray supporting text, and small navy controls provide hierarchy. The hero pairs the Japanese purpose statement with a suspended, faceted object containing workplace imagery. Its diffuse ground shadow supplies depth without introducing a general shadow treatment for the interface.

This is a substantial corporate homepage serving customers, investors, applicants, and other stakeholders. Its sequence moves from brand purpose through current information and products to company stories and institutional navigation. Large condensed English section labels help readers scan the long page; Japanese labels and descriptions carry the detailed information.

## How to Read This Reference

- **Measured** means a value is present in the supplied element rectangles or computed styles. Measurements apply to the two inspected viewports, not every screen size.
- **Calculated** means arithmetic derived from those measurements, such as column widths or section gaps.
- **Estimated** means a visual approximation from the current screenshots. These values are not recovered CSS declarations.
- **Recommended** means an implementation choice for a new project. This includes the Quick Start breakpoints, accessibility additions, and some display typography.
- All custom-property names below are descriptive implementation aliases. The supplied custom-property inventories were empty.
- The element sample does not include every image, nested heading span, pseudo-element, or rendering layer. A parent's computed font size or transparent background does not necessarily describe its visible children.
- Static captures establish visible states. They do not establish the hero's animation sequence, carousel timing, menu behavior, or the results of pressing controls.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Role and evidence |
| --- | --- | --- | --- |
| White | `#ffffff` | `--color-canvas` | Measured header background; visually the main page and card canvas. The body itself reports a transparent background. |
| Corporate Navy | `#001489` | `--color-brand` | Measured link color, active news-filter fill, and carousel-control color. The contact tile visually belongs to this navy family, although its fill layer was not sampled. |
| Heading Black | `#000000` | `--color-heading` | Measured navigation text, article links, and introductory emphasis; visually used for major headings. |
| Body Gray | `#555555` | `--color-body` | Measured body text and product descriptions. |
| Secondary Gray | `#707070` | `--color-muted` | Measured news dates and the hero purpose link. |
| Footer Slate | `#525961` | `--color-footer` | Measured footer background. The mobile menu tile appears similar; its background layer was not supplied. |
| Footer Secondary | `#cecece` | `--color-footer-muted` | Measured legal text and mobile copyright text. |
| Numbers Lavender | `#6875c5` | `--color-numbers` | Measured text color on the company-in-numbers panel. A local accent rather than a general action color. |
| RSS Orange | `#cc4800` | `--color-rss` | Measured RSS link color. Reserved for this utility. |
| Grid Mist | approximately `#eef0f3` | `--color-rule` | Estimated faint vertical guide color. Exact border and pseudo-element styles were not provided. |

The dominant relationship is white, black, gray, and navy. Product banners contain their own colors and logos, including bright cyan, metallic gray, and warm bridge photography. Those asset colors do not imply additional global interface themes.

### Cookie Notice Palette

The notice is visually distinct from the corporate navigation. It has a white surface, a pale gray border, black explanatory text, a light gray Close button, and a stronger blue Setting button. These layers were not included in the computed-style sample.

For an approximation, use `#d7d8de` for its border, `#f2f2f2` for its neutral button, and approximately `#003da6` for its blue action. These are **estimated adaptation values**, not measured site tokens.

## Tokens — Typography

### Japanese Body and Navigation

**Measured source stack:**

```css
font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
  'BIZ UDPGothic', Meiryo, sans-serif;
```

The body uses regular Japanese Gothic text with generous leading: `16px / 28.8px` on desktop and `14.08px / 25.344px` on mobile. Both correspond to a line-height ratio of `1.8`. Article links and compact detail links often use `1.6` instead.

Use weight `400` for paragraphs and routine navigation. Measured bold roles include dates, the purpose link, product-section introduction, and Japanese labels on photographic navigation panels.

The document's root element reports Times, but the body overrides it. Times is not the observed content typeface.

### Condensed English Labels

**Measured family:** `Oswald, sans-serif`.

On the company-story and institutional navigation panels, English labels use weight `600`, uppercase presentation, and tracking equal to `0.1em`. Their condensed proportions allow long labels to sit above larger Japanese names without taking over the photograph.

The large section headings have a related condensed appearance. Their nested text styles were not included in the sample: the supplied H2 records describe the wrapper. Using Oswald for these large headings is a reasonable **implementation recommendation**, rather than a separately verified family assignment.

### Hero Lettering and Identity

The visible purpose statement is bold Japanese lettering with softened, slightly irregular forms. Its exact family and rendering method are unverified. The large statement is visible in the screenshots but absent from the sampled text elements; only the smaller purpose link has a measured text style.

Do not identify this lettering as a particular font or assume it is ordinary HTML text. For a new implementation, use accessible text with an approved Japanese display face, or retain authorized artwork with an equivalent text alternative.

The corporate emblem and wordmark should likewise use an authorized identity asset. Recreating the logo with a body font will change its proportions.

### Type Scale

| Role | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Root and body | `16px / 28.8px`, 400 | `14.08px / 25.344px`, 400 | Measured; root line-height itself is normal. |
| Desktop primary navigation | `14.08px / 21.12px`, 400 | Hidden in the captured closed state | Measured. |
| Utility-rail labels | Usually `12px / 19.2px` | Rail not visible | Measured; the news utility uses `11.04px / 17.664px`. |
| Contact caption | `11.04px / 19.872px` | `9.7152px / 17.4874px` | Measured. |
| Mobile menu caption | — | `8.8704px` | Measured. Its 100px computed line-height belongs to the icon/caption positioning arrangement. |
| Main purpose statement | Approximately `48–52px` | Approximately `28–32px` | Screenshot estimate; family and line-height unverified. |
| Purpose link | `24px / 38.4px`, 700 | `19.4304px / 31.0886px`, 700 | Measured. |
| Major English section title | Approximately `56–64px` | Approximately `32–36px` | Visual/layout estimate; nested span styles unavailable. |
| News-filter text | `12.96px / 12.96px` | `11.4048px / 11.4048px` | Measured. |
| News date | `14.08px / 25.344px`, 700 | `12.3904px / 22.3027px`, 700 | Measured. |
| News headline | `16px`, leading `25.6–28.8px` | `14.08px`, leading `22.528–25.344px` | Measured; varies with the sampled text structure. |
| English photo-panel label | `16px / 25.6px`, 600; `1.6px` tracking | `10.56px / 16.896px`, 600; `1.056px` tracking | Measured Oswald. |
| Japanese photo-panel label | `20px / 24px`, 700 | `14.08px / 16.896px`, 700 | Measured. |
| Footer link and legal text | `12.96px / 23.328px` | `11.4048px / 20.5286px` | Measured. |

Keep the contrast between expressive hero lettering, tall English display labels, and practical Japanese body text. These roles should not collapse into a single uniform type treatment.

## Tokens — Spacing & Shapes

### Spacing Scale

The supplied evidence does not establish one universal spacing unit. It shows a combination of fixed controls, viewport-related insets, and substantial section gaps.

| Use | Desktop measurement | Mobile measurement | Interpretation |
| --- | --- | --- | --- |
| Header height | `100px` | `70px` | Measured. |
| Outer content reservation | `90px` on each side | `0px` | Measured at the inspected widths; the right desktop reservation contains utilities. |
| Section-heading inset | `43.2px` | `15px` | Measured padding. Desktop value equals 3% of the inspected viewport. |
| Card text inset | Approximately `28.8px` | `15px` | Derived from measured card and paragraph positions. |
| Hero text inset from main edge | Approximately `61.2px` | `29.25px` | Measured positions. These equal 4.25% and 7.5% of the respective viewport widths. |
| Heading-to-Topics-content gap | `50px` | `30px` | Calculated from heading and card rectangles. |
| Repeated major-section gap | `100px` | `80px` | Calculated between Topics, news, products, and About sections. |
| News-filter gap | `8px` | `8px` | Calculated from adjacent buttons. |
| News-filter padding | `8px 15px` | `8px 15px` | Measured. |
| Footer top inset | `50px` to identity link | `50px` to identity link | Calculated. |
| Cookie notice edge clearance | Approximately `20px` left, `32px` bottom | Approximately `20px` sides, `32px` bottom | Screenshot estimate. |

The matching percentage relationships above are useful reconstruction clues. They do not prove the original stylesheet uses those formulas.

### Border Radius and Depth

| Element | Shape | Evidence |
| --- | --- | --- |
| Product and Topics cards | Square, `0px` radius | Measured anchor radius and visible image edges. |
| Photographic navigation panels | Square, flush edges | Measured and visible. |
| Header contact and menu tiles | Square | Measured. |
| News-filter buttons | Pill, `100px` radius | Measured. |
| Topics controls | Circle, `50%` radius | Measured, `52 × 52px`. |
| Detail-link icon | Fine circular outline | Visible; link height is measured. |
| Cookie notice | Approximately `8px` radius | Screenshot estimate. |
| Cookie action buttons | Approximately `6px` radius | Screenshot estimate. |
| Hero shadow | Broad, diffuse oval | Visible artwork/rendering effect; implementation unknown. |

The page has no visible general-purpose elevated-card system. Depth is concentrated in the hero object. Most information sits directly on the white grid.

### Layout Measurements

| Element | Desktop, 1440 × 1000 | Mobile, 390 × 844 |
| --- | --- | --- |
| Main content | Starts at `(90, 100)`; width `1260px` | Starts at `(0, 70)`; width `390px` |
| Document height | `5400.83px`, reported as 5401 | `6721.95px`, reported as 6722 |
| Brand link box | `216 × 100px`, x approximately 43.19 | `150 × 70px`, x 15 |
| Contact tile | `90 × 100px`, x 1350 | `70 × 70px`, x 250 |
| Menu tile | Not visible | `70 × 70px`, x 320 |
| Utility item | `90 × 110px` | Not visible |
| Topics card | `420px` wide | `390px` wide |
| Product card | `420px` wide, three across | `195px` wide, two across |
| Company-story panel | `420 × 445px`, three across | `390 × 312px`, stacked |
| Institutional navigation panel | `315 × 432px`, four across | `195 × 273px`, two across |
| Footer | `1260 × 265.59px` | `390 × 481.67px` |

## Components

### Persistent Header

**Role:** identity, primary audience navigation, and contact access.

On desktop, a white 100px header spans the viewport. The logo sits approximately 43px from the left. Six navigation links occupy the right portion: company introduction, products, company information, investor relations, sustainability, and recruitment. Each uses `14.08px` text and approximately `15.84px` horizontal padding. A navy contact tile completes the far-right edge.

The header remains at the top in the supplied scrolled captures. Its visual separation comes from white space and a very fine edge, without a heavy shadow.

On mobile, the header is 70px high. The 150px-wide brand link begins at x 15. Two adjacent 70px squares occupy the right edge: a navy contact control and a slate-colored menu control. Thin white line icons sit above very small Japanese captions. The captured menu is closed. Although the DOM includes menu-related text, no opened menu layout or transition was demonstrated.

### Desktop Utility Rail

**Role:** persistent secondary routes without expanding the main navigation row.

A 90px-wide white rail sits at the viewport's right edge. Beneath the contact tile, vertically spaced utilities provide search, English, access information, news, and a purpose-based route index. Icons are fine black outlines: magnifier, globe, map pin, document, and directional signpost.

The first utility begins at y 130; following boxes are 110px high. Captions are generally 12px gray text. The news caption wraps onto two lines at a slightly smaller size.

A slender directional scroll control sits near the lower edge, in a measured `90 × 32px` button box. Its appearance changes with the shown page position. Activation and scrolling behavior were not tested. The rail is absent from the mobile captures.

### Purpose Hero

**Role:** communicate the corporate purpose before the information-heavy sections.

The desktop composition places two lines of black Japanese lettering on the left:

> はたらくをスマートに。  
> はたらく人にスマイルを。

A bold gray purpose link follows, paired with a small outlined circular arrow. On the right, a large angular polyhedron combines photographs of people and work. It floats over a diffuse oval shadow. In the desktop capture, its visible silhouette is approximately 465px wide and 540px high; these are screenshot estimates, not element measurements.

The mobile composition puts the object first, centered above the statement. Its captured silhouette is approximately 250 × 264px. The visible texture is a dark globe with cyan coastlines. Because desktop and mobile were captured at different moments, this difference cannot establish a viewport-specific asset rule. It may reflect another visual state.

The object, its shadow, and the white surrounding space are equally important. Do not enlarge the object until it crowds the text or touches the header. The exact renderer, geometry, texture sequence, and whether it responds to pointer movement are unknown.

### Hero News Preview

**Role:** provide a current-information entry point within the opening composition.

A small NEWS label, date, and linked headline occupy the lower-left portion of the desktop hero. The heading wrapper has `20px` top and `15px` bottom padding. The headline uses gray `16px` text with `25.6px` leading and a small directional arrow.

On mobile, this block follows the purpose text at the same `29.25px` horizontal inset. Its link is `331.5px` wide and wraps across several lines. It is not the same component as the full news list farther down the page.

The cookie notice obscures parts of this region in the captures; use the DOM measurements to understand the underlying content rather than treating the obscured area as intentionally empty.

### Bilingual Section Heading

**Role:** establish scan points across a long corporate homepage.

A large condensed uppercase English title sits above a smaller bold Japanese label. A short navy vertical rule marks the content's left boundary. The text is inset from that rule, approximately 43.2px on desktop and 15px on mobile.

Examples include TOPICS, NEWS & PRESS RELEASES, PRODUCTS & SERVICES, and ABOUT JFE SYSTEMS. Desktop heading wrappers are approximately 103.27px high. On mobile, wrappers measure approximately 70.39px for shorter titles and 119.67px for longer titles. The larger height supports wrapping; it should not be implemented as a fixed blank spacer.

Use an H2 with separate spans for English and Japanese text. Preserve the semantic section title even when styling the two languages differently.

### Topics Carousel

**Role:** mix product announcements, purpose content, recognitions, and corporate initiatives.

Each linked item contains a wide image, a title, and a gray description. Desktop cards are 420px wide, creating three visible columns within the 1260px frame. Text is inset approximately 28.8px. Mobile cards are the full 390px viewport width with 15px text insets.

The DOM contains horizontally offset repeated items. This is consistent with carousel looping or cloned slides; it does not mean all repeated entries should become separate rows in a reconstruction. Negative x coordinates in these records are carousel positions, not evidence that the whole page visibly overflows.

Three circular controls are explicitly present: Previous, Pause, and Next. Their boxes remain `52 × 52px` at both viewports. Desktop controls sit near the section heading's right side. Mobile controls appear centered below the slide content, with roughly 15px between them.

Pause establishes that a playback control exists. Automatic-advance timing, swipe support, looping behavior, and the results of pressing any control remain unverified.

### News Filters and Article List

**Role:** give several audiences direct access to recent announcements.

The section combines its bilingual title, an orange RSS utility, six pill filters, date/category metadata, linked headlines, and a centered archive link.

The active filter, labeled `すべて`, has navy fill and white text. Other filters have navy text on a transparent background. Measured padding is `8px 15px`, with `100px` border radius and 8px gaps. Buttons are approximately 31px high on desktop and 29.4px on mobile. These are visual control sizes, not a recommendation for minimum touch targets.

Desktop rows align three information zones. In the measured frame, dates begin at x approximately 133.19, category wrappers at 288.06, and headlines at 453.19. Dates use bold secondary gray. Visible category labels are rectangular navy strips with white text, unlike the rounded filter controls. Their inner label styles were not separately sampled.

On mobile, date and category remain together on the first line; the headline starts beneath them at x 15 and occupies a 360px text area. Filters wrap into two rows. RSS moves beneath the title area toward the right. The news section consequently grows from approximately 743px to 1168px in height.

The supplied list contains six dated entries. Preserve content-dependent wrapping and natural row heights. Filtering results and RSS navigation were not exercised.

### Product Grid

**Role:** introduce three major solution families and route visitors into product information.

A bold Japanese introductory sentence separates the section title from the product imagery. The three cards represent MerQurius, SIDEROS, and FiBridgeII. Each card is an entire linked unit with a wide branded banner, a bold product title, and a gray description.

Desktop cards touch at their image edges and align to the page's three-column guides. Each is 420px wide. The banners appear approximately 224px high, giving an estimated ratio near `15:8`. There are no rounded image corners, detached white card boxes, or elevation shadows.

Mobile retains **two columns**. MerQurius and SIDEROS each occupy 195px in the first row; FiBridgeII occupies the left half of the next row. The 15px internal padding leaves a narrow 165px text measure. Long Japanese names and descriptions therefore wrap substantially. Do not assume that this component becomes a single-column stack.

A centered navy detail link closes the section.

### Company Introduction and Story Panels

**Role:** explain purpose and provide distinct ways to explore the organization.

ABOUT JFE SYSTEMS introduces an OUR PURPOSE subsection, a short explanation, and a philosophy link. On desktop, measured text occupies approximately half the content frame. On mobile, it spans the available width with 15px insets, and the philosophy link is centered farther down the block.

The supplied screenshots do not show the entire purpose subsection clearly. The DOM establishes its text hierarchy and spacing, but does not establish the exact artwork filling every unsampled region. Avoid inventing a video player or another prominent feature to fill those spaces.

Three large story links follow: brand history, strengths, and the company in numbers. Desktop panels form a flush row of `420 × 445px` units. Mobile panels stack at `390 × 312px` each.

Their labels sit near the upper portion of each panel, unlike the vertically centered institutional links below. English labels use measured Oswald 600 with `0.1em` tracking. Japanese labels are bold. Text colors vary by panel: black, white, and lavender respectively. This is deliberate local contrast with each background rather than a shared white-text rule.

### Institutional Photo Navigation

**Role:** route users into company information, investor relations, sustainability, and recruitment.

Four photographic panels form a continuous desktop strip. Each is `315 × 432px`; there are no inter-panel gutters. Images depict a suspension bridge, financial analysis, people reaching toward the sky, and coworkers in conversation.

A darkened image treatment supports centered white labels. Small condensed English text appears above a larger bold Japanese label. The first two English labels occupy two lines. The source's sustainability label is displayed as `SUSTINABILITY`; this is observed source copy, not a recommended spelling for a new implementation.

Mobile changes the strip to a `2 × 2` grid of `195 × 273px` panels. Text scales down, while the panels retain a tall photographic crop. Preserve the four destinations and their order.

### Circular Detail Link

**Role:** provide a restrained section-level continuation action.

The visible anatomy is a thin navy circular outline containing a small glyph, followed by navy text. A four-square mark is visible in the news archive link; other contexts may use directional symbols.

Desktop link boxes are 52px high with `65px` left padding reserved for the icon area. Mobile boxes are 40px high with `55px` left padding. The text uses body size and `1.6` leading.

Treat the circle and text as one link. The visual footprint stays small relative to the section; it is not a large filled conversion button.

### Footer

**Role:** finish the corporate navigation with identity, policies, and legal information.

The desktop footer remains inside the 1260px content frame. Its slate background carries a white identity link at left, policy links wrapping into two rows at right, and muted legal text below. The measured top inset is 50px. The total height is approximately 266px.

On mobile, it spans the full 390px viewport and grows to approximately 482px. The white company wordmark sits above a single vertical policy list, followed by the legal notice and copyright. Links use approximately 11.4px text and 31.9px-high line boxes including padding.

A white region above the mobile footer contains the slender upward navigation affordance. The measured distance from the bottom of the photo-navigation grid to the footer is 120px; desktop separation is 70px.

### Cookie Notice

**Role:** present device-information and advertising-related information with settings access.

A white bordered notice remains visible at the lower-left across all supplied captures. It contains an English paragraph, a small top-right close mark, and two bottom-right buttons labeled Close and Setting. There is no visible full-screen dimming layer.

Its approximate desktop bounds are x 20, y 780, width 360, height 188. On mobile, they are x 20, y 624, width 350, height 188. Both imply a 32px bottom offset. Internal padding is approximately 16px; action buttons are about 40px high.

The notice covers significant content, including part of the mobile purpose statement and footer. Record this as an observed overlay condition, not as an ideal content layout. Its vendor, text font, dismissal behavior, settings interface, and persistence rules were not established.

## Tokens — Motion & Interaction

| Treatment | Evidence | Supported conclusion |
| --- | --- | --- |
| General text links | `color 0.2s linear` | A short color transition is declared. The exact hovered color was not sampled. |
| Desktop primary navigation | `0.3s linear` | A transition is declared; affected properties and opened navigation states are not established by this shorthand. |
| Contact link | `0.2s linear` | A short transition is declared; endpoint appearance is unverified. |
| Purpose heading | `opacity 0.5s linear 0.1s, transform 0.5s ease-out 0.1s` | A delayed fade/transform transition is defined. Trigger and initial transform are unknown. |
| News-filter buttons | `background-color 0.2s linear` | Background-color state changes are supported by the declaration. Filter results were not tested. |
| Topics controls | `background-color 0.2s linear` | A control-background transition is declared. |
| Hero object | Different faceted appearances in the captures | Visual variation exists; exact rotation, sequence, renderer, timing, and interaction are unverified. |
| Topics carousel | Repeated offset items and Previous/Pause/Next controls | A carousel interface is present; its operational behavior was not exercised. |
| Persistent header and rail | Same viewport anchoring across scrolled captures | Navigation remains visible while the document scrolls. |
| Cookie notice | Same lower-viewport placement across captures | The notice remains visible through these captured scroll states. |

Many sampled elements report `animation: none`. This applies to those elements only. It does not rule out animation in omitted descendants, pseudo-elements, media, or JavaScript rendering.

For a new implementation, keep routine interaction feedback close to the measured 200–300ms range. Treat any reconstructed hero rotation, image zoom, parallax, or menu animation as new behavior until independently verified. A static hero composition is an appropriate fallback.

## Surfaces

| Layer | Appearance | Structural purpose |
| --- | --- | --- |
| Main canvas | White with extremely faint vertical guides | Provides continuity through the long homepage. |
| Header and utility rail | Solid white, fine boundaries | Keeps navigation distinct without visual weight. |
| Product and Topics content | Images followed by unboxed text | Supports dense information inside a spacious overall frame. |
| Selected filter | Navy pill with white text | Indicates the current category. |
| Category label | Navy rectangular strip | Identifies article type. |
| Institutional navigation | Darkened photography and white labels | Turns large image areas into destination links. |
| Footer | Solid `#525961` with white and pale-gray text | Creates a clear terminal region. |
| Cookie notice | White, pale border, small rounded corners | Separates a persistent utility overlay from the page. |

The desktop grid can be read at x approximately 90, 510, 930, and 1350. Product boundaries align with these guides. The four-panel institutional strip uses a separate division within the same outer frame.

## Imagery

The homepage uses three complementary image languages.

**Hero imagery** places people and work inside a faceted floating form. Triangular seams, perspective, and the soft shadow are essential. The mobile capture's globe texture adds a technological expression, but its place in the complete visual sequence is unknown.

**Product imagery** preserves each solution's own branding. MerQurius uses a dark-blue technical graphic, SIDEROS combines a logo with a metallic blue polyhedral sphere, and FiBridgeII uses a warm bridge photograph with prominent product lettering. These are finished branded banners, not interchangeable decorative photographs.

**Corporate navigation imagery** uses recognizable real-world subjects with intentional crops: infrastructure, financial work, collective participation, and workplace conversation. Darkening is strongest where white overlaid labels require contrast. The observed overlay mechanism and opacity are not supplied.

### Observed Asset References

No image `src` values, model files, texture files, or font asset URLs were included in the evidence. The references below identify visible roles and associated links; the links are destinations, **not downloadable image paths**.

| Asset role | Visible evidence | Associated destination |
| --- | --- | --- |
| Corporate identity | Blue spherical emblem and black wordmark; white footer identity | `https://www.jfe-systems.com/index.html` |
| Purpose hero | Faceted workplace-photo composition; globe state on mobile | `https://www.jfe-systems.com/company/philosophy.html` through the purpose link |
| MerQurius banner | Blue technical/product graphic | `https://biz.jfe-systems.com/products/sol/merqurius` |
| SIDEROS banner | Logo and metallic blue faceted sphere | `https://biz.jfe-systems.com/hubfs/sideros/index.html` |
| FiBridgeII banner | Product lettering over bridge photography | `https://biz.jfe-systems.com/products/fibridge` |
| Institutional photos | Bridge, financial analysis, group participation, coworkers | The company, IR, sustainability, and recruitment links on the homepage |

Use authorized original assets when available. Preserve normal photographic interpolation and sharp logos. Pixelated rendering, generic clip-art icons, and an invented replacement corporate emblem would change the visual character.

## Layout & Responsive Behavior

### Desktop Frame

At 1440px wide, the content occupies the central 1260px. A 90px white band remains at left, and a 90px utility rail occupies the right. The 100px header spans above both. Three 420px columns organize product and Topics content, while text headings are inset inside this frame.

The main section sequence is measurable: Topics begins at document y 1030; news at approximately 1807.72; products at 2651.03; About at 3479.75; institutional navigation at 4633.23; and the footer at 5135.23. These are capture-specific document coordinates, useful for understanding rhythm rather than fixed positioning instructions.

### Mobile Reflow

At 390px, the side reservations disappear and the header reduces to 70px. Most ordinary text uses 15px side padding. The opening statement and news preview use a larger 29.25px inset.

The page does not apply one universal stacking rule:

| Component | Desktop | Mobile |
| --- | --- | --- |
| Hero | Statement left, object right | Object above statement |
| Primary navigation | Six visible text links | Closed menu control |
| Utility rail | Persistent at right | Not visible |
| Topics | Three 420px cards across | One 390px slide across |
| Topics controls | Near the heading at right | Centered beneath content |
| News filters | One row | Two rows |
| News article | Date, category, headline in horizontal zones | Date/category above headline |
| Products | Three columns | Two columns, with the third item on a new row |
| Company stories | Three panels across | Three full-width stacked panels |
| Institutional navigation | Four panels across | Two columns and two rows |
| Footer policies | Wrapped rows at right | Vertical list |

Mobile content grows to approximately 6722px despite the smaller text size. News headlines wrap, company-story panels stack, and the footer becomes taller. Preserve these content-driven changes rather than forcing the desktop page into a scaled-down canvas.

Only two viewport widths were inspected. The exact breakpoint, tablet behavior, orientation handling, and safe-area rules are unknown. The Quick Start uses a recommended 1100px breakpoint to protect the desktop navigation from crowding; this is not a recovered source value.

## Do’s and Don’ts

### Do

- Preserve the broad white frame, faint column guides, and repeated 100px desktop section gaps.
- Keep navy concentrated in controls, links, small rules, and category markers.
- Pair condensed uppercase English labels with readable Japanese Gothic text.
- Give the hero object ample empty space and retain its detached oval shadow.
- Keep product banners square-cornered and aligned directly to the column boundaries.
- Preserve the different mobile rules for carousel slides, products, story panels, and institutional navigation.
- Keep contact access visible in both header layouts.
- Use real product identity assets and deliberate photographic crops.
- Distinguish declared transitions from interactions that were actually exercised.
- Let article and product copy wrap naturally, particularly within the 165px mobile card text area.

### Don’t

- Don't reduce this multi-audience homepage to one conversion path.
- Don't turn every content group into a rounded, elevated card.
- Don't introduce broad navy section backgrounds where the source uses white space.
- Don't treat the visible cookie notice as part of the corporate card design system.
- Don't assume every mobile section becomes a single column.
- Don't reproduce carousel clones as duplicate visible content.
- Don't identify a hero font, graphics library, animation duration, or image path without evidence.
- Don't interpret the H2 wrapper's 16px computed size as the large English display size.
- Don't use the hero's changing appearance as proof of a desktop/mobile asset swap.
- Don't allow a persistent overlay to make essential actions unreachable in a new implementation.

## Recommended Implementation Additions

These are recommendations, not verified features of the inspected page:

- Provide a skip link and a clear keyboard focus outline in the corporate navy.
- Give search, menu, carousel, and directional controls explicit accessible names. Keep visible Japanese captions connected to those names.
- Expose the selected news category through an appropriate state such as `aria-pressed`; maintain focus when results update.
- Preserve the existing 52px carousel-control footprint. Expand smaller filter and utility hit areas toward 44px without unnecessarily enlarging their visible typography.
- Give a moving hero a reduced-motion/static option. If motion conveys no essential information, keep the equivalent still image sufficient.
- For an automatically advancing carousel, make Pause operational and make cloned offscreen content non-focusable. Verify keyboard navigation and announcements.
- Use text alternatives for meaningful product images, and avoid repeating an adjacent product title unnecessarily in image descriptions.
- Supply the purpose statement as accessible text even if its visual treatment uses artwork.
- Ensure the cookie notice and any settings panel work with keyboard and zoom. Revisit the observed overlap on small screens.
- Test widths between 390px and 1440px, long translated labels, 200% zoom, and mobile browser controls before fixing breakpoint or viewport-height behavior.

## Agent Prompt Guide

### Quick Color Reference

- Canvas and navigation surfaces: `#ffffff`.
- Primary links, selected filters, and circular details: `#001489`.
- Strong text: `#000000`; body: `#555555`; secondary text: `#707070`.
- Footer: `#525961`; footer legal text: `#cecece`.
- Company-in-numbers text: `#6875c5`.
- RSS utility: `#cc4800`.
- Faint grid approximation: `#eef0f3`.

### Overall Prompt

“Create a Japanese corporate homepage for an enterprise systems company using a white canvas, extremely faint vertical column guides, black headings, gray body text, and navy `#001489` navigation accents. At a 1440px desktop viewport, reserve 90px on both sides of a 1260px content frame; place persistent icon utilities in the right reservation and a 100px white header above it. Pair a two-line Japanese purpose statement with a large floating photographic polyhedron and a diffuse oval shadow. Continue with Topics, a categorized news list, three branded product cards, company-purpose content, three company-story panels, four photographic institutional links, and a slate footer. Use a Japanese Gothic body stack and condensed uppercase English display labels. On mobile, use a 70px header with contact and menu tiles, place the hero image above the statement, show one Topics slide, retain two product columns, stack company stories, and make the institutional links a 2 × 2 grid. Preserve square image edges and generous section spacing.”

### Example Component Prompts

1. **Header and utilities:** “Design a 100px white corporate header with an authorized logo at left, six compact Japanese navigation links at right, and a 90px-wide navy contact tile. Continue a white 90px utility rail down the right side with thin outline icons over small gray captions. At mobile width, replace the text navigation with adjacent 70px contact and menu squares.”
2. **Purpose hero:** “Place bold Japanese purpose copy on the left and an angular photographic object on the right, suspended over a soft gray oval shadow. Use broad white space and very faint vertical guides. Include a gray purpose link with a small outlined circular arrow. Provide a still composition unless a motion sequence has been separately specified.”
3. **News list:** “Build a bilingual news section with a condensed English heading, Japanese subtitle, small orange RSS utility, and navy pill filters. Use bold gray dates, rectangular navy category labels, and black linked headlines. On mobile, keep date and category together above a full-width headline and let filters wrap.”
4. **Products:** “Build three flush product links using branded wide banners, bold titles, and gray descriptions. Use three equal columns on desktop and two equal columns at 390px, leaving the third item on the next row. Keep square corners and 15px mobile text padding.”
5. **Institutional navigation:** “Create four adjoining photographic links for company information, investors, sustainability, and recruitment. Use darkened photographs, centered white condensed English labels, and bold Japanese labels. Desktop panels measure about 315 × 432px; mobile uses a 2 × 2 grid with 195 × 273px panels.”
6. **Footer:** “Create a slate `#525961` footer with a white corporate identity, compact policy links, and pale-gray legal text. Keep it within the desktop content frame. On mobile, make it full width and stack the policy links beneath the identity.”

## Quick Start

### CSS Custom Properties

This is an implementation scaffold, not extracted source CSS. Exact colors, sampled typography, control sizes, and column counts follow the evidence. Large display sizes, the grid color, image-overlay opacity, intermediate behavior, and the 1100px breakpoint are adaptation choices.

Load an authorized Oswald font resource through the project's font pipeline if available; no font-file URL was supplied. The fallback families below are recommendations. Supply the hero and branded imagery separately.

The CSS expects a `.site-header` containing `.brand`, `.primary-nav`, `.contact-tile`, and `.menu-tile`; a separate `.utility-rail`; and `.frame` on the main and footer. Hero content uses `.hero-copy`, `.hero-visual`, and `.hero-news`. Product images and text belong inside one `.product-card` link.

```css
:root {
  /* Measured colors, except the estimated guide and notice colors. */
  --color-canvas: #ffffff;
  --color-brand: #001489;
  --color-heading: #000000;
  --color-body: #555555;
  --color-muted: #707070;
  --color-footer: #525961;
  --color-footer-muted: #cecece;
  --color-numbers: #6875c5;
  --color-rss: #cc4800;
  --color-rule: #eef0f3;
  --color-notice-border: #d7d8de;
  --color-notice-action: #003da6;

  --font-body: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
    'BIZ UDPGothic', Meiryo, sans-serif;
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;

  --text-body: 16px;
  --text-date: 14.08px;
  --text-filter: 12.96px;
  --text-footer: 12.96px;
  --text-purpose: 24px;
  --text-panel-en: 16px;
  --text-panel-ja: 20px;
  --leading-body: 1.8;
  --leading-link: 1.6;

  --header-height: 100px;
  --frame-edge: 90px;
  --rail-width: 90px;
  --heading-inset: 3vw;
  --card-inset: 2vw;
  --hero-inset: 4.25vw;
  --section-gap: 100px;
  --content-gap: 50px;
  --detail-size: 52px;
  --detail-offset: 65px;

  /* Estimated display values for this adaptation. */
  --text-display: 60px;
  --text-hero: 50px;
  --photo-overlay: rgb(0 0 0 / 32%);

  --motion-link: 200ms linear;
  --motion-navigation: 300ms linear;
}

* { box-sizing: border-box; }

html {
  scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
  margin: 0;
  padding-top: var(--header-height);
  color: var(--color-body);
  background: var(--color-canvas);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

button, input { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }

 a {
  color: var(--color-brand);
  text-decoration: none;
  transition: color var(--motion-link);
}

:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
}

.frame { margin-inline: var(--frame-edge); }

.site-main {
  position: relative;
  isolation: isolate;
}

/* Decorative guides do not change the measured content width. */
.site-main::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-inline: 1px solid var(--color-rule);
  background-image: linear-gradient(
    to right, var(--color-rule) 1px, transparent 1px
  );
  background-size: calc(100% / 3) 100%;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  height: var(--header-height);
  padding-left: var(--heading-inset);
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-rule);
}

.brand {
  display: flex;
  align-items: center;
  flex: 0 0 216px;
  height: 100%;
}

.primary-nav {
  display: flex;
  align-items: stretch;
  height: 100%;
  margin-left: auto;
  margin-right: 1vw;
}

.primary-nav a {
  display: flex;
  align-items: center;
  padding-inline: 15.84px;
  color: var(--color-heading);
  font-size: 14.08px;
  line-height: 1.5;
  white-space: nowrap;
  transition: color var(--motion-navigation);
}

.contact-tile, .menu-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 var(--rail-width);
  height: 100%;
  border: 0;
  color: white;
  background: var(--color-brand);
  font-size: 11.04px;
  line-height: 1.8;
}

.menu-tile { display: none; }

.contact-tile svg, .menu-tile svg,
.utility-link svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.utility-rail {
  position: fixed;
  inset: var(--header-height) 0 0 auto;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: var(--rail-width);
  padding-block: 30px 50px;
  background: white;
  border-left: 1px solid var(--color-rule);
}

.utility-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 110px;
  padding: 14px 4px 0;
  border: 0;
  color: var(--color-body);
  background: transparent;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.scroll-cue {
  width: 90px;
  height: 32px;
  margin-top: auto;
  border: 0;
  color: var(--color-brand);
  background: transparent;
}

.hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr auto;
  min-height: calc(100svh - var(--header-height) + 30px);
}

.hero-copy {
  align-self: center;
  padding-left: var(--hero-inset);
  transition: opacity 500ms linear 100ms,
    transform 500ms ease-out 100ms;
}

.hero-title {
  margin: 0;
  color: var(--color-heading);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.65;
}

.purpose-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  color: var(--color-muted);
  font-size: var(--text-purpose);
  font-weight: 700;
  line-height: 1.6;
}

.hero-visual {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  min-width: 0;
  padding-bottom: 160px;
}

.hero-visual > img {
  width: min(80%, 470px);
  height: auto;
}

/* Approximate the ground shadow, not the original rendering method. */
.hero-visual::after {
  content: '';
  position: absolute;
  bottom: 60px;
  left: 12%;
  width: 76%;
  height: 65px;
  background: radial-gradient(
    ellipse, rgb(0 0 0 / 23%), transparent 70%
  );
  filter: blur(10px);
  pointer-events: none;
}

.hero-news {
  grid-column: 1;
  padding: 0 24px 60px var(--hero-inset);
}

.hero-news__label {
  margin: 0;
  padding-block: 20px 15px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.hero-news a {
  color: var(--color-body);
  line-height: 1.6;
}

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

.section-heading {
  margin: 0 0 var(--content-gap);
  padding-inline: var(--heading-inset);
  border-left: 1px solid var(--color-brand);
}

.section-heading__en {
  display: block;
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.section-heading__ja {
  display: block;
  color: var(--color-muted);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.section-intro {
  margin: 0 0 30px;
  padding-inline: var(--heading-inset);
  color: var(--color-heading);
  font-weight: 700;
}

.product-grid, .story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-card { min-width: 0; }

.product-card__image {
  width: 100%;
  aspect-ratio: 15 / 8;
  object-fit: cover;
}

.product-card__body {
  padding: 24px var(--card-inset) 30px;
}

.product-card h3 {
  margin: 0 0 18px;
  color: var(--color-heading);
  font-size: 18px;
  line-height: 1.6;
}

.product-card p { margin: 0; color: var(--color-body); }

/* Static overflow fallback; carousel behavior needs separate code. */
.topics-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.topic-card {
  flex: 0 0 calc(100% / 3);
  min-width: 0;
  scroll-snap-align: start;
}

.topic-card__body { padding: 24px var(--card-inset); }

.carousel-controls {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  padding-inline: var(--heading-inset);
}

.carousel-control {
  width: 52px;
  height: 52px;
  border: 1px solid var(--color-brand);
  border-radius: 50%;
  color: var(--color-brand);
  background: transparent;
  transition: background-color var(--motion-link);
}

.news-inner { padding-inline: var(--heading-inset); }

.news-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}

.news-filter {
  padding: 8px 15px;
  border: 1px solid var(--color-brand);
  border-radius: 100px;
  color: var(--color-brand);
  background: transparent;
  font-size: var(--text-filter);
  line-height: 1;
  transition: background-color var(--motion-link);
}

.news-filter[aria-pressed='true'] {
  color: white;
  background: var(--color-brand);
}

.news-row {
  display: grid;
  grid-template-columns: 155px 165px minmax(0, 1fr);
  align-items: start;
  margin-bottom: 20px;
}

.news-date {
  color: var(--color-muted);
  font-size: var(--text-date);
  font-weight: 700;
}

.news-category {
  justify-self: start;
  max-width: 144px;
  padding: 4px 12px;
  color: white;
  background: var(--color-brand);
  font-size: var(--text-filter);
  line-height: 1.6;
}

.news-headline {
  color: var(--color-heading);
  line-height: var(--leading-link);
  overflow-wrap: anywhere;
}

.rss-link { color: var(--color-rss); }

.detail-row {
  margin-top: 40px;
  padding-inline: 15px;
  text-align: center;
}

.detail-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--detail-size);
  padding-left: var(--detail-offset);
  line-height: 1.6;
  text-align: left;
}

.detail-link__icon {
  position: absolute;
  left: 0;
  top: 50%;
  display: grid;
  place-items: center;
  width: var(--detail-size);
  height: var(--detail-size);
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translateY(-50%);
}

.story-card, .portal {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
}

.story-card {
  aspect-ratio: 420 / 445;
  align-items: flex-start;
  justify-content: center;
  padding: 75px 30px 30px;
  text-align: center;
}

.story-card img, .portal img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panel-label { position: relative; z-index: 1; }

.panel-label__en {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: var(--text-panel-en);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.panel-label__ja {
  display: block;
  font-size: var(--text-panel-ja);
  font-weight: 700;
  line-height: 1.2;
}

.story-card--history { color: black; }
.story-card--strengths { color: white; }
.story-card--numbers { color: var(--color-numbers); }

.portal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--section-gap);
}

.portal {
  aspect-ratio: 35 / 48;
  align-items: center;
  justify-content: center;
  padding: 30px;
  color: white;
  text-align: center;
}

.portal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--photo-overlay);
}

.site-footer {
  margin-top: 70px;
  padding: 50px var(--heading-inset);
  color: white;
  background: var(--color-footer);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.footer-identity { flex: 0 0 224px; color: white; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 620px;
}

.footer-links a {
  padding: 6.48px 12.96px;
  color: white;
  font-size: var(--text-footer);
}

.footer-legal {
  margin-top: 40px;
  color: var(--color-footer-muted);
  font-size: var(--text-footer);
}

.footer-legal p { margin: 0 0 4px; }

/* Screenshot-based notice approximation; behavior is not included. */
.cookie-notice {
  position: fixed;
  z-index: 100;
  left: 20px;
  bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  width: min(360px, calc(100% - 40px));
  max-height: calc(100dvh - var(--header-height) - 64px);
  overflow-y: auto;
  padding: 20px 16px 16px;
  border: 1px solid var(--color-notice-border);
  border-radius: 8px;
  color: black;
  background: white;
  font: 14px / 1.4 sans-serif;
}

.cookie-notice p { margin: 0 0 12px; }

.cookie-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

.cookie-actions button {
  min-width: 92px;
  min-height: 40px;
  border: 1px solid #cccccc;
  border-radius: 6px;
  color: #333333;
  background: #f2f2f2;
}

.cookie-actions .settings-button {
  border-color: var(--color-notice-action);
  color: white;
  background: var(--color-notice-action);
}

/* Recommended breakpoint; the original breakpoint was not supplied. */
@media (max-width: 1100px) {
  :root {
    --text-body: 14.08px;
    --text-date: 12.3904px;
    --text-filter: 11.4048px;
    --text-footer: 11.4048px;
    --text-purpose: 19.4304px;
    --text-panel-en: 10.56px;
    --text-panel-ja: 14.08px;
    --text-display: 35.2px;
    --text-hero: 30px;
    --header-height: 70px;
    --frame-edge: 0px;
    --rail-width: 70px;
    --heading-inset: 15px;
    --card-inset: 15px;
    --hero-inset: 7.5vw;
    --section-gap: 80px;
    --content-gap: 30px;
    --detail-size: 40px;
    --detail-offset: 55px;
  }

  .site-main::before { display: none; }
  .primary-nav, .utility-rail { display: none; }
  .brand { flex-basis: 150px; margin-right: auto; }
  .contact-tile { font-size: 9.7152px; }
  .menu-tile {
    display: flex;
    background: var(--color-footer);
    font-size: 8.8704px;
  }

  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .hero-visual {
    order: 0;
    width: 100%;
    min-height: 480px;
    padding-bottom: 20px;
  }

  .hero-visual > img { width: min(67%, 300px); }
  .hero-visual::after { bottom: 12px; height: 60px; }
  .hero-copy { order: 1; width: 100%; padding-inline: var(--hero-inset); }
  .hero-title { line-height: 1.6; }
  .purpose-link { margin-top: 12px; }
  .hero-news { order: 2; padding: 30px var(--hero-inset) 42px; }

  .section-heading__en { line-height: 1.4; }
  .section-heading__ja { font-size: 14.08px; line-height: 1.5; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-card__body { padding: 18px 15px 30px; }
  .product-card h3 { font-size: 14.08px; }
  .topic-card { flex-basis: 100%; }
  .carousel-controls { justify-content: center; margin-top: 30px; }

  .news-row {
    grid-template-columns: 136.28px minmax(0, 1fr);
    row-gap: 8px;
    margin-bottom: 30px;
  }

  .news-headline { grid-column: 1 / -1; }
  .news-category { max-width: 126.72px; }
  .story-grid { grid-template-columns: 1fr; }
  .story-card { aspect-ratio: 5 / 4; padding: 39px 15px 15px; }
  .portal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal { aspect-ratio: 5 / 7; padding: 15px; }
  .panel-label__en { margin-bottom: 8px; }

  .site-footer { margin-top: 120px; padding: 50px 15px 30px; }
  .footer-top { display: block; }
  .footer-identity { display: block; width: 224px; }
  .footer-links { display: block; margin-top: 30px; }
  .footer-links a { display: block; width: fit-content; padding: 5.7024px 0; }
  .footer-legal { margin-top: 35px; }
}

/* Recommended feedback; these exact hover endpoints were not inspected. */
@media (hover: hover) {
  .primary-nav a:hover, .news-headline:hover {
    color: var(--color-brand);
  }
  .carousel-control:hover { background: rgb(0 20 137 / 6%); }
}

/* Static rendering remains available when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
  .hero-copy, a, .news-filter, .carousel-control {
    transition: none;
  }
  .topics-track { scroll-behavior: auto; }
}
```

The scaffold deliberately leaves content visible without entrance scripting. It does not implement menu opening, filtering, carousel playback, hero animation, consent storage, or settings dialogs. Those behaviors need separate code and testing. If the supplied hero asset already includes its shadow, remove the CSS shadow to avoid doubling it.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-corporate: var(--color-brand);
  --color-canvas: #ffffff;
  --color-copy: var(--color-body);
  --color-secondary: var(--color-muted);
  --color-footer-slate: var(--color-footer);
  --color-guide: var(--color-rule);

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

  --text-copy: var(--text-body);
  --text-section: var(--text-display);
  --text-purpose-link: var(--text-purpose);

  --spacing-header: var(--header-height);
  --spacing-frame: var(--frame-edge);
  --spacing-section: var(--section-gap);
  --spacing-card-inset: var(--card-inset);
  --spacing-detail: var(--detail-size);

  --radius-panel: 0px;
  --radius-filter: 100px;
}
```

## Sources & Evidence

- **Inspected original and final page:** [JFE Systems Japanese homepage](https://www.jfe-systems.com/). Both recorded URLs are identical; the supplied HTTP status is 200.
- **Capture record:** October 5, 2026, `16:37:55.271 UTC`, equivalent to October 6, 2026, `01:37:55.271 JST`.
- **Desktop evidence:** three current-page captures at `1440 × 1000`, covering the opening, products/news boundary, and institutional navigation/footer; rendered text, links, element rectangles, and computed styles accompany this viewport.
- **Mobile evidence:** two current-page captures at `390 × 844`, covering the opening and lower-page/footer state; the accompanying DOM supplies measurements for intervening sections, including products and company stories that are not directly pictured in those two captures.
- **Observation procedure:** the supplied collector initially observed for at least five seconds and used capped readiness checks for loading, finite motion, stable layout, and image decoding. Overall capture readiness was limited to 15 seconds, pending-image waits to five seconds, and scroll settling to ten seconds per position. Perpetual animation was temporarily paused during readiness checks and then resumed. SharedWorkers and service workers were disabled.
- **Observed interaction scope:** scroll-position changes and persistent navigation/notice placement are represented. Control labels, links, selected-filter appearance, and transition declarations are available. There is no supplied demonstration of an opened menu, search interaction, filter result, carousel button result, consent setting, or complete hero-animation cycle.
- **Limitations:** exact image/model/font asset URLs, nested display-heading styles, full pseudo-element styling, intermediate breakpoints, keyboard behavior, and reduced-motion behavior were not supplied. No additional browsing or file inspection was performed for this reference.

This reference describes the current homepage shown in the supplied inspection. Measurements, visual estimates, and recommended implementation choices are separated throughout.