@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;
}

main {
	margin: 0 auto;
	max-width: 42em;
}

h1{
	font-weight: normal;
	font-size: 2.2em;
	display:block;
	text-align: center;	
	margin-top: 0px;
	margin-bottom: 0px;
}
h2{
	font-size:1.8em;
	text-align: center;	
	text-weight: bold;
	background-color: #e9e9e9;
	margin-top: 20px;
	margin-bottom: 0px;
}

h3 {
	margin-top: 10px;
	margin-left: 15px;
}

h3, h4, h5, h6 {
}

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;
}

p {
	font-size:1.3em;
	margin-left:30px;
	margin-right:30px;
}


/* ========================  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{
	color:#111111;
	background: #e6e6e6;
	background-size:10px 10px;
}
#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:20px 10px;
}
#preview #comics h3{
	color:#666666;
	height:12px;
	font-size:12px;
	font-weight:bold;
	line-height:12px;
	border-left:solid 2px #ff0000;
	background: #ffffff;
	margin-bottom:16px;
}
#preview #comics h3 span{
	display:inline-block;
	height:13px;
	padding-left:8px;
	padding-right:12px;
	background-color:#ffffff;
}
#preview #product div.items{
	margin-bottom: 20px;
	padding: 20px;
}


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

/* ======================== 商品情報 ========================　*/

#product{
	font-size: 16px;
	}

#product img{
	max-width: 100%;
	}

#product .example {
	color: #ce1f00;
	font-weight: bold;
	text-align:  center;
	}

#product  .example .sale-info{
	font-size: 18px;
	}

#product  .example .sale-info2{
	font-size: 14px;
	}

#product  .example .mb20{
	margin-bottom: 22px;
	}

#product .example2 {
	color: #FF6347;
	font-weight: bold;
	text-align:  left;
	}

#product  .example2 .sale-info{
	font-size: 13px;
	}

#product  .example2 .sale-info2{
	font-size: 14px;
	}

#product  .example2 .mb20{
	margin-bottom: 22px;
	}

#product  .example2 .comics-title{
	font-size: 24px;
	}

#product  .sample_01{
width: 100%;
border-collapse: collapse;
	}

#product  .sample_01 th{
padding: 6px;
text-align: center;
vertical-align: middle;
color: #333;
background-color: #fff;
border: 1px solid #fff;
	}

#product  .sample_01 td{
padding: 6px;
text-align: right;
vertical-align: middle;
background-color: #fff;
border: 1px solid #fff;
	}



/* ======================== 関連 ========================　*/
/* 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: 70px;
	height: auto;
}
.comicsInfoTitle {
	line-height: 1.4;
	width: 100%;
	font-weight: bold;
	margin-bottom: 6px;
}
.comicsData_info_inner {
	width: 100%;
	padding-left: 10px;
}
.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: 50.0%;
	text-align: center;
  margin-bottom:10px;
}
.btn_cartpageLink li:last-child {
  margin-bottom:0px;
}
.btn_cartpageLink li a {
  position: relative;
	font-size: 12px;
	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;
}
.icon_detailLinkArrow {
  position:absolute;
  top:0;
  bottom:0;
  right:10px;
  margin:auto;
	width: 15px;
	height: 14px;
	display: inline-block;
	text-align: center;
	vertical-align: text-bottom;
}
.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: 5%;
	width: 20%;
	max-width: 150px;
}
.bottom_banner_btn {
	position: fixed;
  display: block;
  bottom: 0;
  right: 5%;
  width: 60%;
  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;
}

.bottom_banner_btn_left {
  font-size: 1em;
  line-height: 21px;
  position: fixed;
  bottom: 0;
  right: 50%;
  width: 40%;
  max-width: 350px;
  margin: 4px 4px 4px 4px;
  padding: 5px;
  background: #00A0E9;
  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;
}

.bottom_banner_btn_right {
  font-size: 1em;
  line-height: 21px;
  position: fixed;
  bottom: 0;
  width: 40%;
  max-width: 350px;
  margin: 4px 4px 4px 4px;
  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;
}


/* ========================  枠囲み、ボタン  ======================== */
.box {
padding: 0.5em 0.5em;
text-align: center;
margin:1em 1em 1em 1em;
font-size: 20px;
font-weight: bold;
color: #00B3FE; /*文字色*/
background: #FFF;
border: solid 2px #00B3FE; /*線*/
border-radius: 12px; /*角の丸み*/
}

