@charset "utf-8";

body {
  font-family: 'Noto Sans HK', sans-serif;
}

/* ----------
header
---------- */
/* --- hamburgerMenu --- */
.hamburgerMenu-list > li:nth-child(1) > a {
  width: calc((477px / 2) + 25px);
}
.hamburgerMenu-list > li:nth-child(1) > a img {
  aspect-ratio: 477 / 100;
}
.hamburgerMenu-list > li:nth-child(2) > a {
  width: calc((404px / 2) + 25px);
}
.hamburgerMenu-list > li:nth-child(2) > a img {
  aspect-ratio: 404 / 41;
}
.hamburgerMenu-list > li:nth-child(3) > a {
  width: calc((361px / 2) + 25px);
}
.hamburgerMenu-list > li:nth-child(3) > a img {
  aspect-ratio: 361 / 41;
}
.hamburgerMenu-list > li:nth-child(4) > a {
  width: calc((209px / 2) + 25px);
}
.hamburgerMenu-list > li:nth-child(4) > a img {
  aspect-ratio: 209 / 41;
}
@media screen and (768px <= width) {
  .hamburgerMenu-list > li:nth-child(1) > a {
    width: calc((477px / 1.2) + 50px);
  }
  .hamburgerMenu-list > li:nth-child(2) > a {
    width: calc((404px / 1.2) + 50px);
  }
  .hamburgerMenu-list > li:nth-child(3) > a {
    width: calc((361px / 1.2) + 50px);
  }
  .hamburgerMenu-list > li:nth-child(4) > a {
    width: calc((209px / 1.2) + 50px);
  }
}
@media screen and (950px <= width) {
  .hamburgerMenu-list > li:nth-child(1) > a {
    width: calc(758px + 50px);
  }
  .hamburgerMenu-list > li:nth-child(1) > a img {
    aspect-ratio: 758 / 35;
  }
}

.hamburgerMenu-usefulTtl {
  width: calc(209px / 2);
}
.hamburgerMenu-usefulTtl img {
  aspect-ratio: 209 / 41;
}
.hamburgerMenu-usefulList > li > a {
  padding: 0.5em;
  font-weight: 700;
}
@media screen and (768px <= width) {
  .hamburgerMenu-usefulTtl {
    width: calc(209px / 1.2);
  }
}

/* ----------
ticketBtn
---------- */
.ticketBtn {
  position: fixed;
  z-index: 9;
  bottom: 85px;
  right: 3%;
  display: block;
  width: calc(201px / 2);
  transition: scale 0.2s;
}
.ticketBtn img {
  aspect-ratio: 201 / 161;
}
@media (hover: hover) {
  .ticketBtn:hover {
    scale: 1.1;
  }
}

@media screen and (min-width: 768px) {
  .ticketBtn {
    bottom: 90px;
    right: 3%;
    width: calc(201px / 1.3);
  }
}


/* ----------
introduction
---------- */
.introduction-ttl img {
  aspect-ratio: 775 / 288;
}
@media screen and (768px <= width) {
  .introduction-ttl {
    max-width: calc(775px / 1.2);
  }
}

/* ----------
pickup
---------- */
.pickup-ttl {
  width: calc(656px / 2);
}
.pickup-ttl img {
  aspect-ratio: 656 / 138;
}
@media screen and (768px <= width) {
  .pickup-ttl {
    width: calc(656px / 1.2);
  }
}

/* --- pickupGourmet --- */
.pickupGourmet-bubble {
  right: calc(50% + 30px);
  width: calc(355px / 2);
  aspect-ratio: 355 / 96;
}
.pickupGourmet-ttl {
  width: calc(332px / 2);
}
.pickupGourmet-ttl img {
  aspect-ratio: 332 / 118;
}
@media screen and (768px <= width) {
  .pickupGourmet-bubble {
    width: calc(355px / 1.5);
  }
  .pickupGourmet-ttl {
    width: calc(332px / 1.5);
  }
}

/* --- pickupYtSection --- */
/* _play */
._play .pickupYtSection-bubble {
  width: calc(578px / 2);
  aspect-ratio: 578 / 96;
}
._play .pickupYtSection-ttl {
  width: calc(711px / 2);
}
._play .pickupYtSection-ttl img {
  aspect-ratio: 711 / 118;
}
@media screen and (768px <= width) {
  ._play .pickupYtSection-bubble {
    width: calc(578px / 1.5);
  }
  ._play .pickupYtSection-ttl {
    width: calc(711px / 1.5);
  }
}

