@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap");
header.header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2000;
}

.header-logo > a {
  display: inline-block;
  width: 300px;
}
.header-logo > a img {
  max-width: 100%;
}
@media screen and (max-width: 1000px) {
  .header-logo > a {
    width: 180px;
  }
}
@media screen and (max-width: 768px) {
  .header-logo > a {
    width: 150px;
  }
}
.header-logo > a:hover {
  opacity: 0.6;
}

body {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  background: #fff;
  font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: relative;
  line-height: 1.5;
  padding: 0;
  margin: 0;
  font-size: 16px;
}
body:before {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff url("../images/body-bg-1.png") no-repeat 0 0/cover;
  content: "";
  z-index: -1;
  -webkit-transform: translate(0, 0, 0);
          transform: translate(0, 0, 0);
}
body input {
  font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body a {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
body p {
  margin-top: 1em;
  margin-bottom: 0;
}
body * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
body img {
  pointer-events: none;
}

.section {
  padding: 50px 20px;
}
.section .section-inner > *:first-child {
  margin-top: 0;
}
.section--result .section-inner, .section--index .section-inner, .section--game .section-inner {
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.85);
  padding: 4em 30px 3.5em;
  border-radius: 28px;
  border: 4px solid #999;
  max-width: 970px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .section--result .section-inner, .section--index .section-inner, .section--game .section-inner {
    padding: 3em 20px;
  }
}
.section--game {
  display: none;
}
.section--game .section-inner {
  padding-top: 0;
  max-width: 730px;
}
@media screen and (max-width: 768px) {
  .section--game .section-inner {
    padding-bottom: 2em;
  }
}
.section--result {
  display: none;
}
.section--result .section-inner {
  max-width: 730px;
}
@media screen and (max-width: 768px) {
  .section--result .section-inner {
    padding-bottom: 2em;
  }
}

.head-h2 {
  text-align: center;
  margin: 2em 0 0;
}
.head-h2 > img {
  max-width: 100%;
}

.lyt-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0 40px;
  margin-top: 1em;
}
.lyt-column-item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-top: 1em;
}
.lyt-column--col3 > .lyt-column-item {
  max-width: 300px;
}
@media screen and (max-width: 768px) {
  .lyt-column {
    margin-top: 0;
  }
  .lyt-column--col3 > .lyt-column-item {
    margin-top: 2em;
  }
}

.box-index {
  background: #000;
  color: #fff;
  border: 5px solid #0787D8;
  border-radius: 10px;
  padding: 20px 15px;
}
.box-index > h3 {
  text-align: center;
  margin: 0;
}
.box-index > p {
  margin-top: 0.5em;
  min-height: 4.5em;
}
.box-index-button {
  margin-top: 1em;
  text-align: center;
}
.box-index-button > a {
  display: inline-block;
}
.box-index--timeattack {
  border-color: #7606CB;
}

@media screen and (min-width: 769px) {
  .u-ta-center-pc {
    text-align: center;
  }
}

.gm-time {
  text-align: center;
  line-height: 1;
  margin-top: 30px;
}
.gm-time-bg {
  background: url("../images/time-bg.png") no-repeat center center;
  width: 144px;
  height: 57px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
}
.gm-time-bg img {
  margin: 0 3px;
}
.gm-time.is-hurry {
  color: red;
}
@media screen and (max-width: 768px) {
  .gm-time {
    margin-top: 17px;
  }
}

