Arabic Yamato 50th Anniversary — Style Reference

A familiar glue bottle takes center stage on a birthday cake, with a narrow stream of content passing through the celebration.

Website: Arabic Yamato 50th Anniversary Original URL: https://na-150-50th.studio.site/ Final URL: https://na-150-50th.studio.site/ Theme: dark illustrated surroundings with white, pale yellow, cream, and coral content surfaces. Inspected: September 13, 2026, at 01:35 JST; supplied retrieval timestamp: September 12, 2026, 16:35:40.087 UTC. Viewports: 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels. Scope: the current anniversary homepage: opening composition, introduction, feature-link footprints, visible quiz promotion, news list, product carousel presentation, navigation trigger, and footer. Linked pages and opened navigation states were not inspected.

This is a product anniversary microsite with editorial and product-discovery content. Its defining relationship is a wide theatrical illustration surrounding a consistently narrow reading column. The central bottle wears a party hat, bow tie, and floral decoration beneath an orange anniversary mark. Cake tiers, balloons, confetti, and sparklers extend across the desktop canvas. Grain gives the bright shapes a printed, handmade character; soft peripheral blur creates depth around a sharper central subject.

The functional page retains a 344px column on both inspected viewports. Rounded panels move through the illustrated setting, carrying a thank-you message, feature promotions, five news entries, and a product carousel. Bold sans-serif text, small status stamps, circular controls, and orange capsule links provide a simple interface within the dense artwork. Desktop space is used for atmosphere rather than additional content columns.

How to Read This Reference

Measured values come from the supplied rendered DOM rectangles and computed styles. They were not independently remeasured in this response.
Calculated values are arithmetic relationships between those measurements, such as card gaps and horizontal insets.
Visual estimates describe the original desktop and mobile captures. Estimated hex colors are implementation approximations, not sampled or source-declared values.
Recommendations describe a new implementation. The CSS below includes explicit adaptations for narrow screens, accessibility, and missing assets.
Token names are descriptive aliases unless a source custom property is identified.
The supplied original-page captures establish appearance. The extracted element list does not include every decorative layer, pseudo-element, or footer element.

Tokens — Colors

Default Palette

Name	Value	Suggested token	Role	Evidence
Midnight stage	Approximately `#10152f`	`--stage-top`	Upper illustrated surroundings	Visual estimate
Near-black stage	Approximately `#030409`	`--stage-bottom`	Lower background and negative space	Visual estimate
Anniversary orange	Approximately `#f13b0b`	`--orange`	Anniversary mark and saturated end of CTA artwork	Visual estimate
Celebration coral	Approximately `#ec6847`	`--coral`	Footer, warm decorative shapes, and approximate status fill	Visual estimate; these surfaces need not share one exact source color
Lemon panel	Approximately `#fbef87`	`--lemon`	News section and yellow cake details	Visual estimate
Textured cream	Approximately `#dedabc`	`--cream`	Product section background	Visual estimate
White surface	`#ffffff`	`--paper`	News cards, product cards, menu and carousel circles	Measured on sampled elements
Charcoal text	`#333333`	`--ink`	Introductory copy, headings, news titles, product labels	Measured
Ended status	`#969696`	`--muted`	Text of the `終了` status	Measured
Balloon cyan	Approximately `#38cbdc`	`--cyan`	Balloons and scattered highlights	Visual estimate
Confetti green	Approximately `#16bea0`	`--green`	Leaves, balloons, confetti, and sparkler stems	Visual estimate
Party violet	Approximately `#c67aff`	`--violet`	Balloons, party-hat stripes, and confetti	Visual estimate

The brightest orange connects the bottle cap, anniversary identity, and action treatment. Pale yellow and cream give longer content regions enough separation from the dark scene. Cyan, green, and violet primarily belong to illustration; they do not form a category or button-color system.

Source Values Requiring Interpretation

The page exposes --s-color-79a6a333: #1f257373 and --s-color-37ae8637: #c0820040. Their roles are not established by the supplied element sample. They should not be assigned to navigation shadows or illustration overlays without further evidence.

Several --g-color-* variables are transparent at the sampled state. These generated gradient properties do not establish the final palette. Likewise, the body computes to white while the visible surroundings are dark artwork. The orange CTA anchor computes to a transparent background and zero radius, although its visible artwork is a rounded capsule. Preserve the rendered appearance while distinguishing it from the wrapper's raw CSS.

No theme selector or alternate color mode is evidenced.

Tokens — Typography

Outfit — Numerals and Section Headings

Computed family: Outfit.
Source variable: --s-font-db97f376.
Measured weight: 700.
Roles: the live-text 50 inside the introduction, NEWS, and LINE UP.
Character: compact, rounded geometric forms that fit the friendly illustrated setting.
Implementation alias: --font-latin.

The large orange anniversary mark above the bottle is artwork. Its lettering cannot be assigned to Outfit from the supplied evidence.

Noto Sans — Japanese Copy and Labels

Computed family: "Noto Sans".
Source variable: --s-font-668b348e.
Weights: 600 for introductory paragraphs; 700 for the tagline, anniversary suffix, news headlines, product labels, status text, and CTA labels.
Tracking: normal in all sampled text roles.
Implementation alias: --font-ja.

