@charset "UTF-8";


/* 中間 */
#battle.sec {
    position: relative;
    width: 100%;
    height: 100%;
    padding: min(17vw , 400px) 0 15vw 0;
    background: linear-gradient(90deg, #ee7800 0%, #ee7800 50%, #18B0C1 50%, #18B0C1 100%);
}

.battle-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    height: calc(100% + 10vw);
    background: linear-gradient(90deg, #ee7800 0%, #ee7800 50%, #18B0C1 50%, #18B0C1 100%);
}


#battle.sec::before{
    content: '';
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    transform: translateX(2vw);
    width: 100%;
    height: 100%;
    height: calc(100% + 10vw);
    mix-blend-mode: multiply;
    background: url(../images/ikebukuro-t.webp) repeat-y left / 5em;
}
#battle.sec::after{
    content: '';
    position: absolute;
    pointer-events: none;
    top: 0;
    right: 0;
    transform: translateX(-2vw);
    width: 100%;
    /* height: 100%; */
    height: calc(100% + 10vw);
    mix-blend-mode: multiply;
    background: url(../images/shinjuku-t.webp) repeat-y right / 5em;
}



#battle .flow-text {
    position: absolute;
    bottom: 0;
}



/* タイトル */


.battle-title {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 42vw;
    max-height: 800px;
    /* aspect-ratio: 5 / 2.1; */
    /* background-color: #ccc; */
}
.battle-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: -1;
    transform: translate(-50% , 0);
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 2;
    background: url(../images/battle/bg_1.webp) no-repeat center bottom / 100%;
}


#battle .sec-title {
    max-width: 1200px;
    width: 80%;
    height: auto;
    aspect-ratio: 5 / 2;
    /* background-color: #ccc;     */
    margin-bottom: 0;
}

.sec-title-in {
    height: 100%;
}

#battle .title-illust {
    width: 100%;
    height: 100%;
    /* background-color: #ccc; */
    transform: rotate(0);
}

#battle .sec-title p {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0, -.8em );
    font-size: 1.2em;
    text-align: left;
    font-weight: 700;
}


#battle .deco-item.item_1 {
    bottom: -5%;
    left: 25%;
    width: 15%;
}

#battle .deco-item.item_2 {
    top: 10%;
    right: 0%;
    width: 17%;
}
#battle .deco-item.item_3 {
    top: 0;
    left: 0;
    transform: translate(-42%, 40%);
    width: 17%;
}


#battle .deco {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    height: min(40vw, 700px);
    z-index: 1;
    overflow: hidden;
}

#battle .s-wrap .deco {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    height: 100%;
    aspect-ratio: initial;
    overflow: initial;
    z-index: 1;
}

#battle .deco-in {
    position: relative;
    width: 100%;
    height: 100%;
}


#battle .deco .item-1 {
    top: 10%;
    left: 50%;
    transform: translate(-50% , 0);
    width: 110%;
}


#battle .deco .item-2 {
    bottom: -20%;
    right: -3%;
    width: 42%;
    max-height: 120%;
}

#battle .deco .item-3 {
    bottom: -15%;
    left: -9%;
    width: 50%;
    max-height: 120%;
}


.title-deco {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50% , -20%);
    width: 90%;
    max-width: 1200px;
    height: 100%;
}

#battle .title-deco .deco-item {
    width: 15%;
    height: auto;
    aspect-ratio: 1 / 1;
    /* background-color: #ccc; */
}

#battle .title-deco .item-in {
    position: relative;
    width: 100%;
    height: 100%;
}

#battle .title-deco .item_1 {
    left: 0;
    bottom: 0;
    top: auto;
}

#battle .title-deco .item_2 {
    right: 0;
    bottom: 0;
    top: auto;

}


.title-deco .deco-item .item-img_1,
.title-deco .deco-item .item-img_2 {
    position: absolute;
    height: auto;
}

.title-deco .deco-item .item-img_1 {
    bottom: 0;
    left: 0;
    width: 70%;
}
.title-deco .deco-item .item-img_2 {
    top: 0;
    right: 0;
    width: 50%;
}


.title-deco .deco-item.item_2 .item-img_1 {
    bottom: 0;
    right: 0;
    left: auto;
    width: 70%;
}
.title-deco .deco-item.item_2 .item-img_2 {
    top: 0;
    left: 0;
    width: 50%;
}



/* .seesaw {
    transform-origin: center bottom;
    animation: seesawMotion 4s ease-in-out infinite;
} */


.s-wrap {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 10 / 3;
    /* margin-bottom: min(20vw , 200px); */
    margin-bottom: 5em;
    /* background-color: #ccc; */
}

.s-wrap .s-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 75%;
    height: 100%;
    z-index: -1;
}
.s-wrap .s-bg-in {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50vw;
    background-color: #fff;
}

.s-wrap .s-bg-in::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(-15% , 15%);
    z-index: -1;
    width: 55%;
    height: auto;
    aspect-ratio: 5 / 3;
    background: url(../images/battle/shadow_1.webp) no-repeat center / contain;
}

