/* ===============================================
** アプリスタートページ
** 読み込みファイル共通CSS
=============================================== */

/* ------------------------------------------ */
/*  基本パーツ                                */
/* ------------------------------------------ */
body {
  margin: 0 auto;
  padding: 0;
  background: #fff;
  color: #333;
  line-height: 1.3;
  text-align: center;
}
*{
  font-family:"Meiryo UI","ＭＳ Ｐゴシック","MS-PGothic", "Hiragino Kaku Gothic Pro",osaka,Verdana,Arial,Georgia,"メイリオ","Meiryo", MS UI Gothic,sans-serif;
}
img{
  border: none;
}
dl,dt,dd,p,h1,h2,h3,h4,ul,li,iframe{
  margin: 0;
  padding: 0;
}
a:link, a:visited, a:active, a:hover {
  text-decoration: none;
}
a:focus{
  -moz-outline-style: none;
}
#main{
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

/* ------------------------------------------ */
/*  コンテンツ                                */
/* ------------------------------------------ */
/*  共通  */
.section {
  padding: 0 0 30px;
  text-align: left;
}
.sectionHeading {
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}
.sectionContents {
  font-size: 14px;
}
.sectionContents a {
  display: block;
  padding: 10px;
  text-align: left;
  overflow-wrap: break-word;
  color: #003894;
}
.border-top {
  border-top: 1px solid #ddd;
}
.margin-bottom-20 {
  margin-bottom: 20px;
}
.margin-top-30 {
  margin-top: 30px;
}
.PickupBox a {
  display: block;
  padding: 0 6px;
  text-decoration: none;
}
.PickupBox a:link,
.PickupBox a:visited,
.PickupBox a:active,
.PickupBox a:hover {
  color: #333;
}
.PickupImgArea, .pickupTxtArea {
  display: block;
  text-align: center;
}
.contents-col2 {
  font-size: 0;
  padding: 0 0 0 6px;
}
.contents-col2 .PickupBox {
  display: inline-block;
  margin-bottom: 10px;
  width: calc(100% / 2);
  font-size: 16px;
  vertical-align: top;
}
.PickupBox a {
  padding: 0 7px 0 0;
}
.contents-col2 .PickupImg {
  display: block;
  margin: 0 auto 4px;
}
.contents-col2 .PickupImg img {
  border: 1px solid #ddd;
  width: 100%;
  height: auto;
  max-width: 300px;
}
.contents-col2 .PickupTxtArea {
  display: block;
  max-width: 240px;
  margin: 0 auto;
}
.contents-col2 .PickupTitle {
  display: inline-block;
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
}
/* transfer START */
.header {
  height: 66px;
}
.header__wrap {
  border: none;
  background: #f5f5f5;
}
.header__logoWrap,
.header__naviTopSp {
  display: none;
}
.header__search {
  padding: 12px 0 12px;
}
/*.header__searchInner:before {
  background: #fff;
}*/
@media only screen and (max-width: 767px) {
  .header__search {
    height: 66px;
  }
}
.header__searchInner {
	text-align: left;
}
.app__Content {
	background-color: #fff;
}
.information__ttl {
	display: none;
}
.information__txt {
    text-align: left;
}
.genreList {
  background-color: #f5f5f5;
}
.recommend__heading {
  font-size: 14px;
  font-family: "Meiryo UI","ＭＳ Ｐゴシック","MS-PGothic", "Hiragino Kaku Gothic Pro",osaka,Verdana,Arial,Georgia,"メイリオ","Meiryo", MS UI Gothic,sans-serif;
}
.recommend__inner {
  text-align: left;
}
.recommendItem__ranking {
  text-align: left;
}
/* transfer END */
/* specialSelection */
.border-top--media {
  border-top: 1px solid #ddd;
}
.contents-col3 {
  font-size: 0;
  padding: 0 0 0 18px;
}
.contents-col3 .PickupBox {
  display: inline-block;
  margin-bottom: 20px;
  width: calc(100% / 3);
  font-size: 16px;
  vertical-align: top;
}
.contents-col3 .PickupBox a {
  margin: 0 20px 0 0;
  padding: 0;
}
.contents-col3 .PickupImg {
  display: block;
}
.contents-col3 .PickupImg img {
  border: 1px solid #ddd;
  width: 100%;
  height: auto;
  max-width: 300px;
}
.contents-col3 .PickupTxtArea {
  display: block;
  max-width: 240px;
  margin: 0 auto;
}
.contents-col3 .PickupTitle {
  display: inline-block;
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
  vertical-align: top;
}
/* item recommend */
.itemRec {
  padding: 0;
  font-size: 0;
  text-align: left;
}
.itemRecPickupArea {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 14px 0 20px;
  height: calc(210px * 2 + 12em);
  font-size: 14px;
  overflow-x: scroll;
}
.itemRecPickupBox {
  flex: 1 0 auto;
  display:block;
  width: 40vw;
  height: calc(210px + 4em);
  max-width: 180px;
  font-size: 14px;
}
.itemRecPickupBox a {
  display: block;
  padding: 0 10px 16px;
}
.itemRecPickupImgArea {
  display: block;
  text-align: center;
  vertical-align: top;
}
.itemRecPickupImg {
  display: block;
  height: auto;
  margin: 0 auto 6px;
  text-align: center;
}
/*
.square .itemRecPickupImg {
  display: block;
  height: 144px;
  margin: 0 auto 6px;
  text-align: center;
}
*/
.itemRecPickupImg img {
  border: 1px solid #ddd;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 210px;
}

