@charset "UTF-8";

@font-face {
    font-family: 'IcoMoon-Free';
    src: url('../../fonts/icomoon/IcoMoon-Free.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.icon {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'IcoMoon-Free' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Enable Ligatures ================ */
    letter-spacing: 0;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    -o-font-feature-settings: "liga";
    font-feature-settings: "liga";

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
  background: #d3d3d4;
  overflow-y: auto;
}

#serialized {
  position: absolute;
  top: -1000px;
  overflow:hidden;
  width: 1px;
  height:1px;
  font-family: 'Ryumin Light KL', 'Shin Go Light', 'Midashi Min MA31', 'Midashi Go MB1';
}

#bricks-content {
  position: absolute;
  top: -1000px;
  overflow:hidden;
  width: 1px;
  height:1px;
}

.inner-page {
  position: absolute;
  overflow: hidden;
}

#page-container {
  position: relative;
  margin: 0 auto 0 auto;
  overflow: hidden;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.7;
  z-index: 100;
}

#alert {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
/*  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;*/
  background:#000 url("../images/ajax-loader.gif") 50% 40% no-repeat;
  z-index: 101;
}

#alert-msg {
  width: 100%;
  height: 34%;
  margin-top: 66%;
  color: #fff;
  font-size: 10px;
  text-align: center;
}
#alert-msg a {
  font-size: 12px;
  color: #f08300;
}
#alert-msg a:hover {
  color: #ffe100;
}

#instruction {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 1.0s ease-in-out;
  -moz-transition: opacity 1.0s ease-in-out;
  -ms-transition: opacity 1.0s ease-in-out;
  transition: opacity 1.0s ease-in-out;
}
#instruction .page-flip {
  position: absolute;
  top: 50%;
  width: 104px;
  height: 152px;
  margin: -76px 0 0 0;
  background: url("/global/reader/images/reader_pageflip_dialog.png") no-repeat 0 0;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  z-index: 101;
}

#instruction .menu-info {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 104px;
  height: 120px;
  margin-top: -60px;
  background: url("/global/reader/images/reader_pageflip_dialog.png") no-repeat -104px -16px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  z-index: 101;
}

#instruction.tiny {
/*  -webkit-transform: scale(0.76,0.76);
  -moz-transform: scale(0.76,0.76);*/
}

#instruction.ltr .page-flip {
  right: 0;
  background-position: -208px 0;
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  -ms-transform-origin: top right;
  transform-origin: top right;
}
#instruction.rtl .page-flip {
  left: 0;
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
}

#instruction.ltr .menu-info {
  margin-left: 89px;
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  -ms-transform-origin: top right;
  transform-origin: top right;
}
#instruction.rtl .menu-info {
  margin-left: -193px;
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
}

#instruction.ltr.tiny .page-flip {
  top: 200px;
  margin-top: 0;
  -webkit-transform: scale(0.9,0.9);
  -moz-transform: scale(0.9,0.9);
  -ms-transform: scale(0.9,0.9);
  transform: scale(0.9,0.9);
}
#instruction.rtl.tiny .page-flip {
  top: 200px;
  margin-top: 0;
  -webkit-transform: scale(0.9,0.9);
  -moz-transform: scale(0.9,0.9);
  -ms-transform: scale(0.9,0.9);
  transform: scale(0.9,0.9);
}

#instruction.ltr.tiny .menu-info {
  top: 216px;
  margin: 0 0 0 67px;
  -webkit-transform: scale(0.9,0.9);
  -moz-transform: scale(0.9,0.9);
  -ms-transform: scale(0.9,0.9);
  transform: scale(0.9,0.9);
}
#instruction.rtl.tiny .menu-info {
  top: 216px;
  margin: 0 0 0 -171px;
  -webkit-transform: scale(0.9,0.9);
  -moz-transform: scale(0.9,0.9);
  -ms-transform: scale(0.9,0.9);
  transform: scale(0.9,0.9);
}

#instruction div.direction {
  margin: 15px auto;
  display: inline-block;
  width: 97px;
  height: 95px;
  background: url("/global/images/sprites/select_bcckmode.png")no-repeat 0 0;
  text-indent: -9999px;
}

#instruction div.direction.ltr {
  background-position: -96px 0;
}

#instruction p {
  width: 220px;
  color: #333;
  font-size: 10px;
  text-align: center;
}

#information {
  position: absolute;
  top: 50%;
  width: 245px;
  height: 120px;
  margin: -60px 0 0 0;
  background: url("/global/reader/images/reader_pageflip_dialog.png")no-repeat 0 -153px;
  -webkit-transition: opacity 1.0s ease-in-out;
  -moz-transition: opacity 1.0s ease-in-out;
  -ms-transition: opacity 1.0s ease-in-out;
  transition: opacity 1.0s ease-in-out;
  z-index: 101;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

#information.ltr {
  left: 5%;
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  -webkit-box-shadow:1px 1px 8px rgba(0,0,0,0.1);
  -moz-box-shadow:1px 1px 8px rgba(0,0,0,0.1);
  -ms-box-shadow:1px 1px 8px rgba(0,0,0,0.1);
  box-shadow:1px 1px 8px rgba(0,0,0,0.1);
}

#information.rtl {
  right: 5%;
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  -ms-transform-origin: top right;
  transform-origin: top right;
  -webkit-box-shadow:1px 1px 8px rgba(0,0,0,0.1);
  -moz-box-shadow:1px 1px 8px rgba(0,0,0,0.1);
  -ms-box-shadow:1px 1px 8px rgba(0,0,0,0.1);
  box-shadow:1px 1px 8px rgba(0,0,0,0.1);
}

#information.ltr.tiny {
  top: 216px;
  left: 2%;
  margin-top: 0;
  -webkit-transform: scale(0.9,0.9);
  -moz-transform: scale(0.9,0.9);
  -ms-transform: scale(0.9,0.9);
  transform: scale(0.9,0.9);
}

#information.rtl.tiny {
  top: 216px;
  right: 2%;
  margin-top: 0;
  -webkit-transform: scale(0.9,0.9);
  -moz-transform: scale(0.9,0.9);
  -ms-transform: scale(0.9,0.9);
  transform: scale(0.9,0.9);
}

#information a.bccks-logo {
  position: absolute;
  top: 38px;
  left: 34px;
  display: block;
  width: 68px;
  height: 16px;
  background: url("/global/reader/images/viewer_ui_new.png")no-repeat -8px -393px;
  text-indent: -9999px;
}

#information a.bccks-logo:hover {
  background-position: -85px -393px;
}

#information h2 {
  margin-top: 66px;
  font-size: 12px;
  font-family: HiraKakuProN-W3,HiraKakuPro-W3,"ヒラギノ角ゴ ProN W3","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif;
  font-weight: normal;
  line-height: 1.5em;
  color: #9fa0a0;
}

#information h2 a {
  font-size: 17px;
  color: #f39839;
}

#information h2 a:hover {
  color: #ffe100;
}

#information.wide {
  top: auto;
  bottom: -480px;
  left: 50%;
  margin-left: -240px;
  width: 480px;
  height: 480px;
  text-align: left;
  background: none;
  -webkit-transition: bottom 0.5s ease;
  -moz-transition: bottom 0.5s ease;
  -ms-transition: bottom 0.5s ease;
  transition: bottom 0.5s ease;
  cursor: default;
}

#information.wide.tiny {
  -webkit-transform: scale(0.76,0.76);
  -moz-transform: scale(0.76,0.76);
  -ms-transform: scale(0.76,0.76);
  transform: scale(0.76,0.76);
}

