@keyframes star {
  0% {
    transform: scale(0.5);
  }
  48% {
    transform: scale(1);
  }
  50% {
    transform: scale(1);
  }
  52% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.5);
  }
}
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideInLR {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0);
  }
}
@keyframes slideInRL {
  0% {
    clip-path: inset(0 0 0 100%);
  }
  100% {
    clip-path: inset(0);
  }
}
@keyframes openingRibbon {
  0% {
    clip-path: inset(0 70% 0 30%);
  }
  100% {
    clip-path: inset(0);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
    filter: blur(1px);
    opacity: 0;
  }
  0.1% {
    transform: scale(1);
    filter: blur(1px);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
    filter: blur(3px);
  }
}
@keyframes pulseOverray {
  0% {
    transform: scale(1);
    filter: blur(1px);
    opacity: 0;
  }
  0.1% {
    transform: scale(1);
    filter: blur(1px);
    opacity: 1;
  }
  80% {
    transform: scale(1.4);
    opacity: 0;
    filter: blur(3px);
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
    filter: blur(3px);
  }
}
@keyframes scene02Pulse {
  0% {
    transform: scale(1);
    filter: blur(1px);
    opacity: 0;
  }
  0.1% {
    transform: scale(1);
    filter: blur(1px);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
    filter: blur(3px);
  }
}
@keyframes scene02PulseOverray {
  0% {
    transform: scale(1);
    filter: blur(1px);
    opacity: 0;
  }
  0.1% {
    transform: scale(1);
    filter: blur(1px);
    opacity: 1;
  }
  80% {
    transform: scale(1.5);
    opacity: 0;
    filter: blur(3px);
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
    filter: blur(3px);
  }
}
@keyframes scene03Pulse {
  0% {
    transform: scale(1);
    filter: blur(1px);
    opacity: 0;
  }
  0.1% {
    transform: scale(1);
    filter: blur(1px);
    opacity: 1;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
    filter: blur(3px);
  }
}
@keyframes scene03PulseOverray {
  0% {
    transform: scale(1);
    filter: blur(1px);
    opacity: 0;
  }
  0.1% {
    transform: scale(1);
    filter: blur(1px);
    opacity: 1;
  }
  80% {
    transform: scale(1.6);
    opacity: 0;
    filter: blur(3px);
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
    filter: blur(3px);
  }
}
@keyframes scene04Pulse {
  0% {
    transform: scale(1, 1);
    filter: blur(1px);
    opacity: 0;
  }
  0.1% {
    transform: scale(1);
    filter: blur(1px);
    opacity: 1;
  }
  100% {
    transform: scale(1.2, 1.4);
    opacity: 0;
    filter: blur(3px);
  }
}
@keyframes scene04PulseOverray {
  0% {
    transform: scale(1, 1);
    filter: blur(1px);
    opacity: 0;
  }
  0.1% {
    transform: scale(1);
    filter: blur(1px);
    opacity: 1;
  }
  80% {
    transform: scale(1.2, 1.4);
    opacity: 0;
    filter: blur(3px);
  }
  100% {
    transform: scale(1.2, 1.4);
    opacity: 0;
    filter: blur(3px);
  }
}
@keyframes scrollableHandLoop {
  0% {
    transform: translateX(60%);
    opacity: 0;
  }
  25% {
    transform: translateX(30%);
    opacity: 1;
  }
  75% {
    transform: translateX(-30%);
    opacity: 1;
  }
  100% {
    transform: translateX(-60%);
    opacity: 0;
  }
}
@keyframes scrollableHandStop {
  0% {
    transform: translateX(60%);
    opacity: 0;
  }
  25% {
    transform: translateX(30%);
    opacity: 1;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes dotLine3 {
  0% {
    clip-path: inset(0 0 100% 0);
  }
  0.1% {
    clip-path: inset(0 0 67% 0);
  }
  50% {
    clip-path: inset(0 0 67% 0);
  }
  50.1% {
    clip-path: inset(0 0 33% 0);
  }
  99.9% {
    clip-path: inset(0 0 33% 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes mvTitleFadeUp {
  0% {
    opacity: 0;
    transform: translateY(12%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@font-face {
  font-display: auto;
  font-family: SoDoSans;
  font-style: normal;
  font-weight: 200;
  src: url(/common/fonts/SoDoSans/SoDoSans-Thin.woff2) format("woff2"), url(/common/fonts/SoDoSans/SoDoSans-Thin.woff) format("woff");
}
@font-face {
  font-display: auto;
  font-family: SoDoSans;
  font-style: normal;
  font-weight: 300;
  src: url(/common/fonts/SoDoSans/SoDoSans-Light.woff2) format("woff2"), url(/common/fonts/SoDoSans/SoDoSans-Light.woff) format("woff");
}
@font-face {
  font-display: auto;
  font-family: SoDoSans;
  font-style: normal;
  src: url(/common/fonts/SoDoSans/SoDoSans-Regular.woff2) format("woff2"), url(/common/fonts/SoDoSans/SoDoSans-Regular.woff) format("woff");
}
@font-face {
  font-display: auto;
  font-family: SoDoSans;
  font-style: normal;
  font-weight: 600;
  src: url(/common/fonts/SoDoSans/SoDoSans-SemiBold.woff2) format("woff2"), url(/common/fonts/SoDoSans/SoDoSans-SemiBold.woff) format("woff");
}
@font-face {
  font-display: auto;
  font-family: SoDoSans;
  font-style: normal;
  font-weight: 700;
  src: url(/common/fonts/SoDoSans/SoDoSans-Bold.woff2) format("woff2"), url(/common/fonts/SoDoSans/SoDoSans-Bold.woff) format("woff");
}
.v-enter-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  position: absolute;
  opacity: 0;
}

.modal-enter-active {
  transition: opacity 0.3s ease;
}

.modal-enter-from,
.modal-leave-to {
  position: absolute;
  opacity: 0;
}

.townModal-enter-active {
  transition: opacity 0.3s ease 0.4s;
}

.townModal-enter-from,
.townModal-leave-to {
  position: absolute;
  opacity: 0;
}

.scrollable-enter-from,
.scrollable-leave-to {
  position: absolute;
  opacity: 0;
}

.scrollable-leave-to {
  transition: opacity 0.3s ease;
}

.loading-enter-from,
.loading-leave-to {
  position: absolute;
  opacity: 0;
}

.loading-leave-to {
  transition: opacity 0.5s ease;
}

.c-disclosure-details {
  overflow: hidden;
  transition: height 0.5s;
}

.c-disclosure-details[aria-hidden=true] {
  height: 0;
  visibility: hidden;
  transition: height 0.5s, visibility 0.5s 0.5s;
}

.p-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  padding: 11.2820512821vw 0;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
}
@media (min-width: 64em) {
  .p-modal {
    padding: 44px 0;
  }
}

.p-modal__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 89.7435897436%;
  margin: auto;
}

.p-content {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(180deg, rgb(52, 79, 149) 0%, rgb(37, 59, 116) 50%);
}

.p-content__body {
  position: relative;
  margin: 0 auto;
  aspect-ratio: 390/563;
}
@media (min-width: 64em) {
  .p-content__body {
    width: 446px;
    overflow: hidden;
  }
}

.p-town {
  --z-head: 20;
  --z-layer1: 15;
  --z-layer2: 10;
  --z-layer3: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1E3932;
}
.p-town img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.p-town__frame {
  position: relative;
  width: 100%;
  background-color: #253B74;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.p-town__frame::-webkit-scrollbar {
  display: none;
}

.p-town__body {
  position: relative;
  margin-top: -37.4358974359%;
  width: 448.7179487179%;
  aspect-ratio: 1750/709;
  background-color: #253B74;
  overflow: hidden;
  transition-property: transform, opacity;
  transition-duration: 0.6s;
  transition-timing-function: ease-out;
}
.p-town__body.is-town-modal-open {
  transition-duration: 1.6s;
  transform: translateY(30%);
  opacity: 0;
}

.p-town__link {
  position: absolute;
  top: 22.0028208745%;
  left: 0.9142857143%;
  color: #fff;
  font-size: 3.0769230769vw;
  font-weight: 500;
  line-height: 1.5;
  z-index: var(--z-head);
}
@media (min-width: 64em) {
  .p-town__link {
    font-size: 13.7230769231px;
  }
}

.p-town__title {
  position: absolute;
  left: 1.1428571429%;
  top: 25.6699576869%;
  width: 20.2285714286%;
  z-index: var(--z-head);
}

.p-town__tutorial {
  position: absolute;
  left: 18.5142857143%;
  top: 21.7207334274%;
  width: 3.2%;
  cursor: pointer;
  z-index: var(--z-head);
}
@media (min-width: 64em) {
  .p-town__tutorial {
    transition: transform 0.3s ease;
  }
  .p-town__tutorial:hover {
    transform: scale(1.2);
  }
}

.p-town__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.p-town__layer.layer1 {
  z-index: var(--z-layer1);
}
.p-town__layer.layer2 {
  z-index: var(--z-layer2);
}
.p-town__layer.layer3 {
  z-index: var(--z-layer3);
}

.p-town__building-a-b-c {
  position: absolute;
  left: 2.7428571429%;
  top: 34.8377997179%;
  width: 16.6857142857%;
}

.p-town__building-f-g {
  position: absolute;
  left: 22.1714285714%;
  top: 65.4442877292%;
  width: 28.5714285714%;
}

.p-town__building-k-l {
  position: absolute;
  left: 74.7428571429%;
  top: 44.2877291961%;
  width: 23.3142857143%;
}

.p-town__ground-layer1 {
  position: absolute;
  left: 0%;
  top: 85.4724964739%;
  width: 109.4285714286%;
}

.p-town__candle-layer1-1 {
  position: absolute;
  left: 10.1714285714%;
  top: 84.485190409%;
  width: 26.1714285714%;
}

.p-town__candle-layer1-2 {
  position: absolute;
  left: 68.9714285714%;
  top: 86.4598025388%;
  width: 7.6%;
}

.p-town__tree-layer1-1 {
  position: absolute;
  left: 0%;
  top: 57.263751763%;
  width: 6.2857142857%;
}

.p-town__tree-layer1-2 {
  position: absolute;
  left: 41.8285714286%;
  top: 82.0874471086%;
  width: 2.5714285714%;
}

.p-town__footstep-layer1 {
  position: absolute;
  left: -0.9142857143%;
  top: 87.3060648801%;
  width: 9.4285714286%;
}

.p-town__person-layer1-1 {
  position: absolute;
  left: 1.0857142857%;
  top: 63.610719323%;
  width: 10.8571428571%;
}

.p-town__person-layer1-2 {
  position: absolute;
  left: 52.5714285714%;
  top: 54.3018335684%;
  width: 14.6285714286%;
}

.p-town__dog-layer1 {
  position: absolute;
  left: 14.8%;
  top: 85.3314527504%;
  width: 3.6%;
}

.p-town__reindeer-layer1 {
  position: absolute;
  left: 23.6571428571%;
  top: 87.3060648801%;
  width: 7.4285714286%;
}

.p-town__table-layer1 {
  position: absolute;
  left: 34.5714285714%;
  top: 88.4344146685%;
  width: 6.9714285714%;
}

.p-town__bike-layer1 {
  position: absolute;
  left: 82.6857142857%;
  top: 84.485190409%;
  width: 6.8571428571%;
}

.p-town__big-tree {
  position: absolute;
  left: 94.2857142857%;
  top: 20.5923836389%;
  width: 16.2285714286%;
}

.p-town__sign {
  position: absolute;
  left: 95.7714285714%;
  top: 70.3808180536%;
  width: 12.3428571429%;
}

.p-town__sign-text {
  position: absolute;
  left: 98.0571428571%;
  top: 81.5232722144%;
  width: 6.8%;
}

.p-town__building-d-e {
  position: absolute;
  left: 20.5142857143%;
  top: 15.7968970381%;
  width: 20.4571428571%;
}

.p-town__ground-layer2 {
  position: absolute;
  left: 0%;
  top: 58.8152327221%;
  width: 106%;
}

.p-town__building-h {
  position: absolute;
  left: 44.4%;
  top: 26.0930888575%;
  width: 15.3142857143%;
}

.p-town__building-i-j {
  position: absolute;
  left: 58.8571428571%;
  top: 16.9252468265%;
  width: 20.5714285714%;
}

.p-town__candle-layer2 {
  position: absolute;
  left: 20.2857142857%;
  top: 60.5077574048%;
  width: 18.7428571429%;
}

.p-town__tree-layer2-1 {
  position: absolute;
  left: 38.6285714286%;
  top: 42.5952045134%;
  width: 5.4285714286%;
}

.p-town__tree-layer2-2 {
  position: absolute;
  left: 77.1428571429%;
  top: 43.1593794076%;
  width: 3.8857142857%;
}

.p-town__footstep-layer2 {
  position: absolute;
  left: 57.9428571429%;
  top: 75.8815232722%;
  width: 6.8571428571%;
}

.p-town__person-layer2-1 {
  position: absolute;
  left: 28.4571428571%;
  top: 50.2115655853%;
  width: 8.1142857143%;
}

.p-town__person-layer2-2 {
  position: absolute;
  left: 40.4571428571%;
  top: 56.2764456982%;
  width: 9.1428571429%;
}

.p-town__person-layer2-3 {
  position: absolute;
  left: 60.7428571429%;
  top: 54.8660084626%;
  width: 10.4571428571%;
}

.p-town__person-layer2-4 {
  position: absolute;
  left: 84.6857142857%;
  top: 38.7870239774%;
  width: 11.4285714286%;
}

.p-town__star {
  position: absolute;
  left: 0%;
  top: 22.5669957687%;
  width: 102.9142857143%;
}
.p-town__star .star {
  animation: star 1.4s both infinite ease-in-out;
  transform-box: fill-box;
  transform-origin: center;
}
.p-town__star .star:nth-child(3n+1) {
  animation-delay: 0.3s;
}
.p-town__star .star:nth-child(3n+2) {
  animation-delay: 0.6s;
}

.p-town__back-building {
  position: absolute;
  left: 0%;
  top: 22.5669957687%;
  width: 98.0571428571%;
}

.p-town__ground-layer3 {
  position: absolute;
  left: 0%;
  top: 51.1988716502%;
  width: 106%;
}

.p-town__tree-layer3 {
  position: absolute;
  left: 100.4%;
  top: 30.7475317348%;
  width: 6.5714285714%;
}

.p-town__mission {
  position: relative;
  pointer-events: auto;
}
.p-town__mission img {
  position: relative;
}
.p-town__mission::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  content: "";
  background-image: url("/rewards/joyful_town/mission/images/mission_effect.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.p-town__mission.is-cleared.is-cleared::before {
  content: none;
}
.p-town__mission.A {
  position: absolute;
  left: 4.0571428571%;
  top: 47.6727785614%;
  width: 6.5714285714%;
}
.p-town__mission.A.is-cleared {
  position: absolute;
  left: 3.7142857143%;
  top: 46.4033850494%;
  width: 7.2571428571%;
}
.p-town__mission.A .p-town__mission-ribbon {
  transform: translate(-5%, 8.8235294118%);
}
.p-town__mission.B {
  position: absolute;
  left: 11.6571428571%;
  top: 47.6727785614%;
  width: 6.5714285714%;
}
.p-town__mission.B.is-cleared {
  position: absolute;
  left: 11.2571428571%;
  top: 46.6854724965%;
  width: 7.2571428571%;
}
.p-town__mission.C {
  position: absolute;
  left: 11.6571428571%;
  top: 67.9830747532%;
  width: 6.5714285714%;
}
.p-town__mission.C.is-cleared {
  position: absolute;
  left: 11.3142857143%;
  top: 66.8547249647%;
  width: 7.2571428571%;
}
.p-town__mission.C .p-town__mission-ribbon {
  transform: translate(-2.5%, 2.9411764706%);
}
.p-town__mission.D {
  position: absolute;
  left: 23.2%;
  top: 44.0056417489%;
  width: 6.6285714286%;
}
.p-town__mission.D.is-cleared {
  position: absolute;
  left: 22.2857142857%;
  top: 43.0183356841%;
  width: 7.8285714286%;
}
.p-town__mission.E {
  position: absolute;
  left: 32.3428571429%;
  top: 44.0056417489%;
  width: 6.6285714286%;
}
.p-town__mission.E.is-cleared {
  position: absolute;
  left: 32%;
  top: 43.1593794076%;
  width: 7.3142857143%;
}
.p-town__mission.E .p-town__mission-ribbon {
  transform: translate(-2.5%, 0);
}
.p-town__mission.F {
  position: absolute;
  left: 23.6571428571%;
  top: 75.0352609309%;
  width: 6.4%;
}
.p-town__mission.F.is-cleared {
  position: absolute;
  left: 23.2%;
  top: 74.3300423131%;
  width: 7.2571428571%;
}
.p-town__mission.F .p-town__mission-holly {
  transform: translateY(-50%);
}
.p-town__mission.F .p-town__mission-ribbon {
  transform: translate(-2.5%, -20.5882352941%);
}
.p-town__mission.G {
  position: absolute;
  left: 31.2571428571%;
  top: 75.0352609309%;
  width: 6.4%;
}
.p-town__mission.G.is-cleared {
  position: absolute;
  left: 30.8571428571%;
  top: 74.3300423131%;
  width: 7.2%;
}
.p-town__mission.G .p-town__mission-holly {
  transform: translateY(-50%);
}
.p-town__mission.G .p-town__mission-ribbon {
  transform: translate(-2.5%, -20.5882352941%);
}
.p-town__mission.H {
  position: absolute;
  left: 48.8%;
  top: 47.5317348378%;
  width: 6.8571428571%;
}
.p-town__mission.H.is-cleared {
  position: absolute;
  left: 48.2285714286%;
  top: 46.6854724965%;
  width: 7.8857142857%;
}
.p-town__mission.H .p-town__mission-holly {
  transform: translateY(-50%);
}
.p-town__mission.H .p-town__mission-ribbon {
  transform: translate(-2.5%, -20.5882352941%);
}
.p-town__mission.I {
  position: absolute;
  left: 59.4285714286%;
  top: 40.3385049365%;
  width: 7.6%;
}
.p-town__mission.I.is-cleared {
  position: absolute;
  left: 58.8571428571%;
  top: 38.6459802539%;
  width: 8.8%;
}
.p-town__mission.I .p-town__mission-text {
  padding-left: 0.7142857143em;
  white-space: nowrap;
}
.p-town__mission.I .p-town__mission-ribbon {
  transform: translate(-1.25%, 17.6470588235%);
}
.p-town__mission.J {
  position: absolute;
  left: 69.3714285714%;
  top: 46.1212976023%;
  width: 7.9428571429%;
}
.p-town__mission.J::before {
  background-image: url("/rewards/joyful_town/mission/images/mission_effect_rect.png");
}
.p-town__mission.J.is-cleared {
  position: absolute;
  left: 68.3428571429%;
  top: 44.4287729196%;
  width: 9.4857142857%;
}
.p-town__mission.J .p-town__mission-text {
  padding-block: 0;
}
.p-town__mission.J .p-town__mission-ribbon {
  transform: translate(5%, 2.9411764706%);
}
.p-town__mission.K {
  position: absolute;
  left: 78.0571428571%;
  top: 69.1114245416%;
  width: 7.2571428571%;
}
.p-town__mission.K.is-cleared {
  position: absolute;
  left: 77.3142857143%;
  top: 67.5599435825%;
  width: 8.7428571429%;
}
.p-town__mission.K .p-town__mission-ribbon {
  transform: translate(-2.5%, 17.6470588235%);
}
.p-town__mission.L {
  position: absolute;
  left: 87.6571428571%;
  top: 69.1114245416%;
  width: 7.2571428571%;
}
.p-town__mission.L.is-cleared {
  position: absolute;
  left: 86.9142857143%;
  top: 67.7009873061%;
  width: 8.7428571429%;
}
.p-town__mission.L .p-town__mission-ribbon {
  transform: translate(-2.5%, 17.6470588235%);
}

button.p-town__mission {
  cursor: pointer;
}

.p-town__mission-holly {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 7.6923076923vw;
  margin-inline: auto;
  transform: translateY(-35%);
}
@media (min-width: 64em) {
  .p-town__mission-holly {
    width: 34.3076923077px;
  }
}

.p-town__mission-text-wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.p-town__mission-code {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 2.5641025641vw;
  color: #1E3932;
  line-height: 3.5897435897vw;
  border-bottom: 1px solid;
}
@media (min-width: 64em) {
  .p-town__mission-code {
    font-size: 11.4358974359px;
    line-height: 16.0102564103px;
  }
}
.p-town__mission-code .lg {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 3.5897435897vw;
}
@media (min-width: 64em) {
  .p-town__mission-code .lg {
    font-size: 16.0102564103px;
  }
}

.p-town__mission-text {
  display: grid;
  place-items: center;
  min-height: 4.0714285714em;
  padding-block: 0.4285714286em;
  font-size: 3.5897435897vw;
  font-weight: 700;
  line-height: 1.3571428571;
  color: #1E3932;
  text-align: center;
}
@media (min-width: 64em) {
  .p-town__mission-text {
    font-size: 16.0102564103px;
  }
}

.p-town__mission-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 20.5128205128vw;
  margin-inline: auto;
  transform: translate(-1.25%, 2.9411764706%);
}
@media (min-width: 64em) {
  .p-town__mission-ribbon {
    width: 84.6256410256px;
  }
}

.p-town__mission-img-effect {
  position: absolute;
  inset: 0;
  margin: auto;
  animation: scene02Pulse 1.4s infinite linear both;
  pointer-events: none;
}
.p-town__mission-img-effect + .p-town__mission-img-effect {
  animation-delay: 0.7s;
}

.p-town__mission-img-effect-overray {
  position: absolute;
  inset: 0;
  margin: auto;
  animation: scene02PulseOverray 1.4s infinite linear both;
  pointer-events: none;
}
.p-town__mission-img-effect-overray + .p-town__mission-img-effect-overray {
  animation-delay: 0.7s;
}

.p-town-modal {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999;
  width: 100%;
  padding: 0;
  overflow: auto;
}
.p-town-modal img, .p-town-modal svg {
  width: 100%;
  height: auto;
}

.p-town-modal__backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(30, 57, 50, 0.8);
}

.p-town-modal__container {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 168.9743589744vw;
  padding-top: 8.2051282051%;
  padding-bottom: 28.2051282051%;
  margin-inline: auto;
  background-color: #24396B;
  overflow: hidden;
  background-image: url("/rewards/joyful_town/mission/images/town-modal_back-building.png"), url("/rewards/joyful_town/mission/images/town-modal_back-star.svg");
  background-position: bottom center, top 17px center;
  background-repeat: no-repeat, space;
  background-size: contain, cover;
}
@media (min-width: 64em) {
  .p-town-modal__container {
    width: 446px;
    min-height: 753.6256410256px;
    padding-top: 36.5948717949px;
    padding-bottom: 125.7948717949px;
  }
}

.p-town-modal__code {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 700;
  width: -moz-fit-content;
  width: fit-content;
  padding-inline: 2.3076923077%;
  padding-bottom: 0.5128205128%;
  margin-inline: auto;
  font-size: 6.1538461538vw;
  line-height: 1;
  color: #D2A04A;
  border-bottom: 0.0833333333em solid;
}
@media (min-width: 64em) {
  .p-town-modal__code {
    font-size: 27.4461538462px;
  }
}
.p-town-modal__code > .lg {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-family: inherit;
  font-size: 8.2051282051vw;
}
@media (min-width: 64em) {
  .p-town-modal__code > .lg {
    font-size: 36.5948717949px;
  }
}

.p-town-modal__title {
  margin-inline: 0;
  margin-top: 6.1538461538%;
  margin-bottom: 3.3333333333%;
  font-size: 8.2051282051vw;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  text-align: center;
}
@media (min-width: 64em) {
  .p-town-modal__title {
    font-size: 36.5948717949px;
  }
}

.p-town-modal__text {
  margin: 0 5.1282051282%;
  font-size: 3.5897435897vw;
  font-weight: 500;
  line-height: 1.5714285714;
  color: #fff;
  text-align: center;
}
@media (min-width: 64em) {
  .p-town-modal__text {
    font-size: 16.0102564103px;
  }
}
.p-town-modal__text + .p-town-modal__text {
  margin-top: 1em;
}

.p-town-modal__notes {
  box-sizing: border-box;
  width: -moz-fit-content;
  width: fit-content;
  padding-inline: 11.2820512821%;
  margin-inline: auto;
  margin-top: 6.6666666667%;
}

.p-town-modal__note {
  text-indent: -1em;
  padding-left: 1em;
  margin: 0;
  font-size: 3.0769230769vw;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  text-align: left;
}
@media (min-width: 64em) {
  .p-town-modal__note {
    font-size: 13.7230769231px;
  }
}
.p-town-modal__note a {
  text-decoration: underline;
}
@media (min-width: 64em) {
  .p-town-modal__note a:hover {
    text-decoration: none;
  }
}

.p-town-modal__button-wrapper {
  display: grid;
  gap: 4.1025641026vw;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 67.6923076923%;
  margin-inline: auto;
}
@media (min-width: 64em) {
  .p-town-modal__button-wrapper {
    gap: 16px;
  }
}

.p-town-modal__button {
  --text-color: #fff;
  --bg-color: #C70000;
  --border-color: #D2A04A;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.6em;
  align-items: center;
  width: 100%;
  padding: 0.65em 0.9em 0.65em 0.8em;
  font-size: 5.1282051282vw;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  color: var(--text-color);
  background-color: var(--bg-color);
  border-radius: 12px;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.4));
  box-sizing: border-box;
  cursor: pointer;
}
@media (min-width: 64em) {
  .p-town-modal__button {
    font-size: 22.8717948718px;
    transition-property: color, background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }
  .p-town-modal__button:hover {
    --text-color: #1E3932;
    --bg-color: #D2A04A;
    --border-color: #fff;
  }
}
.p-town-modal__button::before {
  content: "";
}
.p-town-modal__button::after {
  position: absolute;
  inset: 0;
  margin: 4px;
  content: "";
  border: 1px solid var(--border-color);
  border-radius: 8px;
  pointer-events: none;
}
@media (min-width: 64em) {
  .p-town-modal__button::after {
    transition: border 0.3s ease;
  }
}
.p-town-modal__button.is-copied {
  --text-color: #1E3932;
  --bg-color: #D2A04A;
  --border-color: #fff;
}
.p-town-modal__button.is-copied > .p-town-modal__button-window {
  display: none;
}
.p-town-modal__button > .p-town-modal__button-chevron {
  position: relative;
  justify-self: end;
  width: 0.45em;
}
.p-town-modal__button > .p-town-modal__button-window {
  position: relative;
  justify-self: end;
  width: 0.9em;
}

.p-town-modal__button-back {
  --text-color: #1E3932;
  --bg-color: #D2A04A;
  --border-color: #fff;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.8571428571em;
  align-items: center;
  width: 100%;
  padding-block: 1.2142857143em;
  padding-inline: 1.4285714286em;
  font-size: 3.5897435897vw;
  font-weight: 700;
  line-height: 1.5714285714;
  text-align: left;
  color: var(--text-color);
  background-color: var(--bg-color);
  border-radius: 12px;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.4));
  box-sizing: border-box;
  cursor: pointer;
}
@media (min-width: 64em) {
  .p-town-modal__button-back {
    font-size: 14px;
    transition-property: color, background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }
  .p-town-modal__button-back:hover {
    --text-color: #fff;
    --bg-color: #006241;
    --border-color: #D2A04A;
  }
}
.p-town-modal__button-back::before {
  content: "";
}
.p-town-modal__button-back::after {
  position: absolute;
  inset: 0;
  margin: 4px;
  content: "";
  border: 1px solid var(--border-color);
  border-radius: 8px;
  pointer-events: none;
}
@media (min-width: 64em) {
  .p-town-modal__button-back::after {
    transition: border 0.3s ease;
  }
}
.p-town-modal__button-back.is-reversed {
  --text-color: #fff;
  --bg-color: #006241;
  --border-color: #fff;
}
@media (min-width: 64em) {
  .p-town-modal__button-back.is-reversed:hover {
    --text-color: #1E3932;
    --bg-color: #D2A04A;
    --border-color: #fff;
  }
}
.p-town-modal__button-back > .p-town-modal__button-chevron {
  position: relative;
  justify-self: end;
  width: 0.45em;
}

