#premium_base {
    height: 100%;
    width: auto;
    position: relative;
    opacity: 0;
}

#premium_area {
    width: 100%;
    height: 100%;
}

#item {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: scale(0.75);
}

#item_area {
    position: absolute;
    width: 320px;
    width: calc(var(--vh, 1vh) * 100 * (320 / 960));
    height: 320px;
    height: calc(var(--vh, 1vh) * 100 * (320 / 960));
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/item_back.png");
    background-size: cover;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#item_area_atari {
    position: absolute;
    width: 540px;
    width: calc(var(--vh, 1vh) * 100 * (540 / 960));
    height: 540px;
    height: calc(var(--vh, 1vh) * 100 * (540 / 960));
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/item_back2.png");
    background-size: cover;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#item_area img {
    position: absolute;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#item_atari_halo, #item_atari {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
}

@keyframes anime_clockwise {
    0% {transform: translate(-50%, -50%) rotateZ(0deg);}
    100% {transform: translate(-50%, -50%) rotateZ(360deg);}
}

@keyframes anime_counterclockwise {
    0% {transform: translate(-50%, -50%) rotateZ(0deg);}
    100% {transform: translate(-50%, -50%) rotateZ(-360deg);}
}

@keyframes anime_koatari {
    0% {opacity: 1; transform: translate(-50%, -50%) rotateZ(0deg) scale(0);}
    100% {opacity: 0; transform: translate(-50%, -50%) rotateZ(360deg) scale(1.75);}
}

#item_halo1 {
    position: absolute;
    width: 960px;
    width: calc(var(--vh, 1vh) * 100);
    height: 960px;
    height: calc(var(--vh, 1vh) * 100);
    top: 50%;
    left: 50%;
    background-size: cover;
    transform-origin: center center;
    animation: anime_counterclockwise 9000ms linear infinite;
}

#item_halo2 {
    position: absolute;
    width: 960px;
    width: calc(var(--vh, 1vh) * 100);
    height: 960px;
    height: calc(var(--vh, 1vh) * 100);
    top: 50%;
    left: 50%;
    background-size: cover;
    transform-origin: center center;
    animation: anime_clockwise 11000ms linear infinite;
}

#item_atari_base, #item_atari_line, #item_atari_obj, #item_koatari_1, #item_koatari_2 {
    position: absolute;
    width: 760px;
    width: calc(var(--vh, 1vh) * 100 * (760 / 960));
    height: 760px;
    height: calc(var(--vh, 1vh) * 100 * (760 / 960));
    background-size: cover;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*******************************************************************************
 * Ｃ賞
 ******************************************************************************/
#item_halo1.prize_c, #item_halo2.prize_c {
    display: none;
}
#item_atari_base.prize_c {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_atari_base_c.png");
    animation: anime_clockwise 10000ms linear infinite;
}
#item_atari_line.prize_c {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_atari_line_c.png");
    animation: anime_clockwise 10000ms linear infinite;
}
#item_atari_obj.prize_c {
    display: none;
}
#item_koatari_1.prize_c {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_koatari_c_1.png");
    animation: anime_koatari 400ms linear both;
}
#item_koatari_2.prize_c {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_koatari_c_2.png");
    animation: anime_koatari 500ms linear both;
}

/*******************************************************************************
 * Ｂ賞
 ******************************************************************************/
#item_halo1.prize_b {
    display: none;
}
#item_halo2.prize_b {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_atari_halo_b.png");
}
#item_atari_base.prize_b {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_atari_base_b.png");
    animation: anime_clockwise 10000ms linear infinite;
}
#item_atari_line.prize_b {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_atari_line_b.png");
    animation: anime_counterclockwise 10000ms linear infinite;
}
#item_atari_obj.prize_b {
    display: none;
}
#item_koatari_1.prize_b {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_koatari_b_1.png");
    animation: anime_koatari 400ms linear both;
}
#item_koatari_2.prize_b {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_koatari_b_2.png");
    animation: anime_koatari 500ms linear both;
}

/*******************************************************************************
 * Ａ賞
 ******************************************************************************/
#item_halo1.prize_a {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_atari_halo_a1.png");
}
#item_halo2.prize_a {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_atari_halo_a2.png");
}
#item_atari_base.prize_a {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_atari_base_a.png");
    animation: anime_clockwise 10000ms linear infinite;
}
#item_atari_line.prize_a {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_atari_line_a.png");
    animation: anime_clockwise 10000ms linear infinite;
}
#item_atari_obj.prize_a {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_atariobj_a.png");
    animation: anime_clockwise 10000ms linear infinite;
}
#item_koatari_1.prize_a {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_koatari_a_1.png");
    animation: anime_koatari 400ms linear both;
}
#item_koatari_2.prize_a {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_koatari_a_2.png");
    animation: anime_koatari 500ms linear both;
}

/*******************************************************************************
 * Ｓ賞
 ******************************************************************************/
