@charset "UTF-8";

:root {
    --color-base-blue: #6098aa;
    --color-black: #000000;
    --color-text: rgba(0, 0, 0, 1);
    --color-link: rgba(0, 0, 0, 1);
    --color-white: rgba(255, 255, 255, 1);
    --color-text2: rgba(102, 102, 102, 1);
    --color-text-gold: rgba(246, 242, 144, 1);
    --bg-scene2: rgba(255, 236, 231, 1);
    --header-height: 55px;
    --header-small-height: 55px;
    --breadcrumb-height: 29px;
    --text-bdr-height: 48px;
    --fs-11-11: 11px;
    --fs-16-24: 16px;
    --fs-20-32: 20px;
    --fs-20-36: 20px;
    --fs-24-36: 20px;
    --fs-27-36: 27px;
    --fs-32-48: 32px;
    --fs-40-64: 40px;
    --fs-42-56: 42px;
    --fs-stamp: 38px
}

@media all and (min-width: 768px) {
    :root {
        --header-height: 152px;
        --header-small-height: 59px;
        --breadcrumb-height: 39px;
        --text-bdr-height: 74px;
        --fs-11-11: 11px;
        --fs-16-24: 24px;
        --fs-20-32: 32px;
        --fs-20-36: 36px;
        --fs-24-36: 36px;
        --fs-27-36: 36px;
        --fs-32-48: 48px;
        --fs-40-64: 64px;
        --fs-42-56: 56px;
        --fs-stemp: 56px
    }
}

*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert
}

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

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none
}

a,
button {
    cursor: revert
}

ol,
ul,
menu,
summary {
    list-style: none
}

img {
    max-inline-size: 100%;
    max-block-size: 100%
}

table {
    border-collapse: collapse
}

input,
textarea {
    -webkit-user-select: auto
}

textarea {
    white-space: revert
}

meter {
    -webkit-appearance: revert;
    appearance: revert
}

:where(pre) {
    all: revert;
    box-sizing: border-box
}

::placeholder {
    color: unset
}

:where([hidden]) {
    display: none
}

:where([contenteditable]:not([contenteditable=false])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto
}

:where([draggable=true]) {
    -webkit-user-drag: element
}

:where(dialog:modal) {
    all: revert;
    box-sizing: border-box
}

::-webkit-details-marker {
    display: none
}

:root {
    --vh: 100vh
}

body.loading {
    overflow: hidden
}

.lp_stt {
    overscroll-behavior-y: none;
    touch-action: manipulation;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
    text-align: left;
    opacity: 0 !important
}

.lp_stt.active {
    opacity: 1 !important;
    transition: opacity 1s ease
}

.lp_stt a {
    color: var(--color-text);
    text-decoration: none;
    text-decoration-thickness: 1px
}

.lp_stt li {
    list-style: none
}

.lp_stt h1,
.lp_stt h2,
.lp_stt h3,
.lp_stt h4,
.lp_stt h5,
.lp_stt h6 {
    font-weight: 400
}

.lp_stt .textbox {
    text-box: trim-both cap alphabetic
}

.lp_stt button {
    cursor: pointer
}

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

span.c-icon {
    position: relative;
    display: block
}

span.c-icon svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

main {
    color: var(--color-text2);
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Hiragino Sans, 游ゴシック, YuGothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    overflow-wrap: anywhere;
    word-break: initial
}

:lang(ja) #kv .text,
:lang(ja) #kv,
:lang(ja) main,
:lang(ja) #scene9 h3,
:lang(ja) .txt_stamp p,
:lang(en) #kv .text,
:lang(en) #kv,
:lang(en) main,
:lang(en) #scene9 h3,
:lang(en) .txt_stamp p,
:lang(kr) #kv .text,
:lang(kr) #kv,
:lang(kr) main,
:lang(kr) #scene9 h3,
:lang(kr) .txt_stamp p,
:lang(zh-cn) #kv .text,
:lang(zh-cn) #kv,
:lang(zh-cn) main,
:lang(zh-cn) #scene9 h3,
:lang(zh-cn) .txt_stamp p,
:lang(zh-tw) #kv .text,
:lang(zh-tw) #kv,
:lang(zh-tw) main,
:lang(zh-tw) #scene9 h3,
:lang(zh-tw) .txt_stamp p {
    font-family: Caveat, Roboto, 游ゴシック体, YuGothic, Yu Gothic, ヒラギノ角ゴ ProN, Hiragino Kaku Gothic ProN, メイリオ, Meiryo, sans-serif
}

:lang(en) #kv .text,
:lang(en) #kv,
:lang(en) main {
    font-family: Caveat, Roboto, 游ゴシック体, YuGothic, Yu Gothic, ヒラギノ角ゴ ProN, Hiragino Kaku Gothic ProN, メイリオ, Meiryo, sans-serif
}

:lang(en) #kv .text {
    font-size: var(--fs-32-48)
}

:lang(zh-cn) main {
    font-family: Noto Sans SC, Heiti SC, STHeiti, SimHei, Microsoft Yahei, arial, "sans-serif"
}

:lang(zh-tw) main {
    font-family: Noto Sans TC, Heiti TC, LiHei Pro, Microsoft JhengHei, arial, "sans-serif"
}

:lang(kr) main {
    font-family: Nanum Pen Script, cursive;
    font-weight: 400;
    font-style: normal
}

:lang(fr) main {
    font-family: Caveat, Roboto, 游ゴシック体, YuGothic, Yu Gothic, ヒラギノ角ゴ ProN, Hiragino Kaku Gothic ProN, メイリオ, Meiryo, sans-serif
}

:lang(de) main {
    font-family: Nanum Pen Script, Caveat, Roboto, 游ゴシック体, YuGothic, Yu Gothic, ヒラギノ角ゴ ProN, Hiragino Kaku Gothic ProN, メイリオ, Meiryo, sans-serif
}

#scene2 .c-txt_bdr p {
    background-image: url(/en/enjoy/standingthroughtime/assets/images/common/txt_bdr_pink.png)
}

#scene3 .c-txt_bdr p {
    background-image: url(/en/enjoy/standingthroughtime/assets/images/common/txt_bdr_green.png)
}

#scene4 .c-txt_bdr p {
    background-image: url(/en/enjoy/standingthroughtime/assets/images/common/txt_bdr_pink2.png)
}

.c-txt_bdr p {
    line-height: calc(var(--text-bdr-height) * .9);
    font-size: var(--fs-24-36);
    width: 100%;
    background-position: top left;
    background-size: auto var(--text-bdr-height);
    background-repeat: repeat;
    padding-top: var(--text-bdr-height)
}

.c-txt_bdr p span {
    color: var(--color-text2);
    font-size: var(--fs-40-64)
}

.c-txt_bdr.gold p {
    background-image: url(/en/enjoy/standingthroughtime/assets/images/common/txt_bdr_blue.png);
    color: var(--color-text-gold)
}

.c-txt_bdr.gold p span {
    color: var(--color-text-gold)
}

:is(:lang(kr)) .c-txt_bdr p {
    line-height: calc(var(--text-bdr-height) * .95)
}

:is(:lang(kr)) .c-txt_bdr p span {
    position: relative
}

:is(:lang(ja), :lang(zh-cn), :lang(zh-tw)) .c-txt_bdr p {
    line-height: calc(var(--text-bdr-height) * .92);
    font-size: var(--fs-16-24);
    background-size: auto var(--text-bdr-height);
    background-repeat: repeat;
    padding-top: var(--text-bdr-height)
}

