@charset "UTF-8";


/* ファイル情報
----------------------------------------------------------------
/* 檔案資訊
全作品共通の基本スタイル

【CSS檔案版本】
ver. 1

【細節】
・設定排版方向
・設定html
・Box的種類
・設定換頁
・行的對齊
・Block元素的位置對齊
・Inline元素的位置對齊
・設定連結
・注釋
・缺字圖片
・設定圖片滿版顯示
・縱中橫排
・文字轉向
・上標字・下標字
・行距
・文字間隔
・指定字型
・粗體字
・斜體字
・文字色彩
・背景色彩
・文字色彩白黒反轉
・分隔線
・刪除線
・側線與底線
・外框線
・框線
・框線色
・行頭縮排
・行頭凸排
・段落縮排、提排
・外圍邊界（Margin）
・內圍留白（Padding）
・高度
・高度的最大値
・寬度
・寬度的最大値
・最大尺寸
・避頭點規則
・自動換行規則
・長單字的換行規則
・【参考】文繞圖

【更新紀錄】
2016/10/13 ver.1.0b
・初版
---------------------------------------------------------------- */



/* 設定排版方向
---------------------------------------------------------------- */
/* 橫排用 */
html,
.hltr {
  -webkit-writing-mode: horizontal-tb;
}
/* 直排用 */
.vrtl {
  -webkit-writing-mode: vertical-rl;
}



/* 設定html
----------------------------------------------------------------
僅設定預設字體
---------------------------------------------------------------- */
html {
  font-family: serif-tw, serif;
}


/* Box的種類
---------------------------------------------------------------- */
.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元素的位置對齊
---------------------------------------------------------------- */
/* 絕對方向（橫排只能用於左右、直排只能用於上下方向） */
.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; }


/* Inline元素的位置對齊
---------------------------------------------------------------- */
.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: underline;
}
/* 連結文字色彩（預設值為藍色） */
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;
}


/* 文字轉向
----------------------------------------------------------------
【支援WebKit】半形一個字直立時不會位於正中央，所以使用縱中橫排語法
---------------------------------------------------------------- */
.upright-1 {
  -webkit-text-combine:         horizontal;
  -webkit-text-combine-upright: all;
  text-combine-upright:         all;
}
.upright {
  -webkit-text-orientation: upright;
}
.sideways {
  -webkit-text-orientation: sideways;
}


/* 上標字・下標字
---------------------------------------------------------------- */
/* 上標字 */
.super {
  font-size:      smaller;
  vertical-align: super; 
}
/* 下標字 */
.sub {
  font-size:      smaller;
  vertical-align: sub;
}



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


/* 文字間隔
----------------------------------------------------------------
盡量不要使用於內文
---------------------------------------------------------------- */
/* 標準 */
.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-tw, serif;
}

/* 黑體 */
.hltr .gfont,
.vrtl .gfont {
  font-family: sans-serif-tw, sans-serif;
}

/* 楷體 */
.hltr .kfont,
.vrtl .kfont {
  font-family: cursive-tw, cursive;
}

/* 文字尺寸（以％指定） */
.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; }


/* 粗體字
----------------------------------------------------------------
也可使用<b>或<strong>
---------------------------------------------------------------- */
/* 粗體字 */
b,strong,.bold {
  font-weight: bold;
}
/* 解除粗體字 */
.font-weight-normal {
  font-weight: normal;
}


/* 斜體字
----------------------------------------------------------------
也可使用<i>，但盡量不要使用在漢字上
---------------------------------------------------------------- */
/* 斜體 */
.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;
}



/* 分隔線
---------------------------------------------------------------- */
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: underline;
}

/* 【橫排】底線　【直排】左線 */
.hltr .em-line-outside {
  text-decoration: overline;
}
.vrtl .em-line-outside {
  text-decoration: overline;
}


/* 外框線
----------------------------------------------------------------
寬度與框線使用相同的語法
---------------------------------------------------------------- */
/* 由上而下為：實心線，點線，雙重線，虛線 */
.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; }


/* 框線
----------------------------------------------------------------
若要對線種以及線寬進行細微的調整時
可以不需要使用既有的Class，自行加入新的Class
---------------------------------------------------------------- */
/* 線種【實線】 */
.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; }


/* 外圍邊界（Margin）
---------------------------------------------------------------- 
無法同時與縮排及凸排用在同樣的元素上，請注意
【錯誤案例】<div class="start-2em m-top-1em">
---------------------------------------------------------------- */
/* 四邊 */
.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; }


/* 內圍留白（Padding）
---------------------------------------------------------------- */
/* 四邊 */
.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;
}
.line-break-loose {
  -webkit-line-break: loose;
}
.line-break-normal {
  -webkit-line-break: normal;
}
.line-break-strict {
  -webkit-line-break: strict;
}


/* 自動換行規則
---------------------------------------------------------------- */
.word-break-normal {
  -webkit-word-break: normal;
}
.word-break-break-all {
  -webkit-word-break: break-all;
  word-break: break-all;
}
.word-break-keep-all {
  -webkit-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;
}


