@charset "UTF-8";
/* Mplus 1c */
@font-face {
  font-display: swap;
  font-family: "M PLUS Rounded 1c";
  src: url("../../assets/fonts/mplusrounded1c-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-display: swap;
  font-family: "M PLUS Rounded 1c";
  src: url("../../assets/fonts/mplusrounded1c-medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-display: swap;
  font-family: "M PLUS Rounded 1c";
  src: url("../../assets/fonts/mplusrounded1c-extrabold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-display: swap;
  font-family: "M PLUS Rounded 1c";
  src: url("../../assets/fonts/mplusrounded1c-black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}
/* Sacramento */
@font-face {
  font-display: swap;
  font-family: "Sacramento";
  src: url("../../assets/fonts/sacramento-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
/* Sansita One */
@font-face {
  font-display: swap;
  font-family: "Sansita One";
  src: url("../../assets/fonts/sansitaone.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
/* SPファースト */
html {
  font-size: 16px;
}
@media (max-width: 375px) {
  html {
    font-size: 4.2666666667vw;
  }
}
@media screen and (min-width: 768px) {
  html {
    font-size: 4.2666666667vw;
  }
}
@media (min-width: 375px) {
  html {
    font-size: 16px;
  }
}

/* フォントカラーは、使用頻度が多いものを選択する */
body {
  font-family: "M PLUS Rounded 1c", sans-serif;
  color: #333333;
  line-height: 1;
}

@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

/* YouTubeのframeborder属性の変わり(HTML5の標準仕様で廃止されているため) */
iframe {
  border: none;
}

/* ジャギー対策 */
img {
  image-rendering: auto;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

ul,
ol {
  padding: 0;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

ul,
ol {
  list-style: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

a {
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
  max-width: 100%;
}

article > * + * {
  margin-top: 1em;
}

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

img:not([alt]) {
  filter: blur(10px);
}

input,
button,
select,
textarea {
  font: inherit;
  border: none;
  border-radius: 0;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

textarea {
  resize: none;
}

input[type=checkbox],
input[type=radio] {
  display: none;
}

input[type=submit],
input[type=button],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

button {
  padding: 0;
}

.inner {
  width: 100%;
  padding-right: 0.9375rem;
  padding-left: 0.9375rem;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  .inner {
    max-width: 25.3125rem;
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}

.audio {
  width: 3rem;
}
@media screen and (min-width: 1440px) {
  .audio {
    width: 3.75rem;
  }
}

.audio__btn-items {
  position: relative;
  width: 100%;
  cursor: pointer;
}

.audio__btn-item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 100%;
}

.audio__btn {
  display: none;
}

.audio__btn-off {
  display: inline;
}

.is-audio-on .audio__btn-on {
  display: inline;
}

.is-audio-on .audio__btn-off {
  display: none;
}

body {
  position: relative;
}

.body__main-logo {
  display: none;
}
@media screen and (min-width: 1440px) {
  .body__main-logo {
    display: block;
    position: absolute;
    top: 23.75rem;
    right: calc(50% + 2.5rem);
    max-width: 18.75rem;
    width: 100%;
  }
}
@media screen and (min-width: 1440px) {
  .body__main-logo {
    right: calc(50% + 14.5833333333vw);
    max-width: 27.7777777778vw;
  }
}

.body-bg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.body-bg::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  background-color: #e3f1f0;
  width: 100%;
  height: 100%;
  z-index: -9;
}

.btn {
  display: inline-block;
  transition: all 0.3s;
  cursor: pointer;
}

@media (any-hover: hover) {
  .btn:hover {
    filter: brightness(1.2);
  }
}
.btn-shot {
  width: 3.125rem;
}

.btn-next {
  position: absolute;
  top: 89%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9.9375rem;
}

.btn-score {
  max-width: 13rem;
  width: 100%;
  margin-inline: auto;
}

.btn-next-hole {
  max-width: 14.4375rem;
  width: 100%;
  margin-inline: auto;
}

.btn-back {
  max-width: 9.9375rem;
  width: 100%;
  margin-inline: auto;
}

.btn-todays-result {
  max-width: 17.0625rem;
  width: 100%;
  margin-inline: auto;
}

.btn-top-back.btn-top-back-my-page {
  max-width: 9.5rem;
  width: 100%;
  margin-inline: auto;
}

.content-wrapper {
  height: 100dvh;
  max-width: 48rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .content-wrapper {
    max-width: 31.25rem;
    margin-inline: auto;
  }
}
@media screen and (min-width: 1440px) {
  .content-wrapper {
    max-width: 31.25rem;
    margin-left: 43.5416666667vw;
  }
}

.content-wrapper.content-wrapper-rule,
.content-wrapper.content-wrapper-result {
  height: 100%;
  height: 100dvh;
  overflow-y: auto;
}

.content-wrapper.content-wrapper-my-page {
  height: 100dvh;
}

.content-wrapper.content-wrapper-top,
.content-wrapper.content-wrapper-play {
  height: 100dvh;
}
@media screen and (min-width: 768px) {
  .content-wrapper.content-wrapper-top,
  .content-wrapper.content-wrapper-play {
    height: 100%;
    max-height: 67.625rem;
  }
}

.content-wrapper__inner {
  position: relative;
}
@media screen and (min-width: 768px) {
  .content-wrapper__inner {
    overflow: hidden;
  }
}

.content-area,
.content-area-play {
  position: relative;
  height: 100dvh;
}
@media screen and (min-width: 768px) {
  .content-area,
  .content-area-play {
    height: 100%;
  }
}

.content-area.content-area-top,
.content-area.content-area-play {
  overflow-y: hidden;
}

.content-area.content-area-rule {
  height: 100dvh;
  overflow-y: auto;
}

.content-area-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-image: url(../../assets/images/bg/bg-top.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 100% 50%;
  width: 100%;
  height: 100dvh;
  z-index: -5;
}
@media screen and (min-width: 768px) {
  .content-area-top::before {
    height: 100%;
  }
}

.content-area-rule::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-image: url(../../assets/images/bg/bg-rule.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0% 100%;
  width: 100%;
  height: 100dvh;
  z-index: -5;
}
@media screen and (min-width: 768px) {
  .content-area-rule::before {
    height: 100%;
  }
}

.content-area-result::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-image: url(../../assets/images/bg/bg-result.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  width: 100%;
  height: 100dvh;
  z-index: -5;
}
@media screen and (min-width: 768px) {
  .content-area-result::before {
    height: 100%;
  }
}

.content-area-play::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  width: 100%;
  aspect-ratio: 375/600;
  z-index: -6;
}

/* ---------- 天候 | ここから ---------- */
.content-area-play.content-area-play-sunny::before {
  background-image: url(../../assets/images/bg/bg-sunny.jpg);
}

.content-area-play.content-area-play-rain::before {
  background-image: url(../../assets/images/bg/bg-rain.jpg);
}

.content-area-play.content-area-play-typhoon::before {
  background-image: url(../../assets/images/bg/bg-typhoon.jpg);
}

.content-area-play::after {
  content: "";
  position: absolute;
  bottom: -5rem;
  left: 50%;
  transform: translateX(-50%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  width: 100%;
  aspect-ratio: 375/670;
  z-index: -5;
}
@media screen and (min-width: 768px) {
  .content-area-play::after {
    bottom: 0;
  }
}

/* ---------- 天候 | ここまで ---------- */
.content-area-play.content-area-play-sunny::after {
  background-image: url(../../assets/images/bg/bg-sunny.jpg);
}

/* ---------- コース | ここから ---------- */
.content-area-play.content-area-play-01::after {
  background-image: url(../../assets/images/play/play-01.png);
}

.content-area-play.content-area-play-02::after {
  background-position: 30% 50%;
  background-image: url(../../assets/images/play/play-02.png);
}

.content-area-play.content-area-play-03::after {
  background-image: url(../../assets/images/play/play-03.png);
}

.content-area-play.content-area-play-04::after {
  background-image: url(../../assets/images/play/play-04.png);
  background-position: 70% 50%;
}

.content-area-play.content-area-play-05::after {
  background-image: url(../../assets/images/play/play-05.png);
  background-position: 90% 50%;
}

/* ---------- コース | ここまで ---------- */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: 100000;
  background-color: #fffaed;
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.loading-fadeout {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.loading-hidden {
  display: none;
}

.loading__container {
  height: 50dvh;
  display: flex;
  display: grid;
  align-items: center;
  grid-template-rows: 1fr 1fr 1fr;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .loading__container {
    height: 70dvh;
  }
}

.loading__logo {
  max-width: 12.5rem;
  width: 100%;
  z-index: 2;
  margin-inline: auto;
}

.loading__logo img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 40dvh;
  margin-inline: auto;
}

.loading__progress-bar {
  position: relative;
  left: 0;
  width: 100%;
  height: 6.25rem;
}

.loading__progress-bar::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 0.3125rem;
  background: transparent linear-gradient(90deg, #ffea01 0%, #ff7a00 30%, #e54c00 70%, #ff0022 100%) 0% 0% no-repeat padding-box;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-fill-mode: forwards; /*アニメーションの開始と終了時の状態を指定*/
  animation-name: line-anime;
  transform: scale(-0.2, 1); /*X方向0、Y方向1*/
  transform-origin: left top; /*左上基点*/
  animation-timing-function: linear;
  will-change: transform;
}
@media screen and (min-width: 768px) {
  .loading__progress-bar::before {
    height: 0.625rem;
  }
}

@keyframes line-anime {
  from {
    transform: scale(-0.2, 1);
  }
  to {
    transform: scale(1, 1);
  }
}
.loading__rocket {
  position: absolute;
  top: 53%;
  left: -20%;
  transform: translateY(-50%);
  width: 5rem;
  background-image: url(../../assets/images/common/golf-ball.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 5rem;
  height: 1.96875rem;
  margin: auto;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-fill-mode: forwards; /*アニメーションの開始と終了時の状態を指定*/
  animation-name: rocketAnime;
  animation-timing-function: linear;
  will-change: transform;
}
@media screen and (min-width: 768px) {
  .loading__rocket {
    top: 55%;
    width: 9.375rem;
    height: 3.6875rem;
  }
}

@keyframes rocketAnime {
  from {
    left: -20%;
  }
  to {
    left: 100%;
  }
}
.loading__text-wrapper {
  position: relative;
  left: 50%;
  transform: translate(-50%, -50%);
  transform: translateX(-50%);
  width: 100%;
  z-index: 3;
}

.loading__text {
  display: flex;
  justify-content: center;
  gap: 0.625rem;
}

.loading__text span {
  display: inline-block;
  font-size: 3.125rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  color: #ff7a00;
  letter-spacing: 0.01em;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #2e2e2e;
  text-transform: uppercase;
  text-shadow: 0.125rem 0.125rem 0 #2e2e2e;
  animation: textBounce 1.2s ease-in-out infinite;
  transform-origin: bottom;
}

@keyframes textBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  20% {
    transform: translateY(-35%) scale(1.15, 0.85);
  }
  40% {
    transform: translateY(0) scale(0.9, 1.1);
  }
  60% {
    transform: translateY(-18%) scale(1.05, 0.95);
  }
  80% {
    transform: translateY(0) scale(1);
  }
}
.loading__text span:nth-child(1) {
  animation-delay: 0s;
}

.loading__text span:nth-child(2) {
  animation-delay: 0.1s;
}

.loading__text span:nth-child(3) {
  animation-delay: 0.2s;
}

.loading__text span:nth-child(4) {
  animation-delay: 0.3s;
}

.loading__text span:nth-child(5) {
  animation-delay: 0.4s;
}

.loading__text span:nth-child(6) {
  animation-delay: 0.5s;
}

.loading__text span:nth-child(7) {
  animation-delay: 0.6s;
}

.loading__text span:nth-child(8) {
  animation-delay: 0.7s;
}

.loading__text span:nth-child(9) {
  animation-delay: 0.8s;
}

.loading__text span:nth-child(10) {
  animation-delay: 0.9s;
}

/* モーダルと背景の指定 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  box-sizing: border-box;
  z-index: 2000;
}

.modal__wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 31.25rem;
}

.modal__wrapper img {
  aspect-ratio: 1/1;
}

/* クラスが追加された時の指定 */
.modal.is-active-modal {
  opacity: 1;
  visibility: visible;
  height: 100dvh;
}

/* モーダルを閉じるボタンの指定 */
.modal__close {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../../assets/images/common/btn-close.svg);
  background-size: cover;
  background-repeat: no-repeat;
  width: 3.125rem;
  height: 3.125rem;
  cursor: pointer;
  z-index: 1;
  transition: all 0.3s;
}

@media (any-hover: hover) {
  .modal__close:hover {
    filter: brightness(1.2);
  }
}
/* モーダルJS関係 */
.js-modal {
  display: none; /* 初期状態では非表示 */
  opacity: 0;
  transition: all 0.3s;
}

.is-active-modal {
  display: block; /* 表示スタイルに応じて */
  opacity: 1;
  transition: all 0.3s;
}

.my-page {
  height: 100dvh;
}

.my-page__container {
  position: relative;
  padding-top: 3.125rem;
  padding-bottom: 6.25rem;
  width: 90.9%;
  max-width: 31.25rem;
  margin-inline: auto;
  height: 100dvh;
  overflow-y: auto;
}

/* スクロールバー非表示 | ここから -------------- */
.my-page__container {
  -ms-overflow-style: none; /* IE, Edge 対応 */
  scrollbar-width: none; /* Firefox 対応 */
}

.my-page__container::-webkit-scrollbar {
  display: none; /* Chrome, Safari 対応 */
}

/* スクロールバー非表示 | ここまで -------------- */
.may-page__btn-todays-result,
.may-page__btn-top-back {
  margin-top: 0.9375rem;
  text-align: center;
}

.panel {
  position: relative;
  margin-inline: auto;
  border: 0.25rem solid #ff7a00;
  border-radius: 1.5625rem;
}

.panel::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 0.5rem);
  height: calc(100% - 0.5rem);
  border: 1px solid #d5d5d5;
  border-radius: 0.9375rem;
  z-index: -1;
}

.panel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 0.1875rem);
  height: calc(100% + 0.1875rem);
  background-color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  border-radius: 1.5625rem;
  z-index: -2;
}

.error__panel.panel {
  padding-block: 6.25rem;
}

.error__message {
  font-size: 4.375rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  color: #ff0022;
  text-align: center;
}

.panel-01 {
  padding-top: 2.5rem;
  padding-bottom: 0.9375rem;
}

.panel-02 {
  padding-top: 0.625rem;
  padding-bottom: 0.9375rem;
}

.panel.my-page__panel {
  padding-top: 3.125rem;
  padding-bottom: 2.5rem;
}

.panel__heading {
  position: absolute;
  top: -1.4375rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.4375rem 0.625rem;
  border-radius: 0.75rem;
  background-color: #ff7a00;
  max-width: 18.0625rem;
  width: 100%;
  margin-inline: auto;
}

.panel__heading-text {
  font-size: 1.75rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  color: #ffffff;
  -webkit-text-stroke: 0.4375rem #e54c00;
  paint-order: stroke fill;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
}

.panel__my-page-text-01 {
  font-size: 1.5rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  color: #ffffff;
  -webkit-text-stroke: 0.375rem #2e2e2e;
  paint-order: stroke fill;
  letter-spacing: 0.1em;
  text-align: center;
}

.panel__my-page-text-02 {
  font-size: 1rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  color: #ffffff;
  -webkit-text-stroke: 0.4375rem #2e2e2e;
  paint-order: stroke fill;
  letter-spacing: 0.2em;
  line-height: 1.8;
  text-align: center;
}

.panel__cup {
  max-width: 18.75rem;
  width: 100%;
  margin-inline: auto;
  border-radius: 0.75rem;
  background-color: #ffea01;
  padding-block: 0.625rem;
  margin-top: 1.875rem;
}

.panel__cup-text-01 {
  font-size: 1.375rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  color: #2e2e2e;
  text-align: center;
  white-space: nowrap;
}

.panel__cup-text-02 {
  font-size: 1rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  color: #2e2e2e;
  text-align: center;
  margin-top: 0.625rem;
}

.panel__round-wrapper:nth-child(n+2) {
  margin-top: 1.5625rem;
}

.panel__label {
  font-size: 1.5rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  color: #ffffff;
  -webkit-text-stroke: 0.5rem #2e2e2e;
  paint-order: stroke fill;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
}

.panel__round-current,
.panel__today-total,
.panel__total {
  font-size: 4.375rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  color: #ff0022;
  text-align: center;
  margin-top: 0.9375rem;
}

.panel__btn {
  margin-top: 1.875rem;
  text-align: center;
}

.panel__score-text-01 {
  font-size: 0.75rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  color: #ffffff;
  -webkit-text-stroke: 0.3125rem #2e2e2e;
  paint-order: stroke fill;
  letter-spacing: 0.1em;
  text-align: center;
}

.panel__score-text-02 {
  font-size: 1rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  color: #ff0022;
  text-align: center;
}

.panel__badge {
  position: relative;
  margin-top: 1.3125rem;
  margin-inline: auto;
  max-width: 10.25rem;
}

.panel__badge img {
  aspect-ratio: 1/1;
}

.panel__achievement {
  margin-top: 3.125rem;
}

.panel__achievement-text-01 {
  font-size: 1rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  color: #2e2e2e;
  -webkit-text-stroke: 0.1875rem #ffffff;
  paint-order: stroke fill;
  letter-spacing: 0.1em;
  text-align: center;
}

.panel__achievement-text-02 {
  font-size: 2.25rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  color: #ffffff;
  -webkit-text-stroke: 0.4375rem #2e2e2e;
  paint-order: stroke fill;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-align: center;
  margin-top: 0.9375rem;
}

.panel__badge-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 1.3125rem; /* 上下の余白 */
  column-gap: 1.5rem; /* 左右の余白 */
  max-width: 17.125rem;
  width: 100%;
  margin-inline: auto;
  padding-right: 0.75rem;
  margin-top: 1.5625rem;
}

.panel__badge-item-title {
  font-size: 0.875rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  color: #2e2e2e;
  text-align: center;
  padding: 0.3125rem;
  background-color: #ffea01;
  border-radius: 0.75rem;
}

.panel__badge-item-wrapper {
  position: relative;
  border-radius: 1.25rem;
  border: 0.1875rem solid #ff7a00;
  background-color: rgba(255, 255, 255, 0.9);
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 118/94;
  margin-top: 0.3125rem;
  transition: all 0.3s;
  cursor: pointer;
}

@media (any-hover: hover) {
  .panel__badge-item-wrapper:hover {
    filter: brightness(1.2);
  }
}
.panel__badge-item-img {
  aspect-ratio: 1/1;
  max-width: 5.125rem;
  width: 100%;
}

.panel__badge-icon-zoom {
  position: absolute;
  bottom: -0.75rem;
  right: -0.75rem;
  background-image: url(../../assets/images/common/icon-zoom.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 3rem;
  aspect-ratio: 1/1;
}

.play-page {
  position: relative;
  max-height: 67.625rem;
  height: 100dvh;
  overflow: hidden;
}

.play-page__btn-items {
  position: absolute;
  top: 1.25rem;
  right: 0.5625rem;
  width: 5.625rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625rem;
}

.play-page__btn-item {
  width: 100%;
}

.play-page__btn-item.play-page__btn-item--top {
  position: absolute;
  top: 0.625rem;
  right: 0.3125rem;
  width: 2.5rem;
  z-index: 1;
}

.play-page__panel {
  position: absolute;
  bottom: 0.625rem;
  left: 50%;
  transform: translateX(-50%);
  width: 21.75rem;
  height: 6.25rem;
  padding-block: 0.625rem;
  margin-inline: auto;
}

.play-page__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../../assets/images/common/panel-frame.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* パワーゲージ部分 */
.play-page__power-gauge-wrapper {
  position: relative;
  width: 100%;
  max-width: 19.125rem;
  height: 0.9375rem;
  margin-inline: auto;
}

.play-page__power-gauge {
  height: 100%;
}

.play-page__indicator {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 0.9375rem;
  aspect-ratio: 20/42;
  transition: transform 0.1s linear;
}

/* SHOT ボタン */
.play-page__btn-shot {
  text-align: center;
  margin-top: 0.9375rem;
}

/* タイマー */
.play-page__timer {
  position: absolute;
  right: 1.25rem;
  bottom: 0.625rem;
  background-image: url(../../assets/images/common/timer.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 2.5rem;
  aspect-ratio: 69/83;
}

.play-page__timer-second {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  color: #ffffff;
  z-index: 1;
}

/* カウントダウンオーバーレイ */
.countdown-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.countdown-text {
  font-size: 4rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  color: #ffffff;
}

/* ポップアップ共通 */
.popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.popup.popup-result {
  backdrop-filter: blur(10px);
}

.popup__content {
  height: 100dvh;
  max-height: 90%;
  padding-inline: 1.25rem;
}

.popup__content.popup__content-result {
  position: relative;
}

.popup__content img {
  height: 100%;
}

.popup-result__gif,
.popup-result__image {
  object-fit: contain;
}

.popup__backdrop {
  position: absolute;
  inset: 0;
}

.result {
  height: 100dvh;
}

.result__container {
  position: relative;
  padding-top: 5.3125rem;
  padding-bottom: 6.25rem;
  width: 90.9%;
  max-width: 31.25rem;
  margin-inline: auto;
  height: 100dvh;
  overflow-y: auto;
}

/* スクロールバー非表示 | ここから -------------- */
.result__container {
  -ms-overflow-style: none; /* IE, Edge 対応 */
  scrollbar-width: none; /* Firefox 対応 */
}

.result__container::-webkit-scrollbar {
  display: none; /* Chrome, Safari 対応 */
}

/* スクロールバー非表示 | ここまで -------------- */
.result__panel:nth-child(n+2) {
  margin-top: 0.9375rem;
}

.result__btn-next-hole,
.result__btn-back {
  margin-top: 0.9375rem;
  text-align: center;
}

.result__notes {
  margin-top: 0.9375rem;
}

.result__notes-text {
  font-size: 0.75rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  color: #ffffff;
  -webkit-text-stroke: 0.3125rem #2e2e2e;
  paint-order: stroke fill;
  letter-spacing: 0.1em;
  text-align: center;
}

.result__notes-text-time {
  color: #ffea01;
}

.result__btn-wrapper {
  max-width: 20.375rem;
  width: 100%;
  margin-top: 1.5625rem;
  margin-inline: auto;
}

.result__btn-wrapper.result__btn-wrapper--error {
  max-width: 13.125rem;
}

.result__btn-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.result__btn-items.result__btn-items--error {
  grid-template-columns: repeat(2, 1fr);
}

.result__btn-item {
  width: 100%;
}

.result__btn-item-link {
  display: block;
  transition: all 0.3s;
}

@media (any-hover: hover) {
  .result__btn-item-link:hover {
    filter: brightness(1.3) drop-shadow(0 0 10px white);
  }
}
.result__score {
  margin-top: 1.25rem;
  margin-inline: auto;
}

.result__score {
  max-width: 18.75rem;
  width: 90%;
}

.rule {
  height: 100dvh;
  padding-top: 3.125rem;
}

.rule__panel {
  position: relative;
  width: 90.9%;
  width: 100%;
  height: 100dvh;
  height: 100%;
  margin-inline: auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 19.8412698413vw;
}
@media screen and (min-width: 768px) {
  .rule__panel {
    max-width: 31.25rem;
    padding-bottom: 6.25rem;
  }
}

/* スクロールバー非表示 | ここから -------------- */
.rule__panel {
  -ms-overflow-style: none; /* IE, Edge 対応 */
  scrollbar-width: none; /* Firefox 対応 */
}

.rule__panel::-webkit-scrollbar {
  display: none; /* Chrome, Safari 対応 */
}

/* スクロールバー非表示 | ここまで -------------- */
.rule__container-panel {
  height: 148.4126984127vw;
}
@media screen and (min-width: 768px) {
  .rule__container-panel {
    height: 46.75rem;
  }
}

.rule__img {
  position: absolute;
  top: 0;
  left: 57%;
  transform: translateX(-50%);
  width: 100%;
  z-index: -1;
}

.rule__btn-next {
  position: absolute;
  top: 128.9682539683vw;
  left: 50%;
  transform: translateX(-50%);
  width: 31.5476190476vw;
}
@media screen and (min-width: 768px) {
  .rule__btn-next {
    top: 40.625rem;
    width: 9.9375rem;
  }
}

.rule__btn-top-back {
  position: absolute;
  top: 144.8412698413vw;
  left: 50%;
  transform: translateX(-50%);
  width: 30.1587301587vw;
}
@media screen and (min-width: 768px) {
  .rule__btn-top-back {
    top: 45.625rem;
    width: 9.5rem;
  }
}

.score__table {
  width: 80%;
  max-width: 18.75rem;
  margin-inline: auto;
  border-collapse: separate;
  border-spacing: 0;
  border: 0.125rem solid #ff7a00;
  border-radius: 0.3125rem;
  overflow: hidden;
}

.score__col--hole {
  width: 30%;
}

.score__col--result {
  width: 40%;
}

.score__col--point {
  width: 30%;
}

.score__head .score__th {
  font-size: 0.625rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  color: #2e2e2e;
  padding-block: 0.3125rem;
  background-color: #ffffff;
  text-align: center;
  border-right: 0.125rem solid #ff7a00;
}

.score__head .score__th:last-child {
  border-right: none;
}

.score__td {
  font-size: 0.625rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  color: #2e2e2e;
  letter-spacing: -0.05em;
  text-align: center;
  border-top: 1px solid #ff7a00;
  border-right: 0.125rem solid #ff7a00;
  padding-block: 0.3125rem;
}

.score__row .score__td:last-child {
  border-right: none;
}

.score__body .score__row:nth-child(odd) {
  background-color: #fffaed;
}

.score__body .score__row:nth-child(even) {
  background-color: #ffffff;
}

.top-page {
  position: relative;
  max-height: 67.625rem;
  height: 100dvh;
  overflow: hidden;
}

.top-page__title {
  position: absolute;
  top: 3.125rem;
  right: calc(50% - 9.25rem);
  width: 18.75rem;
  z-index: 1;
}
@media screen and (min-width: 1440px) {
  .top-page__title {
    width: 21.875rem;
  }
}

.top-page__chara {
  position: absolute;
  bottom: 10.625rem;
  right: calc(50% - 0.9375rem);
  width: 8.75rem;
}
@media screen and (min-width: 1440px) {
  .top-page__chara {
    bottom: 16.25rem;
    right: auto;
    left: 3.75rem;
    width: 12.1875rem;
  }
}
@media screen and (max-height: 667px) {
  .top-page__chara {
    width: 8.75rem;
  }
}

.top-page__btn-wrapper {
  position: absolute;
  right: calc(50% - 2.5rem);
  bottom: 0.9375rem;
  display: grid;
  grid-template-columns: 3.75rem 7.5rem;
  gap: 1.875rem;
}
@media screen and (min-width: 1440px) {
  .top-page__btn-wrapper {
    right: auto;
    left: 1.875rem;
    bottom: 2rem;
    display: grid;
  }
}

.top-page__btn-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.top-page__btn-item {
  width: 3.75rem;
}
@media screen and (min-width: 1440px) {
  .top-page__btn-item {
    width: 3.75rem;
  }
}

.top-page__btn-start {
  width: 7.5rem;
}
@media screen and (min-width: 1440px) {
  .top-page__btn-start {
    width: 7.5rem;
  }
}

.top-page__audio {
  position: absolute;
  top: 1.25rem;
  right: 0.9375rem;
}

/* ------------------------ */
/* 改行用、SP・PC非表示用の設定 */
/* ------------------------ */
/* ---------- 改行 〜 more：以上、less：以下 | ここから ---------- */
/* 414px以下で改行 */
@media screen and (min-width: 414px) {
  .br-414-less {
    display: none;
  }
}

/* 500px以下で改行 */
@media screen and (min-width: 500px) {
  .br-500-less {
    display: none;
  }
}

/* 768px以下で改行 */
@media screen and (min-width: 768px) {
  .br-768-less {
    display: none;
  }
}

/* 768px以上で改行 */
.br-768-more {
  display: none;
}
@media screen and (min-width: 768px) {
  .br-768-more {
    display: block;
  }
}

/* 1000px以下で改行 */
@media screen and (min-width: 768px) {
  .br-1000-less {
    display: none;
  }
}

/* 1000px以上で改行 */
.br-1000-more {
  display: none;
}
@media screen and (min-width: 1000px) {
  .br-1000-more {
    display: block;
  }
}

/* 1480px以上で改行 */
.br-1480-more {
  display: none;
}
@media screen and (min-width: 1480px) {
  .br-1480-more {
    display: block;
  }
}

/* 1920px以上で改行 */
.br-1920-more {
  display: none;
}
@media screen and (min-width: 1920px) {
  .br-1920-more {
    display: block;
  }
}

/* ---------- 改行 | ここまで ---------- */
/* ---------- 表示・非表示 〜 more：以上、less：以下 | ここから ---------- */
/* PCのとき非表示 */
@media screen and (min-width: 768px) {
  .pc-none {
    display: none;
  }
}

/* SPのとき非表示 */
.sp-none {
  display: none;
}
@media screen and (min-width: 768px) {
  .sp-none {
    display: block;
  }
}

/* SPのとき非表示（インライン要素ver） */
.sp-none-inline-block {
  display: none;
}
@media screen and (min-width: 768px) {
  .sp-none-inline-block {
    display: inline-block;
  }
}

/* ---------- 表示・非表示 〜 more：以上、less：以下 | ここまで ---------- */
/* ---------- margin-topの設定 | ここから ---------- */
.mt-1 {
  margin-top: 0.0625rem;
}

.mt-2 {
  margin-top: 0.125rem;
}

.mt-3 {
  margin-top: 0.1875rem;
}

.mt-4 {
  margin-top: 0.25rem;
}

.mt-5 {
  margin-top: 0.3125rem;
}

.mt-6 {
  margin-top: 0.375rem;
}

.mt-7 {
  margin-top: 0.4375rem;
}

.mt-8 {
  margin-top: 0.5rem;
}

.mt-9 {
  margin-top: 0.5625rem;
}

.mt-10 {
  margin-top: 0.625rem;
}

.mt-11 {
  margin-top: 0.6875rem;
}

.mt-12 {
  margin-top: 0.75rem;
}

.mt-13 {
  margin-top: 0.8125rem;
}

.mt-14 {
  margin-top: 0.875rem;
}

.mt-15 {
  margin-top: 0.9375rem;
}

.mt-16 {
  margin-top: 1rem;
}

.mt-17 {
  margin-top: 1.0625rem;
}

.mt-18 {
  margin-top: 1.125rem;
}

.mt-19 {
  margin-top: 1.1875rem;
}

.mt-20 {
  margin-top: 1.25rem;
}

.mt-21 {
  margin-top: 1.3125rem;
}

.mt-22 {
  margin-top: 1.375rem;
}

.mt-23 {
  margin-top: 1.4375rem;
}

.mt-24 {
  margin-top: 1.5rem;
}

.mt-25 {
  margin-top: 1.5625rem;
}

.mt-26 {
  margin-top: 1.625rem;
}

.mt-27 {
  margin-top: 1.6875rem;
}

.mt-28 {
  margin-top: 1.75rem;
}

.mt-29 {
  margin-top: 1.8125rem;
}

.mt-30 {
  margin-top: 1.875rem;
}

.mt-31 {
  margin-top: 1.9375rem;
}

.mt-32 {
  margin-top: 2rem;
}

.mt-33 {
  margin-top: 2.0625rem;
}

.mt-34 {
  margin-top: 2.125rem;
}

.mt-35 {
  margin-top: 2.1875rem;
}

.mt-36 {
  margin-top: 2.25rem;
}

.mt-37 {
  margin-top: 2.3125rem;
}

.mt-38 {
  margin-top: 2.375rem;
}

.mt-39 {
  margin-top: 2.4375rem;
}

.mt-40 {
  margin-top: 2.5rem;
}

.mt-41 {
  margin-top: 2.5625rem;
}

.mt-42 {
  margin-top: 2.625rem;
}

.mt-43 {
  margin-top: 2.6875rem;
}

.mt-44 {
  margin-top: 2.75rem;
}

.mt-45 {
  margin-top: 2.8125rem;
}

.mt-46 {
  margin-top: 2.875rem;
}

.mt-47 {
  margin-top: 2.9375rem;
}

.mt-48 {
  margin-top: 3rem;
}

.mt-49 {
  margin-top: 3.0625rem;
}

.mt-50 {
  margin-top: 3.125rem;
}

.mt-51 {
  margin-top: 3.1875rem;
}

.mt-52 {
  margin-top: 3.25rem;
}

.mt-53 {
  margin-top: 3.3125rem;
}

.mt-54 {
  margin-top: 3.375rem;
}

.mt-55 {
  margin-top: 3.4375rem;
}

.mt-56 {
  margin-top: 3.5rem;
}

.mt-57 {
  margin-top: 3.5625rem;
}

.mt-58 {
  margin-top: 3.625rem;
}

.mt-59 {
  margin-top: 3.6875rem;
}

.mt-60 {
  margin-top: 3.75rem;
}

.mt-61 {
  margin-top: 3.8125rem;
}

.mt-62 {
  margin-top: 3.875rem;
}

.mt-63 {
  margin-top: 3.9375rem;
}

.mt-64 {
  margin-top: 4rem;
}

.mt-65 {
  margin-top: 4.0625rem;
}

.mt-66 {
  margin-top: 4.125rem;
}

.mt-67 {
  margin-top: 4.1875rem;
}

.mt-68 {
  margin-top: 4.25rem;
}

.mt-69 {
  margin-top: 4.3125rem;
}

.mt-70 {
  margin-top: 4.375rem;
}

.mt-71 {
  margin-top: 4.4375rem;
}

.mt-72 {
  margin-top: 4.5rem;
}

.mt-73 {
  margin-top: 4.5625rem;
}

.mt-74 {
  margin-top: 4.625rem;
}

.mt-75 {
  margin-top: 4.6875rem;
}

.mt-76 {
  margin-top: 4.75rem;
}

.mt-77 {
  margin-top: 4.8125rem;
}

.mt-78 {
  margin-top: 4.875rem;
}

.mt-79 {
  margin-top: 4.9375rem;
}

.mt-80 {
  margin-top: 5rem;
}

.mt-81 {
  margin-top: 5.0625rem;
}

.mt-82 {
  margin-top: 5.125rem;
}

.mt-83 {
  margin-top: 5.1875rem;
}

.mt-84 {
  margin-top: 5.25rem;
}

.mt-85 {
  margin-top: 5.3125rem;
}

.mt-86 {
  margin-top: 5.375rem;
}

.mt-87 {
  margin-top: 5.4375rem;
}

.mt-88 {
  margin-top: 5.5rem;
}

.mt-89 {
  margin-top: 5.5625rem;
}

.mt-90 {
  margin-top: 5.625rem;
}

.mt-91 {
  margin-top: 5.6875rem;
}

.mt-92 {
  margin-top: 5.75rem;
}

.mt-93 {
  margin-top: 5.8125rem;
}

.mt-94 {
  margin-top: 5.875rem;
}

.mt-95 {
  margin-top: 5.9375rem;
}

.mt-96 {
  margin-top: 6rem;
}

.mt-97 {
  margin-top: 6.0625rem;
}

.mt-98 {
  margin-top: 6.125rem;
}

.mt-99 {
  margin-top: 6.1875rem;
}

.mt-100 {
  margin-top: 6.25rem;
}

.mt-101 {
  margin-top: 6.3125rem;
}

.mt-102 {
  margin-top: 6.375rem;
}

.mt-103 {
  margin-top: 6.4375rem;
}

.mt-104 {
  margin-top: 6.5rem;
}

.mt-105 {
  margin-top: 6.5625rem;
}

.mt-106 {
  margin-top: 6.625rem;
}

.mt-107 {
  margin-top: 6.6875rem;
}

.mt-108 {
  margin-top: 6.75rem;
}

.mt-109 {
  margin-top: 6.8125rem;
}

.mt-110 {
  margin-top: 6.875rem;
}

.mt-111 {
  margin-top: 6.9375rem;
}

.mt-112 {
  margin-top: 7rem;
}

.mt-113 {
  margin-top: 7.0625rem;
}

.mt-114 {
  margin-top: 7.125rem;
}

.mt-115 {
  margin-top: 7.1875rem;
}

.mt-116 {
  margin-top: 7.25rem;
}

.mt-117 {
  margin-top: 7.3125rem;
}

.mt-118 {
  margin-top: 7.375rem;
}

.mt-119 {
  margin-top: 7.4375rem;
}

.mt-120 {
  margin-top: 7.5rem;
}

.mt-121 {
  margin-top: 7.5625rem;
}

.mt-122 {
  margin-top: 7.625rem;
}

.mt-123 {
  margin-top: 7.6875rem;
}

.mt-124 {
  margin-top: 7.75rem;
}

.mt-125 {
  margin-top: 7.8125rem;
}

.mt-126 {
  margin-top: 7.875rem;
}

.mt-127 {
  margin-top: 7.9375rem;
}

.mt-128 {
  margin-top: 8rem;
}

.mt-129 {
  margin-top: 8.0625rem;
}

.mt-130 {
  margin-top: 8.125rem;
}

.mt-131 {
  margin-top: 8.1875rem;
}

.mt-132 {
  margin-top: 8.25rem;
}

.mt-133 {
  margin-top: 8.3125rem;
}

.mt-134 {
  margin-top: 8.375rem;
}

.mt-135 {
  margin-top: 8.4375rem;
}

.mt-136 {
  margin-top: 8.5rem;
}

.mt-137 {
  margin-top: 8.5625rem;
}

.mt-138 {
  margin-top: 8.625rem;
}

.mt-139 {
  margin-top: 8.6875rem;
}

.mt-140 {
  margin-top: 8.75rem;
}

.mt-141 {
  margin-top: 8.8125rem;
}

.mt-142 {
  margin-top: 8.875rem;
}

.mt-143 {
  margin-top: 8.9375rem;
}

.mt-144 {
  margin-top: 9rem;
}

.mt-145 {
  margin-top: 9.0625rem;
}

.mt-146 {
  margin-top: 9.125rem;
}

.mt-147 {
  margin-top: 9.1875rem;
}

.mt-148 {
  margin-top: 9.25rem;
}

.mt-149 {
  margin-top: 9.3125rem;
}

.mt-150 {
  margin-top: 9.375rem;
}

.mt-151 {
  margin-top: 9.4375rem;
}

.mt-152 {
  margin-top: 9.5rem;
}

.mt-153 {
  margin-top: 9.5625rem;
}

.mt-154 {
  margin-top: 9.625rem;
}

.mt-155 {
  margin-top: 9.6875rem;
}

.mt-156 {
  margin-top: 9.75rem;
}

.mt-157 {
  margin-top: 9.8125rem;
}

.mt-158 {
  margin-top: 9.875rem;
}

.mt-159 {
  margin-top: 9.9375rem;
}

.mt-160 {
  margin-top: 10rem;
}

.mt-161 {
  margin-top: 10.0625rem;
}

.mt-162 {
  margin-top: 10.125rem;
}

.mt-163 {
  margin-top: 10.1875rem;
}

.mt-164 {
  margin-top: 10.25rem;
}

.mt-165 {
  margin-top: 10.3125rem;
}

.mt-166 {
  margin-top: 10.375rem;
}

.mt-167 {
  margin-top: 10.4375rem;
}

.mt-168 {
  margin-top: 10.5rem;
}

.mt-169 {
  margin-top: 10.5625rem;
}

.mt-170 {
  margin-top: 10.625rem;
}

.mt-171 {
  margin-top: 10.6875rem;
}

.mt-172 {
  margin-top: 10.75rem;
}

.mt-173 {
  margin-top: 10.8125rem;
}

.mt-174 {
  margin-top: 10.875rem;
}

.mt-175 {
  margin-top: 10.9375rem;
}

.mt-176 {
  margin-top: 11rem;
}

.mt-177 {
  margin-top: 11.0625rem;
}

.mt-178 {
  margin-top: 11.125rem;
}

.mt-179 {
  margin-top: 11.1875rem;
}

.mt-180 {
  margin-top: 11.25rem;
}

.mt-181 {
  margin-top: 11.3125rem;
}

.mt-182 {
  margin-top: 11.375rem;
}

.mt-183 {
  margin-top: 11.4375rem;
}

.mt-184 {
  margin-top: 11.5rem;
}

.mt-185 {
  margin-top: 11.5625rem;
}

.mt-186 {
  margin-top: 11.625rem;
}

.mt-187 {
  margin-top: 11.6875rem;
}

.mt-188 {
  margin-top: 11.75rem;
}

.mt-189 {
  margin-top: 11.8125rem;
}

.mt-190 {
  margin-top: 11.875rem;
}

.mt-191 {
  margin-top: 11.9375rem;
}

.mt-192 {
  margin-top: 12rem;
}

.mt-193 {
  margin-top: 12.0625rem;
}

.mt-194 {
  margin-top: 12.125rem;
}

.mt-195 {
  margin-top: 12.1875rem;
}

.mt-196 {
  margin-top: 12.25rem;
}

.mt-197 {
  margin-top: 12.3125rem;
}

.mt-198 {
  margin-top: 12.375rem;
}

.mt-199 {
  margin-top: 12.4375rem;
}

.mt-200 {
  margin-top: 12.5rem;
}

/* ---------- margin-topの設定 | ここまで ---------- *//*# sourceMappingURL=style.css.map */