header {
  /* position: fixed;
  top: 0; */
  width: 100%;
  z-index: var(--z-index-level-high-first);
  height: var(--header-height);
  /* padding-inline: var(--content-sides-space-default); */
  /* padding-block: 30px; */
  padding-block: clamp(10px, 5vw, 30px);
}

@media screen and (max-width: 767px) {
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(0);
    transition: transform 0.25s ease;
    will-change: transform;
  }

  header:not(.is-visible) {
    transform: translateY(-100%);
  }

  main {
    /* ヘッダーを隠している間は余白を詰める（headerと同じ速度でアニメーション） */
    padding-top: 0;
    transition: padding-top 0.25s ease;
  }

  /* headerの直後に modal div があり、その次に main が来る前提で余白を同期 */
  header.is-visible + div.modal + main {
    padding-top: var(--header-height);
  }
}

hgroup > :nth-child(2) {
  line-height: 2.0;
}

h1, h2, h3 {
  font-family: "Linden Hill";
  font-weight: 400;
  font-style: normal;
}

h1 {
  border-block-end: 1px solid var(--border-color-dark-secondary);
  line-height: 0.9;
}

h2, h3 {
  border-block-end: 1px dotted var(--border-color-dark-secondary);
  line-height: 1.2;
}


h1 {
  /* font-family: "Raleway"; */
  /* font-size: var(--font-size-xx-large); */
  font-size: var(--font-size-h1);
  /* font-weight: var(--font-weight-bolder); */
  /* letter-spacing: .06em; */
  max-width: 500px;
  margin-inline: auto;
}

h1, hgroup h1 + p {
  text-align: center;
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

img {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}
/* (figure styling intentionally omitted) */