.p-town-modal__close {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 600;
  position: absolute;
  top: 0;
  right: 3.5897435897%;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 3.5897435897%;
  font-size: 3.3333333333vw;
  line-height: 1.6923076923;
  color: #fff;
  cursor: pointer;
}
@media (min-width: 64em) {
  .p-town-modal__close {
    font-size: 14.8666666667px;
    transition: opacity 0.3s ease;
  }
  .p-town-modal__close:hover {
    opacity: 0.7;
  }
}

.p-town-modal__close-icon {
  position: relative;
  width: 2.6153846154em;
  aspect-ratio: 1;
}
.p-town-modal__close-icon::before, .p-town-modal__close-icon::after {
  position: absolute;
  inset: 0;
  width: 2.6153846154em;
  height: 0.1538461538em;
  margin: auto;
  content: "";
  background-color: currentColor;
}
.p-town-modal__close-icon::before {
  transform: rotate(45deg);
}
.p-town-modal__close-icon::after {
  transform: rotate(-45deg);
}

.p-town-modal__error {
  font-size: 4.1025641026vw;
  padding-top: 51.2820512821%;
  padding-bottom: 10.7692307692%;
  font-weight: 700;
  color: #fff;
  text-align: center;
}
@media (min-width: 64em) {
  .p-town-modal__error {
    font-size: 18.2974358974px;
  }
}