A separate Noto Sans JP variable is declared, but the sampled Japanese paragraphs report Noto Sans. Computed family declarations do not establish the exact fallback face used for every Japanese glyph. Lato and Inter variables are also present without a demonstrated role in these components.

Type Scale

The following measured sizes are identical in the supplied desktop and mobile DOM samples.

Role	Family	Size	Weight	Line height	Notes
Introductory `50`	Outfit	`48px`	`700`	`normal`	Element occupies a 60px-high row
Introductory `周年`	Noto Sans	`40px`	`700`	`normal`	Shares the same 60px row
Introductory tagline	Noto Sans	`22px`	`700`	`26.4px`	`これからもあなたのそばに`
Section headings	Outfit	`32px`	`700`	`32px`	Centered `NEWS` and `LINE UP`
Introductory paragraphs	Noto Sans	`16px`	`600`	`28px`	280px text region
News titles	Noto Sans	`16px`	`700`	`28px`	264px text region; sampled titles occupy three lines
Product labels	Noto Sans	`16px`	`700`	`19.2px`	Centered under product imagery
Status labels	Noto Sans	`14px`	`700`	`14px`	White active status; gray ended status
CTA labels	Noto Sans	`18px`	`700`	`18px`	Centered `もっとみる`
Footer follow label	Unverified	Approximately `14–16px`	Visually bold	Unverified	Visual estimate
Footer policies and copyright	Unverified	Approximately `10–11px`	Mixed	Unverified	Visual estimate; increase if needed in an adaptation

The introduction uses a mixed-size numeral and suffix rather than one uniformly sized heading. Keep this relationship when recreating the live-text anniversary statement. The oversized illustrated mark supplies the opening display scale.

Tokens — Spacing & Shapes

Underlying rhythm: repeated multiples of 8px, with 12px used around small controls. This is a pattern inferred from measurements, not an exposed source spacing system.

Density: a narrow, readable content stream with generous vertical separation and large rounded surfaces.

Spacing Scale

Value	Application	Evidence
`8px`	Status box to news title	Calculated from text positions and the visually estimated badge box
`12px`	Gap between 32px carousel circles	Calculated from button rectangles
`16px`	News text side inset; gap between introductory paragraphs	Calculated
`24px`	News-card gap; section-to-card side inset; product media-to-label gap	Measured or calculated
`32px`	Introductory paragraph side inset; product-card top padding	Calculated inset; measured product padding
`40px`	Tagline to introductory body	Calculated
`48px`	Section heading to first card; final card to CTA; carousel circles to CTA	Calculated
Approximately `56px`	Visible separation before the footer; recurring panel separation	Visual estimate consistent with DOM positions
Approximately `64px`	News and product section top/bottom padding	Reconstructed from captures and element positions
Approximately `72px`	Introduction top edge to heading row	Visual top edge combined with measured heading position
Approximately `96px`	Introduction-to-feature separation in the CSS adaptation	Reconstruction; introduction wrapper bounds were not supplied

Border Radius

Element	Value	Evidence
News cards	`32px`	Measured
Product cards	`32px`	Measured
Main content panels and footer	Approximately `32px`	Visual estimate
Menu button	`30px` on a `48 × 48px` box	Measured; renders as a circle
Carousel controls	`50%` on `32 × 32px` boxes	Measured
Visible CTA capsule	Approximately half its 56px height	Visual estimate; wrapper itself reports zero radius
Active-status stamp	Nearly square corners	Visual observation

Layout Measurements

Element	Desktop	Mobile	Evidence
Content column	`344px`, left edge `548px`	`344px`, left edge `23px`	Measured feature-link widths and positions; repeated visually across panels
Inner cards and CTA	`296px`, left edge `572px`	`296px`, left edge `47px`	Measured
Introduction text	`280px`, left edge `580px`	`280px`, left edge `55px`	Measured
News title region	`264px`, left edge `588px`	`264px`, left edge `63px`	Measured
Menu trigger	`48 × 48px`, at `828, 720`	`48 × 48px`, at `303, 720`	Measured at the opening state
Feature-link footprint	`344 × 480px`	`344 × 480px`	Measured for all three links
News card	`296 × 360px`	`296 × 360px`	Measured
News media region	Approximately `296 × 180px`	No supplied mobile news close-up	Desktop visual estimate
Product card	`296 × 395.1875px`	Same	Measured
Product media allocation	`296 × 296px`	Same	Calculated from card height, padding, gap, and label height
CTA	`296 × 56px`	Same	Measured
Footer	Approximately `344 × 320px`	Approximately `344 × 320px`	Visual estimate
Document height	`6413.578125px`, rounded report `6414px`	Same	Measured

Components

Illustrated Celebration Stage

Role: establishes product identity and carries the page's emotional tone.

The central vertical sequence is a large orange anniversary mark, a pale spotlight, a decorated glue bottle, and progressively wider cake tiers. The bottle remains recognizable through its yellow contents, ribbed orange cap, and black-and-orange label. Decorative costume pieces add celebration without obscuring its silhouette.

