html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-weight: normal;
  font-style: normal;
  vertical-align: baseline;
  background: rgba(0, 0, 0, 0);
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
nav ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
a {
  outline: none;
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: rgba(0, 0, 0, 0);
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
input,
select {
  vertical-align: middle;
}
img {
  vertical-align: top;
}
ul,
dl,
ol {
  text-indent: 0;
}
li {
  list-style: none;
}
sup {
  vertical-align: text-top;
}
sub {
  vertical-align: text-bottom;
}
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}
* html input,
* html textarea,
* html select {
  font-size: 100%;
}
*:first-child + html + input,
*:first-child html + textarea,
*:first-child + html select {
  font-size: 100%;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: inherit;
}
th,
td {
  text-align: left;
  vertical-align: top;
}
caption {
  text-align: left;
}
pre,
code,
kbd,
samp,
tt {
  font-family: monospace;
}
* html pre,
* html code,
* html kbd,
* html samp,
* html tt {
  font-size: 100%;
  line-height: 100%;
}
*:first-child + html pre,
*:first-child html + code,
*:first-child html + kbd,
*:first-child + html + samp,
*:first-child + html tt {
  font-size: 108%;
  line-height: 100%;
}
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: none;
}
@media screen {
  .scIn.accInTop {
    position: relative;
    clip-path: inset(0% 0% 100% 0%);
  }
  .scIn.accInTop.move {
    clip-path: inset(0% 0% 0% 0%);
    transition-duration: 600ms;
    transition-property: clip-path;
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  }
  .scIn.accInLeft {
    position: relative;
    clip-path: inset(0% 100% 0% 0%);
  }
  .scIn.accInLeft.move {
    clip-path: inset(0% 0% 0% 0%);
    transition-duration: 600ms;
    transition-property: clip-path;
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  }
  .scIn.accInBottom {
    position: relative;
    clip-path: inset(100% 0% 0% 0%);
  }
  .scIn.accInBottom.move {
    clip-path: inset(0% 0% 0% 0%);
    transition-duration: 600ms;
    transition-property: clip-path;
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  }
  .scIn.accInRight {
    position: relative;
    clip-path: inset(0% 0% 0% 100%);
  }
  .scIn.accInRight.move {
    clip-path: inset(0% 0% 0% 0%);
    transition-duration: 600ms;
    transition-property: clip-path;
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  }
  .scIn.fadeIn {
    opacity: 0;
  }
  .scIn.fadeIn.move {
    opacity: 1;
    transition-duration: 600ms;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .scIn.zoomIn {
    transform: scale(0);
  }
  .scIn.zoomIn.move {
    transform: scale(1);
    transition-duration: 600ms;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .scIn.slideInTop {
    opacity: 0;
    transform: translateY(-50px);
  }
  .scIn.slideInTop.move {
    opacity: 1;
    transform: translateY(0px);
    transition-duration: 600ms;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .scIn.slideInBottom {
    opacity: 0;
    transform: translateY(50px);
  }
  .scIn.slideInBottom.move {
    opacity: 1;
    transform: translateY(0px);
    transition-duration: 600ms;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .scIn.slideInLeft {
    opacity: 0;
    transform: translateX(-50px);
  }
  .scIn.slideInLeft.move {
    opacity: 1;
    transform: translateX(0px);
    transition-duration: 600ms;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .scIn.slideInRight {
    opacity: 0;
    transform: translateX(50px);
  }
  .scIn.slideInRight.move {
    opacity: 1;
    transform: translateX(0px);
    transition-duration: 600ms;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .scIn.move.delay100 {
    transition-delay: 100ms !important;
  }
  .scIn.move.delay200 {
    transition-delay: 200ms !important;
  }
  .scIn.move.delay300 {
    transition-delay: 300ms !important;
  }
  .scIn.move.delay400 {
    transition-delay: 400ms !important;
  }
  .scIn.move.delay500 {
    transition-delay: 500ms !important;
  }
  .scIn.move.delay600 {
    transition-delay: 600ms !important;
  }
  .scIn.move.delay700 {
    transition-delay: 700ms !important;
  }
  .scIn.move.delay800 {
    transition-delay: 800ms !important;
  }
  .scIn.move.delay900 {
    transition-delay: 900ms !important;
  }
  .scIn.move.delay1000 {
    transition-delay: 1000ms !important;
  }
  .scIn.move.delay1100 {
    transition-delay: 1100ms !important;
  }
  .scIn.move.delay1200 {
    transition-delay: 1200ms !important;
  }
  .scIn.move.delay1300 {
    transition-delay: 1300ms !important;
  }
  .scIn.move.delay1400 {
    transition-delay: 1400ms !important;
  }
  .scIn.move.delay1500 {
    transition-delay: 1500ms !important;
  }
  .scIn.move.delay1600 {
    transition-delay: 1600ms !important;
  }
  .scIn.move.delay1700 {
    transition-delay: 1700ms !important;
  }
  .scIn.move.delay1800 {
    transition-delay: 1800ms !important;
  }
  .scIn.move.delay1900 {
    transition-delay: 1900ms !important;
  }
  .scIn.move.delay2000 {
    transition-delay: 2000ms !important;
  }
}
#top {
  padding-top: 1px;
}
#top .back {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../../../assets/img/top/back.webp) center/cover;
}
#top .chara {
  display: block;
  background: url(../../../assets/img/common/chara.webp) 0 0/100% 100%;
  aspect-ratio: 1.3175388967;
  width: 238.8461538462cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  position: absolute;
  left: calc(50% - 119.4230769231cqw - 23%);
  top: 0;
}
#top .btn_sound {
  position: absolute;
  left: 6cqw;
  top: 6cqw;
  font-size: 3cqw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
  color: #fff;
}
#top .btn_sound::before {
  display: block;
  content: "";
  position: relative;
  width: 8.2051282051cqw;
  aspect-ratio: 1;
  background: url(../../../assets/img/top/sound.svg) center/31px 26px no-repeat;
}
body.mute #top .btn_sound::before {
  background: url(../../../assets/img/top/sound_close.svg) center/32px 32px
    no-repeat;
}
#top .btn_trial {
  display: block;
  background: url(../img/trial.png) 0 0/100% 100%;
  aspect-ratio: 1;
  width: 24.6153846154cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  position: absolute;
  right: 3cqw;
  top: 3cqw;
  z-index: 1;
  filter: drop-shadow(0 0 4px rgb(0, 0, 0))
    drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
}
#top .taparea {
  box-sizing: border-box;
  padding-top: 74cqw;
  padding-bottom: 12cqw;
  min-height: 100dvh;
}
#top h1 .logo {
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: -moz-fit-content;
  width: fit-content;
}
#top h1 .logo::before {
  display: block;
  background: url(../../../assets/img/top/effect.png) 0 0/100% 100%;
  aspect-ratio: 2.1195876289;
  width: 131.7948717949cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  position: absolute;
  left: calc(50% - 65.8974358974cqw + 8%);
  top: calc(50% - 31.0897435897cqw - 8%);
}
#top h1 .logo span {
  display: block;
  display: block;
  background: url(../../../assets/img/top/logo.png) 0 0/100% 100%;
  aspect-ratio: 2.2721712538;
  width: 95.2564102564cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
}
#top h1 .title {
  display: block;
  height: 7vw;
  width: -moz-fit-content;
  width: fit-content;
  display: block;
  margin-left: auto;
  margin-right: auto;
  filter: drop-shadow(0 0 4px rgb(0, 0, 0))
    drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
  margin-top: -3cqw;
}
#top .lead {
  font-family: "Zen Old Mincho", serif;
  font-size: 6cqw;
  font-weight: bold;
  text-align: center;
  line-height: 1.35em;
  display: block;
  margin-left: auto;
  margin-right: auto;
  filter: drop-shadow(0 0 4px rgb(0, 0, 0))
    drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
  margin-top: 6cqw;
}
#top .start {
  margin-top: 10cqw;
  margin-left: auto;
  margin-right: auto;
  width: -moz-fit-content;
  width: fit-content;
  filter: drop-shadow(0 0 4px rgb(0, 0, 0))
    drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
}
#top .start span {
  display: block;
  background: url(../../../assets/img/top/start.svg) 0 0/100% 100%;
  aspect-ratio: 19.1176470588;
  width: 83.3333333333cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  display: block;
  animation-name: anm-start;
  animation-duration: 2000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes anm-start {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#top .browser {
  font-size: 3.2cqw;
  padding: 2cqw;
  margin-left: 18cqw;
  margin-right: 18cqw;
  margin-top: 8cqw;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
}
#top .copyright {
  text-align: center;
  margin-top: 3vw;
  font-size: 2.4vw;
  line-height: 1.25em;
}
#info.open {
  display: flex;
}
#info {
  flex-direction: column;
  box-sizing: border-box;
  padding: 6cqw 0;
}
#info .logo {
  display: block;
  background: url(../../../assets/img/common/logo.svg) 0 0/100% 100%;
  aspect-ratio: 2.1142857143;
  width: 41.7435897436cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  margin-left: auto;
  margin-right: auto;
}
#info h2 span {
  font-family: "Zen Old Mincho", serif;
  font-size: 10cqw;
  line-height: 1.1em;
  font-weight: bold;
  text-align: center;
  display: block;
  margin-top: 6cqw;
  margin-left: auto;
  margin-right: auto;
  filter: drop-shadow(0 0 8px rgb(0, 0, 0)) drop-shadow(0 0 4px rgb(0, 0, 0));
}
#info h2::after {
  display: block;
  background: url(../../../assets/img/info/line.png) 0 0/100% 100%;
  aspect-ratio: 163;
  width: 83.5897435897cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  margin-left: auto;
  margin-right: auto;
  margin-top: 3cqw;
}
#info .steps {
  display: flex;
  flex-direction: column;
  gap: 3cqw;
  margin-top: 6cqw;
}
#info .steps .step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding-top: 12cqw;
  padding-bottom: 12cqw;
}
#info .steps .step .body {
  font-family: "Zen Old Mincho", serif;
  font-size: 3.6cqw;
  font-weight: bold;
  line-height: 1.35em;
}
#info .steps .step.step1 {
  padding-left: 32cqw;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.8) 77%,
    rgba(0, 0, 0, 0) 100%
  );
}
#info .steps .step.step1 .num {
  display: block;
  background: url(../../../assets/img/info/num_1.png) 0 0/100% 100%;
  aspect-ratio: 0.7356687898;
  width: 29.6153846154cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% - 24.1538461538cqw);
}
#info .steps .step.step2 {
  left: 6cqw;
  padding-left: 38cqw;
  background: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.8) 77%,
    rgba(0, 0, 0, 0) 100%
  );
}
#info .steps .step.step2 .num {
  display: block;
  background: url(../../../assets/img/info/num_2.png) 0 0/100% 100%;
  aspect-ratio: 1.1390977444;
  width: 38.8461538462cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% - 20.4615384615cqw);
}
#info .steps .step.step3 {
  padding-left: 30cqw;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.8) 77%,
    rgba(0, 0, 0, 0) 100%
  );
}
#info .steps .step.step3 .num {
  display: block;
  background: url(../../../assets/img/info/num_3.png) 0 0/100% 100%;
  aspect-ratio: 0.7804054054;
  width: 29.6153846154cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  position: absolute;
  left: -3cqw;
  top: calc(50% - 22.7692307692cqw);
}
#info .steps .step.step3 figure {
  position: absolute;
  right: 3cqw;
  top: 3cqw;
  width: 24cqw;
}
#info .tap {
  margin-top: 6cqw;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1cqw;
  padding-bottom: 1cqw;
  font-size: 6cqw;
  font-family: "Zen Old Mincho", serif;
  line-height: 1.35em;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgb(0, 0, 0) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}
