# Kobe College / Blooming — Style Reference

> A narrow university storybook surrounded by pale flowers, with four graduates represented as individual blooms.

**Website:** [Kobe College — Blooming](https://p.kobe-c.ac.jp/blooming/index.php)
**Original URL:** https://p.kobe-c.ac.jp/blooming/index.php
**Final URL:** https://p.kobe-c.ac.jp/blooming/index.php
**Response:** HTTP 200; no redirect recorded.
**Theme:** a light botanical presentation with navy institutional controls and four graduate accent colors. No theme selector is evidenced.
**Inspected:** October 2, 2026, at 01:53 JST; the supplied browser retrieval timestamp is October 1, 2026, 16:53:07.162 UTC.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** supplied current-page captures and rendered DOM evidence for the opening state, mobile hero, graduate selector, Rina's undergraduate narrative, course-by-year sequence, graduation outcome, closing message, navigation, admissions banners, and footer. The middle narrative sections have DOM measurements but no attached visual captures. The three other graduate destinations were not inspected.

This psychology department feature turns personal development into a botanical narrative. Flowers, seeds, stems, and translucent portrait silhouettes connect the introductory promise with four graduate pathways. The current campaign headline reads “あなたの 心のなかに 芽生えている種を 咲かせる場所。” Navy crests and institutional wordmarks anchor the otherwise soft, colorful composition.

The essential layout is unusually narrow on desktop: a 560px central column sits between broad floral margins. On the inspected phone, that column occupies the full 390px viewport. The page combines expressive introductory lettering, spacious Japanese reading text, a long chronological story, and repeated links to related graduates. Its lower navigation resembles a sheet of faint graph paper with scalloped edges. This is a university editorial feature with recruitment links, and its long narrative deserves as much attention as its first screen.

## How to Read This Reference

- **Measured** means supplied computed styles or rendered element rectangles. Numbers are rounded where subpixel precision would not improve implementation.
- **Derived** means a calculation from those measurements, such as a centered margin or a gap between cards.
- **Visual estimate** means an interpretation of the current-page screenshots. Estimated hex colors, grid spacing, shadows, and decorative dimensions are not extracted source tokens.
- **Recommended** means an implementation choice for a new build. Proposed breakpoints, accessibility behavior, hover effects, and CSS approximations are labeled accordingly.
- All custom-property names in this document are reusable aliases. The supplied custom-property inventories were empty.
- Computed font-family declarations identify the requested stacks; they do not independently verify which font file rendered every glyph.
- DOM presence does not establish visibility. The evidence includes navigation content whose rectangles exist while its panel is not visible in the screenshots.
- Screenshots establish appearance at specific moments. They do not establish an animation sequence, menu interaction, or hover behavior.

## Tokens — Colors

### Default Palette

These values are directly converted from supplied computed RGB values.

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| White paper | `#FFFFFF` | `--color-paper` | Measured graduation-section background and reversed CTA text; also the visible central canvas |
| Near-black text | `#050505` | `--color-ink` | Measured body text and most narrative copy |
| College navy | `#0D315A` | `--color-navy` | Measured department-link fill and introductory label text; visually corresponds to the menu seal and institutional marks |
| Rina green | `#50A512` | `--color-rina` | Measured Rina card arrow fill and graduate-outcome label |
| Chiho purple | `#B36BD9` | `--color-chiho` | Measured Chiho card arrow fill |
| Yuki blue | `#269ED6` | `--color-yuki` | Measured Yuki card arrow fill |
| Hina gold | `#E6A800` | `--color-hina` | Measured Hina card arrow fill |
| Rina pale green | `#DBF4B5` | `--color-rina-paper` | Measured background of the inspected course-by-year section |
| Copyright gray | `#656565` | `--color-muted` | Measured copyright text |

The body background itself is reported as transparent. The white appearance therefore should not be misreported as a measured white declaration on `body`.

### Graduate Accent Mapping

| Graduate | Observed interest label | Color | Visible emblem |
| --- | --- | --- | --- |
| リナ | “社会福祉に関心” | Green | Upright cup-like bloom containing a portrait silhouette |
| チホ | “広く学びたい” | Purple | Broad folded petals surrounding a portrait silhouette |
| ユキ | “人の心を支えたい” | Blue | A many-petaled, irregular circular bloom |
| ヒナ | “人間関係に興味” | Gold | Rounded daisy-like petals around a portrait silhouette |

These colors identify people throughout the visible navigation and measured card controls. They are not interchangeable decorative accents. Only Rina's full story and pale section background are evidenced here; the background systems of the other graduate pages are unverified.

### Decorative Colors — Visual Estimates

| Appearance | Approximation | Suggested use |
| --- | --- | --- |
| Pale lavender | `#ECE4FF` | Purple portrait tab and small arrow-disc backgrounds |
| Pale sky blue | `#D2F1FB` | Blue portrait tab and light floral shapes |
| Pale butter yellow | `#FFF3C7` | Gold portrait tab and small decorative flowers |
| Fine grid gray | `#F2F2F2` | Graph-paper lines |
| Warm brown | `#79523F` | Admissions-banner frames and lettering |

These are starting values for an adaptation, not sampled colors. Floral artwork contains many translucent variations; a single flat color cannot reproduce its texture.

### Theme Behavior

The supplied interface consistently uses a light background. The opening desktop state and the desktop footer show very pale surrounding flowers, while the mobile hero has stronger floral color along its edges. Whether this comes from separate assets, opacity, layering, or a combination is not established by the supplied styles.

Keep institutional actions navy and graduate identity accents colorful. Pale botanical colors belong mainly to illustration and supporting surfaces; they should not become the default color of small reading text.

## Tokens — Typography

### Body and Controls

**Observed stack:** `toppan-bunkyu-gothic-pr6n, serif`.

The body requests this stack at `16px`, weight `400`, line height `28.8px`, and letter spacing `0.96px`. It supplies the narrative voice, descriptions, navigation, and measured CTA labels. The generous tracking and line spacing create a calm pace despite substantial text volume.

The explicit fallback is `serif`. Do not replace this declaration with an invented font name or assume that a conventional system sans-serif was measured.

### Editorial Headings

**Observed stack:** `dnp-shuei-mincho-pr6n, sans-serif`.

Selected introduction, section, year, and closing-message text requests this stack, commonly at weight `500`. It adds a literary tone to the course narrative. The observed fallback is `sans-serif`, even though the requested face is a Mincho design.

The distinction between these two source stacks matters: body copy and editorial headings do not all share one font treatment.

### Hero Lettering, Wordmarks, and Script Details

The mobile hero contains expressive Japanese lettering with colored emphasis on “心”, “種”, and “咲かせる”. Its corresponding sampled wrappers have empty text content. The institutional marks and several other graphic slots also have empty text in the supplied element inventory.

Treat the hero and wordmark as asset-led compositions unless actual child markup proves otherwise. A wrapper's computed `16px` font size does not measure the headline artwork. The hero's precise lettering font cannot be identified from this evidence.

The footer navigation includes thin handwritten Roman-letter flourishes behind the graduate names. The “Open Campus” banner uses calligraphic lettering. Neither detail has a verified font family, so retain approved artwork or use a clearly labeled approximation.

### Type Scale

Values below are measured unless noted otherwise. Desktop and mobile refer to the two inspected viewports.

| Role | Desktop size / line height | Mobile size / line height | Weight | Tracking or qualification |
| --- | --- | --- | --- | --- |
| Root element | `10px / normal` | `10px / normal` | 400 | Source root size, not a recommended global reset |
| Default body | `16px / 28.8px` | `16px / 28.8px` | 400 | `0.96px` |
| Hero supporting sentence | `22px / 39.6px` | `16px / 28.8px` | 600 | Two centered lines |
| Hero introductory paragraph | `18px / 36px` | `14px / 28px` | 400 | Three lines in both measured layouts |
| Department CTA inner label | `14px / 21px` | `14px / 21px` | 700 | Parent link retains the default body declaration |
| Graduate introduction, first large line | `40px / 72px` | `40px / 72px` | 500 | Editorial stack |
| Graduate introduction, second large line | `35px / 63px` | `35px / 63px` | 500 | Editorial stack |
| Card description | `16px / 28.8px` | `15px / 27px` | 400 | Text block reflows across a wider mobile card |
| Card action label | `16px / 24px` | `16px / 24px` | 700 | “大学生活をのぞく” |
| Main section heading | `35px / 52.5px` | `35px / 52.5px` | 500 | Editorial stack |
| Year and high-school headings | `24px / 43.2px` | `24px / 43.2px` | 500 | `2.4px` tracking |
| Long story paragraphs | `16px / 40px` | `15px / 37.5px` | 400 | Line-height ratio `2.5` |
| Graduation outcome lines | `24px / 31.2px` | `18px / 23.4px` | 400 | White foreground; parent treatment not fully shown |
| Graduation explanation | `17px / 30.6px` | `15px / 27px` | 400 | Centered section with inset prose |
| Opening closing-message passage | `22px / 44px` | `16px / 32px` | 500 | Editorial stack |
| Later closing-message passage | `22px / 44px` | `18px / 36px` | 500 | Editorial stack |
| Copyright | `10px / 18px` | `10px / 18px` | 400 | `0.96px` tracking; gray |

The introduction and year-heading sizes remain unchanged on the inspected phone. Responsive adaptation is selective, rather than a uniform reduction of every type size.

## Tokens — Spacing & Shapes

**Layout character:** a narrow reading strip, broad desktop margins, spacious narrative leading, and concentrated decorative detail around otherwise simple controls.

The evidence supports recurring pixel dimensions, not a single verified mathematical spacing system. Use descriptive tokens for those dimensions instead of claiming an underlying 4px or 8px source grid.

### Spacing Scale

| Use | Observed or derived value | Status |
| --- | --- | --- |
| Main content inset | `25px` on either side | Measured from 560 → 510px and 390 → 340px containers |
| Desktop narrative inset | `75px` on either side | Derived from a 410px region inside 560px |
| Mobile narrative inset | `45px` on either side | Derived from a 300px region inside 390px |
| Desktop footer-navigation inset | `60px` on either side | Derived from 560 → 440px |
| Graduate-card gap | About `20.4px` horizontally; `20px` vertically | Derived from rectangles |
| Footer row vertical padding | `40px` desktop; `24px` mobile | Measured |
| Hero paragraph to department CTA | `40px` | Derived in both viewports |
| Course-section padding | `130px` top; `70px` bottom | Measured in both viewports |
| Graduation-section padding | `240px` top; `210px` bottom | Measured in both viewports |
| Footer banners to identity rule | About `100px` | Visual estimate consistent across bottom captures |
| Copyright to document end | `80px` | Derived from its rectangle and document height |

Large section padding is part of the narrative rhythm. Avoid applying the graduation section's 240px top inset to every section indiscriminately.

### Border Radius and Decorative Edges

| Element | Value or appearance | Evidence |
| --- | --- | --- |
| Graduate overview links | `20px` radius | Computed style |
| Department CTA | `500px` radius on a 65px-high box | Computed style; produces fully rounded ends |
| Graduate card arrow | `30 × 30px`, `50%` radius | Computed style |
| Footer navigation row | `0` radius | Computed style; division comes from fine rules |
| Admissions banner | Rectangular fine frame | Screenshot; ornamental corner marks and a folded lower-right corner |
| Menu button | Scalloped seal | Screenshot; not explained by the button's computed `0` border radius |
| Reading-paper edge | Repeating shallow scallops | Screenshot; exact asset or masking technique unavailable |

The menu's silhouette is a decorative layer, not a normal rounded rectangle. Likewise, the paper edges should be treated as an edge treatment rather than a large radius on the whole page.

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 |
| --- | --- | --- |
| Document height | About `12,762px` | About `13,619px` |
| Main reading column | `560px`, beginning at x = 440 | `390px`, beginning at x = 0 |
| Main inset region | `510px` | `340px` |
| Narrative region | `410px` | `300px` |
| Menu control | `100 × 100px`; top 20px, right 30px | `60 × 60px`; top 10px, right 10px |
| Hero wordmark wrapper | `245 × 35px`; y = 40 | `165 × 23.56px`; y = 50 |
| Hero headline wrapper | `560 × 249px`, including 20px top padding | `270 × 181.84px`, including 20px top padding |
| Main department CTA | `350 × 65px` | `350 × 65px`; x = 20 |
| Footer department CTA | `350 × 65px` | `340 × 65px`, constrained by its parent |
| Overview card | About `244.8 × 475.7px` | `340 × 451px` |
| Footer graduate row | `440 × 166.39px` | `340 × 116.39px` |
| Footer admissions banner | About `214.72 × 120.83px` | About `165.91 × 93.36px` |
| Footer wordmark wrapper | `260 × 37.14px` | `260 × 37.14px` |

The desktop headline wrapper is full-column width; its internal artwork width is not supplied. Do not interpret the 560px wrapper as a measured 560px-wide headline image.

## Components

### Botanical Surround and Reading Column

**Role:** establish the growth metaphor while maintaining a stable reading measure.

The desktop footer places a narrow white paper strip between expansive botanical fields. Flowers and stems extend beyond the viewport edges, so the surround reads as a continuous environment. The paper strip carries a very faint square grid and scalloped vertical edges.

The mobile hero uses a clear white center with blossoms entering from the left and right. Its text remains centered and mostly unobstructed. The mobile footer fills the width with graph paper, retaining small scalloped edge details instead of full desktop-style floral margins.

**Visual estimates:** graph-paper cells are approximately 15px square; edge scallops appear roughly 6–10px deep. Their exact spacing and construction are not supplied. For a new implementation, keep these textures subordinate to the text and use decorative layers that do not intercept pointer events.

### Captured Opening State

**Role:** introduce the institution and four graduate identities.

Both supplied desktop opening captures show the same splash-like composition: a small central college mark surrounded by four larger flower-and-portrait emblems. Green sits above, purple to the left, blue to the right, and gold below. The full-screen botanical pattern is washed back behind them.

The large emblems appear roughly 145–160px across, estimated from the screenshots. Their semi-transparent petal shapes and internal portrait silhouettes matter more than exact geometric symmetry.

The settled mobile hero and desktop footer establish that this is not the page's entire content. However, the evidence does not establish the opening state's exit trigger, duration, animation sequence, or whether it is a loading overlay. Do not invent a percentage indicator, automatic timeout, or looping flower animation.

### Institutional Wordmark

**Role:** give the illustrated feature a clear university identity.

The mark combines a navy crest with the Japanese college name. In the mobile hero it is relatively small, centered near the top, with considerable clearance before the introductory lettering. In the footer it becomes wider and more prominent.

Use the approved wordmark as a proportional asset. The measured hero wrapper changes from 245px wide on desktop to 165px on mobile, while the footer wrapper remains 260px wide. The wordmark is not ordinary text to be recreated by typing the college name beside an approximate icon.

### Menu Seal

**Role:** persistent access to campaign navigation.

A navy scalloped seal sits in the upper-right corner. Its center contains fine horizontal white lines and the small label “MENU”. It remains in the same corner in the hero and footer captures, consistent with fixed positioning.

The measured control shrinks from 100px square to 60px square on mobile. The visible outline comes from artwork or a decorative layer; the sampled button itself has a transparent background and zero border radius.

The rendered header includes four graduate links, a department link, and admissions links. Those entries were not shown in an opened menu capture. Panel appearance, opening direction, focus handling, scroll locking, and close behavior remain unverified.

### Hero Message

**Role:** establish the emotional proposition before introducing individual graduates.

The visible mobile stack is:

1. College wordmark.
2. Small centered “あなたの” lettering with a short dotted underline.
3. Three larger lines forming the campaign message.
4. Two-line supporting sentence, “強い根が、茎が、空が、花を美しく育てる。”
5. A small row of four flower emblems.
6. A three-line department introduction.
7. A navy department link.
8. The small “SCROLL” cue near the lower edge of the capture.

The colored words are selective: gold for the heart, green for the seed, and purple for blooming. Most of the headline stays black. The graphic headline block is approximately 270px wide on the inspected phone, leaving enough space for the surrounding flowers.

The flower row is a decorative separator. There is no evidence that these small marks are carousel pagination or interactive step controls.

### Department Link

**Role:** return readers to the psychology department website.

The repeated label is “心理学部 心理学科HP”, linking to [https://p.kobe-c.ac.jp/](https://p.kobe-c.ac.jp/).

Anatomy:

- Navy pill, usually 350px wide and 65px high.
- White circular crest medallion near the left end; approximately 50px in diameter by visual estimate.
- White inner label, measured at 14px, weight 700, with a 21px line height.
- Small external-link-style symbol near the right edge.
- Measured padding of `16px 40px 16px 85px`.
- A restrained soft shadow visible in the mobile capture; exact shadow parameters were not supplied.

The mobile footer instance contracts to its 340px parent width. Preserve that parent-sensitive behavior. The external-style icon does not prove that the link opens a new tab.

### Graduate Overview

**Role:** offer four recognizable entry points into different educational interests.

The introduction combines the label “将来の夢と職業を咲かせた” with two larger editorial lines, “4名の卒業生を” and “ご紹介します”. It leads into four tall linked cards.

The measured desktop arrangement is two columns inside a 510px region. Each card is about 244.8px wide, with a 20px radius and approximately 20px gaps. On mobile, cards form one column at 340px wide with the same 20px vertical gap.

The DOM establishes this internal order:

1. An upper graphic/content area.
2. A 170px-wide name-label block.
3. A short description of the graduate's interests.
4. The action “大学生活をのぞく”.
5. A 30px circular arrow using the graduate's saturated accent color.

The name block begins about 211–218px below the first card's top in the measured layouts. The description changes from approximately three desktop lines to two mobile lines because the single mobile card is wider than a desktop card.

The attached captures do not show this region. The card's media, complete fill treatment, and exact label artwork therefore cannot be described visually. Do not infer student photography from an empty media slot or from the word “graduate”.

### Rina's Story Introduction

**Role:** connect an initial interest in social welfare with a concrete outcome.

The inspected page presents Rina's story. It first identifies the graduate and the outcome “精神保健福祉士の資格取得、市の福祉職員として勤務”, followed by “私の高校時代” and a reflective paragraph.

The introductory section measures 560px wide on desktop and 390px on mobile, with `60px 0 85px` padding. Its narrative text narrows to 410px or 300px respectively. The high-school heading uses the editorial stack at 24px with 2.4px tracking.

The story is not an accordion in the supplied evidence: its text occupies an extended document sequence. No collapse, expansion, or progressive disclosure behavior was exercised.

### Course-by-Year Narrative

**Role:** show how interests develop through actual study and practice.

The section “入学後 選んだ科目” uses the measured pale green `#DBF4B5` across the central column. It contains four year headings, course titles, reflections, and intervening graphic slots. The visible text includes subjects such as “現代の精神保健の課題と支援”, “精神保健福祉制度論”, and social-work practice courses.

Use this hierarchy:

- Section heading: 35px editorial text.
- Year heading: 24px editorial text with expanded tracking.
- Course title: a distinct label above its accompanying reflection; exact title styling was not included in the sampled styles.
- Reflection: 16px/40px on desktop or 15px/37.5px on mobile.
- Graphic break: preserve space for verified artwork without assuming its contents.

This is the largest measured section: approximately 5153px high on desktop and 5751px on mobile. Its extensive leading and narrow paragraph measure create a deliberate reading pace. Do not compress it into a dense dashboard timeline.

### Graduation Outcome and Closing Message

**Role:** resolve the individual narrative and return to the department's broader promise.

The graduation section returns to measured white. It has large top and bottom spacing, a 35px editorial heading, two outcome lines, and supporting prose. The outcome lines are measured as white text, but their complete backing graphic or parent surface is not included in the screenshots. A reproduction needs the relevant asset or verified container styling before that foreground color can be used safely.

The closing message combines editorial passages with a Gothic paragraph about understanding human behavior and thinking scientifically. A department CTA follows. The changing sizes are intentional: the first editorial passage reduces to 16px on mobile, while a later passage uses 18px.

### Desktop Graduate Tabs

**Role:** keep the four graduate destinations available beside the long story.

The desktop footer screenshot shows four vertically stacked pastel tabs against the right viewport edge. Each carries a small handwritten number and its flower portrait. The visible tabs are approximately 70px square with about 10px between them. They appear near the viewport's vertical center.

The DOM's associated text-link rectangles begin just beyond the desktop viewport, while the emblem tabs are visible. This indicates a distinction between the visible symbol and the text-bearing link region; it does not establish a hover-to-expand interaction.

No equivalent rail appears in the supplied mobile captures. Repeated footer navigation provides the visible mobile route to the same graduate destinations.

### Footer Graduate Navigation

**Role:** let readers continue to another story after finishing the current one.

Each row combines a small handwritten number, a colored portrait flower, a graduate name with “さん”, an interest label, and a circular chevron at the right. Thin gray rules separate the rows. Faint Roman-letter name flourishes sit behind the name area in the desktop capture.

The rows use a 440px desktop measure and a 340px mobile measure. Desktop rows have `40px` top and bottom padding; mobile rows use `24px`. Both retain a measured 130px left text inset, reserving space for the number and portrait.

The destinations are explicit links:

| Graduate | Supplied destination |
| --- | --- |
| リナ | `https://p.kobe-c.ac.jp/blooming/index.php#rina` |
| チホ | `https://p.kobe-c.ac.jp/blooming/index02.php#chiho` |
| ユキ | `https://p.kobe-c.ac.jp/blooming/index03.php#yuki` |
| ヒナ | `https://p.kobe-c.ac.jp/blooming/index04.php#hina` |

Three links lead to different PHP pages with fragments. Do not implement all four as same-document tabs based solely on their visual similarity.

### Admissions Banners

**Role:** provide secondary routes to events and admissions information.

Two rectangular banners stay side by side in both inspected layouts. They use warm-brown fine frames, ornamental corner details, and small colored folds at the lower-right corners. The first reads “Open Campus”; the second reads “入試情報サイト”, with smaller supporting text.

Their measured proportions are close to 16:9. The footer gap is about 10.56px on desktop and 8.19px on mobile, corresponding to roughly 2.4% of the available row width.

- “Open Campus” links to [https://kobe-college.jp/events/open/](https://kobe-college.jp/events/open/).
- “入試情報サイト” links to [https://kobe-college.jp/](https://kobe-college.jp/).

Their anchor text is empty in the supplied link inventory, while the labels are visible in the screenshots. This supports an artwork-based presentation, but does not establish whether accessible image alternatives are present.

### Footer Identity

**Role:** end the story with a quiet institutional signature.

After the banners, leave approximately 100px before a fine navy rule. Center the 260px-wide college wordmark beneath it, then the small gray copyright line. The graph-paper surface continues to the bottom.

This ending has substantial breathing room and a clear hierarchy: resource banners, divider, wordmark, copyright. Avoid filling that space with unrelated badges or a large multi-column institutional sitemap.

## Tokens — Motion & Interaction

The supplied measurements include transition declarations, but no interaction trace establishing their visual endpoints.

| Element or behavior | Evidence | What can be stated |
| --- | --- | --- |
| Department links | Computed transition reported as `0.3s` | A 300ms transition is declared; changed properties and hover appearance are unverified |
| Graduate overview cards | Computed transition reported as `0.3s` | A 300ms transition is declared; no measured lift, scale, or color inversion |
| Hero message wrappers | Computed transition reported as `0.6s` | A 600ms transition is declared; reveal trigger and starting state are unknown |
| Selected story and closing-message elements | Computed transition reported as `0.6s` | Some editorial elements share the longer duration |
| Sampled CSS animations | Reported as `none` on sampled elements | Does not exclude animations on images, pseudo-elements, unsampled nodes, or JavaScript-driven layers |
| Opening composition | Two matching desktop captures | Establishes an opening state, not its duration or exit behavior |
| Menu | Visible button and navigation DOM | Open/close behavior was not exercised |
| Graduate links | Actual `href` values | Standard navigation destinations are known; smooth scrolling is not verified |
| Persistent controls | Same corner placement across distant page captures | Consistent with fixed positioning; no scroll-linked motion was measured |

The capture process waited for document load, visible image decoding, finite animations, and sampled layout/text stability within bounded limits. Perpetual animations were paused during readiness checks and resumed afterward. This process does not prove that every delayed effect completed or reveal a reliable animation timeline.

**Recommended adaptation:** use restrained opacity or small-position feedback, with approximately 300ms for controls and up to 600ms for optional editorial reveals. Those effects are recommendations, not reconstructions. Keep content visible by default and disable nonessential motion when reduced motion is requested.

## Surfaces

| Layer | Appearance | Evidence and use |
| --- | --- | --- |
| Botanical surround | Pale flowers, leaves, seeds, and stems on white | Visible in current desktop captures and along mobile hero edges |
| Hero reading field | Clear central white space | Visible mobile composition; lets the graphic message remain legible |
| Notebook surface | White with very faint square grid and scalloped edges | Visible footer captures |
| Rina course section | Solid `#DBF4B5` | Measured central narrative surface |
| Graduation section | Solid `#FFFFFF` | Measured reset after the green section |
| Institutional action | Navy capsule with white crest disc and text | Measured CTA fill; shadow visually observed |
| Graduate marker | Person-specific flower and pastel support color | Visible opening emblems, footer rows, and desktop tabs |
| Resource banner | White field, thin brown ornament, small folded corner | Visible in both footer captures |

There is no evidence for a universal card-elevation system. The CTA and desktop tabs have subtle visible separation, while the editorial structure relies on spacing, paper texture, color fields, and rules.

## Imagery

The observed imagery is botanical and handmade in appearance. Leaves have simple internal veins; petals have irregular edges and slight tonal variations; branches form loose diagonal gestures. Some forms resemble translucent paper cutouts or lightly painted shapes. This is an appearance description, not a claim about the original production medium.

The four portrait emblems combine human silhouettes with different flower outlines. Their repeated color and contour make them useful identifiers even at small sizes. Preserve those differences; replacing every emblem with the same circle would remove part of the navigation system.

The botanical background is cropped at the screen edges and leaves a quiet center for text. On desktop it occupies the otherwise empty margins. In the mobile hero it works as a border. The result depends on composition and empty space as much as on the number of flowers.

Only illustrations, silhouettes, marks, and lettering are visible in the attached current-page captures. The unshown middle sections contain graphic slots, but their subjects and formats cannot be identified from empty text wrappers.

### Observed Asset References

No image `src`, SVG URL, background-image URL, or font-file URL was supplied. The following inventory records observed roles, not invented filenames.

| Asset role | Current-page evidence | Reuse guidance |
| --- | --- | --- |
| Botanical surround | Desktop opening/footer and mobile hero captures | Obtain authorized artwork with a deliberately clear text region |
| Four portrait flowers | Opening composition, footer rows, desktop tabs | Preserve each silhouette, flower contour, and identity color |
| College wordmark | Mobile hero and both footer captures | Preserve aspect ratio and use approved institutional artwork |
| Campaign lettering | Mobile hero; empty corresponding DOM text wrappers | Use the actual asset when available; provide equivalent accessible text |
| Small four-flower separator | Mobile hero | Treat as decoration rather than pagination |
| Navy menu seal | Hero and footer captures | Match the scalloped contour separately from the button hit area |
| Admissions banner artwork | Footer captures and destination links | Retain fine frame details and readable labels |
| Narrative graphic slots | DOM dimensions only | Verify contents before choosing photographs, illustrations, or crops |

CSS can reproduce the column, grid paper, controls, and spacing. It cannot supply the identity carried by the college marks, custom lettering, and flower portraits.

## Layout & Responsive Behavior

### Desktop

At 1440px wide, the measured reading column is 560px, leaving 440px on either side. It occupies about 38.9% of the viewport width. This narrow measure remains consistent across the overview and long story.

The overview uses two cards per row. The footer navigation becomes narrower than the main content, at 440px. Admissions banners remain paired. The upper-right menu and right-edge graduate tabs sit outside the reading column.

The attached desktop opening screenshots show the splash-like state rather than the fully exposed hero. Desktop hero typography and coordinates come from the rendered DOM and should not be presented as visually verified hero appearance.

### Mobile

At 390px wide, the reading column fills the viewport. The standard inset region is 340px wide, while long prose narrows further to 300px. The graduate overview changes to a single column, but the two admissions banners remain side by side.

The menu reduces to 60px square. The hero wordmark reduces to 165px wide, yet the footer mark remains 260px. The department CTA retains its 65px height and reaches 350px wide in the hero. At the footer it fits its 340px container.

The desktop graduate rail is absent from the mobile captures. Story navigation is still available through the menu's supplied link inventory and the visible footer rows.

The long narrative uses slightly smaller body type while retaining a 2.5 line-height ratio. Major section and year headings keep their desktop sizes. The total document becomes longer, primarily because cards stack and prose reflows.

### Width Relationships to Preserve

| Region | Desktop relationship | Mobile relationship |
| --- | --- | --- |
| Main strip | 560px centered | Full viewport width |
| General content | Main strip minus 50px | Main strip minus 50px |
| Narrative measure | Main strip minus 150px | Main strip minus 90px |
| Footer navigation | Main strip minus 120px | Main strip minus 50px |
| Overview | Two columns | One column |
| Resource banners | Two columns | Two columns |

Only two viewport widths were inspected. Exact source breakpoints, tablet layouts, landscape behavior, and very small phone behavior remain unknown. A breakpoint near 700px is used in the Quick Start as a recommendation, not an extracted media query.

The sampled desktop `HEADER` has a 1000px rectangle, while the mobile `HEADER` has zero height despite containing navigation geometry. These measurements include navigation structure and should not be copied as a permanent 1000px header or a rule that hides mobile navigation. Build from the visible layout relationships instead.

## Do’s and Don’ts

### Do

- Keep the 560px desktop reading measure and broad floral margins.
- Maintain a clear white center in the mobile hero.
- Preserve the four graduate colors and distinct flower silhouettes across repeated navigation.
- Use `#0D315A` for institutional actions and retain the crest medallion inside the main pill.
- Keep the observed distinction between Gothic body text and editorial Mincho headings.
- Preserve the spacious 2.5 line-height ratio in long reflections.
- Use very faint grid lines and restrained scalloped edges for the notebook surface.
- Keep both admissions banners side by side at the inspected phone width.
- Preserve real page-and-fragment destinations for the graduate links.
- Give the graduation outcome and final institutional signature generous space.
- Treat the opening composition as a captured state whose behavior still needs verification.

### Don’t

- Don’t stretch the narrative to fill a wide desktop viewport.
- Don’t turn the four graduate identities into unrelated accent colors on each section.
- Don’t replace the custom flower portraits with generic circular avatars.
- Don’t make the faint surrounding pattern as visually strong as the reading text.
- Don’t describe the hero artwork using its wrapper's 16px font declaration.
- Don’t invent student photographs or media crops for unshown narrative slots.
- Don’t assume the menu slides in, the tabs expand on hover, or the splash disappears on a timer.
- Don’t collapse the entire reading experience into four feature cards and a CTA.
- Don’t introduce heavy shadows or large rounded panels throughout the story.
- Don’t use white outcome text before verifying or supplying its contrasting backing surface.
- Don’t assume all graduate links are anchors within the current document.
- Don’t copy the source's 10px root size into an existing application without reviewing its effect on other components.

## Recommended Implementation Additions

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

- Give the menu button a descriptive accessible name, an accurate expanded state, and a relationship to its controlled navigation. If the menu is modal, implement focus management and keyboard dismissal.
- Preserve the full campaign message as accessible text when the visible headline is an image. Hide duplicate decorative lettering from assistive technology.
- Mark background flowers and redundant portrait decoration as decorative. Give meaningful linked images appropriate alternatives.
- Use each graduate's name and interest in the accessible link name, so identity does not depend only on color or silhouette.
- Keep the 30px arrow inside a larger link target. Its decorative disc should not define a separate tiny hit area.
- Provide a visible navy focus indicator for links and controls. Ensure focus is not clipped by the seal or scalloped-edge treatment.
- Check text contrast for pale or saturated graduate colors. The source accent values can remain in decoration even when small text needs a darker treatment.
- Respect reduced motion and avoid making story content depend on a reveal script finishing successfully.
- Reserve image dimensions to stabilize the long document and its anchor positions.
- Let the CTA wrap or grow on narrower screens and with enlarged text; the measured 65px height should be a minimum in an accessible adaptation.
- Verify 320px-wide screens, tablet widths, font loading, and zoom separately. Those conditions are outside the supplied inspection.

## Agent Prompt Guide

### Quick Color Reference

- Canvas and graduation section: `#FFFFFF`.
- Main reading text: `#050505`.
- Institutional CTA and visual anchor: `#0D315A`.
- Rina: `#50A512`; measured course-section paper: `#DBF4B5`.
- Chiho: `#B36BD9`.
- Yuki: `#269ED6`.
- Hina: `#E6A800`.
- Copyright: `#656565`.
- Grid gray and banner brown: visual approximations, approximately `#F2F2F2` and `#79523F`.

### Overall Prompt

“Create a botanical university editorial feature inspired by the current Kobe College Blooming page. Use a centered 560px desktop reading strip with broad pale floral margins, becoming full-width on a 390px phone. Build a quiet white hero with centered institutional artwork, expressive Japanese campaign lettering, selected green, purple, and gold word emphasis, four tiny flower marks, and a navy 350 × 65px department link with a white crest medallion. Follow with four graduate entry cards, two columns on desktop and one on mobile, then a long course-by-year story with generous Japanese line spacing. Assign green, purple, blue, and gold consistently to the four graduates. End on faint graph paper with scalloped edges, portrait navigation rows, paired framed admissions banners, and a centered college signature. Use verified assets for the flower portraits and lettering. Keep menu and reveal behavior simple unless additional interaction evidence is available.”

### Example Component Prompts

1. **Hero:** “A white mobile hero with flowers entering from both edges and an unobstructed text center. Center a small college wordmark, an expressive three-line Japanese headline, a two-line supporting sentence, four small flower motifs, and a navy pill link. Keep the menu in a 60px navy scalloped seal at the upper-right.”
2. **Graduate overview:** “Four graduate links with consistent green, purple, blue, and gold identities. Use a 510px desktop region with two approximately 245px cards per row and 20px gaps. On mobile, use one 340px card per row. Include an authorized visual, graduate name, short interest statement, and a 30px circular arrow inside the full-card link.”
3. **Course narrative:** “A narrow pale-green `#DBF4B5` study story with 35px editorial section headings, 24px year headings, and spacious Japanese paragraphs at 16px/40px on desktop or 15px/37.5px on mobile. Keep the prose measure at 410px or 300px respectively. Preserve meaningful visual breaks without inventing unverified photographs.”
4. **Footer navigation:** “A white graph-paper panel with shallow scalloped edges. Stack four rule-separated graduate links, each combining a small handwritten number, a distinct pastel flower portrait, name, interest, and a small tinted chevron disc. Use 440px rows on desktop and 340px rows on mobile.”
5. **Admissions banners:** “Two adjacent near-16:9 white banners with fine warm-brown ornamental frames. Use calligraphic ‘Open Campus’ lettering on the left and ‘入試情報サイト’ on the right. Add a small colored folded corner to each. Keep the pair side by side on a 390px phone.”
6. **Motion specification:** “Use 300ms control transitions and optional 600ms editorial transitions as restrained implementation recommendations. Keep text visible by default, support reduced motion, and do not invent a timed loading sequence or an unverified expanding side rail.”

## Quick Start

### CSS Custom Properties

This CSS is an adaptation of the measured geometry and palette, with explicitly approximate decorative treatments. It uses ordinary pixel values and does not reproduce the source's 10px root. The font stacks are copied from the computed declarations; font delivery and licensing require separate setup.

The background-art variables default to `none`. Set them to authorized botanical assets with an appropriate clear center. The seal polygon, paper scallops, grid, shadow, fallback headline type, and hover effects are recommendations. This stylesheet supplies a visual foundation, not the original artwork, an opening sequence, or menu JavaScript.

```css
:root {
  /* Measured colors */
  --color-paper: #ffffff;
  --color-ink: #050505;
  --color-navy: #0d315a;
  --color-rina: #50a512;
  --color-chiho: #b36bd9;
  --color-yuki: #269ed6;
  --color-hina: #e6a800;
  --color-rina-paper: #dbf4b5;
  --color-muted: #656565;

  /* Visual approximations */
  --color-chiho-paper: #ece4ff;
  --color-yuki-paper: #d2f1fb;
  --color-hina-paper: #fff3c7;
  --color-grid: #f2f2f2;
  --color-banner: #79523f;
  --color-edge: #f7f7f7;

  /* Observed requested font stacks */
  --font-body: toppan-bunkyu-gothic-pr6n, serif;
  --font-editorial: dnp-shuei-mincho-pr6n, sans-serif;
  --tracking-body: 0.96px;
  --tracking-year: 2.4px;

  /* Measured layout dimensions */
  --page-width: 560px;
  --content-inset: 25px;
  --story-inset: 75px;
  --navigation-inset: 60px;
  --card-radius: 20px;
  --cta-radius: 500px;
  --cta-width: 350px;
  --cta-height: 65px;
  --arrow-size: 30px;

  /* Measured durations; easing is an adaptation */
  --motion-control: 300ms ease;
  --motion-editorial: 600ms ease;

  /* Supply authorized artwork separately */
  --botanical-surround: none;
  --hero-border-art: none;
}

* {
  box-sizing: border-box;
}

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

img {
  max-width: 100%;
  height: auto;
}

.botanical-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--botanical-surround);
  background-position: center;
  background-size: cover;
  /* Approximation of the pale desktop surround */
  opacity: 0.25;
}

.bloom-shell {
  position: relative;
  z-index: 1;
  width: min(100%, var(--page-width));
  margin-inline: auto;
}

.content-inset {
  padding-inline: var(--content-inset);
}

.story-measure {
  width: calc(100% - 2 * var(--story-inset));
  margin-inline: auto;
}

.bloom-hero {
  padding-top: 40px;
  text-align: center;
  background-color: var(--color-paper);
  background-image: var(--hero-border-art);
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.hero-brand {
  display: block;
  width: 245px;
  margin-inline: auto;
}

.hero-eyebrow {
  margin: 20px 0 0;
}

/* Live-text fallback; original headline lettering is not measured */
.hero-title {
  max-width: 480px;
  margin: 20px auto 30px;
  font-family: var(--font-editorial);
  font-size: 42px;
  font-weight: 500;
  line-height: 1.55;
}

.hero-title .heart {
  color: var(--color-hina);
}

.hero-title .seed {
  color: var(--color-rina);
}

.hero-title .bloom {
  color: var(--color-chiho);
}

.hero-support {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.8;
}

.flower-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 20px;
  margin-block: 40px;
}

.flower-divider img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.hero-introduction {
  margin: 0;
  font-size: 18px;
  line-height: 2;
}

.department-link {
  position: relative;
  display: flex;
  align-items: center;
  width: var(--cta-width);
  max-width: 100%;
  min-height: var(--cta-height);
  margin: 40px auto 0;
  padding: 16px 40px 16px 85px;
  border-radius: var(--cta-radius);
  color: var(--color-paper);
  background: var(--color-navy);
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  text-decoration: none;
  text-align: left;
  /* Approximation of the visible soft separation */
  box-shadow: 0 2px 8px rgb(13 49 90 / 16%);
  transition: opacity var(--motion-control);
}

.bloom-hero .department-link {
  max-width: calc(100% - 40px);
}

.department-link__medallion {
  position: absolute;
  left: 13px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-paper);
  transform: translateY(-50%);
}

.department-link__medallion img {
  width: 34px;
}

.department-link__external {
  position: absolute;
  right: 27px;
  width: 12px;
  height: 12px;
}

.menu-button {
  position: fixed;
  z-index: 40;
  top: 20px;
  right: 30px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  width: 100px;
  height: 100px;
  padding: 0;
  border: 0;
  color: white;
  background: var(--color-navy);
  font: 12px/1 serif;
  cursor: pointer;
  /* Approximate seal; replace with approved artwork when available */
  clip-path: polygon(
    50% 0%, 60% 4%, 71% 4%, 78% 12%,
    88% 18%, 91% 28%, 98% 39%, 96% 50%,
    98% 61%, 91% 72%, 88% 82%, 78% 88%,
    71% 96%, 60% 96%, 50% 100%, 40% 96%,
    29% 96%, 22% 88%, 12% 82%, 9% 72%,
    2% 61%, 4% 50%, 2% 39%, 9% 28%,
    12% 18%, 22% 12%, 29% 4%, 40% 4%
  );
}

.menu-button__lines {
  width: 38px;
  height: 1px;
  margin-block: 10px;
  background: currentColor;
  box-shadow: 0 -8px currentColor, 0 8px currentColor;
}

/* Keep an inset focus mark visible inside the clipped shape */
.menu-button:focus-visible {
  outline: 2px solid white;
  outline-offset: -12px;
}

.graduate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding-inline: var(--content-inset);
}

.graduate-card {
  min-width: 0;
  border-radius: var(--card-radius);
  color: var(--color-ink);
  text-decoration: none;
  transition: opacity var(--motion-control);
}

/* Media contents and exact cropping require asset verification */
.graduate-card__visual {
  display: block;
  width: 100%;
  height: 218px;
  object-fit: contain;
}

.graduate-card__copy {
  padding-inline: 33px;
  font-size: 16px;
  line-height: 1.8;
}

.graduate-card__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.is-rina {
  --accent: var(--color-rina);
  --tint: var(--color-rina-paper);
}

.is-chiho {
  --accent: var(--color-chiho);
  --tint: var(--color-chiho-paper);
}

.is-yuki {
  --accent: var(--color-yuki);
  --tint: var(--color-yuki-paper);
}

.is-hina {
  --accent: var(--color-hina);
  --tint: var(--color-hina-paper);
}

.chevron {
  display: grid;
  flex: 0 0 var(--arrow-size);
  place-items: center;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-radius: 50%;
  color: var(--accent, var(--color-navy));
  background: var(--tint, var(--color-paper));
}

.chevron::before {
  content: '';
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, 1px);
}

.graduate-card__action .chevron {
  color: white;
  background: var(--accent, var(--color-navy));
}

.course-section {
  padding: 130px 0 70px;
  background: var(--color-rina-paper);
}

.section-heading {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: 35px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

.year-heading {
  font-family: var(--font-editorial);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: var(--tracking-year);
}

.story-copy {
  font-size: 16px;
  line-height: 2.5;
}

.graduation-section {
  padding: 240px 0 210px;
  background: var(--color-paper);
}

.notebook {
  position: relative;
  background-color: var(--color-paper);
  background-image:
    linear-gradient(var(--color-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
  background-size: 15px 15px;
}

/* Recommended approximation of shallow paper-edge scallops */
.notebook::before,
.notebook::after {
  content: '';
  position: absolute;
  inset-block: 0;
  width: 10px;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 0 50%,
      var(--color-edge) 0 7px,
      transparent 7.5px
    ) 0 0 / 10px 30px repeat-y;
}

.notebook::before {
  left: 0;
}

.notebook::after {
  right: 0;
  transform: rotate(180deg);
}

.graduate-navigation {
  margin-inline: var(--navigation-inset);
}

.graduate-row {
  position: relative;
  display: grid;
  grid-template-columns: 115px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 15px;
  min-height: 166px;
  padding: 40px 15px 40px 0;
  border-bottom: 1px solid var(--color-grid);
  color: var(--color-ink);
  text-decoration: none;
}

.graduate-row__number {
  position: absolute;
  top: 25px;
  left: 0;
  color: var(--accent);
}

.graduate-row__portrait {
  width: 64px;
  height: 64px;
  margin-left: 10px;
  object-fit: contain;
}

.graduate-row__name {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
}

.graduate-row__interest {
  display: block;
}

.resource-banners {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4%;
  margin-top: 30px;
}

.resource-banner {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: 12px;
  border: 1px solid var(--color-banner);
  color: var(--color-banner);
  background: var(--color-paper);
  text-decoration: none;
  text-align: center;
}

/* Approximation; original corner ornament requires artwork */
.resource-banner::after {
  content: '';
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 20px;
  height: 20px;
  background: var(--fold-color, #6bd7a0);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.resource-banner:nth-child(2) {
  --fold-color: #9bcdff;
}

.college-footer {
  margin: 100px 25px 0;
  padding: 55px 0 80px;
  border-top: 1px solid var(--color-navy);
  text-align: center;
}

.footer-brand {
  display: block;
  width: 260px;
  margin-inline: auto;
}

.copyright {
  margin: 35px 0 0;
  color: var(--color-muted);
  font-size: 10px;
  line-height: 18px;
}

.graduate-tabs {
  position: fixed;
  z-index: 30;
  top: 50%;
  right: 0;
  display: grid;
  gap: 10px;
  transform: translateY(-50%);
}

.graduate-tabs a {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 18px 0 0 18px;
  background: var(--tint);
}

.graduate-tabs img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.bloom-shell :focus-visible,
.graduate-tabs a:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 4px;
}

/* Recommended feedback, not a verified source hover state */
@media (hover: hover) {
  .department-link:hover,
  .graduate-card:hover {
    opacity: 0.86;
  }
}

/* Recommended breakpoint; only 390px and 1440px were inspected */
@media (max-width: 700px) {
  :root {
    --story-inset: 45px;
    --navigation-inset: 25px;
  }

  .bloom-hero {
    padding-top: 50px;
  }

  .hero-brand {
    width: 165px;
  }

  .hero-eyebrow {
    margin-top: 60px;
  }

  .hero-title {
    max-width: 290px;
    font-size: 34px;
  }

  .hero-support {
    font-size: 16px;
  }

  .hero-introduction {
    font-size: 14px;
  }

  .flower-divider {
    margin-block: 50px;
  }

  .menu-button {
    top: 10px;
    right: 10px;
    width: 60px;
    height: 60px;
    gap: 4px;
    font-size: 10px;
  }

  .menu-button__lines {
    width: 24px;
    margin-block: 6px;
    box-shadow: 0 -5px currentColor, 0 5px currentColor;
  }

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

  .graduate-card__copy,
  .story-copy {
    font-size: 15px;
  }

  .graduate-row {
    min-height: 116px;
    padding-block: 24px;
  }

  .graduate-row__name {
    font-size: 16px;
  }

  .graduate-tabs {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bloom-shell *,
  .bloom-shell *::before,
  .bloom-shell *::after,
  .menu-button,
  .graduate-tabs a {
    animation: none !important;
    transition: none !important;
  }
}
```

**Component assembly:** place the hero, graduate overview, story, graduation outcome, and closing content inside `.bloom-shell`. Apply `.story-measure` to narrative interiors. Put footer rows and the banner pair inside `.graduate-navigation` on a `.notebook` surface. Keep `.college-footer` as a sibling of that navigation so its rule spans the wider inset measure. Assign `.is-rina`, `.is-chiho`, `.is-yuki`, or `.is-hina` to each matching card, row, and tab.

The 218px media slot in this adaptation only approximates the measured upper card region. Verify actual assets before fixing its size or crop. The CSS intentionally leaves all content visible; any menu controller or optional reveal system must be implemented separately.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This is not evidence that the original site uses Tailwind. Define the CSS custom properties above first.

```css
@theme inline {
  --color-bloom-paper: var(--color-paper);
  --color-bloom-ink: var(--color-ink);
  --color-bloom-navy: var(--color-navy);
  --color-bloom-rina: var(--color-rina);
  --color-bloom-chiho: var(--color-chiho);
  --color-bloom-yuki: var(--color-yuki);
  --color-bloom-hina: var(--color-hina);
  --color-bloom-rina-paper: var(--color-rina-paper);
  --color-bloom-muted: var(--color-muted);

  --font-bloom-body: var(--font-body);
  --font-bloom-editorial: var(--font-editorial);

  --text-bloom-caption: 10px;
  --text-bloom-body: 16px;
  --text-bloom-year: 24px;
  --text-bloom-section: 35px;
  --text-bloom-introduction: 40px;

  --spacing-bloom-column: 560px;
  --spacing-bloom-inset: 25px;
  --spacing-bloom-arrow: 30px;
  --spacing-bloom-cta: 65px;

  --radius-bloom-card: 20px;
  --radius-bloom-pill: 500px;
}
```

## Sources & Evidence

- **Inspected original and final page:** [https://p.kobe-c.ac.jp/blooming/index.php](https://p.kobe-c.ac.jp/blooming/index.php). The supplied response is HTTP 200, with identical original and final URLs.
- **Capture timestamp:** October 1, 2026, 16:53:07.162 UTC, equivalent to October 2, 2026, 01:53:07.162 JST.
- **Desktop evidence:** 1440 × 1000 viewport; two matching opening-state captures, a footer capture, and a rendered DOM/computed-style inventory. Document height is approximately 12,762px.
- **Mobile evidence:** 390 × 844 viewport; hero and footer captures plus a rendered DOM/computed-style inventory. Document height is approximately 13,619px.
- **Measured properties:** element rectangles, text, destinations, foreground/background colors, requested font stacks, sizes, weights, line heights, tracking, padding, border radii, and transition summaries.
- **Original-page identity evidence:** the college wordmarks, department references, and “Copyright © Kobe College. All Rights Reserved.” support the Kobe College identity. No production-credit claim is made from the inspected page evidence.
- **Linked destinations:** the department, graduate pages, Open Campus page, and admissions page are recorded from original-page links. Their contents were not independently inspected for this reference.
- **Interaction limits:** no menu-open, hover, keyboard, graduate-link activation, or splash-dismissal trace was supplied. Scroll capture preparation does not establish smooth scrolling, reveal triggers, or animation timing.
- **Visual limits:** the middle story is supported by DOM text and measurements rather than attached screenshots. Asset filenames, font files, source media queries, pseudo-element rules, and full computed shadow values were not supplied.

This reference describes the current supplied page evidence. Estimates and implementation additions are separated from measured properties so the design can be reused without presenting an approximation as an original-site fact.