.s-wrap .s-bg-in::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(15% , 15%);
    z-index: -1;
    width: 55%;
    height: auto;
    aspect-ratio: 5 / 3;
    background: url(../images/battle/shadow_2.webp) no-repeat center / contain;
}


.s-wrap .flex {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.s-wrap .flex-item {
    position: relative;
    pointer-events: none;
    background: url(../images/battle/train-base.webp) no-repeat center / contain;
}
.s-wrap .flex-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50% , -12%);
    z-index: -1;
    width: 55%;
    height: auto;
    aspect-ratio: 4 / 5;
    background: url(../images/battle/fire.webp) no-repeat center / contain;
    transform-origin: center bottom;
    animation: fire2 5s ease-in-out infinite alternate;
}

@keyframes fire2 {
  0%, 100% {
    transform: translate(-50%, -12%) scale(1, 1) skewX(0deg);
  }
  25% {
    transform: translate(-50%, -12%) scale(0.9, 1.1) skewX(-2deg);
  }
  50% {
    transform: translate(-50%, -12%) scale(1.05, 0.95) skewX(2deg);
  }
  75% {
    transform: translate(-50%, -12%) scale(0.95, 1.15) skewX(-1deg);
  }
}


.s-wrap .flex-item.item_1 {
    width: 26%;
    flex-shrink: 0;
    /* animation: leftItemMotion 4s ease-in-out infinite; */
}

.s-wrap .flex-item.item_2 {
    width: 26%;
    flex-shrink: 0;
    /* animation: rightItemMotion 4s ease-in-out infinite; */
}



.s-wrap .flex-item img {
    width: 100%;
    height: auto;
    display: block;
}


.s-wrap .border {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 800px;
}

.s-wrap .border img {
    width: 100%;
    height: auto;
    display: block;

    transform-origin: center center;
    /* animation: lineMotion 4s ease-in-out infinite; */

}

.s-wrap .border span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 4em;
    height: auto;
    aspect-ratio: 1 / 1;
    background-color: #3366CC;
    border-radius: 50%;
    font-size: 1.5em;

    color: #fff;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;

    display: grid;
    place-items: center;
}


.sec-in.seesaw {
   padding: 4em 0 0 0;
}


/* --- アニメーション定義 --- */

@keyframes lineMotion {
    0% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
    100% { transform: rotate(-4deg); }
}

@keyframes leftItemMotion {
    0% { transform: translateY(.5em) scale(1); }
    50% { transform: translateY(-2em) scale(0.9); }
    100% { transform: translateY(.5em) scale(1); }
}

@keyframes rightItemMotion {
    0% { transform: translateY(-.5em) scale(0.9); }
    50% { transform: translateY(2em) scale(1); }
    100% { transform: translateY(-.5em) scale(0.9); }
}





.seesaw-t {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50% , -1.5em);
    z-index: 3;
    padding: .5em 2em;
}



.seesaw-t::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    transform: skewX(-20deg);
    background-color: #fff;
    filter: drop-shadow(.3em .2em 0px rgba(35, 24, 21, 1));
}

.seesaw-t-in {
    position: relative;
}

.b-ico {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(80%, -65%);
    width: 6em;
    height: auto;
    aspect-ratio: 4 / 5;
}
.b-ico img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.seesaw-t span {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(3.5em , -.5em) skewX(-20deg);
    display: block;
    width: 1em;
    height: calc(100% + 1em);
    background-color: #fff;
    filter: drop-shadow(.3em .2em 0px rgba(35, 24, 21, 1));
}

.seesaw-t span:nth-child(2) {
    transform: translate(4.5em , -.5em) skewX(-20deg);
    width: .5em;
}

.seesaw-t p {
    font-weight: 700;
    font-size: min(1.82vw , 20px);
}




/* 感情表現 */
#battle .deco-emo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    height: 100%;
    aspect-ratio: initial;
    overflow: visible;
    z-index: 6;
    pointer-events: none;
}

#battle .deco-emo-item {
    position: absolute;
    width: 100%;
    height: auto;
    opacity: 0;
    visibility: hidden;
    /* 消えるときはスッとフェードアウト */
    transition: opacity 0.2s ease, visibility 0.2s;
    transform-origin: center center;
}

#battle .deco-emo-item.active {
    visibility: visible;
}

#battle .deco-emo-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}


/* ===================================================
   ポップな緩急アニメーション定義（Keyframes）
   =================================================== */

/* --- キラキラ（通常向き）：くるんと回りながらポンッと飛び出してぷるんと落ち着く --- */
@keyframes popSparkleNormal {
    0% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.1) rotate(-25deg);
    }
    60% {
        opacity: 1;
        transform: translate(var(--tx), var(--ty)) scale(1.15) rotate(10deg);
    }
    80% {
        transform: translate(var(--tx), var(--ty)) scale(0.92) rotate(-4deg);
    }
    100% {
        opacity: 1;
        transform: translate(var(--tx), var(--ty)) scale(1) rotate(0deg);
    }
}

