電書連（旧：電書協）の公開する「電書協 EPUB 3 制作ガイド」（通称：電書協ガイド）は商業出版の一般書やコミックの制作の手引として広く使われてきていました。
電書協ガイドの定めるEPUBの構造やファイル名の規則は、でんでんコンバーターのEPUBとはかなり異なっており対応は見送っていましたが、CSSについては競合が少ないため、部分的に導入することにしました。
電書協ガイドのCSSは、Web制作におけるCSSフレームワークに相当するもので、レイアウトやスタイルに対応するCSSのクラスが定義されています。一旦慣れてしまうと大変に便利です。
たとえば、文字の大きさを1.5倍にしたいなら font-150per というクラスが定義されているので、次のように書けます。 gfont はゴシック体、 mfont は明朝体を指定できます。
文章の一部を<span class="font-150per gfont">大きなゴシック体の文字</span>にします。
他にもたくさんのクラスがあり全部覚える必要はないのですが、CSSを書くよりはるかに楽なので、気軽に試してみてもよいのではないでしょうか。style-standard.cssというファイルを読めば使い方はなんとなくわかると思います。以下に全文を貼っておきます。
@charset "UTF-8";
/* ファイル情報
----------------------------------------------------------------
【内容】
全作品共通の基本スタイル
【CSSファイルバージョン】
ver.1.3.1
【当ファイル更新時の電書協EPUB 3 制作ガイドバージョン】
ver.1.1.3
【細目】
・組み方向指定
・html指定
・ボックスの種類
・改ページ指定
・行揃え
・ブロック要素の位置揃え
・インライン要素の位置揃え
・リンク指定
・注釈
・外字画像
・画像のページフィット指定
・縦中横
・文字の向き
・上付文字・下付文字
・小書き文字
・訓点（返り点）
・圏点・傍点
・行高
・文字の間隔
・フォント指定
・太字
・斜体
・文字色
・背景色
・文字色の白黒反転
・圏点・傍点の色指定
・区切り線
・打ち消し線
・傍線
・囲み罫
・罫線
・罫線色
・行頭インデント
・突き出しインデント（ぶら下がりインデント）
・字下げ・字上げ指定
・外側の余白（マージン）指定
・内側の余白（パディング）指定
・高さ
・高さの最大値
・幅
・幅の最大値
・最大サイズ
・禁則処理のルール
・自動改行のルール
・長い単語の改行ルール
・【参考】回り込み
【更新履歴】
2014/11/01 ver.1.3.1
・「行揃え」の「-epub(webkit)-text-align-last」を削除
・「縦中横」を修正
・「文字の向き」の「.upright-1」を修正
・「文字の向き」の「.sideways」を修正
2012/12/07 ver.1.3.0
・ファイル更新時の電書協EPUB 3 制作ガイドバージョン表記を追加
2012/10/29 ver.1.2b1
・「傍線」を修正
2012/10/03 ver.1.1b1
・「行揃え」の位置揃え用の空白数を調整
・「文字の向き」の「.sideways」を修正
・「傍線」を修正
2012/08/21 ver.1.0b1
・公開版
---------------------------------------------------------------- */
/* 組み方向指定
---------------------------------------------------------------- */
/* 横組み用 */
html,
.hltr {
-webkit-writing-mode: horizontal-tb;
-epub-writing-mode: horizontal-tb;
}
/* 縦組み用 */
.vrtl {
-webkit-writing-mode: vertical-rl;
-epub-writing-mode: vertical-rl;
}
/*
.vltr {
-webkit-writing-mode: vertical-lr;
-epub-writing-mode: vertical-lr;
}
*/
/* html指定
----------------------------------------------------------------
デフォルトフォントのみ指定
---------------------------------------------------------------- */
html {
font-family: serif-ja, serif;
}
/* ボックスの種類
---------------------------------------------------------------- */
.display-none {
display: none;
}
.display-inline {
display: inline;
}
.display-inline-block {
display: inline-block;
}
.display-block {
display: block;
}
/* 改ページ指定
----------------------------------------------------------------
端末の処理能力等に配慮する意味もあり、
改ページは、原則としてファイルを替えることで実現する
ただし、ページ全体のスタイル指定の変更が不要で、
かつページ数が少ない場合は、ファイル数の増加を防ぐため、
下記の指定を利用する可能性もある（短い随筆やコラム的な文章の連続など）
---------------------------------------------------------------- */
/* 指定したブロックの直後で改ページ */
.pagebreak {
page-break-after: always;
}
/* 指定したブロックの直前で改ページ */
.pagebreak-before {
page-break-before: always;
}
/* 指定したブロックの前後で改ページ */
.pagebreak-both {
page-break-before: always;
page-break-after: always;
}
/* 行揃え
----------------------------------------------------------------
本文は原則として「text-align: justify;」
ただし、両端が揃うのが好ましくない場合は手動で以下の「align-start」を利用
行末まで均等揃えは今回含めない
---------------------------------------------------------------- */
/* 行頭揃え */
.align-left,
.align-start {
text-align: left;
}
/* 行中揃え */
.align-center {
text-align: center;
}
/* 行末揃え */
.align-right,
.align-end {
text-align: right;
}
/* 両端揃え（行末は行頭揃え） */
.align-justify {
text-align: justify;
}
/* ブロック要素の位置揃え
---------------------------------------------------------------- */
/* 絶対方向（横組みでは左右、縦組みでは上下方向のみ利用可） */
.block-align-left { margin: 0 auto 0 0; }
.block-align-center { margin: 0 auto; }
.block-align-right { margin: 0 0 0 auto; }
.block-align-top { margin: 0 0 auto 0; }
.block-align-middle { margin: auto 0; }
.block-align-bottom { margin: auto 0 0 0; }
/* 論理方向（行頭-行中-行末） */
/* 横組み用 */
.hltr .block-align-start { margin: 0 auto 0 0; }
.hltr .block-align-center { margin: 0 auto; }
.hltr .block-align-end { margin: 0 0 0 auto; }
/* 縦組み用 */
.vrtl .block-align-start { margin: 0 0 auto 0; }
.vrtl .block-align-center { margin: auto 0; }
.vrtl .block-align-end { margin: auto 0 0 0; }
/* インライン要素の位置揃え
---------------------------------------------------------------- */
.valign-inherit { vertical-align: inherit; }
.valign-baseline { vertical-align: baseline; }
.valign-sub { vertical-align: sub; }
.valign-super { vertical-align: super; }
.valign-top { vertical-align: top; }
.valign-text-top { vertical-align: text-top; }
.valign-middle { vertical-align: middle; }
.valign-bottom { vertical-align: bottom; }
.valign-text-bottom { vertical-align: text-bottom; }
/* リンク指定
---------------------------------------------------------------- */
/* 基本設定 */
/* 横組み：下線 縦組み：右線 */
.hltr a {
text-decoration: underline;
}
.vrtl a {
text-decoration: overline;
}
/* リンク文字色（デフォルトは青） */
a:link,
a:visited,
a:hover,
a:focus,
a:active {
color: #0000ff;
}
/* 注釈
---------------------------------------------------------------- */
/* 注釈記号の文字サイズ */
.key,
.ref {
font-size: smaller;
vertical-align: super;
}
/* 外字画像
---------------------------------------------------------------- */
img.gaiji,
img.gaiji-line,
img.gaiji-wide {
display: inline-block;
margin: 0;
padding: 0;
border: none;
background: transparent;
}
img.gaiji {
width: 1em;
height: 1em;
}
img.gaiji-line {
width: 1em;
height: auto;
}
img.gaiji-wide {
width: auto;
height: 1em;
}
/* 外字画像のベースライン */
.hltr img.gaiji,
.hltr img.gaiji-line,
.hltr img.gaiji-wide {
vertical-align: text-bottom;
}
.vrtl img.gaiji,
.vrtl img.gaiji-line,
.vrtl img.gaiji-wide {
vertical-align: baseline;
}
/* 画像のページフィット指定
----------------------------------------------------------------
「img.fit」を用いること
サイズ指定上書きの都合上、CSS ファイル上では img.fit と記述しない
<p><img class="fit max-height-050per" src="" alt=""/></p>
---------------------------------------------------------------- */
.fit {
display: inline-block;
page-break-inside: avoid;
max-height: 100%;
max-width: 100%;
}
/* 画像のベースライン */
.hltr .fit {
vertical-align: top;
}
.vrtl .fit {
vertical-align: baseline;
}
/* 縦中横
---------------------------------------------------------------- */
.tcy {
-webkit-text-combine: horizontal;
-webkit-text-combine-upright: all;
text-combine-upright: all;
-epub-text-combine: horizontal;
}
/* 文字の向き
----------------------------------------------------------------
【WebKit対策】半角１文字の直立はセンターが揃わないので縦中横を利用
---------------------------------------------------------------- */
.upright-1 {
-webkit-text-combine: horizontal;
-webkit-text-combine-upright: all;
text-combine-upright: all;
-epub-text-combine: horizontal;
}
.upright {
-webkit-text-orientation: upright;
-epub-text-orientation: upright;
}
.sideways {
-webkit-text-orientation: sideways;
-epub-text-orientation: sideways;
}
/* 上付文字・下付文字
---------------------------------------------------------------- */
/* 上付文字 */
.super {
font-size: smaller;
vertical-align: super;
}
/* 下付文字 */
.sub {
font-size: smaller;
vertical-align: sub;
}
/* 小書き文字
----------------------------------------------------------------
通常の文字を「ぁゃっ」のような小書き文字に見せるための指定
---------------------------------------------------------------- */
.kogaki {
font-size: 0.75em;
}
/* 【横組み】左下 */
.hltr .kogaki {
padding: 0 0.15em 0 0.1em;
vertical-align: baseline;
}
/* 【縦組み】右上 */
.vrtl .kogaki {
padding: 0.1em 0 0.15em 0;
vertical-align: super;
}
/* 訓点（返り点）
----------------------------------------------------------------
縦組み時、上付・下付文字の上下端のスペースは調整しない
必要があれば、class を上書きすること
---------------------------------------------------------------- */
/* 記号（縦組みでは左上付） */
.kunten {
vertical-align: sub;
font-size: 0.67em;
}
/* 送り仮名（縦組みでは右上付） */
.kunten-okuri {
vertical-align: super;
font-size: 0.67em;
}
/* 圏点・傍点
---------------------------------------------------------------- */
.em-sesame {
-webkit-text-emphasis-style: filled sesame;
-epub-text-emphasis-style: filled sesame;
}
.em-sesame-open {
-webkit-text-emphasis-style: open sesame;
-epub-text-emphasis-style: open sesame;
}
.em-dot {
-webkit-text-emphasis-style: filled dot;
-epub-text-emphasis-style: filled dot;
}
.em-dot-open {
-webkit-text-emphasis-style: open dot;
-epub-text-emphasis-style: open dot;
}
.em-circle {
-webkit-text-emphasis-style: filled circle;
-epub-text-emphasis-style: filled circle;
}
.em-circle-open {
-webkit-text-emphasis-style: open circle;
-epub-text-emphasis-style: open circle;
}
.em-double-circle {
-webkit-text-emphasis-style: filled double-circle;
-epub-text-emphasis-style: filled double-circle;
}
.em-double-circle-open {
-webkit-text-emphasis-style: open double-circle;
-epub-text-emphasis-style: open double-circle;
}
.em-triangle {
-webkit-text-emphasis-style: filled triangle;
-epub-text-emphasis-style: filled triangle;
}
.em-triangle-open {
-webkit-text-emphasis-style: open triangle;
-epub-text-emphasis-style: open triangle;
}
/* 行高
---------------------------------------------------------------- */
.line-height-normal { line-height: normal; }
.line-height-1em { line-height: 1.00; }
.line-height-1em50 { line-height: 1.50; }
.line-height-1em75 { line-height: 1.75; }
.line-height-2em { line-height: 2.00; }
.line-height-2em50 { line-height: 2.50; }
.line-height-3em { line-height: 3.00; }
.line-height-3em50 { line-height: 3.50; }
.line-height-4em { line-height: 4.00; }
.line-height-4em50 { line-height: 4.50; }
.line-height-5em { line-height: 5.00; }
/* 文字の間隔
----------------------------------------------------------------
本文中では四分アキ［25%］刻み以外はなるべく使わない方向で
---------------------------------------------------------------- */
/* 標準 */
.lspacing-normal { letter-spacing: normal; }
/* クリア */
.lspacing-0,
.lspacing-0em { letter-spacing: 0; }
/* 文字数指定 */
.lspacing-0em10 { letter-spacing: 0.10em; }
.lspacing-0em20 { letter-spacing: 0.20em; }
.lspacing-0em25 { letter-spacing: 0.25em; }
.lspacing-0em30 { letter-spacing: 0.30em; }
.lspacing-0em33 { letter-spacing: 0.33em; }
.lspacing-0em40 { letter-spacing: 0.40em; }
.lspacing-0em50 { letter-spacing: 0.50em; }
.lspacing-0em60 { letter-spacing: 0.60em; }
.lspacing-0em67 { letter-spacing: 0.67em; }
.lspacing-0em70 { letter-spacing: 0.70em; }
.lspacing-0em75 { letter-spacing: 0.75em; }
.lspacing-0em80 { letter-spacing: 0.80em; }
.lspacing-0em90 { letter-spacing: 0.90em; }
.lspacing-1em { letter-spacing: 1.00em; }
.lspacing-1em25 { letter-spacing: 1.25em; }
.lspacing-1em50 { letter-spacing: 1.50em; }
.lspacing-1em75 { letter-spacing: 1.75em; }
.lspacing-2em { letter-spacing: 2.00em; }
.lspacing-2em25 { letter-spacing: 2.25em; }
.lspacing-2em50 { letter-spacing: 2.50em; }
.lspacing-2em75 { letter-spacing: 2.75em; }
.lspacing-3em { letter-spacing: 3.00em; }
.lspacing-3em25 { letter-spacing: 3.25em; }
.lspacing-3em50 { letter-spacing: 3.50em; }
.lspacing-3em75 { letter-spacing: 3.75em; }
.lspacing-4em { letter-spacing: 4.00em; }
.lspacing-4em25 { letter-spacing: 4.25em; }
.lspacing-4em50 { letter-spacing: 4.50em; }
.lspacing-4em75 { letter-spacing: 4.75em; }
.lspacing-5em { letter-spacing: 5.00em; }
/* フォント指定
---------------------------------------------------------------- */
/* 明朝 */
.hltr .mfont,
.vrtl .mfont {
font-family: serif-ja, serif;
}
/* ゴシック */
.hltr .gfont,
.vrtl .gfont {
font-family: sans-serif-ja, sans-serif;
}
/* フォントサイズ（％指定） */
.font-050per { font-size: 50%; }
.font-060per { font-size: 60%; }
.font-070per { font-size: 70%; }
.font-075per { font-size: 75%; }
.font-080per { font-size: 80%; }
.font-085per { font-size: 85%; }
.font-090per { font-size: 90%; }
.font-100per { font-size: 100%; }
.font-110per { font-size: 110%; }
.font-115per { font-size: 115%; }
.font-120per { font-size: 120%; }
.font-130per { font-size: 130%; }
.font-140per { font-size: 140%; }
.font-150per { font-size: 150%; }
.font-160per { font-size: 160%; }
.font-170per { font-size: 170%; }
.font-180per { font-size: 180%; }
.font-190per { font-size: 190%; }
.font-200per { font-size: 200%; }
.font-250per { font-size: 250%; }
.font-300per { font-size: 300%; }
/* フォントサイズ（文字数指定） */
.font-0em50 { font-size: 0.50em; }
.font-0em60 { font-size: 0.60em; }
.font-0em70 { font-size: 0.70em; }
.font-0em75 { font-size: 0.75em; }
.font-0em80 { font-size: 0.80em; }
.font-0em85 { font-size: 0.85em; }
.font-0em90 { font-size: 0.90em; }
.font-1em { font-size: 1.00em; }
.font-1em10 { font-size: 1.10em; }
.font-1em15 { font-size: 1.15em; }
.font-1em20 { font-size: 1.20em; }
.font-1em30 { font-size: 1.30em; }
.font-1em40 { font-size: 1.40em; }
.font-1em50 { font-size: 1.50em; }
.font-1em60 { font-size: 1.60em; }
.font-1em70 { font-size: 1.70em; }
.font-1em80 { font-size: 1.80em; }
.font-1em90 { font-size: 1.90em; }
.font-2em { font-size: 2.00em; }
.font-2em50 { font-size: 2.50em; }
.font-3em { font-size: 3.00em; }
/* 太字
---------------------------------------------------------------- */
/* 太字 */
.bold {
font-weight: bold;
}
/* 太字解除 */
.font-weight-normal {
font-weight: normal;
}
/* 斜体
---------------------------------------------------------------- */
/* 斜体 */
.italic {
font-style: italic;
}
/* 斜体解除 */
.font-style-normal {
font-style: normal;
}
/* 文字色
---------------------------------------------------------------- */
/* １Ｃ用文字色 */
.color-black { color: #000000; }
.color-dimgray { color: #696969; }
.color-gray { color: #808080; }
.color-darkgray { color: #a9a9a9; }
.color-silver { color: #c0c0c0; }
.color-gainsboro { color: #dcdcdc; }
.color-white { color: #ffffff; }
.color-transparent { color: transparent; }
/* 基本色 */
.color-red { color: #ff0000; }
.color-blue { color: #0000ff; }
.color-cyan { color: #00ffff; }
.color-magenta { color: #ff00ff; }
.color-orangered { color: #ff4500; }
/* 背景色
---------------------------------------------------------------- */
/* １Ｃ用背景色 */
.bg-black { background-color: #000000; }
.bg-dimgray { background-color: #696969; }
.bg-gray { background-color: #808080; }
.bg-darkgray { background-color: #a9a9a9; }
.bg-silver { background-color: #c0c0c0; }
.bg-gainsboro { background-color: #dcdcdc; }
.bg-white { background-color: #ffffff; }
.bg-transparent { background-color: transparent; }
/* 基本色 */
.bg-red { background-color: #ff0000; }
.bg-blue { background-color: #0000ff; }
.bg-cyan { background-color: #00ffff; }
.bg-magenta { background-color: #ff00ff; }
.bg-orangered { background-color: #ff4500; }
/* 文字色の白黒反転
---------------------------------------------------------------- */
.inverse {
color: #ffffff;
background: #000000;
}
/* 圏点・傍点の色指定
----------------------------------------------------------------
インラインで .inverse を用いたとき、行間に表示される傍点色が白になり、
白背景では傍点が見えなくなってしまうことへの対処用
---------------------------------------------------------------- */
.em-black {
-webkit-text-emphasis-color: #000000;
-epub-text-emphasis-color: #000000;
}
/* 区切り線
---------------------------------------------------------------- */
hr {
border-width: 1px;
border-color: #000000;
}
/* 【横組み】水平線 */
.hltr hr {
margin: 0.5em 0;
border-style: solid none none none;
}
/* 【縦組み】垂直線 */
.vrtl hr {
margin: 0 0.5em;
border-style: none solid none none;
}
/* 打ち消し線
---------------------------------------------------------------- */
.line-through {
text-decoration: line-through;
}
/* 傍線
---------------------------------------------------------------- */
/* 【横組み】下線 【縦組み】右線 */
.hltr .em-line {
text-decoration: underline;
}
.vrtl .em-line {
text-decoration: overline;
}
/* 【横組み】上線 【縦組み】左線 */
.hltr .em-line-outside {
text-decoration: overline;
}
.vrtl .em-line-outside {
text-decoration: underline;
}
/* 囲み罫
----------------------------------------------------------------
線幅の指定には、罫線と同じものを使用
---------------------------------------------------------------- */
/* 上から実線、点線、二重線、破線 */
.k-solid { border-style: solid solid solid solid; border-width: 1px; border-color: #000000; }
.k-dotted { border-style: dotted dotted dotted dotted; border-width: 2px; border-color: #000000; }
.k-double { border-style: double double double double; border-width: 4px; border-color: #000000; }
.k-dashed { border-style: dashed dashed dashed dashed; border-width: 1px; border-color: #000000; }
/* 線色付き囲み罫（画像枠などに利用） */
.k-solid-black { border-style: solid solid solid solid; border-width: 1px; border-color: #000000; }
.k-solid-gray { border-style: solid solid solid solid; border-width: 1px; border-color: #808080; }
.k-solid-silver { border-style: solid solid solid solid; border-width: 1px; border-color: #c0c0c0; }
.k-solid-white { border-style: solid solid solid solid; border-width: 1px; border-color: #ffffff; }
/* 罫線
----------------------------------------------------------------
線種や線幅など、細かな調整が必要なときは、
無理に既存のクラスを用いず新たにクラスを作成すること
---------------------------------------------------------------- */
/* 線種【実線】 */
.k-solid-top,
.k-solid-right,
.k-solid-bottom,
.k-solid-left,
.k-solid-topbottom,
.k-solid-rightleft {
border-width: 1px;
border-color: #000000;
}
/* 線位置【実線】 */
.k-solid-top { border-style: solid none none none; }
.k-solid-right { border-style: none solid none none; }
.k-solid-bottom { border-style: none none solid none; }
.k-solid-left { border-style: none none none solid; }
.k-solid-topbottom { border-style: solid none solid none; }
.k-solid-rightleft { border-style: none solid none solid; }
/* 線種【点線】 */
.k-dotted-top,
.k-dotted-right,
.k-dotted-bottom,
.k-dotted-left,
.k-dotted-topbottom,
.k-dotted-rightleft {
border-width: 2px;
border-color: #000000;
}
/* 線位置【点線】 */
.k-dotted-top { border-style: dotted none none none; }
.k-dotted-right { border-style: none dotted none none; }
.k-dotted-bottom { border-style: none none dotted none; }
.k-dotted-left { border-style: none none none dotted; }
.k-dotted-topbottom { border-style: dotted none dotted none; }
.k-dotted-rightleft { border-style: none dotted none dotted; }
/* 線種【二重線】 */
.k-double-top,
.k-double-right,
.k-double-bottom,
.k-double-left,
.k-double-topbottom,
.k-double-rightleft {
border-width: 4px;
border-color: #000000;
}
/* 線位置【二重線】 */
.k-double-top { border-style: double none none none; }
.k-double-right { border-style: none double none none; }
.k-double-bottom { border-style: none none double none; }
.k-double-left { border-style: none none none double; }
.k-double-topbottom { border-style: double none double none; }
.k-double-rightleft { border-style: none double none double; }
/* 線種【破線】 */
.k-dashed-top,
.k-dashed-right,
.k-dashed-bottom,
.k-dashed-left,
.k-dashed-topbottom,
.k-dashed-rightleft {
border-width: 1px;
border-color: #000000;
}
/* 線位置【破線】 */
.k-dashed-top { border-style: dashed none none none; }
.k-dashed-right { border-style: none dashed none none; }
.k-dashed-bottom { border-style: none none dashed none; }
.k-dashed-left { border-style: none none none dashed; }
.k-dashed-topbottom { border-style: dashed none dashed none; }
.k-dashed-rightleft { border-style: none dashed none dashed; }
/* 線幅 */
.k-0px { border-width: 0; }
.k-1px { border-width: 1px; }
.k-2px { border-width: 2px; }
.k-3px { border-width: 3px; }
.k-4px { border-width: 4px; }
.k-5px { border-width: 5px; }
.k-6px { border-width: 6px; }
.k-7px { border-width: 7px; }
.k-8px { border-width: 8px; }
.k-thin { border-width: thin; }
.k-medium { border-width: medium; }
.k-thick { border-width: thick; }
/* １Ｃ用の線色 */
.k-black { border-color: #000000; }
.k-dimgray { border-color: #696969; }
.k-gray { border-color: #808080; }
.k-darkgray { border-color: #a9a9a9; }
.k-silver { border-color: #c0c0c0; }
.k-gainsboro { border-color: #dcdcdc; }
.k-white { border-color: #ffffff; }
/* 基本色 */
.k-red { border-color: #ff0000; }
.k-blue { border-color: #0000ff; }
.k-cyan { border-color: #00ffff; }
.k-magenta { border-color: #ff00ff; }
.k-orangered { border-color: #ff4500; }
/* 行頭インデント
---------------------------------------------------------------- */
.indent-0,
.indent-0em { text-indent: 0; }
.indent-1em { text-indent: 1em; }
.indent-2em { text-indent: 2em; }
.indent-3em { text-indent: 3em; }
.indent-4em { text-indent: 4em; }
.indent-5em { text-indent: 5em; }
.indent-6em { text-indent: 6em; }
.indent-7em { text-indent: 7em; }
.indent-8em { text-indent: 8em; }
.indent-9em { text-indent: 9em; }
.indent-10em { text-indent: 10em; }
/* 突き出しインデント（ぶら下がりインデント）
----------------------------------------------------------------
「h-」は「hanging」の略
---------------------------------------------------------------- */
/* 横組み用 */
.hltr .h-indent-0,
.hltr .h-indent-0em { text-indent: 0; padding-left: 0; }
.hltr .h-indent-1em { text-indent: -1em; padding-left: 1em; }
.hltr .h-indent-2em { text-indent: -2em; padding-left: 2em; }
.hltr .h-indent-3em { text-indent: -3em; padding-left: 3em; }
.hltr .h-indent-4em { text-indent: -4em; padding-left: 4em; }
.hltr .h-indent-5em { text-indent: -5em; padding-left: 5em; }
.hltr .h-indent-6em { text-indent: -6em; padding-left: 6em; }
.hltr .h-indent-7em { text-indent: -7em; padding-left: 7em; }
.hltr .h-indent-8em { text-indent: -8em; padding-left: 8em; }
.hltr .h-indent-9em { text-indent: -9em; padding-left: 9em; }
.hltr .h-indent-10em { text-indent: -10em; padding-left: 10em; }
/* 縦組み用 */
.vrtl .h-indent-0,
.vrtl .h-indent-0em { text-indent: 0; padding-top: 0; }
.vrtl .h-indent-1em { text-indent: -1em; padding-top: 1em; }
.vrtl .h-indent-2em { text-indent: -2em; padding-top: 2em; }
.vrtl .h-indent-3em { text-indent: -3em; padding-top: 3em; }
.vrtl .h-indent-4em { text-indent: -4em; padding-top: 4em; }
.vrtl .h-indent-5em { text-indent: -5em; padding-top: 5em; }
.vrtl .h-indent-6em { text-indent: -6em; padding-top: 6em; }
.vrtl .h-indent-7em { text-indent: -7em; padding-top: 7em; }
.vrtl .h-indent-8em { text-indent: -8em; padding-top: 8em; }
.vrtl .h-indent-9em { text-indent: -9em; padding-top: 9em; }
.vrtl .h-indent-10em { text-indent: -10em; padding-top: 10em; }
/* 字下げ・字上げ指定
---------------------------------------------------------------- */
/* 字下げ：横組み用 */
.hltr .start-0,
.hltr .start-0em { margin-left: 0; }
.hltr .start-0em25 { margin-left: 0.25em; }
.hltr .start-0em50 { margin-left: 0.50em; }
.hltr .start-0em75 { margin-left: 0.75em; }
.hltr .start-1em { margin-left: 1.00em; }
.hltr .start-1em25 { margin-left: 1.25em; }
.hltr .start-1em50 { margin-left: 1.50em; }
.hltr .start-1em75 { margin-left: 1.75em; }
.hltr .start-2em { margin-left: 2.00em; }
.hltr .start-2em50 { margin-left: 2.50em; }
.hltr .start-3em { margin-left: 3.00em; }
.hltr .start-4em { margin-left: 4.00em; }
.hltr .start-5em { margin-left: 5.00em; }
.hltr .start-6em { margin-left: 6.00em; }
.hltr .start-7em { margin-left: 7.00em; }
.hltr .start-8em { margin-left: 8.00em; }
.hltr .start-9em { margin-left: 9.00em; }
.hltr .start-10em { margin-left: 10.00em; }
/* 字下げ：縦組み用 */
.vrtl .start-0,
.vrtl .start-0em { margin-top: 0; }
.vrtl .start-0em25 { margin-top: 0.25em; }
.vrtl .start-0em50 { margin-top: 0.50em; }
.vrtl .start-0em75 { margin-top: 0.75em; }
.vrtl .start-1em { margin-top: 1.00em; }
.vrtl .start-1em25 { margin-top: 1.25em; }
.vrtl .start-1em50 { margin-top: 1.50em; }
.vrtl .start-1em75 { margin-top: 1.75em; }
.vrtl .start-2em { margin-top: 2.00em; }
.vrtl .start-2em50 { margin-top: 2.50em; }
.vrtl .start-3em { margin-top: 3.00em; }
.vrtl .start-4em { margin-top: 4.00em; }
.vrtl .start-5em { margin-top: 5.00em; }
.vrtl .start-6em { margin-top: 6.00em; }
.vrtl .start-7em { margin-top: 7.00em; }
.vrtl .start-8em { margin-top: 8.00em; }
.vrtl .start-9em { margin-top: 9.00em; }
.vrtl .start-10em { margin-top: 10.00em; }
/* 字上げ：横組み用 */
.hltr .end-0,
.hltr .end-0em { margin-right: 0; }
.hltr .end-0em25 { margin-right: 0.25em; }
.hltr .end-0em50 { margin-right: 0.50em; }
.hltr .end-0em75 { margin-right: 0.75em; }
.hltr .end-1em { margin-right: 1.00em; }
.hltr .end-1em25 { margin-right: 1.25em; }
.hltr .end-1em50 { margin-right: 1.50em; }
.hltr .end-1em75 { margin-right: 1.75em; }
.hltr .end-2em { margin-right: 2.00em; }
.hltr .end-2em50 { margin-right: 2.50em; }
.hltr .end-3em { margin-right: 3.00em; }
.hltr .end-4em { margin-right: 4.00em; }
.hltr .end-5em { margin-right: 5.00em; }
.hltr .end-6em { margin-right: 6.00em; }
.hltr .end-7em { margin-right: 7.00em; }
.hltr .end-8em { margin-right: 8.00em; }
.hltr .end-9em { margin-right: 9.00em; }
.hltr .end-10em { margin-right: 10.00em; }
/* 字上げ：縦組み用 */
.vrtl .end-0,
.vrtl .end-0em { margin-bottom: 0; }
.vrtl .end-0em25 { margin-bottom: 0.25em; }
.vrtl .end-0em50 { margin-bottom: 0.50em; }
.vrtl .end-0em75 { margin-bottom: 0.75em; }
.vrtl .end-1em { margin-bottom: 1.00em; }
.vrtl .end-1em25 { margin-bottom: 1.25em; }
.vrtl .end-1em50 { margin-bottom: 1.50em; }
.vrtl .end-1em75 { margin-bottom: 1.75em; }
.vrtl .end-2em { margin-bottom: 2.00em; }
.vrtl .end-2em50 { margin-bottom: 2.50em; }
.vrtl .end-3em { margin-bottom: 3.00em; }
.vrtl .end-4em { margin-bottom: 4.00em; }
.vrtl .end-5em { margin-bottom: 5.00em; }
.vrtl .end-6em { margin-bottom: 6.00em; }
.vrtl .end-7em { margin-bottom: 7.00em; }
.vrtl .end-8em { margin-bottom: 8.00em; }
.vrtl .end-9em { margin-bottom: 9.00em; }
.vrtl .end-10em { margin-bottom: 10.00em; }
/* 外側の余白（マージン）指定
----------------------------------------------------------------
字下げ・字上げと同じ要素で同時には使えないので注意
【ＮＧ例】<div class="start-2em m-top-1em">
→字下げを内側にして <div> の入れ子とする
---------------------------------------------------------------- */
/* 四方 */
.m-auto { margin: auto; }
.m-0,
.m-0em,
.m-000per { margin: 0; }
/* ％指定 */
.m-005per { margin: 5%; }
.m-010per { margin: 10%; }
.m-015per { margin: 15%; }
.m-020per { margin: 20%; }
.m-025per { margin: 25%; }
.m-030per { margin: 30%; }
.m-033per { margin: 33%; }
.m-040per { margin: 40%; }
.m-050per { margin: 50%; }
.m-060per { margin: 60%; }
.m-067per { margin: 67%; }
.m-070per { margin: 70%; }
.m-075per { margin: 75%; }
.m-080per { margin: 80%; }
.m-090per { margin: 90%; }
/* 文字数指定 */
.m-0em10 { margin: 0.10em; }
.m-0em20 { margin: 0.20em; }
.m-0em25 { margin: 0.25em; }
.m-0em30 { margin: 0.30em; }
.m-0em40 { margin: 0.40em; }
.m-0em50 { margin: 0.50em; }
.m-0em60 { margin: 0.60em; }
.m-0em70 { margin: 0.70em; }
.m-0em75 { margin: 0.75em; }
.m-0em80 { margin: 0.80em; }
.m-0em90 { margin: 0.90em; }
.m-1em { margin: 1.00em; }
.m-1em25 { margin: 1.25em; }
.m-1em50 { margin: 1.50em; }
.m-1em75 { margin: 1.75em; }
.m-2em { margin: 2.00em; }
.m-2em50 { margin: 2.50em; }
.m-3em { margin: 3.00em; }
.m-4em { margin: 4.00em; }
.m-5em { margin: 5.00em; }
/* 画面上側（縦組み：行頭／横組み：行前方） */
.m-top-auto { margin-top: auto; }
.m-top-0,
.m-top-0em,
.m-top-000per { margin-top: 0; }
/* ％指定 */
.m-top-005per { margin-top: 5%; }
.m-top-010per { margin-top: 10%; }
.m-top-015per { margin-top: 15%; }
.m-top-020per { margin-top: 20%; }
.m-top-025per { margin-top: 25%; }
.m-top-030per { margin-top: 30%; }
.m-top-033per { margin-top: 33%; }
.m-top-040per { margin-top: 40%; }
.m-top-050per { margin-top: 50%; }
.m-top-060per { margin-top: 60%; }
.m-top-067per { margin-top: 67%; }
.m-top-070per { margin-top: 70%; }
.m-top-075per { margin-top: 75%; }
.m-top-080per { margin-top: 80%; }
.m-top-090per { margin-top: 90%; }
/* 文字数指定 */
.m-top-0em25 { margin-top: 0.25em; }
.m-top-0em50 { margin-top: 0.50em; }
.m-top-0em75 { margin-top: 0.75em; }
.m-top-1em { margin-top: 1.00em; }
.m-top-1em25 { margin-top: 1.25em; }
.m-top-1em50 { margin-top: 1.50em; }
.m-top-1em75 { margin-top: 1.75em; }
.m-top-2em { margin-top: 2.00em; }
.m-top-2em50 { margin-top: 2.50em; }
.m-top-3em { margin-top: 3.00em; }
.m-top-4em { margin-top: 4.00em; }
.m-top-5em { margin-top: 5.00em; }
.m-top-5em25 { margin-top: 5.25em; }
/* 画面左側（縦組み：行後方／横組み：行頭） */
.m-left-auto { margin-left: auto; }
.m-left-0,
.m-left-0em,
.m-left-000per { margin-left: 0; }
/* ％指定 */
.m-left-005per { margin-left: 5%; }
.m-left-010per { margin-left: 10%; }
.m-left-015per { margin-left: 15%; }
.m-left-020per { margin-left: 20%; }
.m-left-025per { margin-left: 25%; }
.m-left-030per { margin-left: 30%; }
.m-left-033per { margin-left: 33%; }
.m-left-040per { margin-left: 40%; }
.m-left-050per { margin-left: 50%; }
.m-left-060per { margin-left: 60%; }
.m-left-067per { margin-left: 67%; }
.m-left-070per { margin-left: 70%; }
.m-left-075per { margin-left: 75%; }
.m-left-080per { margin-left: 80%; }
.m-left-090per { margin-left: 90%; }
/* 文字数指定 */
.m-left-0em25 { margin-left: 0.25em; }
.m-left-0em50 { margin-left: 0.50em; }
.m-left-0em75 { margin-left: 0.75em; }
.m-left-1em { margin-left: 1.00em; }
.m-left-1em25 { margin-left: 1.25em; }
.m-left-1em50 { margin-left: 1.50em; }
.m-left-1em75 { margin-left: 1.75em; }
.m-left-2em { margin-left: 2.00em; }
.m-left-2em50 { margin-left: 2.50em; }
.m-left-3em { margin-left: 3.00em; }
.m-left-4em { margin-left: 4.00em; }
.m-left-5em { margin-left: 5.00em; }
.m-left-5em25 { margin-left: 5.25em; }
/* 画面右側（縦組み：行前方／横組み：行末） */
.m-right-auto { margin-right: auto; }
.m-right-0
.m-right-0em
.m-right-000per { margin-right: 0; }
/* ％指定 */
.m-right-005per { margin-right: 5%; }
.m-right-010per { margin-right: 10%; }
.m-right-015per { margin-right: 15%; }
.m-right-020per { margin-right: 20%; }
.m-right-025per { margin-right: 25%; }
.m-right-030per { margin-right: 30%; }
.m-right-033per { margin-right: 33%; }
.m-right-040per { margin-right: 40%; }
.m-right-050per { margin-right: 50%; }
.m-right-060per { margin-right: 60%; }
.m-right-067per { margin-right: 67%; }
.m-right-070per { margin-right: 70%; }
.m-right-075per { margin-right: 75%; }
.m-right-080per { margin-right: 80%; }
.m-right-090per { margin-right: 90%; }
/* 文字数指定 */
.m-right-0em25 { margin-right: 0.25em; }
.m-right-0em50 { margin-right: 0.50em; }
.m-right-0em75 { margin-right: 0.75em; }
.m-right-1em { margin-right: 1.00em; }
.m-right-1em25 { margin-right: 1.25em; }
.m-right-1em50 { margin-right: 1.50em; }
.m-right-1em75 { margin-right: 1.75em; }
.m-right-2em { margin-right: 2.00em; }
.m-right-2em50 { margin-right: 2.50em; }
.m-right-3em { margin-right: 3.00em; }
.m-right-4em { margin-right: 4.00em; }
.m-right-5em { margin-right: 5.00em; }
.m-right-5em25 { margin-right: 5.25em; }
/* 画面下側（縦組み：行末／横組み：行後方） */
.m-bottom-auto { margin-bottom: auto; }
.m-bottom-0,
.m-bottom-0em,
.m-bottom-000per { margin-bottom: 0; }
/* ％指定 */
.m-bottom-005per { margin-bottom: 5%; }
.m-bottom-010per { margin-bottom: 10%; }
.m-bottom-015per { margin-bottom: 15%; }
.m-bottom-020per { margin-bottom: 20%; }
.m-bottom-025per { margin-bottom: 25%; }
.m-bottom-030per { margin-bottom: 30%; }
.m-bottom-033per { margin-bottom: 33%; }
.m-bottom-040per { margin-bottom: 40%; }
.m-bottom-050per { margin-bottom: 50%; }
.m-bottom-060per { margin-bottom: 60%; }
.m-bottom-067per { margin-bottom: 67%; }
.m-bottom-070per { margin-bottom: 70%; }
.m-bottom-075per { margin-bottom: 75%; }
.m-bottom-080per { margin-bottom: 80%; }
.m-bottom-090per { margin-bottom: 90%; }
/* 文字数指定 */
.m-bottom-0em25 { margin-bottom: 0.25em; }
.m-bottom-0em50 { margin-bottom: 0.50em; }
.m-bottom-0em75 { margin-bottom: 0.75em; }
.m-bottom-1em { margin-bottom: 1.00em; }
.m-bottom-1em25 { margin-bottom: 1.25em; }
.m-bottom-1em50 { margin-bottom: 1.50em; }
.m-bottom-1em75 { margin-bottom: 1.75em; }
.m-bottom-2em { margin-bottom: 2.00em; }
.m-bottom-2em50 { margin-bottom: 2.50em; }
.m-bottom-3em { margin-bottom: 3.00em; }
.m-bottom-4em { margin-bottom: 4.00em; }
.m-bottom-5em { margin-bottom: 5.00em; }
.m-bottom-5em25 { margin-bottom: 5.25em; }
/* 内側の余白（パディング）指定
---------------------------------------------------------------- */
/* 四方 */
.p-0,
.p-0em,
.p-000per { padding: 0; }
/* ％指定 */
.p-005per { padding: 5%; }
.p-010per { padding: 10%; }
.p-015per { padding: 15%; }
.p-020per { padding: 20%; }
.p-025per { padding: 25%; }
.p-030per { padding: 30%; }
.p-033per { padding: 33%; }
.p-040per { padding: 40%; }
.p-050per { padding: 50%; }
.p-060per { padding: 60%; }
.p-067per { padding: 67%; }
.p-070per { padding: 70%; }
.p-075per { padding: 75%; }
.p-080per { padding: 80%; }
.p-090per { padding: 90%; }
/* 文字数指定 */
.p-0em10 { padding: 0.10em; }
.p-0em20 { padding: 0.20em; }
.p-0em25 { padding: 0.25em; }
.p-0em30 { padding: 0.30em; }
.p-0em40 { padding: 0.40em; }
.p-0em50 { padding: 0.50em; }
.p-0em60 { padding: 0.60em; }
.p-0em70 { padding: 0.70em; }
.p-0em75 { padding: 0.75em; }
.p-0em80 { padding: 0.80em; }
.p-0em90 { padding: 0.90em; }
.p-1em { padding: 1.00em; }
.p-1em25 { padding: 1.25em; }
.p-1em50 { padding: 1.50em; }
.p-1em75 { padding: 1.75em; }
.p-2em { padding: 2.00em; }
.p-2em50 { padding: 2.50em; }
.p-3em { padding: 3.00em; }
.p-4em { padding: 4.00em; }
.p-5em { padding: 5.00em; }
/* 画面上側（縦組み：行頭／横組み：行前方） */
.p-top-0,
.p-top-0em,
.p-top-000per { padding-top: 0; }
/* ％指定 */
.p-top-005per { padding-top: 5%; }
.p-top-010per { padding-top: 10%; }
.p-top-015per { padding-top: 15%; }
.p-top-020per { padding-top: 20%; }
.p-top-025per { padding-top: 25%; }
.p-top-030per { padding-top: 30%; }
.p-top-033per { padding-top: 33%; }
.p-top-040per { padding-top: 40%; }
.p-top-050per { padding-top: 50%; }
.p-top-060per { padding-top: 60%; }
.p-top-067per { padding-top: 67%; }
.p-top-070per { padding-top: 70%; }
.p-top-075per { padding-top: 75%; }
.p-top-080per { padding-top: 80%; }
.p-top-090per { padding-top: 90%; }
/* 文字数指定 */
.p-top-0em25 { padding-top: 0.25em; }
.p-top-0em50 { padding-top: 0.50em; }
.p-top-0em75 { padding-top: 0.75em; }
.p-top-1em { padding-top: 1.00em; }
.p-top-1em25 { padding-top: 1.25em; }
.p-top-1em50 { padding-top: 1.50em; }
.p-top-1em75 { padding-top: 1.75em; }
.p-top-2em { padding-top: 2.00em; }
.p-top-2em50 { padding-top: 2.50em; }
.p-top-3em { padding-top: 3.00em; }
.p-top-4em { padding-top: 4.00em; }
.p-top-5em { padding-top: 5.00em; }
.p-top-5em25 { padding-top: 5.25em; }
/* 画面左側（縦組み：行後方／横組み：行頭） */
.p-left-0,
.p-left-0em,
.p-left-000per { padding-left: 0; }
/* ％指定 */
.p-left-005per { padding-left: 5%; }
.p-left-010per { padding-left: 10%; }
.p-left-015per { padding-left: 15%; }
.p-left-020per { padding-left: 20%; }
.p-left-025per { padding-left: 25%; }
.p-left-030per { padding-left: 30%; }
.p-left-033per { padding-left: 33%; }
.p-left-040per { padding-left: 40%; }
.p-left-050per { padding-left: 50%; }
.p-left-060per { padding-left: 60%; }
.p-left-067per { padding-left: 67%; }
.p-left-070per { padding-left: 70%; }
.p-left-075per { padding-left: 75%; }
.p-left-080per { padding-left: 80%; }
.p-left-090per { padding-left: 90%; }
/* 文字数指定 */
.p-left-0em25 { padding-left: 0.25em; }
.p-left-0em50 { padding-left: 0.50em; }
.p-left-0em75 { padding-left: 0.75em; }
.p-left-1em { padding-left: 1.00em; }
.p-left-1em25 { padding-left: 1.25em; }
.p-left-1em50 { padding-left: 1.50em; }
.p-left-1em75 { padding-left: 1.75em; }
.p-left-2em { padding-left: 2.00em; }
.p-left-2em50 { padding-left: 2.50em; }
.p-left-3em { padding-left: 3.00em; }
.p-left-4em { padding-left: 4.00em; }
.p-left-5em { padding-left: 5.00em; }
.p-left-5em25 { padding-left: 5.25em; }
/* 画面右側（縦組み：行前方／横組み：行末） */
.p-right-0
.p-right-0em
.p-right-000per { padding-right: 0; }
/* ％指定 */
.p-right-005per { padding-right: 5%; }
.p-right-010per { padding-right: 10%; }
.p-right-015per { padding-right: 15%; }
.p-right-020per { padding-right: 20%; }
.p-right-025per { padding-right: 25%; }
.p-right-030per { padding-right: 30%; }
.p-right-033per { padding-right: 33%; }
.p-right-040per { padding-right: 40%; }
.p-right-050per { padding-right: 50%; }
.p-right-060per { padding-right: 60%; }
.p-right-067per { padding-right: 67%; }
.p-right-070per { padding-right: 70%; }
.p-right-075per { padding-right: 75%; }
.p-right-080per { padding-right: 80%; }
.p-right-090per { padding-right: 90%; }
/* 文字数指定 */
.p-right-0em25 { padding-right: 0.25em; }
.p-right-0em50 { padding-right: 0.50em; }
.p-right-0em75 { padding-right: 0.75em; }
.p-right-1em { padding-right: 1.00em; }
.p-right-1em25 { padding-right: 1.25em; }
.p-right-1em50 { padding-right: 1.50em; }
.p-right-1em75 { padding-right: 1.75em; }
.p-right-2em { padding-right: 2.00em; }
.p-right-2em50 { padding-right: 2.50em; }
.p-right-3em { padding-right: 3.00em; }
.p-right-4em { padding-right: 4.00em; }
.p-right-5em { padding-right: 5.00em; }
.p-right-5em25 { padding-right: 5.25em; }
/* 画面下側（縦組み：行末／横組み：行後方） */
.p-bottom-0,
.p-bottom-0em,
.p-bottom-000per { padding-bottom: 0; }
/* ％指定 */
.p-bottom-005per { padding-bottom: 5%; }
.p-bottom-010per { padding-bottom: 10%; }
.p-bottom-015per { padding-bottom: 15%; }
.p-bottom-020per { padding-bottom: 20%; }
.p-bottom-025per { padding-bottom: 25%; }
.p-bottom-030per { padding-bottom: 30%; }
.p-bottom-033per { padding-bottom: 33%; }
.p-bottom-040per { padding-bottom: 40%; }
.p-bottom-050per { padding-bottom: 50%; }
.p-bottom-060per { padding-bottom: 60%; }
.p-bottom-067per { padding-bottom: 67%; }
.p-bottom-070per { padding-bottom: 70%; }
.p-bottom-075per { padding-bottom: 75%; }
.p-bottom-080per { padding-bottom: 80%; }
.p-bottom-090per { padding-bottom: 90%; }
/* 文字数指定 */
.p-bottom-0em25 { padding-bottom: 0.25em; }
.p-bottom-0em50 { padding-bottom: 0.50em; }
.p-bottom-0em75 { padding-bottom: 0.75em; }
.p-bottom-1em { padding-bottom: 1.00em; }
.p-bottom-1em25 { padding-bottom: 1.25em; }
.p-bottom-1em50 { padding-bottom: 1.50em; }
.p-bottom-1em75 { padding-bottom: 1.75em; }
.p-bottom-2em { padding-bottom: 2.00em; }
.p-bottom-2em50 { padding-bottom: 2.50em; }
.p-bottom-3em { padding-bottom: 3.00em; }
.p-bottom-4em { padding-bottom: 4.00em; }
.p-bottom-5em { padding-bottom: 5.00em; }
.p-bottom-5em25 { padding-bottom: 5.25em; }
/* 高さ
---------------------------------------------------------------- */
.height-auto { height: auto; }
/* ％指定 */
.height-010per { height: 10%; }
.height-020per { height: 20%; }
.height-025per { height: 25%; }
.height-030per { height: 30%; }
.height-033per { height: 33%; }
.height-040per { height: 40%; }
.height-050per { height: 50%; }
.height-060per { height: 60%; }
.height-067per { height: 67%; }
.height-070per { height: 70%; }
.height-075per { height: 75%; }
.height-080per { height: 80%; }
.height-090per { height: 90%; }
.height-100per { height: 100%; }
/* 文字数指定 */
.height-0em25 { height: 0.25em; }
.height-0em50 { height: 0.50em; }
.height-0em75 { height: 0.75em; }
.height-1em { height: 1.00em; }
.height-1em25 { height: 1.25em; }
.height-1em50 { height: 1.50em; }
.height-1em75 { height: 1.75em; }
.height-2em { height: 2.00em; }
.height-2em50 { height: 2.50em; }
.height-3em { height: 3.00em; }
.height-4em { height: 4.00em; }
.height-5em { height: 5.00em; }
.height-5em25 { height: 5.25em; }
.height-6em { height: 6.00em; }
.height-7em { height: 7.00em; }
.height-8em { height: 8.00em; }
.height-8em75 { height: 8.75em; }
.height-9em { height: 9.00em; }
.height-10em { height: 10.00em; }
.height-11em { height: 11.00em; }
.height-12em { height: 12.00em; }
.height-13em { height: 13.00em; }
.height-14em { height: 14.00em; }
.height-15em { height: 15.00em; }
.height-20em { height: 20.00em; }
.height-30em { height: 30.00em; }
.height-40em { height: 40.00em; }
/* 高さの最大値
---------------------------------------------------------------- */
.max-height-none { max-height: none; }
/* ％指定 */
.max-height-010per { max-height: 10%; }
.max-height-020per { max-height: 20%; }
.max-height-025per { max-height: 25%; }
.max-height-030per { max-height: 30%; }
.max-height-033per { max-height: 33%; }
.max-height-040per { max-height: 40%; }
.max-height-050per { max-height: 50%; }
.max-height-060per { max-height: 60%; }
.max-height-067per { max-height: 67%; }
.max-height-070per { max-height: 70%; }
.max-height-075per { max-height: 75%; }
.max-height-080per { max-height: 80%; }
.max-height-090per { max-height: 90%; }
.max-height-100per { max-height: 100%; }
/* 文字数指定 */
.max-height-0em25 { max-height: 0.25em; }
.max-height-0em50 { max-height: 0.50em; }
.max-height-0em75 { max-height: 0.75em; }
.max-height-1em { max-height: 1.00em; }
.max-height-1em25 { max-height: 1.25em; }
.max-height-1em50 { max-height: 1.50em; }
.max-height-1em75 { max-height: 1.75em; }
.max-height-2em { max-height: 2.00em; }
.max-height-2em50 { max-height: 2.50em; }
.max-height-3em { max-height: 3.00em; }
.max-height-4em { max-height: 4.00em; }
.max-height-5em { max-height: 5.00em; }
.max-height-5em25 { max-height: 5.25em; }
.max-height-6em { max-height: 6.00em; }
.max-height-7em { max-height: 7.00em; }
.max-height-8em { max-height: 8.00em; }
.max-height-8em75 { max-height: 8.75em; }
.max-height-9em { max-height: 9.00em; }
.max-height-10em { max-height: 10.00em; }
.max-height-11em { max-height: 11.00em; }
.max-height-12em { max-height: 12.00em; }
.max-height-13em { max-height: 13.00em; }
.max-height-14em { max-height: 14.00em; }
.max-height-15em { max-height: 15.00em; }
.max-height-20em { max-height: 20.00em; }
.max-height-30em { max-height: 30.00em; }
.max-height-40em { max-height: 40.00em; }
/* 幅
---------------------------------------------------------------- */
.width-auto { width: auto; }
/* ％指定 */
.width-010per { width: 10%; }
.width-020per { width: 20%; }
.width-025per { width: 25%; }
.width-030per { width: 30%; }
.width-033per { width: 33%; }
.width-040per { width: 40%; }
.width-050per { width: 50%; }
.width-060per { width: 60%; }
.width-067per { width: 67%; }
.width-070per { width: 70%; }
.width-075per { width: 75%; }
.width-080per { width: 80%; }
.width-090per { width: 90%; }
.width-100per { width: 100%; }
/* 文字数指定 */
.width-0em25 { width: 0.25em; }
.width-0em50 { width: 0.50em; }
.width-0em75 { width: 0.75em; }
.width-1em { width: 1.00em; }
.width-1em25 { width: 1.25em; }
.width-1em50 { width: 1.50em; }
.width-1em75 { width: 1.75em; }
.width-2em { width: 2.00em; }
.width-2em50 { width: 2.50em; }
.width-3em { width: 3.00em; }
.width-4em { width: 4.00em; }
.width-5em { width: 5.00em; }
.width-5em25 { width: 5.25em; }
.width-6em { width: 6.00em; }
.width-7em { width: 7.00em; }
.width-8em { width: 8.00em; }
.width-8em75 { width: 8.75em; }
.width-9em { width: 9.00em; }
.width-10em { width: 10.00em; }
.width-11em { width: 11.00em; }
.width-12em { width: 12.00em; }
.width-13em { width: 13.00em; }
.width-14em { width: 14.00em; }
.width-15em { width: 15.00em; }
.width-20em { width: 20.00em; }
.width-30em { width: 30.00em; }
.width-40em { width: 40.00em; }
/* 幅の最大値
---------------------------------------------------------------- */
.max-width-none { max-width: none; }
/* ％指定 */
.max-width-010per { max-width: 10%; }
.max-width-020per { max-width: 20%; }
.max-width-025per { max-width: 25%; }
.max-width-030per { max-width: 30%; }
.max-width-033per { max-width: 33%; }
.max-width-040per { max-width: 40%; }
.max-width-050per { max-width: 50%; }
.max-width-060per { max-width: 60%; }
.max-width-067per { max-width: 67%; }
.max-width-070per { max-width: 70%; }
.max-width-075per { max-width: 75%; }
.max-width-080per { max-width: 80%; }
.max-width-090per { max-width: 90%; }
.max-width-100per { max-width: 100%; }
/* 文字数指定 */
.max-width-0em25 { max-width: 0.25em; }
.max-width-0em50 { max-width: 0.50em; }
.max-width-0em75 { max-width: 0.75em; }
.max-width-1em { max-width: 1.00em; }
.max-width-1em25 { max-width: 1.25em; }
.max-width-1em50 { max-width: 1.50em; }
.max-width-1em75 { max-width: 1.75em; }
.max-width-2em { max-width: 2.00em; }
.max-width-2em50 { max-width: 2.50em; }
.max-width-3em { max-width: 3.00em; }
.max-width-4em { max-width: 4.00em; }
.max-width-5em { max-width: 5.00em; }
.max-width-5em25 { max-width: 5.25em; }
.max-width-6em { max-width: 6.00em; }
.max-width-7em { max-width: 7.00em; }
.max-width-8em { max-width: 8.00em; }
.max-width-8em75 { max-width: 8.75em; }
.max-width-9em { max-width: 9.00em; }
.max-width-10em { max-width: 10.00em; }
.max-width-11em { max-width: 11.00em; }
.max-width-12em { max-width: 12.00em; }
.max-width-13em { max-width: 13.00em; }
.max-width-14em { max-width: 14.00em; }
.max-width-15em { max-width: 15.00em; }
.max-width-20em { max-width: 20.00em; }
.max-width-30em { max-width: 30.00em; }
.max-width-40em { max-width: 40.00em; }
/* 最大サイズ
---------------------------------------------------------------- */
.max-size-none { max-height: none; max-width: none; }
/* ％指定 */
.max-size-005per { max-height: 5%; max-width: 5%; }
.max-size-010per { max-height: 10%; max-width: 10%; }
.max-size-020per { max-height: 20%; max-width: 20%; }
.max-size-025per { max-height: 25%; max-width: 25%; }
.max-size-030per { max-height: 30%; max-width: 30%; }
.max-size-033per { max-height: 33%; max-width: 33%; }
.max-size-040per { max-height: 40%; max-width: 40%; }
.max-size-050per { max-height: 50%; max-width: 50%; }
.max-size-060per { max-height: 60%; max-width: 60%; }
.max-size-067per { max-height: 67%; max-width: 67%; }
.max-size-070per { max-height: 70%; max-width: 70%; }
.max-size-075per { max-height: 75%; max-width: 75%; }
.max-size-080per { max-height: 80%; max-width: 80%; }
.max-size-090per { max-height: 90%; max-width: 90%; }
.max-size-100per { max-height: 100%; max-width: 100%; }
/* 文字数指定 */
.max-size-0em25 { max-height: 0.25em; max-width: 0.25em; }
.max-size-0em50 { max-height: 0.50em; max-width: 0.50em; }
.max-size-0em75 { max-height: 0.75em; max-width: 0.75em; }
.max-size-1em { max-height: 1.00em; max-width: 1.00em; }
.max-size-1em25 { max-height: 1.25em; max-width: 1.25em; }
.max-size-1em50 { max-height: 1.50em; max-width: 1.50em; }
.max-size-1em75 { max-height: 1.75em; max-width: 1.75em; }
.max-size-2em { max-height: 2.00em; max-width: 2.00em; }
.max-size-2em50 { max-height: 2.50em; max-width: 2.50em; }
.max-size-3em { max-height: 3.00em; max-width: 3.00em; }
.max-size-4em { max-height: 4.00em; max-width: 4.00em; }
.max-size-5em { max-height: 5.00em; max-width: 5.00em; }
.max-size-5em25 { max-height: 5.25em; max-width: 5.25em; }
.max-size-6em { max-height: 6.00em; max-width: 6.00em; }
.max-size-7em { max-height: 7.00em; max-width: 7.00em; }
.max-size-8em { max-height: 8.00em; max-width: 8.00em; }
.max-size-8em75 { max-height: 8.75em; max-width: 8.75em; }
.max-size-9em { max-height: 9.00em; max-width: 9.00em; }
.max-size-10em { max-height: 10.00em; max-width: 10.00em; }
.max-size-11em { max-height: 11.00em; max-width: 11.00em; }
.max-size-12em { max-height: 12.00em; max-width: 12.00em; }
.max-size-13em { max-height: 13.00em; max-width: 13.00em; }
.max-size-14em { max-height: 14.00em; max-width: 14.00em; }
.max-size-15em { max-height: 15.00em; max-width: 15.00em; }
.max-size-20em { max-height: 20.00em; max-width: 20.00em; }
.max-size-30em { max-height: 30.00em; max-width: 30.00em; }
.max-size-40em { max-height: 40.00em; max-width: 40.00em; }
/* 禁則処理のルール
---------------------------------------------------------------- */
.line-break-auto {
-webkit-line-break: auto;
-epub-line-break: auto;
}
.line-break-loose {
-webkit-line-break: loose;
-epub-line-break: loose;
}
.line-break-normal {
-webkit-line-break: normal;
-epub-line-break: normal;
}
.line-break-strict {
-webkit-line-break: strict;
-epub-line-break: strict;
}
/* 自動改行のルール
---------------------------------------------------------------- */
.word-break-normal {
-webkit-word-break: normal;
-epub-word-break: normal;
}
.word-break-break-all {
-webkit-word-break: break-all;
-epub-word-break: break-all;
}
.word-break-keep-all {
-webkit-word-break: keep-all;
-epub-word-break: keep-all;
}
/* 長い単語の改行ルール
---------------------------------------------------------------- */
.word-wrap-normal {
word-wrap: normal;
}
.word-wrap-break-word {
word-wrap: break-word;
}
/* 【参考】回り込み
---------------------------------------------------------------- */
/* 行頭方向に回り込み */
.float-left,
.float-start {
float: left;
}
/* 行末方向に回り込み */
.float-right,
.float-end {
float: right;
}
/* 回り込みなし */
.float-none {
float: none;
}
/* 回り込み解除 */
.float-clear {
clear: both;
}
/* 行頭方向の回り込み解除 */
.float-clear-left,
.float-clear-start {
clear: left;
}
/* 行末方向の回り込み解除 */
.float-clear-right,
.float-clear-end {
clear: right;
}
©2023 Densho Channel