/* ボタンの親要素 */
.toggleRuby {
    display: inline-block;
    vertical-align: middle;
}

/* ボタン本体（aタグ） */
.toggleRuby a {
    background-color: #3da9fc;
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    
    /* 上下の余白をコンパクトに調整 (上下 6px / 左右 16px) */
    padding: 6px 16px !important;
    
    /* 文字サイズと行の高さを固定して上下の膨らみを防ぐ */
    font-size: 16px !important;
    line-height: 1.4 !important;
    
    /* 上下左右の余白を正確に計算させる設定 */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* active（赤色）のとき */
.toggleRuby.active a {
    background-color: #ef4565;
}

/* ------------------------------------
   [kanji] と [hiragana] の表示切替
------------------------------------ */
body:not(.mode-hiragana) .text-hiragana {
    display: none !important;
}

body.mode-hiragana .text-kanji {
    display: none !important;
}

body.mode-hiragana .text-hiragana {
    display: block !important;
}