@charset "utf-8";

html, body {
    height: 100%;
    width: 100%;
}
body {
    justify-content: center;
    align-items: center;
    background-color: white;
    margin: 0 auto;

    user-select: none; /* CSS3 */
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Safari???AChrome????? */
}
img {
    /* Drag????~ */
	-webkit-user-drag: none;
	-khtml-user-drag: none;
}

#gashapon {
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    height: 960px;
    height: calc(var(--vh, 1vh) * 100);
    width: 540px;
    width: calc(var(--vh, 1vh) * 100 * (540 / 960));
    margin: 0 auto 0;
}
#screen {
    position: relative;
    height: 100%;
    width: auto;
}

#background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#bg_cap {
    position: absolute;
    height: 960px;
    height: calc(var(--vh, 1vh) * 100);
    width: 540px;
    width: calc(var(--vh, 1vh) * 100 * (540 / 960));
    top: 0;
    left: 0;
}

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

#movie_screen video {
    height: 100%;
    width: auto;
}

#display_panel {
    position: absolute;
    width: 100%;
    height: 300px;
    height: calc(var(--vh, 1vh) * 100 * (300 / 960));
    bottom: 51%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
}

#movie_whiteout {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    background-color: white;
    mix-blend-mode: luminosity;
    animation: whiteout 1500ms linear both paused;
} 

@keyframes whiteout {
    0% { opacity: 0; }
    90% { opacity: 1; }
    100% { opacity: 1; }
}

.hidden {
    display: none;
}

@keyframes fade_100 {
    0%{opacity: 0;}
    100%{opacity: 1;}
}

.fade_in {
    animation: fade_100 500ms linear both normal;
}

.fade_out {
    animation: fade_100 500ms linear both reverse;
}

#ui_base {
    height: 100%;
    width: auto;
    position: relative;
    bottom: 100%;
    background-color: rgba(0,0,0,0);
    display: block;
    z-index: 1000;
}

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

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

#bg_text {
    position: absolute;
    width: 100%;
    height: 48px;
    height: calc(var(--vh, 1vh) * 100 * (48 / 960));
    bottom: 3%;
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/background_obi.png");
    background-size: cover;
}

#page_to_left {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/ui_left_arrow.png");
    background-size: 13%;
    background-repeat: no-repeat;
    background-position: left center;
}

#page_to_right {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/ui_right_arrow.png");
    background-size: 13%;
    background-repeat: no-repeat;
    background-position: right center;
}

#ui_header {
    width: 100%;
    height: 9%;
}

.left {
    position: absolute;
    bottom: 9%;
    left: 2%;
}
.center {
    position: absolute;
    width: 16%;
    height: 10%;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
}
.right {
    position: absolute;
    top: 1%;
    right: 27%;
}

#ui_counter {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 10%;
    left: -20%;
}
#counter_n {
    position: absolute;
    width: 120px;
    width: calc(var(--vh, 1vh) * 100 * (120 / 960));
    height: 64px;
    height: calc(var(--vh, 1vh) * 100 * (64 / 960));
    top: 0;
    left: 0;
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/ui_count_bunshi.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#bunshi {
    position: absolute;
    top: 40%;
    width: 100%;
    height: 40px;
    height: calc(var(--vh, 1vh) * 100 * (40 / 960));
    display: flex;
    justify-content: center;
}
.bunshi_img_001, .bunshi_img_010 {
    height: 100%;
    width: auto;
}
.bunshi_img_100 {
    height: 95%;
    width: auto;
}
#counter_d {
    position: absolute;
    width: 120px;
    width: calc(var(--vh, 1vh) * 100 * (120 / 960));
    height: 64px;
    height: calc(var(--vh, 1vh) * 100 * (64 / 960));
    top: 65%;
    left: 0;
    background-image: url("https://parks2.bandainamco-am.co.jp/client_info/BNAM_LBC_EC/view/userweb/ext/gashapon/sample/parts/GASHAPON4/ui_count_bunbo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#bunbo {
    position: absolute;
    top: 20%;
    width: 100%;
    height: 36px;
    height: calc(var(--vh, 1vh) * 100 * (36 / 960));
    display: flex;
    justify-content: center;
}
.bunbo_img_001 {
    height: 100%;
    width: auto;
}
.bunbo_img_010, .bunbo_img_100 {
    height: 90%;
    width: auto;
}

#enabled_skip_button {
    position: absolute;
    height: 70px;
    height: calc(var(--vh, 1vh) * 100 * (70 / 960));
    width: auto;
}

#disabled_skip_button {
    position: absolute;
    height: 70px;
    height: calc(var(--vh, 1vh) * 100 * (70 / 960));
    width: auto;
}

#enabled_finish_button {
    position: absolute;
    height: 70px;
    height: calc(var(--vh, 1vh) * 100 * (70 / 960));
    width: auto;
}

#enabled_allskip_button {
    position: absolute;
    height: 70px;
    height: calc(var(--vh, 1vh) * 100 * (70 / 960));
    width: auto;
}

#disabled_allskip_button {
    position: absolute;
    height: 70px;
    height: calc(var(--vh, 1vh) * 100 * (70 / 960));
    width: auto;
}

#ui_playstart {
    position: absolute;
    bottom: 1%;
    left: 50%;
    transform: translateX(-50%);
}

.round_button {
    height: 66px;
    height: calc(var(--vh, 1vh) * 100 * (66 / 960));
    width: auto;
}

.tap_button {
    height: 46px;
    height: calc(var(--vh, 1vh) * 100 * (46 / 960));
    width: auto;
}

#ui_playstart img {
    animation: tap_start_anim 0.5s alternate infinite linear;
}

@keyframes tap_start_anim{
    0%{transform: scale(1.0); }
    100%{transform: scale(1.04); }
}


#speaker {
    position: absolute;
    width: 8vh;
    width: calc(var(--vh,1vh)*8);
    height: 8vh;
    height: calc(var(--vh,1vh)*8);
    top: 0;
    left: 0;
    z-index: 1000;
}

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

#all_skip_confirm {
    position: relative;
    height: 100%;
    width: auto;
    bottom: 100%;
    background-color: rgba(0,0,0,0.75);
    z-index: 2147483647;
}

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

#confirm_yes {
    position: absolute;
    height: 70px;
    height: calc(var(--vh, 1vh) * 100 * (70 / 960));
    width: auto;
    bottom: 40%;
    left: 15%;
}

#confirm_no {
    position: absolute;
    height: 70px;
    height: calc(var(--vh, 1vh) * 100 * (70 / 960));
    width: auto;
    bottom: 40%;
    right: 15%;
}

#overlap_screen {
    position: relative;
    height: 100%;
    width: auto;
    bottom: 100%;
    margin: 0 auto 0;
    background-color: white;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2147483647;
}