東土地測量・東土地家屋調査士事務所｜AZUMA

# AZUMA — Style Reference

> Surveying precision expressed through indigo rules, documentary photography, and generous white space.

**Website:** [azuma-office.jp](https://azuma-office.jp/)
**Original URL:** https://azuma-office.jp/
**Final URL:** https://azuma-office.jp/
**Theme:** predominantly white and pale gray, with deep indigo identity elements and photographic sections.
**Inspected:** supplied browser evidence retrieved October 2, 2026 at 04:55:34 JST; October 1, 2026 at 19:55:34 UTC.
**Viewports:** desktop 1440 × 1000 and mobile 390 × 844 CSS pixels.
**Scope:** the current corporate homepage: opening header and hero, company introduction, two service summaries, three blog previews, contact invitation, and footer. Desktop screenshots show the hero, services, and contact/footer. Mobile screenshots show the hero and lower contact/footer. Introduction and blog details are supported principally by rendered DOM measurements. Destination pages and the opened mobile menu were not inspected.

AZUMA presents 株式会社東土地測量 and 東土地家屋調査士事務所 together through a restrained corporate design. Indigo establishes identity; photographs establish the work and its local setting. English navigation and display lettering are narrow and upright, while Japanese descriptions have unusually generous line spacing. Fine dotted circles, straight arrow shafts, a central service divider, and diagonal image-corner marks create a consistent language of measurement.

This is a multi-page corporate website with a long introductory homepage. Navigation leads to service, company, blog, and contact pages. Its defining composition moves from a viewport-height photographic opening to broad editorial sections, then to an indigo photographic contact band and a spacious white footer. Preserve that information structure when adapting the design.

## How to Read This Reference

- **Measured** means explicitly recorded in the supplied computed styles or element rectangles. Values are CSS pixels unless noted otherwise.
- **Calculated** means derived from those measurements, such as image aspect ratios or gaps between recorded rectangles.
- **Estimated** means judged from the current-page screenshots. Estimates are not recovered stylesheet values.
- **Recommended** means an implementation choice for a new project, including the CSS below.
- Token names are descriptive aliases. The supplied custom-property inventory does not expose a complete original design-token system.
- Element measurements can describe wrappers rather than their visible descendants. A heading wrapper reporting `15px` does not establish the size of a larger span inside it. Image links can also have short inline rectangles despite containing much taller images.
- Static captures and transition declarations establish only part of the motion system. Timing, sequencing, hover results, and menu behavior are identified as unverified where appropriate.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| AZUMA Indigo | `#232584` | `--color-brand` | Measured on the desktop Contact navigation cell, detail links, dates, footer links, and vertical scroll rule. Visually also organizes the logo and decorative linework. |
| Near Black | `#111111` | `--color-ink` | Measured body text and contact-form link background. |
| Pale Gray | `#f1f1f4` | `--color-soft` | Measured Blog section background; visually consistent with the field behind the lower service content. |
| White | `#ffffff` | `--color-white` | Measured navigation text, blog-card surfaces, and footer background. Also visible in the contact panel and reversed identity. |
| Muted Indigo | `#b3b3c9` | `--color-brand-muted` | Measured desktop footer Home link. A localized current-page treatment, not a general disabled-control color. |
| Copyright Gray | `#999999` | `--color-muted` | Measured copyright text. |

The palette is concentrated rather than varied. Indigo handles identity, navigation emphasis, dates, and fine geometry. The large inquiry button inside the contact panel is near black, while the mobile footer Contact link is indigo. Retain this distinction instead of making every prominent action the same blue rectangle.

### Photographic Overlays

The desktop hero is visibly subdued beneath white lettering. Its exact overlay color, opacity, and compositing method are absent from the supplied styles. The captured image includes overlapping photographic forms; a static frame cannot establish whether these belong to a transition or a fixed composition.

The contact section has a strong indigo wash over a photograph. Its section wrapper reports a transparent background, so the visible color likely belongs to another rendering layer; the supplied evidence does not identify that layer or its opacity.

**Recommended approximation:** use an independently adjustable neutral hero veil and an indigo contact veil. Treat any numeric opacity in the Quick Start as an adaptation, then check contrast against the actual photographs. Do not promote a screenshot’s gray photographic field into a measured brand color.

## Tokens — Typography

### Japanese Text

**Measured stack:** `YakuHanJP_Noto, 'Noto Sans JP', sans-serif`.

The body declares weight `500`, but the inspected header, sections, paragraphs, and most links use `400`. Do not make all content medium or bold simply because the body’s default is 500.

Japanese descriptions are small relative to their available space. Their spacious line height is central to the design: desktop service paragraphs use `15px / 34.5px`, and mobile paragraphs use `13px / 31.2px`. Both retain `1.2px` tracking. This produces deliberate, open text blocks without enlarging every character.

### Condensed English Labels

**Measured stack:** `'Roboto Condensed', sans-serif`.

This stack is recorded on navigation links, the hero Service link, blog dates, footer links, and copyright. These elements use weight `400`. The narrow letterforms permit wide spacing between navigation targets without creating heavy visual blocks.

The hero headline and large English section labels look consistent with this condensed typography, but their individual text-span styles are not included. Reusing the verified condensed family for those roles is a supported visual adaptation, not an independently measured font assignment.

### Identity Artwork

The AZUMA wordmark and accompanying bilingual identity appear as supplied graphics. Their exact type construction is not established by the surrounding heading styles. Use the actual authorized logo assets instead of recreating the mark as ordinary text.

The HTML element reports a `10px` font size and a Times default. Visible page content overrides that family. This is not a serif-led design, and a new implementation does not need to adopt the source’s small root size.

### Measured Type Scale

| Role | Desktop size / line height | Mobile size / line height | Tracking and notes |
| --- | --- | --- | --- |
| Body default | `15 / 30px` | `15 / 30px` | `1.2px`; body weight 500, many descendants 400 |
| Company introduction heading | `30 / 42px` | `22 / 30.8px` | `0.6px` desktop; `0.44px` mobile |
| Introduction paragraph | `15 / 34.5px` | `13 / 31.2px` | `1.2px` |
| Service description | `15 / 34.5px` | `13 / 31.2px` | `1.2px` |
| Desktop primary navigation | `16 / 16px` | Not visibly present | `0.48px` |
| Hero Service link | `17 / 34px` | `14 / 28px` | `0.51px` / `0.42px` |
| Detail and blog-index links | `15 / 30px` | `12 / 24px` | `0.45px` / `0.36px` |
| Blog title | `18 / 30.6px` | `16 / 28.8px` | `1.2px` |
| Blog category | `15 / 30px` | `15 / 30px` | `1.2px` |
| Blog date | `13 / 15.6px` | `13 / 15.6px` | Condensed; `0.52px` |
| Contact explanation | `16 / 32px` | `12 / 24px` | `1.2px` |
| Contact-form link | `17 / 34px` | `14 / 28px` | `1.2px` |
| Footer navigation | `16 / 16px` | `16 / 16px` | Condensed; `0.64px` |
| Copyright | `10 / 14px` | `10 / 14px` | Condensed; `0.8px`; visible footprint is smaller than the declared line box |

The mobile DOM also records menu links at `18px / 18px` with `0.72px` tracking. These are not visible in the closed-menu screenshot; their dimensions do not prove that the menu was opened.

### Display Estimates

| Role | Screenshot estimate | Practical adaptation |
| --- | --- | --- |
| Desktop hero English | About `60px`, two lines with roughly `72px` line spacing | Use a regular condensed face; keep the first line as “Supporting the Community”. |
| Mobile hero English | About `34px`, three lines with roughly `44px` line spacing | Break after “Supporting” and “the Community”. |
| Hero Japanese statement | About `26px` desktop and `18–20px` mobile | Preserve the underline and separation from the English text. |
| Desktop English section heading | About `40px` | Pair with a much smaller Japanese subtitle. |
| Desktop Japanese service title | About `28px` | Center below the photograph; keep the small number separate. |
| Service English subtitle | About `11–12px` | Indigo and compact; subordinate to the Japanese name. |

A `30px` mobile English section heading and `22px` service title are reasonable implementation choices. They are recommendations because the relevant mobile text-span styles and screenshots are unavailable.

## Tokens — Spacing & Shapes

**Density:** large section intervals and narrow text blocks, with precise small-scale details.

**Shape language:** square photographs, square panels, rectangular buttons, fine straight rules, and dotted circular arrow ornaments. There is no visible general system of rounded cards or soft elevation shadows.

### Spacing Scale

These are recurring measured distances rather than proof of a universal source scale.

| Distance | Observed use |
| --- | --- |
| `5px` | Blog media-wrapper top and side padding |
| `20px` | Desktop service paragraph inset relative to the image edge |
| `25px` | Mobile blog text inset; gap between contact explanation and button |
| `30px` | Mobile contact-panel side inset; desktop service heading-to-paragraph gap |
| `35px` | Mobile service image-to-heading gap; estimated mobile contact-panel bottom inset |
| `40px` | Mobile introduction, service, and blog side margins; desktop blog text inset |
| `50px` | Desktop service image-to-heading gap; mobile footer side padding |
| `60px` | Mobile introduction top padding and Blog bottom padding |
| `65px` | Mobile gap between the two service articles; Contact top padding |
| `70px` | Desktop footer top padding; mobile Contact bottom padding |
| `80px` | Desktop logo/footer horizontal inset; approximate contact-panel vertical inset |
| `95px` | Desktop Blog heading-to-card gap, calculated |
| `105px` | Desktop Service heading-to-image gap, calculated |
| `115–160px` | Larger section padding, depending on section and viewport |

### Geometry

| Element | Evidence |
| --- | --- |
| Main photographs and panels | Square corners in current screenshots; inspected component wrappers generally report `0px` radius |
| Hero frame | Approximately `4px` indigo perimeter in desktop capture; not visually present around the mobile hero |
| Fine rules | Approximately `1px`; the scroll rule is explicitly measured at `1px` wide |
| Link circle | Approximately `60px` diameter desktop and `46px` mobile, estimated from screenshots |
| Back-to-top control | Desktop anchor rectangle `50 × 60px`; visible circle approximately `50px` |
| Service corner strokes | Two thin diagonal marks, at upper left and lower right; approximately 45 degrees |
| Service photos | Calculated `4:3` ratio at both measured viewports |
| Blog media | Square inner image area inferred from wrapper dimensions and `5px` padding |

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 |
| --- | --- | --- |
| Opening header/hero | `1440 × 1000px` | `390 × 844px` |
| Header identity wrapper | `(80, 75)`, `320 × 76.61px` | `(25, 25)`, `205 × 49.64px` |
| Primary navigation | Five `160 × 160px` cells, starting at `x=640` | Replaced visually by a three-line menu control |
| Hero copy wrapper | `(144, 517.41)`, approximately `630.81 × 204.59px` | `(40, 360.5)`, approximately `263.77 × 196.53px` |
| Hero Service anchor | `(144, 805)`, `169.69 × 50px` | `(40, 679.41)`, `133.39 × 38px` |
| Scroll rule | `(1359, 841)`, `1 × 90px` | `(359, 754)`, `1 × 60px` |
| Service image | `420.48 × 315.36px` | `310 × 232.5px` |
| Service text width | `380.48px` | `310px` |
| Blog card | `366.89 × 516.48px` | `310 × 423.80px` |
| Contact panel | Approximately `1000 × 256px`, visually measured | Approximately `330 × 230px`, calculated from content and visible insets |
| Contact-form link | `351 × 90px` | `270 × 68px` |
| Footer | `1440 × 330.02px` | `390 × 562.39px` |
| Full document | Approximately `4756.47px` high | Approximately `5684.16px` high |

Absolute positions are useful capture references, not values to hardcode throughout a new document. Use content flow for all sections below the hero.

## Components

### Header Identity and Primary Navigation

**Role:** presents the shared AZUMA identity and routes to the site’s main pages.

On desktop, the white logo lockup sits at `80px` from the left and `75px` from the top. Navigation occupies the upper-right `800px` as five equal square cells: Home, Service, Company, Blog, and Contact. Labels are centered, regular-weight condensed English. Fine dotted boundaries are visible across this navigation area. Contact is a solid indigo cell; Home is underlined in the hero capture.

The measured `HEADER` is the entire viewport-height opening region. Do not confuse its `1000px` height with the height of the navigation strip, which is `160px` at this viewport. Sticky or fixed header behavior was not established.

On mobile, the identity shrinks to approximately `205px` wide and moves to `(25, 25)`. A three-line control appears at the upper right. A corresponding small anchor rectangle is `42 × 42px`, but the supplied extraction does not establish its event handler or accessibility semantics. The opened menu layout, backdrop, focus behavior, and animation remain unverified.

### Photographic Hero

**Role:** establishes the relationship between surveying work and the community.

The desktop hero fills the first screen. The current capture prominently shows a pedestrian bridge and urban waterfront surroundings, with faint overlapping photographic content. A subdued image field allows the white bilingual statement to remain prominent. The composition is anchored low and left rather than vertically centered.

The English statement reads “Supporting the Community / through Surveying.” The underlined Japanese statement, “測量で地域を支える。”, sits below it. Place the Service link farther down, with a long arrow and dotted circle. This is a link to `/service/`, not a verified in-page scroll action.

The right side acts as a narrow utility rail: vertical identity text, a fine dotted divider, the rotated Scroll label, and a short indigo vertical rule. Its small details counterbalance the large lower-left copy.

On mobile, the headline uses three lines. The copy starts around `x=40, y=360.5`, and the Service link remains near 80.5% of the viewport height. The supplied mobile hero is mostly a flat gray field below a narrow photographic area at the top. This is an observed capture limitation or state; the evidence does not establish its cause. Do not treat the absent full-height photograph as an intentional permanent mobile design.

### Company Introduction

**Role:** explains the two organizations and the professional basis of their work.

The desktop section begins immediately after the hero at document `y=1000`, with `160px` top padding. Its measured heading and paragraph occupy a roughly `400px`-wide right-side column beginning at `x=842.78`. The heading uses `30px / 42px`; the paragraph uses `15px / 34.5px` and starts `70px` after the heading’s recorded rectangle.

The introduction’s complete visual composition is not included in the screenshots. The text placement is measurable; the appearance of any accompanying media should not be invented.

On mobile, the heading appears first within the section. The paragraph uses a `310px` width with `40px` side margins. Top padding reduces to `60px`, and the heading size reduces to `22px`. This is evidence of a meaningful layout reflow, not a proportionally shrunken desktop column.

The text “Carefully, honestly, and reliably.” appears three times in the rendered evidence. Preserve this as a repeated typographic motif if adapting the content structure. A continuously moving marquee is not verified.

### Bilingual Section Heading

**Role:** gives Service, Blog, and Contact a consistent chapter marker.

Use a centered condensed English heading with a small Japanese subtitle directly below. Service and Blog use indigo English lettering on a light surface; Contact reverses the treatment to white over the photographic blue field.

The combined heading wrapper measures `69.39px` high on desktop and `56.19px` on mobile. The visible English size is larger than the `15px` reported by the wrapper, indicating styling on descendants not enumerated in the supplied sample.

This is a compact label pair above a large gap, not a long explanatory section introduction.

### Paired Service Articles

**Role:** distinguishes the surveying company from the land and house investigation office.

Desktop service content is split into two equal `720px` sections, separated visually by a thin vertical indigo line. The photographs are narrower than their half-page containers, leaving a large central interval and generous outer margins.

Each article contains, in order:

1. A linked `4:3` photograph with two diagonal corner strokes.
2. A small indigo service number, `01` or `02`.
3. A centered Japanese organization name.
4. A small centered English subtitle.
5. A five-line Japanese description in the measured desktop layout.
6. A right-aligned “詳しく見る” link with the dotted-circle arrow.

The left photograph begins at `x=155.52`; the right begins at `x=864`. Both are `420.48px` wide. Description text is inset a further `20px` on each side. The image-to-heading gap is `50px`, followed by `30px` from the heading wrapper to the paragraph. A pale gray field begins visually around the photographs’ mid-height and continues behind the descriptions.

The first image shows a worker handling surveying equipment beside an elevated roadway. The second shows hands and a pencil working over a technical plan. These photographs distinguish field measurement from documentation without relying on illustrative icons.

Mobile articles stack in the original order at `x=40`, each `310px` wide. Their images retain the same `4:3` ratio. The image-to-heading gap becomes `35px`, paragraph text uses the full article width, and the next article begins `65px` after the preceding article’s rectangle ends. The side-by-side center divider should not be carried into a one-column adaptation; its exact mobile replacement is not visible in the supplied screenshots.

### Dotted-Circle Arrow Link

**Role:** supplies a recognizable, lightweight navigation motif.

The label is followed by a thin horizontal shaft ending in a small angled arrowhead. A dotted circular outline surrounds the arrow’s destination area, while the shaft begins outside the circle. The label itself has no filled button surface.

Use white for this motif over the hero and indigo over light sections. In the desktop service screenshot, the circle is approximately `60px` across. The mobile hero circle is approximately `46px` across. These visual ornaments can extend beyond the anchor’s recorded line box; the line-box height is not the circle diameter.

The same family appears in the upward-pointing back-to-top ornament. Keep line weights light and circles dotted. Replacing them with solid chevrons inside rounded filled buttons would change a recurring part of the site’s identity.

### Blog Preview Card

**Role:** exposes current articles within the corporate homepage.

The DOM records three linked white cards on a pale gray section. Desktop cards form one row at `x≈115.2`, `536.52`, and `957.83`; the calculated gaps are approximately `54.42px`. Each card is `366.89px` wide.

The anatomy is a square media area within `5px` top/side padding, followed by a title, category, and a small indigo date positioned toward the lower right. Text is inset `40px` on desktop. Titles use `18px / 30.6px`; dates use condensed `13px / 15.6px`.

The observed titles are “先日、お手紙を頂きました”, “建物の登記”, and “土地の地目”, with dates `2025.4.25`, `2025.4.13`, and `2024.1.3`. These establish the actual content hierarchy; they are not evidence of a required publishing cadence.

On mobile, cards stack at `310px` wide with `40px` vertical gaps. Text insets reduce to `25px`, and titles reduce to `16px / 28.8px`. A right-aligned “ブログ一覧” arrow link follows the group.

Blog artwork and complete visual styling are not shown in the supplied captures. Card dimensions, background, text styles, and order are measured; thumbnail subjects and hover outcomes are unverified.

### Contact Invitation

**Role:** sends visitors to the dedicated contact page.

The desktop section is approximately `630.39px` tall, with `115px` top and `120px` bottom padding. A centered bilingual heading appears over an indigo-washed work photograph. Below it, a large white panel contains explanatory copy on the left and a near-black rectangular action on the right.

The panel is approximately `1000px` wide, beginning at `x=220`. The explanation starts at `x=320` and uses `16px / 32px`. The action begins at `x=749`, measures `351 × 90px`, and reads “お問い合わせフォーム”. It links to `/contact/`; the homepage itself does not show a form in the supplied evidence.

On mobile, the section uses `65px 30px 70px` padding. The white panel becomes `330px` wide, with its copy and action stacked. Both inner elements are `270px` wide at `x=60`. The copy uses `12px / 24px`; the button is `68px` high with `14px / 28px` text. A `25px` gap separates explanation and action.

Keep the panel flat and square. The hierarchy comes from the indigo photographic surround, the white inset, and the black action—not a shadow or rounded container.

### Footer and Back-to-Top Ornament

**Role:** repeats site navigation and identity after the contact section.

Desktop uses a white footer approximately `330px` tall with `70px 80px 30px` padding. Navigation sits toward the upper right, separated by dotted vertical rules. The blue identity lockup sits lower left; a gray BE KOBE mark appears lower right. The visible external mark links to `https://bekobe.jp/`; its presence alone does not establish a production credit or a specific organizational relationship.

A small copyright line is centered near the bottom. Its declared font is `10px / 14px`, but its recorded and visible footprint is smaller than an ordinary unscaled line box. Preserve its secondary hierarchy without copying illegibly small text into a new implementation.

The upward arrow and dotted circle straddle the contact/footer boundary near the right edge. The desktop DOM confirms a link to `/#header`. The mobile screenshot shows the corresponding ornament, but its target and activation were not independently recorded.

Mobile footer content is reordered into a left-aligned vertical sequence: four text navigation links, a `230 × 62px` indigo Contact link, BE KOBE, the blue AZUMA lockup, and copyright. Side padding is `50px`; total footer height is approximately `562.39px`. The ordinary links are near black, and Home is visibly underlined.

## Tokens — Motion & Interaction

### Recorded Transition Declarations

| Element | Desktop declaration | Mobile declaration | What the evidence establishes |
| --- | --- | --- | --- |
| Header identity wrapper | `0.6s` | `0.6s` | A transition duration; the changed property and trigger are not established. |
| Primary navigation links | `background-color 0.3s` | Not visible in the closed header | Background changes are configured; the resulting hover color was not captured. |
| Hero Service link | `0.8s` | `0.6s` | Different declared durations by viewport; exact animated property is not specified. |
| Scroll-rule element | `1.4s` | `1.4s` | Transition declaration only; no verified repeating scroll animation. |
| First service article | `transform 1s, opacity 1s` | `transform 0.8s, opacity 0.8s` | Prepared for movement and fading; travel distance and trigger remain unknown. |
| Second service article | `transform 1s 0.15s, opacity 1s 0.15s` | `transform 0.8s, opacity 0.8s` | Desktop includes a 150ms delay; the mobile sample does not. |
| Blog card | `0.3s` | `all`, without a nonzero duration in the supplied value | Desktop has a configured transition; no specific mobile effect is established. |
| Contact-form link | `background-color 0.3s` | `all`, without a nonzero duration in the supplied value | Desktop background transition is configured. |
| Footer navigation | `opacity 0.3s` | `all`, without a nonzero duration in the supplied value | Desktop opacity changes are configured; the changed opacity value is unknown. |

All enumerated elements report `animation: none`. This does not rule out motion on omitted descendants, pseudo-elements, background layers, or script-controlled elements.

The repeated slogan and repeated identity text could support looping typographic bands, but no reliable speed, direction, or loop behavior is supplied. The photographic captures do not establish slideshow timing or even conclusively establish a slideshow. Do not invent carousel dots, manual slide controls, or a precise crossfade duration.

### Verified Navigation Intent

- Home returns to the site root.
- Service routes to `/service/`.
- The service images and detail links route to their respective surveying and investigation detail pages.
- Blog previews route to individual articles; “ブログ一覧” routes to `/blog/`.
- Contact navigation and “お問い合わせフォーム” route to `/contact/`.
- The desktop upward control targets `/#header`.

These destinations are present in the rendered DOM. Successful activation, destination-page rendering, smooth scrolling, and submission behavior were not tested.

**Recommended adaptation:** retain brief color and opacity feedback, use optional subtle entrance motion, and keep content visible without JavaScript. If adding service reveals, the measured 1s desktop / 0.8s mobile durations and desktop 150ms stagger are valid references; the movement distance remains a new implementation choice.

## Surfaces

| Surface | Appearance | Structural purpose |
| --- | --- | --- |
| Opening hero | Full-screen muted photography, white content, indigo perimeter | Establishes place, work, and identity |
| Introduction | Light canvas with spacious text placement | Provides institutional context |
| Service region | White upper area merging into pale gray, fine central divider | Connects the two services without enclosing them in cards |
| Blog region | `#f1f1f4` with separate white cards | Groups editorial updates |
| Contact region | Strong indigo photographic field | Creates a clear final invitation |
| Contact inset | Flat white rectangle | Makes explanation and action readable |
| Contact action | Flat `#111111` rectangle | Strong local action within the white panel |
| Footer | White with blue identity and restrained secondary marks | Returns to a calm navigational finish |

Surface separation depends on color fields, spacing, and rules. No general shadow-based elevation system is visible in the supplied screenshots.

## Imagery

Photography is specific to surveying, technical documentation, and the urban environment. The service images place field practice and plan work side by side. The contact background shows a worker from behind with equipment, subordinated by a strong indigo wash. These choices communicate work through observed actions rather than abstract business symbolism.

Use natural photographic texture, work clothing, technical tools, infrastructure, and real location context. Preserve rectangular crops and let the photos carry visual complexity. Avoid applying the contact section’s heavy blue wash to every image: the service photographs retain a much more natural appearance.

The hero requires a crop that leaves room for lower-left text. Its current desktop frame is broad and environmental; the mobile media state is not sufficiently complete to infer an intended crop or focal point.

### Observed Asset References

Exact image URLs and filenames were not included in the supplied evidence. The following identifies assets by visible role, not by invented paths.

| Asset | Current evidence | Implementation guidance |
| --- | --- | --- |
| White AZUMA lockup | Desktop and mobile header screenshots | Use the authorized graphic, including its accompanying identity text. |
| Indigo AZUMA lockup | Desktop and mobile footer screenshots | Preserve the lockup proportions; do not rebuild it with a generic font. |
| Hero photography | Desktop bridge/urban scene with overlapping photographic forms; partial mobile photographic area | Obtain the actual media before deciding cropping or sequencing. |
| Surveying service image | Worker and equipment beside roadway infrastructure | Maintain the measured `4:3` frame. |
| Investigation service image | Hands drawing or annotating a technical plan | Maintain the measured `4:3` frame. |
| Contact photograph | Worker and equipment beneath a strong blue wash | Use a separate overlay layer with adjustable opacity. |
| Blog thumbnails | Media regions exist in DOM; image subjects not visible in supplied screenshots | Preserve the inferred square media allocation; do not invent subject descriptions. |
| BE KOBE mark | Visible gray footer graphic with an external link | Use only when appropriate to the new site’s actual relationship and permissions. |

## Layout & Responsive Behavior

### Page Sequence and Vertical Extent

The desktop document measures approximately `4756px`; mobile measures approximately `5684px`. The same primary sections remain in the same order, while columns become stacks and secondary identity/navigation content changes position.

| Section | Desktop start / height | Mobile start / height |
| --- | --- | --- |
| Hero/header | `0 / 1000px` | `0 / 844px` |
| Introduction | `1000 / 792.25px` | `844 / 770.75px` |
| Service | `1922.25 / 981.94px` | `1689.75 / 1377.25px` |
| Blog | `2904.19 / 891.88px` | `3067 / 1593.58px` |
| Contact | `3796.06 / 630.39px` | `4660.58 / 461.19px` |
| Footer | `4426.45 / 330.02px` | `5121.77 / 562.39px` |

The intervals between the introduction’s recorded end and Service’s start are approximately `130px` desktop and `75px` mobile. Do not assume that every gap belongs to the preceding section’s padding.

### Desktop Composition

- Header navigation uses a square-cell rhythm across the upper right.
- Hero text begins at 10% of viewport width, independently of the `80px` identity inset.
- Services use two equal half-page containers with much narrower inner content.
- Blog cards occupy an approximately `84%`-wide group with three columns.
- Contact uses a centered fixed-looking panel within a full-width background band.
- Footer navigation, identity, external mark, and copyright occupy distinct horizontal positions.

### Mobile Reflow

- The full primary navigation disappears from the closed header capture, and a menu icon appears.
- Hero text changes from two English lines to three; the large desktop right-side identity rail is not visible.
- Introduction and service copy use `40px` side margins.
- Services become a single column, followed by three stacked blog cards.
- The contact panel uses `30px` outer margins and another `30px` inner inset.
- Footer padding increases to `50px` at the sides relative to the main content’s `40px`, creating its own narrower alignment.
- Contact becomes a filled footer button, while the other footer links remain plain text.

Only two viewport widths were measured. The exact breakpoint is unknown. The Quick Start uses `900px` as a recommended switch point and should be tested at intermediate widths.

The mobile custom property `--vh: 8.44px` equals one percent of the recorded 844px viewport. Its presence is consistent with viewport-height sizing, but its update logic is not supplied. Modern viewport units are a reasonable new implementation choice rather than a claim about the original code.

## Do’s and Don’ts

### Do

- Keep `#232584` as the main identity and linework color.
- Pair condensed English labels with spacious Japanese sans-serif text.
- Preserve the two distinct service identities and their fieldwork/documentation photographs.
- Use square media, flat surfaces, fine dividers, and opposite-corner diagonal strokes.
- Reuse the dotted-circle arrow motif across light and photographic surfaces.
- Keep the hero copy low and left, with deliberate desktop/mobile line breaks.
- Let the contact panel become a vertical stack on mobile.
- Preserve the footer’s mobile order and its prominent rectangular Contact link.
- Distinguish verified navigation from untested menu and motion behavior.

### Don’t

- Don’t reduce the corporate homepage to a single conversion panel or remove its service and editorial structure.
- Don’t turn the service articles into rounded, shadowed cards.
- Don’t replace all typography with a wide geometric sans-serif.
- Don’t make every action indigo; the central contact-form link is near black.
- Don’t treat the mobile hero’s gray capture as proof of an intentionally imageless design.
- Don’t infer large heading sizes from the `15px` styles of their wrappers.
- Don’t apply a strong blue overlay to the naturally colored service photographs.
- Don’t fabricate a slider, marquee timing, sticky header, or opened mobile-menu appearance.
- Don’t reproduce decorative microtype so small that essential information becomes unreadable.

## Recommended Implementation Additions

These are improvements for a new implementation, not verified original features:

- Implement the menu trigger as a named button with `aria-expanded` and `aria-controls`. Supply keyboard operation, Escape handling, and appropriate focus management for the chosen menu pattern.
- Give arrow links and the back-to-top control clear accessible names. Mark their decorative lines and circles as hidden from assistive technology.
- Provide visible keyboard focus that remains legible over both photographs and white surfaces.
- Use at least a `44px` practical touch target for small controls, even when the visible linework is much smaller.
- Keep photographic text contrast adequate throughout any image transition. Provide a stable image and color fallback if media fails.
- Respect reduced-motion preferences and ensure reveal effects never leave content inaccessible when scripting fails.
- Use meaningful image alternatives for service content and appropriate empty alternatives for purely decorative backgrounds.
- Consider larger mobile paragraph and copyright text for a new audience, then allow the layout to grow naturally. The original’s small values are reference measurements, not accessibility targets.
- Use `aria-current='page'` for the current navigation item and `time` elements for article dates.

## Agent Prompt Guide

### Quick Color Reference

- Identity, detail links, dates, and fine rules: `#232584`.
- Main text and central inquiry action: `#111111`.
- Blog field and visually matching service field: `#f1f1f4`.
- Cards, contact inset, and footer: `#ffffff`.
- Desktop current footer link: `#b3b3c9`.
- Copyright: `#999999`.
- Photographic overlays: neutral over the hero, indigo over Contact; exact opacity is unverified.

### Overall Prompt

“Create a Japanese surveying and land investigation corporate homepage inspired by AZUMA. Use indigo `#232584`, near-black text, white, and pale gray `#f1f1f4`. Pair regular condensed English labels with generously spaced Japanese sans-serif paragraphs. Open with a viewport-height documentary photograph, a white identity lockup, five square navigation cells at upper right, and a lower-left bilingual statement. Follow with an introduction, two spacious service articles with 4:3 photographs and diagonal corner strokes, three square-image blog cards, an indigo photographic contact section containing a white panel and black rectangular action, and a spacious white footer. Use thin rules and dotted-circle arrows instead of rounded cards or shadows. On mobile, stack content, retain clear side margins, and reorganize footer navigation vertically. Treat unverified motion and menu details as new design decisions.”

### Example Component Prompts

1. **Service pair:** “Build two equal desktop service regions divided by a 1px indigo vertical rule. Inside each, place a 4:3 work photograph with short diagonal marks at opposite corners, a small indigo number, a centered Japanese organization title, a tiny English subtitle, an open paragraph, and a right-aligned dotted-circle arrow link. Stack the articles at 310px wide in a 390px viewport.”
2. **Hero:** “Use a full-screen surveying or local infrastructure photograph with a restrained neutral veil. Position a regular condensed English headline low and left, with the underlined Japanese statement ‘測量で地域を支える。’ beneath it. Put a white Service arrow link lower down and a fine vertical Scroll marker at the right. Use two English lines on desktop and three on mobile.”
3. **Contact section:** “Place a white bilingual Contact heading over an indigo-washed work photograph. Below, center a square white panel with Japanese explanatory copy and a black ‘お問い合わせフォーム’ link. At 1440px, the panel is about 1000px wide and the action about 351 by 90px. At 390px, use a 330px panel with stacked 270px-wide content.”
4. **Footer:** “Create a white corporate footer with fine dotted navigation separators, an indigo identity lockup, a secondary gray mark, and restrained copyright. On mobile, arrange navigation vertically at a 50px left inset, make Contact a 230 by 62px indigo rectangle, and place the secondary mark before the identity lockup.”
5. **Arrow link:** “Draw a thin horizontal indigo shaft with a tiny angled head extending into a dotted circle. Keep the circle unfilled and around 60px wide on desktop, 46px on mobile. Place the text label to the left with ample space. Reverse the same motif to white over photography.”

## Quick Start

### CSS Custom Properties

This is a usable adaptation of the observed visual system, not extracted source code. It keeps a conventional root size, uses measured text values where available, and uses estimated display sizes. The `900px` breakpoint, overlay opacities, hover result, and optional reveal distance are recommendations.

Provide the actual licensed fonts and approved logo/photography assets separately. The custom image properties deliberately default to `none`; no original asset paths were supplied. Use a real image element for each service/blog image, and set `--hero-photo` and `--contact-photo` to approved background images. Menu activation and any media sequencing require separate implementation.

```css
:root {
  /* Measured palette, exposed through new semantic aliases. */
  --color-brand: #232584;
  --color-ink: #111111;
  --color-soft: #f1f1f4;
  --color-white: #ffffff;
  --color-brand-muted: #b3b3c9;
  --color-muted: #999999;

  /* Measured family declarations; load the fonts separately. */
  --font-ja: YakuHanJP_Noto, 'Noto Sans JP', sans-serif;
  --font-en: 'Roboto Condensed', sans-serif;
  --text-body: 15px;
  --leading-copy: 2.3;
  --tracking-copy: 1.2px;

  /* Display sizes are visual adaptations. */
  --text-hero: 60px;
  --text-section: 40px;
  --text-service: 28px;
  --section-heading-height: 69.4px;

  --rule: 1px;
  --radius-panel: 0;
  --circle-size: 60px;
  --arrow-width: 88px;
  --arrow-shaft: 60px;
  --nav-cell: clamp(100px, 11.111vw, 160px);
  --service-photo-width: min(29.2vw, 420.5px);
  --service-heading-gap: 105px;

  /* Recommended overlays, not measured original values. */
  --hero-photo: none;
  --contact-photo: none;
  --hero-veil: rgb(17 17 17 / 32%);
  --contact-veil: rgb(35 37 132 / 87%);
  --motion-color: 300ms ease;
}

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

.azuma-site {
  color: var(--color-ink);
  background: var(--color-white);
  font-family: var(--font-ja);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 2;
  letter-spacing: var(--tracking-copy);
}

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

.azuma-site a { color: inherit; }

.azuma-site :focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 5px;
}

/* Opening composition. Media and copy are separate layers. */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 740px;
  height: 100vh;
  height: 100svh;
  color: var(--color-white);
  background: var(--color-brand);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 4px solid var(--color-brand);
  pointer-events: none;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--hero-veil), var(--hero-veil)),
    var(--hero-photo);
  background-size: cover;
  background-position: center;
}

.header-brand {
  position: absolute;
  top: 75px;
  left: 80px;
  width: 320px;
  margin: 0;
}

.header-brand img { width: 100%; }

.top-nav {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
}

.top-nav a {
  display: grid;
  place-items: center;
  width: var(--nav-cell);
  height: var(--nav-cell);
  border-left: 1px dotted rgb(255 255 255 / 25%);
  border-bottom: 1px dotted rgb(255 255 255 / 25%);
  font: 400 16px / 1 var(--font-en);
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background-color var(--motion-color);
}

.top-nav .contact-link { background: var(--color-brand); }
.top-nav [aria-current='page'] { text-decoration: underline; }

.menu-toggle { display: none; }

.hero-copy {
  position: absolute;
  top: 51.7%;
  left: 10%;
  margin: 0;
}

.hero-en {
  display: block;
  font: 400 var(--text-hero) / 1.2 var(--font-en);
  letter-spacing: 0;
}

.hero-en > span { display: block; }
.mobile-break { display: none; }

.hero-ja {
  display: inline-block;
  margin-top: 24px;
  font-size: 26px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.hero-service {
  position: absolute;
  top: 80.5%;
  left: 10%;
}

.hero .arrow-link {
  gap: 30px;
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 17px;
}

.hero-rail {
  position: absolute;
  top: var(--nav-cell);
  right: 0;
  bottom: 0;
  width: var(--nav-cell);
  border-left: 1px dotted rgb(255 255 255 / 25%);
  pointer-events: none;
}

.scroll-marker {
  position: absolute;
  right: 80px;
  bottom: 69px;
  width: 1px;
  height: 90px;
  background: var(--color-brand);
}

.scroll-marker span {
  position: absolute;
  bottom: calc(100% + 28px);
  left: -4px;
  writing-mode: vertical-rl;
  font: 400 10px / 1 var(--font-en);
  letter-spacing: 0.05em;
}

/* Bilingual heading; child sizes are adaptation values. */
.section-heading {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 7px;
  min-height: var(--section-heading-height);
  margin: 0;
  text-align: center;
  font-weight: 400;
}

.section-heading > span {
  color: var(--color-brand);
  font: 400 var(--text-section) / 1.2 var(--font-en);
  letter-spacing: 0.02em;
}

.section-heading > small {
  font-size: 12px;
  line-height: 1.2;
}

/* Shared dotted-circle arrow; the inner span draws its head. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  min-height: var(--circle-size);
  color: var(--color-brand);
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.arrow-icon {
  position: relative;
  flex: 0 0 var(--arrow-width);
  width: var(--arrow-width);
  height: var(--circle-size);
}

.arrow-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--arrow-shaft);
  border-top: 1px solid currentColor;
}

.arrow-icon::after {
  content: '';
  position: absolute;
  inset: 0 0 auto auto;
  width: var(--circle-size);
  height: var(--circle-size);
  border: 1px dotted currentColor;
  border-radius: 50%;
}

.arrow-icon > span {
  position: absolute;
  top: calc(50% - 3px);
  left: calc(var(--arrow-shaft) - 6px);
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.more-row { text-align: right; }

/* Two service articles without enclosing card surfaces. */
.services {
  position: relative;
  isolation: isolate;
  padding-bottom: 105px;
}

.services::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: calc(
    var(--section-heading-height) +
    var(--service-heading-gap) +
    var(--service-photo-width) * 0.375
  ) 0 0;
  background: var(--color-soft);
}

.service-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: min(20vw, 288px);
  width: min(78.4%, 1129px);
  margin: var(--service-heading-gap) auto 0;
}

.service-grid::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 50%;
  width: 1px;
  background: var(--color-brand);
}

.service-photo {
  position: relative;
  display: block;
  margin: 0;
}

.service-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.service-photo::before,
.service-photo::after {
  content: '';
  position: absolute;
  z-index: 1;
  width: 60px;
  height: 1px;
  background: var(--color-brand);
  transform: rotate(-45deg);
  pointer-events: none;
}

.service-photo::before { top: 15px; left: -15px; }
.service-photo::after { bottom: 15px; right: -15px; }

.service-heading {
  position: relative;
  margin: 50px 0 0;
  text-align: center;
  font-size: var(--text-service);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.service-number {
  display: block;
  color: var(--color-brand);
  font: 400 13px / 1 var(--font-en);
  text-align: left;
}

.service-subtitle {
  display: block;
  margin-top: 6px;
  color: var(--color-brand);
  font: 400 11px / 1.4 var(--font-en);
  letter-spacing: 0.03em;
}

.service-copy {
  margin: 30px 20px 0;
  line-height: var(--leading-copy);
}

.service-item .more-row { margin-top: 28px; }

/* Blog anatomy follows the recorded wrappers. */
.blog-section {
  padding-bottom: 135px;
  background: var(--color-soft);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4.5%;
  width: 84%;
  margin: 95px auto 0;
}

.blog-card {
  display: block;
  min-width: 0;
  background: var(--color-white);
  text-decoration: none;
}

.blog-media { padding: 5px 5px 0; }
.blog-media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.blog-info { padding: 36px 40px 40px; }

.blog-title {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
}

.blog-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 18px;
}

.blog-meta time {
  color: var(--color-brand);
  font: 400 13px / 1.2 var(--font-en);
  letter-spacing: 0.04em;
}

.blog-section > .more-row { width: 84%; margin: 30px auto 0; }

/* The contact panel uses the measured desktop column widths. */
.contact-section {
  padding: 115px 20px 120px;
  background-color: var(--color-brand);
  background-image:
    linear-gradient(var(--contact-veil), var(--contact-veil)),
    var(--contact-photo);
  background-size: cover;
  background-position: center;
}

.contact-section .section-heading,
.contact-section .section-heading > span {
  color: var(--color-white);
}

.contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  max-width: 1000px;
  margin: 70px auto 0;
  padding: 80px 120px 80px 100px;
  background: var(--color-white);
}

.contact-copy { margin: 0; font-size: 16px; line-height: 2; }

.contact-button {
  display: block;
  padding: 28px 12px;
  color: var(--color-white) !important;
  background: var(--color-ink);
  font-size: 17px;
  line-height: 2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--motion-color);
}

/* Footer order changes at the recommended breakpoint. */
.site-footer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 70px 80px 30px;
  background: var(--color-white);
}

.footer-nav {
  grid-column: 1 / -1;
  justify-self: end;
  display: flex;
}

.footer-nav a {
  padding: 20px 28px;
  color: var(--color-brand);
  font: 400 16px / 1 var(--font-en);
  letter-spacing: 0.04em;
  text-decoration: none;
}

.footer-nav a + a { border-left: 1px dotted var(--color-brand); }
.footer-nav a:last-child { padding-right: 0; }
.footer-nav [aria-current='page'] { color: var(--color-brand-muted); }
.footer-brand { grid-column: 1; width: 320px; margin-top: 34px; }
.footer-partner { grid-column: 2; justify-self: end; width: 90px; margin-top: 40px; }

.copyright {
  grid-column: 1 / -1;
  margin: 50px 0 0;
  color: var(--color-muted);
  font: 400 10px / 1.4 var(--font-en);
  letter-spacing: 0.08em;
  text-align: center;
}

/* Recommended feedback; the original hover end colors are unknown. */
@media (hover: hover) {
  .top-nav a:hover { background: var(--color-brand); }
  .contact-button:hover { background: var(--color-brand); }
  .arrow-link:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* Optional reveal: add this class only when content is in view. */
@keyframes service-enter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.service-item.is-entering { animation: service-enter 1s ease both; }
.service-item.is-entering:nth-child(2) { animation-delay: 150ms; }

@media (max-width: 900px) {
  :root {
    --text-hero: 34px;
    --text-section: 30px;
    --text-service: 22px;
    --section-heading-height: 56.2px;
    --service-heading-gap: 38px;
    --service-photo-width: calc(100vw - 80px);
    --circle-size: 46px;
    --arrow-width: 66px;
    --arrow-shaft: 44px;
  }

  .hero { min-height: 720px; }
  .hero::after { border: 0; }
  .header-brand { top: 25px; left: 25px; width: 205px; }
  .top-nav, .hero-rail { display: none; }

  .menu-toggle {
    position: absolute;
    top: 14px;
    right: 22px;
    display: grid;
    place-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
  }

  .menu-toggle span { width: 26px; height: 1px; background: currentColor; }
  .hero-copy { top: 42.7%; left: 40px; right: 30px; }
  .hero-en { line-height: 1.3; }
  .mobile-break { display: initial; }
  .hero-ja { margin-top: 28px; font-size: 18px; }
  .hero-service { left: 40px; }
  .hero .arrow-link { gap: 24px; font-size: 14px; }
  .scroll-marker { right: 30px; bottom: 30px; height: 60px; }
  .section-heading > small { font-size: 11px; }
  .arrow-link { gap: 24px; font-size: 12px; }

  .services { padding-bottom: 90px; }
  .service-grid { grid-template-columns: 1fr; gap: 65px; width: calc(100% - 80px); }
  .service-grid::before { display: none; }
  .service-heading { margin-top: 35px; }
  .service-copy { margin: 25px 0 0; font-size: 13px; line-height: 2.4; }
  .service-item.is-entering { animation-duration: 800ms; }
  .service-item.is-entering:nth-child(2) { animation-delay: 0ms; }

  .blog-section { padding: 0 40px 60px; }
  .blog-grid { grid-template-columns: 1fr; gap: 40px; width: 100%; margin-top: 38px; }
  .blog-info { padding: 22px 25px 28px; }
  .blog-title { font-size: 16px; line-height: 1.8; }
  .blog-meta { margin-top: 10px; }
  .blog-section > .more-row { width: 100%; margin-top: 50px; }

  .contact-section { padding: 65px 30px 70px; }
  .contact-panel { grid-template-columns: 1fr; gap: 25px; margin-top: 40px; padding: 30px 30px 35px; }
  .contact-copy { font-size: 12px; line-height: 2; }
  .contact-button { padding: 20px 8px; font-size: 14px; }

  .site-footer { display: flex; flex-direction: column; padding: 55px 50px 30px; }
  .footer-nav { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-nav a { padding: 8px 0; color: var(--color-ink); }
  .footer-nav a + a { border: 0; }
  .footer-nav [aria-current='page'] { color: inherit; text-decoration: underline; }
  .footer-nav .contact-link { width: min(230px, 100%); margin-top: 9px; padding: 23px 0; color: white; background: var(--color-brand); text-align: center; }
  .footer-partner { order: 2; margin-top: 25px; }
  .footer-brand { order: 3; width: 204px; margin-top: 60px; }
  .copyright { order: 4; margin-top: 30px; text-align: left; }
}

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

The optional entrance animation uses the observed durations but a recommended `16px` travel distance. It leaves ordinary content visible unless the animation class is explicitly added. The neutral hero background and the contact image remain independently replaceable; this example does not implement a slideshow.

Minimal markup for the shared arrow and contact-panel anatomy:

```html
<a class="arrow-link" href="/service/">
  <span>Service</span>
  <span class="arrow-icon" aria-hidden="true"><span></span></span>
</a>

<section class="contact-section" aria-labelledby="contact-title">
  <h2 class="section-heading" id="contact-title">
    <span>Contact</span>
    <small lang="ja">お問い合わせ</small>
  </h2>
  <div class="contact-panel">
    <p class="contact-copy" lang="ja">
      測量業務・土地家屋調査士業務についてのご依頼・ご質問はお問い合わせページからお願いいたします。
    </p>
    <a class="contact-button" href="/contact/" lang="ja">
      お問い合わせフォーム
    </a>
  </div>
</section>
```

For the desktop hero’s first line, place an optional mobile break between “Supporting” and “the Community”. Keep “through Surveying.” in a second block-level span. Supply the full descriptive identity as accessible text for the logo rather than relying on the image’s tiny embedded lettering.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This does not identify the original implementation framework. Use alongside the custom properties above.

```css
@theme inline {
  --color-azuma: var(--color-brand);
  --color-page-ink: var(--color-ink);
  --color-page-soft: var(--color-soft);
  --color-page-white: var(--color-white);
  --color-page-muted: var(--color-muted);
  --font-japanese: var(--font-ja);
  --font-condensed: var(--font-en);
  --text-hero-display: var(--text-hero);
  --text-section-display: var(--text-section);
  --text-service-display: var(--text-service);
  --spacing-mobile-content: 40px;
  --spacing-mobile-contact: 30px;
  --spacing-mobile-footer: 50px;
  --radius-flat: 0px;
}
```

## Sources & Evidence

- **Inspected original page:** [AZUMA corporate homepage](https://azuma-office.jp/). Original and final URLs are identical; the supplied browser record reports HTTP `200`.
- **Capture timestamp:** `2026-10-01T19:55:34.544Z`, equivalent to October 2, 2026 at `04:55:34.544` JST.
- **Desktop evidence:** `1440 × 1000` CSS-pixel viewport, approximately `4756.47px` document height. Current-page screenshots cover the hero, paired services, and contact/footer.
- **Mobile evidence:** `390 × 844` CSS-pixel viewport, approximately `5684.16px` document height. Current-page screenshots cover the hero and lower contact/footer.
- **Rendered evidence:** page title, text order, link destinations, selected element rectangles, computed colors, font declarations, line heights, tracking, padding, transitions, and a small custom-property inventory.
- **Capture procedure:** the supplied record describes at least five seconds of initial observation, document/image readiness checks with finite limits, layout/text stability sampling, and scrolling through intermediate positions. Perpetual animations were temporarily paused during readiness checks and resumed afterward. SharedWorkers and service workers were disabled.
- **Limitations:** no additional browsing, file access, interaction testing, or stylesheet retrieval was performed for this reference. Open-menu behavior, hover outcomes, destination pages, form behavior, exact image paths, and complete photographic motion remain unverified. The mobile hero’s mostly gray media area is recorded as a limitation rather than explained through an unsupported cause.

This reference describes the current homepage evidence only. Measured values, visual estimates, and implementation recommendations are intentionally distinguished; the CSS is a practical adaptation rather than a reconstruction of undisclosed source code.