/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */
*,
::before,
::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 0;
    border-width: 0;
    border-style: solid
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

body {
    margin: 0
}

main {
    display: block
}

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
    margin: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: inherit;
    font-size: inherit
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none
}

dt {
    font-weight: bold
}

dd {
    margin-left: 0
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
    margin: 0;
    clear: both;
    overflow: visible;
    border-top-width: 1px;
    color: inherit
}

pre {
    font-size: inherit;
    font-family: monospace, monospace
}

address {
    font-style: inherit
}

a {
    background-color: rgba(0, 0, 0, 0);
    -webkit-text-decoration: none;
    color: inherit;
    text-decoration: none
}

abbr[title] {
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-size: inherit;
    font-family: monospace, monospace
}

small {
    font-size: 80%
}

sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

svg,
img,
embed,
object,
iframe {
    vertical-align: bottom
}

button,
input,
optgroup,
select,
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
    color: inherit;
    font: inherit;
    text-align: inherit;
    text-transform: inherit;
    vertical-align: middle
}

button,
[type=button],
[type=reset],
[type=submit] {
    cursor: pointer
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
    cursor: default
}

:-moz-focusring {
    outline: auto
}

select:disabled {
    opacity: inherit
}

option {
    padding: 0
}

fieldset {
    min-width: 0;
    margin: 0;
    padding: 0
}

legend {
    padding: 0
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

[type=number] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield
}

label[for] {
    cursor: pointer
}

details {
    display: block
}

summary {
    display: list-item
}

[contenteditable]:focus {
    outline: auto
}

table {
    border-color: inherit;
    border-collapse: collapse
}

caption {
    text-align: left
}

td,
th {
    padding: 0;
    vertical-align: top
}

th {
    font-weight: bold;
    text-align: left
}

:root {
    --color_success: #ff4222;
    --rgb_success: 255, 66, 34;
    --color_primary: #3498db;
    --rgb_primary: 52, 152, 219;
    --color_secondary: #bdc3c7;
    --rgb_secondary: 189, 195, 199;
    --color_text: #7d4a2e;
    --rgb_text: 125, 74, 46;
    --color_text_re: #fff;
    --rgb_text_re: 255, 255, 255;
    --color_background: #fff;
    --rgb_background: 255, 255, 255;
    --color_background_re: #7d4a2e;
    --rgb_background_re: 125, 74, 46;
    --color_background_section: #eee;
    --rgb_background_section: 238, 238, 238;
    --color_border: #7d4a2e;
    --rgb_border: 125, 74, 46;
    --color_shadow: #7d4a2e;
    --rgb_shadow: 125, 74, 46;
    --color_link: #007aff;
    --rgb_link: 0, 122, 255;
    --color_scrollbar_bg: #7d4a2e;
    --rgb_scrollbar_bg: 125, 74, 46;
    --color_scrollbar: #eee;
    --rgb_scrollbar: 238, 238, 238;
    --color_focus: #ff4222;
    --rgb_focus: 255, 66, 34
}

* {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
}

html {
    overflow-y: scroll;
    font-size: 62.5%;
    text-rendering: optimizeLegibility
}

@font-face {
    font-family: "one";
    src: url('../font/pop.otf') format('truetype'),
        url('../font/pop.otf')format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;/
}

body {
    width: 100%;
    height: 100%;
    color: rgba(125, 74, 46, 1);
    color: rgba(var(--rgb_text), 1);
    font-size: clamp(1.4rem, 1.2571428571rem + .4464285714vw, 1.6rem);
    font-family: "one", "Helvetica Neue", Arial, sans-serif !important;
    word-wrap: anywhere;
    line-break: strict;
    word-break: normal;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-feature-settings: "palt";
    position: relative;
    font-feature-settings: "palt"
}

body[data-body-fixed=true] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible !important
}

body::-webkit-scrollbar {
    width: 16px
}

body::-webkit-scrollbar-track {
    background-color: rgba(125, 74, 46, 0.75);
    background-color: rgba(var(--rgb_scrollbar_bg), 0.75)
}

body::-webkit-scrollbar-thumb {
    border: 3px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    background-color: rgba(238, 238, 238, 1);
    background-color: rgba(var(--rgb_scrollbar), 1)
}

body::after {
    z-index: -2;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    content: ""
}

h1 {
    z-index: 1;
    position: relative;
    margin: 0;
    padding: 0;
    line-height: 1em
}

h2 {
    z-index: 1;
    position: relative;
    margin: 0;
    padding: 0;
    line-height: 1em
}

h3 {
    z-index: 1;
    position: relative;
    margin: 0;
    padding: 0;
    line-height: 1em
}

h4 {
    z-index: 1;
    position: relative;
    margin: 0;
    padding: 0;
    line-height: 1em
}

h5 {
    z-index: 1;
    position: relative;
    margin: 0;
    padding: 0;
    line-height: 1em
}

h6 {
    z-index: 1;
    position: relative;
    margin: 0;
    padding: 0;
    line-height: 1em
}

img {
    width: 100%;
    height: auto;
    vertical-align: bottom
}

a {
    color: #007aff;
    color: var(--color_link);
    -webkit-text-decoration: none;
    text-decoration: none
}

p {
    padding: clamp(.8rem, .2285714286rem + 1.7857142857vw, 1.6rem) clamp(.4rem, .1142857143rem + .8928571429vw, .8rem) 0;
    line-height: 1.5em
}

p:first-child {
    padding-top: 0
}

.--hide {
    display: none
}

noscript {
    z-index: 100000;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    background-color: rgba(var(--rgb_background), 0.8)
}

noscript .note__wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    transform: translate(-50%, -50%);
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    gap: clamp(.8rem, .2285714286rem + 1.7857142857vw, 1.6rem)
}

noscript .note__wrap img {
    width: 32px;
    height: auto
}

noscript .note__wrap p {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    color: #7d4a2e;
    color: var(--color_text)
}

header {
    z-index: 30;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(4.8rem, 3.6571428571rem + 3.5714285714vw, 6.4rem);
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content
}

header .header__inner {
    position: relative;
    max-width: 1920px;
    margin: 0 auto
}

header .header__inner a#success-logo {
    display: block;
    position: absolute;
    top: 18%;
    right: 0;
    width: clamp(9.6rem, 5.0285714286rem + 14.2857142857vw, 16rem);
    height: clamp(1.9rem, .9714285714rem + 2.9017857143vw, 3.2rem);
    -webkit-text-decoration: none !important;
    margin: clamp(.8rem, .2285714286rem + 1.7857142857vw, 1.6rem) clamp(.8rem, .2285714286rem + 1.7857142857vw, 1.6rem) 0 0;
    text-decoration: none !important
}

header .header__inner a#success-logo::after {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("../img/_common/logo-success.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    content: ""
}

header .header__inner a#arc-logo {
    display: block;
    position: absolute;
    top: 0;
    right: clamp(9.6rem, 5.0285714286rem + 14.2857142857vw, 16rem);
    width: clamp(8.6rem, 5.0285714286rem + 14.2857142857vw, 14rem);
    height: clamp(4.8rem, 2.5142857143rem + 7.1428571429vw, 8rem);
    -webkit-text-decoration: none !important;
    margin: clamp(.08rem, .1rem + 0.5vw, 1.6rem) clamp(.1rem, .1rem + 1.5vw, 1.6rem) 0 0;
    text-decoration: none !important
}

header .header__inner a#arc-logo::after {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("../img/_common/ARCASIA.png");
    background-position: right 10px center;
    background-size: contain;
    background-repeat: no-repeat;
    content: ""
}

header .header__inner div#switch {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(5rem, 0rem + 15vw, 12rem);
    display: flex
}

header .header__inner div#switch img {
    flex-wrap: nowrap;
}


header .header__inner div#steam {
    position: absolute;
    top: 0;
    left: clamp(5rem, 0rem + 15vw, 12rem);
    height: clamp(5rem, 0rem + 15vw, 12rem);
    width: auto;
    padding: 0;
    display: flex;
    align-items: center;
}

/* 핵심 */
header .header__inner div#steam img {
    height: 100%;
    width: auto;
    /* 비율 유지 */
    display: block;
    /* 아래 여백 제거 */
    flex: 0 0 auto;
    /* flex로 눌려 찌그러지는 것 방지 */
}

footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    top: 100vh;
    width: 100%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    margin: 0 auto;
    padding: 0 clamp(1.6rem, .4571428571rem + 3.5714285714vw, 3.2rem);
    font-size: clamp(.8rem, .5142857143rem + .8928571429vw, 1.2rem);
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    z-index: 20;
    align-items: center;
    color: #faebd7
}

footer .footer__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    padding: clamp(.8rem, .2285714286rem + 1.7857142857vw, 1.6rem) 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: left;
    -ms-flex-align: left;
    align-items: left;
    font-family: verdina;
    font-weight: bold;
}

footer .footer__inner span {
    text-align: left;
    text-shadow: 0 0 10px rgba(0, 0, 0, .5)
}

@media (max-width: 768px) {
    footer .footer__inner span {
        width: 60vw;
    }
}


#burger-menu {
    -webkit-transform: translate(0, -50%);
    position: absolute;
    top: 50%;
    right: clamp(.8rem, -.3428571429rem + 3.5714285714vw, 2.4rem);
    transform: translate(0, -50%);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: clamp(2.4rem, 1.8285714286rem + 1.7857142857vw, 3.2rem);
    height: clamp(1.6rem, 1.0285714286rem + 1.7857142857vw, 2.4rem);
    cursor: pointer
}

#burger-menu:focus-visible {
    z-index: 50;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) 255, 66, 34;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) var(--rgb_focus);
    outline-offset: clamp(.2rem, .0571428571rem + .4464285714vw, .4rem)
}

#burger-menu__bar {
    width: 100%;
    height: clamp(.2rem, .0571428571rem + .4464285714vw, .4rem);
    background-color: #fff;
    -webkit-transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1)
}

#burger-menu__bar:first-child {
    top: 0
}

#burger-menu__bar:nth-child(2) {
    top: 50%
}

#burger-menu__bar:last-child {
    top: 100%
}

#burger-menu.active__bar:first-child {
    top: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg)
}

#burger-menu.active__bar:nth-child(2) {
    width: 0;
    height: 0
}

#burger-menu.active__bar:last-child {
    top: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg)
}

main {
    z-index: 10;
    position: relative;
    width: 100%;
    padding: 0;
    overflow: hidden
}

main .main__inner {
    position: relative;
    width: 100%;
    margin: 0 auto
}

h2 {
    padding: 0 clamp(.4rem, .1142857143rem + .8928571429vw, .8rem) clamp(.8rem, .2285714286rem + 1.7857142857vw, 1.6rem);
    font-size: clamp(1.8rem, 1.3714285714rem + 1.3392857143vw, 2.4rem)
}

h2.__sns {
    position: relative;
    font-size: clamp(1.4rem, 1.2571428571rem + .4464285714vw, 1.6rem);
    text-align: center
}

