html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smoooth;
  scroll-margin-top: 0;
}
.footer {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.c-chapter {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 1.25rem 12vh;
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  
  @media (min-width: 768px) {
    padding-inline: 2.5rem;
  }
  @media (min-width: 1024px) {
    padding-inline: 3.75rem;
  }
  @media (min-width: 1200px) {
    padding-inline: 7.5rem;
  }
}
.c-parallax {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.c-parallax__layer {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
}
.c-parallax__layer.is-bg {
  filter: brightness(0.82) saturate(0.92);
}

.chapter1 {
  & .c-parallax__layer.is-bg {
    z-index: 0;
  }
  & .c-parallax {
    z-index: unset;
  }
  & .c-parallax__layer.is-subject {
    z-index: 3;
    & img {
      position: absolute;
      top: 2rem;
      width: 90%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;

      @media (min-width: 768px) {
        top: 5rem;
      }
    }
  }
  & .c-parallax__layer.is-ghost {
    z-index: 1;
    & img {
      position: absolute;
      bottom: 0rem;
      right: 0;
      width: 100%;
      max-width: 85rem;
      z-index: 1;
    }
    @media (min-width: 1200px) {
      right: 1rem;
    }
  }
  & .halftone-backdrop {
    z-index: 2;
  }
}


.c-content {
  position: relative;
  z-index: 5;
  filter: drop-shadow(0 16px 48px rgba(0, 0, 0, 0.48)) drop-shadow(0 8px 24px rgba(0, 0, 0, 0.32)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.16)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
}

.skewed-text {
  transform: skew(-12deg);
  font-feature-settings: "palt";
}

.c-scroll {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  letter-spacing: 1em;
  font-weight: 500;
  line-height: 1.25;
  font-size: 0.875rem;
  color: var(--snow);
  z-index: 5;
}


.chapter2 {
  padding-bottom: 7.5rem;
  & .c-parallax__layer.is-bg {
    z-index: 0;
  }
  & .c-parallax {
    z-index: unset;
  }
  & .c-parallax__layer.is-subject {
    z-index: 2;
    & .text {
      width: 85%;
      position: absolute;
      top: 8rem;
      left: 50%;
      transform: translateX(-50%);
      background-color: var(--accent);
      aspect-ratio: 3 / 1;
      -webkit-mask: url(/system_panel/uploads/images/we-are-tsurayuki-mobile.svg) center / contain no-repeat;
      mask: url(/system_panel/uploads/images/we-are-tsurayuki-mobile.svg) center / contain no-repeat;
      
      @media (min-width: 768px) {
        aspect-ratio: 100 / 7;
        -webkit-mask: url(/system_panel/uploads/images/we-are-tsurayuki-desktop.svg) center / contain no-repeat;
        mask: url(/system_panel/uploads/images/we-are-tsurayuki-desktop.svg) center / contain no-repeat;
      }
      
      @media (min-width: 768px) {
        top: 14rem;
      }
    }
  }
  & .c-parallax__layer.is-ghost {
    z-index: 3;
    & img {
      position: absolute;
      bottom: 0rem;
      left: 50%;
      width: 140%;
      max-width: 81.875rem;
      z-index: 1;
      transform: translateX(-50%);
      @media (min-width: 768px) {
        width: 100%;
        left: 3rem;
        transform: none;
      }
    }
  }
  & .halftone-backdrop {
    z-index: 1;
  }
}

.chapter4 {
  padding-bottom: 7.5rem;
  & .c-parallax__layer.is-bg {
    z-index: 0;
  }
  & .c-parallax {
    z-index: unset;
  }
  & .c-parallax__layer.is-subject {
    z-index: 2;
    & .text {
      width: 85%;
      position: absolute;
      top: 6rem;
      left: 50%;
      transform: translateX(-50%);
      background-color: var(--snow);
      aspect-ratio: 120 / 29;
      -webkit-mask: url(/system_panel/uploads/images/when-a-man-lives-his-name-mobile.svg) center / contain no-repeat;
      mask: url(/system_panel/uploads/images/when-a-man-lives-his-name-mobile.svg) center / contain no-repeat;
      
      @media (min-width: 768px) {
        aspect-ratio: 1595 / 76;
        -webkit-mask: url(/system_panel/uploads/images/when-a-man-lives-his-name-desktop.svg) center / contain no-repeat;
        mask: url(/system_panel/uploads/images/when-a-man-lives-his-name-desktop.svg) center / contain no-repeat;
      }
    }
  }
  & .c-parallax__layer.is-ghost {
    z-index: 3;
    & img {
      position: absolute;
      bottom: 0rem;
      left: 50%;
      width: 140%;
      max-width: 68.5rem;
      z-index: 1;
      transform: translateX(-50%);
      @media (min-width: 768px) {
        width: 100%;
        left: 3rem;
        transform: none;
      }
    }
  }
  & .halftone-backdrop {
    z-index: 1;
  }
}


.chapter3 {
  @media (min-width: 1200px) {
    aspect-ratio: 13 / 8;
    width: 100%;
    min-height: unset;
    scroll-snap-stop: normal;
  }
  & .c-content {
    z-index: 6;
  }
  & .chapter3__links {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    width: 100%;
    height: 100%;
    
    & .birtsky {
      background-color: hsla(from var(--violet) h s l / 40%);
    }
    & .mitsuya {
      background-color: hsla(from var(--dark-red) h s l / 40%);
    }
    & .builbri {
      background-color: hsla(from var(--yellow) h s l / 40%);
    }
    
    & .logo {
      filter: drop-shadow(0 16px 48px rgba(255, 255, 255, 0.48)) drop-shadow(0 8px 24px rgba(255, 255, 255, 0.32)) drop-shadow(0 4px 12px #FFF) drop-shadow(0 2px 6px rgba(255, 255, 255, 0.08));
    }
    
    @media (min-width: 1024px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: unset;
    }
    @media (min-width: 1200px) {
      grid-template-columns: unset;
      display: block;
      z-index: 5;
      
      & .birtsky, & .mitsuya, & .builbri {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        -webkit-clip-path: var(--shape);
        clip-path: var(--shape);
        & .contents {
          position: absolute;
          z-index: 5;
        }
        & .logo {
          height: 12.8125rem;
        }
        & .lb {
          height: 7rem;
        }
      }
      & .birtsky {
        --shape: polygon(0 0, 79.625% 0, 0 81.6648%);
        & .contents {
          top: 20rem;
          left: 3rem;
        }
        & .logo {
          top: 5rem;
          left: 5rem;
        }
        & .lb {
          top: 8rem;
          left: 22rem;
        }
      }
      & .mitsuya {
        --shape: polygon(0 81.6648%, 79.625% 0, 60.9688% 100%, 0 100%);
        & .contents {
          bottom: 5rem;
          left: 22rem;
        }
        & .logo {
          top: 32rem;
          left: 44rem;
        }
        & .lb {
          top: unset;
          bottom: 3rem;
          left: 6rem;
        }
      }
      & .builbri {
        --shape: polygon(79.625% 0, 100% 0, 100% 100%, 60.9688% 100%);
        & .contents {
          bottom: 11rem;
          right: 7rem;
        }
        & .logo {
          top: 20rem;
          right: 3rem;
        }
        & .lb {
          top: unset;
          bottom: 5rem;
          right: 2rem;
          left: unset;
        }
      }
    }
  }
}

.chapter7 {
  padding-bottom: 5rem;
  & .c-parallax__layer.is-bg {
    z-index: 0;
  }
  & .c-parallax {
    z-index: unset;
  }
  & .c-parallax__layer.is-subject {
    z-index: 1;
    & .text {
      width: 85%;
      position: absolute;
      top: 6rem;
      left: 50%;
      transform: translateX(-50%);
      background-color: var(--snow);
      aspect-ratio: 1400 / 143;
      -webkit-mask: url(/system_panel/uploads/images/your-tourn.svg) center / contain no-repeat;
      mask: url(/system_panel/uploads/images/your-tourn.svg) center / contain no-repeat;
    }
  }
  & .c-parallax__layer.is-ghost {
    z-index: 2;
    & img {
      position: absolute;
      bottom: 0rem;
      left: 50%;
      width: 140%;
      z-index: 1;
      transform: translateX(-50%);
      @media (min-width: 1200px) {
        width: 96%;
        left: 0;
        bottom: -12rem;
        transform: none;
      }
    }
  }
  & .halftone-backdrop {
    z-index: 3;
  }
}

.chapter5 {
  padding-block: 0;
  & .c-parallax__layer.is-subject {
    z-index: 1;
    & .text {
      width: 85%;
      position: absolute;
      bottom: 6rem;
      left: 50%;
      transform: translateX(-50%);
      background-color: var(--accent);
      aspect-ratio: 316 / 25;
      -webkit-mask: url(/system_panel/uploads/images/are-you-ready.svg) center / contain no-repeat;
      mask: url(/system_panel/uploads/images/are-you-ready.svg) center / contain no-repeat;
    }
  }
}
.chapter6 {
  padding-block: 0;
  & .backdrop-accent::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background-color: hsla(from var(--accent) h s l / 35%);
  }
}



.backdrop-yellow,
.backdrop-red,
.backdrop-blue {
  display: none;
}
.theme-yellow .backdrop-yellow {
  display: block;
}
.theme-red .backdrop-red {
  display: block;
}
.theme-blue .backdrop-blue {
  display: block;
}
.insta-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  & > img, & > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}




@media (max-width: 767px) {
  .c-parallax__layer {
    inset: 0;
  }

  .c-parallax__layer.is-bg,
  .c-content,
  .chapter3__links .logo,
  .footer-logo img {
    filter: none;
  }
}