:is(:lang(ja), :lang(zh-cn), :lang(zh-tw)) .c-txt_bdr p span {
    font-size: var(--fs-32-48)
}

:is(:lang(ja), :lang(zh-cn), :lang(zh-tw)) #scene5 .c-ttl h3,
:is(:lang(ja), :lang(zh-cn), :lang(zh-tw)) #scene4 .c-ttl h3 {
    font-size: var(--fs-16-24)
}

:is(:lang(ja), :lang(zh-cn), :lang(zh-tw)) #scene5 .c-ttl h3 span.fs-b,
:is(:lang(ja), :lang(zh-cn), :lang(zh-tw)) #scene4 .c-ttl h3 span.fs-b {
    font-size: var(--fs-32-48)
}

:is(:lang(ja), :lang(zh-cn), :lang(zh-tw)) #scene7 .c-txt_bdr p {
    font-size: var(--fs-16-24)
}

:is(:lang(ja), :lang(zh-cn), :lang(zh-tw)) #scene7 .c-txt_bdr p span {
    font-size: var(--fs-32-48)
}

#kv .c-button_watch button span.text {
    font-size: var(--fs-32-48);
    color: var(--color-white)
}

#kv .c-button_watch button span.c-icon svg {
    fill: var(--color-white)
}

#kv .c-button_watch button .inr2 span.text {
    color: #666
}

#kv .c-button_watch button .inr2 span.c-icon svg {
    fill: #666
}

:is(#scene5, #scene6) .c-ttl h3 {
    font-size: var(--fs-24-36);
    color: var(--color-white)
}

:is(#scene5, #scene6) .c-ttl h3 span {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25))
}

:is(#scene5, #scene6) .c-ttl h3 span.fs-b {
    font-size: var(--fs-40-64)
}

#scene7 .c-txt_bdr p {
    font-size: var(--fs-24-36);
    line-height: calc(var(--text-bdr-height) * .92);
    width: 100%;
    background-position: top left;
    background-size: auto var(--text-bdr-height);
    background-repeat: repeat;
    padding-top: var(--text-bdr-height);
    color: #f6f290
}

#scene7 .c-txt_bdr p span {
    font-size: var(--fs-40-64)
}

#scene9 .c-ttl h3 {
    color: var(--color-text2);
    font-size: var(--fs-27-36);
    line-height: 40.5px
}

#scene9 .c-ttl svg {
    fill: var(--color-text2)
}

#scene9 .b-stamp .txt_stamp p {
    color: var(--color-text2);
    font-size: var(--fs-stamp);
    line-height: 1.1
}

@media all and (min-width: 768px) {
    :is(:lang(kr)) .c-txt_bdr p span {
        position: relative;
        top: min(.53vw, 8px)
    }

    #scene2 .c-txt_bdr p {
        background-image: url(/en/enjoy/standingthroughtime/assets/images/common/txt_bdr_pink_pc.png)
    }

    #scene3 .c-txt_bdr p {
        background-image: url(/en/enjoy/standingthroughtime/assets/images/common/txt_bdr_green_pc.png)
    }

    #scene4 .c-txt_bdr p {
        background-image: url(/en/enjoy/standingthroughtime/assets/images/common/txt_bdr_pink2_pc.png)
    }

    .c-txt_bdr p {
        line-height: calc(var(--text-bdr-height) * .97);
        padding-bottom: 24px
    }

    .c-txt_bdr.gold p {
        background-image: url(/en/enjoy/standingthroughtime/assets/images/common/txt_bdr_blue_pc.png)
    }

    #scene7 .c-txt_bdr p {
        line-height: calc(var(--text-bdr-height) * .98)
    }

    #scene9 .c-ttl h3 {
        font-size: min(2.38vw, 36px);
        line-height: 1.5
    }

    #scene9 .b-stamp .txt_stamp p {
        font-size: min(3.7vw, 56px)
    }
}

button {
    display: block;
    cursor: pointer
}

.l-full_abs {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.l-full_fixed {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0
}

.l-fullsize {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0
}

.lp_stt {
    max-width: 100vw
}

section {
    width: 100%;
    min-height: 100vh;
    position: relative
}

section.sticky_section {
    min-height: 1000vh
}

section.sticky_section .c-images {
    width: 100%;
    height: 100%;
    position: absolute
}

section.sticky_section [data-images] {
    position: sticky;
    top: 0
}

#kv {
    background: #ddd;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%
}

#kv .c-inner {
    width: 100%;
    height: 100dvh
}

#kv .content {
    position: relative
}

#kv .bg_kv {
    width: 100%;
    height: calc(100% - var(--header-small-height));
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden
}

#kv .bg_kv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top
}

#kv .bg_kv video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 100%;
    min-height: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: bottom center
}

#kv h1 {
    width: 86.66%;
    left: 6.67%;
    position: absolute;
    font-size: var(--fs-32-48);
    top: min(28vw, 105px);
    line-height: 1.125;
    color: var(--color-black)
}

#kv h1 span {
    display: block
}

#kv .c-button_watch {
    position: absolute;
    bottom: min(28.8vw, 108px);
    width: 100%;
    display: flex;
    justify-content: center
}

#kv .c-button_watch button {
    display: block;
    position: relative
}

#kv .c-button_watch button .inr {
    display: flex;
    align-items: center;
    column-gap: 30px;
    top: 0
}

#kv .c-button_watch button .inr2 {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    column-gap: 30px;
    display: none
}

#kv .c-button_watch button span.c-icon {
    width: 28px;
    height: 32px
}

.c-movie {
    position: relative
}

.c-movie.v {
    aspect-ratio: 380/676
}

.c-movie video,
.c-movie iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

:is(#scene2) p {
    color: var(--color-text2)
}

main {
    width: 100%;
    margin-top: calc(100vh - var(--header-small-height))
}

#scene2 {
    width: 100%;
    height: 1000vh
}

#scene2 .c-inner {
    width: 100%;
    position: sticky;
    top: 0;
    height: 100dvh;
    padding-top: var(--header-small-height)
}

#scene2 .bg_scene2 {
    background-color: var(--bg-scene2);
    height: 100vh;
    mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 100%)
}

#scene2 .l-col2 {
    width: 100%;
    height: 100%;
    position: relative
}

#scene2 .l-col2_l {
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 2
}

#scene2 .l-col2_l:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: #ffece7cc;
    top: 0;
    left: 0
}

#scene2 .l-col2_l .c-illust {
    width: 158px;
    position: absolute;
    right: 0;
    bottom: 0
}

#scene2 .l-col2_l .c-txt_bdr {
    width: 89.33%;
    margin-inline: auto;
    padding-bottom: 63px
}

#scene2 .l-col2_l .c-txt_bdr p {
    padding-bottom: 5px
}

#scene2 .l-col2_r {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0
}

:is(#scene3, #scene4) .l-col2_l {
    width: 100%;
    height: calc(100dvh - 253px - var(--text-bdr-height));
    box-sizing: content-box;
    padding-top: var(--header-small-height);
    position: relative;
    display: flex;
    align-items: center
}

:is(#scene3, #scene4) .l-col2_l [data-slide] {
    height: 80%;
    aspect-ratio: 225/400;
    position: relative;
    margin-inline: auto
}

:is(#scene3, #scene4) .l-col2_l [data-video-player] {
    width: 100%
}

:is(#scene3, #scene4) .l-col2_l [data-video-player] video {
    width: 100%;
    aspect-ratio: 225/400;
    vertical-align: bottom
}