.box p {
    margin: 0; 
    padding: 0;
}

.btn-link {
    padding: 0.3em 3em;
    margin:1em 1em 1em 1em;
    text-decoration: none;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
    color: #ff669c; /*文字色*/
    border: solid 3px #ff669c; /*線*/
    border-radius: 8px; /*角の丸み*/
    transition: .5s;
}
.btn-link:hover {
    background: #ff669c;
    color: white;
}



/* ======================== マージンコントロール ========================　*/

.Mt10{margin-top: 10px;}
.Mt20{margin-top: 20px;}
.Mt30{margin-top: 30px;}
.Mt40{margin-top: 40px;}
.Mt50{margin-top: 50px;}
.Mt60{margin-top: 60px;}
.Mt70{margin-top: 70px;}
.Mt80{margin-top: 80px;}
.Mt90{margin-top: 90px;}
.Mt100{margin-top: 100px;}

.Mb10{margin-bottom: 10px;}
.Mb20{margin-bottom: 20px;}
.Mb30{margin-bottom: 30px;}
.Mb40{margin-bottom: 40px;}
.Mb50{margin-bottom: 50px;}
.Mb60{margin-bottom: 60px;}
.Mb70{margin-bottom: 70px;}
.Mb80{margin-bottom: 80px;}
.Mb90{margin-bottom: 90px;}
.Mb100{margin-bottom: 100px;}

.Mr10{margin-right: 10px;}
.Mr20{margin-right: 20px;}
.Mr30{margin-right: 30px;}
.Mr40{margin-right: 40px;}
.Mr50{margin-right: 50px;}
.Mr60{margin-right: 60px;}
.Mr70{margin-right: 70px;}
.Mr80{margin-right: 80px;}
.Mr90{margin-right: 90px;}
.Mr100{margin-right: 100px;}

.Ml10{margin-left: 10px;}
.Ml20{margin-left: 20px;}
.Ml30{margin-left: 30px;}
.Ml40{margin-left: 40px;}
.Ml50{margin-left: 50px;}
.Ml60{margin-left: 60px;}
.Ml70{margin-left: 70px;}
.Ml80{margin-left: 80px;}
.Ml90{margin-left: 90px;}
.Ml100{margin-left: 100px;}

/* ======================== フォントサイズ ========================　*/

.Fs10{font-size: 10px;}
.Fs12{font-size: 12px;}
.Fs14{font-size: 14px;}
.Fs15{font-size: 15px;}
.Fs16{font-size: 16px;}
.Fs18{font-size: 18px;}
.Fs20{font-size: 20px;}
.Fs22{font-size: 22px;}
.Fs24{font-size: 24px;}
.Fs25{font-size: 25px;}
.Fs26{font-size: 26px;}
.Fs28{font-size: 28px;}
.Fs30{font-size: 30px;}

.Fs10em{font-size: 1.0em;}
.Fs12em{font-size: 1.2em;}
.Fs14em{font-size: 1.4em;}
.Fs15em{font-size: 1.5em;}
.Fs16em{font-size: 1.6em;}
.Fs18em{font-size: 1.8em;}
.Fs20em{font-size: 2.0em;}
.Fs22em{font-size: 2.2em;}
.Fs24em{font-size: 2.4em;}
.Fs25em{font-size: 2.5em;}
.Fs26em{font-size: 2.6em;}
.Fs28em{font-size: 2.8em;}
.Fs30em{font-size: 3.0em;}

/* ======================== テキストアライン ========================　*/

.TaR{text-align: right;}
.TaC{text-align: center;}
.TaL{text-align: lefr;}