The cake uses repeated scallops, strawberry-like circles with green leaves, zigzag icing, dots, and semicircle patterns. These flat shapes have fine grain rather than perfectly uniform vector fills. Balloons and sparklers occupy the side regions on desktop. Some distant shapes are heavily blurred, while the central cake edges and foreground balloons remain sharper.

Across the desktop scroll captures, the scene stays in substantially the same viewport position while content changes in front of it. This supports a persistent backdrop interpretation. Its exact CSS positioning and layer decomposition were not supplied.

Reimplementation guidance: separate decorative artwork from the document's content flow. Use a centered artboard with a protected central subject and permit peripheral illustration to crop on phones. Keep decoration noninteractive and out of the accessibility tree.

Introduction Panel

Role: provides a thank-you message and explains the anniversary.

A white, approximately 344px-wide panel begins around document y = 784px. Its upper corners are strongly rounded. A foreground balloon cluster overlaps the upper-left area, with strings and small confetti extending into the panel's visual space.

The live-text heading combines Outfit 50 at 48px with Noto Sans 周年 at 40px in a 60px-high row. The 22px tagline follows immediately. A 40px gap separates it from four paragraphs set at 16px, weight 600, and 28px line height.

Paragraphs occupy a 280px region, creating calculated 32px side insets. Their measured heights are 56px, 56px, 112px, and 56px, with 16px between paragraphs. This measured text structure is a more reliable reconstruction guide than assuming generic section padding.

Keep the heading centered and the body easy to scan. Confetti should sit around readable text, with its strongest clusters near the edges.

Floating Navigation Trigger

Role: provides persistent access to site navigation.

The trigger is a white 48px circle with a small coral three-line icon. It sits 16px inward from the content column's right edge. At the opening state its top is y = 720px in both viewports. Later captures place it approximately 24px below the viewport top, still aligned with the same narrow column.

This is consistent with a trigger that begins beside the lower hero and then sticks near the top during scrolling. The precise positioning rule is inferred from captures. A subtle cool halo is visible around the button in some views; its CSS shadow or artwork source is unverified.

The extracted button has no text content. Its accessible name was not included in the evidence. No open menu, menu entries, dismissal behavior, or focus handling was inspected.

Feature Promotion Links

Role: direct visitors from the anniversary message into related content.

Three image-led anchors occupy consecutive 344 × 480px footprints. Their recorded destinations are /2, /3, and /quest/question1. The first begins at document y = 1470.390625px; the next two begin exactly 480px apart.

The available middle desktop capture shows the lower portion of the quiz promotion. It has a substantial red outer frame, a pale yellow inner surface, and the source labels クイズに答えて称号をゲットしよう！ and アラビックヤマトクエスト. The upper portion contains product-related artwork with a visibly blocky blue pattern.

The other two promotion artworks are not sufficiently visible in the supplied captures to describe their subjects or typography. Empty extracted anchor text does not mean the links are visually empty. Preserve their measured footprint while leaving unknown artwork and destination-page behavior unspecified.

News Section

Role: presents anniversary-related updates and campaign announcements.

A tall pale-yellow panel encloses a centered NEWS heading, five vertically stacked white cards, and one orange もっとみる link. The section remains one column at desktop width.

The heading is Outfit 32px/32px, weight 700. Its bottom sits 48px above the first card. Cards have a measured 24px vertical gap. The final card ends 48px before the CTA begins. The section's 24px horizontal insets are established by the difference between the 344px outer column and 296px cards.

The displayed status sequence is active, ended, ended, ended, active. These are captured page labels, not an independent verification that the associated campaigns remain active on the inspection date.

News Card

Role: a single linked announcement with a preview, status, and headline.

The whole card is an anchor. Its measured box is 296 × 360px with a white background and 32px radius. The screenshot shows an upper media allocation about 180px high and a lower text area.

A reconstruction of the visible anatomy is:

Approximately 180px-high media region, clipped by the upper corners.
A 24px gap before the status region.
An active stamp approximately 66 × 24px, containing 14px white text with about 12px horizontal and 5px vertical padding.
An approximately 8px gap before the 16px/28px bold headline.
A 264px headline region, created by 16px side insets.
About 40px remaining beneath the sampled three-line headline.

The first two visible media regions are solid gray in the desktop news capture. The DOM contains background-image references for news items, but complete decoded previews are not established by this capture. Treat the gray areas as an unresolved capture state, not a signature design treatment or a verified loading animation.

For new content, use the observed 360px as a reference minimum. Let cards grow when titles wrap beyond the sampled length.

Product Lineup Panel

Role: introduces the product family and links to individual product pages.

The LINE UP section uses a pale cream background with an evident mottled paper texture. It shares the 344px column and approximately 32px outer radius of the news section. A centered 32px Outfit heading sits above a single visible product card.

The DOM lists five distinct products: standard bottle, refill bottle, angled bottle, refill pack, and mini-and-tank set. Some entries repeat in the carousel structure. Those duplicates should not be interpreted as additional product categories.

