MANERUBETA
株式会社日本ビルシス｜青と白で信頼感を伝える企業サイトのWebサイトプレビュー

DESIGN REFERENCE

株式会社日本ビルシス｜青と白で信頼感を伝える企業サイト

コーポレートサイトビルメンテナンス清掃・設備管理ブルーホワイト余白大きなタイポグラフィ人物写真写真グリッドレスポンシブ信頼感熊本

大きな英字コピーと豊かな余白、現場で働く人物写真が印象的な企業サイト。青い背景の強み紹介、業務実績の写真グリッド、濃紺のフッターを組み合わせ、清潔感と信頼感を表現しています。

オリジナルサイトを見る
ジャンル
ビジネス支援・コンサルティング
元の業種
ビルメンテナンス・清掃・設備管理
デザイン分析日
2026/9/12

design.md

ダウンロード

Nihon Birusisu / TOTAL TRUST — Style Reference

Expansive white space, precise blue typography, and people maintaining the buildings around them.

Website: birusisu.co.jp Original URL: https://birusisu.co.jp/ Final URL: https://birusisu.co.jp/ Theme: white canvas with blue emphasis sections and a deep navy footer; no selectable theme was evidenced. Inspected: September 12, 2026. Supplied retrieval timestamp: 2026-09-12T06:46:56.537Z, equivalent to 15:46:56.537 JST. Viewports: desktop 1440 × 1000 and mobile 390 × 844 CSS pixels. Scope: the current corporate homepage: initial header and hero, four business departments, news, company introduction, three benefits, twelve work entries, contact area, and footer. Visual captures show desktop opening, Benefits, and footer states, plus mobile opening and footer states. Other component measurements come from the supplied rendered DOM.

Nihon Birusisu presents building maintenance through a restrained corporate identity: royal blue for authority, cyan for emphasis, white for breathing room, and practical photography for evidence of the work. The opening slogan is exceptionally large but light in weight. Japanese supporting copy stays regular and readable, while compact English labels organize the longer page.

The homepage is a gateway into company information, services, news, recruitment, and completed work. Its identity comes from the contrast between a quiet opening and dense photographic sections farther down. Four tall service images form a continuous desktop band; a large blue Benefits section pairs an introduction with white photo-and-text modules; the footer combines company details, a substantial site directory, and regional sports affiliations.

Mobile changes the composition rather than merely shrinking it. The slogan becomes two lines, service images become stacked landscape banners, work captions move below their images, and the tall desktop page-top rail becomes a horizontal bar.

How to Read This Reference

  • Measured means a value supplied in element rectangles, computed styles, or custom properties. Measurements refer to the captured state, not every possible state of the site.
  • Calculated means arithmetic from those measurements, such as column widths or the space between adjacent elements.
  • Visual estimate means a proportion or treatment read from an attached screenshot without a corresponding computed property.
  • Recommended means implementation guidance for a new site. Breakpoints, accessibility additions, missing interaction logic, and the Quick Start are not recovered source code.
  • Source font declarations establish the intended families. The evidence does not independently confirm which font files supplied every rendered glyph.
  • The desktop document is approximately 9726.72px high; the mobile document is approximately 9510.91px high. These are captured content heights, not dimensions to hardcode.
  • The measured document widths are 1425px and 375px, respectively. Each is 15px narrower than its configured viewport, consistent with a reserved scrollbar gutter. Do not reproduce this difference as an intentional right margin.
  • Some computed text rectangles are shorter than their declared line-height would suggest. Use the computed font size and line-height as typography evidence; do not turn the recorded rectangle height into a fixed text height.

Tokens — Colors

Core Palette

Name Value Source token Evidence and role
Corporate Blue #005aac --color-primary Declared and computed on section labels, news titles, benefit titles, and the Benefits section background. Visually used for the first half of the hero slogan and primary controls.
Cyan #02a2dd --color-secondary Declared and computed on news badges, benefit numbering, and mobile work categories. Visually used for the second half of the slogan and paper-plane control.
Deep Navy #033b6f --color-accent Declared source color. The visible footer is consistent with this darker blue role; its final fill was not separately included in the computed element sample.
White #ffffff --color-white Main visible canvas, benefit text panels, reversed text, and contact panels. White is explicitly computed on company index links and reversed labels.
Main Text #111111 --color-txt Computed on navigation, hero supporting headline, and standard section titles.
Supporting Text #575757 --color-txt-gray2 Computed on hero description and company introduction paragraphs.
Date Gray #555555 --color-txt-gray4 Computed on news dates.
Fine Border #dce2e8 --color-border-gray Declared border color; visually compatible with the quiet header baseline. The baseline itself was not color-sampled.

Supporting Declarations

Value Source token Treatment
#f0f6fb --color-bg-blue Available pale blue surface token; its exact use is not established by the supplied screenshots.
#f0f0f0 --color-gray Available neutral surface token; do not assume that every unsampled card uses it.
#333333, #666666, #777777 Gray text variables Additional declared text shades, without a demonstrated need to use all of them in a reproduction.
#015bac Computed mobile work-title color A very close variant of Corporate Blue, recorded as rgb(1, 91, 172). It need not become a separate brand color in an adaptation.

The Benefits screenshot appears darker than the section's computed #005aac background, with some tonal variation across the field. Additional rendering layers or effects were not supplied. Preserve the source base color and describe the screenshot's deeper appearance separately; an exact gradient or compositing formula cannot be recovered from this evidence.

The city contact photograph also has a strong cyan/blue treatment. Its opacity and blend mode are unknown. Sports logos retain red and white brand colors in the footer; those colors belong to the partner artwork, not the site's general action palette.

Tokens — Typography

Japanese Interface and Body

  • Source family: "LINE Seed JP OTF", "LINE Seed JP", "Noto Sans JP", sans-serif.
  • Measured primary weight: 400 for navigation, section headings, benefit titles, and paragraphs.
  • Measured accent weight: 700 for small news category badges.
  • Character: clear Japanese sans-serif with a calm, open texture. Scale and space carry most of the hierarchy; heavy headings are not the default.
  • Implementation alias: --font-jp using the supplied stack.

English Display and Section Labels

  • Source family: "tt-commons-pro", sans-serif.
  • Hero weight: 300.
  • Standard section-label weight: 600.
  • Benefits section label and benefit-number weight: 500.
  • Character: light, broad uppercase display lettering paired with compact English wayfinding.

Use the actual supplied logo artwork for the company mark. The logo's Japanese and English lettering should not be recreated by selecting the nearest text font.

