/* Connect the supplied sticky header to the existing Sendai page layout. */
.gr-header,
.gr-panel {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
:root:has(.gr-header) {
  --gr-header-height: 58px;
  --sendai-header-height: var(--gr-header-height);
  scroll-padding-top: var(--gr-header-height);
}
body:has(> .gr-header) {
  height: auto;
  min-height: 100%;
}
body:has(> .gr-header) > main {
  padding-top: var(--gr-header-height);
  min-height: 100vh;
}
body:has(> .gr-header) .page {
  top: 0;
}
body:has(> .gr-header) .content_bg {
  top: var(--gr-header-height);
  height: calc(100vh - var(--gr-header-height));
  height: calc(100dvh - var(--gr-header-height));
}
body:has(> .gr-header) .page .sticky-top {
  z-index: 10;
}
@media (min-width: 1033px) {
  :root:has(.gr-header) {
    --gr-header-height: 140px;
    --gr-reference-unit: calc(min(100vw, 1440px) / 1440);
  }
  body:has(> .gr-header) #baseContent {
    position: relative !important;
  }
  body:has(> .gr-header) #gridNav,
  body:has(> .gr-header) .page .sticky-top {
    z-index: 10;
    top: var(--gr-header-height) !important;
    height: calc(100vh - var(--gr-header-height));
    height: calc(100dvh - var(--gr-header-height));
  }
  body:has(> .gr-header) #home_cont .wrap::before {
    top: var(--gr-header-height);
    height: calc(100vh - var(--gr-header-height));
    height: calc(100dvh - var(--gr-header-height));
  }
  body:has(> .gr-header) .page .bg-holder2::after {
    background-size: max(121.212122%, calc((100vh - var(--gr-header-height)) * .5454545455)) auto;
    background-size: max(121.212122%, calc((100dvh - var(--gr-header-height)) * .5454545455)) auto;
  }
}

/* Brand size and placement measured from the supplied 11:15 screenshot. */
@media (min-width: 1033px) {
  .gr-header, .gr-desktop, .gr-left, .gr-right { height: 140px; }
  .gr-desktop { position: relative; }
  .gr-left {
    position: relative;
    flex-basis: calc(639.5 * var(--gr-reference-unit));
    max-width: calc(639.5 * var(--gr-reference-unit));
    padding-left: 0;
    overflow: hidden;
  }
  .gr-brand {
    position: absolute;
    left: calc(52 * var(--gr-reference-unit));
    top: calc(50% + 3px);
    width: calc(552.5 * var(--gr-reference-unit));
    height: calc(143.65665635 * var(--gr-reference-unit));
    max-width: none;
    margin: 0;
    transform: translateY(-50%);
  }
  .gr-brand img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
  .gr-right { position: static; padding: 0; background: none; clip-path: none; }
  .gr-right::before {
    content: "";
    position: absolute;
    inset: 0 0 0 calc(639.5 * var(--gr-reference-unit));
    z-index: -1;
    background: #ed751b url(header-extended.svg) center / cover no-repeat;
    clip-path: polygon(calc(35 * var(--gr-reference-unit)) 0,100% 0,100% 100%,0 100%,0 58%,calc(35 * var(--gr-reference-unit)) 58%);
    pointer-events: none;
  }
  .gr-top { position: absolute; top: 30px; left: calc(678.5 * var(--gr-reference-unit)); right: 3vw; height: 46px; }
  .gr-social { gap: 12px; padding: 0 6px; }
  .gr-social a, .gr-social img { width: 42px; height: 42px; }
  .gr-apply { width: 280px; flex: 0 1 280px; min-width: 160px; }
  .gr-nav {
    position: absolute;
    top: 90px;
    left: calc(682.5 * var(--gr-reference-unit));
    width: calc(98vw - 682.5 * var(--gr-reference-unit));
    margin: 0;
    padding: 0;
    column-gap: 0;
    row-gap: 0;
    font-size: 14px;
  }
  .gr-nav a {
    display: block;
    margin: 0;
    padding: .2em 0;
    font-family: "Noto Sans JP","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic",Meiryo,sans-serif;
    font-size: 1.37rem;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis: weight style small-caps;
    line-height: 1;
    letter-spacing: normal;
  }
  .gr-nav a:not(:last-child) { margin-right: 14px; }
}
@media (min-width: 1033px) and (max-width: 1199px) {
  .gr-social { gap: 6px; }
  .gr-social a, .gr-social img { width: 24px; height: 24px; }
  .gr-apply { width: 160px; flex-basis: 160px; }
  /* Retain the same text start while keeping three wrapped rows inside 140px. */
  .gr-nav a { padding-bottom: 0; }
}
@media (min-width: 1536px) { .gr-nav a { font-size: 1.49rem; } }
@media (min-width: 1650px) { .gr-nav a:not(:last-child) { margin-right: 21px; } }
@media (min-width: 1899px) { .gr-nav a { font-size: 1.75rem; } }

/* Keep both halves above the existing z-index:1050 page content while scrolling. */
.gr-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
.gr-panel { z-index: 9998; }

/* A desktop column is half the viewport: cancel its own 5% padding, not 5vw. */
@media (min-width: 1033px) {
  #home #home_about .about_youtube dd { margin-inline: calc(-100% / 18); }
}

/* Grid-rule paint only; the retained border box keeps all tile dimensions. */
#gridNav {
  --sendai-yellow: #ec6800;
}
#gridNav::after {
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}