body {
  background: #eee;
  font-size: 18px;
}

.parallel-book-usage {
  display: block;
  margin: auto;
  padding: 3ex;
  max-width: 85ex;
  border: 1px solid #ddd;
  border-radius: 1ex;
  text-align: left;
  background: #fff;
  line-height: 1.3;
}
.parallel-book-usage h1 {
  font-size: 110%;
}
.parallel-book-usage h2 {
  font-size: 100%;
}
.parallel-book-usage p {
  margin: 0.5ex 0;
}

.parallel-book-navi {
  display: block;
  padding: 3ex;
  text-align: center;
  opacity: 0.9;
}
.parallel-book-navi select {
  max-width: 24ex;
  font-size: 105%;
}

.parallel-book {
  display: block;
  position: relative;
  margin: auto;
  padding: 3ex;
  max-width: 85ex;
  border: 1px solid #ddd;
  border-radius: 1ex;
  text-align: left;
  background: #fff;
  line-height: 1.5;
}

.parallel-book nav.content-nav {
  position: absolute;
  right: 0.5ex;
  top: 0.5ex;
  z-index: 10;
  opacity: 0.3;
}
.parallel-book nav.content-nav:hover {
  opacity: 0.8;
}
.parallel-book nav.content-nav a, .parallel-book nav.content-nav span {
  display: inline-block;
  width: 2.5ex;
}
.parallel-book nav.content-nav span {
  color: #888;
}

.parallel-book nav.book-toc {
  font-size: 90%;
  line-height: 1.3;
}

.parallel-book .parallel {
  position: relative;
  display: block;
}
.parallel-book .parallel:focus {
  outline: none;
  background: #f8fbff;
  border: solid 1px #8bf;
  border-radius: 0.5ex;
  margin-left: -0.4ex;
  margin-right: -0.4ex;
  padding: 0.1ex 0.4ex;
}

.parallel-book .parallel span {
  display: block;
}
.parallel-book .parallel span:lang(ja) {
  font-size: 70%;
  opacity: 0.5;
  margin-left: 0.5ex;
}
.parallel-book .parallel span:lang(en):hover {
  background: #f0f8ff;
}
.parallel-book .parallel span:lang(ja):hover {
  background: #ffe;
}

.parallel-book span.parallel-toggle {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  padding: 0.2ex 0.5ex;
  color: #026;
  font-weight: normal;
  cursor: pointer;
  user-select: none;
  opacity: 0.01;
  z-index: 10;
}
.parallel-book .parallel:hover span.parallel-toggle {
  opacity: 0.15;
}
.parallel-book td .parallel .parallel-toggle {
  display: none;
}
.parallel-book td .parallel:hover .parallel-toggle {
  display: block;
}

.parallel-book .pane {
  position: relative;
}
.parallel-book .pane .bookmark {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(100%);
  font-weight: normal;
  color: #888;
  cursor: pointer;
  user-select: none;
  opacity: 0.1;
  z-index: 10;
}
.parallel-book .pane .active-bookmark {
  color: #062;
  opacity: 0.8;
}
.parallel-book .pane .active-bookmark:hover {
  opacity: 0.9;
}
.parallel-book .pane:hover .active-bookmark:hover {
  opacity: 0.9;
}

.parallel-book a {
  color: #01d;
  text-decoration: none;
}
.parallel-book a:hover {
  text-decoration: underline;
}

.parallel-book h1 {
  margin: 1.8ex 0;
  text-align: center;
  font-size: 120%;
}

.parallel-book div.book-author {
  margin: 1.8ex 0;
  text-align: right;
}

.parallel-book section.chapter {
  position: relative;
  margin: 2ex 0;
  border-top: 1px solid #ddd;
}
.parallel-book section.chapter:focus {
  outline: none;
}

.parallel-book nav.chapter-nav {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  opacity: 0.3;
  user-select: none;
}
.parallel-book nav.chapter-nav:hover {
  opacity: 0.8;
}
.parallel-book nav.chapter-nav a, .parallel-book nav.chapter-nav span {
  display: inline-block;
  width: 2ex;
}
.parallel-book nav.chapter-nav span {
  color: #888;
}

.parallel-book h2 {
  margin: 1.8ex 0;
  font-size: 115%;
}

.parallel-book p {
  margin: 1.8ex 0;
}

.parallel-book blockquote {
  margin: 1.8ex 0;
  margin-left: 0.8ex;
  padding-left: 0.8ex;
  border-left: solid 2px #ddd;
}

.parallel-book h3 {
  margin: 1.8ex 0 1.6ex 0;
  font-size: 100%;
}

.parallel-book ul {
  margin: 1.8ex 0;
  padding-left: 2ex;
}

.parallel-book table {
  margin: 1.8ex 0;
  border-collapse: collapse;
  font-size: 95%;
}
.parallel-book td {
  border: 1px solid #ddd;
  padding: 0 0.5ex;
}

.parallel-book pre.code {
  padding: 0 0.4ex;
  font-size: 90%;
  white-space: pre-wrap; word-wrap: break-word;
  line-height: 1.2;
  border: 1px solid #ddd;
}

.parallel-book .mono:focus {
  outline: none;
  background: #f8fbff;
  border: solid 1px #8bf;
}

.parallel-book div.macro-image {
  margin: 1ex 0;
}
.parallel-book div.macro-image img {
  max-width: 35ex;
  max-height: 35ex;
}

.parallel-book aside.book-meta {
  display: block;
  text-align: right;
  font-size: 70%;
  opacity: 0.3;
}
.parallel-book aside.book-meta span {
  padding: 0 0.7ex;
}

@media screen and (max-width: 700px) {
  body {
    background: #fff;
  }
  .parallel-book {
     padding: 1ex;
     max-width: initial;
     border: none;
  }
  .parallel-book-navi select {
    border: 1px solid #888;
  }
  .parallel-book-usage {
    padding: 0.5ex;
    border: none;
  }
  .parallel-book span.parallel-toggle {
    transform: translateX(-70%);
  }
}