# Kawatatec — Style Reference

> Precision machinery and human craft arranged across a deep-blue industrial canvas.

**Original URL:** [kawatatec.co.jp](https://kawatatec.co.jp/)
**Final URL:** [kawatatec.co.jp](https://kawatatec.co.jp/)
**Theme:** deep-blue branding with white and pale-gray content sections; no theme switch was verified.
**Inspected:** September 12, 2026. Supplied retrieval timestamp: `2026-09-12T14:59:53.621Z`, equivalent to 23:59:53.621 JST.
**Viewports:** desktop `1440 × 1000` and mobile `390 × 844` CSS pixels.
**Scope:** the current Japanese corporate homepage, including its header, hero, promotional rail, product discovery, Topics, contributing industries, recruitment, latest news, footer, and visible cookie notice. Visual captures cover the desktop opening, Topics and the beginning of the industry imagery, desktop footer, mobile opening, and mobile footer. Rendered DOM measurements extend across the remaining homepage sections. Destination pages and opened menus were not inspected.

Kawatatec presents an industrial manufacturer through a strong relationship between engineered objects and the people who make them. A large lathe chuck occupies the right side of the desktop opening, a worker appears above the headline, and a smaller measurement photograph overlaps the composition below. Deep blue connects these photographs to an oversized white Japanese statement. Diagonal fields cut through the rectangular arrangement without changing the photographs into decorative shapes.

Below the opening, the site becomes an information-rich corporate directory. Products can be explored by product family or by the machine that carries them. News, industrial applications, recruitment, and contact information retain distinct roles. Broad outer margins and an additional left inset organize the desktop content. Mobile changes the composition substantially: the machine photograph moves above the headline, products occupy a horizontal rail, Topics become a vertical list, and the footer loses its desktop sitemap columns.

## How to Read This Reference

- **Measured** means a value appears in the supplied rendered DOM, element rectangle, or computed-style export. Measurements are CSS pixels unless stated otherwise.
- **Declared** means a custom property exists in the original-page evidence. Its presence alone does not prove that a particular visible component uses it.
- **Estimated** means a proportion or appearance was read from the current-page screenshots. Estimated hexadecimal colors are practical approximations, not pixel samples.
- **Derived** means arithmetic applied to measured values, such as the gap between adjacent cards.
- **Recommended** means implementation guidance for a new site. The CSS and prompts below are adaptations, not recovered source code.
- Some extracted elements belong to closed menus, duplicated rails, or hidden text. A DOM rectangle or text entry does not establish visibility, interactivity, or accessibility.
- Visual evidence takes precedence when a parent element's computed color differs from the appearance of its nested text or artwork.

## Tokens — Colors

### Default Palette

| Name | Value | Source or implementation token | Role and evidence |
| --- | --- | --- | --- |
| Kawatatec Navy | `#002f7c` | Source `--c-kawatatec-blue2`; alias `--brand` | Measured on major section headings, blue action surfaces, machine-category links, and footer text. The principal structural color. |
| Kawatatec Blue | `#005aaf` | Source `--c-kawatatec-blue1`; alias `--brand-secondary` | Declared companion blue. Its exact assignment to a visible component was not established by the sampled elements. |
| Contact Sky | `#1494f6` | Alias `--contact` | Measured desktop header contact-button background: `rgb(20, 148, 246)`. |
| Link Blue | `#0078ea` | Source `--c-linkcolor-blue`; alias `--link` | Declared link-related color. Individual hover outcomes were not captured. |
| Header Hover Blue | `#9ad3ff` | Source `--c-header-hover` | Declared header-hover token. Its use is suggested by its name; a hovered screenshot was not supplied. |
| Brand Red | `#e5002d` | Source `--c-kawatatec-red`; alias `--brand-red` | Declared brand accent, visually corresponding to the small red stroke in the wordmark. |
| White | `#ffffff` | Source `--c-white`; alias `--paper` | Reversed navigation and hero text, white content surfaces, news rows, and inverse actions. |
| Body Gray | `#333333` | Source `--c-font-color`; alias `--text` | Measured on body copy and article titles. |
| Rule Gray | `#dddddd` | Source `--c-line-gray`; alias `--rule` | Declared divider color; useful for the restrained line system. Specific screenshot borders were not individually sampled. |
| Pale Canvas | Approximately `#f0f0f0` | Recommended alias `--soft` | Screenshot estimate for the footer and light neutral fields. Several sampled section elements themselves have transparent backgrounds. |
| Deep Hero Shade | Approximately `#082b63` | Recommended alias `--hero-shade` | Screenshot estimate for the darker angular hero field. Exact overlay construction is unknown. |
| Cookie Charcoal | Approximately `#202020` | Recommended alias `--cookie-bg` | Screenshot estimate for the fixed cookie-notice background. |

The palette is hierarchical. Navy carries identity, navigation, section titles, and substantial actions. Bright sky blue highlights the compact header contact entry. Red stays close to the logo. White and pale gray create the reading surfaces between photographic sections.

The header contact anchor reports an inherited gray text color, while its visible label is white. Several inverse actions similarly expose parent colors that do not describe their final nested label. Reproduce the visible contrast rather than applying the exported anchor color indiscriminately.

### Asset Accents

The promotional artwork introduces mint, yellow, bright blue, and photographic green. These colors belong to individual product announcements and recruitment graphics. They do not establish a multicolor interface system.

The supplied custom properties also include numerous generic content-editor gradients and shadow presets. Those declarations are not evidence that the current homepage uses those effects. The observed interface remains predominantly flat and blue.

## Tokens — Typography

### Japanese Interface and Body Copy

- **Measured family:** `'Noto Sans JP', sans-serif`.
- **Source token:** `--f-noto-sans-jp`.
- **Weights:** `400` for desktop body copy and news titles, `500` for navigation and selected explanatory copy, and `700` for section and product headings.
- **Character:** substantial, clear Japanese sans-serif type with generous paragraph leading and relatively compact navigation.
- **Tracking:** many measured text roles use `0.03em` or `0.04em`; product descriptions sometimes retain normal tracking.

### Latin Utility Typography

- **Measured family:** `'Schibsted Grotesk', sans-serif` on footer language links and social links.
- **Source token:** `--f-schibsted-grotesk`.
- **Measured utility treatment:** `15px`, weight `500`, `28.5px` line height, and `0.45px` tracking.
- The page also contains English section labels and product names. Their presence is verified, but their individual font-family measurements were not included. Using Schibsted Grotesk for those roles is a reasonable adaptation, not a measured assignment.

### Cookie Notice Typography

The mobile cookie text reports `Nunito, sans-serif`, `14px`, weight `700`, and `18px` line height. Its acceptance label uses `12px / 20px`, also bold. The exact font that rendered Japanese glyphs was not established; a computed family declaration does not prove that every glyph came from that family.

Treat the notice as separate utility styling. Its denser text and heavier weight should not become the default paragraph treatment for the corporate content.

### Wordmark and Hero Display

The wordmark is a supplied graphic, not ordinary text set in one of the measured interface families. Preserve its distinctive red diagonal and white or navy lettering.

The semantic `H1` has a measured `1 × 1px` rectangle. The large visible title is represented separately, with duplicated phrases in the text extraction. Its actual display-font size was not sampled. Do not mistake the hidden heading's `15.24px` desktop or `16px` mobile computed size for the visible headline scale, and do not reproduce the duplicated phrases as ordinary reading text.

### Type Scale

| Role | Desktop | Mobile | Weight and spacing | Evidence |
| --- | --- | --- | --- | --- |
| Body default | `15.2381px` | `16px` | `400`; normal inherited leading | Measured; individual paragraphs often override it |
| Desktop navigation | `15px / 18px` | Replaced by compact controls | `500`; `0.45px` tracking | Measured |
| Visible hero headline | Approximately `76–80px` | Approximately `36–38px` | Heavy sans-serif; two visual lines | Screenshot estimate; visible display element not sampled |
| Hero explanation | `17px / 30.6px` | `13px / 23.4px` | `500`; `0.04em` tracking | Measured |
| Products heading | `48px / 62.4px` | `24px / 31.2px` | `700`; desktop `0.04em`, mobile normal | Measured |
| Topics and latest-news headings | `40px / 52px` | `24px / 31.2px` | `700`; desktop `0.04em`, mobile normal | Measured |
| Product Japanese label | `14px / 19.6px` | `12px / 16.8px` | `700`; normal tracking | Measured |
| Product explanation | `15px / 27px` | `13px / 23.4px` | Desktop `400`, mobile `500` | Measured |
| Machine-finder heading | `26px / 31.2px` | `20px / 24px` | `700` | Measured |
| Topic title | `15px / 27px` | `13px / 23.4px` | `700`; `0.04em` tracking | Measured |
| Contributing-industries heading | `62px / 74.4px` | `36px / 46.8px` | `700` | Measured |
| Recruitment Japanese heading | `26.6667px / 32px` | `22px / 26.4px` | `700` | Measured |
| Latest-news article title | `15px / 24px` | `14px / 22.4px` | `400`; `0.04em` tracking | Measured |
| Footer company details | `15px / 24px` | `13px / 20.8px` | `500`; `0.03em` tracking | Measured |
| Footer contact explanation | `15px / 28.5px` | `12px / 22.8px` | `500`; `0.03em` tracking | Measured |
| Footer language and social links | `15px / 28.5px` | Same measured values | `500`; `0.03em` tracking | Measured |

The type hierarchy is intentionally uneven: a very large opening statement, substantial Japanese section titles, small bilingual product identifiers, and quiet explanations. Avoid making every section compete with the hero.

## Tokens — Spacing & Shapes

### Responsive Unit

The original page uses a very small root unit:

| Property | Desktop `1440 × 1000` | Mobile `390 × 844` |
| --- | --- | --- |
| Measured root font size | `0.952381px` | `1px` |
| Declared `--base-vw` | `1512` | `390` |
| Declared main header height | `60px` | `72rem`, resolving to `72px` |
| Declared desktop margin | `min(64px, 64rem)` | Not present in the supplied mobile custom-property set |
| Declared desktop grid columns | `24` | Not present in the supplied mobile custom-property set |

The root sizes are consistent with viewport width divided by the declared base width: `1440 / 1512 ≈ 0.952381`, and `390 / 390 = 1`. The complete source formula, caps, and breakpoint conditions were not supplied, so that relationship is an inference rather than recovered CSS.

At the measured desktop root, `64rem` resolves to approximately `60.95px`, matching the observed outer alignment near `x = 60.94px`. The site mixes scaled lengths with fixed pixel text and controls. Copying its numeric `rem` values into a conventional `16px` root would produce dramatically oversized elements.

### Spacing Scale

| Use | Measured or derived value | Application |
| --- | --- | --- |
| Mobile machine-link separation | `2px` | Dense six-item vertical finder |
| Small corner scale | Approximately `4px` | News rows and machine links |
| Desktop promotional gap | Approximately `7.61px` | Derived from adjacent anchor rectangles |
| Mobile promotional vertical gap | `8px` | Two-row promotional track |
| Mobile product-card gap | `16px` | Derived from `334px` position steps and `318px` card widths |
| Mobile content gutter | `20px` | Products, Topics, industry text, and latest news |
| Mobile header logo inset | `24px` | Separate header alignment |
| Mobile promotional horizontal gap | `25px` | Derived from `365px` column steps and `340px` banners |
| Mobile footer gutter | `30px` | Company information and contact paragraph |
| News-row inner padding | `24px 32px` | Retained at both inspected widths |
| Desktop navigation gap | `40px` | Derived between adjacent primary links |
| Desktop product and Topics column gap | Approximately `45.7px` | Derived from repeated card positions |
| Desktop outer content gutter | Approximately `60.94px` | Main heading and content boundary |
| Extra desktop card-grid inset | Approximately `170.47px` | Between the outer heading alignment and first product/Topics card |
| Footer top space | `200px` desktop; `80px` mobile | Measured from footer start to wordmark top |

### Border Radius

| Element | Value | Evidence |
| --- | --- | --- |
| Hero photographs and product/Topics anchor boxes | `0` | Rectangular appearance and measured anchor radii |
| Machine links | `3.80952px` desktop; `4px` mobile | Measured |
| Latest-news rows | `4px` | Measured |
| Standard large actions | `8px` | Measured |
| Scrolled desktop navigation shell | Approximately `8px` | Screenshot estimate |
| Header contact pill | `48px` declared radius on a `30px`-high anchor | Measured |
| Cookie acceptance pill | `150px` declared radius on a `30px`-high mobile button | Measured |

### Layout Measurements

| Element | Desktop | Mobile |
| --- | --- | --- |
| Document height | `7305.09px` | `6573.86px` |
| Hero section | `1440 × 865.69px` | `390 × 909.36px` |
| Initial header rectangle | `x 0, y 49, 1440 × 60px` | `x 0, y 0, 390 × 72px` |
| Header logo | `219 × 25px`, at `x 60.94, y 66.5` | `175 × 20px`, at `x 24, y 26` |
| Header contact link | `146.53 × 30px` | Not visible in the compact header |
| Search control | `30 × 30px` | Not visible in the compact header |
| Mobile menu button | Not the visible desktop navigation | `54 × 54px`, at `x 323, y 9` |
| Promotional tile | `323.81 × 171.42px` | `340 × 180px` |
| Product entry | `352.38px` wide, roughly `611–638px` high | `318 × 565.36px` at the sampled state |
| Topics entry | Approximately `352.08px` wide | `350px` wide |
| Machine-category link | Approximately `380 × 129.52px` | `350 × 56px` |
| Standard compact section action | Approximately `238 × 56px` | `250 × 56px` |
| Wide product-index action | `465.73 × 56px` | `250 × 56px` |
| Latest-news row | `1204.48 × 72px` | `350px` wide; `96.39px` or `118.78px` high |
| Footer wordmark | `271 × 33.67px` | `177 × 22px` |
| Cookie strip | Approximately `62px` high | Approximately `130px` high |

These are captured results, not universal fixed dimensions. Article wrapping, translated copy, image loading, and consent-state changes can alter the document height.

## Components

### Corporate Header

**Role:** persistent corporate identity, primary destinations, and utilities.

The opening desktop header is visually transparent over the hero. Its logo sits on the clear blue field at left, while five primary links run across the photography: `製品情報`, `貢献分野`, `会社案内`, `新着情報`, and `採用情報`. A sky-blue `お問い合わせ` pill follows, then a white search icon and an outlined `JP` language control.

The measured primary links use `15px / 18px`, weight `500`, with `40px` between adjacent links. The contact pill is `30px` high, with `30px` horizontal padding. The search occupies a `30px` square.

The scrolled desktop captures show a different shell: an opaque navy bar approximately `1272px` wide, positioned around `x 84, y 30`, with small rounded corners. The logo becomes visually smaller and the navigation is contained within the bar. This confirms a persistent scrolled presentation; its exact scroll threshold and appearance/disappearance rules were not tested.

On mobile, the header is a full-width navy strip, `72px` high. The white wordmark remains at left, followed by the language pill and a two-line menu icon at right. The icon occupies a larger `54px` button box. The desktop navigation, header contact pill, and search icon are absent from this visible compact state.

### Hero Photo Composition

**Role:** establish manufacturing scale, technical credibility, and the company's product specialization.

The desktop opening uses three distinct photographs:

1. A worker handling a part, approximately `511 × 313px`, beginning around `x 357, y 0`.
2. A large circular chuck, approximately `572 × 613px`, aligned to the upper-right corner.
3. Hands working beside a dial indicator, approximately `323 × 204px`, around `x 791, y 530`.

These photograph dimensions are screenshot estimates. Their rectangular edges overlap the blue composition rather than sitting inside rounded cards. The chuck is the dominant object; the two human-scale details establish process and care.

The white statement reads `大型旋盤チャックの` on its first visual line and `カワタテック` on its second. Supporting copy explains the development, manufacture, and sale of large chucks, index tables, and pallet changers. Its measured desktop text is `17px / 30.6px`, weight `500`, with `0.04em` tracking.

A darker diagonal field separates part of the headline area from the main navy. The geometry gives the industrial layout direction without introducing an additional illustration style.

On mobile, the large chuck photograph fills the width below the header. The headline begins near `y 318px`; the worker photograph moves below the title area, and the measurement image overlaps on the right. The explanatory text is `13px / 23.4px` and occupies three lines. This is a recomposed collage, not a scaled desktop canvas.

### Promotional Banner Rail

**Role:** provide immediate access to product announcements, recruitment, and the company journal.

Desktop shows four approximately `1.89:1` banner tiles across the available width. Their top is measured at `y 736.17px`. The rail extends about `41.9px` beyond the hero section's measured bottom, creating an overlap with the following pale content field.

Each banner is a linked graphic. The current opening capture includes a mint product promotion, a recruitment graphic, a journal story, and a yellow pallet-changer announcement. Their typography and colors belong to the supplied artwork.

The DOM contains repeated banner destinations and large offscreen positions, consistent with a looping rail. That evidence does not establish its speed, direction, hover pause, drag support, or library.

Mobile uses a two-row arrangement. Each tile measures `340 × 180px`; row positions are `y 613.36px` and `801.36px`. The measured vertical gap is `8px`, and adjacent columns advance by `365px`. The second row reaches about `72px` beyond the hero section's measured bottom. The visible screenshot shows only the top portion because the fixed cookie notice covers the lower viewport.

### Product Discovery Section

**Role:** explain product families before sending visitors to a catalog or detail page.

The desktop section starts with an outer-left heading, a paragraph, and a right-aligned product-index action. The six product families then form three columns and two rows. Their content starts near `x 231.41px`, considerably farther right than the heading at `x 60.94px`.

The logical product families are Independent Chuck, Scroll Chuck, Power Chuck, Large-Size Chuck Changing System, Touchdex, and Pallet Changer. Each linked entry combines an English name, a compact navy Japanese heading, a substantial upper visual area, and an explanatory paragraph below. The measured Japanese heading is inset approximately `22.84px` from the entry's left edge on desktop and `24px` on mobile.

The product area was measured through the DOM rather than shown in a dedicated visual capture. Exact product-image crops, internal decorative graphics, and image transition treatments are therefore unverified. Preserve the measured information hierarchy without inventing a particular product-render treatment.

Mobile places the entries in a horizontal rail: each is `318px` wide, with a `16px` gap. Repeated entries occur at offscreen positions. These are consistent with slider copies and should not be counted as additional product families. The sampled active entry begins around `x 41.55px`; that is a captured track position, not a universal centering rule.

### Machine-Based Finder

**Role:** offer an alternate discovery path for visitors who know their machine type.

The label is `搭載機械から探す`. Six links follow: horizontal lathe, vertical lathe, horizontal machining center, vertical machining center, five-axis machining center, and other machines.

Desktop uses a three-column, two-row arrangement. Each navy link is approximately `380 × 129.52px`, with a small `3.81px` radius and a measured internal flex gap of `12px`. The source export does not establish all of the link's visual children.

Mobile turns the same destinations into six compact rows, each `350 × 56px`, separated by `2px`. Horizontal padding becomes `16px`, while the corner radius becomes `4px`. A centered `250 × 56px` product-index button follows below.

### Topics Card

**Role:** highlight three editorial or product announcements with visual previews.

The desktop section is white. Its heading visually places the large Japanese `トピックス` beside the smaller English `Topics`; the DOM text order alone does not reproduce that arrangement. A navy `新着情報一覧を見る` action aligns to the right.

The cards share the same additional left inset as the product grid. Their anatomy is:

1. A wide preview image, approximately `352 × 176px` in the desktop screenshot.
2. One or two compact outlined category labels.
3. A bold dark-gray article title, `15px / 27px`, with `0.04em` tracking.

Cards have no visible enclosing border, shadow, or rounded surface. The blank white space around the central logo announcement is part of its preview composition. Do not enlarge or crop the logo merely to make all previews feel equally dense.

Mobile stacks all three entries at `350px` width with `20px` page gutters. Measured gaps between card rectangles are `34px`. Titles use `13px / 23.4px`, and the index action moves below the list.

### Contributing Industries Section

**Role:** connect products to industrial applications and company scale.

The visible beginning of this section places an aircraft-engine photograph on the left and wind turbines in a landscape on the right. A broad navy diagonal cuts between them. This repeats the hero's angular language at a larger sectional scale.

The DOM establishes a subsequent explanation and three company-stated figures: a maximum diameter of `3500 mm`, more than `500` variations, and exports to more than `25` countries. These are homepage claims, not independently verified statistics.

Desktop positions the explanatory block at the outer-left margin with a measured width of `522.55px`. The statistics region begins around `x 629.19px` and spans approximately `749.88px`. The white Japanese heading uses `62px / 74.4px` across two lines. The wide destination action is also `749.88px` wide and `56px` high.

On mobile, the heading is `36px / 46.8px` in a `350px`-wide box whose measured height corresponds to one line. The explanation follows, then the achievements area and a `350 × 56px` action. The complete statistics appearance was not visually captured; number-font sizes and any count-up behavior remain unknown.

### Recruitment Entry

**Role:** make employment information a distinct corporate destination.

The homepage contains a dedicated recruitment section with `Recruitment Guide`, `採用情報`, and the statement `課題 かける 挑戦 かける 学び イコール 成長`. A white `採用情報を見る` action links to the recruitment site area.

Measured section heights are `556.16px` desktop and `623.78px` mobile. The desktop action is `361.89 × 56px`, positioned toward the right; mobile uses a centered `250 × 56px` action. The Japanese heading changes from approximately `26.67px` to `22px`.

The recruitment promotional banner provides visible workforce imagery, but the dedicated section's full artwork and background composition were not shown in the supplied visual captures. Do not assign that section a specific photograph or animation from the banner alone.

### Latest-News Row

**Role:** present a chronological, text-led stream separate from the image-led Topics section.

Five dated entries appear in the DOM. Desktop rows are white surfaces with a `4px` radius, `24px 32px` padding, and a two-column grid. The first column is `220px`; the second measured `896.48px`; the gap is `24px`. The row is `72px` high for the supplied one-line titles.

The left region holds date and category information. The right region contains a regular-weight `15px / 24px` title. Rows are separated by approximately `7.61px`.

Mobile changes each row to a vertical flex layout with an `8px` internal gap. Date/category metadata sits above the title. Padding remains `24px 32px`, leaving `286px` of inner width. Titles use `14px / 22.4px`; one-line rows measure `96.39px` high and two-line rows `118.78px`.

The section's index action is white on the pale surrounding field. In the mobile footer capture, it appears centered above the company information.

### Corporate Footer

**Role:** close the page with company identity, contact access, language selection, and the desktop site directory.

The desktop footer is a broad pale-gray field. The left column begins near `x 117.75px`, the product directory near `x 686.02px`, and general site links near `x 1128.89px`. Product subgroups use fine vertical separators and indented links. The visual hierarchy comes from spacing and grouping rather than card surfaces.

The original footer identifies the operator as `株式会社カワタテック`, with its address and telephone number. The brand graphic is navy with the red accent. A short contact explanation precedes a navy `お問い合わせはこちら` button. Language links sit toward the lower right; the selected `Japanese` link has a fine underline. Social links and the copyright line occupy the bottom region.

The mobile footer removes the large product and corporate sitemap columns from its rendered footer content. It retains the wordmark, company details, contact paragraph, centered action, language links, social links, and copyright text. Company information uses a `30px` gutter, while the main contact action is `250px` wide.

The fixed cookie notice covers the social/copyright area in the supplied mobile footer capture. Their existence is supported by the DOM, not by unobscured visibility in that screenshot.

### Cookie Notice

**Role:** present the current consent message and its visible controls.

A fixed charcoal strip spans the viewport bottom. Desktop lays out its sentence and acceptance pill horizontally, occupying approximately `62px` of height. Mobile stacks the message and left-aligned action, increasing the strip to approximately `130px`.

The mobile message uses `14px / 18px` bold text. Its underlined `こちら` control is a button in the supplied DOM. The `同意する` button is navy, `88 × 30px`, with `12px` bold text and a pill radius. The desktop acceptance control appears approximately `116 × 36px` in the screenshot.

The controls were not activated. Consent persistence, the details panel, dismissal behavior, and focus handling are unverified.

### Closed Menu and Search Structures

The DOM includes mobile menu content with product groups and `+` indicators, along with language destinations and search-related controls. Those entries help establish information architecture, but their open visual states were not captured. Do not infer a slide direction, modal treatment, accordion animation, or search-results design from their presence.

## Tokens — Motion & Interaction

| Treatment | Measured declaration or evidence | What can be concluded |
| --- | --- | --- |
| Header transform and opacity | `0.4s cubic-bezier(0.19, 1, 0.22, 1)` | A short eased header transition is defined; the scrolled shell is visible in later captures |
| Desktop navigation color | `0.4s cubic-bezier(0.19, 1, 0.22, 1)` | Color transitions are defined; actual hover colors were not exercised |
| Header contact background | `0.4s cubic-bezier(0.19, 1, 0.22, 1)` | Background-color feedback is defined |
| Desktop main actions | Color and background-color with the same `0.4s` easing | Consistent eased action feedback is defined |
| Desktop Topics and news links | Color with the same `0.4s` easing | Text-color feedback is defined |
| Hero explanation reveal | Desktop `clip-path 0.9s`; mobile `clip-path 1.2s`; both `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | A clipping transition is defined; its initial shape, trigger, and sequencing are unknown |
| Promotional rail | Repeated destinations and horizontally displaced rectangles; two rows on mobile | Consistent with a looping track; timing and input support are unverified |
| Mobile product rail | Repeated entries at `334px` horizontal intervals | Establishes rail geometry and duplicated entries, not autoplay or swipe behavior |
| Cookie details control | `0.2s` transition | A transition duration exists; affected properties and visible outcome were not verified |
| Cookie acceptance control | `0.3s` transition | A transition duration exists; dismissal was not tested |

Many mobile elements report only `transition: all` in the export. Without a nonzero duration, that is not evidence of an animated effect. Likewise, `animation: none` on a sampled link does not rule out movement applied to its parent or by script.

The custom-property set contains multiple spring curves, but no supplied component measurement establishes that they drive a visible homepage effect. The strongest reusable motion evidence is the `400ms` ease-out family and the slower hero-copy clipping transition.

For a new implementation, keep utility feedback restrained. If using automatic rails, add a visible pause mechanism and a reduced-motion alternative. These are recommendations, not verified original behavior.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Hero base | Saturated navy with a darker angular field | Brand identity and separation beneath white text |
| Hero photographs | Large rectangular crops with cool tonal treatment | Product scale and human manufacturing detail |
| Opening desktop navigation | Transparent over the composition | Keeps the opening visually continuous |
| Scrolled desktop navigation | Solid navy, small rounded corners | Preserves navigation contrast over later sections |
| Topics | White with unboxed linked previews | Clear editorial browsing |
| Neutral content fields | Pale gray with occasional subtle angular geometry visible at section edges | Separates large content groups without elevation |
| Product and machine actions | Solid navy with reversed labels | Strong, consistent destination affordances |
| Latest-news entries | White rows with `4px` corners | Compact chronological reading |
| Footer | Pale gray with navy typography and fine rules | Dense corporate information and contact access |
| Cookie notice | Charcoal with white text and a navy pill | Independent fixed utility layer |

There is no visible general-purpose shadow system. Use color boundaries, photograph edges, modest corner radii, and spacing to distinguish components. The partially visible lower-right verification widget is ancillary page chrome, not a primary design motif.

## Imagery

The strongest images are specific to manufacturing: a large chuck with visible jaws and machined surfaces, a worker in blue clothing, and a close-up measurement operation. They communicate precision through physical evidence. Keep metal texture, fasteners, machining marks, and hands legible.

The hero photographs have a cool blue cast. The evidence does not reveal whether that treatment is embedded in the assets, applied through an overlay, or produced with CSS filtering. Prepare a consistent tonal result and avoid stacking multiple blue treatments by default.

The composition depends on differences in scale. A dominant machine image establishes the product, a medium worker image supplies human context, and a small process detail creates a closer view. Giving all three equal dimensions would weaken that hierarchy.

Industry imagery expands the context to an aircraft engine and wind generation. The navy diagonal remains the connecting graphic. Promotional banners are a separate image class: they already contain text, product cutouts, and campaign colors. Preserve those complete compositions and provide accessible link names independently of their embedded lettering.

### Observed Asset References

No original image-file URLs or filenames were supplied in the evidence. The following are identified visual roles and original-page link destinations, not downloadable asset paths.

| Visual role | Original-page evidence | Usage guidance |
| --- | --- | --- |
| White and navy wordmarks | Homepage header, footer, and central Topics preview | Use approved brand artwork; do not reconstruct it as ordinary text |
| Worker, chuck, and measurement photographs | Current desktop and mobile hero captures | Preserve their distinct scales and mobile rearrangement |
| TM/TI product promotion | Linked banner destination `/products/tm` | Keep the supplied graphic's embedded typography and mint field |
| Pallet-changer promotion | Linked banner destination `/products/pallet-changer_for_robodrill` | Preserve its product image, yellow field, and model information |
| Recruitment and journal banners | Linked destinations `/recruit` and `/recruit/journal` | Treat as campaign artwork, separate from interface typography |
| Topics previews | Homepage links to product-release, website-renewal, and exhibition articles | Maintain approximately `2:1` preview frames and differing image density |
| Aircraft engine and wind turbines | Visible start of the contributing-industries section | Connect the images with the broad navy diagonal |

These destination pages were not opened during this analysis. Product-card image details outside the supplied visual captures remain unverified.

## Layout & Responsive Behavior

The desktop design has two related horizontal systems. Major headings and the hero identity align near a `61px` outer gutter. Product and Topics cards start around `231px`, leaving an additional `170px` of negative space on the left. The news and footer use a somewhat narrower centered region beginning near `118px`.

This asymmetry is a defining trait. A conventional centered three-card grid directly beneath every heading would lose the source's broad left-side breathing room.

| Region | Desktop observation | Mobile observation |
| --- | --- | --- |
| Navigation | Transparent opening header; contained navy shell after scrolling | Persistent full-width `72px` navy header with language and menu controls |
| Hero | Worker above left-side copy; dominant chuck at upper right; smaller measurement image | Chuck above the title; worker and measurement images repositioned below and beside copy |
| Promotional content | Four visible banners in one horizontal row | Two rows of large banners inside a horizontally displaced track |
| Product families | Three columns, two logical rows | Horizontal rail with `318px` entries and repeated copies |
| Machine finder | Three columns, two rows of tall links | Six compact full-width rows |
| Topics | Three columns with an extra left inset | Three vertically stacked entries |
| Industry explanation | Left text block and right achievements region | Vertically reorganized content in `350px` available width |
| Recruitment action | Toward the right of its section | Centered `250px` action |
| Latest news | Metadata and title side by side | Metadata above title; variable row height |
| Footer | Company block, product directory, general links | Company/contact block and utility links; large sitemap columns omitted |
| Cookie notice | Horizontal sentence and action | Stacked text and action; substantially more viewport coverage |

### Measured Section Extents

| Section | Desktop height | Mobile height |
| --- | --- | --- |
| Hero | `865.69px` | `909.36px` |
| Products | `2437.52px` | `1512.70px` |
| Topics | `541.69px` | `1113.34px` |
| Contributing industries | `1090.17px` | `975.69px` |
| Recruitment | `556.16px` | `623.78px` |
| Latest news | `620.14px` | `820.91px` |
| Footer | `1193.73px` | `618.08px` |

Mobile is not uniformly taller: the horizontal product rail and simplified footer save substantial vertical space, while stacked Topics and news entries become taller. These extents describe the captured content and layout; they should not be hardcoded as section heights.

No intermediate viewport was supplied. The actual breakpoint, tablet layout, maximum desktop width, orientation handling, and safe-area rules remain unverified. The Quick Start uses a recommended breakpoint and explicit assumptions rather than presenting them as source behavior.

## Do’s and Don’ts

### Do

- Use `#002f7c` as the principal structural color, with white text on large navy fields.
- Preserve the small red brand accent and the sky-blue header contact pill as distinct roles.
- Build the opening from three manufacturing photographs with unequal scale and deliberate overlap.
- Keep the large Japanese statement separate from the quieter explanatory paragraph.
- Preserve the extra desktop inset for product and Topics grids.
- Support product discovery by both product family and machine type.
- Retain the difference between unboxed Topics previews and white latest-news rows.
- Recompose the hero for mobile and retain the measured horizontal product presentation.
- Keep the desktop sitemap detailed while giving mobile contact information more prominence.
- Separate exact computed measurements from screenshot estimates and implementation recommendations.

### Don’t

- Don't reduce the homepage to one conversion path; it serves products, company information, news, recruitment, and contact needs.
- Don't make every photograph a rounded card or add a general shadow system.
- Don't distribute promotional yellow and mint throughout the navigation or normal article UI.
- Don't copy the source's tiny-root `rem` numbers into a conventional root unchanged.
- Don't use the hidden `H1` measurement as the visible headline size.
- Don't treat duplicated rail entries as additional products or extra editorial content.
- Don't assume that declared spring curves, gradients, or editor presets are visible design features.
- Don't invent carousel timing, menu animation, search behavior, or statistics counting.
- Don't infer the dedicated recruitment section's artwork from its promotional banner.
- Don't let fixed utility layers make the final footer links permanently unreachable in a new implementation.

## Recommended Implementation Additions

These are additions for a new implementation, not verified features of the original homepage:

- Keep one meaningful accessible headline. Mark any duplicate visual layers used for animation as decorative.
- Give the search, menu, language, and graphic-only promotional links explicit accessible names. The supplied text extraction is insufficient to assess their current accessible names.
- For menu controls, expose expanded state and connect each control to its actual panel. Keep closed panels and carousel copies out of the keyboard order.
- Provide keyboard-accessible rail navigation. If a rail moves automatically, offer pause controls and stop automatic movement for reduced-motion users.
- Reserve bottom space equal to the cookie notice's actual rendered height. The mobile capture demonstrates that the notice can obscure footer utilities.
- Preserve text visibility during animation setup and script failure. A clipping reveal should not leave essential copy permanently concealed.
- Consider slightly larger mobile long-form text while retaining the hierarchy; several measured explanatory roles are only `12–13px`.
- Give white hero text a reliable blue backing where it crosses detailed photography, especially in the mobile collage.
- Supply responsive image sizes and explicit intrinsic dimensions. Prioritize the main chuck image and defer lower-page images where appropriate.
- Verify contrast on the bright-blue contact pill and retain clear keyboard focus on both white and navy surfaces.

## Agent Prompt Guide

### Quick Color Reference

- Main navy: `#002f7c`.
- Declared companion blue: `#005aaf`.
- Header contact accent: `#1494f6`.
- Small brand accent: `#e5002d`.
- Body text: `#333333`.
- White surfaces and reversed text: `#ffffff`.
- Pale neutral surface approximation: `#f0f0f0`.
- Cookie utility background approximation: `#202020`.
- Prefer flat fills and sharp photograph edges; use `4px` and `8px` radii for functional surfaces.

### Overall Prompt

“Create a Japanese industrial corporate homepage inspired by the current Kawatatec composition. Use deep navy `#002f7c`, white, pale gray, and a restrained red brand accent. Build a rectangular three-photo hero showing a large lathe chuck, a worker, and precision measurement. Use an oversized white Japanese statement, smaller explanatory text, and a darker diagonal field. Below it, include a promotional banner rail, six product families, an alternate machine-type finder, three Topics previews, an industry section, recruitment, chronological news, and a corporate contact footer. Use Noto Sans JP for Japanese UI and Schibsted Grotesk for Latin utility labels. On desktop, offset product and Topics grids farther right than the section headings. On mobile, recompose the hero, use a horizontal product rail, stack Topics and news, and simplify the footer. Keep motion restrained and make all behavior explicit rather than assuming it from the reference.”

### Example Component Prompts

1. **Header:** “Design a white wordmark and Japanese navigation over a navy industrial hero. Include a compact sky-blue contact pill, white search icon, and outlined language pill. Provide a contained navy scrolled state with `8px` corners. At mobile width, use a full-width `72px` navy header with a `175px` wordmark and a `54px` menu-button target.”
2. **Hero:** “Arrange one dominant circular-chuck photograph at upper right, one medium worker photograph above the left-side headline, and one smaller measurement photograph overlapping below. Use large white Japanese copy and a darker navy diagonal. Reposition the photographs for a `390px` phone layout instead of shrinking the desktop composition.”
3. **Product discovery:** “Create six product entries in a three-column desktop grid with an additional left inset. Each entry combines an English category name, a compact bold navy Japanese label, a generous visual region, and a `15px / 27px` explanation. On mobile, provide `318px` rail entries with `16px` gaps and accessible manual navigation.”
4. **Topics:** “Create three unboxed article previews on white, each with a roughly `2:1` image, small outlined category labels, and a bold dark-gray title. Keep about `46px` between desktop columns and preserve the extra left inset. Stack the entries within `20px` mobile gutters and move the index button below.”
5. **News row:** “Build a white `4px`-radius news row with `24px 32px` padding. On desktop, use a `220px` metadata column, a `24px` gap, and a flexible title. On mobile, stack metadata above a `14px / 22.4px` title with an `8px` gap and allow the row to grow with wrapping.”
6. **Footer:** “Build a pale-gray corporate footer with navy text, a brand graphic, company details, contact copy, and a navy action. Add grouped product links and general links on desktop. On mobile, retain company/contact information and centered language links, with enough bottom clearance for a visible cookie notice.”

## Quick Start

### CSS Custom Properties

This is a practical adaptation of the measured proportions. It keeps a conventional root font size and uses `--u` only for selected desktop geometry. The `1024px` breakpoint, desktop scaling cap, estimated neutral colors, and manual scroll-snap rails are recommendations. They are not recovered source rules.

The class structure assumes a header containing a logo, desktop navigation, and utility controls; a hero with three positioned image wrappers and a text block; and ordinary semantic links for cards and actions. An `.is-scrolled` class represents the alternate header state. Menu logic, consent storage, image loading, and any automatic rail behavior require separate implementation.

```css
:root {
  /* Measured and declared brand colors */
  --brand: #002f7c;
  --brand-secondary: #005aaf;
  --contact: #1494f6;
  --link: #0078ea;
  --header-hover: #9ad3ff;
  --brand-red: #e5002d;
  --paper: #ffffff;
  --text: #333333;
  --rule: #dddddd;

  /* Screenshot approximations */
  --soft: #f0f0f0;
  --hero-shade: #082b63;
  --cookie-bg: #202020;

  /* Supply approved font files separately */
  --font-jp: 'Noto Sans JP', sans-serif;
  --font-latin: 'Schibsted Grotesk', sans-serif;
  --font-cookie: Nunito, sans-serif;

  /* Recommended scaling model fitted to the desktop capture */
  --u: min(1px, calc(100vw / 1512));
  --gutter: calc(64 * var(--u));
  --column-gap: calc(48 * var(--u));
  --offset-ratio: 12.93%;
  --radius-small: 4px;
  --radius-action: 8px;
  --header-height: 60px;
  --cookie-reserve: 62px;
  --focus-color: var(--link);

  /* Measured easing and transition durations */
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-reveal: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --motion-ui: 400ms var(--ease-out);
  --motion-reveal: 900ms var(--ease-reveal);
}

* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  color: var(--text);
  background: var(--paper);
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 1.8;
}
img { display: block; max-width: 100%; }
button, input { font: inherit; }
a { color: inherit; }
button { cursor: pointer; }

.container { margin-inline: var(--gutter); }
.narrow-container { width: 83.65%; margin-inline: auto; }
.offset-content { margin-inline-start: var(--offset-ratio); }
.section { padding-block: 88px; }
.section--soft { background: var(--soft); }
.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 20px;
  color: var(--brand);
}
.section-heading h2 {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
}
.section-heading .en {
  font-family: var(--font-latin);
  font-size: 24px;
  font-weight: 700;
}
.section-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
}

/* The scrolled class is controlled by the new implementation */
.site-header {
  position: fixed;
  z-index: 205;
  top: 49px;
  inset-inline: var(--gutter);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--paper);
  --focus-color: var(--paper);
  transition: transform var(--motion-ui), opacity var(--motion-ui);
}
.site-header.is-scrolled {
  top: 30px;
  inset-inline: 5.8333%;
  padding-inline: 38px;
  border-radius: 8px;
  background: var(--brand);
}
.site-logo { flex: 0 0 auto; width: 219px; }
.site-header.is-scrolled .site-logo { width: 190px; }
.desktop-nav, .header-actions {
  display: flex;
  align-items: center;
}
.desktop-nav { gap: 40px; margin-inline-start: auto; }
.desktop-nav a {
  color: var(--paper);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: color var(--motion-ui);
}
.header-actions { gap: 20px; margin-inline-start: 36px; }
.header-contact {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding-inline: 30px;
  border-radius: 48px;
  color: var(--paper);
  background: var(--contact);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--motion-ui);
}
.language-control {
  min-width: 64px;
  min-height: 30px;
  padding: 2px 12px;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 999px;
  color: inherit;
  background: transparent;
  font-size: 14px;
}
.icon-button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
}
.mobile-menu-button { display: none; }

/* Photograph coordinates approximate the supplied desktop image */
.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(909 * var(--u));
  color: var(--paper);
  background: var(--brand);
  --focus-color: var(--paper);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 36% 0 0 27%;
  background: var(--hero-shade);
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 0 100%);
}
.hero-photo { position: absolute; z-index: 1; margin: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo--worker { left: 24.8%; top: 0; width: 35.5%; height: 36.15%; }
.hero-photo--chuck { right: 0; top: 0; width: 39.72%; height: 70.8%; }
.hero-photo--measurement { left: 54.93%; top: 61.22%; width: 22.43%; height: 23.56%; }
.hero-copy {
  position: absolute;
  z-index: 3;
  top: 47.6%;
  left: var(--gutter);
  max-width: 760px;
}
.hero-copy h1 {
  margin: 0;
  font-size: min(80px, calc(84 * var(--u)));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.hero-line { display: block; }
.hero-copy p {
  max-width: 650px;
  margin: 16px 0 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

/* Manual rails are the recommended baseline, not claimed source behavior */
.promo-rail {
  position: absolute;
  z-index: 4;
  top: calc(773 * var(--u));
  inset-inline: var(--gutter);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 24 * var(--u)) / 4);
  gap: calc(8 * var(--u));
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.promo-card { display: block; aspect-ratio: 17 / 9; scroll-snap-align: start; }
.promo-card img { width: 100%; height: 100%; object-fit: contain; }
.products { padding-top: calc(250 * var(--u)); }
.products .section-heading h2 { font-size: 48px; }
.product-grid, .topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px var(--column-gap);
}
.product-card, .topic-card {
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}
.product-visual {
  padding: 24px;
  color: var(--brand);
}
.product-name-en {
  margin: 0;
  font-family: var(--font-latin);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
}
.product-name-jp { margin: 12px 0 0; font-size: 14px; line-height: 1.4; }
.product-visual img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  margin-top: 24px;
}
.product-description { margin: 24px 0 0; font-size: 15px; line-height: 1.8; }
.topic-card img { width: 100%; aspect-ratio: 2 / 1; object-fit: contain; }
.topic-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 16px; }
.topic-tag { border: 1px solid var(--rule); padding: 2px 7px; font-size: 11px; }
.topic-card h3 {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.machine-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.machine-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: calc(136 * var(--u));
  padding: 16px;
  border-radius: 4px;
  color: var(--paper);
  background: var(--brand);
  text-decoration: none;
  transition: background-color var(--motion-ui);
}
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, calc(250 * var(--u)));
  min-height: 56px;
  padding: 14px 36px;
  border: 0;
  border-radius: 8px;
  color: var(--paper);
  background: var(--brand);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition: color var(--motion-ui), background-color var(--motion-ui);
}
.cta::after {
  content: '';
  position: absolute;
  right: 12px;
  border-block: 3px solid transparent;
  border-left: 4px solid currentColor;
}
.cta--inverse { color: var(--brand); background: var(--paper); }
.cta--wide { width: min(100%, calc(489 * var(--u))); }
.section-action { margin-top: 40px; text-align: center; }

.news-list { display: grid; gap: 8px; }
.news-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  padding: 24px 32px;
  border-radius: 4px;
  background: var(--paper);
  color: var(--text);
  text-decoration: none;
  transition: color var(--motion-ui);
}
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.news-title { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.6; letter-spacing: 0.04em; }

.site-footer { padding-block: 200px 56px; color: var(--brand); background: var(--soft); }
.footer-grid { display: grid; grid-template-columns: 41% 31% 16%; gap: 6%; }
.footer-logo { width: 271px; }
.footer-company { margin-top: 12px; font-size: 15px; font-weight: 500; line-height: 1.6; }
.footer-contact-copy { max-width: 309px; margin-block: 48px; font-size: 15px; font-weight: 500; line-height: 1.9; }
.footer-group { margin-bottom: 32px; padding-left: 24px; border-left: 1px solid var(--rule); }
.footer-group a { display: block; padding-block: 6px; text-decoration: none; }
.footer-languages, .footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  font-family: var(--font-latin);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.03em;
}
.footer-languages a { text-decoration: none; padding-bottom: 5px; }
.footer-languages [aria-current='page'] { border-bottom: 1px solid currentColor; }

/* Recommended clearance; update the reserve when notice height changes */
body.has-cookie-notice { padding-bottom: var(--cookie-reserve); }
.cookie-notice {
  position: fixed;
  z-index: 300;
  inset-inline: 0;
  bottom: 0;
  padding: 13px 20px;
  color: var(--paper);
  background: var(--cookie-bg);
  font-family: var(--font-cookie);
  --focus-color: var(--paper);
}
.cookie-notice[hidden] { display: none; }
.cookie-inner { max-width: 1030px; margin-inline: auto; display: flex; align-items: center; gap: 40px; }
.cookie-notice p { margin: 0; font-size: 14px; font-weight: 700; line-height: 18px; }
.cookie-accept {
  flex: 0 0 auto;
  width: 116px;
  min-height: 36px;
  padding: 5px 20px;
  border: 0;
  border-radius: 150px;
  color: var(--paper);
  background: var(--brand);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
}

/* Recommended hover destinations; the original outcomes were not exercised */
@media (hover: hover) {
  .desktop-nav a:hover { color: var(--header-hover); }
  .header-contact:hover { background: var(--link); }
  .cta:hover, .machine-link:hover { background: var(--brand-secondary); color: var(--paper); }
  .topic-card:hover, .news-row:hover { color: var(--link); }
}
:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 4px; }

/* Recommended breakpoint; only 1440px and 390px were inspected */
@media (max-width: 64rem) {
  :root { --u: 1px; --gutter: 20px; --cookie-reserve: 130px; --motion-reveal: 1200ms var(--ease-reveal); }
  .narrow-container { width: calc(100% - 40px); }
  .offset-content { margin-inline-start: 0; }
  .section { padding-block: 64px; }
  .section-top { align-items: start; flex-direction: column; gap: 24px; margin-bottom: 32px; }
  .section-heading { gap: 12px; }
  .section-heading h2, .products .section-heading h2 { font-size: 24px; letter-spacing: normal; }
  .section-heading .en { font-size: 18px; }
  .site-header, .site-header.is-scrolled {
    top: 0;
    inset-inline: 0;
    height: 72px;
    padding: 0 13px 0 24px;
    border-radius: 0;
    background: var(--brand);
  }
  .site-logo, .site-header.is-scrolled .site-logo { width: 175px; }
  .desktop-nav, .header-contact, .search-button { display: none; }
  .header-actions { gap: 8px; margin-inline-start: auto; }
  .mobile-menu-button { display: grid; width: 54px; height: 54px; }
  .hero { min-height: 909px; }
  .hero-photo--chuck { top: 72px; left: 0; width: 100%; height: 265px; }
  .hero-photo--worker { top: 506px; left: 0; width: 72.8%; height: 154px; }
  .hero-photo--measurement { top: 454px; left: 50%; width: 50%; height: 120px; }
  .hero-copy { top: 313px; left: 18px; right: 18px; }
  .hero-copy h1 { font-size: clamp(30px, 9.74vw, 38px); line-height: 1.25; letter-spacing: 0; }
  .hero-copy p { margin-top: 8px; max-width: 350px; font-size: 13px; line-height: 1.8; }
  .promo-rail {
    top: 613px;
    inset-inline: 25px;
    grid-template-rows: repeat(2, 180px);
    grid-auto-columns: 340px;
    column-gap: 25px;
    row-gap: 8px;
  }
  .products { padding-top: 180px; }
  .product-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(318px, calc(100vw - 72px));
    gap: 16px;
    overflow-x: auto;
    padding: 4px;
    scroll-snap-type: x proximity;
  }
  .product-card { scroll-snap-align: center; }
  .product-name-jp { font-size: 12px; }
  .product-description { font-size: 13px; font-weight: 500; }
  .topic-grid { grid-template-columns: 1fr; gap: 34px; }
  .topic-card h3 { font-size: 13px; }
  .machine-grid { grid-template-columns: 1fr; gap: 2px; }
  .machine-link { min-height: 56px; padding: 0 16px; }
  .cta, .cta--wide { width: min(100%, 250px); }
  .news-row { display: flex; flex-direction: column; gap: 8px; }
  .news-title { font-size: 14px; }
  .site-footer { padding-top: 80px; }
  .footer-grid { display: block; }
  .footer-contact { padding-inline: 10px; }
  .footer-logo { width: 177px; }
  .footer-company { font-size: 13px; }
  .footer-contact-copy { max-width: none; margin-block: 32px; font-size: 12px; }
  .footer-contact .cta { display: flex; margin-inline: auto; }
  .footer-sitemap, .footer-directory { display: none; }
  .footer-languages { justify-content: center; margin-top: 32px; }
  .footer-social { gap: 24px; margin-top: 64px; }
  .cookie-notice { padding: 16px 19px 18px; }
  .cookie-inner { display: block; }
  .cookie-accept { width: 88px; min-height: 30px; margin-top: 13px; }
}

/* Recommended accessibility behavior */
@media (prefers-reduced-motion: reduce) {
  .site-header, .desktop-nav a, .header-contact,
  .cta, .machine-link, .topic-card, .news-row {
    transition: none;
  }
  .promo-rail, .product-grid { scroll-behavior: auto; }
}
```

The product-image sizing and English product-name scale in this starter are recommendations because those internal visual details were not measured. The hero uses a single visible semantic heading rather than reproducing the source's hidden-heading and duplicate-display arrangement. Long or translated copy should trigger a flow-based layout adjustment instead of being forced into the photographed hero coordinates.

Keep the six logical product entries in the content model. If adding looping behavior, generate visual copies separately and prevent them from becoming duplicate keyboard stops or duplicate accessible content. Update `--cookie-reserve` from the actual notice height, and remove the body state when the notice is hidden.

### Tailwind v4 Token Mapping

Optional mapping for a project that already uses Tailwind v4. Define the custom properties above first. This does not identify the original site's implementation framework.

```css
@theme inline {
  --color-kawatatec: var(--brand);
  --color-kawatatec-secondary: var(--brand-secondary);
  --color-contact: var(--contact);
  --color-brand-red: var(--brand-red);
  --color-paper: var(--paper);
  --color-soft: var(--soft);
  --color-body: var(--text);
  --color-rule: var(--rule);

  --font-sans: var(--font-jp);
  --font-latin: var(--font-latin);

  --spacing-page: var(--gutter);
  --spacing-column: var(--column-gap);
  --radius-card: 4px;
  --radius-action: 8px;

  --text-section: 40px;
  --text-section--line-height: 1.3;
  --text-body-copy: 15px;
  --text-body-copy--line-height: 1.8;
  --text-mobile-copy: 13px;
  --text-mobile-copy--line-height: 1.8;
}
```

## Sources & Evidence

- **Inspected original and final page:** [https://kawatatec.co.jp/](https://kawatatec.co.jp/). Both supplied URLs are identical, and the browser record reports HTTP `200`.
- **Capture record:** `2026-09-12T14:59:53.621Z`; desktop `1440 × 1000` and mobile `390 × 844` CSS pixels.
- **Visual evidence:** three current-page desktop captures and two current-page mobile captures. They establish the opening compositions, visible header states, Topics presentation, beginning of the industry imagery, footer presentation, and cookie-notice coverage.
- **Rendered evidence:** supplied element rectangles, text, links, computed typography, backgrounds, radii, transitions, and custom properties. These establish the measured section geometry and responsive changes beyond the visible screenshots.
- **Original-page identity evidence:** the homepage footer names `株式会社カワタテック` and supplies company contact details. No production credit was established by the inspected homepage evidence.
- **Observed state coverage:** initial loading/readiness and traversal to later scroll positions. No supplied record establishes activation of the menu, search, language dropdown, cookie controls, product rail controls, or destination links.
- **Inspection limitations:** the browser process waited for loading, image decoding, and sampled layout stability within finite limits. Perpetual animations were temporarily paused during readiness checks and resumed. SharedWorkers and service workers were disabled. These measures do not prove that delayed content or all interactive states were inspected.
- **Implementation limitations:** no commands, external browsing, asset retrieval, or runtime testing were performed for this reference. CSS approximations, recommended breakpoints, accessibility additions, and reusable prompts are clearly separated from original-page measurements.

This reference describes the current corporate homepage represented by the supplied evidence. It does not reconstruct an earlier version or claim that unexercised interactions have been verified.