/* App-like navigation and browsing, within the existing one-page structure. */
:root { --paper: #f6f7f8; --sand: #edf0f2; --line: #e1e4e8; }
html { scroll-padding-top: 104px; }
.site-header { position: sticky; top: 0; z-index: 40; max-width: none; padding: 12px max(24px, calc((100vw - 1280px) / 2)); gap: 20px; background: #ffffffed; border-bottom: 1px solid #e4e6e9; backdrop-filter: blur(16px); }
.brand img { width: 78px; height: 48px; }
.desktop-nav { gap: 4px; font-size: 13px; }
.desktop-nav a { padding: 8px 12px; border-radius: 999px; background: none; }
.desktop-nav a:hover { background: #eceff2; text-decoration: none; }
.desktop-nav a[aria-current] { background: #111; color: #fff; }
.header-cta { background: #fff; }
.mobile-menu summary { border-radius: 999px; background: #edf0f2; padding: 10px 14px; }
.mobile-menu nav { border-radius: 18px; box-shadow: 0 12px 36px #17212614; }
.skip { z-index: 70; border-radius: 12px; }
.hero { padding-top: 18px; padding-bottom: 18px; }
.hero-image { border-radius: 20px; }
.hero-thumbnail { border-radius: 8px; }
.fit-panel { padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.collection .section-heading { margin-bottom: 28px; }
.collection .rail-toolbar { margin-top: 18px; }
.material-switcher { display: inline-flex; max-width: 100%; gap: 3px; padding: 4px; border: 1px solid #e3e6e9; border-radius: 16px; background: #e9ecef; }
.material-switcher[hidden] { display: none; }
.material-switcher button { min-height: 44px; padding: 10px 16px; border: 0; border-radius: 12px; background: transparent; color: #585d65; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.material-switcher button:hover { color: #111; background: #ffffff80; }
.material-switcher button[aria-pressed="true"] { color: #fff; background: #111; box-shadow: 0 2px 5px #00000012; }
.rail-hint b { font-weight: 700; }
.rail-controls button { background: #fff; border: 1px solid var(--line); }
.card-rail > .product-card, .card-rail > .gallery-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 3px 10px #17212604; }
.card-rail > .product-card[hidden] { display: none; }
.card-rail .product-image { border-radius: 0; }
.card-rail .product-heading { margin: 16px 20px 0; }
.card-rail .product-card > p { margin-left: 20px; margin-right: 20px; }
.card-rail .product-meta { margin-left: 20px; margin-right: 20px; padding-bottom: 20px; }
.card-rail > .gallery-card:nth-child(n) > img { border-radius: 0; }
.card-rail > .gallery-card:nth-child(n) > div { padding: 18px 20px 22px; }
.order-preparation { border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.closing { border-radius: 22px; }
.app-dock { display: none; }
@media (max-width: 1050px) and (min-width: 801px) {
  .desktop-nav { gap: 0; font-size: 11px; }
  .desktop-nav a { padding: 8px 6px; }
  .header-cta { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 800px) {
  html { scroll-padding-top: 88px; scroll-padding-bottom: 104px; }
  body { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
  .site-header { padding: 10px 20px; }
  .brand img { width: 68px; height: 40px; }
  .hero { padding-top: 0; padding-bottom: 12px; }
  .hero-image { border-radius: 18px; }
  .fit-panel { padding: 20px; border-radius: 18px; }
  .material-switcher { gap: 2px; border-radius: 14px; }
  .material-switcher button { padding-left: 12px; padding-right: 12px; font-size: 11px; border-radius: 10px; }
  .card-rail .product-heading { margin-left: 16px; margin-right: 16px; }
  .card-rail .product-card > p, .card-rail .product-meta { margin-left: 16px; margin-right: 16px; }
  .card-rail > .gallery-card:nth-child(n) > div { padding-left: 16px; padding-right: 16px; }
  .app-dock { position: fixed; z-index: 50; left: 16px; right: 16px; bottom: max(12px, env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 6px; border: 1px solid #e1e4e8; border-radius: 24px; background: #fffffff2; box-shadow: 0 8px 32px #1721261a; backdrop-filter: blur(16px); }
  .app-dock a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 54px; color: #616772; border-radius: 18px; font-size: 10px; font-weight: 700; line-height: 1.4; }
  .app-dock svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .app-dock a[aria-current] { color: #fff; background: #111; }
  .app-dock a:focus-visible { outline-offset: 1px; }
}
@media (prefers-reduced-motion: no-preference) {
  .material-switcher button, .app-dock a { transition: background-color .2s ease, color .2s ease, transform .2s ease; }
  .material-switcher button:active, .app-dock a:active { transform: scale(.96); }
}

/* Quiet technical details, shared by every customer page. */
:root { --interface-edge: #d8e0e5; --interface-accent: #b8cdd8; --paper: #f8fafb; }
body { font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; }
.site-header { background: #f9fcfdd9; border-bottom-color: #d2dce380; box-shadow: 0 1px 0 #ffffffb3; backdrop-filter: blur(24px) saturate(115%); -webkit-backdrop-filter: blur(24px) saturate(115%); }
.site-header .desktop-nav a { font-weight: 500; letter-spacing: .035em; }
.site-header .header-cta { border-color: #bdcbd4b3; background: linear-gradient(135deg, #ffffffdc, #edf3f6a6); box-shadow: inset 0 1px 0 #fff; font-weight: 500; }
.mobile-menu summary { border: 1px solid #c9d5dd99; background: linear-gradient(135deg, #ffffffcc, #edf3f6a6); letter-spacing: .08em; font-weight: 500; }
.mobile-menu nav { background: #f8fbfcef; border-color: var(--interface-edge); box-shadow: 0 16px 40px #18313d12; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.subpage .page-heading h1, .subpage .detail-section-title h2, .subpage .material-intro h2 { font-weight: 400; letter-spacing: .035em; text-wrap: balance; }
.subpage .page-heading .eyebrow, .subpage .detail-section-title .eyebrow, .subpage .material-intro .eyebrow { display: flex; align-items: center; gap: 12px; color: #465b68; }
.subpage .page-heading .eyebrow::before, .subpage .detail-section-title .eyebrow::before, .subpage .material-intro .eyebrow::before { content: ''; flex: 0 0 26px; height: 1px; background: linear-gradient(90deg, #427281, #a9d9df); }
.subpage .surface, .subpage .product-feature, .subpage .case-card, .subpage .color-studio { border-color: var(--interface-edge); border-radius: 16px; background: linear-gradient(135deg, #fff, #fbfcfdd9); box-shadow: 0 12px 32px #15333f05, inset 0 1px 0 #fff; }
.subpage .page-photo, .subpage .material-feature-photo { border-radius: 16px; }
.subpage .product-detail-nav { background: #f7fafbdc; border-color: #d8e0e5b3; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.subpage .product-detail-nav a[aria-current], .subpage .page-tabs a[aria-current], .desktop-nav a[aria-current] { background: linear-gradient(125deg, #111c22, #34444d); color: #fff; }
.subpage .button:not(.button-outline):not(.button-light) { background: linear-gradient(125deg, #111c22, #34444d); box-shadow: inset 0 1px 0 #ffffff26; }
.subpage input:focus-visible, .subpage select:focus-visible, .subpage textarea:focus-visible { outline: 2px solid #3c7284; outline-offset: 3px; }
.rail-controls button { border-color: var(--interface-edge); background: linear-gradient(135deg, #fff, #edf2f4); }
@media (max-width: 800px) {
  .app-dock { background: linear-gradient(120deg, #ffffffeb, #edf4f7d9); border-color: #ffffffd9; box-shadow: 0 12px 40px #1a324521, 0 0 0 1px #b9c8d34d, inset 0 1px 0 #fff; backdrop-filter: blur(28px) saturate(120%); -webkit-backdrop-filter: blur(28px) saturate(120%); }
  .app-dock a { color: #3d5361; font-weight: 500; letter-spacing: .03em; }
  .app-dock a[aria-current] { color: #fff; background: linear-gradient(140deg, #233742, #3c5361); box-shadow: inset 0 1px 0 #ffffff38, 0 3px 10px #223f5221; }
  .app-dock a:focus-visible { outline: 2px solid #28576e; outline-offset: 0; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .site-header .header-cta, .rail-controls button { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
  .site-header .header-cta:hover, .rail-controls button:not(:disabled):hover { border-color: #7f9fae; box-shadow: 0 4px 18px #4473871a, inset 0 1px 0 #fff; }
}

/* Tap targets at phone widths (owner decision 2026-10-15): small links and buttons get an invisible hit area of at least
   44 × 44 px, centred on the visible box (a transparent ::after). Nothing moves; the focus ring stays on the box.
   Keep the two :is() lists the same: an ::after without the position: relative would cover a whole ancestor.
   The footer links share the 13px gap between their rows instead (33.9px apart; the last one, alone on its row, reaches
   44 downwards). The footer logo (40px high) grows by padding: positioned, Chrome drew it slightly differently at 701–800px
   on pages with sticky columns. Left as they are: the contact page's quick links (stacked 39.9px apart), the wrapped tags
   of the 404 page (28.5px) and links inside running text. Wider screens (landscape phones, tablets) are not covered. */
@media (max-width: 800px) {
  :is(.site-header .brand, .footer-bottom a, :is(a, button).text-link:not(.fit-conditions *, .contact-quick-links *), .tag-list .tag, .clear-filters, .contact-topic-options button, .contact-fallback a, .sx-series-link, .product-detail-nav a, .concept-nav a, .material-paths a, .material-switcher button, .hero-material, .original-sheet-link, .photo-dialog-bottom a) { position: relative; }
  :is(.site-header .brand, .footer-bottom a, :is(a, button).text-link:not(.fit-conditions *, .contact-quick-links *), .tag-list .tag, .clear-filters, .contact-topic-options button, .contact-fallback a, .sx-series-link, .product-detail-nav a, .concept-nav a, .material-paths a, .material-switcher button, .hero-material, .original-sheet-link, .photo-dialog-bottom a)::after { content: ""; position: absolute; inset: min(0px, 50% - 22px); }
  .footer-top .brand { padding-block: 2px; margin-block: -2px; }
  .footer-top nav a, .breadcrumbs a { position: relative; }
  .footer-top nav a::after { content: ""; position: absolute; inset: -6.5px 0; }
  .footer-top nav .footer-external::after { bottom: calc(100% - 37.5px); }
  /* Downwards only: grown upwards, under the sticky header, they changed Chrome's rendering of photos further down. */
  .breadcrumbs a::after { content: ""; position: absolute; inset: 0 min(0px, 50% - 22px) min(0px, 100% - 44px); }
}