遺品整理のエンディール｜大阪・京都・奈良の遺品整理・生前整理・買取

# ENDEAL — Style Reference

> Warm, rounded service information built around human reassurance and immediately recognizable contact choices.

**Website:** [endeal.net](https://endeal.net/)
**Original URL:** https://endeal.net/
**Final URL:** https://endeal.net/
**Response:** HTTP 200; no redirect reported.
**Theme:** light content surfaces, warm brown text, orange actions, and a darkened photographic desktop opening.
**Inspected:** September 23, 2026, 05:28 JST; supplied retrieval timestamp: September 22, 2026, 20:28:00.170 UTC.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current corporate and service homepage. Visual evidence covers the desktop opening, buyback section, and footer, plus the mobile opening and footer. Full-page text and link extracts establish the wider information architecture; sampled computed styles provide additional measurements. Linked pages and interactive states were not inspected.

ENDEAL presents a sensitive household service through rounded Japanese lettering, warm neutral surfaces, approachable staff photography, and frequent opportunities to ask for help. Deep brown replaces black as the principal text color. Orange identifies service actions, while pale yellow makes large pill buttons feel welcoming. Jade green distinguishes buyback information, vivid green identifies LINE contact, and coral pink marks broad contact sections.

The homepage is a substantial service directory and trust-building document. It includes service explanations, completed projects, price guidance, staff reassurance, customer feedback, coverage information, articles, FAQs, news, and corporate navigation. Its desktop and mobile openings use different compositions: desktop places white lettering over a full-screen consultation photograph; mobile uses a light illustrated background, cropped staff photographs, centered orange-and-brown lettering, and a prominent three-channel contact strip.

## How to Read This Reference

- **Measured** means a value supplied by the rendered DOM, computed styles, custom properties, or viewport metadata. Measurements are occasionally rounded to two decimal places for readability.
- **Visual estimate** means a proportion or detail read from one of the five current-page screenshots. These are not pixel-sampled colors or recovered CSS declarations.
- **Declared token** means a source custom property exists. Its presence alone does not prove that every suggested component uses it.
- **Recommendation** means implementation guidance for a new build, including the CSS recipes and proposed breakpoint below.
- Source font names are preserved exactly where supplied. Computed family declarations do not independently verify font downloads or the font used for every glyph.
- The supplied element samples cover only part of the long page. Later modules may have text evidence without equivalent geometry or visual evidence.

## Tokens — Colors

### Core Palette

| Name | Value | Source evidence | Reusable alias and role |
| --- | --- | --- | --- |
| Deep Brown | `#482607` | `--main-color`; computed body and content text | `--ed-ink`: primary text, headings, navigation, phone numbers |
| Action Orange | `#f76a0c` | `--orange-color`; computed estimate-button fill and section-label text | `--ed-orange`: service actions, borders, section accents |
| White | `#ffffff` | `--main-bg`; computed page, button, and panel surfaces | `--ed-white`: main canvas and contrasting cards |
| Warm Beige | `#f7ecdf` | `--beige-color`; visually consistent with the footer | `--ed-beige`: quiet corporate and footer surfaces |
| Pale Peach | `#fce9d7` | `--orange-lighten-color`; computed three-reasons section background | `--ed-peach`: large supporting section field |
| Pale Yellow | `#ffffc2` | Computed introduction and results-index button backgrounds | `--ed-pale-yellow`: friendly pill-button fill |
| Bright Yellow | `#ffff00` | `--yellow-color`; visible emphasis in the buyback panel | `--ed-yellow`: short benefit highlights |
| Buyback Jade | `#0eb88a` | `--green-color`; visually consistent with the buyback panel | `--ed-jade`: buyback panel and displayed amounts |
| Accounting Teal | `#00a99d` | `--blue-green-color`; computed second reason-link text | `--ed-teal`: accounting-related accents and visible panel edging |
| LINE Green | `#00bf23` | `--line-color`; computed LINE button backgrounds | `--ed-line`: LINE contact controls |
| Contact Coral | `#f67e7c` | `--pink-color`; computed full-width contact-section background | `--ed-coral`: repeated contact bands |
| Mobile Menu Brown | `#945b08` | Computed mobile menu-button background | `--ed-menu`: mobile menu tile |
| Link Blue | `#00a0e9` | `--hover-color`; computed project-location links | `--ed-link`: selected informational links; universal hover use is unverified |

### Supporting Colors

| Value | Evidence and interpretation |
| --- | --- |
| `#95cc4d` | Source light-green token and computed first reason-link text |
| `#fb6d6c` | Computed third reason-link text; distinct from the contact coral token |
| `#f7b1b0` | Declared `--cta-color`; do not substitute it for the measured `#f67e7c` contact band |
| `#e1e1e1` | Declared gray token, suitable as a reference for light separators; individual border assignments were not supplied |
| `#937152`, `#998675`, `#736357` | Declared supporting browns; specific footer-link assignments were not measured |
| `#2b618a`, `#ff4143` | Declared Facebook and YouTube colors, corresponding to visible social icons |
| `#fa9c16`, `#ffc600`, `#ce893d` | Declared warm accents; the logo and award artwork contain multiple gold tones rather than one verified solid fill |

Keep the three greens separate. The buyback surface, accounting accent, and LINE channel have different visual jobs. Similarly, warm beige and pale peach form distinct large-area backgrounds.

The custom-property dump also contains generic publishing-system gradients, shadows, and slider defaults. They are not evidence that the visible page uses those effects as a design system.

## Tokens — Typography

### Body Sans Serif

**Measured source stack:** `YakuHanJP, 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif`.

This stack supports explanatory copy and ordinary link containers. The desktop root is 16px; the mobile root is 14.4px. Paragraphs override the root with more generous line heights, typically around 1.8 and occasionally 2.2–2.3.

The HTML element reports Times, but the body explicitly uses the Japanese sans-serif stack. Times is not the page’s visual body typeface.

### Display and Label Families

| Computed family | Observed use | Character |
| --- | --- | --- |
| `'新丸ゴ B', sans-serif` | Large introductory statement, service names, major headings, hero CTA text, phone figures | Heavy rounded Japanese forms with a reassuring, informal tone |
| `'新丸ゴ DB', sans-serif` | Project headings, option-service English caption, contact copy, supporting explanatory labels | Rounded secondary emphasis |
| `YakuHanJP, 見出ゴMB31, sans-serif` | Section capsules, navigation labels, compact assurances, phone hours, selected explanatory text | Dense, clearly articulated label typography |

Queried elements using these display families generally report `font-weight: 400`. Their visual weight is encoded in the selected family. Do not automatically apply another bold weight to every source-family declaration.

### Measured Type Scale

Values below describe the queried elements, not every nested span or embedded graphic.

| Role | Desktop size / line height | Mobile size / line height | Additional evidence |
| --- | --- | --- | --- |
| Root/body base | 16 / 16px | 14.4 / 14.4px | Paragraphs override this tight base line height |
| Desktop geographic strapline | 11.04 / 11.04px | Not visible | 0.4416px tracking |
| Desktop navigation link | 15.64 / 15.64px | Child label size not supplied | Desktop tracking 0.3128px |
| Section capsule | 17 / 17px | 13.68 / 13.68px | Tracking 0.01em |
| Introductory display statement | 59 / 82.6px | 36.816 / 51.5424px | Tracking 0.05em |
| Introductory explanatory copy | 18 / 41.4px | 14.58 / 33.534px | Label-family declaration |
| Services section headline | 48 / 67.2px | 26.208 / 36.6912px | Tracking 0.05em |
| Results section headline | 48 / 67.2px | 29.952 / 41.9328px | Tracking 0.02em |
| Services introduction | 17 / 30.6px | 15.3 / 27.54px | Body stack |
| Primary service name | 46 / 46px | 35.19 / 35.19px | Rounded display family |
| Secondary service name | 34 / 34px | 21.6 / 21.6px | Changes layout as well as size |
| Option-service heading | 28 / 28px | 28.8 / 28.8px | Mobile is slightly larger here |
| Project heading | 28 / 39.2px | 17.1 / 23.94px | Tracking 0.05em |
| Three-reasons heading | 68 / 95.2px | 28.704 / 40.1856px | Strong component-specific reduction |
| Main contact heading | 50 / 50px | 28.6 / 28.6px | Mobile nested content occupies a taller box |
| Hero CTA label | 17 / 17px | 16.64 / 16.64px | Approximately 0.06em tracking |
| Ranking footnote | 12 / 21.6px | 9 / 16.2px | Tracking 0.05em |

The desktop header phone figure is 34.96px with 2.7968px tracking. The mobile opening contact-strip figure is 20.8px with slightly negative tracking. Larger repeated contact cards use 36px desktop and 27.56px mobile phone figures.

### Hero Lettering and Wrapper Measurements

The large `遺品整理。` treatment is visually much larger than the font size reported on its containing paragraph. That wrapper reports 16px on desktop and 8.32px on mobile. Those values must not be used as the display-lettering size.

**Visual estimates:** the main desktop glyphs occupy roughly 100–115px vertically; the mobile glyphs occupy roughly 60–70px. The supplied evidence does not establish whether every part is nested text, vector artwork, or another asset type. Preserve the visible composition and use accessible equivalent text in a new implementation.

Mobile navigation anchors similarly report an 8.32px inherited size while their visible labels are clearly larger. Their child-level font measurements were not supplied.

## Tokens — Spacing & Shapes

### Layout Measurements

| Element | Desktop measurement | Mobile measurement | Evidence |
| --- | --- | --- | --- |
| Standard content column | 1100px wide, x = 170 | 338px wide, x = 26 | Repeated DOM rectangles |
| Header logo box | 204.22 × 59.80px | 150.20 × 40.55px | DOM |
| Header logo left inset | 57.59px | 15.59px | Both approximately 4vw at the sampled widths |
| Complete header box | 1440 × 209.70px | 390 × 121.67px | Desktop includes the lower phone group |
| Desktop navigation capsule | Approximately 747 × 54px | Replaced by five cells | Screenshot estimate |
| Header estimate action | 172.05 × 55.17px | Not present in that form | DOM |
| Mobile navigation cell | Not applicable | Approximately 77.2 × 58.83px | Five cells separated by roughly 1px |
| Mobile area tile | Not applicable | 67.28 × 53.03px | DOM |
| Mobile menu tile | Not applicable | 59.80 × 53.03px | DOM |
| Hero service CTA | 305 × 70px | 265.19 × 62.39px | DOM |
| General index CTA | 350 × 70px | 253.5 × 56.08px | Introduction and results links |
| Primary service image link | 389.14 × 283.53px | 280.25 × 204.19px | DOM; image asset itself not separately measured |
| Secondary service image link | 338 × 327px | 145.59 × 140.84px | DOM |
| First reason panel | 1160px wide | 358.78px wide | DOM |
| Buyback green panel | Approximately 998px wide | Not visually captured | Desktop screenshot estimate |
| Buyback result card | Approximately 199 × 319px | Not visually captured | Desktop screenshot estimate |

The reported document heights are approximately **28,158.8px desktop** and **27,953.9px mobile**. Similar total heights do not imply similar layouts: mobile stacks some modules while substantially reducing others.

### Spacing Rhythm

| Use | Observed value | Interpretation |
| --- | --- | --- |
| Section capsule to main heading | 24px desktop; about 19.3px mobile | Measured in services and results headers |
| Results section outer padding | 116px top, 136px bottom | Desktop computed padding |
| Results section outer padding | 62.64px top, 82.08px bottom | Mobile computed padding |
| Option-services top padding | 128px desktop; 86.4px mobile | A deliberate pause before the horizontal collection |
| First reason-panel padding | 74px top, 96px bottom desktop | Mobile top padding is 0; content composition changes |
| Secondary service columns | 338px items with 43px between their x positions after item width | Derived from desktop rectangles |
| Option-service item separation | 18px desktop; about 15.22px mobile | Derived from consecutive item rectangles |
| Opening mobile contact gaps | About 7.27px | Derived between the three buttons |

The page does not follow one uniform mobile multiplier. Root size, header units, section titles, image widths, and spacing each have their own adjustments.

### Border Radius and Edge Treatment

| Element | Observed or estimated radius |
| --- | --- |
| General pill links and section capsules | Computed 1440px desktop and 844px mobile; effectively fully rounded |
| Primary and secondary service image links | 12px desktop; 6.48px mobile |
| Full contact cards | 16px desktop; 8.32px mobile |
| First reason panel | 46px desktop; 24.84px mobile |
| Buyback panel | Approximately 38–40px, visual estimate |
| Buyback result cards | Approximately 18–20px, visual estimate |
| Circular assurances and social buttons | Circular appearance |

The desktop header estimate anchor reports a zero radius even though the screenshot shows a pill silhouette. A surrounding element, clipping, or another layer may create that silhouette; the responsible rule was not supplied. Reproduce the visible shape without treating the anchor’s isolated radius as the whole component.

### Source Sizing Variables

The source exposes `--section-width: 1100`, `--vw: 14.4px` desktop / `3.9px` mobile, and `--vh: 10px` desktop / `8.44px` mobile. Its `--fs` changes from `100%` to `90%`.

These observations establish the sampled values, not the complete responsive formulas. In particular, `--header-plr` contains the raw values `64` and `64*.75`; neither should be pasted directly into a CSS length declaration. The Quick Start uses explicit, valid lengths and independently chosen responsive rules.

## Components

### Desktop Header

**Role:** brand recognition, broad site navigation, and immediate contact access.

A small white geographic strapline sits above the logo at approximately x = 58, y = 24. The logo occupies the upper-left corner. Seven navigation links share a long white capsule to its right, followed by a separate orange estimate pill.

The navigation provides access to guidance, prices, services, results, customer voices, coverage, and company information. These are links to distinct site pages. The header is part of a multi-page corporate information system.

A separate phone group sits below the navigation toward the upper right. Its anatomy is a circular free-call assurance, green telephone symbol, large white number, small operating-hours line, and compact privacy/year-round-service assurance. Preserve this hierarchy rather than making the phone number another ordinary navigation item.

### Mobile Header

**Role:** compress navigation while keeping major service routes visible.

The mobile header has two levels:

1. A white brand row with the logo at left, an orange coverage tile, and a brown menu tile at right.
2. Five equal-width navigation cells with a small beige icon above a two-line brown label.

The second row begins at approximately y = 61.8 and ends near y = 121.7. Fine separators make its cells readable as distinct targets. Labels change to compact forms such as `初めての方へ` and `料金案内`.

The menu tile remains visible at the upper right in the mobile footer screenshot. This supports persistent access to that control; it does not prove that the entire two-row header remains fixed. The menu’s opened layout, animation, focus handling, and close behavior were not exercised.

### Desktop Hero

**Role:** establish a human relationship before introducing detailed service information.

The first 1000px-high desktop capture is filled by a consultation scene: a uniformed staff member with a clipboard and an older customer inside a furnished working or household space. A darkened image treatment allows white foreground content to remain prominent.

The main copy group begins at x = 258, y = 516. A smaller regional statement sits above very large white service lettering. A faint oversized geometric outline echoes the faceted logo behind the copy. Small blue bird illustrations soften the scene.

The price-tagged service button sits at x = 258, y = 740.8. A large gold laurel badge occupies the lower-right area. It presents the site’s seven-year regional No.1 claim; the supporting research-period footnote appears below the hero. This reference records that presentation without independently validating the claim.

An orange downward chevron has a measured 52 × 52px link target near the bottom center and points to `#about`.

### Mobile Hero

**Role:** make the service, reassurance, and next action readable within a narrow first screen.

The mobile opening is a separate composition. It uses a light, subtly textured background and several staff/work photographs cropped into orange-edged rounded or circular shapes along the top. Brown and orange headline lines are centered beneath them.

The ranking graphic becomes a broad centered strip below the large service lettering. The price-tagged CTA follows it, and a miniature illustrated neighborhood of houses and trees forms the lower boundary. Blue bird accents remain part of the visual language.

The headline wrapper measures 338 × 155.70px at x = 26, y = 229. The service CTA is centered at x = 62.41, y = 531.06. The illustrated hero ends around y = 648 by visual estimation, followed immediately by the contact strip.

Do not implement this state by simply cropping the desktop consultation image into a phone-sized background. The captured mobile page changes image treatment, foreground colors, alignment, and badge placement together.

### Price-Tagged Pill Button

**Role:** combine a concrete starting-price cue with a service-detail action.

The button has a pale-yellow body, orange outline, fully rounded ends, brown rounded lettering, an orange-emphasized service name, and a right chevron. A smaller orange price capsule overlaps the top edge.

The displayed example is `1R 15,000円～`, above `遺品整理を詳しく見る`. The tag is visually part of the button but remains secondary to its main action label.

The desktop target is 305 × 70px; mobile remains a substantial 265.19 × 62.39px. The mobile label is 16.64px, only slightly smaller than desktop’s 17px. A small shadow is visible beneath the mobile button; its exact parameters were not supplied.

### Section Header and Introduction

**Role:** help users recognize a new topic in a very long page.

The recurring pattern is a small orange section label in a white rounded capsule, a larger brown rounded headline, then explanatory copy. Desktop labels are 17px and approximately 45px high including padding and borders. The mobile equivalents are 13.68px and approximately 36.19px high.

The introductory brand statement is unusually narrow on desktop: the measured main paragraph is approximately 461px wide, centered within the page. Its large rounded lettering uses multiple intentional lines. Supporting text uses spacious leading, followed by a pale-yellow guidance link.

This pattern creates a calm reading pace even when the surrounding page contains dense lists, comparisons, and numerical evidence.

### Service Modules

**Role:** help users identify the service that matches their situation.

The two primary services form a desktop pair. Each includes an image, short reassurance statement, large service name, a group of customer concerns, and a broad pill link. The primary titles measure 46px desktop and 35.19px mobile.

Three secondary services form a separate desktop row with 338px-wide images and 34px titles. On mobile, each becomes a compact horizontal row: an approximately 146 × 141px image at left and title, description, and small detail link at right. The title moves above the explanatory text in the measured visual arrangement.

The secondary mobile detail links measure only about 104 × 27px. A new implementation should expand their touch area while retaining the small visible label.

### Option-Service Rail

**Role:** expose additional capabilities without building a tall set of full service panels.

The desktop section places a 292px-wide explanatory block at left, followed by tall linked items. Each measured item is 176px wide; successive items begin 194px apart. Their positions extend beyond the viewport.

On mobile, the introductory block spans the 338px content column. Items below measure approximately 160.38px wide and advance by about 175.59px, allowing nearly two complete items in the content width.

This geometry supports a horizontal rail or slider interpretation. The exact overflow container, drag behavior, navigation controls, autoplay, and looping were not supplied. Do not infer those behaviors from slider-related custom properties alone.

### Completed-Project Module

**Role:** connect the service promise to concrete project conditions and costs.

The rendered content includes a location-based heading, short account of the work, before/after labels, a prominent amount, and structured details for room type, team/time, address, and vehicle. One example separately identifies buyback value and the resulting work charge.

Project text blocks occupy successive horizontal positions. Desktop headings are measured 968px apart; mobile headings advance by approximately 365px. This is consistent with a wide project rail rather than every project stacking vertically.

Use readable project summaries and structured facts. The evidence does not establish an interactive before/after comparison slider, so the before/after labels should not be treated as proof of a draggable image divider.

### Three-Reasons Section

**Role:** organize a large amount of reassurance into three recognizable topics.

A pale-peach field contains a large rounded heading and three white pill links. Their accent colors identify considerate handling, clear accounting, and reassurance around female staff. The links target `#reason1`, `#reason2`, and `#reason3`.

The first measured white panel is 1160px wide with 46px corners on desktop. On mobile it becomes approximately 358.78px wide with 24.84px corners. Its content changes from a broad desktop arrangement to a vertical sequence.

Within the first topic, the included-work collection changes from four measured columns on desktop to three on mobile. The content includes travel, protective preparation, sorting, searching for valuables, processing, removal, buyback, and basic cleaning.

The pricing topic contains an eight-row room-type table and explanatory qualifications. Mobile text explicitly includes `スクロール ⇒`, indicating that the table is presented with a horizontal-scroll cue. Actual scrolling of this table was not tested.

### Buyback Panel and Result Cards

**Role:** explain how purchasing reusable belongings can offset service costs.

The desktop screenshot shows a large jade-green panel inside a white section framed by teal vertical edges, with pale peach outside. The green panel begins around x = 221 and is approximately 998px wide, with large rounded upper corners.

Its hierarchy is:

1. A small white diagram comparing ordinary work cost with work cost after a buyback deduction.
2. A large centered two-line explanation, primarily white, with the cost-deduction phrase highlighted yellow.
3. Two lines of smaller supporting text.
4. A centered results heading with a short white underline.
5. Four white product-result cards.

Each card is approximately 199px wide, with a nearly square photograph above a white caption area. A brown product label precedes a larger jade amount. The captured examples are a speaker pair, alcohol bottles, a camera, and a trombone; the amounts are 29,500, 7,000, 30,000, and 43,000 yen.

The four cards are separated by roughly 16–17px. Their corners are rounded, and their content remains flat and clear without pronounced elevation.

Only three product names appear in the mobile text extract. That does not establish whether the fourth is omitted, offscreen, or conditionally rendered. No mobile screenshot of this section was supplied.

### Contact Band, Mobile Strip, and Edge Rail

**Role:** make three contact channels understandable and repeat them throughout the long page.

Full contact sections use a measured coral background, a large white reassurance headline, the small English caption `CONTACT US`, and separate channel controls. Desktop channel widths are 397px for phone, 397px for the estimate form, and 238px for LINE. All three measured targets are 96px high with 16px corners.

The phone control is white with brown figures and a smaller hours line. The estimate control is orange. LINE is vivid green. On mobile, the full contact-section controls stack vertically, each approximately 299 × 72.27px.

The opening mobile strip uses a different horizontal arrangement: phone first, LINE second, email estimate third. Its measured widths are approximately 164.31, 96.19, and 96.19px. The targets are 62.39px high with 8.32px corners. The phone receives almost twice the width of either other channel.

A second contact strip is visible at the viewport bottom in the mobile footer capture. The first-screen strip appears directly below the hero. The duplication supports separate inline and persistent presentations; the exact switching threshold is unknown.

The desktop buyback screenshot also shows a narrow green estimate rail attached to the right edge, with an orange up-arrow segment beneath it. Its visible width is approximately 59px. It is absent from the supplied hero and footer captures; its visibility rules and arrow behavior were not tested.

The captured full contact section contains a time-sensitive message about calling the following day. This establishes the displayed state only, not the timing logic behind it.

### Supporting Information Modules

The full-page text establishes the following additional modules, but their detailed visual geometry is outside the supplied screenshots and style samples:

| Module | Confirmed anatomy | Implementation limit |
| --- | --- | --- |
| Customer voices | Linked customer-story titles and service categories | Card styling and navigation behavior unverified |
| Review collection | Reviewer name, date, review text, five-star strings, external review link | Expansion, pagination, and carousel behavior unverified |
| Coverage directory | Osaka, Kyoto, and Nara links; extensive municipality lists; postcode-search prompt | Search execution and result states unverified |
| Service process | Three named stages and copy introducing a video | Playback, controls, and actual media behavior unverified |
| Articles | Article titles, categories, tags, and index link | Detailed image/card arrangement unverified |
| FAQ | Six question-and-answer pairs and an index link | Presence of answers in extracted text does not prove an accordion |
| Community support | Three organizational information blocks | Detailed component appearance unverified |
| News | Five dated entries, category links, and archive link | Pagination and destination layouts unverified |
| Closing assurances | Certification, insurance, and payment-support copy | Badge assets and payment-logo arrangement unverified |

### Footer

**Role:** provide a comprehensive site map and verifiable business identity.

The desktop footer is a broad warm-beige surface. A large logo, three circular social links, and the business block sit at left. Four groups to the right organize general navigation, services, coverage, and company information. Main group labels are heavier and larger than their nested links.

The inspected footer explicitly identifies the operator as **A-LIFE株式会社**, followed by an Osaka address, telephone/fax details, and permit information. These statements are supported by the current original-page evidence.

A fine dotted horizontal rule separates the upper footer from related services. Related-service links appear in a horizontal line. Utility links sit near the lower left and the copyright line near the lower right.

On mobile, the business block uses approximately 26px side insets. Utility links stack under it on beige. Related services move into a white section with vertically stacked, underlined links, followed by the copyright line. The menu tile remains at the top right, and the contact strip appears at the viewport bottom.

The mobile text includes a shallower footer navigation structure than desktop. No evidence establishes an expandable footer accordion.

## Tokens — Motion & Interaction

| Treatment | Measured evidence | What can be concluded |
| --- | --- | --- |
| General transition token | `0.2s cubic-bezier(0.165, 0.840, 0.440, 1.000)` | A short ease-out timing is declared |
| Navigation and option links | `color 0.2s` with the same curve | Color changes are prepared; endpoint colors were not exercised |
| Pill and estimate buttons | `background-color 0.2s` with the same curve | Background feedback is prepared |
| Some nested button labels | `color 0.2s` | Label color can transition independently |
| Project-location links | `opacity 0.2s` | Opacity feedback is declared |
| Seminar image link | `filter 0.2s` | Filter feedback is declared; filter values unknown |
| Reason anchor controls | `transform 0.16s cubic-bezier(0.455, 0.030, 0.515, 0.955)` plus 0.2s background | Transform feedback is declared; movement magnitude unknown |
| Mobile opening contact controls | Color, background, and border-color transitions, each 0.2s | Coordinated contact-button feedback is prepared |
| Sampled resting elements | Usually `animation: none` | No active CSS animation on those queried elements at that moment |

### Interaction Evidence and Limits

The supplied collection included an initial observation of at least five seconds and scrolling through intermediate positions. Its readiness procedure waited for finite animation and layout stability where possible, temporarily pausing perpetual animations before resuming them.

This process is not a recording of every interaction. No menu opening, form submission, postcode lookup, media playback, rail dragging, hover endpoint, or keyboard navigation result was supplied.

The consultation backdrop is represented by one current desktop frame. Its appearance alone does not establish whether it is a photograph, video frame, or changing media background. Likewise, the presence of horizontally arranged content and slider tokens does not prove autoplay.

**Recommended motion:** use the measured short ease-out transition for restrained color feedback. Add no parallax, looping badge motion, or large scroll reveals solely on the basis of this evidence. Provide reduced-motion handling for any motion introduced in a new implementation.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Main page | White with brown text | Ordinary service information and reading areas |
| Desktop hero | Darkened photographic scene with white lettering | Emotional opening and high-contrast service identification |
| Mobile hero | Light textured composition with brown/orange lettering | Compact, readable service and reassurance hierarchy |
| Main actions | Pale-yellow or white pills with orange accents | Welcoming service-detail navigation |
| Contact sections | Coral field with white, orange, and green controls | Repeated, recognizable contact choices |
| Reasons background | Pale peach with large rounded white panels | Separate reassurance topics within a long page |
| Buyback emphasis | Jade panel, yellow highlighted phrase, white cards | Explain the financial benefit of reuse |
| Desktop footer | Warm beige, brown type, dotted separator | Calm and information-dense corporate closure |
| Mobile related-services area | White below the beige business block | Distinguish affiliate links from company details |

The design relies on color fields, generous corner radii, and clear type hierarchy. Shadows are secondary. The decorative logo and gold badge can contain shading, but they do not establish a general gradient or elevated-card system.

## Imagery

Photography makes the service personal: people in work clothing, consultation, careful handling of belongings, and recognizable household settings. The desktop opening keeps both staff member and customer visible, allowing their relationship to carry the message.

Mobile photographs become small, intentionally cropped scenes with orange outlines. Their irregular rounded silhouettes work with light texture, blue birds, and a miniature neighborhood illustration. Preserve the human faces and gestures when preparing responsive crops.

The logo is a faceted loop of warm orange/gold and pale neutral segments beside a strong wordmark. A faint enlarged outline echoes it in the desktop hero. The award graphic uses gold laurels, stars, a crown, and large ranking figures; it should remain separate from ordinary buttons.

Buyback photographs are straightforward object records. The cards share a consistent near-square image area and a clean caption area. Avoid adding unrelated editorial filters that obscure the objects or their condition.

### Observed Asset References

Asset URLs, image `src` values, and media-file names were not included in the supplied evidence. The following are visual references, not invented file paths.

| Asset or visual | Where confirmed | Reuse guidance |
| --- | --- | --- |
| Consultation scene with staff member and customer | Current desktop opening capture | Preserve both subjects and space for foreground copy |
| Faceted ENDEAL logo | Desktop/mobile headers and desktop footer | Use an authorized brand asset rather than recreating it with text |
| Staff/work collage | Current mobile opening capture | Prepare dedicated mobile crops and orange-edged masks |
| Blue bird accents | Desktop and mobile openings | Treat as decorative, with empty alternative text where appropriate |
| Gold ranking artwork | Desktop and mobile openings | Preserve the displayed claim and its supporting footnote together |
| Illustrated houses and trees | Bottom of mobile hero | Use as a small transition detail, not a full-page background |
| Buyback cost diagram | Desktop buyback capture | Provide an accessible explanation of the deduction relationship |
| Speaker, bottle, camera, and trombone photographs | Desktop buyback cards | Keep consistent image areas and product/amount pairing |
| Social symbols | Desktop footer | Match their recognizable channel identities |

The shell can be reproduced in CSS. Photography, distinctive lettering artwork, logo geometry, and decorative illustration require separately supplied or authorized assets.

## Layout & Responsive Behavior

### Information Architecture

The confirmed sequence runs from the opening and introduction into services, option services, property buyback, completed projects, contact, three reassurance topics, contact again, customer voices, coverage, process, articles, FAQ, community support, news, closing assurances, contact, and the footer.

Repeated contact sections are structural landmarks within this long document. Keep the phone, estimate, and LINE identities consistent even when their order or layout changes between full contact sections and compact mobile strips.

### Observed Responsive Changes

| Region | Desktop | Mobile |
| --- | --- | --- |
| Header | Logo, seven-link capsule, separate estimate action, lower phone group | Brand row, area/menu tiles, five icon-and-label navigation cells |
| Hero | Full-screen darkened scene; white copy offset left; badge lower right | Light collage; centered brown/orange copy; badge beneath headline |
| Standard content | 1100px centered column | Usually 338px with 26px side insets |
| Primary services | Two substantial modules beside each other | One module after another |
| Secondary services | Three vertical cards | Three horizontal image-and-text rows |
| Option services | Introductory block beside horizontal items | Introductory block above horizontal items |
| Included-work collection | Four measured columns | Three measured columns |
| Full contact section | Three side-by-side channels | Three stacked channel controls |
| Compact contact strip | Not visible in desktop opening | Three horizontal channels below hero and a persistent copy in the footer view |
| Footer | Broad navigation columns and horizontal related links | Shallower navigation, stacked business details and related links |

### Implementation Implications

Use separate responsive art direction for the hero. Use component-level type changes rather than multiplying all desktop values by 0.9. The source’s option heading even becomes slightly larger on mobile while its major reassurance heading becomes much smaller.

Restrict horizontal scrolling to intentional rails and the pricing table. Several supplied item rectangles extend offscreen as part of horizontal collections; copying them into an unrestricted page container would create accidental body overflow.

Reserve space for persistent contact controls and ensure that footer links and focused elements remain reachable above them. The exact mobile dock activation point, safe-area handling, and source media-query thresholds were not supplied.

**Recommended starting breakpoint:** 64rem for switching the full desktop navigation and hero composition. This is a new implementation choice, not a recovered source breakpoint. Test intermediate widths rather than extrapolating a precise original formula from two viewport samples.

## Do’s and Don’ts

### Do

- Use deep brown `#482607` for most typography and orange `#f76a0c` for primary service accents.
- Preserve rounded display lettering and generous paragraph leading.
- Keep pale-yellow service pills large, with a clear label and directional cue.
- Recompose the mobile hero with light surfaces and dedicated image crops.
- Distinguish buyback jade, accounting teal, and LINE green.
- Pair cost examples with room type, staffing/time, and other useful context.
- Keep the site’s ranking footnote connected to the claim it qualifies.
- Repeat contact choices with stable channel colors and clear phone hours.
- Maintain substantial corporate navigation and business information in the footer.
- Treat horizontal rails as contained components and retain the mobile table-scroll cue.

### Don’t

- Don’t reduce the homepage to a single offer and discard its directory, evidence, and informational content.
- Don’t use the mobile hero as a scaled crop of the desktop opening.
- Don’t infer visible headline sizes from small wrapper font sizes.
- Don’t replace the measured contact coral with the lighter declared CTA token without checking the target component.
- Don’t use one generic green for all financial and contact functions.
- Don’t apply heavy shadows or generic publishing-system gradients to every card.
- Don’t infer menu, accordion, carousel, autoplay, or video behavior from static appearances alone.
- Don’t reproduce the smallest mobile text and touch targets without a readability review.
- Don’t bake business claims, changing prices, or time-sensitive availability messages into decorative images unnecessarily.

## Recommended Implementation Additions

These are recommendations for a new implementation, not verified original-site features:

- Keep body copy at a comfortable mobile size and enlarge the captured 9–11px footnotes where practical. Preserve hierarchy through spacing instead of extreme shrinking.
- Expand small service links and reason anchors to touch areas of at least 44px, even if their visible capsules remain compact.
- Test actual text/background contrast. White on bright orange or green and yellow on jade may require darker variants, larger lettering, or an additional text treatment for smaller copy.
- Give the menu button an accessible name, expanded state, focus management, and keyboard dismissal if it opens an overlay.
- Give repeated contact groups concise accessible labels and use proper telephone links. Normalize the supplied phone target to `tel:0120772345` in a new implementation.
- Keep pricing tables semantic and place them inside a labelled, keyboard-reachable horizontal-scroll region when needed.
- Make rail navigation operable without dragging, and expose a meaningful reading order.
- Give each before/after photograph a specific label. Do not rely on color or visual position alone.
- Use one meaningful page heading and a consistent section hierarchy. The inspected desktop H1 is a small geographic strapline, while many visually large headings are paragraphs.
- Supply accessible text equivalents for decorative headline or ranking artwork and keep decorative birds and geometry out of the accessibility tree.
- Add safe-area padding and content clearance for a persistent mobile contact dock.
- If the hero uses moving media in a new build, provide a static fallback and appropriate pause/reduced-motion behavior.

## Agent Prompt Guide

### Quick Color Reference

- Primary text: deep brown `#482607`.
- Service accents and estimate actions: orange `#f76a0c`.
- Main page and cards: white `#ffffff`.
- Footer: beige `#f7ecdf`.
- Reassurance-section field: peach `#fce9d7`.
- Friendly detail-button fill: pale yellow `#ffffc2`.
- Buyback panel: jade `#0eb88a`, with selective yellow `#ffff00` emphasis.
- Accounting accent: teal `#00a99d`.
- Contact band: coral `#f67e7c`.
- LINE: green `#00bf23`.

### Overall Prompt

“Create a Japanese household-service corporate homepage inspired by the current ENDEAL reference. Use deep brown typography, orange service actions, warm beige and peach sections, heavy rounded Japanese display lettering, generous explanatory leading, and large pill buttons. On desktop, open with a darkened consultation photograph, white service lettering, a white navigation capsule, an orange estimate button, and a prominent phone group. On mobile, replace that composition with a light staff-photo collage, centered orange-and-brown lettering, a reassurance badge, and a price-tagged service pill. Build substantial service, project, price, review, coverage, article, and company-information sections. Use jade for buyback information and coral contact bands with white phone, orange estimate, and green LINE controls. Keep motion restrained and treat unverified behaviors as implementation decisions.”

### Example Component Prompts

1. **Desktop header:** “A transparent header over a darkened consultation photograph. Place the faceted brand mark at left, seven brown navigation labels inside a long white capsule, an orange estimate pill at right, and a large white telephone group below the right side. Use approximately 4vw outer insets at 1440px.”
2. **Mobile opening:** “At 390px wide, use a two-row white header with area and menu tiles, followed by orange-edged staff-photo crops on a light textured hero. Center a brown-and-orange rounded service headline, a wide gold reassurance graphic, and a pale-yellow price-tagged CTA. Finish with a small illustrated neighborhood and a three-channel contact strip.”
3. **Buyback panel:** “A jade rounded panel approximately 998px wide on desktop. Stack a simple white cost-deduction diagram, large white Japanese copy with a yellow benefit phrase, explanatory text, an underlined subsection heading, and four 199px-wide white product cards with square photos and jade amounts.”
4. **Service card system:** “Use two large primary service panels followed by three smaller secondary services. Primary modules include an image, reassurance line, rounded title, customer concerns, and a pill link. On mobile, stack primary modules and turn secondary services into compact image-left, text-right rows.”
5. **Contact system:** “Create coral contact bands with a large white reassurance heading and three clearly differentiated channels. Use white and brown for phone, orange for estimate, and vivid green for LINE. Stack full cards on mobile and create a separate compact three-column dock with a wider phone target.”
6. **Footer:** “A warm-beige corporate footer with a large brand block, circular social icons, operator details, and four navigation groups. Separate related services with a dotted rule on desktop. On mobile, stack utilities and business details, then place related-service links on white above the reserved contact-dock space.”

## Quick Start

### CSS Custom Properties

This is a reusable adaptation, not extracted source CSS. Exact palette values and selected measurements come from the evidence. Layout recipes, the 64rem breakpoint, focus treatment, shadow, and reduced-motion rules are recommendations.

Supply authorized logo, photography, decorative artwork, and font files separately. No asset URLs or `@font-face` locations were available. The family names below preserve measured declarations; fallback fonts will change the appearance.

The class system assumes separate desktop/mobile hero media, ordinary semantic sections, service cards, a buyback grid, contact groups, and a footer. Add `.is-visible` to the mobile dock only when the chosen visibility logic calls for it; the original threshold is unknown.

```css
:root {
  /* Source-derived palette aliases */
  --ed-ink: #482607;
  --ed-orange: #f76a0c;
  --ed-white: #ffffff;
  --ed-beige: #f7ecdf;
  --ed-peach: #fce9d7;
  --ed-pale-yellow: #ffffc2;
  --ed-yellow: #ffff00;
  --ed-jade: #0eb88a;
  --ed-teal: #00a99d;
  --ed-line: #00bf23;
  --ed-coral: #f67e7c;
  --ed-menu: #945b08;
  --ed-link: #00a0e9;

  /* Source family names; font files must be supplied separately */
  --ed-font-body: YakuHanJP, 'Hiragino Kaku Gothic ProN',
    'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  --ed-font-display: '新丸ゴ B', var(--ed-font-body);
  --ed-font-subhead: '新丸ゴ DB', var(--ed-font-body);
  --ed-font-label: YakuHanJP, '見出ゴMB31', sans-serif;

  /* Measured desktop dimensions */
  --ed-content: 1100px;
  --ed-panel: 1160px;
  --ed-radius-media: 12px;
  --ed-radius-card: 16px;
  --ed-radius-panel: 46px;
  --ed-radius-pill: 9999px;

  /* Measured timing; shadow and safe-area use are adaptations */
  --ed-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ed-transition: 200ms var(--ed-ease);
  --ed-button-shadow: 0 3px 4px rgb(72 38 7 / 14%);
  --ed-safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html {
  font-size: 16px;
  scroll-padding-top: 72px;
}

body {
  margin: 0;
  color: var(--ed-ink);
  background: var(--ed-white);
  font-family: var(--ed-font-body);
  line-height: 1.8;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }

.ed-container {
  width: min(var(--ed-content), calc(100% - 52px));
  margin-inline: auto;
}

.ed-section { padding-block: 116px 136px; }
.ed-section--warm { background: var(--ed-peach); }

.ed-kicker {
  display: table;
  margin: 0 auto;
  padding: 11px 14px 13px;
  border: 2px solid var(--ed-orange);
  border-radius: var(--ed-radius-pill);
  color: var(--ed-orange);
  background: var(--ed-white);
  font: 400 17px/1 var(--ed-font-label);
  letter-spacing: 0.01em;
}

.ed-title {
  margin: 24px 0 32px;
  text-align: center;
  font: 400 48px/1.4 var(--ed-font-display);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.ed-copy { font-size: 17px; line-height: 1.8; }

.ed-header {
  position: absolute;
  z-index: 20;
  inset: 0 0 auto;
  padding: 48px 4vw 0;
}

.ed-header__row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ed-logo { width: 204px; flex: none; }

.ed-nav {
  display: flex;
  align-items: center;
  gap: 21px;
  margin-left: auto;
  padding: 19px 36px;
  border-radius: var(--ed-radius-pill);
  background: var(--ed-white);
  font: 400 15.64px/1 var(--ed-font-label);
  white-space: nowrap;
}

.ed-nav a { text-decoration: none; }

.ed-estimate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 172px;
  min-height: 55px;
  padding: 12px 20px;
  border-radius: var(--ed-radius-pill);
  color: var(--ed-white);
  background: var(--ed-orange);
  text-decoration: none;
  font-family: var(--ed-font-label);
}

.ed-mobile-nav,
.ed-mobile-menu,
.ed-hero__mobile-art { display: none; }

.ed-hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  color: var(--ed-white);
  background: var(--ed-ink);
}

.ed-hero__media {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ed-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgb(0 0 0 / 38%);
}

.ed-hero__copy {
  width: min(600px, 65%);
  margin-left: max(26px, calc(50% - 462px));
  padding-block: 51.6svh 150px;
}

/* Display sizes approximate the visible lettering, not its DOM wrapper. */
.ed-hero__eyebrow {
  margin: 0;
  font: 400 36px/1.35 var(--ed-font-display);
}

.ed-hero__title {
  margin: 12px 0 50px;
  font: 400 clamp(72px, 8vw, 112px)/1.1 var(--ed-font-display);
}

.ed-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(350px, 100%);
  min-height: 70px;
  padding: 16px 46px;
  border: 3px solid var(--ed-orange);
  border-radius: var(--ed-radius-pill);
  color: var(--ed-ink);
  background: var(--ed-pale-yellow);
  box-shadow: var(--ed-button-shadow);
  text-align: center;
  text-decoration: none;
  font: 400 18px/1.35 var(--ed-font-label);
  transition: background-color var(--ed-transition);
}

.ed-pill::after {
  content: '›';
  position: absolute;
  right: 22px;
  color: var(--ed-orange);
  font-size: 28px;
}

.ed-pill--hero {
  width: 305px;
  font-family: var(--ed-font-display);
  font-size: 17px;
}

.ed-price-tag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -55%);
  padding: 5px 18px;
  border-radius: var(--ed-radius-pill);
  color: var(--ed-white);
  background: var(--ed-orange);
  font: 400 20px/1.2 var(--ed-font-label);
  white-space: nowrap;
}

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

.ed-service-grid--secondary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 43px;
}

.ed-service__image {
  width: 100%;
  border-radius: var(--ed-radius-media);
  object-fit: cover;
}

.ed-service__title {
  font: 400 46px/1.2 var(--ed-font-display);
}

.ed-service-grid--secondary .ed-service__title { font-size: 34px; }

.ed-reason-panel {
  width: min(var(--ed-panel), calc(100% - 32px));
  margin-inline: auto;
  padding: 74px 40px 96px;
  border-radius: var(--ed-radius-panel);
  background: var(--ed-white);
}

/* Buyback dimensions below are based on screenshot estimates. */
.ed-buyback {
  width: min(998px, 100%);
  margin-inline: auto;
  padding: 64px 76px 60px;
  border-radius: 40px;
  color: var(--ed-white);
  background: var(--ed-jade);
  text-align: center;
}

.ed-buyback__title {
  font: 400 46px/1.5 var(--ed-font-display);
}

.ed-buyback__title em {
  color: var(--ed-yellow);
  font-style: normal;
}

.ed-buyback-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.ed-buyback-card {
  overflow: hidden;
  border-radius: 20px;
  color: var(--ed-ink);
  background: var(--ed-white);
}

.ed-buyback-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.ed-buyback-card__body { padding: 20px 10px 24px; }
.ed-buyback-card__body p { margin: 0; }

.ed-buyback-card__amount {
  display: block;
  margin-top: 10px;
  color: var(--ed-jade);
  font: 400 34px/1.3 var(--ed-font-display);
  font-variant-numeric: tabular-nums;
}

.ed-contact {
  padding-block: 64px;
  background: var(--ed-coral);
}

.ed-contact__title {
  color: var(--ed-white);
  text-align: center;
  font: 400 50px/1.2 var(--ed-font-display);
}

.ed-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 0.6fr;
  gap: 24px;
}

.ed-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 96px;
  padding: 12px;
  border: 2px solid var(--ed-white);
  border-radius: var(--ed-radius-card);
  text-decoration: none;
  font-family: var(--ed-font-display);
  line-height: 1.35;
}

.ed-channel--phone { color: var(--ed-ink); background: var(--ed-white); }
.ed-channel--estimate { color: var(--ed-white); background: var(--ed-orange); }
.ed-channel--line { color: var(--ed-white); background: var(--ed-line); }
.ed-channel__number { font-size: 36px; white-space: nowrap; }

.ed-contact-dock { display: none; }

.ed-table-scroll,
.ed-rail {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.ed-rail {
  display: flex;
  gap: 18px;
  padding-bottom: 16px;
}

.ed-rail > * { flex: 0 0 176px; }
.ed-table-scroll table { min-width: 640px; width: 100%; }

.ed-footer {
  padding: 116px 6vw 44px;
  background: var(--ed-beige);
}

.ed-footer__grid {
  display: grid;
  grid-template-columns: 2.4fr 1fr 1.15fr 0.85fr 1fr;
  gap: 36px;
}

.ed-footer__related {
  margin-top: 96px;
  padding-top: 32px;
  border-top: 1px dotted var(--ed-ink);
}

/* Recommended keyboard and touch safeguards */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--ed-ink);
  outline-offset: 4px;
}

.ed-small-action { min-height: 44px; }

@media (hover: hover) {
  /* Proposed feedback; the source hover endpoint was not supplied. */
  .ed-pill:hover { background: var(--ed-white); }
  .ed-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
}

@media (max-width: 63.999rem) {
  :root {
    --ed-radius-media: 6.48px;
    --ed-radius-card: 8.32px;
    --ed-radius-panel: 24.84px;
  }

  .ed-section { padding-block: 62.64px 82.08px; }
  .ed-title { font-size: 29.952px; }
  .ed-copy { font-size: 15.3px; }

  .ed-kicker {
    padding: 8.85px 11.27px 9.66px;
    font-size: 13.68px;
  }

  .ed-header {
    position: relative;
    padding: 9.36px 0 0;
    background: var(--ed-white);
  }

  .ed-header__row { min-height: 52px; padding-inline: 4vw; }
  .ed-logo { width: 150.2px; }
  .ed-nav, .ed-header .ed-estimate { display: none; }

  .ed-mobile-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 0;
    border-block: 1px solid #ccc;
  }

  .ed-mobile-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 59px;
    border-right: 1px solid #ccc;
    text-align: center;
    text-decoration: none;
    font: 400 14px/1.1 var(--ed-font-label);
  }

  .ed-mobile-nav a:last-child { border-right: 0; }

  .ed-mobile-menu {
    display: flex;
    position: fixed;
    z-index: 50;
    top: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    width: 60px;
    min-height: 53px;
    border: 0;
    color: var(--ed-white);
    background: var(--ed-menu);
  }

  .ed-hero {
    min-height: 526px;
    color: var(--ed-ink);
    background: var(--ed-beige);
  }

  .ed-hero::before, .ed-hero__media { display: none; }

  .ed-hero__mobile-art {
    display: block;
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ed-hero__copy {
    width: auto;
    margin: 0;
    padding: 106px 26px 54px;
    text-align: center;
  }

  .ed-hero__eyebrow { font-size: 30px; }
  .ed-hero__title { margin: 10px 0 28px; font-size: 64px; }
  .ed-hero__accent { color: var(--ed-orange); }

  .ed-pill { width: min(253.5px, 100%); min-height: 56.08px; font-size: 13.68px; }
  .ed-pill--hero { width: 265.19px; min-height: 62.39px; font-size: 16.64px; }
  .ed-price-tag { padding: 3px 12px; font-size: 15px; }

  .ed-service-grid { grid-template-columns: 1fr; gap: 56px; }
  .ed-service__title { font-size: 35.19px; }

  .ed-service-grid--secondary .ed-service {
    display: grid;
    grid-template-columns: 43.08% minmax(0, 1fr);
    align-items: start;
    gap: 18.7px;
  }

  .ed-service-grid--secondary .ed-service__title { font-size: 21.6px; }
  .ed-reason-panel { padding: 32px 24px 51.84px; }
  .ed-rail { gap: 15.22px; }
  .ed-rail > * { flex-basis: 160.38px; }

  /* Proposed mobile buyback grid; no matching screenshot was supplied. */
  .ed-buyback { padding: 36px 18px; border-radius: 25px; }
  .ed-buyback__title { font-size: 27px; }
  .ed-buyback-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ed-buyback-card__amount { font-size: 24px; }

  .ed-contact__title { font-size: 28.6px; }
  .ed-contact-grid { grid-template-columns: 1fr; max-width: 299px; margin-inline: auto; }
  .ed-channel { min-height: 72.27px; }
  .ed-channel__number { font-size: 27.56px; }

  .ed-contact-dock.is-visible {
    position: fixed;
    z-index: 40;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: 1.71fr 1fr 1fr;
    gap: 7.27px;
    padding: 9.4px 9.4px calc(12px + var(--ed-safe-bottom));
    background: var(--ed-coral);
  }

  .ed-contact-dock .ed-channel { min-height: 62.39px; padding: 6px 3px; }
  .ed-contact-dock .ed-channel__number { font-size: 20.8px; letter-spacing: -0.02em; }

  .ed-footer { padding: 64px 26px calc(112px + var(--ed-safe-bottom)); }
  .ed-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .ed-footer__related { margin-top: 40px; }
  .ed-footer__related a { display: block; margin-block: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ed-pill, .ed-nav a, .ed-channel { transition: none; }
  html { scroll-behavior: auto; }
}
```

The hero artwork, award placement, phone assurance group, and mobile coverage tile still need their own markup and assets. The CSS establishes the reusable visual system; it does not claim to reproduce every original layer or interaction.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-endeal-ink: var(--ed-ink);
  --color-endeal-orange: var(--ed-orange);
  --color-endeal-beige: var(--ed-beige);
  --color-endeal-peach: var(--ed-peach);
  --color-endeal-pale-yellow: var(--ed-pale-yellow);
  --color-endeal-jade: var(--ed-jade);
  --color-endeal-teal: var(--ed-teal);
  --color-endeal-line: var(--ed-line);
  --color-endeal-coral: var(--ed-coral);

  --font-endeal-body: var(--ed-font-body);
  --font-endeal-display: var(--ed-font-display);
  --font-endeal-label: var(--ed-font-label);

  --radius-endeal-media: var(--ed-radius-media);
  --radius-endeal-card: var(--ed-radius-card);
  --radius-endeal-panel: var(--ed-radius-panel);
  --radius-endeal-pill: var(--ed-radius-pill);

  --spacing-endeal-gutter: 26px;
  --spacing-endeal-content: 1100px;
  --ease-endeal: var(--ed-ease);
}
```

## Sources & Evidence

- **Original and final page:** [ENDEAL homepage](https://endeal.net/), HTTP 200. Both supplied URL fields identify the same homepage.
- **Capture timestamp:** `2026-09-22T20:28:00.170Z`, equivalent to September 23, 2026, 05:28 JST.
- **Current desktop screenshots:** three captures at 1440 × 1000, showing the opening, buyback section, and footer.
- **Current mobile screenshots:** two captures at 390 × 844, showing the opening and footer.
- **Rendered evidence:** full-page text and link extracts, viewport/document dimensions, source custom properties, and sampled computed element rectangles, typography, colors, radii, padding, transitions, and resting animation values.
- **Navigation evidence:** the homepage exposes separate service, pricing, results, voice, coverage, company, article, FAQ, and estimate destinations. These link targets establish site structure; their destination pages were not inspected.
- **Observation method:** initial settling and scroll traversal were reported by the supplied collection. Finite motion and image decoding were awaited within bounded limits; delayed content and unexercised states may remain unobserved.
- **Limitations:** no additional browsing, commands, asset retrieval, file inspection, hover testing, menu activation, form submission, postcode lookup, or media playback was performed for this reference. Asset paths, actual font loading, responsive breakpoints, and behavioral triggers remain unverified unless explicitly identified above.

This document describes the current supplied homepage evidence. Measured values, screenshot estimates, and implementation recommendations are intentionally distinguished throughout.