#information .feedback {
  position: relative;
  margin: 0 auto 8px auto;
  display: block;
  width: 248px;
  height: 248px;
  background-color: rgb(246,246,246);
  -webkit-box-shadow:1px 1px 8px rgba(0,0,0,0.1);
  -moz-box-shadow:1px 1px 8px rgba(0,0,0,0.1);
  -ms-box-shadow:1px 1px 8px rgba(0,0,0,0.1);
  box-shadow:1px 1px 8px rgba(0,0,0,0.1);
}

#information.wide .feedback h3 {
  padding-top: 16px;
  font-size: 12px;
  font-family: HiraKakuProN-W3,HiraKakuPro-W3,"ヒラギノ角ゴ ProN W3","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif;
  font-weight: normal;
  color: #9fa0a0;
  text-align: center;
}

#information .feedback dl {
  font-size: 0;
}

#information .feedback dt.finish-reading {}

#information .feedback dd.finish-reading {
  position: absolute;
  top: 40px;
  left: 89px;
  display: block;
}

#information .feedback dd.finish-reading a {
  font-size: 17px;
  color: #f39839;
}

#information .feedback dd.finish-reading a:hover {
  color: #fdd000;
}

#information .feedback dd.finish-reading span {
  font-size: 12px;
  color: #9fa0a0;
}

#information .feedback dt.rating {}

#information .feedback dd.rating {
  position: absolute;
  top: 68px;
  left: 50%;
  margin-left: -50px;/*100/2*/
  display: block;
}

#information .feedback dd.rating span {
  display: none;
}

#information .feedback dd.rating a {
  display: block;
  width: 100px;
  height: 16px;
}

#information .feedback dd.rating div.stars {
  width: 100px;
  height: 16px;
  background: transparent url("../images/viewer_ui_new.png") no-repeat -109px -361px;
}

#information .feedback dt.review {
  position: absolute;
  top: 226px;
  left: 200px;
  display: block;
  width: 38px;
}

#information .feedback dd.rating span {
  display: none;
}

#information .feedback dt.review.done {
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  -ms-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  opacity: 0;
}

#information .feedback dd.review {
  position: absolute;
  top: 123px;
  left: 50%;
  margin-left: -109px;
  display: block;
  text-align: center;
}

#information .feedback dd.review.done {
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  -ms-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  opacity: 0;
}

#information .feedback a.button.tiny {
  display: block;
  width: 32px;
  height: 16px;
  background: url("/global/images/common/bt_6416_01.png") no-repeat 0 0;
  text-indent:-9999px;
}
#information .feedback a.button.tiny.post:hover {
  background-position: -32px 0;
}
#information .feedback a.button.tiny.edit {
  position: absolute;
  top: 103px;
  left: 184px;
  background-position: 0 -16px;
}
#information .feedback a.button.tiny.edit:hover {
  background-position: -32px -16px;
}

#information .feedback dd.review textarea {
  padding: 4px;
  width: 208px;/*216-8*/
  height: 88px;/*96-8*/
  max-width: 208px;
  max-height: 88px;
  border-color: #d3d4d4;
  font-size: 13px;
}

#information .feedback .message {
  position: absolute;
  top: 123px;
  left: 16px;
  width: 216px;
  max-height: 91px;
  font-size: 12px;
  color: #727171;
  word-break: break-all;
}

#information .feedback .message .contents {
  width: 216px;
  max-height: 91px;
  overflow-x: hidden;
  overflow-y: auto;
}

#information .feedback .message span {
  display: block;
  font-size: 12px;
  color: #727171;
  line-height: 1.5em;
}

#information .feedback .message span.send-message {
  margin-top: 24px;
  display: block;
  text-align: center;
  font-size:14px;
}

#information .feedback .message span.invite-login,
#information .feedback .message span.purchase {
  margin-top: 15px;
  text-align: center;
}

#information .feedback .message span a {
  font-size: 17px;
  color: #f39839;
}

#information .feedback .message span a:hover {
  color: #ffe100;
}

#information .feedback .message .shimaneko-mini {
  margin: 8px auto 0 auto;
  width: 51px;
  height: 30px;
  background: url("/global/images/common/shimanekos_mini.png") no-repeat 0 0;
}

#information .feedback .message .shimaneko-thanks {
  margin: 0 auto 0 auto;
  width: 216px;
  height: 30px;
  background: url("/global/images/common/shimanekos_mini.png") no-repeat 0 -30px;
}

.getbcck-message {
  padding: 20px;
  font-size: 12px;
  line-height: 1.6em;
  color: #9fa0a0;
}

#information .feedback div.social {
  position: absolute;
  top: 89px;
  width: 100%;
  overflow: hidden;
  text-align: center;
}

#information .feedback div.social iframe {
  display: inline-block;
}

#information .morebccks {
  position: relative;
  display: block;
  width: 480px;
  height: 224px;
  background-color: rgba(243,152,57,0.88);
  -webkit-box-shadow:1px 1px 8px rgba(0,0,0,0.1);
  -moz-box-shadow:1px 1px 8px rgba(0,0,0,0.1);
  -ms-box-shadow:1px 1px 8px rgba(0,0,0,0.1);
  box-shadow:1px 1px 8px rgba(0,0,0,0.1);
}

#information .morebccks h3 {
  display: inline-block;
  padding: 13px 0 0 0;
  width: 100%;
  height: 15px;
  font-size: 12px;
  font-family: HiraKakuProN-W3,HiraKakuPro-W3,"ヒラギノ角ゴ ProN W3","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif;
  font-weight: normal;
  line-height: 1em;
  color: #fff;
  text-align: center;
}

#information .morebccks ul.recommends {
  position: absolute;
  display: block;
  top: 13px;
  left: 50%;
  margin-left: -216px;/* width/2 */
  width: 432px;
  height: 192px;
}

#information .morebccks ul.recommends>li {
  position: relative;
  display: block;
  float: left;
  width: 144px;
  height: 192px;
}
#information .morebccks ul.recommends>li .bcck-thumb {
  line-height: 192px;
  text-align: center;
}

#information .morebccks ul.recommends>li a img {
  max-width: 140px;
  max-height: 165px;
  -webkit-box-shadow:4px 4px 8px rgba(0,0,0,0.2);
  -moz-box-shadow:4px 4px 8px rgba(0,0,0,0.2);
  -ms-box-shadow:4px 4px 8px rgba(0,0,0,0.2);
  box-shadow:4px 4px 8px rgba(0,0,0,0.2);
  vertical-align: middle;
  cursor: pointer;
}
#information .morebccks ul.recommends>li a img:hover {
  border: none;
  box-shadow:4px 4px 8px rgba(255,255,255,0.3);
  -webkit-box-shadow:4px 4px 8px rgba(255,255,255,0.3);
  -moz-box-shadow:4px 4px 8px rgba(255,255,255,0.3);
  -ms-box-shadow:4px 4px 8px rgba(255,255,255,0.3);
  box-shadow:4px 4px 8px rgba(255,255,255,0.3);
}
#information .morebccks ul.recommends>li img.tn-bunkoLandscape     { max-width:79px;  height:112px; }
#information .morebccks ul.recommends>li img.tn-shinshoLandscape   { max-width:84px;  height:136px; }
#information .morebccks ul.recommends>li img.tn-inch10Landscape    { max-width:112px; height:146px; }
#information .morebccks ul.recommends>li img.tn-a5deformeLandscape { max-width:105px; height:165px; }
#information .morebccks ul.recommends>li img.tn-postcardLandscape  { width:100px; max-height:71px;  }
#information .morebccks ul.recommends>li img.tn-cabinetLandscape   { width:120px; max-height:86px;  }
#information .morebccks ul.recommends>li img.tn-octavoLandscape    { width:140px; max-height:100px; }