Type Scale

Values below are measured computed styles. Desktop/mobile pairs refer to the two supplied viewports.

Role Desktop size / line-height Mobile size / line-height Weight Tracking
Main TOTAL TRUST slogan 120 / 120px 60 / 60px 300 0.03em
Hero Japanese supporting headline 28 / 44.8px 21 / 33.6px 400 0.03em / 0.05em
Hero description 17 / 34px 14 / 25.2px 400 Normal
Desktop navigation 16 / 16px Replaced by compact controls 400 0.02em
Standard English section label 16 / 16px 13 / 13px 600 0.02em
Standard Japanese section title 48 / 48px 28 / 28px 400 Normal
Benefits section title 48 / 67.2px 28 / 39.2px 400 0.05em
Company lead / Benefits introductory statement 36 / 57.6px 24 / 38.4px 400 Normal
Service title 32 / 32px 24 / 24px 400 0.04em
Service description 16 / 28.8px 14 / 25.2px 400 0.04em
Benefit number 15 / 15px 12 / 12px 500 Normal
Benefit title 40 / 56px 24 / 33.6px 400 Normal
General descriptive paragraph 16 / 28.8px 14 / 25.2px 400 Normal
News title 20 / 30px 16 / 24px 400 0.04em
News category badge 11 / 11px 10 / 10px 700 Normal
News date 12 / 12px 11 / 11px 400 0.04em
Work category 14 / 14px 11 / 11px 400 0.04em
Work title 18 / 23.4px 14 / 18.2px 400 0.04em
Closing slogan 80 / 80px Not measured in the supplied element sample 300 0.03em on desktop

Root Size and Interpretation

The original HTML root computes to 10px at both inspected sizes. Its root custom property is also --root-font-size: 10px. The body inherits a 10px base, but individual content components define their readable sizes explicitly.

The Quick Start keeps a conventional 16px root and converts the important sizes. Copying source numeric rem values into a standard-root project would change their dimensions by 60%.

The headline's 120px font size is not its visible ink height. Likewise, the mobile slogan occupies two 60px line boxes for a measured 120px overall text container. Preserve the light weight, tracking, and deliberate word break instead of matching the visible letters with an unrelated heavy font.

Tokens — Spacing & Shapes

Density: broad section spacing around tightly joined image modules and compact utility controls.

System: the evidence shows component-specific dimensions and viewport calculations, rather than one consistently applied four- or eight-pixel spacing grid.

Spacing and Geometry

Use Desktop Mobile Evidence
Header horizontal inset 50px 20px Measured padding
Main section horizontal inset 50px 20.8px Measured padding
Standard section-header top padding 36px 26px Measured
English section-label left allowance 15px 12px Measured; accommodates the small leading marker pattern
News section top padding 120px 80px Measured
News-card content inset 30px 28px Calculated from card and text coordinates
Company index-link padding 30px 20px Measured
Work row gap 30px 14px Calculated from successive rows
Work section bottom padding 180px 120px Measured
Split-button seam 1px 1px Measured flex gap
News badge radius 4px 4px Measured
Company index-link radius 8px 8px Measured
Service upper corners 8px 4px Measured; bottom corners remain square
Benefits section radius 8px 8px Measured
Standard section-header radius 12px 12px Measured on the header box; this does not establish a filled card surface

The mobile main inset is consistent with 390 × 20 / 375 = 20.8px, using the supplied source ratio. The header retains an independently measured 20px inset. These systems should not be collapsed into an unexplained universal 20px value when documenting the original.

Layout Measurements

Element Desktop Mobile
Document content width 1425px 375px
Main inset content width 1325px About 333.41px
Initial header 141px high 80px high
Logo link 268 × 56px 173 × 36.14px
Header contact link 177 × 48px 40 × 40px
Mobile menu button Not visible 90 × 40px
Hero region, header end to service start About 509.39px 734px
First service-panel start Document y ≈ 650.39px Document y = 814px
Each service panel 356.25 × 712.5px 375 × 280px
News entry About 332.23 × 439.36px About 278.66 × 369.17px
Company index link About 607.28 × 140px About 333.41 × 93.72px
Work entry 331.25 × 331.25px 166.70px wide; height grows with caption wrapping
News archive button About 204.45 × 60px About 147.56 × 40px
Contact-form link near footer About 552.08 × 60px Not measured in supplied element sample

The source declares --header-height: 80px on desktop and 64px on mobile. Neither equals the measured initial header height. Their use in other states is unknown; do not use those variables as proof of a shrinking or fixed header.

Components

Corporate Header

Role: identify the company and provide direct routes into the corporate site.

At desktop size, the header spans the document with 50px side insets. The logo sits at x = 50px, y = 42px. Five primary navigation entries occupy the middle: company information, business, work, news, and recruitment. The first three have small downward markers. Measured gaps between primary link boxes are approximately 32px.

Navigation uses 16px regular Japanese text with 0.02em tracking. Its links have a 140px height with 62px vertical padding, creating a large pointer area around modest text. A fine, lightly rounded baseline closes the white header; the rounded inner baseline is a visual observation, not the outer header's measured radius.

The right contact action is one 177 × 48px link rendered as a blue label block and cyan paper-plane block with a 1px seam. The icon segment is approximately 48px square in the screenshot. These are visual segments of one destination.

At mobile size, the logo becomes 173px wide. The contact label disappears visually, leaving a 40px cyan icon control, immediately followed by a 90 × 40px blue button labeled メニュー. The menu button has a measured 4px radius and combines a hamburger symbol with the label.

Dropdown content and mobile navigation entries exist in the DOM, but their opened states were not supplied as screenshots or exercised interaction records. The header's positioning during scrolling is also unverified.

Opening Hero

Role: state the company promise before introducing its departments.

The hero contains three centered layers: the English slogan, a Japanese supporting headline, and a restrained descriptive paragraph. There is no large inline conversion button inside this opening text group.

On desktop, TOTAL and TRUST form a single flex row with a measured 27px gap. The first word is blue and the second cyan. The paragraph box begins at document y = 254px, with 120px type, weight 300, and 3.6px tracking. The supporting headline follows at y = 389px; the description begins near y = 459.2px.

In the Japanese supporting headline, the quoted source words 技術 and 信頼 repeat the blue/cyan distinction. This ties the English slogan to the service promise without adding a separate decorative device.

On mobile, the two English words stack into a 120px-high block. The Japanese headline becomes two lines and the description becomes three. The text group runs approximately from y = 303.83px to y = 590.17px. Its surrounding hero space is balanced: roughly 223.83px above and below the group, calculated within the 734px hero region.

