/* Shared static header/footer. Legacy article styles are retired in Phase 5. */
html { scroll-padding-top: var(--space-96); }
body { font-family: var(--font-body); }
/* Explicitly normalize body weight: legacy style.css sets 300 on home/visit,
   while the information pages inherit 400. Do not touch catalog typography. */
body:not(.site-catalog) { font-weight: 400; }
h1, h2, h3 { font-family: var(--font-heading); }
/* Japanese copy keeps phrase/punctuation boundaries; do not split words just to fill lines. */
html[lang="ja"] body:not(.site-catalog) { line-break: strict; word-break: normal; overflow-wrap: normal; }
html[lang="ja"] body:not(.site-catalog) main :is(h1, h2, h3) { text-wrap: balance; }
html[lang="ja"] body:not(.site-catalog) main p { text-wrap: pretty; }
@supports (word-break: auto-phrase) {
  html[lang="ja"] body:not(.site-catalog) { word-break: auto-phrase; }
}
.site-button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-target); max-width: 100%; padding: var(--space-16) var(--space-24); border: 1px solid var(--color-ink); border-radius: var(--button-radius); background: var(--color-ink); color: var(--color-paper); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; text-align: center; text-decoration: none; }
.site-button--secondary { background: transparent; color: var(--color-ink); }
.site-button:hover { color: var(--color-paper); background: var(--color-ink); }
.site-text-link { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--color-ink); text-decoration: underline; text-underline-offset: var(--space-4); }
.site-button:focus-visible, .site-text-link:focus-visible { outline: 2px solid var(--color-ink); outline-offset: var(--space-4); }
.site-header, .site-footer { color: var(--color-ink); background: var(--color-paper); font-family: var(--font-body); box-sizing: border-box; text-align: left; }
/* Keep the catalog typography unchanged while restoring the corporate site. */
body.site-catalog { font-family: var(--font-catalog-body); }
body.site-catalog h1, body.site-catalog h2, body.site-catalog h3 { font-family: var(--font-catalog-heading); }
/* The catalog content keeps its system font; shared navigation uses Ten Mincho everywhere. */
body.site-catalog .site-header, body.site-catalog .site-footer { font-family: var(--font-body); }
.site-header *, .site-footer * { box-sizing: border-box; }
/* Page-level CSS differs between the legacy homepage and catalog.
   Fix the shared header's text metrics here so navigation does not resize on route changes. */
/* Adobe Ten Mincho ships a regular face. Do not request a synthetic lighter weight. */
.site-header { position: sticky; top: 0; height: auto; z-index: 1000; border-bottom: 1px solid var(--color-ink); font-size: 1rem; font-weight: 400; font-synthesis: none; line-height: 1.6; letter-spacing: 1px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* Hold desktop navigation text briefly, but never hide language switching
   or the mobile menu button while Adobe Fonts are loading. */
@media (min-width: 1024px) {
  html.maeken-js:not(.wf-active):not(.wf-inactive):not(.maeken-font-fallback) .site-header .site-menu { opacity: 0; }
}
html.maeken-font-fallback .site-header { font-family: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif; }
.site-header-inner { max-width: 1440px; min-height: var(--space-96); margin: 0 auto; padding: var(--space-16) var(--space-24); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-16); }
/* Legacy common.css sets backface-visibility:hidden on every link. Override
   it inside shared chrome so font rasterization matches newer pages. */
