MANERUBETA

日本のWebデザインを、AIの制作リファレンスに。

タイムトリップしよう、常陸国ロングトレイルで。｜茨城県のWebサイトプレビュー

DESIGN REFERENCE

タイムトリップしよう、常陸国ロングトレイルで。｜茨城県

ブランドサイト観光地域振興アウトドア和風イラスト縦書き明朝体紙の質感多言語レスポンシブ

茨城県北の自然・歴史・文化を紹介する観光サイト。紙の質感、水彩風の山並み、縦書き、小さな写真を織り込んだ地域紹介で、歩く旅の物語を伝える。

オリジナルサイトを見る
ジャンル
観光・旅行
元の業種
観光・地域振興
デザイン分析日
2026/9/17

design.md

ダウンロード

Hitachi-no-kuni Long Trail — Style Reference

A walking journey presented as an illustrated travel scroll, with forest-green lettering, blue mountain washes, and warm paper.

Website: hlt.pref.ibaraki.jp Original URL: https://hlt.pref.ibaraki.jp/ Final URL: https://hlt.pref.ibaraki.jp/ Theme: light paper surfaces with extensive landscape illustration Inspected: September 17, 2026, 04:31 JST; supplied capture timestamp: 2026-09-16T19:31:33.278Z Viewports: desktop 1440 × 1000; mobile 390 × 844, in CSS pixels Scope: the current Japanese homepage. Visual evidence covers the opening composition, the lower desktop story directory and its transition into the next chapter, and desktop/mobile footers. Rendered DOM and computed-style evidence additionally cover the introduction, movie collection, area map and story directory. Later itinerary, downloadable-map and access sections are represented primarily by extracted text and links. Linked pages and opened interaction states were not inspected.

The homepage introduces a regional walking route through landscape, local history, religious sites, and everyday rural life. Its structure is a substantial destination guide: an illustrated opening leads into explanatory prose, films, two ways to discover eleven areas, a three-day itinerary, map resources, travel information, and institutional contact details.

The strongest visual relationship is between monumental lettering and small human figures inside expansive scenery. The opening places a dark green Japanese/English wordmark over pale blue mountain ridges; a lone walker gives the rocky foreground scale. A village scene closes the page with rice fields, a red-roofed house, and a resident near the entrance. Warm paper and decorative clouds connect these landscapes to the information sections.

Typography alternates between vertical Japanese compositions and horizontal reading text. The story directory introduces another distinctive device: large colored phrases interspersed with small rounded photographs, followed by plain hashtags and a compact place-name block. The interface remains quiet enough for the illustrations and lettering to carry the experience.

How to Read This Reference

  • Measured means a value appears in the supplied rendered DOM or computed styles. Fractional rectangles are rounded for readability where appropriate.
  • Derived means a calculation from measured values, such as the gap between adjacent movie items.
  • Estimated means a visual approximation from the original-page screenshots. Estimated colors were not sampled with a pixel tool.
  • Recommended means an implementation choice for a new project. It is not a claim about the original source.
  • Token names below are descriptive aliases. Observed source font variables are identified separately.
  • A wrapper's computed font does not necessarily describe its visible children or artwork. In particular, the empty-text H1 and several H2 wrappers should not be treated as proof of the large lettering's font or size.
  • Screenshots establish settled appearance. They do not establish menu behavior, playback behavior, hover endpoints, parallax, or entrance sequences.

Tokens — Colors

Default Palette

Name Value Suggested token Evidence and role
Warm Paper #ECE3D1 --color-paper Measured body background: rgb(236, 227, 209) at both viewports
Forest Ink #204637 --color-ink Measured corner slogan, menu characters, and mobile map-region button background
Warm Charcoal #37322E --color-text Measured Japanese introduction, story hashtags, pronunciation labels, and area names
Black #000000 --color-black Measured English introduction and sampled section captions/subheadings
Utility Gray #979797 --color-muted Measured desktop language separator; the inactive language also appears gray in the screenshots
White #FFFFFF --color-white Measured movie-item caption text; also visible in mobile text over scenery
Light Sheet approximately #FFFBEE --color-sheet Estimated story-panel interior and desktop outbound-card surface
Fine Rule approximately #A59B8C --color-rule Estimated thin separators across story rows
Patterned Gold approximately #CBB660 --color-frame Estimated patterned border around the desktop area-story panel
Mountain Blue approximately #7AAAC5 --color-mountain Estimated representative illustration color; not a measured interface fill

The paper background is a measured flat color beneath a visibly textured result. Reproducing only the hex value will omit the grain and tonal variation. Likewise, the mountains contain many overlapping blues; Mountain Blue is a useful reference swatch, not a substitute for the artwork.

Story Accents

The visible desktop rows use muted colors to distinguish their narrative headlines. Each row's narrow place-name divider echoes its headline color. Hashtags and place names retain dark neutral text.

Visible area Approximate accent Application
竪破山 #9D9390 Warm gray headline and divider
花園 #BF565A Muted red headline and divider
奥久慈 #4B6B90 Slate blue headline and divider
大子町中心商店街 #B85B90 Dusty pink headline and divider
高部宿 #AA8368 Earth-brown headline and divider
八溝山 #A7B55C Yellow-green headline and divider

All six accent values are visual estimates. They describe the visible rows only; the evidence does not establish a complete eleven-area color system.

No theme selector is evidenced. The numerous transparent --g-color-* custom properties are generated styling infrastructure, not a useful visible palette to copy.

Tokens — Typography

Japanese Display — Shuei Shogo Mincho

  • Observed family: 秀英初号明朝.
  • Observed source variable: --s-font-8487dadf.
  • Confirmed roles: the small opening slogan, map/story subheadings, and area names.
  • Weights: computed 600 for the corner slogan and 700 for sampled subheadings and place names.
  • Character: sharp stroke contrast and emphatic triangular terminals reinforce the historic, printed atmosphere.
  • Recommended alias: --font-display: '秀英初号明朝', serif.