#scene3 {
    width: 100%;
    height: 800vh;
    top: 0;
    margin-top: -800vh
}

#scene3 .c-inner {
    width: 100%;
    height: 100dvh;
    position: sticky;
    top: 0
}

#scene3 .bg_scene3 {
    width: 100%;
    height: 100vh;
    background: url(/en/enjoy/standingthroughtime/assets/images/scene3/bg.webp) top center;
    background-size: cover;
    mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 100%)
}

#scene3 .l-col2 {
    width: 100%;
    height: 100%;
    position: relative
}

#scene3 .l-col2_r {
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 2
}

#scene3 .l-col2_r .c-illust {
    width: 134px;
    position: absolute;
    right: 0;
    bottom: 0
}

#scene3 .l-col2_r .c-txt_bdr {
    width: 89.33%;
    margin-inline: auto;
    padding-bottom: 63px
}

#scene3 .l-col2_r .c-txt_bdr p {
    padding-bottom: 5px
}

#scene4 {
    width: 100%;
    height: 600vh;
    margin-top: -600vh
}

#scene4 .c-inner {
    width: 100%;
    height: 100dvh;
    position: sticky;
    top: 0
}

#scene4 .bg_scene4 {
    width: 100%;
    height: 100vh;
    background: url(/en/enjoy/standingthroughtime/assets/images/scene4/bg.webp) top center;
    background-size: cover;
    mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 100%)
}

#scene4 .l-col2 {
    width: 100%;
    height: 100%;
    position: relative
}

#scene4 .l-col2_r {
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 2
}

#scene4 .l-col2_r .c-illust {
    width: 72px;
    position: absolute;
    right: 0;
    bottom: 0
}

#scene4 .l-col2_r .c-txt_bdr {
    width: 89.33%;
    margin-inline: auto;
    padding-bottom: 63px
}

#scene4 .l-col2_r .c-txt_bdr p {
    padding-bottom: 5px
}

:is(#scene5, #scene6) {
    width: 100%
}

:is(#scene5, #scene6) .content {
    height: 100vh;
    position: relative;
    top: 0
}

:is(#scene5, #scene6) .c-ttl {
    position: absolute;
    width: 84%;
    height: calc(50% - var(--header-small-height));
    padding-top: var(--header-small-height);
    left: 8%;
    top: var(--header-small-height);
    display: flex;
    justify-content: center;
    align-items: center
}

:is(#scene5, #scene6) .l-col2_l,
:is(#scene5, #scene6) .l-col2_r {
    width: 100%;
    height: 50%;
    position: absolute
}

:is(#scene5, #scene6) .l-col2_l {
    top: 0
}

:is(#scene5, #scene6) .l-col2_l img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top
}

:is(#scene5, #scene6) .l-col2_r {
    bottom: 0;
    overflow: hidden
}

:is(#scene5, #scene6) .l-col2_r video {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    aspect-ratio: 1/1;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0)
}

:is(#scene5, #scene6) .cover {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000000d9
}

#scene5 {
    height: 400vh;
    margin-top: -400vh
}

#scene5 .c-inner {
    width: 100%;
    height: 100vh;
    position: sticky;
    top: 0
}

#scene5 .l-col2_l {
    top: 0
}

#scene6 {
    height: 200vh;
    margin-top: -200vh
}

#scene6 .c-inner {
    width: 100%;
    height: 100vh;
    position: sticky;
    top: 0
}

#scene6 .c-ttl {
    margin-top: -2.5em
}

#scene7 {
    width: 100%;
    height: auto;
    background: #010057
}

#scene7 .scene7-1 {
    width: 100%;
    padding-top: var(--header-small-height)
}

#scene7 .scene7-1 ul {
    width: 78.66%;
    margin-inline: auto;
    padding-top: 200px
}

#scene7 .scene7-1 ul li {
    margin-bottom: 40px;
    display: flex
}

#scene7 .scene7-1 ul li.r {
    justify-content: flex-end
}

#scene7 .scene7-1 ul li figure {
    width: 76.27%
}

#scene7 .scene7-2 {
    width: 100%;
    height: 200vh;
    position: relative;
    top: 0
}

#scene7 .scene7-2 .scene_inner {
    width: 100%;
    height: calc(100dvh - var(--header-small-height));
    position: sticky;
    top: 0
}

#scene7 .scene7-2 .l-col2_r {
    width: 100%;
    height: calc(100vh - var(--header-small-height));
    position: absolute;
    top: var(--header-small-height);
    left: 0
}

#scene7 .scene7-2 .l-col2_r video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

#scene7 .scene7-2 .l-col2 {
    width: 100%;
    height: 100dvh;
    padding-top: var(--header-small-height);
    position: relative
}

#scene7 .scene7-2 .l-col2_l {
    width: 100%;
    position: absolute;
    bottom: 0;
    background: #01005780;
    z-index: 2
}

#scene7 .scene7-2 .l-col2_l .c-illust {
    width: 210px;
    height: 135px;
    position: absolute;
    right: 10px;
    top: -135px
}

#scene7 .scene7-2 .l-col2_l .c-illust span {
    position: absolute
}

#scene7 .scene7-2 .l-col2_l .c-illust span.s0 {
    width: 19px;
    height: 21px
}

#scene7 .scene7-2 .l-col2_l .c-illust span.s1 {
    width: 14px;
    height: 21px
}

#scene7 .scene7-2 .l-col2_l .c-illust span.s2 {
    width: 18px;
    height: 17px
}

#scene7 .scene7-2 .l-col2_l .c-illust span svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    fill: var(--color-text-gold)
}

#scene7 .scene7-2 .l-col2_l .c-illust span.star0 {
    top: 14px;
    right: 0
}

#scene7 .scene7-2 .l-col2_l .c-illust span.star1 {
    top: 0;
    right: 41px
}

#scene7 .scene7-2 .l-col2_l .c-illust span.star2 {
    top: 43px;
    right: 30px
}

#scene7 .scene7-2 .l-col2_l .c-illust span.star3 {
    top: 45px;
    right: 97px
}

#scene7 .scene7-2 .l-col2_l .c-illust span.star4 {
    top: 61px;
    right: 65px
}

#scene7 .scene7-2 .l-col2_l .c-illust span.star5 {
    top: 81px;
    right: 46px
}

#scene7 .scene7-2 .l-col2_l .c-illust span.star6 {
    top: 97px;
    right: 104px
}

#scene7 .scene7-2 .l-col2_l .c-illust span.star7 {
    bottom: 0;
    left: 0
}

#scene7 .scene7-2 .l-col2_l .c-txt_bdr {
    width: 89.33%;
    margin-inline: auto;
    padding-bottom: 63px
}

#scene7 .scene7-2 .l-col2_l .c-txt_bdr p {
    padding-bottom: 10px
}

#scene8 {
    height: 150vh
}

#scene8 .c-inner {
    width: 100%;
    height: 100vh;
    position: sticky;
    top: 0
}

#scene8 .l-full_abs img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

#scene8 .content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

#scene8 .content .c-ttl {
    width: 53.33%;
    position: absolute;
    left: 10.66%;
    bottom: 45.07vw
}

#scene9 {
    background: url(/en/enjoy/standingthroughtime/assets/images/scene9/texture_blue.webp) top left;
    background-size: 200px 195px
}

#scene9 .c-ttl {
    display: flex;
    align-items: flex-start;
    column-gap: 20px;
    padding: 40px 0 0 30px;
    margin-bottom: 76px
}