The desktop capture shows the mini-and-tank set; the mobile lower-page capture shows the refill bottle. Different sampled DOM states place other products in the central slot. This establishes multiple carousel positions across the evidence, but does not establish playback timing or the success of any control action.

Product Card

Role: a product photograph and name combined into one outbound link.

Each measured card is 296 × 395.1875px with a white background, 32px radius, 32px top padding, 24px bottom padding, and a 24px gap between media and text. Subtracting those dimensions and the 19.2px label height leaves a 296px square media allocation.

The product imagery is photographic and presented against white. Preserve the orange caps, transparent or pale-yellow containers, printed labels, and packaging proportions. Use contained imagery for an adaptation so the complete product remains visible.

The carousel's offscreen elements have horizontal coordinates outside the content area. The screenshots still show one card at a time, so those DOM positions should not be used to create a desktop product grid.

Carousel Controls

Role: previous, pause, and next actions beneath the product card.

Three white 32px circles form a centered group. Their measured left positions are 660px, 704px, and 748px on desktop, giving 12px gaps. The corresponding mobile positions are 135px, 179px, and 223px.

Coral chevrons flank a coral pause symbol. The circles begin 12px below the product card and end 48px before the CTA. The extracted strings keyboard_arrow_left, pause, and keyboard_arrow_right identify the icon content, but the supplied sample does not prove a particular icon font was used.

The pause symbol is consistent with automatic advancement being available. Actual pause/resume behavior, swipe support, wrapping rules, and keyboard controls were not exercised in the supplied record.

Brand Footer

Role: closes the content stream with social links, company identity, policies, and copyright.

The footer is a coral rounded rectangle about 344 × 320px. It follows the product panel with roughly 56px of exposed background. Its contents are centered: FOLLOW US, X and Instagram marks, a large white company logo, three compact policy labels, and copyright.

The visible policy labels are プライバシーポリシー, サイトポリシー, and コミュニティガイドライン. Their link destinations were not supplied. The company logo and page title independently identify ヤマト株式会社. The footer displays © 2025 YAMATO Co.,Ltd.; that year belongs to the page content, while the inspection occurred in September 2026.

The mobile capture makes the footer's grain especially clear. Treat the logo as supplied brand artwork; no font identification is supported for its custom lettering. No production credit is established by the inspected original-page evidence.

Tokens — Motion & Interaction

Treatment	Supplied evidence	Interpretation and limits
General element transitions	`0.3s cubic-bezier(0.4, 0.4, 0, 1)` on many sampled elements	Measured declaration; does not identify a particular hover or entrance effect
Carousel control transitions	`0.4s cubic-bezier(0.4, 0.4, 0, 1)`	Measured on the three control buttons; changed properties were not exercised
Body background transition	`background 0.5s cubic-bezier(0.4, 0.4, 0, 1)`	Measured declaration; no alternate background state was inspected
Product transform easing	`cubic-bezier(0.58, 0.21, 0.41, 0.96)`	Reported for transform transitions; no nonzero duration is established by the supplied value
Smooth scrolling	`html { scroll-behavior: smooth; }` appears in supplied page CSS text	Declaration observed; anchor-scroll timing was not measured
Persistent scenery	Background landmarks remain aligned across desktop scroll captures	Visually consistent with a fixed backdrop; implementation unverified
Navigation attachment	Trigger moves from opening y = 720px to about 24px from viewport top in later captures	Visually consistent with sticky positioning
Product advancement	Different products occupy the visible card across captures and DOM states	Carousel state variation evidenced; interval and transition sequence unknown
Decorative animation	No time-resolved illustration sequence supplied	Balloon blur, sparks, and confetti do not by themselves prove animation

The sampled elements report animation: none. This does not establish that the entire site is static: ancestor transforms, pseudo-elements, scripts, or animated assets may be outside the sample.

The browser record documents initial observation and scrolling, with readiness checks for layout and image stability. It does not document deliberate menu opening, carousel control activation, hover, keyboard focus, quiz answers, or destination-page navigation. Do not invent motion speeds or interaction outcomes for those states.

For an adaptation, preserve the observed short easing family for restrained feedback. Any new balloon drift or sparkle loop should be labeled as an added effect and have a static reduced-motion alternative.

Surfaces

Layer	Appearance	Structural purpose
Outer scene	Dark navy to near-black, spotlight, blurred balloons, confetti	Creates depth and uses desktop side space
Central illustration	Grainy, saturated cake and decorated bottle	Carries anniversary identity
Introduction	White with sparse confetti and overlapping balloons	Makes the thank-you message readable
News section	Pale yellow outer panel	Groups a long list of announcements
News cards	White, 32px corners, preview above text	Separates individual linked items
Product section	Mottled pale cream	Distinguishes product discovery from news
Product card	White, 32px corners, contained product imagery	Gives small packaging details a quiet surround
CTA	Textured coral/orange capsule with white label	Repeated destination action
Controls	White circles with coral iconography	Compact utility layer
Footer	Grainy coral with white content	Strong brand-colored ending

There is no evidenced general elevation scale for content cards. Separation comes primarily from color changes, generous corners, and the illustrated background. The localized haze around the menu should not be generalized into shadows on every panel.

Imagery

