@charset "UTF-8";

body {
    width: 100%;
    text-align: center;
}

#wrap {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

.app_name {
    font-family: 'Kaisei Decol', serif;
    color: #00a7db; /* 東西線スカイ */
    font-size: 48px;
}

.tap {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    color: #00a7db; /* 東西線スカイ */
    font-size: 20px;
}

.container {
    display: flex;
    align-items:center;
    justify-content: center;
    height: 200px;
}

/* 音声停止時の水玉ボタン */
.fluid {
    margin: auto;
    position: relative;
    width: 150px; /* ボタンの幅を設定 */
    height: 150px; /* ボタンの高さを設定 */
    border-radius: 50%; /* 円形のボタン */
    background-color: rgba(204,204,204,0.9);
    border: none;
    cursor: pointer;
    /* overflow: hidden; */
    animation: none;
}

.fluid::after {
    display: block;
    width: 20px;
    height: 35px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 20px 10px white;
    content: "";
    position: absolute;
    top: 20%;
    left: 20%;
    transform: rotate(30deg);
}

.fluid.active {
    background-color: #bce2e8;
    animation: fluid-animation 0.2s ease 0s infinite;
}

/*
.fluid-shape.paused {
    animation-play-state: paused;
}
*/

@keyframes fluid-animation {
    0%, 50%, 100% {
        border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    }
    25% {
        border-radius: 40% 60% 40% 60% / 40% 60% 40% 60%;
    }
    75%{
        border-radius: 60% 40% 60% 40% / 60% 40% 60% 40%;
    }
}