/*
* Non-Japanese home hero overlay (index.php `.hero-i18n`).
*
* The Japanese hero (#mv img.pc / img.sp) bakes its headline, blue "1-minute walk" band and two
* hexagon badges into the photo's pixels. That does not survive translation, so this file draws
* the headline as real HTML/CSS text on top of a text-free photo -- but the band and the two
* hexagon badges are NOT redrawn: img/en/hero-bg.webp and hero-bg-sp.webp are mv.jpg/mv_sp.jpg
* THEMSELVES with only the Japanese glyphs inpainted out of the band and the hexagons, so the
* band's blue gradient, its slanted right edge, and both hexagons' fills/strokes/glow are the
* SAME baked pixels the Japanese page uses. This file positions English text on top of those
* baked shapes; it does not draw a second band or a second hexagon over them.
*
* HERO V3 (2026-10-01, replaces V2/V2.1): V2 drew its own CSS gradient band (with a clip-path
* slant) and its own inline-SVG hexagons on top of hero-bg.webp, which ALREADY had the band and
* hexagons baked in -- so the page showed a doubled band (the baked one peeking out above the
* CSS one) and doubled hexagon outlines (the baked stroke behind the SVG-drawn one). Root cause:
* V2's own comment said the full-shape removal "was tried first and LaMa could not rebuild a
* clean band/hexagon area", so it kept the baked shapes as a fallback AND still drew CSS
* replacements on top, never removing one or the other. V3 removes the CSS band and the SVG
* hexagons entirely (ogawamachi_home_hero_hex_svg() is gone from index.php) and instead:
* - fixed img/en/hero-bg.webp's white hexagon badge, which earlier inpainting had left as a
* translucent ghost instead of mv.jpg's actual solid white fill + blue inset stroke + soft
* glow (redrawn at its measured position from mv.jpg's own pixels, Python/Pillow, not by
* eye: see the hexagon position comments below);
* - fixed img/en/hero-bg-sp.webp, which an earlier pass had over-erased (the band and both
* hexagons had faded to a near-invisible wash instead of mv_sp.jpg's solid shapes) -- the
* replacement keeps the band/hexagon fills solid, matching mv_sp.jpg exactly except for the
* inpainted-out glyphs, plus one small cyan text-ghost remnant removed from the white hexagon
* with a targeted cv2.inpaint pass;
* - made `.hero-i18n__media` carry the SAME aspect ratio as the source photo (1440:700 desktop,
* 375:326 mobile) instead of a fixed `min-height` independent of width. Without this, the
* old `background-size: cover` would crop a different slice of the photo at every viewport
* height (cover scales to the LARGER of width-fit/height-fit, and a container whose aspect
* ratio doesn't match the image's crops whichever axis overflows), so any percentage-based
* text position measured off the full photo would drift out of alignment with the band/
* hexagons as soon as the container's own height stopped matching the photo's. Locking the
* aspect ratio means the photo renders edge-to-edge with no crop at any width, so the
* percentages below line up with the baked shapes exactly, at every width;
* - repositioned the headline, band caption and hexagon text as plain text layers placed at
* percentages measured directly off hero-bg.webp / hero-bg-sp.webp (OpenCV contour detection
* on the shapes' own pixels, not eyeballed), instead of flex/clip-path boxes sized by eye;
* - bumped the band caption and hexagon text to the same Black (900) weight as the headline's
* `mark` phrases -- V2 had them at 700, visibly thinner than mv.jpg's own bold baked text --
* and bumped the headline's plain (non-mark) text from Medium (500) to Bold (700) for the
* same reason (the Japanese plain text is set almost as heavy as its highlighted phrases);
* - restored the faithful translation (当日予約・急患の対応もお任せください. = "Same-day
* appointments & emergencies -- leave it to us."; 土曜日も診療. = "Open on Saturdays too.")
* in place of V2's shortened "...welcome." / "...too." wording, which only existed to dodge
* an orphan word stranding alone on a line. The actual fix for that (see
* config/banner-text/ogawamachi/en.json) is joining the last two words of each trailing
* clause with a non-breaking space, not cutting the sentence short.
*
* Font pairing picked by measurement, not by eye: cropped mv.jpg's own "日" glyph (46x36px at
* 1440) and compared its vertical:horizontal stroke-width ratio (3.5, a Mincho's hallmark --
* thick vertical strokes, hair-thin horizontal ones) against the same glyph rendered in three
* Google Mincho families at the same pixel height. Noto Serif JP Black scored 1.0 (nearly even
* strokes -- too heavy a weight to keep the contrast), Shippori Mincho B1 ExtraBold scored 3.0,
* Zen Old Mincho Black scored 3.5 -- an exact match. Latin text below uses Zen Old Mincho's own
* Latin glyphs (not a different Western serif) so mark/plain weight pairs with the same family's
* Bold, the closest match to mv.jpg's own bold-but-not-black plain-text strokes.
*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@500;700;900&display=swap');
/* style.css sets a fixed #mv height + a hardcoded (Japanese) CSS background at <=840/640/510px
for the old baked-image hero; .hero-i18n sizes itself instead. */
body:not(.ja) #mv {
height: auto;
background-image: none;
}
body:not(.ja) .hero-i18n {
position: relative;
width: 100%;
text-align: left;
line-height: 1.3;
}
/* The photo box. Its aspect ratio MUST match hero-bg.webp's own pixel dimensions (1440x700) so
`background-size: cover` never has to crop either axis -- see the file banner comment above.
Every top/left/width/height below is a percentage of THIS box, measured straight off the
photo's own pixels. */
body:not(.ja) .hero-i18n__media {
position: relative;
overflow: hidden;
width: 100%;
aspect-ratio: 1440 / 700;
background-color: #0b2d4e; /* shows for an instant before hero-bg.webp paints; same family as the band */
background-image: url("../img/en/hero-bg.webp");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* Very light wash, strongest at the left where the headline sits -- a safety net for the dark
headline text against the photo's own texture (window mullions, building edges), not a mood
change. mv.jpg itself has no dark overlay at all (sampled: the wall behind its headline is
near-white, ~#dfecf5), which is why this is a WHITE wash, not a dark scrim. The text-shadow
halo on .hero-i18n__headline is the real contrast guarantee (checked with axe); this just
keeps the plain-text tail legible over the window on wide viewports.
V5 (2026-10-01): the "Confined to the top... so it never lightens the band" claim in this
comment was wrong -- a 60% bottom inset covers the top 40% of the media box (280px of 700 at
1440), and the band starts at 28.1% (197px), so the old inset lightened the band's own top 83px
(~60% of the band's 137px height) wherever the scrim's gradient hadn't already faded to
transparent. That is exactly the two-tone band the supervisor flagged -- confirmed by sampling
the RENDERED band (text hidden) at 1440: rows above y=280 read ~(126,185,233), rows below read
~(5,119,212), a hard seam at the scrim's own bottom edge, not a property of hero-bg.webp (which
is a single smooth gradient, verified separately). 72% keeps the scrim's bottom edge at 28% --
just above the band's 28.1% top at every desktop width -- while still covering the headline's
own measured bottom edge (25.6-26.9% of media height across 768-1440px). Mobile keeps a taller
wash (see the max-width:640px override below) because the band does not start until 39.9% there
and the headline needs up to 32.7% at 320px. */
body:not(.ja) .hero-i18n__scrim {
position: absolute;
inset: 0 0 72% 0;
background: linear-gradient(
100deg,
rgba(255, 255, 255, 0.5) 0%,
rgba(255, 255, 255, 0.32) 30%,
rgba(255, 255, 255, 0.1) 52%,
rgba(255, 255, 255, 0) 72%
);
}
/* Headline left inset is fitted to two direct measurements, not picked by eye: mv.jpg's headline
starts 190px (13.2%) in from the left edge at 1440; mv_sp.jpg's starts flush with the edge (0%)
at 390. The linear fit between those two points is 17.8vw - 67px, clamped so it can't go
negative below 375 or past mv.jpg's own 190px above 1440. The band caption shares this same
inset (measured separately off mv.jpg's band text -- it starts at the same ~13% from the left). */
body:not(.ja) .hero-i18n__headline-pad {
position: absolute;
z-index: 2;
top: clamp(16px, 3.4vw, 40px);
left: 0;
padding-left: clamp(0px, calc(17.8vw - 67px), 190px);
padding-right: clamp(16px, 4vw, 40px);
}
/* common.css's `.side__Fixed` call/booking widget is `position: fixed; right: 0` and ~82px wide
(80px + its 1px border each side) above its own 840px breakpoint (below that it drops to a
full-width bottom bar, clear of the hero). Without this the headline's single unwrapped line
at 1024-1440px -- now often one line, since removing the old max-width let it use the full
container width -- runs out far enough right to be clipped behind that fixed widget (confirmed
via elementFromPoint at 1024/1280: the widget's own left edge sat a few px inside the
headline's measured right edge). This file doesn't own common.css, so the fix here is to keep
the headline clear of a widget whose own width is fixed regardless of viewport, not to resize
the widget. */
@media screen and (min-width: 841px) {
body:not(.ja) .hero-i18n__headline-pad {
padding-right: 104px;
}
}
/* Headline: bold serif matching mv.jpg's Mincho weight/feel for Latin text. `mark` is the white
highlight block behind the key phrase (当日予約・急患 / 土曜日's baked equivalent); the plain
text around it sits directly on the photo, same as mv.jpg -- sampled off the production photo,
the plain text there is near-black (~#1c2021) on a near-white wall, not white-on-a-dark-wash.
The white text-shadow halo is the contrast guarantee in place of a dark scrim (checked with
axe's colour-contrast rule against the actual photo, not assumed).
No max-width here: the containing block (.hero-i18n__headline-pad, full width minus its own
left/right padding) is the only width constraint. An explicit max-width (920px in an earlier
pass) forced row 1 to wrap one word earlier than the container actually required, adding a
THIRD visual line that pushed down into the band below -- the faithful translation is longer
than V2's shortened wording and needs the full container width to stay at two lines. Size is
capped at 42px (vs. mv.jpg's own ~46px cap-height) and line-height/line-gap are tightened from
an earlier pass's 1.7/0.3em: at the full-size end, two lines of the longer sentence plus the
headline-pad's own top offset must still clear the band's own measured top (28.1% of the
photo's height) without touching it -- verified by comparing
.hero-i18n__headline-pad.getBoundingClientRect().bottom against .hero-i18n__band-text's own
top at each width in check_text_fits' sweep, not assumed from the clamp() numbers alone. */
body:not(.ja) .hero-i18n__headline {
margin: 0;
font-family: "Zen Old Mincho", "Noto Serif JP", serif;
font-weight: 700;
/* V4: slope nudged down from 3vw to 2.85vw (cap unchanged at 42px, same size as V3 everywhere
the cap applies). The band below is now visibly bigger (see its own rule), which shifts its
centered text's top edge upward inside its own box; at 1024-1280px specifically, row 1 was
already one vw-percent away from wrapping onto a third line (mark + tail's combined width
came within ~20px of the headline-pad's available width at 3vw -- a pre-existing margin this
narrow in V3 too, just never tipped over into a visible collision because V3's band text was
short enough not to reach up into it). 2.85vw keeps row 1 to two lines through that range
(checked by sweeping check_text_fits, not just the 6 usual checkpoints) so it can't dip into
the band's new height. */
font-size: clamp(15px, 2.85vw, 42px);
/* `mark`'s own vertical padding pokes above/below the line's own layout box (padding on an
inline element doesn't add to line-box height; confirmed via getClientRects: mark.top was
above line.top) -- check_text_fits correctly flags that as a real "mark not contained in its
line" overlap at every width, since literal containment, not visual appearance, is what it
measures. 1.6 gives enough half-leading above/below the text to cover mark's 0.04em padding
(below) at every width in the check's sweep, re-verified after tightening the padding itself. */
line-height: 1.6;
color: #182229;
text-shadow:
0 0 14px rgba(255, 255, 255, 0.95),
0 0 4px rgba(255, 255, 255, 0.95);
}
body:not(.ja) .hero-i18n__line {
display: block;
/* V4 (2026-10-01): mv.jpg's own highlighted phrase (当日予約・急患 / 土曜日) IS visibly bigger
than the plain text around it, not just bolder (ruler-measured ~60px vs ~45px ink-height at
1440) -- matching that exactly was tried (mark at 1.25em) but "Same-day appointments &
emergencies" is far longer than 当日予約・急患, and at a size that big the phrase no longer
fits this row's own available width even wrapped across two lines, pushing a third line down
into the band below. Headline size/weight is left at V3's values (not a defect the supervisor
flagged) so only the genuine defects (band, hexagons, SP orphan) move in this pass.
text-wrap:balance is the actual fix needed here: without it, SP's wrapped "...leave it to
us." stranded "to us." alone on its own line (the supervisor's SP defect #4) because normal
wrapping always breaks at the last word that fits, which starves whatever is left for the
final line. Supported in the evergreen browsers this site targets (Chromium/Firefox; Safari
17.5+); on an older engine it silently falls back to normal wrapping -- the same rendering
this line already had before this change, not a regression. */
text-wrap: balance;
}
body:not(.ja) .hero-i18n__line + .hero-i18n__line {
margin-top: 0.2em;
}
body:not(.ja) .hero-i18n__headline mark {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding: 0.04em 0.3em;
border-radius: 3px;
background: #fff;
color: #0b3a63;
font-weight: 900;
text-shadow: none;
/* mv.jpg's highlight box reads against whatever is behind it because it is baked into a fixed
composition; this fluid overlay can land over an already-bright patch of the same photo
(e.g. the wrapped tail of a long mark phrase), where a flat white fill alone nearly
disappears. A soft shadow keeps the box legible regardless of what is behind it. */
box-shadow: 0 1px 5px rgba(8, 28, 48, 0.22);
}
/* Band caption: text only -- the blue gradient band, its slanted right edge and its drop shadow
are hero-bg.webp's own baked pixels, not drawn here. Box position is the band's own measured
rectangle (OpenCV: scan for the band's blue fill, row by row, restricted to columns clear of
the floating phone/booking widget on the right): top 197px-334px of 700 = 28.1%-47.7%. The
band's right edge is a slant, further right at the top (67.8% of 1440) than at the bottom
(64.6%); the text is vertically centred inside the band rather than pinned to its bottom edge,
so the box below is capped a little inside the bottom figure (34%, not the full 35.4%) rather
than the full worst case -- re-checked against the rendered line's own getBoundingClientRect
so it still clears the slant at the font sizes actually used, not just in theory.
V7 (2026-10-01): this is a , and margin was never reset here the way .hero-i18n__headline
(also a
) resets it a few rules up -- the browser's UA default `p { margin: 1em 0 }` was
adding a 16px top margin OUTSIDE this `top:28.1%` offset (margin applies to the position of a
position:absolute element's own box, it is not absorbed into the percentage). At 1440 that 16px
was a minor ~12% intrusion into the band's own 137px height, easy to miss by eye; at SP widths,
where the band is only 40-80px tall, it pushed the second caption line mostly out of the band and
onto the photo below -- the exact defect a supervisor's real-browser check caught and
check_text_fits could not (it only checks a box against its own parent, not against this margin
pushing the whole box past where its "top" percentage says it should be). Found by comparing this
element's getBoundingClientRect() against getComputedStyle().top directly (a 16px gap with no
other explanation), not by eye. */
body:not(.ja) .hero-i18n__band-text {
position: absolute;
z-index: 1;
margin: 0;
top: 28.1%;
height: 19.6%;
left: 0;
right: 34%;
display: flex;
align-items: center;
padding-left: clamp(0px, calc(17.8vw - 67px), 190px);
padding-right: clamp(10px, 2.4vw, 28px);
}
/* V5 (2026-10-01): V4 let the band caption wrap to two lines sized by a pure-vw formula -- but
the supervisor wants the caption on ONE line like 小川町駅から徒歩1分 (two lines only where one
line would drop under ~14px). Rather than a vw formula tuned to "look about right" at a couple
of checkpoints (the exact mistake that overflowed the band at 768-1024px in V4), the font-size
below is DERIVED to exactly fill the band's own available width -- the same expression used for
padding-left/padding-right here (and for .hero-i18n__headline-pad), divided into the text's own
measured width-per-font-size ratio (canvas fillText, Zen Old Mincho 900, not assumed):
available width = 66vw (the box's own right:34%) - padding-left - padding-right - 10px margin
font-size = available width / 19.47 (px of text width per 1px of font-size, measured
for "1-minute walk from Ogawamachi Station" at size 100 -> 1946.9px wide)
This can't drift out of fit between checkpoints the way a hand-picked vw slope can, because it
IS the fit, computed at every width rather than interpolated between two tuned ones. This rule
is desktop/tablet only (>640px) -- mobile shows two lines instead, sized to the band's height
rather than its width; see .hero-i18n__band-split in the max-width:640px block below for why. */
body:not(.ja) .hero-i18n__band-text span {
display: inline-block;
white-space: nowrap;
font-family: "Zen Old Mincho", "Noto Serif JP", serif;
font-weight: 900;
line-height: 1.15;
color: #fff;
text-shadow: 0 1px 6px rgba(3, 40, 74, 0.45);
}
/* V6 (2026-10-01): .hero-i18n__band-abbr (a shortened one-line mobile string) is gone -- the
supervisor asked for the full wording back on mobile, as two explicit lines (see index.php's
station_line1/station_line2 and the mobile override below for sizing). Hidden here, shown only
inside the max-width:640px block. flex-direction:column stacks its two .band-split-line children
as separate rows regardless of their own inline-block display (irrelevant once they're flex
items); align-items:flex-start keeps both left-edge-aligned with each other and with the
headline above, instead of flex's default stretch (which would have centred the shorter line
under text-align, not left-aligned it). */
body:not(.ja) .hero-i18n__band-text .hero-i18n__band-split {
display: none;
flex-direction: column;
align-items: flex-start;
}
body:not(.ja) .hero-i18n__band-text .hero-i18n__band-full {
font-size: clamp(
14px,
calc((66vw - clamp(0px, calc(17.8vw - 67px), 190px) - clamp(10px, 2.4vw, 28px) - 10px) / 19.47),
40px
);
}
/* Hexagons: text only, same reasoning as the band -- mv.jpg's white/blue hexagon badges (fill,
stroke, the white one's soft outer glow) are baked into hero-bg.webp; this box just positions
the English words inside them.
V5 (2026-10-01): these percentages were measured once during V3 and never re-checked; they were
16.7%/19.8% wide where the hexagons' own convex-hull silhouette (the same mask build_v4.py uses
to flat-fill their interior, re-run against mv.jpg directly -- not eyeballed) measures 13.89%/
18.19%. A CSS box wider than the hexagon it's labelling doesn't show up in check_text_fits
(which only checks a text box against ITS OWN container, and the container was the oversized
one) -- it shows up as the English text sizing itself to fit the WRONG, too-generous width and
overflowing into the hexagon's stroke, which is what the supervisor flagged ("online booking"'s
highlight reaching the stroke). Hex A (white, left) -- 200x224px of 1440x700 (13.89% x 32%),
left/top 15.76%/52%; hex B (blue, right) -- 262x272px (18.19% x 38.86%), left/top 33.26%/
48.14%. The two are not the same size in mv.jpg itself, so this does not force them to match. */
body:not(.ja) .hero-i18n__hex {
position: absolute;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
body:not(.ja) .hero-i18n__hex--a {
left: 15.76%;
top: 52%;
width: 13.89%;
height: 32%;
}
body:not(.ja) .hero-i18n__hex--b {
left: 33.26%;
top: 48.14%;
width: 18.19%;
height: 38.86%;
}
body:not(.ja) .hero-i18n__hex-text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.16em;
/* V5: padding is now applied to the hexagons' CORRECTED (smaller) boxes above, so 14%/6% of
them is already closer to the hexagon's true inner width than 14%/6% of the old, too-wide
boxes was. "online"/"booking"/"Insurance"/"24-hour" (see index.php -- "online booking" is now
two catalogue entries, not one) all individually clear this at every required width.
V7: bumped to 17%/7% -- a Playwright point-in-polygon check against the hexagons' own measured
silhouette (not their bounding box, which tapers faster near the top/bottom vertices than a
flat percentage padding assumes) found the top line ("24-hour") and bottom line ("booking")
landing a fraction of a px outside that silhouette at narrow widths (as little as -0.85px at
320px) -- not visible by eye, but under the required 4px clearance. 17%/7% clears it at every
required width with margin, re-verified with the same check. */
padding: 17% 7%;
text-align: center;
font-family: "Zen Old Mincho", "Noto Serif JP", serif;
font-weight: 900;
line-height: 1.22;
}
body:not(.ja) .hero-i18n__hex-text span {
display: block;
}
body:not(.ja) .hero-i18n__hex--a .hero-i18n__hex-text {
color: #0679d5;
/* V5 (2026-10-01): mv.jpg's own hex-A text ("24時間") ruler-measures ~38px ink-height at 1440.
index.php now renders this badge as 3 separate lines (24-hour / online / booking) always,
matching mv.jpg's own 3-line badge (24時間 / WEB予約 / 受付中) instead of relying on "online
booking" to wrap naturally inside one span -- "online booking" together (211px at 30px) is
wider than the hexagon's own widest point (200px, see the hex-A box comment above), so no
amount of padding tuning made it fit as one unit. 30px (~1.8x V3's size) is kept from V4: each
of the 3 lines sits well inside this hexagon's own measured width-at-every-height profile at
that size (canvas-measured against the hexagon's own convex-hull silhouette, not its bounding
box), so there was no need to size down further once the badge split into 3 lines. */
font-size: clamp(16px, 2.1vw, 30px);
}
body:not(.ja) .hero-i18n__hex--b .hero-i18n__hex-text {
color: #fff;
/* V5: mv.jpg's hex-B text ("保険治療") ruler-measures ~50px ink-height at 1440; kept at V4's
36px for the same reason as hex-A -- "Insurance" (213px at 44px, the size that would fully
match mv.jpg) is wider than this hexagon's own width at the height "Insurance" (the top of a
2-line stack) actually sits, but comfortably clears it at 36px. */
font-size: clamp(16px, 2.5vw, 36px);
}
body:not(.ja) .hero-i18n__hex-text .is-mark {
position: relative;
z-index: 0;
}
/* V5: repositioned from a near-full-height band (top/bottom 12%, i.e. the middle 76% of the
line) to sit under the LOWER part of the text instead -- mv.jpg's own highlight slivers (ruler-
measured off the WEB予約 / 保険治療 crops) sit from about the text's vertical midpoint down to
just past its baseline, not centred on the full line. left/right tightened from -0.16em to
-0.08em at the same time: since each hex-A line is now its own span (see index.php), the mark
no longer needs the wider bleed that was covering an entire wrapped multi-word phrase. */
body:not(.ja) .hero-i18n__hex-text .is-mark::before {
content: "";
position: absolute;
left: -0.08em;
right: -0.08em;
top: 56%;
bottom: -2%;
/* rounded + slightly soft rather than a hard-cornered sticker -- mv.jpg's own highlight
slivers have soft edges, not sharp rectangles. */
border-radius: 0.15em;
opacity: 0.92;
z-index: -1;
}
/* Colours sampled directly from mv.jpg's own baked highlight boxes, not guessed. */
body:not(.ja) .hero-i18n__hex--a .is-mark::before {
background: #ffd1d6;
}
body:not(.ja) .hero-i18n__hex--b .is-mark::before {
background: #b3a8ca;
}
/* mv_sp.jpg is a different crop of the same room, not just a repositioned mv.jpg (tighter frame,
taller aspect) -- so the mobile breakpoint swaps the whole background image AND aspect ratio
(same pc/sp split the Japanese render uses via index.php's img.pc/img.sp), and every band/hex
box below is re-measured off hero-bg-sp.webp's own 375x326 pixels rather than scaled from the
desktop figures above. */
@media screen and (max-width: 640px) {
body:not(.ja) .hero-i18n__media {
aspect-ratio: 375 / 326;
background-image: url("../img/en/hero-bg-sp.webp");
}
/* V5: mobile's band doesn't start until 39.9% (vs. 28.1% on desktop), and the headline can run
to 32.7% of media height at 320px (3 lines at the narrowest width) -- so unlike the desktop
scrim above, there's room here for most of the original 60% bottom inset without reaching the
band. Kept as its own rule rather than relying on the base value changing out from under it, so
the two breakpoints' numbers don't have to stay in sync by coincidence.
V7: 60% (scrim covers 0-40%) actually put the scrim's own bottom edge PAST the band's measured
39.9% top by 0.1 percentage points -- sub-pixel at narrow widths (0.3-0.8px across 320-640px)
but a real, measured overlap, not an eyeballed one (found by computing both edges' exact
percentages rather than assuming "40 vs 39.9 is close enough"). 61% (covers 0-39%) clears it
with margin at every SP width while still covering the headline's 32.7% figure above. */
body:not(.ja) .hero-i18n__scrim {
inset: 0 0 61% 0;
}
/* band: measured 130px-177px of 326 = 39.9%-54.3%; right edge slants from 66.4% (top) to 62.9%
(bottom) -- boxed to the narrower bottom figure, same reasoning as desktop. */
body:not(.ja) .hero-i18n__band-text {
top: 39.9%;
height: 14.4%;
right: 37%;
}
/* V6 (2026-10-01): V5 found that the full phrase cannot reach even a readable ONE-line fit at
this breakpoint's available WIDTH, and abbreviated it. The supervisor asked for the full
wording back, on two lines, sized to the band's HEIGHT instead -- width was never actually the
tight constraint here (the band's own available width, 192-341px across 320-640px, comfortably
fits either wrapped line with room to spare at every size this rule produces); the band's own
height (14.4% of a SHORT mobile media box -- 40-80px across 320-640px) is. Both lines share one
PURE-vw font-size (same reasoning as every other formula in this file: the band's height is
also a pure percentage of the same aspect-ratio-locked box, so a vw-only size keeps content
height / band height at a constant ratio at every width from 320-640px).
V7: a margin-reset bug elsewhere in this rule block (see .hero-i18n__band-text's own V7 comment
above) meant this ~84.5%-of-band-height ratio was being measured against a box that was itself
sitting 16px lower than it should -- at SP's short band height that 16px consumed MOST of the
15.5% slack the ratio was supposed to leave, down to as little as 3.1px actual clearance at
320px against a Playwright geometry check (point-in-polygon against the band's own measured
true shape, not the CSS box) requiring >=4px on every edge. With that bug fixed, 4.1vw is the
number that keeps clearance >=4px at every required width from 320-640px (confirmed by the same
geometry check, not re-derived from the ratio alone): 13.1px at 320 (just above the supervisor's
13px absolute floor), 14.8px at 360, 16.0px at 390, 17.6px at 430 -- the middle of their
~15-17px target -- capped at 20px above ~490px where the band has grown enough that a bigger
size is not needed for legibility. */
body:not(.ja) .hero-i18n__band-text .hero-i18n__band-full {
display: none;
}
body:not(.ja) .hero-i18n__band-text .hero-i18n__band-split {
display: flex;
}
body:not(.ja) .hero-i18n__band-text .hero-i18n__band-split-line {
font-size: clamp(13px, 4.1vw, 20px);
}
/* hex A: mv_sp.jpg's own convex-hull silhouette measures 89x99px of 375x326 (23.73% x 30.37%),
left/top 5.87%/59.51%. hex B: 137x137px (36.53% x 42.02%), left/top 34.13%/54.91%. V5:
corrected the same way as the desktop boxes above (re-measured off mv_sp.jpg's own pixels, not
eyeballed) -- the previous 26.9%/34.1% widths were wider than the hexagons they labelled. */
body:not(.ja) .hero-i18n__hex--a {
left: 5.87%;
top: 59.51%;
width: 23.73%;
height: 30.37%;
}
body:not(.ja) .hero-i18n__hex--b {
left: 34.13%;
top: 54.91%;
width: 36.53%;
height: 42.02%;
}
/* Same reasoning as the band override just above: mv_sp.jpg's hex text ("24時間" ~23px,
"保険治療" ~28px ink-height at 375) and the hexagons' own much-more-generous width:height
ratio at this breakpoint need their own pure-vw figures, not the desktop ones scaled down.
V7: 4.4vw put the top ("24-hour") and bottom ("booking") lines a fraction of a px past the
hexagon's own measured silhouette at 320-430px (point-in-polygon check, not padding -- the
content block was centred and not overflowing its CSS box, so padding couldn't move it; it's
genuinely slightly too tall for the hexagon's own narrowing-toward-the-vertex shape at this
size). 3.9vw clears it with >=4px margin at every required width, re-verified with the same
check (4.1vw was tried first and still came up ~2px short at 320px specifically). */
body:not(.ja) .hero-i18n__hex--a .hero-i18n__hex-text {
font-size: clamp(11px, 3.75vw, 20px);
}
body:not(.ja) .hero-i18n__hex--b .hero-i18n__hex-text {
font-size: clamp(14px, 4.6vw, 20px);
}
}
/* "小川町は患者様第一！" speech bubble: photo unchanged, English redraw at img/en/fukidasi.png
(see index.php for the ![]()
instance; this is the CSS-background instance in style.css).
English only: no other language has its own img//fukidasi.png yet, and the ![]()
instance
falls back to the Japanese bubble, so this one keeps style.css's Japanese bubble too instead of
showing English (zh and the six later languages alike). */
body.en-US .info_bottom_inner::after {
background-image: url("../img/en/fukidasi.png");
}
/* ------------------------------------------------------------------------------------------
* Simplified Chinese (body.zh-CN). The rules above were sized for the English wording; Chinese
* has the same shape as mv.jpg's own Japanese (same glyph widths, same line split, same marked
* phrases), so these put it back to the Japanese proportions instead: a Song/Mincho face (Noto
* Serif SC, loaded for zh only in functions.php -- Zen Old Mincho has no Simplified forms, so
* Chinese would mix two faces), the marked phrase larger than the plain text as in mv.jpg, and
* the station on ONE line at every width, as mv.jpg and mv_sp.jpg set it. Sizes are vw ratios
* measured off mv.jpg (1440) and mv_sp.jpg (390) and checked against /zh/ side by side with /.
* English and Japanese are untouched: every selector here needs body.zh-CN.
* ------------------------------------------------------------------------------------------ */
body.zh-CN .hero-i18n__headline,
body.zh-CN .hero-i18n__band-text span,
body.zh-CN .hero-i18n__hex-text {
font-family: "Noto Serif SC", serif;
}
body.zh-CN .hero-i18n__headline {
font-size: clamp(13px, 2.15vw, 31px);
}
/* mv.jpg's first highlight box starts ~35px from the photo's top at 1440; the English offset
(40px + the taller Chinese row's half-leading) put row 2's box 3-4px onto the band at 641-1280. */
body.zh-CN .hero-i18n__headline-pad {
top: clamp(10px, 2vw, 28px);
}
/* line-height on the mark itself: the inherited 1.6 at 1.6em made each row ~80px tall at 1440 and
pushed row 2's box onto the band. 1.5 is the smallest value that still holds Noto Serif SC's own
content box (~1.44em) inside the line, which check_text_fits measures; the row gap stays at the
0.2em set above, which keeps row 2 clear of the band (28.1%) at every width. */
body.zh-CN .hero-i18n__headline mark {
font-size: 1.6em;
line-height: 1.5;
padding: 0 0.12em;
}
body.zh-CN .hero-i18n__band-text .hero-i18n__band-full {
font-size: clamp(14px, 4vw, 58px);
}
body.zh-CN .hero-i18n__hex--a .hero-i18n__hex-text {
font-size: clamp(14px, 2.3vw, 33px);
}
body.zh-CN .hero-i18n__hex--b .hero-i18n__hex-text {
font-size: clamp(16px, 3.4vw, 49px);
}
@media screen and (max-width: 640px) {
body.zh-CN .hero-i18n__headline {
font-size: 5vw;
}
body.zh-CN .hero-i18n__headline mark {
font-size: 1.3em;
}
/* mv_sp.jpg puts 当日予約・急患 on a line of its own and the rest of the sentence below it. */
body.zh-CN .hero-i18n__line:first-child mark {
display: block;
width: fit-content;
}
body.zh-CN .hero-i18n__band-text .hero-i18n__band-full {
display: inline-block;
font-size: 5.4vw;
}
body.zh-CN .hero-i18n__hex--a .hero-i18n__hex-text {
font-size: 3.6vw;
}
body.zh-CN .hero-i18n__hex--b .hero-i18n__hex-text {
font-size: 5.6vw;
}
}
/* ------------------------------------------------------------------------------------------
* Burmese, Nepali, Korean, Vietnamese, Filipino, Spanish (2026-10-06). Every selector here names
* its own body class, so ja/en/zh are untouched. Faces: Zen Old Mincho has no Burmese, Devanagari
* or Hangul and only some Vietnamese letters (ạ, đ, ư and most others fell to Times), so each of
* those adds the serif of its own script, loaded for that language only in functions.php. my/ne/ko
* list it after Zen Old Mincho, which keeps the Latin and digits; vi takes Noto Serif for the whole
* line, so one word never mixes two faces. tl/es keep Zen Old Mincho.
* ------------------------------------------------------------------------------------------ */
body.my-MM .hero-i18n__headline,
body.my-MM .hero-i18n__band-text span,
body.my-MM .hero-i18n__hex-text {
font-family: "Zen Old Mincho", "Noto Serif Myanmar", serif;
}
body.ne-NP .hero-i18n__headline,
body.ne-NP .hero-i18n__band-text span,
body.ne-NP .hero-i18n__hex-text {
font-family: "Zen Old Mincho", "Noto Serif Devanagari", serif;
}
body.ko-KR .hero-i18n__headline,
body.ko-KR .hero-i18n__band-text span,
body.ko-KR .hero-i18n__hex-text {
font-family: "Zen Old Mincho", "Noto Serif KR", serif;
}
body.vi .hero-i18n__headline,
body.vi .hero-i18n__band-text span,
body.vi .hero-i18n__hex-text {
font-family: "Noto Serif", serif;
}
/* Korean sits on the same full-width grid as mv.jpg's Japanese, so it takes the Chinese treatment
above rather than the English sizes: the marked phrase larger than the plain text, the station on
one line at every width, the hexagons at the Japanese proportions. The station divides the band's
width by the Korean caption's own width per 1px of font-size (11.69, measured in Noto Serif KR),
capped at the Chinese 4vw. The mark's side padding is the Chinese 0.12em so the particle after it
(도) does not stand apart. */
body.ko-KR .hero-i18n__headline {
font-size: clamp(13px, 2.15vw, 31px);
}
body.ko-KR .hero-i18n__headline-pad {
top: clamp(10px, 2vw, 28px);
}
body.ko-KR .hero-i18n__headline mark {
font-size: 1.6em;
line-height: 1.5;
padding: 0 0.12em;
}
body.ko-KR .hero-i18n__band-text .hero-i18n__band-full {
font-size: clamp(
14px,
min(4vw, calc((66vw - clamp(0px, calc(17.8vw - 67px), 190px) - clamp(10px, 2.4vw, 28px) - 10px) / 11.69)),
58px
);
}
body.ko-KR .hero-i18n__hex--a .hero-i18n__hex-text {
font-size: clamp(14px, 2.3vw, 33px);
}
body.ko-KR .hero-i18n__hex--b .hero-i18n__hex-text {
font-size: clamp(16px, 3.4vw, 49px);
}
@media screen and (max-width: 640px) {
body.ko-KR .hero-i18n__headline {
font-size: 5vw;
}
body.ko-KR .hero-i18n__headline mark {
font-size: 1.3em;
}
body.ko-KR .hero-i18n__line:first-child mark {
display: block;
width: fit-content;
}
body.ko-KR .hero-i18n__band-text .hero-i18n__band-full {
display: inline-block;
font-size: 4.4vw;
}
body.ko-KR .hero-i18n__hex--a .hero-i18n__hex-text {
font-size: 3.6vw;
}
body.ko-KR .hero-i18n__hex--b .hero-i18n__hex-text {
font-size: 5.6vw;
}
}
/* Burmese, Filipino and Spanish run longer than the English on the first row, which then wrapped
onto a third line and sat on the band at 841-1440 (measured: row width against the headline's
own width, my 0.98, es 0.93, tl 0.82 of what fits). Each row-1 size is the English 2.85vw scaled
by that ratio, with the cap scaled the same way; nothing else about the headline changes. */
body.my-MM .hero-i18n__headline {
font-size: clamp(15px, 2.75vw, 40px);
}
body.es-ES .hero-i18n__headline {
font-size: clamp(15px, 2.6vw, 39px);
}
body.tl .hero-i18n__headline {
font-size: clamp(15px, 2.28vw, 38px);
}
/* The Filipino caption is longer than the English one: the same width-derived size, divided by
its own width per 1px of font-size (22.17 in Zen Old Mincho 900) instead of the English 19.47. */
body.tl .hero-i18n__band-text .hero-i18n__band-full {
font-size: clamp(
14px,
calc((66vw - clamp(0px, calc(17.8vw - 67px), 190px) - clamp(10px, 2.4vw, 28px) - 10px) / 22.17),
40px
);
}
/* "trực tuyến" is wider than "booking" and wrapped onto a fourth line in the white hexagon; "Seguro
médico" wrapped onto a third in the blue one. Smaller type, same lines as the Japanese. */
body.vi .hero-i18n__hex--a .hero-i18n__hex-text {
font-size: clamp(13px, 1.85vw, 27px);
}
body.es-ES .hero-i18n__hex--b .hero-i18n__hex-text {
font-size: clamp(14px, 1.9vw, 28px);
}
@media screen and (max-width: 640px) {
body.vi .hero-i18n__hex--a .hero-i18n__hex-text {
font-size: clamp(10px, 3.2vw, 18px);
}
body.es-ES .hero-i18n__hex--b .hero-i18n__hex-text {
font-size: clamp(12px, 3.6vw, 17px);
}
}
/* In Vietnamese, Filipino and Spanish the full stop or colon follows the marked phrase directly,
and the English 0.3em side padding left it standing apart ("Sabado ."). The Chinese 0.12em. */
body.vi .hero-i18n__headline mark,
body.tl .hero-i18n__headline mark,
body.es-ES .hero-i18n__headline mark {
padding-left: 0.12em;
padding-right: 0.12em;
}