h3 {
    padding: 0 clamp(.2rem, .0571428571rem + .4464285714vw, .4rem) clamp(.4rem, .1142857143rem + .8928571429vw, .8rem);
    font-size: clamp(1.6rem, 1.1714285714rem + 1.3392857143vw, 2.2rem)
}

.stickyBtn {
    z-index: 50;
    position: sticky;
    bottom: 0;
    width: 100%;
    max-width: 1920px;
    height: 0;
    margin: 0 auto;
    pointer-events: none
}

.btn--fit {
    display: block;
    padding: clamp(.4rem, .1142857143rem + .8928571429vw, .8rem) clamp(.8rem, .2285714286rem + 1.7857142857vw, 1.6rem);
    outline: solid 0 #007aff;
    outline: solid 0 var(--color_link);
    outline-offset: 0;
    background: #fff;
    background: var(--color_background);
    color: #7d4a2e;
    color: var(--color_text);
    font-size: clamp(1.4rem, 1.2571428571rem + .4464285714vw, 1.6rem);
    cursor: pointer;
    -webkit-transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1);
    -webkit-transform: scale(1);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    transform: scale(1);
    text-align: center
}

.btn--fit:hover {
    outline: solid clamp(.1rem, .1rem + 0vw, .1rem) #fff;
    outline: solid clamp(.1rem, .1rem + 0vw, .1rem) var(--color_background);
    outline-offset: clamp(-0.4rem, -0.4rem + 0vw, -0.4rem);
    background: #007aff;
    background: var(--color_link);
    color: #fff;
    color: var(--color_text_re)
}

.btn--fit:active {
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
}

.btn--fit:focus-visible {
    z-index: 50;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) 255, 66, 34;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) var(--rgb_focus);
    outline-offset: clamp(.2rem, .0571428571rem + .4464285714vw, .4rem)
}

.btn--half {
    display: block;
    padding: clamp(.4rem, .1142857143rem + .8928571429vw, .8rem) clamp(.8rem, .2285714286rem + 1.7857142857vw, 1.6rem);
    outline: solid 0 #007aff;
    outline: solid 0 var(--color_link);
    outline-offset: 0;
    background: #fff;
    background: var(--color_background);
    color: #7d4a2e;
    color: var(--color_text);
    font-size: clamp(1.4rem, 1.2571428571rem + .4464285714vw, 1.6rem);
    cursor: pointer;
    -webkit-transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1);
    -webkit-transform: scale(1);
    width: 50%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    transform: scale(1);
    text-align: center
}

.btn--half:hover {
    outline: solid clamp(.1rem, .1rem + 0vw, .1rem) #fff;
    outline: solid clamp(.1rem, .1rem + 0vw, .1rem) var(--color_background);
    outline-offset: clamp(-0.4rem, -0.4rem + 0vw, -0.4rem);
    background: #007aff;
    background: var(--color_link);
    color: #fff;
    color: var(--color_text_re)
}

.btn--half:active {
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
}

.btn--half:focus-visible {
    z-index: 50;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) 255, 66, 34;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) var(--rgb_focus);
    outline-offset: clamp(.2rem, .0571428571rem + .4464285714vw, .4rem)
}

.btn--full {
    display: block;
    padding: clamp(.4rem, .1142857143rem + .8928571429vw, .8rem) clamp(.8rem, .2285714286rem + 1.7857142857vw, 1.6rem);
    outline: solid 0 #007aff;
    outline: solid 0 var(--color_link);
    outline-offset: 0;
    background: #fff;
    background: var(--color_background);
    color: #7d4a2e;
    color: var(--color_text);
    font-size: clamp(1.4rem, 1.2571428571rem + .4464285714vw, 1.6rem);
    cursor: pointer;
    -webkit-transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1);
    -webkit-transform: scale(1);
    width: 100%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    transform: scale(1);
    text-align: center
}

.btn--full:hover {
    outline: solid clamp(.1rem, .1rem + 0vw, .1rem) #fff;
    outline: solid clamp(.1rem, .1rem + 0vw, .1rem) var(--color_background);
    outline-offset: clamp(-0.4rem, -0.4rem + 0vw, -0.4rem);
    background: #007aff;
    background: var(--color_link);
    color: #fff;
    color: var(--color_text_re)
}

.btn--full:active {
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
}

.btn--full:focus-visible {
    z-index: 50;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) 255, 66, 34;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) var(--rgb_focus);
    outline-offset: clamp(.2rem, .0571428571rem + .4464285714vw, .4rem)
}

.btn--scrollTop {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: clamp(0rem, -9.2142857143rem + 28.7946428571vw, 12.9rem);
    height: clamp(0rem, -9.9285714286rem + 31.0267857143vw, 13.9rem);
    margin-left: -64px;
    overflow: hidden;
    background-image: none;
    background-position: 50% 50%;
    background-size: clamp(0rem, -9.2142857143rem + 28.7946428571vw, 12.9rem);
    background-repeat: no-repeat;
    pointer-events: visible;
    -webkit-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
    z-index: 50;
    cursor: pointer;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
    opacity: 0;
    -webkit-animation: BtnPopOut .25s ease 0s 1 forwards;
    animation: BtnPopOut .25s ease 0s 1 forwards
}

@-webkit-keyframes scrollUp {
    0% {
        top: 60%
    }

    50% {
        top: 50%
    }

    100% {
        top: 60%
    }
}

@keyframes scrollUp {
    0% {
        top: 60%
    }

    50% {
        top: 50%
    }

    100% {
        top: 60%
    }
}

@-webkit-keyframes BtnPopOut {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
}

@keyframes BtnPopOut {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
}

.btn--scrollTop[data-show=true] {
    -webkit-animation: BtnPopIn .25s ease 0s 1 forwards;
    animation: BtnPopIn .25s ease 0s 1 forwards
}

@-webkit-keyframes BtnPopIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes BtnPopIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.position--lt {
    margin-right: auto
}

.position--rt {
    margin-left: auto
}

.position--ct {
    margin-right: auto;
    margin-left: auto
}

section {
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin: clamp(1.6rem, .4571428571rem + 3.5714285714vw, 3.2rem) auto;
    padding: clamp(1.6rem, .4571428571rem + 3.5714285714vw, 3.2rem);
    outline: none
}

section h2 {
    max-width: 1280px;
    margin: 0 auto
}

section .content {
    position: relative;
    max-width: 1280px;
    margin: clamp(1.6rem, .4571428571rem + 3.5714285714vw, 3.2rem) auto;
    padding: 0 clamp(.8rem, .2285714286rem + 1.7857142857vw, 1.6rem)
}

section .content:last-child {
    margin-bottom: 0
}

section[data-fullView=true] {
    max-width: 100%;
    height: 100svh;
    overflow: hidden
}

section[data-width=full] {
    max-width: 100%;
    padding: clamp(1.6rem, .4571428571rem + 3.5714285714vw, 3.2rem) 0
}

section[data-width=full] .content {
    max-width: 100%;
    padding: 0
}

section:last-child {
    margin-bottom: 0
}

section.__sns {
    background: none
}

section .sns-icons-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: clamp(1.6rem, .4571428571rem + 3.5714285714vw, 3.2rem);
    -ms-flex-wrap: nowrap;
    z-index: 0;
    flex-wrap: nowrap;
    margin: 0 auto clamp(5rem, 7.1428571429rem - 6.6964285714vw, 2rem)
}

section .sns-icons-wrap__item {
    display: block;
    width: clamp(3.2rem, 2.6285714286rem + 1.7857142857vw, 4rem);
    height: clamp(3.2rem, 2.6285714286rem + 1.7857142857vw, 4rem);
    overflow: hidden;
    background: no-repeat center/contain;
    -webkit-filter: drop-shadow(clamp(0rem, -0.0714285714rem + 0.2232142857vw, 0.1rem) clamp(0rem, -0.0714285714rem + 0.2232142857vw, 0.1rem) clamp(0rem, -0.0714285714rem + 0.2232142857vw, 0.1rem) #7d4a2e);
    filter: drop-shadow(clamp(0rem, -0.0714285714rem + 0.2232142857vw, 0.1rem) clamp(0rem, -0.0714285714rem + 0.2232142857vw, 0.1rem) clamp(0rem, -0.0714285714rem + 0.2232142857vw, 0.1rem) #7d4a2e);
    -webkit-filter: drop-shadow(clamp(0rem, -0.0714285714rem + 0.2232142857vw, 0.1rem) clamp(0rem, -0.0714285714rem + 0.2232142857vw, 0.1rem) clamp(0rem, -0.0714285714rem + 0.2232142857vw, 0.1rem) var(--color_shadow));
    filter: drop-shadow(clamp(0rem, -0.0714285714rem + 0.2232142857vw, 0.1rem) clamp(0rem, -0.0714285714rem + 0.2232142857vw, 0.1rem) clamp(0rem, -0.0714285714rem + 0.2232142857vw, 0.1rem) var(--color_shadow))
}

section .sns-icons-wrap__item:focus-visible {
    z-index: 50;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) 255, 66, 34;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) var(--rgb_focus);
    outline-offset: clamp(.2rem, .0571428571rem + .4464285714vw, .4rem)
}

section .sns-icons-wrap__item.--line {
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><path d="M34,44H10C4.5,44,0,39.5,0,34l0-24C0,4.5,4.5,0,10,0l24,0c5.5,0,10,4.5,10,10v24C44,39.5,39.5,44,34,44z" style="fill:%2306c755;" /><path d="M36.7,19.9C36.7,13.4,30.1,8,22,8C13.9,8,7.3,13.4,7.3,19.9c0,5.9,5.2,10.8,12.3,11.7c0.5,0.1,1.1,0.3,1.3,0.7c0.1,0.4,0.1,1,0,1.3c0,0-0.2,1-0.2,1.3c-0.1,0.4-0.3,1.5,1.3,0.8c1.6-0.7,8.4-5,11.5-8.5h0C35.6,24.9,36.7,22.6,36.7,19.9z" style="fill:%23ffffff;"/><path d="M31.8,23.7h-4.1h0c-0.2,0-0.3-0.1-0.3-0.3v0v0V17v0v0c0-0.2,0.1-0.3,0.3-0.3h0h4.1c0.2,0,0.3,0.1,0.3,0.3v1c0,0.2-0.1,0.3-0.3,0.3H29v1.1h2.8c0.2,0,0.3,0.1,0.3,0.3v1c0,0.2-0.1,0.3-0.3,0.3H29v1.1h2.8c0.2,0,0.3,0.1,0.3,0.3v1C32.1,23.6,31.9,23.7,31.8,23.7z" style="fill:%2306c755;"/><path d="M16.5,23.7c0.2,0,0.3-0.1,0.3-0.3v-1c0-0.2-0.1-0.3-0.3-0.3h-2.8V17c0-0.2-0.1-0.3-0.3-0.3h-1c-0.2,0-0.3,0.1-0.3,0.3v6.4v0v0c0,0.2,0.1,0.3,0.3,0.3h0H16.5z" style="fill:%2306c755;"/><path d="M19,16.8h-1c-0.2,0-0.3,0.1-0.3,0.3v6.4c0,0.2,0.1,0.3,0.3,0.3h1c0.2,0,0.3-0.1,0.3-0.3V17C19.3,16.9,19.2,16.8,19,16.8z" style="fill:%2306c755;"/><path d="M26.1,16.8h-1c-0.2,0-0.3,0.1-0.3,0.3v3.8l-2.9-4c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0h-1c-0.2,0-0.3,0.1-0.3,0.3v6.4c0,0.2,0.1,0.3,0.3,0.3h1c0.2,0,0.3-0.1,0.3-0.3v-3.8l2.9,4c0,0,0,0.1,0.1,0.1c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0.1,0h1c0.2,0,0.3-0.1,0.3-0.3V17C26.4,16.9,26.3,16.8,26.1,16.8z" style="fill:%2306c755;"/></svg>')
}