The result is unusually patient for a phone screen. At 390 × 844, the first service photograph begins at y = 814px, leaving only a narrow image preview at the bottom of the opening capture.

Service Photography Band

Role: offer four direct entries into the business departments.

The four linked modules are 清掃部門, 設備部門, 消防部門, and 管理部門. Each contains an English numbered label, a Japanese department heading, and a short two-line explanation.

Desktop modules touch horizontally with no measured layout gap. Each is 356.25px wide and 712.5px high, producing a strict 1:2 panel proportion. The screenshots show workplace portraits: a cleaner in a glass building, a helmeted worker reaching toward equipment, a technician in a plant interior, and two staff reviewing a tablet or document.

White text occupies the lower portion. Department headings use 32px type; descriptions use 16px with 1.8 line-height. The recorded description rectangle ends 80px above the panel bottom. The upper corners are rounded 8px, while the bottom edge remains square.

On mobile, all four modules stack vertically at 375 × 280px. Titles reduce to 24px and body text to 14px. The lower description ends 38px above the panel bottom. The composition therefore needs a separate landscape crop or carefully adjusted focal point, rather than a compressed desktop portrait.

The observed destinations are anchors on the corporate-services page: #department-cleaning, #department-facility, #department-fire, and #department-management. Their destination content was not inspected.

Section Heading

Role: provide consistent orientation within the long homepage.

Standard sections pair a small English label with a larger Japanese heading, such as Latest News above 最新のお知らせ, About us above 私達について, and Work above 業務実績.

English labels use Corporate Blue, weight 600, and 0.02em tracking. Japanese headings use Main Text at regular weight. The scale changes from 16px/48px on desktop to 13px/28px on mobile.

The visible Benefits variant centers its label and heading and reverses them to white. A small cyan dot precedes its English label. Standard labels reserve a similar left allowance in the measured styles, although their pseudo-element rendering was not included in the evidence.

News Strip and Category Badge

Role: show recent activity while keeping an archive route available.

Five entries are present in the rendered content. Their link rectangles form one horizontal sequence at both sizes, rather than wrapping into a five-item vertical list. On desktop, each entry is about 332.23px wide; the fifth begins at x ≈ 1378.94px. On mobile, each is about 278.66px wide, with the second beginning at x ≈ 299.45px. This leaves a partial next item within the visible region.

Within each entry, the measured order is category badge, date, and title. Desktop insets are 30px; mobile insets are 28px. Category labels are small white-on-cyan stamps with 4px corners and padding of 5px 5px 4px. Titles use blue regular-weight text with 1.5 line-height.

The archive action labeled 一覧を見る sits at the right edge beneath the strip. It uses the same 1px-seam split-button pattern as other actions, measuring approximately 204 × 60px on desktop and 148 × 40px on mobile.

The supplied evidence establishes horizontal geometry, not drag behavior, autoplay, navigation arrows, or scroll snapping. No screenshot covers the complete news-card surface, so its imagery, border, and background should remain unassigned rather than inferred from the link's transparent computed background.

Company Introduction and Index Links

Role: connect the broad service promise to institutional information.

The desktop lead and body occupy a right-hand column beginning at x ≈ 767.70px and measuring 607.28px wide. The lead uses 36px regular Japanese type at 1.6 line-height; the supporting paragraph uses 16px gray text at 1.8.

Three white links follow: 代表ご挨拶, 沿革, and 会社概要, each prefaced by an English numbered contents label. Their desktop boxes measure approximately 607.28 × 140px, with 30px padding and 8px corners. They meet vertically in the recorded layout.

On mobile, this content occupies the full inset width of about 333.41px. The lead becomes 24px, body becomes 14px, and index links reduce to approximately 93.72px high with 20px padding. A substantial region precedes the lead in the mobile section; its visual contents are not covered by the supplied screenshots or image-element measurements.

The links define 400ms border-color and box-shadow transitions. The actual resting border and hover shadow values were not supplied.

Benefits Section

Role: make the company's three stated strengths readable as a substantial narrative.

This is a large blue region with 8px outer corners. Desktop measurements show a section height of about 2546px. The introductory column is approximately 607.28px wide; the visible photo-and-text modules occupy a right-hand region from approximately x = 712.5px to x = 1375px.

The introduction centers a white English label, a 48px Japanese section heading, a two-line 36px statement, and a short 16px paragraph. The text describes three strengths, which are then expanded into numbered modules.

The middle desktop screenshot shows the introduction still visible beside Benefit 02. This supports the appearance of a retained introduction during the section's scroll progression. The evidence does not identify whether CSS sticky positioning, scripted pinning, or another mechanism creates that presentation.

Mobile places the introduction before the three modules in one column. The section has measured padding of 77px 20.8px 20px. Its title becomes 28px, lead becomes 24px, and body becomes 14px. The mobile introduction is approximately 287.53px high, rather than a full-height desktop column.

Benefit Photo-and-Text Module

Role: turn a short strength statement into a specific explanation supported by people-at-work photography.

Each module pairs a wide photo above a white text panel. The middle desktop capture shows two uniformed staff holding work documents above the panel for 幅広い現場での実績と信頼. Another helmeted worker photograph begins below it.

The white panel in that capture is approximately 663px wide and 402px high, with subtly rounded corners. Its top starts around screenshot y = 368px. The photograph is cropped by the screenshot's upper edge, so the visible photograph height is not a reliable full-image measurement.

Text hierarchy is precise: a centered cyan numbered label, a centered blue two-line title, then a left-aligned black paragraph. Desktop title type is 40px with 56px line-height. The outer text region is approximately 556.03px wide; the paragraph adds 55.59px inset on each side, leaving about 444.84px of actual text width.

On mobile, the text region is approximately 277.69px wide and no longer adds that extra paragraph inset. Number labels become 12px, titles 24px, and paragraphs 14px. Keep paragraph alignment left while preserving centered labels and headings.

Work Grid

Role: demonstrate the breadth of completed work across facility categories.

The DOM contains twelve entries arranged into four desktop columns and three rows. Each desktop link occupies a 331.25px square. Horizontal boxes meet directly; rows are separated by 30px.

Desktop categories and titles are white and positioned within the square bounds, consistent with an image-overlay caption. The first entry's caption begins about 49.72px from the left edge, equivalent to 15% of the card width. Its title ends approximately 55px above the bottom. Category type is 14px, followed by an 18px project title.

