@charset "UTF-8";
/* CSS Document */
/*@import url(http://fonts.googleapis.com/css?family=Lato:400,700,900,300,100);*/

/* --------------------------------------------------------------


                      reset


-----------------------------------------------------------------*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
   margin:0;
   padding:0;
}
table {
   border-collapse:collapse;
   border-spacing:0;
}
fieldset,img {
   border:0;
}
address,caption,cite,code,dfn,em,th,var {
   font-style:normal;
   font-weight:normal;
}
ol,ul {
   list-style:none;
}
caption,th {
   text-align:left;
}
h1,h2,h3,h4,h5,h6 {
   font-size:100%;
   font-weight:normal;
   margin: 0;
   padding: 0;
}
h1 img,h2 img,h3 img,h4 img{
   display: block;
   border: none;
   margin: 0;
   padding: 0;
}
q:before,q:after {
   content:'';
}
abbr,acronym {
   border:0;
}

/* フォントサイズ
--------------------------------------------------------------- */
.f10 { font-size: 10px; }
.f12 { font-size: 12px; }
.f14 { font-size: 14px; }
.f16 { font-size: 16px; }
.f18 { font-size: 18px; }
.f20 { font-size: 20px; }
.f21 { font-size: 21px; }
.f24 { font-size: 24px; }
.f32 { font-size: 32px; }

/* フォントスタイル
--------------------------------------------------------------- */
.bold { font-weight: bold; }
.red { color: #e00; }
.white { color: #fff; }
.t-left{ text-align:left;}
.t-center{ text-align:center;}
.t-right{ text-align:right;}

/* レイアウト
--------------------------------------------------------------- */
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}
.mt25{margin-top: 25px;}
.mt30{margin-top: 30px;}
.mt35{margin-top: 35px;}
.mt40{margin-top: 40px;}
.mt45{margin-top: 45px;}
.mt50{margin-top: 50px;}

.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb25{margin-bottom: 25px;}
.mb30{margin-bottom: 30px;}
.mb35{margin-bottom: 35px;}
.mb40{margin-bottom: 40px;}
.mb45{margin-bottom: 45px;}
.mb50{margin-bottom: 50px;}

.pt10{padding-top: 10px;}
.pt15{padding-top: 15px;}
.pt20{padding-top: 20px;}
.pt25{padding-top: 25px;}
.pt30{padding-top: 30px;}
.pt35{padding-top: 35px;}
.pt40{padding-top: 40px;}
.pt45{padding-top: 45px;}
.pt50{padding-top: 50px;}

.pb10{padding-bottom: 10px;}
.pb15{padding-bottom: 15px;}
.pb20{padding-bottom: 20px;}
.pb25{padding-bottom: 25px;}
.pb30{padding-bottom: 30px;}
.pb35{padding-bottom: 35px;}
.pb40{padding-bottom: 40px;}
.pb45{padding-bottom: 45px;}
.pb50{padding-bottom: 50px;}



/* --------------------------------------------------------------


                      bace


-----------------------------------------------------------------*/

body {
   color:#484848;
   line-height: 1.7;
   font-size: 12px;
   width:100%;
   height:auto;
   font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

a {
   color:#fb6295;
   text-decoration: underline;
}
a:hover {
   color:#fb6295;
   text-decoration: none;
}

p {
   margin:0;
}


dl dd,
ul li {
   line-height: 1.2em;
}

/* -----------------------------------------------
input
--------------------------------------------------*/

input[type=radio], input[type=checkbox] {
  display: none;
}

.radio, .checkbox {
  box-sizing: border-box;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  margin: 0 0px 0px 0;
  padding: 0px 10px 2px 18px;
  border-radius: 8px;
  vertical-align: middle;
  cursor: pointer;
}
.radio:hover, .checkbox:hover {
  /*background-color: #e2edd7;*/
}
.radio:hover:after, .checkbox:hover:after {
  /*border-color: #53b300;*/
}
.radio:after, .checkbox:after {
  -webkit-transition: border-color 0.2s linear;
  transition: border-color 0.2s linear;
  position: absolute;
  top: 50%;
  left: 0px;
  display: block;
  margin-top: -10px;
  width: 12px;
  height: 12px;
  border: 1px solid #bbb;
  border-radius: 2px;
  content: '';
}

.radio:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 0px;
  display: block;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #e85377;
  content: '';
  opacity: 0;
}
input[type=radio]:checked + .radio:before {
  opacity: 1;
}

.checkbox:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 8px;
  left: 3px;
  display: block;
  margin-top: -7px;
  width: 5px;
  height: 9px;
  border-right: 3px solid #e85377;
  border-bottom: 3px solid #e85377;
  content: '';
  opacity: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
input[type=checkbox]:checked + .checkbox:before {
  opacity: 1;
}

/* -----------------------------------------------
common
--------------------------------------------------*/
.container{}
.inner{
   position: relative;
   zoom: 1;
   overflow: hidden;
}
.inner:after{
   content: ".";
   display: block;
   clear: both;
   height: 0;
   font-size: 0;
   visibility: hidden;
}

/*banner*/
.banner-area{}
.banner-area ul,
.banner-area ul li,
.banner-area ul li img{
   display: block;
}
.banner-area ul{
   overflow: hidden;
   zoom: 1;
}
.banner-area ul li a:hover img{
   opacity:0.8;
   filter: alpha(opacity=80);
}

/* header
--------------------------------------------------------------- */
#header{
   position: relative;
   z-index: 100;
}
#header .logo,
#header .logo a{
   height: 103px;
}
#header .logo{
   background: url(../../img/sp/head.png) no-repeat center top;
   -webkit-background-size: 100% auto;
   background-size: 100% auto;
}
#header .logo a{
   display: block;
   text-indent: -9999px;
   overflow: hidden;
}
/* --- navi（640×159 / 4列×2段）--- */
#header .navi{
  /* height:159px; は使わない */
  width: 100%;
  aspect-ratio: 640 / 159;                 /* 画像比率で高さを自動算出 */
  position: relative;
  overflow: hidden;
  zoom: 1;
  background: url(../../img/sp/navi.png) no-repeat center top;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;              /* 要素サイズと完全一致 */
}

