# REqual — Style Reference

> Bright modular geometry introduces a reuse business; generous space and workplace photography make it approachable.

**Website:** [r-equal.com](https://r-equal.com/)
**Original URL:** https://r-equal.com/
**Final URL:** https://r-equal.com/
**Theme:** light main content with saturated blue and red accents, followed by a charcoal contact and information footer.
**Inspected:** supplied browser collection dated October 2, 2026, 01:38:25 JST — October 1, 2026, 16:38:25.041 UTC.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current corporate homepage, including its opening hero, Philosophy and Business content, photographic interlude, contact area, navigation links, linked brand banners, company details, and return-to-top control. Screenshots show the desktop hero, gallery, and footer, plus the mobile hero and lower footer. Other section measurements come from the supplied rendered DOM. Linked pages and the expanded menu were not inspected.

REqual combines a very quiet page canvas with a highly active graphic language. The desktop opening places the brand and a short Japanese statement in a broad pale left column. A dense arrangement of circles, arcs, stripes, triangles, and object-like silhouettes fills the right side. Blue and red repeat inside both the illustration and selected words in the headline. The result feels optimistic and graphic without making the corporate message visually complicated.

Below the opening, large blue English labels introduce Japanese statements and spacious body copy. A staggered collection of photographs shows appraisal work, clothing, bags, office interiors, and employees. The page ends in a substantial charcoal footer where contact methods are given the scale of a major content section. Mobile changes the composition: artwork comes first, copy follows, and footer content becomes a long single-column sequence.

## How to Read This Reference

- **Measured** means a value appears in the supplied computed styles or element rectangles. Coordinates refer to document space unless explicitly described as screenshot positions.
- **Visual estimate** means a proportion, color, radius, or treatment is inferred from the supplied current-page screenshots. Estimated hex values were not extracted with a pixel sampler.
- **Calculated** means a value is derived from measured rectangles, such as a gap or percentage inset.
- **Recommendation** means guidance for a new implementation. The CSS, class names, responsive breakpoints, and optional accessibility treatments are adaptations rather than recovered source code.
- Font names below are observed computed family declarations. The evidence does not independently identify which font file rendered every glyph.
- The supplied text-element sample is not a complete inventory of image elements, pseudo-elements, stylesheets, or scripts. An omitted property is not proof that a feature is absent.

## Tokens — Colors

### Default Palette

All reusable token names in this table are reference aliases.

| Name | Value | Token | Role and evidence |
| --- | --- | --- | --- |
| Interface Blue | `#159cde` | `--color-blue` | **Measured:** English section labels and return-to-top fill. Visually consistent with the desktop menu button and blue pill treatments. |
| Heading Black | `#000000` | `--color-ink` | **Measured:** Japanese hero, statements, and body copy. |
| Navigation Ink | `#1a1a1a` | `--color-nav` | **Measured:** desktop navigation links. |
| Footer Charcoal | `#333333` | `--color-footer` | **Measured:** footer background. |
| White | `#ffffff` | `--color-white` | **Measured:** root/body background and footer text. Also visible in the navigation surface and illustration. |
| Pale Canvas | approximately `#f7f7f7` | `--color-canvas` | **Visual estimate:** the apparent main-page and hero surface. The responsible wrapper or artwork layer was not included in the sampled styles. |
| Graphic Royal Blue | approximately `#1063cc` | `--color-graphic-blue` | **Visual estimate:** deeper blue blocks, rings, and camera-like shapes in the hero artwork. |
| Graphic Cyan Blue | approximately `#0c8dcc` | `--color-graphic-cyan` | **Visual estimate:** large blue shapes and contrasting portions of the modular artwork. |
| Graphic Red | approximately `#ed2114` | `--color-red` | **Visual estimate:** red graphic modules and the highlighted word in the headline. |
| Graphic Orange Red | approximately `#eb3815` | `--color-red-warm` | **Visual estimate:** warmer red portions of the illustration. |

The pale appearance of the page should not be confused with the computed white background of `HTML` and `BODY`. Transparent section backgrounds can reveal a different wrapper, image, or painted layer. Use the pale token as a screenshot-matching approximation, not as a recovered source declaration.

Blue has two roles: a consistent interface accent and a family of illustration colors. Red mainly belongs to the artwork, the logo, the active navigation underline, and selected headline text. It is not a general-purpose action color.

The supplied custom properties include `--swiper-theme-color: #007aff` and `--swiper-navigation-size: 44px`. These library-level values do not establish the visible brand palette or prove the presence of a particular carousel interaction.

### Theme Presets

No theme selector or alternate color theme was demonstrated. The charcoal footer is part of the page hierarchy, not evidence of a user-selectable dark mode.

## Tokens — Typography

### Japanese Sans — Headlines and Body

**Observed stack:** `source-han-sans-japanese, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, Arial, Verdana, "ＭＳ Ｐゴシック", sans-serif`.

Japanese headings use weight `700`, with compact, substantial strokes. The hero sets two deliberate lines and colors individual phrases: red for `だれか` and blue for `つなげる`. The surrounding text remains black. Body copy is regular weight with unusually generous line spacing, allowing short statements to carry the corporate story without dense paragraphs.

The desktop navigation uses weight `500`. Footer information and navigation use `700`, helping the smaller white text hold its shape against charcoal.

### Extended Latin Sans — Labels and Contact

**Observed stack:** `aktiv-grotesk-extended, sans-serif`.

This family is declared for the hero's English translation, the Philosophy and Business labels, the CONTACT heading, the telephone number, and copyright. Its broad proportions are a defining feature: CONTACT occupies substantial horizontal space, while the small English hero line remains visibly extended rather than condensed.

Use licensed font resources when available. A generic sans-serif fallback is functional, but it will not preserve the exact line lengths or broad letterforms. Font loading and licensing configuration were not supplied.

### Type Scale

| Role | Desktop | Mobile | Weight | Leading and tracking |
| --- | --- | --- | --- | --- |
| Japanese hero | `50.4px` | `28px` | `700` | Source leading `normal`; tracking `1.512px` / `0.84px`, equivalent to `0.03em`. |
| English hero line | `18px` | `10px` | `500` | Source leading `normal`; measured boxes `23px` / `13px` high. |
| English section label | `50px` | `32px` | `500` | Source leading `normal`; boxes `64px` / `40px` high. |
| Japanese section statement | `40px` | `26px` | `700` | Source leading `normal`; wrapping changes with available width. |
| Main explanatory copy | `18px` | `16px` | `400` | `37.8px` / `32px` line height; tracking `0.02em`. |
| Desktop top navigation | `15px` | Not displayed | `500` | Vertically centered within `69px` link boxes. |
| Section link label | `16px` | `16px` | `400` | Computed line height `68px` in both samples; mobile link height is only `56px`. |
| CONTACT | `88.2px` | `48px` | `700` | Source leading `normal`; boxes `112px` / `61px` high. |
| Contact introduction | `16.2px` | `16px` | `700` | Source leading `normal`. |
| Contact form label | `32px` | `18px` | `700` | Source leading `normal`. |
| Telephone number | `45px` | `28px` | `700` | Source leading `normal`. |
| Footer navigation | `16px` | `16px` | `700` | Computed line height `16px`; inline rectangles can be taller. |
| Company information | `16px` | `16px` | `700` | `32px` line height. |
| Copyright | `16px` | `11px` | `500` | Source leading `normal`; boxes `20px` / `14px` high. |

Do not treat element height as an explicit CSS line-height declaration. For example, the desktop hero's two-line heading occupies a `146px` box, but its computed line height is reported as `normal`. The Quick Start uses an explicit approximation for predictable implementation.

## Tokens — Spacing & Shapes

**Density:** broad section spacing, sparse copy, concentrated graphic and photographic areas.

**Spacing system:** no authored spacing scale was supplied. The measurements show several alignment systems rather than one universal container.

### Spacing Scale

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Hero and Philosophy left inset | `135.36px` | `19.5px` | Measured; calculated as approximately `9.4vw` and `5vw`. |
| Business left inset | `120px` | `19.5px` | Measured. |
| Footer side inset | `72px` | `19.5px` | Measured; both equal `5vw`. |
| Header logo left inset | `60px` | `24px` | Measured anchor position. |
| Desktop navigation text gaps | About `64px` | Not applicable | Calculated between consecutive link rectangles. |
| Hero heading to English line | `40.5px` | `15px` | Calculated between element boxes. |
| Philosophy top padding | `256px` | `0px` | Measured section padding. |
| Section label to statement | `62px` | `41.5px` | Calculated in Philosophy and Business. |
| Philosophy statement to body | `38px` | `32px` | Calculated. |
| Footer top padding | `160px` | `115px` | Measured. |
| Footer bottom padding | `148px` | `90px` | Measured. |
| Footer navigation row rhythm | `46px` | `46px` | Calculated from repeated link positions. |
| Linked brand banner gap | `42px` horizontally | `20px` vertically | Calculated. |

### Border Radius

| Element | Radius or shape | Evidence |
| --- | --- | --- |
| Modular hero art | Squares, circles, arcs, triangles, stripes | Visual; geometry belongs to the artwork. |
| Section links | `34px` | Measured on both desktop and mobile anchors. |
| Gallery photographs | Approximately `16px` | Visual estimate. |
| Linked brand banners | `8px` | Measured. |
| Desktop menu button | Nearly square with subtly softened corners | Visual estimate; exact radius unavailable. |
| Contact icon disks | Circular | Visual; desktop diameter approximately `68px`. |
| Return-to-top tab | `51px 0 0` desktop; `40px 0 0` mobile | Measured; only the upper-left corner is rounded. |

The shape language is selective. Photos are gently rounded, section links are pills, and the bottom corner control has a large asymmetric curve. The site does not place every content block inside a rounded card.

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 |
| --- | --- | --- |
| Document height | `4818px` | Approximately `4739px` |
| Main content height | `3876px` | Approximately `2954.30px`, including `104px` top padding |
| Hero section | `1440 × 1000px`, starting at document top | `390 × 670px`, starting at `y=104px` |
| Hero artwork | Begins near `x=627px`; fills the right edge | Approximately `390 × 390px`, from `y=104px` to `494px` |
| Hero heading box | `491.03 × 146px` at `135.36, 655.5` | `351 × 80px` at `19.5, 530` |
| Philosophy section | Starts at `y=1000px`; height `976.20px` | Starts at `y=774px`; height `512.5px` |
| Philosophy text column | `563.03px` wide | `351px` wide |
| Section link | `268 × 68px` | `230 × 56px` |
| Business section | Starts at `y=3002px`; height `874px` | Starts at `y=2195.30px`; height `759px` |
| Footer | Starts at `y=3876px`; height `942px` | Starts at `y=2954.30px`; height `1784.73px` |
| Contact link row | `600 × 128px` | `351 × 106px` |
| Linked brand banner | `258 × 129px` | `351 × 175.5px` |
| Return-to-top tab | `124 × 88px` | `80 × 60px` |

Artwork bounds are visual estimates; the other principal boxes in this table come from the DOM. The almost equal total page heights conceal a major redistribution: mobile shortens the main presentation while substantially lengthening the footer.

## Components

### Brand Header and Desktop Navigation

**Role:** identify the company and expose the main corporate destinations.

The desktop logo sits independently near the upper-left corner. Its anchor measures `200px` wide at `x=60px`; the screenshot shows a colored monogram and gray wordmark. The anchor's reported `24px` height is an inline text-box measurement, not a reliable measurement of the complete visible logo.

A white navigation strip floats over the upper-right portion of the hero. It begins around `x=402px`, sits at `y=60px`, and is approximately `69px` high. Six Japanese links run across it with wide gaps: `トップ`, `理念・メッセージ`, `事業案内`, `会社概要`, `採用情報`, and `お問い合わせ`. A short red rule marks the active home link. A faint shadow separates this strip from the artwork.

The blue menu button terminates the strip at the right. Its screenshot footprint is approximately `79 × 69px`, with `60px` clearance from the viewport's right edge. The desktop logo and horizontal navigation are absent in the supplied scrolled captures, while the menu button remains in the same upper-right area. The exact scroll threshold and hide/show mechanism are unverified.

### Mobile Header and Persistent Menu Control

**Role:** keep the brand visible on arrival and retain compact navigation access.

The mobile layout reserves `104px` before the hero. The logo anchor is `115px` wide and begins at `x=24px`. The menu uses thin blue horizontal strokes on the pale background, without the desktop blue rectangular fill. It is also visible over the charcoal lower-footer capture.

This supports persistent placement of the menu control, but the provided style sample does not include its positioning rule. A fixed icon button is a reasonable implementation recommendation. Give its interactive area more space than the visible strokes.

The DOM includes bilingual destination text such as `Top`, `Philosophy & Message`, and `Business`, along with policy links. Their presence suggests additional navigation content. It does not establish the expanded menu's layout, animation, focus behavior, or overlay surface.

### Split Hero

**Role:** introduce the company through a short relationship-focused statement and distinctive graphic artwork.

On desktop, the pale left region occupies approximately `43.5%` of the viewport width. The artwork starts around `x=627px` and fills the remaining right side to the screen edges. The heading sits low in the left region rather than being vertically centered.

The actual message is `つぎのだれかに` followed by `つなげるしごと`. Keep the two-line structure and selective red/blue emphasis. Beneath it, the English line reads `Connect to the next someone.` There is no visible hero action button in the supplied capture.

On mobile, the artwork becomes a full-width square-like opening block. It is followed by a `36px` calculated gap before the heading box. The headline becomes `28px`; the English line becomes `10px`. A further `136px` separates the bottom of the English line from the beginning of Philosophy.

The mobile graphic arrangement differs from desktop. Preserve an intentional mobile crop or composition; do not assume the complete desktop panel simply scales down intact. The evidence does not establish whether this difference comes from responsive assets, cropping, animation state, or a combination.

### Philosophy Content Block

**Role:** explain the company's purpose before presenting service details.

A blue extended-sans `Philosophy` label leads into a bold Japanese statement, two short body passages, and the `企業理念について` link. The measured desktop text column is approximately `563px` wide and aligns with the hero copy.

The English label is large but relatively light at weight `500`. The Japanese statement is weight `700`; body text switches to `400` with `2.1` line height on desktop and `2` on mobile. This combination creates a clear hierarchy without separators or surrounding cards.

The source uses paragraph elements for the English label and Japanese statement. In a new implementation, retain the appearance while assigning an appropriate semantic section heading.

Only the top of Philosophy appears in the mobile screenshot. Its full copy, dimensions, typography, and link are documented by the supplied DOM; any unsupplied illustration or decoration alongside it remains unverified.

### Rounded Section Link

**Role:** lead to the Philosophy or Business detail page.

Both links use the same measured desktop box, `268 × 68px`, with a `34px` radius and white `16px` text. Mobile reduces the box to `230 × 56px`. The gallery screenshot partially reveals a blue pill and a white circular leading element at the top edge.

The anchor itself has a transparent computed background. Its visible blue fill may belong to a nested element or pseudo-element; the supplied sample does not resolve that construction. Treat a solid blue pill with a circular leading device as an implementation approximation, not recovered DOM anatomy.

Do not reproduce the mobile anchor's `68px` text line height inside a `56px` box blindly. Flex alignment is a clearer way to preserve the observed centering in a new component.

### Staggered Photo Gallery

**Role:** give the abstract reuse message a concrete human and material context.

The desktop capture shows two loose rows of rounded photographs extending beyond both horizontal edges. The cards have varied widths and slightly staggered vertical positions. There are no visible captions or general card backgrounds.

Examples within the captured viewport include:

- A narrow watch-appraisal image, approximately `216 × 347px`.
- A wide office seating image, approximately `480 × 347px`.
- An employee image, approximately `347 × 348px`, set lower than the office image.
- Lower-row images of hanging jackets, a jewelry appraisal, and employees outdoors.
- Partially clipped bag photographs at the left and right edges.

These are screenshot estimates, not source image dimensions. Nearby horizontal gaps are roughly `34–40px`, with vertical staggering around `40–50px` in some places.

The measured interval between the end of Philosophy and the start of Business is approximately `1025.8px` on desktop. The photographs visually occupy the intervening portion of the page, but their exact container rectangle is not included in the DOM sample.

The composition can be reproduced as a static, overflow-clipped collage. A moving marquee or draggable slider would require additional behavioral evidence. Mobile gallery composition was not supplied.

### Business Content Block

**Role:** introduce the core purchase service and lead to its detail page.

The block repeats the blue English label and bold Japanese statement pattern. Its copy describes visiting customers' homes to buy items they no longer use. On desktop the content begins at `x=120px`, using a different alignment from the Philosophy column.

The explanatory paragraph begins at `x=120px`, while the `事業内容について` link begins near `x=753.6px` at the same vertical position. This establishes a horizontal text/action relationship on desktop. On mobile, the link moves beneath the paragraph and shares its `19.5px` left inset.

A narrow blue-tinted photographic strip is visible immediately before the footer in the desktop bottom capture. The full Business image treatment and its overlay construction are not documented; do not infer an entire section background from that strip alone.

### Contact Area

**Role:** make two direct contact routes highly visible at the end of the homepage.

The footer opens with a large white CONTACT heading and a short Japanese invitation on the left. On desktop, two broad links occupy the right column. The first is `お問い合わせフォーム`; the second displays `0120-290-526`.

Each desktop row measures `600 × 128px`, with `30px` vertical padding. A white circular icon disk sits at the left; the form row has a mail symbol and a right-pointing arrow, while the telephone row has a handset symbol. A subtle horizontal divider separates the two rows. The form label begins `98px` after the row's left edge, consistent with an approximately `68px` disk and `30px` gap.

On mobile, the introduction comes first, followed by the two links. Rows are `351 × 106px`, with `25px` vertical padding. The label offset becomes `74px`, consistent with a `56px` icon region and `18px` gap; this is calculated anatomy rather than a directly measured icon rectangle.

The form link targets `/contact/`. The telephone link uses `tel:0120-290-526`. Destination behavior was not exercised.

### Footer Navigation and Linked Brand Banners

**Role:** provide secondary navigation and expose two linked services.

Desktop footer links are arranged in grouped horizontal rows on the right, below the contact methods. The text is white, bold, and `16px`. Repeated row positions are `46px` apart. Corporate links are followed by privacy, terms, and cooling-off information.

Two banner links sit beneath the navigation: `げんえきや` and `てきせい屋`. Each desktop banner measures `258 × 129px`, preserving a `2:1` ratio, with an `8px` radius. The first has a pale cool surface; the second is white. Their logos remain visually centered within generous internal space.

Mobile stacks the navigation links, then stacks the two banners at `351 × 175.5px`, separated by `20px`. The last legal link wraps within a narrower measured text box even though the banners occupy the full content width.

These are linked brand graphics, not ordinary text buttons. Preserve the complete artwork rather than trying to typeset the marks with a substitute font.

### Company Identity and Trust Mark

**Role:** close the page with corporate identity and address information.

The original footer identifies the company as `株式会社アールイコール` and gives an Osaka address. A smaller version of the colored logo sits above the information. A separate square privacy-related mark appears beside the address block.

On desktop this identity area sits in the footer's left column, alongside the navigation and brand links. On mobile it follows the two large brand banners. The address text remains `16px` with `32px` line height and wraps onto more lines; the square mark sits to its right.

The presence of the mark is visible evidence of a displayed badge. Its current certification status was not independently verified.

### Return-to-Top Tab

**Role:** provide a final route back to the page opening.

A blue tab sits at the bottom-right corner of the footer. Its upper-left corner is rounded deeply, while its other corners meet the page edges. It contains an upward arrow and the label `TOPに戻る`.

The measured size changes from `124 × 88px` on desktop to `80 × 60px` on mobile. Its link targets `https://r-equal.com/#wrapper`. The supplied rectangles place it at the document's lower edge; they do not establish a viewport-fixed control or smooth-scroll behavior.

## Tokens — Motion & Interaction

| Treatment | Evidence | What can be concluded |
| --- | --- | --- |
| Section links | Computed transition value `0.4s` | A transition is declared; changed properties and hover appearance were not demonstrated. |
| Contact links | Computed transition value `0.4s` | Transition timing is available, but activation and hover states were not captured. |
| Footer navigation and brand links | Computed transition value `0.4s` | Consistent link timing is suggested. No particular fade or transform is established. |
| Return-to-top control | `0.4s` transition and a `#wrapper` destination | Anchor intent is verified; scrolling duration and easing are not. |
| Menu persistence | Control appears in top, middle, and bottom captures | Persistent availability is visible. Opening, closing, and scroll thresholds are unverified. |
| Hero graphic | Different arrangements appear across desktop and mobile | Responsive composition or different states are visible; animation cannot be inferred from stills alone. |
| Photo gallery | Staggered, edge-clipped images | Horizontal overflow is visible; autoplay, dragging, looping, and direction are unverified. |
| Sampled text elements | `animation: none` | Applies only to the supplied elements; does not rule out animated artwork or pseudo-elements. |

The collection waited for initial loading, image decoding, and sampled layout stability, with bounded waits. Perpetual animations were paused during readiness checks and resumed afterward. This procedure supports settled visual inspection, but it does not document motion paths, frame sequences, or complete interaction behavior.

**Recommended adaptation:** use restrained `400ms` transitions for link feedback if appropriate, and provide reduced-motion handling. Keep the artwork and gallery fully understandable in a static state. Any additional reveal, marquee, or menu animation should be explicitly designed rather than presented as an observed source feature.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Main canvas | Very pale neutral field | Carries open typography and whitespace. |
| Hero artwork | Flat, saturated blue/red/white modules | Supplies the opening's visual energy and recognition. |
| Desktop navigation | White strip with a faint shadow | Keeps navigation legible over the illustration. |
| Section content | Unboxed text on the canvas | Gives corporate statements room to breathe. |
| Photography | Rounded image crops without captions in the captured gallery | Adds human and material context. |
| Footer | Solid `#333333` with white type | Separates the final contact and information zone. |
| Brand banners | Pale or white rectangular graphics with `8px` corners | Holds secondary brand identities. |
| Utility accents | Blue menu fill on desktop, pills, and corner tab | Connects navigation and actions to the brand color. |

The navigation shadow is a local treatment. There is no evidence of a general raised-card system, glass blur, or gradient-based interface styling.

## Imagery

The hero is a tightly packed geometric composition. Circles and partial circles become rings, clock-like faces, camera-like objects, jewelry-like forms, and clothing-like silhouettes. Parallel stripes and triangular cuts create variation within a square-module rhythm. Most edges remain crisp, with no visible photographic texture or simulated depth.

Photography supplies a different register: bright interiors, employees at work, hands handling watches or jewelry, bags, and clothing. Crops focus on objects and ordinary work activity. Their softer natural tones contrast with the artwork's primary-color intensity. A specific photographic filter or production method is not established.

Keep these two image systems distinct but related: geometric artwork introduces the brand, while photographs explain the people and objects involved in reuse.

### Observed Asset References

The supplied evidence does not expose image asset URLs or filenames. The following is a role inventory, not a downloadable asset manifest.

| Asset role | Observed content | Reuse guidance |
| --- | --- | --- |
| Main logo | Colored monogram and REqual wordmark | Use an authorized supplied logo; preserve its proportions and gray lettering. |
| Hero graphic | Blue/red/white modular geometric artwork | Prepare deliberate desktop and mobile compositions or crops. |
| Gallery images | Appraisal, office, staff, bags, watches, jewelry, and clothing | Use varied crop ratios and consistent rounded corners. |
| Business-adjacent image | Small blue-tinted photographic band visible above the footer | Full extent and source treatment are unknown. |
| Footer banners | Two linked service marks | Preserve each complete `2:1` banner artwork. |
| Privacy-related mark | Square badge beside company details | Use the legitimate supplied asset only when applicable. |
| Utility symbols | Menu strokes, mail, handset, directional arrows | Simple vector or CSS icons can reproduce the general anatomy; the original icon library is unknown. |

For implementation, use vector artwork where authorized and available, or sufficiently large raster exports. Do not use pixelated image rendering: the current visual language depends on clean graphic edges and conventional photographic rendering.

## Layout & Responsive Behavior

### Desktop

The first section matches the inspected viewport height of `1000px`. A pale copy region and a dense right-side illustration form an asymmetric split. The hero and Philosophy copy share a left inset near `9.4vw`, while Business uses a centered `1200px`-wide measured area and the footer uses `5vw` side gutters.

The page rhythm alternates between sparse statements and dense imagery. Philosophy has `256px` of top padding. The photographic interlude stretches across the page and clips images at the viewport edges. Business pairs explanatory copy with a detail link horizontally. Contact and footer information return to a structured two-column arrangement.

### Mobile

At `390px` wide, the main content begins below a `104px` header allowance. The hero artwork occupies an approximately square full-width area, followed by left-aligned copy within a `351px` content width.

Philosophy begins at document `y=774px`, so its blue label is already visible near the bottom of the initial `844px` screenshot. The desktop's large Philosophy top padding disappears. Body copy becomes `16px` with `32px` leading, while section statements become `26px`.

Business places its action under its paragraph. The footer follows this measured order:

1. CONTACT heading and introduction.
2. Contact form and telephone links.
3. Corporate and legal navigation.
4. Two stacked brand banners.
5. Company logo, name, address, and adjacent mark.
6. Copyright and the bottom-right return-to-top tab.

The mobile footer is approximately `1785px` tall. Preserve this hierarchy rather than compressing all its content into a crowded final screen.

### Responsive Limits

Only the two supplied viewport sizes were inspected. Exact breakpoints, intermediate tablet layouts, gallery behavior on mobile, landscape behavior, and safe-area handling are unknown. The Quick Start uses `1100px` and `767px` breakpoints as recommendations. They are not source measurements.

## Do’s and Don’ts

### Do

- Preserve the asymmetric desktop hero and artwork-first mobile order.
- Keep the Japanese headline in two deliberate lines with selective red and blue emphasis.
- Pair bold Japanese statements with broad Latin section labels.
- Retain generous body leading and substantial space between content groups.
- Use `#159cde` for the documented interface accent and `#333333` for the footer.
- Treat deeper blues and reds as part of a coordinated illustration palette.
- Give the gallery varied widths, staggered positions, and gently rounded corners.
- Keep contact methods prominent, with clear icon/text anatomy and a visible telephone number.
- Preserve the footer banners' `2:1` ratio and their mobile stacking order.
- Distinguish measured styles from screenshot estimates when extending the system.

### Don’t

- Do not turn the corporate homepage into a generic product landing page with an invented hero CTA.
- Do not center every desktop section or force all content into one identical container.
- Do not shrink the complete desktop hero into a narrow mobile split view.
- Do not replace the modular artwork with gradients, glossy objects, or unrelated abstract blobs.
- Do not turn the photographic interlude into uniform captioned cards without a content reason.
- Do not introduce red buttons simply because the illustration contains red.
- Do not flatten the large contact area into a small conventional footer link list.
- Do not infer autoplay, hover transforms, or menu transitions from static captures.
- Do not treat the two exposed library variables as a complete design-token system.
- Do not invent asset paths, font-loading details, or production credits from appearance alone.

## Recommended Implementation Additions

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

- Give the menu button an accessible name, an expanded state, and a comfortably sized touch target. If it opens a modal menu, implement focus management and Escape-to-close behavior.
- Use meaningful section headings in the document outline while retaining the observed English-label/Japanese-statement hierarchy.
- Provide visible focus styles on navigation, contact methods, banner links, and return-to-top controls.
- Check small white text on bright blue. `#159cde` against white is approximately `3.1:1`, below the usual `4.5:1` target for normal-sized text. A darker action blue such as `#0876ac` is an optional accessibility adaptation.
- Consider increasing the mobile English subtitle above the observed `10px` when readability takes priority over exact matching.
- Treat purely decorative hero geometry as decorative. Give meaningful photographs and linked logo banners suitable text alternatives.
- Provide intrinsic image dimensions or aspect ratios to reduce layout shifts. Load the opening artwork promptly and defer lower-page photographs where appropriate.
- Support reduced motion for any newly implemented artwork, menu, or gallery animation.
- Preserve normal vertical page scrolling while containing horizontal gallery overflow.

## Agent Prompt Guide

### Quick Color Reference

- Interface blue: `#159cde`, measured.
- Footer charcoal: `#333333`, measured.
- Main text: `#000000`; top navigation: `#1a1a1a`, measured.
- White text and surfaces: `#ffffff`, measured where documented.
- Main pale canvas: approximately `#f7f7f7`, visual estimate.
- Illustration royal blue: approximately `#1063cc`, visual estimate.
- Illustration cyan blue: approximately `#0c8dcc`, visual estimate.
- Illustration reds: approximately `#ed2114` and `#eb3815`, visual estimates.
- Optional darker blue for small white action labels: `#0876ac`, recommendation.

### Overall Prompt

“Create a Japanese reuse-company homepage inspired by REqual's current composition. Use a very pale canvas, black Japanese sans-serif headings, broad Latin labels, interface blue `#159cde`, and a charcoal `#333333` footer. On desktop, place the logo at the upper left, a floating white navigation strip at the upper right, and a low-positioned two-line Japanese statement in the left 43.5% of the opening. Fill the right side with crisp modular blue, red, and white geometric artwork. Follow with spacious Philosophy and Business sections, a staggered full-bleed photo collage, and a large two-column contact footer. On mobile, show the geometric artwork as a full-width square above the headline and stack the footer in a clear reading sequence. Treat unverified animation as optional.”

### Example Component Prompts

1. **Hero:** “Design a 1440px desktop hero with a pale left region ending near x=627px. Position a bold two-line Japanese message near x=135px in the lower third. Color one phrase red and another blue; add a small extended-sans English translation below. Fill the right region with flat circles, arcs, stripes, triangles, and object-like modular forms. On a 390px phone, move the artwork above the copy.”
2. **Section introduction:** “Use a large blue extended-sans English label, a heavy black Japanese statement, and regular Japanese body copy with roughly double line spacing. Keep the content unboxed and left aligned. Finish with a blue rounded detail link featuring a white circular leading device.”
3. **Photo band:** “Create a static, edge-clipped photographic collage with staggered rows, varied image widths, and approximately 16px corner radii. Include appraisal work, a bright office, clothing, and employees. Avoid captions, card shadows, or an assumed autoplay behavior.”
4. **Contact footer:** “Build a charcoal footer with a large white CONTACT heading at left and two broad contact rows at right. Use white circular mail and phone icon disks, a large telephone number, and a subtle dividing rule. Below, place company information at left and grouped navigation plus two 2:1 brand banners at right. Stack these groups on mobile.”
5. **Corner utility:** “Create a blue return-to-top tab anchored to the footer's lower-right corner, with only its upper-left corner deeply rounded. Use a white upward arrow and a short label. Size it at 124 by 88px on desktop and 80 by 60px on mobile.”

## Quick Start

### CSS Custom Properties

This is a recommended implementation scaffold. It uses measured colors and type sizes where available, estimated artwork colors, and explicit approximations for normal line heights. The breakpoints, hover treatment, and class structure are new implementation choices. It does not include original assets, font delivery, menu JavaScript, gallery motion, or undisclosed section decoration.

Expected structure: `.hero` contains `.hero-art` and `.hero-copy`; `.hero-copy` contains a two-line `h1` and `.hero-subtitle`. Footer areas use `.footer-intro`, `.footer-actions`, `.footer-company`, `.footer-navigation`, and `.footer-copyright`. Supply authorized image assets to the corresponding image elements.

```css
:root {
  /* Measured interface colors */
  --color-blue: #159cde;
  --color-ink: #000;
  --color-nav: #1a1a1a;
  --color-white: #fff;
  --color-footer: #333;

  /* Screenshot approximations */
  --color-canvas: #f7f7f7;
  --color-graphic-blue: #1063cc;
  --color-graphic-cyan: #0c8dcc;
  --color-red: #ed2114;
  --color-red-warm: #eb3815;

  /* Optional accessible action variant */
  --color-action-strong: #0876ac;

  /* Observed family declarations; font delivery is separate */
  --font-jp: source-han-sans-japanese,
    'Hiragino Kaku Gothic ProN', Meiryo, Arial, Verdana, sans-serif;
  --font-en: aktiv-grotesk-extended, sans-serif;

  --text-hero: clamp(28px, 3.5vw, 60px);
  --text-kicker: 50px;
  --text-statement: 40px;
  --text-body: 18px;
  --text-contact: 88.2px;
  --leading-body: 2.1;

  --gutter: 5vw;
  --hero-inset: 9.4vw;
  --radius-photo: 16px;
  --radius-banner: 8px;
  --radius-pill: 34px;
  --link-duration: 400ms;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-jp);
}

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

/* Positioning approximates the supplied opening capture. */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
}

.site-logo {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 200px;
}

.desktop-nav {
  position: absolute;
  top: 60px;
  right: 139px;
  display: flex;
  align-items: center;
  gap: 64px;
  height: 69px;
  padding-inline: 72px;
  background: var(--color-white);
  box-shadow: 0 2px 18px rgb(0 0 0 / 6%);
}

.desktop-nav a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  color: var(--color-nav);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.desktop-nav a[aria-current='page']::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: var(--color-red);
  content: '';
}

/* Fixed placement is an adaptation of the persistent control. */
.menu-toggle {
  position: fixed;
  z-index: 30;
  top: 60px;
  right: 60px;
  display: grid;
  place-content: center;
  gap: 7px;
  width: 79px;
  height: 69px;
  border: 0;
  border-radius: 3px;
  color: var(--color-white);
  background: var(--color-blue);
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 30px;
  height: 2px;
  background: currentColor;
}

.menu-toggle span:last-child { width: 18px; }

.hero {
  position: relative;
  min-height: 720px;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.hero-art {
  position: absolute;
  inset: 0 0 0 43.5%;
  margin: 0;
}

.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-copy {
  position: absolute;
  left: var(--hero-inset);
  bottom: 13.5vh;
  width: 34.1%;
}

.hero h1 {
  margin: 0;
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .03em;
}

.ink-red { color: var(--color-red); }
.ink-blue { color: var(--color-blue); }

.hero-subtitle {
  margin: 40px 0 0;
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 500;
  line-height: 23px;
}

.philosophy { padding: 256px 0 50px; }
.philosophy-inner { margin-inline: var(--hero-inset); }
.text-column { max-width: 563px; }

.section-kicker {
  margin: 0;
  color: var(--color-blue);
  font-family: var(--font-en);
  font-size: var(--text-kicker);
  font-weight: 500;
  line-height: 1.28;
}

.section-statement {
  margin: 62px 0 38px;
  font-size: var(--text-statement);
  font-weight: 700;
  line-height: 1.45;
}

.body-copy {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: .02em;
}

.body-copy + .body-copy { margin-top: 20px; }

.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  width: 268px;
  min-height: 68px;
  margin-top: 54px;
  padding: 4px;
  border-radius: var(--radius-pill);
  color: var(--color-white);
  background: var(--color-blue);
  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color var(--link-duration) ease;
}

.pill-icon {
  display: grid;
  flex: 0 0 60px;
  place-items: center;
  height: 60px;
  border-radius: 50%;
  color: var(--color-blue);
  background: var(--color-white);
}

.pill-link[data-contrast='strong'] {
  background: var(--color-action-strong);
}

/* Static gallery scaffold; dimensions and motion are adaptable. */
.photo-band { overflow: hidden; padding-block: 160px; }
.photo-row {
  display: flex;
  align-items: flex-start;
  gap: 34px;
  width: max-content;
}
.photo-row + .photo-row { margin-top: 32px; }
.photo-tile {
  flex: none;
  width: 330px;
  height: 347px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-photo);
}
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile--narrow { width: 216px; }
.photo-tile--wide { width: 480px; }
.photo-tile--offset { transform: translateY(40px); }

.business { padding: 250px 0 276px; }
.business-inner { width: min(1200px, 90%); margin-inline: auto; }
.business .section-statement { max-width: 600px; }
.business-row {
  display: grid;
  grid-template-columns: minmax(0, 542px) auto;
  align-items: start;
  gap: clamp(40px, 6.36vw, 92px);
}
.business-row .pill-link { margin-top: 0; }

.site-footer {
  position: relative;
  padding: 160px var(--gutter) 148px;
  color: var(--color-white);
  background: var(--color-footer);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
  grid-template-areas:
    'intro actions'
    'company navigation'
    'copyright copyright';
  column-gap: 96px;
}

.footer-intro { grid-area: intro; }
.footer-actions { grid-area: actions; }
.footer-company { grid-area: company; margin-top: 66px; }
.footer-navigation { grid-area: navigation; margin-top: 66px; }
.footer-copyright { grid-area: copyright; }

.contact-title {
  margin: 0;
  font-family: var(--font-en);
  font-size: var(--text-contact);
  font-weight: 700;
  line-height: 1.27;
}

.contact-intro { margin: 18px 0 0; font-weight: 700; }

.contact-row {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 128px;
  padding: 30px 40px 30px 0;
  text-decoration: none;
}

.contact-row + .contact-row { border-top: 1px solid rgb(255 255 255 / 12%); }
.contact-icon {
  display: grid;
  flex: 0 0 68px;
  place-items: center;
  height: 68px;
  border-radius: 50%;
  color: var(--color-footer);
  background: var(--color-white);
}
.contact-icon svg { width: 32px; height: 32px; }
.contact-label { font-size: 32px; font-weight: 700; }
.contact-number {
  font-family: var(--font-en);
  font-size: 45px;
  font-weight: 700;
  white-space: nowrap;
}
.contact-arrow { margin-left: auto; }

.footer-links { display: grid; gap: 22px; }
.footer-link-row { display: flex; flex-wrap: wrap; gap: 22px 40px; }
.footer-links a { font-size: 16px; font-weight: 700; text-decoration: none; }

.brand-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 258px));
  gap: 42px;
  margin-top: 46px;
}
.brand-banner {
  display: block;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: var(--radius-banner);
  background: var(--color-white);
}
.brand-banner img { width: 100%; height: 100%; object-fit: contain; }

.company-logo { width: 130px; }
.company-details { font-size: 16px; font-weight: 700; line-height: 2; }
.footer-copyright {
  margin: 0;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 500;
}

.back-top {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 124px;
  height: 88px;
  border-radius: 51px 0 0;
  color: var(--color-white);
  background: var(--color-blue);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

/* Recommended focus and hover feedback, not observed states. */
:where(a, button):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 5px;
}
@media (hover: hover) {
  .pill-link:hover { background: var(--color-action-strong); }
  .footer-links a:hover { text-decoration: underline; }
}

/* Recommended intermediate breakpoint. */
@media (max-width: 1100px) {
  .desktop-nav { display: none; }
  .footer-grid { column-gap: 40px; }
  .contact-title { font-size: 64px; }
  .contact-label { font-size: 24px; }
  .contact-number { font-size: 32px; }
  .business-row { grid-template-columns: 1fr; }
}

/* Recommended mobile breakpoint; values target the 390px capture. */
@media (max-width: 767px) {
  :root {
    --text-hero: 28px;
    --text-kicker: 32px;
    --text-statement: 26px;
    --text-body: 16px;
    --text-contact: 48px;
    --leading-body: 2;
  }

  .site-main { padding-top: 104px; }
  .site-logo { top: 38px; left: 24px; width: 115px; }
  .menu-toggle {
    top: 27px;
    right: 14px;
    width: 44px;
    height: 44px;
    color: var(--color-blue);
    background: transparent;
  }

  .hero { height: auto; min-height: 0; }
  .hero-art { position: relative; inset: auto; width: 100%; aspect-ratio: 1; }
  .hero-copy {
    position: static;
    width: auto;
    padding: 36px var(--gutter) 136px;
  }
  .hero h1 { line-height: 40px; }
  .hero-subtitle { margin-top: 15px; font-size: 10px; line-height: 13px; }

  .philosophy { padding: 0; }
  .philosophy-inner { margin-inline: var(--gutter); }
  .section-kicker { line-height: 40px; }
  .section-statement { margin: 41.5px 0 32px; }
  .body-copy + .body-copy { margin-top: 14px; }
  .pill-link { width: 230px; min-height: 56px; margin-top: 56px; }
  .pill-icon { flex-basis: 48px; height: 48px; }

  /* Mobile gallery presentation is a recommendation. */
  .photo-band { padding-block: 100px; }
  .photo-row { gap: 20px; }
  .photo-tile { width: 64vw; height: 72vw; }
  .photo-tile--wide { width: 88vw; }
  .photo-tile--narrow { width: 46vw; }

  .business { padding: 160px 0 222px; }
  .business-row { gap: 52px; }

  .site-footer { padding: 115px var(--gutter) 90px; }
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'intro' 'actions' 'navigation' 'company' 'copyright';
    gap: 0;
  }
  .contact-title { font-size: var(--text-contact); }
  .contact-intro { font-size: 16px; }
  .footer-actions { margin-top: 15px; }
  .contact-row { gap: 18px; min-height: 106px; padding: 25px 0; }
  .contact-icon { flex-basis: 56px; height: 56px; }
  .contact-label { font-size: 18px; }
  .contact-number { font-size: 28px; }

  .footer-navigation { margin-top: 31px; }
  .footer-link-row { flex-direction: column; align-items: flex-start; }
  .brand-links { grid-template-columns: 1fr; gap: 20px; }
  .footer-company { margin-top: 85px; }
  .footer-copyright { margin-top: 72px; font-size: 11px; }
  .back-top { width: 80px; height: 60px; border-top-left-radius: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .pill-link { transition: none; }
  html { scroll-behavior: auto; }
}
```

This scaffold reproduces the principal hierarchy and proportions. Exact document height will depend on the supplied fonts, text wrapping, image crops, and gallery composition. Build the square company badge and its address relationship within `.footer-company` using the actual authorized asset dimensions.

### Tailwind v4 Token Mapping

Optional mapping for a project already using Tailwind v4. This is not evidence that the original site uses Tailwind. Define the properties above first; retain the component CSS for the asymmetric layout.

```css
@theme inline {
  --color-brand: var(--color-blue);
  --color-canvas: var(--color-canvas);
  --color-ink: var(--color-ink);
  --color-charcoal: var(--color-footer);
  --color-graphic-royal: var(--color-graphic-blue);
  --color-graphic-red: var(--color-red);
  --color-action-strong: #0876ac;

  --font-japanese: var(--font-jp);
  --font-extended: var(--font-en);

  --text-hero: var(--text-hero);
  --text-section-label: var(--text-kicker);
  --text-section-statement: var(--text-statement);
  --text-body-copy: var(--text-body);
  --text-contact-heading: var(--text-contact);

  --radius-gallery: var(--radius-photo);
  --radius-brand-banner: var(--radius-banner);
  --radius-action-pill: var(--radius-pill);

  --spacing-page-gutter: var(--gutter);
  --spacing-hero-inset: var(--hero-inset);
}
```

When integrating this optional mapping, avoid redefining a custom property in terms of itself. If the build tool emits the same token names into the same scope, rename the base properties with a project prefix and point the Tailwind aliases to those prefixed properties.

## Sources & Evidence

- **Inspected original and final page:** [REqual corporate homepage](https://r-equal.com/). The supplied browser result reports HTTP `200` with no URL change.
- **Collection timestamp:** `2026-10-01T16:38:25.041Z`, equivalent to October 2, 2026, 01:38:25.041 JST. This is the supplied collection timestamp; separate timestamps for each screenshot were not provided.
- **Desktop evidence:** 1440 × 1000 viewport; hero, photographic interlude, and bottom-footer screenshots; rendered page text, links, computed styles, and element rectangles; document height `4818px`.
- **Mobile evidence:** 390 × 844 viewport; opening and lower-footer screenshots; rendered page text, links, computed styles, and element rectangles; document height approximately `4739px`.
- **Observed navigation evidence:** homepage detail links, contact URL, telephone URI, linked brand destinations, legal-page links, and the `#wrapper` return target were present. The collection traversed scroll positions, but supplied evidence does not show menu activation, hover states, form interaction, or link destination inspection.
- **Inspection limitations:** only two viewport sizes; incomplete image and pseudo-element style coverage; no image asset paths; no complete stylesheets or animation timelines; no verified expanded menu or mobile gallery; no independent font-file confirmation. SharedWorkers and service workers were disabled during collection. Bounded readiness checks do not prove the absence of delayed content.

This reference describes the current homepage represented by the supplied original-page evidence. Measured values, visual estimates, and implementation recommendations are distinguished throughout.