#information .morebccks ul.recommends>li .bcck-data {
  position: absolute;
  top: 184px;
  left: 5px;
  width: 135px;
  height: 22px;
  font-size: 10px;
  font-family: HiraKakuProN-W3,HiraKakuPro-W3,"ヒラギノ角ゴ ProN W3","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif;
  line-height: 11px;
  color: #F5F6F6;
}

#information .morebccks ul.recommends>li .bcck-data h2.bcck-title {
  margin: 0;
  font-size: 10px;
  line-height: 1.1em;
  color: #FAFAFA;
  text-indent: -0.5em;
}

#information .morebccks ul.recommends>li .bcck-data h2.bcck-title a {
  display: inline-block;
  max-width: 118px;/*135-括弧*/
  font-size: 10px;
  color: #FAFAFA;
  text-indent: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#information .morebccks ul.recommends>li .bcck-data h2.bcck-title a:hover {
  color: #fff100;
}

#information .morebccks ul.recommends>li .bcck-data p {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#information a.close {
  position: absolute;
  top: -3px;
  right: 3px;
  width: 16px;
  height: 16px;
  font-size: 18px;
  font-family: HiraKakuProN-W6,HiraKakuPro-W6,'ヒラギノ角ゴ ProN W6','ヒラギノ角ゴ Pro W6','メイリオ',Meiryo,'ＭＳ ゴシック',Arial,HelveticaNeue,Helvetica,'Lucida Grande',sans-serif;
  font-weight: bold;
  color: #727171;
}
#information a.close:hover            { color:#f08300; }
#information .morebccks a.close       { color:#F5F6F6; }
#information .morebccks a.close:hover { color:#ffe100; }

#selection {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: black;
  z-index: 60;
  opacity: 0.8;
}

#selection div.content {
  padding: 20px;
}

#selection div.content h2 {
  font-size: 12px;
  color: #666;
}

#selection div.content textarea {
  width: 100%;
  height: 60px;
  font-size: 13px;
}

#pager div.help {
  position: absolute;
  top: 0;
  background: url("/global/reader/images/reader_pageflip_grad.png") 0 50% repeat-y;
  width: 108px;
  height: 100%;
  z-index: 100;
  opacity: 0.6;
  cursor: pointer;
}

#pager div.help.left {
  left: 0;
}

#pager div.help.right {
  right: 0;
  background-position: -108px;
}

#swipe-container.transition {
  transition: transform .3s linear;
}

#pager .swipe-page {
  overflow: hidden;
  position: relative;
  background-color: #666;
}

#next {
  display: block;
  position: absolute;
  background: url(/global/reader/images/reader_pageflip_grad.png) repeat-y -78px;
  opacity: 0;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -ms-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
  top: 0;
  left: 0;
  width: 30px;
  height: 100%;
  margin: 0;
  z-index: 100;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

#prev {
  display: block;
  position: absolute;
  background: url(/global/reader/images/reader_pageflip_grad.png) repeat-y -108px;
  opacity: 0;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -ms-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
  top: 0;
  right: 0;
  width: 30px;
  height: 100%;
  margin: 0;
  z-index: 100;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

#menu {
  z-index: 100;
  display: block;
  position: absolute;
  width: 768px;
  height: 0;
  -webkit-transition: -webkit-transform 0.4s ease-in-out;
  -moz-transition: -moz-transform 0.4s ease-in-out;
  -ms-transition: -ms-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
}

#menu.tiny {
  width: 552px;
}

#menu.mobile {
  width: 100%;
  height: 48px;
  top: 0;
  left: 0;
  background: #ccc;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

#menu.mobile.show {
  opacity: 1;
  pointer-events: auto;
}

#menu.mobile div.font-size {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 104px;
  height: 48px;
}

#menu.mobile a {
  display: block;
  position: absolute;
  left: 8px;
  top: 4px;
  width: 40px;
  height: 40px;
  border: 1px solid #666;
  border-radius: 10px;
  text-indent: -9999px;
}

#menu.mobile div.font-size a:nth-child(2) {
  left: auto;
  right: 8px;
}

#menu.mobile div.font-size a.disabled {
  border-color: #aaa;
  pointer-events: none;
}

#menu.mobile div.font-size a.disabled span::after {
  color: #aaa;
}

#menu.mobile a span {
  display: block;
  width: 40px;
  height: 40px;
  overflow: visible;
}

#menu.mobile a span::after {
  font-family: 'IcoMoon-Free' !important;
  line-height: 40px;
  font-size: 28px;
  font-style: normal;
  position: absolute;
  color: #666;
  top : 0;
  left: 0;
  width: 40px;
  text-align: center;
  text-indent: 0;
  z-index: -1;
}

#menu.mobile a.back span::after {
  content: "\e967";
}

#menu.mobile a.smaller span::after {
  content: "\ea0b";
}

#menu.mobile a.bigger span::after {
  content: "\ea0a";
}

#mobile-slider {
  z-index: 100;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 48px;
  margin: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  background: #ccc;
}

#mobile-slider.show {
  opacity: 1;
  pointer-events: auto;
}

#mobile-slider div.slider-placeholder {
  margin: 14px 20px;
  height: 20px;
}

#mobile-slider div.slider-placeholder div.rangeSlider__fill {
  background: #f08300;
}

#mobile-slider.rtl div.slider-placeholder div.rangeSlider {
  background: #f08300;
}

#mobile-slider.rtl div.slider-placeholder div.rangeSlider__fill {
  background: #7f8c8d;
}

#menu ul li,
#menu ul li a,
#menu ul li dl dt,
#menu ul li dl dd {
  display: block;
  width: 184px;
  height: 64px;
}

#menu ul li div.block {
  width: 184px;
  height: 64px;
  position: absolute;
  top: 0;
  left: 0;
  background: #000 url(../images/ajax-loader.gif) 50% 50% no-repeat;
  opacity:0.7;
  z-index: 101;
}

#menu ul li {
  background: -moz-linear-gradient(left top, #323232, #a0a0a0);
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#323232), to(#a0a0a0));
  background: -ms-linear-gradient(-45deg, #323232, #494949 33%, #6a6a6a 66%, #a0a0a0);
}

#menu ul li.first-grad {
  background: -moz-linear-gradient(left, #000000, #181818 16%, #3B3B3B 57%, #605F5E);
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(black), color-stop(0.16, #181818), color-stop(0.57, #3B3B3B), to(#605F5E));
  background: -ms-linear-gradient(left, #000000, #181818 16%, #3B3B3B 57%, #605F5E);
}

#menu ul li.second-grad {
  background: -moz-linear-gradient(left, #191919, #494949 33%, #6a6a6a 66%, #8B8B8B);
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#191919), color-stop(0.33, #494949), color-stop(0.66, #6a6a6a), to(#8B8B8B));
  background: -ms-linear-gradient(left, #191919, #494949 33%, #6a6a6a 66%, #8B8B8B);
}

#menu ul li.h32 {
  height: 32px;
}

#menu ul li#purchase {
  position: absolute;
  left: 184px;
  top: 64px;
}

#menu ul li#purchase a {
   background: transparent url(../images/viewer_ui_new.png) no-repeat -368px -64px;
}

#menu ul li#purchase a:hover {
  background-position: -368px 0;
}

#menu ul li#purchase a.price {
  background-position: -368px -64px;
}

#menu ul li#purchase a.price:hover {
  background-position: -368px 0;
}

#menu ul li#help {
  position: absolute;
  left: 184px;
  top: 0;
}

#menu ul li#help a {
  height: 32px;
  background: transparent url(../images/viewer_ui_new.png) no-repeat 0 -192px;
}

