@charset "UTF-8";

.motion-g.motion-blue {
    width: 100vw; /* ビューポート幅全体を使用 */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.motion-g.motion-blue .menu-motion {
    position: relative;
    z-index: 5;
    background-color: #009fe3; /* 背景色を#009fe3に設定 */
    padding: 15px;
    margin: 10px 0;
    overflow: hidden;
    border-top: 1px solid #009fe3; /* 境界線の色を#009fe3に設定 */
    border-bottom: 1px solid #009fe3; /* 境界線の色を#009fe3に設定 */
    background-image: -webkit-linear-gradient(top, #009fe3, #009fe3); /* 背景グラデーションの色を#009fe3に設定 */
    width: 100%;
    text-align: center;
}

.motion-g.motion-blue .menu-motion ul {
    list-style: none; /* リストスタイルを削除 */
    padding: 0; /* パディングを削除 */
    margin: 0; /* マージンを削除 */
    display: flex;
    justify-content: center; /* リスト項目を中央揃えに */
    align-items: center; /* 垂直方向にも中央揃えに */
    width: 100%; /* リスト全体を幅いっぱいに */
    gap: 15px;
}


.motion-g.motion-blue .menu-motion li {
    display: flex;
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
    height: 100%; /* 必要に応じて高さを調整 */
}

.motion-g.motion-blue .menu-motion li.back {
    z-index: 8;
    border: 1px solid #0078a0;
    border-radius: 7px;
    background-color: #0078a0;
}