:root {
  --bs-primary: #0047A7;
  --bs-primary-rgb: 0, 71, 167;
  --bs-primary-text-emphasis: #00347B;
  --bs-primary-bg-subtle: #e6eef9;
  --bs-primary-border-subtle: #b3caeb;

  --bs-dark: #00347B;
  --bs-dark-rgb: 0, 52, 123;
  --bs-dark-text-emphasis: #00285f;
  --bs-dark-bg-subtle: #d9e1f2;
  --bs-dark-border-subtle: #a6b7d7;

  --bs-warning: #f7b400;
  --bs-warning-rgb: 247, 180, 0;
  --bs-warning-text-emphasis: #7c5a00;
  --bs-warning-bg-subtle: #fff4cc;
  --bs-warning-border-subtle: #fde08a;

  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--bs-dark);
  --bs-body-font-family: "Noto Sans JP", "Noto Sans Japanese", Roboto, "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
}

.lab-nav {
  --bs-nav-underline-gap: 0;
  --bs-nav-underline-border-width: 0;
  --bs-nav-underline-link-active-color: var(--bs-primary);
}

.lab-nav .nav-link {
  color: var(--bs-black) !important;
  padding-top: 1rem;
  padding-bottom: 1rem;
  position: relative;
}

.lab-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background-color: var(--bs-warning);
  opacity: 0;
  transition: opacity .2s ease;
}

.lab-nav .nav-link:hover,
.lab-nav .nav-link:focus,
.lab-nav .nav-link.active {
  color: var(--bs-primary) !important;
}

.lab-nav .nav-link:hover::after,
.lab-nav .nav-link:focus::after,
.lab-nav .nav-link.active::after {
  opacity: 1;
}

.page-title {
  color: var(--bs-white);
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
  padding: 1.3em 0.9em;
  background: url("../images/h1_bg.webp") right center / cover no-repeat;
  min-height: 140px;
  display: flex;
  align-items: center;
}

.section-title {
  color: var(--bs-white) !important;
  font-weight: 700;
  padding: 0.4rem 1rem 0.5rem 2rem;

  background:
    url("../images/h2_bg.svg") 10px center / 16px 16px no-repeat,
    var(--bs-primary);

  border-bottom: 3px solid var(--bs-warning) !important;
}

.banner-link {
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.banner-link:hover,
.banner-link:focus {
  background-color: var(--bs-primary-bg-subtle) !important;
  border-color: var(--bs-primary) !important;
  box-shadow: var(--bs-box-shadow) !important;
  transform: translateY(-2px);
}

.banner-link img {
  display: block;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-dark);
  --bs-btn-hover-border-color: var(--bs-dark);

  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-dark);
  --bs-btn-active-border-color: var(--bs-dark);

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}