.p-town-modal__error-button {
  --text-color: #fff;
  --bg-color: #006241;
  --border-color: #D2A04A;
  position: relative;
  display: grid;
  grid-template-columns: 0.9em 1fr 0.9em;
  gap: 0.6em;
  align-items: center;
  width: 100%;
  padding: 0.65em 0.8em;
  font-size: 5.1282051282vw;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  color: var(--text-color);
  background-color: var(--bg-color);
  border-radius: 12px;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.4));
  box-sizing: border-box;
  cursor: pointer;
}
@media (min-width: 64em) {
  .p-town-modal__error-button {
    font-size: 22.8717948718px;
    transition-property: color, background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }
  .p-town-modal__error-button:hover {
    --text-color: #1E3932;
    --bg-color: #D2A04A;
    --border-color: #fff;
  }
}
.p-town-modal__error-button::before {
  content: "";
}
.p-town-modal__error-button::after {
  position: absolute;
  inset: 0;
  margin: 4px;
  content: "";
  border: 1px solid var(--border-color);
  border-radius: 8px;
  pointer-events: none;
}
@media (min-width: 64em) {
  .p-town-modal__error-button::after {
    transition: border 0.3s ease;
  }
}
.p-town-modal__error-button > .p-town-modal__error-button-chevron {
  position: relative;
  justify-self: center;
  width: 0.45em;
}

