@charset "UTF-8";
.wrap {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video_wrap {
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.sound_btns {
  z-index: 100;
  background: white;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 450px) {
  .sound_btns {
    flex-direction: column;
  }
}
.sound_btns .btn_sound {
  width: min(308px, 24.0625vw);
  height: min(144px, 11.25vw);
}
@media screen and (max-width: 450px) {
  .sound_btns .btn_sound {
    width: 60vw;
    height: 28.0519480519vw;
  }
}
.sound_btns .btn_sound:first-of-type {
  margin-right: 70px;
}
@media screen and (max-width: 450px) {
  .sound_btns .btn_sound:first-of-type {
    margin-right: 0;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 450px) {
  .sound_btns .btn_sound {
    width: 100%;
    padding: 15px;
    font-size: 16px;
  }
}
.sound_btns .sound_on {
  background: url(../img/btn_sound-on.svg) center/contain no-repeat;
}
@media screen and (min-width: 451px) {
  .sound_btns .sound_on:not(.ios .sound_btns .sound_on):not(.android .sound_btns .sound_on):hover {
    background: url(../img/btn_sound-on-hover.svg) center/contain no-repeat;
  }
}
.sound_btns .sound_off {
  background: url(../img/btn_sound-off.svg) center/contain no-repeat;
}
@media screen and (min-width: 451px) {
  .sound_btns .sound_off:not(.ios .sound_btns .sound_off):not(.android .sound_btns .sound_off):hover {
    background: url(../img/btn_sound-off-hover.svg) center/contain no-repeat;
  }
}

.btn_play {
  display: none;
  width: 164px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: opacity 0.3s;
}
@media screen and (max-width: 450px) {
  .btn_play {
    width: 20%;
  }
}
@media screen and (min-width: 451px) {
  .btn_play:not(.ios .btn_play):not(.android .btn_play):hover {
    opacity: 0.7;
  }
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.selection {
  width: 675px;
  height: 258px;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  position: absolute;
  display: none;
}
.selection .btn {
  width: 100%;
  cursor: pointer;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.selection.selection01 {
  flex-direction: row;
}
.selection.selection01 .btn {
  height: 100%;
}
.selection.selection01 .btn01 {
  background-image: url(../img/selection01_btn01.svg);
}
@media screen and (min-width: 451px) {
  .selection.selection01 .btn01:not(.ios .selection.selection01 .btn01):not(.android .selection.selection01 .btn01):hover {
    background-image: url(../img/selection01_btn01-hover.svg);
  }
}
.selection.selection01 .btn02 {
  background-image: url(../img/selection01_btn02.svg);
}
@media screen and (min-width: 451px) {
  .selection.selection01 .btn02:not(.ios .selection.selection01 .btn02):not(.android .selection.selection01 .btn02):hover {
    background-image: url(../img/selection01_btn02-hover.svg);
  }
}
.selection.selection02 .btn01 {
  grid-area: el01;
  background-image: url(../img/selection02_btn01.svg);
}
@media screen and (min-width: 451px) {
  .selection.selection02 .btn01:not(.ios .selection.selection02 .btn01):not(.android .selection.selection02 .btn01):hover {
    background-image: url(../img/selection02_btn01-hover.svg);
  }
}
.selection.selection02 .btn02 {
  grid-area: el02;
  background-image: url(../img/selection02_btn02.svg);
}
@media screen and (min-width: 451px) {
  .selection.selection02 .btn02:not(.ios .selection.selection02 .btn02):not(.android .selection.selection02 .btn02):hover {
    background-image: url(../img/selection02_btn02-hover.svg);
  }
}
.selection.selection02 .btn03 {
  grid-area: el03;
  background-image: url(../img/selection02_btn03.svg);
}
@media screen and (min-width: 451px) {
  .selection.selection02 .btn03:not(.ios .selection.selection02 .btn03):not(.android .selection.selection02 .btn03):hover {
    background-image: url(../img/selection02_btn03-hover.svg);
  }
}
.selection.selection03 .btn01 {
  background-image: url(../img/selection03_btn01.svg);
}
@media screen and (min-width: 451px) {
  .selection.selection03 .btn01:not(.ios .selection.selection03 .btn01):not(.android .selection.selection03 .btn01):hover {
    background-image: url(../img/selection03_btn01-hover.svg);
  }
}
.selection.selection03 .btn02 {
  background-image: url(../img/selection03_btn02.svg);
}
@media screen and (min-width: 451px) {
  .selection.selection03 .btn02:not(.ios .selection.selection03 .btn02):not(.android .selection.selection03 .btn02):hover {
    background-image: url(../img/selection03_btn02-hover.svg);
  }
}
.selection.selection03 .btn03 {
  background-image: url(../img/selection03_btn03.svg);
}
@media screen and (min-width: 451px) {
  .selection.selection03 .btn03:not(.ios .selection.selection03 .btn03):not(.android .selection.selection03 .btn03):hover {
    background-image: url(../img/selection03_btn03-hover.svg);
  }
}

.btn_stop {
  font-size: 16px;
  line-height: 22px;
  width: 200px;
  height: 50px;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.hide {
  display: none;
}

.closing {
  background: white;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  display: none;
  z-index: 1000;
}
@media screen and (max-width: 450px) {
  .closing {
    flex-direction: column;
    row-gap: 10px;
  }
}
.closing .btn_restart {
  display: block;
  width: min(304px, 23.75vw);
  height: min(139px, 10.859375vw);
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 0.3s;
  position: absolute;
}
@media screen and (max-width: 450px) {
  .closing .btn_restart {
    position: static;
    width: 50vw;
    height: 22.8618421053vw;
  }
}
@media screen and (min-width: 451px) {
  .closing .btn_restart:hover:not(.ios .closing .btn_restart:hover):not(.android .closing .btn_restart:hover).is-top {
    background-image: url(../img/btn_restart_top-hover.svg);
  }
  .closing .btn_restart:hover:not(.ios .closing .btn_restart:hover):not(.android .closing .btn_restart:hover).is-link {
    background-image: url(../img/btn_restart_link-hover.svg);
  }
  .closing .btn_restart:hover:not(.ios .closing .btn_restart:hover):not(.android .closing .btn_restart:hover).is-q1 {
    background-image: url(../img/btn_restart_q1-hover.svg);
  }
  .closing .btn_restart:hover:not(.ios .closing .btn_restart:hover):not(.android .closing .btn_restart:hover).is-q2 {
    background-image: url(../img/btn_restart_q2-hover.svg);
  }
  .closing .btn_restart:hover:not(.ios .closing .btn_restart:hover):not(.android .closing .btn_restart:hover).is-q3 {
    background-image: url(../img/btn_restart_q3-hover.svg);
  }
}
.closing .btn_restart.is-top {
  background-image: url(../img/btn_restart_top.svg);
  top: calc(50vh - min(1280px, 100vw) * 182 / 1280);
  left: calc(50vw - min(1280px, 100vw) * 328 / 1280);
}
.closing .btn_restart.is-link {
  background-image: url(../img/btn_restart_link.svg);
  top: calc(50vh - min(1280px, 100vw) * 182 / 1280);
  left: calc(50vw + min(1280px, 100vw) * 23 / 1280);
}
.closing .btn_restart.is-q1 {
  background-image: url(../img/btn_restart_q1.svg);
  top: calc(50vh + min(1280px, 100vw) * 22 / 1280);
  left: calc(50vw - min(1280px, 100vw) * 499 / 1280);
}
.closing .btn_restart.is-q2 {
  background-image: url(../img/btn_restart_q2.svg);
  top: calc(50vh + min(1280px, 100vw) * 22 / 1280);
  left: calc(50vw - min(1280px, 100vw) * 149 / 1280);
}
.closing .btn_restart.is-q3 {
  background-image: url(../img/btn_restart_q3.svg);
  top: calc(50vh + min(1280px, 100vw) * 22 / 1280);
  left: calc(50vw + min(1280px, 100vw) * 196 / 1280);
}

.animation {
  display: none;
}
.animation [class^=icon_man-] {
  position: absolute;
  z-index: 1000;
  opacity: 0;
}
.animation.is-correct {
  display: block;
}
.animation.is-correct .icon_man-stand {
  opacity: 1;
  animation: switchIcon02 1.6s steps(2, jump-none) infinite;
  animation-delay: 2s;
}
.animation.is-correct .icon_man-jump {
  animation: switchIcon01 1.6s steps(2, jump-none) infinite;
  animation-delay: 2s;
}
.animation.is-wrong {
  display: block;
}
.animation.is-wrong .icon_man-stand {
  opacity: 1;
  animation: hideIcon 1.6s steps(2, jump-none) forwards 1;
  animation-delay: 2s;
}
.animation.is-wrong .icon_man-down {
  animation: showIcon 1.6s steps(2, jump-none) forwards 1;
  animation-delay: 2s;
}
@keyframes switchIcon01 {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes switchIcon02 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes showIcon {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes hideIcon {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.balloon {
  display: none;
  position: absolute;
}
.balloon.is-animated {
  animation: blink 8s steps(1) infinite;
}
@keyframes blink {
  0%, 62.5% { /* 0秒と5秒（全体の62.5%）の間は表示 */
    opacity: 1;
  }
  62.5%, 100% { /* 5秒から8秒（全体の100%）の間は非表示 */
    opacity: 0;
  }
}

.btn_outlink {
  display: none;
  position: absolute;
}