/* --- 共通ヘッダー --- */

:root {
  --brand-blue: #0090de;
  --decoration-1: #57914c;
  --decoration-10: #b0c562;
  --decoration-2: #8e4834;
  --decoration-3: #b53b5d;
  --decoration-4: #d79447;
  --decoration-5: #ac2e3a;
  --decoration-6: #e9e253;
  --decoration-7: #d39341;
  --decoration-8: #3d8649;
  --decoration-9: #4183bc;
}

.site-header {
  background: var(--white);
}

.header-decoration {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  height: 20px;
  filter: saturate(1.35) brightness(1.1);
}

.header-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-inline: 30px;
  height: 80px;
  background: var(--white);
}

.header-logo {
  display: flex;
  flex: 0 1 280px;
  align-items: center;
  min-width: 0;
  height: 60px;
}

.header-logo img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
}

.header-home-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  min-height: 44px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  color: var(--button-text);
  background: var(--button-background);
  border-radius: 999px;
}

.header-home-button:hover {
  filter: brightness(0.94);
}

.header-brand a:focus-visible {
  outline: 2px solid var(--decoration-5);
  outline-offset: 1px;
}

.header-news {
  display: flex;
  align-items: stretch;
  color: var(--white);
  background: var(--decoration-5);
}

.header-news-window {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.header-news-track {
  display: flex;
  margin: 0;
  width: max-content;
  animation: header-news-scroll 22s linear infinite;
}

.header-news-track > span {
  flex: 0 0 auto;
  padding: 7px 36px;
  min-width: 100vw;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  white-space: nowrap;
}

.header-news:hover .header-news-track {
  animation-play-state: paused;
}

@keyframes header-news-scroll {
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 479px) {
  .header-brand {
    gap: 8px;
    padding-inline: 12px;
  }

  .header-home-button {
    padding-inline: 10px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-news-track {
    display: block;
    width: auto;
    animation: none;
  }

  .header-news-track > span {
    display: block;
    padding-inline: 18px;
    min-width: 0;
    white-space: normal;
  }

  .header-news-track > span[aria-hidden] {
    display: none;
  }
}

/* --- ヘッダー上部の飾り --- */

.header-decoration > span:nth-child(1) {
  background: var(--decoration-1);
}

.header-decoration > span:nth-child(2) {
  background: var(--decoration-2);
}

.header-decoration > span:nth-child(3) {
  background: var(--decoration-3);
}

.header-decoration > span:nth-child(4) {
  background: var(--decoration-4);
}

.header-decoration > span:nth-child(5) {
  background: var(--decoration-5);
}

.header-decoration > span:nth-child(6) {
  background: var(--decoration-6);
}

.header-decoration > span:nth-child(7) {
  background: var(--decoration-7);
}

.header-decoration > span:nth-child(8) {
  background: var(--decoration-8);
}

.header-decoration > span:nth-child(9) {
  background: var(--decoration-9);
}

.header-decoration > span:nth-child(10) {
  background: var(--decoration-10);
}