The design combines a printed-paper illustration vocabulary with recognizable product photography. Cake decorations are simple geometric forms, but their fine grain prevents them from feeling mechanically flat. Foreground edges remain fairly clear; peripheral balloons and light points become soft and diffuse.

The central hierarchy is crucial: anniversary mark first, decorated bottle second, cake tiers third, then surrounding celebration. Mobile cropping protects this hierarchy while removing much of the side scenery.

Product photography receives cleaner white framing than the illustration. Keep labels and cap shapes legible. The mini-and-tank package is shown as a complete retail item, while the refill image emphasizes the taller bottle. Do not force these differing silhouettes into a uniform cropped close-up.

Observed Asset References

Complete image URLs were not supplied. The following references identify observed roles and available evidence without inventing filenames.

Asset role	Original-page evidence	Reuse guidance
Anniversary mark, bottle, spotlight, and cake	Desktop and mobile opening captures	Obtain the actual authorized artwork; central dimensions and crop are identity-critical
Side balloons, sparklers, and confetti	Desktop opening and scrolled captures	Preserve the contrast between sharp foreground shapes and blurred surroundings
Introductory balloon decoration	Opening captures	Allow controlled overlap beyond the white panel edge
Quiz promotion artwork	Lower portion visible above the news section	Preserve the red frame and yellow field; remaining details require the actual asset
News previews	Gray regions in desktop capture; background-image declarations in DOM	Preview appearance remains unresolved
CTA background	Visible textured capsule; truncated filename includes `592x112`	Exact URL unavailable; CSS gradient is only an approximation
Product photos	Product captures and DOM background-image references	Keep complete packaging and bottle silhouettes visible
Company and social marks	Desktop and mobile footer captures	Use supplied brand assets with accessible link names

The quick-start code provides artwork hooks rather than fabricated asset URLs. CSS can recreate panel geometry, spacing, and simple controls; the celebratory illustration requires actual visual assets.

Layout & Responsive Behavior

The desktop and mobile layouts preserve the same internal dimensions. The measured 344px column is centered at x = 720px on desktop and x = 195px on mobile. Its margins therefore change from 548px to 23px, while cards, copy widths, and type sizes stay constant.

Shared Vertical Structure

Landmark	Document y position	Evidence
Opening menu trigger	`720px`	Measured at both viewports
Introduction panel top	Approximately `784px`	Visual estimate
Introductory heading row	`856px`	Measured
First feature anchor	`1470.390625px`	Measured
Second feature anchor	`1950.390625px`	Measured
Quiz anchor	`2430.390625px`	Measured
`NEWS` heading	`3030.390625px`	Measured
First news card	`3110.390625px`	Measured
News CTA	`5054.390625px`	Measured
`LINE UP` heading	`5294.390625px`	Measured
Product card	`5374.390625px`	Measured
Carousel circles	`5781.578125px`	Measured
Product CTA	`5861.578125px`	Measured

The identical document height and sampled y positions support a fixed internal composition across these two widths. The mobile screenshot is not a scaled-down desktop content layout. It is a narrower view of the same central layout and a cropped decorative world.

At 390 × 844, the introduction's heading begins below the first viewport. The opening view is therefore almost entirely illustration, with the white card's upper edge entering near the bottom. On the 1000px-high desktop capture, more of that card is visible. The difference follows viewport height without requiring a different hero layout.

The mobile bottom capture and desktop bottom capture both retain the narrow footer and single product card. There is no demonstrated breakpoint that expands news into a grid or replaces the circular menu with a horizontal navigation bar.

A max-width: 840px rule for responsive line-break handling appears in the supplied CSS text. This establishes that some breakpoint logic exists, but it does not provide a complete responsive stylesheet. Tablet, landscape, widths below 390px, text zoom, and safe-area behavior remain unverified.

Recommended extension: use width: min(344px, calc(100% - 32px)) for the content column. This reproduces both inspected widths while adding a sensible 16px minimum gutter on smaller screens. Allow typography and card heights to reflow when required. This formula is an adaptation, not a recovered source rule.

Do’s and Don’ts

Do

Preserve the 344px central column and 296px inner cards at the inspected sizes.
Use the desktop side regions for the illustrated celebration.
Protect the anniversary mark, bottle, and central cake when cropping for mobile.
Keep grain visible in illustration, warm surfaces, and CTA artwork.
Pair Outfit numerals and section headings with the measured Noto Sans text roles.
Preserve the mixed 48px numeral and 40px anniversary suffix in the introduction.
Use white cards, 32px corners, compact rectangular status stamps, and circular utility controls.
Retain 24px news-card gaps and the 48px separation before destination links.
Present product photography with complete silhouettes and readable labels.
Keep the repeated orange CTA label centered independently of its right-hand arrow disc.
Separate captured interface state from inferred behavior when extending the reference.

Don’t