/* --- キラキラ（左右反転向き）：反転状態を維持したまま弾ける --- */
@keyframes popSparkleFlipped {
    0% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(-0.1, 0.1) rotate(25deg);
    }
    60% {
        opacity: 1;
        transform: translate(var(--tx), var(--ty)) scale(-1.15, 1.15) rotate(-10deg);
    }
    80% {
        transform: translate(var(--tx), var(--ty)) scale(-0.92, 0.92) rotate(4deg);
    }
    100% {
        opacity: 1;
        transform: translate(var(--tx), var(--ty)) scale(-1, 1) rotate(0deg);
    }
}

/* --- 汗（通常向き）：ボワンと膨らんでからピタッと止まり、焦り感を演出 --- */
@keyframes popSweatNormal {
    0% {
        opacity: 0;
        transform: translate(var(--tx), calc(var(--ty) - 10%)) scale(0.2, 0.4);
    }
    55% {
        opacity: 1;
        transform: translate(var(--tx), calc(var(--ty) + 4%)) scale(1.18, 0.88);
    }
    75% {
        transform: translate(var(--tx), calc(var(--ty) - 2%)) scale(0.95, 1.05);
    }
    100% {
        opacity: 1;
        transform: translate(var(--tx), var(--ty)) scale(1, 1);
    }
}

/* --- 汗（左右反転向き）：反転状態を維持したままバウンド --- */
@keyframes popSweatFlipped {
    0% {
        opacity: 0;
        transform: translate(var(--tx), calc(var(--ty) - 10%)) scale(-0.2, 0.4);
    }
    55% {
        opacity: 1;
        transform: translate(var(--tx), calc(var(--ty) + 4%)) scale(-1.18, 0.88);
    }
    75% {
        transform: translate(var(--tx), calc(var(--ty) - 2%)) scale(-0.95, 1.05);
    }
    100% {
        opacity: 1;
        transform: translate(var(--tx), var(--ty)) scale(-1, 1);
    }
}


/* --- 退場アニメーション：きゅっと縮みながらふわっと消える --- */
@keyframes popLeaveNormal {
    0% {
        opacity: 1;
        transform: translate(var(--tx), var(--ty)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.3);
    }
}

/* 反転要素用 */
@keyframes popLeaveFlipped {
    0% {
        opacity: 1;
        transform: translate(var(--tx), var(--ty)) scale(-1, 1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(-0.3, 0.3);
    }
}

/* --- 退場クラスが付いたときの挙動 --- */
#battle .deco-emo-item.is-leaving {
    visibility: visible;
    animation: popLeaveNormal 0.2s ease-in forwards !important;
}

/* 反転している要素の退場 */
#battle .item_1 .emo-adv .deco-emo-item.is-leaving,
#battle .item_1 .emo-disadv .deco-emo-item.deco_2.is-leaving,
#battle .item_2 .emo-disadv .deco-emo-item.deco_1.is-leaving {
    animation: popLeaveFlipped 0.2s ease-in forwards !important;
}


/* ===================================================
   優勢（きらきら：emo-adv）の配置 & アニメーション適用
   =================================================== */

/* --- 右側（item_2）にある場合 --- */
#battle .item_2 .emo-adv .deco-emo-item.deco_1 {
    top: 0;
    left: 0;
    width: 22%;
    --tx: -20%;
    --ty: -30%;
    transform: translate(var(--tx), var(--ty));
}
#battle .item_2 .emo-adv .deco-emo-item.deco_1.active {
    animation: popSparkleNormal 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards;
}

#battle .item_2 .emo-adv .deco-emo-item.deco_2 {
    bottom: 5%;
    right: 0;
    left: auto;
    width: 18%;
    --tx: 35%;
    --ty: 20%;
    transform: translate(var(--tx), var(--ty));
}
#battle .item_2 .emo-adv .deco-emo-item.deco_2.active {
    animation: popSparkleNormal 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards;
}

/* --- 左側（item_1）にある場合（反転） --- */
#battle .item_1 .emo-adv .deco-emo-item.deco_1 {
    top: 0;
    right: 0;
    width: 22%;
    --tx: -20%;
    --ty: -30%;
    transform: translate(var(--tx), var(--ty)) scale(-1, 1);
}
#battle .item_1 .emo-adv .deco-emo-item.deco_1.active {
    animation: popSparkleFlipped 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards;
}

#battle .item_1 .emo-adv .deco-emo-item.deco_2 {
    bottom: 5%;
    left: 0;
    right: auto;
    width: 18%;
    --tx: -35%;
    --ty: 20%;
    transform: translate(var(--tx), var(--ty)) scale(-1, 1);
}
#battle .item_1 .emo-adv .deco-emo-item.deco_2.active {
    animation: popSparkleFlipped 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards;
}


/* ===================================================
   劣勢（冷や汗：emo-disadv）の配置 & アニメーション適用
   =================================================== */

/* --- 左側（item_1）にある場合 --- */
#battle .item_1 .emo-disadv .deco-emo-item.deco_1 {
    top: 0;
    right: 0;
    width: 20%;
    --tx: -25%;
    --ty: -25%;
    transform: translate(var(--tx), var(--ty));
}
#battle .item_1 .emo-disadv .deco-emo-item.deco_1.active {
    animation: popSweatNormal 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
}