#scene9 .c-ttl span.c-icon {
    width: 45px;
    aspect-ratio: 1/1
}

#scene9 .content {
    padding-bottom: 40px
}

#scene9 .c-list_days {
    width: 100%;
    margin-inline: auto
}

#scene9 .c-list_days ul {
    width: 100%;
    position: relative;
    height: 198.13vw
}

#scene9 .c-list_days ul li {
    position: absolute
}

#scene9 .c-list_days ul li:nth-child(1) {
    width: 42.13vw;
    top: 0;
    left: 10.4vw;
    z-index: 1
}

#scene9 .c-list_days ul li:nth-child(2) {
    width: 44vw;
    top: 5.07vw;
    left: 45.07vw;
    z-index: 1
}

#scene9 .c-list_days ul li:nth-child(3) {
    width: 48.53vw;
    top: 44vw;
    left: 45.07vw;
    z-index: 3
}

#scene9 .c-list_days ul li:nth-child(4) {
    width: 44.8vw;
    top: 88.53vw;
    left: 10.4vw;
    z-index: 2
}

#scene9 .c-list_days ul li:nth-child(5) {
    width: 40.8vw;
    top: 42.93vw;
    left: 9.6vw;
    z-index: 1
}

#scene9 .c-list_days ul li:nth-child(6) {
    width: 51.73vw;
    top: 121.33vw;
    left: 21.07vw;
    z-index: 2
}

#scene9 .c-list_days ul li:nth-child(7) {
    width: 44vw;
    top: 85.07vw;
    left: 51.73vw;
    z-index: 3
}

#scene9 .c-list_days ul li:nth-child(8) {
    width: 35.73vw;
    top: 152.8vw;
    left: 6.93vw;
    z-index: 2
}

#scene9 .c-list_days ul li:nth-child(9) {
    width: 55.73vw;
    top: 144.8vw;
    left: 37.87vw;
    z-index: 3
}

#scene9 .b-stamp {
    width: 93.33%;
    margin-inline: auto;
    margin-top: 0;
    overflow: hidden;
    padding-top: 24vw;
    position: relative;
    padding-bottom: 40px
}

#scene9 .b-stamp figure.c-stamp {
    width: 37.14%;
    margin-left: 6%
}

#scene9 .b-stamp figure.c-stamp img {
    rotate: -6deg
}

#scene9 .b-stamp .txt_stamp p {
    rotate: -6deg
}

#scene9 .b-stamp .hearts {
    position: absolute;
    right: 0;
    bottom: 20px;
    width: 24vw;
    height: 32vw
}

#scene9 .b-stamp .hearts span {
    display: block;
    position: absolute
}

#scene9 .b-stamp .hearts span.h0 {
    width: 12.53vw;
    top: 0;
    left: 0
}

#scene9 .b-stamp .hearts span.h1 {
    width: 12.53vw;
    top: 10.67vw;
    right: 0
}

#scene9 .b-stamp .hearts span.h2 {
    width: 9.87vw;
    bottom: 0;
    left: 1.33vw
}

#b-bnrs {
    position: relative;
    width: 100%;
    background: var(--color-white)
}

#b-bnrs .c-list_links ul li {
    width: 100%
}

#b-bnrs .c-list_links ul li a {
    width: 100%;
    aspect-ratio: 375/197;
    display: block
}

#b-bnrs .b-copy {
    background: #333;
    padding: 36px 0
}

#b-bnrs .b-copy .copy_inner {
    text-align: center;
    width: 93.33%;
    margin-inline: auto
}

#b-bnrs .b-copy p {
    color: var(--color-white);
    font-size: var(--fs-11-11);
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Hiragino Sans, 游ゴシック, YuGothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, sans-serif;
    margin-bottom: 1.5em
}

#b-bnrs .b-copy p:nth-last-of-type(1) {
    margin-bottom: 0
}

.scenes {
    width: 100%;
    background: red
}