.p-town-modal__count {
  font-size: 4.1025641026vw;
  font-weight: 700;
  color: #fff;
  text-align: center;
}
@media (min-width: 64em) {
  .p-town-modal__count {
    font-size: 18.2974358974px;
  }
}

.p-town-modal__A-text {
  margin-top: 4.8717948718%;
  margin-bottom: 7.6923076923%;
}

.p-town-modal__A-link {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  margin-top: 7.1794871795%;
  font-size: 3.5897435897vw;
  font-weight: 500;
  line-height: 1.5714285714;
  color: #fff;
  text-decoration: underline;
}
@media (min-width: 64em) {
  .p-town-modal__A-link {
    font-size: 14px;
  }
  .p-town-modal__A-link:hover {
    text-decoration: none;
  }
}
.p-town-modal__A-link .p-town-modal__A-link-chevron {
  display: inline-block;
  width: 0.6428571429em;
  margin-left: 0.25em;
  vertical-align: middle;
  transform: translateY(-20%);
}

.p-town-modal__B-text {
  margin: 0 auto;
  font-size: 4.1025641026vw;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  text-align: center;
}
@media (min-width: 64em) {
  .p-town-modal__B-text {
    font-size: 16px;
  }
}

.p-town-modal__B-choices {
  display: grid;
  width: 67.6923076923%;
  margin: 6.4102564103% auto 0;
}

.p-town-modal__B-choice + .p-town-modal__B-choice {
  margin-top: 6.0606060606%;
}

.p-town-modal__B-choice-button {
  --text-color: #fff;
  --bg-color: #C70000;
  --border-color: #D2A04A;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6em;
  align-items: center;
  width: 100%;
  padding: 0.85em 1em 0.85em 1.4em;
  font-size: 5.1282051282vw;
  font-weight: 700;
  text-align: left;
  line-height: 1.1;
  color: var(--text-color);
  background-color: var(--bg-color);
  border-radius: 12px;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.4));
  box-sizing: border-box;
  cursor: pointer;
}
@media (min-width: 64em) {
  .p-town-modal__B-choice-button {
    font-size: 22.8717948718px;
    transition-property: color, background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }
  .p-town-modal__B-choice-button:hover {
    --text-color: #1E3932;
    --bg-color: #D2A04A;
    --border-color: #fff;
  }
}
.p-town-modal__B-choice-button::after {
  position: absolute;
  inset: 0;
  margin: 4px;
  content: "";
  border: 1px solid var(--border-color);
  border-radius: 8px;
  pointer-events: none;
}
@media (min-width: 64em) {
  .p-town-modal__B-choice-button::after {
    transition: border 0.3s ease;
  }
}
.p-town-modal__B-choice-button > .p-town-modal__B-choice-button-chevron {
  position: relative;
  justify-self: center;
  width: 0.45em;
}

.p-town-modal__B-correct {
  padding-bottom: 14.8717948718%;
}

.p-town-modal__B-correct-title {
  padding-top: 12.3076923077%;
  padding-bottom: 9.2307692308%;
  padding-left: 0.5em;
  font-size: 13.8461538462vw;
  font-weight: 700;
  line-height: 1.5;
  color: #FFEEA2;
  text-align: center;
  filter: drop-shadow(0 0 24px #FAD346);
}
@media (min-width: 64em) {
  .p-town-modal__B-correct-title {
    font-size: 54px;
  }
}

.p-town-modal__B-wrong {
  padding-top: 12.3076923077%;
  padding-bottom: 9.2307692308%;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}
.p-town-modal__B-wrong .lg {
  display: block;
  padding-left: 0.5em;
  font-size: 13.8461538462vw;
  font-weight: 700;
}
@media (min-width: 64em) {
  .p-town-modal__B-wrong .lg {
    font-size: 54px;
  }
}
.p-town-modal__B-wrong .sm {
  display: block;
  margin-top: -0.5em;
  font-size: 8.2051282051vw;
  font-weight: 700;
}
@media (min-width: 64em) {
  .p-town-modal__B-wrong .sm {
    font-size: 32px;
  }
}

.p-town-modal__C-sns {
  display: flex;
  justify-content: center;
  margin-top: 10.7692307692%;
  margin-bottom: 12.3076923077%;
}

.p-town-modal__C-sns-link {
  display: grid;
  width: 16.4102564103%;
}
@media (min-width: 64em) {
  .p-town-modal__C-sns-link {
    transition: opacity 0.3s ease;
  }
  .p-town-modal__C-sns-link:hover {
    opacity: 0.7;
  }
}
.p-town-modal__C-sns-link + .p-town-modal__C-sns-link {
  margin-left: 9.2307692308%;
}
.p-town-modal__C-sns-link.is-disabled {
  pointer-events: none;
}

.p-town-modal__D-img {
  width: 32.3076923077%;
  margin-inline: auto;
  margin-top: 6.4102564103%;
  margin-bottom: 5.1282051282%;
  transform: translateX(-5.5555555556%);
}

.p-town-modal__E-img {
  width: 35.641025641%;
  margin-inline: auto;
  margin-top: 2.0512820513%;
  margin-bottom: 3.5897435897%;
  transform: translateX(9.3525179856%);
}

.p-town-modal__F-img {
  width: 54.1025641026%;
  margin-inline: auto;
  margin-top: 2.5641025641%;
}

.p-town-modal__G-img {
  width: 41.7948717949%;
  margin-inline: auto;
  margin-top: 7.6923076923%;
  margin-bottom: 6.4102564103%;
}

.p-town-modal__H-img {
  width: 38.2051282051%;
  margin-inline: auto;
  margin-top: -1.7948717949%;
  margin-bottom: 5.641025641%;
  transform: translateX(9.3959731544%);
}

.p-town-modal__I-img {
  width: 57.4358974359%;
  margin-inline: auto;
  margin-top: 3.0769230769%;
  margin-bottom: 4.1025641026%;
  transform: translateX(7.1428571429%);
}

.p-town-modal__J-img {
  width: 53.8461538462%;
  margin-inline: auto;
  margin-top: 13.3333333333%;
  margin-bottom: 10.7692307692%;
}

.p-town-modal__K-img {
  width: 57.9487179487%;
  margin-inline: auto;
  margin-top: 6.4102564103%;
  margin-bottom: 4.358974359%;
  transform: translateX(4.4247787611%);
}

.p-town-modal__L-img {
  width: 43.3333333333%;
  margin-inline: auto;
  margin-top: 5.3846153846%;
  margin-bottom: 5.3846153846%;
  transform: translateX(2.3668639053%);
}

.p-status {
  position: absolute;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  width: 100%;
  max-height: 100%;
  z-index: 50;
  background-color: #C70000;
  transition: transform 0.4s ease-out 0.4s;
}
.p-status:has(.p-status__disclosure-details[aria-hidden=true]).is-scrolling {
  transform: translateY(100.1%);
  transition: transform 0.4s ease-out;
}
.p-status img, .p-status svg {
  display: block;
  width: 100%;
  height: auto;
}

.p-status__head {
  display: flex;
  align-items: center;
}

.p-status__chevron {
  box-sizing: content-box;
  display: block;
  padding-block: 0.7692307692%;
  aspect-ratio: 20/13;
  width: 5.1282051282%;
  margin-inline: auto;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIxMyIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDIwIDEzIj48cGF0aCBzdHJva2U9IiNEMkEwNEEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzIiBkPSJtMTggMi04IDgtOC04Ii8+PC9zdmc+");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}
@media (min-width: 64em) {
  .p-status__chevron {
    transition: transform 0.3s ease;
  }
  .p-status__chevron:hover {
    transform: rotate(-180deg);
  }
}

.p-status__count {
  flex-shrink: 0;
  display: grid;
  justify-items: center;
  padding-right: 3.0769230769%;
  padding-left: 1.7948717949%;
}

.p-status__count-title {
  font-size: 3.0769230769vw;
  line-height: 1.3333333333;
  margin: 0 0 0.2em;
  font-weight: 700;
  color: #fff;
  text-align: center;
}
@media (min-width: 64em) {
  .p-status__count-title {
    font-size: 13.7230769231px;
  }
}
@media (min-width: 64em) {
  .p-status__count-title {
    font-size: 13.7230769231px;
  }
}

.p-status__count-body {
  display: flex;
  align-items: flex-end;
  line-height: 1;
  color: #fff;
}
.p-status__count-body > .count {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 4.1025641026vw;
  color: #D2A04A;
}
@media (min-width: 64em) {
  .p-status__count-body > .count {
    font-size: 18.2974358974px;
  }
}
.p-status__count-body > .slash {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 2.8205128205vw;
  margin-inline: 0.3em;
}
@media (min-width: 64em) {
  .p-status__count-body > .slash {
    font-size: 12.5794871795px;
  }
}
.p-status__count-body > .total {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 3.0769230769vw;
}
@media (min-width: 64em) {
  .p-status__count-body > .total {
    font-size: 13.7230769231px;
  }
}

.p-status__progress {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-start;
  margin-top: 1.7948717949%;
  gap: 2.5641025641vw;
}
@media (min-width: 64em) {
  .p-status__progress {
    gap: 11.4358974359px;
  }
}

.p-status__progress-item {
  position: relative;
  display: grid;
  grid-template-rows: 3.0769230769vw auto;
  gap: 0.5128205128vw;
  align-items: center;
  width: 14.8936170213%;
}
@media (min-width: 64em) {
  .p-status__progress-item {
    grid-template-rows: 13.7230769231px auto;
    gap: 2.2871794872px;
  }
}
.p-status__progress-item.is-cleared .p-status__progress-circle {
  background-color: #D2A04A;
}

.p-status__progress-circle {
  justify-self: end;
  width: 28.5714285714%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #fff;
  transform: translateX(50%);
}

.p-status__progress-lock {
  justify-self: end;
  width: 60.7142857143%;
  transform: translateX(50%) translateY(-11.1111111111%);
}

.p-status__progress-text {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 3.0769230769vw;
  line-height: 1.3333333333;
  color: #fff;
}
@media (min-width: 64em) {
  .p-status__progress-text {
    font-size: 13.7230769231px;
  }
}

.p-status__progress-bar {
  --goal: 20;
  --current: 0;
  position: absolute;
  right: 0;
  left: 0;
  display: flex;
  width: 95.7446808511%;
  height: 0.5128205128vw;
  margin-top: 2.6595744681%;
}
@media (min-width: 64em) {
  .p-status__progress-bar {
    height: 2.2871794872px;
  }
}
.p-status__progress-bar::after {
  flex: 1;
  content: "";
  background-color: #1E3932;
}

.p-status__progress-bar-fill {
  width: calc(var(--current) / var(--goal) * 100%);
  content: "";
  background-color: #D2A04A;
}

.p-status__disclosure-btn {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 17.4358974359%;
  padding-top: 2.0512820513%;
  padding-bottom: 2.5641025641%;
  margin-left: 2.0512820513%;
  font-size: 2.5641025641vw;
  line-height: 1;
  color: #fff;
  background-color: #006241;
}
@media (min-width: 64em) {
  .p-status__disclosure-btn {
    font-size: 11.4358974359px;
  }
}
.p-status__disclosure-btn .close {
  display: none;
}
.p-status__disclosure-btn[aria-expanded=true] .open {
  display: none;
}
.p-status__disclosure-btn[aria-expanded=true] .close {
  display: block;
}
.p-status__disclosure-btn[aria-expanded=true] .p-status__disclosure-btn-icon::after {
  transform: rotate(0deg);
}

.p-status__disclosure-btn-icon {
  position: relative;
  width: 20.5882352941%;
  aspect-ratio: 1;
  margin-top: 8.8235294118%;
}
.p-status__disclosure-btn-icon::before, .p-status__disclosure-btn-icon::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 0.2em;
  margin: auto;
  content: "";
  background-color: currentColor;
}
.p-status__disclosure-btn-icon::after {
  transform: rotate(-90deg);
  transition: transform 0.5s ease;
}

.p-status__disclosure-details {
  display: grid;
  grid-template-rows: 1fr;
}
.p-status__disclosure-details[aria-hidden=true] {
  display: block;
}

.p-status__detail {
  position: relative;
  min-height: 0;
  padding-top: 0.5128205128%;
}
.p-status__detail::before {
  position: absolute;
  z-index: 1;
  width: 100%;
  padding-top: 3.5897435897%;
  content: "";
  background-image: linear-gradient(180deg, rgb(199, 0, 0) 0%, rgba(199, 0, 0, 0) 100%);
  pointer-events: none;
  transform: translateY(-1px);
}

.p-status__detail-inner {
  max-height: 100%;
  padding-top: 3.5897435897%;
  overflow: auto;
}

.p-status__detail-body {
  padding-bottom: 7.1794871795%;
}

.p-status__detail-list {
  padding-inline: 5.1282051282%;
}

.p-status__detail-item {
  position: relative;
  display: grid;
}
.p-status__detail-item + .p-status__detail-item {
  margin-top: 2.2857142857%;
}
.p-status__detail-item.is-locked .p-status__detail-item-inner {
  opacity: 0.45;
}
.p-status__detail-item.is-cleared .p-status__detail-item-inner {
  background-color: #FFFAE2;
}
.p-status__detail-item.is-cleared .p-status__detail-item-inner::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 12%;
  aspect-ratio: 1;
  content: "";
  background-color: #EF3340;
  clip-path: polygon(14% 0, 48% 0, 100% 52%, 100% 86%);
}
.p-status__detail-item.is-cleared .p-status__detail-item-inner::after {
  position: absolute;
  width: 12.5714285714%;
  top: 0;
  right: -1.4285714286%;
  margin-top: 1.1428571429%;
  aspect-ratio: 29/17;
  content: "";
  background-image: url("/rewards/joyful_town/mission/images/ribbon.svg");
  background-size: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
  transform: rotate(45deg);
}