The large trail wordmark has a custom graphic arrangement: oversized Japanese characters, smaller pronunciation text, an English lockup bounded by horizontal rules, and a second Japanese line. Its extracted H1 text is empty. Preserve it as a distinct artwork component; its appearance cannot be recreated by applying the H1 wrapper's generic 32px sans-serif declaration.

Japanese Reading Text — Shippori Antique

  • Observed family: Shippori Antique.
  • Observed source variable: --s-font-7c80999d.
  • Confirmed roles: introductory paragraphs, menu characters, section descriptions, movie captions, hashtags, pronunciation labels, and area suffixes.
  • Treatment: generous paragraph leading and tracking; much tighter line boxes for directory metadata.
  • Responsive change: introductory prose reduces from 18px / 600 on desktop to 16px / 400 on mobile.

Latin Display — Fraunces

  • Observed family: Fraunces.
  • Observed source variable: --s-font-d893b5ad.
  • Confirmed roles: English introductory statement, English chapter captions such as MOVIE and AREA STORY, and the desktop language separator.
  • Weight: sampled values use 400.

The language labels look serif in the captures, but their supplied anchor wrappers report generic sans-serif. The precise child-font assignment for those two labels is not independently established.

English Reading Text — Cabin

  • Observed family: Cabin.
  • Observed source variable: --s-font-4e89d926.
  • Confirmed role: the desktop English explanatory paragraph.
  • Measured treatment: 20px, weight 400, 39px line height, and 0.2px letter spacing.

The source also registers Inter,'Noto Sans JP', アンチックAN R, and アンチックAN M. Their presence does not establish a visible role in the sampled components. Do not assign them to the wordmark or story artwork without further evidence.

Type Scale

Values below describe the sampled text elements, not a universal heading scale.

Role Desktop size / line height Mobile size / line height Weight Tracking
Corner slogan 18 / 21.06px 12 / 14.4px 600 0.12em desktop; 0.06em mobile
Vertical menu characters 16 / 16.16px 14 / 14.14px 400 Normal
Japanese introduction 18 / 39.96px 16 / 35.52px 600 → 400 0.13em
English introductory statement 27 / 44.01px Not present in supplied mobile rendered text 400 -0.01em
English introductory paragraph 20 / 39px Not present in supplied mobile rendered text 400 0.01em
English chapter caption 19 / 24.13px 16 / 24px 400 Normal
Japanese chapter description 20 / 36px 16 / 25.6px 600 0.03em
Map/story subheading 32 / 32.32px 20 / 20.2px 700 0.3em → normal
Story hashtags 13 / 15.99px Same 400 0.03em
Place-name pronunciation 10 / 15px 8 / 9.6px 400 0.03em
Place name 20 / 33px 18 / 21.96px 700 Usually normal
Area suffix 8 / 14.96px 11 / 12.98px 400 0.03em
Movie hashtags 16 / 30.08px 16 / 26.08px 400 0.03em

Two desktop place names, including the long shopping-street name, use -1.6px tracking. The corresponding mobile names use normal tracking. This is a local fit adjustment, not a recommendation to tighten every heading.

The colorful story phrases appear approximately 28–32px high on desktop. Their font implementation is unresolved because those phrases are visible in the screenshot but absent from the supplied anchor text extraction.

Tokens — Spacing & Shapes

Density: spacious scenic chapters surrounding compact information rows. Geometry: mostly flat, square structures; slight rounding on small photographic fragments and outbound cards; circular controls in the movie/map regions.

Spacing Scale

Use Value Status
Corner slogan line gap 8px desktop; 3px mobile Derived from text rectangles
Pronunciation-to-name gap Usually 4px Derived from sampled rectangles
Horizontal hashtag gap 12px Derived
Wrapped hashtag row gap Usually 8px, with a 9px example Derived on mobile
Story-row vertical padding 11px / 12px desktop; 15px / 16px mobile Measured; some final rows use equal top/bottom padding
Mobile story-list side inset 16px Measured
Mobile introduction side inset 20px Measured
Introduction paragraph gap 28px Derived at both viewports
Movie-item gap 60px desktop; 36px mobile Derived from item positions and 269px widths
Desktop story-section outer padding 50px each side Measured
Desktop English paragraph left padding 96px Measured
Desktop footer panel padding and column gaps Approximately 40px Screenshot estimate
Mobile footer-card gap Approximately 16px Screenshot estimate

Border Radius

Element Geometry Evidence
Story-row anchor 0 Measured
Movie-item button 0 Measured
Movie previous/next controls 50%, 60 × 60px Measured on desktop
Additional mobile map-region control 50%, 32 × 32px Measured; action unknown
Inline story photographs Approximately 6–9px radius Visual estimate
Footer cards and desktop footer panel Approximately 3–4px radius Visual estimate
Mobile language-switch surface Approximately 2px radius Visual estimate

Layout Measurements

Element Desktop Mobile Interpretation
Document height 15,934.05px 15,572.11px Recorded rendered document, not a target height
Opening section 1440 × 1979px 390 × 1096px Extends beyond the first viewport
H1 wrapper y:206, height 285px y:216, height 146.48px, horizontal padding 40px Measures the artwork container
Corner slogan origin (60, 60) (16, 24) Strong responsive inset change
Menu button (1330,135), 18 × 108px (348,24), 22 × 90px Very narrow recorded button boxes
Language links Near top-right at y:59.92 Two 61 × 23px links at y:803 Mobile moves into a bottom-corner surface
Japanese introduction column Width 479.67px, left 220.05px Width 350px, left 20px Desktop reading measure becomes nearly full-width
Movie item 269 × 578.16px 269 × 570.16px Width is retained rather than scaled to the viewport
Story-row width 984.48px, left 262.25px 358px, left 16px Broad row becomes a stacked entry
Ordinary story-row height Mostly 85–86px Approximately 208–275px Mobile height varies with content
Long shopping-street row 100px 272.97px Desktop pronunciation wraps to two lines
Footer panel Approximately 1168 × 224px No common opaque panel visible Screenshot estimate
Footer outbound card Approximately 336 × 144px Width approximately 358px; heights 112px and 136px Screenshot estimate