Don't stretch the reading panels across a wide desktop container.
Don't turn the news list or product viewport into an unsupported desktop grid.
Don't scale down all text merely because the viewport becomes narrower.
Don't flatten the illustration into smooth, texture-free shapes.
Don't apply background blur to the central bottle, live text, or every card.
Don't interpret unresolved gray news previews as intentional final artwork.
Don't treat transparent anchor backgrounds or zero wrapper radii as the visible CTA design.
Don't assign the illustrated anniversary mark or company logo an unverified font.
Don't add prices, cart controls, or checkout behavior to the observed product-discovery cards.
Don't claim menu, quiz, carousel timing, or hover behavior that was not demonstrated.

Recommended Implementation Additions

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

Give the menu button an accessible name, expanded state, controlled-region reference, and appropriate focus management when its panel opens.
Use semantic headings for the introduction and content sections. The sampled visual headings are paragraph elements, so appearance alone should not dictate document structure.
Provide meaningful accessible names for image-led feature links whose extracted text is empty.
Keep the carousel's 32px visible circles inside approximately 44px hit targets. Announce previous, pause/resume, and next actions with explicit names.
If automatic advancement is implemented, make pause persistent and usable with keyboard input. Avoid placing offscreen cloned product links in the normal tab sequence.
Maintain a stable news-image region during loading, then provide a clear fallback if an image fails. Do not leave an unexplained gray block as the only presentation.
Check the actual textured coral surfaces against small white status and footer text. Adjust local color or text sizing where needed; approximate hex values cannot establish compliance.
Keep essential Japanese text live and selectable. Treat the stage artwork as decorative while giving product images useful alternatives.
Add visible focus indicators that remain readable on both pale panels and coral controls.
Respect reduced-motion preferences for smooth scrolling and any automatic or newly added decorative motion.
Test widths below 390px, text enlargement, and mobile safe areas. Allow panels to grow vertically rather than clipping longer content.

Agent Prompt Guide

Quick Color Reference

Main text: measured #333333.
White cards and control circles: measured #ffffff.
Ended-status text: measured #969696.
Stage: estimated #10152f fading toward #030409.
Anniversary and CTA orange: approximately #f13b0b.
Footer coral: approximately #ec6847.
News yellow: approximately #fbef87.
Product cream: approximately #dedabc.
Cyan, green, and violet: decorative illustration accents.

Overall Prompt

“Create a stationery anniversary microsite with a centered 344px content column inside a wide midnight celebration scene. Place a recognizable orange-capped glue bottle beneath a large anniversary mark and spotlight, standing on grainy illustrated cake tiers. Surround it with balloons, small confetti, and sparklers, using softer focus toward the desktop edges. Stack a white introduction, image-led feature promotions, a pale-yellow news panel, a textured cream product panel, and a coral footer. Use Outfit for bold numerals and 32px English section headings, with Noto Sans for Japanese copy. Keep inner cards 296px wide, corners 32px, paragraph text 16px/28px, and orange capsule links 56px high. Preserve the central column on mobile and crop peripheral scenery.”

Example Component Prompts

Introduction: “Design a white 344px anniversary message card with approximately 32px corners. Overlap its upper-left edge with a grainy balloon cluster. Center a mixed-size heading using a 48px Outfit numeral and a 40px Japanese suffix, followed by the 22px source tagline これからもあなたのそばに. Use a 280px body region with 16px/28px semibold Japanese paragraphs and sparse confetti near the edges.”
News section: “Build a pale-yellow 344px panel with a centered 32px Outfit NEWS heading. Stack five white 296px cards with 32px corners and 24px gaps. Each card contains a reserved preview, a compact status stamp, and a bold 16px/28px headline. Supply real preview images or an explicit fallback. Finish with a 296 × 56px orange もっとみる link.”
Product carousel: “Create a textured cream panel with a centered LINE UP heading and one visible 296px white product card. Allocate a square image region, 32px top padding, a 24px image-to-label gap, and a centered 16px bold product name. Beneath it, arrange white circular previous, pause, and next controls with coral symbols. Keep the complete product silhouette visible.”
More link: “Create a grainy coral-to-orange capsule, 296px wide and 56px high. Center the white 18px bold label もっとみる. Place a small white circle with an orange right-pointing triangle near the right edge while keeping the text optically centered.”
Footer: “Create a coral rounded footer matching the 344px content column. Center a compact FOLLOW US label, two white social marks, authorized white company artwork, three small policy links, and copyright. Use subtle grain and generous separation between these groups.”

Responsive and Evidence Prompt

“Keep content geometry unchanged between 1440px and 390px viewport widths wherever the supplied measurements agree. Center the column, crop the wide decorative scene around its central subject, and keep document scrolling independent of the persistent backdrop. Reproduce the menu's observed opening position and later top attachment with a clearly labeled sticky adaptation. Leave unknown menu contents, quiz logic, and carousel timing unspecified until requirements are supplied.”

Quick Start

CSS Custom Properties

This is a usable CSS scaffold for the observed shell and components. It is an adaptation, not recovered source code. Exact measured values and estimated colors are identified in comments. Supply licensed artwork through the optional image properties, load the fonts through the project's font pipeline, and implement menu and carousel state separately.

Suggested structure: .anniversary contains a decorative .celebration-stage and an .anniversary-flow. The flow contains .menu-slot, .intro-panel, .feature-stack, .news-panel, .lineup-panel, and .brand-footer. News anchors contain .news-media and .news-body; product anchors contain an image and .product-name.