#battle .item_1 .emo-disadv .deco-emo-item.deco_2 {
    bottom: 5%;
    left: 0;
    right: auto;
    width: 18%;
    --tx: 10%;
    --ty: 25%;
    transform: translate(var(--tx), var(--ty)) scale(-1, 1);
}
#battle .item_1 .emo-disadv .deco-emo-item.deco_2.active {
    animation: popSweatFlipped 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
}

/* --- 右側（item_2）にある場合 --- */
#battle .item_2 .emo-disadv .deco-emo-item.deco_1 {
    top: 0;
    left: 0;
    width: 20%;
    --tx: 25%;
    --ty: -25%;
    transform: translate(var(--tx), var(--ty)) scale(-1, 1);
}
#battle .item_2 .emo-disadv .deco-emo-item.deco_1.active {
    animation: popSweatFlipped 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
}

#battle .item_2 .emo-disadv .deco-emo-item.deco_2 {
    bottom: 5%;
    right: 0;
    width: 18%;
    --tx: 10%;
    --ty: 25%;
    transform: translate(var(--tx), var(--ty));
}
#battle .item_2 .emo-disadv .deco-emo-item.deco_2.active {
    animation: popSweatNormal 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
}




/* 得点王 */


.point-king {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding-bottom: min(5.2vw , 80px);
}

.point-king .flex-item .flex-t {
    width: 100%;
    /* height: 7em; */
    height: min(20.8vw , 220px);
}


#battle .point-king .sec-title {
    max-width: initial;
    width: 60%;
    margin: 0 auto;
}



#battle .point-king .title-illust {
    width: 30%;
    transform: translate(-20%, -22%);
}


.point-king .flex {
    gap: 2em;
    padding-top: min(13vw , 160px);
}


.point-king .flex-item {
    position: relative;
    width: 50%;
    background-color: #fff;
    padding: min(9.1vw , 120px) .5em 1.5em .5em;
    border-radius: 2em;
}

.point-king .flex-t {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50% , -50%);

    width: 100%;
    height: 10em;
}


.point-king .point-p {
    max-width: 800px;
    margin: 2em auto 0 auto;
    padding: 1em .8em;
    border-radius: 1em;
    border: .25em solid #3366CC;
    background-color: #fff;
}
.point-king .point-p p {
    margin-bottom: .5em;
}
.point-king .point-p p:last-child {
    margin-bottom: 0;
}

.top-3 {
    max-width: 472px;
    margin: 0 auto;
    margin-bottom: 1em;
    /* padding: 0 1em; */
    font-size: 1.5em;
    font-size: min(3.25vw , 30px);
    font-weight: 700;
}

.top-3 .top-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5em;
    border-bottom: 1px solid #D9D9D9;
}
.top-3 .top-name:last-child {
    border-bottom: 0;
}

.top-3 .top-name p {
    display: flex;
}

.flex-item .top-3 p:not(.flex-t) {
    color: #231815;
}

.top-3 .top-name p::before {
    content: '';
    display: block;
    width: 3em;
    height: auto;
    aspect-ratio: 2 / 1;
    margin-right: .5em;
    background: url(../images/battle/lank_1.webp) no-repeat center / contain;
}
.top-3 .top-name.top_2 p::before {
    background: url(../images/battle/lank_2.webp) no-repeat center / contain;
}
.top-3 .top-name.top_3 p::before {
    background: url(../images/battle/lank_3.webp) no-repeat center / contain;
}



.top-3 .top-name span.team {
    width: 1.5em;
    height: 1.5em;
    margin-left: .25em;
}
.top-3 .top-name span.team.team_1 {
    background: url(../images/battle/si-icon.webp) no-repeat center / contain;
}
.top-3 .top-name span.team.team_2 {
    background: url(../images/battle/s-icon.webp) no-repeat center / contain;
}

.flex-item:first-child .top-3 p:not(.flex-t)   {
    margin-bottom: 0;
}


.lank-box {
    /* display: flex;
    justify-content: center;
    align-items: center; */
    /* gap: 1em; */
    background-color: #FFE5C9;
}
.lank-box:nth-child(even){
    background-color: initial;
}

.lank-flex {
    display: flex;
    max-width: 480px;
    width: 96%;
    margin: 0 auto;
    /* gap: 1em; */
    gap: min(1.56vw , 20px);
}

.lank-box .top-name {
    width: 50%;
    padding: .3em 0;
}

#battle .lank-box p {
    display: flex;
    justify-content: center;
    align-items: center;
    /* font-size: 1em; */
    font-size: min(1.82vw , 20px);
    color: #231815;
    margin: 0;
    font-weight: 700;
}

.top-name.visibility {
    visibility: hidden;
}

#battle .lank-box p span.team {
    display: block;
    width: 1.5em;
    height: 1.5em;
    margin-left: .25em;
    background-color: #ccc;
}
#battle .lank-box p span.team.team_1 {
    background:  url(../images/battle/si-icon.webp) no-repeat center / contain;
}
#battle .lank-box p span.team.team_2 {
    background:  url(../images/battle/s-icon.webp) no-repeat center / contain;
}