section .sns-icons-wrap__item.--facebook {
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><circle cx="22" cy="22" r="22" style="fill:%230866ff;"/><path d="M30.7,28.7l1.2-6.7h-7.1v-2.3c0-3.6,1.4-4.9,5-4.9c1.1,0,2.1,0,2.5,0.1V8.7c-1-0.3-3.4-0.6-4.8-0.6c-7.3,0-10.7,3.4-10.7,11V22h-4.5v6.7h4.5v14.6c1.6,0.4,3.4,0.7,5.4,0.7c1,0,1.8,0,2.6-0.1V28.7H30.7z" style="fill:%23ffffff;"/></svg>')
}

section .sns-icons-wrap__item.--twitter {
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><path d="M26.2,18.6L42.1,0h-3.9L24.5,16.2L13.4,0H0.5l16.8,24.5L0.5,44h3.9L19,27l11.7,17h12.8L26.2,18.6L26.2,18.6zM21,24.6l-1.6-2.3L5.7,2.9h5.8l11,15.7l1.6,2.5l14.3,20.2h-5.8L21,24.6L21,24.6z" style="fill:%23000000; "/></svg>')
}

section .sns-icons-wrap__item.--twitter[data-theme=dark] {
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><path d="M26.2,18.6L42.1,0h-3.9L24.5,16.2L13.4,0H0.5l16.8,24.5L0.5,44h3.9L19,27l11.7,17h12.8L26.2,18.6L26.2,18.6zM21,24.6l-1.6-2.3L5.7,2.9h5.8l11,15.7l1.6,2.5l14.3,20.2h-5.8L21,24.6L21,24.6z" style="fill:%23ffffff; "/></svg>')
}

section .sns-icons-wrap__item.--instagram {
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><circle cx="22" cy="22" r="22" style="fill:%23fa0b6a;"/><g><g><path d="M26.64,11h-9.29c-3.51,0-6.36,2.85-6.36,6.36v9.29c0,3.51,2.85,6.36,6.36,6.36h9.29c3.51,0,6.36-2.85,6.36-6.36v-9.29c0-3.51-2.85-6.36-6.36-6.36Zm4.39,15.67c0,2.41-1.96,4.37-4.37,4.37h-9.34c-2.41,0-4.37-1.96-4.37-4.37v-9.34c0-2.41,1.96-4.37,4.37-4.37h9.34c2.41,0,4.37,1.96,4.37,4.37v9.34Z" style="fill:%23ffffff;"/><path d="M22,16.34c-3.13,0-5.66,2.53-5.66,5.66s2.53,5.66,5.66,5.66,5.66-2.53,5.66-5.66-2.53-5.66-5.66-5.66Zm0,9.42c-2.08,0-3.76-1.68-3.76-3.76s1.68-3.76,3.76-3.76,3.76,1.68,3.76,3.76-1.68,3.76-3.76,3.76Z" style="fill:%23ffffff;"/></g><circle cx="27.87" cy="16.12" r="1.32" style="fill:%23ffffff;"/></g></svg>')
}

.section_wrap {
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    flex-direction: row;
    max-width: 1280px;
    margin: clamp(1.6rem, .4571428571rem + 3.5714285714vw, 3.2rem) auto
}

.section_wrap section {
    margin: 0
}

@media (max-width: 768px) {
    .section_wrap.page {
        margin-top: clamp(6.4rem,
                1.8285714284rem + 14.2857142856vw,
                12.8rem);
    }
}


.sectionBG {
    z-index: -2;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.sectionBG::after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0.5) 2px);
    background-size: auto auto;
    content: "";
    mix-blend-mode: multiply
}

.sectionBG video {
    -webkit-filter: sepia(1);
    width: 100%;
    height: 100%;
    filter: sepia(1);
    -o-object-fit: cover;
    object-fit: cover
}

[data-fullView=true] h2,
[data-fullView=true] .content {
    text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff
}

div.movie-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 1024px;
    margin: clamp(1.6rem, -4.4rem + 18.75vw, 10rem) auto 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

div.movie-inner div {
    width: 100%;
    cursor: pointer
}

.js-loader {
    z-index: 10000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: bisque;
    opacity: 1;
    pointer-events: none
}

.js-loader__wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    transform: translate(-50%, -50%);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.js-loader__wrap__text {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: clamp(1.6rem, -2.2571428571rem + 12.0535714286vw, 7rem);
    margin-right: clamp(.2rem, .0571428571rem + .4464285714vw, .4rem);
    color: #7d4a2e;
    color: var(--color_text);
    font-size: clamp(1.6rem, 1.4571428571rem + .4464285714vw, 1.8rem);
    line-height: clamp(1.6rem, -2.2571428571rem + 12.0535714286vw, 7rem);
    text-align: center
}

.js-loader__wrap__text:first-child {
    width: clamp(1.6rem, -2.2571428571rem + 12.0535714286vw, 7rem);
    background: url("../img/_res/cursor.png.webp") no-repeat center/contain
}

.js-loader__wrap__text:last-child {
    margin-right: 0
}

.parallaxWrap {
    position: relative;
    aspect-ratio: 3/1;
    width: 100%;
    overflow: hidden
}

.parallaxWrap [data-parallax] {
    -webkit-transform: translate(0, -30%);
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0, -30%);
    -webkit-filter: blur(0);
    filter: blur(0)
}

.hScrollWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    width: 100%;
    height: 100vh;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden
}

.hScrollWrap--item {
    -ms-flex-negative: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.hScrollWrap--item:nth-child(1) {
    background-color: red
}

.hScrollWrap--item:nth-child(2) {
    background-color: green
}

.hScrollWrap--item:nth-child(3) {
    background-color: blue
}

.hScrollWrap--item:nth-child(4) {
    background-color: aqua
}

.hScrollWrap--item:nth-child(5) {
    background-color: #f0f
}

.slideImg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 192px;
    -webkit-transform: translate(-100%, 0) scaleX(-1);
    transform: translate(-100%, 0) scaleX(-1);
    -webkit-transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1)
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(125, 74, 46, 0.75);
    background: rgba(var(--rgb_background_re), 0.75);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    visibility: hidden;
    z-index: 1000;
    backdrop-filter: saturate(180%) blur(clamp(0.2rem, 0.0571428571rem + 0.4464285714vw, 0.4rem));
    opacity: 0
}

.modal .modal__body {
    opacity: 0;
    -webkit-filter: blur(clamp(0.2rem, 0.0571428571rem + 0.4464285714vw, 0.4rem));
    filter: blur(clamp(0.2rem, 0.0571428571rem + 0.4464285714vw, 0.4rem));
    -webkit-transition: opacity .3s cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: 1;
    position: relative;
    width: calc(100vw - clamp(1.6rem, .4571428571rem + 3.5714285714vw, 3.2rem));
    height: calc(100dvh - clamp(4.8rem, 3.6571428571rem + 3.5714285714vw, 6.4rem));
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    transition: opacity .3s cubic-bezier(0.25, 0.1, 0.25, 1)
}

.modal[data-modal-type=normal] .modal__body {
    max-width: 960px;
    padding: clamp(1.6rem, .4571428571rem + 3.5714285714vw, 3.2rem) clamp(.8rem, .2285714286rem + 1.7857142857vw, 1.6rem) 0;
    overflow-y: scroll;
    background: rgba(255, 255, 255, 1);
    background: rgba(var(--rgb_background), 1)
}

.modal[data-modal-type=normal] .modal__body .modal__content {
    padding: clamp(1.6rem, .4571428571rem + 3.5714285714vw, 3.2rem) 0
}

.modal[data-modal-type=Youtube] .modal__body {
    width: 100%;
    max-width: 1440px;
    pointer-events: none
}

.modal[data-modal-type=Youtube] .modal__body .modal__content {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 1440px;
    overflow: hidden;
    pointer-events: all;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.modal[data-modal-type=Youtube] .modal__body .modal__content:focus-visible {
    z-index: 50;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) 255, 66, 34;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) var(--rgb_focus);
    outline-offset: clamp(.2rem, .0571428571rem + .4464285714vw, .4rem)
}

.modal[data-modal-type=Youtube] .modal__body .modal__content.normal {
    width: 100%;
    height: 56.25vw
}

.modal[data-modal-type=Youtube] .modal__body .modal__content.normal.switch {
    width: calc((100dvh - clamp(4.8rem, 3.6571428571rem + 3.5714285714vw, 6.4rem))*1.7777777778);
    height: 100%
}

.modal[data-modal-type=Youtube] .modal__body .modal__content.short {
    width: calc((100dvh - clamp(4.8rem, 3.6571428571rem + 3.5714285714vw, 6.4rem))*.5625);
    height: 100%
}

.modal[data-modal-type=Youtube] .modal__body .modal__content.short.switch {
    width: 100%;
    height: 177.7777777778vw
}

.modal[data-modal-type=Youtube] .modal__body .modal__content iframe {
    width: 100%;
    height: 100%
}

.modal[data-modal-type=singleImg] .modal__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    max-width: 1440px;
    pointer-events: none;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.modal[data-modal-type=singleImg] .modal__body .modal__content {
    pointer-events: all
}

.modal[data-modal-type=singleImg] .modal__body .modal__content.switch {
    height: 100%
}

.modal[data-modal-type=singleImg] .modal__body .modal__content.switch img {
    width: auto;
    height: 100%
}

.modal.show {
    visibility: visible;
    opacity: 1
}

.modal.show .modal__body {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0)
}

.modal .modal__close-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 10;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: clamp(4.8rem, 3.6571428571rem + 3.5714285714vw, 6.4rem);
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    backdrop-filter: saturate(180%) blur(clamp(0.2rem, 0.0571428571rem + 0.4464285714vw, 0.4rem));
    background: #000;
    cursor: pointer;
    pointer-events: all;
    -webkit-transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1);
    border-top: solid 1px #7d4a2e;
    border-top: solid 1px var(--color_border);
    transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1)
}

.modal .modal__close-btn::after,
.modal .modal__close-btn::before {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    width: clamp(1.6rem, -.1142857143rem + 5.3571428571vw, 4rem);
    height: 6px;
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 4px;
    background: #fff
}

.modal .modal__close-btn::before {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg)
}