:root {
  /* Measured interface colors */
  --ink: #333333;
  --paper: #ffffff;
  --muted: #969696;

  /* Visual approximations; replace with verified asset colors */
  --stage-top: #10152f;
  --stage-bottom: #030409;
  --orange: #f13b0b;
  --coral: #ec6847;
  --lemon: #fbef87;
  --cream: #dedabc;

  /* First families match computed declarations.
     Noto Sans JP is a recommended Japanese fallback. */
  --font-latin: 'Outfit', sans-serif;
  --font-ja: 'Noto Sans', 'Noto Sans JP', sans-serif;

  /* Measured dimensions and calculated spacing */
  --column-max: 344px;
  --inner-max: 296px;
  --text-body: 16px;
  --text-status: 14px;
  --text-action: 18px;
  --text-section: 32px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --card-radius: 32px;
  --control-disc: 32px;
  --menu-size: 48px;
  --action-height: 56px;

  /* Reconstructed outer-panel geometry */
  --panel-radius: 32px;
  --panel-gap: 56px;
  --panel-padding-block: 64px;

  /* Observed easing; applied properties below are recommendations */
  --ease-ui: cubic-bezier(0.4, 0.4, 0, 1);
  --motion-ui: 300ms;
  --motion-control: 400ms;

  /* Optional asset hooks; no source URLs are assumed */
  --stage-art: none;
  --intro-decoration: none;
  --cream-texture: none;
  --footer-texture: none;
  --cta-art: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--stage-top);
  font-family: var(--font-ja);
}

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

.anniversary {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
}

.celebration-stage {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(
    var(--stage-top),
    var(--stage-bottom)
  );
}

.celebration-stage::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1440px;
  height: 1000px;
  transform: translateX(-50%);
  background-image: var(--stage-art);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}

/* The artboard above is a capture-sized adaptation.
   Adjust it to the dimensions of the actual supplied artwork. */
.anniversary-flow {
  width: min(var(--column-max), calc(100% - 32px));
  margin-inline: auto;
  padding-block: 720px 56px;
}

/* Sticky positioning approximates the observed two positions. */
.menu-slot {
  position: sticky;
  top: calc(24px + env(safe-area-inset-top, 0px));
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  height: var(--menu-size);
  margin-inline: 16px;
  pointer-events: none;
}

.menu-button {
  display: grid;
  place-content: center;
  gap: 4px;
  width: var(--menu-size);
  height: var(--menu-size);
  padding: 12px;
  border: 0;
  border-radius: 30px;
  color: var(--coral);
  background: var(--paper);
  cursor: pointer;
  pointer-events: auto;
}

.menu-button span {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
}