/* クリック領域（背景全面に重ねる） */
#header .navi ul{
  position: absolute;
  inset: 0;                                 /* top/right/bottom/left:0 */
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;                           /* 2段に折り返し */
  font-size: 0;                              /* 余計な隙間防止 */
}

#header .navi ul li{
  width: 25%;                                /* 4カラム等分 */
  height: 50%;                               /* 2段等分   */
}

#header .navi ul li a{
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
  overflow: hidden;
}

/* パンくずの位置（必要ならここを微調整） */
#header .path{
  position: absolute;
  left: 420px;
  top: 130px;
}


/* contents
--------------------------------------------------------------- */
#contents{
   overflow: hidden;
   zoom: 1;
}
.contents-bg{}

/*----------------------
side
-----------------------*/
/*news*/
#news{}
#news .title{
   color: #070707;
   font-size: 14px;
   font-weight: bold;
   background: #dddddd;
   line-height: 1;
   padding: 7px 10px;
}
/*#news .title{
   height: 25px;
   text-indent: -9999px;
   overflow: hidden;
   background: url(../../img/sp/title-news.png) no-repeat;
   -webkit-background-size: 100% auto;
   background-size: 100% auto;
}*/
#news dl{}
#news dl dt,
#news dl dd{
   font-size: 9pt;
   line-height: 1.7;
}
#news dl dt,
#news dl dd{
   padding-left: 10px;
   padding-right: 10px;
}
#news dl dt{
   color: #000;
   margin-top: 10px;
}
#news dl dd{
   padding-bottom: 10px;
   border-bottom: 2px solid #ddd;
}
#news .more{
   text-align: right;
   padding: 4px 10px;
}


