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

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

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

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

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

/* 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; */ 
}

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

/* 1. 通常時の状態: テキストを見えなくする */
.text-mask {
    /* (A) マスキングの色を、標準のテキスト色（189, 189, 189）に近い、または同じ濃い色に設定 */
    color: #515151; 
    
    /* (B) 背景色を、(A)の文字色と同じ濃い色に設定 */
    background-color: #515151; 
    
    /* これにより、文字が背景色と同じ色で塗りつぶされたように見える */
    font-weight: bold; /* 検閲線のように太くする（任意）*/
    padding: 0 2px; /* 検閲線として見栄えが良くなるように余白を少し追加（任意）*/
}

/* 2. ユーザーがこの部分を選択（ハイライト）した時の状態 */
.text-mask::selection {
    /* 選択時の背景色: ブラウザ標準、または目立つ色に戻す */
    background-color: #bbccff; /* 例: 薄い青 */
    
    /* 選択時の文字色: 元の文字色に戻すことで、文字が見えるようになる */
    color: #f1f1f1; /* 例: 明るい色 */
}

/* 3. マスキングされた要素の内部で、カーソルがポインターになるのを防ぐ (任意) */
.text-mask:hover {
    cursor: text; 
}