@media all and (min-width: 768px) {
    .l-col2 {
        display: flex
    }

    .l-col2 .l-50 {
        width: 50%;
        position: relative
    }

    .l-col2 .l-full_abs img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    #kv .bg_kv {
        background: url(/en/enjoy/standingthroughtime/assets/images/kv/bg_kv_pc.webp) top center no-repeat;
        background-size: cover
    }

    #kv .bg_kv iframe {
        position: absolute;
        width: 100%;
        min-width: 177.78vh;
        min-height: 100%;
        height: auto;
        object-fit: cover;
        aspect-ratio: 16/9
    }

    #kv h1 {
        top: min(19.31vw, 292px);
        left: min(5.82vw, 88px)
    }

    #kv .c-button_watch {
        right: min(2.98vw, 45px);
        bottom: min(2.78vw, 42px);
        display: block;
        left: auto;
        width: fit-content
    }

    #kv .c-button_watch button .inr {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        transition: clip-path .1s ease
    }

    #kv .c-button_watch button .inr2 {
        display: flex;
        clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
        transition: clip-path .1s ease
    }

    #kv .c-button_watch button span.c-icon {
        width: 52px;
        height: 60px
    }

    #kv .c-button_watch button:hover .inr {
        transition: clip-path .3s ease;
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%)
    }

    #kv .c-button_watch button:hover .inr2 {
        transition: clip-path .3s ease;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
    }

    #scene2 .l-col2_l {
        width: 50%;
        position: relative;
        bottom: auto;
        padding-top: calc(108px - var(--header-small-height));
        background: none
    }

    #scene2 .l-col2_l .c-illust {
        width: 80.95%;
        margin-inline: auto;
        margin-top: -54px;
        position: relative;
        display: flex;
        justify-content: flex-end
    }

    #scene2 .l-col2_l .c-txt_bdr {
        position: relative;
        bottom: auto;
        width: 64.21%;
        margin-inline: auto
    }

    #scene2 .l-col2_l .c-txt_bdr p {
        padding-bottom: 0
    }

    #scene2 .l-col2_r {
        width: 50%;
        height: 100vh;
        position: relative;
        left: auto;
        top: auto
    }

    :is(#scene3, #scene4) .l-col2 {
        display: flex
    }

    :is(#scene3, #scene4) .l-col2_l {
        width: 50%;
        height: calc(100% - var(--header-small-height));
        display: flex;
        align-items: center
    }

    :is(#scene3, #scene4) .l-col2_l .c-video {
        width: 59.36%;
        aspect-ratio: 450/800
    }

    :is(#scene3, #scene4) .l-col2_r {
        width: 50%;
        position: relative;
        bottom: auto;
        padding-top: calc(181px - var(--header-small-height))
    }

    :is(#scene3, #scene4) .l-col2_r .c-txt_bdr {
        position: relative;
        bottom: auto;
        width: 64.21%;
        margin-inline: auto;
        padding-bottom: 0
    }

    :is(#scene3, #scene4) .l-col2_r .c-txt_bdr p {
        padding-bottom: 0
    }

    #scene3 .l-col2_r .c-illust {
        width: 74%;
        margin: 0 auto auto;
        position: relative;
        bottom: auto;
        right: auto;
        display: flex;
        justify-content: flex-end
    }

    #scene3 .l-col2_r .c-illust figure {
        width: 269px
    }

    #scene4 .l-col2_r .c-illust {
        width: 70%;
        margin: -65px auto auto;
        position: relative;
        bottom: auto;
        right: auto;
        display: flex;
        justify-content: flex-end
    }

    #scene4 .l-col2_r .c-illust figure {
        width: 144px
    }

    :is(#scene5, #scene6) .l-col2_l {
        width: 50%;
        height: 100%;
        left: 0
    }

    :is(#scene5, #scene6) .l-col2_r {
        width: 50%;
        height: 100%;
        right: 0;
        top: 0;
        bottom: auto
    }

    :is(#scene5, #scene6) .l-col2_r video {
        width: auto
    }

    :is(#scene5, #scene6) .c-ttl {
        width: 50%;
        left: 0;
        height: 100%;
        top: 0
    }

    #scene5 .c-ttl h3 {
        width: 62.16%;
        margin-inline: auto
    }

    #scene5 .l-col2_l {
        top: 0
    }

    #scene5 .l-col2_l img {
        object-position: center top
    }

    #scene6 .c-ttl h3 {
        width: 83.86%;
        margin-inline: auto
    }

    #scene7 {
        height: 400vh
    }

    #scene7 .scene7-1 {
        width: 100%;
        height: 400vh;
        padding-top: var(--header-small-height)
    }

    #scene7 .scene7-1 .scene7-1_inner {
        height: 100vh;
        width: 100%;
        position: sticky;
        top: 0;
        display: flex;
        align-items: center
    }

    #scene7 .scene7-1 ul {
        width: 79.36%;
        display: flex;
        column-gap: 3.33%;
        margin-top: var(--header-small-height);
        padding-top: 0
    }

    #scene7 .scene7-1 ul li {
        width: 22.5%;
        margin-bottom: 40px;
        display: block;
        margin-top: min(2.65vw, 40px)
    }

    #scene7 .scene7-1 ul li.r {
        justify-content: revert;
        margin-top: max(-2.65vw, -40px)
    }

    #scene7 .scene7-1 ul li figure {
        width: 100%
    }

    #scene7 .scene7-2 {
        width: 100%;
        height: 200vh;
        position: relative;
        top: -200vh
    }

    #scene7 .scene7-2 .scene_inner {
        width: 100%;
        height: calc(100svh - var(--header-small-height));
        position: sticky;
        top: 0
    }

    #scene7 .scene7-2 .l-col2 {
        width: 100%;
        height: 100vh;
        display: flex;
        padding-top: var(--header-small-height);
        position: relative
    }

    #scene7 .scene7-2 .l-col2_l {
        width: 50%;
        position: relative;
        bottom: auto;
        background: none;
        padding-top: calc(108px - var(--header-small-height))
    }

    #scene7 .scene7-2 .l-col2_l .c-txt_bdr {
        width: 64.21%;
        margin-inline: auto;
        padding-bottom: 63px
    }

    #scene7 .scene7-2 .l-col2_l .c-txt_bdr p {
        padding-bottom: 12px
    }

    #scene7 .scene7-2 .l-col2_l .c-illust {
        width: 420px;
        height: 270px;
        position: relative;
        margin-inline: auto;
        right: auto;
        left: 5%;
        top: -40px
    }

    #scene7 .scene7-2 .l-col2_l .c-illust span {
        position: absolute
    }

    #scene7 .scene7-2 .l-col2_l .c-illust span.s0 {
        width: 34px;
        height: 39px
    }

    #scene7 .scene7-2 .l-col2_l .c-illust span.s1 {
        width: 27px;
        height: 42px
    }

    #scene7 .scene7-2 .l-col2_l .c-illust span.s2 {
        width: 37px;
        height: 42px
    }

    #scene7 .scene7-2 .l-col2_l .c-illust span svg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        fill: var(--color-text-gold)
    }

    #scene7 .scene7-2 .l-col2_l .c-illust span.star0 {
        top: 28px;
        right: 14px
    }

    #scene7 .scene7-2 .l-col2_l .c-illust span.star1 {
        top: 0;
        right: 80px
    }

    #scene7 .scene7-2 .l-col2_l .c-illust span.star2 {
        top: 86px;
        right: 60px
    }

    #scene7 .scene7-2 .l-col2_l .c-illust span.star3 {
        top: 90px;
        right: 194px
    }

    #scene7 .scene7-2 .l-col2_l .c-illust span.star4 {
        top: 122px;
        right: 130px
    }

    #scene7 .scene7-2 .l-col2_l .c-illust span.star5 {
        top: 162px;
        right: 92px
    }

    #scene7 .scene7-2 .l-col2_l .c-illust span.star6 {
        top: 194px;
        right: 208px
    }

    #scene7 .scene7-2 .l-col2_l .c-illust span.star7 {
        bottom: 0;
        left: 0
    }

    #scene7 .scene7-2 .l-col2_r {
        width: 50%;
        left: auto;
        right: 0
    }

    #scene8 .content .c-ttl {
        width: min(31.48vw, 476px);
        position: absolute;
        left: 7.94vw;
        bottom: auto;
        top: 50%;
        margin-top: max(-8.6vw, -130px)
    }

    #scene9 {
        min-height: auto
    }

    #scene9 .c-inner {
        min-height: 76.06vw
    }

    #scene9 .c-ttl {
        width: 40%;
        position: absolute;
        top: 0;
        left: 0;
        column-gap: 27px;
        padding: min(6.75vw, 102px) 0 0 40px;
        margin-bottom: 0
    }

    #scene9 .c-ttl span.c-icon {
        width: min(3.97vw, 60px)
    }

    #scene9 .content {
        position: relative;
        width: 100%;
        padding-bottom: 9.26vw
    }

    #scene9 .c-list_days {
        width: 100%
    }

    #scene9 .c-list_days ul {
        width: 79.03vw;
        position: relative;
        height: 60.58vw;
        top: 3.04vw;
        left: 17.39vw
    }

    #scene9 .c-list_days ul li {
        position: absolute
    }

    #scene9 .c-list_days ul li:nth-child(1) {
        width: 20.9vw;
        top: 14.09vw;
        left: 0vw;
        z-index: 1
    }

    #scene9 .c-list_days ul li:nth-child(2) {
        width: 21.76vw;
        top: 8.47vw;
        left: 16.07vw;
        z-index: 1
    }

    #scene9 .c-list_days ul li:nth-child(3) {
        width: 24.07vw;
        top: 18.32vw;
        left: 37.9vw;
        z-index: 2
    }

    #scene9 .c-list_days ul li:nth-child(4) {
        width: 22.16vw;
        top: 21.83vw;
        left: 57.47vw;
        z-index: 3
    }

    #scene9 .c-list_days ul li:nth-child(5) {
        width: 20.24vw;
        top: 3.84vw;
        left: 31.88vw;
        z-index: 1
    }

    #scene9 .c-list_days ul li:nth-child(6) {
        width: 25.66vw;
        top: 29.63vw;
        left: 6.88vw;
        z-index: 1
    }

    #scene9 .c-list_days ul li:nth-child(7) {
        width: 21.76vw;
        top: 0vw;
        left: 53.84vw;
        z-index: 2
    }

    #scene9 .c-list_days ul li:nth-child(8) {
        width: 17.72vw;
        top: 27.58vw;
        left: 26.52vw;
        z-index: 2
    }

    #scene9 .c-list_days ul li:nth-child(9) {
        width: 27.65vw;
        top: 35.58vw;
        left: 37.3vw;
        z-index: 3
    }

    #scene9 .b-stamp {
        width: min(30.42vw, 460px);
        margin-inline: 0;
        position: absolute;
        margin-top: 0;
        bottom: 0vw;
        left: 2.65vw;
        padding-top: 3.97vw;
        padding-bottom: 0
    }

    #scene9 .b-stamp figure.c-stamp {
        width: min(13.23vw, 200px);
        margin-left: 13%
    }

    #scene9 .b-stamp figure.c-stamp img {
        rotate: -7deg
    }

    #scene9 .b-stamp .txt_stamp p {
        rotate: -6deg;
        letter-spacing: -.01em
    }

    #scene9 .b-stamp .hearts {
        position: absolute;
        right: -1.32vw;
        bottom: 1.98vw;
        width: 6.61vw;
        height: 9.92vw
    }

    #scene9 .b-stamp .hearts span {
        display: block;
        position: absolute
    }

    #scene9 .b-stamp .hearts span.h0 {
        width: 4.76vw;
        top: 0;
        left: -1.32vw
    }

    #scene9 .b-stamp .hearts span.h1 {
        width: 4.1vw;
        top: 2.65vw;
        right: 0
    }

    #scene9 .b-stamp .hearts span.h2 {
        width: 3.44vw;
        bottom: 0;
        left: .33vw
    }

    #b-bnrs {
        position: relative;
        width: 100%;
        background: var(--color-white)
    }

    #b-bnrs .c-list_links ul {
        display: flex
    }

    #b-bnrs .c-list_links ul li {
        width: 33.3333333333% a;
        width-width: 100%;
        width-aspect-ratio: 502/264;
        width-display: flex;
        width-align-items: center;
        width-justify-content: center
    }
}

