@charset "UTF-8";
/* ========================  RESET  ======================== */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body{line-height:1;}img{vertical-align:bottom;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}nav ul,ul,ol{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}ins{background-color:#ff9;color:#000;text-decoration:none;}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}del{text-decoration:line-through;}abbr[title],dfn[title]{border-bottom:1px dotted inherit;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}input,select{vertical-align:middle;}button,fieldset,form,input,label,legend,select,textarea{margin:0;padding:0;vertical-align:baseline;} .clearfix:after{content:".";display:block;clear:both;height:0;visibility:hidden;}.clearfix{min-height:1px;}
* html .clearfix{height: 1px;/*\*//*/ height: auto;overflow: hidden;/**/}
/* ========================  BASE  ======================== */
body {
	color: #333;
	font: 12px "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	line-height: 0;
	line-height: 1;
	-webkit-text-size-adjust: none;
	word-wrap: break-word;
	width: 100%;
	overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-size: 117%;
}
a {
	-webkit-tap-highlight-color: rgba(0, 76, 126, 0.25);
	color: #6495ED;
	text-decoration: none;
}
a:link {
	color: #6495ED;
	text-decoration: none;
}
a:visited {
	/*color: #0073bf;*/
	text-decoration: none;
}
a:hover {
	color: #6495ED;
}
/* ========================  MAIN  ======================== */

#preview {
color:#333;
line-height:1.7;
}
/* ========================  HEADER  ======================== */
#preview header {
	display: block;
	height: 40px;
	width: 100%;
	border-top: 2px solid #ff0000;
	border-bottom: 1px solid #e6e6e6
}
#preview header h1 {
	width: 155px;
	height: 20px;
	padding-top:10px;
	margin-left:auto;
	margin-right:auto;
}
#preview header h1 img{
	vertical-align:top;
}
/* ========================  FOOTER  ======================== */
#preview small{
	display:block;
	background-color:#ffffff;
	font-size:10px;
	text-align:center;
	padding:10px 0;
	margin-top:20px;
	font-weight:bold;
	border-top: 1px solid #e6e6e6
}
/* ========================  BODY  ======================== */
#preview #detailBox{
	padding:20px 10px;

}

#preview #detailBox img.detail_img {
	display:block;
	height: 100px;
	width: 150px;
	margin-left:auto;
	margin-right:auto;
}
#preview #detailBox h2{
	color: #111;
	font-size:14px;
	line-height:1.1;
	font-weight:bold;
	margin-top:1.1em;
	margin-bottom:0.4em;
	padding-left:8px;
	border-left:solid 2px #333333;
}
#preview #detailBox p{
	color:#666666;

}
#preview #detailBox p.author{
	font-size:10px;
	margin-bottom:1em;
	overflow: hidden;
}

#preview #episode {
	font-size:10px;
	font-weight:bold;
	display:block;
	height: 35px;
	width: 100%;
	margin-bottom:20px;
	line-height:35px;
	color:#6a6a6a;
	background: #e6e6e6;
	text-align:right;
}
#preview #episode a{
	margin-right:10px;
	margin-left:0px;
}
#preview #episode img.btnGooglePlay{
	vertical-align:top;
	margin-top:6px;
	margin-bottom:auto;
	height:23px;
}
#preview #episode img.btnAppStore{
	vertical-align:top;
	margin-top:6px;
	margin-bottom:auto;
	height:23px;
}

#preview #content{
	width:100%;
	max-width:640px;
	margin-left:auto;
	margin-right:auto;
}
#preview #content img{
	width:100%;
	max-width:640px;
}
#preview #content ul.comicimg li{
  margin-bottom:30px;
}
#preview #content ul li.banner{
	width:100%;
	padding-left:0;
	padding-right:0;
	margin-bottom:30px;
}
#preview #content ul li{
	width:100%;
	//padding-left:3%;
	//padding-right:3%;
	//margin-bottom:30px;
}
#preview #controls{
	width:100%;
	max-width:640px;
	margin-left:auto;
	margin-right:auto;

}
#preview #controls img.half{
	width:100%;
}
#preview #controls img.full{
	width:100%;
}
#preview #controls td.prev{
	border-top:solid 1px #e6e6e6;
	border-right:solid 1px #e6e6e6;
}
#preview #controls td.next{
	border-top:solid 1px #e6e6e6;
}
#preview #controls td.first{
	border-top:solid 1px #e6e6e6;
}
#preview #sns{
	width:100%;
	max-width:640px;
	margin-left:auto;
	margin-right:auto;
}
#preview #sns img.twitter{
	width:100%;
}
#preview #sns div.icons{
	margin-top:15px;
	margin-bottom:20px;
	text-align:center;
}
#preview #sns div.icons img{
	width:40px;
	height:40px;
	margin-left:8px;
	margin-right:7px;
}
#preview #promotion div{
	width:300px;
	padding:20px 10px;
	margin-left:auto;
	margin-right:auto;
}
#preview #promotion div img{
	width:300px;
	margin-bottom:8px;
}
#preview #comics{
	padding:5px 10px;
}
#preview #comics h3 span{
	display:inline-block;
	font-weight: bold;
    color:#ff0000;
	height:13px;
	padding-left:8px;
	padding-right:12px;
	background-color:#ffffff;
}
#preview #comics div.items{
	margin-bottom:20px;
}