#battle .lank-box p span.battle-number {
    margin-right: .25em;
    width: 2em;
}

#battle .lank-box p span.name {
    width: calc(100% - 4em);
    text-align: left;
}



/* 戦況デコ */

.s-wrap .flex-item .adv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.s-wrap .flex-item .adv-in {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 左側（item_1）：池袋線優勢バッジ */
.s-wrap .flex-item.item_1 .adv-in img {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
    transform-origin: center center;
    transform: translate(-20%, -60%) rotate(-4deg) scale(1);
    animation: badgeWobble 2s ease-in-out infinite both;
}

/* 右側（item_2）：新宿線優勢バッジ */
.s-wrap .flex-item.item_2 .adv-in img {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: 80%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
    transform-origin: center center;
    transform: translate(20%, -60%) rotate(4deg) scale(1);
    animation: badgeWobble-r 2s ease-in-out infinite both;
}

@keyframes badgeWobble {
    0% {
        transform: translate(-20%, -60%) rotate(-4deg) scale(1);
    }
    50% {
        transform: translate(-20%, -60%) rotate(2deg) scale(1.03);
    }
    100% {
        transform: translate(-20%, -60%) rotate(-4deg) scale(1);
    }
}

@keyframes badgeWobble-r {
    0% {
        transform: translate(20%, -60%) rotate(4deg) scale(1);
    }
    50% {
        transform: translate(20%, -60%) rotate(-2deg) scale(1.03);
    }
    100% {
        transform: translate(20%, -60%) rotate(4deg) scale(1);
    }
}


/* ===================================================
   ヤジ吹き出し（.deco）: ランダムポップアップ用設定
   =================================================== */
.s-wrap .flex-item .deco {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: visible; /* 吹き出しが飛び出しても切り抜かれないようにする */
}

.s-wrap .flex-item .deco-in {
    position: relative;
    width: 100%;
    height: 100%;
}

.s-wrap .flex-item .deco-item {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, visibility 0.3s;
}

.s-wrap .flex-item .deco-item img {
    width: 100%;
    height: auto;
    display: block;
}

.s-wrap .flex-item .deco-item.active {
    opacity: 1;
    visibility: visible;
}

/* 池袋線 */
.s-wrap .flex-item.item_1 .deco-item.deco_1 {
    width: 60%;
    right: 0;
    top: 0;
    transform: scale(0.3) translate(50% , -50%) rotate(10deg);
}
.s-wrap .flex-item.item_1 .deco-item.deco_1.active {
    transform: scale(1) translate(50% , -50%) rotate(10deg);
}

.s-wrap .flex-item.item_1 .deco-item.deco_2 {
    width: 50%;
    left: 0;
    bottom: 0;
    transform: scale(0.3) translate(-20% , 0%) rotate(-15deg);
}
.s-wrap .flex-item.item_1 .deco-item.deco_2.active {
    transform: scale(1) translate(-20% , 0%) rotate(-15deg);
}

.s-wrap .flex-item.item_1 .deco-item.deco_3 {
    width: 80%;
    left: 0;
    bottom: 0;
    transform: scale(0.3) translate(-10% , 20%) rotate(-15deg);
}
.s-wrap .flex-item.item_1 .deco-item.deco_3.active {
    transform: scale(1) translate(-10% , 20%) rotate(-15deg);
}

.s-wrap .flex-item.item_1 .deco-item.deco_4 {
    width: 60%;
    right: 0;
    top: 0;
    transform: scale(0.3) translate(50% , -50%) rotate(0deg);
}
.s-wrap .flex-item.item_1 .deco-item.deco_4.active {
    transform: scale(1) translate(50% , -50%) rotate(0deg);
}

.s-wrap .flex-item.item_1 .deco-item.deco_5 {
    width: 60%;
    left: 0;
    bottom: 0;
    transform: scale(0.3) translate(-20% , 10%) rotate(-20deg);
}
.s-wrap .flex-item.item_1 .deco-item.deco_5.active {
    transform: scale(1) translate(-20% , 10%) rotate(-20deg);
}

.s-wrap .flex-item.item_1 .deco-item.deco_6 {
    width: 60%;
    right: 0;
    bottom: 0;
    transform: scale(0.3) translate(20% , 10%) rotate(15deg);
}
.s-wrap .flex-item.item_1 .deco-item.deco_6.active {
    transform: scale(1) translate(20% , 10%) rotate(15deg);
}

.s-wrap .flex-item.item_1 .deco-item.deco_7 {
    width: 60%;
    right: 0;
    bottom: 0;
    transform: scale(0.3) translate(20% , 10%) rotate(10deg);
}
.s-wrap .flex-item.item_1 .deco-item.deco_7.active {
    transform: scale(1) translate(20% , 10%) rotate(10deg);
}

.s-wrap .flex-item.item_1 .deco-item.deco_8 {
    width: 40%;
    left: 0;
    bottom: 0;
    transform: scale(0.3) translate(-30% , -10%) rotate(-20deg);
}
.s-wrap .flex-item.item_1 .deco-item.deco_8.active {
    transform: scale(1) translate(-30% , -10%) rotate(-20deg);
}


.s-wrap .flex-item.item_1 .deco-item.deco_9 {
    width: 60%;
    right: 0;
    top: 0;
    transform: scale(0.3) translate(50% , -50%) rotate(5deg);
}
.s-wrap .flex-item.item_1 .deco-item.deco_9.active {
    transform: scale(1) translate(50% , -50%) rotate(5deg);
}



/* 新宿線 */
.s-wrap .flex-item.item_2 .deco-item.deco_1 {
    width: 60%;
    right: 0;
    bottom: 0;
    transform: scale(0.3) translate(20% , -5%) rotate(10deg);
}
.s-wrap .flex-item.item_2 .deco-item.deco_1.active {
    transform: scale(1) translate(20% , -5%) rotate(10deg);
}

.s-wrap .flex-item.item_2 .deco-item.deco_2 {
    width: 50%;
    left: 0;
    bottom: 0;
    transform: scale(0.3) translate(-20% , 0%) rotate(-15deg);
}
.s-wrap .flex-item.item_2 .deco-item.deco_2.active {
    transform: scale(1) translate(-20% , 0%) rotate(-15deg);
}

.s-wrap .flex-item.item_2 .deco-item.deco_3 {
    width: 80%;
    left: 0;
    bottom: 0;
    transform: scale(0.3) translate(-10% , 20%) rotate(-15deg);
}
.s-wrap .flex-item.item_2 .deco-item.deco_3.active {
    transform: scale(1) translate(-10% , 20%) rotate(-15deg);
}

.s-wrap .flex-item.item_2 .deco-item.deco_4 {
    width: 60%;
    right: 0;
    bottom: 0;
    transform: scale(0.3) translate(0% , 15%) rotate(0deg);
}
.s-wrap .flex-item.item_2 .deco-item.deco_4.active {
    transform: scale(1) translate(0% , 15%) rotate(0deg);
}

.s-wrap .flex-item.item_2 .deco-item.deco_5 {
    width: 60%;
    left: 0;
    bottom: 0;
    transform: scale(0.3) translate(-50% , 10%) rotate(-20deg);
}
.s-wrap .flex-item.item_2 .deco-item.deco_5.active {
    transform: scale(1) translate(-50% , 10%) rotate(-20deg);
}

.s-wrap .flex-item.item_2 .deco-item.deco_6 {
    width: 60%;
    left: 0;
    top: 0;
    transform: scale(0.3) translate(-50% , -25%) rotate(-15deg);
}
.s-wrap .flex-item.item_2 .deco-item.deco_6.active {
    transform: scale(1) translate(-50% , -25%) rotate(-15deg);
}

.s-wrap .flex-item.item_2 .deco-item.deco_7 {
    width: 60%;
    right: 0;
    bottom: 0;
    transform: scale(0.3) translate(20% , 10%) rotate(10deg);
}
.s-wrap .flex-item.item_2 .deco-item.deco_7.active {
    transform: scale(1) translate(20% , 10%) rotate(10deg);
}

.s-wrap .flex-item.item_2 .deco-item.deco_8 {
    width: 40%;
    left: 0;
    top: 0;
    transform: scale(0.3) translate(-30% , -20%) rotate(-20deg);
}
.s-wrap .flex-item.item_2 .deco-item.deco_8.active {
    transform: scale(1) translate(-30% , -20%) rotate(-20deg);
}


.s-wrap .flex-item.item_2 .deco-item.deco_9 {
    width: 60%;
    right: 0;
    bottom: 0;
    transform: scale(0.3) translate(10% , 20%) rotate(5deg);
}
.s-wrap .flex-item.item_2 .deco-item.deco_9.active {
    transform: scale(1) translate(10% , 20%) rotate(5deg);
}







/* 新規登録者数_9月23日時点「新宿線」優勢 */
.s-wrap_1 .border img {
    animation: lineIkebukuroAdv 3s ease-in-out infinite;
}
.s-wrap_1 .flex-item.item_1 {
    animation: itemAdvLeft 3s ease-in-out infinite;
}
.s-wrap_1 .flex-item.item_2 {
    animation: itemDisadvRight 3s ease-in-out infinite;
}


/* 定期券利用回数_9月23日時点「池袋線」優勢 */

.s-wrap_2 .border img {
    animation: lineShinjukuAdv 3s ease-in-out infinite;
}
.s-wrap_2 .flex-item.item_1 {
    animation: itemDisadvLeft 3s ease-in-out infinite;
}
.s-wrap_2 .flex-item.item_2 {
    animation: itemAdvRight 3s ease-in-out infinite;
}

/* PASMO_9月23日時点「新宿線」優勢 */
.s-wrap_3 .border img {
    animation: lineShinjukuAdv 3s ease-in-out infinite;
}
.s-wrap_3 .flex-item.item_1 {
    animation: itemDisadvLeft 3s ease-in-out infinite;
}
.s-wrap_3 .flex-item.item_2 {
    animation: itemAdvRight 3s ease-in-out infinite;
}



/* --- 中央の線（バー）--- */
/* 新宿線優勢: 4度〜6度の傾きで小刻みに揺れる（右下がり） */
@keyframes lineShinjukuAdv {
    0%, 100% { transform: rotate(5deg); }
    50%      { transform: rotate(2deg); }
}
/* 池袋線優勢: -4度〜-6度の傾きで小刻みに揺れる（左下がり） */
@keyframes lineIkebukuroAdv {
    0%, 100% { transform: rotate(-5deg); }
    50%      { transform: rotate(-2deg); }
}


/* --- 電車アイテム：優勢（沈んで大きく scale: 1.08）--- */
/* 左側（池袋線）が優勢 */
@keyframes itemAdvLeft {
    0%, 100% { transform: translateY(1.5em) scale(1.08); }
    50%      { transform: translateY(1em) scale(1.06); }
}
/* 右側（新宿線）が優勢 */
@keyframes itemAdvRight {
    0%, 100% { transform: translateY(1.5em) scale(1.08); }
    50%      { transform: translateY(1em) scale(1.06); }
}


/* --- 電車アイテム：劣勢（浮いて小さく scale: 0.92）--- */
/* 左側（池袋線）が劣勢 */
@keyframes itemDisadvLeft {
    0%, 100% { transform: translateY(-1.5em) scale(0.92); }
    50%      { transform: translateY(-1em) scale(0.94); }
}
/* 右側（新宿線）が劣勢 */
@keyframes itemDisadvRight {
    0%, 100% { transform: translateY(-1.5em) scale(0.92); }
    50%      { transform: translateY(-1em) scale(0.94); }
}




/* オーディエンス */



#battle .audience {
    transform: translate(-50%, -10%);
    animation: audienceYuraYura2 3s ease-in-out infinite;

}

