神楽坂さんのツールとEpub(3) さらに調整してもう少しトークメーカーっぽく

/* Tanigawa MOD sample 20180415 */
.iconL {
    float: left;
    padding-top: 0%;
    padding-left: 0%;
    padding-right: 0%;
    padding-bottom: 0%;
    text-align: center;
    display: inline;
    width: 20%;
    /* 20+0+0=20% */
}
.iconR {
    float: Right;
    padding-top: 0%;
    padding-left: 0%;
    padding-right: 0%;
    padding-bottom: 0%;
    text-align: center;
    display: inline;
    width: 20%;
    /* 20+0+0=20% */
}
.iconClear {
    clear: both;
}
/* 以下、吹き出しテキストの位置指定に利用 */
.fukiL {/* 左側吹き出し（右アイコンiconRと対で利用） */
    float: left;
    padding-top: 2%; /* これを削ると、文字と吹き出し枠間の余裕がなくなる*/
    padding-left: 2%; /* なので、少しはあった方が良い */
    padding-right: 2%;
    padding-bottom: 2%;
    text-align: left; /*文字は左寄せ*/
    display: inline;
    width: 75%;/*アイコンが10%幅なら85%に */
    border-radius: 1em; /* 角丸呪文 */
    -webkit-border-radius: 1em; /* 角丸呪文 */
    -moz-border-radius: 1em; /* 角丸呪文 */
    background: rgb(235, 235, 235);/* gray */
    position: relative;/* 吹き出しの「＞」形パーツ使用時必須 */
    /* 75+2+2=79%, ∴20%(アイコン)+79%(文字)=99%
        これでfloat崩れを起こさないはず 多分 */
    /* アイコンを大きくする場合は
       iconR(iconL)のwidthの数値を増加させますが、増加させただけ、
       fukiR(fukiL)のwidthを減少させて下さい */
}
.fukiL:after{/* 吹き出しの 「＞」形 部分 不要な人はこの行を含めて10行削る */
    border-left:   1.0em solid;/*吹き出し「＞」幅*/
    border-top:    0.5em solid transparent;/* 吹き出し「＞」高さ上半分 */
    border-bottom: 0.5em solid transparent;/* 吹き出し「＞」高さ下半分 */
    border-color:transparent transparent transparent inherit;/* 色継承 */
    content: '';/*なにもないけど必須*/
    position: absolute;
    right: -1.0em;/* 位置指定 */
    top: 1.0em;/* 位置指定 */
}
.fukiR {/* 右側吹き出し（左アイコンiconLと対で利用） */
    float: right;
    padding-top: 2%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
    text-align: left;
    display: inline;
    width: 75%;
    border-radius: 1em; /* 角丸呪文 */
    -webkit-border-radius: 1em; /* 角丸呪文 */
    -moz-border-radius: 1em; /* 角丸呪文 */
    background: rgb(235, 235, 235);/* gray */
    position: relative;/* 吹き出しの「＜」形パーツ使用時必須 */
}
.fukiR:after{/* 吹き出しの 「＜」形 部分 不要な人はこの行を含めて10行削る */
    border-right:  1.0em solid;/* 吹き出し「＜」幅 */
    border-top:    0.5em solid transparent;/* 吹き出し「＜」高さ上半分 */
    border-bottom: 0.5em solid transparent;/* 吹き出し「＜」高さ下半分 */
    border-color:transparent inherit transparent transparent;/* 色継承 */
    content: '';/*なにもないけど必須*/
    position: absolute;
    left: -1.0em;/* 位置指定 */
    top: 1.0em;/* 位置指定 */
}
/* 以下、吹き出しテキスト背景色の指定に利用
    ＜div class="fukiR fC1"＞等
    色の指定を忘れると、fukiRやfukiLで指定した灰色に。
    fCは fukidashi Color の意。
    RGB基本8色の無彩色（白・黒）を抜いて6色。その明暗で12色。
    イロイッカイヅツ
    ついでに「＞」とか「＜」の色指定もここで。同じ色。
*/
.fC1{/*red*/
    /* ↓fuki「＞」形のボーダー色指定 「上（透明）」「左右（バックグラウンドと同じ）」「下（透明）」 */
    border-color:transparent rgb(255, 235, 235) transparent;
    background: rgb(255, 235, 235);/* 背景色 */
}
.fC2{/*green*/
    border-color:transparent rgb(235, 255, 235) transparent;
    background: rgb(235, 255, 235);
}
.fC3{/*yellow*/
    border-color:transparent rgb(255, 255, 235) transparent;
    background: rgb(255, 255, 235);
}
.fC4{/*blue*/
    border-color:transparent rgb(235, 235, 255) transparent;
    background: rgb(235, 235, 255);
}
.fC5{/*magenda*/
    border-color:transparent rgb(255, 235, 255) transparent;
    background: rgb(255, 235, 255);
}
.fC6{/*cyan*/
    border-color:transparent rgb(235, 255, 255) transparent;
    background: rgb(235, 255, 255);
}
.fC7{/*darkred*/
    border-color:transparent rgb(245, 225, 225) transparent;
    background: rgb(245, 225, 225);
}
.fC8{/*darkgreen*/
    border-color:transparent rgb(225, 245, 225) transparent;
    background: rgb(225, 245, 225);
}
.fC9{/*darkyellow*/
    border-color:transparent rgb(245, 245, 225) transparent;
    background: rgb(245, 245, 225);
}
.fC10{/*darkblue*/
    border-color:transparent rgb(225, 225, 245) transparent;
    background: rgb(225, 225, 245);
}
.fC11{/*darkmagenda*/
    border-color:transparent rgb(245, 225, 245) transparent;
    background: rgb(245, 225, 245);
}
.fC12{/*darkcyan*/
    border-color:transparent rgb(225, 245, 245) transparent;
    background: rgb(225, 245, 245);
}

/* 基本的に文章は左寄せだけど、センタリングしたい時に。 fukiL fC1 cent とかで指定 */
.cent{text-align: center}