.bottomNavigation {
    /* width: 320px; */
    position: fixed;
    /* bottom: 0; */
    bottom: 1rem;
    right: 1rem;
    padding: 1rem;
    box-shadow: 0 0 4px var(--lightgray-bright);
    display: grid;
    place-items: center;

    z-index: 999;
    background-color: rgba(255,255,255, 0.3);
    backdrop-filter: brightness(180%) blur(12px);
    border-radius: 12px;
    display: grid;
    row-gap: 12px;
    font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;

    /* opacity: 0; */
    transition: 1s ease;

    .tabelogButton {
        background-color: var(--secondary-bland-color);
        width: 100%;
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        column-gap: 12px;
        border-radius: 12px;
        position: relative;
        box-shadow: 4px 4px 1px var(--primary-bland-color-bright);
    }

    .tabelogButton--iconBox {
        background-color: var(--white);
        padding: 4px;
        border-radius: 8px;
        line-height: 0;
        display: flex;
    }

    .tabelogButton--icon {
        width: 28px;
        height: 28px;
        line-height: 0;
    }

    .tabelogButton--text {
        /* flex: 1 0; */
        color: var(--black);
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 2px;
    }

    .tabelogButton--arrow {
        width: 28px;
        height: 26px;
        border-radius: 50%;
        background-color: var(--white);
        position: relative;
    } 

    .tabelogButton--arrow::before {
        content: '';
        width: 12px;
        height: 12px;
        border: 0;
        border-top: solid 2px var(--black);
        border-right: solid 2px var(--black);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-70%, -50%) rotate(45deg);
    }

    .telButton {
        background-color: var(--accent-color);
        width: 100%;
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        column-gap: 12px;
        border-radius: 12px;
        position: relative;
    }

    .telButton--iconBox {
        background-color: var(--white);
        padding: 4px;
        border-radius: 8px;
        line-height: 0;
        display: flex;
    }

    .telButton--icon {
        width: 28px;
        height: 28px;
        line-height: 0;
    }

    .telButton--text {
        /* flex: 1 0; */
        color: var(--white);
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 2px;
    }

    .telButton--arrow {
        width: 28px;
        height: 26px;
        border-radius: 50%;
        background-color: var(--white);
        position: relative;
    } 

    .telButton--arrow::before {
        content: '';
        width: 12px;
        height: 12px;
        border: 0;
        border-top: solid 2px var(--black);
        border-right: solid 2px var(--black);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-70%, -50%) rotate(45deg);
    }
}

.bottomNavigation.isOffscreenHero {
    opacity: 1;
    transition: 1s ease;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .bottomNavigation {
        width: 100%;
        bottom: 0;
        right: 50%;
        transform: translateX(50%);
        padding: 8px;
        display: grid;
        place-items: center;
        /* background-color: var(--white); */
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        row-gap: 8px;

        .tabelogButton {
            padding: 8px;
            column-gap: 8px;
            border-radius: 12px;
        }

        .tabelogButton--iconBox {
            background-color: var(--white);
            padding: 4px;
            border-radius: 8px;
            line-height: 0;
            display: flex;
        }

        .tabelogButton--icon {
            width: 28px;
            height: 28px;
            line-height: 0;
        }

        .tabelogButton--text {
            font-size: 16px;
            font-weight: bold;
        }

        .tabelogButton--arrow {
            width: 28px;
            height: 26px;
            border-radius: 50%;
            background-color: var(--white);
            position: relative;
        } 

        .tabelogButton--arrow::before {
            content: '';
            width: 12px;
            height: 12px;
            border: 0;
            border-top: solid 2px var(--black);
            border-right: solid 2px var(--black);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-70%, -50%) rotate(45deg);
        }

        .telButton {
            width: 100%;
            padding: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            column-gap: 8px;
            border-radius: 12px;
            /* filter: drop-shadow(0 4px var(--deepgray)); */
            /* box-shadow: 0 4px 0 0 var(--deepgray); */
            position: relative;
        }

        .telButton--iconBox {
            padding: 4px;
            border-radius: 8px;
            line-height: 0;
            display: flex;
        }

        .telButton--icon {
            width: 28px;
            height: 28px;
            line-height: 0;
        }

        .telButton--text {
            font-size: 16px;
            font-weight: bold;
        }

        .telButton--arrow {
            width: 28px;
            height: 26px;
            border-radius: 50%;
            background-color: var(--white);
            position: relative;
        } 

        .telButton--arrow::before {
            content: '';
            width: 12px;
            height: 12px;
            border: 0;
            /* border-top: solid 2px var(--secondary-bland-color);
            border-right: solid 2px var(--secondary-bland-color); */
            border-top: solid 2px var(--black);
            border-right: solid 2px var(--black);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-70%, -50%) rotate(45deg);
        }
    }
}