/*search*/
#common-search{}
#common-search .title{
   color: #070707;
   font-size: 14px;
   font-weight: bold;
   background: #dddddd;
   line-height: 1;
   padding: 7px 10px;
}
#common-search .keyword,
#common-search .category .term{
   padding: 10px;
}
#common-search .keyword .title,
#common-search .category .title{
   background: none;
   padding: 0;
   margin-bottom: 9px;
}
#common-search .keyword{
   margin-top: 7px;
}
#common-search .keyword .text{
   width: 230px;
   height: 39px;
}
#common-search .keyword .submit{
   width: 45px;
   vertical-align: bottom;
}
#common-search .category{
   padding-top: 0;
}
#common-search .category .term{
   border-top: solid 1px #bbb;
}
#common-search .category .btn{
   text-align: center;
}
#common-search .category .btn .submit{
   width: 300px;
   height: auto;
}


/*archive*/
#archive{
   margin-top: 20px;
}
#archive .title{
   color: #070707;
   font-size: 14px;
   font-weight: bold;
   background: #dddddd;
   line-height: 1;
   padding: 7px 10px;
}
#archive ul li{
   font-size: 12px;
   margin-top: 12px;
   padding-bottom: 10px;
   border-bottom: 2px dotted #9d9d9d;
}
#archive ul li:last-child{
   border-bottom: none;
}

/*category*/
#category{
   margin-top: 20px;
}
#category .title{
   height: 32px;
   text-indent: -9999px;
   overflow: hidden;
   background: url(../../img/sp/side-category-title.png) no-repeat;
}
#category ul li{
   margin-top: 12px;
   padding-bottom: 10px;
   border-bottom: 2px dotted #9d9d9d;
}

/*pager*/
.pager{
   font-size: 18px;
   text-align: left;
   background-color: #af8e42;
}
.pager .wp-pagenavi span,
.pager .wp-pagenavi a{
   display: inline-block;
   padding: 3px 13px;
   border-right: solid 1px #e2c364;
}
.pager .wp-pagenavi a{
   color: #fff;
}


/* footer
--------------------------------------------------------------- */
#footer{
   height: 44px;
   overflow: hidden;
   zoom: 1;
   border-top: solid 2px #ddd;
}
#footer .copyright{
   color: #ddd;
   font-size: 14px;
   text-align: center;
   margin-top: 10px;
}

/*banner*/
#foot-banners{}
#foot-banners ul{
   overflow: hidden;
   zoom: 1;
   padding-left: 10px;
}
#foot-banners ul li,
#foot-banners ul li img{
   width: 145px !important;
}
#foot-banners ul li{
   float: left;
   margin-top: 10px;
   margin-right: 10px;
}
#foot-banners ul li img{
   height: auto !important;
}

/*sns-btns*/
.sns-btns{
   display: inline;
}
.sns-btns li{
   vertical-align: top;
   display: inline-block;
}

/*foot-area*/
.foot-area{
   margin-top: 10px;
   padding-top: 15px;
   padding-bottom: 10px;
   border-top: solid 2px #ddd;
}
.foot-area .sns-btns{
   display: block;
   text-align: center;
}
.foot-area .btn-top{
   margin-top: 8px;
}
.foot-area .btn-top a{
   display: block;
   width: 200px;
   height: 42px;
   text-indent: -9999px;
   overflow: hidden;
   background: url(../../img/sp/btn-top.png) no-repeat center center;
   -moz-background-size:  200px auto;
   -webkit-background-size: 200px auto;
   background-size: 200px auto;
   margin: auto;
}
.foot-area .btn-pagetop{
   margin-top: 8px;
}
.foot-area .btn-pagetop a{
   display: block;
   width: 150px;
   height: 42px;
   line-height: 42px;
   color: #fff;
   font-size: 13px;
   text-align: center;
   text-decoration: none;
   background-color: #363636;
   margin: auto;
}


