# SURUGA bank Recruiting Site — Style Reference

> A bright blue gathering of illustrated bankers, framed by generous white space and clear recruitment navigation.

**Website:** [SURUGA bank Recruiting Site](https://www.surugabank.co.jp/surugabank/recruitment/)
**Original URL:** https://www.surugabank.co.jp/surugabank/recruitment/
**Final URL:** https://www.surugabank.co.jp/surugabank/recruitment/
**Theme:** light; white canvas, sky-blue illustration fields, and stronger blue actions.
**Inspected:** September 13, 2026, at 03:48 JST. The supplied retrieval timestamp is September 12, 2026, at 18:48:27.206 UTC.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Scope:** the current recruitment homepage, using three desktop captures, two mobile captures, rendered page text and links, selected element geometry, computed styles, and exposed custom properties. Linked detail pages and application forms were not inspected. The supplied browser record reports HTTP 200 with no URL change.

This is a recruitment website with several information routes: company background, working conditions, employee interviews, application categories, and supporting information. Its homepage combines an expressive illustrated introduction with a long, orderly sequence of editorial and navigation sections.

The strongest visual relationship is between the two blues. A lighter blue supports a lively perimeter of illustrated people and large white content panels. A stronger blue identifies application links, circular arrows, small markers, and the full-width closing entry banner. Japanese sans-serif text, fine rules, and generous vertical spacing keep the experience composed. Pink, lime, purple, and orange belong mainly to the illustrations.

The design uses several container widths rather than one universal grid: a nearly full-width hero, narrower editorial sections, wider white panels inside a blue field, and a separate footer measure. On mobile, the hero artwork is recomposed, the interview rail presents one full card, and the footer becomes a compact hierarchy of navigation groups.

## How to Read This Reference

- **Measured** means supplied computed styles or rendered DOM geometry. Values are CSS pixels unless otherwise stated.
- **Derived** means arithmetic from measured positions or sizes, such as the gap between consecutive interview cards.
- **Estimated** means visual reading of the supplied original-page screenshots. Hero lettering, several radii, and lower-page component dimensions fall into this category.
- **Declared only** means a custom property exists in the supplied evidence, but its use on a particular visible element is not established.
- **Recommended** means implementation guidance for a new project. The CSS starter is an adaptation, not recovered source code.
- Desktop document elements measure 1425px wide inside the 1440px viewport; mobile elements measure 375px inside the 390px viewport. The consistent 15px difference is compatible with a reserved scrollbar gutter. Do not reproduce it as a hardcoded page margin.
- Detailed element samples extend through the interview region. Later sections have page text and link evidence, plus the supplied desktop panel and desktop/mobile footer captures. Their unsupported details remain unverified.
- Static captures establish appearance, not a complete interaction model. Menu opening, dismissal, FAQ expansion, carousel controls, and animation timing were not exercised in the supplied record.

## Tokens — Colors

### Default Palette

The aliases below are descriptive implementation names. Source variable names are included where available.

| Name | Value | Source / suggested alias | Evidence and role |
| --- | --- | --- | --- |
| Action Blue | `#036dd6` | Source `--color-primary`; alias `--sb-primary` | Exact source value; the header ENTRY link and interview badges compute to this fill. Visually consistent with circular arrows and the closing entry band. |
| Sky Blue | `#60adf9` | Source `--color-blue`; alias `--sb-sky` | Exact declared value, visually consistent with the hero and the background around the large white panels. Those background elements are not individually sampled. |
| White | `#ffffff` | Source `--color-white`; alias `--sb-white` | Exact source value and measured reversed ENTRY text. White canvas and panels are visible in the captures. |
| Link Ink | `#111111` | Source `--color-text`; alias `--sb-ink` | Measured navigation, announcement, and interview-link text. |
| Body Black | `#000000` | Source `--color-black` | Measured body, mission, and personality text. Do not describe every text node as `#111111`. |
| Personality Beige | `#fdf6ee` | Source `--color-beige`; alias `--sb-beige` | Measured background of the personality section on both viewports. |
| Notice Gray | `#f7f7f7` | Source `--color-bg-gray`; alias `--sb-soft` | Exact declared value, visually consistent with the announcement surface. The sampled outer section is transparent. |
| Structural Gray | `#c8c9ce` | Source `--color-border-gray`; alias `--sb-rule` | Declared border token, consistent with the footer separator. Exact per-rule assignments are unverified. |
| Light Rule | `#e6e6e6` | Source `--color-border-gray2`; alias `--sb-rule-light` | Declared lighter border token; useful for the panel-row treatment. |
| Muted Text | `#888888` | Source `--color-text-gray`; alias `--sb-muted` | Declared token, visually compatible with copyright text; that text's computed color was not supplied. |

The visible canvas is white, although the sampled HTML and BODY backgrounds are transparent. That distinction matters when interpreting computed values.

### Illustration Accents

| Accent | Appearance | Use and certainty |
| --- | --- | --- |
| Pink | Bright, warm pink | Speech bubbles and small expressive marks; visually observed, exact color unmeasured. |
| Lime | Vivid yellow-green | Sparkles, expressive bubbles, clothing details, and the career-support icon; visually observed. |
| Purple | Medium violet | Question and heart bubbles; visually observed. |
| Orange | Saturated orange | Circular background behind the floating ENTRY portrait; visually observed. |
| Clothing neutrals | Beige, brown, gray, and navy | Flat fills inside dark, irregular outlines; visually observed. |

Keep these accents local to artwork. They do not form a separate set of application-button colors.

### Other Declared Colors

The source also exposes `--color-secondary: #d6410b`, `--color-light-blue: #e0f0ff`, `--color-light-blue2: #f3faff`, and `--color-light-orange: #fffaf5`. Their prominent use on this homepage is not established. In particular, the declared secondary orange is not evidence for an orange primary CTA.

No theme selector or alternative color preset is established by the supplied evidence.

## Tokens — Typography

### Japanese Interface and Editorial Text

- **Measured computed family:** `"Zen Kaku Gothic New", sans-serif` on the body, navigation, announcement, mission, personality, and interview text.
- **Measured weights:** `400` on the body; `500` on much of the editorial text and navigation; `700` on personality titles and the mission section's onward link.
- **Character:** open, readable Japanese sans-serif text with moderate weight. The design does not depend on uniformly heavy headings.
- **Source alias:** `--font-zkg`.
- **Implementation alias:** `--sb-font-jp`.

The source additionally declares `--font-yakuhan-jp: "YakuHanJP", "Zen Kaku Gothic New", sans-serif`. That stack is available in the source, but its assignment to the sampled text is not established. Computed family strings also do not independently prove which font file supplied every rendered glyph.

### English Labels and Application Text

The desktop header's ENTRY label measures **Poppins, 15px, weight 600, line-height 22.5px, and 0.6px tracking**. Its source family token is `--font-poppins`.

`"Inter", sans-serif` is also declared through `--font-inter`, but no sampled element establishes its use. Do not automatically assign Inter or Poppins to every English overline, date, or copyright label.

Small blue uppercase labels introduce Japanese section headings. The visible workplace label is spelled `WORK ENVIROMENT`; preserve that spelling only when reproducing the exact source UI. A new implementation can use `WORK ENVIRONMENT`.

### Logo and Hero Lettering

The sampled H1 has empty extracted text and contains the home link/brand area. Its computed 32px font size is not a measurement of the hero headline or the wordmark artwork.

The hero reads `ユニークな発想が 銀行を変える` in the screenshots. Its text does not appear in the supplied page-text extraction or sampled heading elements. It may be rendered through an image, SVG, or another unsampled structure. Its font family, text semantics, and asset format are unverified.

### Measured Type Scale

| Role | Desktop | Mobile | Weight and tracking |
| --- | --- | --- | --- |
| Body baseline | `16px / 24px` | `16px / 24px` | `400`; normal tracking |
| Primary navigation | `14px / 21px` | Desktop navigation absent from the initial mobile view | `500`; `0.05em` |
| Header ENTRY | `15px / 22.5px` | Header pill absent from the initial mobile view | Poppins `600`; `0.04em` |
| Announcement label | `14px / 21px` | `16px / 24px` | `500`; `0.02em` |
| Announcement copy | `14px / 24.5px` | `14px / 24.5px` | `500`; `0.02em` desktop, `-0.01em` mobile |
| Mission statement | `38px / 60.8px` | `28px / 44.8px` | `500`; `-0.04em` desktop, `0.04em` mobile |
| Mission paragraph | `18px / 36px` | `16px / 32px` | `500`; `0.06em` |
| Mission onward link | `18px / 27px` | `16px / 24px` | `700`; `0.02em` |
| Personality title | `22px / 28.6px` | `18px / 23.4px` | `700`; normal tracking |
| Personality description | `15px / 26.25px` | `14px / 22.4px` | `500`; normal desktop, `0.02em` mobile |
| Interview introduction | `16px / 28px` | `14px / 24.5px` | `500`; `0.02em` |
| Interview job title | `22px / 33px` | `18px / 27px` | `500`; `-0.01em` |
| Interview metadata | `14px / 24.5px` | `14px / 23.1px` | `500`; normal tracking |
| Interview badge | `14px / 24.5px` | `14px / 24.5px` | `500`; `-0.01em` |

Several sampled section H2 wrappers compute to `24px / 36px`. These wrappers contain composite headings, so that value does not establish the size of every visible child label. The much larger workplace heading in the screenshot should not be forced to 24px on that basis.

### Visual Type Estimates

| Role | Estimated desktop appearance | Estimated mobile appearance |
| --- | --- | --- |
| Hero headline | About `48px`, two lines, generous tracking | About `28px`, two lines, roughly `38px` line-height |
| Hero supporting copy | About `14px`, centered, widely spaced lines | About `13px`, roughly `23px` line-height, many short lines |
| Workplace/About panel heading | About `40px` | Not visually captured |
| Workplace link-row label | About `24px` | Not visually captured |
| Large closing ENTRY word | About `56px`, widely tracked | Full mobile banner not captured |
| Mobile footer group label | — | About `18px` |
| Copyright | About `10–11px` | About `10–11px`, wrapping to two lines |

These estimates are suitable starting points for reconstruction, not recovered source declarations.

## Tokens — Spacing & Shapes

**Rhythm:** frequent multiples of 8px, with smaller optical adjustments around type, icons, and pills. This is a descriptive pattern; no universal spacing-unit variable was supplied.

### Spacing Scale

| Value | Use | Evidence |
| --- | --- | --- |
| `4px` | Navigation-label to chevron gap | Measured |
| `8px` | Announcement bullet to label | Measured |
| `12px` | Mobile interview badge's top and right insets | Derived from element positions |
| `16px` | Desktop interview badge's top and right insets | Derived |
| `20px` | Mobile logo's left/top position; mission-link icon gap | Measured |
| `24px` | Mobile editorial side gutters; desktop navigation item gaps; mobile interview gap | Measured or derived |
| `32px` | Desktop personality column gaps | Derived from repeated column positions |
| `40px` | Mobile introduction-to-interview-card gap | Derived |
| `48px` | Desktop interview gap; mission onward-arrow box | Derived / measured |
| `56px` | Desktop interview introduction-to-card gap | Derived; also the estimated separation between large white panels |
| `64px` | Mobile personality top/bottom padding and following section gap | Measured / derived |
| `72px` | Mobile announcement-to-mission gap | Derived |
| `96px` | Desktop personality bottom padding | Measured |
| `112px` | Desktop personality top padding; announcement-to-mission and personality-to-interview gaps | Measured / derived |

### Border Radius

| Element | Value or treatment | Evidence |
| --- | --- | --- |
| Desktop hero | Approximately `24px` | Screenshot estimate |
| Mobile hero | Approximately `10px` | Screenshot estimate |
| Large white panels | Approximately `24px` | Screenshot estimate |
| Workplace photograph | Approximately `8px` | Screenshot estimate |
| Announcement surface | Approximately `8px` | Screenshot estimate |
| Floating entry panel | Small upper corner rounding, approximately `8px` desktop | Screenshot estimate; lower edge is outside the initial capture |
| Header ENTRY and interview badges | Fully rounded pill | Computed radii include `1440px` desktop and `844px` mobile for badges; use a large reusable radius such as `999px` |
| Mobile menu | `50%`, `40 × 40px` box | Measured |
| Circular onward arrows | Usually about `40px`; mission arrow box `48px` | Screenshot estimate / DOM measurement |
| Mobile footer plus circles | Approximately `32px` | Screenshot estimate |

### Layout Measurements

| Element | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Document width | `1425px` | `375px` | Measured within the stated viewports |
| Document height | `9076.58px` | `8643.91px` | Measured; reported rounded heights are 9077 and 8644 |
| Header height | `108.78px`; token `109px` | `86px`; token `86px` | Measured |
| Header brand box | `240 × 48.78px`, at `(44, 30)` | `180 × 42px`, at `(20, 20)` | Measured |
| Header ENTRY | `137.83 × 41.5px` | Not shown | Measured |
| Hero | About `1335 × 664px`, with about `45px` side margins | About `343 × 500px`, with `16px` side margins | Screenshot estimate |
| Editorial container | `1040px`, left edge `192.5px` | `327px`, left edge `24px` | Measured |
| Announcement region | `103px` high | `200px` high | Measured |
| Mission statement column | `477px`, left edge `755.5px` | `327px`, left edge `24px` | Measured |
| Interview card | `496 × 420.64px` | `327 × 317.58px` | Measured link bounds |
| Interview card pitch | `544px` | `351px` | Derived; includes the gap |
| Workplace white panel | About `1160 × 614px` | Not visually captured | Screenshot estimate |
| Workplace inner columns | About `528px + 64px gap + 408px` | Not visually captured | Screenshot estimate |
| Workplace photograph | About `408 × 470px` | Not visually captured | Screenshot estimate |
| Closing entry band | About `234px` high | Only the bottom edge is visible in the footer capture | Screenshot estimate |
| Footer content measure | About `1120px` | About `327px` | Screenshot estimate |

## Components

### Site Header

**Role:** establish the bank's identity and expose the primary recruitment routes.

The desktop header is a spacious white strip. The black bilingual brand and Recruiting Site descriptor sit at the left. Four navigation groups occupy the right side, followed by a blue ENTRY pill. Ordinary navigation uses 14px medium Japanese text with 0.05em tracking. The people and job-description controls are sampled as buttons with a small downward chevron; company and workplace routes are sampled as links.

The ENTRY link has measured padding of `7px 42px 8px`, white Poppins text, and a fully rounded silhouette. Its destination is the site's `/entry/` route.

On mobile, the header retains the smaller brand and a 40px blue circular menu affordance with two short white horizontal strokes. The desktop navigation and header ENTRY pill are not visible. The circle's button node has a transparent computed background, so its visible blue may belong to an unsampled child or pseudo-element.

Submenu links exist in the DOM, but their recorded bounds do not prove that the menus were open. Opening behavior, focus handling, and scroll-dependent header behavior are unverified.

### Illustrated Hero

**Role:** express the recruitment message through a friendly, recognizable visual scene.

A large sky-blue rectangle with rounded corners fills most of the initial desktop view. Approximately fourteen illustrated office workers lean inward from the perimeter. Their bodies are cropped by the frame, while their faces point toward the center. Flat suit colors, simple faces, and dark irregular outlines give the illustration a hand-drawn quality.

Pink, lime, purple, and blue speech marks sit between the figures. Hearts, question marks, exclamation marks, and sparkles make the surrounding group expressive without crowding the central message. Two long white diagonal strokes flank the headline.

The headline `ユニークな発想が 銀行を変える` is centered on two lines. A compact block of white supporting copy sits below it. The artwork carries the visual density; the center remains open.

The mobile hero uses roughly six figures, three near the top and three near the bottom. It is a tall composition, approximately 500px high, rather than a narrow crop of the desktop arrangement. Supporting copy becomes a sequence of short centered lines. Exact image assets and text-rendering methods are not exposed.

### Event Announcement

**Role:** surface the current recruitment announcement immediately below the hero.

A pale-gray rounded surface sits inside the editorial container. Desktop anatomy is a small blue bullet, the label `イベント情報`, and a two-line underlined announcement link with an external-link indicator. The label and announcement are arranged horizontally.

The current announcement references the 2027 graduate intake and links to an external application agreement URL. The visible notice copy uses 14px medium text at 24.5px line-height.

On mobile, the surface is approximately 327px wide and 200px high. The label grows to 16px and occupies its own row, followed by a thin horizontal divider and wrapped announcement copy. The initial mobile capture shows the floating entry panel overlapping the notice's lower-right area.

### Section Heading and Mission Block

**Role:** move from the introductory message into the bank's stated purpose.

Section identification pairs a small English overline with a Japanese heading. In the desktop mission area, this heading sits at the left of the 1040px editorial container, while the main statement occupies a 477px column toward the right.

The statement begins `あってよかった、出会えてよかった、` and measures 38px with a spacious 60.8px line-height. The paragraph below uses 18px medium text with a 36px line-height and 0.06em tracking. An onward link combines bold Japanese text, a 20px gap, and a 48px arrow box.

Mobile places the section heading, statement, paragraph, and link in one 327px column. The statement changes to 28px, positive tracking, and four lines. The onward link aligns toward the right. The recorded section extends substantially below the text; the supplied screenshots do not establish the appearance of that remaining region.

### Personality Groups

**Role:** explain three desired qualities: `アジャイル`, `チャレンジ`, and `相手の気持ちに寄り添う`.

This section has a measured beige background, `#fdf6ee`. Desktop padding is 112px above and 96px below. Repeated heading and paragraph positions establish three evenly spaced columns within the editorial container. The derived outer column width is approximately 325.33px, with 32px gaps and paragraph insets of about 32px.

Titles are bold at 22px; descriptions are medium at 15px with a 1.75 line-height. On mobile, the three groups become vertical. Titles reduce to 18px, while description blocks measure 171px wide and begin at x = 156px inside the 375px document. This establishes a local side-by-side content arrangement beneath the titles, not merely full-width paragraphs.

The mobile paragraph positions suggest a neighboring visual region, but the actual imagery and its treatment are not shown in the supplied captures. Do not invent those illustrations or their animation.

### Employee Interview Rail

**Role:** introduce distinct jobs through employee interview links.

The desktop section header places the bilingual title at the left and a two-line introduction toward the right. The introduction uses 16px medium text with 28px line-height. On mobile, the title and a 14px introduction stack vertically.

Each interview link contains a media region, a blue `新卒` pill near the upper-right corner, a job title, and metadata for work location and tenure. Desktop cards measure 496px wide and approximately 420.64px high. Adjacent starts are 544px apart, producing a 48px gap. Mobile cards measure 327px wide, with a 24px gap and approximately 317.58px total height.

Job titles reduce from 22px to 18px. Desktop metadata sits on one horizontal line; mobile location and tenure occupy separate lines. The badge remains approximately `57.73 × 28.5px` on both viewports, with padding `1px 15px 3px`.

The DOM contains repeated sets of eight distinct interview destinations, including mortgage sales, financial advising, corporate sales, and branch administration. The large negative and positive x positions establish a horizontal rail with repeated content, consistent with a looping implementation. They do not establish autoplay, speed, swipe behavior, or a slider library. Repeated nodes should not be interpreted as additional unique employees.

### Workplace Navigation Panel

**Role:** direct candidates to benefits and career support.

The desktop capture shows a white panel approximately 1160px wide, set inside a sky-blue section. The panel has roughly 24px corners and generous internal padding: about 80px horizontally and 72px vertically.

Its left column contains the blue overline, the large `働く環境を知る` heading with an outlined blue circular arrow, a short description, and two full-width link rows. Each row uses a small illustrated topic icon, a large Japanese label, and a filled blue circular arrow aligned at the right. Thin gray rules separate the rows.

The observed links are `福利厚生` and `社員のキャリア支援`, leading to the workplace page's `#welfare` and `#career` anchors. The icons show a hand supporting a heart and a person climbing steps.

The right column contains a portrait-oriented photograph of hands using a calculator beside a clipboard. It measures approximately 408 × 470px, has small rounded corners, and uses natural photographic color. The two columns are separated by approximately 64px. Mobile panel arrangement is not visually established.

### Company Navigation Panel

**Role:** provide a compact route into the company-information hierarchy.

A second large white rounded panel follows the workplace panel with approximately 56px of blue space between them. Its upper-left region repeats the blue English overline, large Japanese title, outlined circular arrow, and brief explanatory copy.

The visible upper portion of its right side contains a ruled navigation list with a small bank-building illustration, the label `スルガ銀行について`, and a filled blue arrow circle. Rendered links establish additional routes for philosophy/vision, recruitment policy, history, and company data. The complete panel is not visible, so its total height and all row placements are unmeasured.

### FAQ and News

**Role:** answer practical candidate questions and communicate updates.

The rendered text contains six FAQ questions covering qualifications, academic background, job-category selection and changes, departments, and salary progression. No expanded answers or exercised disclosure states are supplied. An accordion is a reasonable implementation recommendation, but its behavior cannot be reported as verified.

The news section includes the date `2025.01.30`, a message stating that the recruitment homepage was renewed, and an onward link to the news index. This is current page content; the date does not independently establish the deployment history of every present component. Detailed FAQ and news styling is outside the supplied visual captures.

### Recruitment Categories and Group Links

**Role:** let candidates select an appropriate application route and discover related employers.

The page provides five recruitment categories: new graduates, recent graduates, mid-career applicants, returning employees, and referral recruitment. The same five-way structure is repeated in the floating entry panel and footer.

The group-recruitment area links to `スルガビジネスソリューション株式会社` and `ダイレクトワン株式会社`. In the desktop footer-region capture, these links form a two-column strip with thin top and bottom rules, a short central divider, and black circular external-link icons. The links' destinations are evidenced; the destination pages were not inspected.

### Full-Width Entry Banner

**Role:** provide a clear application destination near the end of the homepage.

A saturated action-blue band spans the desktop document width and is approximately 234px high. It centers a large, widely tracked white ENTRY label, a smaller Japanese descriptor, and a white circular arrow to the right. The whole evidenced link leads to `/entry/`.

Its scale distinguishes it from the compact header pill and the informational link rows. The supplied mobile footer capture includes only the bottom edge of this band, so the full mobile banner layout is unverified.

### Floating Entry Panel

**Role:** keep the five application-category links close to the initial browsing experience.

The initial desktop and mobile captures show a white panel at the lower right, outlined with a thin dark border. A small illustrated portrait on an orange circle sits beneath an ENTRY caption on the left. Five vertically stacked links with blue bullets occupy the right. A black circular close affordance sits near the upper-right corner.

Its visible desktop portion is approximately 339px wide and 184px high. The mobile portion is approximately 266px wide and 149px high. These are visible bounds, not confirmed full panel heights; the lower boundary is outside the initial captures.

Its location suggests viewport anchoring, but the positioning declaration is not supplied. The panel is absent from the footer captures; the reason could be visibility logic or capture state and is unverified. Closing behavior and persistence were not tested.

### Footer

**Role:** provide a complete secondary navigation structure and institutional links.

The desktop footer returns to white. A brand block at the left includes a compact ENTRY pill and underlined corporate, privacy, and recruitment-policy links with external-link marks. To the right are company links, workplace/people links, and recruitment categories. Fine typography and generous spacing keep the sitemap readable without boxing each group.

A long thin rule separates the lower utility row. The copyright identifies `SURUGA bank Ltd.` and shows 2025. A compact PAGE TOP link with a small blue upward-arrow circle sits at the right and targets `#top`.

The mobile footer is substantially reorganized. The logo appears first, followed by four ruled navigation rows. Company, people, and recruitment rows show gray circles with plus signs; the workplace row has a right arrow. The captured state presents collapsed group affordances, while the link evidence still contains their child destinations.

A nearly full-width blue ENTRY pill follows the navigation, approximately 327 × 64px. Institutional links are centered below it. The copyright wraps to two lines, with PAGE TOP retained at the lower right. Disclosure behavior and page-top scrolling animation are unverified.

## Tokens — Motion & Interaction

### Measured Transition Declarations

| Element | Supplied computed declaration | What it establishes |
| --- | --- | --- |
| Site header | `translate 0.3s ease-out` | A 300ms translation transition is defined; the trigger and travel distance are not supplied. |
| Primary navigation links/buttons | `color 0.3s` | A 300ms color transition is defined; hovered and focused endpoint colors were not sampled. |
| Announcement and mission links | `color 0.3s` | Consistent short color feedback is available. |
| Header ENTRY link | `color 0.3s, opacity 0.3s 0.2s, translate 0.4s 0.2s` | Color plus delayed opacity and translation transitions are defined. Starting states and triggers are unverified. |
| Sampled headings and card links | Frequently reported as `transition: all` and `animation: none` | The shorthand without duration information is insufficient to claim a visible transition. `animation: none` on sampled nodes does not rule out motion on descendants or through scripts. |

### Declared Easing Library

The source exposes many easing variables, including:

- `--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94)`.
- `--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1)`.
- `--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1)`.
- `--ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275)`.

These declarations are not evidence that the hero bounces, cards spring, or sections animate with those curves.

### Interaction Limits

Navigation targets and several link/button roles are established. The interview rail has repeated content and offscreen geometry. The mobile footer shows plus controls, and the floating panel shows a close control. No supplied interaction trace proves their complete behavior.

For a new implementation, short color feedback and restrained arrow movement are compatible recommendations. Keep motion secondary to reading, and provide a static, keyboard-usable interview presentation. Do not invent hero animation, parallax, automatic carouselling, or scroll-triggered entrance sequences as source facts.

## Surfaces

| Surface | Appearance | Structural purpose |
| --- | --- | --- |
| Main canvas | White | Supports the header, editorial content, and footer with generous whitespace. |
| Hero field | Sky blue with rounded outer corners | Creates a distinct illustration scene and keeps the message visually central. |
| Personality section | Flat warm beige | Separates the three desired qualities from neighboring white sections. |
| Navigation-panel field | Sky blue | Groups large white workplace and company-information panels. |
| Large content panel | White, rounded, without a visible shadow | Separates content by silhouette and color contrast. |
| Announcement | Very pale gray with modest rounding | Marks a current update without competing with the hero. |
| Link rows | White, thin gray dividers, circular blue arrows | Organizes navigation through rhythm and alignment. |
| Application emphasis | Solid action blue with white type | Distinguishes ENTRY destinations. |
| Floating panel | White with a thin dark outline | Makes an overlay legible over page content. |

No broad shadow-elevation system, glass blur, or gradient treatment is visible in the supplied captures. Separation comes mainly from white space, flat color, rules, and shape.

## Imagery

The hero uses flat human illustration with irregular dark outlines, understated faces, and cropped office clothing. Figures are rotated and distributed around the edges, producing a gathering around the central copy. Preserve that composition: the people should feel like participants looking inward, while the message retains clear space.

The small topic icons share the same approachable drawing vocabulary. The heart-in-hand, ascending steps, and classical bank-building symbols have a few strong color fills and dark outlines. The orange-backed ENTRY portrait connects the application panel to the hero's human tone.

Photography supplies a different kind of detail. The observed workplace image shows a practical banking task through hands, a calculator, a pen, and a blue clipboard. It has natural color and a soft background, without a heavy color overlay. Its modestly rounded portrait crop balances the broad white panel.

Do not apply pixelated rendering to these assets. Their visible character comes from the illustration's linework and flat fills, not from deliberate low-resolution scaling.

### Observed Asset References

| Asset or region | Path availability | Evidence and implementation note |
| --- | --- | --- |
| Bank/recruiting wordmark | Asset URL not exposed | Visible in both headers and footers. Preserve its proportions and use the authorized brand asset. |
| Desktop hero artwork | Asset URL not exposed | Visible perimeter composition with approximately fourteen figures. Format and text embedding are unverified. |
| Mobile hero artwork | Asset URL not exposed | Visibly recomposed with approximately six figures. Use an art-directed mobile asset or layout. |
| Workplace photograph | Asset URL not exposed | Calculator and clipboard image visible in the desktop white panel. |
| Topic illustrations | Asset URLs not exposed | Heart/hand, steps/person, and bank-building motifs visible in the desktop panel capture. |
| Floating ENTRY portrait | Asset URL not exposed | Small illustrated person on an orange circle. |
| Interview media regions | Asset URLs not exposed | Their card structure is supported by DOM geometry; individual image subjects and crops are not visually established. |
| Organization-chart image link | `img/global/organization-chart_2025.jpg` relative to the recruitment root | Present as the `組織図` link destination. The image itself was not inspected and is not a design reference here. |

The evidence does not identify an icon library, hero-image format, or production toolchain. Supply authorized assets explicitly; do not guess their original filenames.

## Layout & Responsive Behavior

### Page Sequence

The rendered homepage follows this sequence: header and hero, event announcement, mission, personality, interviews, workplace information, company information, FAQ, news, recruitment categories, group links, closing ENTRY banner, and footer. The floating entry panel is an additional overlay visible in the initial captures.

### Desktop Structure

The hero reaches close to the document edges, leaving about 45px on each side. Editorial sections use a measured 1040px centered container. The mission deliberately leaves substantial space on the left, while its statement and paragraph occupy the right side.

The interview cards extend as a horizontal sequence beyond the central measure. Two full 496px cards fit into 1040px with their 48px gap. The white workplace/company panels are wider, approximately 1160px, and the footer uses a roughly 1120px content measure.

### Mobile Changes

| Region | Observed adaptation |
| --- | --- |
| Header | Height reduces to 86px; brand becomes 180px wide; primary navigation is replaced by a 40px circular menu control. |
| Hero | Changes from a wide scene to a 343 × 500px composition with fewer figures and narrower copy. |
| Announcement | Horizontal label/copy arrangement becomes stacked, with a divider. The label increases from 14px to 16px. |
| Mission | Left/right desktop composition becomes one column; statement reduces from 38px to 28px and changes tracking. |
| Personality | Three desktop groups become vertically ordered groups with localized narrow description columns. |
| Interview introduction | Desktop title/description relationship becomes a single-column header. |
| Interview cards | One full 327px card fits the editorial measure; gap reduces to 24px; metadata stacks. |
| Floating entry panel | Uses a narrower lower-right presentation and overlaps the announcement in the initial view. |
| Footer | Sitemap columns become ruled navigation groups with plus/arrow affordances, followed by a large ENTRY pill and centered institutional links. |

The source declares breakpoint values `375`, `768`, `1024`, and `1280` through `--screen-xs`, `--screen-md`, `--screen-lg`, and `--screen-xl`. The actual media-query rules were not supplied, so these values do not prove where each transformation occurs.

The starter below uses 1024px for the header and large-panel layout changes and 768px for the narrower composition. These are recommended implementation thresholds. Test intermediate widths, text zoom, and long Japanese labels instead of treating the two captured endpoints as a complete responsive specification.

## Do’s and Don’ts

### Do

- Preserve the separation between sky-blue illustration fields and stronger blue application actions.
- Keep the desktop hero wide and the phone hero deliberately recomposed.
- Frame the hero message with people and speech marks, leaving the center open.
- Use Zen Kaku Gothic New for the measured Japanese text roles and Poppins for the evidenced ENTRY treatment.
- Maintain medium-weight editorial text and spacious paragraph leading.
- Retain different container widths for the hero, editorial content, large panels, and footer.
- Use circular arrows, thin row dividers, and flat white surfaces for navigation.
- Preserve the pale beige personality section.
- Keep the five application categories consistent wherever they repeat.
- Treat employee title, location, and tenure as structured content within each interview link.
- Design the mobile footer as a navigable hierarchy, with a prominent application link below it.

### Don't

- Don't spread pink, lime, purple, and orange across unrelated UI controls.
- Don't replace the hero's inward-facing ensemble with a generic full-bleed office photograph.
- Don't shrink the complete desktop illustration into the phone frame.
- Don't apply heavy shadows, glossy gradients, or glass effects to the white panels.
- Don't make all headings bold or assign an unverified font to the hero artwork.
- Don't interpret the logo wrapper's 32px font size as the hero headline size.
- Don't hardcode the capture's 15px viewport/document difference into the layout.
- Don't render duplicated interview nodes as forty unique stories.
- Don't infer autoplay or a particular animation library from repeated card geometry.
- Don't reproduce the floating panel's overlap without checking content access at small sizes and enlarged text.
- Don't invent asset paths, production credits, or unobserved menu states.

## Recommended Implementation Additions

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

- Give the mobile menu, circular close control, and icon-only arrows explicit accessible names. The supplied text extraction does not establish their current accessible names.
- Implement navigation destinations as links and disclosures as buttons with `aria-expanded` and `aria-controls`. Keep footer child links available when JavaScript is unavailable.
- Provide a semantic text equivalent for the hero message. If an existing artwork asset contains the lettering, avoid announcing both that lettering and a duplicate text block.
- Check the hero's contrast. Calculated from the declared palette, white on `#60adf9` is approximately 2.4:1, while white on `#036dd6` is approximately 5.0:1. A new version can place essential small copy on a stronger blue surface or use dark text while retaining the illustrated frame.
- Provide visible keyboard focus without relying on a subtle color change alone.
- Increase small menu and close hit areas to at least 44px while keeping their visible circles close to the reference size.
- Keep the floating application panel dismissible and prevent it from obscuring focused controls or essential notice text. A compact entry trigger is an option at very narrow widths.
- Make the interview rail usable through keyboard and touch. If autoplay is added, include pause control and reduced-motion behavior; remove duplicate slides from the focus and accessibility order.
- Preserve descriptive photo alternatives and empty alternatives for purely decorative speech bubbles and illustrations.
- Load fonts and images without changing the measured layout unexpectedly. Reserve image aspect ratios, and avoid treating the entire long page as an eager-loading image gallery.

## Agent Prompt Guide

### Quick Color Reference

- Canvas and panels: white `#ffffff`.
- Primary actions and arrow circles: `#036dd6`.
- Hero and large panel field: source sky token `#60adf9`.
- Body text: black; navigation and many links: `#111111`.
- Personality section: `#fdf6ee`.
- Announcement surface: approximate use of source gray `#f7f7f7`.
- Rules: light gray, using `#c8c9ce` or `#e6e6e6` as source-derived starting points.
- Pink, lime, purple, and orange: illustration accents; exact artwork colors are unmeasured.

### Overall Prompt

“Create a Japanese recruitment homepage inspired by the current SURUGA bank recruiting site. Use a white canvas, sky-blue illustrated fields, strong blue `#036dd6` application actions, and Zen Kaku Gothic New Japanese text. Build a nearly full-width rounded hero with flat, dark-outlined office workers leaning inward from its perimeter, small colorful speech marks, and a clear centered message. Follow with a restrained gray announcement, spacious mission content, a beige three-quality section, a horizontal employee interview rail, and large white workplace/company navigation panels on blue. Use thin rules, circular arrows, and medium-weight type. Recompose the hero for phones, show one interview card at a time, and turn the footer into compact disclosure groups. Treat exact artwork, unknown interactions, and estimated dimensions as explicit implementation inputs.”

### Example Component Prompts

1. **Hero:** “Build a wide sky-blue hero with roughly 24px corners and a clear central copy area. Arrange authorized flat illustrations of suited people around the perimeter, rotated inward and cropped at the edges. Add small colorful speech marks and two white diagonal headline accents. For phones, use a dedicated tall composition with approximately six figures and about 500px minimum height. Keep essential copy accessible.”
2. **Workplace panel:** “Create a white panel about 1160px wide on a sky-blue background, with 24px corners and about 72px vertical by 80px horizontal padding. Place a blue overline, large Japanese title, description, and two ruled illustrated link rows at left. Use filled 40px blue arrow circles on the rows and an outlined circle by the title. Place a natural-color calculator/clipboard photograph in a roughly 408 × 470px crop at right.”
3. **Interview card:** “Create an employee interview link with a media region, a small blue `新卒` pill near its upper-right corner, a medium-weight job title, and location/tenure metadata below. Use 496px desktop cards with 48px gaps; on phones use the content width with 24px gaps and stack metadata. Do not duplicate semantic content to imitate a looping rail.”
4. **Announcement:** “Create a pale-gray rounded announcement strip with a blue dot, the label `イベント情報`, and an underlined external recruitment notice. Use 14px copy with 24.5px leading. On phones, put the label on a separate row at 16px, add a divider, and let the notice wrap naturally.”
5. **Mobile footer:** “Create a white recruitment footer with a black brand mark, four full-width ruled navigation rows, pale-gray plus circles for expandable groups, and a direct arrow for the workplace link. Follow with a 64px-high blue ENTRY pill and centered institutional links. Finish with a thin rule, small wrapping copyright text, and a compact PAGE TOP control.”
6. **Entry banner:** “Create a full-width solid `#036dd6` band with a large tracked white ENTRY label, a small Japanese descriptor, and a white circular arrow. Center the linked group and use generous vertical space. Keep the treatment flat and typographic.”

## Quick Start

### CSS Custom Properties

This starter uses a conventional 16px root. Source-derived colors and measured text roles are combined with explicitly estimated geometry. It provides a reusable shell, hero, announcement, editorial layouts, interview rail, workplace panel, and footer treatment.

The hero expects authorized decorative artwork selected for each aspect ratio. Font files, brand assets, disclosure state, menu behavior, and panel dismissal must be supplied separately. The rail uses native horizontal scrolling as a recommended baseline; it does not recreate an unverified autoplay system.

```css
:root {
  /* Exact values from supplied source tokens */
  --sb-primary: #036dd6;
  --sb-sky: #60adf9;
  --sb-white: #ffffff;
  --sb-ink: #111111;
  --sb-black: #000000;
  --sb-beige: #fdf6ee;
  --sb-soft: #f7f7f7;
  --sb-rule: #c8c9ce;
  --sb-rule-light: #e6e6e6;
  --sb-muted: #888888;

  /* Evidenced family declarations; load fonts separately */
  --sb-font-jp: 'Zen Kaku Gothic New', sans-serif;
  --sb-font-entry: 'Poppins', sans-serif;

  /* Measured editorial width; estimated panel/footer widths */
  --sb-content: 1040px;
  --sb-panel: 1160px;
  --sb-footer: 1120px;
  --sb-gutter: 24px;
  --sb-header-height: 109px;

  /* Estimated geometry, except the measured pill treatment */
  --sb-radius-small: 8px;
  --sb-radius-panel: 24px;
  --sb-radius-pill: 999px;
  --sb-arrow: 40px;

  /* Measured link duration; additional uses are recommendations */
  --sb-duration: 300ms;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  color: var(--sb-black);
  background: var(--sb-white);
  font-family: var(--sb-font-jp);
  font-size: 1rem;
  line-height: 1.5;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

img {
  display: block;
  max-inline-size: 100%;
}

a {
  color: var(--sb-ink);
  text-underline-offset: 0.2em;
}

[hidden] {
  display: none !important;
}

.content-shell,
.panel-shell,
.footer-shell {
  inline-size: calc(100% - 2 * var(--sb-gutter));
  margin-inline: auto;
}

.content-shell {
  max-inline-size: var(--sb-content);
}

.panel-shell {
  max-inline-size: var(--sb-panel);
}

.footer-shell {
  max-inline-size: var(--sb-footer);
}

.site-header {
  min-block-size: var(--sb-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 20px 40px 20px 44px;
  background: var(--sb-white);
  transition: translate 300ms ease-out;
}

.site-brand {
  flex: 0 0 auto;
  inline-size: 240px;
}

.site-brand img {
  inline-size: 100%;
  block-size: auto;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-inline-start: auto;
}

.primary-nav > a,
.primary-nav > button {
  border: 0;
  padding: 0;
  color: var(--sb-ink);
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: color var(--sb-duration);
}

.entry-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 42px 8px;
  border: 0;
  border-radius: var(--sb-radius-pill);
  color: var(--sb-white);
  background: var(--sb-primary);
  font-family: var(--sb-font-entry);
  font-size: 15px;
  font-weight: 600;
  line-height: 22.5px;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 2px;
  border: 0;
  background: transparent;
}

.menu-toggle__disc {
  display: grid;
  place-content: center;
  gap: 4px;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: var(--sb-primary);
}

.menu-toggle__disc::before,
.menu-toggle__disc::after {
  content: '';
  inline-size: 12px;
  block-size: 2px;
  background: var(--sb-white);
}

/* Hero geometry and type are visual approximations. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  inline-size: calc(100% - 90px);
  min-block-size: 500px;
  aspect-ratio: 1335 / 664;
  margin-inline: auto;
  padding: 100px 32px;
  overflow: hidden;
  border-radius: var(--sb-radius-panel);
  color: var(--sb-white);
  background: var(--sb-sky);
}

.hero__art {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.hero__art img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.hero__copy {
  max-inline-size: 760px;
  text-align: center;
}

.hero__title {
  margin: 0;
  font-size: 48px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.1em;
}

.hero__description {
  max-inline-size: 650px;
  margin: 20px auto 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 2.1;
  letter-spacing: 0.08em;
}

/* Optional recommendation for essential small-copy contrast. */
.hero__description--high-contrast {
  padding: 12px 16px;
  border-radius: var(--sb-radius-small);
  background: var(--sb-primary);
}

.announcement {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  margin-block-start: 56px;
  padding: 24px 32px;
  border-radius: var(--sb-radius-small);
  background: var(--sb-soft);
}

.announcement__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 3px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 0.02em;
}

.announcement__label::before {
  content: '';
  flex: 0 0 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--sb-primary);
}

.announcement__link {
  min-inline-size: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 24.5px;
  letter-spacing: 0.02em;
  transition: color var(--sb-duration);
}

/* Composite heading sizes are estimated from visible panels. */
.section-kicker {
  display: block;
  margin-block-end: 4px;
  color: var(--sb-primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.section-title {
  margin: 0;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.mission {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 477px;
  column-gap: 64px;
  margin-block-start: 112px;
}

.mission__statement {
  margin: 14px 0 56px;
  font-size: 38px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.04em;
}

.mission__body {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.06em;
}

.text-arrow {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-weight: 700;
  text-decoration: none;
}

.mission__link {
  margin-block-start: 64px;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.arrow-circle {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  inline-size: var(--sb-arrow);
  block-size: var(--sb-arrow);
  border: 1px solid var(--sb-primary);
  border-radius: 50%;
  color: var(--sb-white);
  background: var(--sb-primary);
  line-height: 1;
}

.arrow-circle--outline {
  color: var(--sb-primary);
  background: transparent;
}

.arrow-circle--large {
  inline-size: 48px;
  block-size: 48px;
}

.personality {
  padding-block: 112px 96px;
  background: var(--sb-beige);
}

.personality__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.personality__item {
  min-inline-size: 0;
  padding-inline: 32px;
}

.personality__item h3 {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.personality__item p {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.75;
}

/* Recommended contained, native-scrolling rail. */
.interview-rail {
  display: flex;
  gap: 48px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-block: 8px 16px;
}

.interview-card {
  flex: 0 0 496px;
  min-inline-size: 0;
  color: var(--sb-ink);
  text-decoration: none;
  scroll-snap-align: start;
}

.interview-card__media {
  position: relative;
}

.interview-card__media img {
  inline-size: 100%;
  block-size: auto;
}

.interview-card__badge {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 16px;
  margin: 0;
  padding: 1px 15px 3px;
  border-radius: var(--sb-radius-pill);
  color: var(--sb-white);
  background: var(--sb-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 24.5px;
  letter-spacing: -0.01em;
}

.interview-card__title {
  margin: 8px 0 0;
  padding: 0 4px 12px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.interview-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 21px;
  padding-inline: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.75;
}

.interview-card__meta p {
  margin: 0;
}

/* Panel dimensions are screenshot-derived approximations. */
.panel-field {
  padding-block: 72px;
  background: var(--sb-sky);
}

.panel-stack {
  display: grid;
  gap: 56px;
}

.feature-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2941fr) minmax(0, 1fr);
  gap: 64px;
  padding: 72px 80px;
  border-radius: var(--sb-radius-panel);
  background: var(--sb-white);
}

.feature-panel__intro {
  margin-block: 40px 72px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
}

.feature-panel__photo {
  inline-size: 100%;
  aspect-ratio: 408 / 470;
  object-fit: cover;
  border-radius: var(--sb-radius-small);
}

.link-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--sb-rule-light);
}

.link-rows > li {
  border-block-end: 1px solid var(--sb-rule-light);
}

.link-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 24px;
  min-block-size: 105px;
  padding: 24px;
  font-size: 24px;
  font-weight: 500;
  text-decoration: none;
}

.entry-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  min-block-size: 234px;
  padding: 48px 24px;
  color: var(--sb-white);
  background: var(--sb-primary);
  text-decoration: none;
}

.entry-band__title {
  display: block;
  font-family: var(--sb-font-entry);
  font-size: 56px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.12em;
}

.entry-band__description {
  display: block;
  margin-block-start: 8px;
  font-size: 16px;
  letter-spacing: 0.04em;
}

.entry-band .arrow-circle {
  color: var(--sb-primary);
  background: var(--sb-white);
  border-color: var(--sb-white);
}

.site-footer {
  padding-block: 72px 28px;
  background: var(--sb-white);
}

.footer-layout {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) minmax(0, 2fr);
  gap: 72px;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.footer-group__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  inline-size: 100%;
  padding: 0;
  border: 0;
  color: var(--sb-ink);
  background: transparent;
  text-align: start;
  font-weight: 500;
}

.footer-group__links {
  display: grid;
  gap: 16px;
  margin-block-start: 20px;
  font-size: 14px;
}

.footer-group__links a {
  text-decoration: none;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-block-start: 120px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--sb-rule);
}

.footer-copyright {
  margin: 0;
  color: var(--sb-muted);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* Recommended focus treatment; not sampled on the original. */
:where(a, button, summary):focus-visible {
  outline: 3px solid var(--sb-ink);
  outline-offset: 4px;
}

@media (hover: hover) {
  .primary-nav > a:hover,
  .primary-nav > button:hover,
  .announcement__link:hover,
  .text-arrow:hover,
  .link-row:hover {
    color: var(--sb-primary);
  }
}

/* Recommended thresholds; original media queries were not supplied. */
@media (max-width: 1023px) {
  :root {
    --sb-header-height: 86px;
  }

  .site-header {
    padding: 20px;
  }

  .site-brand {
    inline-size: 180px;
  }

  .primary-nav,
  .site-header > .entry-pill {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

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

  .feature-panel__photo {
    max-inline-size: 480px;
    margin-inline: auto;
  }

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

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

@media (max-width: 767px) {
  .hero {
    inline-size: calc(100% - 32px);
    min-block-size: 500px;
    aspect-ratio: auto;
    align-items: start;
    padding: 108px 24px 96px;
    border-radius: 10px;
  }

  .hero__title {
    font-size: 28px;
    line-height: 1.35;
  }

  .hero__description {
    margin-block-start: 12px;
    font-size: 13px;
    line-height: 1.77;
  }

  .announcement {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-block-start: 32px;
    padding: 16px 20px 24px;
  }

  .announcement__label {
    margin: 0;
    padding-block-end: 16px;
    border-block-end: 1px solid var(--sb-rule-light);
    font-size: 16px;
    line-height: 24px;
  }

  .announcement__link {
    letter-spacing: -0.01em;
  }

  .section-kicker {
    font-size: 13px;
  }

  .section-title {
    font-size: 28px;
    line-height: 1.5;
  }

  .mission {
    margin-block-start: 72px;
  }

  .mission__statement {
    margin: 0 0 36px;
    font-size: 28px;
    line-height: 1.6;
    letter-spacing: 0.04em;
  }

  .mission__body {
    font-size: 16px;
    line-height: 2;
  }

  .mission__link {
    display: flex;
    justify-content: flex-end;
    margin-block-start: 40px;
    font-size: 16px;
  }

  .personality {
    padding-block: 64px;
  }

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

  .personality__item {
    padding-inline: 24px;
  }

  .personality__item h3 {
    font-size: 18px;
  }

  .personality__item p {
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.02em;
  }

  .interview-rail {
    gap: 24px;
  }

  .interview-card {
    flex-basis: 100%;
  }

  .interview-card__badge {
    inset-block-start: 12px;
    inset-inline-end: 12px;
  }

  .interview-card__title {
    padding-block-end: 10px;
    font-size: 18px;
  }

  .interview-card__meta {
    flex-direction: column;
    gap: 2px;
    padding-inline: 4px;
    line-height: 1.65;
  }

  .panel-field {
    padding-block: 48px;
  }

  .panel-stack {
    gap: 32px;
  }

  .feature-panel {
    padding: 32px 24px;
  }

  .feature-panel__intro {
    margin-block: 24px 32px;
    font-size: 14px;
  }

  .link-row {
    grid-template-columns: 28px minmax(0, 1fr) 40px;
    gap: 12px;
    min-block-size: 88px;
    padding: 20px 0;
    font-size: 18px;
  }

  .entry-band {
    gap: 24px;
  }

  .entry-band__title {
    font-size: 40px;
  }

  .entry-band__description {
    font-size: 13px;
  }

  .site-footer {
    padding-block-start: 56px;
  }

  .footer-nav {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-block-start: 1px solid var(--sb-rule-light);
  }

  .footer-group {
    border-block-end: 1px solid var(--sb-rule-light);
  }

  .footer-group__toggle {
    min-block-size: 72px;
    font-size: 18px;
  }

  .footer-group__links {
    margin: 0;
    padding-block-end: 24px;
  }

  /* Set aria-expanded only when disclosure scripting is active. */
  .footer-group__toggle[aria-expanded='false'] + .footer-group__links {
    display: none;
  }

  .site-footer .entry-pill {
    inline-size: 100%;
    min-block-size: 64px;
    font-size: 18px;
  }

  .footer-bottom {
    align-items: flex-end;
    margin-block-start: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .primary-nav > a,
  .primary-nav > button,
  .announcement__link {
    transition: none;
  }

  .interview-rail {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
}
```

The CSS intentionally leaves unseen image arrangements, full mobile panel anatomy, and interactive state changes to implementation. For the footer, place each `.footer-group__links` immediately after its `.footer-group__toggle`; show links by default, then apply `aria-expanded` only after disclosure behavior is initialized. The desktop and mobile footer content order should follow the observed layouts rather than being inferred from CSS alone.

### Tailwind v4 Token Mapping

Optional mapping for a project already using Tailwind v4. Define the properties above first. This is an implementation convenience, not evidence that the original website uses Tailwind.

```css
@theme inline {
  --color-primary: var(--sb-primary);
  --color-sky-field: var(--sb-sky);
  --color-surface: var(--sb-white);
  --color-ink: var(--sb-ink);
  --color-personality: var(--sb-beige);
  --color-notice: var(--sb-soft);
  --color-rule: var(--sb-rule);
  --color-rule-light: var(--sb-rule-light);

  --font-japanese: var(--sb-font-jp);
  --font-entry: var(--sb-font-entry);

  --text-navigation: 14px;
  --text-body: 16px;
  --text-interview-title: 22px;
  --text-mission: 38px;

  --spacing-page-gutter: var(--sb-gutter);
  --spacing-section: 112px;
  --spacing-section-mobile: 64px;

  --radius-soft: var(--sb-radius-small);
  --radius-panel: var(--sb-radius-panel);
  --radius-pill: var(--sb-radius-pill);
}
```

## Sources & Evidence

- **Inspected original and final page:** [SURUGA bank Recruiting Site](https://www.surugabank.co.jp/surugabank/recruitment/). Both supplied URLs are identical, and the browser record reports HTTP 200.
- **Capture record:** retrieved at `2026-09-12T18:48:27.206Z`, equivalent to September 13, 2026, 03:48:27.206 JST. Actual viewports were 1440 × 1000 and 390 × 844 CSS pixels.
- **Original-page screenshots:** desktop top, workplace/company-panel region, and footer region; mobile top and footer region. These establish the visible illustration composition, panel anatomy, photography, action treatments, and responsive footer appearance.
- **Rendered DOM and computed styles:** page title, homepage text, link destinations, selected bounding rectangles, font declarations, typography, padding, transitions, and exposed custom properties. Precise measurements in this document come from that supplied evidence or explicitly identified arithmetic.
- **Inspection method:** the provided browser process observed the initial page for at least five seconds and waited for document loading, finite animation/layout settling, and visible image decoding within stated limits. Perpetual animations were paused during readiness checks and resumed afterward. Intermediate scroll positions were traversed. SharedWorkers and service workers were disabled.
- **Limitations:** no additional browsing, commands, asset retrieval, or file inspection was performed for this analysis. The supplied record does not include the complete stylesheet, image-source inventory, font-loading diagnostics, hover captures, open navigation states, FAQ answers, application flows, or an exercised interaction trace. Readiness checks do not prove that all delayed content or motion was observed.
- **Identity evidence:** the visible bank branding, corporate-site link, and original-page copyright support the SURUGA bank identity. No production-credit claims are established independently by the supplied original-page evidence.

This reference describes the current homepage represented by the supplied captures. Measurements, visual estimates, declared-but-unassigned tokens, and recommended implementation choices are kept distinct throughout.