#tutorial {
  padding: 6cqw 6cqw;
  box-sizing: border-box;
  position: relative;
}
#tutorial.open {
  display: flex;
}
#tutorial {
  flex-direction: column;
}
#tutorial h2 {
  font-family: "Zen Old Mincho", serif;
  font-size: 6cqw;
  text-align: center;
  font-weight: bold;
  display: flex;
  gap: 1cqw;
  justify-content: space-between;
}
#tutorial h2::before {
  display: block;
  background: url(../../../assets/img/common/title_arrow.svg) 0 0/100% 100%;
  aspect-ratio: 3.75;
  width: 11.5384615385cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  transform: rotate(180deg);
}
#tutorial h2::after {
  display: block;
  background: url(../../../assets/img/common/title_arrow.svg) 0 0/100% 100%;
  aspect-ratio: 3.75;
  width: 11.5384615385cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
}
#tutorial .backimage {
  position: absolute;
}
#tutorial .backimage.backimage2 {
  left: -3cqw;
  top: 65cqw;
  width: 50cqw;
}
#tutorial .backimage.backimage1 {
  right: -3cqw;
  top: 45cqw;
  width: 50cqw;
}
#tutorial .steps {
  margin-top: 6cqw;
  display: flex;
  flex-direction: column;
  gap: 6cqw;
}
#tutorial .steps .step {
  display: flex;
  flex-direction: column;
  gap: 2cqw;
  justify-content: center;
  position: relative;
}
#tutorial .steps .step figure {
  position: relative;
  width: 100%;
}
#tutorial .steps .step .body {
  width: 100%;
  font-size: 4cqw;
  font-family: "Zen Old Mincho", serif;
  font-weight: bold;
  line-height: 1.35em;
  flex: 1;
}
#tutorial .steps .step.step1 figure {
  margin-left: -6cqw;
  width: 70cqw;
}
#tutorial .steps .step.step1 .hand {
  position: absolute;
  bottom: 0;
  left: calc(100% - 2cqw);
  width: 15.8974358974cqw;
  aspect-ratio: 62/64;
  filter: drop-shadow(0 0 4px rgb(0, 0, 0))
    drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
}
#tutorial .steps .step.step1 .hand::before {
  display: block;
  background: url(../../../assets/img/tutorial/hand.svg) 0 0/100% 100%;
  aspect-ratio: 0.96875;
  width: 15.8974358974cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  animation-name: anm-hand;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
}
@keyframes anm-hand {
  0% {
    transform: rotate(-20deg);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  50% {
    transform: rotate(20deg);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  100% {
    transform: rotate(-20deg);
  }
}
#tutorial .steps .step.step1 .hand::after {
  display: block;
  background: url(../../../assets/img/tutorial/arrow.svg) 0 0/100% 100%;
  aspect-ratio: 1.3695652174;
  width: 16.1538461538cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  position: absolute;
  left: -9cqw;
  top: -9cqw;
}
#tutorial .steps .step.step2 figure {
  margin-right: -6cqw;
  margin-left: auto;
  width: 70cqw;
}
#tutorial .steps .step.step3 {
  flex-direction: row-reverse;
  align-items: center;
}
#tutorial .steps .step.step3 .body .cap {
  font-size: 70%;
  line-height: 1em;
}
#tutorial .steps .step.step3 figure {
  width: 45%;
}
#tutorial .note {
  margin-top: 6cqw;
}
#tutorial .tap {
  margin-top: 6cqw;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1cqw;
  padding-bottom: 1cqw;
  font-size: 6cqw;
  font-family: "Zen Old Mincho", serif;
  line-height: 1.35em;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgb(0, 0, 0) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  visibility: hidden;
}
#tutorial.ready .tap {
  visibility: inherit;
}
#game {
  height: 100dvh;
  overflow: hidden;
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  touch-action: none;
  pointer-events: none;
}
#game.open {
  display: flex;
}
#game .cutin {
  background: url(../../../assets/img/game/cutin.webp) center/cover;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  visibility: hidden;
  -webkit-mask-image: url(../../../assets/img/game/cutin_mask.webp);
  mask-image: url(../../../assets/img/game/cutin_mask.webp);
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
#game .cutin.open {
  animation-name: anm-cutin;
  animation-duration: 2000ms;
}
@keyframes anm-cutin {
  0% {
    visibility: inherit;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
    -webkit-mask-position: 0 200%;
    mask-position: 0 200%;
  }
  40% {
    visibility: inherit;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  90% {
    visibility: inherit;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  100% {
    visibility: hidden;
    opacity: 0;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
#game .frame {
  width: min(100cqw, 58.2089552239cqh);
  aspect-ratio: 390/670;
  container-type: inline-size;
  position: relative;
}
#game .frame__inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4cqw;
}
#game .frame .videoarea {
  width: 100cqw;
  aspect-ratio: 16/9;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
#game .frame .videoarea video {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
}
#game .frame .videoarea #countdown {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}
#game .frame .videoarea #countdown.open {
  visibility: inherit;
}
#game .frame .videoarea #gauge {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}
#game .frame .videoarea #gauge.open {
  visibility: inherit;
}
#game .frame .videoarea .rush {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#game .frame .videoarea .rush .text {
  font-size: 8cqw;
  letter-spacing: 0.2em;
  text-align: center;
  font-family: "Zen Old Mincho", serif;
  font-weight: bold;
}
#game .frame .videoarea .rush {
  visibility: hidden;
}
#game .frame .videoarea .rush.open {
  visibility: inherit;
}
#game .frame .message {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  height: 12cqw;
  width: 100%;
  font-size: 4cqw;
  font-family: "Zen Old Mincho", serif;
  letter-spacing: 0.2em;
  text-align: center;
  visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: inset(0 50% 0 50%);
  transition-duration: 250ms;
  transition-property: visibility, clip-path;
}
#game .frame .message.open {
  visibility: inherit;
  clip-path: inset(0 0% 0 0%);
}
#game .frame .control {
  border: 1cqw solid hsla(0, 0%, 100%, 0.5);
  width: calc(100% - 32cqw);
  aspect-ratio: 345/262;
  border-radius: 4cqw;
  pointer-events: all;
  position: relative;
}
#game .frame .control #control {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
#game .frame .control__inner {
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#game .frame .control__inner::before {
  display: block;
  background: url(../../../assets/img/game/ui_default.svg) 0 0/100% 100%;
  aspect-ratio: 1;
  width: 33.6538461538cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
}
#game .frame .control.drop .control__inner::before {
  display: block;
  background: url(../../../assets/img/game/ui_vector.svg) 0 0/100% 100%;
  aspect-ratio: 0.546961326;
  width: 19.0384615385cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
}
#game .frame .control.poke .control__inner::before {
  display: block;
  background: url(../../../assets/img/game/ui_vector.svg) 0 0/100% 100%;
  aspect-ratio: 0.546961326;
  width: 19.0384615385cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  transform: rotate(180deg);
}
#game .frame .control.slash .control__inner::before {
  display: block;
  background: url(../../../assets/img/game/ui_vector.svg) 0 0/100% 100%;
  aspect-ratio: 0.546961326;
  width: 19.0384615385cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  transform: rotate(45deg);
}
#game .frame .control.toright .control__inner::before {
  display: block;
  background: url(../../../assets/img/game/ui_vector.svg) 0 0/100% 100%;
  aspect-ratio: 0.546961326;
  width: 19.0384615385cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  transform: rotate(-90deg);
}
#game .frame .control.toleft .control__inner::before {
  display: block;
  background: url(../../../assets/img/game/ui_vector.svg) 0 0/100% 100%;
  aspect-ratio: 0.546961326;
  width: 19.0384615385cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  transform: rotate(90deg);
}
#game .frame .control.rush .control__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2cqw;
}
#game .frame .control.rush .control__inner::before {
  display: none;
}
#game .frame .control.rush .control__inner span {
  display: block;
  background: url(../../../assets/img/game/ui_rush.svg) 0 0/100% 100%;
  aspect-ratio: 0.8317757009;
  width: 17.1153846154cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  animation-name: anm-rush;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  opacity: 0;
  animation-fill-mode: both;
}
#game .frame .control.rush .control__inner span:nth-child(1) {
  animation-delay: -400ms;
}
#game .frame .control.rush .control__inner span:nth-child(2) {
  animation-delay: -200ms;
}
#game .frame .control.rush .control__inner span:nth-child(3) {
  animation-delay: 0ms;
}
@keyframes anm-rush {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#game .guide {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  visibility: hidden;
  z-index: 3;
}
#game .guide__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  container-type: inline-size;
  width: min(58.2089552239dvh, 100dvw);
  aspect-ratio: 390/670;
}
#game .guide__chara {
  width: 100cqw;
  aspect-ratio: 780/1300;
  margin-top: -65cqw;
  transform: translateX(100cqw);
}
#game .guide__chara div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}
#game .guide__message {
  aspect-ratio: 844/267;
  width: 106cqw;
  position: relative;
  margin-top: -28cqw;
  margin-left: -6cqw;
  transform: translateX(-100cqw);
}
#game .guide__message div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}
#game .guide .chara1 {
  background: url(../../../assets/img/game/guide1.webp) 0 0/100% 100%;
}
#game .guide .chara2_1 {
  background: url(../../../assets/img/game/guide2_1.webp) 0 0/100% 100%;
}
#game .guide .chara2_2 {
  background: url(../../../assets/img/game/guide2_2.webp) 0 0/100% 100%;
}
#game .guide .chara2_3 {
  background: url(../../../assets/img/game/guide2_3.webp) 0 0/100% 100%;
}
#game .guide.guide1_1 .chara1 {
  visibility: inherit;
}
#game .guide.guide1_2 .chara1 {
  visibility: inherit;
}
#game .guide.guide1_3 .chara1 {
  visibility: inherit;
}
#game .guide.guide1_4 .chara1 {
  visibility: inherit;
}
#game .guide.guide2_1 .chara2_1 {
  visibility: inherit;
}
#game .guide.guide2_2 .chara2_2 {
  visibility: inherit;
}
#game .guide.guide2_3 .chara2_3 {
  visibility: inherit;
}
#game .guide.open {
  visibility: inherit;
  transition-duration: 250ms;
  transition-property: visibility;
}
#game .guide.open .guide__chara {
  transform: translateX(0cqw);
  transition-duration: 250ms;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
