/* Site-only additions. Everything here sits on top of the design system: tokens.css and components.css are copies of the design system and should be re-synced from design-system/, not edited. New rules belong in this file. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-size: 16px; } body { display: flex; min-height: 100svh; flex-direction: column; } .site-main { flex: 1; } /* Bilingual toggle: both languages ship inline, shown/hidden by data-l on . Japanese is the default, so it is what renders with no data-l set at all (before the head script runs, and for anyone with JavaScript off). */ .en { display: none; } :root[data-l="en"] .en { display: inline; } :root[data-l="en"] .ja { display: none; } /* Japanese wraps on phrase boundaries; tokens.css already resets its tracking. */ :lang(ja) { word-break: auto-phrase; line-break: strict; } /* Balance the short lines, tidy the long ones. */ .tz-hero-title, .tz-sec-head h2, .tz-cta-copy h2, .page-head h1 { text-wrap: balance; } .tz-hero-lead, .tz-sec-intro, .tz-cta-copy p, .tz-feature p, .page-lead, .prose p { text-wrap: pretty; } /* A product row with no href is a placeholder, so it must not read as a link. */ .tz-product--static:hover h3, .tz-product--static:hover .tz-product-go { color: inherit; } /* The language toggle is a single, always-current button, so it takes the ".tz-lang [aria-pressed=true]" treatment from components.css directly. */ .tz-lang { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; cursor: pointer; } .tz-lang:hover { color: var(--accent); } .tz-lang:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } @media (max-width: 720px) { .tz-header-inner { gap: var(--space-2) var(--space-5); } .tz-header-end { gap: var(--space-4); } } /* Page header — inner pages, using the display-l style tokens.json reserves for them. */ .page-head { padding-block: var(--space-9) 0; } .page-head .tz-eyebrow { margin-bottom: var(--space-3); } .page-lead { margin-top: var(--space-6); max-width: var(--measure); color: var(--ink-muted); } /* The page header already supplies the air above; don't stack two full section gaps. */ .page-head + .tz-section { padding-top: var(--space-8); } /* Prose — running copy on inner pages. */ .prose { max-width: var(--measure); display: grid; gap: var(--space-4); } .prose--wide { max-width: var(--container-narrow); } /* Fact list — hairline-separated term/detail rows, per "borders, not boxes". */ .fact-list { border-top: 1px solid var(--line); } .fact-row { display: grid; grid-template-columns: 14em 1fr; gap: var(--space-2) var(--space-6); /* The term and the first line of its detail share a baseline. They use different sizes and line heights (label 14/20, body-m 16/28, body-s 14/24), so cells that were simply top-aligned sat a few pixels apart. */ align-items: baseline; padding: var(--space-5) 0; border-bottom: 1px solid var(--line); } .fact-row--wide { grid-template-columns: 18em 1fr; } .fact-term { color: var(--ink-muted); } .fact-detail { color: var(--ink); } .fact-note { display: block; margin-top: var(--space-2); color: var(--ink-muted); } /* When a fact-note leads the dd (e.g. a postcode before the address), flip the gap to sit below it instead of above. */ .fact-note--lead { margin-top: 0; margin-bottom: var(--space-2); } @media (max-width: 720px) { .page-head { padding-block: var(--space-8) 0; } /* The same step-down components.css gives a display-l hero title. At 56px a phone fits only six Japanese characters, so words like 見つかりません broke mid-word and left one character on a line of its own. */ .page-head h1 { font-size: 36px; line-height: 42px; } .fact-row, .fact-row--wide { grid-template-columns: 1fr; } } .contact-form { position: relative; display: grid; gap: var(--space-5); max-width: var(--measure); margin-top: var(--space-6); } .contact-form .tz-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; } .contact-turnstile { margin-top: var(--space-2); min-height: 65px; } .contact-actions { margin-top: var(--space-2); } .contact-status { margin: 0; color: var(--danger); } .contact-form[hidden], .contact-status[hidden], .contact-done[hidden], .contact-fallback[hidden], .tz-field-error[hidden] { display: none; } /* A note set apart from the copy above it. */ .note { margin-top: var(--space-7); max-width: var(--measure); color: var(--ink-muted); } .note--ruled { padding-top: var(--space-5); border-top: 1px solid var(--line); } /* Vertical rhythm helpers, on the spacing scale. */ .stack-md { margin-top: var(--space-5); } .stack-xl { margin-top: var(--space-9); } /* Footer: one link column now, so the top row is two tracks, not three. */ .tz-footer-top { grid-template-columns: 1.4fr 1fr; } /* 特定商取引法に基づく表記 sits on the bottom line beside the copyright — the usual place for it on Japanese sites — rather than taking a nav column of its own. The row holds a list, so further notices can join it later. */ .tz-footer-legal { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-6); } .tz-footer-legal a { color: inherit; text-decoration: none; } .tz-footer-legal a:hover { color: var(--accent); } @media (max-width: 720px) { .tz-footer-top { grid-template-columns: 1fr; } }