:root {
  color-scheme: light;
  --ink: #234063;
  --muted: rgba(35, 64, 99, 0.72);
  --line: rgba(103, 165, 205, 0.28);
  --paper: #f8fdff;
  --blue-quiet: #dff6ff;
  --blue-pale: #eefaff;
  --blend: clamp(28px, 7vw, 96px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(232, 249, 255, 0.92) 36%, rgba(255, 255, 255, 0.96) 100%),
    radial-gradient(circle at 16% 8%, rgba(172, 230, 255, 0.42), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(99, 185, 231, 0.22), transparent 34%),
    var(--paper);
}

a {
  color: inherit;
  text-decoration: none;
}

.site-footer img {
  display: block;
  width: 100%;
  height: auto;
}

main {
  overflow: hidden;
}

.visual-section {
  display: block;
  padding: 0;
  line-height: 0;
  position: relative;
}

.section-picture {
  display: block;
}

.visual-section--hero {
  padding-top: 0;
}

.visual-section--info {
  padding-bottom: 0;
}

.visual-section + .visual-section {
  margin-top: calc(var(--blend) * -1);
}

.teaser-image {
  display: block;
  width: 100vw;
  max-width: none;
  height: auto;
  border: 0;
}

.visual-section + .visual-section .teaser-image {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0) 6px, #000 var(--blend), #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0) 6px, #000 var(--blend), #000 100%);
}

.teaser-image--hero {
  width: 100vw;
  max-width: none;
}

.site-footer {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 28px 20px 36px;
  color: rgba(35, 64, 99, 0.58);
}

.site-footer img {
  width: min(148px, 42vw);
  opacity: 0.86;
}

.site-footer small {
  font: 12px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.04em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  :root {
    --blend: clamp(36px, 12vw, 72px);
  }

  .visual-section {
    padding: 0;
  }

  .visual-section--hero {
    min-height: auto;
    padding-top: 0;
  }

  .teaser-image {
    border-radius: 0;
  }

  .teaser-image--hero {
    max-height: none;
  }
}