@media screen and (max-width: 320px) {
/*
  .itemRecPickupImg {
    width: 80px;
    height: 120px;
  }
  .square .itemRecPickupImg {
    width: 80px;
    height: 84px;
  }
  .itemRecPickupImg img {
    max-width: 80px;
  }
*/
}

@media print, (min-width: 386px) {
  .itemRecPickupArea {
    height: calc(240px * 2 + 12em);
  }
  .itemRecPickupBox {
    height: calc(240px + 4em);
  }
  .itemRecPickupImg img {
    max-height: 240px;
  }
}
@media only screen and (max-width: 340px) {
  .itemRecPickupArea {
    height: calc(180px * 2 + 12em);
  }
  .itemRecPickupBox {
    height: calc(180px + 4em);
  }
  .itemRecPickupImg img {
    max-height: 180px;
  }
}

.itemRecPickupTxtArea {
  display: block;
  font-size: 14px;
  text-align: center;
}
.itemRecPickupTitle {
  display: block;
  text-align: left;
  margin-bottom: 2px;
}
.itemRecPickupTitle span {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
}
.itemRecPickupAuthor {
  display: block;
  text-align: left;
  margin-bottom: 2px;
}
.itemRecPickupAuthor span {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
  color: #666;
}
.itemRecPickupPrice {
  display: none;
  font-size: 12px;
  text-align: left;
  color: #DB2A2A;
}
.itemRecPickupPrice-head, itemRecPickupPrice-value {display: inline-block;}
.itemRecPickupPrice-head {margin-right: 0.5em;}
.itemRecPickupTitle,
.itemRecPickupAuthor {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.itemRecPickupTitle {
  color: #003894;
}
/* contents recommend*/
.contentsPickupArea {
  padding-top: 14px;
}
/* .contentsRec .contents-col2 .PickupImg {
  width: 60px;
} */
/*  weekly Ranking  */
.rankingLink {
  display: block;
}
.rankingIcon {
  width: 27px;
  display: block;
  position: relative;
  top: 14px;
  left: -2px;
  z-index: 2;
}
.ranking-number {
  font-size: 14px;
  background: #f5f5f5;
  border: 1px solid #fff;
  color: #999;
  text-align: center;
  display: block;
  width: 24px;
  line-height: 1;
  padding: 4px 0;
  box-shadow: 1px 1px 2px -1px #c1c1c1;
  position: relative;
  top: 14px;
  left: -2px;
  z-index: 2;
}
.rankingAuthor {
  display: block;
  font-size: 12px;
  color: #666;
  line-height: 1.3;
  margin-bottom: 2px;
}
.rankingTitle,
.rankingAuthor {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rankingTitle span,
.rankingAuthor span,
.rankingPrice span {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}
.rankingPrice {
  font-size: 12px;
  color: #DB2A2A;
  line-height: 1.3;
}
.rankingPrice-value {
  padding-left: .7em;
}
.ranking-col3 {
  padding: 0;
}
.ranking-col3 .rankingBox {
  display: inline-block;
  width: calc(100% / 3);
  vertical-align: top;
  max-width: 150px;
  padding: 0 4px 0 6px;
  box-sizing: border-box;
}
.ranking-col3 .rankingImgArea {
  position: relative;
  text-align: center;
  display: block;
  margin-bottom: 6px;
}
.ranking-col3 .rankingTxtArea {
  display: block;
}
.ranking-col3 .rankingTitle {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  margin-bottom: 4px;
}
.rankingImg {
  margin: 0 auto;
  text-align: center;
  display: block;
  height: 133px;
}
.square .rankingImg {
  display: block;
  margin: 0 auto;
  height: 104px;
  text-align: center;
}
.rankingImg img,
.square .rankingImg img {
  border: 1px solid #ddd;
  display: block;
  margin: 0 auto;
  width: auto;
  height: auto;
  max-width: 100px;
  max-height: 100%;
  box-sizing: border-box;
}
@media screen and (max-width: 370px) {
  .rankingImg {
    width: 80px;
    height: 110px;
  }
  .square .rankingImg {
    width: 80px;
    height: 84px;
  }
  .rankingImg img,
  .square .rankingImg img {
    max-width: 80px;
  }
}

/* menu */
.cellContents {
  border-bottom: 1px solid #ccc;
}
.cellContents a {
  display: block;
  text-align: left;
  font-size: 16px;
  padding: 14px 15px;
}
.cellContents a:link,
.cellContents a:visited,
.cellContents a:active,
.cellContents a:hover {
  color: #333;
}
.arrow-r {
  display: block;
  position: relative;
  background: url(https://content.bookoffonline.co.jp/mbfiles/assets/material/arrow.png) no-repeat;
  background-position: center right 11px;
  background-size: 7px,auto,contain;
}
.cellContents-border-top {
  border-top: 1px solid #ccc;
}
/* keyword */
.keywordBtnListBox {
  margin-top: 10px;
  padding: 0 15px;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}
.keywordBtnListBox li {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 0 5px 10px 0;
}
.keywordBtn {
  display: block;
  padding: 5px 12px 6px;
  color: #003894;
}
.keywordBtnTxt {
  font-size: 14px;
  text-align: center;
  display: block;
  line-height: 1;
  word-break: break-all;
}
/* service */
.serviceBannerBox {
  padding: 10px 15px;
}
.serviceBanner {
  display: block;
  margin-bottom: 5px;
}
.serviceBannerImg {
  max-width: 500px;
  display: block;
}
.serviceBannerTxt {
  font-size: 12px;
  color:#333;
}
/*--------2020-12-15 もっと見る--------*/
.sectionHeadingContainer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: nowrap;
  overflow: visible;
  position: relative;
  width: 100%; }

.sectionHeadingMoreLink {
  font-size: 14px; }

.sectionHeadingMoreLink a {
  display: block;
  padding: 10px;
  text-align: right;
  margin: 0 8px 0 auto; }

.sectionHeadingMoreLink-txt {
  display: block;
  letter-spacing: .1em;
  line-height: 1;
  color: #003894;
  font-size: 14px; }

.moreLink {
  font-size: 14px;
  text-align: center;
}
.moreLink {
  position: relative;
  background: url(https://content.bookoffonline.co.jp/mbfiles/assets/material/arrow.png) no-repeat;
  background-position: center right 11px;
  background-size: 7px,auto,contain;
}
.moreLink a {
  display: inline-block;
  padding: 10px 30px;
}
.moreLink-txt {
  display: block;
  line-height: 1;
  letter-spacing: .1em;
  color: #003894;
}

/* --- もっと見るボタン --- */
.bottomMoreLink {
  display: block;
  font-size: 14px;
  text-align: center;
}
.bottomMoreLink a {
  color: #003894;
  display: inline-block;
  padding: 10px 25px;
  text-align: center;
  border: 1px solid #003894;
  border-radius: 20px;
  margin: 8px auto 30px;
}
.bottomMoreLink-txt {
  display: block;
  line-height: 1;
  letter-spacing: .1em;
}
/* --- もっと見るボタン END --- */
.flex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
}
.cateNavInfo {
  background: url("https://content.bookoffonline.co.jp/mbfiles/app/images/catenav-info-h.png") center / cover no-repeat #fff;
  width: auto;
  height: 84px;
  box-sizing: border-box;
}
.cateNavArea {
  height: 130px;
  border-bottom: 1px solid #ddd;
  background: #f5f5f5;
}
.cateNavInfoText {
  padding: 10px 0 6px;
}
.cateNavInfoText img {
  width: auto;
  height: 65px;
}
ul.cateNavGroup {
  padding: 8px 2%;
  max-width: 400px;
  margin: 0 auto;
}
.cateNavGroup .nav-item {
  display: block;
  border: solid 1px #ccc;
  border-radius: 7px;
  width: auto;
  font-size: 12px;
  font-weight: bold;
  color: #333;
  background-color: #fff;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
}
.cateNavGroup .nav-item a {
  color: #003894;
  display: block;
  padding: 8px 13px 7px 13px;
}
/* 人気の商品ジャンル */
.popularItemsGenre {
  padding: 0;
}
.genreListWrap {
  position: relative;
  background-color: #eee;
}
.genreListWrap::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(238, 238, 238, 0) 0%, #eee 100%);
  background: linear-gradient(to right, rgba(238, 238, 238, 0) 0%, #eee 100%);
}
.genreListWrap * {box-sizing: border-box;}
.genreList {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 10px 0 0 8px;
  height: 13em;
  text-align: center;
  overflow-x: scroll;
}
.genreBtn {
  flex: 0 0 5em;
  padding: 4px;
  width: 7em;
}
.genreBtn:last-child {
  margin-right: 20px;
}
.genreBtn a:link, .genreBtn a:visited, .genreBtn a:active, .genreBtn a:hover {
    color: #333;
}
.genreBtnLink {
  display: flex;
  padding: 0 4px;;
  height: 5em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius : 8px;
  box-shadow: 0 1px 1px 0 rgb(0 0 0 / 50%);
  font-size: 14px;
}
.genreBtnTxt {
  font-size: 14px;
}
.arrival {
  display: block;
}
.arrivalBoxNumTxtDate {
  display: inline;
}
.arrivalBox {
  margin: 0 20px 0 0;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
}
.arrivalBox:last-child {
  margin: 0 20px 30px 0;
}
.arrivalBoxLink {
  text-align: left;
  display: flex;
  align-items: center;
}
.arrivalBoxLinkFirst {
  border-left: 10px solid #3b9aef;
  background-color: #f5f5f5;
}
.arrivalBoxLinkEnd {
  border-left: 10px solid #f45a07;
  background-color: #f5f5f5;
}
.arrivalBoxTxtMiddle {
  color: #333;
  font-size: 14px;
  padding: 16px 0 16px 6px;
  width: 26%;
  background-color: #eee;
  box-sizing: border-box;
}
.arrivalBoxTxtSub {
  display: block;
}
.arrivalBoxNum {
  font-size: 12px;
  padding: 16px 0 16px 6px;
}
.arrivalBoxNumTxt {
  color: #333;
}
.arrivalBoxNumLink {
  display: inline;
}
.contents-mb15 {
  margin-bottom: 15px;
}
.cellContents-border-bottom {
  border-bottom: 1px solid #ccc;
}
.arrow-l {
  display: block;
  position: relative;
  background: url(https://content.bookoffonline.co.jp/mbfiles/assets/material/arrow.png) no-repeat;
  background-position: center left 11px;
  background-size: 7px,auto,contain;
}
.cellContents-orderlist a {
  display: block;
  font-size: 14px;
  padding: 17px 15px;
  color: #003894;
}
.orderlist-top-right .cellContents-orderlist a {
  text-align: right;
}
.cellContents-orderlist-txtArea {
  padding: 0 16px;
}

.orderlist-top-upper a,
.orderlist-top-lower a {
 text-align: left;
}
.orderlist-top-upper .arrow-r,
.orderlist-top-lower .arrow-r {
 background-position: center left 11px;
}
/* promotionBanner START*/
.promotionBannerArea {
  padding: 15px 1rem;
}
.promotionBanner {
  margin: 0 auto 10px;
  max-width: 640px;
}
.promotionBanner a {
  display: block;
}
.promotionBannerImg {
  display: block;
  width: 100%;
  height: auto;
}
.promotionBannerMargin {
  margin: 0 auto;
}
.promotionBannerTxt {
  margin: 8px 0 0;
}
.promotionBannerTxt p {
  font-size: 12px;
  color: #333;
  text-align: left;
}
/* promotionBanner END*/
/* information__col START*/
.information__col {
  max-width: none;
}
/* information__col END*/


/* アプリスタートページ改修(NS_DESIGN-1317) start */
.sectionHeading--borderLeft{
  font-size: 14px;
  font-weight: normal;
}

.sectionHeadingContainer__sub  {
	margin-left: 18px;
}

.sectionHeadingContainer__sub .moreLink{
	margin-right: 26px;
}
.sectionHeading--borderLeft::before {
  content: "";
  position: absolute;
  top: 25%;
  left: 0;
  bottom: 0;
  width: 5px;
  height: 18px;
  border-radius: 4px;
  background-color: #003894;
}

.bookContent--recommend .border-top,
.promotionBannerArea.border-top{
    border: none;
}

.bookContent--recommend .contents__inner .sectionHeadingContainer .sectionHeading{
    display:none;
}

/* header */
.header__wrap {
    background-color: #fff;
}
.header__search {
    margin: 0;
    width: 100%;
    background-color: #fff;
    max-width: 100%;
}
.header__searchWrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0 14px 0 18px;
}
.header__searchInner {
    flex: 1 1 auto;
    margin-right: 14px;
}
/* #zsSearchFormInput,
#zsSearchFormInput::placeholder {
    font-size: 14px;
} */
.header__searchHistory,
.header__searchSuggest {
    left: -18px;
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
}
.header__searchCategoryList {
    display:none;
}
.header__searchCategoryList {
    display: block;
    flex: 0 0 auto;
    font-size: 12px;
}
.header__searchCategoryListBtn {
    padding: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}
.header_searchCategoryListTxt {
    font-size: 12px;
    color: #666;
}
.modal__title {
  color: #333;
  text-align: left;
}
.modalCategory__heading {
    text-align: left;
}
.modalCategory__link {
  cursor: pointer;
}
.modalSearchRefinement {
    padding: 0;
    max-height: 100%;
}
.modalCategory__link--top {
    padding-top: 0;
    font-size: 20px;
    font-weight: bold;
    color: #003894;
}
/* 値下げ/入荷 */
/*リスト下余白*/
.information__col .information__list{
    padding-bottom: 40px;
    display: flex;
    flex-direction: column-reverse;
}
.js-dlpo-app-contents-a { display: none;}
/* アプリスタートページ改修(NS_DESIGN-1317) end */
.topNews {
  text-align: left;
  border-top: solid 1px #EBEBEB;
  border-bottom: solid 1px #EBEBEB;
  padding: 20px 0;
}

/*検索窓デザイン改修(NS_DESIGN-1923)start*/
@media only screen and (max-width: 767px) {
.header__searchInner:before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border:solid 1px #003894;
    border-radius: 30px;
    background: #fff;
    z-index: 1;
    pointer-events: none;
}
#zsSearchFormInput{
  color:#003894;
}
.header__searchInner input::placeholder{
  color: #003894;
}
.header__searchCategoryListBtn{
  border:none;
/*border-radius: 10px;*/
  background-color:#ffffff;
  padding: 4px;
}
.header_searchCategoryListTxt{
  font-size: 12px;
  color: #666;
}
/*検索窓デザイン改修(NS_DESIGN-3085)end*/
}