.modal .modal__close-btn:focus-visible,
.modal .modal__close-btn:hover {
    backdrop-filter: none;
    background: #7d4a2e;
    background: var(--color_text)
}

.modal .modal__close-btn:focus-visible::after,
.modal .modal__close-btn:focus-visible::before,
.modal .modal__close-btn:hover::after,
.modal .modal__close-btn:hover::before {
    height: 8px;
    background: #fff;
    background: var(--color_text_re)
}

.modal .modal__close-area {
    z-index: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.youtube {
    position: relative;
    max-width: 1024px;
    margin: 0 auto
}

.youtube .content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.youtube .content .youtube-contents,
.youtube .content .op {
    width: 100%;
    cursor: pointer
}

.youtube-contents {
    width: 100%;
    max-width: 610px
}

.youtube-contents__body {
    position: relative;
    left: 0;
    margin: 0;
    cursor: pointer;
    -webkit-transform: translateZ(0);
    max-width: 768px;
    transform: translateZ(0)
}

.youtube-contents__body:focus-visible {
    z-index: 50;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) 255, 66, 34;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) var(--rgb_focus);
    outline-offset: clamp(.2rem, .0571428571rem + .4464285714vw, .4rem)
}

.youtube-contents__img {
    position: relative;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1);
    border-radius: 20px;
    transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1)
}

.youtube-contents__play {
    position: absolute;
    pointer-events: none;
    -webkit-transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: clamp(4.8rem, 3.0857142857rem + 5.3571428571vw, 7.2rem);
    height: clamp(4.8rem, 3.0857142857rem + 5.3571428571vw, 7.2rem);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #ff4222;
    background: var(--color_success)
}

.youtube-contents__play::before {
    position: absolute;
    content: "";
    -webkit-transform: translate(-50%, -50%);
    top: 50%;
    left: 55%;
    width: calc(clamp(2.4rem, 1.5428571429rem + 2.6785714286vw, 3.6rem)/2*1.7320508076);
    height: clamp(2.4rem, 1.5428571429rem + 2.6785714286vw, 3.6rem);
    transform: translate(-50%, -50%);
    background: #fff;
    clip-path: polygon(0 0, 100% 50%, 0 100%)
}

.youtube-contents__new {
    position: absolute;
    top: -20px;
    left: -20px;
    width: clamp(5rem, 0rem + 15.625vw, 12rem);
    pointer-events: none
}

.mimg {
    cursor: pointer
}

.mimg:focus-visible {
    z-index: 50;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) 255, 66, 34;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) var(--rgb_focus);
    outline-offset: clamp(.2rem, .0571428571rem + .4464285714vw, .4rem)
}

.container-spotlight .spotlight-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: clamp(.8rem, .2285714286rem + 1.7857142857vw, 1.6rem)
}



.container-spotlight .spotlight-group .spotlight {
    position: relative;
    width: calc(33.3333333333% - clamp(.8rem, .2285714286rem + 1.7857142857vw, 1.6rem) + clamp(.8rem, .2285714286rem + 1.7857142857vw, 1.6rem)/3);
    margin-bottom: 30px;
    text-align: center;
    cursor: -webkit-zoom-in;
    cursor: zoom-in
}

/* 특전 
.container-spotlight .spotlight-group .spotlight:first-child {
    flex: 0 0 100%;
}
/*
.container-spotlight .spotlight-group .spotlight:first-child .spotlight__item {
    /* width: calc(33.3333333333% - clamp(.8rem, .2285714286rem + 1.7857142857vw, 1.6rem) + clamp(.8rem, .2285714286rem + 1.7857142857vw, 1.6rem)/3);*/
/*width: 22%;
/*}
*/


.container-spotlight .spotlight-group .spotlight:focus-visible {
    z-index: 50;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) 255, 66, 34;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) var(--rgb_focus);
    outline-offset: clamp(.2rem, .0571428571rem + .4464285714vw, .4rem)
}

.container-spotlight .spotlight-group .spotlight__item {
    width: 100%
}

.container-spotlight .spotlight-group .spotlight .new {
    position: absolute;
    top: -5px;
    left: 10px;
    width: clamp(2rem, -2.2857142857rem + 13.3928571429vw, 8rem)
}

.spl-close:focus-visible {
    z-index: 50;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) 255, 66, 34;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) var(--rgb_focus);
    outline-offset: clamp(.2rem, .0571428571rem + .4464285714vw, .4rem)
}

.spl-fullscreen {
    display: none !important
}

#spotlight {
    backdrop-filter: saturate(180%) blur(clamp(0.2rem, 0.0571428571rem + 0.4464285714vw, 0.4rem));
    background: rgba(125, 74, 46, 0.75);
    background: rgba(var(--rgb_background_re), 0.75)
}

.spl-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: clamp(3.2rem, .9142857143rem + 7.1428571429vw, 6.4rem);
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transform: none !important;
    transform: none !important;
    color: #fff !important;
    color: var(--color_text_re) !important
}

.spl-header div {
    opacity: 1
}

.spl-footer {
    -webkit-transform: none !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    transform: none !important;
    color: #fff !important;
    color: var(--color_text_re) !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.spl-title {
    font-size: clamp(1.4rem, 1.2571428571rem + .4464285714vw, 1.6rem) !important
}

.spl-pane {
    cursor: e-resize !important
}

.spl-pane img {
    -o-object-fit: contain;
    contain: none !important;
    width: calc(80% - clamp(1.6rem, .4571428571rem + 3.5714285714vw, 3.2rem));
    max-width: 960px;
    height: 80%;
    margin: 0 auto;
    object-fit: contain
}

.spl-progress {
    position: absolute;
    top: clamp(3.2rem, .9142857143rem + 7.1428571429vw, 6.4rem);
    height: clamp(.2rem, .0571428571rem + .4464285714vw, .4rem);
    background: #fff !important;
    background: var(--color_text_re) !important
}

.slider {
    margin: 0 auto;
    overflow: hidden
}

.slider__slides {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

.slider__slide {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%
}

.slider__slide.active .slider__img {
    opacity: 1;
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
    -webkit-filter: blur(0);
    filter: blur(0)
}

.slider__slide.displayed {
    -ms-flex-preferred-size: 76%;
    flex-basis: 76%
}

.slider__slide.displayed:first-child {
    margin-left: 12%
}

.slider__img {
    width: 100%;
    height: auto;
    margin: 0 auto;
    -webkit-filter: blur(clamp(0.1rem, 0.0285714286rem + 0.2232142857vw, 0.2rem));
    filter: blur(clamp(0.1rem, 0.0285714286rem + 0.2232142857vw, 0.2rem));
    opacity: .75;
    -webkit-transform: scale(0.9) translateZ(0);
    transform: scale(0.9) translateZ(0);
    -webkit-transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1)
}

.slider .progressBar {
    width: 100%;
    height: clamp(.4rem, .1142857143rem + .8928571429vw, .8rem);
    margin-top: clamp(.2rem, .0571428571rem + .4464285714vw, .4rem);
    background: rgba(52, 152, 219, 1);
    background: rgba(var(--rgb_primary), 1)
}

.prev,
.next {
    position: absolute;
    overflow: hidden;
    -webkit-transform: translate(0, -50%);
    top: 50%;
    left: 0;
    width: clamp(1.6rem, .4571428571rem + 3.5714285714vw, 3.2rem);
    height: calc(clamp(2.2rem, .6285714286rem + 4.9107142857vw, 4.4rem)*2);
    transform: translate(0, -50%);
    border: none;
    border-radius: 0 clamp(.2rem, .0571428571rem + .4464285714vw, .4rem) clamp(.2rem, .0571428571rem + .4464285714vw, .4rem) 0;
    outline: none;
    background: rgba(125, 74, 46, 0.5);
    background: rgba(var(--rgb_text), 0.5)
}

.prev:focus-visible,
.next:focus-visible {
    z-index: 50;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) 255, 66, 34;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) var(--rgb_focus);
    outline-offset: clamp(.2rem, .0571428571rem + .4464285714vw, .4rem)
}

.prev::after,
.next::after {
    position: absolute;
    content: "";
    -webkit-transform: translate(-50%, -50%) scale(1);
    top: 50%;
    left: 50%;
    width: calc(clamp(1.2rem, .9142857143rem + .8928571429vw, 1.6rem)/2*1.7320508076);
    height: clamp(1.2rem, .9142857143rem + .8928571429vw, 1.6rem);
    transform: translate(-50%, -50%) scale(1);
    background: rgba(255, 255, 255, 1);
    background: rgba(var(--rgb_text_re), 1);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    -webkit-transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1)
}

.next {
    -webkit-transform: translate(0, -50%);
    right: 0;
    left: auto;
    transform: translate(0, -50%);
    border-radius: clamp(.2rem, .0571428571rem + .4464285714vw, .4rem) 0 0 clamp(.2rem, .0571428571rem + .4464285714vw, .4rem)
}

.next::after {
    clip-path: polygon(0 0, 100% 50%, 0 100%)
}

.pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: clamp(.8rem, .2285714286rem + 1.7857142857vw, 1.6rem) auto 0;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: clamp(.8rem, .2285714286rem + 1.7857142857vw, 1.6rem);
    -webkit-transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1)
}

.pagination button {
    width: clamp(.6rem, .1714285714rem + 1.3392857143vw, 1.2rem);
    height: clamp(.6rem, .1714285714rem + 1.3392857143vw, 1.2rem);
    border: none;
    border-radius: calc(clamp(.6rem, .1714285714rem + 1.3392857143vw, 1.2rem)/2);
    outline: 0;
    background: rgba(255, 255, 255, 1);
    background: rgba(var(--rgb_text_re), 1);
    -webkit-transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1);
    -webkit-transform: scale(1);
    transform: scale(1)
}

.pagination button:focus-visible {
    z-index: 50;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) 255, 66, 34;
    outline: solid clamp(.1rem, .0285714286rem + .2232142857vw, .2rem) var(--rgb_focus);
    outline-offset: clamp(.2rem, .0571428571rem + .4464285714vw, .4rem)
}

.pagination button.active {
    background: rgba(52, 152, 219, 1);
    background: rgba(var(--rgb_primary), 1);
    -webkit-transform: scale(1.5);
    transform: scale(1.5)
}

.pagination.imgNav button {
    width: auto;
    height: auto;
    border-radius: 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    background: rgba(0, 0, 0, 0);
    opacity: .75
}

.pagination.imgNav button:focus-visible,
.pagination.imgNav button.active {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    background: rgba(0, 0, 0, 0)
}

h1 span {
    display: none
}

#background {
    z-index: -2;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100lvh;
    overflow: hidden;
    background-image: url("../img/_res/_bg/bg.jpg.webp");
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none
}

#burahamu {
    z-index: 100;
    position: fixed;
    right: 0;
    bottom: -20px
}

#burahamu img {
    width: clamp(10rem, -11.4285714286rem + 66.9642857143vw, 40rem);
    -webkit-animation: wobble-hor-bottom 2.5s both;
    animation: wobble-hor-bottom 2.5s both
}

