@charset "UTF-8";

.onlypc { display: none; }
.onlysp { display: block; }

.wrapper {
  overflow: hidden;
}

#header {
  position: relative;
  background: url(../img/mobile/header_bg.png) no-repeat center top;
  background-size: cover;
  width: 100%;
  aspect-ratio: 1 / 2.2133;
  margin: 0 auto;
  --header-h: calc(100% * (2.2133 / 1));
}

.header-01 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.header-01 img {
  position: absolute;
  left: calc((100% - 9.33%) / 2);
  top: calc(var(--header-h) * 0.02);
  width: 9.33%;
}

.header-logo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.header-logo img {
  position: absolute;
  left: calc((100% - 89.6%) / 2);
  top: calc(var(--header-h) * 0.22);
  width: 89.6%;
}

.header-logo:after {
  content: " ";
  display: block;
  position: absolute;
  left: calc((100% - 84px) / 2);
  top: calc(var(--header-h) * 0.33);
  background: url(../img/mobile/go.svg) no-repeat;
  width: 84px;
  height: 44px;
  animation: bounce 1s ease-in-out infinite;
}

.header-join-button-box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.header-join-button { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.header-join-button img {
  position: absolute;
  left: calc((100% - 89.3%) / 2);
  top: calc(var(--header-h) * 0.36);
  width: 89.3%;
  aspect-ratio: 4.625 / 1;
}

#contents {
  position: relative;
  background: url(../img/mobile/contents_bg.svg) no-repeat center top;
  background-size: 100% auto;
  width: 100%;
  aspect-ratio: 1 / 1.928;
  --header-h: calc(100% * (1.928 / 1));
  margin: -50px auto 0px auto;
  margin-top: calc(var(--header-h) * -0.05);
  padding: 70px 0 0 0;
}

#prize {
  width: 100%;
  aspect-ratio: 1 / 1.94026667;
  --prize-h: calc(100% * (1.94026667 / 1));
}
#prize h2 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#prize h2 img {
  position: absolute;
  left: calc((100% - 24%) / 2);
  top: calc(var(--howto-h) * -0.010);
  width: 24%;
  margin: -80px auto 0px auto;
}

#prize p { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#prize p img {
  position: absolute;
  left: calc((100% - 88%) / 2);
  top: calc(var(--prize-h) * 0.016);
  width: 88%;
}


#prize li { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#prize li img {
  position: absolute;
  left: calc((100% - 100%) / 2);
  top: calc(var(--prize-h) * 0.034);
  width: 100%;
}
#prize li:nth-child(2) img {
  top: calc(var(--prize-h) * 0.236);
}

#howto {
  background: url(../img/mobile/howto_bg.svg) no-repeat center top;
  background-size: 100% auto;
  width: 100%;
  aspect-ratio: 1 / 3.82933333;
  --howto-h: calc(100% * (3.82933333 / 1));
  margin: -50px auto 0px auto;
}
#howto h2 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#howto h2 img {
  position: absolute;
  left: calc((100% - 45%) / 2);
  top: calc(var(--howto-h) * -0.004);
  width: 45%;
}

#howto ol { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#howto ol img {
  position: absolute;
  left: calc((100% - 81.06%) / 2);
  top: calc(var(--howto-h) * 0.01);
  width: 81.06%;
}

.clickable-area {
  display: block;
  position: absolute;
  color: transparent !important;
  font-size: 0 !important;
}

.link_01 {
  left: 19.2%;
  top: 29.103077%;
  width: 61.066667%;
  aspect-ratio: 6.36111111 / 1
}

.link_02 {
  left: 19.2%;
  top: 33.09589%;
  width: 61.066667%;
  aspect-ratio: 6.96111111 / 1
}

.link_03 {
  left: 19.2%;
  top: 85.898352%;
  width: 61.066667%;
  aspect-ratio: 6.36111111 / 1
}

.howto-join-button {
  position: absolute;
  left: calc((100% - 42.285714%) / 2);
  top: 0;
  width: 42.285714%;
  aspect-ratio: 4.625 / 1;
}

.howto-join-button-box { position: absolute; left: 0; top: 89%; width: 100%; height: 100%; }
.howto-join-button { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.howto-join-button img {
  position: absolute;
  left: calc((100% - 89.3%) / 2);
  top: 0;
  width: 89.3%;
  aspect-ratio: 4.625 / 1;
}

#spot {
  position: relative;
  background: url(../img/mobile/spot_bg.svg) no-repeat center top;
  background-size: 100% auto;
  width: 100%;
  aspect-ratio: 1 / 2.659944;
  --spot-h: calc(100% * (2.659944 / 1));
  margin: -50px auto 0px auto;
}
#spot h2 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#spot h2 img {
  position: absolute;
  left: calc((100% - 86.89%) / 2);
  top: calc(var(--spot-h) * -0.003);
  width: 86.89%;
}