Mobile uses two columns, each about 166.70px wide. Captions change to cyan categories and blue titles. Their vertical positions are consistent with an approximately square image followed by a caption: the category begins about 7px below that square region, with 15px side insets. The image rectangle itself was not included in the element sample, so the square mobile image is a geometry-based inference.

Entries grow to accommodate title wrapping. Measured examples are about 221.89px and 240.08px high, and the next row follows the taller entry with a 14px gap. This is a useful responsive distinction: text is removed from small images rather than being forced into a cramped overlay.

Project destinations and separate category destinations are evidenced. In a new implementation, keep these as sibling interactive elements instead of nesting category links inside a larger anchor.

Closing Brand Statement and Contact Area

Role: repeat the company promise and offer two clear contact routes.

The desktop DOM records a closing 80px English slogan and a 20px Japanese supporting line before the contact actions. These precede the visible footer crop.

A wide city panorama forms the contact background. The blue/cyan treatment connects local urban context to the company's building-management role. Centered on the image is a white form link, approximately 552.08 × 60px, divided into a wide label and a square paper-plane segment by a 1px seam.

A second white panel beneath it presents the telephone number 096-211-0033 and weekday reception hours. Its visible height is approximately 100px; the large phone number is approximately 36px in the screenshot, a visual estimate rather than a supplied computed value.

The form destination is /contact/. The phone destination is explicitly tel:+81962110033. No form fields, submission states, validation behavior, or confirmation screen were inspected.

Corporate Footer and Partner Marks

Role: provide a complete directory and a clear company identity at the end of the page.

The desktop footer uses a broad dark navy body and a brighter blue rail on the right. The navy body is approximately 1321px wide in the capture; the rail is approximately 104px wide. These are screenshot estimates.

The left side contains a white company logo, the legal company name 株式会社日本ビルシス, address, phone, and business hours. The right side uses three navigation columns, with white underlined primary links and quieter blue-gray secondary links. The source footer identifies the company independently of its logo artwork.

Below the directory, four regional sports marks form one row. They are followed by legal links, while the copyright sits at the lower left. Preserve the generous open area separating the upper directory from these lower utility groups.

On mobile, navigation becomes stacked rows with fine separators. Plus signs appear beside expandable-looking groups such as business and work. The captured state does not show those groups being opened. Partner marks wrap into two rows of two, legal links stack vertically, and copyright follows near the bottom of the navy block.

The visible © 2025 Nihon Birusisu Ltd. is footer content, not evidence that the design was inspected or published in 2025.

Page-Top Control

Role: provide an obvious return route after a long homepage.

Desktop uses the full-height blue rail beside the footer, with a small upward arrow near its top and a vertical Pagetop label near its bottom. It reads as an architectural part of the footer rather than a floating circular control.

Mobile places a separate approximately 375 × 80px blue bar immediately below the navy footer. The arrow sits left and the label right, both horizontally oriented. Corners are approximately 8px by visual inspection.

The affordance is visible, but click behavior, scroll duration, easing, and focus handling were not recorded.

Tokens — Motion & Interaction

Defined Styles and Limits

Element or token Supplied value What the evidence establishes
Logo and many links opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) A defined opacity transition. Trigger and target opacity were not supplied.
Company index links border-color 0.4s, box-shadow 0.4s Border and shadow can transition; the actual hover appearance remains unverified.
Desktop main content filter 0.6s cubic-bezier(0.19, 1, 0.22, 1) A filter transition exists. Its filter values and triggering state are unknown.
Mobile backdrop control visibility and opacity, each 0.6s cubic-bezier(0.19, 1, 0.22, 1) A backdrop-capable element exists with a computed white fill at 75% alpha. No opened-menu visual was supplied.
Shared duration --duration: 0.4s Declared timing token.
Longer duration --duration2: 0.6s Declared timing token.
Page-transition duration --page-transition-duration: 0.8s Declared token only; no page transition was exercised.
Benefits introduction Visible beside the middle benefit Suggests retained positioning during progression; implementation and timing remain unverified.

The source contains many general easing variables, including back and elastic-looking cubic curves. Their presence does not establish that the homepage uses bouncing motion.

Desktop text extraction often contains duplicated navigation and button labels, while screenshots show a single visible label. This may support layered label effects, but it does not prove a rolling-text animation. A new implementation should expose one accessible label even if decorative duplicates are used.

Loading... and 100% occur in main-element text, but no loading screen is visible in the settled captures. Its appearance and duration cannot be reconstructed. Similarly, animation: none on sampled elements does not rule out motion on descendants, pseudo-elements, or scripts.

Recommended Motion Language

Use restrained opacity and border feedback around the observed 400ms timing. Keep any retained Benefits introduction optional and disable it where the viewport is too short to keep the text readable. Make horizontal news navigation explicit and keyboard-operable if implementing it as a scrolling strip.

Do not add autoplay, image parallax, animated counters, cursor effects, or large entrance sequences on the assumption that they existed. Provide reduced-motion behavior for any added scrolling or reveal effects.

Surfaces

Layer Appearance Evidence boundary
Opening canvas Broad white field Directly visible in both opening captures
Header White with a subtle lower rule and lightly rounded lower framing Directly visible; inner-frame radius and exact rule color are estimates
Service panels Full-bleed workplace photography, white lower text Photo treatment visible; text dimensions supplied by DOM
Company index links White, 8px corners Computed; complete border and shadow values unavailable
Benefits field Large blue region Base fill measured; darker rendered appearance visible
Benefit text panel White, softly rounded, no obvious heavy elevation Directly visible; approximately 8px corners
Contact background City panorama with blue/cyan treatment Directly visible; compositing method unknown
Contact controls White panels with blue text and cyan symbols Directly visible
Footer Deep navy body and brighter blue page-top rail Directly visible; exact footer fill mapping is inferred from declared palette

The dominant screenshots communicate separation through color fields, image edges, white space, and small radii. There is no visible need for a general heavy-shadow card system. A box-shadow transition on one component should not become a license to elevate every panel.

Imagery

The strongest visual evidence is practical human activity. Staff wear company uniforms, helmets, and work clothing; equipment, glass façades, utility rooms, documents, and tablets explain their roles. The photographs are bright and cool, with natural skin tones and clean interiors. They make maintenance tangible without abandoning the ordered corporate composition.

Desktop service crops are unusually tall. Benefits photography is wider and gives more room to relationships between people. The contact image shifts scale from individual workers to a city panorama. Together these establish three levels: the person, the team, and the buildings they support.