#game .guide.open .guide__message {
  transform: translateX(0cqw);
  transition-duration: 250ms;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
#game .guide.close {
  visibility: hidden;
}
#game .guide.close .guide__chara {
  transform: translateX(-100cqw);
}
#game .guide.close .guide__message {
  transform: translateX(100cqw);
}
#game .transition {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition-duration: 2000ms;
  transition-property: opacity, visibility;
}
#game .transition canvas {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  visibility: hidden;
}
#game .transition.open {
  opacity: 1;
  visibility: inherit;
  transition-duration: 0ms;
}
#game .transition.open canvas {
  visibility: inherit;
}
#game .note {
  margin-top: 6cqw;
  margin-left: 6cqw;
  margin-right: 6cqw;
}
#game .guide .guide__message .talk1_1 {
  background: url(../img/talk1_1.webp) 0 0/100% 100%;
}
#game .guide .guide__message .talk1_2 {
  background: url(../img/talk1_2.webp) 0 0/100% 100%;
}
#game .guide .guide__message .talk1_3 {
  background: url(../img/talk1_3.webp) 0 0/100% 100%;
}
#game .guide .guide__message .talk1_4 {
  background: url(../img/talk1_4.webp) 0 0/100% 100%;
}
#game .guide .guide__message .talk2_1 {
  background: url(../img/talk2_1.webp) 0 0/100% 100%;
}
#game .guide .guide__message .talk2_2 {
  background: url(../img/talk2_2.webp) 0 0/100% 100%;
}
#game .guide .guide__message .talk2_3 {
  background: url(../img/talk2_3.webp) 0 0/100% 100%;
}
#game .guide.guide1_1 .talk1_1 {
  visibility: inherit;
}
#game .guide.guide1_2 .talk1_2 {
  visibility: inherit;
}
#game .guide.guide1_3 .talk1_3 {
  visibility: inherit;
}
#game .guide.guide1_4 .talk1_4 {
  visibility: inherit;
}
#game .guide.guide2_1 .talk2_1 {
  visibility: inherit;
}
#game .guide.guide2_2 .talk2_2 {
  visibility: inherit;
}
#game .guide.guide2_3 .talk2_3 {
  visibility: inherit;
}
#campaign.open {
  display: flex;
  display: block;
}
#campaign {
  box-sizing: border-box;
  padding: 6cqw 0;
  padding-bottom: 12cqw;
}
#campaign .chara {
  aspect-ratio: 1863/1414;
  width: 238.8461538462cqw;
  position: absolute;
  left: calc(50% - 101.5096153846cqw - 16%);
  top: 10cqw;
}
#campaign .chara::before {
  content: "";
  position: absolute;
  left: calc(50% - 63.9743589744cqw + 1%);
  top: -6cqw;
  display: block;
  display: block;
  background: url(../../../assets/img/campaign/effect.png) 0 0/100% 100%;
  aspect-ratio: 2.0534979424;
  width: 127.9487179487cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
}
#campaign .chara::after {
  display: block;
  background: url(../../../assets/img/common/chara.webp) 0 0/100% 100%;
  aspect-ratio: 1.3175388967;
  width: 203.0192307692cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  content: "";
  position: absolute;
  left: 0px;
  top: 0;
}
#campaign .logo {
  margin-top: 60cqw;
  display: block;
  background: url(../../../assets/img/common/logo.svg) 0 0/100% 100%;
  aspect-ratio: 2.1142857143;
  width: 45.5384615385cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  margin-left: auto;
  margin-right: auto;
  filter: drop-shadow(0 0 4px rgb(0, 0, 0))
    drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
}
#campaign h2 {
  font-family: "Zen Old Mincho", serif;
  font-size: 10cqw;
  font-weight: bold;
  text-align: center;
  display: block;
  margin-top: 2cqw;
  margin-left: auto;
  margin-right: auto;
  filter: drop-shadow(0 0 8px rgb(0, 0, 0)) drop-shadow(0 0 4px rgb(0, 0, 0));
  line-height: 1.25em;
}
#campaign .hd {
  position: relative;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgb(0, 0, 0) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}
