@charset "UTF-8";

/*** COMMON ***/
.bcck-info { display: none; }

.ballon:hover .bcck-info {/* 位置調整は各場所 / bcck-infoを出したい親要素に.ballonを振る */
  position: absolute;
  display: block !important;
  padding-bottom: 24px;
  width: 144px;
  z-index: 4;
  cursor: pointer;
  overflow: hidden;
}
/** top allbccks allstores store **/
.ballon:hover .bcck-info { top:50%;left:50%;margin-left:-72px;/* センター合わせ144/2 */ }
/** library **/
#bcckbox-column li div.ballon:hover .bcck-info { top:auto;bottom:50%;left:50%;margin:0 0 -24px -72px;/* 下余白分 センター合わせ144/2 */ }
/** libraryshelf **/
.bcck-shelf .ballon:hover .bcck-info { z-index:9;top:100%;margin-top:-119px;/*一番小さい背から24pxあける*/}
.bcck-shelf.ui-sortable .ballon:hover .bcck-info { display:none !important; }
/** permalink **/
#bcck-show #user-otherworks .ballon:hover .bcck-info { top:96px;/* 192/2 */ }

div.ballon {
  display: inline-block;
  max-width:140px;
  max-height:183px;
  vertical-align:middle;
}
/* すべての書店 */
#all-stores div.ballon {
  max-width:72px;
  max-height:96px;
  float:none !important;
}
/* 極小サムネイル */
ul.bcck-grids-s div.ballon {
  max-width:36px;
  max-height:48px;
  float:none !important;
}

ul.bcck-shelf-store li.large-1col div.ballon.tn-tofu01Landscape,
ul.bcck-shelf-store li.large-2col div.ballon.tn-tofu01Landscape     { width:80px; height:140px; max-width:282px; max-height:330px; }
ul.bcck-shelf-store li.large-1col div.ballon.tn-bunkoLandscape,
ul.bcck-shelf-store li.large-2col div.ballon.tn-bunkoLandscape     { width:158px; height:224px; max-width:282px; max-height:330px; }
ul.bcck-shelf-store li.large-1col div.ballon.tn-shinshoLandscape,
ul.bcck-shelf-store li.large-2col div.ballon.tn-shinshoLandscape   { width:168px; height:272px; max-width:282px; max-height:330px; }
ul.bcck-shelf-store li.large-1col div.ballon.tn-inch10Landscape,
ul.bcck-shelf-store li.large-2col div.ballon.tn-inch10Landscape    { width:224px; height:292px; max-width:282px; max-height:330px; }
ul.bcck-shelf-store li.large-1col div.ballon.tn-a5deformeLandscape,
ul.bcck-shelf-store li.large-2col div.ballon.tn-a5deformeLandscape { width:221px; height:330px; max-width:282px; max-height:330px; }
ul.bcck-shelf-store li.large-1col div.ballon.tn-postcardLandscape,
ul.bcck-shelf-store li.large-2col div.ballon.tn-postcardLandscape  { width:200px; height:143px; max-width:282px; max-height:330px; }
ul.bcck-shelf-store li.large-1col div.ballon.tn-cabinetLandscape,
ul.bcck-shelf-store li.large-2col div.ballon.tn-cabinetLandscape   { width:242px; height:173px; max-width:282px; max-height:330px; }
ul.bcck-shelf-store li.large-1col div.ballon.tn-octavoLandscape,
ul.bcck-shelf-store li.large-2col div.ballon.tn-octavoLandscape    { width:282px; height:202px; max-width:282px; max-height:330px; }

div.ballon.tn-tofu01Landscape     { width:40px;  height:70px; }
div.ballon.tn-bunkoLandscape     { width:79px;  height:112px; }
div.ballon.tn-shinshoLandscape   { width:84px;  height:136px; }
div.ballon.tn-inch10Landscape    { width:112px; height:146px; }
div.ballon.tn-a5deformeLandscape { width:105px; height:165px; }
div.ballon.tn-postcardLandscape  { width:100px; height:71px;  }
div.ballon.tn-cabinetLandscape   { width:120px; height:86px;  }
div.ballon.tn-octavoLandscape    { width:140px; height:100px; }

