@media (max-width:600px) {
  .section {
    height: 135vw;
    padding: 0 0 8vw 0;
  }

  .hero {
    background-size: 200% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }

  .asset {
    width: 80vw;
  }


 .logo {
    width: 64vw;
        margin-top: 4vw;
  }

   .hero-content {
    width: 100%;
    gap: 2vw;
  }

  .ribbons {
    width: 137vw;
    margin-left: -26vw;
}

.scroll-arrow {
    height: 10vw;
    margin-top: -7vw;
}

  .scroll-arrow img {
    width: 10vw;
        margin-top: 0vw;
}

.hero-time {
    width: 70%;
    font-size: 2.8vw;
}

.floating-nav {
    top: 30%;
    gap: 1.2vw;
}

.nav-button {
    width: 7.4vw;
    height: 8.4vw;
    border: 0;
}

    dialog {
        width: 80vw;
        height: 102vw;
    }

    .dialog-close {
        width: 6.8vw;
        height: 6.8vw;
        top: -7.4vw;
        right: -5.4vw;
        border: 0;
    }

.dialog-card {
    width: 80vw;
    height: 102vw;
    padding: 3.6vw 3vw 3vw;
    border: .8vw solid #ee7a74;
    border-radius: 5vw;
}

.dialog-card h2 {
    margin: 0;
    font-size: 3.2vw;
    /* line-height:4; */
}

.dialog-body {
    font-size: 2vw;
    padding: 0 5vw 2vw;
    max-height: 80vw;
}

.dialog-body h3 {
    margin: 2vw 0 0.8vw;
    color: #e87571;
    font-size: 2.3vw;
    line-height: 1.2;
}

.dialog-character {
    left: -11vw;
    bottom: -2.2vw;
    width: 19vw;
}


.station1 {
 margin-top: -33vw;
}

.station1-content {
    width: min(100%, 90vw);
    margin-top: -20vw;
}

.download-links a {
    width: 25vw;
}

.station1-copy p {
    font-size: 2.4vw;
}

.station1-links {
    gap: 1vw;
    width: 100%;
}

.station1-links a {
    font-size: 3.2vw;
}

.station1-links.is-fixed {
    width: 90vw;
    padding: 1.5vw 0;
}

 .mobile-br {
    display: inline;
  }

  .between-1-2 {
    top: -32vw;
}

.station-between-characters img {
    width: 21vw;
}

.station2 {
        margin-top: -51vw;
        padding: calc(25vw + 3vw) 8vw 40vw;
    }

.station2-title {
    width: 60vw;
}

.station2-subtitle {
    font-size: 4vw;
}


.station2-description {
   padding: 1.2vw 0;
        width: 100%;
        font-size: 2.8vw;
}

.station2-rewards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2vw 2vw;
    width: 100%;
  }

.station2-reward-date {
    top: 9.5%;
    font-size: 2.8vw;
}

.station2-reward-count {
    font-size: 2.2vw;
    -webkit-text-stroke: 1vw black;
}


