# COUNTER — Style Reference

> Orange graph paper, monumental sans-serif lettering, and condensed serif typography on a finely grained canvas.

**Original URL:** [counter-digital.jp](https://counter-digital.jp/)
**Final URL:** [counter-digital.jp](https://counter-digital.jp/)
**Theme:** a light canvas with orange typography, orange hero artwork, and an orange footer; no user-selectable theme was verified.
**Inspected:** September 12, 2026, at 12:58:29 UTC / 21:58:29 JST, through the supplied browser inspection.
**Viewports:** 1440 × 1000 and 390 × 844 CSS pixels.
**Scope:** the current corporate homepage: desktop hero, a desktop service-section crop, desktop contact/footer, mobile hero and footer, and supplied rendered text, link destinations, custom properties, and element measurements throughout the homepage. Open-menu states and destination pages were not visually inspected.

COUNTER株式会社 presents its digital marketing, creative production, and local media business through a strong two-color identity. The dominant orange is both ink and environment: it draws the fine grid, colors most section text, fills rectangular continuation links, and becomes the footer surface. White and orange alternate roles without introducing a separate action color.

The opening is composed like a poster. Three enormous lines of English sit across the bottom of the desktop viewport, while dense and sparse grid regions create folded, column-like bands behind them. Below, the page opens into generous white space, orange-tinted project imagery, vertically composed Japanese statements, and parenthesized serif section labels. Compact navigation and oversized diagonal arrows keep the corporate information easy to identify within this expressive composition.

This is a long corporate homepage with service discovery, project references, partnerships, testimonials, editorial content, and contact routes. Preserve that information hierarchy when adapting the visual language.

## How to Read This Reference

- **Measured** means a supplied computed style, custom property, or rendered DOM rectangle. The root font size is 16px at both inspected widths.
- **Visual estimate** means an approximate measurement or appearance inferred from the original-page screenshots. It is not a recovered CSS declaration.
- **Calculated** means arithmetic using supplied measurements, such as converting rem values or comparing section extents.
- **Recommended** means guidance for a new implementation. Breakpoints, substitute artwork, accessibility treatments, and the Quick Start layout formulas fall into this category unless explicitly identified as measured.
- **Font names** are the exact declared family identifiers where available. A computed family stack does not independently establish which font file supplied every rendered glyph.
- **DOM presence does not establish visibility.** Menu content, duplicated labels, and transformed text layers appear in the extraction without being visible in the corresponding screenshots.
- **Coordinates describe sampled states.** Some scrolled screenshots differ from the initial DOM geometry. Do not turn those differences into invented animation paths or exact positioning formulas.

## Tokens — Colors

### Default Palette

| Name | Value | Source / implementation token | Role and evidence |
| --- | --- | --- | --- |
| Counter Orange | `#FF552B` | Source `--color-assort`; alias `--orange` | Measured on navigation, headings, case links, rules, and filled MORE links. Visually dominates the hero and footer. |
| White Canvas | `#FFFFFF` | Measured body background; alias `--paper` | Main page base, circular menu surface, and floating action surfaces. Hero text is also measured white. |
| Soft Inverse | `#EFECEB` | Source `--color-inverse`; alias `--inverse` | Measured mobile footer text and DOM-resident menu text. This is not the measured body background. |
| Warm Charcoal | `#3A3735` | Source `--color`; alias `--ink` | Measured body text default. Most prominent homepage sections explicitly override it with orange. |
| Secondary Brown | `#584E49` | Source `--color-light` | Available source token; a significant visible role is not established by the supplied captures. |
| Menu Category Gray | `#807977` | Measured category-heading color | Appears in computed menu content, including SEO and advertising category labels. The open panel was not visually verified. |
| Neutral Rule | `#D9D9D9` | Source `--border-gray-dark` | Available 1px border token. Its component assignment is not established here. |

### Color Behavior

The visible page is more restricted than its complete custom-property inventory. Generic platform colors, gradients, and shadow presets occur in the extraction, but the supplied screenshots do not establish their use in the homepage design. Do not add those colors to the brand palette.

The page base is measured white, although the fine gray grain makes it read as textured paper. Use `#FFFFFF` beneath a restrained texture when reproducing that relationship. Filling the entire page with `#EFECEB` would make the content area warmer and darker than the measured base.

The hero uses orange, white, and pale orange transitions within the artwork. These are spatial variations inside the graphic, not evidence of a separate palette of interface colors. Likewise, the orange treatment over service and project images is visually evident, but its original compositing method was not supplied.

**Recommended contrast adaptation:** opaque `#FF552B` against white has a calculated contrast ratio of approximately 3.19:1. Large display text can retain the original pairing; small functional copy needs separate contrast review. The existing `#3A3735` token provides a compatible darker option for a more accessible adaptation.

## Tokens — Typography

### Japanese Sans Serif

- **Declared primary family:** `Tazugane Gothic HondaMKTA Med`.
- **Source variable:** `--font`.
- **Declared fallbacks:** Hiragino Kaku Gothic variants, Meiryo, and sans-serif.
- **Measured default:** `16px / 24px`, weight `500`.
- **Role:** Japanese body copy, vertical statements, service titles, testimonial text, and contact labels.
- **Character:** controlled and relatively dense, with limited tracking in ordinary Japanese paragraphs.

### Latin Sans Serif

- **Roman identifier:** `HelveticaNeueeTextPro-Roman`.
- **Medium identifier:** `HelveticaNeueeTextPro-Md`.
- **Source aliases:** `--Helvetica` and `--Suisse` point to the Roman stack; `--Suisse-Md` points to the Medium stack.
- **Important:** retain the supplied identifier spelling when referencing existing font declarations. The variable name `--Suisse` is not evidence that the rendered font is Suisse.
- **Role:** monumental hero lettering, uppercase navigation, dates, continuation links, and footer utilities.

The hero is weight `500`, with a line height of `0.9` and tracking of `-0.05em`. Its force comes from size, tight spacing, and arranged word groups rather than an extra-heavy weight.

### Condensed Serif

- **Declared family:** `ITCGaramondStd-BkCond`.
- **Source variable:** `--ITCGaramondW01-BookCn`.
- **Declared fallbacks:** Japanese Mincho families and serif.
- **Role:** parenthesized section labels, the large Download/Contact labels, menu category buttons, and the footer statement.
- **Measured weights:** `400` for several display uses; `500` for some later section labels.

Keep this serif as a clear second voice. Its narrow proportions and curved parentheses soften the rigid grid and broad sans-serif hero. A generic serif fallback is usable, but will not reproduce the same widths.

### Type Scale

Values below are measured unless marked as visual estimates. Sizes and line heights are CSS pixels.

| Role | Desktop | Mobile | Tracking / notes |
| --- | --- | --- | --- |
| Hero statement | `110 / 99`, weight 500 | `50 / 45`, weight 500 | `-5.5px` / `-2.5px`; exactly `-0.05em` at both sizes |
| Hero English explanation | `12 / 15.6` | `12 / 15.6` | Sideways vertical arrangement on desktop; horizontal paragraph on mobile |
| Hero Japanese tagline | `25 / 37.5` | `25 / 37.5` | Size is retained across the two inspected widths |
| Desktop primary navigation | `14 / 21`, weight 500 | Not visible | `0.14px` tracking |
| Moving Japanese statement | `45 / 58.5` | `24 / 31.2` | Orange text, repeated horizontally |
| Promise section label | `36 / 54`, weight 400 | `24 / 36`, weight 400 | Desktop `1.8px`; mobile `-1.2px` tracking |
| Vertical Promise statement | `74 / 96.2` | `40 / 52` | Two Japanese columns |
| Promise body | `25 / 32.5` | `16 / 20.8` | Larger editorial copy than the default body style |
| Service section label | `96 / 86.4`, weight 400 | `48 / 43.2`, weight 400 | Desktop `3.84px`; mobile `-1.92px` tracking |
| Service titles | `32 / 48`, weight 500 | `20 / 30`, weight 500 | Some desktop rectangles include transforms; use computed type values independently |
| Vertical service statement | Approximately 60–64px, visual estimate | `36 / 39.6` | Desktop size is not provided in the sampled text elements |
| Service closing sentence | `24 / 31.2` | `20 / 26` | Full-width copy on mobile before MORE |
| Casestudy / Partnership / Voice labels | `64 / 64`, weight 500 | `32 / 32`, weight 500 | `-0.04em` tracking |
| Case index links | `25 / 37.5`, weight 400 | `16 / 24`, weight 400 | Mobile rows grow when titles wrap |
| MORE links | `20 / 26` or `20 / 30` | Same measured sizes | Line height differs by instance |
| Testimonial quote | `18 / 25.2` | `16 / 22.4` | `0.1em` tracking at both sizes |
| Mobile article date | Not sampled | `24 / 21.6` | Latin Roman stack |
| Mobile article title | Not sampled | `14 / 21` | Japanese sans serif |
| Download / Contact display label | Approximately 60–64px, visual estimate | `32 / 28.8` | Mobile tracking `-1.6px` |
| Floating action label | Approximately 11px, visual estimate | `11 / 16.5` | Compact Japanese utility copy |
| Footer statement | Approximately 60–64px, visual estimate | `32 / 32`, weight 400 | Condensed serif, centered on two lines |
| Footer navigation | Approximately 14px, visual estimate | `14 / 21`, weight 400 | Mobile tracking `0.14px` |
| Footer Contact Us | Approximately 40px, visual estimate | `24 / 36`, weight 400 | Large diagonal arrow supplies additional emphasis |

The COUNTER wordmark is visible as a distinct brand graphic. The measured home-link widths are 160px on desktop and 104px on mobile; its 16px inline rectangle height should not be treated as the artwork’s intrinsic height or font size.

## Tokens — Spacing & Shapes

**Base unit:** a conventional 16px root, with explicit pixel values and rem tokens.
**Density:** spacious section staging, tightly composed display text, compact utility navigation, and square image boundaries.

### Spacing Scale

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Header height | `6.25rem` = 100px | `4.6875rem` = 75px | Source `--header-height`, confirmed by header rectangles |
| General gap token | `1rem` = 16px | `0.75rem` = 12px | Source `--gap` |
| Block spacing token | `3.125rem` = 50px | `2.5rem` = 40px | Source `--padding-block` |
| Small block spacing token | `2.5rem` = 40px | `1.875rem` = 30px | Source `--padding-block-sm` |
| Hero horizontal inset | 30px | 15px | Measured statement rectangles |
| Logo left position | 40px | 15px | Measured home-link rectangles |
| Menu top / right inset | 20px / 20px | 15px / 15px | Measured control rectangles |
| Desktop navigation item gap | 30px | Not applicable | Calculated from adjacent link rectangles |
| Later section top padding | 136px | 55px | Measured Casestudy, Partnership, and Voice sections |
| Mobile article-row padding | Not sampled | 40px top, 32px bottom | Measured link styles |
| Mobile floating action gap | Approximately 3px | 3px | Calculated from measured link positions |
| Mobile footer vertical padding | Not sampled | 28px | Measured footer style |

The source tokens are not a universal spacing grid. Several sections add their own substantial offsets. Preserve the distinction between global insets and section-specific composition.

### Border Radius

| Element | Value | Status |
| --- | --- | --- |
| Visible circular menu button | `100%` on a 60 × 60px box | Measured |
| MORE links and floating actions | `0` | Measured |
| Visible service/project image boundaries | Square | Screenshot observation |
| DOM-resident index links | `70px` | Measured style, but the open-menu appearance is unverified |

### Rules and Icon Geometry

- **Orange solid rule:** source `--border-assort: 1px solid #FF552B`.
- **Orange dashed horizontal rule:** source `--border-assort-dot` uses 3px of orange followed by 3px transparent, repeating in a 6 × 1px tile.
- **Orange dashed vertical rule:** source `--border-assort-vertical` uses the same 3px/3px sequence in a 1 × 6px tile.
- **Menu glyph:** four orange squares arranged in a 2 × 2 group. Approximately 14px overall is a visual estimate; the containing button is measured at 60px.
- **Arrows:** open northeast arrows, with a diagonal shaft and a right-angle head. They appear at several scales, from compact footer links to a prominent Contact Us arrow.

### Layout Measurements

| Element | Desktop observation | Mobile observation |
| --- | --- | --- |
| Document extent | 9718.47px measured body height | 6912.5px measured body height |
| Hero | 1440 × 1000px | 390 × 684px |
| Hero statement block | x = 30; y = 671; width = 1380; three 99px lines | x = 15; y ≈ 195.16; width = 360; five 45px lines |
| Desktop navigation backing | Approximately 458 × 41px, centered near x = 720; visual estimate | Absent from the visible header |
| English hero explanation | x ≈ 1293.22; y = 260; 46.78 × 244px | x = 15; y ≈ 450.16; 360 × 31.19px |
| Service section extent | Approximately 3599px in the sampled state | Approximately 1251px in the sampled state |
| Case section label | x = 93 | x = 15 |
| Case link column | x = 428; width = 984px | x = 30; width = 345px |
| Case row height | 52px | 37px normally; first long title uses 61px |
| MORE link | 200 × 60px | 200 × 60px |
| Download / Contact strip | Two approximately 720 × 336px panels, visual estimate | Two measured 195 × 130px panels |
| Floating actions | Similar dimensions in the screenshot; approximately 28px from right/bottom | 142 × 46px and 130 × 46px; 15px right/bottom inset |
| Footer project preview | Approximately 417px wide in the supplied crop | Measured link frame 360 × 225px, ratio 8:5 |
| Footer | Partial desktop screenshot | Measured height 817px |

The long desktop service extent includes substantial composition space. It is not evidence that a reusable service section should have a fixed 3599px height, nor does it prove a particular scroll-pinning implementation.

## Components

### Persistent Header

**Role:** maintain identity and primary site access over changing backgrounds.

The desktop header places the COUNTER wordmark at the left, a narrow rectangular navigation strip near the horizontal center, and a circular menu control at the far right. The central strip contains ABOUT, SERVICE, CASESTUDY, BLOG, and NEWS in small orange uppercase text. Its pale backing separates the links from the busy hero without turning the whole header into a solid bar.

The header remains near the viewport top in the supplied scrolled captures. This supports persistent behavior, but the supplied style fields do not distinguish a fixed implementation from a sticky one.

The wordmark is white over the hero and orange over the light service/contact areas. On mobile, the central navigation disappears while the 60px circle remains. The logo becomes narrower, and both controls use 15px side insets. The mobile footer capture shows weak logo contrast against the orange surface; explicit background-aware logo treatment is a recommended improvement.

### Circular Menu Control and Navigation Content

**Role:** expose the broader site index and service taxonomy.

The visible control is a white 60px circle with an orange outline and a small four-square symbol. It is a button in the supplied DOM.

The extraction also contains an Index group, service category buttons, and Download/Contact links. Desktop service categories are accompanied by detailed links; on mobile the extracted visible-text set is reduced to Digital Marketing, Creative Work, and Local Media. Their computed type changes from 64px to 36px condensed serif.

These observations support a responsive navigation structure, but do not establish how it opens, whether category buttons expand accordions, or how focus is managed. No open-menu screenshot or click sequence was supplied. Do not invent the panel background, opening direction, or dismissal animation.

### Hero Poster

**Role:** communicate the company’s positioning through an immediately recognizable composition.

The hero is a full-width orange-and-white graphic field rather than a photographic banner. Coarse rectangular grids alternate with dense strips of much smaller cells. Pale zones fade into orange, creating the impression of folded or cylindrical surfaces. Fine grain covers the result.

On desktop, the headline is deliberately arranged in three lines:

1. BUILDING at left; CUTTING-EDGE across the remaining width.
2. MODELS at left; FROM in the middle; LOCAL at right.
3. INNOVATION. at left, with the Japanese tagline toward the lower right.

The text uses 110px medium sans serif, 99px line height, and negative tracking. Its line boxes begin at y = 671 in the 1000px-high capture, leaving the upper two thirds predominantly graphic. The small English explanation occupies a sideways vertical strip near the right edge.

At 390px, the statement is rebuilt into five lines: BUILDING / CUTTING-EDGE / MODELS / FROM LOCAL / INNOVATION. It begins around y = 195 and uses 50px type. The English explanation moves below the headline, followed by the unchanged 25px Japanese tagline, “ローカルから最先端をつくる。”

The mobile hero is measured at 684px high, exposing the beginning of the next section within the 844px viewport. Its grid appears predominantly orange with narrow pale grid strips. The mechanism producing the artwork and any movement within it are unverified.

### Moving Statement and Promise

**Role:** bridge the graphic opening and the company’s editorial statement.

A repeated Japanese sentence forms a horizontal strip below the hero. The mobile screenshot visibly shows orange text clipped by the viewport edges, with a highlighted orange segment carrying reversed text. The DOM supplies three repetitions and a named continuous animation.

The Promise section combines a small parenthesized serif label, substantial Japanese paragraphs, and a two-column vertical Japanese statement. On mobile, the vertical statement is positioned at the right; the first body block is only 247px wide, while the later paragraph expands to 360px. This is a composed editorial arrangement rather than uniform centered copy.

Several duplicate Promise layers occur at displaced coordinates in the DOM, and faint oversized text is visible near the bottom of the mobile opening capture. Their exact reveal, overlap, and scrolling behavior are not established. For a new implementation, retain one semantic copy of the text and keep any visual duplicates out of the accessibility tree.

### Asymmetric Service Composition

**Role:** present three connected capabilities without a uniform feature-card grid.

The three services are digital marketing, creative work, and local media operation. Each has imagery, a Japanese title, and a short explanation. The desktop crop shows a tall tablet mockup on the left and a creative-work image and caption toward the upper right. Between them, a large vertical Japanese statement reads “デジタル起点 / 全方位支援”.

The local-media image is approximately 328 × 419px in the screenshot, beginning near x = 208. It has square corners, a coral/orange treatment, and an angled tablet displaying a local publication. Orange grid fragments extend behind and around the imagery. The cards have no visible raised container or shadow; the image itself establishes their boundary.

Desktop service headings are measured at 32px. Mobile headings become 20px, and all three sampled heading rectangles begin at x = 139 with a width of 236px. The mobile service statement sits at the left in two 36px vertical columns. This confirms retained asymmetry, although the mobile image arrangement is not shown in a supplied screenshot.

Finish the section with a capability sentence and a square orange MORE link. On mobile, the sentence spans the 360px content width and the 200px button aligns to the right.

### Case Study Index

**Role:** provide a compact route into individual projects.

The supplied DOM shows seven stacked project links under a condensed serif “(Casestudy)” label. Desktop links occupy a wide right-hand column: x = 428 to x = 1412. Each row is 52px high and uses 25px Japanese text.

On mobile, the label moves to x = 15, while the list keeps a smaller additional inset at x = 30. Text becomes 16px. The first longer title wraps into a 61px row, while the other sampled rows are 37px high. Preserve content-driven row height.

The homepage also contains project-preview links elsewhere. The evidence does not establish a hover preview attached to the case index. Fine orange row dividers would be a compatible recommendation, but their exact assignment to these rows is not supplied by the extracted styles.

### Partnership Roster

**Role:** communicate the company’s collaboration network.

The section uses the same parenthesized serif label as the case index, followed by two groups labeled “Aliance” and “Creator” in the source UI. Desktop group headings are 24px Latin sans serif; mobile headings are 16px. The mobile rectangles place the two groups side by side toward the right portion of the page, continuing the offset layout.

Use compact text lists and preserve the hierarchy between group labels and names. The roster is business-network content; it does not establish who designed or developed this homepage.

### Voice Entries

**Role:** provide short customer endorsements.

Each entry combines a customer name and a brief Japanese quote. The measured desktop entries occupy separate horizontal positions. On mobile, all three sampled entries begin at x = 32 and stack vertically, with quote widths of 326px.

Names use 14px mobile text; quotes use 16px / 22.4px with 0.1em tracking. The desktop quote scale is 18px / 25.2px. The component’s visual border, image treatment, and full desktop container anatomy are not available in the supplied crops, so those details should remain implementation choices rather than claimed observations.

### Editorial Media Section

**Role:** connect company expertise to ongoing content.

The section includes a parenthesized Counter Media heading, an introduction, COUNTER Channel, two named profile links, and an Owned Blog Media list. Three article links are present, each carrying a date, title, and category.

The mobile article list retains a two-part structure: a large 24px date on the left and a 208px-wide title block starting at x = 167. Titles use 14px / 21px. Each sampled article link is 360 × 162px with generous vertical padding. Do not replace this measured date/title relationship with small image cards when reproducing the mobile information rhythm.

Channel playback, video controls, and profile-image styling were not verified. The supplied links establish destinations, not successful playback or navigation outcomes.

### MORE Link

**Role:** consistently terminate section summaries with a route to deeper content.

Measured instances are 200 × 60px on both desktop and mobile. They have orange fill, white 20px Latin text, square corners, 10px vertical and 12px horizontal padding, and a declared 500ms transition.

These are anchors, including routes to `/service/`, `/creative-case/`, `/voice/`, and `/counter-media/`. Keep their stable width and right alignment. Their duplicated DOM labels may support a visual text effect, but a specific hover rollover was not exercised.

### Download / Contact Split

**Role:** offer two distinct conversion routes at the end of the main content.

The desktop screenshot shows two equal-width panels on the white textured canvas. A thin orange top rule spans the pair, and a dashed orange divider separates them. Each panel centers a large condensed serif label in parentheses, a Japanese subheading, and a short explanatory paragraph.

Both panels are anchors: Download points to `/download/`; Contact points to `/contact/`.

Mobile retains two columns. Each panel is measured at 195 × 130px, with a 32px serif label and 12px Japanese subheading. The descriptive paragraphs are absent from the mobile rendered-text result, although they remain in the link’s DOM text. Do not assume that the pair stacks vertically on phones.

### Floating Download and Contact Actions

**Role:** keep the two contact routes available during lower-page browsing.

The supplied service and mobile footer captures show two white rectangular links with thin orange borders, small orange Japanese labels, and large northeast arrows. Mobile measurements are 142 × 46px for “資料ダウンロード” and 130 × 46px for “お問い合わせ”, separated by 3px and positioned 15px from the right and bottom edges.

They are not visibly present over the initial hero screenshots. Their exact appearance threshold and hide/show logic were not supplied. Implement that state explicitly instead of assuming they should cover every page position.

### Orange Footer

**Role:** close with a brand statement, an abbreviated sitemap, contact access, and a project preview.

The footer changes the entire surface to orange and reverses the typography to white or soft inverse. A small upper row distributes location, the Japanese tagline, and Download. The statement “Turn the mainstream / upside down.” appears in centered condensed serif.

On desktop, the supplied crop places the statement near the center, a narrow five-row sitemap at the right, and social links plus a project preview toward the lower left. Each sitemap row has a thin pale rule and a northeast arrow. Contact Us is larger and uses a much larger arrow.

Mobile reorganizes this into a clear sequence: location row, centered two-line statement, full-width sitemap, Contact Us, right-aligned privacy/terms links, social links, and a wide project preview. The sitemap rows are measured at 360 × 32px; Contact Us occupies a 360 × 50px link frame.

The project-preview track contains several horizontally adjacent link frames in the DOM, each 360 × 225px on mobile. The supplied desktop and mobile screenshots show different project images. This supports a multi-item preview structure, but does not establish autoplay, swipe behavior, timing, or transition direction.

## Tokens — Motion & Interaction

| Treatment | Supplied evidence | Interpretation and limit |
| --- | --- | --- |
| General links and visible menu button | `0.5s cubic-bezier(0.165, 0.84, 0.44, 1)` | Measured transition declaration. The exact hover-property changes were not supplied. |
| Shared duration | Source `--easeDuration: .5s` | Reusable timing token; not proof that every motion lasts 500ms. |
| Shared quartic ease | Source `--easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1)` | Matches numerous computed transitions. |
| Repeating Japanese statement | `40s linear infinite loopLeft` desktop; `20s linear infinite loopLeft` mobile | Verified CSS animation declaration, with repeated text and clipped positions. Keyframes were not provided. |
| Statement reveal transitions | Transform `2s`; opacity `1s` with `0.2s` delay; quartic ease | Measured declarations on the ticker elements. Trigger and start/end values are unverified. |
| Mobile section-label transition | `1s` quartic ease with `0.05s` delay | Measured on several labels. Specific movement distance is not available. |
| Hero supporting-copy delay | `0s 1.5s` | Declared delay; insufficient evidence to describe a fade or entrance path. |
| Header persistence | Similar top-edge positions across scrolled screenshots | Visible persistence; exact fixed/sticky CSS and color-change trigger were not supplied. |
| Hero grid | Static supplied frames | Rendering technology, animation path, and timing unverified. |
| Duplicated navigation text | Repeated labels in DOM, single visible label in captures | Possible presentation layers; no verified rollover sequence. |
| Footer project track | Multiple adjacent frames and different visible projects | Multi-item structure supported; autoplay and user controls unverified. |

Many sampled elements report `animation: none`. That does not rule out motion on ancestors, pseudo-elements, or script-controlled transforms.

The inspection waited for finite motion and layout stability within stated limits, temporarily paused perpetual animations during readiness checks, and then resumed them. These still images are therefore evidence of captured states, not a complete motion specification.

**Recommended motion direction:** retain the measured restrained quartic easing for small interface changes and a slow linear statement loop. Keep decorative movement behind readable text. Do not introduce a dramatic hero morph or elaborate page transition without treating it as new design work.

## Surfaces

| Layer | Appearance | Function |
| --- | --- | --- |
| Main canvas | White base with fine gray grain | Gives the content a tactile, paper-like ground |
| Hero field | Orange and pale grid regions with dense/sparse cell changes | Carries the primary visual identity |
| Service imagery | Square-edged, orange-tinted device and project imagery | Connects the abstract identity to practical work |
| Header navigation backing | Small pale rectangular strip | Keeps compact navigation legible over artwork |
| MORE link | Solid orange rectangle with white text | Repeated section-level continuation |
| Floating action | White rectangle, orange rule, label, and arrow | Persistent lower-page contact access |
| Contact strip | White textured panels separated by orange rules | Distinguishes two conversion routes without card elevation |
| Footer | Orange field with pale text, rules, and project preview | Creates a strong visual ending |

There is no visible general-purpose shadow or rounded-card elevation system. The circular menu is a deliberate geometric exception. Structure comes from color reversal, thin rules, spacing, and hard image edges.

## Imagery

The hero’s defining image is an abstract grid, not a stock photograph. Large rectangular cells coexist with narrow strips of tiny cells. Orange-to-pale shading gives these planar patterns an architectural or folded quality. The texture is fine grain rather than pixelated artwork; do not apply `image-rendering: pixelated` to this site’s imagery.

The desktop service crop shows device mockups with a coordinated orange cast: an angled tablet for local media and a partially visible laptop scene for creative work. Preserve recognizable screens and device geometry beneath the tint. A solid orange rectangle would lose the evidence of actual work.

The footer preview contains recognizable client website compositions, including people and interface typography, all visually brought into the orange family. Different captures show different projects, so the exact pictured person or project is not a fixed identity asset for the footer.

### Observed Asset References

No original hero, grain, logo, service-image, or project-preview asset URL was supplied. The table records visible asset roles rather than inventing filenames.

| Asset role | Original-page evidence | Reuse guidance |
| --- | --- | --- |
| COUNTER wordmark | Desktop and mobile headers | Use an authorized brand asset when available; text is only a structural substitute |
| Grid hero artwork | Desktop and mobile opening captures | Recreate the coarse/fine rhythm and tonal structure; original rendering method is unknown |
| Fine grain | Light content, hero, and footer captures | A subtle generated noise layer is a recommended approximation |
| Local-media tablet mockup | Desktop service crop | Retain the portrait framing, angled device, and orange treatment |
| Creative-work laptop image | Upper-right area of desktop service crop | Preserve the image/caption grouping and square edges |
| Footer project previews | Desktop/mobile footer captures and adjacent DOM link frames | Keep wide project screenshots in consistent frames; do not infer playback behavior |

Any CSS gradient, blend mode, SVG noise, or image filter proposed in a new implementation is an approximation unless separately verified against the original asset pipeline.

## Layout & Responsive Behavior

### Desktop Composition

The 1440px layout uses the full browser width for the hero, grid transitions, contact split, and footer. The headline runs almost edge to edge with 30px insets. Ordinary content has several alignment levels: approximately 28px outer clearance, section labels at x = 93, and the case index beginning much farther right at x = 428.

The service region is especially spacious and asymmetric. Images and captions occupy different widths and vertical positions around the vertical statement. Later sections tighten into indexes and information groups. Reproducing every section with the same centered max-width container would flatten this rhythm.

### Mobile Composition

At 390px, most page content uses 15px outer insets, but selected components retain internal offsets:

- The hero becomes five arranged text lines rather than a scaled three-line desktop block.
- The English hero explanation changes orientation and moves into the normal reading sequence.
- The Japanese hero tagline stays at 25px.
- The visible menu circle stays 60px; the wordmark shrinks and the central navigation disappears.
- The Promise layout retains a right-side vertical statement and a narrower opening paragraph.
- Service headings remain offset to x = 139 rather than becoming full-width centered titles.
- The case list uses a 30px left position, with content-driven wrapping.
- Voice entries stack vertically.
- Editorial rows retain date and title columns.
- Download and Contact remain side by side, with their explanatory paragraphs omitted from the rendered mobile text.
- Footer navigation expands to the available 360px content width, followed by the project preview.

### Implementation Limits

Only 1440px and 390px widths were supplied. No exact media-query boundary, tablet layout, landscape layout, or intermediate fluid formula was recovered. The Quick Start uses a recommended 48rem breakpoint and interpolation formulas to approximate the inspected endpoints.

Do not derive a universal `100vh` hero rule from the desktop capture: the mobile hero is 684px within an 844px viewport. Likewise, do not copy the sampled document or service heights as fixed dimensions.

Decorative overflow is visible in the ticker and graphic layers. Keep such clipping local to those elements; essential headings and link text should remain readable at narrower widths and increased text sizes.

## Do’s and Don’ts

### Do

- Use the measured orange `#FF552B` as the central identity color.
- Keep the page base white and add grain separately.
- Preserve the contrast between tightly tracked medium sans-serif hero text and narrow serif section labels.
- Compose the desktop statement in three lines and the mobile statement in five.
- Keep selected Japanese statements vertical, with deliberate space for adjacent content.
- Alternate expansive service composition with compact project and editorial indexes.
- Use square image boundaries, 1px rules, rectangular actions, and open diagonal arrows.
- Keep the menu circle at its measured 60px size on both inspected layouts.
- Retain two mobile contact panels and the mobile date/title article structure.
- Treat measured motion declarations and verified visual states as separate evidence.

### Don’t

- Don’t reduce the homepage to a hero and a generic feature-card grid.
- Don’t introduce unrelated gradients, badge colors, or shadows from unused platform presets.
- Don’t substitute soft rounded cards for the observed hard-edged composition.
- Don’t call the Latin typeface Suisse solely because of a variable name.
- Don’t turn the condensed serif into a wide, heavy display face.
- Don’t set all content backgrounds to `#EFECEB`; the body base is measured white.
- Don’t assume every desktop arrangement simply stacks on mobile.
- Don’t treat duplicate DOM text as repeated visible content or proven hover animation.
- Don’t invent WebGL, parallax, autoplay, accordion behavior, or transition timing for unexercised features.
- Don’t use partnership names as production credits for the homepage.
- Don’t hide text overflow globally to compensate for an incorrectly fitted headline.

## Recommended Implementation Additions

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

- Use one semantic H1 for the hero statement, with spans for visual word placement. Keep a real space between FROM and LOCAL in the accessible reading order.
- Give the logo link a useful accessible name and the menu button an explicit label, expanded state, and controlled-panel relationship.
- If implementing an overlay menu, provide keyboard access, Escape dismissal, focus return, and appropriate handling of background content.
- Hide decorative duplicate text from assistive technology. Keep the editorial message available once in a normal reading order.
- Offer a static alternative to the moving statement and stop nonessential motion under `prefers-reduced-motion`.
- Review small orange text and pale footer text for contrast. Maintain the original orange display system while allowing darker functional copy where needed.
- Increase compact footer-row hit areas where practical; the measured 32px rows are smaller than a recommended 44px touch target.
- Give every linked project preview a descriptive accessible name. An empty extracted anchor text does not by itself prove that the original link lacks an image alternative.
- Reserve sufficient bottom clearance and safe-area padding for floating actions so they do not obscure final content or keyboard focus.
- Use an explicit header surface state to maintain logo contrast over both paper and orange sections.
- Verify headline fitting with the actual licensed font and longer translations. Recovered pixel sizes are not a substitute for testing font metrics.

## Agent Prompt Guide

### Quick Color Reference

- Brand ink and orange fields: `#FF552B`.
- Main canvas and floating action surfaces: `#FFFFFF`.
- Secondary reversed footer/menu text: `#EFECEB`.
- Existing dark text option: `#3A3735`.
- Borders: 1px orange; selected separators use 3px dashes with 3px gaps.
- Texture: fine, low-contrast grain; no glossy elevation.

### Overall Prompt

“Create a corporate homepage for a digital marketing and creative company using orange `#FF552B`, a white grained canvas, square imagery, and thin orange rules. Build a full-width opening graphic from coarse and dense grids with pale-to-orange shading. Place a tightly tracked medium sans-serif statement across the bottom in three desktop lines, using 110px type, 0.9 line height, and -0.05em tracking at 1440px. At 390px, recompose it into five 50px lines and move the small English explanation below it. Use a persistent wordmark, a narrow centered desktop navigation strip, and a white 60px circular menu with four orange squares. Continue with asymmetric service imagery, vertical Japanese statements, parenthesized condensed serif labels, a text-based case index, testimonials, editorial rows, a two-column contact strip, and an orange footer. Mark any newly introduced motion or behavior as an implementation choice.”

### Example Component Prompts

1. **Hero:** “Arrange BUILDING and CUTTING-EDGE on the first desktop row, MODELS / FROM / LOCAL on the second, and INNOVATION. on the third. Use white medium sans-serif text over orange grid artwork. Keep 30px desktop insets, a small sideways explanation near the right edge, and a Japanese tagline at the lower right. On mobile use five lines, 15px insets, and horizontal supporting copy.”
2. **Service composition:** “On white fine-grained paper, place orange-tinted device mockups at different horizontal and vertical positions around a bold vertical Japanese statement. Use 32px Japanese service headings on desktop and 20px on mobile. Keep the images square-edged and the space around them generous. Avoid uniform card containers.”
3. **Case index:** “Use a condensed serif parenthesized section label at the left and seven plain orange project links in a wide right-side column. At 390px, use a 15px heading inset, a 30px list inset, 16px link text, and rows that expand for wrapping. Finish with a right-aligned 200 × 60px orange MORE link.”
4. **Contact split:** “Create two equal white panels with a fine orange top rule and a 3px-on/3px-off vertical divider. Center condensed serif Download and Contact labels in parentheses above Japanese subheadings. Retain two columns on phones, using 195 × 130px panels at 390px and omitting the longer explanatory text.”
5. **Footer:** “Create an orange footer with a centered two-line condensed serif statement, thin pale navigation rules, northeast arrows, and a large Contact Us link. On mobile, stack the sitemap, contact link, legal links, social links, and a 360 × 225px project-preview frame. Keep the small floating download/contact rectangles clear of essential content.”

## Quick Start

### CSS Custom Properties

This is an implementation scaffold, not recovered source code. It preserves key measured colors, type proportions, and component dimensions. The 48rem breakpoint, responsive interpolation, decorative grid construction, and SVG grain are recommended approximations. The source artwork and font files are not bundled or fetched.

The font declarations below use the supplied family identifiers with shortened fallback stacks. Register authorized font files separately when available. Without them, fallback metrics will change the hero’s fit and the serif labels’ width.

```css
:root {
  /* Measured source colors */
  --orange: #ff552b;
  --paper: #ffffff;
  --inverse: #efeceb;
  --ink: #3a3735;

  /* Declared source family identifiers; files are not bundled */
  --font-ja: 'Tazugane Gothic HondaMKTA Med',
    'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  --font-sans: 'HelveticaNeueeTextPro-Roman', var(--font-ja);
  --font-display: 'HelveticaNeueeTextPro-Md', var(--font-ja);
  --font-serif: 'ITCGaramondStd-BkCond', YuMincho,
    'Hiragino Mincho ProN', serif;

  /* Measured desktop tokens */
  --header-height: 100px;
  --gap: 16px;
  --block-space: 50px;
  --block-space-small: 40px;
  --menu-size: 60px;
  --rule: 1px solid var(--orange);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --motion-ui: 500ms;

  /* Recommended interpolation between inspected sizes */
  --hero-size: clamp(56px, 7.6389vw, 110px);
  --section-size: clamp(40px, 4.4444vw, 64px);
  --ticker-duration: 40s;
}

* { box-sizing: border-box; }
body { margin: 0; }

.counter-site {
  color: var(--ink);
  background: var(--paper);
  font: 500 16px/1.5 var(--font-ja);
}

/* Recommended generated grain, not the original texture asset */
.counter-site::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.045;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.8%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  height: var(--header-height);
  z-index: 30;
  color: var(--paper);
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.site-header[data-surface='paper'] { color: var(--orange); }

.brand {
  position: absolute;
  top: 41px;
  left: 40px;
  width: 160px;
  color: inherit;
  text-decoration: none;
}
.brand img, .brand svg { display: block; width: 100%; height: auto; }

.primary-nav {
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 30px;
  padding: 10px 30px;
  background: var(--paper);
}
.primary-nav a {
  color: var(--orange);
  font: 500 14px/21px var(--font-sans);
  letter-spacing: 0.01em;
  text-decoration: none;
}

.menu-button {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: var(--menu-size);
  height: var(--menu-size);
  padding: 0;
  border: var(--rule);
  border-radius: 50%;
  color: var(--orange);
  background: var(--paper);
  cursor: pointer;
}
.menu-symbol {
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 6px 6px,
    linear-gradient(currentColor, currentColor) 100% 0 / 6px 6px,
    linear-gradient(currentColor, currentColor) 0 100% / 6px 6px,
    linear-gradient(currentColor, currentColor) 100% 100% / 6px 6px;
  background-repeat: no-repeat;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: clip;
  color: var(--paper);
  background: var(--orange);
}

/* Static coarse/fine collage: an approximation of the observed artwork */
.hero-matrix {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  grid-template-columns: 55% 20.5% 24.5%;
  grid-template-rows: 32.3% 35% 32.7%;
  pointer-events: none;
}
.hero-matrix > i {
  --cell-x: 100px;
  --cell-y: 70px;
  background:
    repeating-linear-gradient(90deg,
      var(--orange) 0 1px, transparent 1px var(--cell-x)),
    repeating-linear-gradient(0deg,
      var(--orange) 0 1px, transparent 1px var(--cell-y)),
    linear-gradient(90deg,
      rgb(255 255 255 / 0.8), var(--orange) 76%);
}
.hero-matrix > i:nth-child(3n + 2) {
  --cell-x: 15px;
  --cell-y: 10px;
}
.hero-matrix > i:nth-child(4),
.hero-matrix > i:nth-child(6) {
  --cell-x: 30px;
  --cell-y: 35px;
  transform: scaleX(-1);
}

.hero-title {
  position: absolute;
  inset: auto 30px 32px;
  display: grid;
  grid-template-columns: 42% 32% 26%;
  margin: 0;
  font: 500 var(--hero-size)/0.9 var(--font-display);
  letter-spacing: -0.05em;
}
.hero-title > span { min-width: 0; }
.word-building { grid-area: 1 / 1 / 2 / 2; }
.word-cutting { grid-area: 1 / 2 / 2 / 4; }
.word-models { grid-area: 2 / 1 / 3 / 2; }
.word-from { grid-area: 2 / 2 / 3 / 3; }
.word-local { grid-area: 2 / 3 / 3 / 4; }
.word-innovation { grid-area: 3 / 1 / 4 / 4; }

.hero-lead {
  position: absolute;
  top: 26%;
  right: 100px;
  inline-size: 244px;
  margin: 0;
  writing-mode: vertical-rl;
  font: 500 12px/1.3 var(--font-sans);
}
.hero-tagline {
  position: absolute;
  right: 24px;
  bottom: 38px;
  margin: 0;
  font: 500 25px/1.5 var(--font-ja);
}

.section {
  padding: 136px 28px 0 93px;
  color: var(--orange);
}
.section-label {
  margin: 0;
  font: 500 var(--section-size)/1 var(--font-serif);
  letter-spacing: -0.04em;
}
.vertical-statement {
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: var(--orange);
}

.case-list {
  margin: 40px 0 0 335px;
  padding: 0;
  list-style: none;
}
.case-list a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 7px 0 5px;
  color: inherit;
  font: 400 25px/1.5 var(--font-ja);
  text-decoration: none;
  /* Recommended divider using the observed rule system */
  border-bottom: var(--rule);
}

.more-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 200px;
  min-height: 60px;
  margin: 30px 0 0 auto;
  padding: 10px 12px;
  border-radius: 0;
  color: var(--paper);
  background: var(--orange);
  font: 500 20px/1.3 var(--font-sans);
  text-decoration: none;
}

.contact-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 80px;
  border-top: var(--rule);
  color: var(--orange);
}
.contact-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 336px;
  padding: 40px 24px;
  color: inherit;
  text-align: center;
  text-decoration: none;
}
.contact-panel + .contact-panel::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: repeating-linear-gradient(to bottom,
    var(--orange) 0 3px, transparent 3px 6px);
}
.contact-title {
  margin: 0 0 20px;
  font: 400 64px/0.9 var(--font-serif);
  letter-spacing: -0.05em;
}
.contact-label { margin: 0; font-size: 18px; }
.contact-description {
  max-width: 36ch;
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.7;
}

.quick-actions {
  position: fixed;
  right: 28px;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  z-index: 35;
  display: flex;
  gap: 3px;
}
.quick-actions[hidden] { display: none; }
.quick-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 142px;
  min-height: 46px;
  padding: 10px 9px;
  border: var(--rule);
  color: var(--orange);
  background: var(--paper);
  font: 500 11px/1.5 var(--font-ja);
  text-decoration: none;
}
.quick-action:last-child { width: 130px; }

.site-footer {
  padding: 28px;
  color: var(--inverse);
  background: var(--orange);
}
.footer-motto {
  margin: 60px 0;
  color: var(--paper);
  text-align: center;
  font: 400 64px/1 var(--font-serif);
}
.footer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  padding: 5px 0;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font: 400 14px/21px var(--font-sans);
  text-decoration: none;
}
.project-preview {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border-radius: 0;
}

/* Recommended interaction feedback; original hover changes are unverified */
a, button {
  transition: color var(--motion-ui) var(--ease-out-quart),
    background-color var(--motion-ui) var(--ease-out-quart);
}
.counter-site :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

@media (max-width: 48rem) {
  :root {
    --header-height: 75px;
    --gap: 12px;
    --block-space: 40px;
    --block-space-small: 30px;
    --hero-size: clamp(38px, 12.8205vw, 50px);
    --section-size: 32px;
    --ticker-duration: 20s;
  }
  .brand { top: 41px; left: 15px; width: 104px; }
  .primary-nav { display: none; }
  .menu-button { top: 15px; right: 15px; }

  /* Endpoint approximation; the source mobile height formula is unknown */
  .hero { min-height: calc(100svh - 160px); }
  .hero-content {
    padding: clamp(140px, 23.12svh, 195.2px) 15px 155px;
  }
  .hero-title {
    position: static;
    grid-template-columns: 52% 48%;
  }
  .word-building { grid-area: 1 / 1 / 2 / 3; }
  .word-cutting { grid-area: 2 / 1 / 3 / 3; }
  .word-models { grid-area: 3 / 1 / 4 / 3; }
  .word-from { grid-area: 4 / 1 / 5 / 2; }
  .word-local { grid-area: 4 / 2 / 5 / 3; }
  .word-innovation { grid-area: 5 / 1 / 6 / 3; }
  .hero-lead {
    position: static;
    inline-size: auto;
    margin-top: 30px;
    writing-mode: horizontal-tb;
  }
  .hero-tagline { position: static; margin-top: 10px; }
  .hero-matrix { grid-template-columns: 78.5% 8% 13.5%; }
  .hero-matrix > i { background-color: var(--orange); }
  .hero-matrix > i:nth-child(3n + 1) { opacity: 0.2; }

  .section { padding: 55px 15px 0; }
  .case-list { margin: 30px 0 0 15px; }
  .case-list a {
    min-height: 37px;
    padding: 7px 0 6px;
    font-size: 16px;
  }
  .contact-panel { min-height: 130px; padding: 20px 8px; }
  .contact-title { margin-bottom: 0; font-size: 32px; }
  .contact-label { font-size: 12px; letter-spacing: 0.01em; }
  .contact-description { display: none; }
  .quick-actions {
    right: 15px;
    bottom: calc(15px + env(safe-area-inset-bottom, 0px));
  }
  .site-footer {
    padding: 28px 15px calc(76px + env(safe-area-inset-bottom, 0px));
  }
  .footer-motto { margin: 36px 0 44px; font-size: 32px; }
}

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

The header’s `data-surface` value and the floating actions’ `hidden` state require explicit application logic. Menu behavior, image-track behavior, and ticker keyframes are deliberately outside this CSS scaffold because their complete original behavior was not supplied.

A minimal semantic hero structure for the placement rules above:

```html
<section class='hero' aria-labelledby='hero-title'>
  <div class='hero-matrix' aria-hidden='true'>
    <i></i><i></i><i></i>
    <i></i><i></i><i></i>
    <i></i><i></i><i></i>
  </div>
  <div class='hero-content'>
    <h1 class='hero-title' id='hero-title'>
      <span class='word-building'>BUILDING </span>
      <span class='word-cutting'>CUTTING-EDGE </span>
      <span class='word-models'>MODELS </span>
      <span class='word-from'>FROM </span>
      <span class='word-local'>LOCAL </span>
      <span class='word-innovation'>INNOVATION.</span>
    </h1>
    <p class='hero-lead'>We utilize our digital content and marketing
      expertise to overcome marketing challenges companies face.</p>
    <p class='hero-tagline' lang='ja'>ローカルから最先端をつくる。</p>
  </div>
</section>
```

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. These do not identify the original site’s framework. Define the custom properties above first.

```css
@theme inline {
  --color-counter-orange: var(--orange);
  --color-counter-paper: var(--paper);
  --color-counter-inverse: var(--inverse);
  --color-counter-ink: var(--ink);

  --font-counter-ja: var(--font-ja);
  --font-counter-sans: var(--font-sans);
  --font-counter-display: var(--font-display);
  --font-counter-serif: var(--font-serif);

  --text-counter-hero: var(--hero-size);
  --text-counter-section: var(--section-size);
  --spacing-counter-gap: var(--gap);
  --spacing-counter-menu: var(--menu-size);
  --radius-counter-square: 0px;
  --ease-counter-out: var(--ease-out-quart);
}
```

## Sources & Evidence

- **Original and final website:** [https://counter-digital.jp/](https://counter-digital.jp/). The supplied inspection reports HTTP 200 with no URL change. The rendered title identifies COUNTER株式会社 and its digital marketing business in Koshigaya, Saitama.
- **Capture timestamp:** September 12, 2026, 12:58:29.273 UTC / 21:58:29.273 JST.
- **Desktop evidence:** 1440 × 1000 CSS pixels; original-page captures of the hero, part of the service composition, and the Download/Contact area with the upper footer. Supplied DOM body height is approximately 9718.47px.
- **Mobile evidence:** 390 × 844 CSS pixels; original-page captures of the hero and footer, with rendered text and element measurements across the homepage. Supplied DOM body height is 6912.5px.
- **Style evidence:** supplied root custom properties and computed colors, font stacks, sizes, line heights, tracking, padding, radii, transitions, animations, and rendered rectangles. Values for hidden or transformed content are identified separately from visible screenshot findings.
- **Navigation evidence:** destination URLs were extracted from homepage anchors. Those destinations were not opened or independently inspected for this reference.
- **Interaction evidence:** the supplied process observed initial rendering for at least five seconds and traversed intermediate scroll positions. It applied bounded layout, finite-animation, and image-readiness checks. No menu-opening, hover, form-submission, video-playback, or project-slider interaction sequence was supplied.
- **Limitations:** screenshots represent selected states; the DOM element sample is not a complete stylesheet or asset manifest. Exact breakpoints, original decorative asset URLs, loaded-font resolution, hero rendering technology, delayed content, and unexercised interactions remain unverified. SharedWorkers and service workers were disabled during the supplied inspection.

This reference describes the current homepage represented by those original-page captures and measurements. Visual estimates and implementation recommendations are labeled throughout.