@charset "utf-8";
/*-----------------------------------------------
 * COMMON 
 * FV
 * NEWS
 * MOVIE
 * STORY
 * INTRODUCTION
-------------------------------------------------*/
/*-----------------------------------------------
 * COMMON 
-------------------------------------------------*/
.section {
    position: relative;
}

/*-----------------------------------------------
 * FV
-------------------------------------------------*/
@media screen and (max-width: 768px) {
    .fv {
        overflow: hidden;
    }
}
.fv__vsArea {
    padding-bottom: calc(60 / var(--vw-min) * 100vw);
}
@media screen and (max-width: 768px) {
    .fv__vsArea {
        padding-bottom: 0;
    }
}
.vsSwiper {
    position: relative;
}
.vsSwiper::before {
    content: "";
    width: 100%;
    padding-top: 15.8126%;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    margin: auto;
    background-image: var(--black-gradient);
    pointer-events: none;
}
@media screen and (max-width: 768px) {
    .vsSwiper::before {
        padding-top: calc(120 / var(--vw-min) * 100vw);
    }
}
.fv__vsImg {
    width: 100%;
}
.fv__vsImg img {
    width: 100%;
    pointer-events: none;
}
@media screen and (max-width: 768px) {
    .fv__vsImg img {
        height: calc(522 / var(--vw-min) * 100vw);
        object-fit: cover;
        object-position: center top;
    }
}
.fv__vs2 {
    aspect-ratio: 1366 / 972;
    position: relative;
    overflow: hidden;
}
@media screen and (max-width: 768px) {
    .fv__vs2 {
        aspect-ratio: 375 / 522;
    }
}
.fv__vs2Layer,
.fv__vs2Star,
.fv__vs2Key,
.fv__catch {
    position: absolute;
    opacity: 0;
}
.fv__vs2Layer {
    inset: 0;
}
html.--is-opSkip .fv__vs2Layer,
html.--is-opSkip .fv__vs2Star,
html.--is-opSkip .fv__vs2Key,
html.--is-opSkip .fv__catch,
html.--is-opSkip .fv__logo,
html.--is-opSkip .fv__changeListsWrap {
    opacity: 1;
}
.fv__vs2Layer picture {
    width: 100%;
    height: 100%;
    display: block;
}
.fv__vs2Layer img,
.fv__vs2Star img,
.fv__vs2Key img {
    width: 100%;
    height: auto;
    pointer-events: none;
}
.fv__vs2Layer img {
    height: 100%;
    object-fit: cover;
}
.fv__vs2Star.--1 {
    width: 9.517%;
    top: 3.601%;
    left: 39.824%;
}
@media screen and (max-width: 768px) {
    .fv__vs2Star.--1 {
        width: 17.6%;
        top: 3.065%;
        left: 50.933%;
    }
}
.fv__vs2Star.--2 {
    width: 4.758%;
    top: 32.099%;
    left: 71.157%;
}
@media screen and (max-width: 768px) {
    .fv__vs2Star.--2 {
        width: 8.8%;
        top: 31.418%;
        left: 88.267%;
    }
}
.fv__vs2Star.--3 {
    width: 5.124%;
    top: 70.988%;
    left: 87.775%;
}
@media screen and (max-width: 768px) {
    .fv__vs2Star.--3 {
        width: 9.6%;
        top: 68.582%;
        left: 82.933%;
    }
}
.fv__vs2Star.--4 {
    width: 8.126%;
    top: 71.399%;
    left: 54.685%;
}
@media screen and (max-width: 768px) {
    .fv__vs2Star.--4 {
        width: 14.933%;
        top: 79.885%;
        left: 27.733%;
    }
}
.fv__vs2Star.--5 {
    width: 3.88%;
    top: 43.21%;
    left: 19.107%;
}
@media screen and (max-width: 768px) {
    .fv__vs2Star.--5 {
        width: 7.467%;
        top: 24.138%;
        left: 9.333%;
    }
}
.fv__vs2Key.--1 {
    width: 6.076%;
    top: 6.276%;
    left: 8.638%;
}
@media screen and (max-width: 768px) {
    .fv__vs2Key.--1 {
        width: 11.2%;
        top: 5.747%;
        left: 2.133%;
    }
}
.fv__vs2Key.--2 {
    width: 12.738%;
    top: 82.613%;
    left: 83.968%;
}
@media screen and (max-width: 768px) {
    .fv__vs2Key.--2 {
        width: 23.467%;
        top: 79.119%;
        left: 75.2%;
    }
}
.fv.--is-show .fv__vs2Layer.--bg {
    animation: fvBgIn .9s var(--easing-outquart) both;
}
.fv.--is-show .fv__vs2Layer.--mash {
    animation: fvFadeIn .45s ease .1s both;
}
.fv.--is-show .fv__vs2Layer.--domina {
    animation: fvFadeIn .45s ease .32s both;
}
.fv.--is-show .fv__vs2Layer.--charaL {
    animation: fvFromLeft .5s var(--easing-outquart) .55s both;
}
.fv.--is-show .fv__vs2Layer.--charaR {
    animation: fvFromRight .5s var(--easing-outquart) .55s both;
}
.fv.--is-show .fv__vs2Layer.--wind {
    animation: fvWindIn .5s var(--easing-outquart) .75s both;
}
.fv.--is-show .fv__vs2Key.--1 {
    animation: fvKeyFade .5s var(--easing-outquart) .7s both;
}
.fv.--is-show .fv__vs2Key.--2 {
    animation: fvKeyFade .5s var(--easing-outquart) .85s both;
}
.fv.--is-show .fv__catch {
    animation: fvCatchDon .4s var(--easing-punch) 1.4s both;
}
.fv.--is-show .fv__logo,
.fv.--is-show .fv__changeListsWrap {
    animation: fvFadeIn .55s ease 1.65s both;
}
.fv__vs2Star {
    --star-in: 1.05s;
    --star-sway: 3.6s;
}
.fv__vs2Star.--2 {
    --star-sway: 2.7s;
}
.fv__vs2Star.--3 {
    --star-sway: 3.1s;
}
.fv__vs2Star.--4 {
    --star-sway: 4s;
}
.fv__vs2Star.--5 {
    --star-sway: 2.5s;
}
html.--is-opSkip .fv__vs2Star {
    opacity: 1;
    animation: fvStarSway var(--star-sway) ease-in-out infinite;
}
.fv.--is-show .fv__vs2Star.--is-landed {
    opacity: 1;
    animation: fvStarPop .5s var(--easing-punch) calc(var(--star-in) + var(--star-i, 0) * .08s) both, fvStarSway var(--star-sway) ease-in-out calc(var(--star-in) + var(--star-i, 0) * .08s + .5s) infinite;
}
.fv__vs2Star.--5 {
    --star-i: 1;
}
.fv__vs2Star.--2 {
    --star-i: 2;
}
.fv__vs2Star.--4 {
    --star-i: 3;
}
.fv__vs2Star.--3 {
    --star-i: 4;
}
@keyframes fvBgIn {
    0% {
        opacity: 0;
        transform: scale(1.08);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes fvFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fvFromLeft {
    0% {
        opacity: 0;
        transform: translate3d(-8%, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fvFromRight {
    0% {
        opacity: 0;
        transform: translate3d(8%, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fvCatchDon {
    0% {
        opacity: 0;
        transform: scale(2.5) rotate(var(--catch-rot));
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(var(--catch-rot));
    }
}
@keyframes fvWindIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 4%, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fvKeyFade {
    0% {
        opacity: 0;
        transform: scale(.92) rotate(-4deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}
@keyframes fvStarPop {
    0% {
        opacity: 0;
        transform: rotate(-18deg) scale(0);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}
@keyframes fvStarSway {
    0%,
    100% {
        opacity: 1;
        transform: rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: rotate(8deg) translateY(-8%);
    }
}
html.--is-opLock {
    overflow: hidden;
}
.loading {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: transparent;
    overflow: hidden;
}
html.--is-opSkip .loading,
.loading.--is-done {
    display: none;
}
.loading__veil {
    position: absolute;
    inset: 0;
    background: #000;
}
.loading.--is-open .loading__veil {
    opacity: 0;
    transition: opacity .9s var(--easing-outquart) .28s;
}
.loading__glow {
    width: min(calc(280 / var(--vw-min) * 100vw), 280px);
    height: min(calc(280 / var(--vw-min) * 100vw), 280px);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(190, 225, 255, .4) 32%, transparent 68%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.15);
}
@media screen and (max-width: 768px) {
    .loading__glow {
        width: calc(180 / var(--vw-min) * 100vw);
        height: calc(180 / var(--vw-min) * 100vw);
    }
}
.loading.--is-open .loading__glow {
    opacity: 0;
}
.loading__star {
    width: min(calc(112 / var(--vw-min) * 100vw), 112px);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform-origin: 44.3% 51.4%;
    transform: translate(-44.3%, -51.4%);
    animation: loadingStarIn .9s var(--easing-outquart) both;
}
@media screen and (max-width: 768px) {
    .loading__star {
        width: calc(76 / var(--vw-min) * 100vw);
    }
}
.loading__starSpin {
    display: block;
    transform-origin: 44.3% 51.4%;
    animation: loadingStarSpin 3.6s linear infinite;
}
.loading__star img {
    width: 100%;
    height: auto;
    display: block;
    transform-origin: 44.3% 51.4%;
    filter: drop-shadow(0 0 calc(14 / var(--vw-min) * 100vw) rgba(220, 240, 255, .55));
    animation: loadingStarPulse 1.45s ease-in-out infinite;
}
@keyframes loadingStarIn {
    0% {
        opacity: 0;
        transform: translate(-44.3%, -51.4%) scale(.6);
    }
    100% {
        opacity: 1;
        transform: translate(-44.3%, -51.4%) scale(1);
    }
}
@keyframes loadingStarPulse {
    0%,
    100% {
        filter: drop-shadow(0 0 8px rgba(190, 225, 255, .4));
        transform: scale(.82);
    }
    50% {
        filter: drop-shadow(0 0 24px rgba(255, 255, 255, .9));
        transform: scale(1.16);
    }
}
@keyframes loadingStarSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .loading {
        display: none;
    }
    .fv__vs2Layer,
    .fv__vs2Star,
    .fv__vs2Key,
    .fv__catch,
    html.--is-opSkip .fv__vs2Star,
    html.--is-opSkip .fv__catch,
    .fv.--is-show .fv__vs2Layer,
    .fv.--is-show .fv__vs2Star,
    .fv.--is-show .fv__vs2Key,
    .fv.--is-show .fv__catch,
    .fv.--is-show .fv__vs2Star.--is-landed,
    .fv__logo,
    .fv.--is-show .fv__logo,
    .fv__changeListsWrap,
    .fv.--is-show .fv__changeListsWrap {
        opacity: 1;
        animation: none !important;
    }
}
.fv__catch {
    z-index: 3;
    background: no-repeat center / 100% 100%;
    pointer-events: none;
}
.fv__catch.--1 {
    --catch-rot: 8deg;
    width: calc(64 / var(--vw-min) * 100vw);
    height: calc(388 / var(--vw-min) * 100vw);
    top: calc(172.53 / var(--vw-min) * 100vw);
    left: calc(1252.65 / var(--vw-min) * 100vw);
    background-image: url(../img/top/fv_catch1.png);
    transform: rotate(8deg);
}
@media screen and (max-width: 768px) {
    .fv__catch.--1 {
        width: calc(29.33 / var(--vw-min) * 100vw);
        height: calc(175.23 / var(--vw-min) * 100vw);
        top: calc(77.09 / var(--vw-min) * 100vw);
        left: calc(329.91 / var(--vw-min) * 100vw);
    }
}
.fv__catch.--2 {
    --catch-rot: 4deg;
    width: calc(72 / var(--vw-min) * 100vw);
    height: calc(242 / var(--vw-min) * 100vw);
    top: calc(24.68 / var(--vw-min) * 100vw);
    left: calc(95.81 / var(--vw-min) * 100vw);
    background-image: url(../img/top/fv_catch2.png);
    transform: rotate(4deg);
}
@media screen and (max-width: 768px) {
    .fv__catch.--2 {
        width: calc(30.86 / var(--vw-min) * 100vw);
        height: calc(102.79 / var(--vw-min) * 100vw);
        top: calc(28.32 / var(--vw-min) * 100vw);
        left: calc(40.89 / var(--vw-min) * 100vw);
    }
}
.fv__catch.--3 {
    --catch-rot: -10deg;
    width: calc(72 / var(--vw-min) * 100vw);
    height: calc(416 / var(--vw-min) * 100vw);
    top: calc(102.82 / var(--vw-min) * 100vw);
    left: calc(53.3 / var(--vw-min) * 100vw);
    background-image: url(../img/top/fv_catch3.png);
    transform: rotate(-10deg);
}
@media screen and (max-width: 768px) {
    .fv__catch.--3 {
        width: calc(28.29 / var(--vw-min) * 100vw);
        height: calc(166.4 / var(--vw-min) * 100vw);
        top: calc(81.49 / var(--vw-min) * 100vw);
        left: calc(23.57 / var(--vw-min) * 100vw);
    }
}
.fv__logo {
    width: calc(636 / var(--vw-min) * 100vw);
    height: calc(264 / var(--vw-min) * 100vw);
    position: absolute;
    top: calc(768 / var(--vw-min) * 100vw);
    right: 0;
    left: 0;
    z-index: 3;
    margin: auto;
    background: url(../img/common/logo/logo_3rd.svg)no-repeat center/contain;
    opacity: 0;
}
@media screen and (max-width: 768px) {
    .fv__logo {
        width: calc(289 / var(--vw-min) * 100vw);
        height: calc(120 / var(--vw-min) * 100vw);
        top: calc(462 / var(--vw-min) * 100vw);
    }
}
.fv__changeListsWrap {
    position: absolute;
    top: calc(932 / var(--vw-min) * 100vw);
    left: calc(24 / var(--vw-min) * 100vw);
    z-index: 4;
    opacity: 0;
}
@media screen and (max-width: 768px) {
    .fv__changeListsWrap {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        z-index: 4;
        margin-top: calc(72 / var(--vw-min) * 100vw);
    }
}
.fv__changeLists {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(8 / var(--vw-min) * 100vw);
}
@media screen and (max-width: 768px) {
    .fv__changeLists {
        flex-wrap: wrap;
        gap: calc(10 / var(--vw-min) * 100vw);
    }
}
.fv__visualChange {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.fv__visualBtn {
    width: calc(80 / var(--vw-min) * 100vw);
    height: calc(80 / var(--vw-min) * 100vw);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: calc(1 / var(--vw-min) * 100vw) solid var(--color-gold9D8);
}
@media screen and (max-width: 768px) {
    .fv__visualBtn {
        width: calc(60 / var(--vw-min) * 100vw);
        height: calc(60 / var(--vw-min) * 100vw);
        border-width: calc(1 / var(--vw-min) * 100vw);
    }
}
.fv__visualBtnImg {
    width: calc(72 / var(--vw-min) * 100vw);
    height: calc(72 / var(--vw-min) * 100vw);
    border-radius: 50%;
    display: block;
    border: calc(1 / var(--vw-min) * 100vw) solid var(--color-gold9D8);
    filter: grayscale(1);
    transition: filter .35s var(--easing-outquart);
}
.fv__visualBtn.--is-active .fv__visualBtnImg {
    filter: none;
}
@media screen and (max-width: 768px) {
    .fv__visualBtnImg {
        width: calc(52 / var(--vw-min) * 100vw);
        height: calc(52 / var(--vw-min) * 100vw);
        border-width: calc(1 / var(--vw-min) * 100vw);
        overflow: hidden;
    }
}
.fv__visualBtnImg img {
    width: 100%;
    pointer-events: none;
}
@media screen and (max-width: 768px) {
    .fv__visualBtnImg img {
        height: 100%;
        object-fit: cover;
    }
}
.fv__visualBtnTxt {
    font-size: calc(15 / var(--vw-min) * 100vw);
    color: var(--color-gold9D8);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.15px;
    margin-top: calc(5 / var(--vw-min) * 100vw);
}
@media screen and (max-width: 768px) {
    .fv__visualBtnTxt {
        font-size: calc(13 / var(--vw-min) * 100vw);
        letter-spacing: 0.13px;
        margin-top: calc(4 / var(--vw-min) * 100vw);
    }
}
.fv__visualBtn.--is-active + .fv__visualBtnTxt {
    position: relative;
}
.fv__visualBtn.--is-active + .fv__visualBtnTxt::before,
.fv__visualBtn.--is-active + .fv__visualBtnTxt::after {
    content: "";
    width: calc(4 / var(--vw-min) * 100vw);
    height: calc(5 / var(--vw-min) * 100vw);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background: url(../img/top/visual/visual_deco.svg) no-repeat center / contain;
}
@media screen and (max-width: 768px) {
    .fv__visualBtn.--is-active + .fv__visualBtnTxt::before,
    .fv__visualBtn.--is-active + .fv__visualBtnTxt::after {
        width: calc(3 / var(--vw-min) * 100vw);
        height: calc(4 / var(--vw-min) * 100vw);
    }
}
.fv__visualBtn.--is-active + .fv__visualBtnTxt::before {
    left: calc(-8 / var(--vw-min) * 100vw);
}
.fv__visualBtn.--is-active + .fv__visualBtnTxt::after {
    right: calc(-8 / var(--vw-min) * 100vw);
    transform: scaleX(-1);
}
@media screen and (max-width: 768px) {
    .fv__visualBtn.--is-active + .fv__visualBtnTxt::before {
        left: calc(-7 / var(--vw-min) * 100vw);
    }
    .fv__visualBtn.--is-active + .fv__visualBtnTxt::after {
        right: calc(-7 / var(--vw-min) * 100vw);
    }
}
.fv__b {
    position: relative;
    padding: calc(64 / var(--vw-min) * 100vw) 0 calc(184 / var(--vw-min) * 100vw);
}
@media screen and (max-width: 768px) {
    .fv__b {
        margin-top: calc(-149 / var(--vw-min) * 100vw);
        padding: calc(178 / var(--vw-min) * 100vw) 0 calc(31 / var(--vw-min) * 100vw);
    }
}
.fv__onair {
    width: calc(1200 / var(--vw-min) * 100vw);
    height: calc(114 / var(--vw-min) * 100vw);
    -webkit-mask: url(../img/top/fv_onair.svg)no-repeat center/contain;
    mask: url(../img/top/fv_onair.svg)no-repeat center/contain;
    margin: 0 auto;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%)no-repeat -100% 0/50% 100% var(--color-gold9D8);
    translate: 0 calc((var(--progress, .5) - .5) * -80 / var(--vw-min) * 100vw);
    animation: fvOnairShine 4s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
    .fv__onair {
        width: calc(335 / var(--vw-min) * 100vw);
        height: calc(32 / var(--vw-min) * 100vw);
        position: relative;
        z-index: 1;
    }
}
.fv__season {
    width: calc(880 / var(--vw-min) * 100vw);
    height: calc(151 / var(--vw-min) * 100vw);
    position: absolute;
    top: calc(86 / var(--vw-min) * 100vw);
    right: 0;
    left: 0;
    z-index: -1;
    margin: auto;
    background: url(../img/top/fv_3rd.svg)no-repeat center/contain;
    translate: 0 calc((var(--progress, .5) - .5) * 120 / var(--vw-min) * 100vw);
    scale: calc(.95 + var(--progress, .5) * .1);
}
@media screen and (max-width: 768px) {
    .fv__season {
        width: calc(335 / var(--vw-min) * 100vw);
        height: calc(58 / var(--vw-min) * 100vw);
        top: calc(133 / var(--vw-min) * 100vw);
    }
}
.fv__story {
    width: calc(421 / var(--vw-min) * 100vw);
    height: calc(176 / var(--vw-min) * 100vw);
    position: absolute;
    bottom: calc(20 / var(--vw-min) * 100vw);
    left: calc(35 / var(--vw-min) * 100vw);
    -webkit-mask: url(../img/top/fv_story.svg)no-repeat center/contain;
    mask: url(../img/top/fv_story.svg)no-repeat center/contain;
    background-color: var(--color-gold9D8);
    opacity: calc(2 - var(--progress, .5) * 2);
    translate: calc((var(--progress, .5) - .5) * -80 / var(--vw-min) * 100vw) 0;
}
@media screen and (max-width: 768px) {
    .fv__story {
        width: max-content;
        max-width: 100%;
        height: auto;
        position: relative;
        bottom: auto;
        left: auto;
        z-index: 1;
        margin: calc(74 / var(--vw-min) * 100vw) auto 0;
        -webkit-mask: none;
        mask: none;
        background-color: transparent;
    }
}
@media screen and (max-width: 768px) {
    .fv__storyTxt {
        font-size: calc(10 / var(--vw-min) * 100vw);
        color: var(--color-gold9D8);
        font-weight: 400;
        line-height: calc(11 / var(--vw-min) * 100vw);
        letter-spacing: 0;
        text-align: center;
        white-space: nowrap;
        opacity: .5;
    }
}
.fvBg {
    width: 100%;
    height: calc(600 / var(--vw-min) * 100vw);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -2;
}
@media screen and (max-width: 768px) {
    .fvBg {
        height: calc(280 / var(--vw-min) * 100vw);
        top: calc(22 / var(--vw-min) * 100vw);
    }
}
.fvBg::after {
    content: "";
    width: 100%;
    height: calc(500 / var(--vw-min) * 100vw);
    display: block;
    position: absolute;
    top: 0;
    background-image: var(--black-0gradient);
}
@media screen and (max-width: 768px) {
    .fvBg::after {
        display: none;
    }
}
.fvBgIn {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
}
.fvBgIn::before {
    content: "";
    width: 100%;
    height: calc(413 / var(--vw-min) * 100vw);
    display: block;
    position: absolute;
    top: 0;
    background-color: var(--color-redAF0);
}
.fvBgFlag {
    width: 100%;
    padding-top: 13.6896%;
    position: absolute;
    bottom: 1px;
    margin: auto;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(27 / 187 * 100%), 0 100%);
}
@media screen and (max-width: 768px) {
    .fvBgFlag {
        display: none;
    }
}
.fvBgFlag::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background-color: var(--color-redAF0);
}
.fvBgIn::before,
.fvBgFlag::before {
    background-image: url(../img/common/deco/noise.png);
    background-repeat: repeat;
    background-size: calc(40 / var(--vw-min) * 100vw);
    background-blend-mode: overlay;
}
@media screen and (max-width: 768px) {
    .fvBgIn::before {
        height: 100%;
        background-color: transparent;
        background-image: url(../img/common/deco/noise.png), linear-gradient(180deg, #000 0%, var(--color-redAF0) 100%);
        background-repeat: repeat, no-repeat;
        background-size: calc(40 / var(--vw-min) * 100vw), 100% 100%;
        background-blend-mode: overlay, normal;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(236 / 280 * 100%), 0 100%);
    }
}
@media screen and (max-width: 768px) {
    .fvBg .decoPattern {
        height: calc(64 / var(--vw-min) * 100vw);
        bottom: 0;
    }
}
@media screen and (max-width: 768px) {
    .fvBg .decoPattern__line {
        top: calc(6 / var(--vw-min) * 100vw);
    }
}
@media screen and (max-width: 768px) {
    .fvBg .decoPattern__line::before {
        height: calc(7 / var(--vw-min) * 100vw);
        top: 0;
    }
}
@media screen and (max-width: 768px) {
    .fvBg .decoPattern__line:first-child::before {
        transform: rotate(13.21deg);
    }
}
@media screen and (max-width: 768px) {
    .fvBg .decoPattern__line:last-child::before {
        transform: rotate(-13.21deg);
    }
}

/**
* bnr
**/
.bnrArea {
    width: min(calc(1026 / var(--vw-min) * 100vw), 1026px);
    position: relative;
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    .bnrArea {
        width: 100%;
        margin-top: 0;
    }
}
.bnrSwiper {
    width: min(calc(866 / var(--vw-min) * 100vw), 866px);
    margin: max(calc(-28 / var(--vw-min) * 100vw), -28px) auto;
    padding: min(calc(28 / var(--vw-min) * 100vw), 28px) min(calc(22 / var(--vw-min) * 100vw), 22px);
    overflow: hidden;
}
@media screen and (max-width: 768px) {
    .bnrSwiper {
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }
}
.bnrLink {
    width: 100%;
    height: 100%;
    display: block;
}
.bnrItem img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
}
@media screen and (max-width: 768px) {
    .bnrItem {
        width: calc(240 / var(--vw-min) * 100vw);
        position: relative;
    }
}
@media screen and (max-width: 768px) {
    .bnrItem::after {
        content: "";
        position: absolute;
        inset: 0;
        background-color: rgba(0,0,0,.8);
        pointer-events: none;
    }
}
@media screen and (max-width: 768px) {
    .bnrItem.swiper-slide-active::after {
        opacity: 0;
    }
}
.bnr__arrowWrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    margin: auto;
    pointer-events: none;
}
@media screen and (max-width: 768px) {
    .bnr__arrowWrap {
        padding: 0 calc(12 / var(--vw-min) * 100vw);
    }
}
.bnr__arrowWrap .swiper__arrow {
    cursor: pointer;
    pointer-events: auto;
}
@media screen and (max-width: 768px) {
    .bnr__arrowWrap .swiper__arrow {
        width: calc(40 / var(--vw-min) * 100vw);
        height: calc(40 / var(--vw-min) * 100vw);
    }
}
@media screen and (max-width: 768px) {
    .bnr__arrowWrap .swiper__arrow::before {
        width: calc(36 / var(--vw-min) * 100vw);
        height: calc(36 / var(--vw-min) * 100vw);
    }
}
@media screen and (max-width: 768px) {
    .bnr__arrowWrap .swiper__arrow::after {
        width: calc(16 / var(--vw-min) * 100vw);
        height: calc(11 / var(--vw-min) * 100vw);
    }
}

/**
* deco
**/
.fv__star {
    width: min(calc(131 / var(--vw-min) * 100vw),131px);
    height: min(calc(128 / var(--vw-min) * 100vw),128px);
    display: block;
    position: absolute;
    right: min(calc(120 / var(--vw-min) * 100vw),120px);
    bottom: max(calc(-148 / var(--vw-min) * 100vw),-148px);
    background: url(../img/common/deco/star2.png)no-repeat center/contain;
    translate: 0 calc((var(--progress, .5) - .5) * -120 / var(--vw-min) * 100vw);
    animation: decoStarTwinkle 4s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
    .fv__star {
        width: calc(65 / var(--vw-min) * 100vw);
        height: calc(64 / var(--vw-min) * 100vw);
        top: calc(776 / var(--vw-min) * 100vw);
        right: calc(21 / var(--vw-min) * 100vw);
        bottom: auto;
    }
}

/*-----------------------------------------------
 * NEWS
-------------------------------------------------*/
.news {
    padding: min(calc(186 / var(--vw-min) * 100vw),186px) 0 min(calc(168 / var(--vw-min) * 100vw),168px);
}
@media screen and (max-width: 768px) {
    .news {
        padding: calc(84 / var(--vw-min) * 100vw) 0 calc(64 / var(--vw-min) * 100vw);
    }
}
.newsWrap {
    width: min(calc(1200 / var(--vw-min) * 100vw),1200px);
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    .newsWrap {
        width: 100%;
    }
}
.news .cont-tit {
    width: min(calc(284 / var(--vw-min) * 100vw),284px);
    position: relative;
}
@media screen and (max-width: 768px) {
    .news .cont-tit {
        width: calc(162 / var(--vw-min) * 100vw);
        margin-left: calc(20 / var(--vw-min) * 100vw);
    }
}
.news .cont-tit-en {
    width: 100%;
    height: min(calc(112 / var(--vw-min) * 100vw),112px);
    display: block;
    -webkit-mask: url(../img/common/tit/news.svg)no-repeat center/contain;
    mask: url(../img/common/tit/news.svg)no-repeat center/contain;
    background-color: var(--color-gold9D8);
}
@media screen and (max-width: 768px) {
    .news .cont-tit-en {
        height: calc(64 / var(--vw-min) * 100vw);
    }
}
.news__lists {
    display: flex;
    flex-direction: column;
    border-top: min(calc(1 / var(--vw-min) * 100vw),1px) solid var(--op50-gold9D8);
    margin-top: min(calc(48 / var(--vw-min) * 100vw),48px);
}
@media screen and (max-width: 768px) {
    .news__lists {
        margin-top: calc(24 / var(--vw-min) * 100vw);
        border-top: calc(1 / var(--vw-min) * 100vw) solid var(--op50-gold9D8);
    }
}
.news__link {
    display: flex;
    align-items: center;
    border-bottom: min(calc(1 / var(--vw-min) * 100vw),1px) solid var(--op50-gold9D8);
    padding: min(calc(29 / var(--vw-min) * 100vw),29px) 0 min(calc(31 / var(--vw-min) * 100vw),31px);
    text-decoration: none;
}
@media screen and (max-width: 768px) {
    .news__link {
        padding: calc(16 / var(--vw-min) * 100vw) calc(20 / var(--vw-min) * 100vw);
        border-bottom: calc(1 / var(--vw-min) * 100vw) solid var(--op50-gold9D8);
        align-items: flex-start;
    }
}
.news__time {
    color: var(--color-gold9D8);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding-right: min(calc(40 / var(--vw-min) * 100vw),40px);
}
@media screen and (max-width: 768px) {
    .news__time {
        width: calc(86 / var(--vw-min) * 100vw);
        padding-right: calc(12 / var(--vw-min) * 100vw);
    }
}
.news__year {
    font-size: min(calc(18 / var(--vw-min) * 100vw),18px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.54px;
}
@media screen and (max-width: 768px) {
    .news__year {
        font-size: calc(12 / var(--vw-min) * 100vw);
        letter-spacing: 0.12px;
    }
}
.news__date {
    font-size: min(calc(36 / var(--vw-min) * 100vw),36px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1.08px;
    display: block;
    margin-top: min(calc(6 / var(--vw-min) * 100vw),6px)
}
@media screen and (max-width: 768px) {
    .news__date {
        font-size: calc(24 / var(--vw-min) * 100vw);
        letter-spacing: 0.24px;
        margin-top: calc(2 / var(--vw-min) * 100vw);
    }
}
.news__tit {
    font-size: min(calc(17 / var(--vw-min) * 100vw),17px);
    color: #fff;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.51px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
@media screen and (max-width: 768px) {
    .news__tit {
        font-size: calc(13 / var(--vw-min) * 100vw);
        line-height: calc(24 / var(--vw-min) * 100vw);
        letter-spacing: 0.39px;
    }
}
.linkBtn {
    justify-content: flex-end;
    margin-top: min(calc(48 / var(--vw-min) * 100vw),48px);
}
@media screen and (max-width: 768px) {
    .linkBtn {
        margin-top: calc(48 / var(--vw-min) * 100vw);
    }
}
.story .linkBtn {
    width: min(calc(1200 / var(--vw-min) * 100vw),1200px);
    position: relative;
    z-index: 1;
    margin-right: auto;
    margin-bottom: min(calc(48 / var(--vw-min) * 100vw),48px);
    margin-left: auto;
}
@media screen and (max-width: 768px) {
    .news .linkBtn,
    .story .linkBtn {
        width: 100%;
        margin-top: calc(24 / var(--vw-min) * 100vw);
        margin-bottom: calc(24 / var(--vw-min) * 100vw);
        padding-right: calc(20 / var(--vw-min) * 100vw);
    }
}
@media screen and (max-width: 768px) {
    .news .linkA,
    .story .linkA {
        font-size: calc(16 / var(--vw-min) * 100vw);
        letter-spacing: 0.32px;
        gap: calc(8 / var(--vw-min) * 100vw);
    }
}
@media screen and (max-width: 768px) {
    .news .linkA__arrow,
    .story .linkA__arrow {
        width: calc(40 / var(--vw-min) * 100vw);
        height: calc(40 / var(--vw-min) * 100vw);
    }
}
@media screen and (max-width: 768px) {
    .news .linkA__arrow::before,
    .story .linkA__arrow::before {
        width: calc(36 / var(--vw-min) * 100vw);
        height: calc(36 / var(--vw-min) * 100vw);
    }
}
@media screen and (max-width: 768px) {
    .news .linkA__arrow::after,
    .story .linkA__arrow::after {
        width: calc(16 / var(--vw-min) * 100vw);
        height: calc(11 / var(--vw-min) * 100vw);
    }
}

/*-----------------------------------------------
 * MOVIE
-------------------------------------------------*/
.movieWrap {
    width: 100%;
    padding-top: 41.4348%;
    position: relative;
    overflow: hidden;
    background-color: #000;
}
@media screen and (max-width: 768px) {
    .movieWrap {
        padding-top: 61.8667%;
    }
}
.movie .movieBg {
    z-index: 1;
}
.movie .cont-tit {
    width: calc(169 / var(--vw-min) * 100vw);
    height: calc(566 / var(--vw-min) * 100vw);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 3;
    margin: auto;
    overflow: hidden;
}
@media screen and (max-width: 768px) {
    .movie .cont-tit {
        width: calc(98 / var(--vw-min) * 100vw);
        height: calc(232 / var(--vw-min) * 100vw);
        top: 0;
        bottom: auto;
        left: calc(-15 / var(--vw-min) * 100vw);
    }
}
.movie .cont-tit-en {
    width: calc(192 / var(--vw-min) * 100vw);
    height: calc(570 / var(--vw-min) * 100vw);
    position: absolute;
    top: 0;
    right: 0;
    -webkit-mask: url(../img/common/tit/movie-t.svg)no-repeat center/contain;
    mask: url(../img/common/tit/movie-t.svg)no-repeat center/contain;
    background-color: #000;
}
@media screen and (max-width: 768px) {
    .movie .cont-tit-en {
        width: 100%;
        height: 100%;
        top: 0;
        right: auto;
    }
}
.movie__yt-play {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    margin: auto;
}
.movie__yt-play-arrow {
    width: calc(136 / var(--vw-min) * 100vw);
    height: calc(136 / var(--vw-min) * 100vw);
    display: block;
    position: relative;
    border-radius: 50%;
}
@media screen and (max-width: 768px) {
    .movie__yt-play-arrow {
        width: calc(80 / var(--vw-min) * 100vw);
        height: calc(80 / var(--vw-min) * 100vw);
        opacity: .7;
    }
}
.movie__yt-play-arrow::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    -webkit-mask: url(../img/common/deco/movieFrame.svg)no-repeat center/contain;
    mask: url(../img/common/deco/movieFrame.svg)no-repeat center/contain;
    background-color: var(--color-gold9D8);
}
.movie__yt-play-arrow::after {
    content: "";
    width: calc(48 / var(--vw-min) * 100vw);
    height: calc(32 / var(--vw-min) * 100vw);
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    translate: calc(3 / var(--vw-min) * 100vw) 0;
    -webkit-mask: url(../img/common/deco/arrow.svg)no-repeat center/contain;
    mask: url(../img/common/deco/arrow.svg)no-repeat center/contain;
    background-color: var(--color-gold9D8);
}
@media screen and (max-width: 768px) {
    .movie__yt-play-arrow::after {
        width: calc(28 / var(--vw-min) * 100vw);
        height: calc(18 / var(--vw-min) * 100vw);
    }
}
.movie__yt-play-txt {
    font-size: calc(20 / var(--vw-min) * 100vw);
    color: var(--color-gold9D8);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.2px;
    margin-top: calc(12 / var(--vw-min) * 100vw);
}
@media screen and (max-width: 768px) {
    .movie__yt-play-txt {
        font-size: calzc(14 / var(--vw-min) * 100vw);
        letter-spacing: 0.14px;
        margin-top: calc(8 / var(--vw-min) * 100vw);
    }
}

/**
* deco
**/
.movie__key {
    width: calc(176 / var(--vw-min) * 100vw);
    height: calc(160 / var(--vw-min) * 100vw);
    position: absolute;
    top: max(-139 / var(--vw-min) * 100vw);
    left: calc(72 / var(--vw-min) * 100vw);
    z-index: 4;
    background: url(../img/common/deco/key2.png)no-repeat center/contain;
    transform: rotate(calc((var(--progress, .5) - .5) * 40deg));
    animation: decoKeyFloat 3.6s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
    .movie__key {
        width: calc(80 / var(--vw-min) * 100vw);
        height: calc(80 / var(--vw-min) * 100vw);
        top: calc(-67 / var(--vw-min) * 100vw);
        left: calc(24 / var(--vw-min) * 100vw);
    }
}

/*-----------------------------------------------
 * STORY
-------------------------------------------------*/
.story {
    padding-top: 0;
    view-timeline-name: --story;
    view-timeline-axis: block;
    isolation: isolate;
    overflow: hidden;
}
.storyWrap {
    width: min(100vw,1366px);
    position: relative;
    padding: min(calc(96 / var(--vw-min) * 100vw),96px) min(calc(82 / var(--vw-min) * 100vw),82px) 0 min(calc(40 / var(--vw-min) * 100vw),40px);
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    .storyWrap {
        width: 100%;
        padding: 0;
    }
}
.storyCont {
    width: min(calc(720 / var(--vw-min) * 100vw),720px);
    margin-left: auto;
    padding-top: min(calc(196 / var(--vw-min) * 100vw),196px);
}
@media screen and (max-width: 768px) {
    .storyCont {
        width: 100%;
        margin-left: 0;
        padding: calc(108 / var(--vw-min) * 100vw) calc(20 / var(--vw-min) * 100vw) 0;
    }
}
.story .cont-tit {
    width: min(calc(313 / var(--vw-min) * 100vw),313px);
    position: relative;
}
@media screen and (max-width: 768px) {
    .story .cont-tit {
        width: calc(174 / var(--vw-min) * 100vw);
    }
}
.story .cont-tit-ja {
    right: 0;
}
@media screen and (max-width: 768px) {
    .story .cont-tit-ja {
        top: calc(-3 / var(--vw-min) * 100vw);
        right: 0;
    }
}
.story .cont-tit-en {
    width: min(calc(304 / var(--vw-min) * 100vw),304px);
    height: min(calc(112 / var(--vw-min) * 100vw),112px);
    display: block;
    -webkit-mask: url(../img/common/tit/story.svg)no-repeat center/contain;
    mask: url(../img/common/tit/story.svg)no-repeat center/contain;
    background-color: var(--color-gold9D8);
}
@media screen and (max-width: 768px) {
    .story .cont-tit-en {
        width: 100%;
        height: calc(64 / var(--vw-min) * 100vw);
    }
}
.cont-tit-story {
    width: min(calc(312 / var(--vw-min) * 100vw),312px);
    height: min(calc(26 / var(--vw-min) * 100vw),26px);
    display: block;
    -webkit-mask: url(../img/top/contTit-story.svg)no-repeat center/contain;
    mask: url(../img/top/contTit-story.svg)no-repeat center/contain;
    background-color: var(--color-gold9D8);
    margin-top: min(calc(15 / var(--vw-min) * 100vw),15px);
}
@media screen and (max-width: 768px) {
    .cont-tit-story {
        width: calc(312 / var(--vw-min) * 100vw);
        height: calc(26 / var(--vw-min) * 100vw);
        display: none;
        margin-top: calc(15 / var(--vw-min) * 100vw);
    }
}
@media screen and (max-width: 768px) {
    .story__lead {
        font-size: calc(10 / var(--vw-min) * 100vw);
        color: var(--color-gold9D8);
        font-weight: 400;
        line-height: calc(13 / var(--vw-min) * 100vw);
        letter-spacing: 0;
        width: calc(261 / var(--vw-min) * 100vw);
        margin-top: calc(12 / var(--vw-min) * 100vw);
        opacity: .7;
    }
}
.story__txtWrap {
    padding-top: min(calc(66 / var(--vw-min) * 100vw),66px);
}
@media screen and (max-width: 768px) {
    .story__txtWrap {
        padding-top: calc(40 / var(--vw-min) * 100vw);
    }
}
.story__txt {
    font-size: min(calc(17 / var(--vw-min) * 100vw),17px);
    color: #fff;
    font-weight: 500;
    line-height: 2.353;
    letter-spacing: 0.51px;
}
@media screen and (max-width: 768px) {
    .story__txt {
        font-size: calc(13 / var(--vw-min) * 100vw);
        line-height: calc(32 / var(--vw-min) * 100vw);
        letter-spacing: 0.39px;
    }
}
.story__txt.--catch {
    font-size: min(calc(28 / var(--vw-min) * 100vw),28px);
    font-weight: 500;
    line-height: 1.8571;
    letter-spacing: 0.84px;
    margin-top: min(calc(36 / var(--vw-min) * 100vw),36px);
    transform: rotate(-5deg);
}
@media screen and (max-width: 768px) {
    .story__txt.--catch {
        font-size: calc(18 / var(--vw-min) * 100vw);
        line-height: calc(34 / var(--vw-min) * 100vw);
        letter-spacing: 0.54px;
        width: calc(280 / var(--vw-min) * 100vw);
        margin-top: calc(36 / var(--vw-min) * 100vw);
        margin-left: calc(47 / var(--vw-min) * 100vw);
    }
}
.story__zero {
    position: relative;
}
.story__zeroTxt {
    font-size: min(calc(12 / var(--vw-min) * 100vw), 12px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    position: absolute;
    top: max(calc(-18 / var(--vw-min) * 100vw), -18px);
    right: 0;
}
@media screen and (max-width: 768px) {
    .story__zeroTxt {
        font-size: calc(10 / var(--vw-min) * 100vw);
        top: calc(-15 / var(--vw-min) * 100vw);
    }
}
.story__txt.--mt {
    margin-top: min(calc(40 / var(--vw-min) * 100vw),40px);
}
@media screen and (max-width: 768px) {
    .story__txt.--mt {
        width: calc(293 / var(--vw-min) * 100vw);
        margin-top: calc(46 / var(--vw-min) * 100vw);
        margin-left: calc(62 / var(--vw-min) * 100vw);
    }
}
.story__catchArea {
    width: min(100vw,1366px);
    height: min(calc(627 / var(--vw-min) * 100vw),627px);
    position: relative;
    margin: max(calc(-20 / var(--vw-min) * 100vw),-20px) auto 0;
}
@media screen and (max-width: 768px) {
    .story__catchArea {
        width: 100%;
        height: calc(334 / var(--vw-min) * 100vw);
        margin-top: 0;
    }
}
.story__catch {
    width: min(calc(1376 / var(--vw-min) * 100vw),1376px);
    height: min(calc(200 / var(--vw-min) * 100vw),200px);
    display: block;
    position: absolute;
    left: max(calc(-8 / var(--vw-min) * 100vw),-8px);
    -webkit-mask: url(../img/top/story_catch.svg)no-repeat center/contain;
    mask: url(../img/top/story_catch.svg)no-repeat center/contain;
    background-color: #fff;
    margin-top: min(calc(146 / var(--vw-min) * 100vw),146px);
    transform: rotate(-5.2deg);
}
@media screen and (max-width: 768px) {
    .story__catch {
        width: 100%;
        height: calc(54 / var(--vw-min) * 100vw);
        left: 0;
        margin-top: calc(39 / var(--vw-min) * 100vw);
    }
}
.story__crack.--left {
    width: min(calc(332 / var(--vw-min) * 100vw),332px);
    height: min(calc(360 / var(--vw-min) * 100vw),360px);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: url(../img/common/deco/hole.svg)no-repeat center/contain;
}
@media screen and (max-width: 768px) {
    .story__crack.--left {
        width: calc(166 / var(--vw-min) * 100vw);
        height: calc(180 / var(--vw-min) * 100vw);
        top: calc(-93 / var(--vw-min) * 100vw);
        left: calc(-16 / var(--vw-min) * 100vw);
    }
}
.story__crack.--mashle {
    width: min(calc(594 / var(--vw-min) * 100vw),594px);
    height: min(calc(609 / var(--vw-min) * 100vw),609px);
    display: block;
    position: absolute;
    top: min(calc(20 / var(--vw-min) * 100vw),20px);
    right: max(calc(-20 / var(--vw-min) * 100vw),-20px);
    background: url(../img/common/deco/hole_mashle.png)no-repeat center/contain;
}
@media screen and (max-width: 768px) {
    .story__crack.--mashle {
        width: calc(324 / var(--vw-min) * 100vw);
        height: calc(332 / var(--vw-min) * 100vw);
        top: calc(2 / var(--vw-min) * 100vw);
        right: calc(-68 / var(--vw-min) * 100vw);
    }
}

/**
* img
**/
.story__imgBox.--right {
    width: min(calc(336 / var(--vw-min) * 100vw),336px);
    height: min(calc(448 / var(--vw-min) * 100vw),448px);
    position: absolute;
    top: 0;
    right: min(calc(32 / var(--vw-min) * 100vw),32px);
}
@media screen and (max-width: 768px) {
    .story__imgBox.--right {
        width: calc(168 / var(--vw-min) * 100vw);
        height: calc(224 / var(--vw-min) * 100vw);
        top: calc(40 / var(--vw-min) * 100vw);
        right: calc(-24 / var(--vw-min) * 100vw);
    }
}
.story__imgBox.--right::before,
.story__imgBox.--right::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 50%;
    border: min(calc(1 / var(--vw-min) * 100vw),1px) solid var(--color-grayA5A);
}
@media screen and (max-width: 768px) {
    .story__imgBox.--right::before,
    .story__imgBox.--right::after {
        border: calc(1 / var(--vw-min) * 100vw) solid var(--color-grayA5A);
    }
}
.story__imgBox.--right::before {
    width: 100%;
    height: 100%;
}
.story__imgBox.--right::after {
    width: min(calc(328 / var(--vw-min) * 100vw),328px);
    height: min(calc(440 / var(--vw-min) * 100vw),440px);
    left: min(calc(2 / var(--vw-min) * 100vw),2px);
}
@media screen and (max-width: 768px) {
    .story__imgBox.--right::after {
        width: calc(164 / var(--vw-min) * 100vw);
        height: calc(220 / var(--vw-min) * 100vw);
        left: 0;
    }
}
.story__imgBox.--right .story__img {
    width: min(calc(320 / var(--vw-min) * 100vw),320px);
    height: min(calc(432 / var(--vw-min) * 100vw),432px);
    border-radius: 50%;
    position: absolute;
    inset: 0;
    margin: auto;
    overflow: hidden;
    border: min(calc(1 / var(--vw-min) * 100vw),1px) solid var(--color-grayA5A);
}
@media screen and (max-width: 768px) {
    .story__imgBox.--right .story__img {
        width: calc(160 / var(--vw-min) * 100vw);
        height: calc(216 / var(--vw-min) * 100vw);
        border: 0;
    }
}
.story__imgBox.--left {
    width: min(calc(442 / var(--vw-min) * 100vw),442px);
    height: min(calc(705 / var(--vw-min) * 100vw),705px);
    position: absolute;
    top: min(calc(288 / var(--vw-min) * 100vw),288px);
    left: min(calc(40 / var(--vw-min) * 100vw),40px);
    border-radius: min(calc(1000 / var(--vw-min) * 100vw),1000px) min(calc(1000 / var(--vw-min) * 100vw),1000px) 0 0;
    background-color: rgba(0,0,0,.8);
}
@media screen and (max-width: 768px) {
    .story__imgBox.--left {
        width: calc(154 / var(--vw-min) * 100vw);
        height: calc(246 / var(--vw-min) * 100vw);
        top: calc(506 / var(--vw-min) * 100vw);
        left: calc(-32 / var(--vw-min) * 100vw);
        border-radius: calc(1000 / var(--vw-min) * 100vw) calc(1000 / var(--vw-min) * 100vw) 0 0;
        opacity: .3;
        -webkit-filter: blur(calc(2 / var(--vw-min) * 100vw));
        filter: blur(calc(2 / var(--vw-min) * 100vw));
    }
}
.story__imgBox.--left::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    border: min(calc(1 / var(--vw-min) * 100vw),1px) solid var(--color-grayA5A);
    border-radius: min(calc(1000 / var(--vw-min) * 100vw),1000px) min(calc(1000 / var(--vw-min) * 100vw),1000px) 0 0;
}
@media screen and (max-width: 768px) {
    .story__imgBox.--left::before {
        border: calc(1 / var(--vw-min) * 100vw) solid var(--color-grayA5A);
        border-radius: calc(1000 / var(--vw-min) * 100vw) calc(1000 / var(--vw-min) * 100vw) 0 0;
    }
}
.story__imgBox.--left .story__img {
    width: min(calc(426 / var(--vw-min) * 100vw),426px);
    height: min(calc(689 / var(--vw-min) * 100vw),689px);
    position: absolute;
    inset: 0;
    left: min(calc(2 / var(--vw-min) * 100vw),2px);
    border: min(calc(2 / var(--vw-min) * 100vw),2px) solid var(--color-grayA5A);
    border-radius: min(calc(1000 / var(--vw-min) * 100vw),1000px) min(calc(1000 / var(--vw-min) * 100vw),1000px) 0 0;
    margin: auto;
    overflow: hidden;
}
@media screen and (max-width: 768px) {
    .story__imgBox.--left .story__img {
        width: calc(148 / var(--vw-min) * 100vw);
        height: calc(240 / var(--vw-min) * 100vw);
        left: calc(2 / var(--vw-min) * 100vw);
        border: calc(2 / var(--vw-min) * 100vw) solid var(--color-grayA5A);
        border-radius: calc(1000 / var(--vw-min) * 100vw) calc(1000 / var(--vw-min) * 100vw) 0 0;
    }
}
.story__img img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
    object-position: right;
    pointer-events: none;
}
.story__imgBox.--right .story__img img {
    transform: scale(calc(1 + var(--story-progress, 0) * .45));
}
.story__imgBox.--left .story__img img {
    width: 190%;
    left: -45%;
    transform: translateX(calc((var(--story-progress, .5) - .5) * 44%));
}
/**
* deco
**/
.story__star {
    width: min(calc(102 / var(--vw-min) * 100vw),102px);
    height: min(calc(112 / var(--vw-min) * 100vw),112px);
    position: absolute;
    top: min(calc(341 / var(--vw-min) * 100vw),341px);
    right: min(calc(23 / var(--vw-min) * 100vw),23px);
    background: url(../img/common/deco/star3.png)no-repeat center/contain;
    translate: 0 calc((var(--progress, .5) - .5) * -120 / var(--vw-min) * 100vw);
    animation: decoStarTwinkle 4s ease-in-out infinite -1s;
}
@media screen and (max-width: 768px) {
    .story__star {
        width: calc(60 / var(--vw-min) * 100vw);
        height: calc(66 / var(--vw-min) * 100vw);
        top: calc(25 / var(--vw-min) * 100vw);
        right: calc(105 / var(--vw-min) * 100vw);
    }
}

/**
* bg
**/
.storyBg {
    width: 100%;
    height: calc(798 / var(--vw-min) * 100vw);
    max-height: 100%;
    position: absolute;
    top: -14%;
    z-index: -2;
}
@media screen and (max-width: 768px) {
    .storyBg {
        width: calc(767 / var(--vw-min) * 100vw);
        height: calc(531 / var(--vw-min) * 100vw);
        max-height: none;
        top: calc(-168 / var(--vw-min) * 100vw);
        left: 50%;
        border-radius: 50%;
        transform: translateX(-50%);
    }
}
.storyBg::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background: url(../img/common/bg/story.png)no-repeat center/contain;
    animation: storyBgMove auto linear both;
    animation-timeline: --story;
    animation-range: cover;
}
@supports (background-image: url(../img/common/bg/story.webp)) {
    .storyBg::before {
        background-image: url(../img/common/bg/story.webp);
    }
}
@media screen and (max-width: 768px) {
    .storyBg::before {
        background-image: url(../img/common/bg/story-s.png);
    }
    @supports (background-image: url(../img/common/bg/story-s.webp)) {
        .storyBg::before {
            background-image: url(../img/common/bg/story-s.webp);
        }
    }
}

@keyframes storyBgMove {
    from {
        transform: translateY(14%);
    }
    to {
        transform: translateY(-14%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .storyBg::before {
        animation: none;
    }
}
/*-----------------------------------------------
 * INTRODUCTION
-------------------------------------------------*/
.introduction {
    min-height: calc(100vw * 1128 / 1366);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-x: clip;
}
@media screen and (max-width: 768px) {
    .introduction {
        min-height: 0;
        overflow: hidden;
    }
}
.introduction::before {
    content: "";
    width: 100%;
    height: min(calc(240 / var(--vw-min) * 100vw), 240px);
    display: block;
    position: absolute;
    top: max(calc(-240 / var(--vw-min) * 100vw),-240px);
    z-index: -1;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.55) 100%), linear-gradient(180deg, #000 0%, #1F2843 100%);
}
@media screen and (max-width: 768px) {
    .introduction::before {
        height: calc(117 / var(--vw-min) * 100vw);
        top: auto;
        bottom: calc(551 / var(--vw-min) * 100vw);
    }
}
.introWrap {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    padding: min(calc(160 / var(--vw-min) * 100vw),160px) 0 min(calc(248 / var(--vw-min) * 100vw),248px);
}
@media screen and (max-width: 768px) {
    .introWrap {
        padding: calc(28 / var(--vw-min) * 100vw) calc(20 / var(--vw-min) * 100vw) calc(232 / var(--vw-min) * 100vw);
    }
}
.introduction .cont-tit {
    width: min(calc(628 / var(--vw-min) * 100vw),628px);
    display: block;
    position: relative;
}
@media screen and (max-width: 768px) {
    .introduction .cont-tit {
        width: calc(317 / var(--vw-min) * 100vw);
    }
}
.introduction  .cont-tit-en {
    width: 100%;
    height: min(calc(112 / var(--vw-min) * 100vw),112px);
    display: block;
    -webkit-mask: url(../img/common/tit/introduction.svg)no-repeat center/contain;
    mask: url(../img/common/tit/introduction.svg)no-repeat center/contain;
    background-color: var(--color-gold9D8);
}
@media screen and (max-width: 768px) {
    .introduction .cont-tit-en {
        height: calc(56 / var(--vw-min) * 100vw);
    }
}
@media screen and (max-width: 768px) {
    .introduction .cont-tit-ja {
        top: calc(-3 / var(--vw-min) * 100vw);
        right: 0;
    }
}
.intro__txtWrap {
    font-size: min(calc(17 / var(--vw-min) * 100vw),17px);
    font-weight: 500;
    line-height: 2.3529;
    letter-spacing: 0.51px;
    text-align: center;
    padding-top: min(calc(70 / var(--vw-min) * 100vw),70px);
}
@media screen and (max-width: 768px) {
    .intro__txtWrap {
        font-size: calc(13 / var(--vw-min) * 100vw);
        line-height: calc(30 / var(--vw-min) * 100vw);
        letter-spacing: 0.39px;
        padding-top: calc(36 / var(--vw-min) * 100vw);
    }
}
.intro__txt.--mt {
    margin-top: min(calc(32 / var(--vw-min) * 100vw),32px);
}
@media screen and (max-width: 768px) {
    .intro__txt.--mt {
        margin-top: calc(20 / var(--vw-min) * 100vw);
    }
}
@media screen and (max-width: 768px) {
    .intro__txtBig {
        font-size: calc(22 / var(--vw-min) * 100vw);
        line-height: calc(30 / var(--vw-min) * 100vw);
    }
}
.intro__catch {
    width: min(calc(600 / var(--vw-min) * 100vw),600px);
    height: min(calc(32 / var(--vw-min) * 100vw),32px);
    display: block;
    -webkit-mask: url(../img/top/intro_catch.svg)no-repeat center/contain;
    mask: url(../img/top/intro_catch.svg)no-repeat center/contain;
    background-color: #fff;
    margin-top: min(calc(48 / var(--vw-min) * 100vw),48px);
}
@media screen and (max-width: 768px) {
    .intro__catch {
        width: calc(335 / var(--vw-min) * 100vw);
        height: calc(18 / var(--vw-min) * 100vw);
        margin: calc(28 / var(--vw-min) * 100vw) auto 0;
    }
}
.intro__sets {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.intro__light {
    width: min(calc(440 / var(--vw-min) * 100vw),440px);
    height: min(calc(32 / var(--vw-min) * 100vw),32px);
    position: absolute;
    border-radius: 50%;
    background-color: #FFFFF4;
    filter: blur(min(calc(100 / var(--vw-min) * 100vw),100px));
    opacity: 0;
    transition: opacity .6s var(--easing-outquart);
}
.intro__set.--is-show .intro__light {
    opacity: 1;
}
.intro__set.--is-cast .intro__light {
    animation: introLight .72s linear;
}
@media screen and (max-width: 768px) {
    .intro__light {
        width: calc(195 / var(--vw-min) * 100vw);
        height: calc(18 / var(--vw-min) * 100vw);
        filter: blur(calc(45 / var(--vw-min) * 100vw));
    }
}
.intro__magic {
    width: min(calc(635 / var(--vw-min) * 100vw),635px);
    height: min(calc(523 / var(--vw-min) * 100vw),523px);
    position: absolute;
    background: url(../img/top/intro_magic.jpg)no-repeat center/contain;
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
}
.intro__set.--is-cast .intro__magic {
    animation: introMagic .72s linear;
}
@media screen and (max-width: 768px) {
    .intro__magic {
        width: calc(280 / var(--vw-min) * 100vw);
        height: calc(231 / var(--vw-min) * 100vw);
        background-image: url(../img/top/intro_magic.jpg);
    }
}
.intro__chara {
    position: absolute;
    z-index: 0;
    opacity: 0;
    transform: translateY(min(calc(28 / var(--vw-min) * 100vw),28px));
    transition: opacity .6s var(--easing-outquart), transform .6s var(--easing-outquart);
    -webkit-mask-image: linear-gradient(#000 80%, transparent);
    mask-image: linear-gradient(#000 80%, transparent);
    pointer-events: none;
}
.intro__set.--is-show .intro__chara {
    opacity: 1;
    transform: translateY(0);
}
@media screen and (max-width: 768px) {
    .intro__chara {
        transform: translateY(calc(12 / var(--vw-min) * 100vw));
    }
}
.intro__wand {
    width: min(calc(140 / var(--vw-min) * 100vw),140px);
    height: min(calc(140 / var(--vw-min) * 100vw),140px);
    position: absolute;
    background: radial-gradient(circle, #fff 0%, rgba(255, 244, 196, .9) 24%, rgba(255, 214, 120, 0) 68%);
    opacity: 0;
    transform: translate(-50%, 50%) scale(.5);
    pointer-events: none;
    mix-blend-mode: screen;
}
.intro__set.--is-cast .intro__wand {
    animation: introWand .72s ease-out;
}
@media screen and (max-width: 768px) {
    .intro__wand {
        width: calc(64 / var(--vw-min) * 100vw);
        height: calc(64 / var(--vw-min) * 100vw);
    }
}

.intro__set.--chara1 .intro__chara {
    width: min(calc(414 / var(--vw-min) * 100vw),414px);
    height: min(calc(464 / var(--vw-min) * 100vw),464px);
    bottom: min(calc(248 / var(--vw-min) * 100vw),248px);
    left: max(calc(-48 / var(--vw-min) * 100vw),-48px);
    background: url(../img/top/intro_chara1.png)no-repeat left bottom/contain;
}
@media screen and (max-width: 768px) {
    .intro__set.--chara1 .intro__chara {
        width: calc(182 / var(--vw-min) * 100vw);
        height: calc(205 / var(--vw-min) * 100vw);
        bottom: 0;
        left: calc(-16 / var(--vw-min) * 100vw);
        background-image: url(../img/top/intro_chara1.png);
    }
}
.intro__set.--chara1 .intro__light {
    bottom: min(calc(637 / var(--vw-min) * 100vw),637px);
    left: max(calc(-80 / var(--vw-min) * 100vw),-80px);
    transform: rotate(-37.26deg);
}
@media screen and (max-width: 768px) {
    .intro__set.--chara1 .intro__light {
        bottom: calc(173 / var(--vw-min) * 100vw);
        left: calc(-29 / var(--vw-min) * 100vw);
    }
}
.intro__set.--chara1 .intro__magic {
    bottom: min(calc(592 / var(--vw-min) * 100vw),592px);
    left: min(calc(135 / var(--vw-min) * 100vw),135px);
}
@media screen and (max-width: 768px) {
    .intro__set.--chara1 .intro__magic {
        bottom: calc(152 / var(--vw-min) * 100vw);
        left: calc(62 / var(--vw-min) * 100vw);
    }
}
.intro__set.--chara1 .intro__wand {
    bottom: min(calc(707 / var(--vw-min) * 100vw),707px);
    left: min(calc(209 / var(--vw-min) * 100vw),209px);
}
@media screen and (max-width: 768px) {
    .intro__set.--chara1 .intro__wand {
        bottom: calc(203 / var(--vw-min) * 100vw);
        left: calc(97 / var(--vw-min) * 100vw);
    }
}

.intro__set.--chara2 .intro__chara {
    width: min(calc(412 / var(--vw-min) * 100vw),412px);
    height: min(calc(426 / var(--vw-min) * 100vw),426px);
    bottom: min(calc(382 / var(--vw-min) * 100vw),382px);
    right: max(calc(-141 / var(--vw-min) * 100vw),-141px);
    background: url(../img/top/intro_chara2.png)no-repeat left bottom/contain;
}
@media screen and (max-width: 768px) {
    .intro__set.--chara2 .intro__chara {
        width: calc(181 / var(--vw-min) * 100vw);
        height: calc(187 / var(--vw-min) * 100vw);
        bottom: calc(59 / var(--vw-min) * 100vw);
        right: calc(-62 / var(--vw-min) * 100vw);
        background-image: url(../img/top/intro_chara2.png);
    }
}
.intro__set.--chara2 .intro__light {
    bottom: min(calc(645 / var(--vw-min) * 100vw),645px);
    right: max(calc(-67 / var(--vw-min) * 100vw),-67px);
    transform: rotate(52.44deg);
}
@media screen and (max-width: 768px) {
    .intro__set.--chara2 .intro__light {
        bottom: calc(175 / var(--vw-min) * 100vw);
        right: calc(-29 / var(--vw-min) * 100vw);
    }
}
.intro__set.--chara2 .intro__magic {
    bottom: min(calc(625 / var(--vw-min) * 100vw),625px);
    right: min(calc(124 / var(--vw-min) * 100vw),124px);
    transform: rotate(6.17deg) scaleX(-1);
}
@media screen and (max-width: 768px) {
    .intro__set.--chara2 .intro__magic {
        bottom: calc(166 / var(--vw-min) * 100vw);
        right: calc(55 / var(--vw-min) * 100vw);
    }
}
.intro__set.--chara2 .intro__wand {
    bottom: min(calc(718 / var(--vw-min) * 100vw),718px);
    right: min(calc(80 / var(--vw-min) * 100vw),80px);
}
@media screen and (max-width: 768px) {
    .intro__set.--chara2 .intro__wand {
        bottom: calc(207 / var(--vw-min) * 100vw);
        right: calc(33 / var(--vw-min) * 100vw);
    }
}

.intro__set.--chara3 .intro__chara {
    width: min(calc(288 / var(--vw-min) * 100vw),288px);
    height: min(calc(620 / var(--vw-min) * 100vw),620px);
    bottom: 0;
    right: min(calc(24 / var(--vw-min) * 100vw),24px);
    background: url(../img/top/intro_chara3.png)no-repeat left bottom/contain;
}
@media screen and (max-width: 768px) {
    .intro__set.--chara3 .intro__chara {
        width: calc(127 / var(--vw-min) * 100vw);
        height: calc(273 / var(--vw-min) * 100vw);
        right: calc(11 / var(--vw-min) * 100vw);
        background-image: url(../img/top/intro_chara3.png);
    }
}
.intro__set.--chara3 .intro__light {
    bottom: min(calc(392 / var(--vw-min) * 100vw),392px);
    right: max(calc(-44 / var(--vw-min) * 100vw),-44px);
    transform: rotate(50.67deg);
}
@media screen and (max-width: 768px) {
    .intro__set.--chara3 .intro__light {
        bottom: calc(172 / var(--vw-min) * 100vw);
        right: calc(-19 / var(--vw-min) * 100vw);
    }
}
.intro__set.--chara3 .intro__magic {
    bottom: min(calc(499 / var(--vw-min) * 100vw),499px);
    right: min(calc(197 / var(--vw-min) * 100vw),197px);
    transform: scaleX(-1);
}
@media screen and (max-width: 768px) {
    .intro__set.--chara3 .intro__magic {
        bottom: calc(220 / var(--vw-min) * 100vw);
        right: calc(87 / var(--vw-min) * 100vw);
    }
}
.intro__set.--chara3 .intro__wand {
    bottom: min(calc(616 / var(--vw-min) * 100vw),616px);
    right: min(calc(141 / var(--vw-min) * 100vw),141px);
}
@media screen and (max-width: 768px) {
    .intro__set.--chara3 .intro__wand {
        bottom: calc(271 / var(--vw-min) * 100vw);
        right: calc(60 / var(--vw-min) * 100vw);
    }
}
.introBg {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: -1;
    margin: auto;
}
@media screen and (max-width: 768px) {
    .introBg {
        width: calc(667 / var(--vw-min) * 100vw);
        height: calc(551 / var(--vw-min) * 100vw);
        top: auto;
        left: 50%;
        transform: translateX(-50%);
    }
}
.introBg::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(0,0,0,0.55);
}
.introBg::after {
    content: "";
    width: 100%;
    height: min(calc(320 / var(--vw-min) * 100vw),320px);
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
}
@media screen and (max-width: 768px) {
    .introBg::after {
        height: calc(156 / var(--vw-min) * 100vw);
    }
}
.introBg img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    object-fit: cover;
    object-position: center bottom;
    pointer-events: none;
}
.introBg__windows {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
}
@supports (width: 1cqw) {
    .introBg {
        container-type: size;
    }
    .introBg__windows {
        width: max(100cqw, calc(100cqh * 2732 / 2256));
        height: auto;
        aspect-ratio: 2732 / 2256;
        left: 50%;
        transform: translateX(-50%);
    }
}
.introBg__window {
    width: 2.15%;
    height: 4.1%;
    position: absolute;
    top: var(--y);
    left: var(--x);
    background-color: #fff4d2;
    opacity: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    mix-blend-mode: screen;
}
.introBg__window.--is-flash {
    filter: blur(min(calc(10 / var(--vw-min) * 100vw), 10px));
    animation: introWindowPika 1.15s ease-out;
}
@media screen and (max-width: 768px) {
    .introBg__window.--is-flash {
        filter: blur(calc(5 / var(--vw-min) * 100vw));
    }
}
.introBg__window.--w1 { --x: 23.11%; --y: 40.96%; }
.introBg__window.--w2 { --x: 27.78%; --y: 40.96%; }
.introBg__window.--w3 { --x: 71.85%; --y: 40.96%; }
.introBg__window.--w4 { --x: 76.56%; --y: 40.96%; }
.introBg__window.--w5 { --x: 23.11%; --y: 52.15%; }
.introBg__window.--w6 { --x: 27.78%; --y: 52.15%; }
.introBg__window.--w7 { --x: 71.85%; --y: 52.15%; }
.introBg__window.--w8 { --x: 76.56%; --y: 52.15%; }
.introBg__window.--w9 { --x: 23.11%; --y: 65%; }
.introBg__window.--w10 { --x: 27.78%; --y: 65%; }
.introBg__window.--w11 { --x: 71.85%; --y: 65%; }
.introBg__window.--w12 { --x: 76.56%; --y: 65%; }
@keyframes introLight {
    0%, 100% { opacity: 1; }
    16% { opacity: .35; }
    34% { opacity: 1; }
    52% { opacity: .45; }
    72% { opacity: 1; }
}
@keyframes introMagic {
    0%, 7% { opacity: 0; }
    8%, 20% { opacity: 1; }
    21%, 38% { opacity: 0; }
    39%, 52% { opacity: .9; }
    53%, 68% { opacity: 0; }
    69%, 82% { opacity: 1; }
    83%, 100% { opacity: 0; }
}
@keyframes introWand {
    0% {
        opacity: 0;
        transform: translate(-50%, 50%) scale(.35);
    }
    28% {
        opacity: 1;
        transform: translate(-50%, 50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, 50%) scale(1.4);
    }
}
@keyframes introWindowPika {
    0% { opacity: 0; }
    14% { opacity: 1; }
    42% { opacity: .85; }
    100% { opacity: 0; }
}

/*-----------------------------------------------
 * SCROLL ANIMATION（TOP）
 * 演出の部品は mashle.common.css の .scrani。ここはTOP固有の組み立て
-------------------------------------------------*/
.news__lists:has(.scrani) {
    border-top-color: transparent;
    transition: border-top-color 1.2s var(--easing-outquart);
}
.news__lists:has(.scrani.--is-ani) {
    border-top-color: var(--op50-gold9D8);
}
.news__item.scrani.--slide,
.news__item.scrani.--slide.--is-ani {
    transform: none;
}
.news__item.scrani.--slide:nth-child(2) {
    transition-delay: .14s;
}
.news__item.scrani.--slide:nth-child(3) {
    transition-delay: .28s;
}
@media (prefers-reduced-motion: reduce) {
    .news__lists:has(.scrani) {
        border-top-color: var(--op50-gold9D8);
        transition: none;
    }
}
.movie__yt-play.--is-ani .movie__yt-play-arrow {
    animation: moviePunchRing 1.2s var(--easing-outquart) .45s;
}
@keyframes moviePunchRing {
    0% { box-shadow: 0 0 0 0 rgba(203, 185, 138, .9); }
    100% { box-shadow: 0 0 0 min(calc(36 / var(--vw-min) * 100vw),36px) rgba(203, 185, 138, 0); }
}
.story__catchArea.scrani.--crack .story__crack,
.story__catchArea.scrani.--crack .story__catch {
    opacity: 0;
}
.story__catchArea.scrani.--crack .story__crack {
    clip-path: circle(0% at 50% 50%);
}
.story__catchArea.scrani.--crack::before {
    content: "";
    width: min(calc(900 / var(--vw-min) * 100vw),900px);
    height: min(calc(600 / var(--vw-min) * 100vw),600px);
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle closest-side, rgba(255, 250, 235, .9) 0%, rgba(255, 236, 190, .35) 32%, rgba(255, 236, 190, 0) 100%);
    pointer-events: none;
}
@media screen and (max-width: 768px) {
    .story__catchArea.scrani.--crack::before {
        width: calc(320 / var(--vw-min) * 100vw);
        height: calc(300 / var(--vw-min) * 100vw);
    }
}
.story__catchArea.scrani.--crack.--is-ani {
    animation: storyCatchShake .5s linear .2s both;
}
.story__catchArea.scrani.--crack.--is-ani .story__crack.--left {
    animation: storyCrackBreak .5s var(--easing-punch) both;
}
.story__catchArea.scrani.--crack.--is-ani .story__crack.--mashle {
    animation: storyCrackBreak .5s var(--easing-punch) .12s both;
}
.story__catchArea.scrani.--crack.--is-ani .story__catch {
    animation: storyCatchSlam .6s var(--easing-outquart) .34s both;
}
.story__catchArea.scrani.--crack.--is-ani::before {
    animation: storyCatchFlash .5s ease-out .1s both;
}
@keyframes storyCrackBreak {
    0% {
        opacity: 1;
        clip-path: circle(0% at 50% 50%);
        transform: scale(1.35);
    }
    40% {
        opacity: 1;
        clip-path: circle(100% at 50% 50%);
        transform: scale(.96);
    }
    100% {
        opacity: 1;
        clip-path: circle(100% at 50% 50%);
        transform: scale(1);
    }
}
@keyframes storyCatchSlam {
    0% {
        opacity: 0;
        transform: rotate(-5.2deg) scale(1.5);
    }
    35% {
        opacity: 1;
        transform: rotate(-5.2deg) scale(.94);
    }
    60% {
        opacity: 1;
        transform: rotate(-5.2deg) scale(1.03);
    }
    100% {
        opacity: 1;
        transform: rotate(-5.2deg) scale(1);
    }
}
@keyframes storyCatchShake {
    0%, 100% { top: 0; left: 0; }
    15% { top: calc(4 / var(--vw-min) * 100vw); left: calc(-10 / var(--vw-min) * 100vw); }
    30% { top: calc(-5 / var(--vw-min) * 100vw); left: calc(9 / var(--vw-min) * 100vw); }
    45% { top: calc(3 / var(--vw-min) * 100vw); left: calc(-7 / var(--vw-min) * 100vw); }
    60% { top: calc(-2 / var(--vw-min) * 100vw); left: calc(4 / var(--vw-min) * 100vw); }
    80% { top: 0; left: calc(-2 / var(--vw-min) * 100vw); }
}
@keyframes storyCatchFlash {
    0% { opacity: 0; }
    25% { opacity: 1; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .story__catchArea.scrani.--crack .story__crack,
    .story__catchArea.scrani.--crack .story__catch {
        opacity: 1;
        clip-path: none;
    }
    .story__catchArea.scrani.--crack::before {
        display: none;
    }
    .story__catchArea.scrani.--crack.--is-ani,
    .story__catchArea.scrani.--crack.--is-ani .story__crack,
    .story__catchArea.scrani.--crack.--is-ani .story__catch,
    .story__catchArea.scrani.--crack.--is-ani::before,
    .movie__yt-play.--is-ani .movie__yt-play-arrow {
        animation: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .intro__chara {
        transition: none;
        transform: none;
    }
    .intro__set.--is-show .intro__chara {
        opacity: 1;
    }
    .intro__wand,
    .intro__magic {
        animation: none;
        opacity: 0;
    }
    .intro__light {
        animation: none;
    }
    .introBg__window {
        animation: none;
        opacity: 0;
    }
}
/*-----------------------------------------------
 * TOP FOOTER
-------------------------------------------------*/
.topFooter {
    width: 100%;
    position: relative;
    z-index: -1;
    margin: calc(60 / var(--vw-min) * 100vw) auto 0;
}
@media screen and (max-width: 768px) {
    .topFooter {
        width: 100%;
        height: calc(360 / var(--vw-min) * 100vw);
        z-index: auto;
        margin: calc(24 / var(--vw-min) * 100vw) auto 0;
    }
}
.topFooter__3rdSeason {
    width: calc(1306 / var(--vw-min) * 100vw);
    height: calc(524 / var(--vw-min) * 100vw);
    -webkit-mask: url(../img/top/3rd_season.svg)no-repeat center/contain;
    mask: url(../img/top/3rd_season.svg)no-repeat center/contain;
    background-color: var(--color-gold9D8);
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    .topFooter__3rdSeason {
        width: calc(369 / var(--vw-min) * 100vw);
        height: calc(148 / var(--vw-min) * 100vw);
        position: absolute;
        top: calc(21 / var(--vw-min) * 100vw);
        left: calc(3 / var(--vw-min) * 100vw);
        margin: 0;
    }
}
.topFooter__chara {
    width: calc(1200 / var(--vw-min) * 100vw);
    height: calc(1000 / var(--vw-min) * 100vw);
    position: absolute;
    top: calc(75 / var(--vw-min) * 100vw);
    right: 0;
    left: 0;
    margin: auto;
    background: url(../img/top/topFooter_chara.png)no-repeat center/contain;
}
@supports (background: url(../img/top/topFooter_chara.webp)) {
    .topFooter__chara {
        background: url(../img/top/topFooter_chara.webp)no-repeat center/contain;
    }
}
@media screen and (max-width: 768px) {
    .topFooter__chara {
        width: 100%;
        height: calc(264 / var(--vw-min) * 100vw);
        top: calc(32 / var(--vw-min) * 100vw);
        background: url(../img/top/topFooter_chara-s.png)no-repeat center top/cover;
    }
}
.topFooter__key {
    width: calc(94 / var(--vw-min) * 100vw);
    height: calc(186 / var(--vw-min) * 100vw);
    position: absolute;
    top: calc(364 / var(--vw-min) * 100vw);
    right: calc(153 / var(--vw-min) * 100vw);
    background: url(../img/common/deco/key.png)no-repeat center/contain;
    transform: rotate(calc(-36deg + (var(--progress, .5) - .5) * 40deg));
    animation: decoKeyFloat 3.6s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
    .topFooter__key {
        width: calc(44 / var(--vw-min) * 100vw);
        height: calc(88 / var(--vw-min) * 100vw);
        top: calc(198 / var(--vw-min) * 100vw);
        right: calc(34 / var(--vw-min) * 100vw);
        z-index: 2;
    }
}
.topFooter__star {
    width: calc(141 / var(--vw-min) * 100vw);
    height: calc(136 / var(--vw-min) * 100vw);
    position: absolute;
    top: calc(-30 / var(--vw-min) * 100vw);
    left: calc(83 / var(--vw-min) * 100vw);
    background: url(../img/common/deco/star.png)no-repeat center/contain;
    translate: 0 calc((var(--progress, .5) - .5) * -120 / var(--vw-min) * 100vw);
    animation: decoStarTwinkle 4s ease-in-out infinite -2s;
}
@media screen and (max-width: 768px) {
    .topFooter__star {
        width: calc(67 / var(--vw-min) * 100vw);
        height: calc(64 / var(--vw-min) * 100vw);
        top: 0;
        left: calc(20 / var(--vw-min) * 100vw);
    }
}

/*-----------------------------------------------
 * scroll anim
 * --progress は mashle.top.js（.js-scrollAnim）から 0→1 で渡す
 * スクロール連動は translate / transform、常時アニメは rotate / scale で分けて干渉させない
-------------------------------------------------*/
@keyframes fvOnairShine {
    0% {
        background-position: -100% 0;
    }
    60%,
    100% {
        background-position: 200% 0;
    }
}
@keyframes decoStarTwinkle {
    0%,
    100% {
        rotate: 0deg;
        scale: 1;
    }
    50% {
        rotate: 18deg;
        scale: 1.12;
    }
}
@keyframes decoKeyFloat {
    0%,
    100% {
        rotate: -6deg;
        translate: 0 0;
    }
    50% {
        rotate: 6deg;
        translate: 0 calc(-12 / var(--vw-min) * 100vw);
    }
}
@media (prefers-reduced-motion: reduce) {
    .fv__onair,
    .fv__star,
    .story__star,
    .movie__key,
    .topFooter__key,
    .topFooter__star {
        animation: none;
    }
}

/*-----------------------------------------------
 * hover
 * 透過は使わない。移動・回転・拡大で殴る
-------------------------------------------------*/
@media (hover: hover) and (pointer: fine){
    .fv__visualBtn,
    .fv__visualBtnImg{
        transition: background-color .35s var(--easing-outquart), border-color .35s var(--easing-outquart), box-shadow .35s var(--easing-outquart), filter .35s var(--easing-outquart);
    }
    .fv__visualChange:hover .fv__visualBtn{
        border-color: #f8efd2;
        box-shadow: 0 0 calc(16 / var(--vw-min) * 100vw) calc(2 / var(--vw-min) * 100vw) #cbb98a;
    }
    .fv__visualChange:hover .fv__visualBtnImg{
        border-color: #f8efd2;
    }
    .bnrItem:hover{
        z-index: 2;
    }
    .bnrLink{
        box-shadow: 0 0 0 0 #cbb98a;
        transition: box-shadow .35s var(--easing-outquart), transform .35s var(--easing-outquart);
        transform: scale(1);
    }
    .bnrLink:hover{
        box-shadow: 0 0 min(calc(10 / var(--vw-min) * 100vw),10px) min(calc(2 / var(--vw-min) * 100vw),2px) #f8efd2;
        transform: scale(1.08);
    }
    .movie__yt-play-arrow,
    .movie__yt-play-arrow::before,
    .movie__yt-play-arrow::after{
        transition: background-color .35s var(--easing-outquart), box-shadow .35s var(--easing-outquart), transform .35s var(--easing-outquart);
    }
    .movie__yt-play-txt{
        transition: color .35s var(--easing-outquart), text-shadow .35s var(--easing-outquart);
    }
    .movieBtn:hover .movie__yt-play-txt{
        color: #f8efd2;
        text-shadow: 0 0 calc(12 / var(--vw-min) * 100vw) #cbb98a;
    }
    .movie__yt-play-arrow::after{
        transform: translateX(0);
    }
    .movieBtn:hover .movie__yt-play-arrow{
        box-shadow: 0 0 calc(24 / var(--vw-min) * 100vw) calc(4 / var(--vw-min) * 100vw) #cbb98a;
    }
    .movieBtn:hover .movie__yt-play-arrow::before,
    .movieBtn:hover .movie__yt-play-arrow::after{
        background-color: #f8efd2;
    }
    .movieBtn:hover .movie__yt-play-arrow::after{
        transform: translateX(calc(12 / var(--vw-min) * 100vw));
    }
}