# Shijonawate Gakuen 100th Anniversary — Style Reference

> A white anniversary canvas framed by cut-paper leaves, bright green landscapes, and small yellow seeds.

**Website:** [next100.shijonawate-gakuen.ac.jp](https://next100.shijonawate-gakuen.ac.jp/)
**Original URL:** https://next100.shijonawate-gakuen.ac.jp/
**Final URL:** https://next100.shijonawate-gakuen.ac.jp/
**Theme:** light canvas with substantial green section inversions.
**Inspected:** supplied capture session dated September 23, 2026, Japan Standard Time; evidence timestamp `2026-09-22T15:28:28.310Z`, equivalent to September 23 at 00:28:28 JST.
**Viewports:** desktop 1440 × 1000 and mobile 390 × 844 CSS pixels.
**Scope:** the current anniversary homepage, including its opening identity, editorial introductions, project rail, news, history entry point, support request, and footer. Three desktop and two mobile screenshots provide visual coverage; rendered DOM and computed styles supplement the regions between them. Linked pages and expanded navigation states were not inspected.

This is an educational institution’s anniversary hub, connecting messages, reading features, interviews, commemorative projects, news, history, and donations. Its design gives those destinations a shared visual identity without making every section a conversion panel.

The opening screen contains very little ordinary content. A central anniversary lockup sits inside a large field of white, surrounded by irregular leaves and yellow dots. The same botanical vocabulary continues through the page: a pale patterned circle appears behind a section transition, green areas rise along uneven curved edges, and oversized leaves crop into the footer. Rounded image corners, capsule links, and circular controls echo this softness at smaller scales.

Typography supplies order within the organic composition. Japanese interface text uses Noto Sans JP, with clearly separated heading sizes, generous tracking, and compact bold navigation. The identity artwork carries its own lettering. Preserve the contrast between precise text and irregular illustration when adapting the design.

## How to Read This Reference

- **Measured** means a value reported in the supplied rendered DOM, computed styles, or custom properties. Values in tables are rounded where appropriate.
- **Estimated** means a dimension or visual characteristic assessed from the current-page screenshots. Screenshot estimates are not recovered CSS declarations.
- **Calculated** means a value derived from the supplied formulas or measurements, using the observed 16px root font size.
- **Recommended** means an implementation choice for reuse, including breakpoints, accessibility improvements, and the Quick Start code.
- Token aliases such as `--color-green` are reference names, not original source variables unless explicitly identified.
- The root and body remain 16px at both viewports. Several content components independently shrink to approximately 13px on mobile; do not describe this as a globally reduced root size.
- Some introductory text and link bounding boxes are smaller than their computed typography and padding would imply. These may reflect transforms or capture state. Their computed type values are useful; their coordinates are not reliable resting-layout specifications.
- Registered presets do not prove visible use. Generic gradient, shadow, and color presets in the evidence are excluded from the active visual system unless independently supported.

## Tokens — Colors

### Default Palette

| Name | Value | Original source token | Role and evidence |
| --- | --- | --- | --- |
| White Canvas | `#FFFFFF` | `--wp--preset--color--base` | Measured body background; visible opening canvas, negative space, and circular support surface |
| Gakuen Green | `#009333` | `--wp--preset--color--green-primary` | Declared primary green; measured support-link text and back-to-top icon color; visually anchors the anniversary identity, project section, and footer |
| Leaf Green | `#6FBA2C` | `--wp--preset--color--green-secondary` | Declared secondary green; corresponds to the medium-green decorative foliage |
| Lime Leaf | `#ABCD03` | `--wp--preset--color--green-tertiary` | Declared tertiary green; corresponds to bright lime foliage |
| Seed Yellow | `#FFE100` | `--wp--preset--color--yellow` | Declared yellow; visible small scattered dots and details within the identity artwork |
| Peach | `#F29A76` | `--wp--preset--color--pink` | Measured mobile menu-button background; related warm accents appear within the botanical artwork |
| Mist Surface | `#F4F5F1` | `--wp--preset--color--gray-secondary` | Declared neutral matching the pale support-area surface in the screenshots |
| Text Black | `#000000` | `--wp--preset--color--black` | Measured paragraph, heading, and desktop navigation color |
| Link Charcoal | `#3E3E3E` | `--wp--preset--color--contrast` | Measured news-link color and several link elements |
| Neutral Gray | `#D0D3CC` | `--wp--preset--color--gray-primary` | Declared supporting neutral; a specific visible application is not established |

Use the three greens as a related family. Primary green forms the largest colored areas; secondary green and lime belong mainly to the foliage. Yellow works as tiny punctuation. Peach is especially distinctive on the mobile menu control because it is the only warm filled control in the opening capture.

White space is structural. Avoid distributing the accent colors evenly across cards, headings, or categories. The page feels coherent because most interface decisions return to white, green, and black.

### Theme Presets

Only the light palette and green section inversions are evidenced. No alternative selectable theme was inspected. The pale botanical circle and lighter mobile leaves should not be treated as separate theme colors: opacity, asset colors, or another compositing treatment could account for them, and that implementation is unverified.

## Tokens — Typography

### Japanese Interface and Editorial Text

- **Measured family:** `Noto Sans JP`.
- **Measured weights:** `400` for paragraphs and news titles, `600` for section and editorial headings, and `700` for navigation and primary links.
- **Body defaults:** `16px`, `27.2px` line height, and `1.6px` letter spacing.
- **Character:** orderly, open, and readable, with tracking that gives short Japanese labels a deliberate rhythm.
- **Recommended fallback:** `sans-serif`; the fallback in the Quick Start is an implementation addition.

The introductory anniversary paragraph has a looser `2` line-height ratio. Ordinary descriptive copy uses approximately `1.7`, while headings and news titles use approximately `1.3`.

### Identity Artwork

The header combines a small botanical emblem with a two-line English anniversary wordmark. The hero uses a much larger `100TH` composition, with a botanical second zero, stacked `T` and `H`, and the school name above `Since1926`.

Treat this lettering as supplied identity artwork. Its font family is not established by the element evidence. The root element’s `Times` value does not establish the font used in either logo.

The small `SCROLL` caption appears serif in the screenshots. Its exact family and computed size were not supplied.

### Icons

`Material Icons Outlined` is measured on the back-to-top link. The evidence does not establish that every arrow or dot uses this font. External-link arrows, the project-navigation arrows, and capsule-end symbols should be reproduced by appearance or an appropriate available asset, without attributing them all to one icon library.

### Type Scale

Desktop and mobile values below are measured, with minor decimal rounding.

| Role | Desktop | Mobile | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| Body default | 16px | 16px | 400 | 27.2px | 1.6px |
| Descriptive paragraphs | ≈16px | ≈13.01px | 400 | ≈27.20 / 22.11px | 1.6px |
| Introductory anniversary copy | ≈19.99px | ≈15.01px | 400 | ≈39.99 / 30.01px | 1.6px |
| Editorial H3 | ≈25.99px | 20px | 600 | ≈33.79 / 26px | 0.1em |
| News and support H2 | ≈36px | 24px | 600 | ≈46.80 / 31.20px | 0.07em |
| Major project/history H2 | ≈47.99px | 30px | 600 | ≈62.39 / 39px | 0.07em |
| Capsule link | ≈16px | ≈13.01px | 700 | ≈27.20 / 22.11px | 1.6px |
| News-item title | ≈16px | ≈13.01px | 400 | ≈20.80 / 16.91px | 0.1em |
| Desktop header navigation | 14px | Hidden in opening state | 700 | 23.8px | 1.6px |
| Footer primary links | ≈14px | ≈14.98px | 700 | Approximately 1 | 1.6px |
| Footer school links | ≈11.99px | 10px | 700 | Approximately 1 | 1.6px |

The mobile footer is an important exception to simple proportional reduction: its main links become slightly larger while the affiliated-school links become smaller.

### Source Fluid Type Formulas

These are supplied source formulas, using a conventional 16px root:

```css
/* Descriptive text and most capsule labels */
--wp--preset--font-size--medium:
  clamp(0.8125rem, 0.813rem + ((1vw - 0.244rem) * 0.285), 1rem);

/* Introductory paragraph */
--wp--preset--font-size--large:
  clamp(0.9375rem, 0.938rem + ((1vw - 0.244rem) * 0.475), 1.25rem);

/* Editorial headings */
--wp--preset--font-size--xxl:
  clamp(1.25rem, 1.25rem + ((1vw - 0.244rem) * 0.571), 1.625rem);

/* News and support headings */
--wp--preset--font-size--xxxl:
  clamp(1.5rem, 1.5rem + ((1vw - 0.244rem) * 1.143), 2.25rem);

/* Major section headings */
--wp--preset--font-size--xxxxl:
  clamp(1.875rem, 1.875rem + ((1vw - 0.244rem) * 1.714), 3rem);
```

Do not replace the measured fixed `1.6px` tracking on all body copy with a universal `0.1em`: at the smaller mobile content size, those produce different spacing.

## Tokens — Spacing & Shapes

**Density:** sparse at the page scale, moderately compact inside navigation and text groups.
**Geometry:** large organic section edges, rounded image windows, capsules, and true circles.
**Root unit:** standard 16px rem, with component-level fluid formulas.

### Spacing Scale

The following values are calculated from supplied presets. The preset number is generally an upper bound, not a constant pixel value at every viewport.

| Source preset suffix | At 1440px width | At 390px width | Interpretation |
| --- | --- | --- | --- |
| `spacing--16` | 16px | ≈13.23px | Small fluid spacing |
| `spacing--24` | ≈23.97px | 16px | Compact gaps and insets where applied |
| `spacing--32` | 32px | ≈26.44px | Matches measured project-image corner radii |
| `spacing--40` | ≈39.98px | ≈15.01px | Measured editorial heading-to-copy spacing is consistent with this scale |
| `spacing--64` | 64px | ≈40.02px | Larger component separation |
| `spacing--80` | 80px | 40px | Broad layout spacing |
| `spacing--96` | 96px | ≈79.31px | Matches measured main bottom padding |
| `spacing--120-48` | 120px | ≈48.02px | Large responsive separation |

These presets are not a universal grid. The project rail, for example, has a measured 40px desktop gap and 24px mobile gap, rather than following the `spacing--40` formula unchanged.

### Border Radius

| Element | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Project image window | 32px | ≈26.44px | Computed radius |
| Standard capsule link | 100px | 100px | Computed radius; effectively a pill |
| Mobile menu surface | — | 50px | Computed radius on an ≈80 × 32px button |
| Support link | 100% | 100% | Computed circular geometry |
| Back-to-top link | 100% | 100% | Computed 64 × 64px circle |
| Project arrow controls | Circular | Not visually supplied | Desktop screenshot estimate |
| Section boundary | Irregular curve | Irregular curve | Illustration geometry, not a CSS corner radius |

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 | Status |
| --- | --- | --- | --- |
| Recorded document height | 8294px | 7162px | Supplied document measurement; not a target fixed height |
| Header box | ≈101.80px high | ≈79.42px high | Measured |
| Header logo link | ≈229.95 × 49.98px | ≈182.98 × 39.77px | Measured |
| Header logo origin | x≈23.95, y≈33.91 | x=23, y≈26.44 | Measured |
| Hero emblem excluding tagline | ≈410 × 265px | ≈212 × 138px | Screenshot estimate |
| Wide project heading region | ≈1262.78px wide, x≈88.61 | 342px wide, x=24 | Measured |
| Editorial text column | 400px | 342px | Measured for reading/interview descriptions |
| Support text column | ≈653.81px | 342px | Measured |
| Support composition span | 1060px | 342px content width | Calculated desktop span; measured mobile text width |
| Project image | 601.5 × 401px | 322 × ≈214.66px | Measured; 3:2 aspect ratio |
| Project image gap | 40px | 24px | Calculated from adjacent positions |
| Standard capsule anchor | ≈225.95 × 65.56px | 176 × ≈53.28px | Measured on ordinary, unscaled instances |
| Support circle | ≈286.19px diameter | ≈179.98px diameter | Measured |
| Footer box | 581px high | ≈690.91px high | Measured; decorative painting need not coincide with its rectangular bounds |
| Back-to-top circle | 64px diameter | 64px diameter | Measured |

The supplied global content and wide-size presets are `840px` and `1280px`. They do not describe every observed container. The support composition spans 1060px, and the project heading region is approximately 1263px. Preserve these distinct widths rather than forcing the entire homepage into one narrow column.

## Components

### Site Header

**Role:** identify the anniversary site and expose its principal destinations.

The desktop header is visually transparent over the white botanical opening. Its small green anniversary identity sits near the upper-left corner. Seven text destinations occupy the right side: special content, messages, history, projects, donations, news, and contact. Navigation is black, 14px, weight 700, with 1.6px tracking and approximately 24px horizontal gaps.

The project item includes a small downward control. Four submenu destinations occur in the supplied DOM: books, a reading campaign, library renewal, and cafeteria renewal. Their existence is evidenced; the open dropdown’s appearance, trigger mechanism, and keyboard behavior are not.

At 390px, the desktop row is replaced by an approximately 80 × 32px peach capsule at x≈286, y≈30.4. Three white dots form its visible symbol. The logo remains substantial at approximately 183px wide. This keeps the identity legible while giving the menu a deliberately small visual footprint.

The header is not visible in the supplied scrolled screenshots. Its exact positioning and any conditional sticky behavior remain unverified.

A skip link labeled `内容をスキップ` exists in both DOM observations. Its resting box is clipped to 1 × 1px outside the viewport; its focus appearance was not captured.

### Anniversary Hero

**Role:** establish the anniversary identity before introducing detailed content.

Center the main lockup horizontally and approximately vertically within the opening composition. The Japanese tagline `学ぶ喜びをずっと。` sits above the emblem. The emblem combines large green numerals, a circular botanical zero containing leaves and small human-like shapes, stacked anniversary letters, and the school name.

The surrounding leaves vary sharply in size. Several large leaves extend beyond the viewport edges, while smaller leaves and yellow dots occupy the interior. Their rough silhouettes resemble cut or torn paper, with pointed ends and irregular contours. They are not arranged into a uniform repeating pattern.

Desktop uses a broad visual clearing around an approximately 410px-wide emblem. Mobile recomposes the foliage around an approximately 212px-wide emblem rather than shrinking the whole desktop screen. The mobile center remains quiet even though the outer leaves occupy a larger proportion of the viewport.

A small green `SCROLL` caption and a vertical stack of three colored dots sit near the bottom center. This is an observed directional cue; click behavior was not tested.

### Editorial Introduction

**Role:** explain the anniversary statement and introduce people, books, and learning.

The DOM contains an introductory paragraph and the `私たちの思い` link to the message section. Subsequent editorial groups include `ナワガク読書案内` and `インタビュー`, each combining a semibold heading with regular descriptive copy.

Desktop reading and interview text occupies narrow 400px columns offset toward the right. Their different horizontal positions contribute to a loose editorial composition rather than a rigid series of identical rows. Mobile places both groups at x=24 in a 342px column.

The visible desktop transition includes a green capsule labeled `私たちの願い`, a small lime leaf, and a large pale botanical circle behind the next section’s boundary. The circle repeats the anniversary motif at lower visual intensity. It is partially concealed by the rising green section, creating depth without a shadow.

The complete imagery and all intermediate reveal states of this editorial area are not shown. Do not invent portrait layouts or scroll choreography to fill that gap.

### Capsule Link

**Role:** provide a consistent entry point from a section to its destination.

Observed examples include `私たちの思い`, `私たちの願い`, `私たちの取り組み`, `MORE`, and `100年の歩み`.

The ordinary green version has white bold text aligned toward the left and a small white circular symbol near the right end. In the visible desktop example, the symbol contains a green center dot. The measured anchor uses:

- Approximately 16px type on desktop and 13.01px on mobile.
- Vertical padding of `1.2em`.
- Left padding of `1.8em` and right padding of `4.5em`.
- A 100px radius and 1.6px letter spacing.
- An ordinary anchor box of approximately 226 × 65.6px desktop or 176 × 53.3px mobile.

Text length can increase the width: the projects link measures approximately 235.75px on desktop and 194.05px on mobile.

Several computed anchor backgrounds are transparent even where a filled capsule is visible. The visible fill may belong to a wrapper or pseudo-element not included in the sample. Reproduce the painted component, not the transparent anchor declaration in isolation.

### Project Section and Horizontal Rail

**Role:** present commemorative initiatives with editorial images and links.

The section begins with a full-width green area whose upper edge rises and falls in a broad, irregular wave. The pale botanical circle behind it reinforces the transition. A white heading, `次の100年に向けて。`, sits toward the left; two outlined circular arrow controls sit toward the right.

The desktop heading is approximately 48px at weight 600. The arrow circles appear approximately 80px in diameter, with thin white outlines and about a 24px gap. The left control appears subdued in the capture. That appearance suggests an unavailable previous action, but its disabled semantics were not verified.

Below the heading, large 3:2 image windows form a horizontal rail. Six distinct project destinations occur in the DOM. Each logical card combines an image, a short introductory line, and a project title. Several destinations have more than one link element in the extraction; this does not establish duplicate content cards.

Measured desktop image windows are 601.5 × 401px with 32px corners and 40px gaps. Alternating cards are vertically staggered by approximately 40px. On mobile, images are 322 × 214.66px with approximately 26.44px corners and 24px gaps. Their top coordinates align, removing the desktop stagger.

The mobile first card begins at x=34; the next starts at x=380, establishing horizontal continuation beyond the viewport. This supports a one-card-at-a-time presentation, not a stacked mobile project grid. Swiping, arrow advancement, looping, autoplay, and transition timing were not exercised.

### News Block

**Role:** provide a compact dated update list.

The desktop DOM places the `ニュース` heading and `MORE` capsule toward the left, with news titles beginning around x=752 in an approximately 498px-wide region. Three dates and corresponding updates are present.

At 390px, the heading, news entries, and final `MORE` link follow a vertical sequence in the 342px content column. The button moves after the list, preserving a natural reading order.

News titles use regular weight rather than the heavier editorial heading style. Their measured line-height ratio is approximately 1.3, tighter than descriptive paragraphs. The screenshots do not directly show the news block, so its divider treatment, date styling, and complete surrounding surface should not be inferred.

### History Entry Point

**Role:** connect the anniversary story to the institution’s history.

The DOM records a centered major heading, `四條畷学園を支えるもの。`, followed by the `100年の歩み` capsule. The heading uses the large 48px desktop / 30px mobile scale and occupies two lines in the measured boxes.

The link is centered at both viewports. This establishes a distinct pause and navigation destination within the long homepage. The surrounding historical imagery was not supplied, and a timeline should not be assumed to appear on this homepage.

### Support Request

**Role:** explain the purpose of financial support and provide a clear external destination.

The support area uses a pale mist surface. On desktop, a black heading and paragraph sit on the left; a large white circular link sits on the right. The measured composition spans x=190 to x=1250, with a 653.81px text column, a 120px gap, and a 286.19px circle.

The heading `ご支援のお願い` is approximately 36px and semibold. Its paragraph uses approximately 16px type with a 27.2px line height. The circle contains the green bold label `ご支援の詳細はこちら` and a separate diagonal arrow lower down. The generous empty interior makes this feel like a destination marker rather than a conventional rectangular button.

On mobile, the heading and paragraph occupy 342px at x=24. The 180px circle follows below, centered at x=105, with approximately 33px between the paragraph’s measured bottom and the circle’s top. The link points to the institution’s support URL; navigation was not performed.

### Institutional Footer

**Role:** close the anniversary narrative and provide a complete directory.

A large green field rises into the mist support area along an uneven, hill-like edge. An oversized leaf enters from the upper-right boundary and another occupies the lower-left corner. The institutional logo is white and centered; it is distinct from the anniversary lockup used above.

Desktop places eight primary links in one centered row. Seven affiliated-school links follow in two centered rows, four above and three below. Main links measure approximately 14px; affiliated-school links measure approximately 12px. All are bold, white, and tracked.

Mobile preserves two adjacent link groups. The primary navigation forms a left stack beginning at x=35, while the smaller school links form a right stack beginning at x≈211.19. The right group starts lower and aligns near the lower portion of the primary group. Main links are approximately 15px; school links are 10px. The white institutional mark remains centered above both groups.

The footer is taller on mobile: approximately 691px versus 581px in the desktop DOM. This is a deliberate reorganization of the directory, not a proportional reduction of the desktop footer.

### Back-to-Top Link

**Role:** provide a return path to the opening of the long page.

A 64px white circle contains a green upward chevron. Its size is unchanged between viewports. The desktop position leaves approximately 88.6px to the right edge and 40px below it; mobile leaves 24px to the right and 15px below it, calculated against the recorded document bounds.

The link points to `#pagetop`. The supplied captures show it in the footer; they do not establish viewport-fixed behavior or smooth scrolling.

## Tokens — Motion & Interaction

| Treatment | Supplied evidence | Interpretation and limitation |
| --- | --- | --- |
| Header, footer, and news links | `transition: color 0.3s` | A 300ms color transition is defined; hover colors were not captured |
| Capsule links | Computed transition reported as `0.3s` | Duration is evidenced; the changing properties and visual sequence are not fully specified |
| Support circle | Computed transition reported as `0.3s` | A transition exists; hover transformation or inversion is unverified |
| Back-to-top circle | `background-color 0.3s` | A 300ms background transition is defined; activated scrolling was not tested |
| Shared hover token | `--wp--custom--hover-transition: .3s` | Consistent source duration for interactive styling |
| Navigation underline color | `--gnav-under-line-color: #009333` | A color token exists; underline animation and activation are unverified |
| Project rail | Horizontal offscreen card positions, arrow controls, and Swiper-related variables | Consistent with a carousel; actual advancement, dragging, and autoplay are unverified |
| Menu layers | Header `9`, drawer `10`, drawer-button `11` custom properties | Declared stacking tokens; an open drawer was not inspected |
| Viewport-height helper | `--vh: 10px` desktop and `8.44px` mobile | Equals 1% of the supplied viewport height; the consuming hero formula was not provided |
| Botanical decoration | Static screenshots only | Drift, rotation, parallax, opacity animation, and timings cannot be established |

Sampled text and link elements generally report `animation: none`. This does not prove that the complete page has no animation: illustrative descendants, pseudo-elements, and JavaScript-driven transforms are not fully represented.

The capture process waited for document loading, visible image decoding, and sampled layout stability. Perpetual animations were temporarily paused during readiness checks and resumed afterward. Consequently, these stills should not be used to reconstruct exact motion phases.

**Recommended motion direction:** retain the evidenced 300ms interaction scale. If adding botanical movement, make it slow and low-amplitude, keep the central reading area stable, and provide a static reduced-motion state. Such movement would be an adaptation, not a verified feature of this reference.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Opening canvas | Solid white with scattered foliage | Gives the anniversary artwork room to dominate |
| Editorial area | White with black text and selective botanical accents | Supports reading without enclosing each topic in a card |
| Project area | Strong green with white heading and large photographs | Creates a clear thematic chapter |
| Project image windows | Photography or editorial graphics with large rounded corners | Contains varied content while keeping a consistent rhythm |
| Support area | Very pale neutral with black text | Provides a calm transition before the footer |
| Support destination | White circle with green text | Distinguishes the external support route |
| Footer | Green field with white institutional identity and links | Resolves the page into a unified directory |

No general elevation or shadow system is visible in the supplied captures. Depth comes from overlap, cropping, shifts in scale, and alternating color fields. The presence of generic shadow presets in the custom properties is not evidence that those shadows belong in this design.

## Imagery

The decorative language is botanical and handmade. Leaves have uneven edges, pointed tips, varied orientations, and flat fills. Their silhouettes matter more than surface texture: they resemble cut paper without requiring a photographic paper background or visible grain everywhere.

The anniversary emblem condenses the same vocabulary into a circle. Leaves, yellow dots, and warm human-like forms make it more intricate than the surrounding silhouettes. Reusing that circle at a larger, paler scale creates continuity between the opening identity and later section transitions.

Project imagery supplies the photographic and historical content. In the supplied desktop crop, the first visible image is an editorial collage featuring printed historical material; the adjacent image shows people in an indoor setting. Other project destinations are identified by DOM text, but their image treatments are not directly visible in the supplied captures.

Keep imagery in its appropriate role: identity artwork remains crisp and uncropped, decorative leaves can be heavily cropped, and project photographs use 3:2 rounded windows.

### Observed Asset References

No image-file URLs or asset filenames were included in the rendered evidence. The following references identify visible assets without inventing download paths.

| Asset | Evidence | Reuse guidance |
| --- | --- | --- |
| Small anniversary identity | Desktop and mobile opening screenshots | Preserve the botanical emblem and two-line wordmark together |
| Main `100TH` lockup | Desktop and mobile opening screenshots | Use authorized artwork with its native proportions; do not retype the logo |
| Decorative leaves and yellow dots | Opening, transition, and footer screenshots | Maintain irregular contours and separate desktop/mobile placements |
| Pale botanical circle | Desktop editorial-to-project transition | Reuse the identity motif with reduced visual intensity; exact opacity is unknown |
| Project imagery | Partial desktop project rail | Use project-specific 3:2 assets rather than interchangeable stock photographs |
| White institutional logo | Desktop and mobile footer screenshots | Preserve the emblem, Japanese lettering, and white treatment |
| Upward chevron | Footer screenshots and computed icon family | Measured element uses Material Icons Outlined |

Use original identity assets only when authorized and available. The CSS below describes the layout and surfaces; it does not replace the institution’s logo or illustration assets.

## Layout & Responsive Behavior

The homepage is a long document with distinct reading widths and changes in section color. Its recorded height is approximately 8.29 desktop viewports or 8.49 mobile viewports. These ratios describe this capture, not a requirement to impose fixed section heights.

The opening composition occupies the supplied initial viewport at both sizes. The logo remains centered, while foliage is recomposed and cropped around the available space. There is no evidence for a universal scale transform that shrinks the entire desktop layout onto mobile.

| Relationship | Desktop observation | Mobile observation |
| --- | --- | --- |
| Header navigation | Full row of destination links | Peach three-dot menu control |
| Anniversary emblem | Approximately 410px wide | Approximately 212px wide |
| Editorial copy | Offset 400px columns | 342px column with 24px side margins |
| Major project heading | Single line in supplied desktop view | Two-line text in mobile DOM |
| Project rail | Two large images fit across the main region; alternating vertical offsets | One full image with horizontal continuation; equal top positions |
| News | Heading/action left, entries right | Heading, entries, then action |
| Support | Text and circle side by side | Text followed by centered circle |
| Footer navigation | Centered horizontal groups | Two adjacent vertical groups |
| Back-to-top | 64px circle near footer’s right edge | Same 64px circle with tighter outer inset |

Only the two listed viewport sizes were inspected. Exact media-query breakpoints, tablet arrangements, landscape-phone behavior, and safe-area handling are unknown. The Quick Start uses explicit recommended breakpoints rather than presenting them as recovered source rules.

## Do’s and Don’ts

### Do

- Preserve the white clearing around the anniversary identity.
- Use `#009333` for the main green identity and large section fields.
- Keep medium green, lime, yellow, and peach tied to their specific decorative or control roles.
- Preserve the irregular leaf silhouettes and their deliberate edge cropping.
- Use Noto Sans JP for interface text while retaining the logos as artwork.
- Distinguish large chapter headings, smaller section headings, and regular news titles.
- Keep project images at 3:2 with substantial rounded corners.
- Maintain the desktop rail’s alternating vertical rhythm and the mobile rail’s aligned tops.
- Reuse capsule links consistently, with space reserved for the end symbol.
- Keep the support destination circular and spatially distinct from its explanatory copy.
- Preserve the mobile footer’s distinction between main navigation and affiliated schools.
- Use the current captures and DOM together when a painted component differs from an individual element’s computed background.

### Don’t

- Don’t replace the opening identity with a generic photograph, oversized text headline, and a row of conversion buttons.
- Don’t distribute every accent color across ordinary UI elements.
- Don’t make the leaves identical, evenly spaced, or geometrically perfect.
- Don’t replace the irregular section edges with standard rounded rectangles.
- Don’t add glossy gradients, glass blur, or routine card shadows.
- Don’t infer a logo font from the root element’s browser font.
- Don’t force the support composition and project rail into the global 840px content preset.
- Don’t turn the mobile project rail into a stacked grid when reproducing the observed layout.
- Don’t assume a visible faded arrow proves disabled semantics or carousel boundary behavior.
- Don’t invent menu opening, parallax, autoplay, or scroll-reveal timing from still captures.
- Don’t hardcode the recorded document height or animation-sensitive introductory coordinates.

## Recommended Implementation Additions

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

- Give the three-dot menu an explicit accessible name, expanded state, controlled-region association, keyboard operation, and reliable focus restoration. If implemented as a modal drawer, provide the corresponding focus and dismissal behavior.
- Keep the visible menu capsule near 80 × 32px while expanding its interactive area to at least 44px high. Give the tiny desktop submenu control a similarly usable target.
- Make the existing skip-link pattern visibly usable on focus. Retain a clear focus indicator on green, white, and mist surfaces.
- Calculate text contrast separately from decorative color fidelity. Declared `#009333` against white is approximately **4.0:1**, below 4.5:1 for normal text. A darker action green such as `#007C2B` is a possible adaptation for small labels; footer and project text on green also require review.
- Reconsider the observed 13px mobile body text and 10px affiliated-school links when readability is a priority. Larger text may require a different footer arrangement, additional wrapping, and more vertical space.
- Keep essential news text comfortably readable when it wraps. The observed 1.3 line-height ratio is compact for longer Japanese titles.
- Give project images meaningful alternatives, and ensure every project has a named link. Empty link text in this extraction does not establish whether an accessible name already exists.
- Hide decorative leaves, dots, and duplicate emblems from assistive technology. Give each institutional identity a concise useful alternative.
- Provide keyboard-accessible project browsing, explicit previous/next labels, and a genuine unavailable state where appropriate. Do not require dragging as the only browsing method.
- Avoid introducing autoplay without a pause mechanism. Disable added decorative motion under `prefers-reduced-motion`.
- Reserve image dimensions to prevent layout shifts. Use responsive image delivery for project photography while keeping logo proportions intact.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas: `#FFFFFF`.
- Main botanical identity and green bands: `#009333`.
- Secondary leaves: `#6FBA2C` and `#ABCD03`.
- Small scattered seeds: `#FFE100`.
- Mobile menu surface: `#F29A76`.
- Support-area surface: `#F4F5F1`.
- Ordinary headings and copy: black; selected link text: `#3E3E3E`.
- Controls: green capsules, white circles, and thin circular arrow outlines.
- Optional accessibility adaptation: darker action green `#007C2B`, subject to a complete contrast review.

### Overall Prompt

“Create an anniversary homepage for an educational institution using a white canvas, primary green `#009333`, irregular cut-paper leaves in medium green and lime, and small yellow dots. Center an authorized anniversary lockup in a quiet full-height opening composition. Use Noto Sans JP, tracked Japanese labels, semibold section headings, and generous whitespace. Follow with editorial introductions, a green project section with an uneven curved top edge and large rounded 3:2 images, a compact news list, a centered history entry point, and a pale support section with a large circular destination link. Finish with a green institutional footer framed by oversized leaves. Recompose the foliage on mobile, replace desktop navigation with a peach three-dot capsule, retain a horizontal project rail, and move the support circle below its copy. Treat menu behavior and decorative motion as separate implementation decisions.”

### Example Component Prompts

1. **Opening composition:** “A white anniversary opening with a centered green botanical lockup, the short tagline `学ぶ喜びをずっと。`, and varied cut-paper leaves entering from the edges. Leave substantial white space around the mark. Add a small bottom-center scroll caption with three vertically arranged colored dots.”
2. **Project chapter:** “A full-width green section with a rough, gently undulating upper edge. Place a large white Japanese heading at left and two thin outlined circular arrow controls at right. Below, show 3:2 photographs with 32px corners, 40px horizontal gaps, and alternating 40px desktop vertical offsets. On mobile, use one 322px image at a time and align the card tops.”
3. **Capsule link:** “A green pill with bold white Japanese text, approximately 226 × 66px on desktop. Use generous right padding for a small white circle containing a green dot. Keep the surface flat and define a restrained 300ms interaction transition.”
4. **Support request:** “A pale `#F4F5F1` section with black explanatory text in a roughly 654px desktop column and a separate 286px white circular link. Center a green label inside the circle and place a diagonal arrow below. On a 390px phone, use a 342px text column and center a 180px circle beneath it.”
5. **Footer:** “A green footer rising along an irregular hill-like edge, with a white institutional logo and oversized cropped leaves. Use a centered primary navigation row and two rows of smaller school links on desktop. On mobile, create distinct adjacent main-navigation and school-link stacks, with a 64px white back-to-top circle near the lower-right corner.”

## Quick Start

### CSS Custom Properties

This is a reusable adaptation, not the original stylesheet. Colors, fluid type formulas, capsule padding ratios, and image radii are source-derived. Container rules, breakpoints, native scrolling, focus styling, and the enlarged menu hit area are recommendations.

Load Noto Sans JP through an appropriate licensed font setup. Supply authorized logo and foliage assets separately. The hero expects a positioned decorative layer, a centered content block, and a header inside its positioned container. The project rail below works with native horizontal scrolling; arrow controls and an accessible menu drawer require separate behavior.

```css
:root {
  /* Source-derived palette */
  --color-paper: #ffffff;
  --color-green: #009333;
  --color-leaf: #6fba2c;
  --color-lime: #abcd03;
  --color-seed: #ffe100;
  --color-peach: #f29a76;
  --color-mist: #f4f5f1;
  --color-text: #000000;
  --color-link: #3e3e3e;
  --color-action: var(--color-green);

  /* Source-derived typography; fallback is recommended */
  --font-body: 'Noto Sans JP', sans-serif;
  --type-body: clamp(
    0.8125rem,
    0.813rem + ((1vw - 0.244rem) * 0.285),
    1rem
  );
  --type-intro: clamp(
    0.9375rem,
    0.938rem + ((1vw - 0.244rem) * 0.475),
    1.25rem
  );
  --type-editorial: clamp(
    1.25rem,
    1.25rem + ((1vw - 0.244rem) * 0.571),
    1.625rem
  );
  --type-section: clamp(
    1.5rem,
    1.5rem + ((1vw - 0.244rem) * 1.143),
    2.25rem
  );
  --type-feature: clamp(
    1.875rem,
    1.875rem + ((1vw - 0.244rem) * 1.714),
    3rem
  );
  --tracking-body: 1.6px;
  --leading-body: 1.7;

  /* Source-derived radius and spacing formulas */
  --radius-image: clamp(
    1.625rem,
    1.625rem + ((1vw - 0.2rem) * 0.625),
    2rem
  );
  --space-editorial: clamp(0.938rem, 0.357rem + 2.38vw, 2.5rem);
  --space-section: clamp(3rem, 1.329rem + 6.86vw, 7.5rem);
  --radius-pill: 100px;
  --motion-hover: 300ms;

  /* Recommended containers based on measured endpoint layouts */
  --page-gutter: 24px;
  --content-width: 1060px;
  --wide-width: 1262.8px;
  --header-layer: 9;
  --drawer-layer: 10;
  --menu-layer: 11;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

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

.container,
.wide-container {
  width: min(calc(100% - 2 * var(--page-gutter)), var(--content-width));
  margin-inline: auto;
}

.wide-container { max-width: var(--wide-width); width: calc(100% - 48px); }

.copy {
  margin: 0;
  font-size: var(--type-body);
  line-height: 1.7;
}

.intro-copy { font-size: var(--type-intro); line-height: 2; }

.section-title,
.feature-title,
.editorial-title {
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
}

.section-title { font-size: var(--type-section); letter-spacing: 0.07em; }
.feature-title { font-size: var(--type-feature); letter-spacing: 0.07em; }
.editorial-title { font-size: var(--type-editorial); letter-spacing: 0.1em; }
.editorial-title + .copy { margin-block-start: var(--space-editorial); }

/* Recommended hero sizing; the original consuming height rule is unknown. */
.anniversary-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 120px 24px;
  overflow: hidden;
  background: var(--color-paper);
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: var(--header-layer);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 102px;
  padding: 32px 24px 16px;
}

.header-brand { flex: 0 0 auto; width: 230px; line-height: 0; }
.header-nav { display: flex; align-items: center; gap: 24px; }
.header-nav a {
  padding-block: 14px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--motion-hover);
}

/* Recommended 44px hit area around the observed 32px visual capsule. */
.menu-toggle {
  position: relative;
  isolation: isolate;
  z-index: var(--menu-layer);
  display: none;
  align-items: center;
  justify-content: center;
  width: 80px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: white;
  cursor: pointer;
}
.menu-toggle::before {
  content: '';
  position: absolute;
  inset: 6px 0;
  z-index: -1;
  border-radius: 50px;
  background: var(--color-peach);
}

.hero-content { text-align: center; color: var(--color-green); }
.hero-tagline {
  margin: 0 0 clamp(24px, 3.8vw, 55px);
  font-size: clamp(16px, 2.1vw, 30px);
  font-weight: 700;
  letter-spacing: 0.2em;
}
.hero-emblem {
  width: clamp(212px, 28.6vw, 412px);
  max-width: 100%;
  margin-inline: auto;
}
.hero-decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.leaf {
  position: absolute;
  left: var(--leaf-x, 0);
  top: var(--leaf-y, 0);
  width: var(--leaf-size, 120px);
  transform: rotate(var(--leaf-turn, 0deg));
}
.scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-green);
  text-align: center;
}

.pill-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 226px;
  min-height: 0;
  padding: 1.2em 4.5em 1.2em 1.8em;
  border-radius: var(--radius-pill);
  background: var(--color-action);
  color: white;
  font-size: var(--type-body);
  font-weight: 700;
  line-height: 1.7;
  text-decoration: none;
  transition: background-color var(--motion-hover), color var(--motion-hover);
}
.pill-link::after {
  content: '';
  position: absolute;
  right: 1.6em;
  width: 1.5em;
  height: 1.5em;
  border: 0.5em solid white;
  border-radius: 50%;
  background: var(--color-action);
}

/* Insert an authorized or newly drawn decorative SVG before each band. */
.green-band {
  --band-color: var(--color-green);
  position: relative;
  background: var(--band-color);
  color: white;
}
.section-wave {
  display: block;
  width: 100%;
  height: clamp(60px, 9vw, 140px);
  margin-bottom: -1px;
  fill: var(--color-green);
}
.projects { padding-block: var(--space-section); }
.project-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.project-controls { display: flex; gap: 24px; }
.project-control {
  width: 80px;
  height: 80px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.project-control:disabled { opacity: 0.4; cursor: default; }

/* Native overflow is a recommended baseline, not a recovered source rule. */
.project-track {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  overflow-x: auto;
  padding: 80px 10px 16px;
  scroll-snap-type: x proximity;
}
.project-card {
  flex: 0 0 calc((100% - 40px) / 2);
  min-width: 0;
  scroll-snap-align: start;
}
.project-card:nth-child(odd) { margin-block-start: 40px; }
.project-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-image);
}

.support-section {
  padding-block: var(--space-section);
  background: var(--color-mist);
}
.support-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286.2px;
  align-items: center;
  gap: 120px;
}
.support-copy .copy { margin-block-start: 40px; }
.support-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: 286.2px;
  aspect-ratio: 1;
  padding: 24px;
  border-radius: 50%;
  background: white;
  color: var(--color-action);
  font-size: var(--type-body);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: color var(--motion-hover), background-color var(--motion-hover);
}
.support-orbit .external-arrow { position: absolute; bottom: 30px; }

.site-footer {
  position: relative;
  padding: 110px 0 118px;
  overflow: hidden;
}
.footer-brand { width: 246px; margin: 0 auto 80px; }
.footer-nav,
.footer-affiliates {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  font-weight: 700;
  line-height: 1;
}
.footer-nav { font-size: 14px; }
.footer-affiliates {
  max-width: 620px;
  margin: 64px auto 0;
  font-size: 12px;
}
.footer-nav a,
.footer-affiliates a { text-decoration: none; }
.back-to-top {
  position: absolute;
  right: max(24px, calc((100% - 1262.8px) / 2));
  bottom: 40px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: white;
  color: var(--color-action);
  text-decoration: none;
  transition: background-color var(--motion-hover);
}

/* Recommended breakpoints; original media queries were not supplied. */
@media (max-width: 75rem) {
  .site-header { min-height: 79.4px; padding: 26.4px 24px 13.2px; }
  .header-brand { width: 183px; }
  .header-nav { display: none; }
  .menu-toggle { display: inline-flex; }
}

@media (max-width: 48rem) {
  .pill-link { min-width: 176px; }
  .project-heading { align-items: flex-end; }
  .project-controls { gap: 12px; }
  .project-control { width: 48px; height: 48px; }
  .project-track { gap: 24px; padding-top: 40px; }
  .project-card { flex-basis: 100%; }
  .project-card:nth-child(odd) { margin-block-start: 0; }
  .support-grid { grid-template-columns: minmax(0, 1fr); gap: 33px; }
  .support-copy .copy { margin-block-start: 16px; }
  .support-orbit { width: 180px; justify-self: center; }
  .support-orbit .external-arrow { bottom: 24px; }
  .site-footer { padding-block: 80px 180px; }
  .footer-brand { width: 198px; margin-bottom: 40px; }
  .footer-groups {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 20px;
    margin-inline: 35px 24px;
  }
  .footer-nav { flex-direction: column; gap: 22px; font-size: 15px; }
  .footer-affiliates {
    flex-direction: column;
    gap: 13px;
    margin: 0;
    font-size: 10px;
  }
  .back-to-top { right: 24px; bottom: 15px; }
}

/* Recommended focus and optional action-contrast adaptations. */
:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
.contrast-safe { --color-action: #007c2b; }

@media (prefers-reduced-motion: reduce) {
  .header-nav a,
  .pill-link,
  .support-orbit,
  .back-to-top { transition: none; }
  .hero-decor * { animation: none !important; }
  .project-track { scroll-behavior: auto; }
}
```

Assign individual leaf position variables through responsive classes. Use distinct mobile positions and sizes; copying desktop percentages alone will not reproduce the captured composition. Decorative images should have empty alternatives, and their container should be hidden from assistive technology.

For a functioning wave placeholder, the following original SVG geometry can precede a `.green-band`. It is a smooth approximation for scaffolding, not the source artwork. Replace it with an irregular authorized or newly drawn contour for closer visual fidelity.

```html
<svg class='section-wave' viewBox='0 0 1440 140'
     preserveAspectRatio='none' aria-hidden='true' focusable='false'>
  <path d='M0 110 C260 0 520 0 750 65 C1020 145 1240 150 1440 30 L1440 140 L0 140 Z' />
</svg>
```

The optional `.contrast-safe` class changes small action colors only. It does not by itself resolve every white-on-green text combination. Larger mobile footer type, complete drawer behavior, project-control handlers, focus testing, and responsive asset placement remain separate implementation work.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. These do not imply that the inspected site uses Tailwind. Define the custom properties above first.

```css
@theme inline {
  --color-gakuen-green: var(--color-green);
  --color-gakuen-leaf: var(--color-leaf);
  --color-gakuen-lime: var(--color-lime);
  --color-gakuen-seed: var(--color-seed);
  --color-gakuen-peach: var(--color-peach);
  --color-gakuen-mist: var(--color-mist);
  --font-sans: 'Noto Sans JP', sans-serif;
  --text-body: var(--type-body);
  --text-intro: var(--type-intro);
  --text-editorial: var(--type-editorial);
  --text-section: var(--type-section);
  --text-feature: var(--type-feature);
  --radius-photo: var(--radius-image);
  --radius-capsule: 100px;
  --spacing-page-gutter: 24px;
}
```

## Sources & Evidence

- [Current anniversary homepage](https://next100.shijonawate-gakuen.ac.jp/): original and final URL are identical; the supplied browser observation reports HTTP 200 and the page title `学校法人四條畷学園創立100周年記念サイト`.
- **Capture session:** evidence retrieved at `2026-09-22T15:28:28.310Z`, corresponding to September 23, 2026 at 00:28:28 JST.
- **Desktop evidence:** 1440 × 1000 CSS pixels; recorded document height 8294px. Supplied screenshots show the opening, the editorial-to-project transition, and the support/footer area.
- **Mobile evidence:** 390 × 844 CSS pixels; recorded document height 7162px. Supplied screenshots show the opening and the support/footer ending.
- **Rendered evidence:** page text, destination links, element bounds, computed typography, selected background and text colors, corner radii, transitions, and CSS custom properties at both viewports. This is the authority for values labeled measured or source-derived.
- **Observed navigation targets:** the homepage evidence includes internal routes for [special content](https://next100.shijonawate-gakuen.ac.jp/special/), [messages](https://next100.shijonawate-gakuen.ac.jp/message/), [history](https://next100.shijonawate-gakuen.ac.jp/history/), [projects](https://next100.shijonawate-gakuen.ac.jp/project/), and [news](https://next100.shijonawate-gakuen.ac.jp/news/), plus an external [support destination](https://www.shijonawate-gakuen.ac.jp/support/). These destinations were identified from links, not independently inspected.
- **Readiness limits:** the supplied process observed the opening for at least five seconds, waited for sampled stability and visible image decoding within bounded time limits, and traversed intermediate scroll positions. These checks do not establish complete delayed content or every motion state.
- **Interaction limits:** no supplied record demonstrates opening the mobile menu, expanding the project submenu, activating carousel controls, hovering, keyboard focus traversal, or clicking back to top. Service workers and SharedWorkers were disabled during the capture session.
- **Analysis limits:** this reference uses only the supplied current-page captures and rendered evidence. No additional browsing, command execution, asset inspection, or file access was performed. No source stylesheet dump, image-file URLs, complete animation timeline, or original breakpoint definitions were supplied.

The reference documents the current homepage evidenced in this capture session. Its CSS and prompts are practical adaptations, with estimates and recommendations explicitly separated from measured observations.