There is no evidence of one global modular spacing unit. Use the recurring component values without forcing the entire illustrated composition onto an eight-pixel grid.

Components

Opening Landscape and Wordmark

Role: establish the place and the feeling of walking through time.

The desktop first screen begins with a broad, lightly textured cream sky. Layered blue ridges enter around the lower edge of the wordmark. The foreground gradually becomes darker and more detailed, with green vegetation and angular rock faces. A small walker stands near the lower-left portion of the capture.

The central wordmark combines three scales: the large Japanese place name, a smaller English title bounded by fine rules, and the sweeping Japanese trail name below. A tiny pronunciation annotation sits above part of the main name. The visible ink occupies roughly 575px of desktop width; the actual asset bounds were not supplied.

A short two-line slogan sits independently at the top-left: タイムトリップしよう、 and 常陸国ロングトレイルで。. The introductory vertical copy is lower and farther left than the central logo. It is dark over the pale desktop mountains and white over the darker mobile foreground.

At 390px, the artwork is recomposed into a tall scene. Mountain ridges begin around y:140, the wordmark starts around y:216, and the walker is visible around the middle of the first screen. Vertical copy begins near y:680 and continues below the screenshot. Preserve this extended composition; the original opening section is 1096px tall at an 844px viewport.

Implementation guidance: separate the background landscape, title artwork, corner slogan, and introductory text. Use independently adjustable mobile crops or artwork variants. A single centered background crop will not reliably preserve both the walker and the title's clear space.

Persistent Index Control

Role: access to the page index, labeled 項目一覧.

The visual mark is three slim vertical strokes, followed by four Japanese characters stacked downward. It sits directly over the page without a large filled button container. Its repeated position across the opening, middle and footer captures supports a persistent viewport utility.

Desktop places it at y:135; mobile raises it to y:24. The label decreases from 16px to 14px. The observed button is only 18px wide on desktop and 22px on mobile.

The menu was not opened. Its overlay, item arrangement, close affordance, focus behavior, and animation remain unverified. A new implementation should retain the slender visual mark while increasing its interactive width.

Language Switch

Role: navigation between the Japanese root page and /en.

Desktop shows a quiet JPN / ENG line at the top-right, approximately 60px from the top and right edges. The Japanese option appears dark green; the English option is muted.

Mobile presents a small white rectangle near the bottom-right, approximately 126 × 27px, with a green dot beside JPN and a short vertical separator between options. Its two measured link boxes are each 61 × 23px. The surface stays in the same position in the opening and footer captures.

These are navigation links. No in-place translation or language persistence behavior was tested.

Introductory Editorial Block

Role: explain the route's scope and the connection between nature, history and daily life.

The Japanese explanation consists of three paragraphs. Its unusually generous 2.22 line-height and 0.13em tracking make a relatively small text column feel deliberate and calm. The desktop text measure is approximately 480px; mobile uses 350px with 20px side insets.

The introductory Japanese heading occupies a narrow composition at the left in the desktop measurements and moves to a centered block above the paragraphs on mobile. The mobile heading wrapper is approximately 107 × 224.64px.

Desktop also includes an English statement in Fraunces and a longer Cabin paragraph, arranged side by side in the sampled rectangles. The right paragraph has 96px of left padding. This English block is absent from the supplied mobile rendered text; the mechanism producing that difference was not established.

Chapter Heading Group

Role: orient the visitor through the long page.

Repeated chapters pair a compact Japanese title with an uppercase English caption and a short explanatory sentence. Examples include 映像体験 / MOVIE and 郷土物語 / AREA STORY.

The sampled Japanese heading wrappers measure 100 × 108px on desktop and 80 × 68.31px on mobile. Their generic H2 font declarations should not be used as the visible glyph specification. The English caption is confirmed Fraunces at 19px desktop and 16px mobile.

The Movie description is one horizontal line on desktop and two centered lines on mobile. The Area Story description uses two lines in both supplied layouts. Keep English captions subordinate to the Japanese chapter identity.

Movie Collection

Role: introduce different experiences along the trail through seven media entries.

The DOM records a horizontal sequence of tall 269px-wide buttons with two-line white hashtag captions. Neighboring items extend outside the viewport. The fourth item is centered in both snapshots: its desktop left edge is 585.5px, while its mobile left edge is 61px.

The desktop item step is 329px, giving a 60px gap. Mobile uses a 305px step and a 36px gap. Item width stays constant. This creates room for several entries on desktop and a central entry with neighboring fragments on mobile.

Desktop previous/next buttons are circular 60px controls, separated by 12px. Those arrow buttons do not appear in the supplied mobile element sample. This does not prove which touch gestures are supported.

No movie-region screenshot or opened player was supplied. Poster imagery, play symbols, modal styling, autoplay, sound, and swipe behavior remain unverified. The measurements support the collection's geometry, not a complete player design.

Area Discovery Map

Role: provide geographic entry points to the eleven area pages.

The headings 地図から探す and 物語から探す identify sequential subsections in the recorded layout. They are not evidenced as tabs.

On desktop these subheadings are vertical Mincho text at 32px with 0.3em tracking. On mobile they become centered horizontal headings at 20px with normal tracking.

The map subsection contains eleven anchors leading to the same destinations as the story list. A supplied CSS excerpt uses percentage coordinates for map links; the first includes top:52.95%, left:67.511%, and width:5.633%. This supports placing the clickable regions in the same coordinate system as the map artwork.

Several mobile link boxes are only approximately 14–27px wide. An additional 32px green circular button appears near the map region, but its icon and action were not supplied. Do not label it as a zoom control without further inspection.

The desktop map anchors share an origin in the supplied rectangle sample. Those rectangles are insufficient to reconstruct the final geographic arrangement. Preserve a text directory as an alternative to the map and verify actual marker placement against the artwork in a new implementation.

Illustrated Story Frame

Role: give the area directory the character of a mounted printed sheet.

The desktop screenshot shows a pale inner field enclosed by an approximately 40px gold border. Small repeated mountain-like motifs texture the gold. Thin story rules remain visually lighter than the frame.