#spot-map { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#spot .spot-map { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#spot .spot-map img {
  position: absolute;
  left: calc((100% - 100%) / 2);
  top: calc(var(--spot-h) * 0.035);
  width: 100%;
}

.spot-map ul { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.spot-map li { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#spot-map li a {
  display: block;
  z-index: 9999;
  position: absolute;
  width: 6.765%;
  height: 20px;
}
#spot-map li img {
  display: block;
  z-index: 9999;
  position: absolute;
}

#spot-map li:nth-child(1) a {
  left: 86.4%;
  top: calc(var(--spot-h) * 0.054);
}

#spot-map li:nth-child(2) a {
  left: 48.7%;
  top: calc(var(--spot-h) * 0.048);
}

#spot-map li:nth-child(3) a {
  left: 37.1%;
  top: calc(var(--spot-h) * 0.0475);
}

#spot-map li:nth-child(4) a {
  left: 27.1%;
  top: calc(var(--spot-h) * 0.057);
}

#spot-map li:nth-child(5) a {
  left: 37.1%;
  top: calc(var(--spot-h) * 0.097);
}

#spot ol { position: absolute; left: 0; top: calc(var(--spot-h) * 0.13); width: 100%; height: 100%; }
#spot ol li { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

#spot ol li img {
  position: absolute;
  width: 41%;
}

#spot ol li:nth-child(1) img {
  left: calc((100% - 86%) / 2 + 1%);
  top: calc(var(--spot-h) * 0.001);
}

#spot ol li:nth-child(2) img {
  left: calc((100% - 86%) / 2 + 45%);
  top: calc(var(--spot-h) * 0.001);
}

#spot ol li:nth-child(3) img {
  left: calc((100% - 41%) / 2);
  top: calc(var(--spot-h) * 0.06);
}

#spot ol li:nth-child(4) img {
  left: calc((100% - 86%) / 2 + 1%);
  top: calc(var(--spot-h) * 0.12);
}

#spot ol li:nth-child(5) img {
  left: calc((100% - 86%) / 2 + 45%);
  top: calc(var(--spot-h) * 0.12);
}

.spot-join-button-box { position: absolute; left: 0; top: calc(var(--spot-h) * 0.325); width: 100%; height: 100%; }
.spot-join-button img {
  position: absolute;
  left: calc((100% - 89.3%) / 2);
  top: 0;
  width: 89.3%;
  aspect-ratio: 5.47636173 / 1;
}

#caution {
  position: relative;
  text-align: center;
  background: url(../img/mobile/caution_bg.svg) no-repeat center top;
  background-size: 100% auto;
  width: 100%;
  aspect-ratio: 1 / 1.32533333;
  --spot-h: calc(100% * (1.32533333 / 1));
  margin: -30px auto 0px auto;
}

#caution img {
  width: 78%;
  margin: calc(var(--spot-h) * 0.12) auto 0px auto;
}

#footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  aspect-ratio: 5.35714286 / 1;
  margin: 0 auto 0 auto;
  padding: 0 5%;
  
  
  
}

.footer-copyright {
  width: 23.65%;
}

.footer-logo {
  width: 26.32%;
}


/* ======================================== */

#nyanko-01 {
  position: absolute;
  left: 80.0%;
  top: calc(var(--prize-h) * 0.399);
  width: 18.13%;
}

#nyanko-02-1 {
  position: absolute;
  left: 3%;
  /*top: calc(var(--header-h) * 0.415);*/
  bottom: calc(var(--header-h) * -0.005);
  width: 10.701067%;
}

#nyanko-02-2 {
  position: absolute;
  left: 15.0%;
  /*top: calc(var(--header-h) * 0.43);*/  
  bottom: calc(var(--header-h) * -0.003);
  width: 8.41%;
}

#nyanko-03 {
  position: absolute;
  left: 75%;
  top: calc(var(--spot-h) * 0.02);
  width: 23.97%;
}

#nyanko-04 {
  position: absolute;
  left: 71%;
  top: calc(var(--spot-h) * 0.105);
  width: 15.65%;
}

#nyanko-05 {
  position: absolute;
  left: 7%;
  top: calc(var(--spot-h) * 0.207);
  width: 19.77%;
}

#nyanko-06 {
  position: absolute;
  left: 78%;
  top: calc(var(--spot-h) * 0.352);
  width: 17.92%;
}