@charset "UTF-8";

:root {
    --main-max-width: 24.375rem;
}

html {
    scrollbar-gutter: stable;
}

body {
    position: relative;
    overflow: hidden;
    overflow-y: scroll;
    width: 100%;
    background-color: #fff;
    color: #222222;
    font-family: "Montserrat", "Zen Kaku Gothic New", "游ゴシック", "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", YuGothic, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.12em;
    font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
            font-feature-settings: "palt";
}

body.fixed {
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
}

.wrapper {
    overflow: hidden;
}

.main {
    position: relative;
    margin: auto;
    width: 100%;
    max-width: var( --main-max-width );
    min-height: 100vh;
    background: #ffffff url( '/cp/2408_gummy/asset/img/bgd-000.webp' ) repeat left top/contain fixed;
}

@media ( min-width: 768px ) {
    .footer {
        display: none;
    }    
}

.drawer {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 55vh;
    top: 0;
    left: 0px;
    z-index: 100;
    translate: 0 -55vh;
    transition: translate .267s;
    background:
        url( '/cp/2408_gummy/asset/img/l1-000.webp' ) no-repeat left bottom / 100% auto,
        #f9bbf9 url( '/cp/2408_gummy/asset/img/bgd-100.webp' ) repeat right top / auto 100%
    ;
}

.drawer.open {
    translate: 0;
}

.drawer-menu {
    position: absolute;
    inset-inline: 0;
    bottom: 15.657%;
    display: grid;
    gap: 1.5rem;
    margin: auto;
    width: 17.1875rem;
    max-width: calc( 100% - 1.875rem );
}

.fixed-side {
    position: fixed;
    top: 0;
    width: calc( ( 100% - var( --main-max-width ) ) / 2 );
    height: 100vh;
    background-color: #ffffff;
    overflow: hidden;
}

.fixed-side.--left,
.fixed-side.--right {
    transition: filter .367s;
}

@media ( max-width: 768px ) {
    .fixed-side.--left,
    .fixed-side.--right {
        filter: brightness( 0.5 );
    }
}

.fixed-side.--left {
    left: 0px;
    background: 
        url( '/cp/2408_gummy/asset/img/l1-000.webp' ) no-repeat left bottom/100% auto,
        #f9bbf9 url( '/cp/2408_gummy/asset/img/bgd-100.webp' ) repeat right top/auto 100%;
}

.left-topper {
    height: 2.75rem;
    width: 100%;
    background: #000000 url( '/cp/2408_gummy/asset/img/bgd-050.webp' ) repeat left top/auto 100%;
}

.left-marquee {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-block: .5rem;
    width: 1.875rem;
    height: 100%;
    background: #FFFFFF;
}

.left-marquee__line {
    padding-block: .875rem;
}

.l1-de-001 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 14.144vw;
    max-width: none;
}

.l1-de-002 {
    position: absolute;
    top: 27.894%;
    inset-inline: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    margin: auto;
    translate: .9375rem;
}

@media ( max-width: 768px ) {
    .l1-de-002 {
        display: none;
    }
}

.l1-de-002__line-001 {
    width: 13.684vw;
}

.l1-de-002__line-002 {
    width: 2.039vw;
}

.l1-de-002__line-003 {
    width: 13.355vw;
}

.l1-de-003 {
    position: absolute;
    inset-inline: 0;
    bottom: .875rem;
    margin: auto;
    width: 8.486vw;
    translate: .9375rem;
}

.left-controller {
    position: absolute;
    inset-inline: 0;
    bottom: 15.657%;
    display: grid;
    gap: 1.5rem;
    margin: auto;
    width: 17.1875rem;
    max-width: calc( 100% - 1.875rem );
    translate: .9375rem;
}

@media ( max-width: 768px ) {
    .left-controller {
        display: none;
    }
}

.linkto-inframe {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem;
}

.inframe-button {
    position: relative;
    padding-block: .25rem 0;
    background: url( '/cp/2408_gummy/asset/img/l1-030.webp' ) no-repeat center bottom / contain;
}

.inframe-button__image {
    position: relative;
    top: -.25rem;
}

@media ( min-width: 769px ) {
    .inframe-button__image:hover {
        top: 0;
    }
}