#campaign .entry {
  padding: 6cqw;
  display: flex;
  flex-direction: column;
  gap: 6cqw;
  text-align: center;
}
#campaign .entry .data {
  display: flex;
  flex-direction: column;
  gap: 3cqw;
}
#campaign .entry .data h3 {
  font-size: 3.6cqw;
  line-height: 1.25em;
  text-align: center;
  font-weight: bold;
  display: flex;
  gap: 3cqw;
  justify-content: center;
}
#campaign .entry .data h3::before {
  display: block;
  background: url(../../../assets/img/common/title_arrow.svg) 0 0/100% 100%;
  aspect-ratio: 3.75;
  width: 11.5384615385cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  transform: rotate(180deg);
}
#campaign .entry .data h3::after {
  display: block;
  background: url(../../../assets/img/common/title_arrow.svg) 0 0/100% 100%;
  aspect-ratio: 3.75;
  width: 11.5384615385cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
}
#campaign .entry .data p {
  font-size: 5cqw;
  line-height: 1.35em;
  font-weight: bold;
}
#campaign .entry .btn_entry {
  border: 1px solid #fff;
  background-color: #000;
  font-size: 5cqw;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5cqw 3cqw;
  display: block;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  filter: drop-shadow(2cqw 2cqw 0 #f23a5d);
  position: relative;
  z-index: 1;
}
#campaign .entry .btn_entry span {
  display: none;
}
#campaign .entry .btn_entry.closed {
  pointer-events: none;
  filter: none;
  border: 0;
}
#campaign .entry .btn_entry.closed span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.75);
}
#campaign .trial {
  margin-top: 3cqw;
  padding: 6cqw;
  display: flex;
  flex-direction: column;
  gap: 6cqw;
}
#campaign .trial h3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: "Zen Old Mincho", serif;
  gap: 1cqw;
  position: relative;
}
#campaign .trial h3:before {
  content: "";
  display: block;
  display: block;
  background: url(../../../assets/img/campaign/trial_back.png) 0 0/100% 100%;
  aspect-ratio: 2.0984719864;
  width: 158.4615384615cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  position: absolute;
  left: 50%;
  top: 55%;
  margin-left: -79.2307692308cqw;
  margin-top: -37.7564102564cqw;
}
#campaign .trial h3 span {
  position: relative;
  display: block;
  font-weight: bold;
  z-index: 1;
  line-height: 1.25em;
  filter: drop-shadow(0 0 4px rgb(0, 0, 0))
    drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
}
#campaign .trial h3 span.t1 {
  font-size: 4cqw;
  text-align: center;
}
#campaign .trial h3 span.t2 {
  text-align: center;
  font-size: 10cqw;
}
#campaign .trial h3 span.t3 {
  text-align: center;
  font-size: 5cqw;
}
#campaign .trial .videoPlayer {
  position: relative;
  container-type: inline-size;
}
#campaign .trial .videoPlayer #youtubePlayer {
  display: block;
  width: 100cqw !important;
  height: 56.25cqw !important;
}
#campaign .trial .videoPlayer .poster {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#campaign .trial .videoPlayer .poster::after {
  content: "";
  display: block;
  display: block;
  background: url(../../../assets/img/campaign/icon_player.svg) 0 0/100% 100%;
  aspect-ratio: 1;
  width: 18.1538461538cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
}
#campaign .trial iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border: 0;
  display: block;
  aspect-ratio: 16/9;
}
#campaign .trial .btn_trial {
  border: 1px solid #fff;
  background-color: #000;
  font-size: 5cqw;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5cqw 3cqw;
  display: block;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  width: 100%;
  position: relative;
  z-index: 1;
}
#campaign .special {
  margin-top: 9cqw;
}
#campaign .special h3 {
  display: block;
  background: url(../../../assets/img/campaign/special_ttl.svg) 0 0/100% 100%;
  aspect-ratio: 11.25;
  width: 103.8461538462cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
}
#campaign .special .lead {
  text-align: center;
  font-family: "Zen Old Mincho", serif;
  font-size: 6cqw;
  font-weight: bold;
  line-height: 1.35em;
  margin-top: 6cqw;
}
#campaign .special figure {
  width: 110cqw;
  margin-left: -5cqw;
  position: relative;
}
#campaign .special figure img {
  position: relative;
}
#campaign .special figure:before {
  content: "";
  display: block;
  display: block;
  background: url(../../../assets/img/campaign/special_back.png) 0 0/100% 100%;
  aspect-ratio: 2.1283497884;
  width: 193.4615384615cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -96.7307692308cqw;
  margin-top: -45.4487179487cqw;
}
#campaign .special .btn_special,
#campaign .special .btn_special2 {
  position: relative;
  width: 88cqw;
  display: block;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #1ca6ad;
  padding: 0.5cqw;
}
#campaign .special .btn_special span,
#campaign .special .btn_special2 span {
  display: block;
  background-color: #1ca6ad;
  text-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5cqw;
  font-weight: bold;
  text-decoration: none;
  padding: 5cqw 3cqw;
  color: #fff;
  display: flex;
  gap: 2cqw;
  align-items: center;
}
#campaign .special .btn_special span::after,
#campaign .special .btn_special2 span::after {
  content: "";
  display: block;
  display: block;
  background: url(../../../assets/img/campaign/special_icon.svg) 0 0/100% 100%;
  aspect-ratio: 1;
  width: 7.6923076923cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
}
#campaign .special .photoInput {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}
#campaign .special .btn_retry{
  margin-top: 12cqw;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
  font-size: 4cqw;
  text-align: center;
  border-bottom: 1px solid #fff;
  color: #fff;
  position: relative;
}
#campaign .copyright {
  text-align: center;
  margin-top: 12vw;
  font-size: 2.4vw;
  line-height: 1.25em;
}
.photoSheet {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  visibility: hidden;
  opacity: 0;
  transition-duration: 200ms;
  transition-property: visibility, opacity;
}
.photoSheet.open {
  visibility: inherit;
  opacity: 1;
}
.photoSheet__back {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
.photoSheet__frame {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 3cqw;
  padding: 6cqw 6cqw calc(6cqw + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #1ca6ad;
  background-color: rgba(0, 0, 0, 0.9);
  transform: translateY(100%);
  transition: transform 220ms ease-out;
}
.photoSheet.open .photoSheet__frame {
  transform: translateY(0);
}
.photoSheet__option {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #1ca6ad;
  padding: 0.5cqw;
}
.photoSheet__option span {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1ca6ad;
  color: #fff;
  font-size: 4.5cqw;
  font-weight: bold;
  padding: 4cqw 3cqw;
}
.photoSheet__cancel {
  display: block;
  width: 100%;
  margin-top: 2cqw;
  padding: 3.5cqw;
  border: 1px solid #fff;
  color: #fff;
  font-size: 4cqw;
}
@media (prefers-reduced-motion: reduce) {
  .photoSheet,
  .photoSheet__frame {
    transition: none;
  }
}
#special .special__back {
  display: block;
  background: url(../../../assets/img/special/back.png) 0 0/100% 100%;
  aspect-ratio: 1.0098939929;
  width: 183.2051282051cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  position: absolute;
  left: calc(50% - 91.6025641026cqw);
  top: -36cqw;
}
#special .inner {
  padding: 10cqw 10cqw;
  display: flex;
  flex-direction: column;
  gap: 6cqw;
  align-items: center;
  justify-content: center;
  position: relative;
}
#special .photoframe {
  width: 72cqw;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 304/405;
  position: relative;
  overflow: hidden;
  background-color: #000;
}
#special .photoframe .photo {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
#special .photoframe .result {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  pointer-events: auto;
  -moz-user-select: auto;
  user-select: auto;
  -webkit-user-select: auto;
  -webkit-user-drag: auto;
  -webkit-touch-callout: default;
}
#special .photoframe .frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
#special .photoframe .guide {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  border: 2px solid #fff;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
#special .photoframe .guide::before {
  display: block;
  background: url(../../../assets/img/special/guide.svg) 0 0/100% 100%;
  aspect-ratio: 1;
  width: 61.5384615385cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  animation-name: anm-photoframe;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
}
@keyframes anm-photoframe {
  0% {
    opacity: 0;
    transform: scale(0.75);
    animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
  }
  20% {
    opacity: 1;
    transform: scale(0.75);
    animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  }
  80% {
    opacity: 1;
    transform: scale(1);
    animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
#special.touched .guide {
  visibility: hidden;
}
#special .uis {
  width: 100%;
  display: flex;
  flex-direction: column;
}
#special .uis .ui {
  display: flex;
  flex-direction: column;
  gap: 6cqw;
}
#special .uis .text {
  text-align: center;
  font-size: 4cqw;
  text-align: center;
  font-weight: bold;
}
#special .buttons {
  gap: 3cqw;
  display: flex;
  flex-direction: column;
}
#special .btn {
  position: relative;
  width: 100%;
  display: block;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #1ca6ad;
  padding: 0.5cqw;
  flex: 1;
  display: flex;
}
#special .btn span {
  flex: 1;
  display: block;
  background-color: #1ca6ad;
  text-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4cqw;
  font-weight: bold;
  text-decoration: none;
  padding: 4cqw 1cqw;
  color: #fff;
  display: flex;
  gap: 2cqw;
  align-items: center;
  filter: drop-shadow(0px 0px 4px rgb(0, 0, 0));
}
#special .btn.red {
  border: 1px solid #f23a5d;
}
#special .btn.red span {
  background-color: #f23a5d;
}
#special .btn_reselect {
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #fff;
  font-size: 4cqw;
  font-weight: bold;
  text-decoration: underline;
  position: relative;
}
#special .btn_back {
  margin-top: 6cqw;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
  font-size: 4cqw;
  text-align: center;
  border-bottom: 1px solid #fff;
  color: #fff;
  position: relative;
}
#special .btn_retry{
  margin-top: 6cqw;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
  font-size: 4cqw;
  text-align: center;
  border-bottom: 1px solid #fff;
  color: #fff;
  position: relative;
}
html,
body {
  overscroll-behavior: none;
  background-color: #000;
  touch-action: manipulation;
}
body {
  font-family: "游ゴシック", "Yu Gothic", Helvetica, sans-serif;
  line-height: 1.5em;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  color: #fff;
}
html[lang="ko"] body {
  word-break: keep-all;
}
.base {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000 url(../../../assets/img/common/back.webp) center/cover;
}
#wrapper {
  overflow: hidden;
  container-type: inline-size;
  min-height:100vh;
}
img {
  width: 100%;
}
.page {
  position: relative;
  display: none;
}
.page.open {
  display: block;
}
.page .outer {
  position: relative;
}
.page .outer .inner {
  position: relative;
}
.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  padding: 8cqw;
  visibility: hidden;
  opacity: 0;
  transition-duration: 400ms;
  transition-property: visibility, opacity;
}
body.openModal .modal {
  visibility: inherit;
  opacity: 1;
}
.modal__back {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
}
.modal__pages {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 16cqw);
  overflow: hidden;
}
.modal__page {
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.modal__page.open {
  display: flex;
}
.modal__note {
  margin-top: 6cqw;
  font-size: 2.5cqw;
  line-height: 1.65em;
}
.modal__frame {
  border: 1px solid #fff;
  background-color: rgba(0, 0, 0, 0.85);
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal #trial .btn_close {
  position: absolute;
  right: 0;
  top: 0;
  width: 8cqw;
  height: 8cqw;
  background: url(../../../assets/img/common/modal_close.svg) center center/7cqw
    7cqw no-repeat;
  z-index: 1;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.modal #trial .logo {
  display: block;
  background: url(../../../assets/img/common/logo.svg) 0 0/100% 100%;
  aspect-ratio: 2.1142857143;
  width: 37.9487179487cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  margin-left: auto;
  margin-right: auto;
}
.modal #trial .ttl {
  text-align: center;
  font-family: "Zen Old Mincho", serif;
  font-weight: bold;
  font-size: 5.5cqw;
  margin-top: 1cqw;
  margin-left: auto;
  margin-right: auto;
}
.modal #trial ul {
  margin-top: 6cqw;
  display: flex;
  flex-direction: column;
  gap: 4cqw;
}
.modal #trial ul li {
  border: 1px solid #1ca6ad;
  padding: 0.5cqw;
  position: relative;
}
.modal #trial ul li a {
  display: block;
  background-color: #1ca6ad;
  text-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5cqw;
  font-weight: bold;
  text-decoration: none;
  padding: 5cqw 3cqw;
  color: #fff;
}
.modal #trial ul li.red {
  border: 1px solid #e90004;
}
.modal #trial ul li.red a {
  background-color: #e90004;
}
.modal #trial ul li.coming::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 5vw;
  content: "Coming Soon...";
  font-weight: bold;
}
.modal #trial .scroll {
  overflow: hidden;
  overflow-y: auto;
  padding: 6cqw;
}
.modal #confirm .frame {
  position: relative;
  border-radius: 4cqw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
