# KOSOKU / 光束工業 — Style Reference

> Expansive white space, emphatic red typography, and the material texture of metal manufacturing.

**Website:** [cosok.co.jp](https://cosok.co.jp/)
**Original URL:** https://cosok.co.jp/
**Final URL:** https://cosok.co.jp/
**Theme:** predominantly white, with a pale gray Strength section and charcoal Product and Contact sections; no theme selector was evidenced.
**Inspected:** October 2, 2026, at 01:08:59 JST, corresponding to the supplied retrieval timestamp of October 1, 2026, at 16:08:59.563 UTC.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current corporate homepage, using three desktop captures, two mobile captures, and rendered DOM/computed-style evidence at both sizes. Navigation destinations were recorded but their pages were not inspected.

KOSOKU presents thin-sheet metal processing and automotive-component manufacturing through an unusually spacious corporate homepage. Large English display text introduces the sections, while Japanese headings and generous paragraph leading carry the substantive explanation. Red identifies the brand, selected emphasis, and actions. Photography supplies the detail: reflective tubes, production equipment, and a broad view into the factory.

The composition alternates between expansive editorial sections and practical navigation. A persistent white header frames a typographic hero; Strength and Technology establish capabilities; a charcoal product strip introduces five component categories; News, Company, Access, and Contact lead into a detailed sitemap footer. Its identity depends on the relationship between large typography, unboxed photographs, asymmetric edges, and restrained circular or pill-shaped controls.

## How to Read This Reference

- **Measured** means a value was explicitly supplied in the rendered DOM or computed-style evidence. Dimensions are CSS pixels unless stated otherwise.
- **Derived** means arithmetic based on measured rectangles, such as the gap between adjacent product items.
- **Estimated** means a visual approximation from an original-page screenshot. These values are not presented as extracted CSS.
- **Recommended** means an implementation choice for a new adaptation. Breakpoints, unverified hover endpoints, fallback layouts, and accessibility additions belong to this category.
- Token names in this document are descriptive aliases. The evidence does not expose a dedicated brand-token naming system.
- Some exported rectangles belong to offscreen navigation, repeated product items, or potentially transformed headings. Their coordinates must not be copied indiscriminately as final layout positions.
- Captures establish appearance at particular moments. They do not establish the complete behavior of the menu, carousel, decorative lines, or image changes.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| White | `#FFFFFF` | `--color-page` | Measured on the page, header, and Technology section; also used for text on dark sections |
| Brand Red | `#E31E23` | `--color-accent` | Measured on the header contact button, mobile menu button, and light-surface Read More links |
| Charcoal | `#222020` | `--color-ink` | Measured navigation and heading color; Product and Contact backgrounds |
| Pale Gray | `#EDEDED` | `--color-soft` | Measured Strength background |
| Black | `#000000` | `--color-text` | Measured base text, hero Japanese heading, and Technology paragraph |
| Divider Gray | approximately `#D4D4D4` | `--color-rule` | Screenshot estimate for header and footer rules; exact border color was not exported |
| Muted Gray | approximately `#808080` | `--color-muted` | Screenshot estimate for footer legal text |

Use the measured red as the implementation reference. Screenshot rendering can make it appear slightly brighter, but there is no evidence of a second intentional action-red token.

Red is concentrated in the wordmark detail, hero emphasis, contact button, circular menu and scroll controls, selected Japanese headline text, and footer bullets. Charcoal provides a substantial section background rather than a collection of small dark cards. Gray creates a quieter intermediate field behind Strength.

### Palette Boundaries

The supplied custom-property inventory contains numerous CMS preset colors, gradients, shadows, and a default carousel blue. Their presence does not demonstrate their visible use. Do not include those presets in the page's visual palette.

Some parent links report browser-default blue while their descendants render white or another explicit color. The desktop contact button is visibly white on charcoal despite the outer anchor's blue computed color. Read the visible child treatment and screenshot together; do not introduce blue links into these components.

## Tokens — Typography

### Japanese Text and Navigation

**Measured source stack:** `游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", メイリオ, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif`.

The base size is 16px with a computed weight of 500. Navigation and Japanese headings generally use 700. Long explanatory paragraphs use 32px line height, giving the page a deliberate, open reading rhythm. The declared stack is known; the exact locally resolved font file is not.

### English Section Titles

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

Main section titles use weight 600, 80px size, 80px line height, and −4.8px tracking on desktop. On mobile they become 54px with a 54px line height and −3.24px tracking. Both tracking values equal `-0.06em`.

Company and Access use 48px Poppins at both inspected sizes, with −2.88px tracking. Contact is a separate variant: 48px on desktop and 54px on mobile, with normal tracking and 1.3 line height.

### Hero Display and Wordmark

The hero visibly reads `CONTINUE to be` above `YOUR VALUE`, with the second line red and inset from the first. Its exported paragraph reports inherited 16px text properties, but the rendered lettering is much larger. The styles of the actual lettering descendants or assets were not supplied.

**Visual estimate:** approximately 120px display type on desktop and approximately 40–41px on mobile. The measured overall slogan boxes are 898.09 × 212px and 306.48 × 83.91px respectively. Poppins is a reasonable adaptation choice because it is confirmed elsewhere on the page, but it is not a verified hero-font declaration.

Treat the KOSOKU wordmark as brand artwork. Its black lettering and red circular detail should be preserved through an authorized asset, rather than approximated by typing the name in an arbitrary font.

### Type Scale

| Role | Desktop | Mobile | Weight and tracking | Evidence |
| --- | --- | --- | --- | --- |
| Hero English display | Approximately 120px | Approximately 40–41px | Visually heavy; exact values unavailable | Screenshot estimate |
| Hero Japanese H1 | 24px / 40.08px | 18.72px / 31.2624px | 700; normal tracking | Measured |
| Main English section title | 80px / 80px | 54px / 54px | 600; `-0.06em` | Measured Poppins |
| Japanese section label | 16px; 24px box | 16px; 24px box | Usually 700; 0.8px tracking | Measured; line height reports normal |
| Japanese feature heading | 36px / 61.2px | 24px / 40.8px | 700; `0.05em` | Measured |
| Main explanatory paragraph | 16px / 32px | 16px / 32px | 500 | Measured |
| Strength statement | 24px; 36px box | 20px; 30px box | 700; 1.2px desktop tracking, normal mobile | Measured |
| Product name | 20px / 33px | 20px / 33px | 700; 1px tracking | Measured |
| Product description | 14px / 28px | 14px / 28px | 500 | Measured |
| Main navigation | 16px | 18px in offscreen mobile panel | 700 | Measured |
| Read More anchor | 16px | 16px | 700 on sampled anchor | Measured; inner lettering was not separately sampled |
| News filter | 12px / 26px | 12px / 26px | 500 | Measured |
| Company / Access English title | 48px / 48px | 48px / 48px | 600; `-0.06em` | Measured Poppins |
| Contact English title | 48px / 62.4px | 54px / 70.2px | 600; normal tracking | Measured Poppins |
| Contact method label | 16px / 32px | 20px / 40px | 500 | Measured |
| Footer secondary links | 15px / 22.5px | 15px / 22.5px | 500; 0.8px tracking | Measured |

The visible phone number is larger than its sampled outer anchor's 16px declaration. Its full link box measures approximately 335 × 48px on desktop and 296 × 45.59px on mobile. Do not treat the inherited anchor size as the displayed numeral size.

## Tokens — Spacing & Shapes

**Density:** generous section spacing around compact navigation and controls.
**Geometry:** square photographic surfaces, circular utility controls, and capsule links. No general rounded-card or shadow system is visible.

### Horizontal Alignment

| Alignment system | Desktop at 1440px | Mobile at 390px | Interpretation |
| --- | --- | --- | --- |
| Header outer inset | 74.875px | 20.281px | Approximately 5.2% of viewport width at both sizes |
| Header inner width | 1290.23px | Approximately 349.44px | Approximately 89.6% of viewport width |
| Main content alignment | x = 105px; width = 1230px | x = 20.281px; width = 349.44px | Measured in Strength and Technology content |
| Hero copy start | x = 85px | x = 38.281px | Hero uses its own offset; mobile adds approximately 18px inside the standard gutter |
| Strength paragraph | 729px wide, centered | 349.44px wide | Desktop prose is substantially narrower than its section |
| Footer content start | x = 100px | x = 20.281px | Desktop footer follows a slightly different alignment from main content |

These measurements support a fluid outer wrapper and a capped main column, but the source's exact width formula was not supplied. `width: 89.6%; max-width: 1230px` is a useful recommended approximation for main content.

### Component Geometry

| Element | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Header | 110px high | 80px high | Measured |
| Header logo wrapper | 144.72 × 48px | 144.72 × 48px | Measured; brand scale is retained |
| Header contact CTA | 160 × 48px; 24px radius | Replaced in visible header by menu control | Measured / screenshot |
| Mobile menu control | Not visible | 48 × 48px; circular | Measured |
| Read More link | 200 × 60px; 30px radius | 200 × 60px; 30px radius | Measured |
| Read More inner padding | 30px left, 50px right | Same | Measured |
| Hero scroll wrapper | 130 × 130px | 100 × 100px | Measured |
| Scroll control red center | Approximately 88px diameter | Approximately 68px diameter | Screenshot estimate |
| Product item width | 460px | 280px | Measured |
| Product item gap | 32px | 20px | Derived from adjacent item positions |
| Product navigation buttons | 60 × 60px | 40 × 40px | Measured; circular |
| News filter | 28px high; 24px radius | Same | Measured |
| Contact form link | 329 × 60px | 296 × 60px | Measured; 30px radius |
| Footer logo | Approximately 210 × 69.64px | Same | Width from link geometry, height from containing wrapper |

### Section Rhythm

| Section | Desktop top / bottom padding | Mobile top / bottom padding |
| --- | --- | --- |
| Strength | 305px / 260px | 112px / 185px |
| Technology | 392px / 258px | 60px / 120px |
| Product | 275px / 445px | 120px / 240px |
| Company / Access wrapper | 0 / 240px | 0 / 120px |
| Footer | 115px / 55px | 90px / 70px |

These are measured section declarations, not a universal spacing scale. Decorative edges and overlapping section boxes also affect the perceived gap. For example, the News rectangle starts 295px before the Product rectangle ends on desktop, and 120px before it ends on mobile. Reproducing those values requires understanding the complete background layers; copying both as ordinary block spacing would give the wrong result.

### Small Spacing Relationships

- Desktop navigation anchors have a derived 20px gap between most neighboring boxes.
- Strength's three desktop statement boxes are 399.75px wide with approximately 15.38px between them.
- Technology places its paragraph 20px below the feature heading at both sizes.
- Technology's paragraph-to-button gap is 70px on desktop and 50px on mobile.
- Mobile News filters have approximately 8px horizontal and vertical gaps.
- Footer sublinks use 15px of left padding for the bullet treatment.

## Components

### Persistent Header

**Role:** maintain identity, section navigation, and access to contact information.

The header is a white horizontal band with a fine gray bottom rule. The logo sits on the left; desktop navigation is aligned to the right and ends with a filled red contact capsule. The active `TOP` item has a short red underline at the bottom edge of its link area. The header remains visible in top, middle, and footer captures. This establishes persistent behavior, although the exported properties do not distinguish fixed from sticky positioning.

At 1440px, the content spans approximately x = 75 to x = 1365. The logo wrapper is vertically centered at y = 30.5px. Text navigation occupies 109px-high flex link boxes, while the contact action is 160 × 48px.

On mobile, retain the same logo size within an 80px header. Replace the visible navigation row with the 48px red circle at x = 321.72px, y = 15.5px. Its two thin white horizontal strokes are visible in the closed state.

### Mobile Navigation Panel

**Evidence scope:** closed-state screenshot plus offscreen DOM geometry; no opened-menu capture.

The mobile DOM contains a vertical set of 18px bold navigation links, each approximately 349.47 × 64px, starting outside the viewport at x = 410.27px. Telephone and form-contact content follow the navigation. A filled form CTA measures 275 × 60px.

This supports the presence of an offscreen navigation panel. It does not verify its entrance direction, duration, backdrop, scroll locking, close-state icon, or keyboard behavior. In an adaptation, implement the menu as an explicit disclosure or dialog and document those choices as additions.

### Hero Composition

**Role:** express the company's continuing value before introducing its capabilities.

The hero contains four distinct layers:

1. A large two-line English slogan, with a black first line and red second line.
2. A Japanese H1 beneath it: `昔も、今も、これからもお客様の価値あるパートナーとしてあり続ける`.
3. A small rectangular close-up of a metal tube at the upper-right edge.
4. A much larger photograph below the text, with a red circular down-arrow cue near its right edge.

At desktop size, the slogan begins at x = 85px, y = 270.19px. The Japanese H1 starts at y = 500.19px. The large photograph begins at approximately y = 610px and extends from the left viewport edge to approximately x = 1335px, preserving a white strip on the right. The upper-right detail image occupies roughly 261 × 197px in the screenshot.

At mobile size, the slogan begins at x = 38.28px, y = 227.27px. The Japanese heading wraps into two lines. The main photograph begins at approximately y = 435px and is about 348px wide, leaving a wider right margin than the text column. The small detail image is approximately 109 × 82px at the upper right.

Two narrow red vertical rules appear in the mobile capture: one near the right edge above the headline and one at the left of the headline extending into the photograph. Their visible width is approximately 6px. Their motion, if any, was not established.

The current desktop capture shows a factory interior in the large image; the current mobile capture shows arranged metal components. Both are valid observed states. The evidence does not establish whether this difference results from a timed sequence, responsive asset selection, or another mechanism.

### Bilingual Section Heading

**Role:** combine a small Japanese content label with a large English visual anchor.

Main section headings pair a 16px Japanese label with an 80px Poppins English title on desktop. Mobile retains the Japanese size while reducing the English title to 54px and adding a measured 7px gap between the label box and English title.

The inspected DOM uses Japanese H2 elements and English paragraphs. The English text is the stronger visual element without replacing the Japanese heading semantics. Examples include `私たちの強み` / `Our Strength`, `技術・設備紹介` / `Technology`, and `製品紹介` / `Product`.

Several desktop title rectangles have negative x positions. Their transform or reveal state was not exported, so these coordinates are not reliable alignment specifications for a static reconstruction.

### Strength Section

**Role:** establish manufacturing experience, quality, and production reliability.

A pale gray section contains the bilingual title, a broad Japanese feature heading, centered supporting prose, three strength statements, and a centered Read More capsule.

The desktop paragraph is 729px wide and uses 16px type with 32px leading. The three statements share one horizontal row, with 24px bold captions. On mobile, the paragraph uses the full approximately 349px content width, the feature heading becomes 24px, and the three statements occupy separate vertical positions. Their mobile captions use 20px bold text.

The supplied crops do not expose the full visual treatment above those statement captions. Preserve the measured column and stacking relationships without inventing icons, illustrations, or particular photographs.

### Technology Section

**Role:** explain process capability alongside evidence of the working environment.

The desktop composition places text on the left and equipment photography on the right. The measured text column is 485.84px wide at x = 105px. The visible equipment photograph is approximately 480px wide and starts near x = 730px in the middle-page capture.

A bold Japanese heading uses selected red emphasis; the visible phrase includes `フレキシブルかつ迅速`. Beneath it, black explanatory text uses 16px / 32px. The left-aligned Read More capsule follows after 70px.

On mobile, the text expands to the approximately 349px content width. The title appears below a substantial upper region in the section geometry; the exact mobile image composition is not visible in the supplied captures. The Quick Start's stacked layout is therefore an adaptation, not a verified copy of that upper region.

### Read More Capsule

**Role:** link from a homepage summary to its dedicated content page.

The standard control is 200 × 60px with a 30px radius. It uses red text and a fine red outline on light backgrounds, and white text and outline within dark sections. The label is positioned with 30px left padding and additional room on the right for a thin arrow.

The supplied computed transition is `background 0.4s, color 0.4s, border-color 0.4s`. Hover endpoint colors were not captured. Small breaks appear in some outlines in the screenshots, but a border-drawing animation cannot be established from these still states. A continuous 1px border is a practical approximation.

Alignment is contextual: centered in Strength, left aligned in Technology, aligned beside the Product introduction on desktop, and below the product strip on mobile. Avoid centering every instance automatically.

### Product Strip

**Role:** introduce five manufactured component categories and link to their detailed sections.

The section uses a measured charcoal background with white labels and descriptions. The desktop middle capture exposes a fine dotted texture at the section boundary and an approximately 100px stepped difference between its left and right upper edges. The background implementation and precise dot spacing were not exported.

The product track contains five unique categories, repeated three times in the exported DOM. This is consistent with carousel duplication. The repeats should not be interpreted as fifteen different products.

Each item is one link containing a visual region, a 20px bold name, and a 14px / 28px description. Item widths are 460px on desktop and 280px on mobile. Adjacent positions establish gaps of 32px and 20px respectively. On mobile, the first item begins at x = 20.28px and the next at x = 320.28px, leaving part of the next item within the viewport.

The title begins 475px below the item top on desktop and 305px below it on mobile. This is consistent with a square media region plus a gap, but the image rectangles were not included. Treat a 1:1 media region as an implementation inference.

Two circular navigation buttons appear in the DOM below the strip, measuring 60px on desktop and 40px on mobile. Their presence and geometry are confirmed; clicking, dragging, touch swiping, looping, and autoplay were not exercised.

### News Index

**Role:** provide dated company updates with category entry points.

Desktop uses a narrow left area for the bilingual heading, four vertically arranged category controls, and Read More. A wider right area contains five linked rows, each approximately 855 × 99px with 35px vertical padding.

The category labels are `すべて`, `お知らせ`, `トピックス`, and `採用情報`. The first has a measured charcoal fill and white text in the captured state. All filters use 12px text, a 28px outer height, and capsule geometry.

On mobile, the filters move above the rows and wrap. Three fit on the first line; the fourth occupies a second line. Rows become approximately 327.56px wide and 120px high, with 30px top and 25px bottom padding. Read More follows the list and is centered within that column.

The exported links point to category fragments and individual articles. Filtering behavior and active-state changes were not tested. The supplied screenshots do not establish the exact news-row divider or arrow artwork.

### Company and Access Links

**Role:** provide large destinations for company information and location details.

The desktop wrapper contains two adjacent links, each approximately 645.11 × 532px. Their visible text treatment in the DOM is white, with a small Japanese label, a 48px Poppins title, and a 200 × 60px Read More treatment inside the larger link.

On mobile, these become two full-width 390 × 269px blocks stacked vertically. The English title remains 48px. This is a compositional change rather than proportional scaling of every element.

The complete backgrounds of these links are outside the supplied screenshot crops, and their image layers were not exported. Do not assign an invented factory exterior, map, or portrait to them as an observed fact. The entire block is already a link; a new implementation should not nest another anchor around its Read More label.

### Contact Band

**Role:** make telephone and form contact equally easy to locate.

A full-width charcoal band contains a centered Japanese label and English Contact title. Below, desktop divides the methods into two columns with a thin vertical separator. The telephone number is a prominent white link on the left. The right column contains a 329 × 60px white outlined form capsule with a small envelope symbol.

The section is measured at 409.39px high on desktop. Its title begins 75px below the section top. The screenshot shows a clear gap between the heading group and contact methods, without photography or texture competing with the information.

Mobile stacks the methods and increases the section height to 514.78px. Method labels grow from 16px to 20px, and the form capsule becomes 296px wide. The telephone destination is explicitly a `tel:` link; the form control links to the contact page. No form fields or submission behavior were inspected.

### Sitemap Footer

**Role:** repeat the company identity, location, and detailed navigation.

Desktop places the brand/address block on the left and five navigation groups across the remaining space. Group labels are bold; secondary links use 15px text, 22.5px leading, and small red bullets. The address and underlined Google Map link sit below a larger 210px-wide logo. A fine horizontal rule separates the legal row, with copyright on the left and privacy on the right.

The mobile footer moves navigation before the brand/address block. Navigation uses two columns, with longer product names wrapping to two lines. News and Contact appear as standalone bold links beneath the grouped navigation. The larger logo then appears after a substantial gap, followed by address, map link, a divider, privacy, and copyright.

The footer measures 473.5px high on desktop and 1100.64px on mobile. Preserve its information hierarchy instead of shrinking the desktop sitemap to fit the phone width.

## Tokens — Motion & Interaction

| Treatment | Supplied evidence | What can safely be concluded |
| --- | --- | --- |
| Header contact CTA | Computed `0.4s` transition | A transition is declared; endpoint appearance was not captured |
| Read More capsules | Background, color, and border-color transitions of 0.4s | Three visual properties have a shared duration |
| Product navigation controls | `background 0.4s` | Background feedback is defined; carousel movement timing is unknown |
| Contact form capsule | `background 0.4s` | Background feedback is declared |
| Mobile hero scroll wrapper | `opacity 0.4s` | An opacity transition is available; trigger is unknown |
| Persistent header | Visible at the top of multiple scroll captures | Persistence is observed; fixed versus sticky CSS is not exposed |
| Mobile menu | Closed screenshot; navigation located outside the viewport | Offscreen content exists; opening behavior was not tested |
| Product track | Repeated items, horizontal positioning, two navigation buttons | Carousel structure is strongly supported; autoplay and controls are unverified |
| Hero photograph variation | Different subjects in current desktop and mobile captures | More than one image state exists; switching mechanism is unknown |
| Circular scroll caption | Curved lettering around a red control | Rotation cannot be inferred from a still image |
| Mobile red rules | Visible at two distinct hero positions | Geometry is visible; animation is unverified |

The common `transition: all` serialization on many sampled elements does not by itself establish a nonzero animation. Likewise, `animation: none` on an exported parent does not exclude animation on descendants, pseudo-elements, or JavaScript-controlled layers.

The supplied capture process waited for document loading, image decoding, and sampled stability, with bounded waits for finite animation. Perpetual animations were paused during readiness checks and resumed afterward. These checks improve capture reliability but do not prove that every delayed reveal or interaction state was inspected.

For an adaptation, reuse the measured 400ms duration for modest color feedback. Any scroll reveal, menu slide, carousel easing, image crossfade, or rotating caption must be specified separately as a recommendation.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Main canvas | Solid white | Open space around large typography and photography |
| Persistent header | White with a fine bottom rule | Stable navigation without visible elevation |
| Strength | Solid pale gray | Separate capability statements from the hero and Technology |
| Technology | White | Let equipment photography and red emphasis carry the detail |
| Product | Charcoal; dotted treatment visible at its boundary | Strong contrast for the product sequence |
| Contact | Solid charcoal | Concentrated, readable contact information |
| Footer | White with red bullets and a gray legal divider | Dense navigation kept visually light |
| Primary action | Red capsule or circle | Make key navigation controls easy to identify |
| Secondary action | Transparent capsule with a fine outline | Consistent navigation without heavy button surfaces |

No soft card shadows, glass blur, or glossy gradients are established by the supplied captures. Surface separation comes from color fields, photo boundaries, fine rules, and large changes in spacing.

## Imagery

Photography shows the actual material character of manufacturing. The desktop hero's factory view uses structural beams, pipes, machinery, and deep perspective. The mobile hero shows orderly rows of metallic tubes and assemblies on a green work surface. The upper-right image isolates a reflective cylindrical detail against a light background. Technology presents darker equipment within the working factory.

Retain natural metallic highlights, dark openings, workshop surfaces, and environmental color. The green and teal tones belong to the photographs; they are not additional interface accents. Cropping is assertive and rectangular, with no visible rounded photo corners or decorative shadow frames.

### Observed Asset References

The supplied evidence does not include original image URLs or filenames. The following references describe roles, not downloadable paths.

| Visual | Confirmed appearance | Source limitation |
| --- | --- | --- |
| Header and footer wordmark | Black KOSOKU lettering, red circular detail, Japanese company name below | Asset URL and format unavailable |
| Hero detail | Close-up of a metal tube, upper right | Asset URL unavailable |
| Desktop main hero photograph | Factory interior | Complete image bounds below the crop are unavailable |
| Mobile main hero photograph | Arranged metal tubes and components | Image-switching mechanism unknown |
| Technology photograph | Factory machinery | Desktop crop visible; mobile crop unverified |
| Scroll cue | Red circle, thin white arrow, curved small lettering | Asset format and animation unknown |
| Product media | Space reserved above linked product labels | Exact assets and image rectangles unavailable |
| Company / Access backgrounds | White foreground titles confirmed | Background subjects not visible in supplied crops |

Use authorized original assets when available. For a new corporate site, commission or select comparable photographs of its own equipment and products. Keep typography and brand marks as separate assets or live text rather than generating an entire page as a bitmap.

## Layout & Responsive Behavior

The measured document height is approximately 8148px on desktop and 8662px on mobile. This is a long corporate document with normal page progression, not a viewport-locked application. The BODY rectangle matching the viewport does not describe the complete scrollable content height.

| Area | Desktop observation | Mobile observation |
| --- | --- | --- |
| Header | Horizontal navigation and contact capsule | Same logo size, shorter header, circular menu button |
| Hero | Wide two-line slogan, single-line Japanese H1, broad photo | Smaller two-line slogan, two-line H1, narrow photo with right margin |
| Strength | Three statements in one row | Statements stacked vertically |
| Technology | Copy left, visible machinery image right | Full-width text column; upper image region not visually verified |
| Product | 460px items with 32px gaps; several items span the viewport | 280px items with 20px gaps; next-item preview remains visible |
| Product Read More | Beside introduction | Below track and navigation controls, aligned right |
| News filters | Vertical stack beside list | Wrapping row above list |
| News Read More | In left navigation area | Below news rows |
| Company / Access | Two adjacent 645px-wide blocks | Two stacked full-width blocks |
| Contact | Two methods side by side | Methods stacked; larger method labels |
| Footer | Brand block beside sitemap | Sitemap before brand block; two-column groups |

The two supplied widths do not establish the breakpoint values or fluid interpolation between them. The Quick Start uses a recommended 68rem layout breakpoint, chosen to give the full navigation adequate space. It is not an extracted media query.

Maintain the distinct alignment systems: approximately 5.2vw outer gutters, a narrower desktop main column, a separately offset hero headline, and imagery that can reach the viewport edge. Applying the same centered container to every element would erase much of the composition.

## Do’s and Don’ts

### Do

- Use `#E31E23` as the main action accent and `#222020` for dark fields.
- Keep English section titles large, tightly tracked, and paired with smaller Japanese labels.
- Preserve the 16px / 32px paragraph rhythm on mobile as well as desktop.
- Use real manufacturing photography with square edges and deliberate crops.
- Give sections enough vertical room to preserve the measured editorial pace.
- Keep Read More controls at a consistent 200 × 60px while changing their alignment by context.
- Maintain a horizontal product sequence with part of the next item visible on mobile.
- Reorder footer groups for mobile while keeping all navigation and company details available.
- Separate verified appearance from untested motion and hidden states.

### Don’t

- Don't turn every section into a rounded card with a shadow.
- Don't import unused CMS gradients or default carousel blue into the visible palette.
- Don't call the hero's inherited 16px wrapper style its rendered display size.
- Don't assume Poppins is the confirmed hero font merely because it is used for section titles.
- Don't reproduce all repeated product nodes as separate catalog entries.
- Don't copy negative heading coordinates or offscreen mobile navigation positions into a static layout.
- Don't infer autoplay, swipe behavior, or rotating lettering from screenshots alone.
- Don't invent image paths, Company/Access backgrounds, or unobserved menu visuals.
- Don't replace the full corporate information structure with a single conversion-focused section.

## Recommended Implementation Additions

These recommendations are not verified features of the original site:

- Give the menu and carousel controls accessible names and visible keyboard focus. Synchronize menu state with `aria-expanded` and its controlled region.
- Keep a closed offscreen menu out of keyboard navigation and the accessibility tree; restore access when it opens.
- Preserve 40px mobile carousel artwork if desired, but provide at least a 44px interaction target around it.
- If carousel clones are used, ensure duplicate content does not create repeated tab stops or repeated announcements.
- If motion or automatic image changes are added, support reduced motion and an appropriate pause mechanism. Keep all essential copy available without reveal animation.
- Use a clear heading hierarchy. The Japanese hero sentence is the observed H1; the English slogan can remain supporting display text.
- Provide descriptive image alternatives for meaningful factory and product photographs, and empty alternatives for purely decorative repeats.
- Preserve native phone and navigation links. Do not nest a link inside the Company or Access block link.
- Set intrinsic image dimensions to limit layout shifts, and test text wrapping at widths smaller than the supplied 390px capture.
- Give news filters explicit state and keyboard behavior if implementing live filtering; fragment links alone do not establish a tab widget.

## Agent Prompt Guide

### Quick Color Reference

- Page: `#FFFFFF`.
- Brand and principal controls: `#E31E23`.
- Main dark text and dark sections: `#222020`.
- Supporting gray section: `#EDEDED`.
- Body text where required: `#000000`.
- Secondary actions: fine red outlines on light surfaces, white outlines on charcoal.
- Geometry: rectangular photographs, capsule links, circular utility controls.

### Overall Prompt

“Create a Japanese manufacturing corporate homepage inspired by the current KOSOKU composition. Use a white canvas, brand red `#E31E23`, charcoal `#222020`, and a pale gray Strength section. Pair large Poppins English section titles with small Japanese labels and Japanese paragraphs at 16px with 32px line height. Build an asymmetric hero with a black first display line, a red inset second line, a small metal-detail photograph at the upper right, and a broad factory photograph below. Use a persistent white header, restrained 200 × 60px outlined links, a dark horizontal product sequence, dated company news, Company and Access links, a dark contact band, and a detailed sitemap footer. On mobile, retain the logo scale, replace navigation with a red circular menu button, stack explanatory content, keep the product track horizontal, and move footer navigation before company details. Treat any additional animation as an explicit implementation choice.”

### Example Component Prompts

1. **Header:** “A 110px white desktop header with an approximately 145 × 48px brand asset, bold 16px Japanese navigation, a fine gray bottom rule, a red current-page underline, and a 160 × 48px red contact capsule. At phone width, use an 80px header with the same logo size and a 48px circular red menu button.”
2. **Hero:** “A spacious white manufacturing hero with two heavy English lines, the second red and slightly indented. Place a bold Japanese supporting heading below, a small rectangular tube close-up at the upper right, and an edge-aligned factory photograph underneath. Add a red circular down-arrow cue. Approximate the display typography; do not claim an unverified source font.”
3. **Technology:** “A wide white section with a small Japanese label above a large tightly tracked English title. Place a bold Japanese statement with selective red emphasis and 16px / 32px prose in a roughly 486px desktop column, with machinery photography to the right and a 200 × 60px red outlined link below.”
4. **Product sequence:** “A charcoal section with white bilingual headings and linked product items. Use 460px desktop items separated by 32px; use 280px phone items separated by 20px. Keep product names at 20px and descriptions at 14px / 28px. Show the next item partially. Keep all controls keyboard operable and avoid inventing autoplay behavior.”
5. **Contact and footer:** “A charcoal contact band with a centered English title and separate phone and form methods, followed by a white sitemap footer. Use small red bullets for secondary footer links, a larger brand asset, an address and underlined map link, and a fine legal divider. Stack contact methods and place sitemap groups before brand details on mobile.”

## Quick Start

### CSS Custom Properties

This is a practical adaptation, not the original stylesheet. Palette, common type sizes, control dimensions, and several spacing values are measured. The hero lettering, photo ratios, background texture, breakpoint, hover endpoints, and simplified section spacing are recommendations. The CSS intentionally leaves content visible without JavaScript-driven reveals.

Load Poppins separately if authorized and available; declaring its name does not load the font. Supply brand and photographic assets through your markup. No original asset paths were provided.

```css
:root {
  /* Measured visible colors */
  --color-page: #ffffff;
  --color-accent: #e31e23;
  --color-ink: #222020;
  --color-text: #000000;
  --color-soft: #ededed;

  /* Screenshot estimates */
  --color-rule: #d4d4d4;
  --color-muted: #808080;

  /* Measured font declarations */
  --font-jp: '游ゴシック体', YuGothic, '游ゴシック',
    'Yu Gothic', 'メイリオ', 'Hiragino Kaku Gothic ProN',
    'Hiragino Sans', sans-serif;
  --font-en: Poppins, sans-serif;
  --text-body: 16px;
  --text-section: 80px;
  --text-feature: 36px;
  --text-product: 20px;
  --text-detail: 14px;
  --leading-body: 2;
  --tracking-en: -0.06em;

  /* Measured dimensions and derived alignment aliases */
  --header-height: 110px;
  --outer-gutter: 5.2vw;
  --content-max: 1230px;
  --body-gutter: max(5.2vw, calc((100vw - 1230px) / 2));
  --button-width: 200px;
  --button-height: 60px;
  --button-radius: 30px;
  --product-width: 460px;
  --product-gap: 32px;
  --control-size: 60px;
  --feedback-duration: 400ms;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-page);
  font-family: var(--font-jp);
  font-size: var(--text-body);
  font-weight: 500;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
p, h1, h2, h3 { margin: 0; }

.container {
  width: 89.6%;
  max-width: var(--content-max);
  margin-inline: auto;
}

.body-copy {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.accent { color: var(--color-accent); }

/* Fixed positioning is an implementation choice. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-height);
  background: var(--color-page);
  border-bottom: 1px solid var(--color-rule);
}

.header-inner {
  width: 89.6%;
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand img { width: 145px; height: auto; }

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
}

.nav-link {
  display: flex;
  align-items: center;
  height: 100%;
  padding-inline: 5px;
  border-bottom: 1px solid transparent;
  color: var(--color-ink);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.nav-link[aria-current='page'] {
  border-bottom-color: var(--color-accent);
}

.header-contact {
  display: grid;
  place-items: center;
  width: 160px;
  height: 48px;
  border-radius: 24px;
  color: white;
  background: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
}

.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: white;
  background: var(--color-accent);
}

main { padding-top: var(--header-height); }

/* Hero values approximate the two supplied capture sizes. */
.hero { position: relative; }

.hero-copy {
  position: relative;
  width: min(1270px, 89.6%);
  margin-inline: auto;
  padding-block: 160px 70px;
}

.hero-slogan {
  font-family: var(--font-en);
  font-size: clamp(64px, 8.333vw, 120px);
  font-weight: 600;
  line-height: 0.8833;
  letter-spacing: -0.055em;
}

.hero-slogan span { display: block; }

.hero-slogan .accent { margin-left: 0.45em; }

.hero-copy h1 {
  margin-top: 18px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.67;
}

.hero-detail {
  position: absolute;
  top: 32px;
  right: 0;
  width: 261px;
  height: 197px;
  overflow: hidden;
}

.hero-detail img,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media {
  width: calc(100% - var(--body-gutter));
  aspect-ratio: 1.68;
  overflow: hidden;
}

.scroll-cue {
  position: absolute;
  top: 452px;
  right: 40px;
  display: grid;
  place-items: center;
  width: 130px;
  height: 130px;
  color: white;
  text-decoration: none;
}

.scroll-cue-core {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* Pair a Japanese label with an English display span. */
.section-title { color: var(--color-ink); }

.section-title .ja {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.05em;
}

.section-title .en {
  display: block;
  font-family: var(--font-en);
  font-size: var(--text-section);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-en);
}

.feature-heading {
  font-size: var(--text-feature);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.05em;
}

.pill-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: var(--button-width);
  max-width: 100%;
  min-height: var(--button-height);
  padding: 0 22px 0 30px;
  border: 1px solid currentColor;
  border-radius: var(--button-radius);
  color: var(--color-accent);
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--feedback-duration),
    color var(--feedback-duration),
    border-color var(--feedback-duration);
}

.pill-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.pill-link.is-light { color: white; }

.strength {
  padding-block: 305px 260px;
  background: var(--color-soft);
}

.strength-intro { margin-top: 100px; }

.strength-copy {
  max-width: 729px;
  margin: 30px auto 0;
}

.strength-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15.375px;
  margin-top: 60px;
}

.strength-caption {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.center-action { margin-top: 60px; text-align: center; }

/* Simplified section flow; source reveal layers are not recreated. */
.technology {
  padding-block: 200px 258px;
  background: white;
}

.technology-grid {
  display: grid;
  grid-template-columns: minmax(0, 486px) minmax(0, 480px);
  justify-content: space-between;
  gap: 60px;
  margin-top: 80px;
}

.technology-copy .body-copy { margin-top: 20px; }
.technology-copy .pill-link { margin-top: 70px; }
.technology-image { width: 100%; height: auto; }

/* Estimated texture and stepped boundary; only the background is clipped. */
.product {
  position: relative;
  isolation: isolate;
  padding-block: 275px 220px;
  color: white;
}

.product::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-ink);
  background-image: radial-gradient(#555 0.55px, transparent 0.7px);
  background-size: 11px 11px;
  clip-path: polygon(0 0, 58.5% 0, 58.5% 100px,
    100% 100px, 100% 100%, 0 100%);
}

.product .section-title { color: white; }

.product-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 60px;
}

/* Native scrolling is a recommended fallback, not verified source behavior. */
.product-track {
  display: flex;
  gap: var(--product-gap);
  margin-top: 100px;
  padding: 0 var(--body-gutter) 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: var(--body-gutter);
}

.product-card {
  flex: 0 0 var(--product-width);
  color: white;
  text-decoration: none;
  scroll-snap-align: start;
}

.product-media { aspect-ratio: 1; }
.product-media img { width: 100%; height: 100%; object-fit: contain; }

.product-name {
  margin-top: 15px;
  font-size: 20px;
  font-weight: 700;
  line-height: 33px;
  letter-spacing: 1px;
}

.product-description {
  margin-top: 8px;
  font-size: 14px;
  line-height: 28px;
}

.track-controls {
  display: flex;
  justify-content: flex-end;
  gap: 17px;
  margin-top: 54px;
}

.circle-control {
  width: var(--control-size);
  height: var(--control-size);
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  transition: background var(--feedback-duration);
}

.news { padding-block: 120px 175px; }

.news-layout {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);
  gap: 100px;
}

.news-filters {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  margin-top: 74px;
}

.news-filter {
  display: inline-block;
  min-height: 28px;
  padding-inline: 20px;
  border: 1px solid transparent;
  border-radius: 24px;
  color: var(--color-text);
  font-size: 12px;
  line-height: 26px;
  text-decoration: none;
}

.news-filter.is-active { color: white; background: var(--color-ink); }

.news-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 99px;
  padding-block: 35px;
  color: var(--color-ink);
  text-decoration: none;
}

/* A plain fallback avoids inventing unobserved background imagery. */
.company-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 89.6%;
  margin: 0 auto 240px;
}

.company-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
  min-height: 532px;
  padding: 50px;
  color: white;
  background: var(--color-ink);
  text-align: center;
  text-decoration: none;
}

.company-link .section-title { color: inherit; }
.company-link .en { font-size: 48px; }

.contact-band {
  padding-block: 75px 82px;
  color: white;
  background: var(--color-ink);
  text-align: center;
}

.contact-band .section-title { color: inherit; }
.contact-band .ja { font-weight: 400; }
.contact-band .en { font-size: 48px; line-height: 1.3; letter-spacing: 0; }

.contact-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 940px;
  margin: 52px auto 0;
}

.contact-method { padding-inline: 40px; }
.contact-method + .contact-method { border-left: 1px solid #777; }
.contact-method-label { line-height: 2; letter-spacing: 0.05em; }

/* Numeral size is an approximation; outer source spans were not exported. */
.phone-link {
  display: inline-block;
  margin-top: 18px;
  color: white;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.phone-link small { font-size: 0.75em; }
.contact-form { width: 329px; justify-content: center; margin-top: 12px; }

.site-footer { padding-block: 115px 55px; }

.footer-inner {
  display: grid;
  grid-template-columns: minmax(280px, 35%) minmax(0, 1fr);
  width: min(1240px, 89.6%);
  margin-inline: auto;
}

.footer-brand img { width: 210px; }
.footer-address { margin-top: 30px; font-size: 15px; letter-spacing: 0.8px; }
.footer-map { display: inline-block; margin-top: 10px; font-size: 15px; }

.footer-nav {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  gap: 30px;
}

.footer-group-title { font-size: 16px; font-weight: 700; }
.footer-group ul { margin: 17px 0 0; padding: 0; list-style: none; }
.footer-group li + li { margin-top: 8px; }

.footer-sublink {
  position: relative;
  display: inline-block;
  padding-left: 15px;
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.8px;
  text-decoration: none;
}

.footer-sublink::before {
  content: '';
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.footer-legal {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 80px;
  padding-top: 20px;
  border-top: 1px solid var(--color-rule);
  color: var(--color-muted);
  font-size: 15px;
}

/* Recommended feedback; source hover endpoints were not captured. */
@media (hover: hover) {
  .pill-link:not(.is-light):hover {
    color: white;
    border-color: var(--color-accent);
    background: var(--color-accent);
  }
  .pill-link.is-light:hover {
    color: var(--color-ink);
    border-color: white;
    background: white;
  }
}

:where(a, button):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 5px;
}

/* Recommended breakpoint, not an extracted source media query. */
@media (max-width: 68rem) {
  :root {
    --header-height: 80px;
    --text-section: 54px;
    --text-feature: 24px;
    --product-width: 280px;
    --product-gap: 20px;
    --control-size: 40px;
  }

  .desktop-nav { display: none; }
  .menu-toggle { display: grid; place-items: center; }

  .hero-copy {
    width: 89.6%;
    padding: 147px 0 40px 18px;
  }
  .hero-slogan {
    font-size: clamp(28px, 10.5vw, 54px);
    line-height: 1.025;
  }
  .hero-copy h1 {
    margin-top: 21.8px;
    font-size: clamp(16px, 4.8vw, 24px);
  }
  .hero-detail { top: 22px; width: 109px; height: 82px; }
  .hero-media { width: calc(100% - 42px); height: 446px; aspect-ratio: auto; }

  .hero-copy::before {
    content: '';
    position: absolute;
    top: 147px;
    left: 0;
    z-index: 2;
    width: 6px;
    height: 335px;
    background: var(--color-accent);
    pointer-events: none;
  }
  .hero::after {
    content: '';
    position: absolute;
    top: 0;
    right: 24px;
    width: 6px;
    height: 113px;
    background: var(--color-accent);
    pointer-events: none;
  }

  .scroll-cue { top: 634px; right: 20px; width: 100px; height: 100px; }
  .scroll-cue-core { width: 68px; height: 68px; }
  .section-title .en { margin-top: 7px; }

  .strength { padding-block: 112px 185px; }
  .strength-intro { margin-top: 46px; }
  .strength-copy { margin-top: 12px; }
  .strength-grid { grid-template-columns: 1fr; gap: 48px; }
  .strength-caption { font-size: 20px; letter-spacing: 0; }

  .technology { padding-block: 60px 120px; }
  .technology-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 44px; }
  .technology-copy .pill-link { margin-top: 50px; }

  .product { padding-block: 120px 120px; }
  .product::before {
    clip-path: polygon(0 0, 58.5% 0, 58.5% 40px,
      100% 40px, 100% 100%, 0 100%);
  }
  .product-heading { grid-template-columns: 1fr; gap: 46px; }
  .product-track { margin-top: 52px; }
  .product-name { margin-top: 25px; }
  .product-description { margin-top: 12px; }
  .track-controls { gap: 12px; margin-top: 30px; }

  .news { padding-block: 115px 120px; }
  .news-layout { grid-template-columns: 1fr; gap: 30px; }
  .news-filters { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
  .news-row {
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    min-height: 120px;
    padding-block: 30px 25px;
  }
  .news-row .news-title { grid-column: 1 / -1; }

  .company-links { grid-template-columns: 1fr; width: 100%; margin-bottom: 120px; }
  .company-link { min-height: 269px; padding: 40px 20px; gap: 35px; }

  .contact-band .en { font-size: 54px; margin-top: 0; }
  .contact-methods { grid-template-columns: 1fr; gap: 30px; margin-top: 32px; }
  .contact-method { padding-inline: 0; }
  .contact-method + .contact-method { border: 0; }
  .contact-method-label { font-size: 20px; letter-spacing: 0; }
  .phone-link { margin-top: 8px; font-size: clamp(28px, 9.2vw, 36px); }
  .contact-form { width: 296px; margin-top: 8px; }

  .site-footer { padding-block: 90px 70px; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-nav { grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 10px; }
  .footer-brand { grid-row: 2; margin-top: 90px; }
  .footer-legal { grid-row: 3; flex-direction: column; gap: 10px; margin-top: 60px; }
  .footer-privacy { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .pill-link,
  .circle-control,
  .header-contact {
    transition: none;
  }
  .product-track { scroll-snap-type: none; }
}
```

### Component Assembly Notes

Use `.section-title` with `.ja` and `.en` children; use actual heading elements according to the page hierarchy. Place an authorized logo image inside `.brand` and `.footer-brand`. Use separate images inside `.hero-detail` and `.hero-media` rather than making the entire hero a single image.

For `.pill-link`, include a label and a small decorative arrow SVG. Its CSS uses flex spacing instead of duplicating the source's unsampled arrow positioning. Put an accessible down-arrow link inside `.scroll-cue`; curved caption artwork is optional and requires a supplied asset or separately authored SVG text path.

The product strip works as native horizontal overflow without a carousel library. Render the five unique items once for this fallback. If navigation buttons are shown, wire them to scroll the track; do not leave inert controls visible. A full carousel, menu panel, live news filtering, decorative stroke motion, and exact overlapping section backgrounds require additional behavior beyond this stylesheet.

### Tailwind v4 Token Mapping

Optional aliases for an implementation that already uses Tailwind v4. This is not evidence that the original website uses Tailwind.

```css
@theme inline {
  --color-brand: var(--color-accent);
  --color-canvas: var(--color-page);
  --color-charcoal: var(--color-ink);
  --color-section-soft: var(--color-soft);
  --font-body: var(--font-jp);
  --font-display: var(--font-en);
  --text-section-heading: var(--text-section);
  --text-feature-heading: var(--text-feature);
  --spacing-header: var(--header-height);
  --spacing-product-card: var(--product-width);
  --spacing-product-gap: var(--product-gap);
  --radius-action: var(--button-radius);
}
```

## Sources & Evidence

- **Inspected original and final page:** [https://cosok.co.jp/](https://cosok.co.jp/). The supplied browser observation reports HTTP 200 and no URL change.
- **Capture timestamp:** `2026-10-01T16:08:59.563Z`, equivalent to October 2, 2026, at 01:08:59.563 JST.
- **Desktop evidence:** 1440 × 1000 CSS-pixel viewport; supplied captures of the hero, part of Technology and its following background transition, and Contact/footer. Rendered DOM evidence covers the homepage content, link destinations, selected element rectangles, computed typography, colors, padding, radii, and transitions.
- **Mobile evidence:** 390 × 844 CSS-pixel viewport; supplied hero and lower-footer captures, plus rendered DOM evidence covering responsive geometry throughout the homepage.
- **Observed navigation:** link destinations are present for Strength, Technology, Product, Company, News, Contact, Privacy, product anchors, a map, and a telephone link. These destinations were not independently opened for this reference.
- **Interaction limits:** no supplied open-menu state, clicked carousel transition, news-filter change, form submission, focus sequence, or hover endpoint. The captures and exported style summaries do not establish animation keyframes, easing, or image-switch timing.
- **Asset limits:** original image URLs, complete image-element geometry, resolved font files, and several decorative layers were not supplied. Hero typography estimates and unverified image treatments are identified explicitly above.

This reference describes the current homepage shown in the supplied original-page evidence. Its reusable CSS and recommendations are an adaptation of that evidence, with measured values distinguished from visual estimates and implementation choices.