@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Noto+Sans+JP:wght@100..900&display=swap");
*:not(:is(ul, ol, li)) {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  word-break: break-word;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  vertical-align: baseline;
  background: transparent;
}

html, body {
  font-size: 62.5%;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
  display: block;
}

:where(:is(ul, ol):not(.is-list-normal)) {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
:where(:is(ul, ol):not(.is-list-normal)) li {
  margin: 0;
  padding: 0;
}

:where(ul.is-list-normal) {
  padding-left: 1em;
  list-style: disc;
}

blockquote, q {
  quotes: none;
}
blockquote::before, blockquote::after, q::before, q::after {
  content: "";
  content: none;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: bottom;
  max-width: 100%;
}

picture {
  max-width: 100%;
}

input, select {
  vertical-align: middle;
}

br {
  line-height: 0;
}

input, textarea, select, button {
  font: inherit;
}

input, select, button {
  cursor: pointer;
}

/* safariでのデフォルトスタイルをリセット */
input[type=submit],
input[type=button] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  -moz-appearance: button;
       appearance: button;
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
input[type=submit]::-webkit-search-decoration,
input[type=button]::-webkit-search-decoration {
  display: none;
}
input[type=submit]:focus,
input[type=button]:focus {
  outline-offset: -2px;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

:root {
  --primary-color: #148B3F;
  --secondary-color: #F5B964;
  --quaternary-color: #359D8C;
  --bg-color-secondary: #F8DF98;
  --bg-color-secondary-dark: #F8DF98;
  --bg-color: var(--bg-color-secondary);
  --bg-color-sound-button: #FDF2D3;
  --correct-color: #F45D43;
  --bg-color-correct: #F8DF98;
  --miss-color: #12339F;
  --bg-image: url("../img/bg-pattern1.png");
  --text-color: #222;
  --font: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ", "Noto Sans JP", sans-serif;
  --accent-font: "Mochiy Pop One", sans-serif;
  --content-width: min(100%, 75rem);
  --content-width-pc: min(100%, 45rem);
  --content-padding: min(2.4rem, 3.2vw);
  --modal-index: 900;
  --header-index: 800;
  --footer-index: 700;
  --main-index: 600;
}

body {
  font-family: var(--font);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.wrapper {
  background: var(--bg-color) center/240px auto var(--bg-image);
}

.container {
  height: 100%;
  min-height: 100vh;
  display: -ms-grid;
  display: grid;
  place-items: flex-start;
  width: var(--content-width-pc);
  margin-inline: auto;
  padding-inline: var(--content-padding);
  background: var(--bg-color) center/120px auto var(--bg-image);
  -webkit-box-shadow: 0 4px 76px rgba(0, 0, 0, 0.05);
          box-shadow: 0 4px 76px rgba(0, 0, 0, 0.05);
  padding-block: min(4rem, 5.3333333333vw);
}
@media (max-height: 900px) {
  .container {
    padding-block: min(4rem, 5.3333333333vw);
  }
}
@media (max-width: 768px) {
  .container {
    padding-block: min(8rem, 10.6666666667vw);
  }
}
@media (max-width: 768px) {
  .container {
    place-items: center;
    width: var(--content-width);
  }
}

.button {
  --shadow-height: min(1.3rem, 1.7333333333vw);
  color: var(--quaternary-color);
  margin-bottom: var(--shadow-height);
  font-size: min(4.6rem, 6.1333333333vw);
  font-weight: 900;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: min(min(36rem, 48vw), 100%);
  margin-inline: auto;
  padding: 1rem 0;
  border-radius: 999px;
  background: #FFF;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: min(0.8rem, 1.0666666667vw);
  -webkit-box-shadow: min(1.1rem, 1.4666666667vw) var(--shadow-height) 0 var(--secondary-color);
          box-shadow: min(1.1rem, 1.4666666667vw) var(--shadow-height) 0 var(--secondary-color);
}
@media (max-height: 900px) {
  .button {
    width: min(min(32rem, 42.6666666667vw), 100%);
  }
}
@media (max-width: 768px) {
  .button {
    width: min(min(48rem, 64vw), 100%);
  }
}
.button::before {
  content: "";
  position: absolute;
  inset: min(0.6rem, 0.8vw);
  border-radius: 999px;
  border: 3px dashed var(--secondary-color);
}
.button + .button {
  margin-top: min(3rem, 4vw);
}
.button img {
  width: 100%;
}

.modal {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--modal-index);
}
.modal__mask {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
}
.modal__image {
  display: block;
  margin: auto auto min(1.6rem, 2.1333333333vw);
  width: 80%;
}
@media (max-width: 768px) {
  .modal__image {
    width: 100%;
  }
}
.modal__title {
  margin-bottom: min(1.6rem, 2.1333333333vw);
  font-family: var(--accent-font);
  color: var(--title-color);
  font-size: min(4rem, 5.3333333333vw);
  font-weight: 500;
  position: relative;
}
@media (max-width: 768px) {
  .modal__title {
    font-size: min(6rem, 8vw);
  }
}
.modal__title::before {
  content: attr(data-text);
  color: white;
  position: absolute;
  inset: 0;
  -webkit-text-stroke: min(1.6rem, 2.1333333333vw) white;
  text-shadow: min(0.6rem, 0.8vw) 0 white, max(-0.6rem, -0.8vw) 0 white, 0 min(0.6rem, 0.8vw) white, 0 max(-0.6rem, -0.8vw) white, min(0.6rem, 0.8vw) min(0.6rem, 0.8vw) white, max(-0.6rem, -0.8vw) min(0.6rem, 0.8vw) white, min(0.6rem, 0.8vw) max(-0.6rem, -0.8vw) white, max(-0.6rem, -0.8vw) max(-0.6rem, -0.8vw) white;
  z-index: -1;
}
.modal__text {
  margin-bottom: min(2.4rem, 3.2vw);
  font-family: var(--accent-font);
  font-size: min(3.2rem, 4.2666666667vw);
  font-weight: 500;
}
@media (max-width: 768px) {
  .modal__text {
    font-size: min(4.8rem, 6.4vw);
  }
}
.modal__main {
  --title-color: var(--correct-color);
  background: var(--bg);
  position: absolute;
  width: min(80%, 40rem);
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin-block: auto;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: min(1.6rem, 2.1333333333vw);
  padding: min(3.2rem, 4.2666666667vw);
  display: none;
  overflow-y: auto;
  scrollbar-width: none;
}
@media (max-width: 768px) {
  .modal__main {
    width: min(80%, 70rem);
  }
}
.modal__main::-webkit-scrollbar {
  display: none;
}
.modal__main.is-active {
  display: block;
}
.modal__main--correct {
  --bg: var(--bg-color-correct) top center / 100% auto url(../img/stage/correcr_decoration.png) no-repeat;
}
.modal__main--correct .modal__title {
  font-size: min(7rem, 9.3333333333vw);
}
@media (max-width: 768px) {
  .modal__main--correct .modal__title {
    font-size: min(9.6rem, 12.8vw);
  }
}
.modal__main--miss {
  --title-color: var(--miss-color);
  --bg: url("../img/stage/miss_decoration.png") top center / 100% auto no-repeat, linear-gradient(180deg, #5EADCF 0%, #D6E8F0 50.98%) top center / 100% auto;
}
.modal__main--missbroccoli {
  --title-color: var(--miss-color);
  --bg: #D8E8CE;
}
.modal__main--result {
  width: min(100%, 45rem);
  height: 100%;
  padding-top: min(3rem, 4vw);
  padding-bottom: min(3rem, 4vw);
  border-radius: 0;
  --bg: var(--bg-color-correct) center / 120px auto url(../img/bg-pattern1.png);
}
@media (max-height: 900px) {
  .modal__main--result {
    padding-top: min(3rem, 4vw);
    padding-bottom: min(2rem, 2.6666666667vw);
  }
}
@media (max-width: 768px) {
  .modal__main--result {
    width: min(100%, 75rem);
    padding-top: min(6rem, 8vw);
    padding-bottom: min(6rem, 8vw);
  }
}
.modal__main--result .button {
  width: 85%;
  max-width: min(100%, min(64rem, 85.3333333333vw));
  font-size: min(5.6rem, 7.4666666667vw);
  border: solid min(0.4rem, 0.5333333333vw) var(--secondary-color);
}
.modal__resultTitle {
  margin-bottom: min(5.6rem, 7.4666666667vw);
  color: var(--primary-color);
  font-size: min(7.2rem, 9.6vw);
  font-weight: 900;
  position: relative;
}
@media (max-height: 900px) {
  .modal__resultTitle {
    margin-bottom: min(2rem, 2.6666666667vw);
  }
}
.modal__resultTitle img {
  width: min(26rem, 34.6666666667vw);
  margin: auto;
  display: block;
}
@media (max-width: 768px) {
  .modal__resultTitle img {
    width: min(46rem, 61.3333333333vw);
  }
}
.modal__resultImg {
  width: 55%;
}
@media (max-width: 768px) {
  .modal__resultImg {
    width: 70%;
  }
}
.modal__resultCont {
  padding: min(3rem, 4vw) min(1.5rem, 2vw) min(4.5rem, 6vw);
  background: #fff;
  border-radius: min(1.6rem, 2.1333333333vw);
  width: 100%;
}
@media (max-height: 900px) {
  .modal__resultCont {
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .modal__resultCont {
    padding: min(6rem, 8vw) min(1.5rem, 2vw) min(4.5rem, 6vw);
  }
}
.modal__resultCount {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  position: relative;
  color: var(--title-color);
  font-size: min(5rem, 6.6666666667vw);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, var(--bg-color-correct)));
  background: linear-gradient(transparent 60%, var(--bg-color-correct) 60%);
}
@media (max-width: 768px) {
  .modal__resultCount {
    font-size: min(6.4rem, 8.5333333333vw);
  }
}
.modal__resultUnit {
  font-size: 70%;
}

.page-sound {
  position: fixed;
  z-index: 999;
  width: 100%;
}
.page-sound .pagetitle {
  color: var(--primary-color);
  -webkit-text-stroke: min(1rem, 1.3333333333vw) white;
  paint-order: stroke;
  font-size: min(4rem, 5.3333333333vw);
  font-weight: 900;
  font-family: var(--font);
}
@media (max-width: 768px) {
  .page-sound .pagetitle {
    font-size: min(6.5rem, 8.6666666667vw);
  }
}
.page-sound .pagetitle__sub {
  font-size: min(2.4rem, 3.2vw);
  font-weight: 400;
  margin-top: min(2.4rem, 3.2vw);
}
@media (max-width: 768px) {
  .page-sound .pagetitle__sub {
    font-size: min(3.2rem, 4.2666666667vw);
  }
}
.page-sound .volume {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: min(3.2rem, 4.2666666667vw);
  margin-top: min(6rem, 8vw);
}
@media (max-width: 768px) {
  .page-sound .volume {
    margin-top: min(8rem, 10.6666666667vw);
  }
}
.page-sound .volume__box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: calc(50% - min(1.6rem, 2.1333333333vw));
  aspect-ratio: 1/1;
  background: var(--bg-color-sound-button);
  border-radius: min(1.6rem, 2.1333333333vw);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.page-sound .volume__box:hover {
  opacity: 0.6;
}
.page-sound .volume__box--on .volume__box-image {
  width: 60%;
}
.page-sound .volume__box--on .volume__box-text {
  margin-top: min(0.8rem, 1.0666666667vw);
}
.page-sound .volume__box--off .volume__box-image {
  width: 70%;
}
.page-sound .volume__box--off .volume__box-text {
  margin-top: min(2.7rem, 3.6vw);
}
.page-sound .volume__box-text {
  font-size: min(2.4rem, 3.2vw);
  font-weight: 600;
}
@media (max-width: 768px) {
  .page-sound .volume__box-text {
    font-size: min(4rem, 5.3333333333vw);
  }
}
.page-sound .volume__item {
  width: 100%;
}

.page-index .index__mainvisual {
  width: 100%;
  margin: 0 auto min(5rem, 6.6666666667vw);
}
@media (max-width: 768px) {
  .page-index .index__mainvisual {
    width: min(65.4rem, 87.2vw);
    margin-bottom: min(10rem, 13.3333333333vw);
  }
}

.page-howto .container {
  padding-block: min(2rem, 2.6666666667vw);
}
@media (max-width: 768px) {
  .page-howto .container {
    padding-block: min(6rem, 8vw);
  }
}
.page-howto .pagetitle {
  color: var(--primary-color);
  -webkit-text-stroke: min(1.4rem, 1.8666666667vw) white;
  paint-order: stroke;
  font-weight: 900;
  font-family: var(--font);
}
.page-howto .pagetitle img {
  width: 100%;
}
.page-howto-swiper {
  margin-top: min(1.6rem, 2.1333333333vw);
  border-radius: min(1.6rem, 2.1333333333vw);
  background: #fff;
}
@media (max-height: 900px) {
  .page-howto-swiper {
    width: 80%;
  }
}
@media (max-width: 768px) {
  .page-howto-swiper {
    margin-top: min(2.8rem, 3.7333333333vw);
  }
}
.page-howto .swiper-wrapper {
  width: min(40rem, 53.3333333333vw);
  border-radius: min(1.6rem, 2.1333333333vw);
  background: #fff;
}
@media (max-width: 768px) {
  .page-howto .swiper-wrapper {
    width: min(46.5rem, 62vw);
  }
}
.page-howto .swiper-slide {
  /* 文字配置調整、背景色設定 */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #333;
  background-color: white;
  padding: min(2.4rem, 3.2vw) min(2.4rem, 3.2vw);
}
.page-howto .swiper-slide img {
  width: 100%;
}
.page-howto .swiper-button-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: min(1rem, 1.3333333333vw);
  margin-top: min(1rem, 1.3333333333vw);
}
@media (max-width: 768px) {
  .page-howto .swiper-button-box {
    gap: min(2rem, 2.6666666667vw);
    margin-top: min(1.6rem, 2.1333333333vw);
  }
}
.page-howto .swiper-button-next,
.page-howto .swiper-button-prev {
  background: white;
  width: min(6rem, 8vw);
  height: min(6rem, 8vw);
  border-radius: 50%;
  border: min(0.2rem, 0.2666666667vw) solid var(--primary-color);
  cursor: pointer;
  position: relative;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
@media (max-width: 768px) {
  .page-howto .swiper-button-next,
  .page-howto .swiper-button-prev {
    width: min(8.8rem, 11.7333333333vw);
    height: min(8.8rem, 11.7333333333vw);
    -webkit-transform: initial;
            transform: initial;
  }
}
.page-howto .swiper-button-next::before, .page-howto .swiper-button-next::after,
.page-howto .swiper-button-prev::before,
.page-howto .swiper-button-prev::after {
  content: "";
  position: absolute;
  top: calc(50% - min(0.2rem, 0.2666666667vw));
  right: calc(50% - min(0.9rem, 1.2vw));
  width: min(1.8rem, 2.4vw);
  height: min(0.4rem, 0.5333333333vw);
  border-radius: 9999px;
  background-color: var(--primary-color);
  -webkit-transform-origin: calc(100% - min(0.2rem, 0.2666666667vw)) 50%;
          transform-origin: calc(100% - min(0.2rem, 0.2666666667vw)) 50%;
}
@media (max-width: 768px) {
  .page-howto .swiper-button-next::before, .page-howto .swiper-button-next::after,
  .page-howto .swiper-button-prev::before,
  .page-howto .swiper-button-prev::after {
    top: calc(50% - min(0.2rem, 0.2666666667vw));
    right: calc(50% - min(1.5rem, 2vw));
    width: min(3rem, 4vw);
    height: min(0.4rem, 0.5333333333vw);
    -webkit-transform-origin: calc(100% - min(0.2rem, 0.2666666667vw)) 50%;
            transform-origin: calc(100% - min(0.2rem, 0.2666666667vw)) 50%;
  }
}
.page-howto .swiper-button-next::before,
.page-howto .swiper-button-prev::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.page-howto .swiper-button-next::after,
.page-howto .swiper-button-prev::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.page-howto .swiper-button-next.swiper-button-disabled,
.page-howto .swiper-button-prev.swiper-button-disabled {
  border: min(0.4rem, 0.5333333333vw) solid #B9B9B9;
}
.page-howto .swiper-button-next.swiper-button-disabled::before, .page-howto .swiper-button-next.swiper-button-disabled::after,
.page-howto .swiper-button-prev.swiper-button-disabled::before,
.page-howto .swiper-button-prev.swiper-button-disabled::after {
  background-color: #B9B9B9;
}
.page-howto .swiper-button-prev::before, .page-howto .swiper-button-prev::after {
  -webkit-transform-origin: min(0.2rem, 0.2666666667vw) 50%;
          transform-origin: min(0.2rem, 0.2666666667vw) 50%;
}
.page-howto .swiper__text {
  font-size: min(3.2rem, 4.2666666667vw);
  font-weight: 400;
  line-height: normal;
  margin-top: min(2rem, 2.6666666667vw);
}
.page-howto .swiper__text img {
  width: 100%;
}
.page-howto .button {
  margin-top: min(1.5rem, 2vw);
}
@media (max-height: 900px) {
  .page-howto .button {
    margin-top: min(1.5rem, 2vw);
  }
}
@media (max-width: 768px) {
  .page-howto .button {
    margin-top: min(4rem, 5.3333333333vw);
  }
}

.page-stage {
  --bg-color: #B9D98D;
  --bg-image: url("../img/bg-pattern2.png");
}
.page-stage rt {
  font-size: 40%;
  line-height: 0.9;
}
.page-stage .container {
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  padding-inline: 0;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-top: 0;
}
.page-stage .container-inner {
  height: 100%;
}
.page-stage .header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color: var(--bg-color);
  width: 100%;
  padding: min(1.6rem, 2.1333333333vw) min(1.6rem, 2.1333333333vw) 0;
  gap: 3.721%;
}
@media (max-width: 768px) {
  .page-stage .header {
    padding: min(1.6rem, 2.1333333333vw) var(--content-padding);
  }
}
.page-stage .header__status {
  width: 40%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: min(0.8rem, 1.0666666667vw);
}
.page-stage .header__status-title {
  width: 49.302%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: min(1.6rem, 2.1333333333vw);
}
.page-stage .header__status-title .stage__volume {
  width: min(3.5rem, 4.6666666667vw);
  height: min(3.5rem, 4.6666666667vw);
  aspect-ratio: 1/1;
  padding: min(1rem, 1.3333333333vw);
  background: var(--bg-color-secondary) url(../img/icon-volume_off.svg) no-repeat center/80%;
  border-radius: 8px;
  overflow: hidden;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media (max-width: 768px) {
  .page-stage .header__status-title .stage__volume {
    width: min(6rem, 8vw);
    height: min(6rem, 8vw);
  }
}
.page-stage .header__status-title .stage__volume.is-active {
  background-image: url(../img/icon-volume_on.svg);
}
.page-stage .header__status-title h1 {
  width: calc(100% - min(5rem, 6.6666666667vw));
  -ms-flex-negative: 1;
      flex-shrink: 1;
}
@media (max-width: 768px) {
  .page-stage .header__status-title h1 {
    width: calc(90% - min(5rem, 6.6666666667vw));
  }
}
.page-stage .header__status-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: min(0.4rem, 0.5333333333vw);
}
.page-stage .header__status-item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
}
@media (max-width: 768px) {
  .page-stage .header__status-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
  }
}
.page-stage .header__status-item:not(.is-active) {
  opacity: 0;
}
.page-stage .header__status-text {
  font-size: min(1.4rem, 1.8666666667vw);
  font-family: var(--accent-font);
  text-shadow: 1.5px 0 white, -1.5px 0 white, 0 1.5px white, 0 -1.5px white, 1.5px 1.5px white, -1.5px 1.5px white, 1.5px -1.5px white, -1.5px -1.5px white;
}
@media (max-width: 768px) {
  .page-stage .header__status-text {
    font-size: min(2rem, 2.6666666667vw);
  }
}
.page-stage .header__time {
  width: 11.116%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}