Observed Asset References

No image source URLs or filenames were included in the supplied evidence. The table identifies visual assets without inventing paths.

Asset Where evidenced Reuse guidance
Blue/cyan company logo Desktop and mobile opening captures Preserve original proportions and Japanese/English lockup
Four service photographs Desktop opening capture Prepare separate portrait and landscape crop decisions
Two staff holding documents Desktop Benefits capture Use as a wide image above a white explanation panel
Helmeted staff portrait Lower portion of Benefits capture Preserve headroom and workplace context
City panorama Desktop contact/footer capture Apply a restrained blue treatment without obscuring city detail
White footer logo Desktop footer capture Use the proper reversed asset rather than a crude filter
Four sports partner marks Desktop and mobile footer captures Retain their distinct colors and allow a two-by-two mobile arrangement
Paper-plane, telephone, hamburger, plus, and upward arrow symbols Header, contact, and footer captures Match simple filled or thin-line forms; no icon library was identified

Use authorized original assets when available. For replacement photography, prioritize believable maintenance tasks, suitable protective equipment, uncluttered architectural backgrounds, and subjects positioned safely within both crop formats. Do not apply the contact image's heavy blue treatment to every portrait.

Layout & Responsive Behavior

Observed Changes

Pattern Desktop at 1440 × 1000 Mobile at 390 × 844
Header Logo, five navigation entries, labeled contact action Smaller logo, icon-only contact, menu button
Hero One-line English slogan Two-line slogan with preserved large surrounding space
Services Four touching 1:2 panels Four stacked 375 × 280px banners
News Horizontal sequence with approximately four entries across the inset region Horizontal sequence with one full entry and part of the next
Company introduction Measured text in a right-hand column Text and index links span the inset width
Benefits Introduction beside a long sequence of modules Introduction precedes the modules
Work Four columns; white captions within square entries Two columns; cyan/blue captions beneath the inferred square image region
Footer Company block, three-column directory, single partner row Stacked directory rows, two-by-two partner marks, stacked legal links
Page top Tall right rail Full-width horizontal bar below the footer

The captured widths demonstrate those changes, but the actual media-query breakpoints were not supplied. Variables mentioning 768px and 1200px describe a fluid sizing range; they are not proof of navigation or grid breakpoints.

The source also declares a 1080px inner token, yet the measured principal desktop content width is 1325px. Do not force the entire homepage into 1080px simply because that declaration exists.

There are regions between the measured Benefits section and Work section that the supplied screenshots do not cover. Their height cannot safely be classified as intentional blank spacing, a graphic transition, or an animation spacer. Preserve the verified section sequence without inventing content or hardcoding that gap.

Recommended interpolation: use fluid type and gutters between tested sizes, collapse primary navigation before its labels collide, and let text-containing components grow. Keep mobile service banners and the two-column work grid as distinct patterns. On short screens or with enlarged text, allow the opening hero and Benefits introduction to expand naturally.

Do’s and Don’ts

Do

  • Preserve the blue/cyan split of TOTAL TRUST and the matching emphasis within the Japanese promise.
  • Use light English display type and regular Japanese headings; let scale establish authority.
  • Keep the opening visually quiet, including the generous phone-screen white space.
  • Join the four desktop service photographs into a continuous band with small upper corner radii.
  • Recompose service photography as landscape banners on mobile.
  • Center benefit labels and titles while keeping their explanatory paragraphs left aligned.
  • Preserve the news strip's horizontal organization when reproducing the observed structure.
  • Move work captions below images on mobile and let longer project names wrap.
  • Repeat the split label/icon action pattern with a precise 1px seam.
  • Treat the footer as a substantial directory with its own whitespace and hierarchy.
  • Keep sports marks recognizable and separate their colors from the site's core palette.
  • Document declared transitions separately from behavior that was actually exercised.

Don’t

  • Don't reduce this corporate homepage to a single conversion funnel with repeated hero CTAs.
  • Don't replace the light slogan with a condensed, heavy, or outlined headline.
  • Don't add orange as a primary action color merely because an orange variable exists in the source.
  • Don't convert the touching service band into widely separated floating cards.
  • Don't crop a worker's face or safety equipment to preserve a desktop image position on mobile.
  • Don't leave tiny white work captions over mobile images when the observed design moves them below.
  • Don't assume offscreen news entries prove autoplay or a particular carousel library.
  • Don't invent sticky-header, menu-opening, or page-top timings from generic easing declarations.
  • Don't render duplicate DOM labels as duplicate visible or accessible text.
  • Don't hardcode captured document heights, a 15px right gutter, or unexplained inter-section gaps.
  • Don't introduce large pills, glass blur, or deep shadows throughout the visual system.
  • Don't treat the footer copyright year as a design-version timestamp.

Recommended Implementation Additions

These additions are guidance for a new implementation, not verified features of the inspected site.

  • Give the contact icon an explicit accessible name and keep decorative paper-plane artwork hidden from assistive technology.
  • Connect the mobile menu button to an actual controlled panel using aria-expanded and aria-controls. Support Escape, sensible focus movement, and focus restoration if the panel behaves as a dialog.
  • Implement footer expansion with buttons or native disclosure elements. Preserve separate access to category landing pages where needed.
  • Provide visible keyboard focus on both white and navy surfaces. Use a two-color focus treatment if a single blue ring disappears against blue controls.
  • Increase effective touch targets around the observed 40px mobile controls where space allows, aiming for at least 44px without distorting the logo relationship.
  • Check small white-on-cyan badges and muted footer links for contrast. A darker cyan variant may be needed for small text while retaining the original brand cyan for larger areas and icons.
  • Give horizontally scrolling news a clear keyboard route and optional previous/next controls. Do not require dragging to reach older entries.
  • Keep category links separate from project or news primary links to avoid nested anchors.
  • Provide meaningful alt text for informative work photography, and empty alt text for decorative image duplication.
  • Reserve image dimensions, supply appropriate responsive crops, and lazy-load below-the-fold images to reduce layout shifts on the long page.
  • Honor reduced-motion preferences and retain all content when optional pinning or reveal effects are disabled.

Agent Prompt Guide

Quick Color Reference

  • Canvas and benefit text panels: #ffffff.
  • Main corporate blue: #005aac.
  • Cyan emphasis: #02a2dd.
  • Deep footer tone: source accent #033b6f, a suitable approximation of the visible navy role.
  • Main text: #111111; supporting copy: #575757.
  • Fine neutral rule: source token #dce2e8.
  • Primary action: adjoining label and square icon segments, separated by 1px.
  • Partner-logo colors remain inside the original partner artwork.

