invox受取請求書｜請求書受領・経理業務自動化

# invox受取請求書 — Style Reference

> Bright yellow actions and friendly line drawings make a dense accounting service feel approachable.

**Website:** [invox.jp](https://invox.jp/)
**Original URL:** https://invox.jp/
**Final URL:** https://invox.jp/ — HTTP 200 in the supplied observation
**Theme:** light; white canvas, warm charcoal text, yellow emphasis
**Inspected:** October 2, 2026, at 02:35:20 JST; supplied retrieval timestamp: October 1, 2026, 17:35:20.425 UTC
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels
**Scope:** the current product homepage, including its introduction, proof points, workflow, integrations, pricing, company initiatives, features, conversion choices, customer stories, learning resources, news, help links, footer, and visible floating controls. Visual evidence comprises three desktop captures and two mobile captures; rendered text and sampled computed styles cover additional sections.

The page combines a restrained business interface with a cheerful illustration system. A white background and warm charcoal typography carry most of the information. Saturated yellow identifies the product, frames major actions, and fills small details in the otherwise black-and-white drawings. Large Japanese headings use generous line spacing, while longer explanations remain compact and carefully grouped.

This is a substantial product website with several reading paths. Pricing and customer-story anchors support direct evaluation; workflow explanations and detailed features support research; seminars, articles, news, and help links extend the page into a service resource hub. Repeated trial, consultation, and document-download actions connect those paths.

Its floating interface deserves particular attention. A persistent desktop action strip, a chat launcher, and a document promotion can appear together. On mobile, the promotion occupies approximately half the viewport and the chat launcher overlaps its action. That congestion is part of the captured state, and should be distinguished from the cleaner underlying page structure.

## How to Read This Reference

- **Measured:** values present in the supplied computed styles or element rectangles. These are browser measurements at the two inspected widths, not recovered stylesheet rules.
- **Derived:** arithmetic based on those measurements, such as container margins or alpha colors composited over white.
- **Estimated:** dimensions, colors, or visual relationships read from screenshots where computed styles were not supplied.
- **Recommended:** implementation choices for a reusable adaptation, including intermediate breakpoints, accessibility behavior, and collision management for floating controls.
- **Named tokens:** descriptive implementation aliases unless explicitly identified as original custom properties.

Coordinates for computed elements describe their recorded page positions. Coordinates quoted for floating panels and lower-page screenshots are local to those captures. No additional browsing, asset fetching, or interaction testing was performed for this reference.

## Tokens — Colors

### Default Palette

| Name | Value | Evidence | Role |
| --- | --- | --- | --- |
| Product Yellow | `#FFCC00` | Measured source variable `--maincolor`; measured CTA backgrounds | Primary actions, yellow outlines, brand mark, illustration accents, proof laurels |
| Warm Charcoal | `#474241` | Measured `rgb(71, 66, 65)` | Headings, navigation, button text, labels, primary body text |
| White | `#FFFFFF` | Measured button and section backgrounds; visible page canvas | Main surface, cards, outlined actions, floating promotion |
| Secondary Text | `rgba(71, 66, 65, 0.8)` | Measured | Hero description, feature explanations, workflow paragraphs |
| Quiet Text | `rgba(71, 66, 65, 0.6)` | Measured on tax captions and desktop pricing notes | Supplementary information and secondary financial labels |
| Warm Section Tint | `rgba(61, 49, 0, 0.05)` | Measured feature-section background | Separates a substantial feature block from the white document |
| Inline Link Blue | `#0094FF` | Measured on contextual links | Links inside explanatory paragraphs |
| Darker Link Blue | `#0073C6` | Measured on the adoption-claim reference link | Supporting evidence link |
| Card Rule | Approximately `#D8D8D8` | Screenshot estimate | Thin borders around customer stories and help entries |
| Translucent Header | `rgba(255, 255, 255, 0.9)` | Measured desktop header background | White navigation surface; mobile header is solid white |

Over a white background, Secondary Text becomes approximately `#6C6867`, Quiet Text approximately `#918E8D`, and Warm Section Tint approximately `#F5F5F2`. These are calculated equivalents, not additional source variables. Keep alpha values when the underlying background can change.

The footer also appears warm and nearly white, but its exact background was not included in the sampled styles. Reusing Warm Section Tint for it is a reasonable adaptation rather than a verified source declaration.

The source defines `--markColor: rgba(255, 204, 0, 0.40)`. Its presence is verified; its application to a particular visible element is not established by the supplied samples.

Numerous generic WordPress palette, gradient, and shadow presets are present in the root properties. Their availability does not demonstrate use on this page. They should not expand the reconstructed visual palette.

### Theme Presets

Only the light presentation is evidenced. No theme selector or alternate dark presentation was captured. Colored service logos in the footer identify related products; they are not theme controls.

## Tokens — Typography

### Japanese Interface and Body

**Measured family:** `"Noto Sans JP", sans-serif`.

The main interface uses medium-weight Japanese sans-serif text, with bold headings and actions. The body declaration is `16px`, weight `500`, but actual paragraphs override it with more generous line heights. Do not reproduce the body's inherited `16px` line height for prose.

The heading style is substantial without becoming oversized: the desktop hero is `36px / 56px`, and the mobile hero remains `32px / 44px`. The relatively small size reduction preserves emphasis on a phone and produces four lines of headline text.

### Numbers and Step Labels

**Measured family:** `Inter, sans-serif` on workflow step labels and initiative numbers; `Inter, "Noto Sans JP", sans-serif` on several tax captions.

Use Inter selectively for Latin labels and numerical structure. The large initiative numbers are measured at `44px / 48px`, weight `600`. This does not establish the same font or size for every price, proof badge, or number embedded in an image.

The desktop workflow sample records a `16px / 27px` STEP wrapper with `5px` tracking. Its rectangle includes content whose nested numeral styling was not supplied. On mobile, the combined STEP label is directly measured at `24px / 34px`, weight `400`, with `3px` tracking.

### Native-Control Exceptions

The pricing disclosure button reports Arial, while the root HTML element reports Times. These are local or inherited declarations, not the page's general visual identity. The measured body and content styles establish Noto Sans JP as the primary stack.

Computed family names do not independently prove which font file supplied every rendered glyph. Font asset URLs and loading declarations were not provided.

### Type Scale

| Role | Desktop | Mobile | Weight / tracking | Evidence |
| --- | --- | --- | --- | --- |
| Hero heading | `36px / 56px` | `32px / 44px` | `700`; `1px` desktop, `1.5px` mobile | Measured |
| Major section heading | `36px / 56px` | `28px / 40px` | `700`; `1px` | Measured across multiple sections |
| Value-pillar heading | `24px / 33.6px` | `20px / 30px` | `700`; `1.5px` | Measured |
| Workflow title | `28px / 39.76px` | `20px / 28.4px` | `700`; `1.5px` desktop, `1px` mobile | Measured |
| Hero description | `14px / 24px` | `14px / 26px` | `500`; `1.5px` desktop, normal mobile | Measured |
| Workflow explanation | `16px / 28px` | `14px / 24.5px` | `500`; `1.5px` | Measured |
| Compact feature explanation | `14px / 24px` | `14px / 26px` | `500`; normal tracking | Measured |
| Feature title | `16px / 26px` | `16px / 26px` | `700`; `0.5px` | Measured |
| Plan name | `18px / 28px` | `18px / 28px` | `700`; `1.5px` | Measured |
| Plan description | `12px / 16px` | `12px / 16px` | `400`; `1.2px` | Measured |
| Standard CTA | `16px / 16px` | `16px / 16px` | `700`; normal tracking | Measured |
| Header text link | `14px / 16.8px` | Hidden in the captured closed navigation | `500`; normal tracking | Measured |
| Header CTA | `12px / 14.4px` | Hidden in the captured closed navigation | `700`; normal tracking | Measured |
| Hero proof notes | `12px / 20px` | `12px / 24px` | `500`; `1.2px` desktop, `1px` mobile | Measured; mobile sample declares Inter |
| Initiative number | `44px / 48px` | `44px / 48px` | Inter `600`; `0.66px` | Measured |
| Customer-story headline | Approximately `18px / 28px` | Not visually established | Bold | Screenshot estimate |
| Promotion heading | Approximately `20px / 24px` | Approximately `20px / 24px` | Bold | Screenshot estimate |

Price paragraph samples do not include all nested numeral styles. Do not treat the enclosing paragraph's `12px` or `16px` declaration as the verified size of the large amount itself.

## Tokens — Spacing & Shapes

**Root size:** measured `16px` at both viewports.
**Rhythm:** compact labels and controls inside widely separated content sections.
**Reusable spacing scale:** `8, 16, 24, 32, 40, 48, 64, 80, 104px`. This is a recommended consolidation of observed spacing, not an original token scale.

### Spacing Scale

| Relationship | Value | Evidence |
| --- | --- | --- |
| Desktop header side inset | `48px` | Measured logo and final action positions |
| Mobile page side inset | `24px` | Measured across hero and major content sections |
| Desktop hero heading to description | `24px` | Derived: heading ends at y=364; paragraph starts at y=388 |
| Desktop description to actions | `24px` | Derived: paragraph ends at y=508; actions start at y=532 |
| Desktop hero action gap | `24px` | Derived from two `191px` controls at x=145 and x=360 |
| Mobile description to first action | `40px` | Derived from element rectangles |
| Mobile stacked hero action gap | `17px` | Derived from button rectangles |
| Desktop workflow column gap | `30px` | Derived from `257.5px` columns with `287.5px` start-to-start spacing |
| Customer-story and help column gaps | Approximately `32px` | Screenshot estimate |
| Mobile value-pillar gap | `40px` | Derived from consecutive section rectangles |
| Feature-band vertical padding | `80px` desktop; `60px` mobile | Measured |
| Main conversion-section vertical padding | `104px` desktop; `60px` mobile | Measured |
| Gap before several major desktop sections | `104px` | Derived from adjacent section rectangles |

### Border Radius

| Element | Value | Evidence |
| --- | --- | --- |
| Hero CTA | `80px` declared radius | Measured; produces a pill at `56px` height |
| Header and standard CTA | `70px` declared radius | Measured; controls are `36px` or `46px` high |
| Mobile solution label | `41px` declared radius | Measured on a `106 × 46px` label |
| Compliance and workflow labels | Square corners | Visible; workflow labels measured at `0px` |
| Customer-story and help card | Approximately `16px` | Screenshot estimate |
| Customer-story photograph | Approximately `10px` | Screenshot estimate |
| Floating promotion | Approximately `10–12px` | Screenshot estimate |
| Chat launcher | Circular icon or capsule | Screenshot observation |

### Layout Measurements

| Element | Desktop: 1440 × 1000 | Mobile: 390 × 844 | Evidence |
| --- | --- | --- | --- |
| Header | `1440 × 84px` | `390 × 53px` | Measured |
| Header logo link | `242 × 33.2px`, x=48 | `192 × 26.34px`, x=24 | Measured |
| Mobile menu target | Not visible | `75 × 53px`, x=315 | Measured; visible glyph is much smaller |
| Repeated main content width | `1120px`, x=160 | `342px`, x=24 | Measured |
| Hero-wide reference | `1150px`, x=145 | `342px`, x=24 | Measured on hero footnotes; a useful container reference |
| Hero heading box | `456 × 168px`, y=196 | `342 × 176px`, y=153 | Measured |
| Hero description | `450 × 120px`, y=388 | `342 × 156px`, y≈636.84 | Measured |
| Hero CTA | `191 × 56px` each | `342 × 56px` each | Measured |
| Workflow explanation column | `257.5px` | `342px` | Measured |
| Customer-story card | Approximately `352px` wide | Not established by the mobile captures | Screenshot estimate |
| Help entry | Approximately `544 × 108px` | Not established by the mobile captures | Screenshot estimate |
| Bottom action strip | Approximately `88px` high | Exact height obscured | Screenshot estimate |
| Document promotion | Approximately `608 × 212px` | Approximately `370 × 417px` | Screenshot estimate |
| Document height | Approximately `22,539px` | Approximately `47,996px` | Reported measurement |

The content widths above are observed results. An original `max-width` declaration or breakpoint cannot be recovered solely from these two viewport samples.

## Components

### Site Header

**Role:** product identity, evaluation shortcuts, account access, and primary conversion actions.

The desktop header has three recognizable groups: a logo at the left, three navigation links in the middle, and login plus two pills at the right. The navigation exposes `料金表`, `導入企業の声`, and `個別相談会（デモ）を予約`. Pricing and customer stories point to `#plan` and `#interview` on the same page.

The logo occupies `242 × 33.2px`. Text links use `14px` medium-weight type. The two conversion pills are each `145 × 36px`; the document action has a white fill and yellow outline, while the trial action is yellow. Keep the charcoal text consistent across both treatments.

At 390px, the header becomes `53px` high. It retains a `192px` logo and a hamburger button with a measured `75 × 53px` target. Desktop links are absent from the captured closed state. An expanded menu was not inspected.

A `transform 0.6s` transition is declared on the header. The evidence does not establish its positioning model, scroll threshold, or hide/show direction.

### Hero Introduction

**Role:** explain invoice automation immediately, then offer a low-commitment research action and a trial.

The desktop composition places text in a narrow left column and a large line illustration on the right. Two dark rectangular compliance labels precede the headline: `インボイス制度対応` and `電子帳簿保存法対応`. Their visible heights are approximately `34px` on desktop and `26px` on mobile.

The current headline reads `受取請求書の入力・支払・仕訳計上を、どんな形式でも、ぜんぶ自動化。`. Its measured box is `456px` wide and three `56px` lines high. A five-line description follows, then two equally sized actions.

The illustration depicts incoming documents flowing into a yellow stacked-box mark, a person reviewing a screen, and connected circular symbols for data, calculation, and banking. It remains open on the white canvas, without an enclosing colored hero panel.

On mobile, the visible heading retains strong scale and wraps into four lines. The artwork moves between the heading and description. The description begins at approximately y=637, followed by the trial at y≈833 and document download at y≈906. These underlying elements are present in the DOM even though the promotion obscures much of them in the screenshot.

### Action Pills

**Role:** a repeated visual grammar for trial, consultation, document access, and supporting destinations.

| Context | Anatomy | Captured emphasis |
| --- | --- | --- |
| Header | `145 × 36px`; `12px` bold label | Yellow trial, outlined document action |
| Hero | `191 × 56px`; `16px` bold label; thin right arrow | Outlined document action on the left, yellow trial on the right |
| Mobile hero | `342 × 56px`; stacked with a `17px` gap | Yellow trial first, outlined document action second |
| Standard section link | Usually `46px` high; width follows context | Frequently white with a yellow outline |
| Pricing | `242 × 46px` sampled on desktop; `374 × 46px` on mobile | Yellow trial action |
| Desktop bottom strip | Three horizontal pills | Outlined trial and consultation; yellow document download |

The action hierarchy depends on placement. Document download receives the yellow fill in the bottom strip and promotion, while trial receives it in the header and hero. Do not impose a single fill treatment on an action label regardless of context.

The visible arrows are thin, dark, and understated. Keep their weight close to the interface linework. No icon library was identified.

### Proof Band

**Role:** reinforce the opening claim with compact, visible evidence.

Four laurel-framed statistics appear below the desktop hero actions: the displayed adoption count of 40,000 companies, 99.8% retention, an 80% work-time reduction, and 96.3% satisfaction. These are page claims with accompanying dates and notes, not findings independently verified by this reference.

Yellow wreaths frame charcoal labels and large numerals. The groups sit in a compact horizontal band aligned with the left hero edge, leaving substantial white space to the right. Their widths vary with content; they are not four full-width colored cards.

Small notes follow beneath the badges at `12px / 20px` on desktop. Preserve footnote markers and their relationship to the claims. The badge arrangement on mobile is not visible in the supplied captures.

### Value Pillars and Problem–Solution Groups

**Role:** connect purchasing concerns to practical capabilities.

Three desktop value pillars have measured `258px` section widths and `24px / 33.6px` headings. They address cost, operational fit, and implementation effort. On mobile, they become consecutive `342px` blocks with `20px / 30px` headings and `40px` between blocks.

The following problem section uses four desktop text positions spaced `288px` apart. On mobile, each problem and its answer form a sequential group. The source exposes a yellow `解決 !` capsule measuring `106 × 46px` between problem and solution content.

The desktop text extraction and element samples contain different AX/DX wording in this region. Preserve whichever approved copy is supplied for implementation; the evidence does not establish an animated text substitution.

### Four-Step Workflow

**Role:** make the service process understandable before the detailed feature and pricing sections.

Each step combines an automation/customer responsibility label, a STEP identifier, a bold task title, an illustration region, and explanatory copy. The four tasks cover importing invoices, data conversion, checking results, and exporting or integrating with accounting and banking systems.

Desktop explanatory columns are `257.5px` wide with `30px` gaps. Responsibility labels are compact rectangles: the automation label uses white text on charcoal, while the customer label has charcoal text on a light background. The sequence is informational, rather than evidence of a clickable stepper.

Mobile reorganizes the step header rather than merely shrinking it. STEP text and responsibility labels begin at x=146, while descriptions span the main column from x=24. This leaves a compact region to the left of each heading for the accompanying artwork. Titles reduce to `20px`; paragraphs reduce to `14px` while retaining generous line spacing.

A standard outlined pill beneath the conversion step links to a data-result image. Opening behavior was not tested.

### Integration Section

**Role:** reassure visitors that existing accounting systems can remain in use.

A large heading, explanatory paragraph, integration imagery, and a centered outlined action form this section. The desktop heading spans two `56px` lines; its mobile counterpart occupies a `200px`-high box using `28px / 40px` type.

The supporting action is measured at `232 × 46px` on both viewports. Its label is `そのほか連携するシステム`. The text identifies more than 50 supported accounting or ERP systems, but the supplied screenshots do not expose enough of this section to document every logo or its arrangement.

### Pricing Comparison

**Role:** compare three plans with transparent setup, subscription, and processing charges.

The rendered content contains Minimum, Basic, and Professional plans, with Japanese labels `ミニマム`, `ベーシック`, and `プロフェッショナル`. Each includes an audience description, setup cost, monthly cost, processing charges with and without operator confirmation, tax captions, and a trial action. Basic carries the preference label `一番選ばれています`.

Desktop plan heading boxes are `274px` wide and begin at x=442, 724, and 1006. Their horizontal alignment supports a comparison-table reading model, with row labels to the left. A single visible disclosure button reads `詳細をひらく`.

Mobile repeats the field labels within each vertically stacked plan and provides a separate disclosure control for each plan. Plan buttons extend to x=8 and width `374px`, wider than the usual `342px` content column. Retain this distinction if reproducing the captured layout closely.

The disclosure controls are evidenced as buttons, but their expanded content and transition were not inspected. The sampled data is insufficient to specify every cell border, background, or enlarged price numeral.

### Initiatives, Features, and Conversion Choices

**Role:** add organizational context, address detailed concerns, and offer several next steps.

The initiatives block uses square charcoal category labels, large headings, and Inter sequence numbers `01–03`. Three desktop explanation columns become stacked mobile sections. A yellow pill links to the company website.

A following feature section has a measured warm translucent background and `80px` desktop or `60px` mobile vertical padding. Desktop text is arranged in three columns across two sets of features. Mobile features stack, with approximately `286–292px` inner text widths inside the wider page column. This nested inset gives the section a different density from the full-width workflow paragraphs.

The conversion section offers three distinct routes: service documentation, individual consultation, and a free trial. Each combines a heading, short explanation, and pill action. Their desktop text blocks are `256px` wide; a sampled mobile block is `304px` wide. Keep these as explicit choices instead of reducing every route to the same generic contact link.

### Customer-Story Card

**Role:** provide specific operational evidence through identifiable customers.

The desktop screenshot shows a three-column grid inside approximately `1120px`, with `352px` cards and `32px` gaps. Cards have a light gray border, approximately `16px` corners, and a white fill. They do not appear to rely on elevation shadows.

An inset landscape photograph occupies the top. A visible example is approximately `332 × 203px`, with small rounded corners. Below it, a bold multi-line result headline leads into the industry, organization, and interviewee. A quieter lower block lists the plan, invoice volume, and connected system.

Image inset and text inset differ: photographs begin roughly `10px` inside the card edge, while text begins roughly `26px` inside it. This is a useful detail to preserve. The title and metadata are not overlaid on the photograph.

The link evidence wraps the story's text as one destination, supporting a whole-card navigation pattern. Visible destinations include [the office-work case study](https://invox.jp/interview20240828), [the card-company case study](https://invox.jp/interview20230815), and [the healthcare case study](https://invox.jp/interview20220908). These destinations were not opened during this analysis.

The mobile card layout is not exposed by the supplied mobile screenshots. A single-column adaptation is recommended, rather than claimed as visually verified.

### Learning Resources, News, and Help

**Role:** support research and ongoing use beyond immediate conversion.

The rendered document includes seminar descriptions, educational guides, related products, and dated news. Their content and destinations are evidenced, but most of their visual anatomy is outside the attached screenshot coverage.

The help section is visible near the desktop footer. It uses two columns of horizontal outlined cards, approximately `544 × 108px` each with `32px` between columns. A landscape thumbnail of approximately `156 × 88px` sits at the left; a bold title and small date sit to its right. Corners resemble the customer-story cards, but the orientation is compact and horizontal.

The final unpaired help entry stays in the left column. A centered `ヘルプセンターを見る` pill follows with substantial white space before the footer. Avoid stretching the final entry across both columns merely to fill the grid.

### Footer

**Role:** organize product access, related services, initiatives, and company policies.

The desktop footer uses a broad warm neutral surface. Its content aligns with the main `1120px` region. A large product logo and Facebook/X marks occupy the left group; four additional groups cover product links, services, initiatives, and company information.

Small, lightly tracked group labels contrast with bolder link lists. Service identities retain their distinct turquoise, orange, purple, green, and blue marks. The initiative logos also retain their own colors. These are localized brand assets within an otherwise restrained footer.

The mobile screenshot shows the groups stacked vertically with `24px` left alignment. The document promotion obscures the lower company group, so its unobstructed spacing cannot be established from that capture.

The inspected original page explicitly names `株式会社invox` and links to [invox.co.jp](https://invox.co.jp/) in its company group. No production or design credit is established by the inspected original-page evidence.

### Bottom Action Strip

**Role:** keep conversion options accessible during a very long page.

Across the desktop captures, a white strip occupies approximately the bottom `88px` of the viewport. A soft upper shadow separates it from the page. Three pills sit toward the right, leaving room for the chat launcher at the left.

The trial and consultation actions are outlined; document download is filled yellow. Labels include thin right arrows. The strip overlays content in the screenshots, including the next section at the opening fold.

The mobile rendered text exposes only the document-download action at the end of the page's fixed-action content. Its complete visual geometry is obscured by the promotion. Do not infer a three-action mobile strip from the desktop version.

### Document Promotion

**Role:** invite visitors to obtain a service overview document.

On desktop, the promotion is a white, shadowed panel approximately `608 × 212px`, positioned around `10px` from the right and bottom edges. A four-page document preview occupies the left half. The right half contains a bold heading, short explanatory copy, and a yellow download pill. A small close mark sits at the upper right.

On mobile, the same content stacks into an approximately `370 × 417px` panel with `10px` side and bottom clearances. The document preview moves above the text. At 390 × 844, the panel covers about 49% of the viewport height.

No dimmed backdrop is visible. This is visually a floating promotion rather than evidence of a full-screen modal treatment. No input field appears in the captured panel; its copy discusses sending a document URL, but an inline email form should not be invented from that statement.

Appearance timing, targeting, dismissal persistence, focus behavior, and click results remain unverified.

### Chat Launcher

**Role:** provide a persistent support entry point.

The desktop control is a dark capsule near the lower left, with a white circular icon area and the label `お問い合わせはこちら`. It is approximately `236 × 56px`, with a small close affordance near its upper-right edge.

Mobile reduces it to a circular control approximately `56px` across. In the captured state it overlaps the document promotion's yellow action. This overlap should be documented as an observed limitation; the recommended adaptation should prevent the two targets from competing for the same space.

## Tokens — Motion & Interaction

| Treatment | Supplied computed declaration | What the evidence establishes |
| --- | --- | --- |
| Header | `transform 0.6s` | A transform transition is available; its trigger and motion path are unverified |
| Desktop navigation links | `opacity 0.4s` | Opacity feedback is defined; final interaction opacity was not captured |
| Desktop CTA pills | `background 0.4s` | Background changes can transition; hover colors are not supplied |
| Several mobile CTA links | `background-color 0.2s, color 0.2s` | A shorter mobile transition is declared |
| Generic links | `background-color 0.2s, color 0.2s` | Color transition capability |
| Integration heading and copy | `opacity 0.7s` | Possible visibility transition; no observed scroll-trigger sequence |
| Some supporting paragraphs | `opacity 0.7s` | Local opacity transitions exist, not proof of a page-wide reveal system |
| Desktop pricing disclosure | `opacity 0.3s` | Button feedback declaration; expansion behavior remains unverified |
| Sampled animations | `animation: none` | No keyframe animation on those sampled elements at observation time |
| Promotion and chat | Not supplied | Visible resting states only; no reliable duration or trigger |

Many samples report only `transition: all`, without a nonzero duration in the supplied serialization. That is not sufficient evidence for visible animation.

The capture process waited for finite motion and layout stability, and temporarily paused perpetual animation during readiness checks. It does not establish that the complete site is static, nor reveal unexercised motion. The drawn document trails in the hero are part of the illustration; they are not evidence of moving invoices.

Navigation destinations are known from rendered links: registration at `https://web.invox.jp/regist`, document access at `https://invox.jp/document-dl`, consultation at `https://invox.jp/consultation`, and login at `https://web.invox.jp/`. Those destination flows were not inspected. No expanded mobile menu, pricing expansion, chat conversation, keyboard navigation, or promotion dismissal was tested.

## Surfaces

| Layer | Appearance | Usage |
| --- | --- | --- |
| Main canvas | White | Hero and most long-form content |
| Feature band | Very pale warm tint | Groups detailed service benefits |
| Footer | Visually warm near-white | Separates the final directory of links |
| Content cards | White, fine gray outline, modest rounded corners | Customer stories and help entries |
| Primary action | Solid yellow, charcoal text | Trial or document action depending on context |
| Secondary action | White, yellow outline, charcoal text | Consultation, supporting links, alternate hero action |
| Status label | Charcoal rectangle, white text | Compliance and responsibility labels |
| Fixed action strip | White with a soft upper shadow | Desktop conversion access |
| Floating promotion | White, rounded corners, soft shadow | Document teaser |
| Support control | Charcoal capsule or circle with white icon | Chat entry |

Most structure comes from whitespace, typography, imagery, and fine outlines. Shadows concentrate on floating interface elements. The desktop header's translucent white does not establish a glass blur effect.

## Imagery

The hero illustration is the strongest distinctive asset. Slightly irregular black outlines depict office work through documents, a screen, a human figure, and simple connected symbols. Yellow fills are selective: stacked layers, small pieces of paper, interface accents, and clothing details. White remains an active part of the drawing.

Preserve the illustration's open composition and hand-drawn variation. Uniform icon strokes or glossy three-dimensional objects would materially change its character. Use uncropped illustration assets with natural proportions.

Customer photographs serve a different purpose. They show recognizable people and workplaces: a meeting area, a company sign, and an institutional corridor appear in the supplied desktop capture. They use ordinary full color and landscape crops. Do not force them into the hero's yellow-and-black palette.

The document promotion uses a miniature four-page sheet with visible tables, diagrams, and yellow framing. It communicates that the downloadable material is concrete and information-rich. The help cards use small product-screen or laptop photographs.

### Observed Asset References

| Asset or reference | Available evidence | Implementation guidance |
| --- | --- | --- |
| Main product logo | Visible in desktop/mobile headers and desktop footer; image URL not supplied | Use an authorized asset with its original proportions |
| Hero workflow illustration | Visible in the desktop hero and partly visible on mobile; URL not supplied | Preserve white space and avoid cropping the connected circles |
| Four proof laurels | Visible in the current desktop hero; asset URLs not supplied | Retain individual claims, markers, and dates; provide readable text alternatives |
| Customer photographs | Visible in the customer-story capture; image URLs not supplied | Use authorized landscape photography and consistent crop regions |
| Document preview | Visible in desktop/mobile promotion; URL not supplied | Keep the four-page composition legible as a preview |
| Help thumbnails | Visible near the desktop footer; image URLs not supplied | Use small landscape crops alongside live titles and dates |
| Data-result image link | `/wp-content/uploads/2021/02/data-20210226.png` appears as a rendered destination | The URL is verified as a link; the full destination image was not separately inspected |

Asset file formats, intrinsic resolutions, and SVG source details are otherwise unknown. Do not manufacture image paths or assume every logo or illustration is an SVG.

## Layout & Responsive Behavior

The desktop page uses a centered main region around `1120px` wide, with a slightly wider `1150px` reference in the hero. The header is broader, with `48px` edge clearances. The hero leaves room for a substantial illustration while keeping Japanese copy to approximately `450px`.

On mobile, most content uses `24px` side gutters and a `342px` reading width. The page is extensively reorganized: hero imagery moves into the reading sequence, value pillars stack, workflows compact their heading regions, and pricing repeats row labels within each plan. The increase from approximately 22,539px to 47,996px in document height reflects a much longer narrow-screen document.

| Area | Observed desktop behavior | Observed mobile behavior |
| --- | --- | --- |
| Header | Logo, navigation, and account/actions in one row | Logo plus menu button |
| Hero | Text left, illustration right | Heading, illustration, description, actions in sequence |
| Hero type | `36px / 56px`, three lines | `32px / 44px`, four lines |
| Hero actions | Two `191px` controls; document first visually | Two `342px` controls; trial first |
| Main headings | Usually `36px / 56px` | Usually `28px / 40px` |
| Value pillars | Three measured columns | Three sequential blocks |
| Workflow | Four explanation columns | Sequential steps with compact heading regions |
| Pricing | Three plan columns and shared comparison structure | Stacked plans with repeated labels and separate disclosures |
| Feature band | Three-column text positions | Narrower nested text blocks stacked vertically |
| Footer | Brand plus four link groups | Vertically stacked groups |
| Promotion | Image and text beside one another | Image above text; approximately half-screen height |
| Chat | Labeled capsule | Icon circle |

Customer-story and help-card mobile arrangements are not visually established by the attached mobile captures. Tablet layouts, exact breakpoints, landscape behavior, zoom behavior, and safe-area handling remain unverified.

For a new implementation, use responsive rules based on content fit. The Quick Start uses 1200px, 1024px, and 768px thresholds as recommendations. They are not recovered source breakpoints.

## Do’s and Don’ts

### Do

- Preserve the exact measured yellow `#FFCC00` and warm charcoal `#474241`.
- Keep the large areas white and reserve warm tinted bands for meaningful grouping.
- Use Noto Sans JP for the main interface and Inter selectively for numerical structure.
- Retain generous heading line heights and comfortable paragraph spacing.
- Pair square informational labels with pill-shaped actions.
- Keep illustration strokes informal and yellow fills selective.
- Give customer-story cards a photograph, outcome headline, customer identity, and operational metadata.
- Preserve the desktop distinction between inset photographs and more deeply inset card text.
- Reorganize workflows and pricing for a narrow screen instead of scaling a desktop table down.
- Keep citations and dates attached to displayed proof claims.
- Treat the document promotion, chat, and action strip as a coordinated group of floating controls.

### Don’t

- Do not turn the entire page into yellow background panels.
- Do not use white text on yellow to imitate a generic primary button; the captured controls use charcoal.
- Do not replace the hero drawing with generic glossy software imagery.
- Do not introduce prominent shadows on every information card.
- Do not treat generic CMS gradients and palettes as visible brand tokens.
- Do not apply Inter to all Japanese text or infer a brand serif from the root HTML style.
- Do not assume a three-column desktop card layout was visually verified on mobile.
- Do not invent a menu animation, promotion timer, price-expansion behavior, or chat flow.
- Do not add an email field inside the captured promotion without a separate product requirement.
- Do not reproduce the observed mobile chat/download overlap as desirable behavior.
- Do not hardcode screenshot line breaks throughout long Japanese paragraphs.

## Recommended Implementation Additions

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

- Coordinate floating controls with a single state owner. When the document promotion is open, temporarily hide or reposition the duplicate action strip and chat launcher.
- Make the promotion easy to dismiss with a comfortably sized control, preserve the user's dismissal for the intended session, and avoid reopening it during the same reading task.
- Choose appropriate semantics for the promotion. A nonmodal teaser should not unexpectedly trap focus; a deliberately modal version needs a labeled dialog, focus handling, and keyboard dismissal.
- Give the menu button, chat launcher, close controls, social links, and image-only product links explicit accessible names.
- Keep the visible mobile menu glyph small if desired, while preserving its measured generous target region.
- Use one semantic page heading for the main message. The sampled source contains both a logo H1 and a content H1; an implementation can keep the logo as a normal home link.
- Add visible charcoal focus outlines. Provide non-color cues for inline links, and verify small blue text and low-opacity captions against their actual backgrounds.
- Keep source text available for proof graphics and give meaningful alternatives to informative illustrations and customer photographs.
- Build price expansion with a real button and an accurate expanded state. Do not hide essential plan labels from assistive technology when switching layouts.
- Reserve bottom document clearance for persistent actions, including device safe areas, so final links remain reachable.
- Respect reduced-motion preferences and keep content readable before any optional opacity reveal initializes.
- Validate long labels, enlarged text, and keyboard focus order where desktop and mobile action ordering differ.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas and cards: `#FFFFFF`.
- Main text and action labels: `#474241`.
- Primary fill and action outlines: `#FFCC00`.
- Supporting text: `rgba(71, 66, 65, 0.8)`.
- Quiet financial captions: `rgba(71, 66, 65, 0.6)`.
- Feature section: `rgba(61, 49, 0, 0.05)` over white.
- Inline links: measured bright blue `#0094FF`; measured darker reference-link blue `#0073C6` is available for a more conservative adaptation.
- Card borders: estimated light gray around `#D8D8D8`.

### Overall Prompt

“Create a Japanese invoice-automation product website with a white canvas, warm charcoal `#474241` text, and yellow `#FFCC00` actions. Use Noto Sans JP, medium-weight body copy, bold headings at approximately 36/56 on desktop and 28/40 on mobile, with a distinct 32/44 mobile hero heading. Place concise hero copy beside an open black-outline office illustration with selective yellow fills. Use square compliance labels, rounded action pills, compact laurel proof graphics, clearly explained workflow steps, a responsive three-plan comparison, photographic customer-story cards, resource links, and a grouped service footer. Keep the main desktop column near 1120px and mobile gutters at 24px. Use shadows mainly for floating controls. Coordinate the download promotion and chat so their targets never overlap.”

### Example Component Prompts

1. **Hero:** “Build a white desktop hero with a roughly 456px copy column, two charcoal compliance labels, a bold Japanese headline at 36/56, a muted 14/24 description, and two 191 × 56px pills. Put a large open invoice-workflow line illustration at the right. On mobile, place the illustration between the heading and description and stack 342px-wide actions.”
2. **Customer story:** “Create a white customer-story card with an approximately 16px radius and thin gray outline. Place an inset landscape workplace photograph above an 18px bold result headline. Follow with customer identity and a quieter block for plan, invoice volume, and integration. Use a deeper text inset than image inset; omit a general drop shadow.”
3. **Workflow:** “Create four numbered invoice-processing steps with compact charcoal automation labels, Inter STEP identifiers, bold task titles, relevant illustrations, and readable descriptions. On mobile, stack the steps and place the small illustration beside the heading region, with full-width explanatory text below.”
4. **Help entry:** “Create a horizontal white help card with a fine gray border, rounded corners, a roughly 156 × 88px thumbnail at left, and a bold title above a small tracked date. Use two columns on desktop and keep an unpaired final item in the left column.”
5. **Document promotion:** “Create a white floating document teaser with a four-page preview, a bold heading, short explanation, a yellow pill, and an accessible close button. Use image-left/text-right on desktop and image-above-text on mobile. Make its height content-driven and scrollable if necessary. Suspend competing floating controls while it is open.”

## Quick Start

### CSS Custom Properties

This is an adaptation of the measured appearance, not extracted production CSS. Source colors, fonts, and representative dimensions are retained. Card rules, shadows, intermediate breakpoints, hover colors, and collision handling are recommendations based on the screenshots. Font files and authorized image assets must be supplied separately.

The layout expects semantic header, main, section, article, and footer markup. Use `.hero-heading`, `.hero-art`, `.hero-intro`, and `.hero-actions` as direct children of `.hero-grid`. Add `.promo-open` to the `.site` shell only while the promotion is visible, and remove it on dismissal. Menu toggling, disclosure state, and promotion behavior require application code.

```css
:root {
  /* Measured colors and source-aligned aliases */
  --color-accent: #ffcc00;
  --color-ink: #474241;
  --color-page: #ffffff;
  --color-copy: rgb(71 66 65 / 80%);
  --color-quiet: rgb(71 66 65 / 60%);
  --color-tint: rgb(61 49 0 / 5%);
  --color-link: #0073c6;
  --color-mark: rgb(255 204 0 / 40%);

  /* Estimated or recommended surface details */
  --color-rule: #d8d8d8;
  --color-hover: #ffe066;
  --shadow-floating: 0 2px 10px rgb(0 0 0 / 20%);
  --shadow-strip: 0 -5px 18px rgb(0 0 0 / 10%);

  /* Measured font stacks */
  --font-body: 'Noto Sans JP', sans-serif;
  --font-number: Inter, 'Noto Sans JP', sans-serif;
  --weight-body: 500;
  --weight-bold: 700;

  /* Observed widths represented as reusable constraints */
  --content-width: 1120px;
  --hero-width: 1150px;
  --page-gutter: 24px;
  --header-height: 84px;
  --action-height: 46px;
  --hero-action-height: 56px;
  --bottom-clearance: 88px;

  /* Recommended consolidated spacing and geometry */
  --space-small: 8px;
  --space-medium: 16px;
  --space-content: 24px;
  --space-grid: 32px;
  --space-group: 40px;
  --space-section: 104px;
  --radius-card: 16px;
  --radius-image: 10px;
  --radius-pill: 80px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Measured representative transition durations */
  --motion-link: 200ms ease;
  --motion-action: 400ms ease;
}

* { box-sizing: border-box; }

body.site {
  margin: 0;
  padding-bottom: calc(var(--bottom-clearance) + var(--safe-bottom));
  background: var(--color-page);
  color: var(--color-ink);
  font: var(--weight-body) 16px/1.75 var(--font-body);
}

.site img {
  display: block;
  max-width: 100%;
  height: auto;
}

.site button { font: inherit; }
.site [hidden] { display: none !important; }

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

.section-stack > section + section {
  margin-top: var(--space-section);
}

.section-title {
  margin: 0 0 40px;
  font-size: 36px;
  line-height: 56px;
  font-weight: 700;
  letter-spacing: 1px;
}

.section-copy {
  margin: 0;
  color: var(--color-copy);
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 1.5px;
}

.section--tinted {
  padding-block: 80px;
  background: var(--color-tint);
}

/* Header positioning is left in normal flow. */
.site-header {
  min-height: var(--header-height);
  background: rgb(255 255 255 / 90%);
}

.header-inner {
  min-height: var(--header-height);
  padding-inline: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { flex: 0 0 242px; }
.brand img { width: 242px; }

.main-nav,
.header-actions {
  display: flex;
  align-items: center;
}

.main-nav { gap: 56px; }
.header-actions { gap: 24px; }

.nav-link {
  color: var(--color-ink);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  transition: opacity 400ms ease;
}

.menu-toggle { display: none; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--action-height);
  padding: 10px 24px;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: var(--color-page);
  color: var(--color-ink);
  font: 700 16px/1.2 var(--font-body);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--motion-action), color var(--motion-link);
}

.button--primary { background: var(--color-accent); }

.button--header {
  width: 145px;
  min-height: 36px;
  padding-block: 6px;
  font-size: 12px;
  border-radius: 70px;
}

/* Provide decorative arrows as aria-hidden markup. */
.button-arrow {
  flex: none;
  font-size: 20px;
  line-height: 1;
  font-weight: 400;
}

.hero {
  width: min(calc(100% - 48px), var(--hero-width));
  margin-inline: auto;
  padding-top: 48px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 456px minmax(0, 1fr);
  grid-template-areas:
    'heading art'
    'intro art'
    'actions art';
  column-gap: 40px;
  row-gap: 24px;
}

.hero-heading { grid-area: heading; }
.hero-art { grid-area: art; align-self: start; }
.hero-art img { width: 100%; object-fit: contain; }

.compliance-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-bottom: 30px;
}

.compliance-label {
  padding: 7px 8px;
  background: var(--color-ink);
  color: white;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.hero-title {
  margin: 0;
  font-size: 36px;
  line-height: 56px;
  letter-spacing: 1px;
  font-weight: 700;
}

.hero-intro {
  grid-area: intro;
  max-width: 450px;
  margin: 0;
  color: var(--color-copy);
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 1.5px;
}

.hero-actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: repeat(2, 191px);
  grid-template-areas: 'download trial';
  gap: 24px;
}

.hero-actions .trial { grid-area: trial; }
.hero-actions .download { grid-area: download; }
.hero-actions .button { min-height: 56px; padding-inline: 12px; }

.proof-band {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 16px;
  margin-top: 64px;
}

.proof-notes {
  margin-top: 12px;
  color: var(--color-copy);
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 1.2px;
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

.step-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  min-height: 26px;
  background: var(--color-ink);
  color: white;
  font-size: 14px;
  line-height: 24px;
}

.step-title {
  font-size: 28px;
  line-height: 1.42;
  letter-spacing: 1.5px;
}

.initiative-number {
  font: 600 44px/48px var(--font-number);
  letter-spacing: 0.66px;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.case-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 8px;
  border: 2px solid var(--color-rule);
  border-radius: var(--radius-card);
  background: white;
  color: var(--color-ink);
  text-decoration: none;
}

.case-card > img {
  width: 100%;
  aspect-ratio: 1.64 / 1;
  object-fit: cover;
  border-radius: var(--radius-image);
}

.case-content { padding: 20px 16px 24px; }

.case-title {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 1px;
}

.case-client {
  margin: 0;
  font-size: 14px;
  line-height: 24px;
  font-weight: 700;
}

.case-details {
  margin: 32px 0 0;
  color: var(--color-quiet);
  font-size: 14px;
  line-height: 24px;
  overflow-wrap: anywhere;
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.help-card {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 8px;
  border: 2px solid var(--color-rule);
  border-radius: var(--radius-card);
  color: var(--color-ink);
  text-decoration: none;
}

.help-card img {
  width: 156px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
}

.help-title { margin: 0; font-size: 16px; line-height: 26px; }
.help-date { font-size: 12px; letter-spacing: 1px; }

.site-footer {
  margin-top: 104px;
  padding-block: 64px;
  background: var(--color-tint);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.footer-heading {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
}

.footer-links {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 700;
}

.footer-links a { color: inherit; text-decoration: none; }

.sticky-actions {
  position: fixed;
  z-index: 20;
  inset: auto 0 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 32px;
  min-height: calc(88px + var(--safe-bottom));
  padding: 20px 32px calc(20px + var(--safe-bottom));
  background: white;
  box-shadow: var(--shadow-strip);
}

.download-promo {
  position: fixed;
  z-index: 40;
  right: 10px;
  bottom: calc(10px + var(--safe-bottom));
  display: grid;
  grid-template-columns: 284px minmax(0, 1fr);
  align-items: center;
  gap: 36px;
  width: min(608px, calc(100% - 20px));
  max-height: calc(100dvh - 20px - var(--safe-bottom));
  overflow-y: auto;
  padding: 12px;
  border-radius: 12px;
  background: white;
  box-shadow: var(--shadow-floating);
}

.promo-title {
  margin: 0 24px 8px 0;
  font-size: 20px;
  line-height: 24px;
}

.promo-copy { margin: 0 0 16px; font-size: 16px; line-height: 20px; }

.promo-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 90%);
  color: var(--color-ink);
  cursor: pointer;
}

.chat-launcher {
  position: fixed;
  z-index: 30;
  left: 20px;
  bottom: calc(20px + var(--safe-bottom));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 20px 8px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--color-ink);
  color: white;
  font-weight: 700;
  box-shadow: var(--shadow-floating);
}

/* Recommended: prevent the overlap visible in the captured page. */
.site.promo-open .chat-launcher,
.site.promo-open .sticky-actions {
  display: none;
}

.site :focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 4px;
}

.site .text-link {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Recommended hover endpoints; source endpoints were not supplied. */
@media (hover: hover) {
  .button:hover { background: #fff5cc; }
  .button--primary:hover { background: var(--color-hover); }
}

/* Recommended intermediate breakpoint for navigation fit. */
@media (max-width: 75rem) {
  :root { --header-height: 53px; }
  .header-inner { padding-inline: 24px 0; }
  .brand { flex-basis: 192px; }
  .brand img { width: 192px; }
  .main-nav, .header-actions { display: none; }
  .menu-toggle {
    display: grid;
    place-items: center;
    width: 75px;
    height: 53px;
    border: 0;
    background: transparent;
    color: var(--color-ink);
  }
}

/* Recommended tablet layouts; not directly inspected. */
@media (max-width: 64rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'heading' 'art' 'intro' 'actions';
    gap: 40px;
  }
  .hero-art { max-width: 640px; margin-inline: auto; }
  .hero-intro { max-width: none; }
  .step-grid, .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 48rem) {
  :root {
    --space-section: 60px;
    --bottom-clearance: 80px;
    --motion-action: 200ms ease;
  }

  .site-header { background: white; }
  .hero { padding-top: 60px; }
  .compliance-labels { gap: 8px 14px; margin-bottom: 14px; }
  .compliance-label { padding: 3px 8px; }
  .hero-title { font-size: 32px; line-height: 44px; letter-spacing: 1.5px; }
  .hero-intro { font-size: 14px; line-height: 26px; letter-spacing: normal; }
  .hero-actions {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'trial' 'download';
    gap: 17px;
  }
  .hero-actions .button { width: 100%; }
  .section-title { font-size: 28px; line-height: 40px; }
  .section-copy { font-size: 14px; line-height: 26px; letter-spacing: normal; }
  .section--tinted { padding-block: 60px; }
  .proof-notes { line-height: 24px; letter-spacing: 1px; }
  .step-grid, .case-grid, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .step-title { font-size: 20px; line-height: 28.4px; letter-spacing: 1px; }

  /* Recommended compact help layout for an uncaptured mobile section. */
  .help-card { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
  .help-card img { width: 104px; }
  .help-title { font-size: 14px; line-height: 22px; }
  .site-footer { margin-top: 60px; padding-block: 48px; }
  .footer-grid { gap: 40px; }

  .sticky-actions { min-height: 80px; padding: 16px 24px calc(16px + var(--safe-bottom)); }
  .sticky-actions .trial, .sticky-actions .consultation { display: none; }
  .sticky-actions .download { width: 100%; }

  .download-promo { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 10px; }
  .promo-content { padding: 10px; }
  .chat-launcher { width: 56px; padding: 0; }
  .chat-label { display: none; }
}

/* Recommended reduced-motion behavior. */
@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
```

The CSS deliberately leaves imagery, pricing disclosure logic, menu contents, and the compact mobile workflow artwork arrangement to their respective components. It supplies the visual foundation without pretending those uninspected behaviors are known. A production implementation should also verify focus order where the hero actions change their visual order.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. Define the properties above first. This mapping does not imply that the original website uses Tailwind.

```css
@theme inline {
  --color-invox-yellow: var(--color-accent);
  --color-invox-ink: var(--color-ink);
  --color-invox-page: var(--color-page);
  --color-invox-copy: var(--color-copy);
  --color-invox-quiet: var(--color-quiet);
  --color-invox-tint: var(--color-tint);
  --color-invox-rule: var(--color-rule);
  --font-invox: var(--font-body);
  --font-invox-number: var(--font-number);
  --radius-invox-card: var(--radius-card);
  --radius-invox-image: var(--radius-image);
  --radius-invox-pill: var(--radius-pill);
  --spacing-invox-gutter: var(--page-gutter);
  --spacing-invox-section: var(--space-section);
  --shadow-invox-floating: var(--shadow-floating);
}
```

## Sources & Evidence

- **Inspected original and final page:** [https://invox.jp/](https://invox.jp/), reported HTTP 200. Both URLs are identical in the supplied observation.
- **Capture time:** `2026-10-01T17:35:20.425Z`, equivalent to October 2, 2026, 02:35:20.425 JST. This reference analyzes that supplied inspection rather than claiming a separate visit.
- **Desktop evidence:** 1440 × 1000 captures showing the opening hero, a customer-story grid region, and the help/footer region. Reported document height is approximately 22,539px.
- **Mobile evidence:** 390 × 844 captures showing the opening hero and a footer region, both with the document promotion present. Reported document height is approximately 47,996px.
- **Rendered DOM evidence:** page text, link destinations, root custom properties, and selected element rectangles and computed styles. Typography, key colors, section padding, and many responsive differences are directly supported by these samples. Lower-page card geometry and floating-panel dimensions are primarily screenshot estimates.
- **Interaction scope:** the supplied collection includes initial loading and scrolling through the document. It contains no verified click sequence for menu expansion, pricing disclosure, promotional dismissal, chat, login, registration, or download completion.
- **Readiness limitations:** captures waited for document load, finite motion, sampled layout/text stability, and visible image decoding within bounded time limits. Perpetual animations were paused during readiness checks and resumed afterward. These checks do not prove that all delayed content or interactions were exposed. SharedWorkers and service workers were disabled during inspection.
- **Asset limitations:** most image URLs, intrinsic dimensions, complete stylesheet rules, font loading details, and intermediate responsive breakpoints were not supplied. Linked destinations are documented as rendered links and were not independently inspected.

Measured values describe the captured current page. Estimated geometry and the reusable CSS are implementation aids; recommended behavior is explicitly separated from observed behavior.