# Fukuoka Jo Gakuin University / Kansei Media — Style Reference

> A cinematic campus opening followed by a spacious academic prospectus in pale blue, fine Mincho lettering, and restrained teal and rose accents.

**Website:** [Fukuoka Jo Gakuin University — Kansei Media](https://www.fukujo.ac.jp/university/kansei-media/)
**Original URL:** https://www.fukujo.ac.jp/university/kansei-media/
**Final URL:** https://www.fukujo.ac.jp/university/kansei-media/
**Response:** HTTP 200; original and final URLs are identical.
**Theme:** light editorial content, photographic opening, and a teal career section. No theme switch is evidenced.
**Inspected:** September 12, 2026; supplied retrieval timestamp `2026-09-12T12:42:55.991Z`, equivalent to 21:42:55.991 JST.
**Viewports:** desktop `1440 × 1000` and mobile `390 × 844` CSS pixels.
**Scope:** the current department introduction, including the opening, concept text, department information, three learning pillars, nine curriculum entries, career information, university features, and footer. Visual evidence comprises three desktop captures and two mobile captures; additional sections and detail content are documented through supplied DOM and computed-style records.

The page introduces a department currently described as planned for 2028, with the qualification `仮称・設置構想中`. Its visual identity rests on two complementary experiences: a full-height photographic opening with large vertical lettering, and a long, quiet reading sequence with carefully differentiated Japanese typefaces.

The opening distributes information across the frame. Announcement copy sits at the upper left, the phrase `ひらけ、` occupies the upper right, `感性。` anchors the lower left, and a narrow department identity sits near the center. A small `Full Movie` preview occupies the lower right. Subsequent content uses pale blue space, fine rules, square photographs, teal academic labels, and restrained rose accents for university features and the official-site link.

## How to Read This Reference

- **Measured** values come from the supplied element rectangles, computed styles, or CSS custom properties. Coordinates describe the captured state, not universal positioning rules.
- **Estimated** values describe visible screenshot geometry where an element measurement was not supplied. They are rounded and explicitly identified.
- **Calculated** values are arithmetic derived from measured values or declared formulas.
- **Recommended** values and behaviors belong to the reusable implementation guidance. They do not establish how the original was implemented.
- **Source tokens** retain their supplied names. Quick Start tokens use descriptive aliases prefixed with `--k-`.
- The browser reserved a `15px` scrollbar gutter in both inspections: the measured document widths were `1425px` and `375px`. Do not recreate that gutter as a decorative white strip or subtract it manually from a new layout.
- No additional browsing, resource inspection, or interaction testing was performed for this reference.

## Tokens — Colors

### Default Palette

| Name | Value | Source token | Role and evidence |
| --- | --- | --- | --- |
| Pale Blue Paper | `#edf4f6` | `--color-my-background` | Declared background token; matches the visible curriculum, university features, and footer canvas |
| Blue-Black Ink | `#263940` | `--color-my-black` | Computed body and content text color; softer than literal black |
| Academic Teal | `#1483a3` | `--color-my-blue` | Computed curriculum titles and learning keywords; computed career-section background |
| University Rose | `#a44858` | `--color-my-red` | Computed university feature subtitles and official-site CTA background |
| Pale Rule | `#d3e1e5` | `--color-my-border` | Declared border token; consistent with the fine visible separators |
| Secondary Gray | `#767f82` | `--color-my-gray` | Computed explanatory text inside the learning-pillar buttons |
| White | `#ffffff` | `--color-my-white` | Computed pillar-button surfaces and opening text; visible reversed labels |

The body itself reports a transparent background. The pale page appearance is supported by the background token and screenshots; the supplied records do not identify every ancestor or decorative layer applying it.

### Contextual Color Treatments

| Treatment | Evidence | Reuse guidance |
| --- | --- | --- |
| Opening announcement | Computed white | Preserve legibility against the chosen photographic frame |
| Small opening qualifier | White at `0.8` alpha | A secondary annotation; use stronger contrast if required by the image |
| Opening plan disclaimer | White at `0.6` alpha | Visually quiet, but still meaningful information |
| Large opening lettering | Navy, gray, and pale areas visible within the current captures | Preserve supplied artwork when available; masking, blending, and color-change mechanisms are unverified |
| CTA label | Visibly white on rose | The sampled anchor inherits dark ink, so its computed parent color does not describe the visible child label |
| LINE identity | Bright green inside the official badge artwork | Treat as a service-brand asset; its exact green was not supplied as a measured token |

Use teal for academic structure and rose for institutional emphasis. Photography contributes foliage greens, warm masonry, classroom colors, and skin tones without turning them into interface tokens.

## Tokens — Typography

### Japanese Display — Ryumin

- **Source:** `--font-display-ja: a-otf-ryumin-pr6n, serif`.
- **Computed use:** section statements, subsection headings, the large `感性` keyword, and learning-area detail headings.
- **Weight:** typically `500`; the body baseline is `400`.
- **Character:** fine Mincho contrast, generous tracking, and a literary academic tone.

### Japanese Reading — Hiragino Mincho

- **Source:** `--font-display-ja-hiragino-mincho: hiragino-mincho-pron, sans-serif`.
- **Computed use:** opening announcement, concept prose, explanatory introductions, curriculum titles, and university feature subtitles.
- **Weight:** `500` in sampled elements.
- The supplied fallback is `sans-serif`. Preserve that fact when documenting the source; a different fallback would be an implementation choice.

### Japanese Supporting Text — Shuei Gothic Gin

- **Source:** `--font-display-ja-shuei-gothic-gin: dnp-shuei-gothic-gin-std, sans-serif`.
- **Computed use:** curriculum descriptions, university feature descriptions, secondary pillar explanations, and small opening annotations.
- **Weight:** `500`.
- The Gothic paragraphs give dense factual content a distinct reading texture beneath the Mincho headings.

### Latin Contact Text — Minerva Modern

- **Source:** `--font-display-en: minerva-modern, sans-serif`.
- **Verified computed use:** footer email and telephone links.
- **Weight:** `500`; tracking `0.02em`.
- Other English labels appear in the page, but their leaf-level font measurements were not supplied. Do not assign them a size from the inherited `H2` wrapper.

These names are supplied declarations and computed font-family values. Exact font-file delivery and glyph fallback were not independently tested. The Quick Start does not include licensed font files.

### Type Scale

Sizes and line heights below are measured CSS values. Tracking is expressed in em for reuse.

| Role | Desktop size / line height | Mobile size / line height | Tracking | Family |
| --- | --- | --- | --- | --- |
| Base body | `16 / 24px` | `16 / 24px` | Normal | Ryumin |
| Opening announcement | `18 / 29.7px` | `16 / 26.4px` | `0.08em` | Hiragino Mincho |
| Opening qualifier and disclaimer | `10 / 14px` | `10 / 14px` | `0.06em` | Shuei Gothic Gin |
| Opening navigation | `13 / 18.2px` | Not shown | `0.08em` | Hiragino Mincho |
| Concept prose | `18 / 43.2px` | `15 / 34.5px` | `0.08em` | Hiragino Mincho |
| Major section statement | `44 / 66px` | `36 / 54px` | `0.15em` | Ryumin |
| Section introduction | `15 / 31.5px` | `14 / 29.4px` | `0.08em` | Hiragino Mincho |
| Subsection heading | `26 / 42.9px` | `22 / 39.6px` | `0.05em` | Ryumin |
| Core keyword `感性` | `52 / 72.8px` | `40 / 56px` | `0.24em` | Ryumin |
| General explanatory prose | `15 / 27.75px` | `14 / 25.9px` | `0.08em` | Hiragino Mincho |
| Pillar lead and curriculum title | `18 / 29.7px` | `16 / 26.4px` | `0.08em` | Hiragino Mincho |
| Dense supporting description | `14 / 23.1px` | `13 / 21.45px` | `0.08em` | Shuei Gothic Gin |
| Detail-area heading, DOM only | `44 / 61.6px` | `36 / 50.4px` | `0.05em` | Ryumin |
| Footer contact links | `14 / 19.6px` | `11 / 15.4px` | `0.02em` | Minerva Modern |

The mobile subsection heading changes to a `1.8` line-height ratio, while the desktop equivalent uses `1.65`. This helps retain breathing room after the font size decreases.

The opening's giant phrase is not measured by this table. The central `H1` wrapper has an inherited `16px` font size and no extracted text, while the screenshot shows a designed vertical lockup. That inherited size cannot be used to reconstruct the visible identity artwork or slogan.

## Tokens — Spacing & Shapes

**Density:** broad section spacing, compact factual paragraphs, and large photographic areas.
**Baseline:** the source declares `--spacing: .25rem`; with the measured `16px` root this equals `4px`. Component measurements also include values outside a strict four-pixel scale.

### Responsive Grid

| Declaration | Desktop | Mobile |
| --- | --- | --- |
| `--base-width` | `1440` | `390` |
| `--base-grid-number` | `12` | `4` |
| `--base-side-margin` | `80` | `16` |
| `--base-gutter` | `20` | `16` |
| `--space-side` | `calc(100vw * 80 / 1440)` | `calc(100vw * 16 / 390)` |
| `--space-gutter` | `calc(100vw * 20 / 1440)` | `calc(100vw * 16 / 390)` |

The declared column calculation is:

```css
/* Source formula, expressed with readable aliases */
--column-width: calc(
  (100vw - 2 * var(--side) - (var(--columns) - 1) * var(--gutter))
  / var(--columns)
);
```

At the nominal viewport widths, this gives `88.33px` desktop columns and `77.5px` mobile columns. These are formula results, not measured content widths. The actual document rectangles are narrower because of the scrollbar gutter, and individual sections use their own spans and gaps. Use the measured component geometry below when matching the supplied captures.

### Layout Measurements

| Element | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Document | `1425 × 13154.19px` | `375 × 17400.63px` | Measured |
| Opening section | `1425 × 1000px` | `375 × 844px` | Measured |
| Main inner content band | `1050.83px`, starting at `x = 187.08` | `343px`, starting at `x = 16` | Measured across curriculum and university content |
| Academic label column | `301.23px` | Full content width | Measured |
| Academic content column | `729.58px`, starting at `x = 508.31` | Full content width | Measured |
| Curriculum column | `323.61px` | `343px` | Measured |
| Curriculum horizontal gap | `40px` | Single column | Calculated from measured positions |
| University feature column | Approximately `495.41px` | `343px` | Measured |
| University feature gap | `60px` | Single column | Calculated from measured positions |
| Central opening identity | `67 × 315.28px` | `53 × 249.41px` | Measured wrapper |
| Movie preview image | `216 × 120px` | Approximately `171 × 95px` | Desktop measured; mobile image height calculated from link height minus padding |
| Official-site CTA | `288.75 × 63.75px` | `273.38 × 57.89px` | Measured |

### Spacing Scale

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Opening announcement inset | `36px` left, `32px` top | `16px` left, `26px` top | Measured |
| Pillar separation | `20px` | `20px` | Calculated from button rectangles |
| Pillar vertical padding | `32px` on button | Internal content begins `32px` below top | Measured |
| Pillar horizontal content inset | Label `32px`; middle column `20px` | `20px` | Measured or calculated from child rectangles |
| Curriculum heading to introduction | `24px` | `24px` | Calculated |
| Curriculum title to description | `16px` | `16px` | Calculated |
| University title to subtitle | `8px` | `6px` | Calculated |
| Final feature description to CTA | Approximately `120px` | `100px` | Calculated |
| Department section top padding | `200px` | `200px` | Computed |
| University section top padding | `171px` | `120px` | Computed |
| Footer padding | `160px 80px 20px` | `120px 16px 80px` | Computed |
| Logo block to contact label | `60px` | `60px` | Calculated |
| Contact links to footer LINE badge | `50px` | `36px` | Calculated |

### Border Radius

| Element | Geometry | Evidence |
| --- | --- | --- |
| Pillar buttons | `0` | Computed |
| Official-site CTA | `0` | Computed |
| Curriculum photographs | Square corners | Visible |
| Footer LINE link | `6px` | Computed |
| Edge LINE link | `6px 0 0 0` | Computed |
| University number markers | Tall outlined capsules | Visible; about `32 × 74px` on desktop, estimated |
| Academic note label | Teal pill | Visible; exact radius unmeasured |
| Main dividers | Fine solid or dotted rules | Visible; approximately `1px` |

There is no visible general shadow system. Separate content through spacing, typography, flat fills, image edges, and thin rules.

## Components

### Cinematic Opening

**Role:** establishes the department's emotional character before detailed information begins.

The opening fills the inspected viewport height. Its background shows warm campus architecture and trees on desktop, and a student using a camera beneath sunlit foliage on mobile. These captures establish photographic content and different compositions. They do not establish whether the background is a video, an image sequence, or separately selected responsive media.

The composition has five distinct anchors:

1. A two-line announcement at the upper left, followed by the small planning qualifier.
2. Large vertical `ひらけ、` lettering at the upper right.
3. Large vertical `感性。` lettering at the lower left.
4. A narrow central department identity, including the white strip behind the department name.
5. A small movie preview at the lower right.

On desktop, the central identity is centered at approximately `(712.5, 500)`. On mobile its center is approximately `(187.5, 402)`, placing it `20px` above the viewport's vertical midpoint. Preserve that optical adjustment when adapting the composition.

The large letterforms have fine strokes and varied visible tones. Their estimated overall widths are around `150–190px` on desktop and `80–105px` on mobile, depending on the phrase and punctuation. These are artwork-envelope estimates, not font-size measurements.

### Opening Navigation and Planning Notice

**Role:** provides section access and communicates the provisional nature of the announcement.

Desktop navigation is a small, centered row near the bottom of the image. Its labels are `コンセプト`, `学科について`, `資格・進路`, and `大学について`, with fine underlines and slash separators visible in the capture. The links point to `#concept`, `#department`, `#qualification-career`, and `#university` on the same page.

The row is absent from the mobile screenshot and mobile visible-link inventory. No replacement menu is evidenced. The planning notice remains at the bottom, using `10px` Gothic text, and is centered across the mobile opening.

Anchor destinations are verified from the DOM. Smooth scrolling, active-section highlighting, and sticky navigation behavior were not tested.

### Full Movie Preview

**Role:** offers a small route into the department film without dominating the opening.

The rectangular preview shows a group near a bright window, with `Full Movie` and a small circular arrow/play-style mark at the lower right. It uses a landscape ratio close to `9:5`, square corners, and no surrounding card shell.

The desktop link measures `216 × 120px`, with `16px` clearance from the visible right and bottom edges. On mobile, the visible image is approximately `171 × 95px`, positioned at `x = 188`, `y = 709`. The link's total measured height is `119px`, including `24px` bottom padding.

Its observed destination is [the department film on YouTube](https://youtu.be/-93wzMrKTSg?si=yZhJ2zjblS6sk2eE). The link was not activated; embedded playback, modal presentation, new-tab behavior, and audio settings remain unverified.

### Concept Prose

**Role:** introduces the relationship between perception, expression, and society.

The text forms five short paragraph groups. Desktop paragraphs occupy a right-side column at approximately `x = 936.66`, width `408.34px`, with white `18px` Mincho text and a very open `43.2px` line height. Paragraph gaps calculate to approximately `36px`.

Mobile prose moves into a `343px` column with `16px` side insets. It uses `15px` text with `34.5px` line height, retains the paragraph gaps, and adds responsive line breaks in the opening paragraph.

The supplied screenshots do not show this entire section. Its typography and positions are measured, while its complete photographic background and any scroll-linked behavior are unverified.

### Department and University Introductions

**Role:** creates editorial chapter openings before dense factual material.

Both sections have a narrow bilingual heading near the right edge and a tall, two-column Japanese statement beside it. The statement measures `132px` wide on desktop and `108px` on mobile, matching two line boxes of `66px` and `54px` respectively. This geometry supports a vertical editorial arrangement.

The introductory paragraph occupies a separate narrow block. In the department section it measures `252px` wide on desktop and approximately `235.13px` on mobile. Those widths closely correspond to eight line-height units, consistent with vertical prose. The supplied style fields do not include `writing-mode`, so that paragraph orientation remains an inference rather than a directly recorded CSS property.

On mobile, the department statement begins around `y = 1888`, and its introductory paragraph begins around `y = 2269.81`, below the statement. The university introduction follows a similar sequence. Preserve the separation between chapter title, statement, and explanation rather than compressing them into one heading block.

### Learning Core

**Role:** identifies `感性` as the academic center of the department.

Desktop geometry places `学びの核` in the left label column, the large teal keyword in the main content area, and explanatory prose beside it. The keyword uses `52px` Ryumin with unusually wide `0.24em` tracking.

Mobile content stacks: the heading occupies the outer `343px` band, followed by the `40px` keyword and a `311px` explanatory block inset by an additional `16px`. A subsequent course-example group combines a small label and course name, followed by two compact Gothic paragraphs.

The supplied records establish text geometry but do not expose the complete surrounding graphic treatment. Do not invent a diagram, icon set, or card fill for this section.

### Learning-Pillar Buttons

**Role:** summarizes the three areas `おもう`, `あらわす`, and `つなぐ` and provides an interactive affordance.

Each entry is a native `BUTTON` with a flat white background and square corners. Desktop buttons measure approximately `729.58 × 189.56px` and use three grid columns:

```css
grid-template-columns: 176px 484.578px 69px;
```

The first column contains the teal Ryumin keyword. The middle column contains an `18px` Mincho lead and a `14px` gray Gothic explanation. The final `69px` column reserves space for an affordance whose exact graphic was not supplied.

On mobile the button becomes a single-column grid, `343px` wide, with `20px` horizontal padding. The keyword, lead, explanation, and remaining affordance space stack vertically. Heights vary with content: approximately `300.25–321.69px`. Keep those heights content-driven.

Color transitions are declared, but their final hover colors were not captured. Button activation was not tested.

### Learning-Area Detail Content — DOM Only

The DOM contains separate detail groups headed with each learning-area name and the label `領域`. Each group includes a large heading, a Mincho lead, a longer explanation, and a practical example in Gothic text.

Desktop detail paragraphs occupy a central width of approximately `686.66px`; mobile paragraphs use `318px`. Repeated unlabeled controls measure `80 × 80px` on desktop and `60 × 60px` on mobile, with opacity and translation transitions.

These viewport-relative records are consistent with detail overlays, but no supplied screenshot shows an opened panel and no activation trace confirms the relationship. Panel fill, backdrop, dismissal behavior, focus management, and animation sequence must remain unverified. An accessible dialog is a reasonable implementation recommendation if this interaction is reproduced.

### Academic Summary Note

**Role:** expresses the department's characteristics in a more formal academic register.

The desktop capture shows a framed note beside `学びの３つの柱`. A teal pill label interrupts the top edge. Fine teal strokes form upper and lower brackets; the side edges are interrupted through the middle rather than forming a heavy rectangular box.

The panel is approximately `730 × 180px` in the screenshot. Its measured text width is `665.58px`, consistent with `32px` horizontal insets. Vertical insets are estimated at approximately `48px`. The body uses `15px / 27.75px` Mincho text.

On mobile the recorded paragraph narrows to `303px` with `14px / 25.9px` type. The complete mobile frame is not shown; allow the pill label to wrap without clipping in a new implementation.

### Curriculum Grid

**Role:** makes the department's academic range concrete through nine course examples.

Desktop uses three columns, each approximately `323.61px` wide, separated by `40px`. Mobile uses one `343px` column. Course order is preserved across both inventories.

Each entry has three layers:

1. A square-cornered landscape photograph.
2. A teal Mincho course title.
3. A dark Gothic explanatory paragraph, separated from the title by a measured `16px` gap.

The first visible row depicts printed visual-design work, a computer workspace, and a color-reference book. Photographs appear approximately `324 × 218px`; `3:2` is a practical recommended ratio, not a measured source asset ratio. There are no visible image borders, shadows, or enclosing card backgrounds.

Desktop titles include `視覚文化論`, `デジタル表象生成論`, and `色彩文化論`. The remaining entries cover sound, filmmaking, materials, stage production, Japanese literature and culture, and media literacy. Their complete text is present in the supplied DOM, but their images are not all visible in the captures.

The course titles are sampled as paragraphs, and no course-detail destinations appear in the supplied link inventory. Do not make every course card clickable without an actual destination.

### Qualification & Career Section

**Role:** connects the learning content to professional fields and possible career directions.

This is a full-width teal section, measured at approximately `984.44px` tall on desktop and `1347.95px` on mobile. Its main statement uses white Ryumin text, `26px` on desktop and `22px` on mobile.

Two information groups, `想定される領域` and `主な進路イメージ`, sit side by side on desktop and stack on mobile. Their desktop heading boxes are `612.5px` wide; body text is inset by `32px`. Mobile heading boxes use `343px`, with `279px` body text widths after the same inset.

The supplied data confirms the teal section background and dark computed body text. The enclosing surfaces beneath those dark paragraphs are not recorded, and this section is not shown in the attached screenshots. Do not infer its complete card or illustration treatment from the text inventory.

### University Feature Grid

**Role:** presents four institutional characteristics with a consistent numbered rhythm.

Desktop features form two columns of approximately `495.41px` with a `60px` gap. Mobile features stack in the order `01` through `04`.

The visible anatomy is a landscape image, a dark Mincho title, a rose Mincho subtitle, a narrow outlined number capsule aligned to the right, a fine dotted divider, and a compact Gothic paragraph. The heading reserves `32px` for the number on desktop and `24px` on mobile.

The desktop crop shows `英語教育` and `少人数教育` as a pair. The mobile crop shows the final feature at full content width. Keep the rose accent confined to subtitles and number details; the description remains dark ink on pale blue.

### Official-Site CTA

**Role:** routes readers to the main university website after the institutional feature sequence.

The label is `福岡女学院大学 公式HPはこちら`. The link is a centered, square-cornered rose rectangle with visibly white text, approximately `289 × 64px` on desktop and `273 × 58px` on mobile.

The destination is [the university's official site](https://www.fukujo.ac.jp/university/). It is a navigation link rather than an application form or a verified admissions conversion flow.

### Footer and LINE Access

**Role:** closes the page with institutional identity and direct contact routes.

The footer remains on the pale blue canvas. It centers the university crest and bilingual wordmark, followed by the admissions publicity office label, underlined email and telephone links, a LINE badge, and small copyright text.

The logo appears approximately `355 × 89px` on desktop and `244 × 60px` on mobile; widths are screenshot estimates, while the corresponding logo-block heights are measured. Preserve its supplied proportions and clear space.

Email and telephone remain side by side at the inspected mobile width, with a measured `20px` gap. Their type decreases from `14px` to `11px`; this is an observed detail worth improving for readability in an adaptation.

The footer LINE link measures `252 × 72px` on desktop and `228 × 66px` on mobile, with `6px` corners. A separate edge-positioned LINE link also exists. It appears at the lower right in the desktop curriculum capture but is not visible in the opening or final-footer captures. Its visibility trigger and footer handoff are unverified.

## Tokens — Motion & Interaction

### Declared Timing

| Source value | Recorded application | What is established |
| --- | --- | --- |
| `--common-duration: .6s` | Navigation, pillar colors, CTA colors, contact links, LINE links | Computed transitions exist |
| `--common-ease: cubic-bezier(.25,.46,.45,.94)` | The same sampled transitions | Exact easing declaration |
| `.6s` with `.15s` delay | Opacity and translation on repeated detail controls | Control transition declaration; activation sequence unverified |
| `--common-duration-fast: .35s` | Token only | No specific visible effect established |
| `--common-duration-late: .8s` | Token only | No specific visible effect established |
| `--animation-duration: .5s` | Token only | No keyframes or trigger supplied |
| Fast/late animation tokens `.35s` and `.8s` | Token only | Available timing values |
| Default transition `.15s`, `cubic-bezier(.4,0,.2,1)` | Global variables | Not evidence that a particular component uses them |

Most sampled elements report `animation: none`. That does not rule out video, animated descendants, pseudo-elements, or JavaScript-driven motion.

### Interaction Evidence and Limits

| Element | Confirmed | Unverified |
| --- | --- | --- |
| Desktop section navigation | Four same-page anchor destinations | Scroll easing, active state, persistence |
| Movie preview | YouTube destination | Playback presentation, autoplay, loop, audio, target window |
| Learning pillars | Native buttons and related detail content in DOM | Opening behavior, backdrop, focus handling, dismissal |
| Official-site CTA | University homepage destination | Hover end state and target window |
| Email and telephone | `mailto:` and `tel:` destinations | External application behavior |
| LINE badges | Same LINE destination on both entries | Visibility thresholds and edge-to-footer handoff |

The capture process observed the initial page for at least five seconds and waited for layout, visible finite motion, and image readiness within bounded time limits. Perpetual animations were temporarily paused during readiness checks and resumed afterward. This supports settled screenshots but does not establish complete motion behavior.

For a new implementation, retain the measured gentle easing for simple state changes. Any reveal animation, moving background, or dialog choreography should be labeled as an addition until verified separately.

## Surfaces

| Layer | Appearance | Evidence |
| --- | --- | --- |
| Opening | Full-frame campus/student imagery with superimposed lettering | Screenshots |
| Main reading canvas | Pale blue `#edf4f6` | Screenshot appearance and source token |
| Learning-pillar buttons | Flat white, square corners | Computed styles |
| Academic summary note | Pale canvas with thin teal brackets and a teal pill | Desktop screenshot |
| Curriculum entries | Unboxed image, title, and paragraph groups | Desktop screenshot and DOM |
| Career band | Teal `#1483a3` | Computed section background |
| University features | Pale canvas with dotted separators and rose details | Desktop and mobile screenshots |
| Official-site CTA | Flat rose rectangle | Computed background and screenshots |
| LINE badge | Light branded asset with a fine border and small radius | Screenshots and link geometry |
| Detail overlay | Complete surface not established | DOM content only |

## Imagery

The visible photography feels observational: sunlight through foliage, warm brickwork, a student handling a camera, printed design experiments, a computer in use, and color-study materials. The subject matter connects perception to making and learning.

Preserve natural light, environmental context, and specific academic objects. The curriculum photographs explain the course content without needing decorative illustrations. Their consistent landscape proportions provide rhythm within the long page.

Hero media needs responsive art direction. A tall mobile crop must preserve the student's face, hands, and camera while leaving room for vertical lettering and the central identity. The different desktop and mobile scenes do not prove the use of separate media files; they may also represent different temporal frames.

### Observed Asset References

No image source paths or video file URLs were included in the supplied records. The following inventory records visible assets without inventing filenames.

| Asset | Observed use | Asset URL evidence |
| --- | --- | --- |
| Campus building and trees | Desktop opening | File URL not supplied |
| Student using a camera | Mobile opening | File URL not supplied |
| Central department identity | Vertical opening lockup | File URL not supplied |
| Large opening phrase | Opposing vertical title elements | File URL not supplied; rendering mechanism unverified |
| Group near a window | `Full Movie` preview | Link destination supplied; thumbnail file URL absent |
| Printed visual-design work | First curriculum image | File URL not supplied |
| Computer workspace | Second curriculum image | File URL not supplied |
| Color-reference book | Third curriculum image | File URL not supplied |
| University crest and wordmark | Footer identity | File URL not supplied |
| Official LINE badge | Edge link and footer link | Destination supplied; artwork file URL absent |

Use approved university and service-brand assets when available. The CSS below describes their placement and surrounding structure; it does not supply replacement identity artwork.

## Layout & Responsive Behavior

The page remains a long document with normal section progression. Its measured height increases from approximately `13,154px` on desktop to `17,401px` on mobile as multi-column content stacks.

| Pattern | Desktop observation | Mobile observation |
| --- | --- | --- |
| Opening | Full-height imagery with widely separated typographic anchors | Same compositional roles, smaller identity, tighter edge placements |
| Navigation | Four small bottom-center links | Not shown; no replacement evidenced |
| Concept prose | Right-aligned reading column | Full content-width block with responsive line breaks |
| Chapter statement | Tall statement beside a narrow section label | Tall statement retained near the right; introduction follows below |
| Learning information | Left label column plus wider content column | Label and content stack |
| Pillar buttons | Three internal columns | One internal column |
| Curriculum | Three columns | One column |
| Career groups | Two parallel information groups | Stacked groups |
| University features | Two columns | One column |
| Footer contacts | Centered horizontal pair | Horizontal pair retained with smaller type |

The mobile layout preserves large chapter spacing. Department top padding remains `200px`, while university and footer top padding reduce to `120px`. This is selective compression, not uniform scaling of the entire desktop page.

Only two viewport sizes were supplied. Exact breakpoints, tablet behavior, landscape behavior, maximum-width rules, browser toolbar response, and safe-area handling were not recorded. The Quick Start uses a recommended `64rem` breakpoint and `100svh` opening height; these are adaptation choices.

## Do’s and Don’ts

### Do

- Preserve the relationship between a dramatic photographic opening and quiet academic reading sections.
- Keep the pale blue, blue-black, teal, and rose values exact where they are measured.
- Use the distinct display, reading, supporting, and Latin type roles.
- Retain vertical title composition on mobile.
- Keep the planning qualifier and notice attached to the announcement.
- Use square landscape curriculum images with teal titles and compact Gothic descriptions.
- Preserve `40px` desktop curriculum gaps and `60px` university-feature gaps at the inspected scale.
- Keep content heights flexible when mobile text wraps.
- Use thin rules and whitespace as the principal structural devices.
- Preserve the university wordmark and LINE badge proportions.

### Don't

- Don't replace the opening with a single centered horizontal headline and oversized conversion button.
- Don't use one sans-serif family for all Japanese content.
- Don't turn every course into a rounded, elevated, clickable card.
- Don't spread the rose accent across academic course titles or turn LINE green into a general action color.
- Don't derive a hero font size from the central `H1` wrapper's inherited `16px` value.
- Don't reproduce the capture's scrollbar gutter as page styling.
- Don't assume different photographic frames prove a specific video or slideshow implementation.
- Don't describe untested detail panels as verified dialogs with known dismissal behavior.
- Don't fabricate course links, asset paths, motion sequences, or production authorship.
- Don't shrink all desktop spacing proportionally; preserve the observed mobile reading rhythm.

## Recommended Implementation Additions

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

- Give the central identity a meaningful accessible heading, even when its visible treatment uses artwork. Mark duplicated decorative slogan artwork appropriately.
- Maintain readable contrast over every hero frame. Provide a restrained scrim or frame-specific text treatment when needed.
- Give `Full Movie`, LINE, and any detail controls explicit accessible names. Empty extracted text alone does not establish whether the original lacks an accessible name.
- Provide keyboard-visible focus indicators and generous interactive hit areas around small navigation and contact text.
- Consider a compact mobile section index or skip navigation, since the observed mobile opening does not expose section links.
- If pillar buttons open dialogs, implement focus entry, Escape dismissal, focus restoration, an accessible title, and a reachable close control.
- Offer a static alternative and user pause control for any moving hero media. Reduced-motion CSS does not pause a video by itself.
- Keep mobile contact text larger than the observed `11px` when readability takes priority over exact reproduction.
- Reserve image dimensions to reduce layout movement and load below-the-fold curriculum photography progressively.
- Ensure the edge LINE badge does not obscure course text or keyboard focus; avoid duplicate visible badges when the footer version is present.

## Agent Prompt Guide

### Quick Color Reference

- Reading canvas: `#edf4f6`.
- Main text: `#263940`.
- Academic titles, learning keywords, and career band: `#1483a3`.
- University subtitles and official-site CTA: `#a44858`.
- Fine rules: `#d3e1e5`.
- Secondary pillar explanations: `#767f82`.
- Pillar surfaces and reversed text: `#ffffff`.
- Photography and official brand assets retain their own colors.

### Overall Prompt

“Create a Japanese university department introduction with a full-height cinematic photographic opening and a long pale-blue editorial body. Place fine vertical Japanese title artwork at opposing upper-right and lower-left anchors, a narrow department identity near the center, a small announcement at upper left, and a compact Full Movie preview at lower right. Use pale blue `#edf4f6`, blue-black text `#263940`, academic teal `#1483a3`, and restrained university rose `#a44858`. Pair Mincho display and reading text with Gothic factual descriptions. Build three desktop curriculum columns with square landscape photos, two university-feature columns with numbered capsules, and a centered institutional footer. Stack these sections on mobile while retaining vertical title composition and generous chapter spacing. Treat all animation and detail-panel behavior as implementation choices requiring explicit specification.”

### Example Component Prompts

1. **Opening:** “Compose a full-height campus photograph with large, fine-stroked vertical phrases at the upper right and lower left. Keep a slim department lockup near the center, a small two-line announcement at upper left, and a 9:5 movie preview at lower right. Preserve space around the subject in the mobile crop.”
2. **Learning pillar:** “Create a flat white square-cornered button with a teal Mincho keyword, a larger dark Mincho lead, a smaller gray Gothic explanation, and a reserved affordance area. Use three internal columns on desktop and stack the content with 20px horizontal insets on mobile. Do not assume a particular dialog design.”
3. **Curriculum:** “Create three unboxed course entries across a pale-blue canvas, separated by 40px. Each has a natural-light landscape photograph, an 18px teal Mincho title, and a 14px Gothic paragraph. Use one column with 16px titles and 13px descriptions on mobile.”
4. **Academic note:** “Create a pale-blue academic note framed by thin teal upper and lower brackets. Center a teal pill label over the top rule, leave interruptions in the side strokes, and use airy Mincho body copy. Avoid a heavy card border or shadow.”
5. **University feature:** “Place a landscape image above a dark Mincho title and rose subtitle. Reserve a slim right-side capsule for a two-digit number. Separate the compact Gothic description with a pale dotted rule. Use two columns on desktop and one on mobile.”
6. **Footer:** “Center an approved university crest and bilingual wordmark on pale blue with generous clear space. Add an admissions contact label, underlined email and telephone links, a small official LINE badge, and quiet copyright text. Place a square rose official-site link above the footer.”

## Quick Start

### CSS Custom Properties

This CSS is a reusable adaptation, not extracted source code. Colors and core type values follow the supplied measurements. The `64rem` breakpoint, hover end states, focus treatment, and responsive image handling are recommendations. The opening phrase envelopes are screenshot estimates.

Apply `.kansei-page` to the page wrapper. The hero expects approved media inside `.hero-media`, phrase artwork inside the two `.hero-phrase` elements, and identity artwork inside `.hero-identity`. A curriculum entry uses `.course-image`, `.course-title`, and `.course-description`. A pillar button uses `.pillar-name`, `.pillar-copy`, and `.pillar-affordance`; use phrasing elements such as spans inside a native button. Media and detail-panel behavior require separate application code.

```css
:root {
  /* Measured palette */
  --k-paper: #edf4f6;
  --k-ink: #263940;
  --k-teal: #1483a3;
  --k-rose: #a44858;
  --k-rule: #d3e1e5;
  --k-muted: #767f82;
  --k-white: #ffffff;

  /* Source family declarations; font files are not included */
  --k-font-display: a-otf-ryumin-pr6n, serif;
  --k-font-reading: hiragino-mincho-pron, sans-serif;
  --k-font-detail: dnp-shuei-gothic-gin-std, sans-serif;
  --k-font-latin: minerva-modern, sans-serif;

  /* Mobile values measured at the supplied viewport */
  --k-text-section: 22px;
  --k-text-lead: 16px;
  --k-text-body: 14px;
  --k-text-detail: 13px;
  --k-text-statement: 36px;
  --k-text-core: 40px;
  --k-section-leading: 1.8;
  --k-side: 16px;
  --k-grid-gap: 16px;

  /* Source timing; hover endpoints below are recommendations */
  --k-duration: 600ms;
  --k-ease: cubic-bezier(.25, .46, .45, .94);
}

* { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; }

.kansei-page {
  color: var(--k-ink);
  background: var(--k-paper);
  font-family: var(--k-font-display);
  font-size: 16px;
  line-height: 1.5;
}

.kansei-page p,
.kansei-page h1,
.kansei-page h2,
.kansei-page h3 {
  margin: 0;
}

.wide,
.inner {
  width: calc(100% - 2 * var(--k-side));
  margin-inline: auto;
}

.section-heading {
  font-family: var(--k-font-display);
  font-size: var(--k-text-section);
  font-weight: 500;
  line-height: var(--k-section-leading);
  letter-spacing: .05em;
}

.reading-copy {
  font-family: var(--k-font-reading);
  font-size: var(--k-text-body);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: .08em;
}

.detail-copy,
.course-description {
  font-family: var(--k-font-detail);
  font-size: var(--k-text-detail);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .08em;
}

/* Recommended vertical-title implementation */
.vertical-statement {
  writing-mode: vertical-rl;
  font-family: var(--k-font-display);
  font-size: var(--k-text-statement);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .15em;
}

.core-word {
  color: var(--k-teal);
  font-size: var(--k-text-core);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .24em;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  color: var(--k-white);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero-media > :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-announcement {
  position: absolute;
  top: 26px;
  left: 16px;
  max-width: 65%;
  font-family: var(--k-font-reading);
  font-size: var(--k-text-lead);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .08em;
}

.hero-qualifier,
.hero-disclaimer {
  font-family: var(--k-font-detail);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .06em;
}

.hero-qualifier {
  display: block;
  margin-top: 6px;
  color: rgb(255 255 255 / .8);
}

.hero-identity {
  position: absolute;
  top: calc(50% - 20px);
  left: 50%;
  width: 53px;
  transform: translate(-50%, -50%);
}

.hero-identity img,
.hero-phrase img {
  display: block;
  width: 100%;
  height: auto;
}

/* Estimated artwork envelopes; tune to the approved assets */
.hero-phrase {
  position: absolute;
  pointer-events: none;
}
.hero-phrase--right { top: 24px; right: 16px; width: 80px; }
.hero-phrase--left { top: 54%; left: 16px; width: 104px; }

.hero-nav { display: none; }

.hero-disclaimer {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  text-align: center;
  color: rgb(255 255 255 / .6);
}

.hero-movie {
  position: absolute;
  right: 16px;
  bottom: 40px;
  width: 171px;
  color: white;
}

.hero-movie img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 5;
  object-fit: cover;
}

.hero-movie-label {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 12px;
}

.study-layout,
.pillar-list,
.curriculum-grid,
.university-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.study-layout { gap: 40px; }
.pillar-list { gap: 20px; }

.pillar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  padding: 32px 20px;
  border: 0;
  border-radius: 0;
  color: var(--k-ink);
  background: var(--k-white);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--k-duration) var(--k-ease);
}

.pillar-name {
  display: block;
  color: var(--k-teal);
  font-size: var(--k-text-section);
  font-weight: 500;
  line-height: var(--k-section-leading);
  letter-spacing: .05em;
}

.pillar-copy { display: block; margin-top: 24px; }
.pillar-lead,
.pillar-description { display: block; }

.pillar-lead,
.course-title {
  font-family: var(--k-font-reading);
  font-size: var(--k-text-lead);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .08em;
}

.pillar-description {
  margin-top: 16px;
  color: var(--k-muted);
  font-family: var(--k-font-detail);
  font-size: var(--k-text-detail);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .08em;
}

.pillar-affordance {
  display: grid;
  min-height: 44px;
  margin-top: 16px;
  place-items: center end;
}

.academic-note {
  position: relative;
  padding: 44px 20px;
}

.academic-note::before,
.academic-note::after {
  content: '';
  position: absolute;
  right: 0;
  left: 0;
  height: 32px;
  border: 1px solid var(--k-teal);
  pointer-events: none;
}

.academic-note::before {
  top: 0;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}

.academic-note::after {
  bottom: 0;
  border-top: 0;
  border-radius: 0 0 3px 3px;
}

.academic-note-label {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  max-width: calc(100% - 24px);
  width: max-content;
  padding: 8px 16px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  color: var(--k-white);
  background: var(--k-teal);
  font-family: var(--k-font-reading);
  font-size: var(--k-text-body);
  line-height: 1.4;
  letter-spacing: .08em;
  text-align: center;
}

.section-rule {
  position: relative;
  height: 1px;
  border: 0;
  background: var(--k-rule);
}

.section-rule::before {
  content: '';
  position: absolute;
  width: 60px;
  height: 1px;
  background: var(--k-teal);
}

.curriculum-intro { margin-top: 24px !important; }

/* Image ratio and vertical gaps are practical approximations */
.curriculum-grid { gap: 80px 40px; margin-top: 72px; }

.course-image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
}

.course-title {
  margin-top: 24px !important;
  color: var(--k-teal);
}

.course-description { margin-top: 16px !important; }
.university-grid { gap: 80px 60px; }

.feature-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: start;
}

.feature-subtitle {
  margin-top: 6px !important;
  color: var(--k-rose);
  font-family: var(--k-font-reading);
  font-size: var(--k-text-body);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: .08em;
}

/* Capsule dimensions are an adaptation of the visible marker */
.feature-number {
  display: grid;
  width: 24px;
  min-height: 60px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--k-rose) 25%, transparent);
  border-radius: 999px;
  color: var(--k-rose);
  font-family: var(--k-font-latin);
  font-size: 12px;
}

.feature-description {
  margin-top: 20px !important;
  padding-top: 20px;
  border-top: 1px dotted var(--k-rule);
}

.official-cta {
  display: grid;
  width: min(100%, 273.38px);
  min-height: 58px;
  margin: 100px auto 0;
  padding: 14px 28px;
  place-items: center;
  border-radius: 0;
  color: var(--k-white);
  background: var(--k-rose);
  font-family: var(--k-font-reading);
  font-size: var(--k-text-body);
  line-height: 1.85;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--k-duration) var(--k-ease);
}

.university-footer {
  padding: 120px var(--k-side) 80px;
  text-align: center;
}

.footer-logo {
  display: block;
  width: min(244px, 100%);
  height: auto;
  margin-inline: auto;
}

.footer-contact-label { margin-top: 60px !important; }

.footer-contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 20px;
  margin-top: 16px;
}

.footer-contacts a {
  color: inherit;
  font-family: var(--k-font-latin);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .02em;
  text-underline-offset: 4px;
}

.footer-line {
  display: block;
  width: min(228px, 100%);
  margin: 36px auto 0;
  overflow: hidden;
  border-radius: 6px;
}
.footer-line img { display: block; width: 100%; height: auto; }

.footer-copyright {
  margin-top: 48px !important;
  color: var(--k-muted);
  font-family: var(--k-font-detail);
  font-size: 10px;
  letter-spacing: .06em;
}

/* Recommended breakpoint; the original threshold was not supplied */
@media (min-width: 64rem) {
  :root {
    --k-text-section: 26px;
    --k-text-lead: 18px;
    --k-text-body: 15px;
    --k-text-detail: 14px;
    --k-text-statement: 44px;
    --k-text-core: 52px;
    --k-section-leading: 1.65;
    --k-side: min(80px, 5.555556vw);
    --k-grid-gap: 20px;
  }

  /* Ten inner columns from a twelve-column content grid */
  .inner {
    width: calc(
      (100% - 2 * var(--k-side) - 11 * var(--k-grid-gap))
      * 10 / 12 + 9 * var(--k-grid-gap)
    );
  }

  .hero-announcement { top: 32px; left: 36px; }
  .hero-qualifier { margin-top: 8px; }
  .hero-identity { top: 50%; width: 67px; }
  .hero-phrase--right { top: 32px; right: 20px; width: 150px; }
  .hero-phrase--left { top: auto; bottom: 20px; left: 32px; width: 190px; }
  .hero-movie { bottom: 16px; width: 216px; }
  .hero-disclaimer { bottom: 31px; }

  .hero-nav {
    position: absolute;
    bottom: 64px;
    left: 50%;
    display: flex;
    gap: 20px;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  .hero-nav a {
    color: inherit;
    font-family: var(--k-font-reading);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .08em;
    text-underline-offset: 4px;
  }

  .study-layout {
    grid-template-columns: minmax(0, calc(30% - 14px)) minmax(0, 1fr);
    gap: 20px;
  }

  .pillar {
    grid-template-columns: 176px minmax(0, 1fr) 69px;
    padding: 32px 0;
    align-items: start;
  }
  .pillar-name { padding: 9px 32px 0; }
  .pillar-copy { margin-top: 0; padding-inline: 20px; }
  .pillar-description { margin-top: 20px; }
  .pillar-affordance { margin-top: 0; place-items: center; }
  .academic-note { padding: 48px 32px; }
  .curriculum-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .university-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-heading { grid-template-columns: minmax(0, 1fr) 32px; }
  .feature-number { width: 32px; min-height: 74px; font-size: 14px; }
  .feature-subtitle { margin-top: 8px !important; }
  .feature-description { margin-top: 24px !important; padding-top: 24px; }

  .official-cta {
    width: min(100%, 288.75px);
    min-height: 64px;
    margin-top: 120px;
    padding-block: 17px;
  }

  .university-footer { padding: 160px var(--k-side) 20px; }
  .footer-logo { width: min(355px, 100%); }
  .footer-contacts a { font-size: 14px; }
  .footer-line { width: 252px; margin-top: 50px; }
}

/* Recommended feedback; original hover endpoints were not captured */
@media (hover: hover) {
  .pillar:hover {
    background: color-mix(in srgb, var(--k-teal) 5%, white);
  }
  .official-cta:hover {
    background: color-mix(in srgb, var(--k-rose) 90%, black);
  }
}

.kansei-page :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

/* Recommended CSS fallback; pause moving media separately in code */
@media (prefers-reduced-motion: reduce) {
  .kansei-page *,
  .kansei-page *::before,
  .kansei-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
```

The CSS intentionally leaves unseen chapter imagery, career information surfaces, detail overlays, and the edge LINE visibility logic to separate implementation. Their complete original behavior or appearance is not established by the supplied evidence.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. Define the custom properties above first. This mapping is implementation guidance, not a claim about the original authoring framework.

```css
@theme inline {
  --color-paper: var(--k-paper);
  --color-ink: var(--k-ink);
  --color-academic: var(--k-teal);
  --color-university: var(--k-rose);
  --color-rule: var(--k-rule);
  --color-muted: var(--k-muted);

  --font-editorial: var(--k-font-display);
  --font-reading: var(--k-font-reading);
  --font-detail: var(--k-font-detail);
  --font-latin: var(--k-font-latin);

  --text-section: var(--k-text-section);
  --text-lead: var(--k-text-lead);
  --text-body: var(--k-text-body);
  --text-detail: var(--k-text-detail);
  --text-statement: var(--k-text-statement);
  --text-core: var(--k-text-core);

  --spacing-page-side: var(--k-side);
  --spacing-grid-gap: var(--k-grid-gap);
  --radius-brand-badge: 6px;
}
```

## Sources & Evidence

- [Current department page](https://www.fukujo.ac.jp/university/kansei-media/): original and final inspected URL; HTTP 200. Authority for the supplied page title, content, link destinations, computed styles, and source custom properties.
- **Capture date:** September 12, 2026, with supplied retrieval timestamp `2026-09-12T12:42:55.991Z`.
- **Desktop evidence:** `1440 × 1000` viewport; opening, curriculum-area, and final university/footer captures. Document width `1425px`; measured height approximately `13154.19px`.
- **Mobile evidence:** `390 × 844` viewport; opening and final university/footer captures. Document width `375px`; measured height approximately `17400.63px`.
- **Rendered evidence:** text inventory, anchor destinations, element rectangles, font-family declarations, sizes, weights, line heights, tracking, fills, padding, radii, grid columns, transition strings, and CSS custom properties for both viewport sizes.
- **Observed identity:** the original-page footer presents Fukuoka Jo Gakuin University, its admissions publicity office, email, telephone, and official-site destination. Production authorship is not established by the supplied original-page evidence.
- **Interaction scope:** scrolling and capture stabilization are described by the supplied collection notes. No click results, hover endpoints, keyboard tests, opened detail-panel screenshots, or playback-state records were supplied.
- **Limitations:** exact asset paths, font-file resolution, writing-mode declarations, media playback configuration, responsive breakpoints, delayed content, safe-area behavior, and unexercised interaction states remain unverified. SharedWorkers and service workers were disabled during the supplied inspection.

This reference describes the current supplied render. Estimates, calculated geometry, and recommended implementation choices are labeled separately from measured observations.