# estie — Corporate Website Style Reference

> Monumental Japanese typography, blue architectural photography, and a clear corporate information hierarchy.

**Website / original URL:** [https://www.estie.jp/](https://www.estie.jp/)
**Final URL:** [https://www.estie.jp/](https://www.estie.jp/) — HTTP 200; no redirect recorded.
**Theme:** light, with an electric-blue business section and a pale blue-gray footer.
**Inspected:** September 17, 2026, at 04:44:59 JST; supplied retrieval timestamp: September 16, 2026, 19:44:59.856 UTC.
**Viewports:** desktop `1440 × 1000` and mobile `390 × 844` CSS pixels.
**Scope:** the current corporate homepage: persistent navigation, photographic hero, promotional links, purpose statement, business overview, news, blog, documents, case studies, recruitment banner, and footer. Visual evidence covers the desktop opening, news, and page ending, plus the mobile opening and lower footer. The remaining sections are documented from supplied rendered DOM and computed styles.

estie presents commercial real estate technology through the physical scale of buildings and the visual weight of Japanese type. Its opening combines a full-width blue photographic field with the two-line statement “産業の真価を、さらに拓く。” The second line steps to the right, creating a deliberate composition rather than a conventional centered paragraph. The first screen emphasizes identity and purpose; navigation and a row of promotional graphics provide the immediate routes onward.

The page then becomes a substantial corporate content hub. A centered 1,000px desktop column organizes the purpose statement, business explanation, news, editorial content, and customer stories. White sections, fine news dividers, and mostly unboxed cards keep the dense information orderly. Electric blue marks the business section, while red circles and a red contact pill identify actions. Recruitment closes the main content with a human photograph before a comprehensive sitemap footer.

## How to Read This Reference

- **Measured** means a value appears in the supplied computed styles or element rectangles. Measurements describe the recorded state, not every possible viewport or interaction state.
- **Calculated** means a value is derived from recorded coordinates, dimensions, or font sizes. It is not necessarily an original CSS declaration.
- **Estimated** means a visual approximation from a supplied current-page screenshot. Header translucency, arrow-circle color, and photographic overlays fall into this category.
- **Recommended** means implementation guidance for a new build. The Quick Start contains explicitly identified adaptations, including breakpoints and accessible interaction treatments.
- Token names beginning with `--ref-` are new descriptive aliases. Original variable names are identified separately where relevant.
- The supplied element list does not expose every image, pseudo-element, wrapper, or visibility rule. A recorded link rectangle does not prove that its submenu was visible.
- No additional browsing, asset retrieval, menu activation, or hover testing was performed for this reference.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Role and evidence |
| --- | --- | --- | --- |
| Main Ink | `#222222` | `--ref-ink` | Measured body, headline, navigation, and card-title color |
| White | `#ffffff` | `--ref-white` | Measured page background; measured text color in the business section and recruitment headline |
| Electric Blue | `#194fff` | `--ref-blue` | Measured business-section background; also present in source variables including `--mantine-color-anchor` |
| Cyan Label | `#19bbff` | `--ref-cyan` | Measured news-category fill; visually related to the lightest layer of the brand mark |
| Contact Red | `#e73c4a` | `--ref-action` | Measured footer and mobile-navigation contact-button background |
| Footer Mist | `#f0f5fa` | `--ref-footer` | Measured footer background at both viewports |
| Date Gray | `#626a73` | `--ref-date` | Measured news-date color |
| Supporting Gray | `#72777d` | `--ref-muted` | Measured blog dates, case-study descriptions, and certification caption; source `--color-weak-text` |
| Fine Divider | approximately `#d5dce5` | `--ref-rule` | Estimated news-divider appearance; the border color itself was not included in the element evidence |

The arrow circles appear slightly brighter than the computed contact-button red, approximately `#ee3548` in the screenshots. Their own computed fill was not supplied. Reusing `#e73c4a` for both is a practical approximation, not a measured assertion that the fills are identical.

A secondary blue, `#1985ff`, exists as source `--mantine-color-2nd-blue-text`. It is visually consistent with the middle blue layer of the logo, but the actual logo asset fills were not inspected.

### Color Roles

Use blue at architectural scale: the brand mark, photographic atmosphere, promotional artwork, and the full business-section background. Use cyan for small category stamps. Reserve red for directional actions and contact access. Main reading surfaces stay white, while the footer receives a subtle cool tint.

The supplied stylesheet exposes many additional palette, radius, and shadow variables. Their presence does not establish visible usage on this homepage. In particular, the footer computes to `#f0f5fa`, not the separately declared gray palette value `#eff4fa`. Match the element that is actually rendered.

No theme selector or alternate color mode was evidenced.

## Tokens — Typography

### Japanese Display Type

- **Measured family:** `mfw-pgothicmb101pr6n-bold, sans-serif`.
- **Measured weight:** `700`.
- **Roles:** hero, purpose statement, section headings, recruitment headline, and directional action labels.
- **Character:** dense, emphatic Japanese Gothic forms with substantial visual mass. Large headlines remain dark and direct rather than becoming outlined or decorative.
- **Important detail:** the purpose paragraph also uses this bold face. Its large size and generous leading make it part of the brand statement, rather than ordinary body copy.

### Navigation and Editorial Titles

- **Measured family:** `mfw-pgothicmb101pr6n-debold, sans-serif`.
- **Measured weight:** `600`.
- **Roles:** desktop navigation links, news titles, category labels, blog titles, resource titles, and case-study names.
- **Source alias:** `--font-ja-demi` points to this family.

### Body Text and Numerals

- **Measured body stack:** `UDNumber, mfw-pgothicmb101pr6n-medium, sans-serif, sans-serif`.
- **Measured body base:** `16px / 22.4px`, weight `400`.
- **Roles:** dates, supporting descriptions, footer utilities, and parts of the business explanation.
- `UDNumber` appears first in the declared stack. The evidence does not expose its character coverage or font-file loading details.

A separate generic `--text-family` variable is available, but it is not the measured homepage body family. Likewise, the HTML element's Times declaration does not describe the visible page typography.

### English Business Heading

“Business” uses the measured family `TTNormsProBold` with computed weight `400`. The face name itself identifies a bold face; changing the numeric weight to `700` is not necessary to reproduce that declaration.

These are observed CSS family identifiers. No font files or licensing details were supplied. A new implementation must provide authorized font assets or accept differences in width, wrapping, and visual weight when using fallbacks.

### Type Scale

| Role | Desktop size / line height | Mobile size / line height | Weight and details |
| --- | --- | --- | --- |
| Hero headline | `96px / 115.2px` | `34.4651px / 41.3581px` | Bold `700`; normal tracking |
| Purpose headline | `72px / 99px` | `36px / 48px` | Bold `700`; mobile tracking `-1.08px`, equivalent to `-0.03em` |
| Purpose paragraph | `24px / 52px` | `18px / 32px` | Bold `700` |
| Business heading | `82px / 69.7px` | `45px / 63px` | `TTNormsProBold`, computed `400`; mobile tracking `1.8px` or `0.04em` |
| Business paragraph | `16px / 30.2222px` | `15px / 26px` | Medium stack, weight `500` |
| Section heading | `48px / normal` | `36px / normal` | Bold `700`; measured boxes are `96px` and `72px` tall |
| News title | `16px / 22.4px` | `15px / 24px` | Demi `600` |
| News date | `14px / 19.6px` | `12px / 16.8px` | Regular `400` |
| News category | `11px / 15.4px` | `9px / 12.6px` | Demi `600`, white |
| Featured blog title | `30px / 44px` | `15px / 24px` | Demi `600` |
| Standard card title | `20px / 28px` | `15px / 24px` | Demi `600` |
| Blog date / case description | `12px / 20px` | `12px / 20px` | Regular `400`, supporting gray |
| Directional action label | `18px / 25.2px` | `14px / 19.6px` | Bold `700` |
| Recruitment headline | `64px / 80px` | `35px / 43.75px` | Bold `700`, white |
| Footer child link | `13px / 32.5px` | `14px / 35px` | Medium stack, weight `500` |
| Footer contact label | `14px / 28px` | `18px / 36px` | Weight `600` |
| Certification caption | `10px / 14px` | `10px / 14px` | Regular `400` |

Desktop primary navigation uses `16px / 22.4px`, weight `600`. The mobile menu's recorded child-link styles use `14px / 44.5px`, but its open state was not visually inspected.

Most tracking is normal. Avoid adding broad letter spacing to Japanese headlines. The mobile purpose heading tightens slightly, while the English Business heading is the specific measured exception that opens up.

## Tokens — Spacing & Shapes

The source uses a conventional `16px` root. Its visible spacing is not reducible to a single strict modular scale: 20px, 30px, 50px, 64px, and 80px all serve distinct roles.

### Spacing Scale

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Main content side clearance | `220px` at 1440px width | `30px` | Measured content positions |
| Header horizontal inset | `80px` | `20px` | Measured logo position; mobile header padding |
| Footer side clearance | `96px` | `32px` | Measured footer content positions |
| Promotional card separation | `50px` | `30px` | Calculated between adjacent card rectangles |
| Card image-to-text gap | `30px` | `20px` | Measured card gap and text positions |
| Card title-to-date gap | `8px` | `6px` | Calculated from text rectangles |
| Directional label-to-circle gap | `20px` | `10px` | Measured action-container gap |
| News row padding | `32px 30px` | `16px 0` | Measured |
| Standard content-section top padding | `80px` | `64px` | Measured news, blog, documents, and cases |
| News list-to-more-link gap | approximately `50px` | approximately `20px` | Calculated |
| Business vertical padding | `147px 0 100px` | `81px 0 40px` | Measured |

Do not confuse the promotional anchors' internal `gap` values with the space between separate promotional cards. Their adjacent rectangles establish a 50px desktop separation and a 30px mobile separation.

### Border Radius

| Element | Value | Status |
| --- | --- | --- |
| News category label | `2px` | Measured |
| Contact pill | `999px` | Measured |
| Directional arrow disk | Circle | Visually observed; implement with `50%` |
| News and content-card anchor boxes | `0` | Measured |
| Promotional artwork corners | Approximately `2–3px` | Visual estimate; image-element radius not supplied |

Keep broad surfaces flat. Rounded geometry is concentrated in actions and tiny category stamps, rather than applied to every content block.

### Layout Measurements

| Element | Desktop | Mobile |
| --- | --- | --- |
| Document height | Approximately `7081px` | Approximately `8012px` |
| Core content width | `1000px` | `330px` |
| Visible header band | Approximately `140px` high | Measured `64px` high |
| Header logo link | `126 × 36px`, at `(80, 52)` | `98 × 28px`, at `(20, 18)` |
| Hero photographic field | Approximately `800px` high | Approximately `422.5px` high |
| Hero heading box | `891.25 × 230.375px` | Approximately `319.98 × 82.72px` |
| Promotional anchor | `300 × 158px` | Approximately `299.30 × 157.63px` |
| Directional action height | `56px` | `40px` |
| Recruitment section | `1440 × 500px` | `390 × 181.39px` |
| Footer | Approximately `470.94px` high | Approximately `1383.75px` high |
| Footer contact pill | `200 × 56px` | `326 × 64px` |

The hero-field heights are visual estimates supported by the opening captures, not measured hero-wrapper styles. The mobile value should not be generalized into a verified viewport-height formula.

## Components

### Persistent Header

**Role:** maintain brand identity and access to the site's main information groups.

The desktop header places the horizontal estie mark on the left and a compact navigation sequence on the right. Visible labels include “私たちについて”, “事業内容”, “お知らせ”, “採用情報”, “お問い合わせ”, and “お役立ち情報”. Small downward chevrons accompany grouped destinations. A thin vertical divider separates the final resource group from the preceding contact link.

At the opening, the header shares the photographic background. In the scrolled captures it remains at the top over a translucent light band, with blurred underlying shapes visible through it. This supports a persistent-header interpretation; the exact positioning property, opacity, and blur radius were not supplied.

On mobile, the full navigation is replaced by the logo and a three-line menu symbol. The measured button is `40 × 40px`, positioned at `(330, 12)` inside a `64px` header. Its visible strokes occupy less space than its button box.

The DOM contains grouped submenu links at both sizes. Their presence and coordinates are not proof of an opened dropdown. Menu opening, keyboard behavior, and dismissal were not exercised.

### Photographic Hero

**Role:** establish the company's purpose through scale, industry context, and recognizable typography.

The image fills the viewport width and sits behind the header. The desktop capture shows glass towers viewed from below, a bright sun reflection, and generous blue sky. The mobile capture shows a commercial logistics setting with trucks and industrial buildings. Both leave a relatively bright blue region behind the headline.

The headline is real `H1` text, not lettering flattened into the background asset. It contains two deliberately composed lines:

- “産業の真価を、”
- “さらに拓く。”

The second line steps right. The heading's measured left padding is `57.6px` on desktop and `20.6791px` on mobile: `0.6em` in both cases. Its recorded box is vertically centered around `y = 400px` on desktop and `y = 211.25px` on mobile.

Preserve the two-line hierarchy and large areas of sky. No separate hero action button is visible in the supplied opening captures.

Different scenes across the two captures do not establish whether the source is a video, a timed image sequence, or responsive image selection.

### Promotional Image Strip

**Role:** surface a small number of current announcements and resources immediately after the hero.

Three image links sit in the desktop content column at `x = 220`, `570`, and `920px`. Each is `300 × 158px`, producing an approximately `1.899:1` aspect ratio. The first promotes useful documents with a cyan field and a stack of books; the second uses a saturated blue graphic about corporate real estate; the third presents a partnership announcement on white.

These are graphic banners with their own embedded typography. They do not need an additional card border, caption panel, or repeated action button.

On mobile the first card remains almost 300px wide. It starts at `x = 30px`, while the second starts at approximately `359.3px`, intentionally showing part of the next item. The layout is horizontally extended rather than stacked. Native horizontal overflow is a sensible implementation, but dragging, snapping, autoplay, and navigation controls were not verified.

Recorded destinations include `/products/docs/` and two external announcement URLs. No image asset URLs were included.

### Purpose Statement

**Role:** explain the business ambition in a strong editorial voice.

The heading occupies three lines, beginning with “世界最大級の” and ending with “アップデートする”. At desktop it uses `72px / 99px`; mobile reduces it to `36px / 48px` while retaining the three-line structure.

The accompanying paragraph is unusually assertive: `24px / 52px`, bold, on desktop. Its recorded width is about `780.6px`. A right-aligned “パーパスを詳しく” link occupies the remaining portion of the content row near the paragraph's lower edge. On mobile, the paragraph becomes `18px / 32px` and the action moves beneath it, aligned to the right.

The supplied extraction includes two isolated `0` text nodes with large offscreen rectangles in this section. Their visual purpose is not established. Do not turn them into invented statistics, counters, or decorative content.

### Business Section

**Role:** introduce the service portfolio and its underlying data foundation.

This is a full-width `#194fff` section with white text and a left-aligned English “Business” heading inside the 1,000px content column. A Japanese explanation follows, then a large central content region, and finally a right-aligned “事業内容を詳しく” action linking to `/products/`.

The section measures approximately `1076.23px` high on desktop and `544px` on mobile. Its typography and padding are directly measured. The central visual content is not shown clearly in the supplied screenshots and no asset or structural evidence identifies it. Preserve its role as a business presentation area, but do not invent a product diagram, illustration, or animation and describe it as observed.

### Directional Action Link

**Role:** repeat a consistent route to deeper information.

A bold text label sits beside a red circle containing a thin white right arrow. The entire group forms one link. Desktop groups use a `20px` gap and a `56px` circle-sized height; mobile groups use a `10px` gap and a `40px` height.

The news “もっと見る” link measures `166 × 56px` on desktop and `120 × 40px` on mobile. Other labels naturally produce different total widths. Keep the disk size constant within each viewport treatment rather than forcing every action into the same rectangular width.

On blue or photographic backgrounds, the label becomes white. The circle remains the visual endpoint. Do not implement the circle as a separately focusable control inside the link.

### News List

**Role:** provide a compact, scannable record of recent activity.

A centered “お知らせ” heading introduces four full-width linked rows. Fine horizontal dividers separate them. Each desktop row contains a date, cyan category stamp, and demi-weight headline.

Within the 1,000px row:

- Left and right padding are `30px`.
- The date occupies a measured `94px` width.
- A `20px` gap precedes an `80 × 22px` badge.
- A further `30px` separates the badge from the headline.
- The headline has up to `716px` available.

Rows grow with their text. The first sampled headline wraps to two lines, producing a row about `108.78px` high; the other three are about `86.39px` before the separating interval.

On mobile, date and category form a first line, followed by the headline across the full `330px` width. The metadata-to-title separation is approximately `6px`. Badges reduce to approximately `62 × 17px`, while titles use `15px / 24px`. This is a structural reflow, not just a scaled-down desktop row.

The whole row is an anchor. Some observed news destinations are external publishers, so destination behavior should be derived from the actual link data rather than assuming every item opens an internal article.

### Blog Feature and Supporting Cards

**Role:** combine an editorial lead story with a small set of additional articles.

Desktop gives the first article a horizontal layout: an inferred `480 × 252.8px` media region on the left, a `50px` gap, and a `470px` text column on the right. Its title uses `30px / 44px`, followed by a small gray date.

Three supporting cards follow at the same `300px` widths and `50px` separations as the promotional strip. Each places a landscape media region above a `20px / 28px` title and a `12px / 20px` date. There is no measured enclosing fill, rounded panel, or elevation treatment on the anchor.

Mobile turns all four entries into a single vertical sequence. Each is `330px` wide; the media geometry inferred from the rectangles is approximately `330 × 173.8px`. Both featured and supporting titles use `15px / 24px`. The media-to-text gap is `20px`, and consecutive cards are separated by about `40px`.

### Documents and Case Studies

**Role:** expose reusable research material and evidence of customer adoption.

Both sections use centered Japanese headings and three desktop columns. The documents section contains report or resource links with titles. Case-study links add an organization name and a descriptive paragraph below the media region.

Desktop card titles are `20px / 28px`. Descriptions are `12px / 20px` in supporting gray, with heights that follow the text rather than a universal card height. At mobile size, cards stack at `330px` wide and titles become `15px / 24px`; descriptions retain their measured `12px / 20px` treatment.

The supplied text includes cases for 株式会社鹿児島銀行, コロンビア・ワークス, and 株式会社KJRMホールディングス. The associated imagery was not supplied in a visible capture, so its photographic content should not be inferred from those names.

### Recruitment Banner

**Role:** end the main content with an invitation to work at the company.

A full-width workplace photograph shows a woman writing on a board, with her face toward the right side. A cool, subdued image treatment supports a white two-line headline on the left: “次の100年を / 変える仕事を共に”. The “採用情報” action sits to the right on desktop.

The measured desktop banner is `500px` high. Only part of that height is unobscured in the ending screenshot because the persistent header overlaps the upper area. Do not mistake the visible crop for a shorter source section.

On mobile the section measures approximately `181.39px` high. The headline uses `35px / 43.75px`, and the action appears below it at the right. The entire banner is one anchor to `/careers/`; its heading and arrow label are parts of that same link.

### Footer Sitemap and Contact Area

**Role:** offer complete navigation, contact access, related initiatives, and company information.

The desktop footer uses `#f0f5fa` with a broad layout extending beyond the core content column. A large stacked estie mark occupies the left; five navigation groups sit across the middle; the right contains a `200 × 56px` red contact pill, a blog link, and X, Facebook, and YouTube icons.

Lower content includes certification marks and the caption `ISO/IEC 27001:2022／JIS Q 27001:2023`, related initiatives, privacy and security links, and copyright. Social icons retain their recognizable platform colors rather than being uniformly recolored blue.

Mobile reorganizes the footer into a long vertical structure with `32px` side insets. Group headings become larger than their indented child links. The contact pill expands to `326 × 64px`; blog, social, related-site, legal, copyright, and certification content follow in that order visually.

The lower mobile screenshot depicts this page footer, not an opened navigation overlay. The matching footer text and document coordinates support that identification. The header remains visible above the scrolled page.

## Tokens — Motion & Interaction

| Treatment | Evidence | What can be concluded |
| --- | --- | --- |
| Logo, news, promotional, and many editorial links | `opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1)` | An opacity transition is declared; the triggering state and final opacity were not supplied |
| Mobile menu button | `background-position-y 0.4s cubic-bezier(0.83, 0, 0.17, 1), filter 0.4s cubic-bezier(0.83, 0, 0.17, 1)` | Those properties have a declared transition; an opening sequence or icon transformation was not observed |
| Persistent header | Visible at the top of initial and scrolled captures | Persistent presentation is evidenced; the exact scroll trigger and translucency transition are unknown |
| Promotional strip | Later cards extend beyond the mobile viewport | Horizontal continuation is evidenced; swipe, snap, autoplay, and arrow controls are unverified |
| Hero media | Different photographic scenes in the desktop and mobile captures | Media variation is evidenced; video, timing, sequence, and responsive selection remain unverified |
| Other sampled elements | Frequently `transition: all` and `animation: none` | This does not establish a nonzero animation duration or a particular reveal effect |

The browser collection waited for finite motion and sampled layout stability, temporarily pausing perpetual animations during readiness checks. That procedure improves capture stability but does not provide a motion specification or prove that all delayed content appeared.

Some offscreen desktop card rectangles extend roughly 100px beyond their section bounds. Those values may reflect transforms or another collection-state effect; no supplied intermediate screenshot resolves the cause. Do not reproduce those apparent overlaps as intended layout or invent scroll-reveal keyframes from them.

For a new build, a restrained opacity change using the measured 300ms easing is appropriate. Any chosen hover opacity, arrow movement, menu transition, or reduced-motion behavior must be treated as a recommendation.

## Surfaces

| Surface | Appearance | Function |
| --- | --- | --- |
| Main canvas | Solid white | Long-form corporate and editorial content |
| Hero | Full-width cool architectural photography | Brand statement and industry context |
| Scrolled header | Visually translucent light band with blurred content beneath | Persistent navigation without a heavy separator |
| Business section | Solid electric blue, white type | A strong change of pace for service information |
| News rows | White, fine gray rules | Structured reading without card containers |
| Editorial cards | Images and text directly on white | Content hierarchy through spacing and type |
| Recruitment banner | Subdued workplace photograph, white type | Human invitation near the page ending |
| Footer | Pale blue-gray | Dense secondary navigation and company information |
| Actions | Red disks and a red pill | Small, recognizable destination markers |

No general card-shadow system is visible. The stylesheet's available shadow tokens should not be imported indiscriminately. Most separation comes from section color, whitespace, image boundaries, and typography.

## Imagery

The current opening uses real commercial environments: glass office towers on desktop and a logistics setting on mobile. Cool blue dominates, with bright sky and reflective surfaces carrying the brand atmosphere. Photography provides industry specificity and scale; the interface does not rely on generic abstract software illustrations in the supplied views.

The recruitment image changes the subject from buildings to a person at work. Its crop preserves a usable text area on the left and a recognizable face on the right. Its subdued treatment must keep white text legible without making the photograph muddy.

Promotional graphics have their own individual treatments: books against cyan, a blue map-oriented announcement, and a white partnership composition. Preserve those assets' embedded typography and proportions. They should not be rebuilt as generic UI cards merely to force visual uniformity.

### Observed Asset References

No original image-file URLs were included in the evidence. The following are identifiable asset roles, not invented file paths.

| Asset role | What is visible or measured | Reuse guidance |
| --- | --- | --- |
| Horizontal brand mark | Three blue layers beside the estie wordmark | Use an authorized brand asset; preserve its proportions |
| Desktop hero media | Glass towers, blue sky, bright reflection | Maintain bright negative space behind the dark heading |
| Mobile hero media | Industrial buildings, trucks, blue sky | Use a deliberate crop or alternate asset; the source selection mechanism is unknown |
| Three promotional banners | Approximately `300:158` ratio | Preserve original graphic composition and embedded lettering |
| Blog, document, and case media | Landscape geometry inferred from DOM rectangles | Subject matter and asset paths remain unverified |
| Recruitment photograph | A woman writing on a board | Keep face placement and white-text contrast intentional |
| Footer identity and certification marks | Visible in the desktop ending and mobile certification area | Use authentic supplied assets; do not redraw certification artwork from memory |
| Social icons | X, Facebook, and YouTube | Retain recognizable forms and provide accessible link names |

Use smooth photographic rendering. Pixelated rendering, heavy grain, duotone conversion, and invented 3D decoration are not evidenced treatments here.

## Layout & Responsive Behavior

The page retains its information sequence across both viewports. The significant changes are within components, rather than a different mobile content strategy.

| Area | Desktop at 1440px | Mobile at 390px |
| --- | --- | --- |
| Main alignment | Centered 1,000px column | 330px content width with 30px side insets |
| Header | Horizontal navigation and 126px logo link | 64px bar, 98px logo link, 40px menu button |
| Hero | Approximately 800px high; 96px headline | Approximately 422.5px high; 34.47px headline |
| Promotions | Three visible 300px banners | Approximately 299.3px items continuing horizontally |
| Purpose statement | 72px heading, 24px bold explanation | 36px heading, 18px explanation; action beneath |
| News row | Date, badge, and title in one horizontal structure | Date and badge above full-width title |
| Blog | One horizontal feature plus three supporting columns | Four stacked articles with consistent title sizes |
| Documents and cases | Three columns | Single vertical lists |
| Recruitment | 500px banner with separated headline and action | Approximately 181px banner with action below headline |
| Footer | Broad multi-column layout | Long grouped sitemap and full-width contact pill |

The desktop core width and mobile gutters can be reproduced with `width: min(1000px, calc(100% - 60px))`. That is a useful implementation rule derived from the two samples, not a recovered source declaration.

The footer deliberately uses a different alignment system: 96px desktop margins and 32px mobile margins. Header insets are different again. Do not force all three regions onto a single universal container.

The measured page heights are approximately 7,081px and 8,012px. They are capture outcomes, not target CSS heights. Preserve natural content flow and allow copy, font availability, and viewport changes to affect section height.

No tablet viewport, intermediate breakpoint, landscape phone, open navigation, or keyboard-focus state was supplied. The Quick Start's breakpoint and fluid formulas are recommended interpolation between the observed endpoints.

## Do’s and Don’ts

### Do

- Preserve the two-line hero statement and its stepped horizontal composition.
- Use the measured Japanese display and demi-weight families when authorized assets are available.
- Keep the core desktop content at approximately 1,000px and mobile content at 330px for a 390px viewport.
- Give the business section a full electric-blue field with white text.
- Use red circles for directional links and a red pill for the prominent footer contact route.
- Keep news as ruled, full-row links with compact cyan category labels.
- Preserve the mobile distinction between the horizontally extended promotional strip and vertically stacked editorial cards.
- Use authentic architectural, workplace, brand, and promotional imagery.
- Maintain the complete corporate information hierarchy and footer navigation.

### Don't

- Don't reduce the homepage to a single conversion funnel and remove news, research, case studies, or recruitment.
- Don't replace the hero's industry photography with generic gradients or unsupported illustrations.
- Don't add rounded, elevated panels around every article or resource.
- Don't use every available stylesheet palette color simply because its variable exists.
- Don't assume different hero scenes prove video or an autoplay slideshow.
- Don't describe the lower mobile screenshot as an open menu.
- Don't copy unexplained offscreen offsets, apparent overlaps, or isolated `0` nodes into a reconstruction.
- Don't invent font-file URLs, media filenames, dropdown behavior, or production credits.
- Don't hardcode the full document or content-section heights to match a single capture.

## Recommended Implementation Additions

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

- Give the mobile menu button an accessible name, `aria-expanded`, and `aria-controls`. Ensure hidden menu links cannot receive focus; implement dismissal and focus handling appropriate to the chosen menu pattern.
- Provide visible keyboard focus for links and controls, with a white indicator on the blue section and a dark indicator on light surfaces.
- Preserve the observed 40px mobile icon disk if desired, while giving its enclosing link or button a minimum 44px interaction area.
- Check small-text contrast. The measured cyan badge with tiny white lettering and the 12px gray descriptions warrant review before direct reuse.
- Use meaningful accessible names for image-only promotional links and social links. Treat the arrow inside a labeled link as decorative.
- If the hero uses motion in a new build, provide a static reduced-motion alternative and avoid delaying the headline until media playback begins.
- Make all promotional items reachable by keyboard and touch if implementing horizontal overflow.
- Keep offscreen content visible by default; progressive reveal effects should not leave text displaced or inaccessible when scripts fail.
- Increase supporting-copy sizes where readability matters more than exact visual matching, and identify that choice as an intentional adaptation.

## Agent Prompt Guide

### Quick Color Reference

- Main page: `#ffffff`.
- Main type: `#222222`.
- Business section: `#194fff` with white type.
- News categories: `#19bbff` with white labels; review small-text contrast in a new build.
- Footer: `#f0f5fa`.
- Contact pill: measured `#e73c4a`.
- Arrow circles: visually brighter red; using the contact red is an approximation.
- Dates: `#626a73`; supporting editorial text: `#72777d`.
- Rules: pale cool gray, approximately `#d5dce5`.

### Overall Prompt

“Create a Japanese corporate homepage for a commercial real estate technology company, using estie's observed hierarchy as a reference. Open with full-width blue architectural photography and a large, bold, two-line Japanese purpose statement whose second line steps right. Place a compact logo-left navigation header over the image. Below it, use a 1,000px desktop content column, three landscape promotional graphics, a bold purpose statement, an electric-blue business section, ruled news rows, an editorial feature with supporting cards, document and case-study collections, a workplace recruitment photograph, and a comprehensive pale blue-gray footer. Keep cards flat and mostly unboxed. Use red circular arrows for directional links and a red contact pill. At 390px, use 30px content gutters, a compact menu header, horizontally continuing promotional banners, stacked content cards, and a vertical footer. Do not invent media timing or unseen illustrations.”

### Example Component Prompts

1. **Hero:** “Build a full-width architectural-photo hero with bright blue sky behind real Japanese heading text. Use two bold lines, ‘産業の真価を、’ and ‘さらに拓く。’, with the second line offset right. Match 96px type on the 1440px desktop reference and approximately 34.47px at 390px. Keep the logo and navigation over the image.”
2. **Promotional strip:** “Place three flat 300 × 158px promotional image links in a 1,000px desktop row with 50px gaps. At 390px, retain approximately 299px items, a 30px left inset, and 30px gaps so that the next item peeks into view. Implement accessible horizontal overflow without assuming autoplay.”
3. **News row:** “Create a white full-row link with fine gray separators, a gray date, an 80 × 22px cyan category label, and a demi-weight Japanese title. Use 32px vertical and 30px horizontal desktop padding. On mobile, put metadata above the title and use 16px vertical padding.”
4. **Directional link:** “Use a bold label followed by a red circle containing a thin white right arrow. The desktop disk is 56px with a 20px label gap; mobile uses a 40px disk and 10px gap. Make the whole group one accessible link.”
5. **Editorial collection:** “Build a flat desktop feature with 480px landscape media, a 50px gap, and a 470px text column. Follow it with three 300px cards. Collapse all entries into a 330px-wide mobile list with 15px titles, 24px line height, and 40px between cards.”
6. **Footer:** “Create a pale blue-gray corporate footer with a large brand mark, five sitemap groups, a red contact pill, blog access, social icons, related initiatives, legal links, and certification marks. At 390px, use 32px side insets and a 326 × 64px contact pill. Keep navigation groups visible in the page flow.”

## Quick Start

### CSS Custom Properties

This is an implementation scaffold, not recovered source code. It uses measured endpoint values where available. The 1,100px breakpoint, intermediate fluid sizing, hover opacity, header blur, divider color, and photographic veil are recommendations. The arrow disks reuse the measured contact red as an approximation.

Provide authorized font and image assets separately. No `@font-face` URLs or media filenames are invented below. Set the header's `data-scrolled` state in your application, and implement menu behavior separately. The unpictured purpose and business visuals require their own verified assets and content; this CSS does not attempt to reconstruct them.

```css
:root {
  /* Measured element colors */
  --ref-ink: #222222;
  --ref-white: #ffffff;
  --ref-blue: #194fff;
  --ref-cyan: #19bbff;
  --ref-action: #e73c4a;
  --ref-footer: #f0f5fa;
  --ref-date: #626a73;
  --ref-muted: #72777d;

  /* Estimated divider color */
  --ref-rule: #d5dce5;

  /* Observed family identifiers; assets must be provided separately */
  --ref-font-body: 'UDNumber', 'mfw-pgothicmb101pr6n-medium', sans-serif;
  --ref-font-demi: 'mfw-pgothicmb101pr6n-debold', sans-serif;
  --ref-font-display: 'mfw-pgothicmb101pr6n-bold', sans-serif;
  --ref-font-latin: 'TTNormsProBold', sans-serif;

  --ref-content: 1000px;
  --ref-gutter: 30px;
  --ref-header-height: 140px;
  --ref-section-space: 80px;
  --ref-circle: 56px;
  --ref-action-gap: 20px;
  --ref-card-gap: 30px;
  --ref-column-gap: 50px;
  --ref-link-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ref-ink);
  background: var(--ref-white);
  font: 400 16px/1.4 var(--ref-font-body);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

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

/* Recommended fixed positioning and scrolled-surface approximation */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--ref-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: clamp(20px, 5.5556vw, 80px);
}
.site-header[data-scrolled='true'] {
  background: rgb(255 255 255 / 82%);
  backdrop-filter: blur(12px);
}
.header-brand { display: block; width: 126px; }
.desktop-nav { display: flex; align-items: center; gap: 32px; }
.desktop-nav a,
.desktop-nav button {
  font: 600 16px/1.4 var(--ref-font-demi);
}
.menu-toggle { display: none; }

.hero {
  position: relative;
  isolation: isolate;
  min-height: 800px;
  display: grid;
  place-items: center;
}
.hero__media,
.recruit__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hero__media img,
.hero__media video,
.recruit__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__title {
  width: min(calc(100% - 70px), 891.25px);
  margin: 0;
  padding-inline-start: 0.6em;
  font: 700 96px/1.2 var(--ref-font-display);
}
.hero__line { display: block; white-space: nowrap; }
/* Recommended approximation of the stepped line composition */
.hero__line:last-child { text-align: right; }

.promo-rail {
  display: flex;
  gap: 50px;
  width: min(1000px, calc(100% - 60px));
  margin: 64px auto 77px;
}
.promo-card { flex: 0 0 300px; }
.promo-card img {
  width: 100%;
  aspect-ratio: 300 / 158;
  object-fit: cover;
  border-radius: 2px;
}

.purpose__title {
  margin: 0 0 31px;
  font: 700 72px/99px var(--ref-font-display);
}
.purpose__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}
.purpose__copy {
  margin: 0;
  font: 700 24px/52px var(--ref-font-display);
}
.business {
  margin-top: 72px;
  padding-block: 147px 100px;
  color: var(--ref-white);
  background: var(--ref-blue);
}
.business__title {
  margin: 0 0 40px;
  font: 400 82px/69.7px var(--ref-font-latin);
}
.business__copy { margin: 0; font-size: 16px; line-height: 30.2222px; }
/* Add verified business media in normal document flow. */

.content-section { padding-top: var(--ref-section-space); }
.section-title {
  margin: 0 0 32px;
  text-align: center;
  font: 700 48px/2 var(--ref-font-display);
  /* Explicit 2 reproduces the sampled boxes; source computed normal. */
}
.action-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ref-action-gap);
  font: 700 18px/1.4 var(--ref-font-display);
}
.action-link__circle {
  display: grid;
  place-items: center;
  flex: 0 0 var(--ref-circle);
  width: var(--ref-circle);
  height: var(--ref-circle);
  border-radius: 50%;
  color: var(--ref-white);
  background: var(--ref-action);
}
.action-link__circle svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.section-more { display: flex; justify-content: flex-end; margin-top: 50px; }

.news-list { border-top: 1px solid var(--ref-rule); }
.news-row {
  display: grid;
  grid-template-columns: 194px minmax(0, 1fr);
  align-items: center;
  gap: 30px;
  padding: 32px 30px;
  border-bottom: 1px solid var(--ref-rule);
}
.news-meta { display: flex; align-items: center; gap: 20px; }
.news-date {
  flex: 0 0 94px;
  color: var(--ref-date);
  font-size: 14px;
  line-height: 19.6px;
}
.news-badge {
  display: grid;
  place-items: center;
  flex: 0 0 80px;
  height: 22px;
  border-radius: 2px;
  color: var(--ref-white);
  background: var(--ref-cyan);
  font: 600 11px/15.4px var(--ref-font-demi);
}
.news-title { margin: 0; font: 600 16px/22.4px var(--ref-font-demi); }

.content-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ref-column-gap);
}
.article-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--ref-card-gap);
}
.article-card__image {
  width: 100%;
  aspect-ratio: 300 / 158;
  object-fit: cover;
}
.article-card__title { margin: 0; font: 600 20px/28px var(--ref-font-demi); }
.article-card__meta,
.article-card__description {
  margin: 8px 0 0;
  color: var(--ref-muted);
  font-size: 12px;
  line-height: 20px;
}
.article-card--featured {
  display: grid;
  grid-template-columns: 480px minmax(0, 1fr);
  align-items: center;
  gap: 50px;
  margin-bottom: 50px;
}
.article-card--featured .article-card__title { font-size: 30px; line-height: 44px; }

.recruit {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 500px;
  margin-top: 120px;
  color: var(--ref-white);
}
/* Recommended veil; original overlay values were not supplied. */
.recruit::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(28 52 90 / 30%);
}
.recruit__inner { display: flex; justify-content: space-between; align-items: end; }
.recruit__title { margin: 0; font: 700 64px/80px var(--ref-font-display); }

.site-footer {
  padding: 62px max(32px, calc((100% - 1248px) / 2)) 56px;
  background: var(--ref-footer);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(144px, 1fr) minmax(0, 580px) 200px;
  gap: clamp(32px, 6.94vw, 100px);
}
.footer-brand { width: 144px; }
.footer-nav { display: grid; grid-template-columns: repeat(5, auto); gap: 40px; }
.footer-nav h3 { margin: 0 0 16px; font: 600 14px/1.4 var(--ref-font-demi); }
.footer-nav ul { margin: 0; padding: 0; list-style: none; }
.footer-nav li { font-size: 13px; line-height: 32.5px; }
.contact-pill {
  display: block;
  padding: 14px;
  border-radius: 999px;
  color: var(--ref-white);
  background: var(--ref-action);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 28px;
}
.footer-bottom { margin-top: 80px; }

.header-brand,
.news-row,
.promo-card,
.article-card {
  transition: opacity 300ms var(--ref-link-ease);
}
/* Recommended hover endpoint; only the transition was measured. */
@media (hover: hover) {
  .header-brand:hover,
  .news-row:hover,
  .promo-card:hover,
  .article-card:hover { opacity: 0.78; }
}
:where(a, button):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 5px;
}

/* Recommended breakpoint, not recovered from the source. */
@media (max-width: 1100px) {
  :root {
    --ref-header-height: 64px;
    --ref-section-space: 64px;
    --ref-circle: 40px;
    --ref-action-gap: 10px;
    --ref-card-gap: 20px;
  }
  .site-header { padding-inline: 20px; }
  .header-brand { width: 98px; }
  .desktop-nav { display: none; }
  .menu-toggle {
    display: grid;
    place-content: center;
    gap: 6px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
  }
  .menu-toggle span { display: block; width: 24px; height: 2px; background: currentColor; }
  /* Fluid interpolation chosen to match the supplied 390px endpoint. */
  .hero { min-height: clamp(422.5px, 108.3333vw, 660px); }
  .hero__title { font-size: clamp(28px, 8.8372vw, 76px); }
  .promo-rail {
    width: 100%;
    gap: 30px;
    margin: 32px 0 34px;
    padding-inline: 30px;
    overflow-x: auto;
  }
  .promo-card { flex-basis: 299.3px; }
  .purpose__title { margin-bottom: 16px; font-size: 36px; line-height: 48px; letter-spacing: -0.03em; }
  .purpose__body { grid-template-columns: 1fr; gap: 20px; }
  .purpose__copy { font-size: 18px; line-height: 32px; }
  .purpose__body > .action-link { justify-self: end; }
  .business { padding-block: 81px 40px; }
  .business__title { margin-bottom: 6px; font-size: 45px; line-height: 63px; letter-spacing: 0.04em; }
  .business__copy { font-size: 15px; line-height: 26px; }
  .section-title { margin-bottom: 30px; font-size: 36px; }
  .action-link { min-height: 44px; font-size: 14px; }
  .section-more { margin-top: 20px; }
  .news-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .news-meta { gap: 7px; }
  .news-date { flex-basis: auto; font-size: 12px; line-height: 16.8px; }
  .news-badge { flex-basis: 62px; height: 17px; font-size: 9px; line-height: 12.6px; }
  .news-title { font-size: 15px; line-height: 24px; }
  .content-grid { grid-template-columns: 1fr; gap: 40px; }
  .article-card--featured { display: flex; align-items: stretch; gap: 20px; margin-bottom: 40px; }
  .article-card__title,
  .article-card--featured .article-card__title { font-size: 15px; line-height: 24px; }
  .article-card__meta,
  .article-card__description { margin-top: 6px; }
  .recruit { min-height: 181.39px; margin-top: 64px; padding-block: 24px; }
  .recruit__inner { display: grid; gap: 6px; }
  .recruit__title { font-size: 35px; line-height: 43.75px; }
  .recruit .action-link { justify-self: end; }
  .site-footer { padding: 40px 32px 24px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-brand { justify-self: center; }
  .footer-nav { grid-template-columns: 1fr; gap: 24px; }
  .footer-nav h3 { font-size: 18px; }
  .footer-nav ul { padding-left: 32px; }
  .footer-nav li { font-size: 14px; line-height: 35px; }
  .contact-pill { font-size: 18px; line-height: 36px; }
  .footer-bottom { margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .header-brand,
  .news-row,
  .promo-card,
  .article-card { transition: none; }
}
```

The 44px mobile action-link minimum is an accessibility recommendation. It deliberately adds a little interaction space around the observed 40px circle and can slightly increase compact banner heights.

A compatible directional-link fragment is:

```html
<a class='action-link' href='/news/'>
  <span>もっと見る</span>
  <span class='action-link__circle' aria-hidden='true'>
    <svg viewBox='0 0 24 24'>
      <path d='M2 12h19m-7-7 7 7-7 7' />
    </svg>
  </span>
</a>
```

For news rows, use one `.news-row` anchor containing `.news-meta` with a semantic `time.news-date` and `.news-badge`, followed by `.news-title`. Do not nest additional links inside that row.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-estie-ink: var(--ref-ink);
  --color-estie-blue: var(--ref-blue);
  --color-estie-cyan: var(--ref-cyan);
  --color-estie-action: var(--ref-action);
  --color-estie-footer: var(--ref-footer);
  --color-estie-date: var(--ref-date);
  --color-estie-muted: var(--ref-muted);
  --color-estie-rule: var(--ref-rule);

  --font-estie-body: var(--ref-font-body);
  --font-estie-demi: var(--ref-font-demi);
  --font-estie-display: var(--ref-font-display);
  --font-estie-latin: var(--ref-font-latin);

  --spacing-estie-gutter: var(--ref-gutter);
  --spacing-estie-section: var(--ref-section-space);
  --spacing-estie-circle: var(--ref-circle);
  --spacing-estie-card-gap: var(--ref-card-gap);

  --radius-estie-label: 2px;
  --radius-estie-pill: 999px;
}
```

## Sources & Evidence

- **Inspected original and final page:** [https://www.estie.jp/](https://www.estie.jp/). The supplied response status is HTTP 200. The original-page title identifies 株式会社estie, and the footer displays `© 2026 estie, inc.` No production credit is established by the inspected page evidence.
- **Capture time:** `2026-09-16T19:44:59.856Z`, equivalent to September 17, 2026, 04:44:59.856 JST. No separate timestamp was supplied for each individual screenshot.
- **Desktop evidence:** `1440 × 1000` viewport; approximately `7081px` document height; opening, news, and recruitment/footer screenshots, plus rendered text, link destinations, element rectangles, computed styles, and selected custom properties.
- **Mobile evidence:** `390 × 844` viewport; approximately `8012px` document height; opening and lower-footer screenshots, plus corresponding rendered DOM and computed-style evidence.
- **Observed navigation through the page:** the supplied browser procedure traversed scroll positions and waited for sampled layout and text stability. This supports the recorded scroll views but does not verify every interaction.
- **Inspection limits:** menu activation, hover endpoints, keyboard navigation, media playback, promotional-strip gestures, intermediate responsive widths, image-file URLs, and font-file loading were not supplied. Linked destination pages were not inspected for this reference.

This reference describes the current homepage through the supplied original-page artifacts. Measured values, visual estimates, and recommended implementation choices remain separate throughout; unknown imagery and motion are intentionally left unspecified.