:root {
    --waiting-area-bg-color: #F2F3F4;
    --gacha-area-bg-color: #F2F3F4;
}

html{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0; 
}


/*

*/
body {
    font-family: 'DotGothic16';
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0; 
    box-sizing: border-box;
}



/* ========================================
    index の width に依存するため、幅の制限はつけなくて良い。
======================================== */
.Inner{
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
}



/* ========================================
    アニメーション開始待ちフィールド
    全ての処理は、ちょうど 1 度だけ実行される前提でよい
======================================== */
.wait_load{
    position: fixed;
    z-index: 1;
    width:100%;
    aspect-ratio: 1/1;
    background-color: var(--waiting-area-bg-color);
}

/* 待機中に表示するテキスト (たっぷを促す) */
.waiting_text{
    position: relative;
    text-align: center;
    top:200px;
    font-size: 20px;
    animation: waiting_animation 1.5s infinite;
}

@keyframes waiting_animation{
    0%{top:200px;}
    25%{top:170px;}
    50%{top:200px;}
    100%{top:200px;}
}

/* ========================================
    アニメーションフレーム
======================================== */
.animation_frame{
    z-index: 3;
    position: absolute;
    width: 100%;
    opacity: 0;
}


/* ========================================
    ガチャアニメーション後のリザルト画面
======================================== */
.gacha_result_field{
    position: absolute;
    opacity: 1;
    width: 100%;
    aspect-ratio: 1/1;
}

.result_bgImage{
    width:100%;
    position:absolute;
}



/* ========================================
    非同期処理で、いい感じに見えるようにアニメーションを定義する。
======================================== */

/* ドアが閉まっている状態 */
@keyframes closed_door_animation{
    0%{ opacity: 1; }
    20%{ opacity: 1; }
    21%{ opacity: 0; }
    50%{}
    100%{}
}


/* ドアが閉開いている状態 */
@keyframes opening_door_animation{
    0%{ opacity: 0; }
    20%{ opacity: 0; }
    21%{ opacity: 1; }
    70%{opacity: 1;}
    71%{opacity: 0;}
    100%{}
}

/* ガウチャンが走ってくる */
@keyframes running_gauchan_animation{
    0%{ opacity: 0; }
    20%{ opacity: 0; }
    21%{ opacity: 1; }
    
    30%{left:0%;bottom:1%;width:100%}
    40%{left:-10%;bottom:1%;width:110%}
    50%{left:-20%;bottom:1%;width:120%}
    60%{left:-30%;bottom:1%;width:130%}
    70%{opacity: 1;left:-40%;bottom:1%;width:140%}
    71%{opacity: 0;left:-40%;bottom:1%;width:140%}
    100%{left:10%;width:10%;bottom:10%;}/* overflow 対策 */
}

/* ガウチャンがプレゼントをもらう瞬間 */
@keyframes result_animation{
    0%{ opacity: 0; }
    70%{opacity: 0;}
    71%{opacity: 1;}
    100%{opacity:1;}
}