Overall Prompt

“Create a Japanese building-maintenance corporate homepage inspired by Nihon Birusisu's current TOTAL TRUST presentation. Use a white canvas, corporate blue #005aac, cyan #02a2dd, and a deep navy footer. Pair the declared LINE Seed JP stack with licensed tt-commons-pro where available; use regular Japanese headings and a light uppercase English slogan. Center the opening promise in generous white space. Follow it with four touching workplace-photo panels linking to departments, a horizontal news strip, company information, three photo-and-white-panel benefits on a blue field, a work grid, city-backed contact actions, and a full corporate directory. On mobile, stack the slogan and service banners, keep news horizontal, move work captions beneath images, and turn the footer's vertical page-top rail into a horizontal bar. Treat unverified motion as optional implementation work.”

Example Component Prompts

  1. Header: “Build a white corporate header with a 268px desktop logo, regular 16px Japanese navigation, and a 177 × 48px split contact link. Use blue for its label and cyan for its square paper-plane segment, separated by 1px. At phone size, use a 173px logo, a 40px contact icon, and a compact labeled menu button.”
  2. Service band: “Create four touching desktop photo links at a 1:2 ratio. Show maintenance staff in real working environments and place white numbered labels, 32px department titles, and short descriptions near the bottom. On mobile, stack 280px-high landscape banners with 24px titles and safe subject crops.”
  3. Benefits: “Place a centered white introduction beside three stacked wide photographs with white explanation panels on a corporate-blue background. Each panel has a small cyan number, a centered regular-weight blue title, and a narrower left-aligned paragraph. Stack the introduction above the modules on mobile. Any retained desktop introduction is a recommended enhancement, not a confirmed source mechanism.”
  4. Work grid: “Use four touching columns of square work imagery on desktop with white category/title captions inside each square and 30px row gaps. Switch to two columns on mobile, putting cyan categories and blue project titles below the images with 15px side padding. Let titles wrap and row heights grow.”
  5. Footer: “Create a deep navy corporate footer with a reversed logo and company details at left, a three-column directory at right, four partner marks, and small underlined legal links. Add a brighter blue page-top rail at the right edge. On mobile, stack directory rows, wrap partners two by two, and move page top into an 80px horizontal bar below the footer.”

Quick Start

CSS Custom Properties

This is an implementation scaffold, not extracted source CSS. It preserves the measured palette, type hierarchy, major component relationships, and mobile work-caption change. It assumes a conventional 16px root. Normal browser line boxes may differ from the original site's recorded text rectangles.

The 768px content breakpoint and 1100px navigation breakpoint below are recommendations. Fluid interpolation, hover opacity, contrast scrims, news-card surfaces, and optional sticky positioning are also recommendations. The Benefits base uses its measured blue fill without attempting to reconstruct the unexplained darker rendering.

Markup expectations: place .br-hero-copy inside .br-hero; use two spans inside .br-hero-title; give split links .br-split-label and .br-split-icon children; put an image and .br-service-copy inside each service link; use an article with image and caption regions for each work card. Supply authorized images and actual SVG icons separately. Menu and disclosure behavior require their own accessible implementation.

:root {
  /* Source colors, exposed as reusable aliases. */
  --br-blue: #005aac;
  --br-cyan: #02a2dd;
  --br-navy: #033b6f;
  --br-white: #fff;
  --br-ink: #111;
  --br-muted: #575757;
  --br-date: #555;
  --br-rule: #dce2e8;
  --br-pale: #f0f6fb;

  /* Source-declared font stacks; load licensed fonts separately. */
  --br-font-jp: 'LINE Seed JP OTF', 'LINE Seed JP', 'Noto Sans JP', sans-serif;
  --br-font-en: 'tt-commons-pro', sans-serif;

  /* Recommended fluid interpolation between observed endpoints. */
  --br-gutter: clamp(1.3rem, 3.4722vw, 3.125rem);
  --br-display: clamp(3.75rem, 8.3333vw, 7.5rem);
  --br-heading: clamp(1.75rem, 3.3333vw, 3rem);
  --br-radius-small: .25rem;
  --br-radius-panel: .5rem;
  --br-radius-frame: .75rem;
  --br-link-duration: 400ms;
  --br-link-ease: cubic-bezier(.215, .61, .355, 1);
}

.br-site,
.br-site * {
  box-sizing: border-box;
}

.br-site {
  color: var(--br-ink);
  background: var(--br-white);
  font-family: var(--br-font-jp);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
}

.br-site img {
  display: block;
  max-width: 100%;
}

.br-site button {
  font: inherit;
}

.br-inner {
  padding-inline: var(--br-gutter);
}

.br-header {
  padding-inline: 3.125rem;
}

.br-header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  min-height: 8.8125rem;
  border-bottom: 1px solid var(--br-rule);
  border-radius: 0 0 var(--br-radius-frame) var(--br-radius-frame);
}

.br-logo {
  display: block;
  width: 16.75rem;
}

.br-header-nav {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.br-header-nav a {
  color: inherit;
  font-size: 1rem;
  letter-spacing: .02em;
  text-decoration: none;
}

.br-header-actions {
  display: flex;
  align-items: center;
  gap: 1px;
}

.br-split-link {
  --control-size: 3.75rem;
  display: inline-flex;
  gap: 1px;
  min-height: var(--control-size);
  color: var(--br-white);
  font-weight: 700;
  text-decoration: none;
  transition: opacity var(--br-link-duration) var(--br-link-ease);
}

.br-split-label,
.br-split-icon {
  display: grid;
  place-items: center;
  border-radius: var(--br-radius-small);
}

.br-split-label {
  flex: 1;
  padding: .75rem 1.5rem;
  background: var(--br-blue);
}

.br-split-icon {
  flex: 0 0 var(--control-size);
  background: var(--br-cyan);
}

.br-split-icon svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
}

.br-header-contact {
  --control-size: 3rem;
  width: 11.0625rem;
  font-size: .875rem;
}

.br-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: .4375rem;
  width: 5.625rem;
  min-height: 2.5rem;
  border: 0;
  border-radius: var(--br-radius-small);
  color: var(--br-white);
  background: var(--br-blue);
  font-size: .6875rem;
  font-weight: 700;
  cursor: pointer;
}

.br-hero {
  display: grid;
  place-items: center;
  min-height: 31.837rem;
  padding: 3rem var(--br-gutter);
  text-align: center;
}

