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, .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: .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: .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: .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: .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, .6);
    height: 12cqw;
    width: 100%;
    font-size: 4cqw;
    font-family: "Zen Old Mincho", serif;
    letter-spacing: .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%, .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: .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: .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: .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: .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: .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: .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: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(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: fixed;
    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, .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: .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, .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, .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: .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, .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: .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_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
}

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
}

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, .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, .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: .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, .85);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    font-size: 5vw;
    content: "Check the eshop on your Nintendo Switch 2";
    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: .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: .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
}

body.openModal {
    overflow: hidden
}

.loading_cover {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    flex-direction: column
}

.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 */