style.css

@charset "utf-8";
/* Tatujin-Publishing   */
/* Style sheet for epub */
/* Ver.0.8b1            */

/*
Scale & Rhythm
line-height 1.6
16px = 1em
x:p:h1:h2:h3 = 12px:14px:16px:24px:30px
*/
* {
}
html, body {
  min-height: 100vh;
  display: flex;
}
body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height:1.6;
    font-family: "ShinGoPro-Regular","ShinGo-Regular", sans-serif;
    /*
    word-break: normal;
    -webkit-line-break: after-white-space;
    */
    color: #494949;
}
p, ul, ol, dl, pre, table {
    font-family: "ShinGo Regular","ShinGo R","新ゴR","新ゴ R", sans-serif;
    font-size: 0.875em;
}
/* Heading */
h1 {
    margin: 0 0 3em;
    padding: 0.5em 0 0;
    text-align: left;
    font-size: 1.875em;
    font-weight: bold;
}
h2 {
    margin: 3em 0 0.5em;
    padding: 0.5em 0 0;
    text-align: left;
    font-size: 1.5em;
    font-weight: bold;
}
h3 {
    margin: 3em 0 0.5em;
    padding: 0;
    text-align: left;
    font-size: 1em;
    font-weight: bold;
}
h4, h5, h6 {
    margin:0.7em 0;
    padding: 0;
    text-align: left;
    line-height: 1.6;
    font-weight: bold;
}
/* Paragraph */
p {
    margin:0.7em 0;
    padding: 0;
    text-align: left;
    text-indent: 1em;
    line-height: 1.6;
}
div.lead p {
	color: #666;
    line-height: 1.6;
    font-size: 0.75em;
}
/* List */
ul, ol {
    margin: 2em 0 2em 2em;
    padding: 0;
    list-style-position: outside;
}
ul > li,
ol > li {
    margin: 0 0 0.7em 0;
    padding: 0;
    line-height: 1.6;
}
dl {
    margin: 2em 0;
    padding: 0;
}
dt {
    margin: 0;
    padding: 0;
    font-weight: bold;
}
dd {
    margin: 0 0 1em 2em;
    padding: 0;
    line-height: 1.6;
}
/* Table
p.tablecaptionではなく
table caption {}を使う方が良いかも？
*/
table {
    margin: 0 auto 2em auto;
    border-collapse: collapse;
}
table tr th {
    background-color: #eee;
    border:1px #aaa solid;
    font-size: 0.75em;
    font-weight: normal;
}
table tr td {
    padding: 0.3em;
    border:1px #aaa solid;
    font-size: 0.75em;
}
p.tablecaption, table caption {
    margin: 0;
    color: #666;
    font-size: 0.75em;
    font-weight: bold;
    text-indent: 0;
}
/* Quote */
blockquote {
    margin: 2em 0 2em 2em;
    padding: 0.3em 1em;
    border: 1px #aaa solid;
}
/* Column Block */
div.column {
    margin: 2em 0 2em 2em;
    padding: 0.3em 1em;
    background-color: #eee;
    -webkit-border-radius: 0.7em;    
}
div.column *{
    margin:0.7em 0;    
}
div.column ul,
div.column ol {
    list-style-position: inside;
}
/* Code Block */
/*
※シンプルにできるかも
div.code {}
div.code pre.list,
div.code pre.cmd {}
div.code p.caption {}
*/
div.code, div.caption-code, div.source-code, div.emlist-code, div.emlistnum-code {
    padding: 0;
    font-size: 0.75em;
}
pre.emlist, pre.source, pre.list {
    margin: 0;
    padding: 5px;
    background-color: #f0f0f0;
}
div p.caption {
    margin: 0;
    color: #666;
    font-size: 0.75em;
    font-weight: bold;
    text-align: center;
}
div.cmd-code pre.cmd {
    margin: 0;
    padding: 5px;
    color: #ccc;
    font-weight: bold;
    background-color: #444;
}
pre.cmd, pre.emlist, pre.list, pre.source {
    white-space: pre-wrap;
    font-family: monospace;
    border-radius: 2px;    
}

/* Image Block */  
/* div.image p.caption {}
※captionをそろえた方が良いかも？*/
div.image {
    margin: 2em auto;
    padding: 0;
    max-width: 70%;
}
div.image img {
    margin: 0 auto;
    padding: 0;
    display: block;
    max-width: 100%;
}
div.image p.caption {
    margin: 0 auto;
    text-align: center;
    color: #666;
    font-size: 0.75em;
    font-weight: bold;
    text-indent: 0;
}
/* Footnote Block */
/* p.footnoteはいらないかも？ */
div.footnote {
}
div.footnote p.footnote {
	color: #666;
    line-height: 1.6;
    font-size: 0.75em;
    text-indent: 0;
}
/* Colophon */
div.colophon {
    margin: 3em auto;
}
div.colophon p {
    text-indent: 0;
}
div.colophon p.title {
    font-size: 1.5em;
}
div.colophon table {
    margin: 1em 0 2em;
    border: none;
}
div.colophon table tr th {
    background-color: #fff;
    font-size: 1.2em;
    font-weight: normal;
    border: none;
}
div.colophon table tr td {
    font-size: 1.2em;
    font-weight: normal;
    border: none;
}

