.stage {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #d5ecb0 url(/2026/images/top/bg_stage.svg) center center;
    background-size: contain;
    overflow: hidden;
    animation: stageHide 0.5s ease 7.8s forwards;
}
@keyframes stageHide {
    0%   { opacity: 1; visibility: visible; }
    99%  { opacity: 0; visibility: visible; }
    100% { opacity: 0; visibility: hidden;  }
}
.scene1 {
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: sceneIn 0.4s ease-out 0.8s forwards;
}
@keyframes sceneIn {
    to { opacity: 1; }
}
.group {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    opacity: 0;
    transform-origin: center center;
    animation: groupAnim 2.8s ease-in-out 1.0s forwards;
}
.group .pc {
    width: 70vw;
    max-width: 700px;
}
.group .sp {
    width: 70vw;
    max-width: 350px;
}
@keyframes groupAnim {
    0%   { opacity: 0; transform: scale(0.82); }
    18.5%  { opacity: 1; transform: scale(1.01); }
    19%  { opacity: 1; transform: scale(1);    }
    68%  { opacity: 1; transform: scale(1);    }
    88%  { opacity: 0; transform: scale(0.55); }
    100% { opacity: 0; transform: scale(0.55); }
}
.scene2 {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    opacity: 0;
    animation:
        scene2Scale 3.3s cubic-bezier(0.22, 1, 0.36, 1) 4.5s forwards,
        scene2Fade  3.3s linear 4.5s forwards;
}
@keyframes scene2Scale {
    0%   { transform: scale(0.25); }
    18.5%  { opacity: 1; transform: scale(0.355); }
    19%  { opacity: 1; transform: scale(0.35);    }
    40%  { transform: scale(0.35); }
    100% { transform: scale(3.2); }
}
@keyframes scene2Fade {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
}
.scene2 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}