.site-header a { -webkit-backface-visibility: visible; backface-visibility: visible; }
.site-header a, .site-header summary, .site-header button, .site-footer a { color: inherit; font: inherit; line-height: 1.5; text-decoration: none; opacity: 1; }
.site-brand { display: flex; align-items: center; min-height: var(--touch-target); }
.site-brand img { display: block; width: 160px; height: auto; }
.site-language { position: relative; grid-column: 3; grid-row: 1; }
.site-language summary { display: flex; align-items: center; justify-content: center; gap: var(--space-4); min-width: var(--touch-target); min-height: var(--touch-target); cursor: pointer; }
.site-language summary::after { content: "⌄"; }
.site-language ul { position: absolute; right: 0; top: 100%; min-width: 8rem; margin: 0; padding: var(--space-8); background: var(--color-paper); border: 1px solid var(--color-ink); list-style: none; }
.site-language li { margin: 0; padding: 0; }
.site-language a { display: flex; align-items: center; padding: var(--space-8); min-height: var(--touch-target); white-space: nowrap; }
.site-language [aria-current] { text-decoration: underline; text-underline-offset: var(--space-4); }
.site-header .site-menu { position: static; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-8); grid-column: 2; grid-row: 1; height: auto; padding: 0; background: transparent; border: 0; }
.site-menu > a { display: flex; align-items: center; min-height: var(--touch-target); padding: var(--space-8); font-size: .875rem; }
.site-menu .site-menu-phone { display: none; }
.site-menu-toggle { min-width: var(--touch-target); min-height: var(--touch-target); padding: var(--space-8); border: 1px solid var(--color-ink); border-radius: var(--button-radius); background: transparent; cursor: pointer; }
.site-header [hidden], .site-header .site-menu[hidden] { display: none; }
.site-header :focus-visible, .site-footer :focus-visible, .skip-link:focus-visible { outline: 2px solid var(--color-ink); outline-offset: var(--space-4); }
.site-header a:hover, .site-footer a:hover { text-decoration: underline; text-underline-offset: var(--space-4); }
.skip-link { position: fixed; top: var(--space-8); left: var(--space-16); transform: translateY(-200%); z-index: 1100; color: var(--color-paper); background: var(--color-ink); padding: var(--space-16); }
.skip-link:focus { transform: translateY(0); }
#main-content { scroll-margin-top: var(--space-96); }
.site-footer { margin-top: var(--space-64); padding: var(--space-64) var(--space-24) var(--space-24); border-top: 1px solid var(--color-ink); font-weight: 400; }
.site-footer-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-40); }
.site-footer-brand img { width: 200px; height: auto; display: block; }
.site-footer p { margin: var(--space-16) 0; font-size: .875rem; line-height: 1.8; }
/* Company details and access belong together; supporting links are visually grouped. */
.site-footer-company { min-width: 0; }
.site-footer-company .site-footer-contact { margin-bottom: var(--space-8); }
.site-footer-company .site-footer-access { display: inline-flex; align-items: center; min-height: var(--touch-target); margin-top: var(--space-8); font-size: .875rem; text-decoration: underline; text-underline-offset: var(--space-4); }
/* Keep all four footer links evenly spaced. Align the first with the company description without reducing 44px touch targets. */
.site-footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding-top: var(--space-40); }
.site-footer-links-primary, .site-footer-links-secondary { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer-links a { display: inline-flex; align-items: center; min-height: var(--touch-target); font-size: .875rem; }
/* A consent choice can be changed from the footer; no fixed screen overlay button. */
.site-footer-links .site-footer-cookie-settings {
  display: inline-flex; align-items: center; min-height: var(--touch-target);
  padding: 0; border: 0; border-radius: 0; background: transparent;
  color: inherit; font: inherit; font-size: .875rem; line-height: 1.5;
  text-align: left; cursor: pointer;
}
.site-footer-links .site-footer-cookie-settings[hidden] { display: none; }
.site-footer-links .site-footer-cookie-settings:hover { text-decoration: underline; text-underline-offset: var(--space-4); }
.site-footer-links .site-footer-cookie-settings:focus-visible { outline: 2px solid var(--color-ink); outline-offset: var(--space-4); }
.site-footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--space-8) var(--space-24); }
.site-footer-copyright { flex: 1 1 20rem; min-width: 0; }
.site-footer-copyright p { margin-bottom: 0; }
.site-footer .site-footer-back-to-top { display: inline-flex; align-items: center; justify-content: flex-end; margin-left: auto; min-height: var(--touch-target); font-size: .875rem; white-space: nowrap; text-decoration: underline; text-underline-offset: var(--space-4); }
.site-footer #pageTop { position: fixed; }
.site-catalog { margin: 0; }
.site-catalog > .container { width: 100%; box-sizing: border-box; padding: var(--space-24); }
.site-catalog .last-updated { position: static; text-align: right; }
/* Non-Japanese catalog visitors keep their site chrome language while the
   shared product listings and filter UI remain Japanese. */
.site-catalog .catalog-locale-note { margin: var(--space-16) 0; padding: 12px var(--space-16); background: rgba(0, 42, 65, .045); border-left: 2px solid rgba(0, 42, 65, .3); font-family: var(--font-catalog-body); font-size: .875rem; line-height: 1.7; }
.site-catalog .catalog-locale-note a { color: var(--color-ink); text-decoration: underline; text-underline-offset: .2em; }
.site-catalog .catalog-js-required { margin: var(--space-16) 0; border: 1px solid rgba(0,42,65,.25); padding: var(--space-16); font-family: var(--font-catalog-body); }
.site-catalog .catalog-js-required p { margin: var(--space-8) 0; line-height: 1.6; }
.site-catalog .catalog-js-required a { color: var(--color-ink); text-decoration: underline; }

@media (max-width: 1023px) {
  .site-header-inner { min-height: var(--space-64); grid-template-columns: 1fr auto auto; padding: var(--space-8) var(--space-16); gap: var(--space-8); }
  .site-brand img { width: 128px; max-width: 100%; }
  .site-language { grid-column: 2; }
  .site-menu-toggle { grid-column: 3; grid-row: 1; }
  .site-header .site-menu { grid-column: 1 / -1; grid-row: 2; align-items: stretch; justify-content: flex-start; flex-direction: column; gap: var(--space-8); }
  /* Before deferred JS initializes, the menu must not create a second grid row.
     Without JS the links remain in normal flow and can still be used. */
  html.maeken-js .site-header:not([data-menu-ready]) .site-menu { position: fixed; inset: var(--space-64) 0 0; visibility: hidden; }
  .site-header[data-menu-ready] .site-menu { position: fixed; inset: var(--space-64) 0 0; overflow-y: auto; background: var(--color-paper); padding: var(--space-24); overscroll-behavior: contain; }
  .site-menu > a { width: 100%; padding: var(--space-16); font-size: 1rem; border-bottom: 1px solid var(--color-accent); }
  .site-menu .site-menu-phone { display: flex; }
  body.site-menu-open { overflow: hidden; }
}
@media (max-width: 767px) {
  .site-footer { padding: var(--space-40) var(--space-16) 20px; }
  .site-footer-inner { grid-template-columns: 1fr; gap: var(--space-24); }
  .site-footer-links { padding-top: 0; }
}