# egaco — Illustration & Manga School — Style Reference

> A spacious school website brought to life by a cast of illustrated characters, pastel drawing strokes, and bright enrollment controls.

**Original URL:** [https://comic.smiles55.jp/](https://comic.smiles55.jp/)
**Final URL:** [https://comic.smiles55.jp/](https://comic.smiles55.jp/)
**Theme:** light canvas with section-specific accents and multiple illustration-style choices; no dark appearance was inspected.
**Inspected:** October 2, 2026, at 06:16:19.910 JST, equivalent to October 1, 2026, at 21:16:19.910 UTC.
**Viewports:** 1440 × 1000 and 390 × 844 CSS pixels. The recorded document widths were 1425px and 375px because the capture reserved a 15px scrollbar gutter.
**Scope:** the current school homepage, using three desktop captures, two mobile captures, rendered text, link destinations, element rectangles, and sampled computed styles. Visual coverage includes the opening hero, desktop school directory, desktop footer, and mobile opening/footer. DOM evidence additionally covers student stories, reasons to choose the school, lessons, pricing, services, benefits, enrollment prompts, and FAQ content. Linked pages and application flows were not inspected.

The page combines a practical education directory with the visual energy of an illustration portfolio. A pale gray background and white cards establish a quiet framework. Large characters, soft pink-to-blue strokes, and oversized outline lettering supply personality without replacing the navigation or course information. Dark Japanese headings are deliberately spacious, with colorful English captions beneath them.

The desktop hero separates the promise on the left from a dense character composition on the right. Mobile changes that relationship: the characters fill the opening composition, and the headline becomes white lettering on two translucent gradient ribbons. Enrollment stays prominent through orange-to-red trial buttons, vivid green LINE buttons, repeated conversion sections, and persistent promotional banners.

## How to Read This Reference

- **Measured** means a value appears in the supplied element rectangles or computed styles. Values are in CSS pixels unless otherwise stated.
- **Calculated** means a relationship was derived from those measurements, such as a gap between two cards.
- **Estimated** means a visual approximation from a current-page capture. Gradient stops, shadows, and several decorative dimensions fall into this category.
- **Recommended** means an implementation choice for reuse. Breakpoints, accessibility behavior, and the starter CSS are not a transcription of the original stylesheet.
- **DOM-supported** means the content or structure appears in the rendered evidence, but its complete visual presentation was not captured.
- Token names introduced here are descriptive aliases. The supplied custom-property list mostly contains general WordPress presets; their presence does not establish that they produce the visible design.

A sampled anchor can report a transparent background, white text, or a large radius while its visible child surface has a different treatment. This occurs in the navigation and school jump controls. Use the screenshots to identify the visible component, and preserve the distinction between its outer element and its rendered face.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Light Gray Canvas | `#f5f5f5` | `--canvas` | Measured root background at both viewports; supports the hero and long content sections. |
| White Surface | `#ffffff` | `--surface` | Measured story and reason-card backgrounds; also visible in the footer and scrolled header. |
| Charcoal Text | `#222222` | `--ink` | Measured main text, Japanese headings, and ordinary links. |
| School Violet | `#6c5ded` | `--accent-violet` | Measured color of the English `Schools` caption. |
| Progress Cyan | `#33b6dd` | `--accent-cyan` | Measured color of `Change with egaco.` |
| Reason Coral | `#ef3e4c` | `--accent-coral` | Measured reason headings, `Why choose egaco?`, and the mobile `Price` caption. |
| Lesson Mint | `#2cc697` | `--accent-mint` | Measured English `lessons` caption. |
| Deep Link Violet | `#3a29cc` | `--link` | Measured enrollment-information link color. |

The section accents are a navigation aid within a long page. Cyan identifies student progress, coral emphasizes teaching benefits and pricing, mint identifies lessons, and violet identifies the school directory. The neutral text system remains consistent across those sections.

### Gradients and Conversion Colors

The following values are **visual estimates for reconstruction**, not extracted gradient definitions.

| Treatment | Suggested approximation | Observed application |
| --- | --- | --- |
| Pale wash | `linear-gradient(110deg, #f9dff5, #adcaff)` | Full-width enrollment bands and large background strokes. |
| Strong brand gradient | `linear-gradient(110deg, #e58ce3, #4d85f2)` | Mobile circular menu control and footer copyright strip. |
| Trial action | `linear-gradient(180deg, #ff681d, #f5354d)` | Current trial buttons and booking banners. |
| LINE action | `linear-gradient(180deg, #12c957, #20ba0d)` | Current consultation buttons and LINE banners. |
| Mobile headline ribbon | Pink-violet to blue, approximately 85% opaque | Two separate rectangular bands over the hero artwork. |
| Outline lettering | Approximately `#b39aff` | Very thin strokes around the oversized hero lettering. |

Keep the trial and LINE treatments distinct from the softer brand gradient. The current orange/red trial action is particularly prominent against the cool blue costumes and pastel surroundings.

The extracted SVG text includes a fallback magenta stroke followed by `stroke: url(#purple)`. That fallback is not proof that the visible strokes are solid magenta. Likewise, `--swiper-theme-color: #007aff` and the WordPress gradient presets should not be promoted into the visible brand palette without element-level evidence.

## Tokens — Typography

### Japanese Interface and Body Copy

- **Measured family:** `"Noto Sans JP", sans-serif`.
- **Measured weights:** `400` for prose, `500` for many card and directory titles, and `700` for prominent headings.
- **Character:** clean, sturdy, and readable, with generous line spacing and conspicuous tracking in large headlines.
- **Role:** all substantial Japanese information, including the school promise, course descriptions, school links, and enrollment copy.
- **Suggested alias:** `--font-jp`.

The root reports `18px / 18px`, but actual prose commonly overrides this to `16px / 30px` on desktop. Do not use the root line height as the reading rhythm for the page.

### English Captions and Numbers

- **Measured family:** `Montserrat, sans-serif`.
- **Measured weight:** `500` for English section captions; `700` for the mobile service numbers.
- **Role:** short labels such as `Schools`, `lessons`, and `Change with egaco.`, plus selected numeric ornaments.
- **Tracking:** usually `0.05em`.
- **Suggested alias:** `--font-latin`.

These captions support the Japanese hierarchy. They are colored, centered, and much smaller than the Japanese title above them.

### Brand and Decorative Lettering

The egaco wordmark has a rounded, custom-drawn appearance. Its exact asset format and construction were not supplied. Preserve it as an authorized logo asset rather than approximating it with ordinary typed letters.

The giant outline phrase behind the hero is decorative. Its font family was not included in the sampled styles. A similar sans-serif treatment in a reconstruction is a recommendation, not a verified font identification.

### Type Scale

All values in this table are measured. Desktop and mobile refer to the supplied 1440px and 390px viewports.

| Role | Desktop size / line height | Mobile size / line height | Weight | Tracking |
| --- | --- | --- | --- | --- |
| Hero heading | `42px / 65px` | `31.2px / 31.2px` on the H1 | `700` | Desktop `5.04px`; mobile `3.12px` |
| Hero supporting sentence | `16px / 30px` | Not visible in the mobile opening | `500` | `0.8px` |
| Main Japanese section title | `40px / 64px` | `24.96px / 41.6px` | `700` | `0.08em` |
| English section caption | `21px / 42px` | `14.56px / 29.12px` | `500` | `0.05em` |
| Reason-card heading | `28px / 48px` | `20.8px / 35.36px` | `700` | `0.03em` |
| Story-card title | `20px / 36px` | `15.6px / 29.12px` | `500` | `0.05em` |
| Lesson-card title | `20px / 33px` | `18.72px / 29.952px` | `500` | `0.05em` |
| General paragraph | `16px / 30px` | `15.6px / 29.12px` | `400` | `0.05em` |
| Lesson/school introductory copy | `16px / 30px` | `12.48px / 24.96px` | `400` | `0.05em` |
| School-group heading | `28px / 35px` | `18.72px / 36.4px` | `700` | `0.05em` |
| Individual school link | `20px / 32px` | `18.72px / 31.2px` | `500` | `0.05em` |
| Trial-information link | `15px / 26px` | `15.6px / 27.04px` | `400` | `0.02em` |
| Main trial/LINE anchor | `18px / 18px` | `16.64px / 16.64px` | `400` on anchor | `0.54px` |
| Service number | Not sampled | `27.04px / 27.04px` | `700` | `1.352px` |

The mobile H1 occupies a measured height of about `116.47px`, despite its `31.2px` computed line height. Its separate decorated lines create the larger composition. Reproducing it as two plain text lines with no ribbon spacing would be too compressed.

The computed CTA anchor styles do not establish the typography of every nested label. The captures show a bold main action and a smaller availability line. Similarly, the measured desktop navigation anchor weight is `400`, while the visible label treatment appears heavier; nested label styles were not provided.

## Tokens — Spacing & Shapes

**Density:** large section spacing around information-rich cards and directories. Compact utility controls surround a very large hero illustration.

### Spacing Scale

| Use | Desktop measurement | Mobile measurement | Interpretation |
| --- | --- | --- | --- |
| Main section top padding | Usually `120px` | Usually `62.4px` | Measured on story, lesson, and school-introduction sections. |
| Section horizontal padding | `80px` within a `1280px` wrapper | `20.8px` | Measured; mobile wrapper spans the `375px` document. |
| Story column gap | `40px` | Single column | Calculated from card rectangles. |
| Story row gap | `40px` | Approximately `20.8px` | Calculated. |
| Story text inset | `20px` | Approximately `20.8px` | Calculated from card/title rectangles. |
| Reason-card padding | `60px 70px` | `31.2px 20.8px` | Measured. |
| Reason-card separation | `30px` | Approximately `20.8px` | Calculated from successive rectangles. |
| Main CTA gap | `30px` horizontally | Approximately `16.63px` vertically | Calculated. |
| School jump-control gap | `20px` | Approximately `10.39px` | Calculated. |
| Lesson rail gap | `20px` | `12px` | Calculated between sampled entries. |
| School-panel inner padding | Approximately `60px` | Approximately `20.8px` | Desktop estimate from screenshot and link alignment; mobile link alignment supports the smaller inset. |

Mobile values such as `20.8`, `31.2`, and `62.4` are consistent with multiples of a `1.04px` scaling unit at a 390px viewport. This suggests viewport-based sizing, but the actual formula and breakpoint were not supplied. Do not present `390 / 375` as a verified global scaling rule: the root remains 18px, and different component families scale differently.

### Border Radius

| Element | Value | Evidence |
| --- | --- | --- |
| Story, reason, and lesson cards | `10px` desktop; `10.4px` mobile | Measured. |
| Desktop submenu links | `10px` | Measured on menu content present in the DOM; its open appearance was not inspected. |
| Large CTA outer anchors | `36px` desktop; `37.44px` mobile | Measured. |
| Desktop header action anchors | `36px` | Measured; visible shapes are pills. |
| Mobile menu control | `50%` on a `52px` square | Measured. |
| Taste-change prompt | Approximately `20–24px` | Visual estimate. |
| School jump-control visible face | Approximately `10–12px` | Visual estimate; the outer anchor reports a larger radius. |
| Illustration selector and Top control | Circular controls within rounded housings | Visually observed; exact radii not sampled. |

### Layout Measurements

| Element | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Document canvas | `1425px` wide | `375px` wide | Measured, inside the larger capture viewport. |
| Document height | `14269.14px` | `15974.23px` | Snapshot measurement, not an intended fixed height. |
| Header | `112px` high | `80.08px` high | Measured. |
| Logo H1 wrapper | `140.64 × 57.56px` | `95.53 × 38.09px` | Measured wrapper; asset bounds may differ. |
| Main section wrapper | `1280px` at x=`72.5px` | Full document width | Measured. |
| Section inner width | `1120px` | `333.41px` | Calculated after padding. |
| Hero headline | x=`80px`, y=`394px`, height=`130px` | x=`0`, y=`228.27px`, height=`116.47px` | Measured H1 rectangles. |
| Hero illustration region | Roughly x=`550–1425px`, y=`50–915px` | Most of the opening area above y≈`522px` | Visual estimate. |
| Taste prompt | Approximately `400 × 100px` | Approximately `350 × 84px` | Visual estimate. |
| Header login action | `134 × 44px` | Not visible in the closed header | Measured desktop anchor. |
| Header trial action | `180 × 44px` | Not visible in the closed header | Measured desktop anchor. |
| Main trial/LINE actions | Each `356 × 71px` | Each `308.88 × 62.39px` | Measured. |
| School jump actions | Each `240 × 53px` | Each approximately `161.5 × 53px` | Measured. |
| Story cards | `540px` wide | `333.41px` wide | Measured; heights vary with content. |
| Lesson cards | `461.66px` wide | `461.66px` in the sampled rail | Measured; mobile overflow requires caution. |

## Components

### Persistent Header

**Role:** identity, primary navigation, and direct access to enrollment and member login.

On desktop, place the black wordmark at the left, six navigation categories through the middle, and two pill actions at the right. The sampled horizontal padding is `43px` on the left and `37.2px` on the right. The navigation covers the school’s appeal, lessons, locations, pricing, experiences, and FAQ. Small downward triangles appear beneath the lesson and school labels.

The login control has a white face, dark label, violet arrow, and diffuse shadow. The trial control has the current warm gradient and a white arrow. Their measured heights are 44px.

The header remains at the top of the supplied scrolled captures. It visually blends into the hero at the opening and becomes a white bar over the school directory and footer. The evidence establishes persistence, but the sampled properties do not distinguish a fixed implementation from a sticky one.

At mobile width, the horizontal navigation and action pills disappear from the closed header. A compact wordmark sits at x≈20.8px. Character-style bubbles appear near the right, followed by a `52 × 52px` gradient menu button with two white horizontal strokes.

Menu links in the desktop DOM have measured white surfaces, 10px radii, 250px widths, and 46–55px heights. Their four-column coordinates describe available menu content, not a verified open-menu screenshot. The opening trigger and mobile menu layout remain untested.

### Hero Composition

**Role:** communicate individual instruction while immediately demonstrating several drawing styles.

Desktop has five visual layers:

1. A pale gray canvas with very faint vertical divisions.
2. Enormous thin outline lettering extending beyond the viewport edges.
3. A pastel diagonal drawing stroke behind the character group.
4. A dense illustration composition concentrated on the right.
5. A two-line charcoal headline, supporting sentence, and white taste-change card on the left.

The headline quotes the current source copy: `個別指導だから最短で` / `描く力が身につく`. Its measured size is 42px, weight 700, with 5.04px tracking. The supporting sentence starts at y=546px, 22px below the headline box.

The character group combines two prominent pink-haired figures in blue-and-white clothing with a kimono character, a small chibi figure, a monochrome action figure, and a dark-haired contemporary character. Their overlapping silhouettes create the visual mass; the composition is not a grid of individual portraits.

On mobile, preserve the faces near the upper part of the hero and allow controlled cropping of bodies at the sides and bottom. Reposition the headline over the artwork as two separately sized translucent gradient ribbons. Keep the taste-change card below those ribbons and above the first full-width CTA band. The desktop supporting sentence is absent from the mobile opening.

### Illustration-Style Controls

**Role:** invite exploration of alternate drawing aesthetics.

The large prompt is a white rounded card with a soft shadow. Its left portion displays a strip of small character previews; its right portion contains `あなた好みのテイストに着せ替えよう！` and a small `click!` cue with a violet triangle.

In the scrolled desktop captures, a narrow white capsule near the right edge contains a `now` label, a pointer, and three circular illustration previews. The active preview is larger than the two below it. Mobile presents overlapping character bubbles in the header instead of that vertical rail.

The rendered text includes confirmation messages for mixed illustration, manga, and mini-character tastes. This supports the existence of style-selection states. It does not establish the exact switching sequence, persistence, animation, or which assets change together. No switch was exercised in the supplied evidence.

### Trial and LINE Action Group

**Role:** offer two clear ways to start a conversation with the school.

Each primary action combines a left-side icon, a bold Japanese action label, a smaller `（24時間受付中）` line, and a right-pointing triangle. The trial action uses a device/document-style icon and the orange-to-red gradient; LINE uses its recognizable speech-bubble mark and green fill.

Desktop actions are `356 × 71px`, arranged side by side with a 30px gap. Mobile actions are `308.88 × 62.39px`, stacked with about 16.63px between them. A deep-violet underlined enrollment-information link sits below the pair.

Observed destinations are:

- Trial: `https://school.egaco.com/trial`
- LINE consultation: `https://lin.ee/wBCKNKb`
- Enrollment information: `https://comic.smiles55.jp/trial-flow/`

These destinations are recorded links; their downstream screens were not inspected. The repeated enrollment blocks also describe three steps: email registration/verification, date selection, and customer information entry.

### Section Heading Group

**Role:** make a long homepage easy to scan.

Use a centered, bold Japanese title followed by a short English caption in the section’s accent color. Desktop titles are 40px with 64px line height; captions are 21px with 42px line height. Mobile titles reduce to 24.96px with 41.6px line height; captions reduce to 14.56px with 29.12px line height.

The caption starts approximately 5px below the Japanese title box. Introductory prose, when present, follows below with a measured 18px separation in the sampled lesson and school sections.

Do not style only the H2 wrapper: some sampled heading groups place the visually large Japanese title in a nested paragraph while the wrapper retains the 18px root size. A new implementation should use clean heading semantics while reproducing the visible hierarchy.

### Student Progress Card

**Role:** demonstrate improvement through actual student stories.

Four linked cards appear in a two-column desktop layout and a single mobile column. Each includes a leading comparison area identified by `Before`, `After`, and an elapsed learning period, followed by a date, story title, student identification, age category, lesson topics, and school metadata.

Desktop cards are 540px wide, with a 40px gap. The first row is 652px high; the second is 615px high in the sampled content. Mobile cards are 333.41px wide and approximately 490–524px high. These heights are content-dependent and should not become fixed tokens.

Use white surfaces, 10px desktop corners, and 20px text insets. Titles are medium weight rather than the heavy weight used for section headings. Their line height stays generous to support long Japanese titles.

The DOM supports the comparison labels and card anatomy. It does not establish a draggable before/after slider, reveal interaction, or the exact crop of each artwork. Preserve the comparison concept without inventing slider behavior.

### Reasons to Choose the School

**Role:** explain individual instruction, experienced instructors, lesson breadth, and scheduling convenience.

Four large white panels form a vertical sequence. Desktop panels are 1120px wide with `60px 70px` padding and 10px corners. Text columns measure 520px. Their alternating x positions show that the text moves from right to left between successive panels, leaving a substantial media region on the opposite side.

Headings are coral, 28px, bold, and set on 48px lines. Body copy is 16px on 30px lines. Card height varies from approximately 336px to 396px according to content.

Mobile changes these panels from flex layouts to block layouts. They use `31.2px 20.8px` padding, with the media region preceding the heading and body. The panel heights expand to roughly 514–636px. Do not preserve desktop fixed heights when stacking this content.

### Lesson Rail

**Role:** browse examples of lesson topics while retaining a route to the complete lesson directory.

The DOM contains a horizontal sequence of linked white cards, including repeated entries outside the viewport. Topics include body drawing, self-published books, digital illustration, beginner manga, anime shading, and character design. Each card contains a media region, title, description, and `もっと見る` cue.

Measured desktop cards are approximately `461.66 × 521.77px` with a 20px gap, 10px corners, and 30px title insets. The coordinates show two complete cards and part of another around the main content region, with additional entries beyond both sides.

The mobile sample still reports 461.66px-wide cards inside a 375px document. One card spans approximately x=−43.36px to x=418.30px, and its text region also extends beyond the document. This is a measured overflow condition; no corresponding mobile rail screenshot was supplied. It may reflect the carousel state or its sizing, so it should not be generalized into a fully verified responsive rule.

Repeated items and offscreen coordinates support a carousel-like rail. Autoplay, swipe behavior, controls, timing, and the carousel library were not verified. For reuse, prefer readable cards capped to the available width and keyboard-accessible navigation.

### School Directory

**Role:** connect visitors to local schools or online instruction.

The desktop section begins with `スクール一覧`, a violet `Schools` caption, two centered lines of explanatory copy, and two white jump controls. The controls are `240 × 53px`, with a 20px gap, dark labels, violet downward triangles, modest visible rounding, and soft shadows.

These are same-page anchors to `#whole_country` and `#online`, not evidence of a tab interface.

Below the nationwide heading, a broad white panel groups 18 schools into six regions. Desktop uses two region columns. The visible panel is approximately 1120px wide with 60px inner insets. Region label strips are pale gray; school names are larger dark links preceded by colored circular arrow markers. The screenshot shows purple for the northern group, cyan for the eastern group, orange for the central group, and green for the western group.

Mobile retains both jump controls in one row, each approximately 161.5px wide. Region groups stack vertically. Individual school links wrap naturally: short names can share a row, while longer names occupy more space. The school names remain relatively large at 18.72px rather than shrinking to the introductory paragraph size.

The online section follows as a distinct content group with a link to the online-lesson page and a route to the complete school listing. Its full desktop visual treatment was not supplied.

### Pricing, Services, Benefits, and FAQ

**Role:** answer practical questions after the school and lesson overview.

The rendered content establishes two pricing groups: in-person individual instruction and online individual instruction. Both distinguish younger students from high-school/adult students and include course frequency, detail links, and explanatory notes. The sampled copy displays starting monthly amounts of 9,800 and 12,800 yen; these are captured content, not permanent design tokens.

Mobile pricing text uses several smaller roles: 12.48px for course details and 13.52px for supporting notes. The two plan groups occur sequentially in the mobile document. Desktop plan geometry was not included in the sampled element list, so a side-by-side comparison layout should not be asserted as measured.

The services section contains two numbered entries, `01` and `02`, with Montserrat numerals, coral headings, supporting media areas, and descriptive paragraphs. A separate benefit section introduces CLIP STUDIO PAINT DEBUT and eligibility information.

The FAQ includes four question-and-answer groups in the rendered text, followed by a link to more questions. No disclosure interaction was exercised. Treat accordion behavior, initial expansion, and icons as unverified rather than inferring them from the FAQ label.

### Persistent Contact Banners

**Role:** keep trial booking and LINE consultation available during long-page browsing.

Desktop captures show two promotional banners near the lower-right area: a wider booking banner with small character artwork and a narrower LINE banner. Their visible bounds are approximately 260 × 76px and 180 × 76px, separated by about 10px. Strong red and green frames differentiate them from the quieter content cards.

Mobile converts this to a white bottom strip containing two compact horizontal banners. In the capture, the booking banner is approximately 185 × 43px and the LINE banner approximately 150 × 43px, with an 8px gap. Character artwork protrudes slightly above the booking graphic.

The corresponding links have empty extracted text, so the provided text dump cannot establish their accessible names. The banners appear asset-based, but their source files and exact DOM implementation were not supplied.

### Footer and Top Control

**Role:** provide a complete site map and repeat the brand after a long page.

Desktop uses a white footer with a left-aligned tagline and wordmark, followed by dense groups of links. Lesson and school links expand into multiline directories separated by small vertical dividers. Small violet triangles introduce higher-level links. The right side repeats the large character composition and overlays a translucent white enrollment panel.

The footer ends in a full-width pink-to-blue copyright strip, approximately 60px high in the desktop capture. The visible copyright reads `© 2021 Smiles. LLC`.

Mobile simplifies the footer into two columns of top-level links. The long lesson and location sublists are absent from the visible mobile footer. A smaller character group is anchored to the lower-right corner above a copyright strip approximately 41px high. The desktop floating enrollment panel is absent; the preceding CTA section and bottom contact strip provide those routes instead.

A pale circular `TOP` control with a violet outline appears near the lower-right corner: approximately 64px on desktop and 60px on mobile. Its appearance is observed; click behavior and scroll timing were not tested.

## Tokens — Motion & Interaction

| Treatment | Measured evidence | What is and is not established |
| --- | --- | --- |
| Header transition | `0.3s cubic-bezier(0.53, 0.165, 0.325, 0.96)` | A transition is declared. Persistent and white scrolled appearances are captured; the exact transition trigger is not recorded. |
| Main CTA anchors | `box-shadow 0.3s cubic-bezier(0.53, 0.165, 0.325, 0.96), color 0.3s linear` | Shadow and color can transition. Hover end values were not supplied. |
| Story and lesson cards | `box-shadow 0.3s linear` | Supports a short shadow transition, without proving its resting or hover magnitude. |
| Submenu links | `0.3s cubic-bezier(0.53, 0.165, 0.325, 0.96)` | Timing is measured; open-state interaction is untested. |
| School links | `0.3s linear` | Transition timing is measured; the changed properties are not fully identified. |
| Enrollment-information link | `0.2s` | Short declared transition; no demonstrated end state. |
| Illustration-style selection | Visible controls and state-confirmation text | Available state labels are supported; transition, persistence, and affected assets are unverified. |
| Lesson movement | Repeated rail items and offscreen rectangles | Rail structure is supported; autoplay and gesture behavior are unverified. |
| Decorative strokes | SVG text includes a 74-unit stroke with round caps and joins | Stroke geometry is supported in SVG coordinates. A drawing animation cannot be inferred from the class name. |
| Menu visibility | Supplied text includes closed/open visibility rules | Distinct visibility states exist; activation behavior and focus management were not inspected. |

Many sampled elements report `animation: none`. That does not establish that the whole website is static: pseudo-elements, SVG content, and JavaScript-driven motion were not comprehensively sampled.

The collection process waited for initial loading, finite animation completion, layout/text stability, and image decoding within bounded time limits. Perpetual animations were temporarily paused during readiness checks and resumed afterward. These still captures do not reveal a reliable motion sequence or prove that delayed content never appears.

For a new implementation, reuse the measured 200–300ms timing family for restrained interface feedback. Do not add continuous character bobbing, parallax, automatic theme cycling, or drawing animations and describe them as observed behavior.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Page canvas | `#f5f5f5`, with extremely faint vertical divisions visible in desktop captures | Creates open space around colorful artwork. |
| Content cards | White with approximately 10px corners | Groups student evidence, teaching reasons, and lessons. |
| Directory panel | Broad white surface with pale gray region strips | Supports dense location information. |
| Action face | Orange/red or green gradient with white content | Distinguishes the two conversion routes. |
| Utility controls | White with diffuse gray shadow and violet cues | Login, jump links, taste prompt, and style selector. |
| Mobile headline bands | Translucent pastel-to-blue rectangles | Separates white text from detailed artwork. |
| Footer CTA panel | Translucent white over illustration | Makes the desktop enrollment block readable. |
| Copyright band | Strong horizontal pink-to-blue gradient | Provides a colorful ending to the site. |

Shadows are broad and soft in the captures, especially around white utility controls. Their actual computed values were not included. A reusable estimate such as `0 8px 28px rgb(0 0 0 / 0.12)` is appropriate as a starting point, not as a measured token.

Avoid making every surface translucent. Most information sits on ordinary white cards. The illustrated footer overlay is a specific exception, and no backdrop-blur behavior was established.

## Imagery

The visual identity depends on polished character illustration. The two largest figures use clean contours, bright blue clothing, pink hair, luminous eyes, and carefully shaded faces. Supporting figures demonstrate different visual approaches: traditional clothing, chibi proportions, monochrome action drawing, and a contemporary character portrait.

The collage works because the characters overlap at different scales while their faces remain legible. Preserve that hierarchy: the principal pair is dominant, smaller examples fill the lower and side areas, and the pastel stroke remains behind them. Avoid equal-sized portrait tiles or a generic full-bleed rectangular image.

Artwork is smooth and detailed. Use normal image rendering; there is no basis for applying pixelated scaling to this design. Transparent or otherwise precisely masked character assets are preferable when authorized and available.

The decorative marks resemble broad diagonal pen strokes with rounded ends. They are low contrast behind content and much stronger in small utility controls and the footer strip. Faint vertical background divisions add structure without becoming a visible grid overlay.

### Observed Asset References

No original image URLs, filenames, dimensions, or complete asset manifest were supplied. The following are visual references, not downloadable asset paths.

| Asset family | Evidence | Reuse guidance |
| --- | --- | --- |
| egaco wordmark | Current desktop and mobile headers/footers | Use the authorized logo artwork; do not substitute plain text for a faithful reconstruction. |
| Principal character composition | Current desktop hero/footer and mobile hero/footer | Preserve the dominant pair and supporting cast hierarchy; provide separate mobile art direction where needed. |
| Illustration-style previews | Taste card, desktop vertical selector, mobile header bubbles | Use consistent circular crops and a clearly distinguished current selection. |
| Pastel drawing stroke | Desktop directory background and hero/footer decoration | Reproduce with an authorized vector asset or a custom rounded path; exact path data is unavailable. |
| Comparison artwork | `Before`/`After` student-story content in the DOM | Obtain the actual student assets; exact presentation was not visually supplied. |
| Lesson and reason media | Card structure and reserved media space in the DOM | Do not infer specific photographs or illustrations from uninspected regions. |
| Booking and LINE banners | Current fixed desktop/mobile controls | Use responsive banner assets or accessible HTML equivalents with the same hierarchy. |

CSS can reproduce the layout, gradients, cards, and buttons. It cannot supply the character identity or the student artwork.

## Layout & Responsive Behavior

### Page Sequence

The current homepage follows this order: hero, trial/LINE band, student progress, teaching reasons, another enrollment block, lesson rail, school directory, online instruction, pricing, services, benefits, another enrollment block, FAQ, final enrollment block, and footer.

This is a full school website with routes into lessons, local schools, fees, instructors, student experiences, and support content. The repeated trial prompts sit within that broader information architecture.

### Desktop Structure

Most sections use a centered 1280px outer wrapper with 80px horizontal padding, creating a 1120px inner content width. At the recorded 1425px document width, the wrapper starts at x=72.5px and its inner content at x=152.5px.

The hero and footer use a wider composition. Hero copy starts at x=80px, and artwork reaches the right edge. The desktop hero-to-CTA boundary appears around y=967px in the capture; it is not evidence for an exact `100vh` hero. The first main CTA pair begins at measured y=1017px.

Cards use two different kinds of density: the student stories form a 540px-wide two-column grid, while teaching reasons span the full inner width. The lesson rail deliberately extends horizontally beyond that inner grid. The school directory returns to a contained two-column arrangement.

### Mobile Recomposition

| Area | Observed mobile change |
| --- | --- |
| Header | Approximately 80px high; wordmark, character bubbles, and circular menu control replace desktop navigation. |
| Hero | Characters fill the composition; headline becomes white on two gradient ribbons; desktop supporting sentence is absent. |
| Main CTA pair | Stacks vertically below the artwork. |
| Student stories | Four cards form a single column with approximately 20.8px gaps. |
| Teaching reasons | Media precedes text inside vertically stacked cards. |
| Section headings | Reduce to approximately 25px Japanese titles with 14.56px English captions. |
| Introductory prose | Some roles shrink to 12.48px; ordinary paragraphs remain 15.6px. |
| School controls | Remain side by side at approximately 161.5px each. |
| School directory | Six region groups stack; school links wrap within each group. |
| Lesson rail | Sampled card width exceeds the document; exact intended mobile presentation is uncertain. |
| Footer | Two compact columns of top-level links, smaller corner artwork, and no desktop overlay CTA panel. |
| Persistent contact | Becomes a full-width bottom strip containing two compact banners. |

The evidence provides two viewport endpoints, not a complete responsive stylesheet. A header-collapse breakpoint around 1200px and a content-stacking breakpoint around 768px are reasonable recommendations for a new implementation; they are not source measurements.

Do not hardcode a 15px right margin to imitate the capture gutter. Size layouts against the available document width. Also reserve enough space for the fixed mobile contact strip, safe-area insets, and focused content near the bottom edge.

## Do’s and Don’ts

### Do

- Keep the gray canvas, white information surfaces, and charcoal text as the stable foundation.
- Preserve the dominant blue-and-white character pair and the supporting range of drawing styles.
- Use Noto Sans JP for Japanese content and Montserrat for the measured English caption roles.
- Retain the generous tracking and line height of the main Japanese headings.
- Use cyan, coral, mint, and violet consistently for their observed section roles.
- Keep orange/red trial actions and green LINE actions visually distinct.
- Recompose the mobile hero with white ribbon text over the artwork.
- Preserve the directory’s regional grouping and readable school links.
- Give long card titles enough vertical space rather than enforcing identical heights everywhere.
- Keep utility shadows soft and localized.
- Distinguish visible controls from interactions that still require verification.

### Don’t

- Don’t replace the character collage with generic stock imagery or equal-sized avatar cards.
- Don’t apply the pastel brand gradient to every primary action.
- Don’t use the root’s 18px line height for body paragraphs.
- Don’t treat transparent outer-anchor styles as a complete description of the visible button.
- Don’t shrink the desktop layout uniformly onto a phone; its hero, navigation, cards, and footer change structure.
- Don’t reproduce the sampled mobile rail overflow as an unquestioned requirement.
- Don’t infer autoplay, a draggable comparison slider, FAQ accordions, or menu behavior from labels alone.
- Don’t assume the drawing-stroke class proves a stroke-reveal animation.
- Don’t turn general WordPress presets into site-specific tokens without visible evidence.
- Don’t let persistent promotional controls obscure the final links or keyboard focus in a new implementation.

## Recommended Implementation Additions

These are recommendations for reuse, not verified features of the original page:

- Use one meaningful page H1. Keep the linked logo separate from the hero’s document heading.
- Give the mobile menu an accessible name, `aria-expanded`, an associated navigation region, and appropriate keyboard behavior. If implemented as a modal, manage focus and Escape dismissal.
- Make illustration choices real buttons with descriptive names and a selected state. Announce changes without automatically moving focus.
- Give asset-based booking and LINE links explicit accessible names.
- Audit white text against every gradient stop. Adjust label size, weight, or fill darkness where necessary, particularly on green and pale ribbons.
- Retain a visible focus outline that remains distinct on white, pastel, and gradient backgrounds.
- Offset anchor targets for the persistent header so school headings remain visible after navigation.
- Cap mobile lesson cards to readable widths. If a looping carousel uses clones, remove redundant clones from keyboard and assistive-technology navigation.
- Honor reduced-motion preferences for any implemented decorative animation or carousel autoplay.
- Provide useful alternatives for student comparison artwork; treat purely decorative strokes as hidden from assistive technology.
- Reserve bottom space for the contact dock and device safe areas. Verify the footer and Top control at short viewport heights and enlarged text sizes.
- Load authorized font files and responsive artwork deliberately. Give important images dimensions to limit layout shifts, and avoid loading every alternate character set eagerly if it is not needed immediately.

## Agent Prompt Guide

### Quick Color Reference

- Canvas: measured `#f5f5f5`.
- Information surfaces: measured `#ffffff`.
- Main text: measured `#222222`.
- Student-progress accent: measured `#33b6dd`.
- Teaching-reason and pricing accent: measured `#ef3e4c`.
- Lesson accent: measured `#2cc697`.
- School accent: measured `#6c5ded`.
- Enrollment-information link: measured `#3a29cc`.
- Pastel pink/blue wash, trial orange/red, and LINE green: use the estimated gradients above and validate against current captures.

### Overall Prompt

“Create a responsive illustration-school homepage based on the current egaco visual system. Use a light gray canvas, white cards with approximately 10px corners, charcoal Noto Sans JP headings, and small Montserrat English captions. Build a wide desktop hero with a two-line promise on the left and a large overlapping cast of polished character illustrations on the right. Place thin oversized outline lettering and pale rounded drawing strokes behind the art. On mobile, recompose the artwork to fill the hero and overlay the headline on two translucent pink-to-blue ribbons. Include student progress stories, teaching-reason panels, a lesson rail, a regional school directory, pricing, support content, and a practical site-map footer. Keep the trial action orange-to-red and the LINE action green. Clearly separate confirmed appearance from any newly designed interaction.”

### Example Component Prompts

1. **Desktop header:** “A 112px-high persistent school header with a compact black illustrated wordmark, six Japanese navigation categories, small downward triangles for grouped links, a white shadowed login pill, and a warm-gradient trial pill. Keep broad spacing and clear alignment.”
2. **Mobile hero:** “A character composition filling the opening area beneath a compact 80px header. Keep the principal faces visible, allow body cropping at the edges, and place two individually sized translucent gradient ribbons across the center. Use bold white Japanese text and a rounded white illustration-style prompt below.”
3. **Student story:** “A white 10px-radius linked card with a leading before/after artwork comparison, elapsed learning period, date, medium-weight Japanese title, student details, and lesson/school metadata. Use a two-column desktop grid and one mobile column. Do not invent a drag interaction.”
4. **School directory:** “A centered Japanese heading and violet English caption above two white jump controls. Follow with a wide white directory panel, pale gray region headers, and dark school links preceded by small colored circular arrows. Stack regions on mobile while allowing short school links to share a row.”
5. **Conversion band:** “A pale pink-to-blue background containing a warm-gradient trial pill and a green LINE pill. Each has a left icon, bold Japanese action, smaller availability line, and right triangle. Arrange side by side on desktop and vertically on mobile, with an underlined violet information link below.”
6. **Footer:** “A white site-map footer with the wordmark and dense links on the left, a large character composition on the right, and a translucent white enrollment panel over the art. On mobile, simplify to two columns of top-level links and a small lower-right illustration. Finish with a pink-to-blue copyright strip.”

## Quick Start

### CSS Custom Properties

This is an implementation starter, not copied production CSS. Exact neutral colors, measured accent colors, type roles, desktop container dimensions, and transition timings are retained. Gradient stops, shadow values, decorative positioning, and breakpoints are recommendations. The mobile lesson width is intentionally constrained for readability.

Load authorized Noto Sans JP and Montserrat font resources separately. Supply the logo, character composition, comparison artwork, and banners as actual assets. The selectors below assume corresponding semantic markup; CSS alone does not implement menu opening, illustration switching, carousel logic, or application flows.

```css
:root {
  /* Measured colors */
  --canvas: #f5f5f5;
  --surface: #ffffff;
  --ink: #222222;
  --accent-violet: #6c5ded;
  --accent-cyan: #33b6dd;
  --accent-coral: #ef3e4c;
  --accent-mint: #2cc697;
  --link: #3a29cc;

  /* Estimated appearance tokens */
  --wash: linear-gradient(110deg, #f9dff5, #adcaff);
  --brand-gradient: linear-gradient(110deg, #e58ce3, #4d85f2);
  --trial-gradient: linear-gradient(180deg, #ff681d, #f5354d);
  --line-gradient: linear-gradient(180deg, #12c957, #20ba0d);
  --soft-shadow: 0 8px 28px rgb(0 0 0 / 0.12);
  --outline-color: #b39aff;

  /* Measured font families */
  --font-jp: 'Noto Sans JP', sans-serif;
  --font-latin: 'Montserrat', sans-serif;

  /* Desktop geometry */
  --section-width: 1280px;
  --section-inset: 80px;
  --section-space: 120px;
  --header-height: 112px;
  --card-radius: 10px;
  --pill-radius: 36px;

  /* Measured transition family */
  --ease-ui: cubic-bezier(0.53, 0.165, 0.325, 0.96);
  --duration-ui: 300ms;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html {
  scroll-padding-top: calc(var(--header-height) + 20px);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--font-jp);
}

img { max-width: 100%; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.egaco-page {
  /* Estimated faint vertical divisions */
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 159px,
    rgb(34 34 34 / 0.018) 159px 160px
  );
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-height);
  padding-inline: 43px 37px;
  transition: background-color var(--duration-ui) var(--ease-ui);
}

/* Recommended state hook, to be controlled by application code */
.site-header.is-scrolled { background: var(--surface); }

.site-logo { display: block; width: 141px; flex: 0 0 auto; }
.site-logo img { display: block; width: 100%; height: auto; }

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}

.desktop-nav a {
  text-decoration: none;
  white-space: nowrap;
}

.header-tools { display: flex; align-items: center; gap: 16px; }

.menu-button {
  display: none;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: white;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 967px;
  overflow: clip;
}

.hero__outline {
  position: absolute;
  z-index: -1;
  top: 125px;
  left: -0.03em;
  margin: 0;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--outline-color);
  font-size: clamp(120px, 18vw, 260px);
  line-height: 1;
  pointer-events: none;
}

.hero__art {
  position: absolute;
  z-index: 0;
  top: 48px;
  right: 0;
  width: min(64%, 900px);
  height: calc(100% - 98px);
  object-fit: contain;
  object-position: right bottom;
}

.hero__copy {
  position: relative;
  z-index: 1;
  padding: 394px 80px 0;
}

.hero__title {
  margin: 0;
  font-size: 42px;
  line-height: 65px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.hero__line { display: block; }

.hero__tagline {
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.taste-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  width: 400px;
  max-width: 100%;
  min-height: 100px;
  margin-top: 56px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--soft-shadow);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.taste-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.taste-card__copy {
  align-self: center;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 24px;
}

.section {
  width: min(100%, var(--section-width));
  margin-inline: auto;
  padding: var(--section-space) var(--section-inset) 0;
}

.section-heading { margin-bottom: 60px; text-align: center; }

.section-heading h2 {
  margin: 0;
  font-size: 40px;
  line-height: 64px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.section-kicker {
  margin: 5px 0 0;
  color: var(--section-accent, var(--accent-violet));
  font: 500 21px / 42px var(--font-latin);
  letter-spacing: 0.05em;
}

.section-lead,
.body-copy {
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 0.05em;
}

.section-lead { margin: 18px 0 0; }

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

.content-card {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--card-radius);
  background: var(--surface);
  text-decoration: none;
  transition: box-shadow 300ms linear;
}

.card-body { padding: 20px; }

.story-title {
  margin: 0;
  font-size: 20px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.feature {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 80px;
  align-items: center;
  margin-top: 30px;
  padding: 60px 70px;
  border-radius: var(--card-radius);
  background: var(--surface);
}

.feature--reverse { grid-template-columns: minmax(0, 1fr) 380px; }
.feature--reverse .feature__media { order: 2; }
.feature--reverse .feature__copy { order: 1; }
.feature__media img { display: block; width: 100%; height: auto; }

.feature h3 {
  margin: 0 0 30px;
  color: var(--accent-coral);
  font-size: 28px;
  line-height: 48px;
  letter-spacing: 0.03em;
}

/* Recommended native scrolling fallback, not the original carousel logic */
.lesson-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.lesson-rail > .content-card {
  flex: 0 0 461.66px;
  scroll-snap-align: start;
}

.school-jumps {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 42px;
}

.school-jump {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 240px;
  min-height: 53px;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--soft-shadow);
  text-decoration: none;
}

.school-jump::after {
  content: '';
  width: 0;
  height: 0;
  border-inline: 5px solid transparent;
  border-top: 7px solid var(--accent-violet);
}

.school-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px 120px;
  padding: 60px;
  border-radius: var(--card-radius);
  background: var(--surface);
  box-shadow: var(--soft-shadow);
}

.region-title {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 5px;
  background: var(--canvas);
  font-size: 16px;
  font-weight: 400;
}

.school-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
}

.school-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 20px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.school-links a::before {
  content: '▸';
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--region-color, var(--accent-violet));
  color: white;
  font-size: 15px;
}

.cta-band {
  padding: 50px 20px;
  background: var(--wash);
  text-align: center;
}

.cta-row {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.cta {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 10px;
  align-items: center;
  gap: 12px;
  width: 356px;
  max-width: 100%;
  min-height: 71px;
  padding: 12px 24px;
  border-radius: var(--pill-radius);
  color: white;
  text-align: center;
  text-decoration: none;
  transition:
    box-shadow 300ms var(--ease-ui),
    color 300ms linear;
}

.cta--trial { background: var(--trial-gradient); }
.cta--line { background: var(--line-gradient); }
.cta__label { display: block; font-size: 18px; font-weight: 700; }
.cta__note { display: block; margin-top: 3px; font-size: 12px; }
.cta__icon { width: 28px; height: 28px; }
.cta__arrow { font-size: 13px; }

.cta-info {
  display: table;
  margin: 16px auto 0;
  color: var(--link);
  font-size: 15px;
  line-height: 26px;
  text-underline-offset: 7px;
}

.site-footer {
  position: relative;
  isolation: isolate;
  margin-top: 80px;
  padding: 64px 80px 0;
  overflow: clip;
  background: var(--surface);
}

.footer-nav { position: relative; z-index: 1; max-width: 700px; }
.footer-nav a { text-decoration: none; }

.footer-art {
  position: absolute;
  right: 0;
  bottom: 60px;
  z-index: -1;
  width: 50%;
  height: auto;
}

.footer-copyright {
  margin: 64px -80px 0;
  padding: 20px 80px;
  background: var(--brand-gradient);
  color: white;
  font-size: 11px;
  line-height: 20px;
}

/* Supply separate desktop/mobile banner artwork where available */
.contact-dock {
  position: fixed;
  right: 120px;
  bottom: 24px;
  z-index: 60;
  display: grid;
  grid-template-columns: 260px 180px;
  align-items: end;
  gap: 10px;
}

.contact-dock a { display: block; }
.contact-dock img { display: block; width: 100%; height: auto; }

:where(a, button):focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 4px;
}

/* Recommended hover value; the original end-state shadow is unknown */
@media (hover: hover) {
  .content-card:hover,
  .cta:hover { box-shadow: var(--soft-shadow); }
}

/* Recommended header-collapse threshold */
@media (max-width: 75rem) {
  .desktop-nav,
  .header-tools { display: none; }
  .menu-button { display: grid; margin-left: auto; }
  .feature,
  .feature--reverse {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    padding-inline: 40px;
  }
}

/* Recommended compact-layout threshold */
@media (max-width: 48rem) {
  :root {
    --section-inset: 20.8px;
    --section-space: 62.4px;
    --header-height: 80px;
    --card-radius: 10.4px;
    --pill-radius: 37.44px;
  }

  body { padding-bottom: calc(78px + var(--safe-bottom)); }
  .site-header { padding-inline: 20.8px 14.56px; }
  .site-logo { width: 95.53px; }

  .hero { min-height: 522px; }
  .hero__art {
    top: 48px;
    width: 100%;
    height: calc(100% - 48px);
    object-fit: cover;
    object-position: center top;
  }
  .hero__outline { top: 80px; font-size: 130px; }
  .hero__copy { padding: 228px 0 20px; }
  .hero__title {
    color: white;
    font-size: clamp(25px, 8vw, 31.2px);
    line-height: 1;
    letter-spacing: 0.1em;
    text-align: center;
  }
  .hero__line {
    display: table;
    max-width: 100%;
    margin: 0 auto 12px;
    padding: 8px 6px;
    background: linear-gradient(
      110deg,
      rgb(229 140 227 / 0.86),
      rgb(77 133 242 / 0.86)
    );
  }
  .hero__tagline { display: none; }
  .taste-card {
    width: calc(100% - 28px);
    min-height: 84px;
    margin: 70px auto 0;
    border-radius: 20px;
  }
  .taste-card__copy { padding: 12px; font-size: 13px; line-height: 22px; }

  .section-heading { margin-bottom: 41.6px; }
  .section-heading h2 { font-size: 24.96px; line-height: 41.6px; }
  .section-kicker { font-size: 14.56px; line-height: 29.12px; }
  .section-lead { font-size: 12.48px; line-height: 24.96px; }
  .body-copy { font-size: 15.6px; line-height: 29.12px; }

  .story-grid { grid-template-columns: 1fr; gap: 20.8px; }
  .card-body { padding: 20.8px; }
  .story-title { font-size: 15.6px; line-height: 29.12px; }

  .feature,
  .feature--reverse {
    grid-template-columns: 1fr;
    gap: 20.8px;
    margin-top: 20.8px;
    padding: 31.2px 20.8px;
  }
  .feature--reverse .feature__media,
  .feature--reverse .feature__copy { order: initial; }
  .feature h3 { margin-bottom: 20.8px; font-size: 20.8px; line-height: 35.36px; }

  .lesson-rail { gap: 12px; }
  .lesson-rail > .content-card { flex-basis: min(461.66px, 100%); }

  .school-jumps { gap: 10.4px; margin-top: 20.8px; }
  .school-jump { flex: 1; min-width: 0; padding-inline: 12px; font-size: 14px; }
  .school-panel { grid-template-columns: 1fr; gap: 32px; padding: 31.2px 20.8px; }
  .school-links a { font-size: 18.72px; line-height: 31.2px; }

  .cta-band { padding: 35px 20px 24px; }
  .cta-row { flex-direction: column; align-items: center; gap: 16.64px; }
  .cta { width: 308.88px; min-height: 62.4px; padding: 10px 20px; }
  .cta__label { font-size: 16.64px; }
  .cta-info { font-size: 15.6px; line-height: 27.04px; }

  .site-footer { padding: 50px 20.8px 0; }
  .footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .footer-art { width: 57%; bottom: 41px; }
  .footer-copyright { margin-inline: -20.8px; padding: 10px 10px; }

  .contact-dock {
    inset: auto 0 0;
    grid-template-columns: 1.23fr 1fr;
    gap: 8px;
    padding: 14px 16px calc(18px + var(--safe-bottom));
    background: rgb(255 255 255 / 0.96);
  }
  .contact-dock a { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .egaco-page *,
  .egaco-page *::before,
  .egaco-page *::after {
    animation: none !important;
    transition: none !important;
  }
  /* Application code should also disable any JavaScript autoplay. */
}
```

The desktop hero dimensions approximate the supplied composition; the actual character asset determines the final crop. For mobile, prefer a dedicated composition through `<picture>` rather than expecting one desktop collage to crop correctly at every aspect ratio. The starter centers mobile CTA buttons normally; the original sampled buttons were slightly offset within the document canvas.

A compact example of the action anatomy follows. Decorative symbols here are placeholders for authorized icons, not a claim about the original icon implementation.

```html
<section class='cta-band' aria-label='Trial and consultation'>
  <div class='cta-row'>
    <a class='cta cta--trial' href='https://school.egaco.com/trial'>
      <span class='cta__icon' aria-hidden='true'>▣</span>
      <span>
        <span class='cta__label'>無料体験に申し込む</span>
        <span class='cta__note'>（24時間受付中）</span>
      </span>
      <span class='cta__arrow' aria-hidden='true'>▶</span>
    </a>
    <a class='cta cta--line' href='https://lin.ee/wBCKNKb'>
      <span class='cta__icon' aria-hidden='true'>○</span>
      <span>
        <span class='cta__label'>LINEで相談する</span>
        <span class='cta__note'>（24時間受付中）</span>
      </span>
      <span class='cta__arrow' aria-hidden='true'>▶</span>
    </a>
  </div>
  <a class='cta-info' href='https://comic.smiles55.jp/trial-flow/'>
    無料体験・入会についてはこちら
  </a>
</section>
```

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-canvas: var(--canvas);
  --color-surface: var(--surface);
  --color-ink: var(--ink);
  --color-school: var(--accent-violet);
  --color-progress: var(--accent-cyan);
  --color-reason: var(--accent-coral);
  --color-lesson: var(--accent-mint);
  --color-link: var(--link);

  --font-sans: var(--font-jp);
  --font-caption: var(--font-latin);

  --radius-card: var(--card-radius);
  --radius-action: var(--pill-radius);
  --spacing-section-inset: var(--section-inset);
  --spacing-section-space: var(--section-space);
  --shadow-soft: var(--soft-shadow);
}
```

## Sources & Evidence

- **Inspected original and final website:** [https://comic.smiles55.jp/](https://comic.smiles55.jp/). The supplied browser record reports HTTP 200 and no URL change.
- **Capture timestamp:** `2026-10-01T21:16:19.910Z`, equivalent to October 2, 2026, 06:16:19.910 JST.
- **Desktop evidence:** three current-page captures at 1440 × 1000 CSS pixels, showing the opening hero, school directory, and footer; measured document width 1425px and height approximately 14269.14px.
- **Mobile evidence:** two current-page captures at 390 × 844 CSS pixels, showing the opening composition and footer; measured document width 375px and height approximately 15974.23px.
- **Rendered evidence:** page title, text, link destinations, selected element rectangles, font families, sizes, weights, line heights, tracking, padding, backgrounds, radii, and transition declarations at both viewports.
- **Observed states:** initial and scrolled page positions, persistent header/contact controls, responsive hero and footer differences, and the visible closed mobile menu control. No click-through, hover sequence, style switch, FAQ toggle, or carousel gesture was supplied.
- **Inspection limits:** the computed-style sample is selective; descendant and pseudo-element styling is incomplete. No image manifest or complete stylesheet was supplied. Several lower-page sections are supported by DOM content rather than screenshots. Asset URLs, exact gradient definitions, shadow values, responsive breakpoints, interaction outcomes, and production implementation details remain unverified.

This reference describes the current homepage represented by the supplied inspection. Estimated appearance tokens and recommended implementation behavior are explicitly separated from measured evidence.