[data-images] {
    height: 100svh;
    background: #000
}

[data-images] canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

@media all and (min-width: 864px) {
    [data-images] {
        height: 100vh
    }
}

.b-modal {
    background: #030303b3;
    z-index: 10000;
    pointer-events: none;
    opacity: 0 !important;
    transition: opacity .2s ease
}

.b-modal .modal_inner {
    display: flex;
    align-items: center;
    justify-content: center
}

.b-modal .modal_content {
    position: relative;
    aspect-ratio: 380/676;
    height: 60vh
}

.b-modal button[data-close-modal] {
    position: absolute;
    aspect-ratio: 1/1;
    width: 27px;
    top: -27px;
    right: -27px
}

.b-modal button[data-close-modal] span.c-icon {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.b-modal button[data-close-modal] svg {
    fill: var(--color-white)
}

.show_modal {
    overflow: hidden
}

.show_modal :is(.wrapper, header.header, #kv) {
    width: calc(100% - var(--scrollbar))
}

.show_modal header.header {
    transition: all 0s ease 0s
}

.show_modal .b-modal {
    opacity: 1 !important;
    pointer-events: auto;
    transition: opacity .6s ease
}

@media all and (min-width: 768px) {
    .b-modal .modal_content {
        width: 380px;
        margin-top: -54px
    }

    .b-modal button[data-close-modal] {
        width: 54px;
        top: -54px;
        right: -54px
    }
}

.c-txt_bdr {
    box-sizing: border-box;
    padding: 0 1em
}

.c-txt_bdr .u-pc {
    display: none
}

[data-slide] ul {
    position: relative;
    width: 100%;
    height: 100%
}

[data-slide] ul li {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0 !important;
    transition: opacity 1s ease
}

[data-slide] ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center
}

[data-slide] ul li.active {
    opacity: 1 !important;
    transition: opacity 1s ease
}

.nav-breadcrumb {
    z-index: 10
}

.lp_stt .bg_kv {
    filter: brightness(2);
    transition: filter 1s ease
}

.lp_stt .content h1 span {
    transition: opacity 1s ease 0s, filter 1s linear 0s;
    opacity: 0 !important;
    filter: blur(10px)
}

.lp_stt .content .c-button_watch {
    transition: opacity .6s ease;
    opacity: 0 !important
}

.lp_stt.active .bg_kv {
    filter: brightness(1)
}

.lp_stt.active .content h1 span {
    opacity: 1 !important;
    filter: blur(0px)
}

.lp_stt.active .content h1 span:nth-of-type(1) {
    transition-delay: .8s
}

.lp_stt.active .content h1 span:nth-of-type(2) {
    transition-delay: 1.3s
}

.lp_stt.active .content .c-button_watch {
    opacity: 1 !important;
    transition-delay: 1.5s
}

#scene2.active .bg_scene2,
#scene3.active .bg_scene3,
#scene4.active .bg_scene4 {
    transition: all .6s ease;
    mask-image: linear-gradient(180deg, transparent 0%, black 0%, black 100%)
}

#scene2 [data-slide] {
    overflow: hidden
}

#scene2 [data-slide] ul {
    transition: opacity .6s ease 0s, scale 1s linear 0s;
    scale: 1.05;
    opacity: 0 !important
}

#scene2 .l-col2_l:before {
    transition: opacity .6s ease;
    opacity: 0 !important
}

#scene2 .l-col2_l .c-txt_bdr p {
    transition: opacity 1s ease 0s, filter 1s ease 0s;
    filter: blur(10px);
    opacity: 0 !important
}

#scene2 .l-col2_l .c-illust {
    transition: opacity 1s ease 0s, transform 1s ease 0s;
    opacity: 0 !important;
    transform: translate3d(-10px, 0, 0)
}

#scene2.active_text .l-col2_l .c-txt_bdr p {
    filter: blur(0px);
    opacity: 1 !important
}

#scene2.active [data-slide] ul {
    opacity: 1 !important;
    scale: 1;
    transition-delay: 1.2s
}

#scene2.active .l-col2_l:before {
    opacity: 1 !important
}

#scene2.active .l-col2_l .c-illust {
    opacity: 1 !important;
    transform: translateZ(0);
    transition-delay: .8s
}

#scene3 [data-slide] {
    overflow: hidden
}

#scene3 [data-slide] ul {
    transition: opacity .6s ease 0s, scale 1s linear 0s;
    scale: 1.1;
    opacity: 0 !important
}

#scene3 .l-col2_r .c-txt_bdr p {
    transition: opacity 1s ease 0s, filter 1s ease 0s;
    filter: blur(10px);
    opacity: 0 !important
}

#scene3 .l-col2_r .c-illust {
    transition: opacity 1s ease 0s, transform 1s ease 0s;
    opacity: 0 !important;
    transform: translate3d(0, 10px, 0)
}

#scene3.active_text .l-col2_r .c-txt_bdr p {
    filter: blur(0px);
    opacity: 1 !important
}

#scene3.active [data-slide] ul {
    opacity: 1 !important;
    scale: 1;
    transition-delay: 1.2s
}

#scene3.active .l-col2_r .c-illust {
    opacity: 1 !important;
    transform: translateZ(0);
    transition-delay: .8s
}

#scene4 [data-slide] {
    overflow: hidden
}

#scene4 [data-slide] ul {
    transition: opacity .6s ease 0s, scale 1s linear 0s;
    scale: 1.1;
    opacity: 0 !important
}

#scene4 .l-col2_r .c-txt_bdr p {
    transition: opacity 1s ease 0s, filter 1s ease 0s;
    filter: blur(10px);
    opacity: 0 !important
}

#scene4 .l-col2_r .c-illust {
    transition: opacity 1s ease 0s, transform 1s ease 0s;
    opacity: 0 !important;
    transform: translate3d(0, 10px, 0)
}

#scene4.active_text .l-col2_r .c-txt_bdr p {
    filter: blur(0px);
    opacity: 1 !important
}

