# AIM for Happiness 2022 / Felissimo Nekobu — Style Reference

> A bright red parade for medical research, softened by paw prints, warm paper, and familiar everyday goods.

**Original URL:** [https://www.nekobu.com/aim/2022/](https://www.nekobu.com/aim/2022/)
**Final URL:** [https://www.nekobu.com/aim/2022/](https://www.nekobu.com/aim/2022/)
**Theme:** alternating red, cream, white, and beige sections, with teal editorial text and brown closing commerce elements.
**Inspected:** October 2, 2026, at 03:42 JST; supplied retrieval timestamp: October 1, 2026, 18:42:11.412 UTC.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current campaign page, including its opening composition, research-support narrative, AIM explainer, researcher profile and message, four charity merchandise entries, sharing area, related merchandise, and footer. Desktop screenshots show the opening, researcher message, and closing area. Mobile screenshots show the opening and closing area. The supplied rendered DOM provides additional text, geometry, and computed styles throughout the page.

This is a long campaign and editorial commerce page within Felissimo Nekobu. It introduces a research-support fund, explains its purpose, presents a researcher’s message, and links to merchandise on the retailer’s website. The inspected document remains at its original URL with HTTP 200. The year in the campaign title is part of the current content; this reference does not reconstruct an earlier design or establish current product availability.

Its visual identity comes from a deliberate pairing: an emphatic red opening with cheerful white animal linework, followed by spacious reading sections in rounded Japanese type. Paw patterns and wave-shaped boundaries connect the sections. Teal gives the research content a calm, legible voice; beige and brown make the final merchandise invitation feel warm and familiar.

## How to Read This Reference

- **Measured** values come from the supplied rendered DOM and computed styles. Values are in CSS pixels unless stated otherwise; tables round some geometry to two decimal places.
- **Visual estimates** describe details visible in the screenshots but absent from the sampled properties, including illustration strokes, circle borders, and wave dimensions.
- **Calculated** values are derived from measured bounds or spacing. They are identified explicitly.
- **Recommendations** describe a reusable implementation, not verified behavior of the original site.
- All custom-property names below are reference aliases. The supplied custom-property extraction was empty; these are not claimed source variables.
- The image-based hero lettering must be measured as artwork. The sampled H1 wrapper’s inherited 12px font size does not describe the visible “AIM for Happiness” lettering.
- Only two viewport sizes were supplied. Tablet layouts, exact breakpoints, menu-open appearance, hover results, sharing outcomes, and checkout behavior remain unverified.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Role and evidence |
| --- | --- | --- | --- |
| Campaign Red | `#d6001c` | `--color-red` | Measured hero and sharing-section backgrounds; section labels and product introductory text |
| Warm Cream | `#f6f5ed` | `--color-cream` | Measured concept and charity-merchandise section backgrounds |
| Research Teal | `#265c6e` | `--color-teal` | Measured narrative text, research headings, profile text, and navigation links |
| Closing Beige | `#e3dacf` | `--color-beige` | Measured related-merchandise section background |
| Warm Brown | `#573b26` | `--color-brown` | Measured closing heading; the closing pill button visually uses the same brown family |
| White | `#ffffff` | `--color-white` | Measured reversed text; visually present in hero artwork, frame, button outlines, and research canvas |
| Neutral Text | `#363838` | `--color-text` | Measured campaign default text and donation-note text |
| Footer Muted Text | `#a4947f` | `--color-footer-muted` | Measured community explanation above the footer links |

### Supporting Surface Treatments

| Treatment | Evidence status | Guidance |
| --- | --- | --- |
| Pale pink overseas-shopping banner | Visual observation; approximately `#ffd1d1` | Treat the hexadecimal value as a fallback estimate. The visible banner includes texture and small photographic cutouts. |
| Pale paw pattern on white | Visual observation | Use a very low-contrast pattern so it remains visible around and behind the researcher message without competing with the text. |
| Darker paw pattern on red | Visual observation | Keep the pattern within the red family. The central hero frame has a substantially quieter interior. |
| Brown footer texture | Visual observation | Preserve the mottled, paper-like appearance when an authorized asset is available. A solid brown is only an approximation. |
| Small gray paw trails | Visual observation | Use isolated footprints across section transitions and open margins. Their motion behavior is not established. |

The palette is organized by section purpose, not by selectable themes. No theme selector was established in the supplied evidence. Use the exact measured CSS colors for structural surfaces; do not replace them with colors guessed from compressed imagery.

## Tokens — Typography

### Rounded Japanese Campaign Text

- **Computed family:** `dnp-shuei-mgothic-std, sans-serif`.
- **Computed weight:** `400` throughout the sampled campaign headings, paragraphs, labels, and links.
- **Character:** rounded, open, friendly Japanese forms with generous tracking and unusually spacious narrative leading.
- **Role:** connects medical information to the approachable animal illustrations.
- **Implementation alias:** `--font-campaign: dnp-shuei-mgothic-std, sans-serif`.

Do not automatically change these headings to weight 700 because they look substantial in the screenshots. Their presence comes from the typeface, size, spacing, and color. A computed family declaration identifies the requested stack; font-file loading and per-glyph fallback were not independently checked.

### English Section Labels

- **Computed family:** `montserrat, sans-serif`.
- **Computed weight:** `400`.
- **Labels:** “Concept,” “What is AIM?”, “Message,” “Goods,” and the menu’s “Menu” label.
- **Typical tracking:** `0.08em` on section labels.
- **Color:** Campaign Red.

These are small editorial signposts. They should not become oversized English display headings.

### Site Utilities and Footer

The surrounding site chrome uses a separate Japanese system-sans stack. Its supplied declaration includes Hiragino Kaku Gothic Pro, Meiryo, MS PGothic, Arial, Osaka, and sans-serif, with Japanese-name aliases for several families.

Footer links use approximately 10px text. This compact utility typography is visibly different from the larger, more relaxed campaign content.

### Hero Lettering and Graphic Headings

The hero wordmark, ribbon text, tagline, announcement, and several section headings occupy elements with empty extracted text. Their visible lettering is graphic content rather than ordinary text styled at the wrapper’s computed font size.

Preserve the artwork proportions and supply equivalent accessible text. Do not claim Montserrat is the hero wordmark font merely because it appears elsewhere on the page.

### Type Scale

All entries below are measured. Size and line height are shown as `size / line-height`.

| Role | Desktop | Mobile | Tracking |
| --- | --- | --- | --- |
| Concept heading | `32 / 44.8px` | `29.12 / 40.768px` | `0.06em` |
| Concept paragraphs | `20 / 50px` | `14.56 / 36.4px` | `0.08em` |
| Message heading | `32 / 51.2px` | `24.96 / 39.936px` | Desktop `0.08em`; mobile `0.06em` |
| Message body | `20 / 40px` | `14.56 / 29.12px` | `0.08em` |
| Message signature | `20 / 36px` | `13.52 / 24.336px` | `0.08em` |
| Product heading | `32 / 44.8px` | `24.96 / 34.944px` | `0.06em` |
| Product introductory line | `16 / 25.6px` | `13.52 / 21.632px` | `0.08em` |
| Donation explanation | `13 / 22.1px` | `11.96 / 20.332px` | `0.08em` |
| Researcher biography | `13 / 20.8px` | `12.48 / 19.968px` | `0.06em` |
| English section label | `16 / 25.6px` | `11.44 / 18.304px` | `0.08em` |
| Navigation link | `20 / 32px` | `16.64 / 26.624px` | `0.06em` |
| Sharing text and closing heading | `24 / 43.2px` | `16.64 / 29.952px` | `0.06em` |
| Large informational/merchandise link | `20 / 32px` | `12.48 / 19.968px` | `0.08em` |
| Footer links and copyright | `10.08 / 16.128px` | Same | `0.36px` |

The vertical “Concept” label is a specific exception: its measured line height equals its font size, 16px on desktop and 11.44px on mobile.

The price rows contain nested content that was not individually sampled. Their parent’s 12px size is insufficient evidence for the visible price numerals’ typography.

## Tokens — Spacing & Shapes

**Density:** generous narrative spacing, broad uninterrupted color fields, and compact footer utilities.

**Shape vocabulary:** circles, pill buttons, softly rounded rectangular frames, open brackets, ribbon ends, and shallow repeating waves. There is no general system of floating cards with soft shadows.

### Spacing Scale

These are repeated or structurally important measured values, rather than evidence of an underlying mathematical spacing system.

| Use | Desktop | Mobile |
| --- | --- | --- |
| Hero top and horizontal padding | `32px` | `20.8px` |
| Hero bottom padding | `136px` | `86.32px` |
| Main content side margin | `200px` at 1440px | Approximately `18.72px` at 390px |
| Researcher/message column gap | `64px`, calculated from bounds | Stacked; approximately `49.91px` between the two section boxes |
| Message text horizontal inset | `78px`, calculated | Approximately `43.67px` from outer section to body text |
| Charity-product row gap | `32px`, calculated | Approximately `16.63px`, calculated |
| Closing section top padding | `82px` | `57.2px` |
| Closing section bottom padding | `96px` | `84.24px` |
| Sharing section top/bottom padding | `160 / 154px` | `84.24 / 76.96px` |

The page uses different widths for different tasks. The approximately 1040px desktop content span does not imply that every paragraph should stretch to 1040px.

### Border Radius and Decorative Geometry

| Element | Observed appearance | Measurement status |
| --- | --- | --- |
| Hero frame | White outline, about 3px on desktop and 2px on mobile; corners about 16px and 12px | Visual estimates |
| Menu control | Circular red face, white outline, two white bars | Circular appearance observed; exact button bounds measured separately |
| Research message frame | Two tall teal brackets with short curved ends; open top and bottom | Visual observation; stroke approximately 3px |
| Researcher photograph | Circular crop | Visual observation; desktop diameter approximately 212–216px |
| Related merchandise photos | Circular crops with thin white outlines | Visual estimates: approximately 160px desktop and 111–112px mobile |
| Closing link | Fully rounded brown pill with white outline and a small lower offset shadow | Visual observation |
| Section boundary | Repeating shallow wave | Visual estimate: approximately 214px wavelength on desktop and 110px on mobile |

Several sampled wrappers report `border-radius: 0` and transparent backgrounds even when the screenshot shows a circular or filled component. Their child artwork or pseudo-elements were not included in the property sample. Describe the rendered appearance without assigning unverified styling to the wrapper.

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 |
| --- | --- | --- |
| Document height | `9422.05px` | `9289.16px` |
| Overseas banner | `1440 × 69px` | `390 × 71.91px` |
| Centered brand mark | `59 × 48px` | `59 × 48px` |
| Main content begins | `y = 139px` | `y = 131.91px` |
| Hero section height | `846.33px` | `659.70px` |
| Hero frame footprint | Approximately `1376 × 678.33px`, calculated from padding | Approximately `348.4 × 552.58px`, calculated |
| Hero wordmark wrapper | `397.06 × 187.69px` | `250.11 × 118.22px` |
| Hero ribbon wrapper | `375.61 × 64.27px` | `281.83 × 26.94px` |
| Hero tagline wrapper | `447.16 × 83.64px` | `288.08 × 53.88px` |
| Menu button | `80 × 80px` | `49.91 × 49.91px` |
| Main research/product container | `1040px` | `352.56px` |
| Researcher sidebar | `216px` | `352.56px` outer width; `223.63px` inner text width |
| Message outer section | `760 × 620.78px` | `352.56 × 663.70px` |
| Message body width | `604px` | `265.22px` |
| Product row | `1040 × 367.42px` | `352.56px` wide; approximately `506–541px` tall |
| Goods-detail link | `514.91 × 96px` | `300.48 × 62.39px` |
| Closing merchandise link | `383.88 × 96px` | `218.72 × 62.39px` |
| Four sharing controls | `80 × 80px` each | `58.23 × 58.23px` each |

## Components

### Overseas Shopping Banner and Brand Strip

**Role:** connects the campaign to the wider shop and establishes Nekobu’s identity.

The page starts with a pale pink, textured promotional strip. On desktop, its inner banner occupies a centered 1000 × 69px region. The banner includes small cat-related photographic cutouts, an arrow circle, and an English overseas-shopping invitation. It is one observed link to the retailer’s international cat-products page.

On mobile, the banner fills the 390px width and becomes approximately 71.91px tall. The message wraps into a compact composition rather than merely clipping the desktop version.

A white brand strip follows. The 59 × 48px Nekobu mark stays centered at both sizes. The white strip is approximately 70px tall on desktop and 60px on mobile, calculated from the banner end and main-content start.

### Persistent Circular Menu Control

**Role:** provides access to the three main campaign sections.

The visible control is a red circle with a white outline and two horizontal white strokes. It overlaps the hero’s upper-right frame area on arrival and remains near the upper-right viewport corner in the supplied scrolled captures.

Its initial bounds are `x = 1344, y = 155, 80 × 80px` on desktop and approximately `x = 329.70, y = 142.30, 49.91 × 49.91px` on mobile. The right clearance is therefore 16px and approximately 10.4px respectively.

The rendered DOM contains these links:

- `猫部の想い` → `#concept`.
- `漫画でわかるAIM医学研究` → `#about`.
- `グッズ情報` → `#goods`.

The screenshots show the closed control. The DOM’s menu-label and link rectangles do not establish the menu’s visible open state, because offscreen or hidden content can still have layout bounds. Opening behavior, backdrop, focus handling, and close animation were not exercised.

### Hero Poster

**Role:** announces the fund through a memorable, emotionally approachable composition.

The outer red field carries a darker paw pattern. Inside it sits a large white rectangular outline with softly rounded corners. The lower edge of the section ends in a cream wave.

The desktop composition has two main groups:

1. A left text-artwork stack: outlined ribbon, large “AIM for Happiness” wordmark, and two-line Japanese campaign promise.
2. A larger right illustration group: two cats, a dog, a rabbit, and a person marching together, led by a flag-bearing cat. A slanted Japanese announcement sits above the group between short diagonal strokes.

The characters use irregular white outlines, white facial details, and red interiors. Their linked hands and marching legs communicate shared purpose. Preserve the character silhouettes and their uneven line quality; generic animal icons would lose the central identity.

On mobile, the illustration moves above the ribbon and wordmark. The announcement stays with the illustration. The entire composition remains inside one tall outlined frame, with the promise near its bottom.

The ribbon changes proportions substantially between viewports: its desktop ratio is approximately 5.84:1, while mobile is approximately 10.46:1. This is evidence of an alternate composition or wrapping treatment, not uniform scaling of one graphic. Use responsive artwork when recreating it.

### Concept Section

**Role:** introduces the fund’s purpose before presenting merchandise.

The section uses Warm Cream and Research Teal. On desktop, a narrow vertical graphic heading and red English label sit to the left of the narrative. The main heading begins around `x = 479px`; the paragraphs occupy a roughly 640px-wide region.

The concept copy is deliberately airy: 20px text with 50px line height. The paragraph groups are separated by approximately 48px. This should read as a thoughtful statement rather than dense product copy.

Mobile reorganizes the composition vertically. The narrow vertical section marker remains near the upper-left, while the main heading and body appear farther down. The heading wraps to three lines, and the text uses 14.56px type with 36.4px leading. The supplied DOM establishes this hierarchy and geometry; the intervening illustration details are not visible in the attached mobile screenshots.

### AIM Explainer

**Role:** explains the research through an illustrated section identified by the navigation as a manga explanation.

On desktop, the section spans 1040px and places its tall graphic heading toward the right. The “What is AIM?” label has a narrow, tall measured footprint beside it. On mobile, the label becomes a horizontal line and the graphic heading becomes a centered, wider block.

The lower explanatory callout is visible at the top of the desktop researcher screenshot: a white, irregular scalloped outline in teal with centered text and a red emphasis word. Its measured outer text container is approximately 519 × 263px on desktop and 353.59 × 207.98px on mobile.

The intermediate comic artwork, panel count, lettering, and image paths were not supplied in sufficient visual detail. Preserve space and hierarchy for authorized explainer artwork without inventing its content.

### Researcher Profile and Book Reference

**Role:** provides a named human source for the campaign’s research message.

The desktop profile is a 216px sidebar with a circular laboratory portrait, the researcher’s name, a short biography, and the visible photo credit `写真 ： あさのますみ`. A dotted teal divider separates this material from a compact book reference with a cover on the left and stacked title text on the right.

The researcher is identified as `宮崎 徹`. The book is shown as `猫が30歳まで生きる日`, with its publisher in smaller text.

On mobile, the profile precedes the message instead of sitting beside it. The outer section spans approximately 352.56px, while its inner text column is approximately 223.63px and centered. The supplied evidence does not identify a link destination for the book reference; do not automatically turn it into a shopping action.

### Researcher Message

**Role:** carries the campaign’s most substantial credibility statement.

The desktop module is framed by two tall teal brackets rather than a complete rounded rectangle. Its transparent interior allows the faint paw background to remain visible. There is no elevated card surface.

Anatomy:

1. Small red Montserrat “Message” label.
2. Large teal Japanese heading.
3. A generous paragraph block in 20px type with 40px leading.
4. A separate researcher signature and institutional role.

The outer frame is 760px wide, with the body text inset approximately 78px on each side. The profile begins 32px below the message section’s top, creating a slightly staggered two-column arrangement.

On mobile, the message spans approximately 352.56px and follows the profile. The body narrows to approximately 265.22px. Its heading wraps to two lines; the signature also wraps. The mobile text measures 14.56px with 29.12px leading. Preserve comfortable reading width without forcing the desktop line breaks.

### Charity Merchandise Entry

**Role:** connects everyday purchases to the research-support fund.

Four repeated entries are present: a tote bag, a band and key-holder set, a glass set, and canned tea. Each observed anchor wraps the product’s descriptive content and leads to a separate Felissimo product page.

The measured content order is:

1. Short red introductory line.
2. Large teal product heading.
3. Quantity, displayed base price, and displayed tax-inclusive total.
4. Smaller explanation of the contribution to the research-support fund.
5. A `購入する` purchase marker.

On desktop, each row measures approximately 1040 × 367.42px. Copy begins 537px from the row’s left edge and is 400px wide, leaving a broad region to its left for media. On mobile, copy begins approximately 292.53px below the row’s top, consistent with a media-first stack. The supplied screenshots do not show these product rows, so exact photograph crops, media boundaries, and purchase-marker artwork remain unverified.

The purchase-marker wrapper measures 128 × 128px on desktop and approximately 83.19 × 83.19px on mobile. The mobile wrapper extends roughly 6px beyond the viewport’s right edge in the sampled geometry; whether this is clipped decoration or affects interaction was not tested.

Keep the donation explanation attached to its product and preserve the distinction between product price and contribution. The displayed totals should not be recomputed with a simple tax multiplier: the page explicitly describes the fund portion as tax-exempt.

### Goods Information Link

**Role:** leads to a longer article about the charity merchandise.

The observed label is `チャリティーグッズの詳しい情報はこちら`. The link measures approximately 514.91 × 96px on desktop and 300.48 × 62.39px on mobile, with white text.

Its destination is a Nekobu article. The link’s own sampled background is transparent; the screenshots do not establish its complete decorative treatment. Do not infer its fill or outline solely from the visually documented closing button.

### Sharing Section

**Role:** invites visitors to spread awareness after reading and shopping.

The section returns to Campaign Red and ends with a wave into the beige closing area. The DOM contains four equally sized sharing buttons in a centered row, followed by a two-line white invitation.

Desktop buttons are 80px square with calculated 24px gaps. Mobile buttons are approximately 58.23px square with approximately 16.63px gaps. Platform identities and button outcomes were not established by the supplied evidence.

The section is approximately 1110.38px tall on desktop and 504.13px on mobile. This large difference indicates substantial responsive composition changes, but the upper sharing artwork is outside the supplied visual crops.

### Related Merchandise Gallery and Closing Link

**Role:** connects the campaign to the wider animal-welfare merchandise collection.

A beige section begins below the red wave. It contains a centered brown statement, six circular photographs, and a prominent brown pill link labeled `猫基金付きグッズはこちら`.

The six photographs show varied cat-themed goods, including pouches, a cat-and-wave scene, small accessories, long cat-shaped items, watches, and compact bags. Their natural colors give the closing section more variety than the tightly controlled hero.

Desktop shows all six circles in one row across approximately 1040px. Mobile shows three columns and two rows, preserving the same six-image set. Thin white outlines unify the varied photographic backgrounds.

The closing link combines a white paw icon, white text, a brown face, a white border, and a small downward shadow. It is approximately 383.88 × 96px on desktop and 218.72 × 62.39px on mobile. The mobile gallery and button remain centered with ample beige space around them.

### Site Footer

**Role:** identifies the wider community and provides utility links.

The footer uses a mottled brown texture. A darker upper strip contains a small muted explanation of the Nekobu community. White links provide access to the brand home, terms, privacy policy, security information, and company information.

Desktop presents these links in a compact horizontal arrangement, followed by a FELISSIMO mark and copyright. Mobile separates the brand-home link into its own centered row above a dotted divider, with the policy links below. The standalone FELISSIMO mark visible on desktop is absent from the supplied mobile footer capture.

The original page independently identifies the Nekobu community with Felissimo and displays FELISSIMO copyright. It does not establish a website designer or developer credit.

## Tokens — Motion & Interaction

### Declared Transitions

These values come from sampled computed styles. They establish declared timing, not a complete observation of the animations executing.

| Target | Declared timing | What can be concluded |
| --- | --- | --- |
| Hero ribbon, wordmark, and tagline | Opacity `0.24s`, transform `0.5s cubic-bezier(0.165, 0.84, 0.44, 1)`, both delayed `1.1s` | A delayed reveal treatment is configured; initial transforms were not supplied. |
| Slanted hero announcement | Opacity `0.16s`, transform `0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)`, both delayed `1.1s` | Its transform easing permits overshoot, giving it a more buoyant reveal. |
| Menu label | Opacity and transform `0.16s`, delayed `0.22s`; transform uses `cubic-bezier(0.165, 0.84, 0.44, 1)` | Staged menu-label appearance is configured; the menu was not opened. |
| Desktop navigation links | Color `0.16s` | A short color transition is declared; the destination color was not sampled. |
| Goods-detail and closing links | Color `0.16s` | Color transitions are declared; complete hover states are unverified. |

A bare computed `transition: all` on other sampled elements does not establish a meaningful animation duration. The sampled elements report `animation: none`, but this does not rule out animation on children, pseudo-elements, or through script.

### Observed Interaction Boundaries

- The supplied browser process traversed the page and captured settled positions. The menu remains visible near the upper-right corner in the scrolled screenshots.
- Navigation anchor destinations and outbound merchandise links are present in the rendered DOM. Successful navigation was not tested.
- Paw trails are visible as decoration. Cursor-following, scroll-synchronized footprints, parallax, and looping character motion are not established.
- Sharing controls were not activated. Do not assign specific social platforms or copy-to-clipboard behavior without additional evidence.
- The inspection waited for finite visible motion and image readiness within stated time limits. It temporarily paused perpetual animations during readiness checks and resumed them afterward. Static captures therefore cannot establish the full motion experience.

For a new implementation, retain the short, gentle reveal character while making content visible by default and respecting reduced-motion preferences.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Overseas banner | Pale pink texture with photographic accents | Shop utility and international routing |
| Brand strip | Plain white | Keeps the small Nekobu mark legible |
| Hero outer field | Red with darker paws | Immediate identity and celebratory energy |
| Hero inner field | Quieter red, white frame and artwork | Concentrates attention on the campaign message |
| Concept and goods | Warm cream | Long-form reading and product explanation |
| Research area | White with very pale paws | Clinical clarity softened by the animal theme |
| Message frame | Teal brackets over the existing surface | Editorial emphasis without a card background |
| Sharing section | Red with reversed white content | Reasserts the campaign identity near the end |
| Related merchandise | Beige with brown text and CTA | Warm transition into the wider shop |
| Footer | Brown texture and compact white utilities | Parent-site identity and policy navigation |

Separation comes primarily from color fields, generous spacing, outlines, and shaped boundaries. The visible button shadows are small and directional; they are not evidence of a site-wide elevation system.

## Imagery

The hero’s primary asset is a friendly parade drawn in white. Rounded paws, simplified faces, irregular contours, and expressive walking poses make the campaign feel communal. The two cats lead the other animals and the human figure, directly connecting the illustration to the page’s stated research story.

Photography performs different roles lower down: the laboratory portrait supplies credibility, the book cover adds a publication reference, and the six closing product images supply color and commercial variety. Keep these images naturally photographic. Do not apply a global duotone treatment simply because the hero uses two colors.

Paws appear at two scales: a regular low-contrast background pattern and isolated footprint trails. The latter bridge boundaries and fill otherwise quiet margins. Waves, ribbon notches, rounded image crops, and open brackets reinforce the same soft visual language.

### Observed Asset References

No asset filenames or image-source URLs were included in the supplied extraction. The entries below identify visible assets without inventing paths.

| Asset | Observed use | Implementation handling |
| --- | --- | --- |
| Nekobu logo | Centered site identity at both viewports | Preserve the measured 59 × 48px display footprint. |
| Overseas shopping banner | Pink top strip with cat-related cutouts | Provide an appropriate mobile composition rather than clipping the desktop banner. |
| Marching character illustration | Main hero artwork | Preserve the full group, flag, and linked-hand composition. |
| Hero wordmark | “AIM for Happiness” | Keep its aspect ratio; do not infer a font from wrapper styles. |
| Ribbon, promise, and slanted announcement | Supporting hero message | Supply responsive variants where composition changes. |
| Graphic section headings | Concept, explainer, and goods hierarchy | Preserve the observed orientation changes; exact asset paths are unavailable. |
| Researcher portrait | Circular profile image | The original page credits this photograph to あさのますみ. |
| Book cover | Compact publication reference | Preserve cover proportions and readable adjacent title text. |
| Six merchandise photographs | Closing circular gallery | Use circular crops and retain photographic color. |
| Paw and footer textures | Background decoration | Exact images are unavailable; label replacements as approximations. |

Use authorized source artwork when available. CSS can reproduce the layout, color fields, circles, brackets, and waves; it cannot replace the distinctive characters or graphic lettering faithfully.

## Layout & Responsive Behavior

The page is a conventional vertically scrolling document, not a viewport-locked application. Its desktop and mobile document heights are similar—approximately 9422px and 9289px—even though individual sections change substantially.

### Observed Section Heights

| Section | Desktop | Mobile | Implication |
| --- | --- | --- | --- |
| Hero | `846.33px` | `659.70px` | A horizontal composition becomes a compact vertical poster. |
| Concept | `1269.80px` | `1785.25px` | Reflow and vertical composition add substantial mobile height. |
| AIM explainer section box | `1863.63px` | `1510.58px` | Artwork and headings reorganize; it is not simple width scaling. |
| Goods | `2261.77px` | `2487.33px` | Product rows become taller media-first stacks. |
| Sharing | `1110.38px` | `504.13px` | Decorative composition compresses strongly on mobile. |
| Related merchandise | `606.38px` | `587.67px` | Smaller elements offset the change from one image row to two. |

### Structural Changes

- **Hero:** desktop copy at left and illustration at right become illustration first and copy below.
- **Concept:** the desktop side-rail narrative becomes a vertical sequence with carefully controlled Japanese line breaks.
- **Explainer heading:** a tall right-side graphic becomes a centered horizontal mobile composition.
- **Researcher message:** the 216px sidebar and 760px message panel stack into separate full-width sections.
- **Products:** copy positioned beside a broad media region moves below that region. Product heights vary with heading and introductory-copy wrapping.
- **Closing photographs:** six columns become three columns by two rows.
- **Footer:** the home link becomes a separate block; policy links remain compact; the desktop logo treatment is simplified.

At 390px, many measurements are consistent with a factor of `390 / 375 = 1.04`: for example, 20 becomes 20.8px and 14 becomes 14.56px. This is a calculated observation, not proof of the original responsive formula or a confirmed 375px design canvas.

The main mobile content width is approximately 90.4% of the viewport. The hero uses its own 20.8px inset, while message paragraphs have a much narrower inner measure. Preserve this hierarchy instead of applying one padding value to every section.

The exact breakpoint is unknown. A 768px breakpoint in the Quick Start is a recommendation that reproduces the two observed arrangements; it is not a source-derived value.

## Do’s and Don’ts

### Do

- Keep Campaign Red `#d6001c` as the principal identity color.
- Pair the red with warm cream and teal reading text, then use beige and brown for the closing shop invitation.
- Preserve the marching characters as a complete composition with their flag and linked hands.
- Treat the hero wordmark and ribbon as artwork with responsive proportions.
- Use the declared rounded Japanese family and measured regular weight when available.
- Keep concept paragraphs especially airy and message paragraphs comfortably spaced.
- Use open brackets around the researcher message instead of a filled floating card.
- Keep the portrait, biography, photo credit, and book reference grouped.
- Keep donation explanations adjacent to their corresponding merchandise.
- Reflow the six closing photographs from one row into a three-by-two mobile grid.
- Use paw patterns quietly and reserve stronger contrast for actual content.
- Preserve the pink international-shopping banner and centered brand strip in the current opening.

### Don’t

- Don’t replace the current page with a generic hero followed by interchangeable feature cards.
- Don’t mistake the H1 wrapper’s 12px computed size for the hero lettering’s visible size.
- Don’t assume every source wrapper directly owns the visible border, fill, or rounded shape.
- Don’t identify a font for the graphic wordmark without evidence.
- Don’t make all Japanese headings bold to imitate their visual weight.
- Don’t flatten the desktop hero into a uniformly scaled mobile image.
- Don’t put a complete rectangular border around the open-bracket message panel.
- Don’t apply monochrome filters to the naturally colored merchandise photography.
- Don’t invent social platforms, menu-open states, or moving paw behavior from static screenshots.
- Don’t claim the explainer or product-image details were visually inspected when only their surrounding DOM geometry was supplied.
- Don’t treat the displayed 2022 campaign language as a newly verified medical or commercial update.

## Recommended Implementation Additions

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

- Give the menu button an accessible name, `aria-expanded`, and `aria-controls`. Implement keyboard access and restore focus when its panel closes.
- Provide meaningful alternatives for graphic headings and the hero wordmark. Keep decorative paws, waves, and redundant artwork out of the accessibility tree.
- Retain real heading structure even when visible text is supplied as an image.
- Provide a text equivalent for the research explainer instead of relying exclusively on comic imagery.
- Use a visible focus outline that works on both red and light sections.
- Keep essential content visible if fonts, images, or reveal scripts fail. Reserve image space to reduce layout shifts.
- Respect `prefers-reduced-motion`; skip delayed entrances rather than making visitors wait for essential text.
- Consider a 16px minimum for important mobile prose and larger utility text. This intentionally departs from the measured 14.56px body and 10px footer sizes.
- Keep purchase targets fully reachable on small screens even if decorative marker artwork extends beyond a content row.
- Preserve the donation and tax wording as structured product data. Verify current commerce data before using this campaign content in a new shop.

## Agent Prompt Guide

### Quick Color Reference

- Hero and sharing fields: `#d6001c`.
- Concept and goods sections: `#f6f5ed`.
- Narrative text, headings, brackets: `#265c6e`.
- Closing merchandise background: `#e3dacf`.
- Closing heading and pill: `#573b26`.
- Reversed artwork, outlines, and CTA text: `#ffffff`.
- Supporting notes: `#363838`.
- Decorative paws: low contrast within the local surface palette; exact pattern colors were not extracted.

### Overall Prompt

“Create a long Japanese research-support campaign page inspired by AIM for Happiness 2022. Begin with a pale pink overseas-shopping banner and a small centered brand mark on white. Build a large red hero with a thin rounded white frame, a white illustrated parade of two cats, a dog, a rabbit, and a person, an outlined ribbon, a graphic campaign wordmark, and a short Japanese promise. Place copy left and illustration right on desktop; put the illustration above the copy on mobile. Follow with warm cream narrative sections, teal rounded Japanese typography, small red English labels, a white research area with faint paws, a circular researcher portrait, and a message framed by open teal brackets. Include four charity product entries, a red sharing section, and a beige closing gallery of six circular product photographs. Use wave-shaped section boundaries and a brown outlined pill link. Keep the composition friendly, spacious, and editorial.”

### Example Component Prompts

1. **Hero:** “A red campaign poster inside a thin white rounded frame. Place the illustrated animal-and-human parade beside a graphic title stack on desktop, then above it on mobile. Keep the slanted announcement attached to the illustration. Use responsive ribbon artwork and a cream wave at the bottom.”
2. **Researcher message:** “A transparent message panel over a white background with very faint paw prints. Use open teal brackets at its sides, a small red Montserrat label, a large rounded Japanese heading, and teal body text with twice-font-size leading. Place a circular portrait and compact biography to its left on desktop and above it on mobile.”
3. **Product entry:** “A spacious charity merchandise row with a broad media region, a short red introduction, a teal Japanese product title, quantity and price details, a smaller fund-contribution explanation, and an explicit purchase link. Stack media above text on mobile. Keep the product’s contribution wording attached to the product.”
4. **Closing gallery:** “A warm beige section with a centered brown invitation, six naturally colored product photographs in white-outlined circles, and a brown pill link with a white paw icon. Use six columns on desktop and three columns by two rows on mobile. Finish with a textured brown utility footer.”

## Quick Start

### CSS Custom Properties

This is a reusable approximation built from the supplied measurements. It uses a normal root font size, an explicitly recommended 768px breakpoint, and sampled mobile sizes. It is not extracted source CSS.

The paw tile and wave below are newly authored SVG approximations embedded in CSS. Replace them with authorized assets for closer fidelity. Supply the original-style illustration, wordmark, ribbon variants, portrait, and product images separately; no original asset paths were provided.

Place `.menu-anchor` after the brand strip and before the main content, inside a containing block that spans the whole page. Its zero-height sticky wrapper approximates the observed initial and scrolled menu positions. Menu state management and sharing behavior require application logic.

```css
:root {
  /* Measured structural colors */
  --color-red: #d6001c;
  --color-cream: #f6f5ed;
  --color-teal: #265c6e;
  --color-beige: #e3dacf;
  --color-brown: #573b26;
  --color-white: #ffffff;
  --color-text: #363838;
  --color-footer-muted: #a4947f;

  /* Visual fallback estimate for the banner */
  --color-banner: #ffd1d1;

  /* Computed campaign families; load licensed fonts separately */
  --font-campaign: dnp-shuei-mgothic-std, sans-serif;
  --font-label: montserrat, sans-serif;
  --font-utility: 'Hiragino Kaku Gothic Pro', Meiryo,
    'MS PGothic', Arial, Osaka, sans-serif;

  --text-heading: 32px;
  --text-body: 20px;
  --text-label: 16px;
  --text-intro: 16px;
  --text-note: 13px;
  --text-closing: 24px;
  --text-action: 20px;
  --tracking-body: 0.08em;
  --tracking-heading: 0.06em;

  --content-width: 1040px;
  --hero-inset: 32px;
  --menu-size: 80px;
  --menu-inset: 16px;
  --radius-frame: 16px;
  --outline-width: 3px;
  --space-row: 32px;

  /* Timings derived from computed transition declarations */
  --ease-reveal: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-pop: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --reveal-delay: 1.1s;

  /* Recommended decorative approximations, not original assets */
  --paw-tile: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2284%22 height=%2284%22 viewBox=%220 0 84 84%22%3E%3Cg fill=%22black%22 transform=%22rotate(-25 42 42)%22%3E%3Cellipse cx=%2242%22 cy=%2248%22 rx=%226%22 ry=%225%22/%3E%3Cellipse cx=%2233%22 cy=%2240%22 rx=%222.5%22 ry=%223.5%22/%3E%3Cellipse cx=%2239%22 cy=%2236%22 rx=%222.5%22 ry=%223.5%22/%3E%3Cellipse cx=%2246%22 cy=%2236%22 rx=%222.5%22 ry=%223.5%22/%3E%3Cellipse cx=%2252%22 cy=%2241%22 rx=%222.5%22 ry=%223.5%22/%3E%3C/g%3E%3C/svg%3E');
  --wave-mask: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22214%22 height=%2228%22 viewBox=%220 0 214 28%22%3E%3Cpath fill=%22black%22 d=%22M0 14 Q53.5 -14 107 14 T214 14 V28 H0Z%22/%3E%3C/svg%3E');
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.campaign {
  color: var(--color-text);
  background: var(--color-white);
  font-family: var(--font-campaign);
  font-weight: 400;
  letter-spacing: var(--tracking-body);
}

.campaign img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

.campaign button,
.campaign a {
  -webkit-tap-highlight-color: transparent;
}

.campaign button {
  font: inherit;
}

.content-width {
  inline-size: 90.4%;
  max-inline-size: var(--content-width);
  margin-inline: auto;
}

.overseas-banner {
  display: block;
  background: var(--color-banner);
}

.overseas-banner img {
  inline-size: min(100%, 1000px);
  margin-inline: auto;
}

.brand-strip {
  display: grid;
  place-items: center;
  min-block-size: 70px;
  background: var(--color-white);
}

.brand-strip img {
  inline-size: 59px;
  block-size: 48px;
  object-fit: contain;
}

/* Recommended structure for the observed persistent control */
.menu-anchor {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  block-size: 0;
}

.menu-toggle {
  position: absolute;
  inset-block-start: var(--menu-inset);
  inset-inline-end: var(--menu-inset);
  display: grid;
  place-content: center;
  gap: 10px;
  inline-size: var(--menu-size);
  block-size: var(--menu-size);
  padding: 0;
  border: 4px solid var(--color-white);
  border-radius: 50%;
  color: var(--color-white);
  background: var(--color-red);
  box-shadow: 0 3px 0 rgb(0 0 0 / 12%);
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  inline-size: 36px;
  block-size: 4px;
  border-radius: 999px;
  background: currentColor;
}

.paw-surface {
  position: relative;
  isolation: isolate;
}

.paw-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paw-color, rgb(38 92 110 / 4%));
  mask-image: var(--paw-tile);
  mask-size: 84px 84px;
  mask-repeat: repeat;
  pointer-events: none;
}

.wave-bottom {
  position: relative;
}

.wave-bottom::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  block-size: 28px;
  background: var(--next-surface, var(--color-cream));
  mask-image: var(--wave-mask);
  mask-size: 214px 28px;
  mask-position: left bottom;
  mask-repeat: repeat-x;
  pointer-events: none;
}

.hero {
  --paw-color: rgb(110 0 20 / 18%);
  padding: var(--hero-inset) var(--hero-inset) 136px;
  color: var(--color-white);
  background: var(--color-red);
}

.hero-frame {
  display: grid;
  grid-template-columns: minmax(0, 0.633fr) minmax(0, 1fr);
  align-items: center;
  gap: 34px;
  min-block-size: min(47.1vw, 678px);
  padding: 84px clamp(32px, 6.3vw, 91px);
  border: var(--outline-width) solid var(--color-white);
  border-radius: var(--radius-frame);
  background: var(--color-red);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-inline-size: 0;
}

.hero-ribbon {
  inline-size: 84%;
  margin: 0 0 48px;
}

.hero-wordmark {
  inline-size: 88.8%;
  margin: 0 0 34px;
}

.hero-tagline,
.hero-art {
  inline-size: 100%;
  margin: 0;
}

.hero-ribbon img,
.hero-wordmark img,
.hero-tagline img,
.hero-art img {
  inline-size: 100%;
}

/* Content remains visible until application logic changes state. */
.hero-ribbon,
.hero-wordmark,
.hero-tagline {
  transition:
    opacity 240ms var(--reveal-delay),
    transform 500ms var(--ease-reveal) var(--reveal-delay);
}

.hero-announcement {
  transition:
    opacity 160ms var(--reveal-delay),
    transform 400ms var(--ease-pop) var(--reveal-delay);
}

.section-label {
  margin: 0;
  color: var(--color-red);
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.campaign-heading {
  margin: 0;
  color: var(--color-teal);
  font-size: var(--text-heading);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--tracking-heading);
}

.concept,
.goods {
  background: var(--color-cream);
}

.concept-copy {
  max-inline-size: 640px;
  color: var(--color-teal);
  font-size: var(--text-body);
  line-height: 2.5;
}

.concept-copy p + p {
  margin-block-start: 48px;
}

.research-layout {
  display: grid;
  grid-template-columns: 216px minmax(0, 760px);
  align-items: start;
  gap: 64px;
}

.research-profile {
  padding-block-start: 32px;
  color: var(--color-teal);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.research-portrait {
  inline-size: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

.book-reference {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 24px;
  margin-block-start: 22px;
  padding-block-start: 22px;
  border-block-start: 2px dotted var(--color-teal);
}

.message-panel {
  position: relative;
  padding: 60px 78px;
  color: var(--color-teal);
}

.message-panel::before,
.message-panel::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inline-size: 20px;
  border: 3px solid var(--color-teal);
  pointer-events: none;
}

.message-panel::before {
  inset-inline-start: 0;
  border-inline-end: 0;
  border-radius: 18px 0 0 18px;
}

.message-panel::after {
  inset-inline-end: 0;
  border-inline-start: 0;
  border-radius: 0 18px 18px 0;
}

.message-panel .campaign-heading {
  margin-block: 46px 30px;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.message-body {
  margin: 0;
  font-size: var(--text-body);
  line-height: 2;
}

.message-signature {
  margin: 32px 0 0;
  font-size: 20px;
  line-height: 1.8;
}

/* Product media geometry is an adaptation; exact crops are unknown. */
.product-list {
  display: grid;
  gap: var(--space-row);
}

.product-entry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.243fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  min-block-size: 367px;
  padding-inline-end: 103px;
  color: inherit;
  text-decoration: none;
}

.product-media {
  inline-size: 100%;
  aspect-ratio: 497 / 367;
  object-fit: contain;
}

.product-intro {
  margin: 0 0 8px;
  color: var(--color-red);
  font-size: var(--text-intro);
  line-height: 1.6;
}

.product-title {
  margin: 0;
  color: var(--color-teal);
  font-size: var(--text-heading);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.06em;
}

.donation-note {
  margin: 0;
  padding-inline-start: 1em;
  font-size: var(--text-note);
  line-height: 1.7;
}

.share-section {
  --paw-color: rgb(110 0 20 / 18%);
  --next-surface: var(--color-beige);
  padding-block: 160px 154px;
  color: var(--color-white);
  background: var(--color-red);
  text-align: center;
}

.share-controls {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.share-control {
  inline-size: 80px;
  block-size: 80px;
}

.share-copy,
.related-heading {
  font-size: var(--text-closing);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.06em;
}

.related-section {
  padding: 82px 17.68px 96px;
  color: var(--color-brown);
  background: var(--color-beige);
  text-align: center;
}

.related-heading {
  margin: 0;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  max-inline-size: 1040px;
  margin: 40px auto 48px;
  padding: 0;
  list-style: none;
}

.related-grid img {
  inline-size: 100%;
  aspect-ratio: 1;
  border: 3px solid var(--color-white);
  border-radius: 50%;
  object-fit: cover;
}

.pill-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-inline-size: 100%;
  min-block-size: 96px;
  padding: 8px 50px;
  border: 4px solid var(--color-white);
  border-radius: 999px;
  color: var(--color-white);
  background: var(--color-brown);
  box-shadow: 0 4px 0 rgb(87 59 38 / 16%);
  font-size: var(--text-action);
  line-height: 1.6;
  text-decoration: none;
  transition: color 160ms;
}

.pill-link svg {
  flex: none;
  inline-size: 26px;
  block-size: 26px;
  fill: currentColor;
}

.site-footer {
  padding: 16px 20px;
  color: var(--color-white);
  background: var(--color-brown);
  font-family: var(--font-utility);
  font-size: 10.08px;
  line-height: 1.6;
  letter-spacing: 0.36px;
  text-align: center;
  /* Add an authorized texture asset for the observed footer finish. */
}

.site-footer a {
  color: inherit;
}

/* Recommended accessibility additions */
.campaign :focus-visible {
  outline: 3px solid var(--color-teal);
  outline-offset: 5px;
  box-shadow: 0 0 0 5px var(--color-white);
}

.campaign [id] {
  scroll-margin-block-start: 100px;
}

@media (max-width: 48rem) {
  :root {
    --text-heading: 24.96px;
    --text-body: 14.56px;
    --text-label: 11.44px;
    --text-intro: 13.52px;
    --text-note: 11.96px;
    --text-closing: 16.64px;
    --text-action: 12.48px;
    --hero-inset: 5.333333vw;
    --menu-size: 49.92px;
    --menu-inset: 10.4px;
    --radius-frame: 12px;
    --outline-width: 2px;
    --space-row: 16.64px;
  }

  .brand-strip {
    min-block-size: 60px;
  }

  .menu-toggle {
    gap: 6px;
    border-width: 3px;
  }

  .menu-toggle span {
    inline-size: 22px;
    block-size: 3px;
  }

  .hero {
    padding-block-end: 86.32px;
  }

  .hero-frame {
    display: flex;
    flex-direction: column;
    gap: 20.8px;
    min-block-size: 552.6px;
    padding: 34px 22px 38px;
  }

  .hero-art {
    order: 0;
  }

  .hero-copy {
    order: 1;
    inline-size: 100%;
  }

  .hero-ribbon {
    inline-size: 94%;
    margin-block-end: 20.8px;
  }

  .hero-wordmark {
    inline-size: 83.3%;
    margin-block-end: 20.8px;
  }

  .hero-tagline {
    inline-size: 96%;
  }

  .wave-bottom::after {
    block-size: 16px;
    mask-size: 112px 16px;
  }

  .concept .campaign-heading {
    font-size: 29.12px;
  }

  .concept-copy p + p {
    margin-block-start: 28.08px;
  }

  .research-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 49.92px;
  }

  .research-profile {
    inline-size: min(100%, 223.63px);
    margin-inline: auto;
    padding-block-start: 0;
    font-size: 12.48px;
  }

  .message-panel {
    padding: 50.96px 43.67px 47.84px;
  }

  .message-panel .campaign-heading {
    margin-block: 28.08px 18.72px;
    letter-spacing: 0.06em;
  }

  .message-signature {
    margin-block-start: 21.84px;
    font-size: 13.52px;
  }

  .product-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-inline-end: 0;
  }

  .product-copy {
    padding: 0 28px 45px;
  }

  .share-section {
    padding-block: 84.24px 76.96px;
  }

  .share-controls {
    gap: 16.64px;
  }

  .share-control {
    inline-size: 58.24px;
    block-size: 58.24px;
  }

  .related-section {
    padding-block: 57.2px 84.24px;
  }

  .related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10.4px;
    margin-block: 32px 36px;
  }

  .related-grid img {
    border-width: 2px;
  }

  .pill-link {
    gap: 8px;
    min-block-size: 62.4px;
    padding: 4.16px 20px;
    border-width: 2px;
  }

  .pill-link svg {
    inline-size: 18px;
    block-size: 18px;
  }
}

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

The product media ratio, bracket construction, menu positioning technique, decorative SVGs, and several frame details are implementation approximations. The CSS deliberately leaves purchase-marker artwork, the menu-open panel, explainer illustrations, and sharing integrations to separately verified implementation work.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. Define the properties above first. This does not imply that the original page uses Tailwind.

```css
@theme inline {
  --color-campaign-red: var(--color-red);
  --color-campaign-cream: var(--color-cream);
  --color-research-teal: var(--color-teal);
  --color-closing-beige: var(--color-beige);
  --color-closing-brown: var(--color-brown);

  --font-campaign-jp: var(--font-campaign);
  --font-section-label: var(--font-label);
  --font-site-utility: var(--font-utility);

  --text-campaign-heading: var(--text-heading);
  --text-campaign-body: var(--text-body);
  --text-campaign-label: var(--text-label);
  --text-campaign-note: var(--text-note);
  --text-campaign-action: var(--text-action);

  --spacing-hero-inset: var(--hero-inset);
  --spacing-product-gap: var(--space-row);
  --radius-campaign-frame: var(--radius-frame);
}
```

## Sources & Evidence

- [AIM for Happiness 2022 — Felissimo Nekobu](https://www.nekobu.com/aim/2022/): original and final inspected URL; HTTP 200. Authority for the current page’s identity, content, and visual reference.
- **Capture timestamp:** October 1, 2026, 18:42:11.412 UTC, equivalent to October 2, 2026, 03:42:11.412 JST.
- **Desktop evidence:** 1440 × 1000 viewport; opening, researcher-message, and closing screenshots; rendered document height approximately 9422.05px.
- **Mobile evidence:** 390 × 844 viewport; opening and closing screenshots; rendered document height approximately 9289.16px.
- **Rendered DOM and computed styles:** supplied text, anchor destinations, element bounds, colors, typography, padding, and transition declarations for both viewports. Source stylesheet files, image-source paths, and complete child/pseudo-element styles were not supplied.
- **Original-page attribution:** the footer identifies Felissimo’s Nekobu community and FELISSIMO copyright. The researcher profile visibly credits its photograph to あさのますみ. No website design or development credit was established.
- **Observed link destinations:** campaign anchors, Felissimo product pages, the [charity-goods article](https://www.nekobu.com/blog/2022/08/aim-1.html?vf=07), and the [Nekobu goods collection](https://www.nekobu.com/goods/). These were identified from the original page’s rendered links; their destination pages were not inspected.
- **Inspection limits:** the supplied process waited for document load, visible image decoding, sampled layout stability, and finite motion within bounded timeouts, then traversed intermediate scroll positions. SharedWorkers and service workers were disabled. These checks do not establish delayed-content completeness or unexercised interaction behavior.

This reference uses the supplied current-page captures and rendered evidence. No additional website, linked destination, local file, or historical design was accessed to prepare it.