#menu ul li#help a:hover {
  background-position: 0 -224px;
}

/*
#menu ul li#settings {
  position: absolute;
  left: 368px;
  top: 0;
}

#menu ul li#settings a {
  background-color: transparent;
  background-image: url(../images/viewer_ui.png);
  background-repeat: no-repeat;
  background-position: -384px 0;
}

#menu ul li#settings a:hover {
  background-position: -384px -64px;
}
*/

#menu ul li#device {
  position: absolute;
  left: 552px;
  top: 0;
  text-align: center;
}

#menu.tiny ul li#device {
  left: 368px;
  top: 0;
  background: -moz-linear-gradient(left, #000000, #181818 16%, #3B3B3B 57%, #605F5E);
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(black), color-stop(0.16, #181818), color-stop(0.57, #3B3B3B), to(#605F5E));
  background: -ms-linear-gradient(left, #000000, #181818 16%, #3B3B3B 57%, #605F5E);
}

#menu ul li#device span {
  display: inline-block;
  color: white;
}

#menu ul li#device a {
  display: inline-block;
  background: transparent url("../images/viewer_ui_new.png") no-repeat;
  height: 32px;
  line-height: 32px;
  text-indent: -9999px;
}

#menu ul li#device a.bunkoLandscape {
  margin-left: 12px;
  width: 35px;
  background-position: -395px -256px;
}
#menu ul li#device a.bunkoLandscape.selected,
#menu ul li#device a.bunkoLandscape:hover,
#menu ul li#device a.bunkoLandscape:active {
  background-position: -395px -288px;
}
#menu ul li#device a.shinshoLandscape {
  width: 30px;
  background-position: -430px -256px;
}
#menu ul li#device a.shinshoLandscape.selected,
#menu ul li#device a.shinshoLandscape:hover,
#menu ul li#device a.shinshoLandscape:active {
  background-position: -430px -288px;
}
#menu ul li#device a.inch10Landscape {
  width: 39px;
  background-position: -460px -256px;
}
#menu ul li#device a.inch10Landscape.selected,
#menu ul li#device a.inch10Landscape:hover,
#menu ul li#device a.inch10Landscape:active {
  background-position: -460px -288px;
}
#menu ul li#device a.a5deformeLandscape {
  width: 38px;
  background-position: -498px -256px;
}
#menu ul li#device a.a5deformeLandscape.selected,
#menu ul li#device a.a5deformeLandscape:hover,
#menu ul li#device a.a5deformeLandscape:active {
  background-position: -498px -288px;
}

#menu ul li#device a.postcardLandscape {
  width: 33px;
  background-position: -592px -256px;
}
#menu ul li#device a.postcardLandscape.selected,
#menu ul li#device a.postcardLandscape:hover,
#menu ul li#device a.postcardLandscape:active {
  background-position: -592px -288px;
}
#menu ul li#device a.cabinetLandscape {
  width: 37px;
  background-position: -625px -256px;
}
#menu ul li#device a.cabinetLandscape.selected,
#menu ul li#device a.cabinetLandscape:hover,
#menu ul li#device a.cabinetLandscape:active {
  background-position: -625px -288px;
}
#menu ul li#device a.octavoLandscape {
  width: 27px;
  background-position: -662px -256px;
}
#menu ul li#device a.octavoLandscape.selected,
#menu ul li#device a.octavoLandscape:hover,
#menu ul li#device a.octavoLandscape:active {
  background-position: -662px -288px;
}

#menu ul li#home {
  position: absolute;
  left: 0;
  top: 0;
}

#menu ul li#home a {
  background: transparent url("../images/viewer_ui_new.png") no-repeat 0 0;
}

#menu ul li#home a:hover {
  background-position: 0 -64px;
}

#menu ul li#edit {
  position: absolute;
  left: 184px;
  top: 128px;
}

#menu ul li#edit a {
  background: transparent url(../images/viewer_ui_new.png) no-repeat -552px 0;
}

#menu ul li#edit a:hover {
  background-position: -552px -64px;
}


/*
#menu ul li#search {
  position: absolute;
  left: 552px;
  top: 0;
}

#menu ul li#search a {
  background-color: transparent;
  background-image: url(../images/viewer_ui.png);
  background-repeat: no-repeat;
  background-position: -576px 0;
}

#menu ul li#search a:hover {
  background-position: -576px -64px;
}
*/

#menu ul li#paper {
  position: absolute;
  left: 552px;
  top: 96px;
}

#menu.tiny ul li#paper {
  left: 368px;
}

#menu ul li#paper dl dt {
  height: 32px;
  background: transparent url(../images/viewer_ui_new.png) no-repeat -184px -256px;
}

#menu ul li dl dd a {
  width: 36px;
  height: 32px;
  position: absolute;
  top: 0;
}

#menu ul li#paper dl dd {
  height: 0;
}

#menu ul li#paper dl dd a.black {
  left: 0;
  background: transparent url(../images/viewer_ui_new.png) no-repeat 0 -320px;
}

#menu ul li#paper dl dd a.black:hover {
  background-position: -30px -320px;
}

#menu ul li#paper dl dd a.white {
  right:0;
  background: transparent url(../images/viewer_ui_new.png) no-repeat -60px -320px;
}

#menu ul li#paper dl dd a.white:hover {
  background-position: -90px -320px;
}

#menu ul li#paper dl dd div.indicate {
  width: 110px;
  height: 8px;
  position:absolute;
  bottom: 3px;
  left: 37px;
  background: transparent url(../images/viewer_ui_new.png) no-repeat -160px -334px;
}

#menu ul li#book-info {
  position: absolute;
  left: 184px;
  top: 32px;
}
#menu ul li#book-info a {
  height: 32px;
  background: transparent url(../images/viewer_ui_new.png) no-repeat -184px -192px;
}
#menu ul li#book-info a:hover {
  background-position: -184px -224px;
}

#menu ul li#rating {
  position: absolute;
  left: 0;
  top: 128px;
}

#menu ul li#rating h1 {
  position: absolute;
  top: 38px;
  left: 50%;
  width: 54px;
  height: 12px;
  background: url(../images/viewer_ui_new.png)no-repeat -49px -166px;
  text-indent: -9999px;
  margin-left: -27px;
}

#menu ul li#rating div.stars {
  position: absolute;
  left: 19px;
  top : 15px;
/*  top : 17px;
  width: 110px;*/
  width: 148px;
  height: 20px;
  background: transparent url(../images/viewer_ui_new.png) no-repeat -123px -142px;
}

#menu ul li#rating a {
  position: relative;
  z-index: 101;
}

#menu ul li#reviews {
  position: absolute;
  left: 0;
  top: 64px;
}
#menu ul li#reviews a {
  background: transparent url(../images/viewer_ui_new.png) no-repeat -184px -64px;
}
#menu ul li#reviews a:hover {
  background-position: -184px 0;
}

#menu ul li#font {
  position: absolute;
  left: 552px;
  top: 64px;
}

#menu.tiny ul li#font {
  display: none;
}

#menu ul li#font dl dt {
  height: 32px;
  background: transparent url(../images/viewer_ui_new.png) no-repeat 0 -256px;
}

#menu ul li#font dl dd {
  height: 0;
}

#menu ul li#font dl dd a.black {
  left: 0;
  background: transparent url(../images/viewer_ui_new.png) no-repeat -0px -320px;
}

#menu ul li#font dl dd a.black:hover {
  background-position: -30px -320px;
}

#menu ul li#font dl dd a.white {
  height: 32px;
  right:0;
  background: transparent url(../images/viewer_ui_new.png) no-repeat -60px -320px;
}

#menu ul li#font dl dd a.white:hover {
  background-position: -90px -320px;
}