#burahamu:hover {
    -webkit-animation: wobble-hor-bottom 2.5s both;
    animation: wobble-hor-bottom 2.5s both
}

#burahamu_uro {
    z-index: 9999;
    position: absolute;
    top: 120px;
    left: 0;
    width: clamp(3.5rem, -.6428571429rem + 12.9464285714vw, 9.3rem);
    pointer-events: none;
    -webkit-transition: -webkit-transform 10s ease;
    transition: -webkit-transform 10s ease;
    transition: transform 10s ease;
    transition: transform 10s ease, -webkit-transform 10s ease
}

#burahamu_uro img {
    -webkit-animation: jello-horizontal 2.5s infinite both;
    animation: jello-horizontal 2.5s infinite both
}

* :not(html):not(body):not(pre *) .main__inner {
    position: relative
}

* :not(html):not(body):not(pre *) section {
    position: relative
}

.nav {
    position: fixed;
    -webkit-transform: translate(0, -50%);
    z-index: 1;
    top: 50%;
    left: 0;
    transform: translate(0, -50%)
}

.nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 10px
}

.nav ul li {
    margin: clamp(.2rem, -.0142857143rem + .6696428571vw, .5rem) 0
}

.nav ul li a {
    scroll-behavior: smooth;
    -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .3);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: clamp(4rem, 1.1428571429rem + 8.9285714286vw, 8rem);
    height: clamp(4rem, 1.1428571429rem + 8.9285714286vw, 8rem);
    border-radius: 50%;
    background-color: #fbd73d;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .3);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center
}

.nav ul li a:hover {
    background-color: #fff4d7;
    -webkit-animation: jello-horizontal 1s both;
    animation: jello-horizontal 1s both
}

div.main__logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: clamp(3rem, 3.7142857143rem - 2.2321428571vw, 2rem) 0 20px 0
}

div.main__logo h1,
div.main__logo p {
    width: clamp(30rem,
            -15.1428571429rem + 130.3214285715vw,
            92rem);
}

p.accessory {
    width: clamp(28rem, 9.4285714286rem + 58.0357142857vw, 54rem);
    margin: clamp(3rem, 3.7142857143rem - 2.2321428571vw, 2rem) auto 40px;
    text-align: center
}

p.accessory a {
    display: block
}

p.accessory a:hover {
    -webkit-animation: wobble-hor-bottom 2.5s both;
    animation: wobble-hor-bottom 2.5s both
}

p.accessory a img {
    width: 100%
}

ul.download {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 700px;
    margin: 10px auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 20px
}

ul.download li {
    margin: 10px
}

ul.download li a {
    display: block
}

ul.download li a:hover {
    -webkit-animation: wobble-hor-bottom 2.5s both;
    animation: wobble-hor-bottom 2.5s both
}

ul.download li a img {
    width: 100%
}

p.important {
    width: clamp(25rem, 4.2857142857rem + 64.7321428571vw, 54rem);
    margin: 0 auto;
    text-align: center
}

p.important a {
    display: block;
    margin-bottom: 50px;
    padding: clamp(.8rem, -.0571428571rem + 2.6785714286vw, 2rem);
    border: 3px solid #fff4d7;
    border-radius: 10px;
    background-color: #a10000;
    color: #fff4d7;
    font-weight: bold;
    font-size: clamp(1.8rem, 1.3rem + 1.5625vw, 2.5rem);
    letter-spacing: .5px
}

p.important a:hover {
    border: 3px solid #a10000;
    background-color: #fff4d7;
    color: #a10000
}

p.important a img {
    width: clamp(2.5rem, 2.2857142857rem + .6696428571vw, 2.8rem);
    margin-right: 5px
}

p.sorry {
    max-width: 840px;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center
}

p.bt__x {
    width: clamp(20rem, 12.8571428571rem + 22.3214285714vw, 30rem);
    margin: clamp(2rem, -.1428571429rem + 6.6964285714vw, 5rem) auto
}

p.bt__x a {
    display: block;
    padding: clamp(.5rem, .2857142857rem + .6696428571vw, .8rem) clamp(1rem, -.4285714286rem + 4.4642857143vw, 3rem);
    border: #f4b19e 3px solid;
    border-radius: 50px;
    background-color: #fbd73d
}

p.bt__x a:hover {
    background-color: #fff4d7;
    -webkit-animation: jello-horizontal 1s both;
    animation: jello-horizontal 1s both
}

div.news {
    width: clamp(30rem, 12.7142857143rem + 54.0178571429vw, 54.2rem);
    height: clamp(14.4rem, 6.0428571429rem + 26.1160714286vw, 26.1rem);
    margin: 0 auto;
    background-image: url("../img/_res/_bg/bg-news.png.webp");
    background-position: center top;
    background-size: contain;
    background-repeat: no-repeat
}

div.news h2 {
    display: none
}

div.news .slideshow-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    width: 100%;
    height: clamp(14.4rem, 6.8285714286rem + 23.6607142857vw, 25rem);
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: clamp(3rem, .5rem + 7.8125vw, 6.5rem) 0 0 0
}

div.news .slideshow-container .news-slide {
    display: none;
    width: clamp(23rem, 10.8571428571rem + 37.9464285714vw, 40rem);
    padding: 5px;
    border-bottom: dashed 1px rgba(125, 74, 46, .5);
    text-align: center
}

div.news .slideshow-container .news-slide p {
    margin: 0;
    font-weight: 500;
    font-size: clamp(1.2rem, .9142857143rem + .8928571429vw, 1.6rem)
}

div.news .slideshow-container .news-slide p a {
    color: #7d4a2e;
    -webkit-text-decoration: underline;
    text-decoration: underline
}

div.news .slideshow-container .news-slide p a:hover {
    color: #4a0000
}

div.news .slideshow-container .news-slide .pv_text p span {
    cursor: pointer;
    -webkit-text-decoration: underline;
    text-decoration: underline
}

div.news .slideshow-container .news-slide .pv_text p span:hover {
    color: #4a0000
}

div.news .slideshow-container .prev1,
div.news .slideshow-container .next1 {
    position: absolute;
    width: auto;
    padding: 16px;
    color: #7d4a2e;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    -webkit-transition: .6s ease;
    transition: .6s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    display: none;
    user-select: none
}

div.news .slideshow-container .prev1 {
    top: clamp(0rem, -1.7857142857rem + 5.5803571429vw, 2.5rem);
    border-radius: 3px
}

div.news .slideshow-container .next1 {
    bottom: clamp(-1rem, -1.7142857143rem + 2.2321428571vw, 0rem);
    border-radius: 3px
}

section.frame {
    position: relative;
    margin: 0 0 clamp(5rem, -2.1428571429rem + 22.3214285714vw, 15rem) 0 !important;
    padding: 0 clamp(3rem, 5.1428571429rem - 6.6964285714vw, 0rem)
}

section.frame h2 {
    width: clamp(18rem, 2.2857142857rem + 49.1071428571vw, 40rem);
    margin: 0 auto -1px;
    padding: 0;
    text-align: center
}

section.frame h2 span {
    display: none
}

section.frame span.deco_left {
    position: absolute;
    top: -20px;
    left: -20px;
    width: clamp(8rem, 1.7857142857rem + 19.4196428571vw, 16.7rem);
    height: clamp(8rem, 1.7857142857rem + 19.4196428571vw, 16.7rem);
    background: url("../img/_res/waku_himawari.png.webp") no-repeat;
    background-position: right bottom;
    background-size: clamp(6rem, -1.6428571429rem + 23.8839285714vw, 16.7rem)
}

section.frame span.deco_right {
    -webkit-transform: rotate(180deg);
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: clamp(8rem, 1.7857142857rem + 19.4196428571vw, 16.7rem);
    height: clamp(8rem, 1.7857142857rem + 19.4196428571vw, 16.7rem);
    transform: rotate(180deg);
    background: url("../img/_res/waku_himawari.png.webp") no-repeat;
    background-position: right bottom;
    background-size: clamp(6rem, -1.6428571429rem + 23.8839285714vw, 16.7rem)
}

section.frame .section-inner {
    position: relative;
    padding: clamp(2rem, -.8571428571rem + 8.9285714286vw, 6rem) clamp(2rem, -1.5714285714rem + 11.1607142857vw, 7rem) clamp(2rem, -.1428571429rem + 6.6964285714vw, 5rem) clamp(2rem, -1.5714285714rem + 11.1607142857vw, 7rem);
    border-radius: 30px;
    background-color: rgba(255, 244, 215, .9)
}

section.frame .section-inner div#story {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: left
}

section.frame .section-inner div#story #story-text {
    margin: 0 0 clamp(2rem, 1.2857142857rem + 2.2321428571vw, 3rem) 0;
    font-size: clamp(1.2rem, .6285714286rem + 1.7857142857vw, 2rem);
    line-height: 1.5
}

section.frame .section-inner div#story #story-text span {
    font-weight: 500
}

section.frame .section-inner div#story #story-text span.point {
    font-size: clamp(1.6rem, .2428571429rem + 4.2410714286vw, 3.5rem)
}

section.frame .section-inner div#story #story-text span.prologue {
    margin: 0 0 clamp(2rem, 1.2857142857rem + 2.2321428571vw, 3rem) 0
}

section.frame .section-inner div.system_img {
    max-width: 900px;
    margin: clamp(1rem, -.4285714286rem + 4.4642857143vw, 3rem) auto 0
}

section.frame .section-inner div.character {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

section.frame .section-inner div.character h3 {
    max-width: 640px;
    margin: 0 0 clamp(1rem, -.4285714286rem + 4.4642857143vw, 3rem) 0
}

section.frame .section-inner div.character h3 span {
    display: none
}

section.frame .section-inner div.character ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

section.frame .section-inner div.character ul li h3 span {
    display: none
}

section.frame .section-inner #cast {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 30px
}

section.frame .section-inner #cast h3 {
    width: clamp(15rem, 5rem + 31.25vw, 29rem);
    margin: 0 0 clamp(1rem, .2857142857rem + 2.2321428571vw, 2rem) 0
}

section.frame .section-inner #cast h3 span {
    display: none
}

section.frame .section-inner #cast ul {
    position: relative;
    width: clamp(25rem, -2.8571428571rem + 87.0535714286vw, 64rem);
    padding: clamp(1.5rem, .4285714286rem + 3.3482142857vw, 3rem) clamp(1rem, .2857142857rem + 2.2321428571vw, 2rem);
    border-radius: 30px;
    background-color: rgba(244, 177, 158, .5);
    font-size: clamp(1rem, .4285714286rem + 1.7857142857vw, 1.8rem);
    text-align: center
}

section.frame .section-inner #cast ul span.hamu_left {
    z-index: 0;
    position: absolute;
    bottom: 0;
    left: -15%;
    width: clamp(6rem, -2.0714285714rem + 25.2232142857vw, 17.3rem);
    height: clamp(14.3rem, -4.9857142857rem + 60.2678571429vw, 41.3rem);
    background: url("../img/_res/cast01.png.webp") no-repeat;
    background-position: left bottom;
    background-size: contain
}