.p-status__detail-item-inner {
  display: grid;
  grid-template-columns: 1fr 27.4285714286%;
  color: #1E3932;
  background-color: #fff;
  border-radius: 12px;
}

.p-status__detail-mission {
  padding: 6.2992125984%;
  padding-top: 5.5118110236%;
  padding-right: 5.5118110236%;
}

.p-status__detail-mission-head {
  margin: 0;
}

.p-status__detail-mission-stage {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 600;
  display: block;
  font-size: 5.1282051282vw;
  line-height: 1;
  color: #D2A04A;
}
@media (min-width: 64em) {
  .p-status__detail-mission-stage {
    font-size: 20px;
  }
}

.p-status__detail-mission-text {
  display: block;
  margin-top: 5.3571428571%;
  font-size: 3.5897435897vw;
  font-weight: 700;
  line-height: 1.5714285714;
}
@media (min-width: 64em) {
  .p-status__detail-mission-text {
    font-size: 14px;
  }
}

.p-status__detail-mission-number {
  margin-top: 4.4642857143%;
}

.p-status__detail-mission-number-body {
  display: flex;
  align-items: flex-end;
  font-size: 3.8461538462vw;
  line-height: 1;
  gap: 0.2em;
}
@media (min-width: 64em) {
  .p-status__detail-mission-number-body {
    font-size: 15px;
  }
}

.p-status__detail-mission-current {
  font-weight: 700;
}

.p-status__detail-mission-number-slash {
  width: 10px;
  height: 13px;
  background-color: currentColor;
  clip-path: polygon(80% 0, 100% 0%, 20% 100%, 0% 100%);
}

.p-status__detail-mission-goal {
  font-size: 3.3333333333vw;
  font-weight: 500;
}
@media (min-width: 64em) {
  .p-status__detail-mission-goal {
    font-size: 13px;
  }
}

.p-status__detail-mission-lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 4%;
}

.p-status__detail-mission-lock-icon {
  flex-shrink: 0;
  width: 6.2857142857%;
}

.p-status__detail-mission-lock-text {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 700;
  padding-top: 1.7857142857%;
  font-size: 5.1282051282vw;
  line-height: 1;
  color: #fff;
}
@media (min-width: 64em) {
  .p-status__detail-mission-lock-text {
    font-size: 20px;
  }
}

.p-status__detail-mission-clear {
  font-size: 3.8461538462vw;
  font-weight: 700;
  line-height: 1;
  color: #D2A04A;
}
@media (min-width: 64em) {
  .p-status__detail-mission-clear {
    font-size: 15px;
  }
}

.p-status__detail-mission-bar {
  --goal: 1;
  --current: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--goal), 1fr);
  height: 2.5641025641vw;
  margin-top: 3.5714285714%;
  border-radius: 9999px;
  overflow: hidden;
}
@media (min-width: 64em) {
  .p-status__detail-mission-bar {
    height: 10px;
  }
}
.p-status__detail-mission-bar::after {
  grid-column: calc(var(--current) + 1)/-1;
  content: "";
  background-color: #1E3932;
}

.p-status__detail-mission-bar-fill {
  grid-column: span var(--current);
  content: "";
  background-color: #D2A04A;
}