/*----------------------
books
-----------------------*/
#new-items{}
#new-items .title{
   height: 39px;
   text-indent: -9999px;
   overflow: hidden;
   background: url(../../img/sp/books-title-new.png) no-repeat;
   -webkit-background-size: 100% auto;
   background-size: 100% auto;
}
.books-container{
   width: 100%;
   overflow: hidden;
}
.books-container:after{
   content: ".";
   display: block;
   clear: both;
   height: 0;
   font-size: 0;
   visibility: hidden;
}
.books-container .book-item:after{
   content: ".";
   display: block;
   clear: both;
   height: 0;
   font-size: 0;
   visibility: hidden;
}
.books-container .book-item{
   padding: 15px 10px;
   border-bottom: solid 2px #ddd;
}

.books-container .book-item .name .icon{
   width: 100px;
   height: 17px;
   background-repeat: no-repeat;
   background-position: center center;
   -webkit-background-size: 100px auto;
   background-size: 100px auto;
   margin-bottom: 5px;
}
.books-container .book-item .name .icon.bunko{background-image: url(../../img/sp/book-icon-bunko.png);}
.books-container .book-item .name .icon.books{background-image: url(../../img/sp/book-icon-books.png);}

.books-container .book-item .name .title{
   height: auto !important;
   text-indent: 0px !important;
   overflow: visible !important;
   background: none !important;
   color: #e85377;
   font-size: 15px;
   margin-top: 0;
}
.books-container .book-item .name .sub-title{
   color: #e85377;
   font-size: 9px;
   padding-bottom: 10px;
}
.books-container .book-item .name .title a,
.books-container .book-item .name .sub-title a{
   color: #e85377;
}

.books-container .book-item .image{}
.books-container .book-item .image .thumb img{
   display: block;
   width: 300px;
   height: auto;
}
.books-container .book-item .detail{
   width: 300px;
   line-height: 1.3;
   margin: auto;
}
.books-container .book-item .detail .main-sub-title{
   color: #e85377;
   font-size: 8px;
}

.books-container .book-item .detail .info{
   margin-top: 12px;
}

.books-container .book-item .detail .exp{
   font-size: 12px;
   margin-top: 12px;
}
.books-container .book-item .detail .exp .main-copy{
   color: #000;
   font-size: 15px;
}
.books-container .book-item .detail .exp .sub-copy{

}
.books-container .book-item .detail .exp .description{
   margin-top: 8px;
}



.books-container .book-item .btns{
   clear: both;
   margin-left: 0px;
   padding-top: 10px;
   margin-top: 0px;
}
.books-container .book-item .btns ul,
.books-container .book-item .btns ul li,
.books-container .book-item .btns a{
   display: block;
}
.books-container .book-item .btns ul{
   overflow: hidden;
   zoom: 1;
}
.books-container .book-item .btns ul,
.books-container .book-item .btns ul li,
.books-container .book-item .btns ul li a{
   height: 40px;
}
.books-container .book-item .btns ul li,
.books-container .book-item .btns ul li a{
   width: 90px;
}
.books-container .book-item .btns ul li{
   float: left;
   margin-right: 10px;
}
.books-container .book-item .btns ul li:last-child{
   margin-right: none;
}
.books-container .book-item .btns ul li a{
   text-indent: -9999px;
   overflow: hidden;
   background-repeat: no-repeat;
   background-position: left top;
   -webkit-background-size: 99px auto;
   background-size: 90px auto;
}
.books-container .book-item .btns a:hover{
   opacity:0.8;
   filter: alpha(opacity=80);
}
.books-container .book-item .btns .trial a{background-image: url(../../img/sp/book-list-btn-mini-trial.png);}
.books-container .book-item .btns .amazon a{background-image: url(../../img/sp/book-list-btn-mini-amazon.png);}
.books-container .book-item .btns .bookwalker a{background-image: url(../../img/sp/book-list-btn-mini-bookwalker.png);}

.books-container .book-item .btns .btn-detail{
   width: 405px;
   overflow: hidden;
   zoom: 1;
   margin-top: 10px;
}
.books-container .book-item .btns .btn-detail a{
   float: right;
   width: 209px;
   height: 45px;
   text-indent: -9999px;
   overflow: hidden;
   background: url(../../img/sp/books-btn-detail.png) no-repeat;
}

