/* 全ページ共通ヘッダー。トップで確定した見た目を下層にも使用します。
 * bodyで共通ボタン・レスポンシブの基礎指定より優先し、本文には影響させません。 */
body .site-header {
  border-bottom: 0;
  background: #fff;
}

body .site-header__inner {
  width: 93%;
  max-width: 1760px;
  min-height: clamp(82px, 6.1vw, 112px);
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(24px, 2.65vw, 48px);
}

body .site-brand__logo {
  width: clamp(190px, 14.05vw, 260px);
}

body .site-header__nav .menu {
  gap: clamp(26px, 2.65vw, 48px);
}

body .site-header__nav a,
body .site-header__login {
  color: #07154b;
  font-size: clamp(14px, 1.08vw, 18px);
  white-space: nowrap;
}

body .site-header__actions {
  gap: clamp(20px, 1.9vw, 34px);
}

body .site-header__diagnosis {
  min-height: clamp(48px, 3.83vw, 66px);
  border: 0;
  border-radius: 999px;
  padding-inline: clamp(22px, 2.1vw, 38px);
  background: linear-gradient(110deg, #075bff 10%, #5278ff 100%);
  box-shadow: 0 3px 9px rgb(25 89 255 / 18%);
  font-size: clamp(14px, 1.15vw, 19px);
  white-space: nowrap;
}

body .site-header__diagnosis-full,
body .site-header__diagnosis-arrow {
  display: inline-block;
}

body .site-header__diagnosis-short {
  display: none;
}

body .site-header__diagnosis-arrow {
  width: 24px;
  filter: brightness(0) invert(1);
}

body .site-header__diagnosis {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --diagnosis-background: linear-gradient(110deg, #005fff 10%, #567bff 76%, #7650ff 100%);
  background: var(--diagnosis-background);
  transition: box-shadow 420ms ease, transform 420ms ease;
}

body .site-header__diagnosis::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, #006aff 0%, #4145ff 52%, #972bfa 100%);
  opacity: 0;
  transition: opacity 420ms ease;
  content: "";
}

body .site-header__diagnosis:is(:hover, :focus-visible) {
  border-color: transparent;
  background: var(--diagnosis-background);
  box-shadow: 0 8px 22px rgb(76 70 255 / 30%);
}

body .site-header__diagnosis:is(:hover, :focus-visible)::before {
  opacity: 1;
}

/* 幅の狭いPC用の微調整です。 */
@media (min-width: 1081px) and (max-width: 1160px) {
  body .site-header__diagnosis-full,
  body .site-header__diagnosis-arrow {
    display: none;
  }

  body .site-header__diagnosis-short {
    display: inline;
  }

}

@media (max-width: 1080px) {
  body .site-header__inner {
    width: 90%;
    min-height: 76px;
    grid-template-columns: 1fr auto auto;
    gap: 20px;
  }

  body .site-brand__logo {
    width: 190px;
  }

  body .site-header__nav .menu {
    gap: 8px;
  }

}

@media (max-width: 767px) {
  body .site-header__inner {
    min-height: 64px;
    gap: 12px;
  }

  body .site-brand__logo {
    width: 136px;
  }

  body .site-header__diagnosis-full,
  body .site-header__diagnosis-arrow {
    display: none;
  }

  body .site-header__diagnosis-short {
    display: inline;
  }

  body .site-header__diagnosis {
    min-height: 40px;
    padding-inline: 16px;
    font-size: 13px;
  }

  body .site-header__nav .menu {
    gap: 0;
  }

}

@media (prefers-reduced-motion: reduce) {
  body .site-header__diagnosis,
  body .site-header__diagnosis::before { transition: none; }
  body .site-header__diagnosis:hover { transform: none; }
}