.p-status__detail-reward {
  display: grid;
  align-content: center;
  align-items: center;
  gap: 4.1025641026vw;
  background-image: repeating-linear-gradient(to bottom, #006241 0 4px, transparent 4px 8px);
  background-position: left center;
  background-size: 1px 100%;
  background-repeat: no-repeat;
}
@media (min-width: 64em) {
  .p-status__detail-reward {
    gap: 16px;
  }
}

.p-status__detail-reward-star {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}

.p-status__detail-reward-star-icon {
  width: 33.3333333333%;
}

.p-status__detail-reward-number {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 4.6153846154vw;
  line-height: 1.2;
}
@media (min-width: 64em) {
  .p-status__detail-reward-number {
    font-size: 18px;
  }
}

.p-status__detail-reward-ticket {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}

.p-status__detail-reward-ticket-icon {
  width: 36.4583333333%;
  margin-right: 4.1666666667%;
}

.p-status__detail-reward-present {
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-status__detail-reward-present-img {
  flex-shrink: 0;
  width: 19.7916666667%;
  margin-right: 8.3333333333%;
}

.p-status__detail-reward-present-text {
  font-size: 2.5641025641vw;
  font-weight: 700;
  line-height: 1.2;
}
@media (min-width: 64em) {
  .p-status__detail-reward-present-text {
    font-size: 10px;
  }
}
.p-status__detail-reward-present-text > .lg {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 700;
  display: block;
  font-size: 3.5897435897vw;
}
@media (min-width: 64em) {
  .p-status__detail-reward-present-text > .lg {
    font-size: 14px;
  }
}

.p-status__detail-entry {
  width: 83.9285714286%;
  margin-top: 5.3571428571%;
}

.p-status__detail-link {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  margin-top: 7.1794871795%;
  font-size: 3.5897435897vw;
  font-weight: 700;
  line-height: 1.5714285714;
  color: #fff;
  text-decoration: underline;
}
@media (min-width: 64em) {
  .p-status__detail-link {
    font-size: 14px;
  }
  .p-status__detail-link:hover {
    text-decoration: none;
  }
}

svg.p-status__detail-link-chevron {
  display: inline-block;
  width: 0.6428571429em;
  margin-left: 0.25em;
  vertical-align: middle;
  transform: translateY(-20%);
}

.p-status__detail-lead {
  width: 89.7435897436%;
  padding-top: 1.5384615385%;
  padding-bottom: 2.0512820513%;
  margin-inline: auto;
  margin-bottom: 2.0512820513%;
  color: #fff;
  border: 0.2564102564vw solid #fff;
  border-radius: 12px;
}
@media (min-width: 64em) {
  .p-status__detail-lead {
    border: 1px solid #fff;
  }
}

.p-status__detail-lead-body {
  margin: 0;
  font-size: 3.3333333333vw;
  font-weight: 700;
  line-height: 1.6153846154;
  text-align: center;
}
@media (min-width: 64em) {
  .p-status__detail-lead-body {
    font-size: 13px;
  }
}

.p-status__detail-lead-note {
  margin: 0;
  font-size: 2.5641025641vw;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
@media (min-width: 64em) {
  .p-status__detail-lead-note {
    font-size: 10px;
  }
}

.p-tutorial {
  --z-bg: 1;
  --z-content: 5;
  --z-footer: 10;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000000;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
}
.p-tutorial img, .p-tutorial svg {
  width: 100%;
  height: auto;
}

.p-tutorial__container {
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 390/659;
  margin: auto;
  overflow: hidden;
}
@media (min-width: 64em) {
  .p-tutorial__container {
    width: 446px;
  }
}

.p-tutorial__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
}
.p-tutorial__bg::after {
  position: absolute;
  inset: 0;
  content: "";
  background-color: rgba(30, 57, 50, 0.8);
}
.p-tutorial__bg img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.p-tutorial__content {
  position: absolute;
  inset: 0;
  z-index: var(--z-content);
  color: #fff;
  padding-top: 15.3846153846%;
}

.p-tutorial__title {
  margin: 0;
  color: #fff;
  text-align: center;
}

.p-tutorial__title-en {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 700;
  display: block;
  font-size: 4.6153846154vw;
  line-height: 1;
}
@media (min-width: 64em) {
  .p-tutorial__title-en {
    font-size: 18px;
  }
}

.p-tutorial__title-ja {
  display: block;
  font-size: 8.2051282051vw;
  line-height: 1;
  font-weight: 700;
  margin-top: 3.5897435897%;
}
@media (min-width: 64em) {
  .p-tutorial__title-ja {
    font-size: 32px;
  }
}

.p-tutorial__skip {
  position: absolute;
  top: 0;
  right: 4.6153846154%;
  width: 14.8717948718%;
  margin-top: 6.1538461538%;
  cursor: pointer;
}

.p-tutorial__footer {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: var(--z-footer);
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto 1fr;
  padding: 3.3333333333% 6.1538461538%;
  margin-inline: auto;
  color: #fff;
  background-color: #C70000;
}

.p-tutorial__prev {
  font-size: 4.6153846154vw;
  display: flex;
  align-items: center;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}
@media (min-width: 64em) {
  .p-tutorial__prev {
    font-size: 18px;
  }
}
.p-tutorial__prev::before {
  display: block;
  width: 0.5em;
  aspect-ratio: 9/15;
  margin-right: 0.5em;
  content: "";
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjE1IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgOSAxNSI+PHBhdGggc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik04IDEgMS41IDcuNSA4IDE0Ii8+PC9zdmc+");
  background-size: contain;
}

.p-tutorial__next {
  font-size: 4.6153846154vw;
  display: flex;
  align-items: center;
  justify-self: end;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}
@media (min-width: 64em) {
  .p-tutorial__next {
    font-size: 18px;
  }
}
.p-tutorial__next::after {
  display: block;
  width: 0.5em;
  aspect-ratio: 9/15;
  margin-left: 0.5em;
  content: "";
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjE1IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgOSAxNSI+PHBhdGggc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIGQ9Im0xIDEgNi41IDYuNUwxIDE0Ii8+PC9zdmc+");
  background-size: contain;
}

.p-tutorial__pager {
  display: flex;
  align-items: flex-end;
  text-align: center;
  grid-column: 2;
  transform: translateX(-8%);
}

.p-tutorial__pager-current {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 700;
  width: 1em;
  font-size: 5.641025641vw;
  color: #D2A04A;
}
@media (min-width: 64em) {
  .p-tutorial__pager-current {
    font-size: 22px;
  }
}

.p-tutorial__pager-slash {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 4.1025641026vw;
  margin-right: 0.5em;
  margin-left: 0.3em;
}
@media (min-width: 64em) {
  .p-tutorial__pager-slash {
    font-size: 16px;
  }
}

.p-tutorial__pager-total {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 4.1025641026vw;
}
@media (min-width: 64em) {
  .p-tutorial__pager-total {
    font-size: 16px;
  }
}

.p-tutorial__img-effect {
  position: absolute;
  inset: 0;
  margin: auto;
  animation: pulse 1.4s infinite linear both;
  pointer-events: none;
}
.p-tutorial__img-effect + .p-tutorial__img-effect {
  animation-delay: 0.7s;
}

.p-tutorial__img-effect-overray {
  position: absolute;
  inset: 0;
  margin: auto;
  animation: pulseOverray 1.4s infinite linear both;
  pointer-events: none;
}
.p-tutorial__img-effect-overray + .p-tutorial__img-effect-overray {
  animation-delay: 0.7s;
}

.p-tutorial__fukidasi {
  color: #006241;
  background-color: #fff;
  border-radius: 5px;
  animation: fadeIn 0.8s ease-out 0.4s both;
}
.p-tutorial__fukidasi::before {
  position: absolute;
  bottom: calc(100% - 1px);
  width: 6.1538461538vw;
  aspect-ratio: 24/18;
  content: "";
  background-color: #fff;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
@media (min-width: 64em) {
  .p-tutorial__fukidasi::before {
    width: 24px;
  }
}

.p-tutorial__scene-01 {
  position: relative;
  margin-top: -4.1025641026%;
  animation: fadeUp 0.4s ease-out;
}

.p-tutorial__scene-01-bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 94.8717948718%;
  margin-inline: auto;
  transform: translateX(-2.4324324324%);
}

.p-tutorial__scene-01-body {
  position: relative;
  padding-top: 28.2051282051%;
}

.p-tutorial__scene-01-title {
  margin: 0;
  line-height: 1.7;
  color: #C70000;
  text-align: center;
}
.p-tutorial__scene-01-title .line1 {
  display: block;
  font-size: 6.6666666667vw;
  font-weight: 700;
}
@media (min-width: 64em) {
  .p-tutorial__scene-01-title .line1 {
    font-size: 29.7333333333px;
  }
}
.p-tutorial__scene-01-title .line2 {
  display: block;
  margin-top: -0.4347826087em;
  font-size: 5.8974358974vw;
  font-weight: 700;
}
@media (min-width: 64em) {
  .p-tutorial__scene-01-title .line2 {
    font-size: 26.3025641026px;
  }
}

.p-tutorial__scene-01-text {
  margin: 0;
  margin-top: 8.7179487179%;
  font-size: 4.1025641026vw;
  font-weight: 700;
  line-height: 2.125;
  text-align: center;
  color: #006241;
}
@media (min-width: 64em) {
  .p-tutorial__scene-01-text {
    font-size: 18.2974358974px;
  }
}
.p-tutorial__scene-01-text + .p-tutorial__scene-01-text {
  margin-top: 1.1em;
}

.p-tutorial__scene-02-img {
  position: absolute;
  left: 46.9230769231%;
  top: 30.1972685888%;
  width: 40%;
}
.p-tutorial__scene-02-img .p-tutorial__img-effect, .p-tutorial__scene-02-img .p-tutorial__img-effect-overray {
  width: 74.358974359%;
  aspect-ratio: 116/122;
}
.p-tutorial__scene-02-img .p-tutorial__img-effect {
  animation-name: scene02Pulse;
}
.p-tutorial__scene-02-img .p-tutorial__img-effect-overray {
  animation-name: scene02PulseOverray;
}

.p-tutorial__scene-02-tap {
  position: absolute;
  left: 72.0512820513%;
  top: 45.5235204856%;
  width: 14.8717948718%;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

.p-tutorial__scene-02-fukidasi {
  position: absolute;
  left: 11.5384615385%;
  top: 57.3596358118%;
  width: 76.9230769231%;
  padding-block: 4.358974359%;
  font-size: 3.5897435897vw;
  line-height: 6.1538461538vw;
  font-weight: 500;
  text-align: center;
}
@media (min-width: 64em) {
  .p-tutorial__scene-02-fukidasi {
    font-size: 14px;
    line-height: 24px;
  }
}
.p-tutorial__scene-02-fukidasi::before {
  left: 68%;
}
.p-tutorial__scene-02-fukidasi > .lg {
  font-size: 4.358974359vw;
  font-weight: 700;
}
@media (min-width: 64em) {
  .p-tutorial__scene-02-fukidasi > .lg {
    font-size: 17px;
  }
}

.p-tutorial__scene-03 .p-tutorial__img-effect {
  animation-name: scene03Pulse;
}
.p-tutorial__scene-03 .p-tutorial__img-effect-overray {
  animation-name: scene03PulseOverray;
}

.p-tutorial__scene-03-img {
  position: absolute;
  left: 60%;
  top: 29.8937784522%;
  width: 13.8461538462%;
}

.p-tutorial__scene-03-fukidasi {
  position: absolute;
  left: 4.6153846154%;
  top: 45.5235204856%;
  width: 90.7692307692%;
  padding-top: 4.8717948718%;
  padding-bottom: 6.1538461538%;
}
.p-tutorial__scene-03-fukidasi::before {
  left: 64.9717514124%;
}

.p-tutorial__scene-03-text {
  margin: 0;
  font-size: 3.5897435897vw;
  line-height: 5.641025641vw;
  font-weight: 500;
  text-align: center;
}
@media (min-width: 64em) {
  .p-tutorial__scene-03-text {
    font-size: 14px;
    line-height: 22px;
  }
}
.p-tutorial__scene-03-text > .lg {
  font-size: 3.8461538462vw;
  font-weight: 700;
}
@media (min-width: 64em) {
  .p-tutorial__scene-03-text > .lg {
    font-size: 15px;
  }
}

.p-tutorial__scene-03-fukidasi-img {
  width: 61.2994350282%;
  margin-inline: auto;
  margin-top: 5.0847457627%;
}

.p-tutorial__scene-04 .p-tutorial__img-effect {
  animation-name: scene04Pulse;
}
.p-tutorial__scene-04 .p-tutorial__img-effect-overray {
  animation-name: scene04PulseOverray;
}

.p-tutorial__scene-04-img {
  position: absolute;
  left: 3.8461538462%;
  top: 29.1350531108%;
  width: 92.3076923077%;
}

.p-tutorial__scene-04-fukidasi {
  position: absolute;
  left: 10.7692307692%;
  top: 53.2625189681%;
  width: 78.4615384615%;
  padding-block: 4.358974359%;
}
.p-tutorial__scene-04-fukidasi::before {
  right: 0;
  left: 0;
  margin-inline: auto;
}

.p-tutorial__scene-04-text {
  margin: 0;
  font-size: 3.5897435897vw;
  line-height: 6.1538461538vw;
  font-weight: 500;
  text-align: center;
}
@media (min-width: 64em) {
  .p-tutorial__scene-04-text {
    font-size: 14px;
    line-height: 24px;
  }
}
.p-tutorial__scene-04-text > .lg {
  font-size: 4.358974359vw;
  font-weight: 700;
}
@media (min-width: 64em) {
  .p-tutorial__scene-04-text > .lg {
    font-size: 17px;
  }
}
.p-tutorial__scene-04-text > .sm {
  font-size: 0.8571428571em;
  margin-inline: -0.5em;
}
.p-tutorial__scene-04-text + .p-tutorial__scene-04-text {
  margin-top: 1em;
}

.p-tutorial__scene-04-note {
  margin: 0;
  margin-top: 1em;
  font-size: 3.0769230769vw;
  font-weight: 500;
  text-align: center;
  line-height: 1.3333333333;
}
@media (min-width: 64em) {
  .p-tutorial__scene-04-note {
    font-size: 12px;
  }
}

.p-tutorial__scene-05-img {
  position: absolute;
  left: 67.9487179487%;
  top: 31.7147192716%;
  width: 28.7179487179%;
}

.p-tutorial__scene-05-fukidasi {
  position: absolute;
  left: 3.3333333333%;
  top: 51.2898330804%;
  width: 93.3333333333%;
  padding-block: 4.358974359%;
}
.p-tutorial__scene-05-fukidasi::before {
  left: 81.3186813187%;
  margin-inline: auto;
}

.p-tutorial__scene-05-text {
  margin: 0;
  font-size: 3.5897435897vw;
  line-height: 6.1538461538vw;
  font-weight: 500;
  text-align: center;
}
@media (min-width: 64em) {
  .p-tutorial__scene-05-text {
    font-size: 14px;
    line-height: 24px;
  }
}
.p-tutorial__scene-05-text > .lg {
  font-size: 4.358974359vw;
  font-weight: 700;
}
@media (min-width: 64em) {
  .p-tutorial__scene-05-text > .lg {
    font-size: 17px;
  }
}
.p-tutorial__scene-05-text + .p-tutorial__scene-05-text {
  margin-top: 1em;
}

.p-tutorial__scene-06-fukidasi {
  position: absolute;
  left: 20%;
  top: 5.6145675266%;
  width: 60.2564102564%;
  padding-block: 4.8717948718%;
  font-size: 3.8461538462vw;
  line-height: 5.641025641vw;
  font-weight: 700;
  text-align: center;
}
@media (min-width: 64em) {
  .p-tutorial__scene-06-fukidasi {
    font-size: 15px;
    line-height: 22px;
  }
}
.p-tutorial__scene-06-fukidasi::before {
  top: calc(100% - 1px);
  right: 0;
  bottom: auto;
  left: 0;
  margin-inline: auto;
  transform: rotate(180deg);
}

.p-tutorial__scene-06-panel {
  position: absolute;
  left: 5.1282051282%;
  top: 20.6373292868%;
  width: 89.7435897436%;
  box-sizing: border-box;
  padding-top: 7.1794871795%;
  aspect-ratio: 350/460;
  background-image: url("/rewards/joyful_town/mission/images/tutorial_scene-06_panel_bg.svg");
  background-size: contain;
}
.p-tutorial__scene-06-panel .p-town-modal__code {
  padding-inline: 2.5714285714%;
  padding-bottom: 0.5714285714%;
}
.p-tutorial__scene-06-panel .p-town-modal__title {
  margin-top: 6.8571428571%;
  margin-bottom: 3.7142857143%;
}
.p-tutorial__scene-06-panel .p-town-modal__A-text {
  margin-top: 3.4285714286%;
  margin-bottom: 8.5714285714%;
}

.p-tutorial__scene-06-button {
  --text-color: #fff;
  --bg-color: #006241;
  --border-color: #D2A04A;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.6em;
  align-items: center;
  width: 100%;
  padding: 0.65em 0.9em 0.65em 0.8em;
  font-size: 5.1282051282vw;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  color: var(--text-color);
  background-color: var(--bg-color);
  border-radius: 12px;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.4));
  box-sizing: border-box;
  cursor: pointer;
}
@media (min-width: 64em) {
  .p-tutorial__scene-06-button {
    font-size: 20px;
    transition-property: color, background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }
  .p-tutorial__scene-06-button:hover {
    --text-color: #1E3932;
    --bg-color: #D2A04A;
    --border-color: #fff;
  }
}
.p-tutorial__scene-06-button::before {
  content: "";
}
.p-tutorial__scene-06-button::after {
  position: absolute;
  inset: 0;
  margin: 4px;
  content: "";
  border: 1px solid var(--border-color);
  border-radius: 8px;
  pointer-events: none;
}
@media (min-width: 64em) {
  .p-tutorial__scene-06-button::after {
    transition: border 0.3s ease;
  }
}
.p-tutorial__scene-06-button > .p-tutorial__scene-06-button-chevron {
  position: relative;
  justify-self: end;
  width: 0.45em;
}

.p-reward-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
}
.p-reward-modal img, .p-reward-modal svg {
  width: 100%;
  height: auto;
}

