/* 小さな文字サイズ */
.s1 {
    font-size: 0.8em;
}

/* 少し大きな文字サイズ */
.s2 {
    font-size: 0.5em;
}

.s3{
    font-size: 0.3em;
}
/* 大きな文字サイズ */
.l1 {
    font-size: 1.3em;
}

/* より大きな文字サイズ */
.l2 {
    font-size: 1.5em;
}

/* L3タグ用の新しいクラス */
.l3 {
    font-size: 1.8em;
}

/* CSS/decoration.css または CSS/Sousyoku.css に追記 */

.text-blur {
    /* ぼかしの度合いを定義。3px程度が「滲んでいる」ように見えやすいです。 */
    filter: blur(1px); 
    
    /* 文字色を背景に近い色にすると、より曖昧さが増します (任意)。 */
    /* background-color: #515151 (body color) に合わせて #ccc など */
    color: #cccccc; 
    
    /* マウスオーバー時にぼかしを滑らかに解除するための準備 */
    transition: filter 0.2s ease-in-out; 
    cursor: help; /* 読めることを示唆 */
}

/* ルビ全体に適用されるスタイル */
ruby {
    /* 必要に応じて、行の高さなどを調整し、ルビが表示されてもレイアウトが崩れにくいようにします */
    line-height: 1.5; 
    white-space: nowrap; /* ルビと親文字が途中で改行されるのを防ぐ */
}

/* ルビテキスト（ふりがな）に適用されるスタイル */
rt {
    /* ルビのフォントサイズを小さくします */
    font-size: 0.6em; 
    /* 必要に応じてルビの色を変えることもできます */
    /* color: #aaa; */ 
}

/* 1. 通常時の状態 */
.text-mask {
    color: #515151; 
    background-color: #515151; 
    font-weight: bold;
    padding: 0 2px;
    /* ★ Safari対策: テキスト選択時の色変更をインラインで制御するため */
    -webkit-user-select: text;
    user-select: text;
}

/* 2. 選択時の状態 */
.text-mask::selection {
    background-color: #bbccff;
    color: #f1f1f1;
}

/* ★ Safari対策: -webkit- プレフィックス版を必ず追加 */
.text-mask::-webkit-selection {
    background-color: #bbccff;
    color: #f1f1f1;
}

/* 3. ホバー時 */
.text-mask:hover {
    cursor: text; 
}