.modal #confirm .frame .hd {
  background-color: red;
  padding: 3cqw;
  text-align: center;
  position: relative;
}
.modal #confirm .frame .btn_close {
  position: absolute;
  right: 0;
  top: 0;
  width: 12cqw;
  height: 12cqw;
  background: url(../../../assets/img/common/modal_close.svg) center center/7cqw
    7cqw no-repeat;
  z-index: 1;
}
.modal #confirm .frame .ttl {
  font-size: 6cqw;
  font-weight: bold;
}
.modal #confirm .frame .texts {
  color: #000;
  padding: 6cqw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal #confirm .frame .scroll {
  overflow: hidden;
  overflow-y: auto;
  padding-right: 2cqw;
}
.modal #confirm .frame .boxes {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.modal #confirm .frame .boxes .box {
  font-size: 3.2cqw;
  line-height: 1.35em;
}
.modal #confirm .frame .boxes .cap {
  font-size: 70%;
  line-height: 1.4em;
}
.modal #confirm .frame .btn_start {
  margin-top: 6cqw;
  border: 1px solid #000;
  padding: 0.5cqw;
  width: 75%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.modal #confirm .frame .btn_start span {
  color: #fff;
  display: block;
  background-color: #000;
  text-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5cqw;
  font-weight: bold;
  text-decoration: none;
  padding: 5cqw 3cqw;
}
.modal #entry {
  width: 72cqw;
}
.modal #entry .ttl {
  font-size: 3.6cqw;
  line-height: 1.3em;
  text-align: center;
}
.modal #entry .modal__frame {
  padding: 6cqw;
  position: relative;
}
.modal #entry .btn_close {
  position: absolute;
  right: 0;
  top: 0;
  width: 8cqw;
  height: 8cqw;
  background: url(../../../assets/img/common/modal_close.svg) center center/7cqw
    7cqw no-repeat;
  z-index: 1;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.modal #entry ul {
  display: flex;
  justify-content: center;
  gap: 12cqw;
  margin-top: 9cqw;
}
.modal #entry ul .sns {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2cqw;
  text-decoration: none;
}
.modal #entry ul .sns .icon {
  aspect-ratio: 1 !important;
  width: 12.8205128205vw !important;
}
.modal #entry ul .sns .text {
  text-decoration: none;
  color: #fff;
  font-size: 4cqw;
}
.modal #entry ul .sns_x .icon {
  display: block;
  background: url(../../../assets/img/common/sns_x.svg) 0 0/100% 100%;
  aspect-ratio: 1;
  width: 12.8205128205cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  background-size: 9.2307692308cqw;
  background-position: center;
  background-repeat: no-repeat;
}
.modal #entry ul .sns_fb .icon {
  display: block;
  background: url(../../../assets/img/common/sns_fb.svg) 0 0/100% 100%;
  aspect-ratio: 1;
  width: 12.8205128205cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  background-size: 11.7948717949cqw;
  background-position: center;
  background-repeat: no-repeat;
}
.modal #entry ul .sns_is .icon {
  display: block;
  background: url(../../../assets/img/common/sns_is.png) 0 0/100% 100%;
  aspect-ratio: 1;
  width: 23.0769230769cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  background-size: 11.7948717949cqw;
  background-position: center;
  background-repeat: no-repeat;
}
.modal #entry ul .sns_weibo .icon {
  display: block;
  background: url(../../../assets/img/common/sns_weibo.svg) 0 0/100% 100%;
  aspect-ratio: 1;
  width: 11.5384615385cqw;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
  background-size: 11.7948717949cqw;
  background-position: center;
  background-repeat: no-repeat;
}
.modal #privacy {
  width: 88cqw;
}
.modal #privacy .modal__frame {
  padding: 6cqw;
  display: flex;
  flex-direction: column;
  gap: 6cqw;
  overflow: hidden;
}
.modal #privacy .ttl {
  font-size: 4cqw;
  line-height: 1.3em;
  text-align: center;
}
.modal #privacy .btn_special {
  border: 1px solid #a5a5a5;
  padding: 0.5cqw;
  pointer-events: none;
}
.modal #privacy .btn_special span {
  display: block;
  background-color: #a5a5a5;
  text-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5cqw;
  font-weight: bold;
  text-decoration: none;
  padding: 5cqw 3cqw;
  color: #fff;
}
.modal #privacy .btn_special.active {
  pointer-events: all;
  border: 1px solid #1ca6ad;
}
.modal #privacy .btn_special.active span {
  background-color: #1ca6ad;
}
.modal #privacy .scroll {
  background-color: #fff;
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  padding: 3cqw;
}
.modal #privacy .boxes {
  display: flex;
  flex-direction: column;
  gap: 6cqw;
  font-size: 3cqw;
  line-height: 1.75em;
  color: #000;
}
.modal #esrb {
  width: 88cqw;
}
.modal #esrb .modal__frame {
  padding: 6cqw;
  display: flex;
  flex-direction: column;
  gap: 6cqw;
  overflow: hidden;
}
.modal #esrb .ttl {
  font-size: 4cqw;
  line-height: 1.3em;
  text-align: center;
}
.modal #esrb .btn_close {
  border: 1px solid #1ca6ad;
  padding: 0.5cqw;
}
.modal #esrb .btn_close span {
  display: block;
  background-color: #1ca6ad;
  text-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5cqw;
  font-weight: bold;
  text-decoration: none;
  padding: 5cqw 3cqw;
  color: #fff;
}
.modal #esrb .boxes {
  display: flex;
  flex-direction: column;
  gap: 6cqw;
  font-size: 3cqw;
  line-height: 1.75em;
  color: #000;
}
body.openModal {
  overflow: hidden;
}
.loading_cover {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  flex-direction: column;
  z-index: 99999999;
}
.loading_cover .chara {
  aspect-ratio: 1;
  width: 48.7179487179vw;
  animation-name: anm-loading1;
  animation-duration: 3000ms;
  animation-iteration-count: infinite;
}
.loading_cover .chara span {
  display: block;
  background-image: url(../../../assets/img/common/loading.webp);
  background-position: 0 0;
  background-size: 300% 100%;
  aspect-ratio: 1;
  width: 48.7179487179vw;
  animation-name: anm-loading2;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: steps(2, start);
}
@keyframes anm-loading1 {
  0% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
  50% {
    transform: translateY(-6vw);
    animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes anm-loading2 {
  0% {
    background-position: 0% 0;
  }
  33% {
    background-position: 100% 0;
  }
  66% {
    background-position: 200% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
.loading_cover .text {
  display: block;
  font-size: 4cqw;
}
body.loading .loading_cover {
  visibility: inherit;
}
/* body.loading {
  overflow: hidden;
  pointer-events: none;
} */
.note__outer {
  padding: 6cqw;
}
.note li {
  font-size: 1.885cqw;
  line-height: 1.4em;
}
.landscape {
  background: url(../../../assets/img/common/back_ls.webp) 0 0/100% 100%;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3cqw;
}
.landscape .icon {
  display: block;
  background: url(../../../assets/img/common/icon_landscape.svg) 0 0/100% 100%;
  aspect-ratio: 1.2090909091;
  height: 56.4102564103cqh;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  content: "";
}
.landscape p {
  font-weight: bold;
  font-size: 2cqw;
}
@media screen and (orientation: landscape) {
  .landscape {
    visibility: inherit;
  }
}
 /*# sourceMappingURL=local.css.map */