Cloud illustrations overlap the frame's lower edge and extend into the surrounding paper. Their cream bodies, blue-green lower edges, and irregular silhouettes conceal the hard boundary between the directory and the next chapter. The next Japanese chapter heading begins after a generous area of empty paper.

Treat the clouds as separate decorative layers with transparent backgrounds. Their overlap is a compositional device; no movement is demonstrated. The mobile middle section was not visually captured, so the exact mobile treatment of this frame and its clouds remains unverified.

Story Directory Row

Role: make each destination discoverable through a narrative phrase, visual fragments, and themes.

Each desktop row is one anchor spanning approximately 984.48px. Its anatomy is:

  1. A large colored phrase with small rounded photographic fragments inserted between words.
  2. A line of plain dark hashtags below the phrase.
  3. A narrow colored vertical divider near the right edge.
  4. A place-name block containing a small pronunciation line, a bold Mincho name, and a tiny vertical エリア suffix.
  5. A fine neutral horizontal separator across the row boundary.

The left narrative region occupies roughly four fifths of the row. The name text starts at x:1082.73px; the long pronunciation label has a measured 164px text width. The photographic fragments are visually about 45–85px wide and 25–28px high. Their cropped subjects include forests, shrines, waterfalls, streets, food, and mountain scenery.

The headline is the main visual link cue. Hashtags are supporting descriptors inside the row anchor; the evidence does not show them as independent filters. Avoid turning them into filled pill badges.

On mobile, the row becomes a taller composition. The narrative region comes first, hashtags wrap below it, and the place-name group follows underneath toward the left. Place names begin around x:37px within rows starting at x:16px. The suffix changes to horizontal text and increases to 11px. Row heights vary from approximately 208px to 275px.

The visible decorative phrases are missing from the extracted anchor text. Whether they are image lettering or another rendering technique is unresolved. For a new implementation, use accessible live text where possible, or provide a text equivalent for authorized headline artwork.

Three-Day Model Course

Role: turn the site's regional stories into an example journey.

The rendered text confirms three DAY groups with day numbers, a thematic title, a duration, a descriptive paragraph, and a sequence of named stops with travel times. The displayed day durations are 4, 3.5, and 5 hours.

This is a structured itinerary component. Preserve the relationship between each stop and its following travel segment. An ordered list is a suitable implementation foundation.

Only the beginning of this chapter's heading is visible in the supplied middle screenshot. Exact card layout, route-line styling, icons, photography, and responsive arrangement are not established. A vertical mobile timeline would be a recommendation, not an observed feature.

Illustration Map Resources

Role: provide downloadable trail-area maps.

The DOM confirms a chapter labeled 周辺絵図 / ILLUSTRATION MAP, explanatory copy, and four document links for Japanese, English, French and Traditional Chinese. The links point to separate PDF resources.

The repeated labels in the extraction do not establish duplicate visible buttons or an animated text effect. The resource files were not opened, and no map-section screenshot was supplied. Keep the languages explicit and each document independently reachable in a new implementation.

Access Information

Role: explain arrival by rail, highway bus and car.

The extracted content confirms rail access to Hitachi and Fukuroda stations, separate highway-bus directions, and a car-access subsection. It includes departure and arrival labels and approximate journey times.

No opened accordion or tab state is evidenced. Do not invent collapsible behavior from the transport headings alone. A new design can reuse the paper surface, clear type hierarchy and fine separators, while keeping route information readable as text.

Village Footer and Outbound Cards

Role: conclude the scenic journey and provide practical next steps.

The full-width illustration shows a red-roofed rural house, yellow-green rice fields, dense vegetation and a winding path. A person near the doorway gives the scene the same human scale as the walker in the opening.

Desktop places a broad beige panel over the lower scene. At approximately 1168 × 224px, it holds three columns: institutional contact information, an official-site card, and an Instagram card. The two cards are approximately 336 × 144px, with about 40px between columns.

Each outbound card contains a recognizable logo or service icon, a dark green title, a small external-link symbol at the top-right, a thin horizontal divider, and a compact explanatory line. The Instagram card adds the account handle. The official trail logo remains lime green, while the Instagram symbol retains its familiar multicolor treatment.

Mobile removes the common opaque backing visible on desktop. The two lightly translucent cards stack with approximately 16px between them, followed by white contact text directly over the illustration. The official-site card has a one-line heading at this width; the Instagram title uses two lines. The contact heading also changes from two desktop lines to one mobile line.

The footer identifies 茨城県 県北振興局 and includes its postal address and email link. The outbound destinations recorded on the original page are kenpokult.com and the trail's Instagram account. Their destination pages were not inspected.

Tokens — Motion & Interaction

Stylesheet Evidence

Element Recorded declaration What it establishes
Body background background 0.5s cubic-bezier(0.4, 0.4, 0, 1) A half-second background transition is defined; trigger and alternate colors are unknown
Story-row anchors 0.4s cubic-bezier(0.4, 0.4, 0, 1) plus generated-property transitions A transition duration and easing are defined; hover endpoint is not supplied
Desktop movie arrows 0.4s cubic-bezier(0.4, 0.4, 0, 1) Control transitions are defined; the changed properties were not exercised
Area-map anchors 1s cubic-bezier(0.4, 0.4, 0, 1) plus generated-property transitions A longer transition is defined; its visible effect is unverified
Many other sampled elements Easing without a displayed nonzero duration Insufficient evidence for a visible transition
Sampled animation fields none No named CSS animation on those sampled elements at capture time

The screenshots show stable illustrations and persistent utility positions. They do not demonstrate a moving mountain scene, drifting clouds, scroll-linked parallax, or a loading reveal.

The DOM contains another pair of centrally positioned vertical slogan elements at 28px desktop and 24px mobile. They are not visibly present in the settled opening screenshots. Their bounds alone do not establish a splash screen or entrance animation.

The inspection process waited for loading, image decoding and layout stability, with bounded time limits. Perpetual animation was temporarily paused during readiness checks and resumed afterward. These precautions do not prove that every delayed state or interaction was captured.

