@charset "UTF-8";

/* ----- */
:root {
  --rate: 0.70;		/* 全体を縮小 */
}

/*
.container {
}

.area-contents {
  background-image: url("../../../images/portal/2610nazonika/background.png");
  background-position: top center;
  background-repeat: repeat-y;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
*/
.area-contents {
  --height-area-contents: 2973;

  position: relative;
  height: calc(var(--height-area-contents) * 1px);
}

/* ----- */

/* 背景 */
.background {
  position: absolute;
}

/* ボタン */
.buttons {
  --width-buttons: 342;

  top: 35%;
}
/* 「縁日」ボタン */
#button-ennichi {
  --offset-button-encnichi: 130;

  right: calc(50% + var(--offset-button-encnichi) * 1px);
}
/* 「終わらない宿題」ボタン */
#button-homework {
  --offset-button-homework: 140;

  left: calc(50% + var(--offset-button-homework) * 1px);
}

/* バナー */
.banner {
  --width-banner: 1000;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 11%;
}

/* ロゴ */
.logo {
  --width-logo: 299;

  position: absolute;

  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 1%;
}

/* 1280px未満 */
@media screen and (max-width: 1280px) {
  .area-contents {
    height: calc(var(--height-area-contents) / 1280 * 100vw);
  }
  .background {
    width: 100vw;
  }
  .buttons {
    width: calc(var(--width-buttons) / 1280 * 100vw);
  }
  #button-ennichi {
    right: calc(50% + var(--offset-button-encnichi) / 1280 * 100vw);
  }
  #button-homework {
    left: calc(50% + var(--offset-button-homework) / 1280 * 100vw);
  }
  .banner {
    width: calc(var(--width-banner) / 1280 * 100vw);
  }
  .logo {
    width: calc(var(--width-logo) / 1280 * 100vw);
  }
}