@charset "UTF-8";

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

#header {
  position: relative;
  background: url(../img/desktop/header_bg.png) no-repeat;
  width: 1400px;
  height: 1050px;
  margin: 0 auto;
}

.header-01 {
  position: absolute;
  left: calc((100% - 93.44px) / 2);
  top: 110px;
}

.header-logo {
  position: absolute;
  left: calc((100% - 560px) / 2);
  top: 380px;
}

.header-logo img {
  width: 560px;
}

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

.header-join-button {
  position: absolute;
  left: calc((100% - 42.285714%) / 2);
  top: calc(1025px * 0.78);
  width: 42.285714%;
  aspect-ratio: 4.625 / 1;
}

#contents {
  background: #2e9ee4 url(../img/desktop/manga_line.svg) no-repeat top center;
  width: 1400px;
  margin: -50px auto 0px auto;
  padding: 70px 0 0 0;
}

#prize {
  position: relative;
  height: 660px;
}

#prize h2 {
  position: absolute;
  left: 15%;
  top: 60px;
}

#prize p {
  position: absolute;
  left: 32%;
  top: 0px;
}

#prize li {
  position: absolute;
  left: 23.0%;
  top: 60px;
}
#prize li {
  width: 425px;
}

#prize li:nth-child(2) {
  position: absolute;
  left: 52.5%;
  top: 60px;
}
#prize li:nth-child(2) img {
  width: 436px;
}

#howto {
  position: relative;
  background: url(../img/desktop/howto_bg.svg) no-repeat top center;
  width: 1400px;
  height: 1246px;
  margin: -100px auto 0px auto;
  padding: 70px 0 0 0;
}

#howto h2 {
  position: absolute;
  left: 15%;
  top: 120px;
}

#howto ol {
  position: absolute;
  left: 23.5%;
  top: 120px;
}

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

.link_01 {
  left: 590px;
  top: 325px;
  width: 283px;
  height: 43px;
}

.link_02 {
  left: 590px;
  top: 380px;
  width: 283px;
  height: 43px;
}

.link_03 {
  left: 590px;
  top: 920px;
  width: 283px;
  height: 43px;
}

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

#spot {
  position: relative;
  background: url(../img/desktop/spot_bg.svg) no-repeat top center;
  width: 1400px;
  height: 1725px;
  margin: -30px auto 0px auto;
  padding: 70px 0 0 0;
}

#spot h2 {
  position: absolute;
  left: 15%;
  top: 170px;
}

.spot-map {
  position: absolute;
  left: 22%;
  top: 70px;
}

#spot-map li {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

#spot-map li a {
  transition: all 0.2s ease-in-out !important;
  transform: scale(1) !important;
}
#spot-map li a:hover {
  transform: scale(1.2) !important;
}

#spot-map li:nth-child(1) a {
  position: absolute;
  left: 83.9%;
  top: 252px;
}

#spot-map li:nth-child(2) a {
  position: absolute;
  left: 57.4%;
  top: 212px;
}

#spot-map li:nth-child(3) a {
  position: absolute;
  left: 50%;
  top: 210px;
}

#spot-map li:nth-child(4) a {
  position: absolute;
  left: 42.5%;
  top: 288px;
}

#spot-map li:nth-child(5) a {
  position: absolute;
  left: 49%;
  top: 543px;
}

#spot ol li:nth-child(1) {
  position: absolute;
  left: 25%;
  top: 800px;
}

#spot ol li:nth-child(2) {
  position: absolute;
  left: 45%;
  top: 800px;
}

#spot ol li:nth-child(3) {
  position: absolute;
  left: 65%;
  top: 800px;
}

#spot ol li:nth-child(4) {
  position: absolute;
  left: 35%;
  top: 1045px;
}

#spot ol li:nth-child(5) {
  position: absolute;
  left: 55%;
  top: 1045px;
}

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

#caution {
  position: relative;
  text-align: center;
  background: url(../img/desktop/caution_bg.svg) no-repeat top center;
  width: 1400px;
  height: 328px;
  margin: -30px auto 0px auto;
  padding: 70px 0 0 0;
}

#footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1400px;
  height: 105px;
  margin: 0 auto 0 auto;
  padding: 0 40px;
}

a, button, .hover, #prize li {
  cursor: pointer;
  transition: all 0.2s ease-in-out !important;
  transform: scale(1);
}

a:hover, button:hover, .hover:hover, #prize li:hover {
  z-index: 1;
  transform: scale(1.05);
}

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

#nyanko-01 {
  position: absolute;
  left: 83.5%;
  top: -100px;
}

#nyanko-02-1 {
  position: absolute;
  left: 3%;
  top: 1115px;
}

#nyanko-02-2 {
  position: absolute;
  left: 8.7%;
  top: 1180px;
}

#nyanko-03 {
  position: absolute;
  left: 75%;
  top: 100px;
}

#nyanko-04 {
  position: absolute;
  left: 70%;
  top: 620px;
}

#nyanko-05 {
  position: absolute;
  left: 20%;
  top: 1250px;
}

#nyanko-06 {
  position: absolute;
  left: 78%;
  top: 1585px;
}