.p-reward-modal__container {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding-top: 11.7948717949%;
  padding-bottom: 7.6923076923%;
  margin: auto;
  flex-shrink: 0;
  overflow: hidden;
}
@media (min-width: 64em) {
  .p-reward-modal__container {
    width: 390px;
    padding-top: 46px;
    padding-bottom: 30px;
  }
}

.p-reward-modal__close {
  display: flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  margin: 3.0769230769% auto 0;
  font-size: 3.5897435897vw;
  font-weight: 700;
  line-height: 1.5714285714;
  color: #fff;
  cursor: pointer;
}
@media (min-width: 64em) {
  .p-reward-modal__close {
    font-size: 14px;
    transition: opacity 0.3s ease;
  }
  .p-reward-modal__close:hover {
    opacity: 0.7;
  }
}

.p-reward-modal__close-icon {
  position: relative;
  width: 0.8571428571em;
  margin-left: 0.5714285714em;
  aspect-ratio: 1;
}
.p-reward-modal__close-icon::before, .p-reward-modal__close-icon::after {
  position: absolute;
  inset: 0;
  width: 1.0714285714em;
  height: 0.1428571429em;
  margin: auto;
  content: "";
  background-color: currentColor;
}
.p-reward-modal__close-icon::before {
  transform: rotate(45deg);
}
.p-reward-modal__close-icon::after {
  transform: rotate(-45deg);
}