#preview #banners{
	width:300px;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
}

/* ======================== 関連 ========================　*/
/* SPサイトから一部変更 */
#detail_head_comicsInfo .accodion_box {
	padding: 15px 10px;
}
.comicsInfoBox {
	margin-bottom: 20px;
}
.comicsDataBox {
	width: 100%;
	height:10px;
	display: table;
	padding-bottom: 10px;
	border-bottom: 1px dotted #ccc;
	margin-bottom: 10px;
	vertical-align:bottom;
}


.comicsInfoCategoryTitle {
	font-weight: bold;
	padding-bottom: 12px;
	border-bottom: 1px solid #333;
	margin-bottom: 10px;
}
.comicsData_img {
	width: 90px;
	display: table-cell;
}
.comicsData_info {
	padding-right: 10px;
	display: table-cell;
	vertical-align: top;
}
.comicsData_img img {
	width: 100px;
	height: auto;
}
.comicsInfoTitle {
	line-height: 1.4;
	width: 100%;
	font-weight: bold;
	margin-bottom: 6px;
}
.comicsData_info_inner {
	width: 100%;
	padding-left: 10px;
}

.comicsData_info_inner2 {
	width: 100%;
	padding-left: 5px;
}

.comicsInfoAuther {
	color: #666;
	font-size: 10px;
	height:26px;
	margin-bottom:4px;
	line-height: 1.3;
	margin-right: 10px;
}
.btn_cartpageLink {
	display:table;
	width:94%;
}
.btn_cartpageLink li {
	//display:table-cell;
	width: 100.0%;
	text-align: center;
  margin-bottom:10px;
}
.btn_cartpageLink li:last-child {
  margin-bottom:0px;
}
.btn_cartpageLink li a {
  position: relative;
	font-size: 5px;
	color: #333;
	display: block;
	background-color: #EEEEEE;
	font-weight: bold;
	padding: 12px 0px 10px 0;
	//margin-right: 10px;
}
.btn_cartpageLink li a:hover{
  background-color:#DDDDDD;
}
.btn_cartpageLink li:last-child a{
	margin-right: 0px;
}
.comicsData_info {
	position: relative;
}

.btn_cartpageLink .icon_detailLinkArrow {
	padding: 0 10px 0 0;
	float: right;
}

/* ========================  list  ======================== */
.textOverflow {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	width: 100%;
}
.list_wrap {
	display:block;
	border-bottom: 1px dotted #ccc;
	padding-bottom:10px;
	margin-bottom:10px;

}
.list_wrap .list_img, .rankList_wrap .list_img {
	width: 85px;
	display: table-cell;
}
.list_wrap .list_img img, .rankList_wrap .list_img img {
	width: 85px;
	height: auto;
}
.list_wrap a {
	width:100%;
	display: table;
	color: #333;
	table-layout: fixed;
}
#preview .list_wrap a {
	padding:0;
	width:100%;
	display: table;
	color: #333;
	table-layout: fixed;
}
.info_wrap {
	position:relative;
	display: table-cell;
	vertical-align: top;
}
.list_wrap .list_img {
	float: none;
	padding-right: 10px;
}
.book_name {
	font-weight: bold;
	line-height: 1.4;
	min-height: 45px;
	/*width: 187px;*/
	padding-right: 32px;
}
.book_info .book_auther {

}
.book_info {
	font-size: 9px;
	line-height: 1.3;
}
/* ======================== 一覧ページ用 ========================　*/
#previewList header{
	display:table;
}
#previewList footer{
	background-color: #F9F9F9;
}
#previewList small{
    display: block;
    padding: 10px 0;
    font-size: 10px;
    text-align: center;
    font-weight: bold;
}
/* ======================== 画像の選択禁止 ========================　*/
img{
  touch-callout:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
}

/* ======================== スクロール追従バナー ========================　*/
.bottom_banner_wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7%;
  max-height: 40px;
  text-align: center;
  background: #323232;
  padding: 11px 0;
  border-top: 1px solid #191919;
  filter: alpha(opacity=90);
  -moz-opacity: 0.90;
  opacity: 0.90;
	z-index: +1;
}
.bottom_banner_img {
	position: fixed;
  bottom: 0;
  left: 2%;
  width: 18%;
  max-width: 150px;
}
.bottom_banner_btn {
	position: fixed;
  display: block;
  bottom: 0;
  right: 2%;
  width: 70%;
  max-width: 350px;
  margin: 4px 0px;
  padding: 5px;
  background: #F18604;
  color: #fff !important;
  border-top: 1px solid #BBB;
  border-left: 1px solid #BBB;
  border-right: 1px solid #DDD;
  border-bottom: 1px solid #DDD;
  border-radius: 2px;
  text-shadow: 1px 2px 3px #808080;
}

/* ======================== abjマーク ========================　*/

.card-container{
    display:flex;
    max-width: 750px;
    height: 100px;
	margin: 25px;
}

.card-img img{
    width:100%;
    height:100%;
}

.card-text{
    width:100%;
    margin: 10px;
}