/*book type2*/
.books-container.type2{
   background: url(../../img/sp/books-list-bg-type2.png) repeat-y center top;
}
.books-container.type2 .book-item{
   float: left;
   width: 50%;
   padding: 0;
   border-bottom: none;
}
.books-container.type2 .book-item .inner{
   padding: 10px;
}
.books-container.type2 .book-item .image img{
   width: 100%;
}
.books-container.type2 .book-item .name .icon{
   width: 140px;
   height: 17px;
   background-repeat: no-repeat;
   background-position: center center;
   -webkit-background-size: 140px auto;
   background-size: 140px auto;
   margin-top: 5px;
}
.books-container .book-item .name .icon.bunko{background-image: url(../../img/sp/book-icon-large-bunko.png);}
.books-container .book-item .name .icon.books{background-image: url(../../img/sp/book-icon-large-books.png);}

.books-container.type2 .book-item .name .sub-title{
   padding-bottom: 0;
}

.books-container.type2 .book-item .detail{
   width: auto;
}

.books-container.type2 .book-item .btns ul{
   height: auto;
}
.books-container.type2 .book-item .btns ul li,
.books-container.type2 .book-item .btns ul li a{
   height: 35px;
}
.books-container.type2 .book-item .btns ul li,
.books-container.type2 .book-item .btns ul li a{
   width: 140px;
}
.books-container.type2 .book-item .btns ul li{
   float: none;
   margin-right: 0px;
   margin-top: 5px;
}
.books-container.type2 .book-item .btns ul li:last-child{
   margin-right: none;
}
.books-container.type2 .book-item .btns ul li a{
   text-indent: -9999px;
   overflow: hidden;
   background-repeat: no-repeat;
   background-position: left top;
   -webkit-background-size: 140px auto;
   background-size: 140px auto;
}
.books-container.type2 .book-item .btns a:hover{
   opacity:0.8;
   filter: alpha(opacity=80);
}
.books-container.type2 .book-item .btns .trial a{background-image: url(../../img/sp/book-list-btn-middle-trial.png);}
.books-container.type2 .book-item .btns .amazon a{background-image: url(../../img/sp/book-list-btn-middle-amazon.png);}
.books-container.type2 .book-item .btns .bookwalker a{background-image: url(../../img/sp/book-list-btn-middle-bookwalker.png);}

.books-container.type2 .clear{
   clear: both;
   border-top: solid 1px #bbb;
}

/*book list*/
.books-container .list{
   background: none !important;
   padding-bottom: 10px !important;
}
.books-container .list .detail{
   float: none !important;
   width: 100% !important;
}
.books-container .list .detail .title a{
   color: #e85377;
}
.books-container .list .detail .info{
   margin-top: 0px !important;
   padding-bottom: 0px !important;
}
.books-container .list .detail .info .date{
   font-size: 10px;
}

#contents .banner-area{}
#contents .banner-area ul,
#contents .banner-area ul li,
#contents .banner-area ul li a{
   display: block;
}
#contents .banner-area ul li{
   margin-top: 10px;
}
#contents .banner-area ul li img{
   width: 300px;
   height: auto;
   margin: auto;
}

#next-items{
   margin-top: 0px;
}
#next-items .title{
   height: 39px;
   text-indent: -9999px;
   overflow: hidden;
   background: url(../../img/sp/books-title-next.png) no-repeat;
   -webkit-background-size: 100% auto;
   background-size: 100% auto;
}



.book-item-footer{
   height: 25px;
   text-indent: -9999px;
   overflow: hidden;
   background: url(../../img/sp/books-detail-foot-bg.png) no-repeat;
   -moz-background-size:  100% auto;
   -webkit-background-size: 100% auto;
   background-size: 100% auto;
   margin-top: 10px
}
.page-end-link{
   text-align: center;
   padding: 8px;
}