/* 2020年11月下旬 */

body {
  background-color: #FEEBBE;
}

a:hover {
  cursor: pointer;
  filter: alpha(opacity=60);
  opacity: 0.6;
}
/* -------------------------- */

.header {
  background-color: #ffffff;
  position: fixed;
  max-width: 1001px;
  max-height: 119px;
  margin: 0 auto;
  left: 0;
  right: 0;
  z-index: 99;
}

.header-month2008 {
  position: absolute;
  left: 35%;
  top: 40%;
  z-index: 99;
}
.header-month2007 {
  position: absolute;
  left: 55%;
  top: 40%;
  z-index: 99;
}
.header-logo {
  position: absolute;
  right: 1%;
  top: 10%;
  z-index: 99;
}

/* ------------------------ */

.top {
  max-width: 1001px;
  padding-top: 120px;
}

.frame {
  margin-top: 50px;
  position: relative;
}


.goods {
  margin-top: 50px;
  position: relative;
  max-width: 1002px;
}

.playing {
  margin-top: 50px;
  position: relative;
  max-width: 1002px;
}

.buttons {
  position: absolute;
}

.button-orange {
  left: 55%;
  bottom: 2%;
}

.goods .button-angel {
  left: 62.0%;
  bottom: 59%;
}
.goods .button-inuneko {
  left: 62.0%;
  bottom: 13%;
}

.playing .button-phantom {
  right: 60.0%;
  bottom: 52%;
}
.playing .button-trapmaker {
  left: 60.0%;
  bottom: 52%;
}
.playing .button-lw {
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 11%;
}

.button-logo  {
  margin: 0 auto;
  right: 0;
  left: 0;

  bottom: 3%;
}

/* 1001px未満 */
@media screen and (max-width: 1000px) {
  .top {
    padding-top: 80px;
  }
  .header-month2007,
  .header-month2008 {
    width: calc(178 / 1001 * 100vw * 1.0);		/* 横幅 / 背景幅 * 100vw * 補正 */
  }
  .header-logo {
    width: calc( 96 / 1001 * 100vw * 1.0);		/* 横幅 / 背景幅 * 100vw * 補正 */
  }
  .buttons {
    width: calc(354 / 1001 * 100vw * 1.0);		/* 横幅 / 背景幅 * 100vw * 補正 */
  }
  .goods .buttons {
    width: calc(244 / 1001 * 100vw * 1.0);		/* 横幅 / 背景幅 * 100vw * 補正 */
  }
  .playing .buttons {
    width: calc(244 / 1001 * 100vw * 1.0);		/* 横幅 / 背景幅 * 100vw * 補正 */
  }
  .button-logo {
    width: calc(300 / 1001 * 100vw * 1.0);		/* 横幅 / 背景幅 * 100vw * 補正 */
  }
}