.gm-card {
  margin-top: 0.5em;
  text-align: center;
  position: relative;
}
.gm-card-img {
  display: inline-block;
  max-width: 300px;
}
.gm-card-img img {
  max-width: 100%;
}
@media screen and (max-width: 768px) {
  .gm-card-img {
    max-width: 160px;
  }
}
.gm-card-name {
  display: none;
  padding: 5px 1em;
  border-radius: 10em;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.gm-head {
  text-align: center;
  margin: 0 -30px 40px;
  background: #000;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  padding: 8px 5px 6px;
}
.gm-head > span {
  font-size: 33px;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .gm-head {
    padding: 1px 5px;
    margin-bottom: 0;
  }
}

.gm-course {
  text-align: center;
  margin: 40px 0 0;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .gm-course {
    margin-top: 17px;
  }
  .gm-course > img {
    max-height: 21px;
  }
}

.gm-layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 30px;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  max-width: 590px;
}
.gm-layout-card {
  width: 230px;
}
.gm-layout-control {
  width: calc(100% - 260px);
  position: relative;
}
@media screen and (max-width: 768px) {
  .gm-layout {
    margin-top: 17px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .gm-layout-card {
    width: 100%;
  }
  .gm-layout-control {
    width: 100%;
  }
}

.gm-modal-answer {
  position: absolute;
  width: 100%;
  text-align: center;
  left: 0;
  top: 0;
  display: none;
}
.gm-modal-answer > img {
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .gm-modal-answer > img {
    max-width: 244px;
  }
}

.gm-input {
  margin-top: 0.5em;
}
.gm-input-text {
  width: 100%;
  font-size: 20px;
  padding: 8px;
  text-align: center;
  border: 3px solid #000;
  border-radius: 10px;
  vertical-align: middle;
  line-height: 1;
  -webkit-appearance: none;
}
@media screen and (max-width: 768px) {
  .gm-input-text {
    font-size: 16px;
  }
}
.gm-input-text:focus {
  outline: none;
}
.gm-input-text.is-incorrect {
  -webkit-animation: ani_incorrect 1s infinite;
          animation: ani_incorrect 1s infinite;
  border-color: #FF00BA;
  background: #FFD1F3;
}

@-webkit-keyframes ani_incorrect {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  5% {
    -webkit-transform: translate(-5px, 0);
            transform: translate(-5px, 0);
  }
  10% {
    -webkit-transform: translate(5px, 0);
            transform: translate(5px, 0);
  }
  15% {
    -webkit-transform: translate(-5px, 0);
            transform: translate(-5px, 0);
  }
  20% {
    -webkit-transform: translate(5px, 0);
            transform: translate(5px, 0);
  }
  25% {
    -webkit-transform: translate(-5px, 0);
            transform: translate(-5px, 0);
  }
  30% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

@keyframes ani_incorrect {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  5% {
    -webkit-transform: translate(-5px, 0);
            transform: translate(-5px, 0);
  }
  10% {
    -webkit-transform: translate(5px, 0);
            transform: translate(5px, 0);
  }
  15% {
    -webkit-transform: translate(-5px, 0);
            transform: translate(-5px, 0);
  }
  20% {
    -webkit-transform: translate(5px, 0);
            transform: translate(5px, 0);
  }
  25% {
    -webkit-transform: translate(-5px, 0);
            transform: translate(-5px, 0);
  }
  30% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
.gm-key {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 24px;
  gap: 10px 15px;
}
@media screen and (max-width: 768px) {
  .gm-key {
    gap: 6px 12px;
  }
}
.gm-key-item {
  width: calc(20% - 12px);
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.gm-key-item > img {
  max-width: 100%;
}

.gm-button-wrap {
  margin-top: 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0 15px;
  line-height: 1;
}
.gm-button-wrap-item:first-child {
  width: 46%;
}
@media screen and (max-width: 768px) {
  .gm-button-wrap-item:first-child {
    width: 51%;
  }
}

.gm-button {
  display: inline-block;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.gm-button img {
  max-width: 100%;
}
.gm-button--clear {
  margin-bottom: 4px;
}
@media screen and (max-width: 768px) {
  .gm-button--clear {
    margin-bottom: 9px;
  }
}

.gm-modal {
  position: fixed;
  width: 100%;
  height: 100vh;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  top: 0;
  left: 0;
  padding: 0 2em;
  background: rgba(0, 0, 0, 0.8);
}
.gm-modal-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 480px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .gm-modal-inner {
    width: 100%;
    max-width: calc(100% - 40px);
  }
}
.gm-modal--count .gm-modal-inner > span {
  line-height: 1;
}
.gm-modal--timeup {
  color: #fff;
  display: none;
}
.gm-modal--timeup .gm-modal-inner > span {
  font-size: 4em;
  font-weight: bold;
  font-family: sans-serif;
}
@media screen and (max-width: 768px) {
  .gm-modal--timeup .gm-modal-inner > span {
    font-size: 2em;
  }
}
.gm-modal--retired {
  display: none;
}
.gm-modal--retired .gm-modal-inner {
  background: #fff;
  border-radius: 1em;
  padding: 2em 1em;
  text-align: center;
  border: 5px solid #999;
}
.gm-modal--retired .gm-modal-inner .retired-head > span {
  display: inline-block;
  margin-top: 0.5em;
}
.gm-modal--retired .gm-modal-inner .retired-button > img {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
}
.gm-modal--retired .gm-modal-inner .retired-button--yes {
  margin-top: 1em;
}
.gm-modal--retired .gm-modal-inner .retired-button--no {
  margin-top: 0.5em;
}

.gm-resultbox {
  text-align: center;
  background: url("../images/result-bg-gold.png") no-repeat center center/100% 100%;
  color: #fff;
  font-weight: bold;
  position: relative;
  line-height: 1;
  margin-top: 66px;
  padding-bottom: 30px;
}
.gm-resultbox-head {
  text-align: center;
  position: relative;
  top: -50px;
  margin-bottom: -50px;
}
.gm-resultbox-head > img {
  max-width: 100%;
}
@media screen and (max-width: 768px) {
  .gm-resultbox-head {
    top: -31px;
    margin-bottom: -31px;
  }
  .gm-resultbox-head > img {
    width: 252px;
  }
}
.gm-resultbox-num > span {
  display: inline-block;
  font-size: 95px;
}
.gm-resultbox-num > small {
  display: inline-block;
  font-size: 34px;
  margin-left: 10px;
  margin-right: 10px;
}
@media screen and (max-width: 768px) {
  .gm-resultbox-num > span {
    font-size: 62px;
  }
  .gm-resultbox-num > small {
    font-size: 20px;
    margin-left: 2px;
    margin-right: 2px;
  }
}
.gm-resultbox--time, .gm-resultbox--151 {
  display: none;
}
.gm-resultbox--gold .gm-resultbox-num span {
  color: #D39322;
}
.gm-resultbox--silver {
  background-image: url("../images/result-bg-silver.png");
}
.gm-resultbox--silver .gm-resultbox-num span {
  color: #B5ACA2;
}
.gm-resultbox--copper {
  background-image: url("../images/result-bg-copper.png");
}
.gm-resultbox--copper .gm-resultbox-num span {
  color: #E88E5C;
}
.gm-resultbox--beginner {
  background-image: url("../images/result-bg-beginner.png");
}
.gm-resultbox--beginner .gm-resultbox-num span {
  color: #8EC31F;
}
.gm-resultbox-nomiss {
  position: absolute;
  top: 50%;
  right: -4px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .gm-resultbox-nomiss {
    width: 50px;
    right: -3px;
  }
  .gm-resultbox-nomiss > img {
    max-width: 100%;
  }
}
.gm-resultbox-head2 {
  text-align: center;
  margin-top: 60px;
  line-height: 1;
}
.gm-resultbox-list {
  display: none;
}
.gm-resultbox-list-card {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0;
  padding: 0;
}
.gm-resultbox-list-card > li {
  width: 20%;
  padding: 0 8px;
  margin-top: 16px;
}
.gm-resultbox-list-card > li img {
  max-width: 100%;
}
@media screen and (max-width: 768px) {
  .gm-resultbox-list-card > li {
    width: 25%;
    padding: 0 4px;
    margin-top: 4px;
  }
}
.gm-resultbox-sns, .gm-resultbox-button {
  text-align: center;
  margin-top: 1em;
}
.gm-resultbox-sns > a, .gm-resultbox-button > a {
  display: inline-block;
}