#scene4.active [data-slide] ul {
    opacity: 1 !important;
    scale: 1;
    transition-delay: 1.2s
}

#scene4.active .l-col2_r .c-illust {
    opacity: 1 !important;
    transform: translateZ(0);
    transition-delay: .8s
}

#scene5 .c-ttl h3 {
    transition: opacity .6s ease 0s, filter .6s linear 0s;
    filter: blur(10px);
    opacity: 0 !important
}

#scene5 .cover {
    transition: opacity 1s ease-out
}

#scene5.active .c-ttl h3 {
    opacity: 1 !important;
    filter: blur(0px)
}

#scene5.active .cover {
    opacity: 0 !important;
    transition-delay: .8s
}

#scene6 .c-ttl h3 {
    transition: opacity .6s ease 0s, filter .6s linear 0s;
    filter: blur(10px);
    opacity: 0 !important
}

#scene6 .cover {
    transition: opacity 1s ease-out
}

#scene6.active .c-ttl h3 {
    opacity: 1 !important;
    filter: blur(0px)
}

#scene6.active .cover {
    opacity: 0 !important;
    transition-delay: .8s
}

@keyframes sparkle {

    0%,
    to {
        opacity: .4;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.2)
    }
}

#scene7 .scene7-1 ul li {
    transition: filter 1s ease 0s, opacity 1s ease 0s;
    opacity: 0 !important;
    filter: blur(10px)
}

#scene7.active .scene7-1 ul li {
    opacity: 1 !important;
    filter: blur(0px)
}

#scene7.active .scene7-1 ul li:nth-child(2) {
    transition-delay: .2s
}

#scene7.active .scene7-1 ul li:nth-child(3) {
    transition-delay: .4s
}

#scene7.active .scene7-1 ul li:nth-child(4) {
    transition-delay: .6s
}

#scene7 .scene7-2 .l-col2_l .c-txt_bdr p {
    transition: opacity 1s ease 0s, filter 1s ease 0s;
    filter: blur(10px);
    opacity: 0 !important
}

#scene7 .scene7-2 .l-col2_l .c-illust span {
    transition: scale .3s ease 0s, opacity .3s ease 0s;
    scale: .6;
    opacity: 0 !important
}

#scene7 .scene7-2 .l-col2_l .c-illust span svg {
    animation: sparkle 1.5s infinite ease-in-out !important
}

#scene7 .scene7-2 .l-col2_l .c-illust span:nth-of-type(8) svg {
    transition-delay: .95s;
    animation-delay: .2s !important
}

#scene7 .scene7-2 .l-col2_l .c-illust span:nth-of-type(7) svg {
    transition-delay: 1s;
    animation-delay: .4s !important
}

#scene7 .scene7-2 .l-col2_l .c-illust span:nth-of-type(6) svg {
    transition-delay: 1.05s;
    animation-delay: .6s !important
}

#scene7 .scene7-2 .l-col2_l .c-illust span:nth-of-type(5) svg {
    transition-delay: 1.1s;
    animation-delay: .8s !important
}

#scene7 .scene7-2 .l-col2_l .c-illust span:nth-of-type(4) svg {
    transition-delay: 1.15s;
    animation-delay: 1s !important
}

#scene7 .scene7-2 .l-col2_l .c-illust span:nth-of-type(3) svg {
    transition-delay: 1.2s;
    animation-delay: 1.2s !important
}

#scene7 .scene7-2 .l-col2_l .c-illust span:nth-of-type(2) svg {
    transition-delay: 1.25s;
    animation-delay: 1.4s !important
}

#scene7 .scene7-2 .l-col2_l .c-illust span:nth-of-type(1) svg {
    transition-delay: 1.3s;
    animation-delay: 1.6s !important
}

#scene7 .scene7-2 .l-col2_r {
    overflow: hidden
}

#scene7 .scene7-2 .l-col2_r video {
    transition: opacity 1s ease 0s, scale 1s ease 0s;
    scale: 1.05;
    opacity: 0 !important
}

#scene7 .scene7-2.active .l-col2_r video {
    opacity: 1 !important;
    scale: 1;
    transition-delay: 1.8s
}

#scene7 .scene7-2.active .l-col2_l {
    opacity: 1 !important;
    transition-delay: .8s
}

#scene7 .scene7-2.active .l-col2_l .c-txt_bdr p {
    filter: blur(0px);
    opacity: 1 !important
}

#scene7 .scene7-2.active .l-col2_l .c-illust span {
    opacity: 1 !important;
    scale: 1
}

#scene7 .scene7-2.active .l-col2_l .c-illust span:nth-of-type(8) {
    transition-delay: 1.05s
}

#scene7 .scene7-2.active .l-col2_l .c-illust span:nth-of-type(7) {
    transition-delay: 1.1s
}

#scene7 .scene7-2.active .l-col2_l .c-illust span:nth-of-type(6) {
    transition-delay: 1.15s
}

#scene7 .scene7-2.active .l-col2_l .c-illust span:nth-of-type(5) {
    transition-delay: 1.2s
}

#scene7 .scene7-2.active .l-col2_l .c-illust span:nth-of-type(4) {
    transition-delay: 1.25s
}

#scene7 .scene7-2.active .l-col2_l .c-illust span:nth-of-type(3) {
    transition-delay: 1.3s
}

#scene7 .scene7-2.active .l-col2_l .c-illust span:nth-of-type(2) {
    transition-delay: 1.35s
}

#scene7 .scene7-2.active .l-col2_l .c-illust span:nth-of-type(1) {
    transition-delay: 1.4s
}

#scene8 .c-ttl {
    transition: opacity 1.2s ease 0s, filter 2s ease 0s;
    filter: blur(10px);
    opacity: 0 !important
}

#scene8.active .c-ttl {
    filter: blur(0);
    opacity: 1 !important
}

@keyframes heart {
    0% {
        rotate: 3deg
    }

    50% {
        rotate: -3deg
    }

    to {
        rotate: 3deg
    }
}

#scene9 .c-list_days ul li:nth-child(1) {
    transition: transform 1s ease 0s, opacity .6s ease 0s;
    transform: translate3d(21.33vw, 48vw, 0) rotate(20deg);
    opacity: 0 !important
}

#scene9 .c-list_days ul li:nth-child(2) {
    transition: transform 1s ease 0s, opacity .6s ease 0s;
    transform: translate3d(-21.33vw, 48vw, 0) rotate(-15deg);
    opacity: 0 !important
}

#scene9 .c-list_days ul li:nth-child(5) {
    transition: transform 1s ease 0s, opacity .6s ease 0s;
    transform: translate3d(21.33vw, 0, 0) rotate(20deg);
    opacity: 0 !important
}

#scene9 .c-list_days ul li:nth-child(3) {
    transition: transform 1s ease 0s, opacity .6s ease 0s;
    transform: translate3d(-21.33vw, 0, 0) rotate(-20deg);
    opacity: 0 !important
}

#scene9 .c-list_days ul li:nth-child(4) {
    transition: transform 1s ease 0s, opacity .6s ease 0s;
    transform: translate3d(16vw, -48vw, 0) rotate(-10deg);
    opacity: 0 !important
}

#scene9 .c-list_days ul li:nth-child(7) {
    transition: transform 1s ease 0s, opacity .6s ease 0s;
    transform: translate3d(-21.33vw, -48vw, 0) rotate(-20deg);
    opacity: 0 !important
}