.br-hero-copy {
  width: 100%;
}

.br-hero-title {
  display: flex;
  justify-content: center;
  gap: 1.6875rem;
  margin: 0;
  color: var(--br-blue);
  font-family: var(--br-font-en);
  font-size: var(--br-display);
  font-weight: 300;
  line-height: 1;
  letter-spacing: .03em;
}

.br-hero-title span:last-child {
  color: var(--br-cyan);
}

.br-hero-lead {
  margin: .9375rem 0 0;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .03em;
}

.br-hero-description {
  margin: 2.625rem 0 0;
  color: var(--br-muted);
  font-size: 1.0625rem;
  line-height: 2;
}

.br-blue { color: var(--br-blue); }
.br-cyan { color: var(--br-cyan); }
.br-mobile-break { display: none; }

.br-section-heading {
  padding-top: 2.25rem;
}

.br-eyebrow {
  display: flex;
  align-items: center;
  gap: .5625rem;
  margin: 0 0 1.3125rem;
  color: var(--br-blue);
  font-family: var(--br-font-en);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
}

.br-eyebrow::before {
  content: '';
  width: .375rem;
  height: .375rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--br-cyan);
}

.br-section-title {
  margin: 0;
  font-size: var(--br-heading);
  font-weight: 400;
  line-height: 1.2;
}

.br-services {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.br-service {
  position: relative;
  aspect-ratio: 1 / 2;
  overflow: hidden;
  border-radius: .5rem .5rem 0 0;
  color: var(--br-white);
  text-decoration: none;
}

.br-service > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-position, center);
}

/* Recommended scrim; its exact appearance was not recovered. */
.br-service::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, rgb(3 59 111 / .78));
  pointer-events: none;
}

.br-service-copy {
  position: absolute;
  z-index: 1;
  right: .625rem;
  bottom: 5rem;
  left: .625rem;
  text-align: center;
}

.br-service-copy h3 {
  margin: 1rem 0 2rem;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
}

.br-service-copy p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: .04em;
}

.br-news-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 25%;
  overflow-x: auto;
  margin-top: 3.4375rem;
}

/* Recommended simple surface; the original news surface is unverified. */
.br-news-card {
  min-height: 27.46rem;
  padding: 1.875rem;
  border: 1px solid var(--br-rule);
  background: var(--br-white);
}

.br-news-badge {
  display: inline-block;
  padding: 5px 5px 4px;
  border-radius: .25rem;
  color: var(--br-white);
  background: var(--br-cyan);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.br-news-date {
  display: block;
  margin-top: .9375rem;
  color: var(--br-date);
  font-size: .75rem;
  line-height: 1;
  letter-spacing: .04em;
}

.br-news-title {
  margin: .875rem 0 0;
  color: var(--br-blue);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .04em;
}

.br-benefits {
  display: grid;
  grid-template-columns: 11fr 12fr;
  align-items: start;
  gap: 4.1667%;
  padding: 5rem var(--br-gutter);
  border-radius: .5rem;
  color: var(--br-white);
  background: var(--br-blue);
}

.br-benefits-intro {
  text-align: center;
}

.br-benefits-intro .br-eyebrow {
  justify-content: center;
  color: var(--br-white);
  font-weight: 500;
}

/* Optional enhancement, not a verified source positioning rule. */
.br-benefits-intro[data-retain] {
  position: sticky;
  top: 7.5rem;
}

.br-benefits-lead {
  margin: 4rem 0 3rem;
  font-size: 2.25rem;
  line-height: 1.6;
}

.br-benefit-stack {
  display: grid;
  gap: 3.5rem;
}

.br-benefit-photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: .5rem;
}

/* The photo ratio and panel spacing are practical approximations. */
.br-benefit-body {
  padding: 3.75rem 8% 5rem;
  border-radius: .5rem;
  color: var(--br-ink);
  background: var(--br-white);
  text-align: center;
}

.br-benefit-number {
  margin: 0 0 .9375rem;
  color: var(--br-cyan);
  font-family: var(--br-font-en);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1;
}

.br-benefit-title {
  margin: 0;
  color: var(--br-blue);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.4;
}

.br-benefit-description {
  width: 80%;
  margin: 2rem auto 0;
  font-size: 1rem;
  line-height: 1.8;
  text-align: left;
}

.br-work-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.875rem 0;
  margin-top: 3.5rem;
}

.br-work-card {
  position: relative;
  min-width: 0;
}

.br-work-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

/* Recommended contrast support beneath desktop overlay text. */
.br-work-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 35%, rgb(3 59 111 / .75));
  pointer-events: none;
}

.br-work-caption {
  position: absolute;
  z-index: 1;
  inset-inline: 15%;
  bottom: 16.6%;
  color: var(--br-white);
}

.br-work-category {
  color: inherit;
  font-size: .875rem;
  line-height: 1;
  letter-spacing: .04em;
}

.br-work-title {
  margin: .9375rem 0 0;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .04em;
}

.br-work-title a {
  color: inherit;
}

.br-contact-actions {
  width: min(100%, 34.505rem);
  margin-inline: auto;
}

.br-contact-actions .br-split-link {
  display: flex;
  width: 100%;
  color: var(--br-blue);
}

.br-contact-actions .br-split-label,
.br-contact-actions .br-split-icon {
  background: var(--br-white);
}

.br-contact-actions .br-split-icon {
  color: var(--br-cyan);
}

.br-phone-link {
  display: grid;
  place-content: center;
  min-height: 6.25rem;
  margin-top: 1px;
  border-radius: .25rem;
  color: var(--br-blue);
  background: var(--br-white);
  text-align: center;
  text-decoration: none;
}

.br-phone-number {
  font-family: var(--br-font-en);
  font-size: 2.25rem;
  line-height: 1.2;
}

.br-phone-hours {
  color: var(--br-muted);
  font-size: .8125rem;
}

.br-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem;
  color: var(--br-white);
}

.br-footer-main {
  padding: 3.5rem 3rem;
  border-radius: .5rem;
  background: var(--br-navy);
}

.br-footer-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

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

.br-footer a {
  color: inherit;
  text-underline-offset: .15em;
}

.br-partners {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 1.25rem;
}

.br-pagetop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 3.5rem 1.5rem;
  border-radius: .5rem;
  background: var(--br-blue);
  text-decoration: none;
}

.br-pagetop-label {
  writing-mode: vertical-rl;
  font-family: var(--br-font-en);
  font-size: .875rem;
}

