# ALLERU — Style Reference

> A friendly allergy guide built from blush pink, rounded lettering, and expressive illustrated characters.

**Website:** [alleru.com](https://alleru.com/)
**Original URL:** https://alleru.com/
**Final URL:** https://alleru.com/
**Theme:** light, with pale pink educational sections and a stronger pink contribution area
**Inspected:** October 2, 2026, Japan Standard Time; supplied retrieval timestamp: October 1, 2026, 17:45:35.864 UTC
**Viewports:** desktop 1440 × 1000 and mobile 390 × 844 CSS pixels
**Scope:** the current homepage: opening composition, three condition-specific content groups, pharmacist consultation panel, concern-sharing form, usage notice, footer, and persistent navigation. Child pages, the opened menu, external destinations, and submission results were not inspected.

ALLERU presents allergy information through an approachable illustrated world. A softly shaded pink wordmark, a worried blond character, and a reassuring pharmacist character establish the identity. The surrounding interface stays simple: rounded Japanese text, generous line spacing, pill-shaped links, white panels, and small scalloped badges. Pale face motifs repeat across the background without competing with the content.

This is an information and consultation homepage with several destinations. Visitors can explore atopic dermatitis, asthma, or allergic rhinitis, open individual questions, consult a pharmacist through LINE, or share a concern. Its design should preserve this branching information structure alongside the expressive opening artwork.

## How to Read This Reference

- **Measured** values come from supplied computed styles and element rectangles. Dimensions below are rounded where useful.
- **Visual estimates** describe the original-page screenshots. Estimated colors are approximations, not sampled pixels or recovered CSS declarations.
- **Derived relationships** are calculations from the two inspected sizes. They do not establish the original stylesheet formulas or breakpoints.
- **Recommended implementations** include the reusable CSS, accessibility additions, and proposed intermediate-width behavior. These are explicitly separate from verified original behavior.
- The document root reports `16px` at both sizes. The body reports `16.8667px` on desktop and `14px` on mobile. Do not confuse body-relative `em` measurements with root-relative `rem` measurements.
- Scrolled screenshots and DOM rectangles are separate observations. Their vertical coordinates should not be combined into a supposedly exact stitched page.

## Tokens — Colors

### Measured Interface Palette

These hexadecimal values are direct conversions of supplied computed RGB values. Token names are implementation aliases, not recovered source variables.

| Name | Value | Suggested token | Observed role |
| --- | --- | --- | --- |
| Brand Pink | `#ff4b78` | `--brand-pink` | Introductory text, outlined About link, navigation accents, social icons |
| White | `#ffffff` | `--surface-white` | Consultation panel, reversed labels, underlying body background |
| Body Gray | `#555555` | `--text-body-color` | Consultation heading and supporting text; inherited body color |
| LINE Green | `#06c755` | `--line-green` | Circular hero consultation link and consultation-panel button |
| Atopic Purple | `#874fb2` | `--atopic-ink` | Atopic dermatitis links and question text |
| Atopic Tint | `#f1e4ff` | `--atopic-tint` | Atopic dermatitis guide pill |
| Asthma Gold | `#cfa51c` | `--asthma-ink` | Asthma links and question text |
| Asthma Tint | `#fffcea` | `--asthma-tint` | Asthma guide pill |
| Rhinitis Teal | `#56b5b3` | `--rhinitis-ink` | Allergic rhinitis links and question text |
| Rhinitis Tint | `#daefee` | `--rhinitis-tint` | Allergic rhinitis guide pill |

The condition colors organize content consistently: the guide link, category label, large question marker, and question text share a family. Green has a different role: it identifies the LINE consultation destination.

### Visually Estimated Background Colors

| Name | Approximation | Suggested token | Evidence and limitation |
| --- | --- | --- | --- |
| Pale Blush | `#fff4f7` | `--canvas-blush` | Opening canvas appears almost white with a pink cast |
| Pink Edge Glow | `#ffdee7` | `--canvas-edge` | Stronger pink is visible around the middle-page margins |
| Contribution Pink | `#ff94ae` | `--share-pink` | Form and usage-notice background in the lower captures |

The screenshots show a pale central glow and pinker edges. The exact gradient stops, background layers, and decorative opacity were not supplied. Although the computed body background is white, the visible page is not uniformly white; additional rendered layers create the pink treatment.

The circular hero link's parent anchor reports Brand Pink as its computed text color, while its visible inner lettering is white. Preserve the visible child-label treatment rather than applying the parent's color to every descendant.

The captured WordPress administrative custom properties are not evidence of this page's visible design palette.

## Tokens — Typography

### Rounded Japanese Interface Type

- **Computed family:** `"Zen Maru Gothic", sans-serif`.
- **Body weight:** `500`.
- **Heading and major-link weight:** `700`.
- **Default tracking:** approximately `0.01em`.
- **Character:** rounded, approachable, and moderately substantial. The rounded forms support the cartoon artwork without making the informational text look handwritten.
- **Implementation alias:** `--font-body: 'Zen Maru Gothic', sans-serif`.

The stack is verified by computed styles. A font-file URL and font-loading trace were not supplied.

### Illustrated Identity

The large ALLERU lettering is artwork rather than a conventional text heading. Its uneven letter rotations, inflated pale interiors, pink edges, yellow curved marks, small mouth, and handwritten-looking slogan belong to the graphic composition.

The H1 has an empty extracted text value and a large graphic-sized rectangle. Its inherited `16.8667px` or `14px` font size does not describe the visible logo lettering. Do not reproduce the identity by enlarging the body font.

### Type Scale

| Role | Desktop | Mobile | Weight | Notes |
| --- | --- | --- | --- | --- |
| Default body | `16.8667px / 29.5168px` | `14px / 22.4px` | 500 | Line heights are approximately 1.75 and 1.6 respectively |
| Hero audience heading | `15.18px / 26.5651px` | `12.6px / 20.16px` | 700 | Approximately 0.9 times body size |
| Hero explanatory copy | `16.8667px / 42.1668px` | `14px / 35px` | 500 | A deliberately generous 2.5 line-height ratio |
| Main pill labels | `16.8667px / 16.8667px` | `14px / 14px` | 700 | Compact line box inside substantial vertical padding |
| Condition category labels | `16.8667px / 29.5168px` | `14px / 22.4px` | 700 | Centered above the question list |
| Question text | `16.8667px / 29.5168px` | `14px / 24.5px` | 500 | Mobile questions retain a 1.75 line-height ratio |
| Consultation heading | `21.0834px / 36.896px` | `17.5px / 28px` | 700 | Approximately 1.25 times body size; normal tracking |
| Contribution heading | `16.8667px / 29.5168px` | `14px / 22.4px` | 700 | White text; modest scale rather than a display headline |
| Usage-notice heading | `16.8667px / 29.5168px` | `14px / 22.4px` | 700 | Reversed white |
| Privacy link | `15.18px / 26.5651px` | `12.6px / 20.16px` | 500 | Smaller footer text |

The large `Q` markers are visibly heavier and larger than their question text, but their computed typography was not included. A size around `1.75em` is a useful implementation estimate, not a measured declaration.

Maintain the contrast between a very large illustrated identity and relatively small, carefully spaced interface text. The page does not rely on a sequence of oversized typographic section headings.

## Tokens — Spacing & Shapes

### Spacing Relationships

| Use | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Hero/content outer width | `1224px` | `331.5px` | Measured; both equal 85% of viewport width |
| Hero/content side margin | `108px` | `29.25px` | Measured; both equal 7.5% of viewport width |
| Corner-control inset | `21.6px` | `5.85px` | Measured; both equal 1.5% of viewport width |
| Hero top padding | `144px` | `117px` | Measured; equal 10vw and 30vw at these particular sizes |
| Audience heading to explanatory copy | `32px` | `32px` | Derived from adjacent measured rectangles |
| Explanatory copy to About link | `32px` | `32px` | Derived from adjacent measured rectangles |
| Guide pill to category label | `32px` | `32px` | Derived from measured rectangles |
| Category label to first question | `32px` | `32px` | Derived from measured rectangles |
| Space between questions | About `16.87px` | `14px` | Derived; approximately one body-sized `em` |
| Question marker gutter | `33.7334px` | `28px` | Measured left padding; approximately `2em` |
| Pill vertical padding | `25.3001px` | `21px` | Measured; approximately `1.5em` |
| Standard pill horizontal padding | `42.1668px` | `35px` | Measured; approximately `2.5em` |
| Contribution-section vertical padding | `108px` | `78px` | Measured |

The 32px pauses are important. They separate groups of related text without introducing dividers or extra containers.

### Shapes

| Element | Observed treatment |
| --- | --- |
| Menu and Q&A controls | Scalloped circular stamps; measured outer boxes are 72px desktop and about 62.4px mobile |
| Hero LINE link | True circle; 202.39px desktop and 112px mobile |
| Main pills | Computed radius 33.7334px desktop and 28px mobile, approximately `2em` |
| Topic cards | Soft white panels with rounded lower corners; corner radius visually around 28–30px on desktop |
| Consultation panel | Computed radius 28.8px desktop; 0px mobile |
| Pharmacy badge | Circular white mark with a dark outline; 144px desktop and 97.5px mobile |
| Textarea | White with rounded corners; radius visually around 16px |
| Usage notice | Fine white outline and approximately 16–18px corners |

Scalloped stamps, smooth circles, and pills serve different purposes. Preserve their individual silhouettes rather than making every element the same rounded rectangle.

### Principal Layout Measurements

| Element | Desktop | Mobile |
| --- | --- | --- |
| Recorded document height | About `3672.25px` | About `4526.73px` |
| Hero section | `1224 × 949.98px` | `331.5 × 972.13px` |
| Brand graphic/H1 rectangle | `673.19 × 316.39px` | `331.5 × 155.80px` |
| About link | `360 × 71.45px` | `331.5 × 58px` |
| Three-topic section | `1224 × 661.28px` | `331.5 × 1622.42px` |
| Individual guide pill | `315 × 69.45px` | `290.5 × 58px` |
| Topic graphic-link slot | `158.45 × 118.83px` | `131.80 × 98.84px` |
| Consultation panel | `1120 × 437.83px` | `390 × 330.88px` |
| Consultation button | `360 × 69.45px` | `351 × 58px` |
| Footer box | About `97.02px` high | About `79.14px` high |

The desktop topic-card widths are visually about 398px with approximately 15px between cards. Individual card containers were not included in the element measurements; these values are estimates consistent with the measured child positions.

## Components

### Persistent Corner Navigation

**Role:** maintain access to the menu and Q&A without occupying a conventional horizontal header bar.

The upper-left control is a white scalloped stamp with three pink wavy lines. Its desktop button box is 72 × 72px, with 18px padding. The mobile box is approximately 62.4 × 62.4px, with 15.6px padding.

The upper-right stamp uses a vivid pink field with the two-line white label `お悩み Q&A`. Its destination is `/qa/`. Both controls remain at the viewport corners in the supplied scrolled captures.

The DOM also contains menu labels for `ホーム`, `ALLERUについて`, `お悩みQ&A`, `お薬一覧`, and `閉じる`. The menu was not opened, so its panel layout, backdrop, animation, and focus behavior are unknown. These labels are not evidence of a visible desktop navigation row.

### Illustrated Hero

**Role:** establish identity and make the subject approachable before introducing the information architecture.

The desktop composition centers the brand graphic above the introduction. A blond patient character stands to the lower left, wearing a pink outfit marked with an `A` and holding a blue-toned phone. A mustached pharmacist character stands to the lower right in a white coat, green tie, blue trousers, and bright shoes, holding a green phone and raising one finger.

The artwork uses flat shapes with selective soft shading: cheeks, the inflated logo, and faint ground shadows. Keep complete character silhouettes and the visible phones. Cropping these figures into generic headshots would remove much of the scene's meaning.

At 1440px, the patient artwork visually occupies roughly 200 × 480px and the pharmacist roughly 200 × 530px. These are screenshot estimates, not image-element measurements.

The mobile composition changes order. The logo occupies the top, the characters sit together beneath it, and the explanatory content follows below their feet. The characters remain separate readable figures rather than shrinking the entire desktop scene into a single miniature image.

### Hero Consultation Circle

**Role:** provide an immediately recognizable external consultation route.

A green circle sits above and partly behind the pharmacist. Its visible white label is split into three short lines: `LINEで`, `薬剤師に`, and `相談する`, followed by a small LINE speech-bubble mark.

The desktop circle measures 202.39px in diameter at approximately x=1129, y=256. The mobile circle measures 112px at approximately x=253, y=278. Its overlap with the character is part of the composition.

The captured destination is `https://page.line.me/776yzipw?openQrModal=true`. This verifies the link target, not the behavior of the destination or whether it opens in a new tab.

### Introductory Copy and About Link

**Role:** explain the site's audience and purpose in a calm, readable block.

A centered, bold pink audience line reads `アトピー・ぜんそく・アレルギー性鼻炎に悩むみんなへ`. A fine pink wave runs beneath it. The treatment visually echoes the menu's wavy lines.

The explanatory copy is arranged as three lines followed by two more lines. It uses a 2.5 line-height ratio at both inspected sizes, creating an unusually airy rhythm for otherwise modest text.

The `ALLERUについて` link sits 32px beneath the copy. It is a wide outlined pill with a small circled arrow near the left edge and a centered label. Its destination is `/about/`. The desktop outline appears approximately 2px thick; the mobile treatment is finer. A 360px desktop width becomes the full 331.5px content-column width on mobile.

### Condition Guide and Question Card

**Role:** organize the educational content into three parallel topics.

Each topic follows the same sequence:

1. A linked graphic slot.
2. A tinted guide pill, such as `アトピーを知る`.
3. A centered bold link to that topic's concerns and experiences.
4. Three question links, each with an oversized `Q` marker and multiline text.

The condition-guide destinations are `/atopi/`, `/zensoku/`, and `/bien/`. Category links lead to the corresponding Q&A category routes. The supplied question anchors have individual article destinations; they are not evidence of an on-page accordion.

Desktop questions occupy a 315px link box. A 33.73px left gutter accommodates the marker, leaving about 281.28px for text. On mobile the link box is 290.5px, with a 28px marker gutter and a 262.5px text area.

The current desktop screenshot shows the lower portions of three white rounded panels and their purple, gold, and teal questions. The upper linked graphic slots are established by DOM geometry, but their artwork is not visible in the supplied original-page captures. Their specific illustration designs should remain unspecified.

### Pharmacist Consultation Panel

**Role:** repeat the direct-consultation route after visitors have explored the educational content.

The desktop panel is a centered white surface, 1120px wide, with 28.8px corners and generous interior space. Its visible stack contains a circular blue-backed character portrait, the heading `いつき博士に相談する`, a short gray invitation, and a green LINE pill.

The portrait is visually about 108px in diameter. The heading is measured at 21.08px, larger than the site's normal body text. The button is 360px wide and includes a white circled arrow on the left.

A separate circular pharmacy badge overlaps the panel's upper-right edge. The artwork names `足立いつき薬局` and links to `https://adachi-itsuki-pharmacy.com/`. This establishes a linked pharmacy badge; it does not independently identify the site's legal operator or production team.

On mobile the panel spans the full 390px viewport and loses its corner radius. Its content uses 19.5px side insets, producing a 351px button. The supporting sentence wraps onto two lines. The pharmacy badge becomes 97.5px in diameter and continues to overlap the upper-right area.

### Concern-Sharing Form

**Role:** let visitors contribute their experiences or concerns.

The contribution section changes the page to a stronger pink background with white heading and explanatory text. The heading reads `あなたのツラみをシェアしましょう。`. Supporting copy explains that selected submissions may be shared on social media with identifying details removed.

The rendered text exposes these fields:

- Age.
- Pen name.
- Concern category, with a placeholder and choices for atopic dermatitis, allergic rhinitis, asthma, and other concerns.
- A free-text concern.

Only the lower textarea and submit area are visible in the supplied form screenshots. Field-level sizes, the exact arrangement of the earlier inputs, required-state indicators, validation, and error placement were not captured.

The visible textarea is white and rounded, approximately 800px wide on desktop and 351px on mobile. Its lower-right corner shows a resize affordance. The `送信する` control is a vivid pink pill centered below it: visually around 360 × 82px on desktop and 351 × 68px on mobile.

A thank-you string exists in the DOM text, but no completed submission state was observed. Do not represent it as a tested confirmation flow.

### Usage Notice and Footer

**Role:** keep the service's informational boundaries visible at the end of the form.

The notice is a transparent panel on the stronger pink field, outlined with a thin white border. It has a bold white heading, `ご利用上の注意`, followed by four compact bullet points. These cover changing guidelines, the distinction from diagnosis or treatment, medication information rather than purchase encouragement, and the absence of drug-monitoring promotions or advertising.

The panel is visually about 800px wide on desktop and 351px on mobile. Approximate inner padding is 34–36px desktop and 28–30px mobile. Text remains left aligned even though the surrounding calls to action are centered.

The desktop footer places a small white copyright line and an underlined `Privacy Policy.` link in the center. The recorded privacy link points to `https://alleru.com/`, not a separately verified policy page.

The mobile DOM contains the same footer content, but the supplied bottom screenshot shows the fixed social bar across its expected region. Treat the footer as present but not visibly verified there, and reserve sufficient bottom clearance in a new implementation.

### Persistent Social Links

**Role:** provide continuous access to Instagram, Twitter, and LINE.

Desktop uses a slim vertical rail near the left edge. Measured link boxes begin at x=47px, have 20px width and approximately 29.5px height, and are spaced 37.5px apart vertically. The visible icons are pink over pale sections and white over the stronger pink lower section.

Mobile relocates the links into a fixed white bottom bar. The bar is visually 66px high, beginning around y=778 in the 844px viewport. Each visible icon is measured at 24 × 24px; their left coordinates are 127px, 183px, and 239px.

The supplied artwork uses the Twitter bird. Do not replace it automatically when documenting the inspected appearance.

## Tokens — Motion & Interaction

| Element | Recorded declaration or observation | What can be concluded |
| --- | --- | --- |
| First hero paragraph | Opacity and transform, `1s cubic-bezier(0.39, 0.58, 0.57, 1)`, `0.1s` delay | A staggered reveal treatment is defined; starting transform is unknown |
| Second hero paragraph | Same transition with `0.2s` delay | A second stagger is defined |
| Topic section | `opacity 1s` | An opacity transition is defined; its trigger was not documented |
| Topic guide pills | `0.3s` transition | A short transition exists; hover colors and transformed properties are unverified |
| Consultation button | `0.1s` transition | A quick transition is defined; the changed state was not captured |
| Mobile consultation section | `1s` transition | Section-level transition exists; motion geometry is unknown |
| Contribution section | `1s` transition | Section-level transition exists; exact property and trigger are unknown |
| Corner controls and social links | Persist in matching viewport positions across scrolled screenshots | Persistent navigation is visually supported |
| Desktop social icons | Pink on pale sections; white in the lower pink capture | A section-dependent visual color change is observed; implementation is unknown |

Several other elements report only `transition: all` without a positive duration. That is not sufficient evidence of a visible animation.

Sampled elements report `animation: none`, but this does not rule out animation inside image assets, pseudo-elements, or unsampled elements. The small mouth graphic differs between desktop and mobile captures; the evidence cannot distinguish animation frames from responsive artwork variants.

The inspection procedure temporarily paused perpetual animations during readiness checks and resumed them afterward. It supplied no motion recording. Continuous character motion, parallax, bounce, sound, menu transitions, hover appearances, and form submission behavior remain unverified.

For an adaptation, use restrained fades and small position changes where needed. Do not add perpetual mascot movement as though it were an observed requirement.

## Surfaces

| Layer | Appearance | Function |
| --- | --- | --- |
| Introductory canvas | Near-white blush with faint pink face motifs | Establishes warmth while leaving room for the hero artwork |
| Middle-page canvas | White central glow with stronger pink margins | Separates white content panels from their surroundings |
| Topic panels | Soft white surfaces with rounded corners and lightly defined edges | Groups three parallel information categories |
| Consultation panel | White, broad, rounded on desktop; full-width on mobile | Creates a clear pause around the consultation invitation |
| Topic guide pills | Pale condition-specific fills | Identifies each educational route |
| LINE controls | Saturated green with white labels | Identifies an external consultation service |
| Contribution area | Stronger pink field with white supporting content | Marks the transition from reading to contributing |
| Form fields | White rounded surfaces | Provides clear writable areas |
| Usage notice | Transparent pink surface with white outline | Keeps supporting conditions readable without a heavy card |
| Mobile social bar | Opaque white strip with a faint top boundary | Keeps social links separate from scrolling content |

Soft halos are visible around some artwork and panel edges. No precise shadow or gradient declarations were provided. The overall effect is gentle, without a strong stacked-card elevation system.

## Imagery

The illustration language is central to the identity. Characters have large eyes, simplified anatomy, bright hair and clothing, small shaded cheeks, and expressive poses. The pharmacist's raised finger and both visible phones connect the friendly artwork to the consultation service.

The logo introduces a different material quality: inflated, softly shaded letters with irregular alignment. Three yellow curved marks sit above it, while a small mouth and the slogan `ツラいのはひとりじゃない` complete the face-like composition. Retain this as artwork rather than approximating it with text effects.

Repeated background motifs resemble small scalloped faces. They are low contrast, vary in scale, and sit well away from important text. Their exact positioning, opacity, asset format, and movement are unverified.

The page also includes a circular character portrait, a circular pharmacy mark, a small LINE speech-bubble logo, circled arrow symbols, wavy menu lines, and recognizable social icons. Photography is not visible in the inspected captures.

### Observed Asset References

No direct media-file URLs or asset filenames were supplied. The following inventory identifies visible assets without inventing paths.

| Asset | Evidence | Reuse guidance |
| --- | --- | --- |
| ALLERU brand composition | Desktop and mobile hero; measured H1 bounds | Preserve aspect ratio, inflated lettering, yellow marks, and integrated slogan |
| Blond patient character | Desktop and mobile hero | Use a transparent full-body asset; preserve phone and ground clearance |
| Pharmacist character | Desktop and mobile hero | Preserve raised finger, white coat, and green phone |
| Circular pharmacist portrait | Desktop consultation capture | Use within a blue circular field; avoid stretching the portrait |
| Pharmacy badge | Desktop consultation capture and linked DOM rectangle | Preserve the circular mark and its clear outline |
| Background face motifs | Hero, consultation surroundings, and lower form captures | Keep decorative and low contrast |
| Menu and Q&A stamps | All original-page captures | Preserve scalloped edges rather than substituting plain circles |
| Topic graphic slots | Empty-text links with measured 4:3 rectangles | Asset appearance is unverified; obtain the actual files before reproducing it |
| Social and LINE symbols | Original-page captures and link destinations | Retain recognizable silhouettes and measured optical scale |

Use authorized artwork when available. The CSS can reproduce the layout and interface treatments, but the supplied reference does not include reusable image files or licensing information.

## Layout & Responsive Behavior

### Desktop — 1440 × 1000

The opening section uses an 85%-width container with 108px side margins. The brand graphic occupies approximately 55% of that container and begins 144px from the top. The characters flank the centered introduction, and the green consultation circle overlaps the pharmacist's upper area.

The About link fits inside the first viewport, at approximately y=834–905. The topic section begins around y=950 and arranges the three conditions horizontally. Their question lists use shared top alignment and consistent inner widths, while individual question heights follow their content.

Below the topics, the consultation panel narrows to 1120px and receives a large white surface. The later form and notice use a narrower visual column of roughly 800px. These three widths—1224px, 1120px, and about 800px—create progressively more focused reading and interaction areas.

### Mobile — 390 × 844

The hero still uses an 85%-width container, now 331.5px. The brand graphic fills that width and begins 117px from the top. The two characters move below the logo, with the consultation circle above the pharmacist. The audience line begins around y=655, followed by the introduction around y=707.

The About link appears around y=914, below the initial viewport. Preserve this intentional vertical sequence rather than forcing every hero element above the fold.

The condition groups stack in the same order: atopic dermatitis, asthma, then allergic rhinitis. Their graphic-link and guide-pill positions confirm a single-column arrangement. The section grows from roughly 661px on desktop to 1622px on mobile.

The consultation surface becomes edge-to-edge and square-cornered, while its inner content uses 5% side insets. The textarea, submit button, and usage notice also appear approximately 351px wide, leaving about 19.5px on each side.

Social links move from the left rail to an opaque fixed bottom bar. The corner stamps remain visible. This is a relocation of persistent navigation, not merely a reduction in icon size.

### Unverified Intermediate Behavior

Only the two stated viewports were inspected. The original breakpoint values, tablet layouts, maximum-width rules, landscape behavior, and safe-area calculations were not supplied. The 85% content ratio is supported at both endpoints; other responsive formulas remain implementation choices.

## Do’s and Don’ts

### Do

- Use the measured pink, green, and condition colors for their established roles.
- Preserve the rounded Japanese font, medium body weight, and generous hero line spacing.
- Keep the logo as illustrated identity artwork.
- Keep both full-body characters and their phones legible.
- Preserve the desktop flanking composition and mobile logo–characters–copy sequence.
- Keep the three condition groups parallel, with tinted guide pills and large question markers.
- Maintain distinct widths for the broad content area, consultation panel, and focused form column.
- Reuse scalloped stamps, waves, circles, and pills consistently.
- Give mobile content room above the persistent social bar.
- Keep informational links, external consultation, and form submission as distinct actions.

### Don't

- Don't reduce the whole homepage to one conversion button and a generic feature-card sequence.
- Don't replace the inflated logo with oversized body-font text.
- Don't treat every question as an accordion; the observed items are article links.
- Don't infer the topic illustrations from graphic-link dimensions alone.
- Don't turn pale background faces into high-contrast decorative clutter.
- Don't add strong shadows or glass effects to the soft white panels.
- Don't treat administrative CSS variables as the public interface palette.
- Don't assume a declared transition proves a particular hover or scroll effect.
- Don't claim that a menu, LINE destination, or submission result was tested.
- Don't let fixed mobile controls cover the privacy link or the end of the form.

## Recommended Implementation Additions

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

- Give the menu button, social links, and graphic-only links explicit accessible names. Give the wordmark a meaningful text alternative.
- Keep decorative background faces hidden from assistive technology and outside the keyboard order.
- Preserve visible keyboard focus. If the menu opens an overlay, implement Escape handling, focus management, and an accurate expanded state.
- Provide at least 44px touch targets around the smaller social icons without enlarging their visible artwork.
- Test small pink, gold, and teal text and white-on-green labels for contrast. Introduce accessible text variants where required while retaining the illustration colors.
- Associate every form field with a persistent label. Provide clear required states and field-specific errors, and announce submission results without removing the entered content unexpectedly.
- Use at least 16px text in mobile editable controls as an implementation choice to reduce unwanted browser zoom.
- Reserve bottom space for the 66px social bar plus device safe area.
- Supply an actual privacy-policy destination; the captured link currently points to the homepage.
- Honor reduced-motion preferences and keep content visible when reveal scripts are unavailable.

## Agent Prompt Guide

### Quick Color Reference

- Brand text, outlines, and pink actions: `#ff4b78`.
- White surfaces: `#ffffff`; neutral text: `#555555`.
- LINE consultation: `#06c755` with visible white labels.
- Atopic dermatitis: `#874fb2` on `#f1e4ff`.
- Asthma: `#cfa51c` on `#fffcea`.
- Allergic rhinitis: `#56b5b3` on `#daefee`.
- Approximate backgrounds: pale blush `#fff4f7`, edge pink `#ffdee7`, contribution pink `#ff94ae`.

### Overall Prompt

“Create a Japanese allergy-information homepage inspired by ALLERU. Use Zen Maru Gothic, medium-weight rounded body text, vivid pink accents, a very pale blush canvas, white rounded panels, and low-contrast scalloped face motifs. Center an illustrated inflated-letter wordmark above a calm introduction, flanked on desktop by a blond patient character and a pharmacist character holding phones. Place a green circular LINE consultation link above the pharmacist. Follow with three condition-specific guide and question groups in purple, gold, and teal, then a broad consultation panel and a stronger pink concern-sharing form area. Use scalloped corner navigation stamps and a slim desktop social rail. On mobile, place the characters beneath the logo, stack the condition groups, make the consultation panel full width, and move social links into a fixed white bottom bar. Preserve the artwork and the measured spacing relationships; treat unverified motion as optional.”

### Example Component Prompts

1. **Hero:** “Build a pale blush hero with an illustrated ALLERU wordmark, two full-body phone-holding characters, and a green circular consultation link overlapping the pharmacist. Center small pink explanatory text with 2.5 line height and a 360px outlined About pill. On a 390px screen, use a 331.5px content column and place the characters between the wordmark and the text.”
2. **Condition cards:** “Create three parallel white rounded topic panels. Each contains an authorized topic graphic, a tinted pill link, a bold centered category link, and three article links with large Q markers. Use purple, gold, and teal consistently across each group. Stack the panels on mobile and keep questions left aligned.”
3. **Consultation panel:** “Create a 1120px-wide white panel with about 29px corners, a centered circular character portrait, a gray 21px rounded heading, supporting copy, and a 360px green LINE pill. Overlap a circular pharmacy badge at the upper right. At 390px, remove the panel corners and use a 351px-wide button.”
4. **Contribution area:** “Use a stronger pink background, white heading and help text, rounded white editable fields, a broad vivid-pink submit pill, and a thin white outlined usage notice. Keep the notice left aligned. Preserve visible labels, error space, and clearance above the mobile social bar.”
5. **Persistent navigation:** “Use a white scalloped menu stamp with three pink waves at the upper left and a pink scalloped Q&A stamp at the upper right. On desktop, position small social icons vertically near the left edge. On mobile, place 24px icons inside larger accessible targets in a 66px white bottom bar.”

## Quick Start

### CSS Custom Properties

This is a reusable adaptation, not a recovered stylesheet. Exact colors and endpoint typography come from computed evidence. Background gradients, a `48rem` breakpoint, maximum widths, artwork offsets, and hover feedback are recommendations. Hero offsets should be adjusted to the transparent bounds of the actual supplied artwork.

Suggested structure: `.hero` contains `.hero__brand`, the two `.hero__character` images, `.hero__line`, and `.hero__intro`. The introduction contains `.hero__audience`, `.hero__copy`, and the About pill. Each `.topic-card` contains its graphic, guide pill, category link, and `.question-list`. The form example uses a simple vertical field arrangement because earlier input geometry was not captured.

The circular corner backgrounds below are functional fallbacks. Replace them with authorized scalloped badge artwork to reproduce the observed silhouettes. Load the measured font separately; this CSS does not fetch font or image assets.

```css
:root {
  /* Measured interface colors */
  --brand-pink: #ff4b78;
  --surface-white: #ffffff;
  --text-body-color: #555555;
  --line-green: #06c755;
  --atopic-ink: #874fb2;
  --atopic-tint: #f1e4ff;
  --asthma-ink: #cfa51c;
  --asthma-tint: #fffcea;
  --rhinitis-ink: #56b5b3;
  --rhinitis-tint: #daefee;

  /* Visual approximations, not recovered declarations */
  --canvas-blush: #fff4f7;
  --canvas-edge: #ffdee7;
  --share-pink: #ff94ae;

  /* Measured desktop typography */
  --font-body: 'Zen Maru Gothic', sans-serif;
  --body-size: 16.8667px;
  --body-leading: 1.75;
  --body-tracking: 0.01em;
  --weight-body: 500;
  --weight-bold: 700;

  /* Reusable geometry */
  --group-gap: 32px;
  --panel-radius: 28.8px;
  --field-radius: 16px;
  --corner-size: 72px;
  --content-max: 1224px;
  --consult-max: 1120px;
  --form-max: 800px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --reveal-ease: cubic-bezier(0.39, 0.58, 0.57, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text-body-color);
  background: var(--surface-white);
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: var(--weight-body);
  line-height: var(--body-leading);
  letter-spacing: var(--body-tracking);
}

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

.alleru-page {
  /* Approximate the visible central glow. */
  background: radial-gradient(
    ellipse at 50% 25%,
    #fff 0%,
    var(--canvas-blush) 58%,
    var(--canvas-edge) 100%
  );
}

.content-width {
  width: min(85%, var(--content-max));
  margin-inline: auto;
}

.corner-control {
  position: fixed;
  z-index: 30;
  top: 1.5vw;
  display: grid;
  place-items: center;
  width: var(--corner-size);
  height: var(--corner-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--brand-pink);
  background: #fff;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.corner-control--menu { left: 1.5vw; }
.corner-control--qa {
  right: 1.5vw;
  color: #fff;
  background: var(--brand-pink);
  font-weight: 700;
  line-height: 1.25;
}

.hero {
  position: relative;
  padding-top: 144px;
  padding-bottom: 44.7px;
  text-align: center;
}

.hero__brand {
  width: 55%;
  margin: 0 auto;
}

.hero__brand img { width: 100%; height: auto; }

.hero__character {
  position: absolute;
  bottom: 45px;
  width: 16.5%;
  height: auto;
  pointer-events: none;
}

.hero__character--patient { left: 7.8%; }
.hero__character--pharmacist { right: 6.8%; }

.hero__line {
  position: absolute;
  top: 256.34px;
  right: 0;
  display: grid;
  place-content: center;
  width: 202.39px;
  aspect-ratio: 1;
  padding: 8px;
  border-radius: 50%;
  color: #fff;
  background: var(--line-green);
  font-weight: 700;
  text-decoration: none;
  line-height: 1.6;
}

.hero__intro {
  margin-top: 72px;
  color: var(--brand-pink);
}

.hero__audience {
  display: inline-block;
  margin: 0;
  font-size: 0.9em;
  font-weight: 700;
  line-height: var(--body-leading);
  text-decoration: underline wavy;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}

.hero__copy {
  margin-top: var(--group-gap);
  line-height: 2.5;
}

.hero__copy p {
  margin: 0;
  transition:
    opacity 1s var(--reveal-ease),
    transform 1s var(--reveal-ease);
}

.hero__copy p:first-child { transition-delay: 0.1s; }
.hero__copy p:nth-child(2) { transition-delay: 0.2s; }

/* Content remains visible without a reveal script. */
.pill {
  position: relative;
  display: block;
  width: min(100%, 360px);
  margin-inline: auto;
  padding: 1.5em 2.5em;
  border: 1px solid transparent;
  border-radius: 2em;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.pill--outline {
  color: var(--brand-pink);
  background: transparent;
  border: 2px solid currentColor;
}

.hero__intro > .pill { margin-top: var(--group-gap); }

.pill__arrow {
  position: absolute;
  left: 1.25em;
  top: 50%;
  display: grid;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translateY(-50%);
}

.pill--line {
  color: #fff;
  background: var(--line-green);
  transition: filter 0.1s;
}

.topics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  padding-top: 180px;
  padding-bottom: 72px;
}

.topic-card {
  position: relative;
  min-width: 0;
  padding: 60px 41.5px 20px;
  border-radius: var(--panel-radius);
  color: var(--topic-ink);
  background: #fff;
}

.topic-card--atopic {
  --topic-ink: var(--atopic-ink);
  --topic-tint: var(--atopic-tint);
}
.topic-card--asthma {
  --topic-ink: var(--asthma-ink);
  --topic-tint: var(--asthma-tint);
}
.topic-card--rhinitis {
  --topic-ink: var(--rhinitis-ink);
  --topic-tint: var(--rhinitis-tint);
}

.topic-card__art {
  position: absolute;
  top: -64px;
  left: 50%;
  width: 158.45px;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  transform: translateX(-50%);
}

.topic-pill {
  width: 100%;
  color: var(--topic-ink);
  background: var(--topic-tint);
  transition: filter 0.3s;
}

.topic-card__category {
  display: block;
  margin-top: var(--group-gap);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.question-list {
  display: grid;
  gap: 1em;
  margin: var(--group-gap) 0 0;
  padding: 0;
  list-style: none;
}

.question-link {
  position: relative;
  display: block;
  padding-left: 2em;
  line-height: 1.75;
  text-decoration: none;
}

.question-link__marker {
  position: absolute;
  inset: 0 auto auto 0;
  font-size: 1.75em;
  font-weight: 700;
  line-height: 1;
}

.consult-panel {
  position: relative;
  width: min(90%, var(--consult-max));
  margin: 130px auto 0;
  padding: 72px 5%;
  border-radius: var(--panel-radius);
  background: #fff;
  text-align: center;
}

.consult-panel__avatar {
  width: 108px;
  aspect-ratio: 1;
  margin: 0 auto 16px;
  border-radius: 50%;
  object-fit: contain;
}

.consult-panel h2 {
  margin: 0;
  font-size: 1.25em;
  font-weight: 700;
  letter-spacing: normal;
}

.consult-panel p { margin: 8px 0 24px; }

.consult-panel__badge {
  position: absolute;
  top: -71px;
  right: -71px;
  width: 144px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
}

.share-zone {
  margin-top: 24px;
  padding-top: 108px;
  color: #fff;
  background: var(--share-pink);
}

.share-width {
  width: min(90%, var(--form-max));
  margin-inline: auto;
}

.share-heading {
  margin: 0;
  font-size: 1em;
  font-weight: 700;
  text-align: center;
}

.share-help { text-align: center; }

.share-form {
  display: grid;
  gap: 24px;
  margin-top: 40px;
}

.share-form label { display: block; margin-bottom: 8px; }

.share-form input,
.share-form select,
.share-form textarea {
  display: block;
  width: 100%;
  padding: 1em;
  border: 1px solid #fff;
  border-radius: var(--field-radius);
  color: var(--text-body-color);
  background: #fff;
  font-size: max(16px, 1em);
}

.share-form textarea {
  min-height: 280px;
  resize: vertical;
}

.pill--submit {
  min-height: 82px;
  margin-top: 16px;
  color: #fff;
  background: var(--brand-pink);
  font-size: 1.2em;
}

.usage-notice {
  margin-top: 138px;
  padding: 34px;
  border: 1px solid #fff;
  border-radius: 18px;
}

.usage-notice h3 { margin: 0 0 8px; font-size: 1em; }
.usage-notice ul { margin: 0; padding-left: 1.2em; }
.usage-notice li { margin-block: 4px; }

.site-footer {
  padding: 2em 5%;
  color: #fff;
  text-align: center;
  font-size: 0.9em;
}

.site-footer a { text-underline-offset: 6px; }

.social-nav {
  position: fixed;
  z-index: 25;
  top: 50%;
  left: 35px;
  display: grid;
  color: var(--brand-pink);
  transform: translateY(-50%);
}

/* Larger hit areas are an accessibility addition. */
.social-nav a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}

.social-nav svg,
.social-nav img { width: 20px; height: 20px; }

/* Set this state through section tracking if desired. */
.social-nav.is-on-pink { color: #fff; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--text-body-color);
  outline-offset: 4px;
}

@media (hover: hover) {
  /* Recommended feedback; original hover states were not captured. */
  .topic-pill:hover,
  .pill--line:hover { filter: brightness(0.96); }
}

@media (max-width: 48rem) {
  :root {
    --body-size: 14px;
    --body-leading: 1.6;
    --corner-size: clamp(56px, 16vw, 72px);
  }

  .alleru-page { padding-bottom: calc(66px + var(--safe-bottom)); }

  .hero { padding-top: 30vw; padding-bottom: 0; }
  .hero__brand { width: 100%; }
  .hero__intro { margin-top: 98vw; }
  .hero__character { bottom: auto; width: 30%; }
  .hero__character--patient { top: 96.15vw; left: 15%; }
  .hero__character--pharmacist {
    top: 89.74vw;
    right: 16%;
    width: 31%;
  }
  .hero__line {
    top: 71.28vw;
    right: -4px;
    width: 28.72vw;
  }
  .pill--outline { border-width: 1px; }

  .topics {
    grid-template-columns: 1fr;
    gap: 62px;
    padding-top: 82.5px;
    padding-bottom: 78px;
  }
  .topic-card { padding: 20.5px; }
  .topic-card__art {
    position: static;
    width: 131.8px;
    margin: 0 auto 4px;
    transform: none;
  }

  .consult-panel {
    width: 100%;
    margin-top: 58.5px;
    padding: 29.25px 5%;
    border-radius: 0;
  }
  .consult-panel__avatar { width: 24vw; max-width: 108px; }
  .consult-panel__badge {
    top: -48.75px;
    right: 5%;
    width: 25vw;
    max-width: 110px;
  }

  .share-zone { padding-top: 78px; }
  .pill--submit { width: 100%; min-height: 68px; }
  .usage-notice { margin-top: 108px; padding: 28px; border-radius: 16px; }

  .social-nav,
  .social-nav.is-on-pink {
    inset: auto 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    height: calc(66px + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    border-top: 1px solid var(--canvas-edge);
    color: var(--brand-pink);
    background: #fff;
    transform: none;
  }
  .social-nav svg,
  .social-nav img { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__copy p,
  .topic-pill,
  .pill--line {
    transition: none;
    animation: none;
  }
}
```

### Tailwind v4 Token Mapping

Optional aliases for an implementation already using Tailwind v4. This is not evidence that the original website uses Tailwind. Define the custom properties above first.

```css
@theme inline {
  --color-alleru-pink: var(--brand-pink);
  --color-alleru-white: var(--surface-white);
  --color-alleru-gray: var(--text-body-color);
  --color-alleru-line: var(--line-green);
  --color-alleru-blush: var(--canvas-blush);
  --color-alleru-share: var(--share-pink);
  --color-atopic: var(--atopic-ink);
  --color-atopic-soft: var(--atopic-tint);
  --color-asthma: var(--asthma-ink);
  --color-asthma-soft: var(--asthma-tint);
  --color-rhinitis: var(--rhinitis-ink);
  --color-rhinitis-soft: var(--rhinitis-tint);

  --font-rounded: var(--font-body);
  --text-alleru-body: var(--body-size);
  --text-alleru-small: calc(var(--body-size) * 0.9);
  --text-alleru-heading: calc(var(--body-size) * 1.25);
  --spacing-group: var(--group-gap);
  --radius-alleru-panel: var(--panel-radius);
  --radius-alleru-field: var(--field-radius);
}
```

## Sources & Evidence

- [ALLERU homepage](https://alleru.com/): original and final URL; supplied response status `200`. Retrieval recorded at `2026-10-01T17:45:35.864Z`, equivalent to October 2, 2026, 02:45:35.864 JST.
- **Desktop evidence:** 1440 × 1000 captures of the opening hero, lower question-card portions and consultation panel, and the form ending with usage notice and footer. Supplied DOM document height was approximately 3672.25px.
- **Mobile evidence:** 390 × 844 captures of the opening hero and the form ending. Supplied rendered DOM also establishes the stacked topic groups and mobile consultation geometry. Document height was approximately 4526.73px.
- **Computed evidence:** font family, size, weight, line height, tracking, foreground/background colors, padding, border radius, transitions, element rectangles, page text, and anchor destinations. These support the measured values in this reference.
- **Capture procedure:** the supplied inspection waited for document loading, image decoding, and sampled layout/text stability, with an initial observation of at least five seconds. It traversed intermediate scroll positions. Perpetual animations were temporarily paused during readiness checks and then resumed; SharedWorkers and service workers were disabled.
- **Limitations:** no opened-menu state, hover recording, keyboard test, form submission, external destination visit, child-page capture, complete asset inventory, or full stylesheet was supplied. Transition declarations establish available timing, not fully verified interaction behavior. Two viewport samples do not establish all responsive breakpoints.

This document describes the current homepage represented by the supplied original-page evidence. All background approximations, reconstruction CSS, intermediate-width rules, and accessibility improvements are identified as estimates or recommendations.