#all-stores div.ballon.tn-tofu01Landscape     { width:20px; height:35px; }
#all-stores div.ballon.tn-bunkoLandscape     { width:40px; height:56px; }
#all-stores div.ballon.tn-shinshoLandscape   { width:42px; height:68px; }
#all-stores div.ballon.tn-inch10Landscape    { width:56px; height:73px; }
#all-stores div.ballon.tn-a5deformeLandscape { width:53px; height:83px; }
#all-stores div.ballon.tn-postcardLandscape  { width:50px; height:36px; }
#all-stores div.ballon.tn-cabinetLandscape   { width:60px; height:43px; }
#all-stores div.ballon.tn-octavoLandscape    { width:70px; height:50px; }

ul.bcck-grids-s div.ballon.tn-tofu01Landscape     { width:10px; height:18px; }
ul.bcck-grids-s div.ballon.tn-bunkoLandscape     { width:20px; height:28px; }
ul.bcck-grids-s div.ballon.tn-shinshoLandscape   { width:21px; height:34px; }
ul.bcck-grids-s div.ballon.tn-inch10Landscape    { width:28px; height:36px; }
ul.bcck-grids-s div.ballon.tn-a5deformeLandscape { width:26px; height:41px; }
ul.bcck-grids-s div.ballon.tn-postcardLandscape  { width:25px; height:18px; }
ul.bcck-grids-s div.ballon.tn-cabinetLandscape   { width:30px; height:22px; }
ul.bcck-grids-s div.ballon.tn-octavoLandscape    { width:35px; height:25px; }


.ballon:hover .bcck-info .inner {
  padding: 6px 0;
  width: 144px;
  background-color: rgba(89,87,87,0.8);
  /* IE6,IE7,IE8 */
  filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#CC595757, endcolorstr=#CC595757, gradienttype=0);
}

#book-ranking-inner .ballon:hover .bcck-info div {
  float: none;
}

.ballon:hover .bcck-info .bcck-data {
  display: block;
  margin: 0;
  padding: 0 6px;
  width: auto;
  min-height: 43px;
  overflow: hidden;
}
#user-otherworks ul li .ballon:hover .bcck-info div.bcck-data {
  margin: 0;
  width: auto;
}
#bcckbox-column .ballon:hover .bcck-info .bcck-data {
  min-height: 34px;
}

.ballon:hover .bcck-info h1,
div#side #similar-items .ballon:hover .bcck-info h1,
#bccklist-column-library .ballon:hover .bcck-info h1,
#bccklist-column .ballon:hover .bcck-info h1 {
  display: block;
  position: relative;
  margin:0;
  max-height: 31px;
  font-size: 100%;
  letter-spacing: 0;
  text-align: left;
  overflow: hidden;
  z-index: 4;
}
#bcckbox-column .ballon:hover .bcck-info h1 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ballon:hover .bcck-info h1 a {
  width: auto;
  height: auto;
  font-size: 12px;
  font-family: HiraKakuProN-W6,HiraKakuPro-W6,'ヒラギノ角ゴ ProN W6','ヒラギノ角ゴ Pro W6','メイリオ',Meiryo,'ＭＳ ゴシック',Arial,HelveticaNeue,Helvetica,'Lucida Grande',sans-serif;
  font-weight: bold;
  line-height: 1.2em;
  color: #fff;
  word-break: break-all;
}
.ballon:hover .bcck-info h2 {
  position: relative;
  max-height: 15px;
  text-align: left;
  z-index: 4;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ballon:hover .bcck-info h2 a {
  width: auto;
  height: auto;
  font-size: 10px;
  line-height: 1.3em;
  color: #eeefef;
  word-break: break-all;
}
.ballon:hover .bcck-info .bcck-data p,
#myprofile .ballon:hover .bcck-info .bcck-data p,
div#side #similar-items .ballon:hover .bcck-info .bcck-data p,
#user-otherworks div.bcck-data .ballon:hover .bcck-info .bcck-data p {
  display: block;
  font-size: 10px;
  font-family:HiraKakuProN-W3,HiraKakuPro-W3,"ヒラギノ角ゴ ProN W3","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif;
  font-weight: normal;
  line-height: 1.2em;
  letter-spacing: 0;
  color: #eeefef;
  text-align: left;
  overflow: hidden;
  word-break: break-all;
}