#menu ul li#font dl dd div.indicate {
  width: 110px;
  height: 8px;
  position: absolute;
  bottom: 3px;
  left: 37px;
  background: transparent url(../images/viewer_ui_new.png) no-repeat -180px -334px;
}

#menu ul li#fontsize {
  position: absolute;
  left: 368px;
  top: 0;
}

#menu.tiny ul li#fontsize {
  display: none;
}

#menu ul li#fontsize a {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  text-indent: -9999px;
  background: transparent url(../images/viewer_ui_new.png) no-repeat -552px -128px;
}

#menu ul li#fontsize a.size-2 {
  margin-left: 10px;
  width: 30px;
  background-position: -562px -128px;
}

#menu ul li#fontsize a.size-2:hover, #menu ul li#fontsize a.size-2.selected {
  background-position: -562px -160px;
}

#menu ul li#fontsize a.size-1 {
  margin-left: 0;
  width: 31px;
  background-position: -594px -128px;
}

#menu ul li#fontsize a.size-1:hover, #menu ul li#fontsize a.size-1.selected {
  background-position: -594px -160px;
}

#menu ul li#fontsize a.size0 {
  margin-left: 0;
  width: 33px;
  background-position: -623px -128px;
}

#menu ul li#fontsize a.size0:hover, #menu ul li#fontsize a.size0.selected {
  background-position: -623px -160px;
}

#menu ul li#fontsize a.size1 {
  margin-left: 0;
  width: 38px;
  background-position: -656px -128px;
}

#menu ul li#fontsize a.size1:hover, #menu ul li#fontsize a.size1.selected {
  background-position: -656px -160px;
}

#menu ul li#fontsize a.size2 {
  margin-left: 0;
  width: 41px;
  background-position: -694px -128px;
}

#menu ul li#fontsize a.size2:hover, #menu ul li#fontsize a.size2.selected {
  background-position: -694px -160px;
}

#menu ul li#fontface {
  position: absolute;
  left: 368px;
  top: 64px;
}

#menu.tiny ul li#fontface {
  display: none;
}

#menu ul li#fontface a {
  display: none;
/*  display: inline-block;
  width: 96px;
  height: 32px;
  line-height: 32px;
  text-indent: -9999px;
  background-color: transparent;
  background-image: url(../images/viewer_ui_new.png);
  background-repeat: no-repeat;
  background-position: -384px -192px;
*/
}

#menu ul li#fontface a:hover, #menu ul li#fontface a.selected {
  background-position: -384px -224px;
}

#menu ul li#fontface a.default {
  background-position: -480px -192px;
}

#menu ul li#fontface a.default:hover, #menu ul li#fontface a.default.selected {
  background-position: -480px -224px;
}

#menu ul li#tateyoko {
  position: absolute;
  left: 368px;
  top: 32px;
}

#menu.tiny ul li#tateyoko {
  top: 64px;
  background: -moz-linear-gradient(left top, #323232, #a0a0a0);
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#323232), to(#a0a0a0));
  background: -ms-linear-gradient(-45deg, #323232, #494949 33%, #6a6a6a 66%, #a0a0a0);
}

#menu ul li#tateyoko a {
  height: 32px;
  background: transparent url(../images/viewer_ui_new.png) no-repeat -576px -128px;
}

#menu ul li#tateyoko a:hover {
  background-position: -576px -160px;
}

#menu ul li#full-screen {
  position: absolute;
  left: 552px;
  top: 32px;
}

#menu.tiny ul li#full-screen {
  left: 368px;
}

#menu ul li#full-screen a {
  height: 32px;
  background: transparent url(../images/viewer_ui_new.png) no-repeat -368px -352px;
}

#menu ul li#full-screen a:hover {
  background-position: -368px -384px;
}

:fullscreen #menu ul li#full-screen a {
  background-position: -552px -352px;
}
:-webkit-full-screen #menu ul li#full-screen a {
  background-position: -552px -352px;
}
:-moz-full-screen #menu ul li#full-screen a {
  background-position: -552px -352px;
}

:fullscreen #menu ul li#full-screen a:hover {
  background-position: -552px -384px;
}
:-webkit-full-screen #menu ul li#full-screen a:hover {
  background-position: -552px -384px;
}
:-moz-full-screen #menu ul li#full-screen a:hover {
  background-position: -552px -384px;
}

#menu ul li#device a

:fullscreen #menu ul li#reviews a {
  display: none;
}
:fullscreen #menu ul li#book-info a {
  display: none;
}
:fullscreen #menu ul li#device a {
  display: none;
}
:-webkit-full-screen #menu ul li#reviews a {
  display: none;
}
:-webkit-full-screen #menu ul li#book-info a {
  display: none;
}
:-webkit-full-screen #menu ul li#device a {
  display: none;
}
:-moz-full-screen #menu ul li#reviews a {
  display: none;
}
:-moz-full-screen #menu ul li#book-info a {
  display: none;
}
:-moz-full-screen #menu ul li#device a {
  display: none;
}

#menu ul li#blank {
  position: absolute;
  left: 368px;
  top: 96px;
}

#menu.tiny ul li#blank {
  display: none;
}

#menu ul li span {
  display: none;
}

/*
div.blockPage > div {
  overflow: hidden;
}

#dialog-change-device {
  background: black;
  opacity: 0.8;
  padding: 15px 25px;
  color: #CCC;
  font-size: 11px;
}

#dialog-change-device h3 {
  font-size: 11px;
  font-weight: normal;
}

#dialog-change-device dl {
  margin: 10px 0;
  text-align: left;
}

#dialog-change-device dl dt {
  display: inline-block;
  font-size: 11px;
  width: 50px;
  text-align: right;
  vertical-align: top;
  margin-top: 10px;
  margin-right: 10px;
}

#dialog-change-device dl dd {
  display: inline-block;
  width: 160px;
  height: 36px;
  line-height: 36px;
}

#dialog-change-device dl dd a {
  display: inline-block;
  background-color: transparent;
  background-image: url(../images/select_device.png);
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  line-height: 36px;
}

#dialog-change-device dl dd a.bunkoLandscape { background-position: 0 0; }
#dialog-change-device dl dd a.bunkoLandscape.selected, #dialog-change-device dl dd a.bunkoLandscape:hover , #dialog-change-device dl dd a.bunkoLandscape:active { background-position: 0 -30px; }
#dialog-change-device dl dd a.shinshoLandscape { background-position: -30px 0; }
#dialog-change-device dl dd a.shinshoLandscape.selected, #dialog-change-device dl dd a.shinshoLandscape:hover , #dialog-change-device dl dd a.shinshoLandscape:active { background-position: -30px -30px; }
#dialog-change-device dl dd a.inch10Landscape { background-position: -60px 0; }
#dialog-change-device dl dd a.inch10Landscape.selected, #dialog-change-device dl dd a.inch10Landscape:hover, #dialog-change-device dl dd a.inch10Landscape:active { background-position: -60px -30px; }
#dialog-change-device dl dd a.a5deformeLandscape { background-position: -90px 0; }
#dialog-change-device dl dd a.a5deformeLandscape.selected, #dialog-change-device dl dd a.a5deformeLandscape:hover, #dialog-change-device dl dd a.a5deformeLandscape:active { background-position: -90px -30px; }

#dialog-change-device dl dd a.bunkopodLandscape { background-position: -120px 0; }
#dialog-change-device dl dd a.bunkopodLandscape.selected, #dialog-change-device dl dd a.bunkopodLandscape:hover, #dialog-change-device dl dd a.bunkopodLandscape:active { background-position: -120px -30px; }
#dialog-change-device dl dd a.shinshopodLandscape { background-position: -150px 0; }
#dialog-change-device dl dd a.shinshopodLandscape.selected, #dialog-change-device dl dd a.shinshopodLandscape:hover, #dialog-change-device dl dd a.shinshopodLandscape:active { background-position: -150px -30px; }
#dialog-change-device dl dd a.inch10podLandscape { background-position: -180px 0; }
#dialog-change-device dl dd a.inch10podLandscape.selected, #dialog-change-device dl dd a.inch10podLandscape:hover, #dialog-change-device dl dd a.inch10podLandscape:active { background-position: -180px -30px; }
#dialog-change-device dl dd a.a5deformepodLandscape { background-position: -210px 0; }
#dialog-change-device dl dd a.a5deformepodLandscape.selected, #dialog-change-device dl dd a.a5deformepodLandscape:hover, #dialog-change-device dl dd a.a5deformepodLandscape:active { background-position: -210px -30px; }

#dialog-change-device dl dd a.iPhonePortrait { background-position: -240px 0; }
#dialog-change-device dl dd a.iPhonePortrait.selected, #dialog-change-device dl dd a.iPhonePortrait:hover, #dialog-change-device dl dd a.iPhonePortrait:active { background-position: -240px -30px; }
#dialog-change-device dl dd a.android4Portrait { background-position: -270px 0; }
#dialog-change-device dl dd a.android4Portrait.selected, #dialog-change-device dl dd a.android4Portrait:hover, #dialog-change-device dl dd a.android4Portrait:active { background-position: -270px -30px; }
#dialog-change-device dl dd a.android7Portrait { background-position: -300px 0; }
#dialog-change-device dl dd a.android7Portrait.selected, #dialog-change-device dl dd a.android7Portrait:hover, #dialog-change-device dl dd a.android7Portrait:active { background-position: -300px -30px; }
#dialog-change-device dl dd a.iPadPortrait { background-position: -330px 0; }
#dialog-change-device dl dd a.iPadPortrait.selected, #dialog-change-device dl dd a.iPadPortrait:hover, #dialog-change-device dl dd a.iPadPortrait:active { background-position: -330px -30px; }
*/