/* Inline */
a[href],
a:link,
a:visited {
    color: #478ee6;
    text-decoration: none;
}
b {
    font-weight: bold;
}
strong{
    font-weight: bold;
}
em {
    font-style: italic;
}

/**
 * from Rouge
 */
.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight .cm {
  color: #999988;
  font-style: italic;
}
.highlight .cp {
  color: #999999;
  font-weight: bold;
}
.highlight .c1 {
  color: #999988;
  font-style: italic;
}
.highlight .cs {
  color: #999999;
  font-weight: bold;
  font-style: italic;
}
.highlight .c, .highlight .cd {
  color: #999988;
  font-style: italic;
}
.highlight .err {
  color: #a61717;
  background-color: #e3d2d2;
}
.highlight .gd {
  color: #000000;
  background-color: #ffdddd;
}
.highlight .ge {
  color: #000000;
  font-style: italic;
}
.highlight .gr {
  color: #aa0000;
}
.highlight .gh {
  color: #999999;
}
.highlight .gi {
  color: #000000;
  background-color: #ddffdd;
}
.highlight .go {
  color: #888888;
}
.highlight .gp {
  color: #555555;
}
.highlight .gs {
  font-weight: bold;
}
.highlight .gu {
  color: #aaaaaa;
}
.highlight .gt {
  color: #aa0000;
}
.highlight .kc {
  color: #000000;
  font-weight: bold;
}
.highlight .kd {
  color: #000000;
  font-weight: bold;
}
.highlight .kn {
  color: #000000;
  font-weight: bold;
}
.highlight .kp {
  color: #000000;
  font-weight: bold;
}
.highlight .kr {
  color: #000000;
  font-weight: bold;
}
.highlight .kt {
  color: #445588;
  font-weight: bold;
}
.highlight .k, .highlight .kv {
  color: #000000;
  font-weight: bold;
}
.highlight .mf {
  color: #009999;
}
.highlight .mh {
  color: #009999;
}
.highlight .il {
  color: #009999;
}
.highlight .mi {
  color: #009999;
}
.highlight .mo {
  color: #009999;
}
.highlight .m, .highlight .mb, .highlight .mx {
  color: #009999;
}
.highlight .sb {
  color: #d14;
}
.highlight .sc {
  color: #d14;
}
.highlight .sd {
  color: #d14;
}
.highlight .s2 {
  color: #d14;
}
.highlight .se {
  color: #d14;
}
.highlight .sh {
  color: #d14;
}
.highlight .si {
  color: #d14;
}
.highlight .sx {
  color: #d14;
}
.highlight .sr {
  color: #009926;
}
.highlight .s1 {
  color: #d14;
}
.highlight .ss {
  color: #990073;
}
.highlight .s {
  color: #d14;
}
.highlight .na {
  color: #008080;
}
.highlight .bp {
  color: #999999;
}
.highlight .nb {
  color: #0086B3;
}
.highlight .nc {
  color: #445588;
  font-weight: bold;
}
.highlight .no {
  color: #008080;
}
.highlight .nd {
  color: #3c5d5d;
  font-weight: bold;
}
.highlight .ni {
  color: #800080;
}
.highlight .ne {
  color: #990000;
  font-weight: bold;
}
.highlight .nf {
  color: #990000;
  font-weight: bold;
}
.highlight .nl {
  color: #990000;
  font-weight: bold;
}
.highlight .nn {
  color: #555555;
}
.highlight .nt {
  color: #000080;
}
.highlight .vc {
  color: #008080;
}
.highlight .vg {
  color: #008080;
}
.highlight .vi {
  color: #008080;
}
.highlight .nv {
  color: #008080;
}
.highlight .ow {
  color: #000000;
  font-weight: bold;
}
.highlight .o {
  color: #000000;
  font-weight: bold;
}
.highlight .w {
  color: #bbbbbb;
}
.highlight {
  background-color: #f8f8f8;
}
.rouge-table { border-spacing: 0 }
.rouge-gutter { text-align: right }

/**
 * from EBPAJ EPUB 3 File Creation Guide sample style
 *
 * cf. http://ebpaj.jp/counsel/guide
 */

/* image width definition(pacentage)  */
.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%; }

.book {
  display: flex;
}

.side-content {
  padding: 0 1.7em;
  flex-shrink: 0;
  background-color: #f3f3f3;
}

.side-content h1 {
  font-size: 1em;
  margin: 1em 0 2em 0;
}

.side-content ul {
  list-style: none;
  margin: 0;
}

.book-body {
  padding: 5em 10%;
  flex : 1;
}

code.tt {
  background-color: #f0f0f0;
  border-radius: 2px;
  font-size: 0.8em;
  padding: 0 0.4em;
  margin: 0 0.1em;
}