.p-reward-modal__body {
  box-sizing: border-box;
  width: 90.2564102564%;
  aspect-ratio: 352/603;
  padding-top: 18.4615384615%;
  margin-inline: auto;
  background-image: url("/rewards/joyful_town/mission/images/reward-modal_red-cup.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.p-reward-modal__body.stage5 {
  aspect-ratio: 352/742;
  background-image: url("/rewards/joyful_town/mission/images/reward-modal_red-cup_tall.svg");
}

.p-reward-modal__stage {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 6.1538461538vw;
  text-align: center;
  color: #C70000;
}
@media (min-width: 64em) {
  .p-reward-modal__stage {
    font-size: 24px;
  }
}

.p-reward-modal__title {
  margin: 0;
  margin-top: 1.1363636364%;
  font-size: 8.2051282051vw;
  line-height: 1.2;
  text-align: center;
}
@media (min-width: 64em) {
  .p-reward-modal__title {
    font-size: 32px;
  }
}
.p-reward-modal__title > span:nth-child(2n+1) {
  font-weight: 700;
  color: #C70000;
}
.p-reward-modal__title > span:nth-child(2n) {
  font-weight: 700;
  color: #EF3340;
}

.p-reward-modal__clear-text {
  margin: 0;
  font-size: 4.1025641026vw;
  font-weight: 700;
  text-align: center;
  color: #C70000;
}
@media (min-width: 64em) {
  .p-reward-modal__clear-text {
    font-size: 16px;
  }
}
.p-reward-modal__clear-text .lg {
  font-size: 5.1282051282vw;
  font-weight: 700;
}
@media (min-width: 64em) {
  .p-reward-modal__clear-text .lg {
    font-size: 20px;
  }
}

.p-reward-modal__present {
  margin-top: 5.9659090909%;
}

.p-reward-modal__present-title {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 700;
  margin: 0;
  font-size: 4.1025641026vw;
  line-height: 1;
  color: #FFFAE2;
  text-align: center;
}
@media (min-width: 64em) {
  .p-reward-modal__present-title {
    font-size: 16px;
  }
}

.p-reward-modal__star {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 71.5909090909%;
  padding-top: 4.2613636364%;
  padding-bottom: 5.9659090909%;
  margin-inline: auto;
  margin-top: 5.6818181818%;
  color: #1E3932;
  background-color: #FFFAE2;
  border-radius: 8px;
}

.p-reward-modal__star-icon {
  width: 25.3968253968%;
  margin-right: 3.1746031746%;
}

.p-reward-modal__star-body {
  line-height: 1;
}

.p-reward-modal__star-text {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 4.1025641026vw;
}
@media (min-width: 64em) {
  .p-reward-modal__star-text {
    font-size: 16px;
  }
}

.p-reward-modal__star-count {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 700;
  margin-top: 0.0625em;
  font-size: 8.2051282051vw;
}
@media (min-width: 64em) {
  .p-reward-modal__star-count {
    font-size: 32px;
  }
}

.p-reward-modal__message {
  position: relative;
  display: grid;
  place-items: center;
  width: 69.8863636364%;
  aspect-ratio: 1;
  padding-top: 20.4545454545%;
  padding-bottom: 12.5%;
  margin-inline: auto;
  margin-top: 4.5454545455%;
  box-sizing: border-box;
}

.p-reward-modal__message-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.p-reward-modal__message-text {
  position: relative;
  font-size: 4.1025641026vw;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0.03em;
  color: #fff;
}
@media (min-width: 64em) {
  .p-reward-modal__message-text {
    font-size: 16px;
  }
}

.p-reward-modal__card {
  margin-top: 6.25%;
}
.p-reward-modal__star + .p-reward-modal__card {
  position: relative;
  margin-top: 25.5681818182%;
}
.p-reward-modal__star + .p-reward-modal__card::before, .p-reward-modal__star + .p-reward-modal__card::after {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 6.8181818182%;
  padding-top: 0.8522727273%;
  margin-inline: auto;
  margin-top: -13.0681818182%;
  content: "";
  background-color: #FFFAE2;
}
.p-reward-modal__star + .p-reward-modal__card::after {
  transform: rotate(90deg);
}

.p-reward-modal__card-icon {
  width: 31.25%;
  margin-inline: auto;
  transform: rotate(-12deg);
}

.p-reward-modal__card-text {
  margin-top: 5.1136363636%;
  font-size: 4.1025641026vw;
  font-weight: 900;
  line-height: 1.5;
  color: #fff;
  text-align: center;
}
@media (min-width: 64em) {
  .p-reward-modal__card-text {
    font-size: 16px;
  }
}

.p-reward-modal__drawing {
  position: relative;
  margin-top: 5.6818181818%;
}
.p-reward-modal__drawing::before, .p-reward-modal__drawing::after {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 6.8181818182%;
  padding-top: 0.8522727273%;
  margin-inline: auto;
  content: "";
  background-color: #FFFAE2;
}
.p-reward-modal__drawing::after {
  transform: rotate(90deg);
}

.p-reward-modal__drawing-img {
  width: 88.6363636364%;
  margin-inline: auto;
  margin-bottom: -4.2613636364%;
  transform: translateX(-2.5641025641%);
}

.p-reward-modal__drawing-name {
  font-size: 4.1025641026vw;
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
  color: #fff;
}
@media (min-width: 64em) {
  .p-reward-modal__drawing-name {
    font-size: 16px;
  }
}
.p-reward-modal__drawing-name .sm {
  font-size: 0.875em;
  font-weight: 900;
}

.p-reward-modal__drawing-entry {
  width: 53.4090909091%;
  margin-inline: auto;
  margin-top: 2.8409090909%;
}

.p-reward-modal__notes {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 79.4871794872%;
  margin-inline: auto;
  margin-top: 2.5641025641%;
}

.p-reward-modal__note {
  padding-left: 1.2em;
  text-indent: -1.2em;
  margin: 0;
  font-size: 3.0769230769vw;
  font-weight: 500;
  line-height: 1.8333333333;
  color: #fff;
}
@media (min-width: 64em) {
  .p-reward-modal__note {
    font-size: 12px;
  }
}
.p-reward-modal__note .kerning {
  letter-spacing: -0.04em;
}

.p-entry-btn {
  --text-color: #fff;
  --bg-color: #006241;
  --border-color: #D2A04A;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.8571428571em;
  align-items: center;
  width: 100%;
  padding-block: 1.2142857143em;
  padding-inline: 1.4285714286em;
  font-size: 3.5897435897vw;
  font-weight: 700;
  line-height: 1.5714285714;
  text-align: left;
  color: var(--text-color);
  background-color: var(--bg-color);
  border-radius: 12px;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.4));
  box-sizing: border-box;
  cursor: pointer;
}
@media (min-width: 64em) {
  .p-entry-btn {
    font-size: 14px;
    transition-property: color, background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }
  .p-entry-btn:hover {
    --text-color: #1E3932;
    --bg-color: #D2A04A;
    --border-color: #fff;
  }
}
.p-entry-btn::before {
  content: "";
}
.p-entry-btn::after {
  position: absolute;
  inset: 0;
  margin: 4px;
  content: "";
  border: 1px solid var(--border-color);
  border-radius: 8px;
  pointer-events: none;
}
@media (min-width: 64em) {
  .p-entry-btn::after {
    transition: border 0.3s ease;
  }
}
.p-entry-btn > .p-entry-btn__chevron {
  position: relative;
  justify-self: end;
  width: 0.6428571429em;
  color: var(--border-color);
}

.p-scrollable {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  pointer-events: none;
}
.p-scrollable img, .p-scrollable svg {
  width: 100%;
  height: auto;
}

.p-scrollable__backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: auto;
  background-color: rgba(30, 57, 50, 0.8);
  animation: fadeOut 0.3s ease 6s forwards;
}

.p-scrollable__body {
  z-index: 1000000;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-bottom: 4.1025641026%;
  animation: fadeOut 0.3s ease 6s forwards;
}

.p-scrollable__text {
  margin: 0;
  font-size: 4.1025641026vw;
  color: #fff;
  text-align: center;
}
@media (min-width: 64em) {
  .p-scrollable__text {
    font-size: 16px;
  }
}

.p-scrollable__arrow {
  width: 21.5384615385%;
  margin-top: 5.641025641%;
}

.p-scrollable__hand {
  width: 18.9743589744%;
  margin-top: 2.5641025641%;
  animation: scrollableHandLoop 1s linear 3, scrollableHandStop 1s linear 1 3s forwards;
}

.p-backdrop {
  display: none;
}
@media (min-width: 64em) {
  .p-backdrop {
    position: absolute;
    inset: 0;
    display: block;
    background-image: linear-gradient(180deg, rgb(52, 79, 149) 0%, rgb(37, 59, 116) 50%);
    pointer-events: none;
  }
}
.p-backdrop img, .p-backdrop svg {
  width: 100%;
  height: auto;
}

.p-backdrop__star-left {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-bottom: max(14.8609077599%, 203px);
  width: max(29.7218155198%, 406px);
  padding-right: max(65.3001464129%, 892px);
  transform: translateX(-50%);
}
.p-backdrop__star-left .star {
  animation: star 1.4s both infinite ease-in-out;
  transform-box: fill-box;
  transform-origin: center;
}
.p-backdrop__star-left .star:nth-child(3n+1) {
  animation-delay: 0.3s;
}
.p-backdrop__star-left .star:nth-child(3n+2) {
  animation-delay: 0.6s;
}

.p-backdrop__star-right {
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-bottom: max(14.3484626647%, 196px);
  width: max(28.9165446559%, 395px);
  padding-left: max(68.5944363104%, 937px);
  transform: translateX(-50%);
}
.p-backdrop__star-right .star {
  animation: star 1.4s both infinite ease-in-out;
  transform-box: fill-box;
  transform-origin: center;
}
.p-backdrop__star-right .star:nth-child(3n+1) {
  animation-delay: 0.3s;
}
.p-backdrop__star-right .star:nth-child(3n+2) {
  animation-delay: 0.6s;
}

.p-backdrop__building-left {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: max(39.019033675%, 533px);
  padding-right: max(60.9077598829%, 832px);
  transform: translateX(-50%);
}

.p-backdrop__building-right {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: max(37.701317716%, 515px);
  padding-left: max(62.2254758419%, 850px);
  transform: translateX(-50%);
}

.p-loading {
  z-index: 100;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 2.0512820513%;
  color: #fff;
  background-color: #253B74;
}
.p-loading img, .p-loading svg {
  display: block;
  width: 100%;
  height: auto;
}

.p-loading__bg-star {
  position: absolute;
  top: 0;
  left: 2.8205128205%;
  width: 92.5641025641%;
  margin-top: 1.0256410256%;
  pointer-events: none;
}

.p-loading__text {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 5.1282051282vw;
  line-height: 1.6;
  position: relative;
  line-height: 1;
}
@media (min-width: 64em) {
  .p-loading__text {
    font-size: 22.8717948718px;
  }
}

.p-loading__bar {
  --transform-x: -100.1%;
  position: relative;
  width: 82.5641025641%;
  padding-top: 2.0512820513%;
  margin-top: 3.5897435897%;
  background-color: #fff;
  border-radius: 9999px;
  overflow: hidden;
}
.p-loading__bar::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: calc(100% + 2px);
  background-color: #C70000;
  border-radius: 9999px;
  transform: translateX(var(--transform-x));
}

.p-loading__number {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 5.1282051282vw;
  line-height: 1.6;
  position: relative;
  display: flex;
  align-items: flex-end;
  line-height: 1;
  margin-top: 3.5897435897%;
}
@media (min-width: 64em) {
  .p-loading__number {
    font-size: 22.8717948718px;
  }
}
.p-loading__number .sm {
  font-family: SoDoSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 3.5897435897vw;
  line-height: 1.5714285714;
  margin-left: 0.2857142857em;
  line-height: 1;
}
@media (min-width: 64em) {
  .p-loading__number .sm {
    font-size: 16.0102564103px;
  }
}

.u-visually-hidden {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  inline-size: 4px !important;
  block-size: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  contain: strict !important;
  pointer-events: none !important;
  visibility: visible !important;
  border: none !important;
  opacity: 0 !important;
}

input[type=hidden] {
  display: none;
}

[data-parallax-speed] {
  transform: translate3d(var(--parallax-x, 0), 0, 0);
}