/*
    変数
*/
:root {
    /* 左下の坂メニューとガウチャンボール */
    --slope-menu-height:110px;
    --slope-menu-width:140px;
    --gau-ball-size:50px;

    --slope-start-left : calc(0px - var(--gau-ball-size)) ;
    --slope-start-bottom : calc(0% + var(--slope-menu-height) + var(--gau-ball-size)*3/5);

    --slope-end-left : calc(var(--slope-menu-width) - var(--gau-ball-size)/3);
    --slope-end-bottom : 0%;


    /* ガウチャンボールの位置 */
    
    --gau-ballA-left : calc(var(--slope-menu-width) + var(--gau-ball-size)*0.7);
    --gau-ballA-bottom : 0%;
    --gau-ballA-rotate : rotate(600deg);

    --gau-ballB-left : calc(var(--slope-menu-width) + var(--gau-ball-size)*2.55);
    --gau-ballB-bottom : 0%;
    --gau-ballB-rotate : rotate(740deg);

    --gau-ballC-left : calc(var(--slope-menu-width) + var(--gau-ball-size)*3.6);
    --gau-ballC-bottom : 0%;
    --gau-ballC-rotate : rotate(920deg);

    --gau-ballD-left : calc(var(--slope-menu-width) + var(--gau-ball-size)*5);
    --gau-ballD-bottom : 0%;
    --gau-ballD-rotate : rotate(1150deg);

}



/* 坂道メニュー */
.slope_menu {
    position: absolute;
    bottom:0%;

    font-size: 16px;
    
    background-color: var(--default_bg_color);

    height:var(--slope-menu-height);
    width: var(--slope-menu-width);

    box-sizing: border-box;

    clip-path: polygon(0% 0, 100% 100%, 0 100%);
}

.slope_menu:hover{
    font-size: 17px;
    border: 2px solid gray;
}



.slope_menu_textblock{
    position: absolute;
    left:5px;
    bottom:5px;
    
    font-family: 'DotGothic16';
    font-weight:bold;
    color: var(--default_font_color);
}

/* ガウチャンボール(坂の根本) */
.gau_ballA {
    position: absolute;
    left: var(--slope-start-left);
    bottom: var(--slope-start-bottom);
    transform: rotate(0deg);
    
    width:var(--gau-ball-size);
    border-radius: 100%;

    box-sizing: border-box;
    border: 2px solid gray;

    content: url(./../image/CuteFaceIcon.png);
}

/* ガウチャンボール坂の途中 */
.gau_ballB {
    position: absolute;
    left: var(--slope-start-left);
    bottom: var(--slope-start-bottom);
    transform: rotate(0deg);

    width:var(--gau-ball-size);
    border-radius: 100%;

    box-sizing: border-box;
    border: 2px solid gray;

    content: url(./../image/CuteFaceIcon.png);
}


/* ガウチャンボール坂の途中 */
.gau_ballC {
    position: absolute;
    left: var(--slope-start-left);
    bottom: var(--slope-start-bottom);
    transform: rotate(0deg);

    width:var(--gau-ball-size);
    border-radius: 100%;

    box-sizing: border-box;
    border: 2px solid gray;

    content: url(./../image/CuteFaceIcon.png);
}



/* ガウチャンボール坂の途中 */
.gau_ballD {
    position: absolute;
    left: var(--slope-start-left);
    bottom: var(--slope-start-bottom);
    transform: rotate(0deg);

    width:var(--gau-ball-size);
    border-radius: 100%;

    box-sizing: border-box;
    border: 2px solid gray;

    content: url(./../image/CuteFaceIcon.png);
}




/* =================================================
    アニメーションたち 
================================================= */

/* =================================================
    戻る (開始位置が、それぞれの初期位置である)
================================================= */
@keyframes gau_goback_A{
    0%{
        left: var(--gau-ballA-left);
        bottom: var(--gau-ballA-bottom);
        transform: var(--gau-ballA-rotate);
    }30%{
        left: var(--slope-end-left);
        bottom: var(--slope-end-bottom);
    }100%{
        left: var(--slope-start-left);
        bottom: var(--slope-start-bottom);
        transform: rotate(0deg);
        display: none;
    }
}

@keyframes gau_goback_B{
    0%{
       left: var(--gau-ballB-left);
        bottom: var(--gau-ballB-bottom);
        transform: var(--gau-ballB-rotate); 
    }42%{
        left: var(--slope-end-left);
        bottom: var(--slope-end-bottom);
    }100%{
        left: var(--slope-start-left);
        bottom: var(--slope-start-bottom);
        transform: rotate(0deg);
        display: none;
    }
}


@keyframes gau_goback_C{
    0%{
        left: var(--gau-ballC-left);
        bottom: var(--gau-ballC-bottom);
        transform: var(--gau-ballC-rotate);
    }57%{
        left: var(--slope-end-left);
        bottom: var(--slope-end-bottom);
    }100%{
        left: var(--slope-start-left);
        bottom: var(--slope-start-bottom);
        transform: rotate(0deg);
        display: none;
    }
}



@keyframes gau_goback_D{
    0%{
       left: var(--gau-ballD-left);
        bottom: var(--gau-ballD-bottom);
        transform: var(--gau-ballD-rotate); 
    }68%{
        left: var(--slope-end-left);
        bottom: var(--slope-end-bottom);
    }100%{
        left: var(--slope-start-left);
        bottom: var(--slope-start-bottom);
        transform: rotate(0deg);
        display: none;
    }
}

/* =================================================
    現れる (開始位置が、坂の頂上である)
================================================= */
@keyframes gau_appear_A{
    0%{        
        display: block;
    }70%{
        left: var(--slope-end-left);
        bottom: var(--slope-end-bottom);
    }100%{
        left: var(--gau-ballA-left);
        bottom: var(--gau-ballA-bottom);
        transform: var(--gau-ballA-rotate);
    }
}

@keyframes gau_appear_B{
    0%{        
        display: block;
    }58%{
        left: var(--slope-end-left);
        bottom: var(--slope-end-bottom);
    }100%{
        left: var(--gau-ballB-left);
        bottom: var(--gau-ballB-bottom);
        transform: var(--gau-ballB-rotate);
    }
}

@keyframes gau_appear_C{
    0%{        
        display: block;
    }43%{
        left: var(--slope-end-left);
        bottom: var(--slope-end-bottom);
    }100%{
        left: var(--gau-ballC-left);
        bottom: var(--gau-ballC-bottom);
        transform: var(--gau-ballC-rotate);
    }
}

@keyframes gau_appear_D{
    0%{        
        display: block;
    }32%{
        left: var(--slope-end-left);
        bottom: var(--slope-end-bottom);
    }100%{
        left: var(--gau-ballD-left);
        bottom: var(--gau-ballD-bottom);
        transform: var(--gau-ballD-rotate);
    }
}