Recommended motion approach: use the observed easing for restrained color or opacity feedback, keep navigation immediately usable, and add motion only when it supports the content. Any new hover endpoint, reveal animation, or reduced-motion behavior should be documented as an addition.

Surfaces

Layer Appearance Purpose
Page canvas Warm beige with fine paper-like texture Continuity between chapters
Scenic opening Blue mountain washes and detailed green/gray foreground Establish destination and scale
Story sheet Pale cream interior, gold patterned frame Contain the dense directory
Story rows Flat surface with fine rules and local color accents Organize many destinations without heavy boxes
Decorative transition Cream clouds with blue-green edges Blend framed content into surrounding paper
Desktop footer panel Opaque beige field Make three practical information groups readable
Outbound cards Light cream desktop; lightly translucent mobile Separate links from detailed scenery
Mobile language switch Small white rectangle Keep language navigation visible over changing imagery

The supplied captures show no general elevation-shadow system. Depth comes from painted landscape layers, overlapping clouds, and the contrast between detailed scenery and quiet text surfaces. Translucency in the mobile footer is not evidence of backdrop blur.

Imagery

The main landscapes combine watercolor-like washes with more detailed painted linework. Mountain ridges soften and lighten with distance. Rocks, leaves, timber and roof tiles become more specific in the foreground. Fine grain unifies sky, paper and scenery.

Human figures are deliberately small. They make the landscape feel inhabitable without turning the page into a portrait-led travel advertisement. The opening walker and closing resident also connect physical exploration with ordinary village life.

The directory uses actual photographic fragments at a much smaller scale. These narrow rounded crops function like visual punctuation inside a headline. Their rhythm is more important than a uniform thumbnail aspect ratio.

Observed Asset References

Asset or treatment Evidence location Implementation implication
Mountain panorama with walker Desktop and mobile opening captures Provide independent crop control for each layout
Japanese/English trail wordmark Opening captures and empty-text H1 wrapper Use an authorized lockup with an accessible text equivalent
Paper grain Opening sky and middle-section canvas Keep texture subtle and avoid repeated visible seams
Gold border with repeated motifs Desktop story-directory capture Use a repeatable border texture or matching artwork
Overlapping clouds Lower edge of desktop story frame Use separate decorative assets, hidden from assistive technology
Inline destination photographs Desktop story rows Use small wide crops interleaved with the phrase
Village and rice-field illustration Desktop and mobile footer captures Preserve house/person landmarks when cropping
Trail logo and Instagram icon Footer cards Retain recognizable brand colors at small scale
Illustrated-map download resources Rendered links Four language-specific documents; their contents were not inspected

Complete URLs for the landscape, wordmark, cloud and thumbnail assets are not present in the supplied evidence. Background-image URLs appear only in truncated CSS excerpts, so no guessed asset paths are provided here.

Use natural image interpolation for the painted landscapes. Pixelated rendering would change the supplied visual character. CSS can reproduce the frame, spacing and typography, but the scenic identity depends on suitable artwork.

Layout & Responsive Behavior

Desktop Composition

The page spans the browser width and alternates broad scenic fields with narrower reading and directory regions. The opening uses substantial sky around the title, while the story list concentrates information into an approximately 984px-wide column inside its decorative frame.

The corner slogan and language links begin around 60px from the viewport edges. The menu sits lower than the language control. The page has no conventional full-width navigation bar in the supplied captures.

Mobile Composition

Feature Observed change at 390 × 844
Opening Tall crop brings the walker and foreground rocks into the first screen
Title H1 begins at 216px; its available inner width is 310px after padding
Corner slogan Moves to 16px left and 24px top; type reduces to 12px
Index control Moves to the top-right at 24px from the top
Language switch Relocates to a small bottom-right white surface
Hero introduction White vertical copy appears over the dark foreground
Japanese prose Uses 350px width, 16px type and regular weight
English introduction Absent from the supplied mobile rendered text
Movie collection Retains 269px item width while reducing gaps to 36px
Map/story subheadings Change from vertical 32px text to horizontal 20px text
Story entries Stack narrative, tags and area identity; retain 13px hashtags
Footer Outbound cards stack above contact details; the common beige backing is no longer visible

The page does not simply scale down. Writing direction, positioning, content grouping, text color and footer order change independently.

Breakpoints and Measurement Limits

A source excerpt confirms a max-width:1260px media query for line-break visibility. It does not establish the breakpoint responsible for every mobile change. The complete breakpoint system was not supplied.

The recorded introduction and movie-section rectangles overlap on desktop. These coordinates may include decorative or positioned layers and should not be converted directly into normal-flow section margins.

Recommended implementation: use content-driven breakpoints, with approximately 768px as an initial adaptation point for the supplied CSS. This is a new implementation choice. Validate intermediate widths, long place names, font fallback, zoom, and landscape phones separately.

Do’s and Don’ts

Do

  • Preserve the measured paper #ECE3D1, forest ink #204637, and warm charcoal #37322E as the interface foundation.
  • Give the mountain and village scenes enough space to establish scale and atmosphere.
  • Keep the trail wordmark as a carefully proportioned graphic lockup.
  • Combine vertical Japanese display compositions with generous horizontal prose.
  • Keep photographic fragments embedded in the story phrases.
  • Let hashtags remain plain, compact metadata beneath the narrative.
  • Use local story accents for headlines and matching dividers while keeping supporting text dark.
  • Recompose the opening artwork for mobile so the walker remains visible.
  • Move the area identity below the story content on narrow screens.
  • Preserve the desktop/mobile difference in footer grouping and text contrast.
  • Keep both the geographic map and the text directory available.

Don’t

  • Don't replace the illustrated opening with a generic photograph and oversized conversion button.
  • Don't flatten the whole site into a card grid; it includes prose, media, geographic discovery and practical travel information.
  • Don't infer the wordmark's typography from the generic H1 wrapper.
  • Don't turn story hashtags into filters unless filtering is implemented as a new feature.
  • Don't describe the map/story headings as tabs without evidence.
  • Don't assign a zoom action to the unlabeled map-region button.
  • Don't add large rounded containers, glossy gradients or elevation shadows throughout the page.
  • Don't stretch the artwork or apply pixelated image rendering.
  • Don't shrink 13px hashtags proportionally with the desktop canvas.
  • Don't claim parallax, autoplay, drifting clouds or menu transitions from static captures.
  • Don't invent illustration filenames or production roles.