.linkto-exframe {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.exframe-button-l {
    position: relative;
    padding-block: .375rem 0;
    background: url( '/cp/2408_gummy/asset/img/l1-201.webp' ) no-repeat center bottom / contain;
}

.exframe-button-l__image {
    position: relative;
    top: -.375rem;
}

@media ( min-width: 769px ) {
    .exframe-button-l__image:hover {
        top: 0;
    }
}

.exframe-button-s {
    position: relative;
    padding-block: .25rem 0;
    background: url( '/cp/2408_gummy/asset/img/btn-bg-s.webp' ) no-repeat center bottom / contain;
}

.exframe-button-s__image {
    position: relative;
    top: -.25rem;
}

@media ( min-width: 769px ) {
    .exframe-button-s__image:hover {
        top: 0;
    }
}

.fixed-side.--right {
    right: 0px;
    background: #fec94f url( '/cp/2408_gummy/asset/img/bgd-200.webp' ) repeat left top/auto 100%;
}

@media ( max-width: 768px ) {
    .fixed-side.--right {
        z-index: 100;
    }
}

.right-topper {
    height: 2.75rem;
    width: 100%;
    background: #000000 url( '/cp/2408_gummy/asset/img/bgd-060.webp' ) repeat left top/auto 100%;
}

.right-marquee {
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-block: .5rem;
    width: 1.875rem;
    height: 100%;
    background: #FFFFFF;
}

.right-marquee__line {
    padding-block: .875rem;
}

.r1-de-001 {
    position: absolute;
    top: 0;
    right: 5.517%;
    width: 41.379vw;
    max-width: 9.375rem;
}

.r1-de-002 {
    position: absolute;
    top: 12.679%;
    right: 9.379%;
    width: 7.730vw;
}

.r1-de-003 {
    position: absolute;
    top: 22.352%;
    right: 35.862%;
    width: 2.368vw;
}

.r1-de-004 {
    position: absolute;
    top: 35.858%;
    left: -1.073%;
    width: 5.427vw;
}

.r1-de-005 {
    position: absolute;
    bottom: -2.091%;
    left: 1.103%;
    width: 8.848vw;
}

.r1-de-006 {
    position: absolute;
    top: 47.058%;
    left: 35.034%;
    width: 2.302vw;
}

.r1-de-007 {
    position: absolute;
    bottom: 20%;
    left: 10.482%;
    width: 3.453vw;
}

.r1-de-008 {
    position: absolute;
    bottom: 10.588%;
    right: 43.172%;
    width: 6.315vw;
}

.r1-de-009 {
    position: absolute;
    bottom: 0;
    left: 3.586%;
    width: 5.296vw;
}

.r1-de-010 {
    position: absolute;
    bottom: 1.262%;
    left: 1.689%;
    width: 11.447vw;
}

.r1-de-011 {
    position: absolute;
    top: 13.725%;
    left: 7.448%;
    width: 11.710vw;
}

.r1-de-012 {
    position: absolute;
    top: 31.633%;
    right: 29.931%;
    width: 10.723vw;
}

.r1-de-013 {
    position: absolute;
    bottom: 28.431%;
    left: 3.034%;
    width: 11.907vw;
}

.r1-de-014 {
    position: absolute;
    bottom: 16.601%;
    right: 33.241%;
    width: 8.947vw;
}

.r1-de-021 {
    position: absolute;
    top: 22.091%;
    right: 12.965%;
    width: 4.965vw;
    max-width: 36px;
}

.r1-de-022 {
    position: absolute;
    top: 30.915%;
    right: 10.896%;
    width: 3.862vw;
    max-width: 28px;
}

.r1-de-023 {
    position: absolute;
    bottom: 29.803%;
    right: 10.068%;
    width: 15.034vw;
    max-width: 109px;
}

.r1-de-201 {
    position: absolute;
    top: 8.823%;
    left: 6.620%;
    width: 24.137vw;
    max-width: 175px;
}

@media ( max-width: 768px ) {
    .r1-de-201 {
        display: none;
    }
}

.r1-de-202 {
    position: absolute;
    top: 34.379%;
    right: 13.103%;
    width: 24.000vw;
    max-width: 174px;
}

@media ( max-width: 768px ) {
    .r1-de-202 {
        display: none;
    }
}

.r1-de-203 {
    position: absolute;
    bottom: 18.692%;
    left: 0;
    width: 22.206vw;
    max-width: 161px;
}

@media ( max-width: 768px ) {
    .r1-de-203 {
        display: none;
    }
}

.r1-de-204 {
    position: absolute;
    bottom: 2.679%;
    right: 12.827%;
    width: 20.965vw;
    max-width: 152px;
}

@media ( max-width: 768px ) {
    .r1-de-204 {
        display: none;
    }
}

.content {
    width: 100%;
}

.navigation {
    position: relative;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 0.75rem;
    height: 2.75rem;
    background: url( '/cp/2408_gummy/asset/img/n1-000.webp' ) repeat-x left top / contain fixed;
}

.hamburger {
    position: absolute;
    right: .25rem;
    top: 50%;
    display: none;
    translate: 0 -50%;
    padding: .5rem;
}

:where( .game ) .hamburger {
    display: block;
}

@media ( max-width: 768px ) {
    .hamburger {
        display: block;
    }
}

.marquee {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.675rem;
    padding-block: .5rem;
}

.marquee__line {
    padding-inline: .875rem;
}

.c1 {
    position: relative;
    top: 0;
    min-height: 46.75rem;
    background: url( '/cp/2408_gummy/asset/img/c1-000.webp' ) no-repeat left bottom / 100% auto;
}

@media ( max-width: 768px ) {
    .c1 {
        overflow-x: clip;
    }
}

.c1-clip {
    position: relative;
    overflow-x: clip;
}

.c1-heading {
    position: relative;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: 7.5rem;
}

.c1-heading__002 {
    padding-block: .75rem 1.25rem;
}

.c1-de-000 {
    position: absolute;
    top: 0;
    height: 4.625rem;
    width: 100%;
    background: url( '/cp/2408_gummy/asset/img/c1-010.webp' ) repeat-x left top / contain;
    z-index: 10;
}

.c1-de-001 {
    position: absolute;
    top: 0;
    height: 4.625rem;
    width: 100%;
    z-index: 30;
}

.c1-de-001__line-001 {
    position: absolute;
    top: .6825rem;
    left: 1.375rem;
    z-index: 20;
}

.c1-de-001__line-002 {
    position: absolute;
    inset-inline: 0;
    top: .625rem;
    margin: auto;
    z-index: 20;
}

.c1-de-002 {
    position: absolute;
    top: 18.25rem;
    right: 6rem;
    z-index: 20;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    font-size: 0.9375rem;
    line-height: 1.425;
}

.c1-de-002__line-001,
.c1-de-002__line-002,
.c1-de-002__line-003,
.c1-de-002__line-004 {
    position: relative;
}

.c1-de-002__line-001 {
    rotate: -10deg;
    top: .25rem;
}

.c1-de-002__line-002 {
    rotate: -8deg;
    right: -1.25rem;
}

.c1-de-002__line-003 {
    rotate: -4deg;
    right: -3.25rem;
}

.c1-de-002__line-004 {
    rotate: 4deg;
    right: -9.25rem;
}

.c1-de-003 {
    position: absolute;
    top: 3.125rem;
    left: 1.1875rem;
    z-index: 10;
}

.c1-de-004 {
    position: absolute;
    top: 5.625rem;
    left: -.925rem;
}

.c1-de-005 {
    position: absolute;
    top: 7.625rem;
    left: 1.875rem;
}

.c1-de-006 {
    position: absolute;
    top: 8.9375rem;
    left: .25rem;
    z-index: 10;
}

.c1-de-007 {
    position: absolute;
    top: 11.8125rem;
    left: 2.6875rem;
}

.c1-de-008 {
    position: absolute;
    top: 13.125rem;
    left: 1.6875rem;
    z-index: 10;
}

.c1-de-009 {
    position: absolute;
    top: 14.0625rem;
    left: .625rem;
}

.c1-de-010 {
    position: absolute;
    top: 15.625rem;
    left: 1.5625rem;
}

.c1-de-011 {
    position: absolute;
    top: 18.375rem;
    left: -.925rem;
    z-index: 50;
}

.c1-de-012 {
    position: absolute;
    top: 22.9375rem;
    left: -.4rem;
}

.c1-de-013 {
    position: absolute;
    top: 27rem;
    left: .5625rem;
}

.c1-de-014 {
    position: absolute;
    top: .875rem;
    right: -.65rem;
    z-index: 10;
}

.c1-de-015 {
    position: absolute;
    top: 3.75rem;
    right: 1.5625rem;
}

.c1-de-016 {
    position: absolute;
    top: 6.75rem;
    right: 1.0625rem;
    z-index: 10;
}

.c1-de-017 {
    position: absolute;
    top: 7.3125rem;
    right: -.33rem;
}

.c1-de-018 {
    position: absolute;
    top: 9.75rem;
    right: -.33rem;
}

.c1-de-019 {
    position: absolute;
    top: 10.9375rem;
    right: 1.5rem;
}

.c1-de-020 {
    position: absolute;
    top: 13.5625rem;
    right: 1.125rem;
}

.c1-de-021 {
    position: absolute;
    top: 15.875rem;
    right: 0;
    z-index: 10;
}

.c1-de-022 {
    position: absolute;
    top: 18.625rem;
    right: 0;
}

.c1-de-110 {
    position: absolute;
    top: 10.6875rem;
    left: -5.35rem;
    z-index: 50;
}

.c1-de-120 {
    position: absolute;
    top: 26.375rem;
    left: 0;
}

.c1-de-210 {
    position: absolute;
    top: 23.4375rem;
    right: -3rem;
}

.c1-de-301 {
    position: absolute;
    bottom: 0;
    left: 0;
}

.c1-de-302 {
    position: absolute;
    bottom: -.625rem;
    left: 3.125rem;
    z-index: 10;
}

.c2 {
    position: relative;
    margin-block: -7px 0;
    overflow-x: clip;
    padding-block: 0 9.75rem;
    background: url( '/cp/2408_gummy/asset/img/bgd-010.webp' ) no-repeat left bottom / 100% auto;
}

.c2-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 3.3125rem 2.8125rem;
}

.c2-lead {
    padding-block: 0;
}

.c2-lead__copy {
    padding-inline: 3.8rem;
    text-align: center;
    line-height: 1.875;
    letter-spacing: -.125rem;
}

.c2-de-001 {
    position: absolute;
    top: 6.5rem;
    left: -.2rem;
}

.c2-de-002 {
    position: absolute;
    top: 1rem;
    right: 0;
    z-index: 10;
}

.c2-de-003 {
    position: absolute;
    top: 23.1875rem;
    left: .3875rem;
}

.c2-de-004 {
    position: absolute;
    top: 22.5625rem;
    right: 0.65rem;
}

.c2-de-005 {
    position: absolute;
    bottom: -3.125rem;
    left: -.5rem;
    width: calc( 100% + 1rem );
    max-width: none;
}

.c3 {
    position: relative;
    top: -1px;
    overflow-x: clip;
    padding-block: 0 9.125rem;
    background: url( '/cp/2408_gummy/asset/img/c3-000.webp' ) no-repeat left bottom / 100% auto;
}

.c3-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 4.625rem 1.375rem;
}

.c3-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.c3-items__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-block: .8125rem;
}

.c3-items__item:nth-child( odd ) {
    flex-direction: row-reverse;
}

.c3-items__item:nth-child( even ) {
    flex-direction: row;
}

.c3-items__copy {
    flex: 0 0 45%;
    text-align: justify;
}

:where( .c3-items__item:nth-child( odd ) ) .c3-items__copy {
    padding-inline: 0 2rem;
}

:where( .c3-items__item:nth-child( even ) ) .c3-items__copy {
    padding-inline: 2rem 0;
}

.c3-items__img {
    position: absolute;
    flex: 0 0 55%;
}

:where( .c3-items__item:nth-child( odd ) ) .c3-items__img {
    left: 0;
}

:where( .c3-items__item:nth-child( even ) ) .c3-items__img {
    right: -1.825rem;
}

.c3-lineups {
    position: relative;
    padding-block: 2.8125rem 0;
}

.c3-lineups-heading {
    position: absolute;
    top: -1.125rem;
    right: 1.9375rem;
    z-index: 10;
}

.c3-lineups-carousel {
    padding-block: 0 5rem;
}

.c3-lineups__item {
    width: 16.25rem;
}

:where( .swiper-slide ) .c3-lineups__item-name {
    position: absolute;
    bottom: -4.5rem;
    font-size: 0.806875rem;
}

.c3-lineups-button-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-block: 1rem 1.5rem;
}

.c3-button-heading {
    padding-block: .25rem 1rem;
}

.c3-de-001 {
    position: absolute;
    bottom: -7.5rem;
    right: -1.625rem;
    z-index: 10;
}

.c4 {
    position: relative;
    top: -2px;
    overflow-x: clip;
    padding-block: 0 8.625rem;
    background: 
        url( '/cp/2408_gummy/asset/img/bgd-050.webp' ) no-repeat left bottom / 100% auto,
        url( '/cp/2408_gummy/asset/img/bgd-020.webp' ) repeat left bottom / 100% auto;
}

.c4-heading {
    display: flex;
    justify-content: center;
    align-items: center;
}

.c4-lead {
    padding-inline: 4rem;
}

.c4-lead__due {
    padding-block: 2.125rem 1.25rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.333;
}

.due-date {
    font-size: 2.265625rem;
}

.due-week {
    font-size: 1.453125rem;
}

.due-time {
    font-size: 1.875rem;
}

.due-comment {
    font-size: 1rem;
}

