@charset "UTF-8";

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --activity-header-height: clamp(1080px, 56.25vw, 1440px);
  --activity-page-height: clamp(3814.5px, 198.671875vw, 5086px);
  --activity-page-07-height: clamp(2191.5px, 114.140625vw, 2922px);
  --activity-page-08-height: clamp(4629.75px, 241.1328125vw, 6173px);
}

html {
  overflow-x: auto;
  overflow-y: auto;
}

body {
  min-width: 1920px;
  background: #fff;
  display: flex;
  justify-content: center;
}

.activity {
  position: relative;
  width: 100%;
  min-width: 1920px;
  max-width: 2560px;
  overflow: hidden;
}

.activity-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: var(--activity-header-height);
  overflow: hidden;
  pointer-events: none;
}

.activity-header__art,
.activity-page__art {
  position: absolute;
  inset: 0;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.activity-header__art {
  display: block;
  background-image: url("https://static.web.sdo.com/chd/pic/20260731act/header-common.jpg");
}

.activity-nav {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
}

.activity-nav__row {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  gap: 0;
}

.activity-nav__row--first {
  top: 87.916667%;
  left: 25.4375%;
}

.activity-nav__row--second {
  top: 94.861111%;
  left: 28.4375%;
}

.activity-nav__row--first,
.activity-nav__row--second {
  transition: transform 300ms ease;
}

.activity--home .activity-nav__row--first,
.activity--home .activity-nav__row--second {
  transform: translateY(calc(var(--activity-header-height) * -0.02));
}

.nav-button {
  position: relative;
  flex: 0 0 clamp(233.25px, 12.1484375vw, 311px);
  width: clamp(233.25px, 12.1484375vw, 311px);
  height: clamp(64.5px, 3.359375vw, 86px);
  border: 0;
  outline: 0;
  background-color: transparent;
  background-size: 400% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: filter 160ms ease;
}

.activity-nav__row--first .nav-button {
  background-image: url("https://static.web.sdo.com/chd/pic/20260731act/navigation/nav-idle-row-1.png");
}

.activity-nav__row--second .nav-button {
  background-image: url("https://static.web.sdo.com/chd/pic/20260731act/navigation/nav-idle-row-2.png?v=20260812");
}

.nav-button.is-active {
  background-image: url("https://static.web.sdo.com/chd/pic/20260731act/navigation/nav-active-row-1.png");
}

.nav-button.is-active::before {
  content: "";
  position: absolute;
  top: -22px;
  left: -18px;
  z-index: 1;
  width: 66px;
  height: 56px;
  background: url("https://static.web.sdo.com/chd/pic/20260731act/lm.png") center / 100% 100% no-repeat;
  pointer-events: none;
  animation: nav-icon-float 1.1s ease-in-out infinite;
}

@keyframes nav-icon-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.activity-nav__row--second .nav-button.is-active {
  background-image: url("https://static.web.sdo.com/chd/pic/20260731act/navigation/nav-active-row-2.png?v=20260812");
}

.activity-nav__row .nav-button:nth-child(1) { background-position: 0 0; }
.activity-nav__row .nav-button:nth-child(2) { background-position: 33.333333% 0; }
.activity-nav__row .nav-button:nth-child(3) { background-position: 66.666667% 0; }
.activity-nav__row .nav-button:nth-child(4) { background-position: 100% 0; }

.nav-button:hover,
.nav-button:focus-visible {
  filter: brightness(1.06);
}

.nav-button.is-disabled,
.nav-button.is-disabled:hover,
.nav-button.is-disabled:focus-visible {
  cursor: default;
  filter: none;
}

.activity-pages {
  position: relative;
}

.activity-page {
  position: relative;
  display: none;
  width: 100%;
  overflow: hidden;
}

.activity-page--home {
  height: var(--activity-header-height);
}

.activity-page--content {
  height: var(--activity-page-height);
}

.activity-page--devil {
  height: var(--activity-page-08-height);
}

.activity-page--alice {
  height: var(--activity-page-07-height);
}

.activity-page.is-active {
  display: block;
}

.activity-page__art {
  top: var(--activity-header-height);
  right: auto;
  bottom: auto;
  width: 100%;
  height: calc(var(--activity-page-height) - var(--activity-header-height));
}

.activity-page__art--commerce { background-image: url("https://static.web.sdo.com/chd/pic/20260731act/pages/section-commerce.jpg"); }
.activity-page__art--chicas { background-image: url("https://static.web.sdo.com/chd/pic/20260731act/pages/section-chicas-treasure.jpg"); }
.activity-page__art--pet { background-image: url("https://static.web.sdo.com/chd/pic/20260731act/pages/section-pet-crack.jpg"); }
.activity-page__art--step { background-image: url("https://static.web.sdo.com/chd/pic/20260731act/pages/section-step-reward.jpg"); }
.activity-page__art--memory { background-image: url("https://static.web.sdo.com/chd/pic/20260731act/pages/section-left-wing-memory.jpg"); }

.activity-page__art--alice {
  height: calc(var(--activity-page-07-height) - var(--activity-header-height));
  background-image: url("https://static.web.sdo.com/chd/pic/20260731act/pages/07.jpg?v=20260812180122");
}

.activity-page__art--devil {
  height: calc(var(--activity-page-08-height) - var(--activity-header-height));
  background-image: url("https://static.web.sdo.com/chd/pic/20260731act/pages/08.jpg?v=20260812150417");
}

.activity-page__gif {
  position: absolute;
  z-index: 1;
  width: 10.4%;
  height: 5.971687%;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
}

.activity-page__gif--devil-cat-balloon {
  top: 32.1668%;
  left: 36.2%;
  width: 9.9562%;
  height: 4.3689%;
  background-size: contain;
  background-position: center;
  background-color: white;
  border-radius: 33px;
  background-image: url("https://static.web.sdo.com/chd/pic/20260731act/pages/devil-cat-balloon-ride.gif?v=20260812150417");
}

.activity-page__gif--red-coast-cushion {
  top: 32.187948%;
  left: 52.390625%;
  width: 10.179688%;
  height: 4.337113%;
  background-size: cover;
  background-position: center;
  background-image: url("https://static.web.sdo.com/chd/pic/20260731act/pages/red-coast-cushion.gif?v=20260812150417");
}

.activity-page__art--kawaii {
  top: var(--activity-header-height);
  height: calc(var(--activity-page-height) - var(--activity-header-height));
  background-image: url("https://static.web.sdo.com/chd/pic/20260731act/pages/06.jpg");
}

.activity-page__gif--chicas {
  top: 54.915454188%;
  left: 50%;
  background-image: url("https://static.web.sdo.com/chd/pic/20260731act/pages/chicas-cloud-water-cushion.gif");
  transform: translateX(-50%);
}

.activity-page__gif--kawaii-costume {
  top: 46.342902084%;
  left: 31.484375%;
  width: 6.40625%;
  height: 3.303185214%;
  background-image: url("https://static.web.sdo.com/chd/pic/20260731act/pages/kawaii-richard-costume.gif");
}

.activity-page__gif--kawaii-wolf {
  top: 46.097129375%;
  left: 46.11328125%;
  width: 7.7734375%;
  height: 3.794730633%;
  background-image: url("https://static.web.sdo.com/chd/pic/20260731act/pages/kawaii-big-wolf.gif");
}

.activity-page__gif--kawaii-pp {
  top: 46.097129375%;
  left: 61.23046875%;
  width: 8.1640625%;
  height: 3.794730633%;
  background-image: url("https://static.web.sdo.com/chd/pic/20260731act/pages/kawaii-pp-ride.gif");
}

.activity-page__gif--kawaii-skirt {
  top: 54.207628785%;
  left: 31.484375%;
  width: 6.60625%;
  height: 3.303185214%;
  background-image: url("https://static.web.sdo.com/chd/pic/20260731act/pages/kawaii-richard-skirt.gif");
}

.activity-page__gif--kawaii-hood {
  top: 53.961856076%;
  left: 46.11328125%;
  width: 7.7734375%;
  height: 3.794730633%;
  background-image: url("https://static.web.sdo.com/chd/pic/20260731act/pages/kawaii-little-red-riding-hood.gif");
}

.activity-page__gif--kawaii-drift-bottle {
  top: 53.991348801%;
  left: 60.3515625%;
  width: 10%;
  height: 3.794730633%;
  background-image: url("https://static.web.sdo.com/chd/pic/20260731act/pages/kawaii-youth-drift-bottle-ride.gif");
}

.activity-page__gif--kawaii-costume,
.activity-page__gif--kawaii-wolf,
.activity-page__gif--kawaii-pp,
.activity-page__gif--kawaii-skirt,
.activity-page__gif--kawaii-hood,
.activity-page__gif--kawaii-drift-bottle {
  border-radius: 18% 0% 18% 18%;
}

.page-hotspot {
  position: absolute;
  z-index: 1;
  display: block;
  width: 190px;
  height: 90px;
  transform: translateX(-50%);
  cursor: pointer;
}

.page-hotspot--commerce-1 { top: 43.295595753%; left: 50%; }
.page-hotspot--commerce-2 { top: 71.540267401%; left: 50%; }

.page-hotspot--chicas-1 { top: 59.353480142%; left: 44.3%; }
.page-hotspot--chicas-2 { top: 59.353480142%; left: 55.7%; }

.page-hotspot--pet-1 { top: 62.722768384%; left: 44.3%; }
.page-hotspot--pet-2 { top: 62.722768384%; left: 55.7%; }

.page-hotspot--step-1 { top: 44.514274479%; left: 50%; }

.page-hotspot--memory-1 { top: 67.740857255%; left: 44.3%; }
.page-hotspot--memory-2 { top: 67.740857255%; left: 55.7%; }

.page-hotspot--kawaii-faq,
.page-hotspot--kawaii-enter {
  width: 5.78125%;
  height: 0.865119937%;
  transform: none;
}

.page-hotspot--kawaii-faq { top: 67.282736925%; left: 42.3828125%; }
.page-hotspot--kawaii-enter { top: 67.282736925%; left: 51.875%; }

.page-hotspot--alice-enter {
  top: 92.300000%;
  left: 46.953125%;
  width: 6.1328125%;
  height: 1.813826146%;
  transform: none;
}

.page-hotspot--alice-probability {
  top: 85.729000%;
  left: 46.25%;
  width: 7.5%;
  height: 1.026694045%;
  transform: none;
}

#footer {
  width: 100%;
  max-width: 2560px;
  margin: 0 auto;
}

#footer * {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
}