.texture {
  position: absolute;
  overflow:hidden;
  z-index:10;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#thumb-list-placeholder {
  z-index: 100;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 90px;
  margin: 0;
}

#thumb-list {
  z-index: 100;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 56px;
  margin: 0;
  -webkit-transition: -webkit-transform 0.4s ease-in-out;
  -moz-transition: -moz-transform 0.4s ease-in-out;
  -ms-transition: -ms-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#thumb-list ul {
  position: relative;
  height: 56px;
  margin: 0;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#thumb-list ul li.page-thumb {
  position:absolute;
  top: 0;
  right: 0;
  -webkit-transition: top 0.1s ease-out;
  -moz-transition: top 0.1s ease-out;
  -ms-transition: top 0.1s ease-out;
  transition: top 0.1s ease-out;
  display:inline-block;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#thumb-list ul li.page-thumb img {
  background-color: #fff;
  height: 56px;
  border: solid 1px #000;
}

#thumb-list span.pageback {
  position: absolute;
  top: -58px;
  right: 2px;
  text-align : right;
  font-size: 12px;
  -webkit-transition: top 0.1s ease-in-out;
  -moz-transition: top 0.1s ease-in-out;
  -ms-transition: top 0.1s ease-in-out;
  transition: top 0.1s ease-in-out;
}

#thumb-list span.pageback a {
  display: inline-block;
  width: 64px;
  height: 24px;
  background: url(/global/reader/images/page_back_button.png) 0 0 no-repeat;
  text-indent: -9999px;
  color: transparent;
  opacity: 0.4;
}

#thumb-list span.pageback a:hover {
  background-position: 0 -24px;
}

#slider-head {
  z-index: 99;
  position: absolute;
  top: -128px;
  left: 0;
  width: 566px;
  height: 48px;
  margin: 0 auto;
  padding: 40px 165px 40px 35px;
  background: black;
  opacity: 0.8;
  -webkit-transition: -webkit-transform 0.4s ease-in-out;
  -moz-transition: -moz-transform 0.4s ease-in-out;
  -ms-transition: -ms-transform 0.4s ease-in-out;
   transition: transform 0.4s ease-in-out;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#slider-head ul {
  width: 100%;
  height: 48px;
  color: #ccc;
  float: left;
}

#slider-head ul li.chapter {
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 15px;
  font-size: 20px;
  line-height: 20px;
}

#slider-head ul li.text {
  height: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 13px;
}

#slider-head div.measure {
  position: absolute;
  right: 40px;
  height: 48px;
  text-align: right;
  color: #999;
  line-height: 48px;
  font-size: 30px;
  font-family: "HelveticaNeue-Light", Helvetica, Arial, sans-serif;
}

#slider-head div.measure span.percentage {
  font-size: 60px;
  color: #999;
  letter-spacing: -0.02em;
}

#slider-head div.measure span.percentage.rendering {
  color: #EF8404;
}

.page-no,
#page-no {
  position: absolute;
/*   bottom: 1%; */
/*   right: 67px; */
  width: 30px;
  height: 16px;
  font-size: 11px;
  text-align: right;
  color: #505050;
  font-family: "HelveticaNeue-Light", Helvetica, Arial, sans-serif;
  visibility: hidden;
}

.page-no.left {
  text-align: left;
}

.page-no span.percentage,
#page-no span.percentage {
  font-size: 15px;
  padding-right: 2px;
  letter-spacing: 0.1em;
}

.running,
#running {
  position: absolute;
/*   bottom: 1%; */
    width: 96%;
  height: 15px;
  margin: 0 10px;
  color: #505050;
  overflow: hidden;
  visibility: hidden;
}

.running.right {
  text-align: right;
}

.running span.title,
#running span.title {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  margin-right: 10px;
}

.running span.chapter,
#running span.chapter {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
}

#logo, .logo {
  position: absolute;
/*   bottom: 1%; */
/*   right: 10px; */
  background-image: url(../images/PCviewer_bcckslogo.png);
  width: 37px;
  height: 10px;
  visibility: hidden;
}

.bricks-sans-serif {
  font-family: 'Lucida Grande','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','HiraKakuProN-W3',Verdana,'メイリオ','Meiryo','ＭＳ ゴシック','MS Gothic',Osaka,arial,helvetica,sans-serif;
  color: #505050;
}
.bricks-serif {
  font-family: 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','HiraMinProN-W3','ＭＳ 明朝','MS Mincho',serif;
  color: #505050;
}

.bricks-bold {
  font-weight: bold;
}

a {
  text-decoration: none;
}

div.ruby, div.em-mark, span.em-line, span.em-line-wave {
  position: relative;
}

div.ruby div.bricks-line, div.em-mark div.bricks-line {
  position: absolute;
}

span.decoration-line {
  position: relative;
}

.bricks-ttb span { cursor: vertical-text; }
.bricks-ttb a span { cursor: pointer; !important }

div.bricks-line.bricks-ttb a {
  display: inline-block;
}

.bricks-ttb > .bricks-col, .bricks-box > .bricks-col {
  display: block;
  float: right;
}

div.bricks-line {
  position: relative;
  z-index: 50;
}

div.bricks-col div.bricks-line.bricks-ttb {
  float: right;
  text-align: center;
}

.bricks-ttb span {
  position: relative;
  display: block;
}
.bricks-ttb div, .bricks-ttb blockquote, .bricks-ttb p, .bricks-ttb pre, .bricks-ttb ul, .bricks-ttb ol, .bricks-ttb li, .bricks-ttb dl, .bricks-ttb dt, .bricks-ttb dd {
	display: inline
}