Recommended Implementation Additions

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

  • Keep the slender index artwork but provide an interactive width of at least 44px. Increase the mobile language links' touch height beyond the observed 23px.
  • Give the index button a clear accessible name and an expanded state. If it opens a modal panel, implement focus management and Escape behavior.
  • Provide an accessible page heading for the graphic wordmark and text equivalents for any image-based story phrases.
  • Label map hotspots with destination names. Keep the story list usable independently of the map.
  • Treat decorative clouds, textures and redundant inline photographs as decorative images.
  • Add visible focus indicators that remain distinguishable over cream surfaces and detailed scenery.
  • Provide reduced-motion behavior for any added effects, and keep content visible without reveal scripts.
  • Check contrast for muted story accents and white text against the exact image crop. A discreet backing surface can help where scenery becomes too variable.
  • Use appropriately sized mobile artwork and explicit image dimensions. Prioritize the opening scene; defer lower-page images and media until needed.
  • Keep itinerary stops and transport information readable as semantic text. Include document language and file type in map-link labels.

Agent Prompt Guide

Quick Color Reference

  • Measured canvas: #ECE3D1.
  • Measured brand/navigation ink: #204637.
  • Measured Japanese reading text: #37322E.
  • Estimated inner sheet: #FFFBEE.
  • Estimated decorative frame: #CBB660.
  • Estimated representative mountain blue: #7AAAC5.
  • Story colors are muted regional accents; they do not replace the dark neutral metadata.
  • White is used for selected text over scenery and media captions.

Overall Prompt

“Create an editorial tourism homepage for a Japanese long-distance walking trail. Use warm textured paper #ECE3D1, forest-green identity #204637, warm charcoal reading text #37322E, and large painted landscapes. Open with layered blue mountains, a small walker on a rocky ridge, and a custom Japanese/English title lockup. Place a small two-line slogan at the upper-left, a slender vertical index control at the right, and language links in the upper-right. Organize the long page into introduction, films, geographic discovery, eleven area stories, an example itinerary, map resources and access information. Build story links as large colored phrases punctuated by tiny rounded photos, with plain hashtags below and a compact place-name block. End with a painted village and rice-field scene containing official-resource cards and contact details. On mobile, recompose the artwork, move language links to the bottom-right, stack story metadata and place resource cards above the contact block. Treat unobserved player and menu states as new implementation work.”

Example Component Prompts

  1. Opening scene: “Compose a cream-paper sky above layered blue mountain ridges and detailed green-gray rocks. Keep a small walker visible. Overlay a dark green bilingual title artwork near the upper-middle and a separate small slogan at the upper-left. Introduce a vertical Japanese paragraph lower in the scene. Produce a mobile composition with less sky and more foreground.”
  2. Story row: “Create one flat destination link approximately 984px wide. Place a muted-color narrative phrase with several small rounded photographic fragments on the left, plain 13px hashtags below, and a pronunciation/name block on the right behind a matching vertical divider. Separate entries with a fine neutral rule. On mobile, use a 358px content width and move the name block below the tags.”
  3. Chapter transition: “Frame a pale cream directory with a gold border containing tiny repeated mountain motifs. Overlap the lower border with irregular cream clouds shaded blue-green underneath. Leave generous warm-paper space before the next compact Japanese chapter title. Keep the decoration static unless motion is separately specified.”
  4. Footer: “Place two light outbound-link cards over a detailed illustration of a red-roofed rural house and rice fields. Each card has a recognizable logo, dark green title, small external-link symbol, divider and compact supporting line. On desktop, group them with contact information in one beige three-column panel. On mobile, stack the cards and place white contact text directly below over the landscape.”
  5. Responsive refinement: “Review at 1440×1000 and 390×844. Preserve the walker and wordmark, use 16px mobile story gutters, retain 13px hashtags, convert vertical subsection headings to horizontal text, and prevent fixed language controls from covering reachable content. Do not infer unsupported intermediate breakpoints from the two endpoints.”

Quick Start

CSS Custom Properties

This is a reusable adaptation, not extracted source CSS. Exact measured colors and typography are retained where available; illustration colors, radii, hover treatment and the 768px breakpoint are recommendations or estimates. The enlarged utility hit areas intentionally differ from the original measurements.

Supply project assets through --paper-texture, --hero-art, --hero-art-mobile, --frame-texture, and --footer-art, using authorized url(...) values. Without those assets, the CSS provides only the layout and flat surfaces. Font stacks name observed families but do not load font files.

Suggested structure: a .trail-page containing the utility controls, .trail-hero, chapter sections and .trail-footer. A .story-row is one anchor containing .story-main and .story-area; the main group contains .story-headline and .story-tags. The footer panel contains the contact group and two resource cards.

:root {
  /* Measured interface colors */
  --color-paper: #ece3d1;
  --color-ink: #204637;
  --color-text: #37322e;
  --color-black: #000;
  --color-muted: #979797;
  --color-white: #fff;

  /* Visual estimates for reusable surfaces */
  --color-sheet: #fffbee;
  --color-rule: #a59b8c;
  --color-frame: #cbb660;
  --color-mountain: #7aaac5;

  /* Observed families with recommended generic fallbacks */
  --font-display: '秀英初号明朝', serif;
  --font-jp: 'Shippori Antique', sans-serif;
  --font-en-display: 'Fraunces', serif;
  --font-en-body: 'Cabin', sans-serif;

  --text-body: 18px;
  --text-tags: 13px;
  --text-area: 20px;
  --text-reading: 10px;
  --leading-body: 2.22;
  --tracking-body: 0.13em;
  --tracking-small: 0.03em;

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-28: 28px;
  --space-40: 40px;
  --space-60: 60px;

  --story-width: 984.5px;
  --footer-width: 1168px;
  --movie-width: 269px;
  --movie-gap: 60px;
  --radius-card: 4px;
  --radius-photo: 8px;
  --ease-site: cubic-bezier(0.4, 0.4, 0, 1);
  --duration-control: 400ms;
}

* { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }

.trail-page {
  color: var(--color-text);
  background-color: var(--color-paper);
  background-image: var(--paper-texture, none);
  font-family: var(--font-jp);
  transition: background-color 500ms var(--ease-site);
}

.site-slogan {
  position: absolute;
  z-index: 2;
  top: 60px;
  left: 60px;
  display: grid;
  gap: 8px;
  color: var(--color-ink);
  font: 600 18px / 1.17 var(--font-display);
  letter-spacing: 0.12em;
}

.site-slogan p { margin: 0; }

/* Wider target; narrow artwork remains centered. */
.index-toggle {
  position: fixed;
  z-index: 20;
  top: 135px;
  right: 79px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 44px;
  padding: 0;
  border: 0;
  color: var(--color-ink);
  background: transparent;
  cursor: pointer;
}

.index-toggle__mark {
  display: flex;
  justify-content: space-between;
  width: 18px;
  height: 32px;
}

.index-toggle__mark span {
  width: 1.5px;
  height: 100%;
  background: currentColor;
}

.index-toggle__label {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font: 400 16px / 1.01 var(--font-jp);
}

.language-switch {
  position: fixed;
  z-index: 20;
  top: 60px;
  right: 60px;
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--color-muted);
  font: 400 16px / 1.01 var(--font-en-display);
}

.language-switch a {
  color: inherit;
  text-decoration: none;
}

.language-switch a[aria-current='page'] {
  color: var(--color-ink);
}

/* Starting geometry for the supplied desktop viewport. */
.trail-hero {
  position: relative;
  isolation: isolate;
  min-height: 1979px;
  padding-top: 206px;
}

.trail-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: var(--hero-art, none);
  background-size: cover;
  background-position: var(--hero-position, center top);
  background-repeat: no-repeat;
  pointer-events: none;
}

.hero-wordmark {
  width: min(600px, calc(100% - 80px));
  margin: 0 auto;
}

.hero-wordmark img {
  display: block;
  width: 100%;
  height: auto;
}

/* Tune placement to the supplied artwork's clear areas. */
.hero-intro {
  width: max-content;
  max-width: calc(100% - 32px);
  height: 260px;
  margin: 96px 0 0 15%;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 20px;
  line-height: 2.15;
  letter-spacing: 0.08em;
}

.intro-copy {
  width: min(480px, calc(100% - 40px));
  margin-inline: auto;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

.intro-copy p { margin: 0; }
.intro-copy p + p { margin-top: 28px; }

.section-heading { text-align: center; }

.section-heading__mark {
  display: block;
  width: 100px;
  height: auto;
  margin-inline: auto;
}

.section-heading__en {
  margin: 19px 0 0;
  color: var(--color-black);
  font: 400 19px / 1.27 var(--font-en-display);
}

.section-heading__description {
  margin: 33px 0 0;
  color: var(--color-black);
  font: 600 20px / 1.8 var(--font-jp);
  letter-spacing: 0.03em;
}

.story-frame {
  position: relative;
  max-width: 1340px;
  margin-inline: auto;
  padding: 40px;
  background-color: var(--color-frame);
  background-image: var(--frame-texture, none);
}

.story-paper {
  padding: 80px 24px 120px;
  background: var(--color-sheet);
}

.story-list {
  width: min(var(--story-width), 100%);
  margin-inline: auto;
  border-top: 1px solid var(--color-rule);
}

.story-row {
  --area-accent: #4b6b90;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 178px;
  align-items: center;
  gap: 24px;
  min-height: 86px;
  padding: 11px 0 12px;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--duration-control) var(--ease-site);
}

.story-main { min-width: 0; }

/* Live-text adaptation of the decorative phrase. */
.story-headline {
  margin: 0 0 8px;
  color: var(--area-accent);
  font: 700 clamp(22px, 2.1vw, 30px) / 1.45 var(--font-display);
}

.story-headline img {
  display: inline-block;
  width: var(--photo-width, 70px);
  height: 26px;
  margin-inline: 0.12em;
  border-radius: var(--radius-photo);
  object-fit: cover;
  vertical-align: baseline;
}

.story-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font: 400 13px / 1.23 var(--font-jp);
  letter-spacing: 0.03em;
}

.story-tags span { white-space: nowrap; }

.story-area {
  min-width: 0;
  padding-left: 12px;
  border-left: 2px solid var(--area-accent);
}

.area-reading {
  display: block;
  margin-bottom: 4px;
  font: 400 10px / 1.5 var(--font-jp);
  letter-spacing: 0.03em;
}

.area-name {
  font: 700 20px / 1.65 var(--font-display);
}

.area-suffix {
  display: inline-block;
  writing-mode: vertical-rl;
  font: 400 8px / 1.87 var(--font-jp);
  letter-spacing: 0.03em;
  vertical-align: middle;
}

/* Optional progressive-enhancement rail, not source behavior. */
.movie-rail {
  display: flex;
  gap: var(--movie-gap);
  overflow-x: auto;
  padding: 16px max(20px, calc((100% - var(--movie-width)) / 2));
  scroll-snap-type: x proximity;
}

.movie-item {
  flex: 0 0 var(--movie-width);
  scroll-snap-align: center;
}

.movie-caption {
  color: var(--color-white);
  font: 400 16px / 1.88 var(--font-jp);
  letter-spacing: 0.03em;
}

/* Scenic height is an adaptation, not a measured footer height. */
.trail-footer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 100svh;
  padding: 320px 16px 80px;
  background-image: var(--footer-art, none);
  background-size: cover;
  background-position: var(--footer-position, center);
}

.footer-panel {
  display: grid;
  grid-template-areas: 'contact official social';
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 40px;
  width: min(var(--footer-width), 100%);
  padding: 40px;
  border-radius: var(--radius-card);
  background: var(--color-paper);
}

