/* Shared breadcrumb appearance; page layouts retain their hero positioning. */
.site-breadcrumb {
  display:flex;
  align-items:baseline;
  gap:6px;
  color:#595757;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:500;
  line-height:1.6;
  letter-spacing:.05em;
}
.site-breadcrumb > a { flex:none; color:inherit; text-decoration:underline; text-underline-offset:3px; }
.site-breadcrumb > [aria-current="page"] { min-width:0; overflow-wrap:anywhere; text-decoration:none; }
.site-breadcrumb > .breadcrumb-separator {
  flex:none;
  width:6px;
  height:6px;
  align-self:flex-start;
  margin:6px 3px 0 1px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.voice-breadcrumb, .download-breadcrumb { margin:28px 40px 0; }
@media(max-width:920px) {
  .site-breadcrumb { font-size:11px; font-weight:400; }
  .voice-breadcrumb, .download-breadcrumb { margin:20px 20px 0; }
}

/* Shared service breadcrumb; pamphlet is the visual reference. */
body:is(.service-pamphlet-page, .service-document-page, .service-saiyou-page, .service-wp-page, .service-monthly-page, .service-template-page) main { position:relative; }
.service-breadcrumb {
  position:absolute;
  z-index:3;
  top:102px;
  left:clamp(20px,3vw,40px);
  margin:0;
  padding:0;
}
@media(max-width:920px) {
  .service-breadcrumb {
    top:80px;
    left:20px;
    right:20px;
  }
  .document-hero { padding-top:80px; }
}
@media(max-width:600px) {
  .service-breadcrumb { top:72px; }
}
/* Keep the shared breadcrumb below the header at every mobile breakpoint. */
@media(max-width:920px) {
  body:is(.service-pamphlet-page, .service-document-page, .service-saiyou-page, .service-wp-page, .service-monthly-page, .service-template-page) {
    --service-header-height:72px;
  }
  body:is(.service-pamphlet-page, .service-document-page, .service-saiyou-page, .service-wp-page, .service-monthly-page, .service-template-page) .site-header {
    height:var(--service-header-height);
    min-height:var(--service-header-height);
    max-height:var(--service-header-height);
  }
  body:is(.service-saiyou-page, .service-wp-page, .service-monthly-page) :is(.saiyou-hero, #service.wp-hero, .mservice-hero) {
    margin-top:calc(-1 * var(--service-header-height));
  }
}
@media(max-width:600px) {
  body:is(.service-pamphlet-page, .service-document-page, .service-saiyou-page, .service-wp-page, .service-monthly-page, .service-template-page) {
    --service-header-height:64px;
  }
}