# PLM / Pacific League Marketing — Style Reference

> Stadium-scale lettering, a saturated blue field, and baseball imagery arranged with the confidence of a sports poster.

**Website:** [pacificleague.jp](https://www.pacificleague.jp/)
**Original URL:** https://www.pacificleague.jp/
**Final URL:** https://www.pacificleague.jp/
**Theme:** blue-and-white corporate identity with photographic sports media
**Inspected:** September 29, 2026, at 13:24:32 UTC / 22:24:32 JST, using the supplied browser evidence
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels
**Scope:** the current Japanese corporate homepage: opening identity, vision and mission, six service entries, press releases, recruitment, and footer. Visual captures cover the desktop opening, part of the service grid, the lower-page/footer region, and the mobile opening and footer. Rendered DOM measurements extend through the entire page at both widths. Linked pages and menu-open states were not inspected.

PLM presents its corporate activities through the visual vocabulary of professional baseball. An intense blue canvas supports enormous compressed English lettering, bold Japanese statements, and darkened game imagery. The white service and press sections reverse the palette without introducing a separate visual identity. Images supply color and activity; the interface itself remains restrained.

This is a corporate homepage with multiple information paths. Its sequence moves from purpose to services, news, recruitment, and the six-team network. The most reusable features are the overlap between headline and media, alternating filled and outlined display lettering, deliberate empty cells in the desktop service composition, and a footer that gives the team marks substantial space.

## How to Read This Reference

- **Measured** values come from the supplied rendered DOM and computed-style records. Decimal values are rounded for readability.
- **Visual estimates** come from the supplied current-page screenshots. They are identified explicitly and are not pixel-sampling results.
- **Derived** values are calculations from measured coordinates, such as the desktop column gap and proportional page gutters.
- **Recommended** values and code are implementation choices for a new build. They are not recovered source CSS.
- Font-family declarations are available for sampled elements; font binaries, licensing, and actual font resolution were not independently checked.
- Several samples describe an anchor or wrapper rather than its children. An anchor's 14px inherited font size does not establish the size of every label inside it, and a 20px inline-link rectangle does not establish a logo tile's height.
- Offscreen navigation appears in the DOM. Its presence confirms content and declared styles, not a visually tested open menu.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| PLM Blue | `#0055B4` | `--color-blue` | Measured `rgb(0, 85, 180)` on body text, white-section headings, and the footer background. Visually forms the large opening and recruitment fields. |
| White | `#FFFFFF` | `--color-white` | Measured on navigation and recruitment text, and on service/press section backgrounds. |
| Muted white | White at approximately 40–55% opacity | `--color-muted-on-blue` | Visual estimate for subdued copyright text, inactive language text, and small decorative marks. Exact opacity is unavailable. |
| Fine line on blue | White at approximately 15–20% opacity | `--color-rule-on-blue` | Visual estimate for the six-team grid. |
| Fine line on white | Blue at approximately 20–25% opacity | `--color-rule-on-white` | Visual estimate for oversized circular outlines in the service section. |
| Media shade | Dark navy/black translucent treatment; exact value unknown | `--color-media-shade` | Game imagery appears dark and textured behind white lettering. The evidence does not establish whether all of this treatment is in the asset or added by CSS. |

The reliable brand pair is blue and white. Team colors, merchandise packaging, and stadium colors belong to image content rather than a general-purpose interface palette.

The body's measured background is transparent. Do not interpret that as a white opening screen: the rendered composition and footer establish the visible blue field, while other layers supply section backgrounds.

### Source Custom Properties

The exposed properties include `--swiper-theme-color: #007aff`, `--swiper-navigation-size: 44px`, and `--vh`, which is `10px` on desktop and `8.44px` on mobile. The first two are library-style defaults, not evidence that bright cyan is a visible brand accent or that a carousel was exercised. The two `--vh` values equal one percent of their respective viewport heights; the code that updates or consumes them was not supplied.

## Tokens — Typography

### Compressed Display Lettering

**Measured family:** `pressio-compressed, sans-serif`.

The service, press, and recruitment headings use weight `700`, with `0.04em` tracking. Service and press headings use a tight `0.9` line height. The resulting forms are extremely tall and narrow, allowing large words to occupy substantial vertical space without becoming excessively wide.

The opening slogan uses the same visual vocabulary: `POWER / OF SPORTS / ENERGIZES / JAPAN`. Its exact element and computed font declaration are absent from the supplied sample, and the words do not appear in the extracted page text. Its implementation could involve graphical lettering. Treat a live-text recreation with Pressio as an adaptation, not a verified reconstruction of the hero markup.

### English Navigation and Utility Text

**Measured family:** `neue-haas-grotesk-display, sans-serif`.

Navigation uses uppercase letters, weights `600` or `700`, and generally `0.11em` tracking. This wider grotesk gives the small controls a different rhythm from the compressed display headings. The overview label uses `0.1em` tracking.

### Japanese Text

**Measured stack:** `noto-sans-cjk-jp, 'Noto Sans JP', 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif`.

Japanese purpose statements are bold and spacious. Explanatory recruitment copy uses regular weight and a notably open `2` line height. This distinction is essential: the English display type carries visual impact, while Japanese text carries readable meaning.

### Type Scale

All values below are measured computed sizes unless marked otherwise. Size/leading pairs are in CSS pixels.

| Role | Desktop size / leading | Mobile size / leading | Weight | Tracking |
| --- | --- | --- | --- | --- |
| Body inheritance | `14 / 21` | `14 / 21` | 400 | Normal |
| Header navigation, present in desktop DOM | `16.67 / 16.67` | Not visible in mobile opening | 700 | `0.11em` |
| Opening left navigation | `17.06 / 25.60` | Absent from mobile opening | 600 | `0.11em` |
| EN language link | `16.47 / 16.47` | `12 / 12` | 700 | Normal |
| Service and press headings | `128.65 / 115.79` | `80 / 72` | 700 | `0.04em` |
| Japanese service/press subtitle | `17.42 / 26.12` | `12 / 18` | 400 | `0.04em` |
| Opening Japanese statement | `40.48 / 60.72` | `24 / 36` | 700 | `0.02em` |
| Overview label | `19.49 / 29.24` | `13 / 19.5` | 600 | `0.1em` |
| Recruitment display heading | `274.93 / 247.43` | `106 / 95.4` | 700 | `0.04em` |
| Recruitment Japanese statement | `51.38 / 77.07` | `22 / 28.6` | 700 | `0.04em` |
| Recruitment paragraph | `21.97 / 43.93` | `16 / 32` | 400 | `0.04em` |
| Footer main navigation | `19.69 / 29.54` | `14 / 21` | 600 | `0.11em` |
| Footer policy/service links | `15.93 / 23.89` | `14 / 21` | 700 | Normal |
| Offscreen menu links | `102.39 / 102.39` | `60 / 60` | 700 | `0.04em` |

The source root is `10px`, so one source `rem` would equal 10px at these captures. The Quick Start uses explicit pixel-based tokens and does not require changing a new application's root font size.

## Tokens — Spacing & Shapes

**Density:** expansive section spacing with compact navigation and strong alignment.

**Base unit:** no single spacing unit is established by the evidence. The design mixes proportional horizontal geometry with fixed section padding and fluid-looking typography.

### Spacing Measurements

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Main horizontal gutter | `63.36px` | `15.59px` | Measured; approximately `4.4vw` and `4vw` respectively |
| Main content width | `1313.28px` | `358.81px` | Measured/derived from page gutters |
| Opening top padding | `310px` | `278.52px` | Measured; mobile value equals `33%` of this viewport's height, but the general source formula is unknown |
| Opening bottom padding | `140px` | `100px` | Measured section padding |
| Service section padding | `120px` top/bottom | `80px` top, `50px` bottom | Measured |
| Desktop service column gap | `26.27px` | Single column | Derived; approximately 2% of desktop content width |
| Service row/link separation | `100px` between desktop rows | Approximately `61px` between successive sampled links | Derived from link bounds |
| Press section padding | `120px` top/bottom | `80px` top, `40px` bottom | Measured |
| Press row internal padding | Usually `40px` top/bottom | `40px` top, `10px` bottom, `15.59px` sides | Measured; first desktop row has no top padding |
| Recruitment section padding | `340px` top, `130px` bottom | `340px` top, `130px` bottom | Measured |
| Footer top-to-logo offset | `160px` | `120px` | Derived from footer and logo-wrapper coordinates |

The large recruitment top padding is present at both inspected widths. Do not automatically compress every vertical gap on mobile; substantial pauses are part of this page's composition.

### Shapes and Edges

| Element | Observed treatment |
| --- | --- |
| Media frames | Rectangular, square corners |
| Service entries | Unboxed image-and-caption compositions; no visible general card shadow |
| PLM wordmark | White plate with a slanted right edge; retain the supplied brand artwork |
| Menu control | Thin circular outline; approximately 64px desktop and 56px mobile, estimated from screenshots |
| Footer team tiles | Three columns by two rows, fine borders, square cells |
| Section CTA anchors | Square measured bounds: usually 164px desktop and 94px mobile; desktop press CTA is 129px |
| Decorative geometry | Oversized hairline circles and small square marks |

The CTA samples have zero border radius and transparent anchor backgrounds. Their complete inner artwork and pseudo-elements were not supplied. The evidence supports square layout bounds, but not a claim that every visible CTA is a plain filled square. The starter's filled-square CTA is an explicit simplification.

### Measured Page Structure

These are capture-specific document measurements, not recommended fixed heights.

| Section | Desktop start / height | Mobile start / height |
| --- | --- | --- |
| Opening, vision, mission | `0 / 3002.75px` | `0 / 1583.08px` |
| Services | `3002.75 / 2614.27px` | `1583.08 / 3162.91px` |
| Press | `5617.02 / 891.22px` | `4745.98 / 1154.17px` |
| Recruitment | `6508.23 / 1330.31px` | `5900.16 / 1072.78px` |
| Footer | `7838.55 / 796.34px` | `6972.94 / 858.84px` |
| Entire document | Approximately `8635px` | Approximately `7832px` |

## Components

### Header and Opening Navigation

The header places the PLM logo close to the upper-left edge, with language selection and a circular menu control at the upper right. The desktop logo measures approximately `85.02 × 44.16px` at `(11.52, 11.52)`. Mobile reduces it to `70 × 36.45px` at approximately `(7.80, 10)`.

In the desktop opening screenshot, a separate vertical navigation list begins at `x ≈ 63px`, with `SERVICE`, `PRESS RELEASE`, `ABOUT`, and `RECRUIT`. Successive link rectangles begin about `31.6px` apart. This list disappears from the mobile opening.

The desktop DOM also contains a horizontal header navigation set, but that set is not visibly presented in the supplied opening screenshot. Do not render both sets as simultaneously visible merely because both have measured rectangles. Visibility, opacity, and scroll-state rules are not fully supplied.

The desktop circle contains a small white square in the capture, while the mobile circle displays `MENU`. The DOM also contains `CLOSE`. These are navigation-state clues, not evidence that the circular control is a video stop button. Header positioning while scrolling and menu activation were not verified.

### Offscreen Main Menu

The DOM contains `HOME`, `OUR SERVICE`, `PRESS RELEASE`, `ABOUT US`, and `RECRUIT`, followed by related service links and social destinations. Desktop records also include team links in this region.

The main links declare compressed display typography at approximately `102px` desktop and `60px` mobile. Their recorded horizontal coordinates lie outside the viewport, confirming that this is not the visible opening navigation state.

For a new implementation, an accessible menu can reuse this content hierarchy. Its opening direction, backdrop, focus behavior, scroll locking, and exact layout must be designed or separately inspected; none should be presented as observed behavior here.

### Opening Media and Slogan

The desktop opening uses an offset composition. A darkened baseball image region starts around `(412, 72)` and measures approximately `965 × 543px`, a visually estimated 16:9 display frame. The main text begins near `x = 63px`, overlapping the media from the left.

The slogan is broken into four forceful lines:

- `POWER`
- `OF SPORTS`
- `ENERGIZES`
- `JAPAN`

`OF SPORTS` is outlined, while the other words are solid white. Keep the hollow line genuinely transparent so the media and blue field remain visible through it. Do not fill it with a darker blue rectangle.

On mobile, the media spans the full viewport width behind the header and headline. Its visible lower edge is around `y = 633px` in the 844px-tall capture. The headline begins around `y = 279px`; the last word crosses from the photographic region into the blue area below. The precise media sizing rule is unknown.

The Japanese statement, `私たちは、スポーツで / 日本を元気にしたい。`, is not simply centered below everything. On desktop its measured box begins at `(611.33, 1136.56)`, placing it to the right of the large headline composition. On mobile it starts at `(15.59, 687.08)`, below the slogan, and uses `24px / 36px` bold type.

Small pale-blue squares appear near the lower corners of the opening capture. Their function is not established; do not turn them into pagination or progress controls without further evidence.

### Vision and Mission

The opening section continues with `VISION`, `MISSION`, Japanese explanatory text, and an `ABOUT US` link. These are part of the corporate introduction rather than separate promotional cards.

The text describes contributing to a brighter society through the development of professional baseball and sport, and increasing the number of professional-baseball fans. The sequence is established by the rendered text; exact heading sizes and the full visual arrangement of these blocks are not separately sampled.

The `ABOUT US` link has measured `164 × 164px` bounds on desktop and `94 × 94px` on mobile. On mobile it sits toward the right side of the content region.

### Service Section Heading

`OUR / SERVICE` is a two-line compressed heading with a small Japanese subtitle, `事業内容`. On desktop the title occupies the first area of the three-column composition while service imagery starts in columns two and three.

The measured heading is `128.65px / 115.79px` desktop and `80px / 72px` mobile. The Japanese subtitle is much quieter: approximately `17.42px` desktop and `12px` mobile. Maintain that scale difference.

### Service Entry

Each entry is one linked composition containing prominent imagery and a Japanese title. The supplied desktop screenshot shows a blue title beneath the image, with a diagonal arrow. White branding sits over photographic collages within several image regions; the evidence does not establish whether each mark is baked into the asset or layered in HTML.

The six entries are:

| Entry | Recorded destination | Observed content role |
| --- | --- | --- |
| `パ・リーグ.com` | `https://pacificleague.com/` | Digital platform |
| `パーソル パ・リーグTV` | `https://pacificleague.com/ptv` | Streaming service |
| Official YouTube | `https://www.youtube.com/c/pacificleaguetvofficial` | Baseball video channel |
| `パートナーシップ` | `https://www.pacificleague.jp/partner/` | Partnership information |
| `PLMキャリア` | `https://career.pacificleague.jp/` | Career service |
| `MD/ライセンス` | `https://www.pacificleague.jp/merchandising/` | Merchandise and licensing |

Desktop columns are approximately `420.25px` wide. Their placement is intentionally incomplete:

| Row | Column 1 | Column 2 | Column 3 |
| --- | --- | --- | --- |
| 1 | Section heading | Digital platform | Streaming |
| 2 | YouTube | Partnership | Open space |
| 3 | Decorative/open area | Career | Merchandise/licensing |

This stagger is a defining feature. An evenly filled six-card grid would remove much of the original rhythm.

Desktop images appear portrait-oriented, approximately 3:4, based on the screenshot crop and card positions. That ratio is an estimate, not a supplied image-element measurement. Captions appear around 26px and bold in the desktop service screenshot, also a visual estimate.

On mobile all six anchors share a `358.81px` width. The first, second, fourth, and fifth links are about `258.80px` tall; YouTube is about `294.80px`; the final merchandise link is `557.42px`. These are whole-link measurements. They do not establish a universal mobile image ratio or explain the final entry's extra height.

English descriptors are present in the mobile extracted text. Some pairings are semantically surprising: partnership is associated with `Recruit Agent`, and career with `Live Streaming`. Validate these labels when adapting content; do not infer a service's business role from those strings alone.

### Service Background and Overview

The service area is white with blue text. Very large, thin pale-blue circular outlines cross the open background, and oversized faded, rotated PLM lettering is partly visible near the lower-left service region.

These graphics occupy the negative space around entries rather than becoming separate content panels. Keep their contrast low and their geometry much larger than an individual card.

An `– OVERVIEW` label introduces explanatory Japanese copy about video and digital services. A `VIEW MORE` link follows. Its measured anchor is `164px` square on desktop and `94px` square on mobile. The mobile link sits near the right gutter.

### Press Release List

The press section remains white. On desktop, the heading occupies roughly 40% of the content width and the release list occupies the remaining 60%: approximately `525.31px` and `787.97px` respectively.

Each release is a link containing a date, Japanese headline, and PDF size indicator. Four entries are present in the supplied page state. Dates range from May to August 2026. The first desktop row has `40px` bottom padding; subsequent rows have `40px` top and bottom padding. Approximately 1px separates successive row rectangles, consistent with a fine divider treatment.

On mobile the section becomes a vertical stack. Release-link boxes extend across the full `390px` viewport, while their text retains approximately `15.59px` side padding. This allows full-width separators or hover areas without sacrificing alignment with the rest of the page.

PDF labels are part of the link anatomy and should remain visible. The linked files were not opened, so their content and download behavior are outside this reference.

### Recruitment Section

Recruitment returns to white text over the blue/media composition. Its hierarchy is unusually large: the small Japanese label `採用情報`, a two-line `JOIN / OUR TEAM` heading, an accompanying Japanese statement, explanatory copy, and `VIEW MORE`.

The English heading reaches approximately `274.93px` desktop. The Japanese statement is positioned within the broad horizontal footprint of the heading: its desktop box begins at `x ≈ 444px`, while the English heading begins at `x ≈ 63px`. Mobile retains this juxtaposition, with the Japanese statement beginning around `x ≈ 163px` inside a section with a `15.59px` gutter. These positions come from DOM measurements; a complete recruitment screenshot was not supplied.

The explanatory paragraph changes from approximately `21.97px / 43.93px` on desktop to `16px / 32px` on mobile. The CTA is beside the paragraph on desktop and below it toward the left on mobile.

A cropped baseball-media strip is visible above the desktop footer. This may involve a shared or scroll-dependent media layer, but the captures do not establish its implementation. Do not claim verified parallax or fixed-video behavior.

### Footer Identity and Navigation

The footer is a substantial blue section, not a narrow closing bar. Desktop begins with a large PLM wordmark at the left, a two-by-two navigation block in the middle, and the six-team grid on the right.

The desktop logo wrapper measures approximately `203.67 × 105.80px`. Mobile shows an approximately `86px`-wide logo, with navigation to its right. The mobile logo wrapper is taller than the visible artwork, so copying its 70px wrapper height as the image height would distort the mark.

Navigation order is `SERVICE`, `PRESS`, then `RECRUIT`, `ABOUT`. Use the shorter footer labels rather than copying every opening-navigation label verbatim.

### Six-Team Grid

The footer presents six linked team marks in this order:

| First row | Second row |
| --- | --- |
| Hokkaido Nippon-Ham Fighters | Chiba Lotte Marines |
| Tohoku Rakuten Golden Eagles | Orix Buffaloes |
| Saitama Seibu Lions | Fukuoka SoftBank Hawks |

Read each row of the actual visual grid horizontally: Fighters, Eagles, Lions; then Marines, Buffaloes, Hawks.

The layout remains three columns by two rows at both widths. The desktop grid is approximately `499 × 334px`; mobile is approximately `358 × 240px`, estimated from the screenshots. Individual cells are therefore about `166px` and `120px` square.

Use the original multicolor marks with `object-fit: contain`. Fine translucent borders define the cells. There is no white tile background, rounded card, or shadow. Optical logo sizing matters more than forcing every mark to share an identical visible silhouette.

### Footer Social and Legal Links

Six white social marks appear in this order: YouTube, X, Instagram, TikTok, Facebook, and LINE. Sampled link widths are `26px`; that measurement does not prove the complete interactive hit area.

Desktop places social links at the lower right and policy/related-service links at the lower left. Mobile moves social links into a full-width row below the team grid, followed by vertically stacked policy/service links and subdued copyright text.

The copyright explicitly names Pacific League Marketing. Together with the page title, this supports the operator identity shown in this reference.

## Tokens — Motion & Interaction

| Element or treatment | Recorded evidence | What can be concluded |
| --- | --- | --- |
| Header | `0.5s cubic-bezier(0.19, 1, 0.22, 1)` transition | A relatively quick easing curve is declared. The changed properties and trigger are not established. |
| Press release anchors | Same `0.5s` easing | A transition is declared; hover colors, movement, and other endpoint styles were not supplied. |
| Offscreen menu links | `0.25s` transition | Short link transitions exist in the declared styles. The menu-opening timeline is unknown. |
| Mobile opening Japanese statement | `1s cubic-bezier(0.4, 0.005, 0.14, 1) forwards inViewActKey` | An entrance animation is declared. Its keyframe properties and movement distance are unavailable. |
| Baseball media | Different baseball scenes appear in current captures | Sports-media content is established. Playback, looping, sound, and user controls are unverified. |
| General elements | Many records say `transition: all` and `animation: none` | This alone does not prove a nonzero transition or a completely motionless page. |
| Page traversal | Capture process included scrolling and settling checks | Lower content was collected; no exact scroll animation or snap behavior is established. |

The evidence includes no recorded menu click, hover comparison, language switch, or service-link activation. Do not invent a carousel, mouse-following effect, animated circle path, or media-control interaction from the screenshots.

For an adaptation, the supplied 500ms and 1000ms easing curves are useful starting tokens. Use them sparingly, and provide a static reduced-motion presentation. Exact source choreography requires further inspection.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Opening field | Saturated blue with overlapping white display lettering | Establishes identity and scale |
| Sports media | Dark photographic baseball imagery, visible texture | Adds atmosphere and human action |
| Service section | White with blue type and faint circular linework | Gives imagery and service labels room |
| Press section | White, blue text, restrained row separation | Supports information scanning |
| Recruitment region | White lettering over the blue/media environment | Restores visual intensity before the footer |
| Footer | Solid blue, multicolor team marks, white utility icons | Connects the company to the league network |

The design does not depend on elevation. Hierarchy comes from scale, color inversion, empty space, overlap, and a small number of fine rules.

## Imagery

Baseball imagery is specific and recognizable: players in action, spectators, stadium interiors, team uniforms, and video-highlight montages. The supplied service capture also includes a collage of ballparks, a blue-sky career image, and merchandise arranged against a blue field.

The hero image is substantially darker than the white lettering. Preserve that contrast, but do not assume a single exact overlay opacity; exposure, broadcast graphics, and source footage all affect the result. The visible grain may be part of the media or a separate texture layer.

Service imagery uses recognizable branding and collages rather than generic stock photographs. Team logos remain in their original colors. Social symbols are white and visually compact. The slanted PLM wordmark should remain artwork rather than being approximated with ordinary text inside a rectangle.

### Observed Asset References

No image, font-file, or video asset URLs were supplied. The following inventory identifies visible assets without inventing paths.

| Asset group | Evidence | Implementation guidance |
| --- | --- | --- |
| PLM wordmark | Desktop/mobile header and footer | Use a suitable authorized logo asset; preserve the slanted plate and proportions. |
| Baseball media | Desktop/mobile opening and a lower desktop fragment | Supply a poster or media asset with comparable subject placement; crop separately for mobile. |
| YouTube highlight montage | Desktop service capture | Preserve its collage density and central channel branding. |
| Stadium collage | Partnership entry | Keep the multiple-venue composition rather than replacing it with one generic stadium shot. |
| Career and licensing imagery | Partly visible desktop service entries | Retain distinct subjects and their blue visual connections. |
| Six team marks | Desktop/mobile footer | Use separate transparent assets and optical sizing. |
| Social marks | Desktop/mobile footer | Use recognizable brand symbols with accessible link names. |

CSS reproduces the layout and hierarchy. It cannot replace the identity supplied by the baseball footage, service artwork, and team marks.

## Layout & Responsive Behavior

### Desktop Composition

At 1440px wide, main content sits between approximately `63px` side gutters. The opening media is shifted right while the headline begins at the left content edge. The desktop first viewport intentionally shows only part of the enormous slogan; the introduction continues well below the fold.

Services occupy a three-column spatial system with deliberate gaps. Press switches to a 40/60 heading/list split. Recruitment uses oversized English lettering with Japanese copy positioned alongside it. The footer distributes identity, navigation, and team affiliations across the width.

### Mobile Composition

At 390px wide, the main gutter becomes approximately `16px`. The opening media expands to full width, the desktop side navigation disappears, and the Japanese introductory statement moves below the four-line slogan.

Services become one column. Press links extend edge to edge while their contents retain the page gutter. Recruitment typography scales down sharply, but the measured 340px top padding remains. The footer reorganizes vertically while preserving a three-column team grid.

The mobile service section is taller than desktop, but the opening and recruitment sections become shorter. This is a composition change rather than uniform scaling of the desktop page.

### Responsive Limits

Only two widths were supplied. Exact breakpoints, intermediate tablet behavior, landscape layouts, maximum container width, browser-chrome resizing, and safe-area handling are unverified. The Quick Start's 767px breakpoint is a recommendation, not a recovered source value.

## Do’s and Don’ts

### Do

- Keep the primary palette anchored to measured blue `#0055B4` and white.
- Use genuinely compressed display forms for large English words.
- Preserve the outlined `OF SPORTS` line and its transparency.
- Let desktop headlines overlap the media rather than placing everything in separate boxes.
- Retain the service grid's empty cells and staggered row positions.
- Keep Japanese text readable with its own scale and generous paragraph leading.
- Use square image edges, thin rules, and broad section spacing.
- Preserve the three-by-two team grid on mobile.
- Keep team marks multicolor and social marks white.
- Treat mobile as a distinct composition, especially in the opening and footer.

### Don't

- Don't reduce the corporate homepage to one conversion block with repetitive feature cards.
- Don't replace compressed lettering with a wide geometric sans-serif at the same numeric size.
- Don't fill every desktop service-grid cell just to make the grid regular.
- Don't add rounded card shells, soft shadows, or unrelated accent colors.
- Don't stretch logos to match a uniform width and height.
- Don't assume the desktop menu's small square is a media playback control.
- Don't treat hidden DOM navigation as a verified open-menu design.
- Don't claim a video loop, hover zoom, sticky header, or parallax effect without evidence.
- Don't copy wrapper dimensions as image dimensions or parent font sizes as child-label sizes.
- Don't hardcode the measured document heights into a responsive implementation.

## Recommended Implementation Additions

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

- Give the graphical opening slogan an accessible text equivalent and establish a clear semantic heading hierarchy.
- Implement the menu as a named button with `aria-expanded`; verify keyboard operation, focus management, and dismissal behavior.
- Check accessible names for logo and social links. Empty extracted link text does not by itself establish whether image alternatives or ARIA labels already exist.
- Enlarge compact social-link hit areas without enlarging their visible symbols.
- Provide visible keyboard focus and ensure muted text has sufficient contrast when it carries necessary information.
- If using moving media, supply a poster and a usable pause or static alternative. Reduced motion should affect the media itself, not just CSS transitions.
- Reserve media dimensions to prevent layout shifts and load lower-page images progressively.
- Keep PDF format and file-size information next to press titles.
- Validate the English service descriptors before reuse.
- Test intermediate widths with the actual fonts: display-font fallback can materially alter line lengths and overlap.

## Agent Prompt Guide

### Quick Color Reference

- Main blue field and white-section text: `#0055B4`.
- Reversed text and content-section backgrounds: `#FFFFFF`.
- Team-grid rules: low-opacity white; exact source opacity unknown.
- Service-circle linework: low-opacity blue; exact source opacity unknown.
- Media: dark baseball photography or footage with enough contrast for white lettering.
- No independent bright CTA color: use blue/white inversion.

### Overall Prompt

“Create a Japanese sports-marketing corporate homepage inspired by the current PLM design. Use saturated blue #0055B4 and white, extremely compressed uppercase English display headings, bold Japanese statements, and dark baseball media. On desktop, place the opening media to the upper right and overlap it with a left-aligned four-line slogan whose second line is outlined. Continue with vision and mission, a white service section arranged in an intentionally incomplete three-column grid, a restrained press list, large recruitment typography, and a spacious blue footer. Keep six multicolor team marks in a thin-bordered three-by-two grid at all sizes. Recompose the opening and footer for mobile. Avoid rounded cards and shadows. Treat motion, menu choreography, and asset paths as implementation decisions unless separately supplied.”

### Example Component Prompts

1. **Opening:** “Build a blue corporate opening with offset dark baseball media, a slanted white brand plate, compact language controls, and huge compressed white lettering. Render the second headline line as a transparent white outline. At 390px, make the media full width, keep all four headline lines, and put the Japanese purpose statement beneath them.”
2. **Services:** “Arrange six image-led service links on a white three-column grid: heading/platform/streaming, then YouTube/partnership/empty, then empty/career/licensing. Use approximately 2% column gaps, generous row spacing, bold blue captions, and faint oversized circular background lines. Stack the links on mobile.”
3. **Press:** “Use a large two-line compressed blue heading on the left and a four-row release list on the right. Each link contains a date, Japanese title, and PDF size. Use fine separators and generous padding. On mobile, place the heading above edge-to-edge link rows with inset text.”
4. **Footer:** “Create a spacious #0055B4 footer with a large PLM-style brand asset, a compact two-by-two English navigation block, and six original team marks inside a three-by-two fine-line grid. Below, arrange six white social icons, related-service links, privacy, and muted copyright. Preserve the team grid on mobile and stack the other groups.”

## Quick Start

### CSS Custom Properties

This is a practical adaptation, not extracted source code. It preserves measured colors, major type sizes, gutter proportions, service placement, and footer structure. Hero text metrics, mobile image ratios, translucent colors, CTA fills, and the breakpoint are recommendations. Supply appropriate font files and actual media separately; fallback fonts will change the display geometry.

```css
:root {
  /* Measured brand colors */
  --color-blue: #0055b4;
  --color-white: #fff;

  /* Recommended approximations */
  --color-muted-on-blue: rgb(255 255 255 / 55%);
  --color-rule-on-blue: rgb(255 255 255 / 18%);
  --color-rule-on-white: rgb(0 85 180 / 22%);
  --color-media-shade: rgb(7 15 39 / 38%);

  /* Observed families, with additional practical fallbacks */
  --font-display: pressio-compressed, Impact, 'Arial Narrow', sans-serif;
  --font-ui: neue-haas-grotesk-display, Arial, sans-serif;
  --font-ja: noto-sans-cjk-jp, 'Noto Sans JP',
    'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;

  /* Endpoint-based adaptation; not recovered source formulas */
  --gutter: 4.4vw;
  --text-section: clamp(80px, 8.934vw, 128.653px);
  --text-recruit: clamp(106px, 19.092vw, 274.925px);
  --text-hero: clamp(140px, 19.201vw, 276.5px);
  --tracking-display: 0.04em;
  --tracking-nav: 0.11em;
  --section-space: 120px;
  --cta-size: 164px;
  --rule: 1px;

  /* Recorded durations and easing curves */
  --ease-fast-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-reveal: cubic-bezier(0.4, 0.005, 0.14, 1);
  --motion-ui: 500ms var(--ease-fast-out);
  --motion-reveal: 1000ms var(--ease-reveal);
}

.plm-page,
.plm-page * {
  box-sizing: border-box;
}

.plm-page {
  margin: 0;
  color: var(--color-blue);
  background: var(--color-white);
  font: 400 14px / 1.5 var(--font-ja);
}

.plm-page img,
.plm-page video {
  display: block;
  max-width: 100%;
}

.plm-page a {
  color: inherit;
}

.plm-page :focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 5px;
}

.section-title,
.recruit-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
}

.section-title {
  font-size: var(--text-section);
}

.recruit-title {
  font-size: var(--text-recruit);
}

.section-title > span,
.recruit-title > span,
.hero-title > span {
  display: block;
}

.section-subtitle {
  margin: 20px 0 0;
  font-size: 17.416px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* This opening block excludes the following vision/mission content. */
.hero-opening {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 41.725% minmax(0, 1fr);
  padding: 310px var(--gutter) 140px;
  color: var(--color-white);
  background: var(--color-blue);
}

.hero-media {
  position: absolute;
  z-index: -1;
  top: 72px;
  right: var(--gutter);
  left: 28.6%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111b31;
}

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

/* Adjust or remove this if the asset already contains dark treatment. */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-media-shade);
  pointer-events: none;
}

.hero-title {
  grid-area: 1 / 1 / 2 / 3;
  margin: 0;
  font: 700 var(--text-hero) / 0.89 var(--font-display);
  letter-spacing: 0.02em;
}

/* The original hero's exact lettering implementation is unknown. */
@supports (-webkit-text-stroke: 1px white) {
  .hero-title .outline {
    color: transparent;
    -webkit-text-stroke: 1px rgb(255 255 255 / 70%);
  }
}

.hero-tagline {
  grid-area: 1 / 2 / 2 / 3;
  align-self: end;
  max-width: 414px;
  margin: 0 0 36px;
  font-size: 40.478px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.intro-nav {
  position: absolute;
  top: 85px;
  left: var(--gutter);
  display: grid;
  gap: 6px;
  font: 600 17.064px / 1.5 var(--font-ui);
  letter-spacing: var(--tracking-nav);
}

.intro-nav a {
  text-decoration: none;
}

.services {
  position: relative;
  padding: var(--section-space) var(--gutter);
  background: var(--color-white);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2%;
  row-gap: 100px;
}

.service-heading { grid-area: 1 / 1; }
.service--platform { grid-area: 1 / 2; }
.service--streaming { grid-area: 1 / 3; }
.service--youtube { grid-area: 2 / 1; }
.service--partnership { grid-area: 2 / 2; }
.service--career { grid-area: 3 / 2; }
.service--licensing { grid-area: 3 / 3; }

.service-card {
  min-width: 0;
  text-decoration: none;
}

.service-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-blue);
}

.service-card__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card__title {
  margin: 12px 0 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
}

.service-card__descriptor {
  display: none;
}

.press {
  display: grid;
  grid-template-columns: 40% minmax(0, 60%);
  padding: var(--section-space) var(--gutter);
  background: var(--color-white);
}

.press-row {
  display: block;
  padding: 40px 0;
  border-bottom: var(--rule) solid var(--color-rule-on-white);
  text-decoration: none;
  transition: color var(--motion-ui), background-color var(--motion-ui);
}

.press-row:first-child {
  padding-top: 0;
}

.press-date,
.press-file {
  display: block;
  font-family: var(--font-ui);
}

.press-title {
  margin: 10px 0;
}

.more-link {
  display: grid;
  place-items: center;
  width: var(--cta-size);
  aspect-ratio: 1;
  color: var(--color-white);
  background: var(--color-blue);
  font-weight: 700;
  text-decoration: none;
}

.more-link--reverse {
  color: var(--color-blue);
  background: var(--color-white);
}

.recruit {
  padding: 340px var(--gutter) 130px;
  color: var(--color-white);
  background: var(--color-blue);
}

.recruit-copy {
  max-width: 608px;
  font-size: 21.966px;
  line-height: 2;
  letter-spacing: 0.04em;
}

.site-footer {
  padding: 160px var(--gutter) 150px;
  color: var(--color-white);
  background: var(--color-blue);
}

.footer-top {
  display: grid;
  grid-template-columns: 15.5% minmax(0, 1fr) 38%;
  column-gap: 7%;
  align-items: start;
}

.footer-logo {
  width: 100%;
  max-width: 204px;
  height: auto;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 14px 64px;
  font: 600 19.691px / 1.5 var(--font-ui);
  letter-spacing: var(--tracking-nav);
}

.footer-nav a,
.footer-legal a {
  text-decoration: none;
}

.club-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: var(--rule) solid var(--color-rule-on-blue);
  border-left: var(--rule) solid var(--color-rule-on-blue);
}

.club-grid a {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-right: var(--rule) solid var(--color-rule-on-blue);
  border-bottom: var(--rule) solid var(--color-rule-on-blue);
}

.club-grid img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.footer-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-top: 76px;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 33px;
  font-size: 15.927px;
  font-weight: 700;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 13px;
}

/* Recommended larger targets around approximately 26px symbols. */
.footer-socials a {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
}

.footer-socials img,
.footer-socials svg {
  width: 26px;
  max-height: 26px;
}

.footer-copyright {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-muted-on-blue);
  letter-spacing: 0.04em;
}

@media (hover: hover) {
  /* Recommended feedback; original hover endpoints were not supplied. */
  .press-row:hover .press-title,
  .footer-legal a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}

/* Recommended breakpoint; only 390px and 1440px were inspected. */
@media (max-width: 767px) {
  :root {
    --gutter: 4vw;
    --text-section: 80px;
    --text-recruit: 106px;
    --text-hero: 106px;
    --section-space: 80px;
    --cta-size: 94px;
  }

  .hero-opening {
    display: block;
    padding: 33svh var(--gutter) 100px;
  }

  .hero-media {
    inset: 0 0 auto;
    height: 75svh;
    aspect-ratio: auto;
  }

  .hero-title {
    line-height: 0.93;
    letter-spacing: 0.01em;
  }

  .hero-tagline {
    max-width: 100%;
    margin: 14px 0 0;
    font-size: 24px;
    line-height: 36px;
  }

  .intro-nav {
    display: none;
  }

  .section-subtitle {
    margin-top: 12px;
    font-size: 12px;
  }

  .services {
    padding-bottom: 50px;
  }

  .service-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 61px;
  }

  .service-grid > * {
    grid-area: auto;
  }

  /* Recommended crops, not measured mobile image-element ratios. */
  .service-card__media {
    aspect-ratio: 2 / 1;
  }

  .service--licensing .service-card__media {
    aspect-ratio: 3 / 4;
  }

  .service-card__title {
    font-size: 24px;
    line-height: 1.5;
  }

  .service-card__descriptor {
    display: block;
    margin: 4px 0 0;
    font-family: var(--font-ui);
    font-size: 14px;
  }

  .press {
    display: block;
    padding-bottom: 40px;
  }

  .press-list {
    margin-inline: calc(-1 * var(--gutter));
  }

  .press-row,
  .press-row:first-child {
    padding: 40px var(--gutter) 10px;
  }

  .recruit-copy {
    font-size: 16px;
    line-height: 32px;
  }

  .site-footer {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .footer-top {
    grid-template-columns: 34% minmax(0, 1fr);
    column-gap: 10%;
    row-gap: 32px;
  }

  .footer-logo {
    max-width: 86px;
  }

  .footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    min-height: 70px;
    font-size: 14px;
  }

  .club-grid {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 50px;
  }

  .footer-socials {
    order: -1;
    justify-content: space-between;
    gap: 0;
    padding-inline: 12px;
    margin-bottom: 60px;
  }

  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    font-size: 14px;
  }

  .footer-copyright {
    margin-top: 24px;
    font-size: 12px;
    text-align: center;
  }
}

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

  .plm-page .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}
```

### Markup and Asset Notes

Use the service placement classes on six anchors, with `.service-heading` as their first grid sibling. Each service anchor should contain `.service-card__media`, `.service-card__title`, and, where appropriate, `.service-card__descriptor`.

For `.hero-title`, use four block spans in the observed order and apply `.outline` to the second. A semantic text heading is a recommended accessibility adaptation because the original slogan's markup is not established. Keep the Japanese statement in `.hero-tagline`.

The footer expects `.footer-top` to contain the logo, navigation, and `.club-grid`; `.footer-bottom` contains legal links, social links, and copyright. Add accessible names to icon links. Supply actual assets rather than fabricated source paths.

The starter intentionally omits unverified menu choreography, exact decorative-circle placement, hero media pinning, and CTA inner artwork. A real media element also needs separate playback and reduced-motion handling; CSS alone does not stop a video.

### Tailwind v4 Token Mapping

Optional aliases for a project that already uses Tailwind v4. This does not imply that the original site uses Tailwind. Define the custom properties above first.

```css
@theme inline {
  --color-plm-blue: var(--color-blue);
  --color-plm-white: var(--color-white);
  --color-plm-muted: var(--color-muted-on-blue);
  --color-plm-rule: var(--color-rule-on-blue);

  --font-plm-display: var(--font-display);
  --font-plm-ui: var(--font-ui);
  --font-plm-ja: var(--font-ja);

  --text-plm-section: var(--text-section);
  --text-plm-recruit: var(--text-recruit);
  --text-plm-hero: var(--text-hero);

  --spacing-plm-gutter: var(--gutter);
  --spacing-plm-section: var(--section-space);
  --spacing-plm-cta: var(--cta-size);
}
```

## Sources & Evidence

- **Inspected original and final website:** [Pacific League Marketing](https://www.pacificleague.jp/). Both supplied URLs are identical, and the reported response status is HTTP 200.
- **Capture timestamp:** September 29, 2026, `2026-09-29T13:24:32.701Z`, corresponding to 22:24:32 JST.
- **Desktop evidence:** 1440 × 1000 viewport; three current-page screenshots covering the opening, a service-grid region, and the lower-page/footer region; rendered text, links, computed styles, and full-page element coordinates.
- **Mobile evidence:** 390 × 844 viewport; two current-page screenshots covering the opening and footer; rendered text, links, computed styles, and full-page element coordinates.
- **Inspection process reported by the collector:** at least five seconds of initial observation, document/image readiness checks, finite-animation and layout settling checks, and scrolling through intermediate positions. Perpetual animations were temporarily paused during readiness checks and resumed afterward. Service workers and SharedWorkers were disabled.
- **Limits:** no independent browsing was performed for this reference. Menu activation, hover states, language switching, media controls, destination pages, PDF contents, complete stylesheets, asset URLs, animation keyframes, and intermediate responsive widths were not supplied or exercised. Readiness checks do not prove that every delayed component or interaction was captured.

This reference describes the current supplied homepage evidence. Measured values document those two viewport states; visual estimates and implementation recommendations are identified separately.