.c4-live {
    padding-inline: 3.125rem;
}

.c4-live__heading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 1.5625rem 1.25rem;
}

.c4-live__copy {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-bottom: 1.75rem;
    line-height: 1.875;
}

.c4-lead__copy {
    text-align: center;
    line-height: 1.875;
}

.live {
}

.c4-live__secondary-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 3rem 2.625rem;
}

.c4-live__speaker {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}

.c4-live__speaker + .c4-live__speaker {
    padding-block: 1.6rem 0;
}

.speaker-l {
    flex: 0 0 40%;
}

.speaker-r {
    flex: 0 0 60%;
}

.speaker-pict {
}

.speaker-name {
    padding-block: 1rem;
    font-size: .9rem;
    letter-spacing: -.025rem;
}

.speaker-name > span {
    display: block;
    font-size: 148%;
    font-weight: 500;
}

.speaker-comment {
    font-size: 1rem;
    text-align: justify;
}

.c4-de-001 {
    position: absolute;
    top: 10rem;
    right: -.625rem;
    z-index: 10;
}

.c4-and-more {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 2rem 0;
    font-size: .85rem;
}

.c5 {
    position: relative;
    top: -2px;
    z-index: 100;
    overflow-x: clip;
    padding-block: 0 7.5rem;
    background: url( '/cp/2408_gummy/asset/img/bgd-030.webp' ) repeat left bottom / 100% auto;
}

.c5-heading {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 4.25rem 4.0625rem;
}

.c5-game {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-block: 4.875rem 0;
    margin-inline: 1.25rem;
    min-height: 35.725rem;
    background: url( '/cp/2408_gummy/asset/img/c5-000.webp' ) no-repeat center top / 100% auto;
}