section.frame .section-inner #cast ul span.hamu_right {
    z-index: 0;
    position: absolute;
    right: -12%;
    bottom: 0;
    width: clamp(6rem, .5rem + 17.1875vw, 13.7rem);
    height: clamp(9.3rem, .7285714286rem + 26.7857142857vw, 21.3rem);
    background: url("../img/_res/cast02.png.webp") no-repeat;
    background-position: right bottom;
    background-size: contain
}

section.frame .section-inner #cast ul li {
    z-index: 1;
    position: relative;
    margin: 0 0 clamp(1rem, .2857142857rem + 2.2321428571vw, 2rem) 0
}

section.frame .section-inner #cast ul li:last-child {
    margin: 0
}

section.frame .section-inner #cast ul li span {
    display: inline-block;
    margin: 0 clamp(.5rem, .1428571429rem + 1.1160714286vw, 1rem)
}

section.frame .section-inner #cast p.for_short {
    margin: clamp(1rem, .2857142857rem + 2.2321428571vw, 2rem) 0 0;
    font-size: clamp(1rem, .7142857143rem + .8928571429vw, 1.4rem)
}

section.frame .section-inner #voice {
    text-align: center
}

section.frame .section-inner #voice h3 {
    width: clamp(15rem, 5rem + 31.25vw, 29rem);
    margin: 0 auto
}

section.frame .section-inner #voice h3 span {
    display: none
}

section.frame .section-inner #voice p {
    margin-bottom: 20px
}

section.frame .section-inner #voice p img {
    width: auto
}

section.frame .section-inner #voice .custom-audio-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

section.frame .section-inner #voice button {
    padding: 17px 20px 15px;
    border: none;
    border-radius: 40px;
    background-color: #4a0000;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    -webkit-transition: background .3s ease;
    transition: background .3s ease
}

section.frame .section-inner #voice button:hover {
    background-color: #a10000
}

section.frame .section-inner #voice button:active {
    background-color: #4a0000
}

section.frame .section-inner #package {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto 50px
}

section.frame .section-inner #package p,
section.frame .section-inner #package aside {
    width: 100%
}

section.frame .section-inner #package p {
    text-align: center
}

section.frame .section-inner #package p img {
    width: 80%
}

section.frame .section-inner #package aside {
    margin: 0 0 clamp(1rem, .2857142857rem + 2.2321428571vw, 2rem) 0
}

section.frame .section-inner #package aside h3 {
    display: none
}

section.frame .section-inner #package aside img {
    width: 100%;
    margin: 0 auto clamp(2rem, -.1428571429rem + 6.6964285714vw, 5rem) 0
}

section.frame .section-inner #package aside dl div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 0 clamp(1.5rem, .4285714286rem + 3.3482142857vw, 3rem) 0;
    background: url("../img/_res/line.png.webp") no-repeat;
    background-position: right bottom;
    background-size: 120%;
    font-size: clamp(1rem, .4285714286rem + 1.7857142857vw, 1.8rem);
    line-height: 1.5
}

section.frame .section-inner #package aside dl div:last-child {
    margin: 0
}

section.frame .section-inner #package aside dl div dt {
    width: clamp(8rem, 3rem + 15.625vw, 15rem);
    margin: 0 0 clamp(.5rem, .1428571429rem + 1.1160714286vw, 1rem) 0
}

section.frame .section-inner #package aside dl div dd span {
    display: block;
    font-size: clamp(.8rem, .3rem + 1.5625vw, 1.5rem)
}

section.frame .section-inner h3#benefits_title {
    padding: 0 0 40px 0;
    background-image: url("../img/_res/_bg/product_arrow.png.webp");
    background-position: center bottom;
    background-repeat: no-repeat
}

section.frame .section-inner h3#benefits_title span.text {
    display: none
}

section.frame .section-inner h3#benefits_title span.img {
    display: block;
    padding: 20px;
    border-radius: 20px;
    background-image: url("../img/_res/_bg/bg-product.png.webp");
    text-align: center
}

section.frame .section-inner h3#benefits_title span.img img {
    width: clamp(18rem, 11.1428571429rem + 21.4285714286vw, 27.6rem)
}

section.frame .section-inner div.benefits {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 0 50px 0
}

section.frame .section-inner div.benefits p {
    font-size: clamp(1.2rem, .6285714286rem + 1.7857142857vw, 2rem);
    letter-spacing: .1em;
    text-align: center
}

section.frame .section-inner div.benefits img#exclusive {
    margin-top: 50px
}

section.frame .section-inner h3#shop_title {
    margin: 0 0 30px 0;
    padding: 0 0 40px 0;
    background-image: url("../img/_res/_bg/shop_arrow.png.webp");
    background-position: center bottom;
    background-repeat: no-repeat
}

section.frame .section-inner h3#shop_title span.text {
    display: none
}

section.frame .section-inner h3#shop_title span.img {
    display: block;
    padding: 20px;
    border-radius: 20px;
    background-image: url("../img/_res/_bg/bg-shop.png.webp");
    text-align: center
}

section.frame .section-inner h3#shop_title span.img img {
    width: clamp(15rem, 11.7142857143rem + 10.2678571429vw, 19.6rem)
}

section.frame .section-inner ul.shop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 30px 0;
    text-align: center
}

section.frame .section-inner ul.shop>li {
    background-image: url("../img/_res/_bg/bg-shop.png.webp");
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 10px 0;
    padding: 0 0 20px;
    border-radius: 20px;
    font-size: clamp(1rem, .5714285714rem + 1.3392857143vw, 1.6rem)
}

section.frame .section-inner ul.shop>li h4 {
    width: 100%;
    padding: 10px 20px;
    border-radius: 20px 20px 0 0;
    background-image: url("../img/_res/_bg/bg-shop2.png.webp")
}

section.frame .section-inner ul.shop>li h4 span {
    display: none
}

section.frame .section-inner ul.shop>li p {
    padding: 0 !important
}

section.frame .section-inner ul.shop>li>ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 0 -10px;
    padding: 0 clamp(1rem, .2857142857rem + 2.2321428571vw, 2rem)
}

section.frame .section-inner ul.shop>li>ul li {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 10px);
    flex: 0 0 calc(50% - 10px);
    margin: 10px 5px
}

section.frame .section-inner ul.shop>li>ul li a {
    display: block;
    width: 100%;
    padding: 7px 0 5px;
    border-width: 0 5px 5px 0;
    border-style: soild;
    border-radius: 20px;
    border-color: #000;
    background-image: url("../img/_res/_bg/bg-shop2.png.webp");
    color: #fff4d7;
    font-size: clamp(1.6rem, 1.4571428571rem + .4464285714vw, 1.8rem)
}

section.frame .section-inner ul.shop>li>ul li a:hover {
    border-width: 5px 0 0 5px;
    border-style: soild;
    border-color: #7d4a2e;
    background-image: url("../img/_res/_bg/bg-product.png.webp");
    color: #7d4a2e
}

section.frame .section-inner ul.shop>li>ul li span.limited {
    display: block;
    padding: 7px 0 5px;
    border-width: 0 5px 5px 0;
    border-style: soild;
    border-radius: 20px;
    border-color: #727272;
    background-color: #727272;
    color: #a4a4a4
}

section.frame .section-inner ul.shop>li>ul li span.end {
    display: block;
    margin-top: 5px;
    color: #727272;
    font-size: clamp(.8rem, .5142857143rem + .8928571429vw, 1.2rem)
}

section.frame .section-inner h3#download_title {
    margin: 0 0 30px 0;
    padding: 0 0 40px 0;
    background-image: url("../img/_res/_bg/download_arrow.png.webp");
    background-position: center bottom;
    background-repeat: no-repeat
}

section.frame .section-inner h3#download_title span.text {
    display: none
}

section.frame .section-inner h3#download_title span.img {
    display: block;
    padding: 20px;
    border-radius: 20px;
    background-image: url("../img/_res/_bg/bg-download.png.webp");
    text-align: center
}

section.frame .section-inner h3#download_title span.img img {
    width: clamp(15rem, 4.4285714286rem + 33.0357142857vw, 29.8rem)
}

section.frame .section-inner .download-ns {
    text-align: center
}

section.frame .section-inner .download-ns a {
    display: block;
    width: clamp(20rem, 9.2857142857rem + 33.4821428571vw, 35rem);
    margin: 30px auto 0
}

section.frame .section-inner .download-ns a:hover {
    -webkit-animation: wobble-hor-bottom 2.5s both;
    animation: wobble-hor-bottom 2.5s both
}

section.frame .section-inner #story-text span,
section.frame .section-inner .system_img p,
section.frame .section-inner .character p,
section.frame .section-inner .character ul {
    display: block;
    opacity: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

section.frame .section-inner p.bt-character {
    width: clamp(20rem, -1.4285714286rem + 66.9642857143vw, 50rem);
    margin: 0 auto
}

section.frame .section-inner p.bt-character a {
    display: block
}

section.frame .section-inner p.bt-character a:hover {
    -webkit-animation: wobble-hor-bottom 1.5s both;
    animation: wobble-hor-bottom 1.5s both
}

section.frame .section-inner #cast {
    opacity: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

p.dept_ham {
    width: clamp(20rem, 4.2857142857rem + 49.1071428571vw, 42rem);
    margin: 0 0 clamp(1.5rem, 1.1428571429rem + 1.1160714286vw, 2rem) 0
}

p.dept_ham a {
    display: block;
    position: relative
}

p.dept_ham a:hover {
    position: relative;
    top: 2px;
    left: 2px
}

p.bt-info {
    width: clamp(15rem, 11.2142857143rem + 11.8303571429vw, 20.3rem);
    margin: 0 0 clamp(1.5rem, 1.1428571429rem + 1.1160714286vw, 2rem) 0
}

p.bt-info a {
    display: block;
    position: relative
}

p.bt-info a:hover {
    position: relative;
    top: 2px;
    left: 2px
}

p.guideline {
    margin-bottom: 20px;
    font-size: clamp(1.4rem, 1.1142857143rem + .8928571429vw, 1.8rem)
}

p.guideline a {
    display: block;
    border-bottom: 1px solid #4a0000;
    color: #4a0000
}

p.guideline a:hover {
    border-bottom: none;
    border-bottom: 1px solid rgba(74, 0, 0, 0);
    color: #a10000
}

hr {
    height: clamp(3rem, .5714285714rem + 7.5892857143vw, 6.4rem);
    margin: clamp(1rem, -.4285714286rem + 4.4642857143vw, 3rem);
    border: none;
    background: url("../img/_res/line.png.webp") no-repeat;
    background-position: center;
    background-size: contain
}

h2:after,
h3:after {
    display: block;
    z-index: -1;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: clamp(.2rem, .0571428571rem + .4464285714vw, .4rem);
    content: ""
}

h2.__sns,
h3.__sns {
    display: none
}

h2.__sns:after,
h3.__sns:after {
    display: none
}

section#accessory {
    position: relative;
    max-width: 840px;
    margin: 0 auto clamp(5rem, -2.1428571429rem + 22.3214285714vw, 15rem) !important;
    letter-spacing: .1em
}