.intro-panel {
  position: relative;
  margin-top: 16px;
  padding: 72px 32px 64px;
  border-radius: var(--panel-radius);
  background-color: var(--paper);
  background-image: var(--intro-decoration);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.anniversary-title {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60px;
  margin: 0;
  font-weight: 700;
}

.anniversary-number {
  font-family: var(--font-latin);
  font-size: 48px;
  line-height: 60px;
}

.anniversary-suffix {
  font-size: 40px;
  line-height: 60px;
}

.intro-tagline {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.intro-copy {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}

.intro-copy p {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.feature-stack {
  margin-top: 96px;
}

.feature-link {
  display: block;
  width: 100%;
  aspect-ratio: 344 / 480;
}

.feature-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.section-panel {
  margin-top: var(--panel-gap);
  padding: var(--panel-padding-block) 24px;
  border-radius: var(--panel-radius);
}

.news-panel {
  background: var(--lemon);
}

.lineup-panel {
  background-color: var(--cream);
  background-image: var(--cream-texture);
}

.section-title {
  margin: 0;
  font-family: var(--font-latin);
  font-size: var(--text-section);
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.news-list {
  display: grid;
  gap: 24px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.news-card {
  display: block;
  min-height: 360px;
  overflow: hidden;
  border-radius: var(--card-radius);
  color: var(--ink);
  background: var(--paper);
  text-decoration: none;
}

.news-media {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 296 / 180;
  background: var(--cream);
}

/* Recommended image handling; actual preview cropping is unverified. */
.news-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-body {
  padding: 24px 16px 40px;
}

.news-status {
  display: inline-block;
  padding: 5px 12px;
  color: var(--paper);
  background: var(--coral);
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
}

.news-status.is-ended {
  color: var(--muted);
  background: transparent;
}

.news-title {
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.more-link {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--action-height);
  margin-top: 48px;
  padding: 16px 48px;
  border-radius: 999px;
  color: var(--paper);
  background-color: var(--orange);
  background-image:
    var(--cta-art),
    linear-gradient(180deg, var(--coral), var(--orange));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}

.more-icon {
  position: absolute;
  top: 50%;
  right: 16px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  border-radius: 50%;
  color: var(--orange);
  background: var(--paper);
}

.more-icon::before {
  content: '';
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;
}

.carousel-window {
  margin-top: 48px;
  overflow: hidden;
  border-radius: var(--card-radius);
}

.product-track {
  display: flex;
  /* Carousel state and movement require separate implementation. */
}

.product-card {
  display: flex;
  flex: 0 0 100%;
  min-width: 0;
  flex-direction: column;
  gap: 24px;
  padding: 32px 0 24px;
  border-radius: var(--card-radius);
  color: var(--ink);
  background: var(--paper);
  text-decoration: none;
}

.product-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.product-name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Recommended 44px targets retain 32px visible circles.
   Adjacent targets produce the observed 12px visual gaps. */
.carousel-controls {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.carousel-control {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  color: var(--coral);
  background: transparent;
  cursor: pointer;
}

.control-disc {
  display: grid;
  place-items: center;
  width: var(--control-disc);
  height: var(--control-disc);
  border-radius: 50%;
  background: var(--paper);
}

/* Compensates for the larger invisible control targets. */
.lineup-panel .more-link {
  margin-top: 42px;
}

.brand-footer {
  margin-top: 56px;
  padding: 40px 24px 20px;
  border-radius: var(--panel-radius);
  color: var(--paper);
  background-color: var(--coral);
  background-image: var(--footer-texture);
  text-align: center;
}

.follow-label {
  margin: 0;
  font-family: var(--font-latin);
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 16px;
}

.social-links a {
  color: inherit;
}

.company-logo {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 32px;
}

.footer-policies {
  display: grid;
  margin-top: 32px;
  font-size: 11px;
  line-height: 22px;
}

.footer-policies a {
  color: inherit;
  text-decoration: none;
}

.copyright {
  margin: 16px 0 0;
  font-size: 10px;
  line-height: 14px;
}

/* Recommended feedback; original hover states were not inspected. */
.menu-button,
.more-link {
  transition: filter var(--motion-ui) var(--ease-ui);
}

.control-disc {
  transition: filter var(--motion-control) var(--ease-ui);
}

@media (hover: hover) {
  .menu-button:hover,
  .more-link:hover,
  .carousel-control:hover .control-disc {
    filter: brightness(0.96);
  }
}

.anniversary :focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
  box-shadow: 0 0 0 7px var(--paper);
}

/* Recommended reflow for widths outside the inspected evidence. */
@media (max-width: 359px) {
  .intro-panel {
    padding-inline: 24px;
  }

  .section-panel {
    padding-inline: 16px;
  }

  .intro-tagline {
    text-wrap: balance;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .menu-button,
  .more-link,
  .control-disc {
    transition: none;
  }
}

The stylesheet does not recreate the stage illustration, guarantee exact font availability, or implement a working carousel. The 44px control targets, small-screen reflow, focus styling, fallback media surface, and hover filter are recommended additions. Validate them with actual assets and content before release; this scaffold was not browser-executed as part of this evidence-only analysis.

Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. Define the custom properties above first. This is not a claim about the original site's styling framework.

@theme inline {
  --color-ink: var(--ink);
  --color-paper: var(--paper);
  --color-stage: var(--stage-top);
  --color-orange: var(--orange);
  --color-coral: var(--coral);
  --color-lemon: var(--lemon);
  --color-cream: var(--cream);
  --color-muted: var(--muted);

  --font-body: var(--font-ja);
  --font-display: var(--font-latin);

  --text-status: 14px;
  --text-body: 16px;
  --text-action: 18px;
  --text-section: 32px;

  --container-story: 344px;
  --container-card: 296px;
  --spacing-panel: 24px;
  --spacing-section-gap: 56px;
  --radius-panel: 32px;
  --radius-card: 32px;
}

Sources & Evidence

Current anniversary homepage: original and final URL are identical; the supplied browser record reports HTTP 200 and the title 「アラビックヤマト」50周年｜ヤマト株式会社.
Capture timestamp: September 12, 2026, 16:35:40.087 UTC, equivalent to September 13, 2026, 01:35:40.087 JST.
Original desktop captures: 1440 × 1000, showing the opening scene, news-region scroll position, and product/footer scroll position.
Original mobile captures: 390 × 844, showing the opening scene and product/footer scroll position.
Rendered DOM and computed styles: supplied for both viewports, including element geometry, text roles, link destinations, font declarations, colors, radii, gaps, transitions, and a document height of approximately 6414px.
Observed navigation destinations: feature routes /2, /3, and /quest/question1; news index /4; product links on www.yamato.co.jp. These are recorded homepage links, not separately inspected destination designs.
Inspection procedure: the supplied record describes at least five seconds of initial observation, readiness checks for layout and image decoding, and traversal through intermediate scroll positions. Perpetual animations were temporarily paused during readiness checks and resumed. Service workers and SharedWorkers were disabled.
Limitations: no open menu, deliberate carousel-control test, quiz interaction, hover/focus inspection, or destination-page inspection was supplied. Some news previews remain unresolved. Asset URLs are incomplete, decorative computed styles are not comprehensively listed, and footer styling is visually estimated.

This document describes the current page represented by the supplied September 2026 evidence. Its anniversary wording and 2025 footer copyright remain source content. Measured interface values, visual approximations, inferred positioning, and recommended implementation behavior are distinguished throughout.