.c5-game__heading {
    position: absolute;
    top: -2.75rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.c5-game__lead {
    padding-inline: 3.375rem;
}

.c5-game__copy {
    text-align: center;
    line-height: 1.875;
}

.c5-game__image {
    padding-block: 3.325rem 1.1rem;
}

.c5-game-button-group {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.c5-de-001 {
    position: absolute;
    top: 2.375rem;
    left: 1rem;
}

.c5-de-002 {
    position: absolute;
    top: 5.25rem;
    right: 1rem;
    z-index: 10;
}

.c5-de-003 {
    position: absolute;
    bottom: -2.625rem;
    width: calc(100% + 1rem);
    max-width: none;
    left: -.5rem;
}

.c6 {
    position: relative;
    margin-block: -3.625rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow-x: clip;
    padding-block: 0 3.1875rem;
    background: 
        url( '/cp/2408_gummy/asset/img/c6-000.webp' ) no-repeat center top / 109% auto,
        url( '/cp/2408_gummy/asset/img/bgd-040.webp' ) repeat center top / 100% auto;
}

.c6-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 7.375rem 5.3rem;
}

.c6-lead {
    padding-block: 3.125rem;
}

.c6-lead__copy {
    padding-inline: 5rem;
    text-align: center;
    line-height: 1.875;
}

.c6-button-group {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.c6-de-001 {
    position: absolute;
    top: 9.25rem;
    width: calc( 100% + 2.5rem );
    max-width: none;
}

.c6-de-002 {
    position: absolute;
    right: 2.125rem;
    top: 20.625rem;
}

.c6-de-003 {
    position: absolute;
    left: 1.6875rem;
    top: 20.625rem;
}

.c7 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow-x: clip;
    padding-block: 9rem 9.5rem;
    background: 
        url( '/cp/2408_gummy/asset/img/c7-000.webp' ) no-repeat center top / 100% auto,
        url( '/cp/2408_gummy/asset/img/bgd-020.webp' ) repeat center top / 100% auto;
}

.c7-follow {
    padding-block: 0 .5rem;
}

.c7-social__heading {
    display: flex;
    justify-content: center;
    align-items: center;
}

.c7-social-list {
    padding-block: 1.625rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.c7-button-group {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.c7-buttong-group__heading {
    padding-block: 2.9375rem 1.125rem;
}

.c7-de-001 {
    position: absolute;
    top: 0;
    right: -.625rem;
}

.c7-de-002 {
    position: absolute;
    top: 4rem;
    left: -.5rem;
}

.c7-de-003 {
    position: absolute;
    bottom: 17.3125rem;
    left: -.625rem;
}

.c7-de-004 {
    position: absolute;
    bottom: 20.625rem;
    right: -2.5rem;
}

.c7-de-005 {
    position: absolute;
    bottom: 9rem;
    right: -1.25rem;
}

.c7-de-006 {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    margin: auto;
}

.font-dots {
    padding-top: .4em;
    background-image: radial-gradient( circle at center, #000000 15%, transparent 15% );
    background-position: top right;
    background-repeat: repeat-x;
    background-size: 1.133em .3em;
}

.font-highlight {
    color: #f5432e;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient( transparent 60%, #fae63f 60% );
}

.g-highlight {
    line-height: 1;
    background: linear-gradient( transparent 60%, #fae63f 60% );
}

.result {
    text-align: center;
}

.action-button-l {
    position: relative;
    padding-block: .5rem 0;
    background: url( '/cp/2408_gummy/asset/img/btn-bg-l.webp' ) no-repeat center bottom / contain;
}

.action-button-m {
    position: relative;
    padding-block: .5rem 0;
    background: url( '/cp/2408_gummy/asset/img/btn-bg-m.webp' ) no-repeat center bottom / contain;
}

.action-button-s {
    position: relative;
    padding-block: .5rem 0;
    background: url( '/cp/2408_gummy/asset/img/btn-bg-s.webp' ) no-repeat center bottom / contain;
}

.action-button-l + .action-button-l,
.action-button-m + .action-button-m {
    padding-block: 1.525rem 0;
}

.action-button-l [class*=button],
.action-button-m [class*=button] {
    position: relative;
    top: -.5rem;
    z-index: 1;
}

.action-button-s [class*=button] {
    position: relative;
    top: -.2485rem;
    z-index: 1;
}

@media ( min-width: 769px ) {
    .action-button-l [class*=button]:hover,
    .action-button-m [class*=button]:hover {
        top: -.2rem;
    }
    
    .action-button-s [class*=button]:hover {
        top: -.125rem;
    }
}

dialog {
    position: fixed;
    inset-inline: 0;
    inset-block: 0;
    width: 100%;
    height: 100%;
}

::backdrop {
    background: rgba( 0, 0, 0, 0.267 );
    backdrop-filter: blur( .0625rem );
}

.modal {
    inset: 0;
    margin: auto;
    width: 20rem;
    padding-block: 2.5rem 0;
    opacity: 0;
    transition: opacity .667s;
}

:where( dialog[open] ) .modal {
    opacity: 1;
}

.modal-content {
    position: relative;
    padding-block: .375rem;
    padding-inline: .5rem;
    min-height: 30rem;
    background: 
        url( '/cp/2408_gummy/asset/img/m1-bgn-topper.webp' ) no-repeat left top / 100% auto,
        url( '/cp/2408_gummy/asset/img/m1-bgn-lower.webp' ) no-repeat left bottom / 100% auto,
        url( '/cp/2408_gummy/asset/img/m1-bgn-middle.webp' ) repeat left 50px / 100% auto;
}

.modal-supply {
    padding-block: .5rem;
    padding-inline: 1rem;
    color: #FFFFFF;
    font-weight: 400;
    font-size: .865rem;
    text-align: center;
    background: #251e1c;
}

.modal-topper,
.modal-middle,
.modal-lower {
    padding-inline: 1.35rem;
}

.modal-topper {
    padding-block: 1.5rem;
    overflow: scroll;
    max-height: calc( 100vh - 8rem );
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.modal-topper::-webkit-scrollbar {
    display: none;
}

.modal-lower {
    padding-block: 0 1.5rem;
}

.modal-lower {
    background:
        url( '/cp/2408_gummy/asset/img/m1-bgn-connect.webp' ) no-repeat left top / 100% auto,
        url( '/cp/2408_gummy/asset/img/m1-bgn-b.webp' ) repeat left top / 100% auto;
}

.modal-close {
    position: absolute;
    top: -1.8125rem;
    right: -1.6875rem;
    width: 3.375rem;
    height: 3.6875rem;
    background: url( '/cp/2408_gummy/asset/img/m1-btn-close.webp' ) no-repeat center / 100%;
    cursor: pointer;
}

.prize-steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.prize-step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    text-align: center;
}

.campaign {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.campaign-heading {
    padding-inline: 1.5rem;
    font-size: 0.9375rem;
    letter-spacing: -.01rem;
    background: #fdcb67;
    border: 1px solid #251e1c;
    border-radius: 1rem;
}

.campaign-due {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    padding-block: .4rem 0;
    line-height: 1;
}

.due-y {
    font-size: 1.7409375rem;
    font-weight: 500;
}

.due-m {
    font-size: 3.108125rem;
    font-weight: 700;
}

.due-d {
    font-size: 3.108125rem;
    font-weight: 700;
    
}

.campaign-due-supply {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.due-w {
    position: absolute;
    top: -1rem;
    font-size: .7415625rem;
    font-weight: 600;
    letter-spacing: -.001rem;
}

.due-o {
    font-size: 1.2896875rem;
}

.prize {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.prize-items {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .25rem;
}

.prize-item {
    position: relative;
    display: flex;
    flex-direction: row;
}

.prize-item:nth-child( even ) {
    flex-direction: row-reverse;
}

.prize-item__image {
    position: absolute;
}

.prize-item:nth-child( 1 ) .prize-item__image {
    top: -1.6875rem;
    right: -2rem;
}

.prize-item:nth-child( 2 ) .prize-item__image {
    top: 0.3125rem;
    left: -3rem;
}

.prize-item__specs {
    flex: 0 0 44%;
    font-size: .835rem;
    line-height: 1.25;
}

.prize-item__spec-line-001,
.prize-item__spec-line-002 {
    display: block;
}

.prize-item:nth-child( even ) .prize-item__spec-line-002 {
    padding-inline: 1.5rem 0;
}

:where( .prize-steps ) + .campaign {
    padding-block: 1.5rem 0;
}

:where( .prize-heading ) + .prize-items {
    padding-block: 2.5rem;
}

@keyframes h-marquee {
    from {
        transform: translateX( 0 );
    }
	to {
        transform: translateX( -100% );
    }
}

@keyframes v-marquee {
    from {
        transform: translateY( 0 );
    }
	to {
        transform: translateY( -100% );
    }
}

@keyframes scaleUp {
    from {
        scale: 0;
    }
    to {
        scale: 1;
    }
}

@keyframes scaleDown {
    from {
        scale: 1;
    }
    to {
        scale: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        visibility: visible;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes l-scattele1 {
    from {
        translate: 1rem 1.5rem;
    }
    to {
        translate: 0;
    }
}

@keyframes l-scattele2 {
    from {
        translate: 2rem 3rem;
    }
    to {
        translate: 0;
    }
}

@keyframes l-scattele3 {
    from {
        translate: 3rem 4.5rem;
    }
    to {
        translate: 0;
    }
}

@keyframes r-scattele1 {
    from {
        translate: -.25rem 2.5rem;
    }
    to {
        translate: 0;
    }
}

@keyframes r-scattele2 {
    from {
        translate: -.75rem 4.5rem;
    }
    to {
        translate: 0;
    }
}

@keyframes r-scattele3 {
    from {
        translate: -1.25rem 7rem;
    }
    to {
        translate: 0;
    }
}

@keyframes rotateSlideIn {
    0% {
        rotate: -30deg;
        translate: 2rem 0;
    }
    100% {
        rotate: 0;
        translate: 0;
    }
}

@keyframes r-slideIn {
    0% {
        translate: 5rem 0;
    }
    100% {
        translate: 0;
    }
}

@keyframes l-slideUp {
    0% {
        translate: 0 3rem;
    }
    100% {
        translate: 0;
    }
}

@keyframes l-slideDown {
    0% {
        translate: 0 -3rem;
    }
    100% {
        translate: 0;
    }
}

/**
 * fv controll
 * 
 * @animation
 */

:where( .ready ) .left-marquee__line {
    animation-name: v-marquee;
    animation-timing-function: linear;
    animation-duration: 7s;
    animation-iteration-count: infinite;
}

:where( .ready ) .right-marquee__line {
    animation-name: v-marquee;
    animation-timing-function: linear;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
}

@media ( max-width: 768px ) {
    :where( .ready ) .left-marquee__line,
    :where( .ready ) .right-marquee__line {
        animation-name: none;
    }
}

:where( .ready ) .marquee {
    animation: linear .667s both 1 fadeIn;
}

:where( .ready ) .marquee__line {
    padding-inline: .875rem;
    animation-name: h-marquee;
	animation-timing-function: linear;
	animation-duration: 7s;
	animation-iteration-count: infinite;
}

.not-marquee .marquee,
.not-marquee .marquee__line,
.not-marquee .left-marquee__line,
.not-marquee .right-marquee__line {
    opacity: 1;
    animation: none;
}

:where( .ready ) .c1-heading__001,
:where( .ready ) .c1-heading__002,
:where( .ready ) .c1-heading__003,
:where( .ready ) .c1-de-001__line-001,
:where( .ready ) .c1-de-001__line-002 {
    /* animation: linear .2s both 1 fadeIn, cubic-bezier( 0.68, 1.41, 0.34, 0.94 ) .367s both 1 scaleUp; */
    animation-timing-function: linear, cubic-bezier( 0.68, 1.41, 0.34, 0.94 );
    animation-duration: .2s, .367s;
    animation-fill-mode: both;
    animation-name: fadeIn, scaleUp;
}

:where( .ready ) .c1-de-003 {
    animation: linear .2s both 1 fadeIn, linear .24s both 1 l-scattele3;
}

:where( .ready ) .c1-de-004, :where( .ready ) .c1-de-005 {
    animation: linear .167s both 1 fadeIn, linear .207s both 1 l-scattele2;
}

:where( .ready ) .c1-de-006, :where( .ready ) .c1-de-007, :where( .ready ) .c1-de-008 {
    animation: linear .133s both 1 fadeIn, linear .173s both 1 l-scattele1;
}

:where( .ready ) .c1-de-009 {
    animation: linear .167s both 1 fadeIn, linear .207s both 1 l-scattele2;
}

:where( .ready ) .c1-de-010, :where( .ready ) .c1-de-011 {
    animation: linear .133s both 1 fadeIn, linear .173s both 1 l-scattele2;
}

:where( .ready ) .c1-de-012, :where( .ready ) .c1-de-013 {
    animation: linear .2s both 1 fadeIn, linear .24s both 1 l-scattele3;
}

:where( .ready ) .c1-de-014, :where( .ready ) .c1-de-015, :where( .ready ) .c1-de-016 {
    animation: linear .133s both 1 fadeIn, linear .173s both 1 r-scattele1;
}

:where( .ready ) .c1-de-017, :where( .ready ) .c1-de-018, :where( .ready ) .c1-de-019 {
    animation: linear .167s both 1 fadeIn, linear .207s both 1 r-scattele2;
}

:where( .ready ) .c1-de-020 {
    animation: linear .2s both 1 fadeIn, linear .24s both 1 r-scattele3;
}

:where( .ready ) .c1-de-021, :where( .ready ) .c1-de-022 {
    animation: linear .2s both 1 fadeIn, linear .24s both 1 r-scattele3;
}

:where( .ready ) .c1-de-110 {
    animation: linear .167s both 1 fadeIn, linear .167s both 1 rotateSlideIn;
}

:where( .ready ) .c1-de-210 {
    animation: linear .367s both 1 fadeIn, linear .067s both 1 r-slideIn;
}

:where( .ready ) .c1-de-120 {
    animation: linear .667s both 1 fadeIn, linear .167s both 1 l-slideUp;
}

:where( .ready ) .c1-de-002 {
    /* animation: linear .167s both 1 fadeIn, cubic-bezier( 0.68, 1.41, 0.34, 0.94 ) .267s both 1 scaleUp; */
    animation-timing-function: linear, cubic-bezier( 0.68, 1.41, 0.34, 0.94 );
    animation-duration: .167s, .267s;
    animation-fill-mode: both;
    animation-name: fadeIn, scaleUp;
}

.marquee {
    animation-delay: 1s;
}

.c1-heading__001 {
    animation-delay: 1.75s;
}

.c1-heading__003 {
    animation-delay: 1.91s;
}

.c1-heading__002 {
    animation-delay: 2.75s;
}

.c1-de-001__line-001 {
    animation-delay: 3.4s;
}

.c1-de-001__line-002 {
    animation-delay: 3.65s;
}

.c1-de-003{
    animation-delay: 4.45s;
}

.c1-de-004{
    animation-delay: 4.63s;
}

.c1-de-005{
    animation-delay: 4.63s;
}

.c1-de-006{
    animation-delay: 4.72s;
}

.c1-de-007{
    animation-delay: 4.55s;
}

.c1-de-008{
    animation-delay: 4.55s;
}

.c1-de-009{
    animation-delay: 4.72s;
}

.c1-de-010 {
    animation-delay: 4.63s;
}

.c1-de-011 {
    animation-delay: 4.66s;
}

.c1-de-012 {
    animation-delay: 4.76s;
}

.c1-de-013 {
    animation-delay: 4.55s;
}

.c1-de-014 {
    animation-delay: 4.63s;
}

.c1-de-015 {
    animation-delay: 4.55s;
}

.c1-de-016 {
    animation-delay: 4.63s;
}

.c1-de-017 {
    animation-delay: 4.72s;
}

.c1-de-018 {
    animation-delay: 4.55s;
}

.c1-de-019 {
    animation-delay: 4.72s;
}

.c1-de-020 {
    animation-delay: 4.55s;
}

.c1-de-021 {
    animation-delay: 4.63s;
}

.c1-de-022 {
    animation-delay: 4.66s;
}

.c1-de-110 {
    animation-delay: 5.56s;
}

.c1-de-210 {
    animation-delay: 5.82s;
}

.c1-de-120 {
    animation-delay: 5.96s;
}

.c1-de-002 {
    animation-delay: 6.28s;
}

/**
 * lib expand
 * 
 * @swiper
 */

.c3-lineups-carousel .swiper {
    overflow: visible;
}

.c3-lineups-carousel .swiper-slide {
    aspect-ratio: 1.5 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* background: url( '/cp/2408_gummy/asset/img/c3-100.webp' ) no-repeat center / auto 100%; */
}

.c3-lineups-carousel .swiper-button-prev,
.c3-lineups-carousel .swiper-button-next {
    width: 40px;
    height: 40px;
}

.c3-lineups-carousel .swiper-button-prev {
    background: url( '/cp/2408_gummy/asset/img/c3-220.webp' ) no-repeat left bottom / 100% auto;
}

.c3-lineups-carousel .swiper-button-next {
    background: url( '/cp/2408_gummy/asset/img/c3-210.webp' ) no-repeat left bottom / 100% auto;
}

.c3-lineups-carousel .swiper-button-prev:after,
.c3-lineups-carousel .swiper-button-next:after {
    content: '';
}

.c3-lineups-carousel .swiper-horizontal > .swiper-pagination-bullets,
.c3-lineups-carousel .swiper-pagination-bullets.swiper-pagination-horizontal,
.c3-lineups-carousel .swiper-pagination-custom,
.c3-lineups-carousel .swiper-pagination-fraction {
    left: 0;
    right: 0;
    bottom: -2.25rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    width: fit-content;
    height: .4375rem;
    border-radius: 1rem;
    border: 1px solid;
}

.c3-lineups-carousel .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.c3-lineups-carousel .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0;
    width: 2.25rem;
    height: .4375rem;
    opacity: 1;
    border-radius: 0;
    border: 1px solid #251e1c;
}

.c3-lineups-carousel .swiper-pagination-bullet {
    background: #ffffff;
}

.c3-lineups-carousel .swiper-pagination-bullet-active {
    background: #398ee8;
}

/**
 * game controll
 * 
 * @content
 */

:where( .game ) .fixed-side.--left,
:where( .game ) .fixed-side.--right {
    background: #241e1b;
}

@media ( max-width: 768px ) {
    :where( .game ) .gl1-de-500,
    :where( .game ) .right-controller,
    :where( .game ) .left-marquee,
    :where( .game ) .right-marquee {
        display: none !important;
    }
}

:where( .game ) .left-marquee,
:where( .game ) .right-marquee {
    z-index: 100;
    justify-content: flex-end;
    width: 4.413vw;
    max-width: 2rem;
    background: repeating-linear-gradient(
        90deg,
        rgb( 255 255 255 / .67 ),
        rgb( 255 255 255 / .67 ) .5px,
        transparent .5px,
        transparent 4px
    ),
    repeating-linear-gradient(
        0deg,
        rgb( 255 255 255 / .67 ),
        rgb( 255 255 255 / .67 ) .5px,
        #241e1b .5px,
        #000000 4px
    );
    border: 3px solid #FFFFFF;
}

:where( .game ) .left-marquee__line,
:where( .game ) .right-marquee__line {
    padding: 0;
    max-width: none;
}

.right-controller {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    translate: calc( max( -4.43vw, -2rem ) / 2 ) 0;
}

.social-block {
}

.social-block__heading {
    color: #FFFFFF;
    font-size: 1.863rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
}

.social-block__list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    padding-block: 1.805rem;
}

.gl1-de-101 {
    position: absolute;
    top: 3.10%;
    left: 11.806%;
    width: 1.379vw;
    max-width: 10px;
}

.gl1-de-102 {
    position: absolute;
    top: -.310%;
    left: 54.068%;
    width: 1.379vw;
    max-width: 10px;
}

.gl1-de-103 {
    position: absolute;
    top: 3.782%;
    right: 16.248%;
    width: 2.344vw;
    max-width: 17px;
}

.gl1-de-104 {
    position: absolute;
    top: 7.013%;
    right: 14.303%;
    width: 1.379vw;
    max-width: 10px;
}

.gl1-de-105 {
    position: absolute;
    top: 25.834%;
    left: 7.057%;
    width: 1.379vw;
    max-width: 10px;
}

.gl1-de-106 {
    position: absolute;
    top: 22.817%;
    left: 23.406%;
    z-index: 10;
    width: 1.931vw;
    max-width: 14px;
}

.gl1-de-107 {
    position: absolute;
    top: 22.806%;
    left: 26.806%;
    width: .965vw;
    max-width: 7px;
}

.gl1-de-108 {
    position: absolute;
    top: 19.292%;
    right: 20.965%;
    z-index: 10;
    width: 1.379vw;
    max-width: 10px;
}

.gl1-de-109 {
    position: absolute;
    top: 18.802%;
    right: 20.452%;
    width: .965vw;
    max-width: 7px;
}

.gl1-de-110 {
    position: absolute;
    top: 24.533%;
    right: 5.286%;
    width: 1.241vw;
    max-width: 9px;
}

.gl1-de-111 {
    position: absolute;
    top: 27.556%;
    left: 30.943%;
    width: 1.379vw;
    max-width: 10px;
}

.gl1-de-112 {
    position: absolute;
    top: 34.635%;
    right: 8.620%;
    width: 1.379vw;
    max-width: 10px;
}

.gl1-de-113 {
    position: absolute;
    top: 45.488%;
    left: 16.073%;
    width: 1.379vw;
    max-width: 10px;
}

.gl1-de-114 {
    position: absolute;
    top: 48.380%;
    left: 12.965%;
    width: .827vw;
    max-width: 6px;
}

.gl1-de-115 {
    position: absolute;
    top: 45.293%;
    right: 12.565%;
    width: 1.379vw;
    max-width: 10px;
}

.gl1-de-116 {
    position: absolute;
    top: 46.172%;
    right: 10.514%;
    width: .965vw;
    max-width: 7px;
}

.gl1-de-117 {
    position: absolute;
    bottom: 33.062%;
    left: 6.202%;
    width: 1.379vw;
    max-width: 10px;
}

.gl1-de-118 {
    position: absolute;
    bottom: 28.914%;
    left: 16.427%;
    width: 1.793vw;
    max-width: 13px;
}

.gl1-de-119 {
    position: absolute;
    bottom: 27.360%;
    right: 1.511%;
    z-index: 10;
    width: 1.379vw;
    max-width: 10px;
}

.gl1-de-120 {
    position: absolute;
    bottom: 28.355%;
    right: -.689%;
    width: 1.931vw;
    max-width: 14px;
}

/* .gl1-de-121 {
    position: absolute;
    width: 1.379vw;
    max-width: 10px;
} */

.gl1-de-122 {
    position: absolute;
    bottom: 14.268%;
    left: 15.852%;
    width: 2.896vw;
    max-width: 21px;
}

.gl1-de-123 {
    position: absolute;
    bottom: 20.505%;
    left: 25.078%;
    width: 1.379vw;
    max-width: 10px;
}

.gl1-de-124 {
    position: absolute;
    bottom: 21.029%;
    right: 11.264%;
    width: 1.379vw;
    max-width: 10px;
}

.gl1-de-125 {
    position: absolute;
    bottom: 7.968%;
    left: 28.575%;
    width: 1.103vw;
    max-width: 8px;
}

.gl1-de-126 {
    position: absolute;
    bottom: 4.699%;
    left: 26.697%;
    width: 1.793vw;
    max-width: 13px;
}

.gl1-de-127 {
    position: absolute;
    bottom: 4.414%;
    right: 42.459%;
    width: 1.379vw;
    max-width: 10px;
}

.gl1-de-128 {
    position: absolute;
    bottom: 4.418%;
    right: 18.769%;
    width: 1.931vw;
    max-width: 14px;
}

.gl1-de-210 {
    position: absolute;
    left: 4.653%;
    top: 0;
    width: 21.379vw;
    max-width: 155px;
}

.gl1-de-220 {
    position: absolute;
    top: 3.027%;
    right: 34.144%;
    width: 3.586vw;
    max-width: 26px;
}

.gl1-de-230 {
    position: absolute;
    top: 16.759%;
    left: 38.961%;
    width: 4.965vw;
    max-width: 36px;
}

.gl1-de-240 {
    position: absolute;
    top: 9.200%;
    right: -5.382%;
    width: 10.344vw;
    max-width: 75px;
}

.gl1-de-250 {
    position: absolute;
    top: 28.467%;
    left: 12.91%;
    width: 3.862vw;
    max-width: 28px;
}

.gl1-de-260 {
    position: absolute;
    top: 23.841%;
    left: 21.606%;
    width: 22.482vw;
    max-width: 163px;
}

.gl1-de-270 {
    position: absolute;
    top: 33.537%;
    left: 26.993%;
    width: 2.896vw;
    max-width: 21px;
}

.gl1-de-280 {
    position: absolute;
    bottom: 43.259%;
    right: -3.758%;
    width: 7.724vw;
    max-width: 56px;
}

.gl1-de-290 {
    position: absolute;
    bottom: 29.216%;
    left: 6.107%;
    width: 8.275vw;
    max-width: 60px;
}

.gl1-de-300 {
    position: absolute;
    bottom: 23.953%;
    left: 21.606%;
    width: 4.689vw;
    max-width: 34px;
}

.gl1-de-310 {
    position: absolute;
    bottom: 9.789%;
    right: 22.553%;
    z-index: 10;
    width: 9.379vw;
    max-width: 68px;
}

.gl1-de-320 {
    position: absolute;
    bottom: 16.782%;
    right: 24.915%;
    width: 6.896vw;
    max-width: 50px;
}

.gl1-de-330 {
    position: absolute;
    bottom: 21.121%;
    right: 9.805%;
    width: 4.137vw;
    max-width: 30px;
}

.gl1-de-340 {
    position: absolute;
    left: 12.284%;
    bottom: -1.085%;
    width: 9.517vw;
    max-width: 69px;
}

.gl1-de-350 {
    position: absolute;
    bottom: 2.444%;
    right: -2.206%;
    width: 28.551vw;
    max-width: 207px;
}

.gl1-de-360 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 6.620vw;
    max-width: 48px;
}

.gl1-de-500 {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 23.310vw;
    max-width: 169px;
}

.gr1-de-101 {
    position: absolute;
    top: 2.776%;
    left: 39.649%;
    width: 1.379vw;
    max-width: 10px;
}

.gr1-de-102 {
    position: absolute;
    top: -.232%;
    right: 13.867%;
    width: 1.379vw;
    max-width: 10px;
}

.gr1-de-103 {
    position: absolute;
    top: 5.306%;
    right: 46.957%;
    width: 2.206vw;
    max-width: 16px;
}

.gr1-de-104 {
    position: absolute;
    top: 11.000%;
    left: -.275%;
    width: 1.379vw;
    max-width: 10px;
}

.gr1-de-105 {
    position: absolute;
    top: 8.885%;
    left: 46.347%;
    width: 1.379vw;
    max-width: 10px;
}

.gr1-de-106 {
    position: absolute;
    top: 9.735%;
    right: 50.495%;
    width: .965vw;
    max-width: 7px;
}

.gr1-de-107 {
    position: absolute;
    top: 8.007%;
    right: 2.456%;
    width: 1.379vw;
    max-width: 10px;
}

.gr1-de-108 {
    position: absolute;
    top: 17.774%;
    left: 16.126%;
    width: 1.379vw;
    max-width: 10px;
}

.gr1-de-109 {
    position: absolute;
    top: 24.900%;
    right: 46.754%;
    width: .965vw;
    max-width: 7px;
}

.gr1-de-110 {
    position: absolute;
    top: 22.124%;
    right: 17.616%;
    width: 1.379vw;
    max-width: 10px;
}

.gr1-de-111 {
    position: absolute;
    top: 22.110%;
    right: 16.511%;
    width: .965vw;
    max-width: 7px;
}

.gr1-de-112 {
    position: absolute;
    top: 28.682%;
    left: 2.873%;
    width: 1.103vw;
    max-width: 8px;
}

.gr1-de-113 {
    position: absolute;
    top: 31.689%;
    left: 11.252%;
    width: 1.379vw;
    max-width: 10px;
}

.gr1-de-114 {
    position: absolute;
    top: 32.837%;
    left: 12.026%;
    width: .965vw;
    max-width: 7px;
}

.gr1-de-115 {
    position: absolute;
    top: 28.229%;
    right: 36.376%;
    width: 1.793vw;
    max-width: 13px;
}

.gr1-de-116 {
    position: absolute;
    top: 28.740%;
    right: 32.980%;
    width: 1.241vw;
    max-width: 9px;
}

.gr1-de-117 {
    position: absolute;
    top: 44.166%;
    right: 17.289%;
    width: 1.379vw;
    max-width: 10px;
}

.gr1-de-118 {
    position: absolute;
    bottom: 45.705%;
    right: 7.946%;
    width: 1.379vw;
    max-width: 10px;
}

.gr1-de-119 {
    position: absolute;
    bottom: 36.070%;
    left: -.551%;
    width: 1.931vw;
    max-width: 14px;
}

.gr1-de-120 {
    position: absolute;
    bottom: 26.876%;
    left: 25.008%;
    width: 1.379vw;
    max-width: 10px;
}

.gr1-de-121 {
    position: absolute;
    bottom: 40.124%;
    right: 15.428%;
    width: 22.06vw;
    max-width: 16px;
}

.gr1-de-122 {
    position: absolute;
    bottom: 41.664%;
    right: 14.524%;
    width: 1.379vw;
    max-width: 10px;
}

.gr1-de-123 {
    position: absolute;
    bottom: 33.565%;
    right: 12.046%;
    width: 1.931vw;
    max-width: 14px;
}

.gr1-de-124 {
    position: absolute;
    bottom: 14.786%;
    left: 5.874%;
    width: .965vw;
    max-width: 7px;
}

.gr1-de-125 {
    position: absolute;
    bottom: 11.384%;
    left: 8.873%;
    width: 1.379vw;
    max-width: 10px;
}

.gr1-de-126 {
    position: absolute;
    bottom: 12.517%;
    right: 16.891%;
    width: 2.896vw;
    max-width: 21px;
}

.gr1-de-210 {
    position: absolute;
    left: 3.613%;
    top: -1.785%;
    width:;
    max-width: 48px;
}

.gr1-de-220 {
    position: absolute;
    top: 12.403%;
    left: 9.402%;
    width:;
    max-width: 131px;
}

.gr1-de-230 {
    position: absolute;
    top: -1.456%;
    right: 8.122%;
    width:;
    max-width: 131px;
}

.gr1-de-240 {
    position: absolute;
    top: 21.031%;
    right: 34.092%;
    width:;
    max-width: 32px;
}

.gr1-de-250 {
    position: absolute;
    top: 39.890%;
    left: -1%;
    width:;
    max-width: 35px;
}

.gr1-de-260 {
    position: absolute;
    top: 43.994%;
    left: 4.478%;
    width:;
    max-width: 18px;
}

.gr1-de-270 {
    position: absolute;
    top: 35.879%;
    right: 27.471%;
    width:;
    max-width: 31px;
}

.gr1-de-280 {
    position: absolute;
    top: 26.601%;
    right: 7.001%;
    width:;
    max-width: 70px;
}

.gr1-de-290 {
    position: absolute;
    bottom: 27.276%;
    left: 12.933%;
    width:;
    max-width: 34px;
}

.gr1-de-300 {
    position: absolute;
    bottom: 13.613%;
    left: 12.133%;
    width:;
    max-width: 64px;
}

.gr1-de-310 {
    position: absolute;
    bottom: 16.174%;
    right: 45.459%;
    width:;
    max-width: 34px;
}

.gr1-de-320 {
    position: absolute;
    bottom: 13.541%;
    right: 0;
    width:;
    max-width: 206px;
}

.gr1-de-330 {
    position: absolute;
    bottom: 0;
    max-width: none;
    width: 100%;
    max-width: none;
}

#s {
    position: absolute;
    width: 21.625rem;
    height: 10rem;
    top: 17.75rem;
}

.overlay {
    position: fixed;
    inset-block: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding-inline: 2.25rem;
    width: 100%;
    max-width: var( --main-max-width );
    color: #FFFFFF;
    background: rgb( 0, 0, 0, .667 );
    opacity: 0;
    visibility: hidden;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

.overlay.fadeOut {
    transition: opacity .267s, visibility .267s;
    opacity: 0;
    visibility: hidden;
}

.overlay.fadeIn {
    transition: opacity .267s;
    opacity: 1;
    visibility: visible;
}

.countdown {
    position: fixed;
    inset-block: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: var( --main-max-width );
    font-size: 3rem;
}

#app {
    position: relative;
    overflow: hidden;
    background: #251E1C url( '/cp/2408_gummy/asset/img/p1-990.webp' ) no-repeat center left -.5rem / 120% ;
}

.frame {
    position: relative;
    overflow: hidden;
    height: 37.25rem;
}

.frame:has( .progress ) {
    opacity: 0;
    visibility: hidden;
}

.component {
    position: absolute;
    inset: 0;
    margin: auto;
    height: 100%;
    line-height: 1.875;
}

.component.tutorial {
    overflow: hidden;
    padding: 1.375rem 1.375rem 2.25rem;
    background: #ffffff url( '/cp/2408_gummy/asset/img/bgn-300.webp' ) repeat left top / contain fixed;
}

.component.ready {
    top: 4.5rem;
    padding: 4rem 1.375rem 2.25rem;
    background: #ffffff;
}

.component-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: inherit;
}

.component-inner.tutorial-inner {
    background: #f9f8f2;
}

.p1 {
    width: 100%;
    height: 100%;
}

.p1-de-001 {
    position: absolute;
    top: 0;
    inset-inline: 0;
    margin: auto;
    width: 100%;
    height: 10rem;
    background: transparent url( '/cp/2408_gummy/asset/img/p1-000.webp' ) no-repeat center bottom / 125% auto;
}

.p1-de-001__line-001 {
    position: absolute;
    inset-inline: 0;
    top: 1.75rem;
    margin: auto;
}

.p1-lead {
    position: absolute;
    inset-inline: 0;
    top: 10.75rem;
    margin: auto;
    text-align: center;
    opacity: 0;
}

.p1-button-group {
    position: absolute;
    bottom: 1.25rem;
    inset-inline: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    gap: 1rem;
}

.p1-de-010 {
    position: absolute;
    top: 1.3125rem;
    right: 1.125rem;
    z-index: 10;
}

.p1-de-020 {
    position: absolute;
    top: 6rem;
    left: 2rem;
    z-index: 10;
}

.p1-de-030 {
    position: absolute;
    top: 9rem;
    left: -1rem;
}

.p1-de-040 {
    position: absolute;
    top: 17.75rem;
    left: 1.625rem;
}

.p1-de-050 {
    position: absolute;
    bottom: 7.75rem;
    left: -.75rem;
}

.p1-de-060 {
    position: absolute;
    bottom: 8.375rem;
    right: 3.25rem;
}

.p1-de-070 {
    position: absolute;
    bottom: 1rem;
    right: 4rem;
}

.p1-de-080 {
    position: absolute;
    bottom: 1.5rem;
    right: -1.5rem;
}

.p2 {
    width: 100%;
    height: 100%;
    background: transparent url( '/cp/2408_gummy/asset/img/p2-000.webp' ) no-repeat center bottom / 100% auto;
}

.p2-lead {
    position: absolute;
    inset-inline: 0;
    top: 2.65rem;
    margin: auto;
    text-align: center;
}

.p2-button-group {
    position: absolute;
    bottom: 4.25rem;
    inset-inline: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    gap: 1rem;
}

.p3 {
    width: 100%;
    height: 100%;
}

.p3-lead {
    position: absolute;
    inset-inline: 0;
    top: 2.65rem;
    margin: auto;
    text-align: center;
}

.p3-button-group {
    position: absolute;
    bottom: 1.25rem;
    inset-inline: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    gap: 1rem;
}

.p3-de-110 {
    position: absolute;
    top: .225rem;
    left: 1.75rem;
}

.p3-de-120 {
    position: absolute;
    top: 2.375rem;
    left: 1.5rem;
}

.p3-de-130 {
    position: absolute;
    top: 4.875rem;
    left: 3rem;
}

.p3-de-140 {
    position: absolute;
    top: 5.5rem;
    left: -1.5rem;
}

.p3-de-150 {
    position: absolute;
    top: 7.75rem;
    left: -1.125rem;
}

.p3-de-160 {
    position: absolute;
    bottom: 4.5rem;
    left: .375rem;
}

.p3-de-210 {
    position: absolute;
    top: .25rem;
    right: -.625rem;
}

.p3-de-220 {
    position: absolute;
    top: 1.75rem;
    right: 5.625rem;
}

.p3-de-230 {
    position: absolute;
    top: 4.875rem;
    right: 2.625rem;
}

.p3-de-240 {
    position: absolute;
    top: 5.875rem;
    right: 4.125rem;
}

.p3-de-250 {
    position: absolute;
    top: 8.625rem;
    right: -.75rem;
}

.p3-de-260 {
    position: absolute;
    top: 10rem;
    right: 3.875rem;
}

.p3-de-300 {
    position: absolute;
    left: .5rem;
    bottom: 9.5rem;
}

.p3-de-310 {
    position: absolute;
    right: .875rem;
    bottom: 9.375rem;
}

.p4 {
    width: 100%;
    height: 100%;
}

.q1 .p4 {
    background: transparent url( '/cp/2408_gummy/asset/img/p4-001.webp' ) no-repeat center top / 100% auto;
}

.q2 .p4 {
    background: transparent url( '/cp/2408_gummy/asset/img/p4-002.webp' ) no-repeat center top / 100% auto;
}

.q3 .p4 {
    background: transparent url( '/cp/2408_gummy/asset/img/p4-003.webp' ) no-repeat center top / 100% auto;
}

.q93 .p4 {
    background: transparent url( '/cp/2408_gummy/asset/img/p4-004.webp' ) no-repeat center top / 100% auto;
}

.p4-lead {
    position: absolute;
    inset-inline: 0;
    top: 6.55rem;
    margin: auto;
    text-align: center;
}

.p4-button-group {
    position: absolute;
    bottom: 4.25rem;
    inset-inline: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    gap: 1rem;
}

.p4-de-001 {
    position: absolute;
    inset-inline: 0;
    top: -1.25rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    padding-inline: 2.75rem;
    width: 15.625rem;
    height: 7.525rem;
}

.q1 .p4-de-001 {
    background: transparent url( '/cp/2408_gummy/asset/img/p4-021.webp') no-repeat center / auto 100%;
}

.q2 .p4-de-001 {
    background: transparent url( '/cp/2408_gummy/asset/img/p4-022.webp') no-repeat center / auto 100%;
}

.q3 .p4-de-001 {
    background: transparent url( '/cp/2408_gummy/asset/img/p4-023.webp') no-repeat center / auto 100%;
}

.q93 .p4-de-001 {
    background: transparent url( '/cp/2408_gummy/asset/img/p4-024.webp') no-repeat center / auto 100%;
}

.p4-de-100 {
    position: absolute;
    bottom: 6.5rem;
    left: 1.75rem;
    z-index: 10;
}

.p4-de-200 {
    position: absolute;
    bottom: 6.5rem;
    right: 2rem;
    z-index: 10;
}

.supply {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.25rem;
    color: #ffffff;
    font-style: italic;
    background: #251e1c;
}

.stage-name {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .2rem;
    padding-block: 1rem;
    line-height: 1.25;
}

.stage-name__line-001,
.stage-name__line-003 {
    font-size: .75rem;
    font-weight: 900;
}

.stage-name__line-002 {
    text-align: center;
}

:where( .overlay ) .p5 {
    position: relative;
    width: 19.125rem;
    height: 20.325rem;
}

:where( .overlay ) .p5-button-group {
    position: absolute;
    inset-inline: 0;
    bottom: 2rem;
    margin: auto;
}

.g-l-btn-b,
.g-l-btn-r,
.g-l-btn-y {
    position: relative;
    width: 14.75rem;
    height: 4.375rem;
    text-align: center;
    background: transparent url( '/cp/2408_gummy/asset/img/l-btn-w.webp' ) no-repeat center bottom / 100% auto;
}

.g-l-btn-b:before,
.g-l-btn-r:before,
.g-l-btn-y:before {
    content: '';
    position: absolute;
    top: -.5rem;
    z-index: 1;
    display: block;
    width: inherit;
    height: inherit;
}

@media ( min-width: 769px ) {
    .g-l-btn-b:hover:before,
    .g-l-btn-r:hover:before,
    .g-l-btn-y:hover:before {
        top: -.2rem;
    }
}

.g-l-btn-b:after,
.g-l-btn-r:after,
.g-l-btn-y:after {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 1;
    margin: auto;
    color: #FFFFFF;
    font-size: 1.425rem;
    font-weight: 600;
    translate: 0 25%;
}

:where( .overlay ) .g-l-btn-b:after,
:where( .overlay ) .g-l-btn-r:after,
:where( .overlay ) .g-l-btn-y:after {
    translate: 0 35%;
}

.g-l-btn-y:after {
    color: #251E1C;
}

@media ( min-width: 769px ) {
    .g-l-btn-b:hover:after,
    .g-l-btn-r:hover:after,
    .g-l-btn-y:hover:after {
        top: .3rem;
    }
}

.g-l-btn-b:before {
    background: transparent url( '/cp/2408_gummy/asset/img/l-btn-b.webp' ) no-repeat center bottom / 100% auto;
}

.g-l-btn-r:before {
    background: transparent url( '/cp/2408_gummy/asset/img/l-btn-r.webp' ) no-repeat center bottom / 100% auto;
}

.g-l-btn-y:before {
    background: transparent url( '/cp/2408_gummy/asset/img/l-btn-y.webp' ) no-repeat center bottom / 100% auto;
}

.g-s-btn-w {
    position: relative;
    width: 7.625rem;
    height: 2.1875rem;
    text-align: center;
    background: transparent url( '/cp/2408_gummy/asset/img/s-btn-w.webp' ) no-repeat center bottom / 100% auto;
}

.g-s-btn-w:before {
    content: '';
    position: absolute;
    top: -.5rem;
    z-index: 1;
    display: block;
    width: inherit;
    height: inherit;
}

@media ( min-width: 769px ) {
    .g-s-btn-w:hover:before {
        top: -.2rem;
    }
    
    .g-s-btn-w:hover:after {
        top: .3rem;
    }
}

.g-s-btn-w:after {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 1;
    margin: auto;
    color: #251E1C;
    font-size: .858rem;
    font-weight: 500;
    translate: 0 2.5%;
}

.g-s-btn-w:before {
    background: transparent url( '/cp/2408_gummy/asset/img/s-btn-w.webp' ) no-repeat center bottom / 100% auto;
}

[data-content='START']:after {
    content: 'START';
}

[data-content='GAME START']:after {
    content: 'GAME START';
}

[data-content='NEXT']:after {
    content: 'NEXT';
}

[data-content='NEXT STAGE']:after {
    content: 'NEXT STAGE';
}

[data-content='推奨環境']:after {
    content: '推奨環境';
}

[data-content='応募規約']:after {
    content: '応募規約';
}

.slider {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
    background: #ffffff;
}

.slider__item {
    overflow: hidden;
    width: 60.5rem;
    height: 17rem;
}

:where( .frame.active ) .slider__item {
    animation-name: bounce;
	animation-timing-function: linear;
	animation-duration: 20s;
	animation-iteration-count: infinite;
}

.counter {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 12rem;
    height: 9.625rem;
    background: transparent url( '/cp/2408_gummy/asset/img/p5-010.webp' ) no-repeat center / 100% auto;
    translate: -50% -50%;
    /* animation: cubic-bezier( 0.18, 1.41, 0.34, 0.94 ) 1.1s both infinite counter; */
    animation-timing-function: cubic-bezier( 0.18, 1.41, 0.34, 0.94 );
    animation-duration: 1.1s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: counter;
}

.counter__item {
    padding-inline: 0 .75rem;
    font-style: italic;
    font-size: 4.3125rem;
    font-weight: 600;
    text-align: center;
}

:where( .frame.ready ) .counter__item {
    padding-inline: 0;
    font-size: 2rem;
    font-weight: 700;
}

@keyframes bounce {
    0% {
        transform: translateX( 0 );
    }
	50% {
        transform: translateX( calc( -60.5rem + var( --main-max-width ) ) );
    }
	100% {
        transform: translateX( 0 );
    }
}

@keyframes counter {
    0% {
        scale: .75;
    }
    100% {
        scale: 1;
    }
}

@keyframes titleEffect {
    0% {
        top: 40%;
    }
    100% {
        top: 1.75rem;
    }
}

@keyframes slideUp {
    0% {
        translate: 0 2rem;
    }
    100% {
        translate: 0;
    }
}

.frame:not( :has( .progress ) ) {
    animation: linear .337s both 1 fadeIn, linear .267s both 1 slideUp;
    animation-delay: .367s;
}

.pp1.frame:not( :has( .progress ) ) {
    animation: linear .337s both 1 fadeIn;
}

.frame.secret.frame:not( :has( .progress ) ) {
    animation: linear 1.337s both 1 fadeIn;
}

.p1-pre-effect {
    position: absolute;
    inset-inline: 0;
    margin: auto;
    height: 20.96875rem;
    /* animation: linear .667s both 1 fadeIn, cubic-bezier( 0.68, 1.41, 0.34, 0.94 ) 2s both 1 titleEffect; */
    animation-timing-function: linear, cubic-bezier( 0.68, 1.41, 0.34, 0.94 );
    animation-duration: .667s, 2s;
    animation-fill-mode: both;
    animation-name: fadeIn, titleEffect;
    animation-delay: 0s, 2s;
}

.p1-pre-title {
    position: absolute;
    inset-inline: 0;
    z-index: 10;
    margin: auto;
}

.p1-pre-background {
    position: absolute;
    top: -12.625rem;
    left: -50%;
    max-width: none;
    width: auto;
    height: inherit;
    translate: 30% 0;
    animation: linear .667s both 1 fadeIn;
    animation-delay: 3s;
}

.p1:not( .progress ) .p1-lead {
    animation: linear .667s both 1 fadeIn;
    animation-delay: .667s;
}

.p1:not( .progress ) .p1-button-group {
    animation: linear .367s both 1 fadeIn;
    animation-delay: 1.367s;
}

.environment-l1 {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.5;
}

.environment-l1 > dt {
    font-weight: 600;
    letter-spacing: -.01rem;
}

.environment-l1 > dd {
    font-size: .85rem;
    font-weight: 500;
    margin-block: 0 1rem;
    padding-inline: 1rem 0;
}

.environment-l2 {
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.5;
}

.environment-l2 > dt {
    font-weight: 500;
    letter-spacing: -.01rem;
}

.environment-l2 > dd {
    font-size: .85rem;
    font-weight: 500;
    padding-inline: 1rem 0;
}

.terms-l1 {
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.5;
}

.terms-l1 > li {
    margin-block: 0 .5rem;
}

/**
 * result controll
 * 
 * @content
 */

.result.r3 {
    background: #F7C561;
}

.result.r2 {
    background: #E5C1E5;
}

.result.r1 {
    background: #75C3ED;
}

.result.r0 {
    color: #FFFFFF;
    background: #5C5C6C;
}

.result.r93-1 {
    background: #FFFFFF url( '/cp/2408_gummy/asset/img/r93-000.webp' ) repeat left -.5rem / 100%;
}

.result.r93-0 {
    color: #FFFFFF;
    background: #5C5C6C;
}

.result-de-001 {
    position: absolute;
    inset-inline: 0;
    top: -.375rem;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: auto;
}

.result.r0 .result-de-001,
.result.r93-0 .result-de-001 {
    top: -2.75rem;
}

.result-score {
    position: absolute;
    inset-inline: 0;
    top: 6.375rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: .5rem;
    margin: auto;
    width: 15.875rem;
    height: 9.375rem;
    background: transparent url( '/cp/2408_gummy/asset/img/r-020.webp' ) no-repeat center/auto 100%;
}

.score-simbols {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: .375rem;
}

.score-value {
    padding: .375rem .95rem;
    font-weight: 500;
    line-height: 1;
    background: #F7C561;
    border: 1px solid #251E1C;
    border-radius: 1rem;
}

.result-comment {
    position: absolute;
    inset-inline: 0;
    bottom: 11.5rem;
}

.result.r93-1 .result-comment {
    inset-inline: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: .5rem;
    margin: auto;
    width: 284px;
    height: 308px;
    line-height: 1.5;
    background: transparent url( '/cp/2408_gummy/asset/img/r93-020.webp' ) no-repeat center / 100%;
}

.result-button-group {
    position: absolute;
    inset-inline: 0;
    bottom: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .875rem;
}

.result.r3 .result-button-group {
    gap: 0;
}

.result-button {
    position: relative;
    min-width: 12.625rem;
    height: 2.8rem;
    text-decoration: none;
}

.result-button .result-button__upper {
    position: absolute;
    inset-inline: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.5rem;
    color: #FFFFFF;
    line-height: 1;
    text-decoration: none;
    background: #FFFFFF;
    border-radius: 2rem;
    border: 1px solid #251E1C;
}

@media ( min-width: 769px ) {
    .result-button:hover .result-button__upper {
        bottom: .15rem;
    }
}

.result-button.r .result-button__upper {
    background: #398EE8;
}

.result-button.x .result-button__upper {
    background: #251E1C;
}

.result-button:after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    z-index: 0;
    display: block;
    height: 2.5rem;
    line-height: 1;
    text-decoration: none;
    background: #FFFFFF;
    border-radius: 2rem;
    border: 1px solid #251E1C;
}

.result-de-040 {
    position: absolute;
    left: 1.25rem;
    bottom: 6rem;
}

.result-de-050 {
    position: absolute;
    right: 1.25rem;
    bottom: 6rem;
}

.result-de-061 {
    position: absolute;
    left: 4.25rem;
    top: -.625rem;
}

.result-de-062 {
    position: absolute;
    top: -.125rem;
    left: 8.75rem;
}

.result-de-063 {
    position: absolute;
    top: -1.25rem;
    right: 4.875rem;
}

.result-de-064 {
    position: absolute;
    top: .625rem;
    right: 2.5rem;
}

.result-de-065 {
    position: absolute;
    top: 1rem;
    right: 7.125rem;
}

.result-de-066 {
    position: absolute;
    top: 1.375rem;
    left: 6rem;
}

.result-de-067 {
    position: absolute;
    top: 3.625rem;
    left: -.75rem;
}

.result-de-068 {
    position: absolute;
    top: 3.125rem;
    right: -.5rem;
}

.result-de-069 {
    position: absolute;
    top: 6.375rem;
    left: 3.375rem;
}

.result-de-070 {
    position: absolute;
    top: 5.75rem;
    right: 2.875rem;
}

.result-de-071 {
    position: absolute;
    top: 8rem;
    left: -.5rem;
}

.result-de-072 {
    position: absolute;
    top: 8.5rem;
    right: .375rem;
}