.footer-contact { grid-area: contact; }
.resource-card--official { grid-area: official; }
.resource-card--social { grid-area: social; }

.footer-contact h2 {
  margin: 0 0 16px;
  font: 500 24px / 1.3 var(--font-jp);
}

.footer-contact p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.7;
}

.footer-contact a {
  color: inherit;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.resource-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 144px;
  padding: 20px;
  border-radius: var(--radius-card);
  color: var(--color-ink);
  background: var(--color-sheet);
  text-decoration: none;
}

.resource-card__top {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding-right: 12px;
}

.resource-card__title {
  margin: 0;
  font: 700 15px / 1.5 var(--font-jp);
}

.resource-card__note {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-rule);
  font: 600 12px / 1.6 var(--font-jp);
}

.resource-card__external {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 12px;
  height: 12px;
}

/* Recommended feedback; original hover endpoints are unknown. */
@media (hover: hover) {
  .story-row:hover { background-color: rgb(32 70 55 / 4%); }
  .resource-card:hover .resource-card__title {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

.trail-page :focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

@media (max-width: 767px) {
  :root {
    --text-body: 16px;
    --text-area: 18px;
    --text-reading: 8px;
    --movie-gap: 36px;
  }

  .site-slogan {
    top: 24px;
    left: 16px;
    gap: 3px;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.06em;
  }

  .index-toggle { top: 24px; right: 9px; }
  .index-toggle__mark { width: 14px; height: 22px; }
  .index-toggle__label { font-size: 14px; }

  .language-switch {
    top: auto;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    gap: 0;
    padding: 2px;
    border-radius: 2px;
    background: var(--color-white);
    font-size: 12px;
  }

  .language-switch a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 61px;
    min-height: 44px;
  }

  .language-switch a + a {
    border-left: 1px solid var(--color-paper);
  }

  .language-switch__separator { display: none; }

  .language-switch a[aria-current='page']::before {
    content: '';
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
  }

  .trail-hero { min-height: 1096px; padding-top: 216px; }

  .trail-hero::before {
    background-image: var(--hero-art-mobile, var(--hero-art, none));
    background-position: var(--hero-mobile-position, center top);
  }

  .hero-intro {
    height: 300px;
    margin: 318px auto 0;
    color: var(--color-white);
    font-size: 18px;
    line-height: 1.9;
  }

  .intro-copy { font-weight: 400; }
  .section-heading__mark { width: 80px; }
  .section-heading__en { margin-top: 13px; font-size: 16px; line-height: 1.5; }
  .section-heading__description { font-size: 16px; line-height: 1.6; }

  /* Simplified mobile frame is a recommendation. */
  .story-frame { padding: 0; background: transparent; }
  .story-paper { padding: 64px 16px 100px; }

  .story-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 23px;
    padding: 15px 0 16px;
  }

  .story-headline { font-size: 24px; line-height: 1.75; }
  .story-area { padding-left: 19px; }
  .area-reading { font-size: 8px; line-height: 1.2; }
  .area-name { font-size: 18px; line-height: 1.22; }

  .area-suffix {
    margin-left: 4px;
    writing-mode: horizontal-tb;
    font-size: 11px;
    line-height: 1.18;
  }

  .movie-caption { line-height: 1.63; }

  .trail-footer {
    padding: 400px 16px 88px;
    background-position: var(--footer-mobile-position, center);
  }

  .footer-panel {
    grid-template-areas: 'official' 'social' 'contact';
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 0;
    background: transparent;
  }

  .resource-card {
    min-height: 112px;
    padding: 16px 14px;
    background: rgb(255 253 244 / 92%);
  }

  .resource-card__title { font-size: 16px; }
  .footer-contact { margin-top: 32px; color: var(--color-white); }
}

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

The hero text positioning assumes artwork with comparable clear areas and a similarly proportioned wordmark. Adjust those placements after supplying real assets. The CSS does not implement a menu, media player, map overlay or download interaction, and it was not browser-tested as part of this evidence-only reference.

Tailwind v4 Token Mapping

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

@theme inline {
  --color-paper: #ece3d1;
  --color-ink: #204637;
  --color-text: #37322e;
  --color-sheet: #fffbee;
  --color-frame: #cbb660;
  --color-rule: #a59b8c;

  --font-display: '秀英初号明朝', serif;
  --font-jp: 'Shippori Antique', sans-serif;
  --font-en-display: 'Fraunces', serif;
  --font-en-body: 'Cabin', sans-serif;

  --text-body: var(--text-body);
  --text-caption: 13px;
  --spacing-page-inset: 16px;
  --spacing-movie: 269px;
  --radius-card: 4px;
  --radius-photo: 8px;
}

Sources & Evidence

  • Current Japanese homepage: the supplied inspection records the same original and final URL with HTTP 200.
  • Capture timestamp: 2026-09-16T19:31:33.278Z, equivalent to September 17, 2026, 04:31:33 JST.
  • Desktop evidence: 1440 × 1000 opening, story-directory transition and footer captures; rendered document height approximately 15,934px.
  • Mobile evidence: 390 × 844 opening and footer captures; rendered document height approximately 15,572px.
  • Rendered DOM/computed styles: font families, sizes, weights, line heights, tracking, element rectangles, selected padding, custom properties, transition declarations, and homepage links. These support the measured tables and responsive comparisons.
  • Interaction evidence: settled page states and scrolling captures only. Menu opening, movie playback, arrow activation, map-control activation, link destinations, hover states and keyboard behavior were not exercised in the supplied record.
  • Inspection limits: readiness checks used bounded waits for load, finite animation, layout/text stability and visible image decoding. Perpetual animations were paused during checks and resumed afterward. SharedWorkers and service workers were disabled. Delayed content and unexercised states remain unverified.
  • Visual limits: no screenshots of the movie region, map region, mobile story directory, complete itinerary, map-download section or access section were supplied. Their descriptions are limited to the corresponding DOM evidence.

This reference describes the current homepage evidenced by those captures. No additional browsing, linked-resource retrieval, command execution or local-file inspection was performed.

← デザイン一覧に戻る