#item_halo1.prize_s {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_atari_halo_s1.png");
}
#item_halo2.prize_s {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_atari_halo_s2.png");
}
#item_atari_base.prize_s {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_atari_base_s.png");
    animation: anime_clockwise 10000ms linear infinite;
}
#item_atari_line.prize_s {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_atari_line_s.png");
    animation: anime_counterclockwise 10000ms linear infinite;
}
#item_atari_obj.prize_s {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_atariobj_s.png");
    animation: anime_clockwise 10000ms linear infinite;
}
#item_koatari_1.prize_s {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_koatari_s_1.png");
    animation: anime_koatari 400ms linear both;
}
#item_koatari_2.prize_s {
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_koatari_s_2.png");
    animation: anime_koatari 500ms linear both;
}

/*******************************************************************************
 * 欲しいアイテム
 ******************************************************************************/
#item_want {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: -8%;
}

.haert_image_right {
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.haert_image_left {
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(-1,1);
}

@keyframes anime_heart_rightup {
    0% {
        top: 437.587px;
        top: calc(var(--vh, 1vh) * 100 * (437.587 / 960));
        left: 342.413px;
        left: calc(var(--vh, 1vh) * 100 * (342.413 / 960));
        transform: scale(0);
        opacity: 1;
    }
    14% {transform: scale(0.3);}
    50% {
        top: 167.84px;
        top: calc(var(--vh, 1vh) * 100 * (167.84 / 960));
        left: 461.934px;
        left: calc(var(--vh, 1vh) * 100 * (461.934 / 960));
        transform: scale(0.7);
        opacity: 1;
    }
    76% {opacity: 0;}
    92% {
        top: -135.283px;
        top: calc(var(--vh, 1vh) * 100 * (-135.283 / 960));
        left: 614.413px;
        left: calc(var(--vh, 1vh) * 100 * (614.413 / 960));
        transform: scale(0.9);
    }
    100% {transform: scale(1); opacity: 0;}
}

@keyframes anime_heart_leftup {
    0% {
        top: 437.587px;
        top: calc(var(--vh, 1vh) * 100 * (437.587 / 960));
        left: 197.587px;
        left: calc(var(--vh, 1vh) * 100 * (197.587 / 960));
        transform: scale(0);
        opacity: 1;
    }
    14% {transform: scale(0.3);}
    50% {
        top: 167.84px;
        top: calc(var(--vh, 1vh) * 100 * (167.84 / 960));
        left: 78.066px;
        left: calc(var(--vh, 1vh) * 100 * (78.066 / 960));
        transform: scale(0.7);
        opacity: 1;
    }
    76% {opacity: 0;}
    92% {
        top: -135.283px;
        top: calc(var(--vh, 1vh) * 100 * (-135.283 / 960));
        left: -74.413px;
        left: calc(var(--vh, 1vh) * 100 * (-74.413 / 960));
        transform: scale(0.9);
    }
    100% {transform: scale(1); opacity: 0;}
}

.item_heart {
    position: absolute;
    width: 120px;
    width: calc(var(--vh, 1vh) * 100 * (120 / 960));
    height: 128px;
    height: calc(var(--vh, 1vh) * 100 * (128 / 960));
}

.flip-horizontal {
    transform: scaleX(-1);
}

#item_want_heart1 {
    animation: anime_heart_rightup 1667ms linear both;
}

#item_want_heart2 {
    animation: anime_heart_rightup 1667ms 200ms linear both;
}

#item_want_heart3 {
    animation: anime_heart_rightup 1667ms 400ms linear both;
}

#item_want_heart4 {
    animation: anime_heart_leftup 1667ms 200ms linear both;
}

#item_want_heart5 {
    animation: anime_heart_leftup 1667ms 400ms linear both;
}

#item_want_heart6 {
    animation: anime_heart_leftup 1667ms 600ms linear both;
}


#capsule_back {
    position: absolute;
    width: 100%;
    height: 100%;
}

#white_grade_1 {
    position: absolute;
    width: 75%;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/bg_cap_white_grade_1.png");
    background-size: contain;
    background-position-x: center;
}

#move_capsule_upper {
    position: absolute;
    width: 360px;
    width: calc(var(--vh, 1vh) * 100 * (360 / 960));
    height: 176px;
    height: calc(var(--vh, 1vh) * 100 * (176 / 960));
    top: 32.5%;
    left: 50%;
    transform: translateX(-50%);
}

#move_capsule_upper img {
    width: 100%;
    height: auto;
    animation: move_uppercapsule 1000ms ease-out infinite;
}

#move_capsule_lower {
    position: absolute;
    width: 360px;
    width: calc(var(--vh, 1vh) * 100 * (360 / 960));
    height: 176px;
    height: calc(var(--vh, 1vh) * 100 * (176 / 960));
    bottom: 29.5%;
    left: 50%;
    transform: translateX(-50%);
}

