# Gurundo Consultant — Style Reference

> Fieldwork photography, sandy surfaces, and small illustrated workers give a technical company a personable identity.

**Website:** [gurundo.net](https://gurundo.net/)
**Original URL:** https://gurundo.net/
**Final URL:** https://gurundo.net/
**Theme:** warm textured surfaces, ochre accents, dark olive transitions, and a charcoal footer; no selectable theme was evidenced.
**Inspected:** September 23, 2026, at 03:01 JST. Supplied retrieval timestamp: `2026-09-22T18:01:03.577Z`.
**Viewports:** desktop `1440 × 1000` and mobile `390 × 844` CSS pixels.
**Scope:** the current corporate homepage. Desktop screenshots show the opening composition, company section, and footer. Mobile screenshots show the opening composition and the contact/footer area. Rendered DOM and computed styles additionally document the introduction, services, process and FAQ links, recruitment, interview teasers, and blog track. Linked interior pages and opened navigation states were not inspected.

Gurundo presents its ground investigation and construction work through people, tools, and material texture. A large photograph of helmeted staff establishes credibility immediately. Pale blue uniforms and dense green foliage supply most of the opening screen's color; the interface itself stays within cream, ochre, dark olive, and charcoal. Bold Japanese sans-serif copy, a small circular slogan badge, and a shovel-carrying illustrated worker soften the technical subject matter.

The page is a long corporate index with multiple destinations: services, company information, recruitment, articles, and contact. Its organizing device is a sequence of broad surfaces with irregular soil-like edges. Photography and link lists occupy different horizontal and vertical positions, leaving substantial open space. Preserve that uneven editorial rhythm, the grain of the background, and the relationship between real fieldwork and small illustrations when adapting this design.

## How to Read This Reference

- **Measured** means a value appears in the supplied rendered DOM, bounding rectangles, computed styles, or custom properties. Measurements describe the captured state, not a recovered stylesheet rule.
- **Visual estimate** means a dimension, color, or treatment was estimated from the current-page screenshots. No programmatic pixel sampling was performed.
- **Calculated** means a value was derived from supplied measurements, such as the gap between two article cards.
- **Recommended** means guidance for a new implementation. The CSS examples and their breakpoint choices are adaptations.
- Token names introduced here are descriptive aliases. Original custom properties are explicitly identified.
- A parent element's computed style does not establish every descendant's appearance. Several anchors compute to pale yellow while their visible text is ochre; section-heading children are not individually included in the style sample.
- Nonzero DOM rectangles do not prove simultaneous visibility. Several service panes share the same coordinates, and the blog contains items beyond the viewport.
- Desktop document height was approximately `9301.73px`; mobile height was approximately `9186.30px`. These are observations of this content and capture state, not target heights to hardcode.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token / original property | Evidence and role |
| --- | --- | --- | --- |
| Sand Paper | `#f2e8ce` | `--color-paper` | Measured introduction-section background. The grain visible across pale surfaces changes their final appearance. |
| Ochre | `#b59200` | `--color-ochre`; source `--yellow`, `--warning` | Measured news-title and category-label text; visually used for company links, dashed rules, circles, and headline highlights. |
| Pale Yellow | `#ffe997` | `--color-pale`; source `--primary`, `--swiper-theme-color` | Measured category-chip background and numerous link colors. Supports text and accents on darker sections. |
| Dark Olive | `#4e410c` | `--color-olive`; source `--green`, `--success` | Declared source value, visually consistent with the olive band above the company section. The band's actual background layer was not sampled. |
| Charcoal Ink | `#1f1d1d` | `--color-ink` | Measured body and headline text. Also a close visual approximation for the footer; its fill was not directly included in the computed sample. |
| White | `#ffffff` | `--color-white`; source `--white` | Measured primary footer links and phone number; visually used for the menu and logo lettering. |
| Footer Muted | `#b0b0b0` | `--color-muted` | Measured secondary footer navigation and privacy-link text. |
| Logo Green | approximately `#4c9e50` | `--color-logo-estimate` | Visual estimate of the logo symbol. This is artwork color, not the source `--green` value. |
| Worker Turquoise | approximately `#40afb0` | `--color-worker-estimate` | Visual estimate of the illustrated worker's clothing. Keep it confined to the illustration system. |

### Color Application

The cream field is visibly textured, with fine light and dark speckles. A flat `#f2e8ce` fill supplies a useful base but does not reproduce the surface on its own. Treat the grain as a separate, restrained image layer.

The source body's white background is not a useful description of the visible page. Section surfaces, imagery, and other layers dominate the final rendering. Likewise, the many generic color, gradient, and shadow variables in the supplied custom-property list are not evidence that those treatments appear in this design.

Use ochre for navigation detail and selected syllable highlights, dark ink for substantial copy on cream, and pale yellow for supporting contrast on dark areas. The logo green and worker turquoise are small identity accents. The large green and blue areas in the hero come from photography rather than additional interface panels.

## Tokens — Typography

### Declared Site Stack

The computed body stack is:

```css
font-family:
  'Open Sans', 'Noto Sans JP', -apple-system, 'system-ui',
  'Helvetica Neue', 'Hiragino Sans', 'ヒラギノ角ゴ  ProN W3',
  'Hiragino Kaku Gothic ProN', 'Yu Gothic', YuGothic,
  Verdana, Meiryo, 'M+ 1p', sans-serif;
```

Open Sans and Noto Sans JP are declared families. The evidence does not include font-file requests or per-glyph font resolution, so their successful loading is not independently established.

The overall character is sturdy and approachable. Large statements use weight `600`, detailed action labels use `700`, and descriptive copy uses `400` or `500`. Most sampled text has normal letter spacing. The interview quotations and footer phone number are exceptions.

### Logo and Section Labels

The logo contains a green symbol and white Japanese lettering with a more traditional appearance than the page's body text. Preserve the authorized logo artwork. Its lettering does not establish a separate live-text serif font.

Section identifiers pair Japanese with smaller English labels, including `会社案内` / `Company`, `事業内容` / `Services`, and `採用情報` / `Recruit`. In the company screenshot, the Japanese line appears around `32px` and the English line around `20px`; these are visual estimates. The sampled heading parent computes to `20.8px`, so do not apply that parent value indiscriminately to both lines.

### Type Scale

Sizes and line heights below are measured unless explicitly marked as estimates.

| Role | Desktop size / line height | Mobile size / line height | Weight and notes |
| --- | --- | --- | --- |
| Root | `16px / 18.4px` | `16px / 18.4px` | Conventional root size; no unusual tiny-rem system. |
| Body default | `15.2px / 25.08px` | `13.6px / 22.44px` | `400`; line-height ratio `1.65`. |
| Hero statement | `45px / 67.5px` | `25px / 40px` | `600`; two desktop lines become four mobile lines. |
| Introduction statement | `50px / 60px` | `35px / 42px` | `600`. |
| Introduction paragraphs | `16px / 33.6px` | `14px / 29.4px` | `500`; spacious `2.1` line-height ratio. |
| Section-heading parent | `20.8px / 24.96px` | `20.8px / 24.96px` | `600`; child styling is only partially evidenced. |
| Latest-news title | `15px / 18px` | `14px / 16.8px` | `500`. |
| Detail-link label | `17px / 25.08px` | `17px / 22.44px` | `700`; inherited line height varies by section. |
| Process and FAQ copy | `15px / 27.36px` | `15px / 24.48px` | `400`. |
| Recruitment paragraph | `16px / 25.08px` | `16px / 22.44px` | `400`; its size does not decrease on mobile. |
| Interview quotation | `22px / 66px` | `18px / 46.8px` | `700`; tracking `4.4px` and `3.6px`, respectively. |
| Blog title | `18px / 21.6px` | `16px / 19.2px` | `700`. |
| Blog category chip | `13px / 25.08px` | `13px / 22.44px` | `700`. |
| Footer navigation | `15px / 19.5px` | Not visible in mobile footer | `300`. |
| Footer telephone | `14px / 25.08px` | `14px / 22.44px` | `400`; tracking `1.4px`. |
| Copyright | `10px / 20px` | `10px / 20px` | `300`. |
| Visible Menu caption | Approximately `18px` | Approximately `16px` | Screenshot estimates; separate from the button's computed default text style. |

The large English `Contact us` heading is visible in the mobile footer capture, with its upper portion outside the frame. Its font size was not supplied. An approximately `54–60px` mobile treatment is a visual estimate, not a measured source token.

## Tokens — Spacing & Shapes

**Density:** generous section spacing, compact navigation details, and relatively few enclosing boxes.

**Geometry:** flat rectangular photography, small corner radii, thin circles, dashed rules, and irregular section boundaries. The organic treatment belongs mainly to surface edges and illustration.

### Spacing Scale

| Use | Observed value | Interpretation |
| --- | --- | --- |
| Mobile general inset | `15px` | Introduction, services, blog, and interview-link bounds. |
| Mobile company inset | `20px` | Company heading and link list. |
| Logo left inset | `30px` desktop; `20px` mobile | Measured home-link position. |
| Company-link vertical padding | `40px 0` | Measured on desktop and mobile anchors. |
| Blog-card gap | `40px` desktop; `20px` mobile | Calculated from consecutive card rectangles. |
| Blog-card stagger | `50px` | Alternating card positions differ by this amount at both widths. |
| Detail-link footprint | Usually `192 × 60px` | Some sampled rectangles are approximately `190.08 × 59.4px`; retain the distinction between captured bounds and nominal sizing. |
| Introduction section padding | `100px 0 150px` desktop | Directly measured. |
| Introduction section padding | `20px 0 150px` mobile | Top spacing shrinks while the bottom remains large. |
| Several adjacent section overlaps | `20px` | Calculated from section tops and preceding bottoms; consistent with layered edge construction, but its implementation was not supplied. |

### Border Radius and Rules

| Element | Value or treatment | Evidence |
| --- | --- | --- |
| Blog media link | `5px` radius | Measured. |
| Blog category chip | `3px` radius | Measured; padding `1px 6px`. |
| Company navigation anchors | `0px` radius | Measured. |
| Company arrow outline | Circle, approximately `48–50px` diameter | Visual estimate. |
| Company row separators | Fine ochre dashed lines | Visible in the screenshot; exact dash spacing unmeasured. |
| News outline | Approximately `1–2px`, with subtle corner rounding | Visual estimate. |
| Soil boundary | Uneven edge, approximately `10–20px` deep | Visual estimate; irregular lobes rather than a regular sine wave. |
| Hero syllable highlights | Flat rectangular underlays | Visual estimate; approximately one glyph wide and less than half a glyph high. |

### Layout Measurements

| Element | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Header height | `100px` | `70px` | Measured. |
| Menu button footprint | `100 × 100px` | `70 × 70px` | Measured. |
| Header logo home link | `202 × 40px`, at `(30, 30)` | `202 × 40px`, at `(20, 15)` | Measured. |
| Hero section height | `942.08px` | `868.44px` | Measured; mobile hero extends below the first viewport. |
| Hero photograph bottom | Approximately `740px` | Approximately `515px` | Screenshot estimate, including an irregular boundary. |
| Hero statement box | `540 × 135px`, at `(760, 773.08)` | `174.25 × 160px`, at `(165.75, 546.84)` | Measured. |
| Latest-news link | `460 × 49.08px`, at `(0, 845)` | `348 × 57.59px`, at `(0, 762.84)` | Measured. |
| Services heading region | `1210px` wide, starting at `x=115` | `360px` wide, starting at `x=15` | Measured. |
| Company link | Approximately `450.85 × 102.99px` | `350 × 102.44px` | Measured captured bounds; screenshot list appears approximately `460px` wide. |
| Interview link | Approximately `507.87 × 507.87px` | `360 × 396px` | Measured. |
| Blog media link | `350 × 259.34px` | `250 × 185.25px` | Measured; ratio approximately `1.35:1`. |
| Contact-area link | `1440 × 667.16px` | `390 × 519.94px` | Measured. |
| Footer inner content | Approximately `1150px` wide | `300px` wide with `45px` side insets | Desktop estimate from alignment; mobile copyright bounds are measured. |

## Components

### Brand Header and Menu Control

**Role:** identify the company and provide a persistent route into the site navigation.

The header overlays the photograph without a separate filled bar. Place the logo at the upper left and the menu control at the upper right. The logo retains its `202 × 40px` link footprint on mobile; the surrounding insets change instead of shrinking the brand.

The menu's visible anatomy is two white horizontal strokes above the word `Menu`. Its actual button occupies a much larger square than the strokes: `100px` on desktop and `70px` on mobile. The accessible button text in the DOM is `メニューを開閉する`.

The menu remains in the upper-right corner in the supplied scrolled frames, while the header logo is absent from those frames. This supports a persistent menu treatment, but the sampled properties do not include its positioning rule.

A skip link, `本文までスキップする`, targets `#content`. It is captured in a hidden `1 × 1px` box at `(-1, -1)`. Its focused appearance was not tested. No opened-menu screenshot, transition sequence, focus behavior, or submenu interaction is available.

### Team Photograph Hero

**Role:** make the field team the first and largest expression of the business.

The photograph spans the entire viewport width. Staff walk toward the camera in pale blue workwear and white helmets, carrying equipment. Dense foliage fills the upper area and gives the white identity elements a darker photographic backdrop.

On desktop, the broad crop shows a line of workers, with figures partially cut at the edges. On mobile, the composition crops closely around the three central workers. Their faces and equipment remain prominent; the image is not scaled down into a small landscape strip.

The photograph gives way to a cream surface through an uneven earth-like edge. The main statement belongs below that edge. No hero slideshow, video playback, or alternate photographic frame was established by the supplied evidence.

### Slogan, Syllable Highlights, and Circular Badge

**Role:** express persistence and ground expertise with a memorable visual phrase.

The desktop headline reads `ぐっと深く、地盤を調べる` and `どんな地盤も、諦めません` across two lines. Use dark ink, weight `600`, `45px` type, and `67.5px` line height. Small ochre rectangles emphasize selected syllables, including `ぐ`, `る`, `ど`, and `ん`. These marks sit behind the lower part of individual characters rather than creating full-line highlight bands.

A small open circular ochre badge sits to the left of the statement and contains `ぐるどん`. Its diameter appears around `104px` on desktop and `62px` on mobile. The circle has an illustrated, incomplete outline with endpoint details; it should be treated as artwork rather than a generic circular button.

At `390px`, the statement becomes four lines at `25px / 40px`. The text begins at `x=165.75`, leaving a distinct space for the badge around `x=90`. This deliberate offset is central to the mobile composition.

### Latest-News Strip

**Role:** expose a current article without competing with the team photograph or statement.

A thin ochre outline encloses a date and one title. The strip is flush with the left viewport edge. On desktop it sits beside the lower hero composition; on mobile it moves below the statement.

The current entry is dated `2026.05.29` and links to `/blog/1301/`. Its mobile title wraps while the date remains compact. The measured mobile width is `348px`, leaving `42px` to the viewport's right edge. The illustrated worker partly occupies this nearby area.

Build this as one meaningful article link with a semantic date. Preserve wrapping instead of truncating the title into a generic ticker. No cycling news behavior was observed.

### Illustrated Worker and Page-Top Motif

**Role:** carry the fieldwork theme through the long page and mark its lower-right edge.

A small worker in turquoise clothing and a white helmet appears near the bottom-right corner in the opening and company frames. Soil, a tool, and the worker's limbs make an irregular silhouette with no enclosing card. In the footer, the worker holds the tool overhead beside the label `トップページへ`.

The captures show different poses. They do not establish an animation sequence, a frame rate, a scroll-controlled timeline, or an exact positioning rule. The apparent attachment to the viewport is a visual observation, not a measured `position: fixed` declaration.

For an adaptation, keep the figure secondary to the content. If it acts as a page-top link, provide a proper accessible name and ensure its hit area does not cover the phone number, article text, or footer links.

### Company Introduction

**Role:** explain the firm's expertise and connect it to the strengths page.

The DOM identifies a large two-line statement, two substantial paragraphs, and a `くわしく見る` link to `/strengths/`. Its measured background is `#f2e8ce`.

Desktop text is offset to approximately `x=198`, with paragraph width around `517px`. Paragraphs use `16px / 33.6px`, giving the technical explanation a calm rhythm. On mobile the text begins at `15px`; paragraphs are `342px` wide and use `14px / 29.4px`.

The statement changes from `50px` to `35px`, while the detail-link label remains `17px`. The section's full imagery is outside the supplied visual frames, so the reference does not assign unseen photographs or decorative positions to it.

### Services Selector

**Role:** organize five service categories and their related methods.

The DOM contains five actual buttons labeled `地盤調査・試験`, `地盤補強工事`, `沈下修正工事`, `地盤サポートシステム`, and `住宅検査`. Associated content includes category links, method links, and a detail action.

The desktop category column starts at `x=115` and is `423.5px` wide. The associated pane begins at `x=538.5` and has a sampled heading/media region around `707.84 × 418.05px`, including `50px` right padding.

Mobile retains a compact two-column arrangement: category buttons occupy `162px` from `x=15`, and the adjacent pane is approximately `195 × 179px` from `x=177`. Method links then wrap below, across a wider area. This is an important exception to a simple rule that all mobile sections stack.

All five pane records share coordinates. Selection behavior, active styling, and pane visibility were not exercised. Preserve the button-and-associated-content relationship, but treat tab semantics, keyboard navigation, and transition triggers as implementation work requiring explicit definition.

### Process and FAQ Teasers

**Role:** direct visitors to practical guidance before contacting the company.

These are separate homepage teasers linking to `/flow/` and `/faq/`. Each includes a heading, short explanatory copy, and `くわしく見る`. The supplied evidence does not show an inline FAQ accordion.

Desktop copy blocks are staggered horizontally: the process region is around `x=395`, while the FAQ region is around `x=797`. Their widths are approximately `400px` and `396px`. Mobile copy widths are approximately `323px` and `342px`, with much smaller side insets.

The measured text color of the paragraphs is pale yellow. The entire surrounding composition is not pictured, so avoid inventing the illustrations or exact surface construction behind these blocks.

### Company Link Directory

**Role:** provide a clear directory of organizational information.

This is the best-evidenced interior composition. A cream grain surface holds three offset elements: a section label near the upper left, a central link list, and two work photographs at unequal heights.

In the desktop screenshot, the heading begins around `x=130`; the list runs from approximately `x=490` to `x=950`. A drilling close-up sits lower on the left, around `330 × 316px`. A worker operating equipment appears higher on the right, with the photograph extending to the viewport edge.

Each row has an ochre label, a thin dashed separator, and a circular outlined right arrow. Rows are approximately `103–105px` tall, with measured `40px` vertical padding. The arrow circle is visually around `48–50px` across. The generous space between the label and arrow is part of the component.

The screenshot visibly presents four labels: `ご挨拶`, `品質方針`, `スタッフ紹介`, and `会社概要`. The rendered DOM additionally contains `アクセス`. Retain all five destinations when implementing the directory; the supplied frame does not establish why the fifth is not visible.

At mobile width, the heading and all five measured anchors use a `350px` region with `20px` side insets. Mobile placement of the supporting photographs is not visually documented.

### Recruitment and Interview Teasers

**Role:** connect the company's public-service message to employment and individual staff stories.

The recruitment introduction contains a bilingual section label, a paragraph, and a link to `/recruit/`. Two interview links follow under `グルンドの人`.

Their desktop link bounds are approximately `508px` square and sit side by side. At mobile width, they become `360 × 396px` links stacked with a calculated `40px` gap.

Quotation boxes sit near the right edge of each link and are unusually narrow and tall. Their measured type is `22px`, weight `700`, with `4.4px` tracking on desktop; mobile uses `18px` with `3.6px` tracking. This geometry suggests a vertical editorial treatment, but `writing-mode` was not supplied and is not a verified token.

The interview regions are documented through DOM measurements rather than screenshots. Do not infer their exact photography, overlays, or hover effects from the link dimensions alone.

### Blog Track and Category Chip

**Role:** show recent company activity and articles in a horizontally extending sequence.

The supplied card positions establish a track rather than a wrapping desktop grid. Desktop media links are `350 × 259.34px`, separated by `40px`. Mobile media links are `250 × 185.25px`, separated by `20px`. Later items extend beyond the viewport in both layouts.

Cards alternate their vertical position by `50px`. Keep this stagger if reusing the composition; it contributes to the page's uneven rhythm. Media links have `5px` corners. The available evidence does not identify their actual image files.

Each article has a date, a small category link, and a bold title. Category chips use pale yellow fill, ochre text, `13px` weight `700`, `1px 6px` padding, and `3px` corners. On mobile, the first category chip begins on its own line below the date area.

The presence of Swiper-related variables and a horizontal track does not establish autoplay, looping, swipe behavior, or the appearance of navigation arrows. Those behaviors were not tested.

### Contact Surface

**Role:** make the transition from browsing to inquiry prominent and uncomplicated.

The entire contact region is an anchor to `/contact/`, containing `Contact us`, `お問い合わせ`, and an explanatory paragraph. Its measured footprint is approximately `667px` high on desktop and `520px` on mobile.

The mobile screenshot shows centered black text on the cream grain surface. The paragraph occupies a measured `340px` width with `25px` side insets and uses `15px / 22.44px`. Broad vertical space separates it from the irregular dark footer boundary.

This is a link to a contact page, not evidence of an embedded homepage form. Its upper heading is partly outside the supplied mobile frame because of the scroll position; that crop should not be reproduced as a component requirement.

### Corporate Footer

**Role:** provide company identity, direct contact details, and a complete desktop sitemap.

A charcoal surface rises through another irregular edge. On desktop, the first row combines the logo, address, and phone number. A subtle horizontal rule separates it from four navigation columns. Primary links are white; subordinate links are `#b0b0b0`, with `15px / 19.5px` type at weight `300`.

The content aligns approximately between `x=145` and `x=1295`. The navigation-column starts are measured at roughly `145`, `461.67`, `778.33`, and `1095px`. The privacy link sits at the lower left and a small copyright line at the lower right.

The footer identifies the business as Gurundo Consultant and includes a Kobe address and a `tel:078-651-8739` link. These are original-page identity evidence.

On mobile, the footer is substantially simplified. The logo, wrapped address, phone number, and centered copyright remain. The desktop sitemap and privacy link are absent from the visible-text and link extraction. Content starts at `x=45`, and generous empty space remains before the copyright. The worker illustration occupies the lower-right corner.

## Tokens — Motion & Interaction

### Recorded Transition Declarations

| Element or treatment | Supplied computed value | What is established |
| --- | --- | --- |
| Menu button | `transform 0.4s cubic-bezier(1, 0, 0, 1)` | A transform transition is declared; expanded-menu motion is unverified. |
| Several headings and reveal regions | `opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1)` | Fade/transform timing is recorded; displacement, trigger, and sequence are not. |
| Detail-link labels and service-method links | `0.6s cubic-bezier(0.165, 0.84, 0.44, 1)` | Timing is recorded; the changed properties and end states were not captured. |
| Service category destination links | `0.3s cubic-bezier(0.165, 0.84, 0.44, 1)` | Transition declaration only. |
| Footer navigation links | `color 0.2s cubic-bezier(0.165, 0.84, 0.44, 1)` | Color-transition timing is recorded; hover color is unverified. |
| Sampled animation property | Usually `none` | Applies to sampled elements only; does not rule out scripts, descendants, pseudo-elements, or animated assets. |

### Interaction Evidence and Limits

The capture process traversed the page and produced settled opening, middle, and footer frames. It reports waiting for finite visible or reveal-related animations within its limits and temporarily pausing perpetual animations during readiness checks before resuming them.

No supplied evidence records a menu click, service-category change, article-track drag, keyboard-navigation test, form submission, or page-top activation. The different worker poses provide visual variation but cannot establish an animation timeline.

For an adaptation, the recorded easing curves provide a useful starting point for restrained reveals and link feedback. Keep motion subordinate to content and provide a static reduced-motion state. Do not assign parallax, a looping hero, or scroll-driven digging behavior as an original-site feature.

## Surfaces

| Layer | Appearance | Function and evidence |
| --- | --- | --- |
| Hero photograph | Full-width natural-color fieldwork scene | Directly visible at desktop and mobile sizes. |
| Sand surface | Warm cream with fine grain | Directly visible across hero copy, company, and contact regions; base color measured on the introduction. |
| Olive band | Dark earthy olive with an irregular pale boundary | Visible above the company frame; exact layer styling unmeasured. |
| Link structure | Transparent areas, ochre dashed lines, outlined circles | Visible in the company directory. |
| Small category chip | Pale yellow with ochre text | Measured in the blog DOM. |
| Footer | Nearly black charcoal, white and gray text | Directly visible; specific text colors measured. |
| Illustrative layer | Turquoise worker, white helmet, ochre soil and tools | Directly visible near the lower-right corner. |

No general card-shadow or floating-panel system is visible in the supplied frames. Separation comes from large color fields, texture, photography, rules, and changes in spacing.

## Imagery

Use documentary fieldwork as the primary visual material: staff in working clothes, helmets, carried instruments, equipment handling, and close views of soil operations. The hero's approachable group portrait and the company's tighter technical photographs perform different jobs and should retain different crops.

Keep photographs continuous-tone and naturally colored. The fine background grain is a separate surface treatment; it should not turn every photograph into a distressed print. Photography has mostly rectangular boundaries with restrained rounding where visible.

The small illustrated workers use simplified flat shapes, turquoise clothing, white helmets, dark boots, and earthy tools or soil. They reinforce the subject without replacing the staff photography. Their loose silhouettes suit the uneven section boundaries.

### Observed Asset References

No original image, logo, texture, or illustration URLs were included in the supplied evidence. The following inventory describes visible assets without inventing file paths.

| Asset | Current-page evidence | Implementation guidance |
| --- | --- | --- |
| Staff group photograph | Desktop and mobile opening captures | Preserve the central staff grouping when cropping for narrow screens. |
| Company logo | Opening and footer captures | Use authorized artwork; do not rebuild its lettering with an assumed font. |
| Circular slogan badge | Opening captures | Preserve the incomplete circle, endpoint details, and compact lettering. |
| Drilling close-up | Desktop company capture | Use a close technical crop with visible soil and equipment texture. |
| Worker operating equipment | Desktop company capture | Maintain the taller composition and offset placement. |
| Fine grain surface | Opening, company, and contact captures | Use an unobtrusive repeating texture over the cream base. |
| Irregular soil boundary | Photograph-to-paper and paper-to-dark transitions | Use a mask or supplied edge asset with uneven, nonperiodic-looking lobes. |
| Worker illustrations | Opening, company, and footer captures | Preserve scale and silhouette; animation mechanics remain unknown. |
| Blog media | DOM rectangles only | Dimensions and corner radius are known; actual imagery is not documented here. |

## Layout & Responsive Behavior

### Observed Changes

| Area | Desktop at `1440 × 1000` | Mobile at `390 × 844` |
| --- | --- | --- |
| Header | `100px` high; logo at `(30, 30)` | `70px` high; logo at `(20, 15)` with unchanged link dimensions. |
| Hero image | Broad staff lineup, approximately `740px` high | Central crop, approximately `515px` high. |
| Hero statement | Two lines, `45px`, right of circular badge | Four lines, `25px`, with badge still at its left. |
| News link | Left edge beside the lower hero arrangement | Left edge below the headline, `348px` wide. |
| Introduction | Offset reading column around `517px` wide | Paragraphs around `342px` wide with `15px` left inset. |
| Services | Category column plus larger adjacent content region | Still two columns for categories and the adjacent pane; method links wrap underneath. |
| Company directory | Central list between offset photographs | `350px` link list with `20px` side insets; photographs not visually documented. |
| Interview links | Two approximately square links side by side | Two `360 × 396px` links stacked with `40px` between them. |
| Blog track | `350px` media links, `40px` gaps | `250px` media links, `20px` gaps; track continues beyond viewport. |
| Contact paragraph | One measured line across a broad region | Three measured lines within `340px`. |
| Footer | Identity row, divider, four navigation columns, privacy and copyright | Identity and contact details with copyright; sitemap and privacy link not visible. |

### Breakpoints and Page Rhythm

The source exposes breakpoint variables at `576`, `768`, `992`, and `1200px`. Their presence does not establish which media query controls each component. Only the two supplied viewport outcomes are verified.

The company section remains approximately one desktop viewport tall at both widths: `950.47px` desktop and `946.03px` mobile. Recruitment grows from approximately `1641.48px` to `2105.88px`, while the footer region contracts from approximately `1471.61px` to `1027.81px`. The similar total page heights therefore come from different internal arrangements.

Use content-driven section height and preserve generous pauses between subjects. Avoid assigning a viewport height to every section. Contain the horizontal blog track within its own scrolling or slider region instead of allowing the whole document to overflow sideways.

## Do’s and Don’ts

### Do

- Lead with real staff and fieldwork photography at substantial scale.
- Preserve the cream grain, ochre navigation details, and irregular soil-like boundaries.
- Keep the headline below the photograph, with selective single-character underlays.
- Retain the circular badge beside the statement on mobile.
- Keep the logo's mobile presence substantial; its measured link size does not shrink.
- Use open space and different image heights to organize the company directory.
- Preserve all five company destinations documented by the DOM.
- Retain the compact two-column service relationship on narrow screens where it remains readable.
- Keep the blog's horizontal sequence, small radii, and alternating vertical offset.
- Treat corporate information, recruitment, articles, and contact as distinct homepage destinations.
- Separate measured transition declarations from unverified interactive behavior.

### Don’t

- Do not replace the page structure with a single conversion funnel and repeated large filled buttons.
- Do not make every section a uniform grid of rounded cards.
- Do not replace the uneven edges with identical smooth waves.
- Do not introduce glass blur, glossy surfaces, or prominent soft shadows.
- Do not treat the source `--green` value as the green logo color.
- Do not apply the pale-yellow anchor color to visible text that the screenshots show in ochre or dark ink.
- Do not shrink the entire desktop hero proportionally into the mobile viewport.
- Do not infer a missing company destination from one screenshot's visible row count.
- Do not invent menu overlays, slider autoplay, parallax, or animation timing for the illustrated worker.
- Do not turn the visible FAQ teaser into an accordion without identifying that as a new feature.

## Recommended Implementation Additions

These recommendations describe a new implementation, not verified capabilities of the original page.

- Preserve the existing skip-link concept and test that it becomes visible on focus and moves focus to the main content.
- Give the menu an explicit expanded state and controlled-region relationship. Define keyboard operation, focus return, and dismissal behavior when implementing its unrecorded open state.
- Test the white menu strokes and caption against every pale or photographic surface. A contextual dark treatment or restrained backing may be needed for dependable contrast.
- Evaluate small ochre text against the final textured cream. Use darker text where needed while retaining ochre in rules, icons, and highlights.
- Keep the service controls' selected state perceivable beyond color. Choose suitable tabs or button semantics after defining their actual behavior.
- Provide keyboard access to the article track and keep all links reachable without requiring dragging.
- Reserve sufficient clearance around the worker illustration. If decorative, exclude it from the accessibility tree; if interactive, provide a clear accessible label.
- Keep all reveal content visible when scripts fail or reduced motion is requested.
- Consider increasing the observed `10px` copyright text in a production adaptation. Keep privacy information reachable on mobile even if the footer sitemap is omitted.
- Supply meaningful alternatives for fieldwork photography and avoid empty accessible names on image-only destination links.

## Agent Prompt Guide

### Quick Color Reference

- Main pale surface: measured base `#f2e8ce`, with a separate fine-grain texture.
- Main text: measured `#1f1d1d`.
- Ochre rules, labels, and highlights: `#b59200`.
- Pale-yellow support color: `#ffe997`.
- Dark olive source token: `#4e410c`; exact surface placement is only partially verified.
- Footer: approximate `#1f1d1d`, with measured white and `#b0b0b0` text.
- Logo green and worker turquoise belong to artwork, not a general action-color system.

### Overall Prompt

“Create a Japanese ground-engineering corporate homepage inspired by Gurundo Consultant's current design. Lead with a full-width natural photograph of helmeted field staff in pale blue uniforms. Overlay a compact white-and-green logo at the upper left and a two-stroke white Menu control at the upper right. Transition through an irregular soil-like edge to a cream `#f2e8ce` grain surface. Place a bold Japanese statement below the photo with small ochre `#b59200` underlays behind selected characters, a small open circular badge to its left, and a thin outlined news strip at the page's left edge. Continue with generous asymmetric sections for services, company information, recruitment, and articles. Use dashed company-link rows with circular arrows, a staggered horizontal blog track, a broad contact link, and a charcoal footer. On mobile, crop the hero around the central workers, wrap the statement to four lines, stack interview teasers, and simplify the footer. Keep unrecorded interaction states explicitly designed as additions.”

### Example Component Prompts

1. **Hero composition:** “Use a large field-team photograph above textured cream copy space. Set the Japanese statement at `45px / 67.5px` on desktop and `25px / 40px` on mobile. Add narrow ochre underlays behind selected syllables, an open circular slogan badge at left, and a small outlined news link. Preserve the central people when cropping the mobile image.”
2. **Company directory:** “Create a spacious cream section with a Japanese/English heading at left, an approximately `460px` central list, and two offset fieldwork photos. Give each link approximately `40px` vertical padding, thin ochre dashed separators, and a `50px` outlined arrow circle. Include five destinations. Use a `350px` list with `20px` side insets at a `390px` viewport.”
3. **Blog track:** “Build a horizontal article sequence with transparent card bodies, approximately `1.35:1` media, `5px` image corners, compact dates, and pale-yellow category chips. Alternate card positions by `50px`. Use `350px` cards and `40px` gaps on desktop, `250px` cards and `20px` gaps on mobile. Define scrolling access without assuming autoplay.”
4. **Footer:** “Transition from a spacious cream contact region into charcoal through an irregular ground edge. On desktop, show the logo, address, and telephone above a fine divider and four columns of white and muted-gray links. On mobile, keep a `300px` contact column inside `45px` side margins, omit the large sitemap, and retain ample space before the copyright. Place a small authorized worker illustration near the lower-right edge.”

## Quick Start

### CSS Custom Properties

This is an implementation adaptation, not extracted site CSS. It combines measured values with the visual estimates identified above. The `768px` responsive cutoff is a recommended starting point; the original component breakpoints were not supplied.

Use authorized image, logo, badge, and illustration assets. Set `--paper-texture` to an appropriate texture image when available. The embedded edge mask below is a new approximation of the observed boundary, not an original asset. Hover offsets, focus styles, and reduced-motion handling are recommended additions.

The hero expects `.hero-media` containing an image, followed by `.hero-caption.soil-edge`. Inside the caption, group the badge and title in `.hero-copy`, and place the news link separately. Wrap the headline's two desktop lines in `.hero-line`; use `.mobile-break` on the extra mobile line breaks and `.syllable-mark` on highlighted characters.

```css
:root {
  /* Measured colors and a documented footer approximation. */
  --color-paper: #f2e8ce;
  --color-ochre: #b59200;
  --color-pale: #ffe997;
  --color-olive: #4e410c;
  --color-ink: #1f1d1d;
  --color-white: #ffffff;
  --color-muted: #b0b0b0;

  /* Shortened adaptation of the recorded font stack. */
  --font-site: 'Open Sans', 'Noto Sans JP', -apple-system,
    system-ui, 'Helvetica Neue', 'Hiragino Sans',
    'Yu Gothic', Meiryo, sans-serif;
  --text-body-size: 15.2px;
  --text-hero-size: 45px;
  --leading-hero: 1.5;
  --header-size: 100px;
  --content-width: 1210px;
  --footer-width: 1150px;
  --radius-media: 5px;
  --radius-chip: 3px;
  --paper-texture: none;

  /* Recorded transition timing; triggers require implementation. */
  --ease-link: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-reveal: cubic-bezier(0.645, 0.045, 0.355, 1);
  --motion-link: 200ms var(--ease-link);
  --motion-reveal: 800ms var(--ease-reveal);

  /* New edge approximation, not an original-site asset. */
  --soil-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='20' viewBox='0 0 320 20'%3E%3Cpath d='M0 11 C5 8 3 1 13 3 S22 18 29 13 S35 3 43 7 S51 4 60 6 S71 15 82 13 S90 19 99 13 S106 6 115 8 S129 17 136 10 S141 2 149 5 S150 20 162 14 S166 1 179 5 S187 13 196 13 S206 7 217 9 S225 0 235 4 S239 18 251 12 S261 8 271 13 S282 1 291 5 S295 19 305 13 S313 6 320 11 V20 H0Z' fill='black'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  font: 400 var(--text-body-size)/1.65 var(--font-site);
}
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }

.paper-surface {
  background-color: var(--color-paper);
  background-image: var(--paper-texture);
  background-repeat: repeat;
}
.site-container {
  width: min(var(--content-width), calc(100% - 30px));
  margin-inline: auto;
}
.soil-edge { position: relative; }
.soil-edge::before {
  content: '';
  position: absolute;
  inset: -19px 0 auto;
  height: 20px;
  pointer-events: none;
  background-color: var(--edge-color, var(--color-paper));
  background-image: var(--paper-texture);
  -webkit-mask: var(--soil-mask) left top / 320px 20px repeat-x;
  mask: var(--soil-mask) left top / 320px 20px repeat-x;
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  height: var(--header-size);
  z-index: 20;
}
.site-logo {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 202px;
  height: 40px;
}
.site-logo img { width: 100%; height: 100%; object-fit: contain; }
.menu-toggle {
  position: fixed;
  inset: 0 0 auto auto;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  width: var(--header-size);
  height: var(--header-size);
  padding: 0 18px 0 0;
  border: 0;
  color: var(--color-white);
  background: transparent;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  transition: transform 400ms cubic-bezier(1, 0, 0, 1);
}
.menu-icon {
  width: 50px;
  height: 11px;
  border-block: 3px solid currentColor;
}
/* Optional contrast state; not verified on the original. */
.menu-toggle[data-surface='paper'] { color: var(--color-ink); }

.hero-media { height: clamp(520px, 51.4vw, 740px); }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-caption {
  min-height: 202px;
  padding: 33px max(30px, calc((100vw - 1160px) / 2)) 34px 0;
}
.hero-copy {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  width: max-content;
  margin-left: auto;
}
.hero-badge { width: 104px; flex: 0 0 104px; margin-top: 18px; }
.hero-title {
  width: 12em;
  margin: 0;
  font-size: var(--text-hero-size);
  font-weight: 600;
  line-height: var(--leading-hero);
}
.hero-line { display: block; }
.mobile-break { display: none; }
.syllable-mark {
  color: inherit;
  background: linear-gradient(var(--color-ochre), var(--color-ochre))
    left 88% / 100% 0.38em no-repeat;
}
.news-strip {
  position: absolute;
  left: 0;
  top: 105px;
  display: flex;
  align-items: center;
  gap: 15px;
  width: 460px;
  min-height: 49px;
  padding: 10px 20px;
  border: 2px solid var(--color-ochre);
  border-radius: 0 4px 4px 0;
  color: var(--color-ochre);
  text-decoration: none;
}
.news-strip time { flex: none; font-size: 14px; font-weight: 600; }
.news-title { min-width: 0; margin: 0; font-size: 15px; line-height: 1.2; }

.intro-copy { max-width: 525px; }
.intro-title { margin: 0 0 50px; font-size: 50px; font-weight: 600; line-height: 1.2; }
.intro-copy p { font-size: 16px; font-weight: 500; line-height: 2.1; }

.company-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 460px);
  gap: 80px;
  padding-inline: max(20px, calc((100vw - 1180px) / 2));
}
.section-title { margin: 0; color: var(--color-ochre); }
.section-title .ja { display: block; font-size: 32px; line-height: 1.2; }
.section-title .en { display: block; margin-top: 3px; font-size: 20px; line-height: 1.2; }
.company-links { margin: 0; padding: 0; list-style: none; }
.company-links li { border-top: 1px dashed var(--color-ochre); }
.company-links li:last-child { border-bottom: 1px dashed var(--color-ochre); }
.company-link {
  position: relative;
  display: block;
  padding: 40px 65px 40px 0;
  color: var(--color-ochre);
  font-size: 18px;
  font-weight: 600;
  line-height: 25.08px;
  text-decoration: none;
}
.circle-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: transform var(--motion-link);
}
.circle-arrow::after {
  content: '';
  width: 10px;
  height: 10px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateX(-2px) rotate(45deg);
}

/* Native horizontal scrolling is an adaptation of the measured track. */
.blog-track {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  overflow-x: auto;
  margin: 0 0 0 max(15px, calc((100vw - 1210px) / 2 + 80px));
  padding: 50px 20px 16px 0;
  list-style: none;
}
.blog-card { flex: 0 0 350px; }
.blog-card:nth-child(even) { transform: translateY(-50px); }
.blog-media {
  width: 100%;
  aspect-ratio: 1000 / 741;
  object-fit: cover;
  border-radius: var(--radius-media);
}
.blog-title { font-size: 18px; font-weight: 700; line-height: 1.2; }
.category-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-chip);
  color: var(--color-ochre);
  background: var(--color-pale);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.contact-link {
  display: grid;
  place-content: center;
  min-height: 667px;
  padding: 80px 25px;
  color: var(--color-ink);
  text-align: center;
  text-decoration: none;
}
.contact-link p { max-width: 80ch; margin-inline: auto; font-size: 15px; }
.site-footer {
  --edge-color: var(--color-ink);
  --paper-texture: none;
  padding: 110px 0 40px;
  color: var(--color-white);
  background: var(--color-ink);
}
.footer-inner { width: min(var(--footer-width), calc(100% - 60px)); margin-inline: auto; }
.footer-top { display: flex; align-items: center; gap: 80px; padding-bottom: 60px; border-bottom: 1px solid #ffffff26; }
.footer-logo { width: 185px; flex: none; }
.footer-contact { display: flex; align-items: center; gap: 80px; }
.footer-contact address { max-width: 350px; font-size: 14px; font-style: normal; }
.footer-phone { font-size: 14px; letter-spacing: 0.1em; text-decoration: none; }
.footer-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 200px)); justify-content: space-between; gap: 30px; margin-top: 115px; }
.footer-nav a { display: block; margin-bottom: 20px; font-size: 15px; font-weight: 300; line-height: 1.3; text-decoration: none; transition: color var(--motion-link); }
.footer-nav .is-secondary, .footer-privacy { color: var(--color-muted); }
.footer-bottom { display: flex; justify-content: space-between; gap: 30px; margin-top: 140px; }
.copyright { margin: 0; font-size: 10px; font-weight: 300; line-height: 20px; }

/* Recommended interaction additions. */
:where(a, button):focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
@media (hover: hover) {
  .company-link:hover .circle-arrow { transform: translateX(3px); }
  .footer-nav a:hover { color: var(--color-pale); }
}
.reveal { transition: opacity var(--motion-reveal), transform var(--motion-reveal); }

@media (max-width: 767px) {
  :root {
    --text-body-size: 13.6px;
    --text-hero-size: 25px;
    --leading-hero: 1.6;
    --header-size: 70px;
  }
  .site-logo { top: 15px; left: 20px; }
  .menu-toggle { padding-right: 8px; font-size: 16px; }
  .menu-icon { width: 44px; }
  .hero-media { height: 515px; }
  .hero-caption { min-height: 353px; padding: 32px 50px 48px 0; }
  .hero-copy { gap: 14.75px; }
  .hero-badge { width: 62px; flex-basis: 62px; margin-top: 14px; }
  .hero-title { width: 174.25px; }
  .mobile-break { display: inline; }
  .news-strip { top: auto; bottom: 48px; width: calc(100% - 42px); min-height: 58px; gap: 30px; }
  .news-title { font-size: 14px; }
  .intro-title { font-size: 35px; }
  .intro-copy p { font-size: 14px; }
  .company-layout { grid-template-columns: minmax(0, 1fr); gap: 60px; padding-inline: 20px; }
  .section-title .ja { font-size: 24px; }
  .section-title .en { font-size: 16px; }
  .company-link { font-size: 16px; line-height: 22.44px; }
  .blog-track { margin-left: 15px; gap: 20px; }
  .blog-card { flex-basis: 250px; }
  .blog-title { font-size: 16px; }
  .contact-link { min-height: 520px; }
  .contact-link p { max-width: 340px; }
  .site-footer { padding-top: 96px; }
  .footer-inner { width: calc(100% - 90px); }
  .footer-top { align-items: flex-start; flex-direction: column; gap: 32px; border: 0; padding: 0; }
  .footer-logo { width: 200px; }
  .footer-contact { flex-direction: column; align-items: flex-start; gap: 0; }
  .footer-nav, .footer-privacy { display: none; }
  .footer-bottom { display: block; margin-top: 205px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-toggle, .circle-arrow, .footer-nav a, .reveal { transition: none; }
  .reveal { opacity: 1; transform: none; }
}
```

The CSS supplies the principal visual shell. The service controller, navigation open state, authorized artwork, image focal positions, and any worker animation need separate implementation and verification. The mobile section-label sizes in this example are recommendations because their child-level source styles were not supplied.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-sand: var(--color-paper);
  --color-ochre-accent: var(--color-ochre);
  --color-pale-yellow: var(--color-pale);
  --color-earth-olive: var(--color-olive);
  --color-charcoal: var(--color-ink);
  --color-footer-muted: var(--color-muted);

  --font-sans: var(--font-site);
  --text-body: var(--text-body-size);
  --text-hero: var(--text-hero-size);
  --text-hero--line-height: var(--leading-hero);
  --text-action: 17px;
  --text-chip: 13px;

  --radius-media: 5px;
  --radius-chip: 3px;
  --spacing-page-inset: 15px;
  --spacing-company-inset: 20px;
  --spacing-company-row: 40px;
}
```

## Sources & Evidence

- **Original and final website:** [株式会社グルンドコンサルタント](https://gurundo.net/). The supplied observation records HTTP `200` and the same original and final URL.
- **Capture date:** `2026-09-22T18:01:03.577Z`, corresponding to September 23, 2026, at 03:01:03.577 JST. This reference analyzes those supplied observations; no additional live browsing was performed.
- **Desktop visual evidence:** three `1440 × 1000` captures covering the opening hero, company directory, and footer. Exact scroll offsets were not included.
- **Mobile visual evidence:** two `390 × 844` captures covering the opening hero and the contact/footer area.
- **Rendered evidence:** page text, destination links, element rectangles, computed typography, selected colors, transition declarations, and root custom properties at both viewports. Sections absent from the screenshots are identified as DOM-derived in this document.
- **Capture procedure:** the supplied record reports at least five seconds of initial observation, bounded waits for image decoding and finite animation/layout stability, and traversal through intermediate scroll positions. Perpetual animations were temporarily paused for readiness checks and resumed. Shared workers and service workers were disabled.
- **Inspection limits:** no additional pages, opened navigation, service changes, carousel gestures, hover end states, focus sequences, or forms were tested. Original asset URLs, font-loading confirmation, and complete pseudo-element styles were not supplied. Readiness checks do not prove that every delayed element or interactive state was captured.

This reference describes the supplied current homepage. The token aliases, component prompts, CSS, and Tailwind mapping are reusable adaptations with their estimates and recommendations identified above.