div.bricks-line.bricks-ttb span.cjk {
}

div.bricks-line.bricks-ttb span.cjk.bricks-vlr {
  writing-mode: tb-rl;
  -webkit-writing-mode: vertical-lr;
}

/*div.bricks-line.bricks-ttb span.cjk.dash.bricks-vlr {*/
  /*margin: 0 0 0 0.1em;*/
/*}*/

div.bricks-line.bricks-ttb span.tou-ten {
  height: 0.5em;
}
div.bricks-line.bricks-ttb span.ku-ten {
  height: 0.5em;
}

div.bricks-line.bricks-ttb span.chu-ten {
  height: 0.5em;
  -moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  transform:rotate(90deg);
}

div.bricks-line.bricks-ttb span.chu-ten.bricks-vlr {
  writing-mode: tb-rl;
  -webkit-writing-mode: vertical-lr;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  transform: none;
}

div.bricks-line.bricks-ttb span.nakaguro {
  height: 0.5em;
}

div.bricks-line.bricks-ttb span.nakaguro.bricks-vlr {
  writing-mode: tb-rl;
  -webkit-writing-mode: vertical-lr;
}


div.bricks-line.bricks-ttb span.kogaki {
}
div.bricks-line.bricks-ttb span.kakko {
}

div.bricks-line.bricks-ttb span.tateoki {
  -moz-transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  -ms-transform-origin: left bottom;
  transform-origin:left bottom;
  -moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  transform:rotate(90deg);
}

div.bricks-line.bricks-ttb span.kakko.open {
  height: 0.5em;
  -moz-transform-origin: right top;
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin:right top;
  -moz-transform:rotate(-90deg)scale(-1,-1);
  -webkit-transform:rotate(-90deg)scale(-1,-1);
  -ms-transform:rotate(-90deg)scale(-1,-1);
  transform:rotate(-90deg)scale(-1,-1);
}

div.bricks-line.bricks-ttb span.kakko.open.bricks-vlr {
  writing-mode: tb-rl;
  -webkit-writing-mode: vertical-lr;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  transform: none;
}

div.bricks-line.bricks-ttb span.kakko.open.bricks-vlr.bricks-no-vglyph {
  -webkit-writing-mode: horizontal-tb;
}

div.bricks-line.bricks-ttb span.kakko.open.tate,
div.bricks-line.bricks-ttb span.kakko.close.tate {
  -moz-transform-origin: center center;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin:center center;
  -moz-transform:scale(-1.0, 1.0);
  -webkit-transform:scale(-1.0, 1.0);
  -ms-transform:scale(-1.0, 1.0);
  transform:scale(-1.0, 1.0);
}

div.bricks-line.bricks-ttb span.kakko.open.tate.bricks-vlr,
div.bricks-line.bricks-ttb span.kakko.close.tate.bricks-vlr {
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  transform: none;
}


div.bricks-line.bricks-ttb span.kakko.close {
  height: 0.5em;
  -moz-transform-origin: left top;
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
  -moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  transform:rotate(90deg);
}

div.bricks-line.bricks-ttb span.kakko.close.bricks-vlr {
  writing-mode: tb-rl;
  -webkit-writing-mode: vertical-lr;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  transform: none;
}

div.bricks-line.bricks-ttb span.kakko.close.bricks-vlr.bricks-no-vglyph {
  -webkit-writing-mode: horizontal-tb;
}

div.bricks-line.bricks-ttb span.quote {
  height: 0.5em;
  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  transform:rotate(180deg);
  vertical-align: middle;
}

div.bricks-line.bricks-ttb span.cho-on {
  -moz-transform-origin: 0% -7%;
  -webkit-transform-origin: 0% -15%;
  -ms-transform-origin: 0% -10%;
  transform-origin: 0% -10%;
  -moz-transform:rotate(90deg) scale(1.0, -1.0);
  -webkit-transform:rotate(90deg) scale(1.0, -1.0);
  -ms-transform:rotate(90deg) scale(1.0, -1.0);
  vertical-align: middle;
  transform:rotate(90deg) scale(1.0, -1.0);
}

div.bricks-line.bricks-ttb span.cho-on.bricks-vlr {
  writing-mode: tb-rl;
  -webkit-writing-mode: vertical-lr;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  transform: none;
  margin: 0;
}

div.bricks-line.bricks-ttb span.nocjk {
  white-space: nowrap;
  display: block;
}

div.bricks-line.bricks-ttb span.nocjk.latin.bricks-vlr {
  writing-mode: tb-rl;
  -webkit-writing-mode: vertical-lr;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  transform: none;
}

div.clipboard div.bricks-line.bricks-ttb span.nocjk {
  display: inline-block;
}

div.clipboard div.bricks-line.bricks-ttb span.grouped {
  display: inline-block;
}

div.bricks-line.bricks-ttb span.nocjk.latin.space {
  height: 0.33em;
  -moz-transform-origin: left top;
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
  -moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  transform:rotate(90deg);
}

div.bricks-line.bricks-ttb span.ltr {
  display: block;
  vertical-align: baseline;
}

div.bricks-line.bricks-ttb div.ruby,
div.bricks-line.bricks-ttb div.em-mark {
  display:block;
}

div.bricks-line.bricks-ttb span.zenkaku-space {
  overflow: hidden;
}

div.bricks-line.bricks-ttb .box-inline {
  display: block;
}

.bricks-box {
  position: relative;
}

.bricks-box .figure-inner {
  /*position: absolute;*/
  overflow: hidden;
}

.bricks-box.page {
  position: absolute;
  line-height: 0;
}

.bricks-box.hanmen {
  position: absolute;
  line-height: 0;
}

.bricks-box.column {
  position: absolute;
  line-height: 0;
}

.bricks-box.column-block {
  position: relative;
  float: right;
}

div.hanmen.bricks-ttb div.bricks-box.headline {
  float: right;
}

.bricks-ltr span {
  position: relative;
}

.bricks-ltr div, .bricks-ltr blockquote, .bricks-ltr p, .bricks-ltr pre, .bricks-ltr ul, .bricks-ltr ol, .bricks-ltr li, .bricks-ltr dl, .bricks-ltr dt, .bricks-ltr dd {
  display: inline-block;
}

.bricks-ltr div.bricks-col {
/* position: absolute; */
  display: block;
  float: left;
}

.bricks-ltr div.bricks-line {
  display: block;
}

.bricks-ltr div.bricks-box {
  display: block;
  float: none;
}

div.bricks-line.bricks-ltr span, div.bricks-line.bricks-ltr div.ruby {
  display: inline-block;
}

div.bricks-line.bricks-ltr div.ruby span {
/* position: absolute; */
}


div.bricks-line.bricks-ltr span.tou-ten {
  width: 0.5em;
}
div.bricks-line.bricks-ltr span.ku-ten {
  width: 0.5em;
}

div.bricks-line.bricks-ltr span.chu-ten {
  width: 0.5em;
}

div.bricks-line.bricks-ltr span.kakko {
}

div.bricks-line.bricks-ltr span.open {
  width: 0.6em;
}

div.bricks-line.bricks-ltr span.close {
  width: 0.5em;
}

div.bricks-line.bricks-ltr span.cho-on {
}

div.bricks-line.bricks-ltr .nocjk {
  white-space: nowrap;
  display: -moz-inline-block;
  display: inline-block;
}

div.bricks-line.bricks-ltr .nocjk.latin.space {
  width: 0.33em;
}

.edit-tag {
  position: absolute;
  width : 40px;
  height: 12px;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 10px;
  display: block;
  background: #ccf;
  text-align: center;
  z-index: 1000;
}