#move_capsule_lower img {
    width: 100%;
    height: auto;
    animation: move_lowercapsule 1000ms ease-out infinite;
}

@keyframes move_uppercapsule {
    0% {transform: translateY(0%); opacity: 0.5;}
    100% {transform: translateY(-20%); opacity: 0;}
}

@keyframes move_lowercapsule {
    0% {transform: translateY(0%) rotateZ(180deg); opacity: 0.5;}
    100% {transform: translateY(20%) rotateZ(180deg); opacity: 0;}
}

#pinch_gesture {
    position: absolute;
    width: 122px;
    width: calc(var(--vh, 1vh) * 100 * (122 / 960));
    height: 40px;
    height: calc(var(--vh, 1vh) * 100 * (40 / 960));
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
}

#pinch_gesture img {
    height: 100%;
    width: auto;
    animation: move_uppergesture 1000ms ease-out infinite;
}

#drag_gesture {
    position: absolute;
    width: 122px;
    width: calc(var(--vh, 1vh) * 100 * (122 / 960));
    height: 100px;
    height: calc(var(--vh, 1vh) * 100 * (100 / 960));
    top: 71%;
    left: 50%;
    transform: translateX(-50%);
}

#drag_gesture img {
    height: 100%;
    width: auto;
    animation: move_lowergesture 1000ms ease-out infinite;
}

#drag_gesture_pc {
    position: absolute;
    width: 122px;
    width: calc(var(--vh, 1vh) * 100 * (122 / 960));
    height: 100px;
    height: calc(var(--vh, 1vh) * 100 * (100 / 960));
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
}

#drag_gesture_pc img {
    height: 100%;
    width: auto;
    animation: move_uppergesture 1000ms ease-out infinite;
}
    
@keyframes move_uppergesture {
    0% {transform: translateY(0%);}
    100% {transform: translateY(-20%);}
}

@keyframes move_lowergesture {
    0% {transform: translateY(0%);}
    100% {transform: translateY(20%);}
}


#capsule_area {
    position: relative;
    width: 100%;
    height: 100%;
}

#capsule_open_effect {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#white_grade {
    position: absolute;
    width: 100%;
    height: 40%;
    top: 51.5%;
    transform: translateY(-50%);
}

#open_effectL1 {
    position: absolute;
    width: 260px;
    width: calc(var(--vh, 1vh) * 100 * (260 / 960));
    height: 308px;
    height: calc(var(--vh, 1vh) * 100 * (308 / 960));
    left: 20%;
    top: 51.5%;
}

#open_effectL1 img {
    width: 100%;
    height: 100%;
    animation: anime_clockwise 900ms linear infinite;
}

#open_effectL2 {
    position: absolute;
    width: 200px;
    width: calc(var(--vh, 1vh) * 100 * (200 / 960));
    height: 237px;
    height: calc(var(--vh, 1vh) * 100 * (237 / 960));
    left: 4%;
    top: 51.5%;
}

#open_effectL2 img {
    width: 100%;
    height: 100%;
    animation: anime_counterclockwise 1000ms linear infinite;
}

#open_effectR1 {
    position: absolute;
    width: 260px;
    width: calc(var(--vh, 1vh) * 100 * (260 / 960));
    height: 308px;
    height: calc(var(--vh, 1vh) * 100 * (308 / 960));
    right: -30%;
    top: 51.5%;
}

#open_effectR1 img {
    width: 100%;
    height: 100%;
    animation: anime_counterclockwise 900ms linear infinite;
}

#open_effectR2 {
    position: absolute;
    width: 200px;
    width: calc(var(--vh, 1vh) * 100 * (200 / 960));
    height: 237px;
    height: calc(var(--vh, 1vh) * 100 * (237 / 960));
    right: -33%;
    top: 51.5%;
}

#open_effectR2 img {
    width: 100%;
    height: 100%;
    animation: anime_clockwise 1000ms linear infinite;
}

#capsule_upper {
    position: absolute;
    width: 360px;
    width: calc(var(--vh, 1vh) * 100 * (360 / 960));
    height: 210px;
    height: calc(var(--vh, 1vh) * 100 * (210 / 960));
    top: 32.5%;
    left: 50%;
    transform: translateX(-50%);
}

#capsule_upper img {
    height: 100%;
    width: auto;
}

#capsule_lower {
    position: absolute;
    width: 360px;
    width: calc(var(--vh, 1vh) * 100 * (360 / 960));
    height: 190px;
    height: calc(var(--vh, 1vh) * 100 * (190 / 960));
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%);
}

#capsule_lower img {
    height: 100%;
    width: auto;
}

#capsule_center {
    position: absolute;
    width: 360px;
    width: calc(var(--vh, 1vh) * 100 * (360 / 960));
    height: 72px;
    height: calc(var(--vh, 1vh) * 100 * (72 / 960));
    bottom: 45.2%;
    left: 50%;
    transform: translateX(-50%);
}

#capsule_center img {
    height: 100%;
    width: auto;
}