section#accessory span.deco_left {
    position: absolute;
    top: -20px;
    left: -20px;
    width: clamp(8rem, 1.7857142857rem + 19.4196428571vw, 16.7rem);
    height: clamp(8rem, 1.7857142857rem + 19.4196428571vw, 16.7rem);
    background: url("../img/_res/waku_himawari.png.webp") no-repeat;
    background-position: right bottom;
    background-size: clamp(6rem, -1.6428571429rem + 23.8839285714vw, 16.7rem)
}

section#accessory span.deco_right {
    -webkit-transform: rotate(180deg);
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: clamp(8rem, 1.7857142857rem + 19.4196428571vw, 16.7rem);
    height: clamp(8rem, 1.7857142857rem + 19.4196428571vw, 16.7rem);
    transform: rotate(180deg);
    background: url("../img/_res/waku_himawari.png.webp") no-repeat;
    background-position: right bottom;
    background-size: clamp(6rem, -1.6428571429rem + 23.8839285714vw, 16.7rem)
}

section#accessory .section-inner {
    position: relative;
    padding: clamp(2rem, -.8571428571rem + 8.9285714286vw, 6rem) clamp(2rem, .5714285714rem + 4.4642857143vw, 4rem);
    border-radius: 30px;
    background-color: rgba(255, 244, 215, .9)
}

section#accessory .section-inner h2 span {
    display: none
}

section#accessory .section-inner h2.install {
    margin-top: 30px
}

section#accessory .section-inner h2.system-requirements {
    margin: 20px 0 0
}

section#accessory .section-inner h2#rule {
    margin: 50px 0 0
}

section#accessory .section-inner h3 {
    font-weight: bold;
    line-height: 1.5
}

section#accessory .section-inner p {
    padding: 10px 0 0
}

section#accessory .section-inner p.point {
    color: red
}

section#accessory .section-inner p.point a {
    -webkit-text-decoration: underline;
    color: red;
    font-weight: bold;
    text-decoration: underline
}

section#accessory .section-inner p.point a:hover {
    -webkit-text-decoration: none;
    color: #7d4a2e;
    text-decoration: none
}

section#accessory .section-inner p.point2 {
    margin-bottom: 20px;
    font-weight: bold
}

section#accessory .section-inner p.point2 span a {
    -webkit-text-decoration: underline;
    color: #4a0000;
    text-decoration: underline
}

section#accessory .section-inner p.point2 span a:hover {
    color: red
}

section#accessory .section-inner dl {
    margin: 10px 0;
    border: 1px solid #727272
}

section#accessory .section-inner dl div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-bottom: 1px solid #727272
}

section#accessory .section-inner dl div:last-child {
    border-bottom: none
}

section#accessory .section-inner dl div dt {
    width: 20%;
    padding: 10px;
    border-right: 1px solid #727272
}

section#accessory .section-inner dl div dd {
    width: 80%;
    padding: 10px
}

section#accessory .section-inner ol li {
    margin: 0 0 20px
}

section#accessory .section-inner ol li span {
    padding: 10px;
    border-radius: 10px;
    background-color: #7d4a2e;
    color: #fff4d7
}

section#accessory .section-inner ol li p {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex
}

section#accessory .section-inner p.download a {
    display: block
}

section#accessory .section-inner p.download a:hover {
    -webkit-animation: wobble-hor-bottom 2.5s both;
    animation: wobble-hor-bottom 2.5s both
}

section#accessory .section-inner p.download a img {
    width: 100%
}

section#accessory .section-inner ul.control {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

section#accessory .section-inner ul.control>li {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 48%;
    flex: 0 1 48%
}

section#accessory .section-inner ul.control>li h3 {
    padding: 10px;
    border-radius: 10px;
    background-color: #7d4a2e;
    color: #fff4d7;
    text-align: center
}

section#accessory .section-inner ul.control>li h3 span {
    display: block;
    padding-top: 10px;
    border-top: 2px solid #fff4d7;
    font-size: 16px
}

section#accessory .section-inner ul.control>li ul {
    margin: 10px auto 20px;
    line-height: 1.5
}

section#accessory .section-inner ul.control>li ul li {
    padding: 10px
}

section#accessory .section-inner ul.control>li ul li:nth-child(even) {
    background-color: rgba(125, 74, 46, .1)
}

section#accessory .section-inner ul.control>li ul li span:first-child {
    margin-right: 1rem;
    padding: 6px 8px;
    border: 1px solid #7d4a2e;
    border-radius: 4px
}

section#accessory .section-inner ul.control>li ul.icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

section#accessory .section-inner ul.control>li ul.icon li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

section#accessory .section-inner ul.control>li ul.icon li span {
    margin: 0;
    padding: 0
}

section#accessory .section-inner ul.control>li ul.icon li span:first-child {
    width: 13%;
    margin-right: 2%;
    border: none;
    vertical-align: middle
}

section#accessory .section-inner ul.control>li ul.icon li span:last-child {
    width: 85%
}

section#accessory .section-inner div.rule-inner {
    height: 300px;
    overflow-y: scroll
}

section#accessory .section-inner div.rule-inner::-webkit-scrollbar {
    width: 10px
}

section#accessory .section-inner div.rule-inner::-webkit-scrollbar-track {
    background-color: rgba(125, 74, 46, 0.75);
    background-color: rgba(var(--rgb_scrollbar_bg), 0.75)
}

section#accessory .section-inner div.rule-inner::-webkit-scrollbar-thumb {
    border: 3px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    background-color: rgba(238, 238, 238, 1);
    background-color: rgba(var(--rgb_scrollbar), 1)
}

.logo--accessory {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 20px 0
}

.logo--accessory a {
    display: block
}

.logo--accessory a:hover {
    -webkit-animation: wobble-hor-bottom 2.5s both;
    animation: wobble-hor-bottom 2.5s both
}

.logo--accessory a img {
    width: 100%
}

.logo--accessory h1 {
    width: clamp(20rem, 11.4285714286rem + 26.7857142857vw, 32rem)
}

p.download-other {
    margin-top: 20px
}

p.download-other a {
    display: block
}

p.download-other a:hover {
    -webkit-animation: wobble-hor-bottom 2.5s both;
    animation: wobble-hor-bottom 2.5s both
}

p.download-other a img {
    width: 100%
}

section#news_important {
    position: relative;
    max-width: 840px;
    margin: 0 auto clamp(5rem, -2.1428571429rem + 22.3214285714vw, 15rem) !important;
    letter-spacing: .1em
}

section#news_important .section-inner {
    position: relative;
    padding: clamp(2rem, -.8571428571rem + 8.9285714286vw, 6rem) clamp(2rem, .5714285714rem + 4.4642857143vw, 4rem) clamp(2rem, 2rem + 0vw, 2rem);
    border: 3px solid #a10000;
    border-radius: 30px;
    background-color: rgba(255, 244, 215, .9);
    font-weight: bold
}

section#news_important .section-inner h2 {
    margin: 0;
    padding: 0;
    color: #a10000;
    font-size: clamp(2rem, .5714285714rem + 4.4642857143vw, 4rem);
    text-align: center
}

section#news_important .section-inner h3 {
    margin: 10px 0;
    padding: 5px;
    border-width: 0 0 1px 10px;
    border-style: solid;
    border-color: #4a0000;
    color: #a10000;
    font-size: clamp(1.8rem, 1.6571428571rem + .4464285714vw, 2rem)
}

section#news_important .section-inner .point {
    margin-bottom: 20px;
    padding: 20px 10px;
    border-radius: 20px;
    background-color: rgba(161, 0, 0, .2);
    color: #a10000;
    font-size: clamp(1.4rem, 1.1142857143rem + .8928571429vw, 1.8rem);
    text-align: center
}

section#news_important .section-inner .point p {
    margin-bottom: 10px
}

section#news_important .section-inner .point p span.note {
    display: inline-block;
    margin-bottom: 5px;
    padding: 5px 10px;
    border-radius: 20px
}

section#news_important .section-inner .point p span.note img {
    width: 20px;
    margin: 3px 5px 0 0;
    vertical-align: top
}

section#news_important .section-inner .point p br {
    display: none
}

section#news_important .section-inner a {
    display: inline-block;
    padding: 0 0 3px;
    border-bottom: 3px solid #a10000;
    color: #000;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

section#news_important .section-inner a:hover {
    margin-left: 5px;
    border-bottom: 3px solid rgba(255, 255, 255, 0);
    color: #000
}

section#news_important .section-inner a.confirmation {
    padding: 5px 0;
    border-bottom: 3px solid #a10000;
    color: #a10000
}

section#news_important .section-inner a.confirmation:hover {
    border-bottom: 3px solid rgba(255, 255, 255, 0);
    color: #a10000
}

section#news_important .section-inner span {
    margin-right: 5px;
    padding: 5px;
    background-color: #a10000;
    color: #fff
}

section#news_important .section-inner hr {
    margin: 0;
    padding: 0
}

section#news_important .section-inner>p {
    margin: 0;
    padding: 0;
    line-height: 2;
    letter-spacing: .5px
}

section#news_important .section-inner>p a.sns-x {
    margin-top: 0;
    padding: 0;
    border: none;
    background-color: rgba(255, 255, 255, 0);
    color: #a10000;
    -webkit-text-decoration: underline;
    text-decoration: underline
}

section#news_important .section-inner>p a.sns-x:hover {
    -webkit-text-decoration: none;
    background-color: rgba(255, 255, 255, 0);
    text-decoration: none
}

section#news_important .section-inner p.date2 {
    text-align: center
}

section#news_important .section-inner ul {
    padding: 0 0 0 30px;
    line-height: 2;
    letter-spacing: .5px
}

section#news_important .section-inner ul li {
    list-style: square
}

section#news_important .section-inner table {
    width: 100%;
    margin-bottom: 20px;
    line-height: 1.5
}

section#news_important .section-inner table,
section#news_important .section-inner td,
section#news_important .section-inner th {
    border: 1px solid #4a0000;
    border-collapse: collapse
}

section#news_important .section-inner td,
section#news_important .section-inner th {
    padding: 8px;
    vertical-align: middle
}

section#news_important .section-inner th {
    background-color: rgba(161, 0, 0, .2);
    text-align: center
}

section#news_important .section-inner tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, .4)
}

section#news_important .section-inner tr td:first-child {
    width: 50px;
    color: #a10000;
    font-size: clamp(1.2rem, 1.0571428571rem + .4464285714vw, 1.4rem);
    text-align: center
}

section#news_important .section-inner tr th:last-child {
    font-size: clamp(1.2rem, 1.0571428571rem + .4464285714vw, 1.4rem);
    text-align: center
}

section#news_important .section-inner tr span {
    margin-right: 0px;
    padding: 0px;
    background-color: #ff0;
    color: #7d4a2e
}

section#wallpaper {
    position: relative;
    max-width: 840px;
    margin: 5rem auto clamp(5rem, -2.1428571429rem + 22.3214285714vw, 15rem) !important;
    letter-spacing: .1em
}