.inner-page .line-info {
    position: absolute;
    top: -25px;
    width: 24px;
    color: #000000;
    text-align: center;
    line-height: 2px;
    font-family: HelveticaNeue,Helvetica,sans-serif;
    font-style: italic;
    font-size: 13px;
    color: #9FA0A0;
}

.inner-page .line-info span {
    font-style: italic;
}


.inner-page .line-info.ismod {
    color: white !important;
    /*background: #f00;*/
}

.inner-page .line-info.ismod::after {
    content: "♥︎";
    line-height: 5px;
    font-size: 17px;
    font-style: normal;
    position: absolute;
    color: black;
    top : 0;
    left: 0;
    width: 24px;
    text-align: center;
    z-index: -1;
}

.inner-page  div:not(.bricks-box) .line-info {
    top: -25px;
}

.inner-page .bricks-box.figure .line-info {
    top : 0 !important;
    left: -8px !important;
    width: 8px;
    font-size: 6px;
}

.inner-page .bricks-box.figure .line-info.ismod::after {
    font-size: 12px;
    width: 8px;
    left: -2px;
}

.cursor {
    background: #9EEEFB !important;
}

/*
    EMBED READER
*/

div#viewer-container a.play {
  position :absolute;
  display :block;
  box-sizing: border-box;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 238px;
  border-radius: 12px;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05) inset;
  font-size: 30px;
  font-family: HiraMinProN-W3, "ヒラギノ明朝 ProN W3", "Hiragino Mincho Pro W3", Meiryo, "メイリオ", serif;
  font-weight: normal;
  color: #727171;
  padding: 0;
  width: 172px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  text-decoration: none;
  background: #fefefe;
  border: 1px solid #dcdddd;
/*  background: url("/global/reader/images/play.png") no-repeat 0 0;
  text-indent: -9999px;*/
  z-index: 100;
}
div#viewer-container a.play:hover {
  color: #b5b5b6;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05) inset, 0px 0px 12px rgba(0, 0, 0, 0.1);
  /*background-position: 0 -108px;*/
}

#toolbar {
  width: 100%;
  height: 32px;
  background: #fff;
  position: relative;
  line-height: 32px;
  font-size: 0;
}

#toolbar span a,
#toolbar div a {
  width: 17px;
  height: 32px;
  display: inline-block;
  background: url("/global/reader/images/embedreader_buttons.png") no-repeat -6px 0;
  text-indent: -9999px;
  vertical-align: top;
}

#toolbar span.control {
  position: relative;
  float: left;
  width: 86px;
  height: 32px;
  z-index: 100;
}
#toolbar span.control a.left           { margin-left:0; }
#toolbar span.control a.right          { margin-left:48px;background-position:-24px 0; }
#toolbar span.control a.left:hover     { background-position: -6px -32px; }
#toolbar span.control a.right:hover    { background-position:-24px -32px; }
#toolbar span.control a.left:active    { background-position: -6px -64px; }
#toolbar span.control a.right:active   { background-position:-24px -64px; }
#toolbar span.control a.left.page-end  { background-position: -6px -96px; }
#toolbar span.control a.right.page-end { background-position:-24px -96px; }

#toolbar a.gotopermalink {
  position: relative;
  margin-left: 13px;
  float: left;
  display: block;
  height: 32px;
  line-height: 32px;
  font-size: 11px;
  font-family: HiraKakuProN-W3,HiraKakuPro-W3,"ヒラギノ角ゴ ProN W3","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif;
  color: #fff;
  text-indent: -9999px;
  background: url("/global/reader/images/embedreader_buttons.png") no-repeat -161px 0;
  width: 48px;
  /*text-shadow: 1px 1px 2px rgba(0,0,0,0.4 );*/
  z-index: 100;
}
#toolbar a.gotopermalink:hover {
  background-position: -161px -32px;
  /*color: #f08300;*/
}

#toolbar a.title {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 50%;
  font-size: 11px;
  font-family: HiraKakuProN-W3,HiraKakuPro-W3,"ヒラギノ角ゴ ProN W3","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4 );
  z-index: 10;
}
#toolbar a.title:hover {
  color: #f08300;
}
.tiny #toolbar a.title {
  display: none;
}

#toolbar div.command {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  text-align: right;
}
#toolbar div.command a.share {
  margin-right: 25px;
  width: 36px;
  background-position: -40px 0;
}
#toolbar div.command a.share:hover {
  background-position: -40px -32px;
}
#toolbar div.command a.share:active {
  background-position: -40px -64px;
}

#toolbar div.command a.fullscreen {
  margin-right: 20px;
  width: 34px;
  background-position: -80px 0;
}
#toolbar div.command a.fullscreen:hover {
  background-position: -80px -32px;
}
#toolbar div.command a.fullscreen:not(.ignore):active {
  background-position: -80px -64px;
}
#toolbar div.command a.fullscreen.ignore {
  background-position: -80px -96px;
}

#toolbar div.command a.bcckslogo {
  margin-right: 4px;
  width: 40px;
  height: 32px;
  background-position: -119px 0;
}
#toolbar div.command a.bcckslogo:hover {
  background-position: -119px -32px;
}
#toolbar div.command a.bcckslogo:active {
  background-position: -119px -64px;
}

/* embed reader mobile */
#toolbar.mobile {}
#toolbar.mobile a.source {}
#toolbar.mobile span.control,
#toolbar.mobile span.command {}
#toolbar.mobile span a {}

/* embed reader retina */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
div#viewer-container a.play {
  /*background-image: url("/global/reader/images/play@2x.png");
  background-size: 108px 216px;*/
}
#toolbar {
  /*background-image: url("/global/images/common/bg_header_h32@2x.gif");
  background-size: 100% 32px;*/
}
#toolbar span a,
#toolbar div a {
  background-image: url("/global/reader/images/embedreader_buttons@2x.png");
  background-size: 226px 128px;
}
}

span[data-bxml-content-class=mod] {
    background: #ffc0df;
}
span[data-bxml-content-class=add] {
    background: #cb9bff;
}
span[data-bxml-content-class=del] {
    background: red;
    text-decoration: line-through;
    color: white;
}
span[data-bxml-content-class=del]:after {
    position:absolute;
    display:block;
    width: 100%;
    height: 3px;
    content: " ";
    background-color: #d43032;
    opacity: 0.5;
    display: block;
}

div.toc-index {
  position: absolute;
  font-size: 9px;
}
div.bricks-ttb div.toc-index {
  bottom: 0;
  text-align: center;
  left: 50%;
  width: 20px;
  margin: 0 10px 0 -10px;
}
div.bricks-ltr div.toc-index {
  right: 36px;
  width: 20px;
  text-align: right;
}

/* web font */
@font-face {
  font-family: 'isbn';
  src: url('/global/fonts/isbn/isbn.eot');
  src: url('/global/fonts/isbn/isbn.eot?#iefix') format('embedded-opentype'),
       url('/global/fonts/isbn/isbn.woff2') format('woff2'),
       url('/global/fonts/isbn/isbn.woff') format('woff'),
       url('/global/fonts/isbn/isbn.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'bauhaus';
  src: url('/global/fonts/bauhaus/bauhaus.eot');
  src: url('/global/fonts/bauhaus/bauhaus.eot?#iefix') format('embedded-opentype'),
       url('/global/fonts/bauhaus/bauhaus.woff2') format('woff2'),
       url('/global/fonts/bauhaus/bauhaus.woff') format('woff'),
       url('/global/fonts/bauhaus/bauhaus.ttf') format('truetype'),
       url('/global/fonts/bauhaus/bauhaus.svg#bauhaus') format('svg');
  font-weight: normal;
  font-style: normal;
}