@keyframes audienceYuraYura2 {
    0% {
        transform: translate(-50%, -10%);
    }
    50% {
        transform: translate(-50%, -15%);
    }
    100% {
        transform: translate(-50%, -10%);
    }
}



@media screen and (max-width: 768px) {

    .seesaw-t {
        position: initial;
        width: 85%;
        transform: translate(0 , 0);
        margin: 0 auto 2em auto;
    }

    .seesaw-t p {
        font-size: min(3.75vw  , 18px);
    }


    .s-wrap .flex-item.item_2,
    .s-wrap .flex-item.item_1 {
        width: 35%;
    }

    .seesaw-t span:nth-child(2) {
        display: none;
    }

    .s-wrap .border span {
        font-size: 1.2em;
    }


    /* 得点王 */

    .point-king .flex-item {
        width: 100%;
        max-width: 600px;
        margin: 0 auto 5em auto;
        padding: 6em .5em 1.5em .5em;
    }

    .point-king .flex-item:last-child {
        margin: 0 auto;
    }

    .lank-flex {
        max-width: 450px;
    }

    .point-king .flex-item .flex-t {
        position: absolute;
        font-size: 1em;
        height: 11em;
    }

    .point-king .flex-item .flex-t::before {
        display: none;
    }

    .point-king .flex-item .flex-t img {
        height: 100%;
        object-position: center;
    }

    .point-king .flex {
        padding-top: 8em;
        flex-direction: column;
    }

    #battle .lank-box p {
        font-size: 1em;
    }

    .top-3 {
        font-size: 1.2em;
    }




    .s-wrap .flex-item.item_1 .deco-item.deco_1 {
        width: 100%;
        max-width: 150px;
        transform: scale(0.3) translate(80% , -30%) rotate(10deg);
    }
    .s-wrap .flex-item.item_1 .deco-item.deco_1.active {
        transform: scale(1) translate(80% , -30%) rotate(10deg);
    }

    .s-wrap .flex-item.item_1 .deco-item.deco_2 {
        width: 70%;
        max-width: 120px;
        transform: scale(0.3) translate(-20% , 50%) rotate(-20deg);
    }
    .s-wrap .flex-item.item_1 .deco-item.deco_2.active {
        transform: scale(1) translate(-20% , 50%) rotate(-20deg);
    }

    .s-wrap .flex-item.item_1 .deco-item.deco_3 {
        width: 120%;
        max-width: 200px;
        transform: scale(0.3) translate(-10% , 50%) rotate(-15deg);
    }
    .s-wrap .flex-item.item_1 .deco-item.deco_3.active {
        transform: scale(1) translate(-10% , 50%) rotate(-15deg);
    }

    .s-wrap .flex-item.item_1 .deco-item.deco_4 {
        width: 110%;
        max-width: 160px;
        transform: scale(1) translate(50% , -50%) rotate(0deg);
    }
    .s-wrap .flex-item.item_1 .deco-item.deco_4.active {
        transform: scale(1) translate(70% , -50%) rotate(0deg);
    }

    .s-wrap .flex-item.item_1 .deco-item.deco_5 {
        width: 85%;
        max-width: 150px;
        transform: scale(0.3) translate(-20% , 50%) rotate(-20deg);
    }
    .s-wrap .flex-item.item_1 .deco-item.deco_5.active {
        transform: scale(1) translate(-20% , 50%) rotate(-20deg);
    }

    .s-wrap .flex-item.item_1 .deco-item.deco_6 {
        width: 75%;
        max-width: 150px;
        transform: scale(0.3) translate(20% , 50%) rotate(5deg);
    }
    .s-wrap .flex-item.item_1 .deco-item.deco_6.active {
        transform: scale(1) translate(20% , 50%) rotate(5deg);
    }

    .s-wrap .flex-item.item_1 .deco-item.deco_7 {
        width: 100%;
        max-width: 200px;
    }

    .s-wrap .flex-item.item_1 .deco-item.deco_8 {
        width: 60%;
        max-width: 110px;
        left: auto;
        bottom: auto;
        right: 0;
        top: 0;
        transform: scale(0.3) translate(60% , -20%) rotate(20deg);
    }
    .s-wrap .flex-item.item_1 .deco-item.deco_8.active {
        transform: scale(1) translate(60% , -20%) rotate(20deg);
    }


    .s-wrap .flex-item.item_1 .deco-item.deco_9 {
        width: 100%;
        max-width: 150px;
        transform: scale(0.3) translate(70% , -50%) rotate(5deg);
    }
    .s-wrap .flex-item.item_1 .deco-item.deco_9.active {
        transform: scale(1) translate(70% , -50%) rotate(5deg);
    }



    /* 新宿線 */
    .s-wrap .flex-item.item_2 .deco-item.deco_1 {
        width: 87%;
        max-width: 180px;
        transform: scale(0.3) translate(20% , 50%) rotate(20deg);
    }
    .s-wrap .flex-item.item_2 .deco-item.deco_1.active {
        transform: scale(1) translate(10% , 45%) rotate(20deg);
    }

    .s-wrap .flex-item.item_2 .deco-item.deco_2 {
        width: 60%;
        max-width: 120px;
        transform: scale(0.3) translate(-50% , 20%) rotate(-15deg);
    }
    .s-wrap .flex-item.item_2 .deco-item.deco_2.active {
        transform: scale(1) translate(-50% , 20%) rotate(-15deg);
    }

    .s-wrap .flex-item.item_2 .deco-item.deco_3 {
        width: 110%;
        max-width: 200px;
        transform: scale(0.3) translate(-20% , 20%) rotate(-15deg);
    }
    .s-wrap .flex-item.item_2 .deco-item.deco_3.active {
        transform: scale(1) translate(-20% , 20%) rotate(-15deg);
    }

    .s-wrap .flex-item.item_2 .deco-item.deco_4 {
        width: 95%;
        max-width: 150px;
        transform: scale(0.3) translate(20% , 50%) rotate(0deg);
    }
    .s-wrap .flex-item.item_2 .deco-item.deco_4.active {
        transform: scale(1) translate(10% , 55%) rotate(0deg);
    }

    .s-wrap .flex-item.item_2 .deco-item.deco_5 {
        width: 80%;
        max-width: 150px;
        transform: scale(0.3) translate(-50% , 40%) rotate(-20deg);
    }
    .s-wrap .flex-item.item_2 .deco-item.deco_5.active {
        transform: scale(1) translate(-50% , 40%) rotate(-20deg);
    }

    .s-wrap .flex-item.item_2 .deco-item.deco_6 {
        width: 85%;
        max-width: 150px;
        transform: scale(0.3) translate(-50% , -55%) rotate(-15deg);
    }
    .s-wrap .flex-item.item_2 .deco-item.deco_6.active {
        transform: scale(1) translate(-50% , -55%) rotate(-15deg);
    }

    .s-wrap .flex-item.item_2 .deco-item.deco_7 {
        width: 100%;
        max-width: 180px;
    }


    .s-wrap .flex-item.item_2 .deco-item.deco_8 {
        width: 60%;
        max-width: 120px;
        transform: scale(0.3) translate(-30% , -50%) rotate(-20deg);
    }
    .s-wrap .flex-item.item_2 .deco-item.deco_8.active {
        transform: scale(1) translate(-30% , -50%) rotate(-20deg);
    }


    .s-wrap .flex-item.item_2 .deco-item.deco_9 {
        width: 90%;
        max-width: 150px;
        transform: scale(0.3) translate(15% , 50%) rotate(10deg);
    }
    .s-wrap .flex-item.item_2 .deco-item.deco_9.active {
        transform: scale(1) translate(15% , 50%) rotate(10deg);
    }

    #battle.sec {
        padding: min(17vw , 400px) 0 20vw 0;
    }

    #battle .audience {
        width: 150%;
        /* background-color: #ccc; */
        transform: translate(-50%, 0vw);
        animation: audienceYuraYura2 3s ease-in-out infinite;

    }

    @keyframes audienceYuraYura2 {
        0% {
            transform: translate(-50%, 0vw);
        }
        50% {
            transform: translate(-50%, -2vw);
        }
        100% {
            transform: translate(-50%, 0vw);
        }
    }

    #battle .point-king .sec-title {
        width: 100%;
        max-width: 500px;
    }

    .point-king .point-p {
        text-align: left;
        max-width: 500px;
    }


    .b-ico {

        transform: translate(45%, -65%);

    }


}