# Wazawaza — Corporate Website Style Reference

> A company manifesto framed by hand-drawn rules, fine Mincho text, and people connected by a warm ribbon.

**Website:** [waza2.co.jp](https://waza2.co.jp/)
**Original URL:** https://waza2.co.jp/
**Final URL:** https://waza2.co.jp/
**Response:** HTTP 200; no redirect recorded.
**Theme:** white canvas, charcoal text, a warm off-white news section, and muted ochre illustration accents.
**Inspected:** October 5, 2026, 05:37:29 JST / October 4, 2026, 20:37:29 UTC, according to the supplied capture record.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current corporate homepage, including its opening illustration, introduction, numbered corporate-identity objectives, closing date and link, news section, persistent navigation shell, and copyright footer. Navigation destinations are recorded, but their pages and the expanded menu were not inspected.

Wazawaza introduces the company through an illustrated statement and sustained reading. A wide drawing of people handling one continuous ribbon establishes warmth and connection. Below it, a narrow column of Japanese Mincho text carries the company’s principles. Vertical headings, understated underlines, and large white intervals establish hierarchy without prominent button fills or decorative cards.

The desktop composition has a persistent 130px left rail. Its irregular right edge resembles a line drawn by hand. The prose is centered within the remaining page area, while the heavy vertical introduction heading hangs to its left. On mobile, the rail becomes a 60px top header, and the vertical heading moves above the prose. News appears near the end in a warm neutral band: three entries across on desktop and one visible slide with flanking chevrons on mobile.

## How to Read This Reference

- **Measured** values come from the supplied rendered DOM, computed styles, and element rectangles. Coordinates refer to document positions unless stated otherwise.
- **Calculated** values are arithmetic derived from those measurements, such as the 40px space between desktop news entries.
- **Estimated** values come from visual inspection of the supplied original-page screenshots. Illustration colors, drawn-rule thickness, and some image-frame details belong to this category.
- **Recommended** values and behaviors are implementation guidance. They are not claims about untested original behavior.
- Font-family declarations identify the source stacks; they do not independently prove which font file rendered each glyph.
- The screenshots show settled states. Recorded animation declarations provide timing evidence, but not complete keyframes, trigger logic, or interaction outcomes.
- All custom-property names introduced below are reference aliases unless explicitly identified as source properties.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Role and evidence |
| --- | --- | --- | --- |
| White Canvas | `#FFFFFF` | `--color-paper` | Measured body and header background; also the visible main reading surface |
| Charcoal Ink | `#323232` | `--color-ink` | Measured body, heading, and link text color |
| Warm News Surface | `#F6F2EF` | `--color-news` | Measured news-section background, `rgb(246, 242, 239)` |
| Ribbon Ochre | Approximately `#EBC88F` | `--color-ribbon` | Visual estimate of the illustration’s ribbon and hair accents; not a measured CSS color |
| Drawn Rule | Approximately the charcoal ink color | `--color-rule` | Visual correspondence with the dark shell boundaries; exact stroke color was not extracted |

The illustration provides the main accent color. Ochre does not appear as a general button fill, link color, or selection system in the supplied states. The news photographs and graphics introduce their own colors, including a blue logo; these remain image content.

The DOM includes generic WordPress palette, gradient, and shadow presets, plus a blue carousel theme variable. Those declarations do not demonstrate that the visible page uses a colorful UI palette, gradients, shadows, or blue navigation arrows. The observed controls remain dark and restrained.

No alternate theme or color-switching interaction was evidenced.

## Tokens — Typography

### Mincho — Reading and Editorial Navigation

**Measured source stack:**

```css
dnp-shuei-mincho-pr6, '游明朝', YuMincho,
'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3',
'Hiragino Mincho ProN', HG明朝E, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif
```

The source declares weight `500` for body copy. Fine strokes, generous leading, and persistent tracking make the long introduction feel like a printed statement. News dates and titles retain the same editorial character.

Body tracking is a measured **1.6px at both viewports**. It therefore equals `0.1em` at the desktop 16px size, but approximately `0.114em` at the mobile 14px size. A universal `0.1em` substitution would slightly alter the mobile rhythm.

### Heavy Gothic — Introduction Heading

- **Measured source family:** `toppan-bunkyu-midashi-go-std, sans-serif`.
- **Weight:** `900`.
- **Desktop size:** `46px`, with a computed `73.6px` line height.
- **Mobile size:** `26px`, with a computed `41.6px` line height.
- **Treatment:** the label “はじめに” is visibly vertical with upright characters.

This is the strongest typographic contrast on the page. The heavy heading anchors a much lighter, finer reading column. Preserve that contrast rather than increasing the size or weight of every section heading.

The supplied style extraction does not include `writing-mode`. The vertical appearance is screenshot evidence; using `writing-mode: vertical-rl` in a new implementation is a recommended way to reproduce it.

### Utility Sans — Secondary Destinations

The DOM declares the following stack for the small external-store links in the navigation content:

```css
'游ゴシック体', YuGothic, '游ゴシック Medium',
'Yu Gothic Medium', '游ゴシック', 'Yu Gothic',
Verdana, 'メイリオ', Meiryo, sans-serif
```

These links use `12px`, weight `400`, `16.8px` line height, and `1.6px` tracking. Their expanded-menu presentation was not visually tested.

The visible copyright also appears small and sans-serif. Its child font declaration was not supplied, so the exact copyright font should remain unconfirmed.

### Type Scale

| Role | Desktop | Mobile | Weight | Tracking | Evidence |
| --- | --- | --- | --- | --- | --- |
| Main prose and news-link base | `16px / 28.8px` | `14px / 25.2px` | `500` | `1.6px` | Computed |
| Introduction heading | `46px / 73.6px` | `26px / 41.6px` | `900` | `1.6px` | Computed; vertical appearance observed |
| Numbered objective text | `16.8px / 33.6px` | `14.7px / 29.4px` | `500` | `1.6px` | Computed |
| News heading | `28px / 50.4px` | `20px / 36px` | `600` | `1.6px` | Computed; vertical appearance observed |
| Closing and archive links | `17.6px / 31.68px` | `15.4px / 27.72px` | `600` | `3px` | Computed |
| Primary navigation links | `14px / 25.2px` | `14px / 25.2px` | `500` | `1.6px` | DOM declaration; expanded state unverified |
| External-store navigation | `12px / 16.8px` | `12px / 16.8px` | `400` | `1.6px` | DOM declaration; expanded state unverified |
| Copyright text | Approximately `12px` | Approximately `12px` | Unconfirmed | Visibly tracked | Screenshot estimate; child style unavailable |

For vertical headings, the computed line height determines the cross-axis line box. It should not be interpreted as the vertical distance between every upright character.

The source HTML root computes to `10px`; body text has its own explicit size. The Quick Start uses explicit pixel values and does not require changing a project’s root font size.

## Tokens — Spacing & Shapes

**Density:** sparse shell, generous editorial margins, compact unboxed controls.

There is no demonstrated global spacing-token scale. The following values describe actual relationships rather than inventing an underlying eight-point system.

### Spacing Scale

| Relationship | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Header inset | `33px` | `15px` horizontal; `3px` bottom | Measured padding |
| Illustration top inset | `32px` | `28px` below the header | Measured padding |
| Illustration side inset | `39.30px` per side | `11.69px` per side | Measured; approximately 3% of available width |
| Introduction section top inset | `80px` | `42px` | Measured |
| Prose offset below desktop heading’s top | `48px` | Removed | Measured paragraph padding |
| Mobile heading-to-prose separation | Not applicable | Approximately `20.8px` | Calculated from element bounds |
| Objective row separation | Approximately `16.8px` | Approximately `14.7px` | Calculated between rectangles |
| Date-to-next-link separation | `32px` | `28px` | Calculated between rectangles |
| Introduction bottom padding | `196.5px` | `58.5px` | Measured |
| News section top / bottom padding | `80px / 96px` | `42px / 49px` | Measured |
| News-entry horizontal gap | `40px` | No gap between adjacent track entries | Calculated from entry positions |
| News image-to-date spacing | Approximately `16px` | Approximately `14px` | Inferred from image frame and date position |
| Footer vertical padding | `16px` | `14px` | Measured |

Both introduction bottom-padding values equal 15% of the available main-content width. This is consistent with percentage-based padding, but the original CSS expression was not supplied.

The empty space after the closing link is larger than that padding alone: approximately **260.5px desktop** and **114.5px mobile**, measured from the link’s bottom to the news section’s top. Preserve the complete pause between sections when matching the composition.

### Border Radius and Rules

| Element | Treatment | Evidence |
| --- | --- | --- |
| News entries and image frames | Square corners | Visible screenshots; sampled anchors have `0px` radius |
| Reading and news surfaces | Flat, without visible elevation | Screenshots |
| Header and footer boundaries | Slightly irregular dark lines, approximately 1–2px of visible stroke | Visual estimate |
| Text links | Fine straight underline | Screenshots |
| Numbered objective emphasis | Dotted underline following wrapped text | Screenshots |
| Menu button box | Computed `10px` radius on a transparent control | DOM; no visible rounded button surface |

The menu button’s computed radius is not evidence for a rounded-card design system. The dominant geometry remains square and open.

### Layout Measurements

| Element | Desktop: 1440 × 1000 | Mobile: 390 × 844 |
| --- | --- | --- |
| Persistent header | `130 × 1000px`, at left | `390 × 60px`, across top |
| Logo box | `64 × 50.19px`, at `(33, 33)` | `40 × 31.36px`, at approximately `(15, 12.81)` |
| Menu button rectangle | `32 × 24px`, at `(49, 943)` | `32 × 24px`, at approximately `(343, 16.48)` |
| Main area | Starts at `x = 130`; width `1310px` | Full `390px`; `60px` top padding |
| Opening section | Height `573.81px` | Starts at `y = 60`; height `189.31px` |
| Illustration content box | Approximately `1231.41 × 541.82px` | Approximately `366.63 × 161.32px` |
| Prose column | `500px` wide, `x = 535` | `308.13px` wide, `x = 40.94` |
| Introduction heading box | `119.59 × 190.41px`, including right padding | `41.59 × 110.41px` |
| News outer content span | `960px`, starting at `x = 305` | Approximately `327.63px`, starting at `x = 31.19` |
| News heading allocation | `96px` wide | `60px` wide |
| First news entry | `247.98px` wide, `x = 401` | `227.63px` wide, `x = 111.19` |
| News section document start | `y = 2444.61` | `y = 2124.13` |
| Footer height | `53.59px` | `49.59px` |
| Document height | Approximately `3023.44px` | Approximately `2577.95px` |

Illustration content-box dimensions are calculated from section padding and the supplied image’s aspect ratio. They are not separately extracted image rectangles.

## Components

### Persistent Identity Rail and Mobile Header

**Role:** maintain company identity and access to navigation while the document scrolls.

Desktop anatomy:

1. A white rail occupying the leftmost 130px.
2. A small drawn logo near the top, inside a homepage link and H1 wrapper.
3. A three-line menu control near the bottom.
4. A hand-drawn-looking vertical rule along the rail’s right edge.

The logo’s intrinsic dimensions are `191 × 150`; its measured desktop display box is approximately `64 × 50px`. Keep its original proportions. The navigation control is visually simple: three dark horizontal lines without a visible filled container.

On mobile, these parts form a 60px horizontal header. The logo sits left at 40px wide; the same 32px-wide menu glyph sits right. The irregular rule moves to the bottom. The header remains visible in the supplied lower-page capture, as the desktop rail does across its scroll captures.

The original button rectangle is small. A recommended adaptation is a 44px hit area that preserves the observed glyph size and position.

### Opening Illustration

**Role:** establish the company’s human, cooperative character before the long statement.

A wide PNG shows people in casual clothes, aprons, and caps holding or becoming wrapped in a continuous ochre ribbon. Thin gray linework, white clothing, and restrained warm fills allow the drawing to merge with the white canvas.

The image’s intrinsic ratio is `2500:1100`, approximately `2.273:1`. Both viewport measurements are consistent with proportional scaling across approximately 94% of the main area. The mobile capture retains the complete group rather than replacing it with a crop of one character.

There is no text overlay or primary button on the artwork. The introduction begins below it. Preserve the drawing’s internal white space; the visible figures do not fill every pixel of the image box.

### Introduction Heading and Manifesto

**Role:** introduce the company’s principles through sustained reading.

The desktop prose column is centered within the 1310px main area:

`130 + (1310 − 500) / 2 = 535px`

The heading is outside that column on its left. Its total measured width includes a roughly 73.6px vertical line box and 46px right padding. Centering the heading and prose together would move the text away from the observed position.

The heading and paragraph element begin at the same document top, approximately `653.81px`. The paragraph has 48px top padding, so its text content begins around `701.81px`. This makes the heading visually lead the prose.

On mobile, the heading becomes a centered vertical block above the article. Its bottom is around `401.72px`, followed by a roughly 20.8px gap before the prose box at `422.52px`. The text column leaves approximately 41px on either side.

Paragraphs have clear blank-line separation. They discuss bread, product selection, health, fair relationships with producers, and corporate identity. The layout gives this material the visual importance normally reserved for a large promotional headline.

### Numbered Corporate-Identity Objectives

**Role:** summarize three intended outcomes within the statement.

Each item combines a short horizontal dash, a two-digit number, and a sentence with dotted underline emphasis. The labels are `01`, `02`, and `03`. Text is slightly larger than the body: 105% of the sampled body size, with twice-the-font-size line height.

Wrapped lines retain their underline. Numbers and dashes occupy a separate left area, maintaining an orderly reading edge for the sentences.

The objective sentences are paragraph elements in the supplied DOM, not recorded links. Their dotted underlines should not be treated as proof of navigation. For a new implementation, use a semantic ordered list and keep emphasis separate from link styling.

### Dated Closing and Mind Link

**Role:** conclude the statement and offer a continuation into the company’s principles.

A closing paragraph leads to the right-aligned editorial date `2021.08.24`. This date belongs to the statement; it is not the inspection date or evidence of a historical screenshot.

Below it, the centered “わざわざの心” link points to `/mind/`. It uses weight 600, 3px tracking, a fine underline beneath the label, and a small right-pointing arrow before the text. Its measured left padding is 25px, providing room for that arrow.

The desktop link is `17.6px`; mobile reduces it to `15.4px`. It remains an understated text action, followed by a large white interval before the news surface begins.

### News Section

**Role:** provide current company updates after the manifesto.

The background changes to `#F6F2EF`. A vertical Mincho heading, “お知らせ”, sits to the left of the entries. It is lighter in weight and smaller than the introduction heading.

Desktop shows three entries in a row. Their left edges are approximately `401px`, `688.98px`, and `976.97px`, producing 40px spaces between the approximately 248px-wide entries. The complete content wrapper measures 960px, including the heading allocation and trailing space.

Mobile preserves the heading at the left while showing one approximately 228px-wide entry farther right. Small chevrons flank the image area. The remaining entries have adjacent offscreen DOM rectangles, consistent with a horizontal slider track. The supplied record does not show a slide change, so swipe support, arrow behavior, looping, and autoplay remain unverified.

The centered “一覧を見る” link points to `/news/`. It uses the same tracked, underlined text treatment as the closing link, without the leading arrow shown on “わざわざの心”.

### News Entry

**Role:** link a visual update to its date and title.

An entry is a single anchor containing a landscape image, a date, and a wrapping title. It has no visible card border, shadow, rounded container, category pill, or filled CTA.

The image frames appear approximately 65% as tall as they are wide, or about `20:13`. That is a visual and geometric inference; the image’s actual fit declaration was not included. Dates begin roughly 16px below the image on desktop and 14px below on mobile. The title follows in the same editorial type scale.

The inspected entries are:

- A storefront photograph for the update dated `2026.03.17`, linked to `/news/2185/`.
- A blue logo on white for the update dated `2026.03.11`, linked to `/news/2188/`.
- A recruitment graphic for the update dated `2026.01.09`, linked to `/news/2175/`.

Preserve the difference between photographic and graphic content. A recommended implementation can crop photographs gently while containing logos and posters within the same white-backed frame.

### Navigation Content — DOM Evidence Only

The rendered DOM records links to company principles, behavior, background, news, recruitment, stores, wholesale information, and privacy information. It also contains social destinations and external store links.

The labels containing `ideal` and `sustainable` are paragraph elements in the supplied sample, rather than anchors. Do not invent destinations for them.

The captured interface shows the menu closed. The DOM inventory does not establish the expanded panel’s visible width, backdrop, transition, focus behavior, or scrolling. Those details should be specified and tested separately when building a new interface.

### Copyright Footer

**Role:** close the page quietly.

A white footer follows the news surface, separated by another irregular horizontal rule. The copyright line is centered and visibly tracked: “© 2009 - 2026 wazawaza inc.”

The footer spans the main area to the right of the desktop rail and the entire mobile viewport. It is approximately 54px high on desktop and 50px on mobile. Avoid adding a large multicolumn footer to this observed homepage composition.

## Tokens — Motion & Interaction

| Element | Recorded declaration or evidence | Interpretation and limit |
| --- | --- | --- |
| Opening illustration section | `0.6s ease-in 0.3s forwards fadeInUp` | A finite entrance is declared at both viewports; exact translation and opacity keyframes were not supplied |
| Introduction heading | `0.6s ease-in 0.5s forwards fadeIn` | A later entrance is declared; complete keyframes were not supplied |
| Mobile news heading | `0.6s ease-in 0.3s forwards fadeInUp` | Present in the mobile computed sample; trigger behavior unverified |
| Mobile archive-link wrapper | `0.6s ease-in 1s forwards fadeInUp` | A longer delayed entrance is declared in that sample |
| Logo, navigation, news, and text anchors | `0.3s ease-in-out` transition | Timing is evidenced; the changed properties and final hover appearance are not |
| Header persistence | Stable placement across scroll captures | Supports the observed persistent navigation shell |
| Mobile news controls | Visible left/right chevrons and horizontal entry positions | Slider affordance is evidenced; its operation was not exercised |

Many sampled elements report `transition: all` without a duration. That alone does not demonstrate visible animation.

The screenshots were captured after readiness checks that awaited finite motion and layout stability. They do not show animation trajectories. The names `fadeIn` and `fadeInUp` should not be expanded into invented movement distances, scroll thresholds, or stagger sequences.

**Recommended adaptation:** use subtle entrance movement, such as 12px, only when useful; keep the supplied 600ms duration and documented delays as reference timings. Make all content available without animation, respect reduced-motion preferences, and keep the news carousel manually controlled unless another requirement establishes autoplay.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Main canvas | Pure white | Supports long-form reading and the illustration’s white space |
| Persistent navigation | Pure white with a drawn boundary | Separates navigation without introducing a heavy colored bar |
| Introduction | Unboxed prose on the canvas | Gives the statement an editorial character |
| News section | Warm off-white `#F6F2EF` | Marks a change from principles to updates |
| News entry | Transparent, square image above text | Groups related information without card chrome |
| Footer | White with a drawn top rule | Provides a quiet ending |

Separation comes from blank space, linework, type contrast, and one broad background-color change. No visible shadow-based elevation system is needed.

## Imagery

The main illustration combines light gray outlines, white areas, and warm ochre accents. Its irregular drawing style is echoed by the logo and shell rules. The ribbon gives the figures a shared visual relationship, while their varied poses prevent the composition from becoming a rigid row of icons.

Keep the artwork smooth and proportionally scaled. This is not a pixel-art interface: do not apply nearest-neighbor scaling, heavy grain, halftone processing, or artificial paper texture. The observed canvas is clean white.

Photography appears in the news section, where a storefront and passing person provide a real-world counterpoint to the drawn introduction. Logos and recruitment graphics share the same entry structure without being forced into a single illustration treatment.

### Observed Asset References

Paths are relative to `https://waza2.co.jp/`. They identify assets present in the supplied original-page evidence; they are not bundled with this reference.

| Asset | Observed path | Declared intrinsic dimensions | Use |
| --- | --- | --- | --- |
| Drawn company logo | `/wp-content/themes/waza2_themes/common/img/logo.svg` | `191 × 150` | Desktop rail and mobile header |
| Ribbon-and-people illustration | `/wp-content/themes/waza2_themes/common/img/top-main_illust.png` | `2500 × 1100` | Opening section |
| Storefront photograph | `/wp-content/uploads/2026/03/20260312-31.jpg` | `1920 × 1280` | First news entry |
| Store logo graphic | `/wp-content/uploads/2023/01/wazamart-logo.jpg` | `843 × 596` | Second news entry |
| Recruitment graphic | `/wp-content/uploads/2026/01/Shopfiy.jpg` | `1800 × 1200` | Third news entry |

The main image has the recorded alt text “はじめに”; the logo identifies “パンと日用品の店　わざわざ”. News-image alternative text describes the associated announcements.

No asset path for the irregular rules was supplied. A replacement SVG line should be labeled an approximation, not represented as an extracted original asset. No illustrator or production credit is established by these paths.

## Layout & Responsive Behavior

### Desktop Composition

The page scrolls as a document beside a persistent rail. The content does not occupy a fixed-height application viewport.

The opening illustration is broad, using nearly all of the remaining main width. The subsequent prose contracts sharply to 500px, centered at `x = 785px`, the midpoint of the main area. This change in scale is central to the design: communal artwork first, concentrated reading second.

The introduction heading hangs outside the prose’s left edge. The news section later expands to a 960px wrapper, allowing three visual entries and a vertical section label.

### Mobile Composition

At 390px:

- The desktop rail becomes a 60px top header.
- Main content reserves that 60px above the illustration.
- The illustration retains its full composition, approximately 367px wide.
- The introduction heading is centered above the text and reduces from 46px to 26px.
- Body text reduces from 16px to 14px while retaining 1.6px tracking and 1.8 line height.
- The prose column is approximately 308px wide, leaving 41px side margins.
- News retains a left vertical label and shows one approximately 228px-wide entry with side chevrons.
- The footer remains full width.

The measured mobile document is shorter overall despite the narrower prose. The much smaller opening illustration and reduced section spacing account for substantial savings. Do not reproduce that shorter length by removing content.

### Breakpoint and Intermediate-Width Limits

The exact source breakpoint was not supplied. Two observed viewport states do not establish behavior at tablets, landscape phones, or very wide monitors.

**Recommended starting point:** switch the rail to the top header near 900px, then test intermediate widths. A desktop prose column plus its hanging heading needs about 740px of main width to avoid crowding the left boundary. Preserve that relationship when choosing the breakpoint.

Widths of approximately 79% for mobile prose and 84% for the mobile news wrapper reproduce the supplied 390px geometry closely. These are implementation approximations, not verified source formulas.

## Do’s and Don’ts

### Do

- Center the desktop prose within the area remaining after the 130px rail.
- Place the desktop introduction heading outside the prose column, then above it on mobile.
- Preserve the contrast between heavy Gothic introduction lettering and fine Mincho body copy.
- Keep 1.6px body tracking at both measured sizes.
- Preserve the complete opening illustration and its white space.
- Use irregular shell rules sparingly, alongside otherwise clean geometry.
- Keep news entries square, flat, and unboxed.
- Retain the warm news-section background and the quiet white footer.
- Distinguish dotted objective emphasis from actual linked text.
- Maintain the long pause between the statement’s closing link and the news section.

### Don’t

- Don’t replace the company statement with a generic feature grid or oversized promotional headline.
- Don’t center the heading and prose as a single desktop group; that changes the observed reading alignment.
- Don’t turn the ribbon’s ochre into an invented universal CTA color.
- Don’t adopt generic CMS palette presets as the visible site palette.
- Don’t add rounded cards, gradients, glass effects, or soft shadows.
- Don’t crop the mobile opening image to a single figure.
- Don’t turn all navigation text found in the DOM into visible or clickable controls.
- Don’t claim verified swipe behavior, autoplay, menu animation, or hover effects from settled screenshots.
- Don’t use the statement’s 2021 date as the capture date.
- Don’t infer production credits from file names or visual resemblance.

## Recommended Implementation Additions

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

- Give the menu control an accessible name, `aria-expanded`, and a relationship to the navigation it opens. Keep closed navigation out of the keyboard focus sequence.
- Preserve the 32px menu glyph while expanding its hit area to approximately 44px.
- If the menu becomes an overlay, define focus entry, Escape-to-close behavior, and focus restoration explicitly.
- Make carousel arrows real buttons with clear previous/next names. Keep every news item reachable by keyboard and avoid relying exclusively on gestures.
- Provide a visible focus treatment that works on both white and warm off-white surfaces.
- Respect reduced-motion preferences and avoid leaving content hidden when entrance scripts fail.
- Use semantic paragraphs, an ordered list for the three objectives, and `time` elements for dates.
- Verify readability under text zoom. Consider a 15–16px mobile body size when accessibility requirements outweigh exact reproduction of the observed 14px size.
- Load the named fonts only when available and licensed for the implementation. Check fallback wrapping before setting final section spacing.
- Preserve image dimensions to reserve space. Choose descriptive or decorative alternative text according to the image’s actual role in the new content.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas and navigation: `#FFFFFF`.
- Text: `#323232`.
- News surface: `#F6F2EF`.
- Illustration accent: muted ochre, approximately `#EBC88F`; keep it within artwork unless new requirements justify another role.
- Dividers: thin dark lines with small hand-drawn irregularities.
- Links: dark text with restrained underlines; no large filled action buttons in the observed composition.

### Overall Prompt

“Create an editorial corporate homepage inspired by Wazawaza’s observed layout. Use a white canvas, charcoal `#323232` text, a warm `#F6F2EF` news section, and a wide illustration of people connected by a muted ochre ribbon. On desktop, reserve a persistent 130px left rail with a small drawn logo at the top, a three-line menu glyph near the bottom, and an irregular right rule. Center a 500px Mincho prose column in the remaining area. Hang a heavy 46px vertical introduction heading to its left. Use 16px body text, 28.8px leading, and 1.6px tracking. End the statement with three numbered, dotted-underlined objectives, a right-aligned date, and a centered underlined continuation link. Show three flat news entries beneath a vertical label. At a 390px mobile viewport, use a 60px top header, a centered 26px vertical introduction heading, approximately 308px-wide prose at 14px/25.2px, and one visible news slide. Preserve generous white space and square imagery.”

### Example Component Prompts

1. **Navigation shell:** “Build a white 130px desktop rail with a 64px-wide drawn logo 33px from the top, a bottom menu glyph, and a slightly uneven charcoal boundary. On mobile, convert it into a 60px top bar with a 40px logo and right-aligned menu. Use a 44px accessible button target while keeping the glyph 32px wide.”
2. **Manifesto block:** “Center a 500px Japanese Mincho reading column within the area to the right of the navigation rail. Place ‘はじめに’ vertically outside its left edge in heavy Gothic type. Let the prose start 48px below the heading’s top. On mobile, center the vertical heading above the article with about 21px separation.”
3. **Objective list:** “Create three editorial objectives labeled 01, 02, and 03. Use a small dash before each number, separate number and text columns, and dotted underlines that continue across wrapped text. Keep the sentences as noninteractive content.”
4. **Closing link:** “Place a right-aligned statement date above a centered ‘わざわざの心’ text link. Add a fine leading arrow, a straight underline beneath the label, 3px tracking, and substantial white space before the following section.”
5. **News section:** “Use a full-width warm off-white band with a vertical Mincho ‘お知らせ’ label and three square-cornered landscape entries. Each entry contains only an image, a date, and a wrapping title. On mobile, preserve the side label and expose one entry with understated chevrons.”
6. **Entrance behavior:** “Use optional 600ms ease-in entrances with a 300ms illustration delay and a 500ms heading delay. Treat a small upward offset as a new implementation choice. Keep content visible without motion, respect reduced motion, and leave carousel advancement under user control.”

## Quick Start

### CSS Custom Properties

This is a usable adaptation of the observed shell and content relationships, not a copy of the original stylesheet. Exact colors and sampled type values are retained. The 900px breakpoint, percentage-based wrapper approximations, SVG rule patterns, image-fit choices, 44px targets, and hover feedback are recommendations.

Expected structure:

- `.site-header`, `.site-main`, and `.site-footer` are siblings.
- `.intro-art` contains the opening image.
- `.intro-copy` contains `.intro-title`, `.essay`, `.ci-objectives`, `.closing`, `.statement-date`, and `.mind-link-row`.
- Each objective is an `li` with a text `span`.
- `.news-inner` contains `.news-row` and `.news-all`.
- `.news-row` contains `.news-heading` and `.news-slider`.
- `.news-slider` contains optional arrow buttons and `.news-window > .news-track > .news-card`.
- Each news card is an anchor wrapping an image, a date, and a title.

```css
:root {
  /* Measured colors; the artwork accent is an estimate. */
  --color-paper: #ffffff;
  --color-ink: #323232;
  --color-news: #f6f2ef;
  --color-ribbon: #ebc88f;

  /* Source-declared families; font files require separate setup. */
  --font-editorial: dnp-shuei-mincho-pr6, '游明朝', YuMincho,
    'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3',
    'Hiragino Mincho ProN', HG明朝E, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
  --font-heading: toppan-bunkyu-midashi-go-std, sans-serif;
  --font-utility: '游ゴシック体', YuGothic, '游ゴシック Medium',
    'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', Verdana,
    'メイリオ', Meiryo, sans-serif;

  --text-body: 16px;
  --text-intro: 46px;
  --text-objective: 16.8px;
  --text-news-heading: 28px;
  --text-link: 17.6px;
  --leading-body: 1.8;
  --tracking-body: 1.6px;
  --tracking-link: 3px;

  --rail-width: 130px;
  --header-height: 60px;
  --reading-width: 500px;
  --news-width: 960px;
  --target-size: 44px;

  --motion-link: 300ms ease-in-out;
  --motion-enter: 600ms ease-in;

  /* Recommended approximations, not extracted original rule assets. */
  --rule-horizontal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='4' viewBox='0 0 100 4'%3E%3Cpath d='M0 2 L8 1.6 L15 2.4 L23 1.5 L32 2.2 L41 1.8 L49 2.5 L58 1.7 L68 2.3 L78 1.5 L89 2.2 L100 2' fill='none' stroke='%23323232' stroke-width='1.6'/%3E%3C/svg%3E");
  --rule-vertical: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='100' viewBox='0 0 4 100'%3E%3Cpath d='M2 0 L1.6 8 L2.4 15 L1.5 23 L2.2 32 L1.8 41 L2.5 49 L1.7 58 L2.3 68 L1.5 78 L2.2 89 L2 100' fill='none' stroke='%23323232' stroke-width='1.6'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-editorial);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

a { color: inherit; }
button { font: inherit; }
img { display: block; max-width: 100%; }

.site-header {
  position: fixed;
  z-index: 20;
  inset: 0 auto 0 0;
  width: var(--rail-width);
  height: 100dvh;
  padding: 33px;
  background: var(--color-paper);
}

.site-header::after,
.site-footer::before {
  content: '';
  position: absolute;
  pointer-events: none;
}

.site-header::after {
  inset: 0 0 0 auto;
  width: 4px;
  background: var(--rule-vertical) repeat-y;
}

.brand {
  display: block;
  width: 64px;
  margin: 0;
  transition: opacity var(--motion-link);
}

.brand img { width: 100%; height: auto; }

.menu-button {
  position: absolute;
  left: calc(50% - 22px);
  bottom: 23px;
  display: grid;
  place-items: center;
  width: var(--target-size);
  height: var(--target-size);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.menu-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 32px;
  height: 20px;
}

.menu-icon span {
  display: block;
  height: 2px;
  background: currentColor;
}

.site-main,
.site-footer {
  margin-left: var(--rail-width);
}

.intro-art { padding: 32px 3% 0; }
.intro-art img { width: 100%; height: auto; }

.intro { padding: 80px 0 15%; }

.intro-copy {
  position: relative;
  display: flow-root;
  width: var(--reading-width);
  margin-inline: auto;
}

.intro-title {
  position: absolute;
  top: 0;
  right: 100%;
  margin: 0;
  padding-right: 46px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: var(--text-intro);
  font-weight: 900;
  line-height: 1.6;
}

.essay { padding-top: 48px; }
.essay p { margin: 0; }
.essay p + p { margin-top: 1.8em; }

.ci-objectives {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: objective;
}

.ci-objectives li {
  position: relative;
  display: grid;
  grid-template-columns: 21.24px minmax(0, 1fr);
  column-gap: 13.44px;
  counter-increment: objective;
  font-size: var(--text-objective);
  line-height: 2;
}

.ci-objectives li + li { margin-top: 16.8px; }

.ci-objectives li::before {
  content: counter(objective, decimal-leading-zero);
}

.ci-objectives li::after {
  content: '';
  position: absolute;
  top: 1em;
  left: -35px;
  width: 25px;
  height: 1px;
  background: currentColor;
}

.ci-objectives span {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 7px;
}

.closing { margin: 81.6px 0 0; }
.statement-date { margin: 32px 0 0; text-align: right; }
.mind-link-row { margin: 32px 0 64px; text-align: center; }

.text-link {
  position: relative;
  display: inline-block;
  padding-block: 3px;
  font-size: var(--text-link);
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: var(--tracking-link);
  text-decoration: none;
}

.text-link .label {
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
}

.text-link--arrow { padding-left: 25px; }
.text-link--arrow::before {
  content: '→';
  position: absolute;
  left: 0;
  font-weight: 400;
}

.news {
  padding: 80px 0 96px;
  background: var(--color-news);
}

.news-inner {
  width: min(var(--news-width), 84%);
  margin-inline: auto;
}

.news-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
}

.news-heading {
  margin: 0;
  font-size: var(--text-news-heading);
  font-weight: 600;
  line-height: 1.8;
}

.news-heading span {
  display: block;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.news-slider { position: relative; min-width: 0; }

.news-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-right: 40px;
}

.news-card {
  display: block;
  min-width: 0;
  text-decoration: none;
  transition: opacity var(--motion-link);
}

.news-card img {
  width: 100%;
  aspect-ratio: 20 / 13;
  object-fit: cover;
  border-radius: 0;
}

/* Recommended fit for logos and posters. */
.news-card img.is-graphic {
  object-fit: contain;
  background: var(--color-paper);
}

.news-date { display: block; margin-top: 16px; }
.news-title { margin: 0; font: inherit; }
.news-all { margin: 48px 0 0; text-align: center; }
.news-arrow { display: none; }

.site-footer {
  position: relative;
  padding: 16px 0;
  text-align: center;
  background: var(--color-paper);
  /* Copyright child styling is a visual approximation. */
  font-family: var(--font-utility);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
}

.site-footer::before {
  inset: 0 0 auto;
  height: 4px;
  background: var(--rule-horizontal) repeat-x;
}

.site-footer p { margin: 0; }

/* Recommended feedback; the original hover endpoint is unverified. */
@media (hover: hover) {
  .brand:hover,
  .news-card:hover { opacity: 0.8; }
}

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 4px;
}

/* Recommended breakpoint; only the two endpoint layouts were observed. */
@media (max-width: 900px) {
  :root {
    --text-body: 14px;
    --text-intro: 26px;
    --text-objective: 14.7px;
    --text-news-heading: 20px;
    --text-link: 15.4px;
  }

  .site-header {
    inset: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--header-height);
    padding: 0 15px 3px;
  }

  .site-header::after {
    inset: auto 0 0;
    width: 100%;
    height: 4px;
    background: var(--rule-horizontal) repeat-x;
  }

  .brand { width: 40px; }
  .menu-button { position: static; margin-right: -6px; }
  .site-main, .site-footer { margin-left: 0; }
  .site-main { padding-top: var(--header-height); }
  .intro-art { padding-top: 28px; }
  .intro { padding-top: 42px; }
  .intro-copy { width: min(var(--reading-width), 79%); }

  .intro-title {
    position: static;
    width: max-content;
    margin: 0 auto 20.8px;
    padding: 0;
  }

  .essay { padding-top: 0; }
  .ci-objectives { margin-top: 28px; padding-left: 28px; }

  .ci-objectives li {
    grid-template-columns: 21px minmax(0, 1fr);
    column-gap: 11.76px;
  }

  .ci-objectives li + li { margin-top: 14.7px; }
  .ci-objectives li::after { left: -28px; width: 18px; }
  .closing { margin-top: 29.4px; }
  .statement-date { margin-top: 28px; }
  .mind-link-row { margin: 28px 0 56px; }

  .news { padding: 42px 0 49px; }
  .news-inner { width: 84%; }
  .news-row { grid-template-columns: 60px minmax(0, 1fr); }

  /* Native scrolling is a usable fallback for a scripted carousel. */
  .news-window {
    margin-inline: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .news-track { display: flex; gap: 0; padding: 0; }
  .news-card { flex: 0 0 100%; scroll-snap-align: start; }
  .news-date { margin-top: 14px; }
  .news-all { margin-top: 42px; }

  .news-arrow {
    position: absolute;
    z-index: 1;
    top: calc((84vw - 100px) * 0.325);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    transform: translateY(-50%);
    cursor: pointer;
  }

  .news-arrow::before {
    content: '';
    width: 8px;
    height: 8px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
  }

  .news-arrow--previous { left: -20px; }
  .news-arrow--previous::before { transform: rotate(-135deg); }
  .news-arrow--next { right: -20px; }
  .site-footer { padding-block: 14px; }
}

/* Optional entrances: durations are source-derived; 12px is recommended. */
.enhance-motion .intro-art {
  animation: reference-rise var(--motion-enter) 300ms both;
}

.enhance-motion .intro-title {
  animation: reference-fade var(--motion-enter) 500ms both;
}

@keyframes reference-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes reference-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .enhance-motion .intro-art,
  .enhance-motion .intro-title { animation: none; }
  .brand, .news-card { transition: none; }
  .news-window { scroll-behavior: auto; }
}
```

Menu state management is separate from this CSS. If arrow buttons are included, connect them to a one-viewport-width scroll of `.news-window` and maintain appropriate enabled states. Do not render nonfunctional controls. The native scroll fallback keeps the news entries available without a carousel library.

The shell proportions are intended to reproduce the supplied endpoints. Exact line wrapping and total document height depend on the loaded font and actual copy; do not enforce those heights with fixed section dimensions.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-paper: #ffffff;
  --color-ink: #323232;
  --color-news: #f6f2ef;
  --color-ribbon: #ebc88f;

  --font-reading: var(--font-editorial);
  --font-display: var(--font-heading);
  --font-interface: var(--font-utility);

  --text-reading: var(--text-body);
  --text-introduction: var(--text-intro);
  --text-objective-copy: var(--text-objective);
  --text-news-label: var(--text-news-heading);
  --text-editorial-link: var(--text-link);

  --spacing-rail: var(--rail-width);
  --spacing-header: var(--header-height);
  --spacing-reading: var(--reading-width);
  --spacing-target: var(--target-size);
}
```

## Sources & Evidence

- **Inspected original and final page:** [https://waza2.co.jp/](https://waza2.co.jp/). The supplied retrieval record reports HTTP 200 and the same original/final URL.
- **Capture timestamp:** `2026-10-04T20:37:29.015Z`, equivalent to October 5, 2026, 05:37:29.015 JST.
- **Desktop evidence:** three supplied 1440 × 1000 screenshots covering the opening, middle prose and objective list, and the closing/news/footer region; rendered DOM and computed-style measurements at that viewport.
- **Mobile evidence:** two supplied 390 × 844 screenshots covering the opening and lower-page region; rendered DOM and computed-style measurements, including offscreen news-entry positions.
- **Original-page identity:** the document title is “株式会社わざわざ”; the logo alternative text and visible copyright provide corresponding brand evidence. No production-credit claim is established by the inspected material.
- **Asset evidence:** original-page image markup supplies the paths and intrinsic dimensions listed above. Link markup establishes destinations such as `/mind/` and `/news/`; the destination pages were not inspected.
- **Readiness procedure:** the supplied browser record describes an initial observation of at least five seconds, waits for document load, finite animations, sampled layout/text stability, and visible image decoding. Scrolling traversed intermediate positions. Perpetual animations were paused during readiness checks and then resumed; these procedures do not prove that all delayed content or motion was observed.
- **Limitations:** expanded navigation, hover and focus outcomes, carousel operation, touch gestures, reduced-motion behavior, exact animation keyframes, font-file resolution, and intermediate breakpoints were not verified. SharedWorkers and service workers were disabled during the supplied inspection. No additional browsing, command execution, or file inspection was used to prepare this reference.

This document describes the supplied current homepage evidence. Measured values, visual estimates, calculated geometry, and recommended implementation choices are identified separately throughout.