.station2-reward-name {
    width: 96%;
    font-size: 1.8vw;
}

 .station2-content2 {
    margin-top: 5vw;
  }

  .station2-milestones {
    width: 45vw;
    grid-template-columns: minmax(0, 1fr);
    gap: 2vw;
  }

  .station2-milestone-day {
     top: 7.5%;
    font-size: 3vw;
  }

  .station2-milestone-name {
    font-size: 1.8vw;
  }

  .station2-milestone-arrow {
    width: 7vw;
    justify-self: center;
    transform: rotate(90deg);
    animation-name: station2ArrowShakeY;
  }

 @keyframes station2ArrowShakeY {
    0%, 100% { translate: 0 -1vw; }
    50% { translate: 0 1vw; }
  }

   .station2-content3 {
   margin-top: 18vw;
  }

  .station2-craft {
    width: 84vw;
        aspect-ratio: 568 / 740;
        border: .6vw solid #000;
        border-radius: 2.5vw;
  }

  .station2-craft-background {
    border-radius: 4vw;
  }

  .station2-craft-mask {
    top: 25%;
    left: 13%;
    width: 140%;
}

     .station2-craft-character {
        left: -9%;
        top: 1%;
        width: 52%;
        height: 32%;
    }

  .station2-craft-dialog {
        top: -11%;
        left: auto;
        right: -5%;
        width: 73%;
        padding: 7% 2% 9%;
        gap: 1vw;
    }

  .station2-craft-dialog-title {
    font-size: 4vw;
  }

  .station2-craft-dialog-copy {
    font-size: 3.2vw;
  }

  .station2-craft-items {
        left: 5%;
        top: 36%;
        width: 30%;
        grid-template-columns: minmax(0, 1fr);
    }

      .station2-craft-item figcaption {
        margin-top: 2vw;
        font-size: 2vw;
        width: 25vw;
        text-align: center;
    }

  .station2-craft-plus {
    font-size: 6vw;
  }

      .station2-craft-arrow {
        left: 41%;
        top: 62%;
        width: 10%;
    }

  .station2-craft-result {
        right: -9%;
        top: 20%;
        width: 57%;
        height: 80%;
    }

  .station2-craft-notes {
    width: 78vw;
    margin: 5vw auto 0;
    padding: 0;
    flex-direction: column;
    gap: 1vw;
    background: transparent;
  }

  .station2-craft-notes p {
        padding: 1vw 0vw;
        border-radius: 99vw;
        background: #292929;
        font-size: 2.8vw;
    }

    .between-2-3 {
    top: -14vw;
}

    .between-2-3 img {
    width: 27vw;
}

     .station3 {
        padding: calc(21svw + 8vw) 5vw 38vw;
        margin-top: -29vw;
    }

  .station3-content {
    max-width: none;
    gap: 7vw;
  }

  .station3-title {
    width: 74vw;
  }

      .station3-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 0vw;
    }


  .station3-copy h3 {
    font-size: 4.5vw;
    -webkit-text-stroke: .8vw #5e9ad5;
}

.station3-copy p {
  margin: 0;
  font-size: 2.8vw;
}

  .station3-copy p + p {
    margin-top: 3vw;
  }

 .station3-images {
        width: 76vw;
        margin-left: -10vw;
    }

  .station3-word {
    width: 55%;
}

.station3-gift {
    width: 75%;
}

  .station3-description h3 {
    margin-top: -11vw;
    margin-bottom: 3vw;
    font-size: 4.5vw;
    -webkit-text-stroke: .8vw #5e9ad5;
  }

  .station3-description p {
    font-size: 2.8vw;
  }

  .station3-mobile-break {
    display: inline;
  }

  .station3-button {
        width: 54vw;
        font-size: 4vw;
    }

.between-3-4 {
    top: -30vw;
}

  .between-3-4 img{
     width: 40vw;
  }

     .station4 {
        padding: calc(25svw + 8vw) 5vw 8vw;
        margin-top: -43vw;
    }

  .station4-content {
    gap: 8vw;
  }

  .station4-title {
    width: 60vw;
  }

      .station4-panels {
        width: 90%;
        grid-template-columns: minmax(0, 1fr);
        gap: 7vw;
    }

  .station4-panel {
    padding: 0 4.5vw 4vw;
  }

   .station4-panel-header h3 {
        -webkit-text-stroke-width: -0.5vw;
        -webkit-text-stroke: 1.2vw var(--title-outline);
        margin-top: 2vw;
    }

  .station4-panel-header h3 span {
    font-size: 5.5vw;
  }

  .station4-panel-header h3 b {
        font-size: 8.5vw;
        margin-top: -2.5vw;
    }

  .station4-period {
    font-size: 3.2vw;
  }    

      .station4-copy {
        width: 76vw;
        margin: -1vw 0 3vw;
        font-size: 3.2vw;
    }

  .station4-copy strong {
    font-size: 5.5vw;
  }

  

     .station4-rewards {
        gap: 3vw;
        padding-inline: 0vw;
    }

  .station4-reward figcaption {
    font-size: 2.2vw;
  }

  .station4-deadline {
    padding: 1vw 9vw;
    font-size: 2.8vw;
  }


    .footer {
        padding: 4vw 4vw;
    }

  .footer-logo {
    width: 90vw;
  }

  .footer-copyright {
    font-size: 1.8vw;
  }

.snow-effect img {
    animation-name: ribbonScatterMobile;
    backface-visibility: hidden;
  }


@keyframes ribbonScatterMobile {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg);
  }

  10% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(var(--spread), calc(100dvh + 16vw))
      rotate(var(--spin));
  }
}




body {
  touch-action: pan-y pinch-zoom;
} 

}