.ballon:hover .bcck-info .bcck-data p.publisher-name,
#user-otherworks .ballon:hover .bcck-info .bcck-data p.publisher-name {
  max-height: 12px;
  font-size: 10px;
  line-height: 1.2em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 書斎では出版社名とディスクリプションを消す */
#bcckbox-column .ballon:hover .bcck-info .bcck-data p.publisher-name,
#bcckbox-column .ballon:hover .bcck-info p.bcck-description {
  display: none;
}

.bcck-info dl,
#myprofile .bcck-info dl {
  display:block;
  margin: 2px 0 0 0;
  font-size: 0;
  color: #eeefef;
  text-align: left;
}
.bcck-info dl dt,
#myprofile .bcck-info dl dt {
  display: inline-block;
  margin: 0 0 0 12px;
  width: 42px;
  font-size: 10px;
  font-family:HiraKakuProN-W3,HiraKakuPro-W3,"ヒラギノ角ゴ ProN W3","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif;
  font-weight: normal;
  line-height: 1.3em;
  vertical-align: middle;
}
.bcck-info dl dd,
#myprofile .bcck-info dl dd {
  display: inline-block;
  font-size: 10px;
  font-family:HiraKakuProN-W3,HiraKakuPro-W3,"ヒラギノ角ゴ ProN W3","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif;
  font-weight: normal;
  line-height: 1.3em;
  vertical-align: middle;
}
.bcck-info dl dd.price,
#myprofile .bcck-info dl dd.price {
  width: 48px;
  text-align: right;
}
.bcck-info dl dd.buy,
#myprofile .bcck-info dl dd.buy {
  width: 42px;
  text-align: center;
}
.bcck-info dl dd.buy a,
#myprofile .bcck-info dl dd.buy a {
  width: auto;
  height: auto;
  font-size: 14px;
  line-height: 1.3em;
  color: #ffe100;
}
.bcck-info dl dd.buy a:hover,
#myprofile .bcck-info dl dd.buy a:hover { color:#f08200;text-decoration:none; }
.bcck-info dl dd.buy-inactive,
#myprofile .bcck-info dl dd.buy-inactive {
  display:none;
/*一時対処
  width: 42px;
  font-size: 14px;
  color: #595757;
  text-align: center;*/
}
.bcck-info dl dd.buy-inactive a,
#myprofile .bcck-info dl dd.buy-inactive a {
  width: auto;
  height: auto;
  font-size: 10px;
  line-height: 1.3em;
  color: #595757;/*aタグが付く場合と付かない場合がある為両方に書く*/
}

.bcck-info .action {
  display: block;
  margin: 3px 0 4px 0;
}
.bcck-info .action p,
#myprofile .bcck-info .action p,
div#side #similar-items .bcck-info .action p {
  display: inline-block;
  width: 66px;
  height: 25px;
  border-bottom: 1px solid #b5b6b6;
  letter-spacing: 0;
  vertical-align: middle;
}
.bcck-info .action p a,
#myprofile .bcck-info .action p a,
div#side #similar-items .bcck-info .action p a { 
  width: auto;
  height: auto;
  font-size: 13px;
  font-family: HiraKakuProN-W6,HiraKakuPro-W6,'ヒラギノ角ゴ ProN W6','ヒラギノ角ゴ Pro W6','メイリオ',Meiryo,'ＭＳ ゴシック',Arial,HelveticaNeue,Helvetica,'Lucida Grande',sans-serif;
  font-weight: bold;
  line-height: 25px;
  color: #ffe100;
  text-align: center;
}
.bcck-info .action p a:hover,
#myprofile .bcck-info .action p a:hover,
div#side #similar-items .bcck-info .action p a:hover { color:#f08200;text-decoration:none; }