/* Recommended collapse point; original media queries were not supplied. */
@media (max-width: 1100px) {
  .br-header { padding-inline: 1.25rem; }
  .br-header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem;
    min-height: 5rem;
  }
  .br-logo { width: min(10.8125rem, 100%); }
  .br-header-nav { display: none; }
  .br-header-contact {
    --control-size: 2.5rem;
    width: 2.5rem;
  }
  .br-header-contact .br-split-label { display: none; }
  .br-menu-toggle { display: flex; }
}

@media (max-width: 767px) {
  :root {
    --br-gutter: clamp(1.25rem, 5.3333vw, 1.75rem);
    --br-heading: 1.75rem;
  }

  .br-site { font-size: .875rem; }
  .br-hero {
    /* Matches the inspected mobile region height at 844px viewport height. */
    min-height: calc(100svh - 6.875rem);
    padding-block: 3rem;
  }
  .br-hero-title {
    flex-direction: column;
    gap: 0;
    font-size: 3.75rem;
  }
  .br-hero-lead {
    margin-top: .75rem;
    font-size: 1.3125rem;
    letter-spacing: .05em;
  }
  .br-hero-description {
    margin-top: 2.1875rem;
    font-size: .875rem;
    line-height: 1.8;
  }
  .br-mobile-break { display: initial; }
  .br-section-heading { padding-top: 1.625rem; }
  .br-eyebrow {
    gap: .375rem;
    margin-bottom: .625rem;
    font-size: .8125rem;
  }
  .br-services { grid-template-columns: 1fr; }
  .br-service {
    aspect-ratio: auto;
    height: 17.5rem;
    border-radius: .25rem .25rem 0 0;
  }
  .br-service-copy { bottom: 2.375rem; }
  .br-service-copy h3 {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
  }
  .br-service-copy p { font-size: .875rem; }
  .br-news-strip {
    grid-auto-columns: 83.58%;
    margin-top: 2.25rem;
  }
  .br-news-card {
    min-height: 23.073rem;
    padding: 1.75rem;
  }
  .br-news-badge { font-size: .625rem; }
  .br-news-date { font-size: .6875rem; }
  .br-news-title { font-size: 1rem; }
  .br-benefits {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
    padding: 4.8125rem var(--br-gutter) 1.25rem;
  }
  .br-benefits-intro[data-retain] { position: static; }
  .br-benefits-lead {
    margin: 3rem 0 2rem;
    font-size: 1.5rem;
  }
  .br-benefit-stack { gap: 1.5rem; }
  .br-benefit-body { padding: 2.5rem 8.35%; }
  .br-benefit-number { font-size: .75rem; }
  .br-benefit-title { font-size: 1.5rem; }
  .br-benefit-description {
    width: 100%;
    margin-top: 1.5rem;
    font-size: .875rem;
  }
  .br-work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .875rem 0;
    margin-top: 2.25rem;
  }
  .br-work-card::after { display: none; }
  .br-work-caption {
    position: static;
    padding: .4375rem .9375rem .9375rem;
    color: var(--br-blue);
  }
  .br-work-category {
    color: var(--br-cyan);
    font-size: .6875rem;
  }
  .br-work-title {
    margin-top: .5rem;
    font-size: .875rem;
  }
  .br-footer { grid-template-columns: minmax(0, 1fr); }
  .br-footer-main { padding: 2.5rem 1.25rem 3rem; }
  .br-footer-columns { grid-template-columns: 1fr; }
  .br-footer-nav { grid-template-columns: 1fr; }
  .br-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-pagetop {
    flex-direction: row;
    min-height: 5rem;
    padding: 1.25rem 1.875rem;
  }
  .br-pagetop-label { writing-mode: horizontal-tb; }
}

/* Recommended endpoints and accessible interaction support. */
@media (hover: hover) {
  .br-split-link:hover { opacity: .82; }
}

.br-site :focus-visible {
  outline: 2px solid var(--br-blue);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--br-white);
}

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

Tailwind v4 Token Mapping

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

@theme inline {
  --color-corporate: var(--br-blue);
  --color-cyan: var(--br-cyan);
  --color-navy: var(--br-navy);
  --color-canvas: var(--br-white);
  --color-ink: var(--br-ink);
  --color-muted: var(--br-muted);
  --color-rule: var(--br-rule);
  --color-pale: var(--br-pale);

  --font-japanese: var(--br-font-jp);
  --font-english: var(--br-font-en);

  --text-display: var(--br-display);
  --text-section: var(--br-heading);
  --text-benefit: 2.5rem;
  --text-body: 1rem;
  --text-body-mobile: .875rem;

  --spacing-page: var(--br-gutter);
  --radius-control: var(--br-radius-small);
  --radius-panel: var(--br-radius-panel);
  --radius-frame: var(--br-radius-frame);
}

Sources & Evidence

  • Original and final website: https://birusisu.co.jp/. The supplied browser observation reports HTTP 200 with no URL change and a page title identifying Nihon Birusisu's building-maintenance business.
  • Capture date: supplied retrieval timestamp 2026-09-12T06:46:56.537Z. Individual screenshot timestamps were not separately supplied.
  • Desktop evidence: three original-page captures at 1440 × 1000, showing the initial header/hero/service photography, the middle Benefits section, and the contact/footer region. Supplied DOM includes text, link destinations, element rectangles, computed styles, and custom properties.
  • Mobile evidence: two original-page captures at 390 × 844, showing the opening and lower footer. Supplied DOM measurements cover additional homepage sections and responsive typography.
  • Readiness scope: the provided inspection process waited for document loading, image decoding, finite motion, and sampled layout/text stability within stated time limits. Perpetual animations were temporarily paused during readiness checks and resumed afterward. These checks support settled captures, not a complete behavioral audit.
  • Interaction evidence: link destinations and transition declarations are supplied. No explicit menu opening, dropdown activation, news dragging, contact submission, or page-top click sequence was provided. Scrolling was used to obtain settled page regions, but exact scroll offsets and continuous motion recordings were not supplied.
  • Limitations: no additional browsing, commands, or file access were performed for this reference. Image asset paths, complete stylesheets, media-query rules, font-loading diagnostics, and unexercised interaction states were unavailable. Hidden or offscreen DOM content was not treated as proof that a corresponding panel was visibly open.

This reference describes the current homepage supported by the supplied original-page evidence. Measured values, screenshot estimates, calculated geometry, and proposed implementation additions are identified separately throughout.

← デザイン一覧に戻る