# W/A — Context Branding Style Reference

> Large editorial lettering and almost weightless circles give a branding service room to explain itself.

**Website:** [wa-concept.jp](https://wa-concept.jp/)
**Original URL:** https://wa-concept.jp/
**Final URL:** https://wa-concept.jp/
**Theme:** light, predominantly black on white; no theme switch was observed.
**Inspected:** September 23, 2026, at 00:28 JST. Supplied retrieval timestamp: September 22, 2026, 15:28:47.468 UTC.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Scope:** the current service/corporate homepage, including its hero, Brand Promise, Business, Work, News, Recruit, and footer. Original-page screenshots cover the desktop hero, business diagram, recruitment/footer, and mobile hero/footer. Rendered DOM measurements extend to the intervening sections. Destination pages and the open mobile menu were not inspected.

W/A combines very large English serif headings with compact Japanese explanatory text. The page is mostly white, with black type, fine outlines, and generous vertical intervals. Several faint, overlapping ellipses occupy the hero above a headline anchored low in the composition. Their varying visibility gives the artwork depth without adding a heavy image block.

The same geometry reappears at smaller scales: an elliptical Contact link, long rounded outline links, and the central circular concept in the business diagram. Blue, yellow, and red are confined to that diagram's circular edge. The page supports several equally legitimate journeys—understanding the service, viewing work, reading news, making contact, and recruiting—rather than organizing every section around one conversion action.

## How to Read This Reference

- **Measured** means a value appears in the supplied rendered DOM or computed styles. Tables round most measurements to two decimal places.
- **Visual estimate** means a dimension or color was judged from an original-page screenshot. These estimates are not pixel samples or recovered stylesheet declarations.
- **Derived** means arithmetic from measured positions, such as a gap between two elements.
- **Recommended** means guidance for a new implementation. The CSS, fallback fonts, breakpoint, accessibility additions, and static artwork sketch below belong to this category.
- **Named tokens** are descriptive implementation aliases unless explicitly identified as source custom properties.
- Desktop and mobile were both captured, but intermediate widths, landscape layouts, hover states, keyboard behavior, and the expanded navigation were not tested.
- The supplied style records are selective. A missing image URL, transition target, or border property is unknown, not proof that the feature does not exist.
- The business diagram's desktop text bounds are tall and narrow in one DOM sample, while the screenshot shows horizontal text. Those bounds are state- or transform-dependent; do not copy them as permanent text-column dimensions.

## Tokens — Colors

### Default Palette

| Name | Value | Token | Evidence and role |
| --- | --- | --- | --- |
| White | `#ffffff` | `--color-page` | Measured on content sections, footer, and large detail links; also the visible hero canvas |
| Black | `#000000` | `--color-ink` | Measured text color; visually used for outlines, rules, and icons |
| Promise Gray | `#f3f3f3` | `--color-promise` | Measured Brand Promise section background |
| Diagram Blue Gray | Approximately `#d4dde2` | `--color-diagram` | Visual estimate of the large business-diagram panel |
| Diagram Blue | Approximately `#2468dc` | `--color-diagram-blue` | Visual estimate of the left portion of the central circular edge |
| Diagram Yellow | Approximately `#f6e733` | `--color-diagram-yellow` | Visual estimate of the upper/right circular edge |
| Diagram Red | Approximately `#e84239` | `--color-diagram-red` | Visual estimate of the lower/right circular edge |

The first three values are measured. The diagram values are practical approximations and should be checked against authorized artwork before exact reproduction.

The hero linework ranges from dark gray to nearly invisible gray. Its changing visibility is an observed appearance; an opacity gradient, mask, shader, or particular rendering technique was not established. For a static adaptation, black strokes with graded transparency can approximate the effect.

The rendered document also exposes many `--wp--preset--*` colors, gradients, and shadows. Their presence does not make them active design tokens. No visible evidence supports applying those colorful presets or stock shadows to this interface.

### Color Usage

- Keep reading surfaces white and typography black.
- Use `#f3f3f3` to distinguish the Brand Promise section without introducing a card container.
- Reserve the blue-gray field for the explanatory business diagram.
- Keep blue, yellow, and red attached to the central concept graphic. They are not observed action colors, category badges, or navigation states.
- Retain white interiors inside the diagram's curved service segments and central circle.

## Tokens — Typography

### Display Headings

**Computed family:** `abcSynt, sans-serif`.

The screenshots show a contrasting serif design with large rounded bowls, fine details, and a tightly composed hero title. `abcSynt` is the exact supplied CSS family identifier; the evidence does not establish a fuller commercial font name or font-file URL. The source fallback is `sans-serif`, despite the serif appearance of the loaded face.

Display headings use computed weight `400`. The hero is much larger than the following section headings and uses negative letter spacing. Do not substitute a heavy bold serif simply because the title is visually prominent.

### Japanese Reading Text

**Computed family:** `TazuganeGothicStdN-Regular`.

Most explanatory paragraphs use weight `400`. Project descriptions report `500`, and the central concept heading reports `700`. The Japanese text can look substantial in the captures, but that does not justify describing every paragraph as bold.

Desktop section paragraphs generally use a `1.6` line-height ratio. Mobile section paragraphs use approximately `1.8`, helping the narrower measure remain readable.

### English Navigation and Utilities

**Computed family:** `'haas roman', sans-serif`.

This family is used by the header and footer navigation. Its restrained sans-serif treatment separates navigation from the expressive section titles. Keep the supplied identifier rather than inferring a particular commercial font edition.

### Wordmark and Graphic Labels

The W/A logo appears inside a home link with an empty extracted text string. Its visible lettering should be treated as a wordmark, not reconstructed from the heading's inherited font properties. The same caution applies to Contact: its label is visible in the screenshot even though the extracted anchor text is empty. Accessible-name computation was not supplied.

### Type Scale

All values below are measured CSS pixels, rounded. A dash indicates that the corresponding visible state was not measured.

| Role | Desktop size / line height | Mobile size / line height | Weight and tracking |
| --- | --- | --- | --- |
| Hero headline | `119.99 / 143.99` | `43.67 / 52.40` | 400; tracking `-4.00px` desktop, `-2.08px` mobile |
| Brand Promise, Business, Work headings | `79.99 / 95.99` | `43.67 / 52.40` | 400; normal tracking |
| News heading | `60.00 / 72.00` | `36.39 / 43.67` | 400 |
| Recruit heading | `60.00 / 72.00` | `37.43 / 44.92` | 400 |
| Brand Promise paragraph | `24.00 / 38.40` | `18.72 / 32.19` | 400; mobile tracking `-0.52px` |
| Business, Work introduction, Recruit body | `18.00 / 28.80` | `15.60 / 28.07` | 400; mobile tracking `-0.52px` |
| Project description | `15.00 / 27.00` | `13.52 / 22.87` | 500 |
| Header navigation | `18.00 / 20.70` | Hidden in captured mobile header | 400 |
| Footer navigation and social links | `18.00 / 20.70` | `12.48 / 14.35` | 400 |
| Large detail link | `20.00 / 36.00` | `16.64 / 29.94` | 400; tracking about `2px` |
| Recruitment application link | `15.00 / 18.00` | `14.56 / 21.83` | 400; desktop tracking `-0.50px` |
| Footer policy link | `16.00 / 18.40` | `11.44 / 13.15` | 400; desktop tracking `0.80px` |
| Diagram concept heading | `24.00 / 28.80` | `15.60 / 18.72` | 700 |
| Diagram concept explanation | `15.00 / 22.50` | `10.40 / 15.60` | 400 |

The hero's Japanese tagline is approximately 30px on desktop and 16px on mobile by visual inspection; its computed text style was not included. It stays on one line in the desktop capture and wraps into two lines on mobile after `自社言語を引きだし、`.

### Root Sizing

The measured root font size is `9.99936px` at 1440px wide and `10.3974px` at 390px wide. These are different responsive sizing regimes: mobile is not a proportional reduction of the desktop root.

For example, the desktop hero size is approximately twelve desktop root units, while the mobile hero is approximately 4.2 mobile root units. The actual root formula and breakpoint were not supplied. The Quick Start uses ordinary pixel-based tokens and leaves the application root unchanged.

## Tokens — Spacing & Shapes

**Density:** sparse at section level, compact within text and navigation groups.

**Principal alignment:** approximately 50px from each desktop edge and 18.7px from each mobile edge. The mobile header has a slightly different measured horizontal inset of 19.76px.

### Spacing Scale

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Main content inset | `49.98px` | `18.70px` | Measured element positions |
| Content width | `1340.03px` | `352.59px` | Measured |
| Header horizontal padding | `50.00px` | `19.76px` | Computed |
| Initial header vertical padding | `23.00px` | `31.19px` | Computed |
| Business/Work heading-to-paragraph gap | About `30px` | About `28.06px` | Derived |
| Recruit heading-to-paragraph gap | About `30px` | About `46.78px` | Derived |
| Large detail-link padding | `34px 50px` | `20.79px 41.59px` | Computed |
| Business section top padding | `201.99px` | `150.76px` | Computed |
| Work section top padding | `217.49px` | `149.52px` | Computed |
| News section top padding | `230.99px` | `147.64px` | Computed |
| Recruit top / bottom padding | `199.99 / 299.98px` | `153.88 / 193.39px` | Computed |
| Footer top / bottom padding | `97.99 / 30.00px` | `101.90 / 20.79px` | Computed |

Do not force these values into a claimed eight-point system. The evidence supports a set of deliberate proportions, not a recovered universal spacing grid.

### Border Radius and Outlines

| Element | Treatment | Evidence |
| --- | --- | --- |
| Main sections | Square, full-width fields | Screenshot and measured section radius `0` |
| Large detail link | Long capsule; radius about `300px` desktop and `311.92px` mobile | Computed |
| Contact anchor | Computed radius `40%`; visible boundary is an ellipse | Computed and screenshot |
| Business panel | Lower corners appear softly rounded, approximately `12px` | Visual estimate; complete upper edge is not established |
| Central concept | Circular white interior and colored surrounding arcs | Screenshot |
| Footer divider and control outlines | Approximately `1px` black hairlines | Visual estimate |

The Contact anchor's box radius is not proof that CSS draws the visible outline; it may be drawn by a child graphic. A `50%` CSS radius is a useful approximation of the visible ellipse in a new implementation.

### Layout Measurements

| Element | Desktop | Mobile |
| --- | --- | --- |
| Initial header | `1440 × 94.31px` | `390 × 89.47px` |
| Initial home-link/logo box | `99.98 × 32.98px` | `80 × 27.09px` |
| Hero headline position | `x 49.98, y 762.00px` | `x 18.70, y 577.41px` |
| Hero headline box | `860.06 × 144px` | `302.97 × 52.41px` |
| Start of Brand Promise | `y 1149.98px` | `y 789.92px` |
| Large detail link | `225.88 × 105.97px` | `198.11 × 73.50px` |
| Footer Contact anchor | `151.98 × 46.98px` | `89.41 × 38.69px` |
| Footer height | `415.66px` | `456.59px` |
| Document height | About `6660.34px` | About `5940.22px` |

The desktop hero and lead-in continue beyond the first 1000px viewport. Mobile exposes the beginning of the gray section at approximately 790px. A universal `height: 100vh` would not match both captures.

## Components

### Application Header

**Role:** persistent brand identity and site-wide navigation.

The initial desktop header spans the viewport with the W/A home link at the left, five text links toward the right, and a separate outlined Contact ellipse at the far right. The measured navigation labels are About, Business, Work, News, and Recruit. Recruit carries a small external-link symbol.

The initial desktop logo box begins at approximately `50, 30.66px`. About begins at `x 659.75px`; adjacent text links have roughly 36px of separation. Contact occupies about `152 × 48.34px` at the right edge of the 50px content inset. It is separated from the text group by substantially more space than the individual navigation gaps.

On mobile, the desktop navigation and header Contact link are not visible. An 80px-wide wordmark sits at the left, with a two-line menu control at the right. Its lines are long and fine, rather than the common compact three-bar icon.

The header remains at the top in scrolled captures and becomes visibly more compact. The scrolled desktop band is approximately 61px high and the mobile band approximately 50px high by screenshot estimation. The mobile menu lines also appear shorter, around 59px rather than 80px. A white background separates the compact header from underlying content. Persistence and compaction are visible; the precise fixed/sticky implementation, threshold, and animation were not supplied.

### Hero

**Role:** establish the service proposition through typography and abstract circular artwork.

The hero contains a broad white field, thin overlapping elliptical outlines, and a low-positioned text group. It does not rely on a photograph, a colored panel, or an oversized filled action button.

At desktop size, `Context Branding` is approximately 120px and begins near `y 762px`. The linework is concentrated above it, leaving clear air between the header and headline. Several outlines fade almost completely into the background, so reproducing every circle with uniform black opacity would be much too heavy.

The mobile artwork is substantially cropped at the viewport edges. Large arcs extend beyond the right edge and behind the upper composition. The title remains on one line at approximately 43.67px, with its Japanese tagline on two lines below. Preserve this compositional change rather than shrinking the complete desktop diagram into a small centered illustration.

The source heading hierarchy places the home-link wordmark in an H1 and the hero title in an H2. The visible hierarchy is led by the hero's scale, not its heading level.

### Brand Promise Section

**Role:** state the service's approach before describing its business structure.

This is a full-width `#f3f3f3` section. Its heading contains nine repeated instances of `Brand Promise` in a horizontally extended flex arrangement. The recorded heading spans about 5214px on desktop and 2846px on mobile, with negative horizontal positions. That supports a clipped repeated-text band; direction, speed, and whether it continuously moves are unverified.

The desktop explanation occupies approximately 1112px centered within the page, at 24px with a 38.4px line height. On mobile it uses the regular 352.59px content width, at 18.72px with a 32.19px line height. A large white outline detail link is centered below the explanation.

The measured section is approximately 1199.69px tall on desktop and 875.30px on mobile. This is more vertical space than the measured heading, paragraph, and link alone require. Other visual content within the remaining area was not shown in the supplied original-page screenshots; do not invent it.

### Large Detail Link

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

The visible desktop control combines a plus sign and `もっと見る` in an outlined capsule. It is approximately 226px wide and 106px tall, with a white fill, black hairline outline, roughly 20px Japanese text, and 2px tracking. It has no shadow or filled accent color.

Brand Promise centers this link. Business, Work, and News place it at the desktop content edge. On mobile, the Brand Promise, Business, and Work links are centered and reduce to approximately `198 × 73.5px`.

News is a real exception: the captured mobile interface uses a compact text link labeled `ニュース一覧`, not the large capsule. Preserve that content and treatment change.

The computed transition duration is `0.6s`. The hover property and resulting visual state were not captured.

### Business Introduction

**Role:** explain how the service connects business development and organizational development.

A large 80px English heading begins after approximately 202px of desktop top padding. Its explanatory paragraph is about 967px wide, rather than spanning the entire 1340px container. It uses 18px Japanese text with a 28.8px line height.

On mobile, the heading drops to 43.67px and the paragraph uses the full content width at 15.6px with a 28.07px line height. The resulting six-line paragraph is longer vertically but remains comfortably separated from the diagram.

### Business Relationship Diagram

**Role:** communicate a central concept linking business-facing and organization-facing activities.

The desktop screenshot shows a blue-gray panel aligned with the 50px page inset and spanning approximately 1340px. Around 575px of its height is visible in the capture; that is a visible region, not a verified full-panel height.

Its anatomy is specific:

1. A left domain heading, `（ 事業開発 ）`, and a right domain heading, `（ 組織開発 ）`.
2. Three white curved segments on the left, labeled `セールス`, `マーケティング`, and `クリエイティブ` from left to right in the screenshot.
3. A central white circle approximately 300px in outer diameter, surrounded by blue, yellow, and red arcs.
4. A centered bold `コンセプト` label with a three-line explanation below it.
5. Three corresponding white curved segments on the right: `採用・教育`, `制度・福利厚生`, and `カルチャー`.
6. Underlined lower captions identifying marketing communication on the left and internal communication on the right.

The service segments are inward/outward-curving strips, not ordinary rectangular feature cards. Their visible height is approximately 180px. The central white interior and colored arcs visually connect the two halves.

The mobile DOM preserves the diagram's labels and reduces the central heading to 15.6px and explanation to 10.4px. A mobile screenshot of the diagram was not supplied, so its exact arrangement, scrolling behavior, or reorientation cannot be asserted. A stacked accessible alternative is recommended for a new implementation, not described as observed behavior.

### Work Preview

**Role:** connect the service proposition to concrete client projects.

The homepage exposes two linked entries: `Scalehack Concept Movie` and `Shiragata soken Rebrand`. Each link contains its project title and substantial Japanese explanatory copy.

Desktop positions are unusually useful here. Each link is approximately 431.03px wide. The first begins at `x 49.98px` and the second at `x 504.45px`, giving a derived gap of about 23.44px. Both share the same top position. This is consistent with two populated positions in a three-column-width layout, leaving substantial unused space to the right. The container's actual grid/flex declaration was not supplied.

On mobile, each entry occupies the 352.59px content width and the second follows below the first, separated by approximately 51.89px. Descriptions reduce from `15px / 27px` to `13.52px / 22.87px`.

There is a substantial region between each link's top and its description: approximately 340.53px on desktop and 290.75px on mobile. That region includes preceding content and spacing; it must not be mistaken for a verified image height. The supplied original screenshots do not show the project artwork, and the DOM evidence includes no image sources. Image subjects, crops, ratios, and exact title styling remain unverified.

### News List

**Role:** provide a compact chronological update index.

The desktop list contains three full-width links with dates and titles. Each is approximately 1340px wide and 77.97px tall, with `29.4px` vertical padding and a flex layout. The starts of consecutive rows are separated by each row's height plus about 1px, consistent with a fine separator; the border declaration itself was not supplied.

On mobile, the link changes to block layout. Dates and titles can occupy separate lines, producing one row around 86.59px high and two around 113.11px high. The padding changes to about 21.83px above and 16.64px below.

A 60px heading leads the desktop section, reduced to 36.39px on mobile. The desktop list ends with a large `もっと見る` capsule, while mobile ends with the smaller `ニュース一覧` link.

The supplied entries are dated in 2024. Those dates are page content, not the inspection date and not evidence that the website is discontinued.

### Recruit Section

**Role:** invite prospective collaborators and link to the recruitment service.

This is an open text section on white: a serif `Recruit` heading, a Japanese paragraph, and a small underlined `応募はこちら` link with an external-link symbol. It has no recruitment card, photograph, or colored callout in the supplied screenshots.

Desktop uses a 60px heading, an 18px paragraph over two lines, and approximately 300px of space below the final link before the footer. Mobile uses a 37.43px heading, a 15.6px paragraph with a 28.07px line height, and about 193px of bottom padding.

The destination is an external recruitment URL. The visible icon does not, by itself, verify that activation opens a new tab.

### Footer

**Role:** close the page with navigation, contact, social links, and policy information.

A single black hairline separates the footer from Recruit. The footer stays white and uses extensive empty space instead of a contrasting dark block.

Desktop has a large W/A wordmark at the left. Toward the right, one column contains About, Business, and Work; a second contains News and Recruit; the outlined Contact ellipse occupies the far-right position. The bottom row places the policy link at the left, X/Instagram/Facebook around the center-right, and `©EXIDEA Inc.` at the far right.

Mobile preserves this hierarchy while rearranging it. The wordmark occupies its own first row. Below it, two narrow navigation columns sit beside a small Contact ellipse. Social links form a separate row. The policy link and copyright occupy the bottom corners, with roughly 110px of clear vertical space after the social row.

Measured mobile navigation type is only 12.48px and policy text 11.44px. Those measurements describe the original; a new implementation should preserve the visual lightness while increasing interactive hit areas.

## Tokens — Motion & Interaction

| Element | Supplied evidence | Safe interpretation |
| --- | --- | --- |
| Home-link heading wrapper | Computed transition `0.3s` | A transition is configured; its target properties and trigger are unknown |
| Contact anchors | Computed transition `0.3s` | Do not infer a fill, scale, or rotation effect without a captured state |
| Large detail links | Computed transition `0.6s` | Longer control transition; endpoint unverified |
| News links | Computed transition `0.3s` | Short transition configured; hover appearance unverified |
| Header | Remains at the top and appears smaller in scrolled screenshots | Persistent compact state is visually supported; exact mechanism and timing are unknown |
| Brand Promise title band | Repeated text, large overflow width, negative horizontal offset | Repeated/clipped presentation is measured; continuous marquee motion is not proven |
| Hero circles | Fine overlapping outlines with fading visibility | Shape and appearance are observed; renderer, timing, and input coupling are unknown |
| Mobile menu | Two-line control visible | Open panel, focus behavior, and close interaction were not exercised |
| Navigation and project entries | Actual link destinations supplied | Links are present; destination-page behavior was not tested |

Most sampled elements report `animation: none`. This does not exclude motion in unsampled children, pseudo-elements, SVG, canvas, video, or JavaScript-driven transforms. Likewise, a serialized `transition: all` without a duration is not evidence of visible animation.

The collection process waited for document loading, visible images, and finite animation/layout stability, with an overall readiness limit. Perpetual animations were paused during readiness checking and then resumed. These safeguards do not establish a motion timeline or prove that all delayed content appeared.

**Recommended motion approach:** begin with a static composition matching the observed hierarchy. If motion is added, keep it confined to the decorative linework and subtle state changes. Provide reduced-motion behavior. Do not label an invented orbit duration, scroll-scrubbing effect, or animation library as part of the original site.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Hero and ordinary sections | White, mostly unboxed | Give typography and spacing primary responsibility for hierarchy |
| Brand Promise | Full-width `#f3f3f3` field | Introduce a quiet change of pace |
| Business diagram | Blue-gray panel with gently rounded lower corners | Group a complex explanatory graphic |
| Diagram segments | White curved strips | Associate individual activities with the central concept |
| Detail links | White fill, black outline, elongated capsule | Make navigation deliberate without a saturated action color |
| Contact links | Thin elliptical outline | Repeat the circular brand motif at navigation scale |
| Compact header | White strip over scrolling content | Preserve legibility and identity |
| Footer | White, separated by a fine black top rule | Close the page without changing its tonal system |

No general shadow-elevation system is visible in the supplied original screenshots. Registered shadow presets should not be translated into component shadows.

## Imagery

The verified visual language is primarily typographic and diagrammatic. The hero uses delicate elliptical linework; the business section uses curved service segments and a central colored ring. Their roles differ: the hero supplies atmosphere, while the diagram communicates a specific relationship.

Keep the hero outlines thin and unevenly visible. Avoid making them look like a dark wireframe sphere, a glowing technology graphic, or a set of uniformly weighted decorative circles. On mobile, let the artwork exceed the viewport and crop naturally while keeping the title readable.

The business diagram should remain clear enough to explain. Its colored circular edge is a small accent around a white center, not a large gradient-filled disc. Preserve the left/center/right relationship on desktop and retain all labels in an accessible form.

### Observed Asset References

No image `src` values, font-file URLs, or artwork file paths were included in the supplied original-page evidence. Do not invent asset paths.

| Visual | Verified evidence | Implementation boundary |
| --- | --- | --- |
| W/A wordmark | Visible in desktop/mobile headers and footers; measured home-link boxes | Exact artwork format and source file unknown |
| Hero circles | Visible in original desktop/mobile hero captures | Original drawing and rendering technology unknown |
| Business diagram | Visible desktop panel plus rendered labels | Exact artwork structure and mobile arrangement unverified |
| External-link symbols | Visible beside recruitment and policy links | Do not infer an icon library |
| Work media | Project links and layout regions are measured | Artwork, sources, crops, and ratios not visually verified |

Use authorized original brand and project assets when available. CSS and a static SVG sketch can reproduce the surrounding composition, but they do not establish the source artwork or production technique.

## Layout & Responsive Behavior

The page is a long document with a persistent header, not a fixed-height application shell. Section spacing is part of its character: headings often begin 150–230px after the previous section boundary.

### Section Map

Positions are document coordinates from the supplied samples, rounded to the nearest pixel. The first row ends at the measured beginning of Brand Promise; it is not a recovered hero-container declaration.

| Region | Desktop start / height | Mobile start / height |
| --- | --- | --- |
| Hero and lead-in | `0 / 1150px` | `0 / 790px` |
| Brand Promise | `1150 / 1200px` | `790 / 875px` |
| Business | `2350 / 1264px` | `1665 / 1206px` |
| Work | `3613 / 1181px` | `2871 / 1437px` |
| News | `4794 / 726px` | `4308 / 578px` |
| Recruit | `5520 / 725px` | `4886 / 598px` |
| Footer | `6245 / 416px` | `5484 / 457px` |

### Verified Responsive Changes

- Main horizontal insets reduce from about 50px to 18.7px.
- Desktop text navigation is replaced by a two-line mobile menu control.
- Hero type reduces from about 120px to 43.67px, while its Japanese tagline gains a line break.
- The hero artwork is cropped much more aggressively on mobile.
- Business and Work headings share the mobile hero's 43.67px scale; News and Recruit use smaller, slightly different sizes.
- Work entries change from two adjacent narrow columns to a single vertical sequence.
- Major detail links become smaller and centered.
- News rows switch from flex to block layout, and their archive link changes label and treatment.
- Footer navigation and social links rearrange into separate mobile rows.
- Large section gaps remain substantial rather than collapsing into a dense phone layout.

The exact responsive breakpoint is unknown. The Quick Start chooses 48rem as an implementation breakpoint, not as a recovered source value. Intermediate-width behavior must be tested separately, especially navigation fit, heading width, and diagram readability.

## Do’s and Don’ts

### Do

- Build around black type, white space, and a small number of quiet gray surfaces.
- Preserve the strong contrast between oversized English serif headings and restrained sans-serif navigation/Japanese text.
- Keep the hero title low in a spacious composition.
- Give individual elliptical strokes different levels of visibility.
- Let decorative artwork crop beyond the mobile viewport.
- Distinguish the small Contact ellipse from the much larger detail-link capsules.
- Keep the business diagram's accent colors local to its central circular edge.
- Preserve the narrow, left-aligned desktop Work entries and the open space to their right.
- Stack Work entries and News row content on mobile.
- Reproduce the compact mobile News archive link rather than applying the capsule component everywhere.
- Retain the footer's white background, thin divider, and generous spacing.
- Treat declared font identifiers and measured endpoint values as evidence, while labeling substitute fonts and interpolations as recommendations.

### Don’t

- Don't reduce this multi-section service homepage to a generic single-action sales funnel.
- Don't fill the hero with stock photography or a solid dark background.
- Don't render every circle as an equally dark, thick outline.
- Don't promote the diagram's red, yellow, or blue into a global button color.
- Don't add shadows, glossy gradients, or glass effects to ordinary content blocks.
- Don't stretch the two desktop project entries into equal half-page columns.
- Don't infer project imagery from project names or descriptions.
- Don't copy source `rem` numbers into a conventional 16px-root page without conversion.
- Don't interpret the diagram's unusual sampled text bounds as proof of vertical writing.
- Don't claim a tested mobile drawer, hover effect, animation loop, or rendering library without evidence.
- Don't treat default CMS presets as the site's visible color and elevation system.

## Recommended Implementation Additions

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

- Give the W/A home link and Contact links explicit accessible names, even when their visible labels are supplied as artwork.
- Implement the mobile menu as a real button with an accessible name, `aria-expanded`, and `aria-controls`. If it opens an overlay, manage focus and Escape behavior.
- Provide a clearly visible black focus outline that survives the thin visual styling.
- Maintain at least a 44px interaction height for small mobile controls without unnecessarily enlarging their visible lettering or ellipse.
- Supply one semantic Brand Promise heading and hide decorative repetitions from assistive technology.
- Mark decorative hero artwork as hidden from assistive technology and keep it out of pointer hit testing.
- Give the business diagram a text equivalent explaining its two domains, six activities, and central concept. Do not depend on the three colors alone.
- Keep article dates in `time` elements and project preview links keyboard-operable.
- Test a compact header against anchor navigation so headings do not land underneath it.
- Add reduced-motion support and keep all content understandable when decorative artwork is static.
- Verify mobile text wrapping with the actual licensed fonts. Fallback metrics can change the carefully controlled title width.
- Add useful alternatives for project imagery once the actual images are available; do not fabricate descriptions in advance.

## Agent Prompt Guide

### Quick Color Reference

- Page and ordinary surfaces: `#ffffff`, measured.
- Text and principal outlines: `#000000`, measured.
- Brand Promise background: `#f3f3f3`, measured.
- Business panel: approximately `#d4dde2`, estimated.
- Central diagram accents: approximately blue `#2468dc`, yellow `#f6e733`, and red `#e84239`, estimated.
- Hero linework: fine black-to-nearly-invisible gray outlines; exact opacity values unknown.
- Action treatment: white interiors with thin black outlines, not filled accent buttons.

### Overall Prompt

“Create a spacious Japanese branding-service homepage inspired by the current W/A composition. Use a white canvas, black text, a high-contrast serif display face, quiet sans-serif navigation, and readable Japanese explanatory copy. Place thin, partially fading elliptical linework across a tall hero and anchor a very large Context Branding title low on the page. Use a small W/A-style wordmark area, desktop text navigation, and an outlined elliptical Contact link. Follow with a pale-gray promise section, a business explanation and curved relationship diagram, narrow left-aligned project previews, a dated news list, a restrained recruitment section, and a white footer with a hairline divider. On mobile, use approximately 19px side insets, a two-line menu control, cropped oversized artwork, a 44px hero title, stacked projects, and a compact news archive link. Keep diagram colors confined to its central concept ring. Use original brand and project assets only when authorized; do not invent missing project imagery or claim unverified motion.”

### Example Component Prompts

1. **Hero:** “A white 1440px-wide composition with roughly 50px side insets. Place a regular-weight, high-contrast serif title at about 120px near the lower portion, with a strong Japanese tagline beneath it. Above the text, overlap several very fine elliptical outlines that fade into white. No shadow, filled callout, or stock photograph.”
2. **Header:** “A sparse white header with a compact wordmark at left, 18px sans-serif navigation toward the right, and a separate 152px-wide outlined Contact ellipse. At phone width, show only the wordmark and two long horizontal menu lines. Include an explicitly implemented compact scroll state without assuming the original transition logic.”
3. **Business diagram:** “A broad blue-gray panel with three white curved activity segments on each side of a white central circle. Add restrained blue, yellow, and red arcs around the circle. Put business-development and organization-development labels above their respective halves, and underlined communication captions below. Use a readable text alternative for the full relationship.”
4. **Project previews:** “On a 1340px desktop content width, use approximately 431px-wide project entries with a 23px gap, leaving the remaining right-hand area open when there are two entries. Each entry links a verified project asset, title, and Japanese explanation. Stack them at a 353px phone content width. Do not invent the source artwork.”
5. **Footer:** “A white footer separated by a one-pixel black rule. Place the wordmark at left, two navigation columns and an outlined Contact ellipse at right, then policy, social, and copyright information along the bottom. On mobile, give the wordmark its own row and preserve generous empty space between social and legal information.”

## Quick Start

### CSS Custom Properties

This is an implementation scaffold, not recovered source code. It matches the measured desktop/mobile scale and several key components while leaving unknown artwork and behavior explicit. The 48rem breakpoint, fallback fonts, news subelement styling, intermediate-width interpolation, and diagram adaptation are recommendations. The source family names work only if the corresponding fonts are properly loaded and licensed.

The compact header requires the host application to toggle `.is-compact`. The mobile menu requires separate accessible behavior. The optional hero sketch below is static and does not reproduce the original rendering system.

```css
:root {
  /* Measured palette */
  --color-page: #fff;
  --color-ink: #000;
  --color-promise: #f3f3f3;

  /* Visual estimates for the diagram */
  --color-diagram: #d4dde2;
  --color-diagram-blue: #2468dc;
  --color-diagram-yellow: #f6e733;
  --color-diagram-red: #e84239;

  /* Observed family identifiers with recommended fallbacks */
  --font-display: 'abcSynt', Georgia, serif;
  --font-body: 'TazuganeGothicStdN-Regular',
    'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-ui: 'haas roman', Arial, sans-serif;

  /* Desktop endpoint; interpolation is an adaptation */
  --gutter: clamp(24px, 3.4722vw, 50px);
  --text-hero: clamp(72px, 8.3333vw, 120px);
  --text-major: clamp(56px, 5.5556vw, 80px);
  --text-minor: 60px;
  --text-body: 18px;
  --text-project: 15px;
  --rule: 1px;
  --radius-capsule: 300px;
  --radius-panel: 12px;
  --motion-short: 300ms;
  --motion-detail: 600ms;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-page);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
}

a { color: inherit; }
button { font: inherit; }

.container {
  width: calc(100% - 2 * var(--gutter));
  margin-inline: auto;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  min-height: 94.31px;
  padding: 23px var(--gutter);
  background: var(--color-page);
  font-family: var(--font-ui);
}

.brand {
  display: block;
  flex: none;
  width: 100px;
}

.brand img,
.brand svg {
  display: block;
  width: 100%;
  height: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-left: auto;
  font-size: 18px;
  line-height: 1.15;
}

.site-nav a { text-decoration: none; }

.contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 152px;
  height: 48px;
  border: var(--rule) solid currentColor;
  border-radius: 50%;
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
}

.site-header > .contact-link {
  margin-left: clamp(32px, 9.1667vw, 132px);
}

.menu-toggle { display: none; }

/* Recommended compact-state approximation */
.site-header.is-compact {
  min-height: 61px;
  padding-block: 8px;
}

.site-header.is-compact .brand { width: 85px; }
.site-header.is-compact > .contact-link {
  width: 130px;
  height: 40px;
  font-size: 15px;
}

.hero {
  position: relative;
  min-height: 1150px;
  overflow: hidden;
  isolation: isolate;
}

.hero-art {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 780px;
  pointer-events: none;
}

.hero-copy {
  position: absolute;
  top: 762px;
  inset-inline: var(--gutter);
}

.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.033333em;
  white-space: nowrap;
}

.hero-tagline {
  margin: -15px 0 0;
  font-size: 30px;
  line-height: 1.45;
}

.mobile-break { display: none; }

.section-title {
  margin: 0 0 30px;
  font-family: var(--font-display);
  font-size: var(--text-major);
  font-weight: 400;
  line-height: 1.2;
}

.section-title--minor { font-size: var(--text-minor); }
.section-copy { margin: 0; }

.brand-promise {
  min-height: 1200px;
  padding: 102px 0 43px;
  overflow: hidden;
  background: var(--color-promise);
}

.brand-strip {
  display: flex;
  width: max-content;
  gap: 0.5em;
  margin: 0 0 30px;
  font-family: var(--font-display);
  font-size: var(--text-major);
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

.promise-copy {
  max-width: 1112px;
  margin-inline: auto;
  font-size: 24px;
  line-height: 1.6;
}

.more-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 106px;
  padding: 34px 50px;
  border: var(--rule) solid currentColor;
  border-radius: var(--radius-capsule);
  color: var(--color-ink);
  background: var(--color-page);
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 2px;
  text-decoration: none;
  transition: background-color var(--motion-detail),
    color var(--motion-detail);
}

.more-link::before {
  content: '+';
  margin-right: 8px;
  letter-spacing: 0;
}

.brand-promise .more-link {
  margin: 78px auto 0;
}

.business-section { padding-top: 202px; }
.business-section .section-copy { max-width: 967px; }
.work-section { padding-top: 217.5px; }
.news-section { padding-top: 231px; }
.recruit-section { padding: 200px 0 300px; }

.business-diagram {
  margin-top: 50px;
  padding: 60px 40px;
  border-radius: var(--radius-panel);
  background: var(--color-diagram);
}

/* Simplified ring for an adaptation, not original artwork */
.concept-hub {
  display: grid;
  place-content: center;
  width: 302px;
  aspect-ratio: 1;
  margin-inline: auto;
  padding: 24px;
  border: 10px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(
      var(--color-diagram-yellow) 0deg 90deg,
      var(--color-diagram-red) 90deg 220deg,
      var(--color-diagram-blue) 220deg 335deg,
      var(--color-diagram-yellow) 335deg 360deg
    ) border-box;
  text-align: center;
}

.concept-hub h3 {
  margin: 0 0 20px;
  font-size: 24px;
  line-height: 1.2;
}

.concept-hub p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 23.44px;
  margin-top: 41px;
}

.work-card {
  min-width: 0;
  text-decoration: none;
}

.work-media {
  display: block;
  width: 100%;
  height: auto;
}

.work-description {
  font-size: var(--text-project);
  font-weight: 500;
  line-height: 1.8;
}

.work-section .more-link { margin-top: 76px; }
.business-section .more-link { margin-top: 41px; }

/* Date-column width and child text size are recommendations */
.news-row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 24px;
  padding: 29.4px 0;
  border-bottom: var(--rule) solid currentColor;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
}

.news-archive--desktop { margin-top: 42px; }
.news-archive--mobile { display: none; }

.application-link {
  display: inline-block;
  margin-top: 43px;
  padding-bottom: 4px;
  border-bottom: var(--rule) solid currentColor;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
}

.site-footer {
  padding: 98px var(--gutter) 30px;
  border-top: var(--rule) solid currentColor;
  font-family: var(--font-ui);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17.64% 20.14% 152px;
  align-items: start;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 15.7px;
  font-size: 18px;
  line-height: 1.15;
}

.site-footer a { text-decoration: none; }

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  margin-top: 169px;
}

.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  grid-column: 2;
  grid-row: 1;
  font-size: 18px;
  line-height: 1.15;
}

.footer-policy { grid-column: 1; grid-row: 1; }
.footer-copyright { grid-column: 3; grid-row: 1; }
.footer-policy,
.footer-copyright { font-size: 16px; }

/* Recommended interaction states; original endpoints unknown */
:where(a, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

@media (hover: hover) {
  .more-link:hover {
    color: var(--color-page);
    background: var(--color-ink);
  }
}

/* Chosen breakpoint, not a recovered source breakpoint */
@media (max-width: 48rem) {
  :root {
    --gutter: 18.7px;
    --text-hero: clamp(34px, 11.1972vw, 43.67px);
    --text-major: 43.67px;
    --text-minor: 36.39px;
    --text-body: 15.6px;
    --text-project: 13.52px;
  }

  body { line-height: 1.8; }

  .site-header {
    min-height: 89.47px;
    padding: 31.19px 19.76px;
  }

  .brand { width: 80px; }
  .site-nav,
  .site-header > .contact-link { display: none; }

  .menu-toggle {
    position: relative;
    display: block;
    flex: none;
    width: 80px;
    height: 44px;
    margin: -9px 0 -9px auto;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
  }

  .menu-toggle::before,
  .menu-toggle::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
  }

  .menu-toggle::before { top: 18px; }
  .menu-toggle::after { top: 28px; }

  .site-header.is-compact {
    min-height: 50px;
    padding-block: 12px;
  }

  .site-header.is-compact .brand { width: 53px; }
  .site-header.is-compact .menu-toggle { width: 59px; }

  .hero { min-height: 789.92px; }
  .hero-copy { top: 577.4px; }
  .hero-title { letter-spacing: -0.04762em; }

  .hero-tagline {
    margin-top: 7px;
    font-size: 16px;
    line-height: 1.5;
  }

  .mobile-break { display: inline; }

  /* Static sketch cropping only; original geometry is unknown */
  .hero-art {
    top: -90px;
    left: -350px;
    width: 950px;
    height: 900px;
    transform: rotate(-48deg);
  }

  .section-title { margin-bottom: 28.06px; }
  .section-copy { letter-spacing: -0.52px; }

  .brand-promise {
    min-height: 875.3px;
    padding: 109px 0 107px;
  }

  .promise-copy {
    font-size: 18.72px;
    line-height: 1.72;
    letter-spacing: -0.52px;
  }

  .more-link {
    min-height: 73.5px;
    margin-inline: auto;
    padding: 20.79px 41.59px;
    font-size: 16.64px;
    line-height: 1.8;
    letter-spacing: 2.08px;
  }

  .brand-promise .more-link { margin-top: 51.9px; }
  .business-section { padding-top: 150.76px; }
  .work-section { padding-top: 149.52px; }
  .news-section { padding-top: 147.64px; }
  .recruit-section { padding: 153.88px 0 193.39px; }

  /* Recommended diagram sizing, not observed mobile layout */
  .business-diagram { padding: 40px 12px; }
  .concept-hub { width: min(100%, 280px); }

  .work-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 51.89px;
    margin-top: 50.94px;
  }

  .work-description { line-height: 1.692; }
  .work-section .more-link { margin-top: 49.91px; }

  .news-row {
    display: block;
    padding: 21.83px 0 16.64px;
    font-size: 15.6px;
    line-height: 1.7;
  }

  .news-row time { display: block; }
  .news-archive--desktop { display: none; }
  .news-archive--mobile {
    display: inline-block;
    margin-top: 21.78px;
    font-size: 15.6px;
  }

  .recruit-section .section-title {
    margin-bottom: 46.78px;
    font-size: 37.43px;
  }

  .application-link {
    margin-top: 20.79px;
    font-size: 14.56px;
    line-height: 1.5;
  }

  .site-footer { padding: 101.9px var(--gutter) 20.79px; }

  .footer-top {
    grid-template-columns: 1fr 1.12fr 89.4px;
  }

  .footer-top > .brand {
    grid-column: 1 / -1;
    margin-bottom: 46px;
  }

  .footer-nav {
    gap: 15.14px;
    font-size: 12.48px;
    line-height: 1.15;
  }

  .site-footer .contact-link {
    width: 89.4px;
    height: 44px;
    font-size: 12px;
  }

  .footer-bottom {
    grid-template-columns: 1fr auto;
    row-gap: 109px;
    margin-top: 50.3px;
  }

  .footer-socials {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 12.48px;
  }

  .footer-policy { grid-column: 1; grid-row: 2; }
  .footer-copyright { grid-column: 2; grid-row: 2; }
  .footer-policy,
  .footer-copyright { font-size: 11.44px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art,
  .brand-strip,
  .site-header,
  .more-link {
    animation: none;
    transition: none;
  }
}
```

### Static Hero Sketch

This optional markup demonstrates the line weight, fading, overlap, and text placement. It is newly authored approximation geometry, not an original asset. The gradient is an implementation choice, and the mobile crop should be tuned with the final artwork.

```html
<section class='hero' aria-labelledby='hero-title'>
  <svg class='hero-art' viewBox='0 0 1440 780'
       aria-hidden='true' focusable='false'>
    <defs>
      <linearGradient id='orbit-fade' x1='0' y1='0' x2='1' y2='1'>
        <stop offset='0' stop-color='#000' stop-opacity='.65'/>
        <stop offset='.43' stop-color='#000' stop-opacity='.04'/>
        <stop offset='.68' stop-color='#000' stop-opacity='.12'/>
        <stop offset='1' stop-color='#000' stop-opacity='.8'/>
      </linearGradient>
    </defs>
    <g fill='none' stroke='url(#orbit-fade)' stroke-width='1.3'>
      <ellipse cx='525' cy='461' rx='285' ry='100'
               transform='rotate(-3 525 461)'/>
      <ellipse cx='665' cy='362' rx='225' ry='76'/>
      <ellipse cx='837' cy='390' rx='246' ry='86'/>
      <ellipse cx='700' cy='436' rx='190' ry='71'/>
      <ellipse cx='888' cy='535' rx='349' ry='140'
               transform='rotate(3 888 535)'/>
    </g>
  </svg>
  <div class='hero-copy'>
    <h2 class='hero-title' id='hero-title'>Context Branding</h2>
    <p class='hero-tagline' lang='ja'>
      自社言語を引きだし、<br class='mobile-break'>企業の自律的な成長を促す。
    </p>
  </div>
</section>
```

### Tailwind v4 Token Mapping

Optional aliases for an implementation already using Tailwind v4. This does not imply that the original website uses Tailwind. Define the custom properties above first.

```css
@theme inline {
  --color-page: #ffffff;
  --color-ink: #000000;
  --color-promise: #f3f3f3;
  --color-diagram: #d4dde2;
  --color-diagram-blue: #2468dc;
  --color-diagram-yellow: #f6e733;
  --color-diagram-red: #e84239;

  --font-editorial: var(--font-display);
  --font-reading: var(--font-body);
  --font-navigation: var(--font-ui);

  --text-hero: var(--text-hero-size, clamp(72px, 8.3333vw, 120px));
  --text-section: var(--text-major);
  --text-section-small: var(--text-minor);
  --text-reading: var(--text-body);
  --text-project-copy: var(--text-project);

  --spacing-page: var(--gutter);
  --radius-panel: 12px;
  --radius-capsule: 300px;
}

@media (max-width: 48rem) {
  :root {
    --text-hero-size: clamp(34px, 11.1972vw, 43.67px);
  }
}
```

## Sources & Evidence

- **Inspected original and final page:** [W/A — Context Branding](https://wa-concept.jp/). The supplied browser record reports HTTP 200 and identical original/final URLs.
- **Capture time:** `2026-09-22T15:28:47.468Z`, equivalent to September 23, 2026, 00:28:47.468 JST.
- **Desktop evidence:** 1440 × 1000 CSS-pixel viewport; original-page captures of the hero, business diagram, and recruitment/footer; supplied document height approximately 6660px.
- **Mobile evidence:** 390 × 844 CSS-pixel viewport; original-page captures of the hero and lower recruitment/footer; supplied document height approximately 5940px.
- **Rendered evidence:** page text, actual link destinations, selected element rectangles, computed font families/sizes/weights/line heights, padding, radius, background colors, transitions, and custom properties for both viewport sizes.
- **Observed navigation destinations:** About, Business, Work, News, and Contact routes on the original domain, plus external recruitment, social, and policy links. These destinations were recorded but not separately inspected.
- **State evidence:** the supplied scrolled captures establish a persistent, more compact header and responsive footer arrangement. No open-menu, hover, focus, form-submission, or destination-page interaction was supplied.
- **Limitations:** exact artwork files, project imagery, font binaries, source media queries, mobile diagram composition, and animation timelines are unavailable. Some diagram bounds differ from the captured visual state. Readiness checks do not prove semantic completeness or reveal every delayed interaction.

This reference describes the current homepage evidenced by the supplied original-page captures and rendered measurements. The CSS, static SVG, accessibility improvements, and intermediate-width rules are explicitly recommended adaptations.