# Nasu Ougiya / 扇屋 — Style Reference

> Pale gray space, vertical Mincho typography, and confectionery photographs framed by the sweep of an open fan.

**Original URL:** [https://www.nasu-ougiya.com/](https://www.nasu-ougiya.com/)
**Final URL:** [https://www.nasu-ougiya.com/](https://www.nasu-ougiya.com/)
**Theme:** light gray canvas with black typography, white utility surfaces, and natural photographic color.
**Inspected:** September 12, 2026. Supplied evidence retrieved at 07:30:06.412 UTC / 16:30:06.412 JST.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current confectionery storefront homepage: opening visual and announcement, gift introduction, recommended products, seven standard-product stories, category selection, news, store and brand introductions, product search, footer navigation, and order/contact information. Visual evidence consists of three desktop and two mobile captures, supplemented by rendered DOM and computed-style records across the homepage. Linked destination pages and open menu/search states were not inspected.

Ougiya presents its shop as a sequence of carefully spaced product encounters. Black vertical lettering occupies narrow columns while close photographs give confectionery surfaces considerable scale: impressed golden pastry, powdered white coating, glossy dark filling, and browned textures. The light gray background continues through most of the page, allowing photographs and typography to establish the hierarchy without a pervasive card system.

The composition has two distinct scales. Tiny utility symbols and a slender brand signature remain at the screen edges; product imagery and broad empty areas occupy the center. Commerce is present through category links, prices, product details, search, and ordering information. On mobile, the site selectively changes reading direction while preserving the vertical product narratives that carry its identity.

## How to Read This Reference

- **Measured** values come from the supplied rendered-element rectangles and computed styles. They apply to the recorded viewport and state.
- **Calculated** values are arithmetic derived from those measurements, such as a gap between adjacent tiles.
- **Estimated** values describe screenshot geometry or appearance when the relevant element style was not supplied.
- **Recommended** values and code are adaptations for a new implementation. Breakpoints, accessible hit areas, image masks, and interaction details are explicitly distinguished from recovered evidence.
- **Token names** beginning with `--color-`, `--text-`, or similar descriptive aliases are proposed names unless identified as source custom properties.
- The source root font size is **10px at both inspected widths**. The Quick Start uses explicit pixel tokens and does not require changing a project's root font size.
- Computed font-family declarations identify the requested families; font files and per-glyph fallback resolution were not supplied. Offscreen rectangles can also reflect positioned or transformed content, so document coordinates should not become hardcoded layout instructions.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Gallery Gray | `#eeeeee` | `--color-canvas` | Measured body background at both viewports; the continuous page canvas |
| Black Ink | `#000000` | `--color-ink` | Measured main text, navigation, prices, and filter-button fill |
| White | `#ffffff` | `--color-surface` | Measured search-button and contact-link backgrounds; visually the contact-panel surface |
| Reversed White | `#ffffff` | `--color-on-photo` | Measured category labels and the text for the dark photographic product story |
| Utility Gray | `#d6d6d6` | `--color-tag` | Measured background of the three search shortcut tags |
| Fine Divider | Approximately `#cccccc` | `--color-rule` | Screenshot estimate for contact-panel rules; exact border color was not recorded |

Photography supplies honey gold, cream, cocoa brown, muted green, and pale pink. These are variable image colors, not measured interface accents. There is no need to assign every photograph a corresponding button or badge color.

### Source Defaults Versus Rendered Appearance

The evidence includes commerce-related custom properties, but several differ from the visible homepage styling.

| Source declaration | Recorded value | Relevant rendered result |
| --- | --- | --- |
| `--fs-color-page__background` | `#ffffff` | The body is actually `#eeeeee` |
| `--fs-color-font--main` | `#3c3c3c` | Sampled homepage text is black |
| `--fs-color-font--productPrice` | `#006db8` | Recommended-product prices are black |
| `--fs-color-button--primary` | `#444444` | The inspected filter-submit button is black |
| `--swiper-theme-color` | `#007aff` | This declaration does not establish a visible blue carousel accent |

Use the computed component appearance when reproducing this homepage. Copying every available source variable would introduce colors that the observed editorial interface does not use.

The copyright element reports white in the computed sample, while the screenshots show different apparent tones over different backgrounds. Edge marks also vary visually over photographs. Their compositing or state-change mechanism was not included; a specific blend mode cannot be recovered from this evidence.

## Tokens — Typography

### Zen Old Mincho — Editorial and Commerce Typography

- **Recorded family:** `'Zen Old Mincho', serif`.
- **Weights:** `400` for product descriptions and gift prose; `500` for general text and prices; `600` for headings, product names, navigation, and prominent links.
- **Character:** fine Japanese serifs, restrained contrast, and a measured rhythm suited to short vertical passages.
- **Tracking:** major Japanese headings and vertical navigation commonly use `0.1em`.
- **Implementation alias:** `--font-editorial: 'Zen Old Mincho', serif`.

Vertical text is structural. Product headings, descriptions, category labels, and much of the desktop navigation read in vertical columns. Implement this with native vertical writing rather than rotating a horizontal paragraph. In vertical writing, the measured line height controls the advance between columns.

### Zen Kaku Gothic New — Practical Supporting Text

- **Recorded family:** `'Zen Kaku Gothic New', sans-serif`.
- **Weight:** `400` in the sampled elements.
- **Roles:** search shortcut tags, telephone reception details, fax availability, and the contact-panel explanatory note.
- **Implementation alias:** `--font-utility: 'Zen Kaku Gothic New', sans-serif`.

The sans-serif family is a supporting voice. It makes compact operational information easy to scan while the larger page retains its Mincho character.

### Brand Signature

The narrow logo combines a fan-shaped mark with the vertical proper name `那須 扇屋`. Treat its lettering as supplied brand artwork. Its visual treatment should not be reconstructed by assuming the logo uses the body font. No logo asset path or format was provided.

### Type Scale

All values below are measured computed styles unless marked otherwise. Size and line height are shown in pixels.

| Role | Desktop size / line height | Mobile size / line height | Weight | Tracking |
| --- | --- | --- | --- | --- |
| General body and news text | `14 / 21` | `14 / 21` | `500` | Normal |
| Gift heading | `36 / 43.2` | `20 / 24` | `600` | `0.1em` |
| Main section heading | `32 / 38.4` | `24 / 28.8` | `600` | `0.1em` |
| Standard-product title | `32 / 48` | `26 / 39` | `600` | `0.1em` |
| Standard-product description | `16 / 28.8` | `16 / 28.8` | `400` | Normal |
| Gift description | `16 / 27.2` | `15 / 25.5` | `400` | Normal |
| Recommended-product name | `20 / 30` | `20 / 30` | `600` | `0.1em` |
| Recommended-product price | `18 / 27` | `18 / 27` | `500` | Normal |
| Category image label | `30 / 45` | `24 / 36` | `600` | `0.1em` |
| Product-detail link | `18 / 27` | `16 / 24` | `600` | Normal |
| Store/about heading | `24 / 28.8` | `20 / 24` | `600` | `0.1em` desktop; normal mobile |
| Store/about description | `15 / 30` | `15 / 30` | `500` | Normal |
| Desktop primary navigation | `18 / 27` | Not visible in the mobile opening | `600` | `0.1em` |
| Desktop secondary navigation | `13 / 19.5` | Not visible in the mobile opening | `600` | `0.1em` |
| Search shortcut tag | `13 / 13` | `12 / 12` | `400`, utility family | Normal |
| Filter-submit label | `16 / 24` | `14 / 21` | `500` | Normal |
| Contact telephone number | Approximately `32px` visually | `24 / 36` measured | `600` on mobile | Normal |
| Contact operational text | Not recorded in the desktop sample | `12 / 18` | `400`, utility family | Normal |
| Copyright | `10 / 15` | `10 / 15` | `500` | Normal |

The mobile hierarchy is selective rather than uniformly scaled. Product descriptions remain at 16px, recommended-product names remain at 20px, and prices remain at 18px. Larger editorial headings shrink, and some prose changes orientation.

## Tokens — Spacing & Shapes

### Spacing Scale

The page combines small control spacing with unusually large section intervals. There is no evidence of one universal viewport-derived unit.

| Use | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Standard content side inset | `120px` | `60px` | Measured in category, news, and search content |
| Common major-section separation | `240px` | `120px` | Calculated repeatedly from adjacent section rectangles |
| Brand right inset | `50px` | `20px` | Calculated from logo bounds |
| Brand top inset | `40px` | `20px` | Measured |
| Utility-icon left inset | `50px` | `20px` | Measured |
| Utility-icon box | `26 × 26px` | `22 × 22px` | Measured link bounds |
| Gap between utility-icon boxes | `30px` | `15px` | Calculated; vertical strides are 56px and 37px |
| Recommended-product gap | `20px` | `20px` | Calculated from adjacent links |
| Recommended-product top padding | `30px` | `20px` | Measured |
| Category-tile gap | `40px` | `10px` | Calculated |
| News-row vertical padding | `35px` | `30px` | Measured |
| News date-to-content gap | `60px` | Block layout | Measured desktop flex gap |
| Search-tag padding | `8px` | `5px` | Measured |
| Standard vertical text-link padding | `5px 0` | `5px 0` | Measured product-detail links |
| Horizontal mobile editorial-link padding | — | `0 5px` | Measured gift and store/about links |

### Border Radius and Shape Language

| Element | Observed geometry |
| --- | --- |
| Contact panel | White rectangle with square corners |
| Contact form link | Square-cornered outline rectangle |
| Search controls and shortcut tags | Measured `0px` corner radius |
| Category links | Rectangular desktop boxes and square mobile boxes; sampled link radius `0px` |
| Recommended-product link wrappers | Transparent, square-cornered wrappers |
| Opening photograph | Broad curved silhouette with a fan-like sweep; mobile also shows a concave lower cutout and pointed junction |
| Menu symbol | Three thin vertical strokes, approximately 12 × 32px visually |

The opening curve is a composition-level mask, not a general rounded-card treatment. Its path and implementation were not supplied. Keep image framing separate from the radius tokens used for ordinary components.

### Layout Measurements

| Element | Desktop at 1440 × 1000 | Mobile at 390 × 844 |
| --- | --- | --- |
| Fixed brand link | `40 × 149px`, at `(1350, 40)` | `24 × 89.39px`, at `(346, 20)` |
| Social links | `20 × 20px`; right 50px; lower link bottom 40px | `16 × 16px`; right 20px; lower link bottom 20px |
| Latest-notice wrapper | `1140 × 19.5px`, at approximately `(240, 370.11)` | `270 × 41px`, at `(60, 528)` |
| First recommended-product link | `274.44 × 356.44px` | `250 × 322px` |
| Category content span | `1200px` | `270px` |
| Category link | `580 × 326.84px` | `270 × 270px` |
| News link | `840 × 94px` | `270 × 141.5px` |
| Filter-submit button | `342 × 64.38px` | `270 × 51px` |
| Contact panel | Approximately `675 × 381px` in the footer capture | Approximately `270 × 463px` in the footer capture |
| Contact form link | Approximately `555 × 64px` visually | `230 × 64px` measured |
| Recorded document height | `15951px` | `14560px` |

## Components

### Persistent Edge Controls and Brand Signature

**Role:** keep brand identity and shopping utilities available throughout the long homepage.

The upper-right brand signature is balanced by a left-hand column containing the menu symbol, cart, account, and search icons. Instagram and LINE sit near the lower-right corner; the small vertical copyright sits near the lower-left corner. Their positions remain consistent across the supplied top, middle, and footer captures, supporting the interpretation of persistent viewport-edge controls.

The controls are thin, monochrome symbols without enclosing colored disks. On desktop, the cart, account, and search link rectangles begin at y=102, 158, and 214px. On mobile, they begin at y=82, 119, and 156px.

Cart and account destinations are present in the DOM. The search trigger has a script-oriented placeholder link. The menu's opened appearance, search-trigger result, hover treatment, and focus behavior were not exercised. The visible cart glyph also does not establish a prominent numeric badge merely because its extracted link text contains `0`.

**Recommended adaptation:** enlarge interaction targets while retaining the small icon artwork. Mobile icons are only 37px apart vertically, so increasing every target to 44px also requires adjusting spacing to prevent overlapping hit regions.

### Desktop Category Navigation

**Role:** provide immediate access to shopping categories and supporting information.

Eight short vertical labels occupy the upper-left portion of the main canvas, starting around x=239 and y=80px. The five shopping labels use 18px Mincho; the three supporting labels use 13px. A thin vertical separator distinguishes the groups.

The shopping labels include `御用菓子`, `和菓子`, `羊羹`, `洋菓子`, and `ギフト`. Supporting links include `扇屋について`, `お買い物ガイド`, and `お知らせ`. Primary-column starting positions are approximately 62px apart; supporting-column starting positions are approximately 54.5px apart.

The mobile opening does not show this link cluster. The edge utilities and small brand signature remain visible. No opened mobile navigation layout was supplied.

### Opening Photograph and Latest Notice

**Role:** establish product texture and give a current operational announcement quiet prominence.

On desktop, the upper canvas is largely empty below the navigation. A single notice appears around y=370px, followed by a photograph whose highest curved edge begins around y=430px. The photograph is dramatically enlarged and cropped; a golden confection fills much of the lower viewport. The opening does not show a large promotional headline.

The notice consists of a small black dot, date, and linked Japanese title. Its desktop link uses a horizontal flex layout with a measured 60px gap. On mobile, date and title occupy separate lines in a 270px content column.

Mobile changes the order of the visual presentation. The photograph starts near y=60px, occupies the upper portion of the screen, and ends around the notice at y=528px. A curved cutout opens space at the lower left, with a pointed junction farther right. A faint repeating geometric pattern is visible around the lower sweep; its asset and construction are unknown.

The desktop and mobile captures show different confections in this opening area. This confirms variation in the captured image state, but does not establish autoplay, a slide interval, or a breakpoint-specific image assignment.

### Gift Introduction

**Role:** connect the sensory product presentation with gifting occasions.

The DOM identifies the page's H1 as `贈りものや御祝いに`, followed by a short gifting paragraph and the parenthetical link `（ ギフト商品一覧 ）`.

On desktop, heading, prose, and action form separate vertical elements toward the right side of the composition. The heading uses 36px Mincho with 0.1em tracking; prose uses 16px with 1.7 line height. The narrow link column uses 18px semibold text.

On mobile, this section becomes a horizontal reading block. The heading is 20px, the paragraph is 15px/25.5px, and the link is 16px. The body remains in the familiar 270px column at x=60. The supplied mobile opening also reveals a pale pink wrapped-product photograph starting around y=658px, extending from the left screen edge to approximately x=330.

Keep the wrapping photograph and the calm text block distinct. Their spacing creates a pause between the large opening image and the product assortment.

### Recommended Product Rail

**Role:** offer quick product discovery with visible names and prices.

The `お薦め` heading is centered and vertical. Below it, linked products form a horizontal sequence that extends beyond the viewport. Each item contains a product presentation, a vertical name near its upper-right area, and a horizontal price below.

Four unique products are represented: `雅の菊`, `花愛でまし`, `白八汐`, and `皇の杜`. The DOM repeats that group once. Duplication and the offscreen horizontal arrangement are compatible with a looping rail, but they do not verify its movement or controls.

Desktop links are about 274.44px wide with 20px gaps. Mobile links remain a substantial 250px wide, also with 20px gaps, allowing the next product to peek into view. Product-name text stays at 20px and prices at 18px at both widths. This preserves product presence on a small screen.

The name box is approximately 33px wide and sits 38.5px inside the card's right edge in both samples. A square image area is consistent with the overall card dimensions, but image-element rectangles were not provided; the Quick Start uses that proportion as an adaptation.

### Standard Product Story

**Role:** explain the character of an individual confection through image scale and short vertical copy.

The `定番商品` section contains seven named stories. The repeated anatomy is a large photograph, a vertical product name, several vertical lines of description, and a parenthetical `商品詳細` link. Caption placement varies across the desktop width instead of using one identical left-aligned text box for every product.

Product titles use 32px Mincho on desktop and 26px on mobile. Description text remains 16px/28.8px on both. Four-column descriptions occupy approximately 115.2px of width; five-column descriptions occupy approximately 144px. These measurements reflect the 28.8px column advance.

The desktop middle capture shows `季聴` beside a glossy dark confection, with another large browned-product photograph entering below. The subsequent `那須五葉` story has white title, body, and link text in the computed records. Other sampled stories use black text.

Mobile preserves the vertical product titles, descriptions, and detail links. Some caption groups span approximately 289px, extending slightly beyond the standard 270px prose column. Give these groups a dedicated layout rather than forcing them into the narrower utility-text measure.

The middle desktop capture contains a hard horizontal image boundary and partially cropped text. Several product rectangles also overlap in document coordinates. These observations do not establish the exact scroll choreography. Pinning, crossfades, masks, and timing remain unverified; the Quick Start offers an ordinary-flow composition rather than claiming to recover them.

### Category Tile Grid

**Role:** provide a direct route into the four core confectionery categories.

The heading `お菓子の／種類から／選ぶ` is arranged as a compact group of vertical lines. Four linked tiles follow, labeled `御用菓子`, `和菓子`, `羊羹`, and `洋菓子`.

Desktop uses two columns inside a 1200px span. Each tile measures approximately 580 × 326.84px, with 40px horizontal and vertical gaps. The category labels are white, vertical, centered in their link rectangles, and set at 30px/45px.

Mobile uses a single column of 270px squares with 10px gaps. Labels remain vertical and reduce to 24px/36px. The sampled records establish the geometry and label styling; the supplied screenshots do not individually show all four tile images.

### News List

**Role:** communicate practical updates in a calm, legible list.

The section includes ten dated notices in the supplied DOM. The heading is a vertical element positioned near the right side, and the parenthetical archive link has its own vertical position.

Desktop rows are 840px wide, with a 94px link box, 35px top/bottom padding, and a 60px horizontal gap. Consecutive row positions indicate an additional approximately 1px separator. The date, title, and extracted `PickUP`/`その他` metadata belong to each linked row. Their badge-specific colors and shapes were not recorded.

Mobile rows become blocks 270px wide and approximately 141.5px high, using 30px vertical padding. The list gains height to accommodate stacked content. The archive link moves into the upper-left portion of the section while the heading stays near the right; this is a deliberate asymmetric header arrangement.

### Store and About Features

**Role:** lead from product browsing to the physical shop and its background.

Two editorial features are labeled `店舗のご案内` and `扇屋について`. Each combines imagery, a heading, a short paragraph, and `（ 詳細を見る ）`.

Desktop presents the two features across the page, with 24px vertical headings, 15px/30px vertical descriptions, and 16px links. Mobile stacks the features and changes their text to horizontal reading: a 20px heading, 15px/30px paragraph, and 16px link within the 270px content column.

The source copy describes the shop's setting and history. These are the page's own brand statements; the reference does not independently verify them. Destination links to `/shop` and `/about` were present but were not followed.

### Product Search

**Role:** provide practical product finding near the end of the editorial homepage.

The form includes a search control, three shortcut tags, category selection, a price-range area, a submit action, and a clear action. The visible shortcut labels are `ご贈答`, `お手土産`, and `プチギフト`.

The tags are compact gray rectangles in Zen Kaku Gothic New. Desktop tags use 13px text and 8px padding; mobile tags use 12px text and 5px padding. They are separated by approximately 5px.

The search button is a white square, 64px on desktop and 48px on mobile. Its recorded font size is zero, consistent with an icon presentation while retaining text in the DOM.

The black `この条件で絞り込む` button and transparent `条件をクリア` button sit side by side on desktop, each about 342 × 64.38px. On mobile, they stack at 270 × 51px with a 10px gap. Input and select styling was not individually captured, and submission, validation, clearing, and resulting search states were not tested.

### Footer Navigation

**Role:** provide a complete set of shopping, account, and company-information routes.

The dense link field in the third desktop screenshot corresponds to footer content. It combines larger vertical shopping categories, smaller company links, shopping-guide columns, membership links, legal links, and a larger brand signature on the right. The small persistent brand signature remains at the viewport edge, so both marks can be visible together.

Desktop footer category links use 24px Mincho, supporting company links use 18px, and legal links use 13px. Thin vertical rules separate some groups. Above this field, a horizontal shortcut strip uses 18px text.

Mobile exposes seven horizontal shortcut rows, including the shopping guide, about, company, store, newsletter, login, and registration. Each measured row is 270 × 51px with 15px vertical padding. A larger centered brand link follows at 64 × 243px. The extensive desktop vertical link field is not present in the mobile visible-text and link records.

### Order and Contact Panel

**Role:** give customers clear alternatives for ordering and asking questions.

The desktop footer places `ご注文・お問い合わせ` vertically to the right of a white panel. Inside, telephone and fax rows align a small label, a large number, and operational details. A fine rule separates the rows. A broad outlined contact-form link follows, then a small explanatory note.

The panel is approximately 675 × 381px in the supplied desktop capture. Its content begins about 40px from the left edge, and the form link is approximately 555px wide. These are visual estimates; the desktop panel's padding declarations were not supplied.

On mobile, the heading becomes horizontal above a 270px-wide white panel. Its inner content is 230px wide, establishing approximately 20px side padding. Telephone and fax information are centered and stacked. The numbers use measured 24px/36px Mincho; hours and explanatory copy use 12px/18px Zen Kaku Gothic New. The final note is left aligned.

The telephone number is a real `tel:` link. The fax number is plain text in the supplied records. The contact form is a separate linked destination. The page shows telephone reception from 10:00 to 16:00 excluding Tuesdays and Wednesdays, and round-the-clock fax reception. These are time-sensitive content values, not permanent design tokens.

Legal links sit below the mobile panel as centered horizontal lines, with approximately 20px between their line boxes.

## Tokens — Motion & Interaction

| Treatment | Evidence | What can be concluded |
| --- | --- | --- |
| Navigation, product, category, social, and contact links | Repeated transition value `0.3s` | A 300ms transition is declared; changed properties and actual hover appearance were not supplied |
| Filter and clear buttons | Transition value `0.3s` | Same declared duration; submitted and cleared states remain untested |
| General sampled elements | `animation: none`; some transition records contain only `all` | No CSS animation was reported on those sampled elements at that moment; this does not exclude script-driven or unsampled motion |
| Recommended-product sequence | Repeated products and offscreen horizontal positions | Rail-like structure; autoplay, swipe, keyboard behavior, and loop timing remain unverified |
| Opening image variation | Different subjects in desktop and mobile captures | Different captured image states; cause and transition are unknown |
| Product-story boundaries | Partial overlap and cropped text in the middle capture | Layered or position-dependent composition is possible; the mechanism is unresolved |
| Viewport-edge controls | Consistent placement in captures at different page regions | Persistent edge placement is visually supported |

The capture procedure waited for loading, image decoding, and sampled layout stability, with finite time limits. This supports using the captures as current rendered evidence, but does not prove that every delayed reveal or interactive state completed.

**Recommended motion for an adaptation:** retain the measured 300ms duration for modest link feedback, keep essential text visible without animation, and begin with a keyboard-operable horizontal product rail. Add any image sequencing only after its behavior is specified and tested. Provide a reduced-motion mode and a pause control if automatic movement is introduced.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Main canvas | Solid `#eeeeee` | Connects editorial sections and creates generous breathing room |
| Editorial content | Mostly transparent over the canvas | Lets type and photography establish grouping |
| Product photography | Natural color with large crops | Supplies warmth, texture, and visual scale |
| Contact panel | White rectangle | Makes practical ordering information easy to locate |
| Search shortcut tag | `#d6d6d6`, square corners | Compact utilitarian navigation |
| Filter-submit action | Black rectangle with white text | Strongest filled control in the inspected homepage |
| Contact-form action | White with a thin black outline | Clear action without a colored accent |
| Structural divider | Fine gray or black line | Separates operational rows and navigation groups |

The captures show no general shadow-based elevation system. Separation comes from whitespace, image boundaries, rules, and the occasional white utility panel. No modal surface or opened drawer was supplied for analysis.

## Imagery

The photographs make small confections feel substantial. Close focus reveals grain, impressed patterns, soft coatings, glossy filling, and browned surfaces. Crops often extend beyond the viewport or obscure the full silhouette of the food. The surrounding gray space keeps this density from overwhelming the page.

Lighting appears soft in the pale opening and wrapping images, while the darker confectionery photographs retain stronger texture and local contrast. Depth of field is visibly shallow in several images. Preserve that photographic specificity; a uniformly sharp product cutout on every section would change the page's rhythm.

The pale pink wrapping image introduces a second tactile subject: folded paper with a fine repeating pattern. This complements the faint geometric decoration around the mobile opening without requiring a textured background across the entire site.

### Observed Asset References

No image `src` URLs, native dimensions, mask definitions, or icon filenames were included in the supplied evidence. The references below identify visible subjects rather than inventing asset paths.

| Visible reference | Evidence | Reusable direction |
| --- | --- | --- |
| Golden impressed confection | Desktop opening capture | Extremely close crop; warm granular surface; broad curved frame |
| White-coated confection | Mobile opening capture | Pale texture against a soft background; fan-like silhouette |
| Glossy dark confection beside `季聴` | Desktop middle capture | Strong diagonal mass; spare white area for vertical copy |
| Browned confection with pale pieces | Lower area of desktop middle capture | Large tactile foreground and shallow focus |
| Pink patterned wrapping | Lower area of mobile opening capture | Soft gift presentation with visible paper folds |
| Fan mark and vertical brand lettering | All captures; enlarged in footer | Preserve authorized brand artwork and its narrow proportions |
| Cart, account, search, Instagram, and LINE symbols | Screen edges | Small monochrome glyphs; use the correct marks without assuming an icon library |

Use authorized photography and brand assets where available. CSS can approximate the page framing, but the specific food and wrapping photographs supply much of its identity.

## Layout & Responsive Behavior

The desktop composition repeatedly moves between a 1200px content span, narrower text areas, and full-width photographs. The initial notice begins farther inward at x=240px, while category tiles and most lower utility sections begin at x=120px. Avoid applying one centered maximum-width wrapper to every part of the page.

Mobile generally reserves 60px on each side for prose, news, category tiles, search, and contact information. Photography and product rails can break that measure. The left controls and right brand signature remain visible alongside the page, making edge clearance a functional layout concern.

### Observed Adaptations

| Area | Desktop | Mobile |
| --- | --- | --- |
| Opening navigation | Visible vertical category and support links | Cluster absent from opening; edge controls retained |
| Opening announcement | Above the large photograph; date and title inline | Below the opening photograph; date and title stacked |
| Brand signature | 40px wide | 24px wide |
| Gift copy | Vertical heading, prose, and action | Horizontal heading, prose, and action |
| Recommended products | Several products visible across the width | One substantial product plus a partial next item |
| Product stories | Large image compositions with captions at varied horizontal positions | Vertical captions retained; titles reduce to 26px |
| Categories | Two columns of wide rectangles | One column of square tiles |
| News | Horizontal row layout | Taller stacked rows |
| Store/about features | Two desktop compositions with vertical text | Stacked features with horizontal text |
| Search actions | Side by side | Stacked full-width actions |
| Footer navigation | Multiple vertical groups | Horizontal shortcut rows |
| Contact panel | Information arranged across rows; vertical external heading | Centered stacked information; horizontal heading |

### Recorded Page Landmarks

These are approximate document-coordinate landmarks from the rendered records. They describe the inspected state and are not recommended fixed offsets.

| Section start | Desktop y | Mobile y |
| --- | --- | --- |
| Recommended products | `2762.89px` | `1265.38px` |
| Standard products | `3604.94px` | `1886.58px` |
| Category selection | `11105.75px` | `8060.19px` |
| News | `12240.25px` | `9435.80px` |
| Store/about features | `13570.06px` | `11202.38px` |
| Search | `14250.06px` | `12488.38px` |
| Footer | `14656.44px` | `13085.38px` |

The document is shorter in absolute pixels on mobile, but occupies more viewport heights. Preserve convenient access to shopping and support without reducing the editorial content to an excessively dense stack.

Only two viewport widths were inspected. The actual media-query breakpoint, intermediate tablet layouts, landscape behavior, safe-area handling, and enlarged-text behavior remain unknown. The Quick Start uses a recommended 900px breakpoint and adds safe-area clearance; neither is claimed as an original source rule.

## Do’s and Don’ts

### Do

- Start with the measured `#eeeeee` canvas and black Mincho typography.
- Use natural confectionery color as the main source of warmth.
- Preserve the contrast between tiny edge controls and large photographs.
- Keep native vertical writing for product names, product stories, and category labels.
- Retain horizontal prices, dates, search controls, and practical contact details.
- Use 0.1em tracking for the measured heading and navigation roles.
- Maintain generous section intervals: the recorded pattern is commonly 240px on desktop and 120px on mobile.
- Allow photographs and product rails to extend beyond the standard text column.
- Preserve the mobile switch to horizontal gift, store, and about prose.
- Treat the contact panel as a clear white utility surface with a restrained outline action.

### Don’t

- Don't add a dominant text headline over the opening photograph when following the captured composition.
- Don't turn every product story into an identical rounded card.
- Don't replace vertical typography with rotated horizontal paragraphs.
- Don't shrink the 16px product descriptions in proportion to every other mobile element.
- Don't introduce blue prices or buttons solely because unused source defaults contain blue.
- Don't invent a hero slide interval, parallax effect, or menu animation from still captures.
- Don't identify product names for unlabeled photographs without supporting evidence.
- Don't reproduce partially cropped story text as a required final state.
- Don't use thick icons, large colored social disks, or ornamental shadows around the edge controls.
- Don't hardcode the recorded document coordinates as a page-height system.

## Recommended Implementation Additions

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

- Give icon-only controls accessible names. Use buttons for menu and search toggles, with appropriate expanded-state attributes.
- Provide at least 44px interaction targets and enough separation to prevent overlap. Keep the visible glyphs small.
- Add a visible focus indicator and a skip link. Ensure fixed controls do not cover focused links or important text.
- Preserve a meaningful DOM reading order when positioning vertical captions. Associate each image, product heading, description, price, and destination semantically.
- Make every recommended product reachable with keyboard and touch. If implementing an infinite loop, keep visual clones out of the accessibility tree and tab order.
- Test white text against the actual crop of each photograph. A subtle localized contrast layer may be needed; it should be an explicit addition.
- Test long Japanese product names, text enlargement, and screens narrower than 390px. Reduce decorative spacing before reducing essential body text.
- Give search fields persistent labels and implement real submit and reset behavior. Keep the contact form destination distinct from a form embedded on the homepage.
- Reserve image dimensions, prioritize the opening image, and defer lower photographs appropriately. Preserve access to descriptions if an image fails.
- Respect reduced motion. Keep product names and detail links usable without a scroll animation completing.

## Agent Prompt Guide

### Quick Color Reference

- Page canvas: `#eeeeee`.
- Text, navigation, prices, and outlines: `#000000`.
- Contact surface and search-icon square: `#ffffff`.
- Search shortcut tags: `#d6d6d6`.
- Photo-overlay labels: white where the original uses reversed text.
- Main filled utility action: black with white text.
- Photograph colors: natural cream, gold, brown, green, and pink; no fixed photographic accent token.

### Overall Prompt

“Create an editorial confectionery storefront inspired by the current Nasu Ougiya homepage. Use a continuous light gray `#eeeeee` canvas, black Zen Old Mincho typography, narrow vertical Japanese headings, and large close-up confectionery photographs. Place a small vertical brand signature at the upper right and thin shopping utilities along the left edge, with small social marks near the lower right. Give the opening photograph a broad fan-like curve and pair it with a quiet dated notice. Follow with gifting content, a horizontal product rail, spacious individual product stories, category tiles, news, store information, search, and ordering support. Use square utility surfaces and restrained parenthetical text links. At 390px, retain vertical product stories while switching gift and store prose to horizontal text. Treat image masks and interaction timing as implementation choices unless separately specified.”

### Example Component Prompts

1. **Opening composition:** “A pale gray confectionery storefront opening with a slender vertical brand mark at the upper right, three thin vertical menu strokes at the upper left, and small outline shopping icons below. Leave broad desktop space before a one-line notice. Enlarge a confection photograph inside a sweeping fan-like curve. On mobile, show the photograph first and stack the date and notice title beneath it.”
2. **Product rail:** “Build a horizontal series of transparent product links with 20px gaps. Use a 250px mobile item width, a 20px vertical Mincho product name near the upper right, and an 18px horizontal price beneath the image. Let the next product remain partially visible. Provide accessible manual navigation; do not assume autoplay.”
3. **Product story:** “Pair a large tactile confection photograph with a narrow right-to-left group of vertical text columns: semibold product title, regular 16px description with 28.8px column advance, and a parenthetical detail link. Use a 32px title on desktop and 26px on mobile. Keep the photograph spacious and avoid enclosing the story in a card.”
4. **Category grid:** “Create four linked category images inside a 1200px desktop span: two columns, approximately 580 × 327px per tile, and 40px gaps. Center white vertical Mincho labels. At 390px, use 270px squares in one column with 10px gaps and 24px labels.”
5. **Order panel:** “Place a square white ordering panel on a light gray footer. Show telephone and fax information with prominent Mincho numbers, small sans-serif reception details, fine gray rules, and a 64px-high outlined contact link. On mobile, use a 270px outer width, 20px side padding, centered information, and a left-aligned explanatory note.”
6. **Responsive editorial section:** “Keep the section visually quiet with large margins. Use vertical text for the desktop gift or store introduction, then switch that introduction to horizontal text on mobile. Preserve 15–16px readable prose and a parenthetical text action. Allow the accompanying photograph to extend farther toward the screen edge than the prose.”

## Quick Start

### CSS Custom Properties

This is an unexecuted adaptation of the measured visual system, not recovered source CSS. Font loading and original assets are not included. The opening mask is an approximation, the product stories use ordinary document flow, and the product rail uses native horizontal scrolling. Accessible hit areas, safe-area support, focus styles, and the 900px breakpoint are recommended additions.

```css
:root {
  /* Measured component colors; divider color is an estimate. */
  --color-canvas: #eeeeee;
  --color-ink: #000000;
  --color-surface: #ffffff;
  --color-on-photo: #ffffff;
  --color-tag: #d6d6d6;
  --color-rule: #cccccc;

  /* Recorded family declarations; load fonts separately. */
  --font-editorial: 'Zen Old Mincho', serif;
  --font-utility: 'Zen Kaku Gothic New', sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --text-body: 14px;
  --text-section: 32px;
  --text-story: 32px;
  --text-description: 16px;
  --text-product: 20px;
  --text-price: 18px;
  --text-action: 18px;
  --text-category: 30px;
  --tracking-editorial: 0.1em;

  /* Sample-based dimensions, not recovered fluid formulas. */
  --page-gutter: 120px;
  --section-gap: 240px;
  --edge-inset: 50px;
  --edge-top: 40px;
  --brand-width: 40px;
  --utility-icon: 26px;
  --utility-top: 93px;
  --utility-gap: 12px;
  --product-width: 274.44px;
  --product-top-padding: 30px;
  --category-gap: 40px;
  --rule-width: 1px;
  --radius-panel: 0px;

  /* Duration is observed; opacity feedback is recommended. */
  --motion-link: 300ms ease;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

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

.ougiya-page {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-editorial);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  line-height: 1.5;
}

.ougiya-page a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--motion-link);
}

.ougiya-page img {
  display: block;
  max-width: 100%;
}

.content-frame {
  width: calc(100% - var(--page-gutter) - var(--page-gutter));
  max-width: 1200px;
  margin-inline: auto;
}

.editorial-section {
  margin-block-start: var(--section-gap);
}

.section-heading {
  margin: 0 auto 70px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: var(--text-section);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-editorial);
}

.brand-signature {
  position: fixed;
  z-index: 20;
  top: calc(var(--edge-top) + var(--safe-top));
  right: var(--edge-inset);
  width: var(--brand-width);
}

.brand-signature img {
  width: 100%;
  height: auto;
}

/* Larger hit boxes preserve the small visible icon scale. */
.utility-rail {
  position: fixed;
  z-index: 20;
  top: calc(var(--utility-top) + var(--safe-top));
  left: calc(var(--edge-inset) - (44px - var(--utility-icon)) / 2);
  display: grid;
  gap: var(--utility-gap);
}

.icon-control {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.icon-control > svg,
.icon-control > img {
  width: var(--utility-icon);
  height: var(--utility-icon);
}

.edge-copyright {
  position: fixed;
  z-index: 20;
  left: 20px;
  bottom: calc(40px + var(--safe-bottom));
  margin: 0;
  writing-mode: vertical-rl;
  font-size: 10px;
  line-height: 15px;
}

.top-navigation {
  position: absolute;
  top: 80px;
  left: calc(2 * var(--page-gutter));
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 32px;
}

.top-navigation a {
  display: inline-block;
  padding-block: 5px;
  writing-mode: vertical-rl;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.top-navigation .secondary-link {
  font-size: 13px;
}

.opening {
  display: flex;
  flex-direction: column;
  padding-top: 370px;
}

.latest-notice {
  display: flex;
  align-items: baseline;
  gap: 60px;
  margin: 0 60px 0 240px;
  font-size: 14px;
  line-height: 21px;
}

.notice-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.notice-date::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Approximate outer sweep; the original mask path is unknown. */
.hero-media {
  position: relative;
  height: min(80vw, 1152px);
  margin: 40px 0 0;
  overflow: hidden;
  clip-path: ellipse(92% 100% at 22% 100%);
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-rail {
  display: flex;
  gap: 20px;
  margin-left: 8vw;
  padding: 0 20px 40px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
}

.product-card {
  position: relative;
  flex: 0 0 var(--product-width);
  padding-top: var(--product-top-padding);
  scroll-snap-align: start;
}

/* Square imagery is a sample-consistent adaptation. */
.product-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.product-card-name {
  position: absolute;
  top: 0;
  right: 38.5px;
  margin: 0;
  writing-mode: vertical-rl;
  font-size: var(--text-product);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.product-card-price {
  margin: 25px 0 0;
  font-size: var(--text-price);
  line-height: 27px;
}

/* Ordinary-flow story layout; no unverified scroll effects. */
.story-panel {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(310px, 1fr);
  align-items: center;
  gap: 60px;
}

.story-panel > img {
  width: 100%;
  height: auto;
}

.story-copy {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: center;
  gap: 38px;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

.story-copy > * {
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.story-title {
  font-size: var(--text-story);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.story-description {
  max-height: 18em;
  font-size: var(--text-description);
  font-weight: 400;
  line-height: 1.8;
}

.story-link {
  align-self: flex-end;
  padding-block: 5px;
  font-size: var(--text-action);
  font-weight: 600;
  line-height: 1.5;
}

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

.category-tile {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 580 / 326.84;
  overflow: hidden;
}

.category-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-tile-label {
  position: relative;
  margin: 0;
  color: var(--color-on-photo);
  writing-mode: vertical-rl;
  font-size: var(--text-category);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.search-tag {
  padding: 8px;
  background: var(--color-tag);
  font-family: var(--font-utility);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
}

.filter-actions {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.filter-button {
  width: 342px;
  min-height: 64px;
  padding: 19px;
  border: 1px solid var(--color-ink);
  border-radius: 0;
  color: var(--color-surface);
  background: var(--color-ink);
  font: 500 16px/24px var(--font-editorial);
  cursor: pointer;
}

.filter-button.is-clear {
  color: var(--color-ink);
  background: transparent;
}

/* Desktop padding and column sizing approximate the capture. */
.contact-panel {
  width: min(675px, 100%);
  padding: 40px 80px 40px 40px;
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.contact-row {
  display: grid;
  grid-template-columns: 100px 218px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-rule);
}

.contact-row p {
  margin: 0;
}

.contact-label {
  font-size: 12px;
  font-weight: 600;
}

.contact-number {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.contact-hours,
.contact-note {
  font-family: var(--font-utility);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.contact-form-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 12px;
  border: 1px solid var(--color-ink);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.contact-note {
  margin: 30px 0 0;
}

.ougiya-page :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (hover: hover) {
  .ougiya-page a:hover {
    opacity: 0.7;
  }
}

/* Recommended breakpoint; the original breakpoint is unknown. */
@media (max-width: 900px) {
  :root {
    --page-gutter: 60px;
    --section-gap: 120px;
    --edge-inset: 20px;
    --edge-top: 20px;
    --brand-width: 24px;
    --utility-icon: 22px;
    --utility-top: 71px;
    --utility-gap: 0px;
    --text-section: 24px;
    --text-story: 26px;
    --text-action: 16px;
    --text-category: 24px;
    --product-width: 250px;
    --product-top-padding: 20px;
    --category-gap: 10px;
  }

  /* 44px targets intentionally increase the original mobile stride. */
  .top-navigation {
    display: none;
  }

  .section-heading {
    margin-bottom: 48px;
  }

  .opening {
    padding-top: 60px;
  }

  .hero-media {
    order: 0;
    height: 120vw;
    margin: 0;
    clip-path: ellipse(145% 100% at 15% 100%);
  }

  /* Approximate concave cutout; replace with an authored mask if needed. */
  .hero-media::after {
    content: '';
    position: absolute;
    left: -5%;
    bottom: -24%;
    width: 70%;
    height: 48%;
    border-radius: 50%;
    background: var(--color-canvas);
  }

  .latest-notice {
    order: 1;
    display: block;
    margin: 0 var(--page-gutter);
  }

  .notice-title {
    display: block;
    margin-top: 6px;
  }

  .product-rail {
    margin-left: 14vw;
  }

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

  .category-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .category-tile {
    aspect-ratio: 1;
  }

  .search-tag {
    padding: 5px;
    font-size: 12px;
  }

  .filter-actions {
    flex-direction: column;
    gap: 10px;
  }

  .filter-button {
    width: 100%;
    min-height: 51px;
    padding: 14px;
    font-size: 14px;
    line-height: 21px;
  }

  .contact-panel {
    padding: 20px;
  }

  .contact-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .contact-number {
    font-size: 24px;
    line-height: 36px;
  }

  .contact-note {
    margin-top: 20px;
  }
}

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

Use `.story-copy` children in semantic order: title, description, then detail link. The flex direction places the title at the right of the visual group. For gift and store introductions, use separate components that switch their text to horizontal writing on mobile; do not apply that switch to every product story.

The CSS does not implement the full footer link taxonomy, an opened navigation panel, image sequencing, or search submission. Those require actual content and interaction specifications. The hero approximation also omits the observed faint pattern and exact pointed fan boundary.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This mapping does not identify the original site's framework. Define the preceding properties first.

```css
@theme inline {
  --color-gallery: var(--color-canvas);
  --color-ink: #000000;
  --color-panel: var(--color-surface);
  --color-shortcut: var(--color-tag);
  --color-divider: var(--color-rule);

  --font-editorial: 'Zen Old Mincho', serif;
  --font-utility: 'Zen Kaku Gothic New', sans-serif;

  --text-section: var(--text-section-size, 32px);
  --text-product-name: 20px;
  --text-product-price: 18px;
  --text-product-description: 16px;

  --spacing-page-gutter: var(--page-gutter);
  --spacing-section-gap: var(--section-gap);
  --spacing-product-width: var(--product-width);
  --radius-panel: 0px;
}
```

When using the optional mapping, map responsive heading sizes to distinct underlying variables or responsive utilities. Avoid defining a token in terms of itself.

## Sources & Evidence

- **Inspected original and final homepage:** [https://www.nasu-ougiya.com/](https://www.nasu-ougiya.com/). The supplied response reports HTTP 200 and no URL change.
- **Capture date:** September 12, 2026; observation retrieved at `2026-09-12T07:30:06.412Z`, corresponding to 16:30:06.412 JST.
- **Desktop evidence:** three 1440 × 1000 captures showing the opening, a middle product region, and the footer. Rendered DOM and computed-style records cover additional homepage sections.
- **Mobile evidence:** two 390 × 844 captures showing the opening and lower contact/footer area, with rendered DOM and computed-style records for the homepage.
- **Measured records:** element dimensions and positions, font families, sizes, weights, line heights, tracking, colors, backgrounds, padding, gaps, corner radii, transition strings, animation fields, source custom properties, and link destinations.
- **Interaction scope:** the supplied capture process traversed page regions and checked rendering stability. No click-through destination, opened menu, opened search state, carousel control, hover state, form submission, or keyboard interaction was supplied.
- **Limitations:** exact scroll offsets for the screenshots, full stylesheet rules, asset URLs, image dimensions, font files, clipping paths, breakpoint definitions, and animation timelines were not included. Capture readiness checks had finite time limits and do not establish semantic completeness of delayed or layered content.

This reference describes the current homepage through the supplied original-page evidence. Measured tokens, screenshot estimates, and implementation recommendations are intentionally kept distinct.