#scene9 .c-list_days ul li:nth-child(6) {
    transition: transform 1s ease 0s, opacity .6s ease 0s;
    transform: translate3d(10.67vw, -72vw, 0) rotate(10deg);
    opacity: 0 !important
}

#scene9 .c-list_days ul li:nth-child(8) {
    transition: transform 1s ease 0s, opacity .6s ease 0s;
    transform: translate3d(21.33vw, -96vw, 0) rotate(-20deg);
    opacity: 0 !important
}

#scene9 .c-list_days ul li:nth-child(9) {
    transition: transform 1s ease 0s, opacity .6s ease 0s;
    transform: translate3d(-21.33vw, -96vw, 0) rotate(-15deg);
    opacity: 0 !important
}

#scene9 .c-list_days ul.animate li {
    transform: translateZ(0) rotate(0);
    opacity: 1 !important
}

#scene9 .c-list_days ul.animate li:nth-child(1) {
    transition-delay: 0s
}

#scene9 .c-list_days ul.animate li:nth-child(2) {
    transition-delay: .05s
}

#scene9 .c-list_days ul.animate li:nth-child(5) {
    transition-delay: .1s
}

#scene9 .c-list_days ul.animate li:nth-child(3) {
    transition-delay: .15s
}

#scene9 .c-list_days ul.animate li:nth-child(4) {
    transition-delay: .2s
}

#scene9 .c-list_days ul.animate li:nth-child(7) {
    transition-delay: .25s
}

#scene9 .c-list_days ul.animate li:nth-child(6) {
    transition-delay: .3s
}

#scene9 .c-list_days ul.animate li:nth-child(8) {
    transition-delay: .35s
}

#scene9 .c-list_days ul.animate li:nth-child(9) {
    transition-delay: .4s
}

#scene9 .b-stamp {
    overflow: visible
}

#scene9 .b-stamp figure {
    transition: transform 1s ease 0s, opacity .6s ease 0s;
    opacity: 0 !important;
    transform: scale(1.3) rotate(-10deg)
}

#scene9 .b-stamp .txt_stamp {
    transition: transform .6s ease 0s, opacity .2s ease 0s;
    opacity: 0 !important;
    transform: translate3d(-20px, 0, 0)
}

#scene9 .b-stamp .hearts span {
    transition: transform 1s ease 0s, opacity 1s ease 0s;
    transform: translate3d(0, 20px, 0);
    opacity: 0 !important
}

#scene9 .b-stamp.animate figure {
    opacity: 1 !important;
    transform: rotate(0);
    scale: 1;
    transition-delay: .3s
}

#scene9 .b-stamp.animate .txt_stamp {
    opacity: 1 !important;
    transform: translateZ(0)
}

#scene9 .b-stamp.animate .hearts span {
    transform: translateZ(0);
    opacity: 1 !important
}

#scene9 .b-stamp.animate .hearts span:nth-of-type(1) {
    transition-delay: .8s
}

#scene9 .b-stamp.animate .hearts span:nth-of-type(2) {
    transition-delay: .9s
}

#scene9 .b-stamp.animate .hearts span:nth-of-type(3) {
    transition-delay: 1s
}

@media all and (min-width: 768px) {
    #scene7.active .scene7-1 ul li {
        opacity: 1 !important;
        transform: translateZ(0)
    }

    #scene7.active .scene7-1 ul li:nth-child(1) {
        transition-delay: .2s
    }

    #scene7.active .scene7-1 ul li:nth-child(2) {
        transition-delay: .4s
    }

    #scene7.active .scene7-1 ul li:nth-child(3) {
        transition-delay: .6s
    }

    #scene7.active .scene7-1 ul li:nth-child(4) {
        transition-delay: .8s
    }

    #scene7:has(.scene7-2.active) .scene7-1 ul li {
        opacity: 0 !important;
        filter: blur(10px)
    }

    #scene9 .c-list_days ul li:nth-child(1) {
        transition: transform 1.2s ease 0s, opacity .6s ease 0s;
        transform: translate3d(26.46vw, 7.94vw, 0) rotate(20deg);
        opacity: 0 !important
    }

    #scene9 .c-list_days ul li:nth-child(2) {
        transition: transform 1.2s ease 0s, opacity .6s ease 0s;
        transform: translate3d(9.92vw, 11.9vw, 0) rotate(-15deg);
        opacity: 0 !important
    }

    #scene9 .c-list_days ul li:nth-child(5) {
        transition: transform 1.2s ease 0s, opacity .6s ease 0s;
        transform: translate3d(-7.94vw, 13.23vw, 0) rotate(30deg);
        opacity: 0 !important
    }

    #scene9 .c-list_days ul li:nth-child(3) {
        transition: transform 1.2s ease 0s, opacity .6s ease 0s;
        transform: translate3d(-7.94vw, 2.65vw, 0) rotate(-30deg);
        opacity: 0 !important
    }

    #scene9 .c-list_days ul li:nth-child(4) {
        transition: transform 1.2s ease 0s, opacity .6s ease 0s;
        transform: translate3d(-27.78vw, -5.29vw, 0) rotate(-10deg);
        opacity: 0 !important
    }

    #scene9 .c-list_days ul li:nth-child(7) {
        transition: transform 1.2s ease 0s, opacity .6s ease 0s;
        transform: translate3d(-31.75vw, 14.55vw, 0) rotate(30deg);
        opacity: 0 !important
    }

    #scene9 .c-list_days ul li:nth-child(6) {
        transition: transform 1.2s ease 0s, opacity .6s ease 0s;
        transform: translate3d(21.16vw, -15.87vw, 0) rotate(10deg);
        opacity: 0 !important
    }

    #scene9 .c-list_days ul li:nth-child(8) {
        transition: transform 1.2s ease 0s, opacity .6s ease 0s;
        transform: translate3d(5.29vw, -7.94vw, 0) rotate(-20deg);
        opacity: 0 !important
    }

    #scene9 .c-list_days ul li:nth-child(9) {
        transition: transform 1.2s ease 0s, opacity .6s ease 0s;
        transform: translate3d(-13.23vw, -23.81vw, 0) rotate(-30deg);
        opacity: 0 !important
    }

    #scene9 .c-list_days ul.animate li {
        transform: translateZ(0) rotate(0);
        opacity: 1 !important
    }

    #scene9 .c-list_days ul.animate li:nth-child(1) {
        transition-delay: 0s
    }

    #scene9 .c-list_days ul.animate li:nth-child(2) {
        transition-delay: .05s
    }

    #scene9 .c-list_days ul.animate li:nth-child(5) {
        transition-delay: .1s
    }

    #scene9 .c-list_days ul.animate li:nth-child(3) {
        transition-delay: .15s
    }

    #scene9 .c-list_days ul.animate li:nth-child(4) {
        transition-delay: .2s
    }

    #scene9 .c-list_days ul.animate li:nth-child(7) {
        transition-delay: .25s
    }

    #scene9 .c-list_days ul.animate li:nth-child(6) {
        transition-delay: .3s
    }

    #scene9 .c-list_days ul.animate li:nth-child(8) {
        transition-delay: .35s
    }

    #scene9 .c-list_days ul.animate li:nth-child(9) {
        transition-delay: .4s
    }
}

@media (any-hover: hover) {
    .c-list_links ul li a {
        position: relative
    }

    .c-list_links ul li a:after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        background: #fff;
        opacity: 0 !important;
        transition: opacity .15s linear
    }

    .c-list_links ul li a:hover:after {
        opacity: .7 !important
    }
}