section#wallpaper span.deco_left {
    position: absolute;
    top: -20px;
    left: -20px;
    width: clamp(8rem, 1.7857142857rem + 19.4196428571vw, 16.7rem);
    height: clamp(8rem, 1.7857142857rem + 19.4196428571vw, 16.7rem);
    background: url("../img/_res/waku_himawari.png.webp") no-repeat;
    background-position: right bottom;
    background-size: clamp(6rem, -1.6428571429rem + 23.8839285714vw, 16.7rem)
}

section#wallpaper span.deco_right {
    -webkit-transform: rotate(180deg);
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: clamp(8rem, 1.7857142857rem + 19.4196428571vw, 16.7rem);
    height: clamp(8rem, 1.7857142857rem + 19.4196428571vw, 16.7rem);
    transform: rotate(180deg);
    background: url("../img/_res/waku_himawari.png.webp") no-repeat;
    background-position: right bottom;
    background-size: clamp(6rem, -1.6428571429rem + 23.8839285714vw, 16.7rem)
}

section#wallpaper .section-inner {
    position: relative;
    padding: clamp(2rem, -.8571428571rem + 8.9285714286vw, 6rem) clamp(2rem, .5714285714rem + 4.4642857143vw, 4rem);
    border-radius: 30px;
    background-color: rgba(255, 244, 215, .9)
}

section#wallpaper .section-inner h2 span {
    display: none
}

section#wallpaper .section-inner p {
    padding: 10px 0 0
}

section#wallpaper .section-inner div.device {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse
}

section#wallpaper .section-inner div.device div h2 {
    width: 150px;
    margin: 10px auto 0;
    padding: 0
}

section#wallpaper .section-inner div.device div ul li a {
    display: block;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s;
    transition: all .3s
}

section#wallpaper .section-inner div.device div ul li a:hover {
    position: relative;
    -webkit-transform: scale(1.5);
    z-index: 999;
    transform: scale(1.5)
}

section#wallpaper .section-inner div.device div ul li a img {
    width: 100%
}

section#wallpaper .section-inner div.device div.pc {
    margin-bottom: 50px
}

section#wallpaper .section-inner div.device div.pc p {
    padding: 10px
}

section#wallpaper .section-inner div.device div.pc ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 20px
}

section#wallpaper .section-inner div.device div.pc ul li {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 calc(50% - 20px);
    flex: 0 1 calc(50% - 20px)
}

section#wallpaper .section-inner div.device div.sp p {
    padding: 10px
}

section#wallpaper .section-inner div.device div.sp ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 20px
}

section#wallpaper .section-inner div.device div.sp ul li {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 calc(33.333% - 20px);
    flex: 0 1 calc(33.333% - 20px)
}

section#wallpaper .section-inner ul.special {
    margin: 20px auto 0
}

section#wallpaper .section-inner ul.special li {
    margin: 0 auto 30px;
    text-align: center
}

section#wallpaper .section-inner ul.special li a {
    display: block
}

section#wallpaper .section-inner ul.special li a:hover {
    -webkit-animation: wobble-hor-bottom 2.5s both;
    animation: wobble-hor-bottom 2.5s both
}

section#wallpaper .section-inner ul.special li a img {
    width: 90%
}

@-webkit-keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1)
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1)
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1)
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1)
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1)
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1)
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1)
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1)
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1)
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1)
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@-webkit-keyframes wobble-hor-bottom {

    0%,
    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%
    }

    15% {
        -webkit-transform: translateX(-30px) rotate(-6deg);
        transform: translateX(-30px) rotate(-6deg)
    }

    30% {
        -webkit-transform: translateX(15px) rotate(6deg);
        transform: translateX(15px) rotate(6deg)
    }

    45% {
        -webkit-transform: translateX(-15px) rotate(-3.6deg);
        transform: translateX(-15px) rotate(-3.6deg)
    }

    60% {
        -webkit-transform: translateX(9px) rotate(2.4deg);
        transform: translateX(9px) rotate(2.4deg)
    }

    75% {
        -webkit-transform: translateX(-6px) rotate(-1.2deg);
        transform: translateX(-6px) rotate(-1.2deg)
    }
}

@keyframes wobble-hor-bottom {

    0%,
    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%
    }

    15% {
        -webkit-transform: translateX(-30px) rotate(-6deg);
        transform: translateX(-30px) rotate(-6deg)
    }

    30% {
        -webkit-transform: translateX(15px) rotate(6deg);
        transform: translateX(15px) rotate(6deg)
    }

    45% {
        -webkit-transform: translateX(-15px) rotate(-3.6deg);
        transform: translateX(-15px) rotate(-3.6deg)
    }

    60% {
        -webkit-transform: translateX(9px) rotate(2.4deg);
        transform: translateX(9px) rotate(2.4deg)
    }

    75% {
        -webkit-transform: translateX(-6px) rotate(-1.2deg);
        transform: translateX(-6px) rotate(-1.2deg)
    }
}

@media (min-width: 425px) {
    div.movie-inner {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    div.movie-inner div {
        width: 50%
    }

    .youtube .content {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .youtube .content .youtube-contents,
    .youtube .content .op {
        width: 50%
    }

    #burahamu {
        right: -15px;
        bottom: -50px
    }

    ul.download {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: column;
    }

    section.frame h2 {
        margin: 0 auto
    }

    section#news_important .section-inner .point p br {
        display: block
    }

    section#wallpaper .section-inner div.device {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

@media (min-width: 768px) {
    footer .footer__inner {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    footer .footer__inner span {
        text-align: center
    }

    .btn--scrollTop {
        background-image: url("../img/_res/bt_top.png.webp")
    }

    .container-spotlight .spotlight-group .spotlight {
        width: calc(33.3333333333% - clamp(2rem, -3.7142857143rem + 17.8571428571vw, 10rem) + clamp(2rem, -3.7142857143rem + 17.8571428571vw, 10rem)/3)
    }

    .container-spotlight .spotlight-group .spotlight__item {
        width: 85%
    }

    .container-spotlight .spotlight-group .spotlight .new {
        top: -10px;
        left: 50px
    }

    #burahamu {
        right: -30px;
        bottom: -120px
    }

    section.frame .section-inner div#story {
        text-align: center
    }

    section.frame .section-inner #package {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    section.frame .section-inner #package p,
    section.frame .section-inner #package aside {
        width: 48%
    }

    section.frame .section-inner #package p {
        text-align: right
    }

    section.frame .section-inner #package aside img {
        text-align: left
    }

    section.frame .section-inner ul.shop>li {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(33.3333% - 20px);
        flex: 0 0 calc(33.3333% - 20px);
        margin: 10px
    }

    section#accessory .section-inner ul.control {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }
}

@media (min-width: 1440px) {
    .modal[data-modal-type=Youtube] .modal__body .modal__content.normal {
        height: 810px
    }
}

@media (hover: hover) {
    .btn--scrollTop:hover::after {
        -webkit-animation: scrollUp .3s infinite;
        animation: scrollUp .3s infinite
    }

    .youtube-contents__img:hover {
        -webkit-transform: scale(0.95);
        transform: scale(0.95)
    }

    .container-spotlight .spotlight-group .spotlight:hover {
        -webkit-animation: jello-horizontal 1s both;
        animation: jello-horizontal 1s both
    }

    .prev:hover::after,
    .next:hover::after {
        -webkit-transform: translate(-50%, -50%) scale(1.4);
        transform: translate(-50%, -50%) scale(1.4)
    }

    .pagination.imgNav button:hover {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@media (hover: none) {
    .btn--fit:hover {
        outline: medium none currentcolor;
        outline: initial
    }

    .btn--half:hover {
        outline: medium none currentcolor;
        outline: initial
    }

    .btn--full:hover {
        outline: medium none currentcolor;
        outline: initial
    }
}

/* 추가 */
.download-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    /* 버튼 사이 간격 */
    max-width: 800px;
    /* PC 기준 최대 넓이 */
    margin: 0 auto;
    /* 컨테이너 자체를 화면 중앙에 배치 */
    width: 100%;
}

/* 개별 버튼 영역 */
.download-ns {
    flex: 1 1 100%;
    /* 모바일 기본: 한 줄에 1개 */
    max-width: 100%;
}

/* 이미지 설정: 부모 너비를 넘지 않도록 설정 */
.download-ns img {
    display: block;
    width: 100%;
    /* 부모(.download-ns) 너비에 꽉 채움 */
    max-width: 400px;
    /* PC에서 이미지가 너무 커지는 것을 방지 (선택사항) */
    height: auto;
    /* 비율 유지 */
    margin: 0 auto;
    /* 모바일에서 이미지 중앙 정렬 */
}

/* 태블릿 및 PC (768px 이상) */
@media (min-width: 768px) {
    .download-ns {
        /* 간격을 고려하여 한 줄에 2개 배치 */
        flex: 1 1 calc(50% - 8px);
        max-width: calc(50% - 8px);
    }
}

.video-wrap {
    width: 100%;
    max-width: 640px;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
}

.video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 영상 */
.video-card {
    width: 100%;
    max-width: 640px;
    /* 필요 없으면 삭제 */
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 12px;
    /* 취향 */
}

.video-thumb,
.video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.video-thumb {
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 중앙 플레이 버튼 (유튜브 느낌) */
.video-thumb .play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);

    width: clamp(60px, 10vw, 120px);
    aspect-ratio: 1 / 1;
    /* 핵심: 항상 정사각형 */
    display: grid;
    place-items: center;

    border-radius: 50%;
    background: rgba(255, 64, 0, 0.8);
    color: #fff;
    font-size: clamp(32px, 6vw, 64px);

    transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.video-thumb:hover .play {
    transform: translate(-50%, -50%) scale(1.12);
    background: rgba(255, 64, 0, 0.9);
    box-shadow: 0 12px 28px rgba(255, 64, 0, 0.45);
}




/* 기본은 영상 숨김 */
.video {
    display: none;
}

/* 클릭 후 상태 */
.video-card.is-playing .video {
    display: block;
}

.video-card.is-playing .video-thumb {
    display: none;
}

/* 언어 버튼 */
.header-float {
    position: absolute;
    top: clamp(5rem, 10vw, 11.5rem);
    right: clamp(1rem, 2vw, 2.5rem);

    display: flex;
    flex-direction: column;
    gap: clamp(.4rem, 0.8vw, .8rem);

    z-index: 50;
}

/* 링크 자체를 버튼처럼 */
.header-float__btn {
    display: inline-flex;
    line-height: 0;
    /* 이미지 아래 여백(베이스라인) 제거 */
}

/* 이미지 반응형 */
.header-float__btn img {
    width: clamp(50px, 5vw, 78px);
    height: auto;
    display: block;
    /* 아래 여백 제거 + 클릭영역 안정 */
    transition:
        transform 0.25s ease,
        filter 0.25s ease,
        box-shadow 0.25s ease;
}

.header-float__btn:hover img {
    transform: translateY(-4px) scale(1.05);
    filter: brightness(1.1);
}

@media (max-width: 768px) {
    .header-float {
        top: clamp(24rem, 30vw, 40rem);
    }
}