/* Reusable motif name: MPTB (Masuko Page Title Banner) */
/* Header-safe title banner for selected fixed pages */
.page-article--with-title-banner .page-title-banner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: calc(var(--header-h, 110px) + 30px) 20px 44px;
  background: #3e7cbe;
  color: #fff;
}

.page-article--with-title-banner .page-title-banner__inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.page-article--with-title-banner .page-title-banner__sub {
  display: none;
}

.page-article--with-title-banner .page-title-banner__title {
  margin: 35px 0;
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 100;
  font-variation-settings: "wght" 100;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  padding: 18px 36px;
}

.page-article--with-title-banner .page-title-banner__title::after {
  --title-dot-size: 2px;
  content: "";
  position: absolute;
  inset: -3px -3px;
  pointer-events: none;
  background:
    linear-gradient(#fff 0 0) top left / var(--title-dot-size) var(--title-dot-size) no-repeat,
    linear-gradient(#fff 0 0) top right / var(--title-dot-size) var(--title-dot-size) no-repeat,
    linear-gradient(#fff 0 0) bottom left / var(--title-dot-size) var(--title-dot-size) no-repeat,
    linear-gradient(#fff 0 0) bottom right / var(--title-dot-size) var(--title-dot-size) no-repeat;
}

/* Title banner content spacing moved from global CSS */
.page-content--with-title-banner > .about-section:first-child {
  display: none;
}

.page-content--with-title-banner > .about-section:first-child + * {
  margin-top: 28px;
}

.page-content--with-title-banner > :not(.about-section):first-child {
  margin-top: 28px;
}

/* Keep custom page headers below fixed site header */
.page-content > .page-header:first-child {
  margin-top: var(--header-h, 110px);
}

.page-article--with-quality-nav-banner .page-title-banner__nav-select-wrap {
  display: none;
}

.page-article--with-title-banner {
  padding-bottom: clamp(56px, 8vw, 96px);
}

.page-article--with-title-banner .page-content > :last-child {
  margin-bottom: 0;
}

@media (max-width: 880px) {
  .page-article--with-title-banner .page-title-banner {
    padding: calc(var(--header-h, 110px) + 22px) 16px 34px;
  }

  .page-article--with-title-banner .page-title-banner__title {
    font-size: clamp(26px, 8vw, 38px);
  }

  .page-article--with-quality-nav-banner .page-title-banner .quality-nav.quality-nav--banner {
    display: none !important;
  }

  .page-article--with-quality-nav-banner .page-title-banner__nav-select-wrap {
    position: relative;
    display: block;
    width: min(100%, 320px);
    margin: 20px auto 0;
  }

  .page-article--with-quality-nav-banner .page-title-banner__nav-select-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 9px;
    height: 9px;
    border-right: 2px solid #0079c4;
    border-bottom: 2px solid #0079c4;
    transform: translateY(-68%) rotate(45deg);
    pointer-events: none;
  }

  .page-article--with-quality-nav-banner .page-title-banner__nav-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 50px;
    padding: 0 44px 0 16px;
    border: 2px solid #0079c4;
    border-radius: 0;
    background: #ffffff;
    color: #0079c4;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-align-last: center;
    box-sizing: border-box;
  }

  .page-article--with-title-banner {
    padding-bottom: clamp(40px, 10vw, 64px);
  }
}

/* JP SP only: expand company and quality dropdown menus to the 24px page guide. */
@media (max-width: 880px) {
  body:not(.language-page-body):not(.language-page-body--en):not(.language-page-body--zh):is(.page-id-2, .page-id-27, .page-id-218, .page-id-219, .page-id-223, .page-id-224, .page-id-225, .page-id-226, .page-id-227, .page-id-228, .page-id-379) .page-article--with-quality-nav-banner .page-title-banner__nav-select-wrap {
    width: min(calc(100vw - 48px), 720px) !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}