/* 9周年 */

body {
  background-color: black;
}

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

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

.top {
  position: relative;
  margin: 0 auto;
  max-width: 1001px;
}
.mahoroba {
  position: relative;
  margin: 0 auto;
  max-width: 1001px;
}
.onenight {
  position: relative;
  margin: 0 auto;
  max-width: 1001px;
}
.angel {
  position: relative;
  margin: 0 auto;
  max-width: 1001px;
}
.remake {
  position: relative;
  margin: 0 auto;
  max-width: 1001px;
}
.game {
  position: relative;
  margin: 0 auto;
  max-width: 1001px;
}
.cemetery {
  position: relative;
  margin: 0 auto;
  max-width: 1001px;
}
.higurashi2 {
  position: relative;
  margin: 0 auto;
  max-width: 1001px;
}
.nazotalk {
  position: relative;
  margin: 0 auto;
  max-width: 1001px;
}
.line {
  position: relative;
  margin: 0 auto;
  max-width: 1001px;
}
.green {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;

  top: 0;
}

.footer {
  position: relative;
  margin: 0 auto;
  max-width: 1001px;
}

.buttons {
  position: absolute;
}

#button-q1-3 {
  right: 66%;
  bottom: 9.8%;
}
#button-q4-6 {
  right: 36%;
  bottom: 9.8%;
}
#button-q7-9 {
  left: 66%;
  bottom: 9.8%;
}

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

  bottom: 9%;
}
.button-onenight {
  margin: 0 auto;
  right: 0;
  left: 0;

  bottom: 7%;
}
.button-higurashi2  {
  margin: 0 auto;
  right: 0;
  left: 0;

  bottom: 5%;
}
.button-nazotalk {
  margin: 0 auto;
  right: 0;
  left: 0;

  bottom: 5%;
}

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

  bottom: 4%;
  height: 72px;
}

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

  bottom: 20%;
}

/* 1001px未満 */
@media screen and (max-width: 1000px) {
  .top {
  }
  #button-q1-3,
  #button-q4-6,
  #button-q7-9 {
    width: calc(261 / 1001 * 100vw * 1.0);
    bottom: 9.4%;
  }
  .button-mahoroba,
  .button-onenight,
  .button-higurashi2,
  .button-nazotalk {
    width: calc(537 / 1001 * 100vw * 1.0);
  }
  .button-join {
    bottom: 3%;
    height: 36px;
  }
  .button-logo {
    width: calc(248 / 1001 * 100vw * 1.0);
  }
}

/* 効果 */
.big {
  transform: translate(-300px, -1400px) scale(3, 3) ;
}
.inverted {
  transform: scale(-1, 1);
  transition: transform 1000ms;
}
.fade-in {
  opacity: 0;
  transition-duration: 10000ms;
  transition-property: opacity, transform;
}
.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}
.spin {
  transform: rotateY(360deg);
  transition-duration: 2000ms;
}

.vanish {
  opacity: 0;
  transition-duration: 4000ms;
}