.bcck-info .action p.read,
#myprofile .bcck-info .action p.read,
div#side #similar-items .bcck-info .action p.read,
.bcck-info .action p.sample,
#myprofile .bcck-info .action p.sample,
div#side #similar-items .bcck-info .action p.sample {
  border-top: 1px solid #b5b6b6;
}
.bcck-info .action p.read a,
#myprofile .bcck-info .action p.read a,
div#side #similar-items .bcck-info .action p.read a {
  font-size: 20px;
}

.bcck-info .action p.sample a,
#myprofile .bcck-info .action p.sample a,
div#side #similar-items .bcck-info .action p.sample a {
  font-size: 20px;
  letter-spacing:-0.2em;
}
.bcck-info .action p.inform a,
#myprofile .bcck-info .action p.inform a,
div#side #similar-items .bcck-info .action p.inform a {
  font-size: 12px;
  letter-spacing:-0.1em;
}

.bcck-info .action p.read-inactive,
#myprofile .bcck-info .action p.read-inactive,
div#side #similar-items .bcck-info .action p.read-inactive {
  border-top: 1px solid #b5b6b6;
  font-size: 20px;
  font-family: HiraKakuProN-W6,HiraKakuPro-W6,'ヒラギノ角ゴ ProN W6','ヒラギノ角ゴ Pro W6','メイリオ',Meiryo,'ＭＳ ゴシック',Arial,HelveticaNeue,Helvetica,'Lucida Grande',sans-serif;
  font-weight: bold;
  line-height: 25px;
  color: #595757;
}
.bcck-info .action p.sample-inactive,
#myprofile .bcck-info .action p.sample-inactive,
div#side #similar-items .bcck-info .action p.sample-inactive {
  border-top: 1px solid #b5b6b6;
  font-size: 20px;
  font-family: HiraKakuProN-W6,HiraKakuPro-W6,'ヒラギノ角ゴ ProN W6','ヒラギノ角ゴ Pro W6','メイリオ',Meiryo,'ＭＳ ゴシック',Arial,HelveticaNeue,Helvetica,'Lucida Grande',sans-serif;
  font-weight: bold;
  letter-spacing: -0.2em;
  line-height: 25px;
  color: #595757;
}

.ballon:hover .bcck-info p.bcck-description,
#myprofile .ballon:hover .bcck-info p.bcck-description,
div#side #similar-items .ballon:hover .bcck-info p.bcck-description,
#user-otherworks .ballon:hover .bcck-info p.bcck-description {
  padding: 0 6px;
  text-align: left;
  max-height: 36px;
  font-size: 10px;
  line-height: 1.2em;
  color: #fff;
  text-overflow: clip;
  white-space: normal;
  overflow: hidden;
  word-break: break-all;
}

/*** SMARTPHON ***/

@media screen and (max-width: 480px) {

.ballon:hover .bcck-info {
  display: none !important; /* スマホの時は出さない */
}

#shelf ul.bcck-shelf-store div.ballon.tn-tofu01Landscape     { width:80px;height:140px;max-width:282px;max-height:330px; }
#shelf ul.bcck-shelf-store div.ballon.tn-bunkoLandscape     { width:158px;height:224px;max-width:282px;max-height:330px; }
#shelf ul.bcck-shelf-store div.ballon.tn-shinshoLandscape   { width:168px;height:272px;max-width:282px;max-height:330px; }
#shelf ul.bcck-shelf-store div.ballon.tn-inch10Landscape    { width:224px;height:292px;max-width:282px;max-height:330px; }
#shelf ul.bcck-shelf-store div.ballon.tn-a5deformeLandscape { width:221px;height:330px;max-width:282px;max-height:330px; }
#shelf ul.bcck-shelf-store div.ballon.tn-postcardLandscape  { width:200px;height:143px;max-width:282px;max-height:330px; }
#shelf ul.bcck-shelf-store div.ballon.tn-cabinetLandscape   { width:242px;height:173px;max-width:282px;max-height:330px; }
#shelf ul.bcck-shelf-store div.ballon.tn-octavoLandscape    { width:282px;height:202px;max-width:282px;max-height:330px; }

}