/* =====================================================
     * 読み上げエリア
     * ===================================================== */

    .gnews-speech-reader {
        width: 100%;
        margin: 0 0 28px;
        padding: 0 0 12px;
        border-bottom: 1px solid #e5e5e5;
        box-sizing: border-box;
    }


    /* =====================================================
     * PC・タブレット
     * 全体を100%・1列
     * ===================================================== */

    .gnews-speech-main {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 6px;
        box-sizing: border-box;
    }


    /* 再生・停止 */

    .gnews-speech-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
    }


    /* スピード・スピーカー */

    .gnews-speech-settings {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 1 1 auto;
        min-width: 0;
    }


    /* スピードとスピーカーを均等 */

    .gnews-speech-speed,
    .gnews-speech-voice {
        flex: 1 1 0;
        min-width: 0;
        width: 0;
        max-width: none;
        box-sizing: border-box;
    }


    .gnews-speech-speed {
        padding: 0 7px;
        cursor: pointer;
    }


    .gnews-speech-voice {
        padding: 0 8px;
        cursor: pointer;
    }


    /* =====================================================
     * 共通ボタン・セレクト
     * ===================================================== */

    .gnews-speech-main button,
    .gnews-speech-main select {
        height: 34px;
        border: 1px solid #d8d8d8;
        background: #fff;
        color: #333;
        font-size: 13px;
        line-height: 1;
        border-radius: 4px;
        box-sizing: border-box;
    }


    .gnews-speech-main button:focus-visible,
    .gnews-speech-main select:focus-visible {
        outline: 2px solid #005CAC;
        outline-offset: 2px;
    }


    /* =====================================================
     * 再生ボタン
     * ===================================================== */

    .gnews-speech-play {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 0 12px;
        border-color: #005CAC !important;
        background: #005CAC !important;
        color: #fff !important;
        cursor: pointer;
        white-space: nowrap;
    }


    .gnews-speech-play:not(:disabled):hover {
        opacity: .85;
    }


    .gnews-speech-play-icon {
        font-size: 10px;
    }


    .gnews-speech-play-text {
        white-space: nowrap;
    }


    /* =====================================================
     * 一時停止・停止
     * ===================================================== */

    .gnews-speech-pause,
    .gnews-speech-stop {
        width: 34px;
        padding: 0;
        cursor: pointer;
        flex: 0 0 34px;
    }


    .gnews-speech-pause:not(:disabled):hover,
    .gnews-speech-stop:not(:disabled):hover {
        background: #f5f5f5;
    }


    .gnews-speech-main button:disabled {
        opacity: .35;
        cursor: default;
    }


    /* =====================================================
     * 文字サイズ
     * ===================================================== */

    .gnews-font-group {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: 0;
        flex: 0 0 auto;
        white-space: nowrap;
    }


    .gnews-font-label {
        color: #555;
        font-size: 12px;
        line-height: 1;
        white-space: nowrap;
    }


    .gnews-font-group button {
        min-width: 34px;
        padding: 0 10px;
        cursor: pointer;
        white-space: nowrap;
    }


    .gnews-font-group button:not([aria-disabled="true"]):hover {
        background: #f5f5f5;
    }


    .gnews-font-group button[aria-disabled="true"] {
        opacity: .35;
        cursor: default;
    }


    .gnews-font-value {
        min-width: 3em;
        text-align: center;
        color: #555;
        font-size: 12px;
        line-height: 1;
    }


    /* =====================================================
     * 状態表示
     * ===================================================== */

    .gnews-speech-status {
        margin-top: 6px;
        color: #666;
        font-size: 12px;
        line-height: 1.5;
        min-height: 18px;
    }


    /* =====================================================
     * 非対応ブラウザ
     * ===================================================== */

    .gnews-speech-fallback {
        margin: 0 0 28px;
        padding: 8px 0;
        color: #595959;
        font-size: 13px;
        line-height: 1.7;
    }


    /* =====================================================
     * スマートフォン
     *
     * 1段目：記事を聴く・Ⅱ・■
     * 2段目：スピード・スピーカー（均等）
     * 3段目：文字・小・標準・大・100%
     * ===================================================== */

    @media screen and (max-width: 600px) {

        .gnews-speech-reader {
            margin-bottom: 22px;
            padding-bottom: 10px;
        }


        .gnews-speech-main {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
            gap: 5px;
        }


        /* -------------------------
         * 1段目
         * ------------------------- */

        .gnews-speech-actions {
            display: flex;
            align-items: center;
            gap: 5px;
            width: 100%;
        }


        .gnews-speech-main button,
        .gnews-speech-main select {
            height: 32px;
            font-size: 12px;
        }


        .gnews-speech-play {
            padding: 0 10px;
        }


        .gnews-speech-pause,
        .gnews-speech-stop {
            width: 32px;
            flex: 0 0 32px;
        }


        /* -------------------------
         * 2段目
         * スピード＋スピーカー
         * 50:50
         * ------------------------- */

        .gnews-speech-settings {
            display: flex;
            align-items: center;
            gap: 5px;
            width: 100%;
            flex: none;
        }


        .gnews-speech-speed,
        .gnews-speech-voice {
            flex: 1 1 0;
            min-width: 0;
            width: 0;
            max-width: none;
            box-sizing: border-box;
        }


        .gnews-speech-speed {
            padding: 0 5px;
        }


        .gnews-speech-voice {
            padding: 0 8px;
        }


        /* -------------------------
         * 3段目
         * ------------------------- */

        .gnews-font-group {
            display: flex;
            align-items: center;
            gap: 5px;
            width: 100%;
            margin-left: 0;
            padding-top: 2px;
            flex: none;
            white-space: nowrap;
        }


        .gnews-font-group button {
            min-width: 32px;
            padding: 0 8px;
            white-space: nowrap;
        }


        .gnews-font-label {
            white-space: nowrap;
        }


        .gnews-font-value {
            min-width: 3em;
        }


        .gnews-speech-status {
            font-size: 11px;
        }

    }


    /* =====================================================
     * 文字サイズ変更後の本文
     * ===================================================== */

    .gnews-speech-content.gnews-scaled {
        overflow-wrap: anywhere;
    }


    .gnews-speech-content.gnews-scaled * {
        font-size: 1em !important;
        line-height: 1.8 !important;
    }


    .gnews-speech-content.gnews-scaled sup,
    .gnews-speech-content.gnews-scaled sub,
    .gnews-speech-content.gnews-scaled small {
        font-size: .75em !important;
    }


    .gnews-speech-content.gnews-scaled h1 {
        font-size: 1.8em !important;
        line-height: 1.5 !important;
    }


    .gnews-speech-content.gnews-scaled h2 {
        font-size: 1.55em !important;
        line-height: 1.5 !important;
    }


    .gnews-speech-content.gnews-scaled h3 {
        font-size: 1.35em !important;
        line-height: 1.5 !important;
    }


    .gnews-speech-content.gnews-scaled h4 {
        font-size: 1.2em !important;
        line-height: 1.5 !important;
    }


    .gnews-speech-content.gnews-scaled h5,
    .gnews-speech-content.gnews-scaled h6 {
        font-size: 1.1em !important;
        line-height: 1.5 !important;
    }