/* --- pickupSpot --- */
.pickupSpot-bubble {
  width: calc(547px / 2);
  aspect-ratio: 547 / 96;
}
@media screen and (768px <= width) {
  .pickupSpot-bubble {
    width: calc(547px / 1.5);
  }
}

/* --- slider-spot --- */
/* _sauna */
._sauna .sliderSpot-ttl {
  width: calc(165px / 2);
  aspect-ratio: 165 / 111;
}
/* _kidsarea */
._kidsarea .sliderSpot-ttl {
  width: calc(300px / 2);
  aspect-ratio: 300 / 111;
}
/* _hotel */
._hotel .sliderSpot-ttl {
  width: calc(167px / 2);
  aspect-ratio: 167 / 110;
}
/* _virtualbatting */
._virtualbatting .sliderSpot-ttl {
  left: 0;
  width: calc(373px / 2);
  aspect-ratio: 373 / 111;
}
@media screen and (768px <= width) {
  /* _sauna */
  ._sauna .sliderSpot-ttl {
    width: calc(165px / 1.5);
  }
  /* _kidsarea */
  ._kidsarea .sliderSpot-ttl {
    width: calc(300px / 1.5);
  }
  /* _hotel */
  ._hotel .sliderSpot-ttl {
    width: calc(167px / 1.5);
  }
  /* _virtualbatting */
  ._virtualbatting .sliderSpot-ttl {
    width: calc(373px / 1.5);
  }
}

/* ----------
enjoy
---------- */
.enjoy-ttl {
  width: calc(613px / 2);
}
.enjoy-ttl img {
  aspect-ratio: 613 / 145;
}
@media screen and (768px <= width) {
  .enjoy-ttl {
    width: calc(613px / 1.2);
  }
}

/* ----- rules ----- */
.rules-bubble {
  width: calc(674px / 2);
}
.rules-bubble img {
  aspect-ratio: 674 / 96;
}
@media screen and (768px <= width) {
  .rules-bubble {
    width: calc(674px / 1.5);
  }
}

/* ----------
howto
---------- */
.howto-ttl {
  width: calc(682px / 2);
}
.howto-ttl img {
  aspect-ratio: 682 / 195;
}

/* _step01 */
._step01 .howtoStep-ttl {
  width: calc(379px / 2);
}
._step01 .howtoStep-ttl img {
  aspect-ratio: 379 / 42;
}
/* _step02 */
._step02 .howtoStep-ttl {
  width: calc(384px / 2);
}
._step02 .howtoStep-ttl img {
  aspect-ratio: 384 / 42;
}
/* _step03 */
._step03 .howtoStep-ttl {
  width: calc(347px / 2);
}
._step03 .howtoStep-ttl img {
  aspect-ratio: 347 / 42;
}
/* _step04 */
._step04 .howtoStep-ttl {
  width: calc(337px / 2);
}
._step04 .howtoStep-ttl img {
  aspect-ratio: 337 / 42;
}
/* _step05 */
._step05 .howtoStep-ttl {
  margin-bottom: 10px;
  width: calc(471px / 2);
}
._step05 .howtoStep-ttl img {
  aspect-ratio: 471 / 84;
}

@media screen and (768px <= width) {
  .howto-ttl {
    width: calc(682px / 1.2);
  }

  /* _step01 */
  ._step01 .howtoStep-ttl {
    width: calc(379px / 1.3);
  }
  /* _step02 */
  ._step02 .howtoStep-ttl {
    width: calc(384px / 1.3);
  }
  /* _step03 */
  ._step03 .howtoStep-ttl {
    width: calc(347px / 1.3);
  }
  /* _step04 */
  ._step04 .howtoStep-ttl {
    width: calc(337px / 1.3);
  }
  /* _step05 */
  ._step05 .howtoStep-ttl {
    margin-bottom: 0;
    width: 589px;
  }
  ._step05 .howtoStep-ttl img {
    aspect-ratio: 589 / 30;
  }
}