@media (max-width: 768px) {
  .page-stage .header__time {
    -webkit-transform: initial;
            transform: initial;
  }
}
.page-stage .header__time::before {
  content: "";
  position: relative;
  top: 1px;
  background: bottom center/100% auto no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg width='23' height='13' viewBox='0 0 23 13' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M22.4033 0V8.96484H19.4922V12.4746C16.8123 11.9734 14.036 11.7031 11.1826 11.7031C8.32918 11.7031 5.59105 11.9731 2.91113 12.4551V8.96484H0V0H22.4033Z' fill='%23359D8C'/></svg>");
  width: min(2.2rem, 2.9333333333vw);
  height: min(1.2rem, 1.6vw);
  margin-inline: auto;
}
.page-stage .header__time-count {
  color: var(--tertiary-color);
  font-size: min(3rem, 4vw);
  background-color: #fff;
  width: min(8rem, 10.6666666667vw);
  aspect-ratio: 1/1;
  border-radius: 9999px;
  border: min(1rem, 1.3333333333vw) solid var(--quaternary-color);
  display: -ms-grid;
  display: grid;
  place-items: center;
}
.page-stage .header__time-text {
  margin-top: min(0.3rem, 0.4vw);
  font-family: var(--accent-font);
  font-size: min(1.6rem, 2.1333333333vw);
}
.page-stage .stage__main {
  width: 100%;
  display: -ms-grid;
  display: grid;
  overflow: hidden;
}
.page-stage .stage__bg {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: 1/1/2/2;
}
.page-stage .stage__entity {
  position: relative;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: 1/1/2/2;
}
.page-stage .stage__entity-button {
  cursor: default;
  position: absolute;
  width: min(22rem, 29.3333333333vw);
}
.page-stage .stage__entity-button::before {
  content: "";
  position: absolute;
  inset: min(2rem, 2.6666666667vw);
  background: center/contain url(../img/stage/miss_mark.svg) no-repeat;
  display: none;
  z-index: 20;
}
.page-stage .stage__entity-button img {
  position: relative;
  z-index: 5;
}
.page-stage .stage__entity-button[data-entity-hit=true][data-entity-clicked=true]::before {
  display: block;
  background-image: url(../img/stage/correct_mark.svg);
}
.page-stage .stage__entity-button:is([data-entity-wiggle], [data-entity-glimpses])[data-entity-clicked=true]::before {
  display: block;
}
.page-stage .stage__entity-flower {
  bottom: 7.5%;
  left: 6%;
  width: 34%;
}
.page-stage .stage__entity-house {
  top: 6%;
  right: 0;
  width: 24%;
}
.page-stage .stage__entity-tree1 {
  top: 18%;
  left: 0;
  width: 28%;
}
.page-stage .stage__entity-tree1 .animation-wiggle {
  position: absolute;
  right: 0;
  bottom: 0;
}
.page-stage .stage__entity-tree1 .animation-wiggle:nth-of-type(1) {
  /* 親(tree1: 210px)に対する比率 */
  width: 85.714285%;
  z-index: 7;
  translate: -70% 20%;
}
.page-stage .stage__entity-tree1 .animation-wiggle:nth-of-type(2) {
  z-index: 2;
  /* 親(tree1: 210px)に対する比率 */
  width: 104.761904%;
  translate: -8% -15%;
}
.page-stage .stage__entity-tree2 {
  top: 0;
  right: 22%;
  width: 34.133333%;
  scale: -1 1;
}
.page-stage .stage__entity-grass1 {
  top: 6%;
  right: 61%;
  width: 24%;
}
.page-stage .stage__entity-wiggle1 {
  top: 42%;
  right: 0%;
  width: 42.666666%;
}
.page-stage .stage__entity-glimpse1 {
  bottom: 12%;
  right: 18%;
  width: 29%;
  /* width指定がないため現状のまま */
}
.page-stage .stage__entity-glimpse2 {
  top: 32%;
  right: 43%;
  width: 29%;
  /* width指定がないため現状のまま */
}
.page-stage .stage__entity-glimpse {
  position: absolute;
  top: 4%;
  right: 13%;
  z-index: 2;
  width: 53.8666666667%;
}
.page-stage .stage__result {
  position: fixed;
  display: none;
}
@-webkit-keyframes WiggleObjectAnimation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  35% {
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
  }
  45% {
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  55% {
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
  }
  65% {
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  75% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  85% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes WiggleObjectAnimation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  35% {
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
  }
  45% {
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  55% {
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
  }
  65% {
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  75% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  85% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
.page-stage .stage__entity-button:not([data-entity-clicked=true]) .is-animation-wiggle {
  -webkit-animation: WiggleObjectAnimation 0.8s backwards alternate;
          animation: WiggleObjectAnimation 0.8s backwards alternate;
}
@-webkit-keyframes WiggleObjectAnimation-reverse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  35% {
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
  }
  45% {
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  55% {
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
  }
  65% {
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  75% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  85% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes WiggleObjectAnimation-reverse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  35% {
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
  }
  45% {
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  55% {
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
  }
  65% {
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  75% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  85% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
.page-stage .stage__entity-button:not([data-entity-clicked=true]) .is-animation-wiggle-reverse {
  -webkit-animation: WiggleObjectAnimation-reverse 0.8s backwards alternate;
          animation: WiggleObjectAnimation-reverse 0.8s backwards alternate;
}
@-webkit-keyframes HideObjectAnimation01 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
  }
  10% {
    -webkit-transform: translate(13%, -25%);
            transform: translate(13%, -25%);
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
  }
  40% {
    -webkit-transform: translate(13%, -25%);
            transform: translate(13%, -25%);
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
  }
  50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes HideObjectAnimation01 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
  }
  10% {
    -webkit-transform: translate(13%, -25%);
            transform: translate(13%, -25%);
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
  }
  40% {
    -webkit-transform: translate(13%, -25%);
            transform: translate(13%, -25%);
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
  }
  50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
.page-stage .stage__entity-button:not([data-entity-clicked=true]) .is-animation-hide01 {
  -webkit-animation: HideObjectAnimation01 3s ease-in-out;
          animation: HideObjectAnimation01 3s ease-in-out;
}
@-webkit-keyframes HideObjectAnimation02 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
  }
  50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50.001% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
  }
  60% {
    -webkit-transform: translate(13%, -25%);
            transform: translate(13%, -25%);
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
  }
  90% {
    -webkit-transform: translate(13%, -25%);
            transform: translate(13%, -25%);
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes HideObjectAnimation02 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
  }
  50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50.001% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
  }
  60% {
    -webkit-transform: translate(13%, -25%);
            transform: translate(13%, -25%);
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
  }
  90% {
    -webkit-transform: translate(13%, -25%);
            transform: translate(13%, -25%);
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
.page-stage .stage__entity-button:not([data-entity-clicked=true]) .is-animation-hide02 {
  -webkit-animation: HideObjectAnimation02 3s ease-in-out;
          animation: HideObjectAnimation02 3s ease-in-out;
}
.page-stage [data-entity-clicked] {
  pointer-events: none;
}