@charset "utf-8";

/* font-size */
html{font-size: 62.5%;}
#nav,
.small-navi{font-size: 16px}
.b_search_btn{font-size: 14px}
h1,h2,
h3,h4,
h5,h6,main dd,
#news p{font-style: normal;line-height:1.6em;margin-bottom:.9em}


h2{font-size:3.6rem; position: relative;font-weight: 700;line-height: 1em;}

#category-pickup li:first-child h4,
#category-pickup li:first-child + li:last-of-type h4,
#category-pickup li:first-child + li:nth-last-of-type(3) h4,.snsBox li i,
h3{font-size: 2.4rem;}
#category-pickup li:first-child + li:last-of-type h5,
#category-pickup li:first-child + li:nth-last-of-type(3) h5,
#category-pickup li:first-child h5,
h4{font-size: 2rem;}
h5{font-size: 1.7rem}
main ul,main dl,footer,
p{font-size: 1.6rem;margin-bottom:.8em;color: #000}


section {
    clear: both;
    width: 94%;
    margin: 0 auto 80px;
    max-width: 1000px;
}

a{display:block;}
img {
    vertical-align: bottom;
    max-width: 100%;
}


#category-pickup li:first-child p,
#category-pickup li:first-child + li:last-of-type p,
#category-pickup li:first-child + li:nth-last-of-type(3) p{font-size: 1.7rem;margin-bottom: .8em}
h6,
.bk_mn dd,
.text{font-size: 1.4rem;}
#news span{font-size: 1.2rem;}
#freespace li img{max-width:100%;}


@media screen and (min-width: 840px) {
h2{font-size: 4.2rem;}


}





/*shere*/
.snsBox{width:96%;max-width: 1000px; margin: 0 auto 40px}
.snsBox ul {
    display: flex;
    width: 200px;
    justify-content: space-between;
    align-items:center;
    font-size:12px;
}

.snsBox li a:before{
  position: relative;
  content: '';
  display: inline-block;
    width: 22px;
    height: 22px;
}

.snsBox li:nth-of-type(2) a::before{
  background: url("/common/images/v2/icon_x.svg?rd") no-repeat;
  background-size: contain;
  filter: brightness(0) saturate(100%) invert(31%) sepia(0%) saturate(1445%) hue-rotate(137deg) brightness(107%) contrast(90%);
}
.snsBox li:nth-of-type(3) a:before{
    background: url(/common/images/v2/books/sns-facebook.svg) no-repeat;
    background-size: contain;
filter: brightness(0) saturate(100%) invert(31%) sepia(0%) saturate(1445%) hue-rotate(137deg) brightness(107%) contrast(90%);
margin-left:4px}

.snsBox li:nth-of-type(4) a::before{
    background: url(/common/images/v2/books/sns-line-s.svg) no-repeat;
    background-size: contain;
filter: brightness(0) saturate(100%) invert(31%) sepia(0%) saturate(1445%) hue-rotate(137deg) brightness(107%) contrast(90%);
}
.snsBox li:nth-of-type(5) a::before {
    background: url(/common/images/v2/icon_note.svg) no-repeat;
    background-size: contain;
}
.snsBox li a{color: #5A5A5A;}
.snsBox li span  {
    display: none;
    font-size: 0.75rem;
}
/*main title*/
h1{text-align: center;position:relative; margin-bottom: 60px;padding-right: 30px}
h1 img{display: none}
h1 img.character{display: block; margin:  0 auto 0 28%;width:250px;height: auto}
h1::after{content:"";border-bottom:25px solid #ff3300;width:100%; display: block;bottom:-5px; z-index: -1;position:absolute}


@media screen and (min-width: 780px) {
h1 {height:160px;padding-right: 0; margin-bottom: 70px}
h1::after{bottom:0px}
h1 img{max-width: 240px;margin: 0 auto 50px;display: block}
h1 img.character{position: absolute;display: block;left: calc(40%);top: 0;}
}
@media screen and (min-width: 1000px) {

h1 img.character{position: absolute;display: block;left: calc(40%);top: 0;}

}


/*各見出し*/
section h2::before{display: block;content: '';}
#fair h2::before,
#category h2::before{position: absolute;left: 0;top: 0px;}

#category-pickup h2,
#news h2,
#ranking_sns .ranking-wp h2{display:flex;justify-content: center; webkit-box-pack: center;flex-wrap: wrap;/*width: 400px;*/margin: 0 auto 40px;}
#category-pickup>h2 span,
#news h2 span,
#ranking_sns .ranking-wp h2 span{display: block;text-align: center;font-size: 1.2rem;position: absolute;line-height: 1em;bottom: 4px;max-width: 200px;margin: 0 auto;left: 0;right: 0;width: 100%;padding-left: 100px;}



#category-pickup>h2::before{width: 98px;height: 66px;margin-right: 20px; background: url("/common/images/v1/bunko/title_pickup.png") no-repeat;background-size: contain;}


@media screen and (max-width: 300px) {
category-pickup>h2::before {width: 68px;height: 46px;margin-right: 10px;}
#category-pickup>h2 span,
#news h2 span,
#ranking_sns .ranking-wp h2 span{padding-left: 0px;}
}

#fair h2::before{height:125px;width: 90px; background: url("/common/images/v1/bunko/title_fair.png") no-repeat;background-size: contain;}
#fair h2{font-size:3.6rem; margin: 60px auto 35px;position: relative;padding: 54px 0 0 100px;width: 230px;height: 80px;}

#news h2::before{width: 130px;height: 68px;margin-right: 20px; background: url("/common/images/v1/bunko/title_news.png") no-repeat;background-size: contain;}
#news h2 span{width: 100px; padding-left: 150px; color:#000}

#category h2::before{width: 130px;height: 74px;background: url("/common/images/v1/bunko/title_newbooks.png") no-repeat;background-size: contain;}
#category h2{font-size:3.6rem;position:relative; margin:  0 auto 40px;padding: 22px 0 0 128px;width: 150px;}

#ranking_sns .ranking-wp h2::before{height:68px;width: 120px; background: url("/common/images/v1/bunko/title_ranking.png") no-repeat;background-size: contain;}
#ranking_sns .ranking-wp h2{width: 100%; max-width:380px;margin: 0 auto 40px;}
#ranking_sns .ranking-wp h2 span{right: 0;left: 0;margin: 0 auto 0 66px; padding-left: 72px;}
#twitter h2{position:relative; margin: 20px 0 0 0}
#twitter h2 img{position: absolute; width:150px; left: 0;right:0; margin: 0 auto;top: -40px;}

@media screen and (min-width: 780px) {
#ranking_sns .ranking-wp h2{margin:0 0 40px 0 ;justify-content: left;webkit-box-pack: left;}

}

@media screen and (min-width: 640px) {
#fair h2 br{ display:none}
#fair h2{width: 420px;padding: 65px 0 0 100px; }
}



/*pickup*/
section#category-pickup{width:100%}
#category-pickup li:first-child > a{text-align: center;background-size: cover;position: relative;overflow: hidden;z-index: 0;display: block;}
#category-pickup li:first-child > a::before {
    content: '';
    background: inherit;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
}

#category-pickup li{ display:flex;flex-wrap: wrap; justify-content: space-between; -webkit-box-pack: justify;background: #fafafa;padding:20px;margin-bottom:30px;}
#category-pickup li:first-child{background: none;padding:0;display:block;overflow: hidden}
#category-pickup li:first-child > a{margin-bottom:30px;height:330px;}
#category-pickup li:first-child img {width: auto;height:330px;}
#category-pickup li > a,
#category-pickup li img {width: auto;height:240px; position:relative; margin: 0 auto 30px}


#category-pickup li.media{position: relative;}
#category-pickup li.media::after {content: '';background: url("/common/images/v1/bunko/badge_media.png") no-repeat;background-size: contain;;height:60px;width:60px;position:absolute;top:0;display: block;text-align: center;left:20px;}
#category-pickup li:first-child.media::after {height:80px;width:80px; }

#category-pickup li .pickup-title{width:54%;max-width:480px;}
#category-pickup li:first-child .pickup-title{width:94%;max-width:none;margin: 0 auto}
.bk_mn{background: #fff;border:6px solid #055f96;float:right;width:96%; max-width:  250px; display:-webkit-box;display:justify-content: space-between; -webkit-box-pack: justify;align-items: center;-webkit-box-align: center;}
.bk_mn dd {width: 50%;line-height: 30px;text-align: center;margin-bottom:0;}
.bk_mn dd:nth-child(2){border-left:6px solid #055f96;}
.bk_mn dd {color: #ccc}
.bk_mn dd a{display: block;height:30px;}
.bk_mn dd a:hover{text-decoration: none; opacity: .6;background:#055f96;color: #fff }
.bk_mn dd a i{margin-right:.5rem }


/*ピックアップ2つの場合*/
#category-pickup li:first-child + li:nth-last-of-type(3),
#category-pickup li:first-child + li:last-of-type{background: none;padding:0;}
#category-pickup li:first-child + li:last-of-type  > a,
#category-pickup li:first-child + li:nth-last-of-type(3) > a{text-align: center;background-size: cover;position: relative;overflow: hidden;z-index: 0;display: block;width:100%}
#category-pickup li:first-child + li:last-of-type  > a::before,
#category-pickup li:first-child + li:nth-last-of-type(3) > a::before {
    content: '';
    background: inherit;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
}
#category-pickup li:first-child + li:last-of-type  > a,
#category-pickup li:first-child + li:nth-last-of-type(3) > a{margin-bottom:30px}
#category-pickup li:first-child + li:last-of-type img,
#category-pickup li:first-child + li:nth-last-of-type(3) img{width: auto;height:300px;}
#category-pickup li:first-child + li:last-of-type .pickup-title,
#category-pickup li:first-child + li:nth-last-of-type(3) .pickup-title{width:94%;max-width:none ;margin: 0 auto}



@media screen and (max-width: 540px) {
#category-pickup li .pickup-title{width:100%;max-width:480px;}

}

@media screen and (min-width: 540px) and (max-width: 1009px) {

#category-pickup li  > a::before {
    content: '';
    background: inherit;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
}

#category-pickup li:not(:first-child) > a{text-align: center;background-size: cover;position: relative;overflow: hidden;z-index: 0;display: block;width: 40%}
#category-pickup li{display:-webkit-box;display:}

}



@media screen and (min-width: 1030px) {
section{width: 100%;}

#category-pickup li:first-child.media::after {left:0px; }
#category-pickup li{width: 440px;display: inline-flex; margin: 0 0 40px 0}
#category-pickup li:first-child{width:460px; float:left;margin:0 40px 40px 0;padding:20px 0 0 14px}
#category-pickup li:first-child .pickup-title{width:100%;}

#category-pickup li:first-child  > a img {width: auto;height: 330px;}


/*ピックアップ1つの場合*/
#category-pickup li:only-of-type {float:none;display:-webkit-box;display:width:100%}

/*ピックアップ２つの場合*/
#category-pickup li:first-child + li:last-of-type{width: 480px;}
#category-pickup li:first-child + li:last-of-type .pickup-title{width: 100%;}


/*ピックアップ4つの場合*/
#category-pickup li:first-child + li:nth-last-of-type(3) {margin:0 0px 40px 0;}
#category-pickup li:first-child + li:nth-last-of-type(3) + li{margin:0 34px 40px 0;}

/*ピックアップ5つ以上の場合*/
#category-pickup li:nth-last-of-type(2) {margin:0 30px 40px 0;}
#category-pickup li:nth-last-of-type(4) {margin:0 30px 40px 0;}
#category-pickup li:nth-child(2){margin-top: 20px;margin-right:0}

  }




/*fair*/    
#fair ul{text-align: center}
#fair ul img{width:90%;height:auto; margin:0 auto 40px}

@media screen and (min-width: 840px) {
#fair ul{display:-webkit-box;display:justify-content: space-between; -webkit-box-pack: justify; }
#fair ul li{width: 48%; }
#fair ul li:only-of-type {width:100%}
#fair ul img{width: 100%; max-width:480px;height:auto}

}


/*news*/ 
#news dt{font-weight: bold;display:flex;display:-webkit-box; display: -webkit-box;align: start;justify-content: flex-start; -webkit-box-pack: start;}
#news span{color: #fff;text-align: center;font-weight: bold;border-radius: 4px;width:144px;display: inline-block;margin: 4px 4px 4px 8px;line-height: 1.8em;padding : 0 10px}
#news .feature {background-color: #A40E4C;}
#news .news{background-color: #202F55;}
#news .special{background-color: #313131;}
#news .review {background-color: #3d82ea;}
#news .columnessay {background-color: #d1473d;}
#news .interview {background-color: #d19d52;}
#news .mystery-ch {background-color: #3d82ea;letter-spacing: 0;padding: 0 5px; width: 160px;}
#news .books-online {background-color: #000;}
#news  .outset {background-color:#5cd17f}
#news  .event {background-color: #3291d1}
#news  .event-sch {background-color:#2C6BE8}
#news  .event-report {background-color:#2A37DE}
#news  .commentary {background-color:#D7A3A1}
#news  .tachiyomi {background-color:#269E4A}
#news  .sales {background-color:#e63331}
#news  .koukousei {background-color:#47c2d1}
#news  .media-release {background-color:#3d82ea}
#news  .bunshun-photo {background-color:#3d82ea}





#news p{text-align: right}

@media screen and (min-width: 840px) {
#news dl{display:flex;flex-wrap: wrap;}
#news dt{width:280px;justify-content: space-between; -webkit-box-pack: justify;}
#news dd{width:calc(100% - 300px); margin-left: 14px}
#news span{margin: 4px auto 8px 12px;}
}


/*新刊案内　category*/
#category{position:relative}
#category h2 + ul{display:-webkit-box;display:}
#category h2 + ul li{width:50%;margin-left: 3%;}
#category h2 + ul li a{ background:#055f96; color: #fff;height:40px;font-weight: bold;display: flex;justify-content: center; webkit-box-pack: center;align-items: center;-webkit-box-align: center;}
#category h2 + ul li:first-child{margin-left:0;}
#category h2 + ul li a:hover{text-decoration: none; opacity: .6;background:#055f96; }

/*新刊一覧*/
#category ul.book_list{display:flex; flex-wrap: wrap;width:94%;margin: 60px auto; }
#ranking  li img,
#category ul.book_list li img{width:100%;height: auto; border:1px solid #eeeeee;margin-bottom:8px}
#category ul.book_list li img:hover{opacity: 0.7}
#category ul.book_list li p{font-weight:bold;line-height: 1.2em;}
#category ul.book_list li span{display: block;font-weight:normal;margin-top: 4px;}
#category ul.book_list li{width:46%;margin-right:8%; margin-bottom: 40px}
#category ul.book_list li:nth-child(2n){margin-right: 0}


@media screen and (max-width: 360px) {
#category ul.book_list{max-width:280px;margin: 0 auto; }
#category ul.book_list li{width:130px;margin-right:calc(100% - 260px)}


}



@media screen and (min-width: 740px) {
#category h2{width: calc(100% - 130px);}
#category h2 + ul{position:absolute;top:20px;right:0;width:360px}
#category h2 + ul li{margin-left: 20px;}
#category ul.book_list{width:100%;}
#category ul.book_list li:nth-child(2n),
#category ul.book_list li{width: 30%;margin-right: 5%;}
#category ul.book_list li:nth-child(3n){margin-right: 0}
}



@media screen and (min-width: 1030px) {
#category ul.book_list li:nth-child(2n),
#category ul.book_list li:nth-child(3n),
#category ul.book_list li{width:208px; margin-right:56px}
#category ul.book_list li:nth-child(4n){margin-right: 0}


}



/*ランキング*/

#ranking{display:flex;flex-wrap: wrap;justify-content: space-between; -webkit-box-pack: justify;margin-bottom:80px}
#ranking li{width:45%; margin-bottom: 40px}
#ranking li.rank1{width:100%}
#ranking li.rank1 > a{max-width: 280px; margin: 0 auto}
#ranking h3{width:100%;text-indent:100%;white-space:nowrap;overflow:hidden;height:0;margin-bottom: 20px}
#ranking li.rank1::before{content:"";height:110px;width:130px; display: block;margin: 0 auto;background: url("/common/images/v1/bunko/ranking1.svg") no-repeat;background-size: contain;}
#ranking li.rank2::before,
#ranking li.rank3::before,
#ranking li.rank4::before,
#ranking li.rank5::before{content:"";height:50px;width:50px; display: block;margin: 0 auto;background-size: contain;}
#ranking li.rank2::before{background: url("/common/images/v1/bunko/ranking2.svg") no-repeat;}
#ranking li.rank3::before{background: url("/common/images/v1/bunko/ranking3.svg") no-repeat;}
#ranking li.rank4::before{background: url("/common/images/v1/bunko/ranking4.svg") no-repeat;}
#ranking li.rank5::before{background: url("/common/images/v1/bunko/ranking5.svg") no-repeat;}

#ranking li img{margin-bottom:10px}
#ranking h4 span,
#ranking p span{display:  block; font-weight: normal;margin-top: 4px;}
#ranking h4,
#ranking li:nth-child(n+2) p {font-weight: bold;line-height:1.2em}


#category-bunko .ranking-wp{width: 100%;}

#twitter{background:#f0f0f0;border-top: 22px solid #fff;position: relative;padding-bottom:20px;margin: 0 auto;}
#twitter .twitter_wrap{height:500px;overflow-y: scroll;padding:0 20px}
div.sns_icon{ background: #fff;padding: 20px 5px 4px;/*width: 215px;*/margin: 0 20px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px}
div.sns_icon h5{ margin: 0 auto 10px; text-align: center;}
div.sns_icon ul{display:-webkit-box;display:flex-wrap: wrap; justify-content: space-around;}
div.sns_icon ul i{margin-right: 8px;}

@media screen and (min-width: 640px) {
#ranking{ justify-content: space-between; -webkit-box-pack: justify;}
#ranking li{width: 23%;}
#ranking li.rank1{display:flex;flex-wrap: wrap; justify-content: space-between; -webkit-box-pack: justify;margin-bottom: 40px}
#ranking li.rank1 > a{width: 36%; max-width: 250px;margin: 0 auto 0 0;}
#ranking li.rank1 .rank1-title{width:60%;}
#twitter .twitter_wrap{height:840px;}

#twitter{padding-bottom: 20px;margin: 0 auto}
div.sns_icon{ width: calc(100% - 50px);margin: 0 20px; }

}

@media screen and (min-width:850px) {
#ranking{margin-bottom: 0}
#ranking_sns{display:flex;align-items: flex-start;}
#category-bunko .ranking-wp{margin-right: 3%; width:calc(100% - 295px)}
#ranking li > a{width: 100%;max-width:120px }
#twitter{width:30%;    max-width: initial !important;min-width: initial !important; margin:0}
div.sns_icon{ width: calc(100% - 65px);margin: 0 20px; }

}
@media screen and (min-width: 1030px) {
#category-bunko .ranking-wp{margin-right: 30px; width:calc(100% - 310px)}
#ranking li > a{width: 100%;max-width:160px }
#twitter{width:280px !important;max-width: inherit !important;min-width: inherit !important;}
}


footer{margin-top: 120px; margin-bottom: 0}

/*bannerスペース*/
#common-category-aside{display: block;margin:0 auto 50px;width: 96%}

.banner_area ul:not(.fixed_banner){ display:flex;justify-content: center; webkit-box-pack: center;margin-bottom: 40px;flex-wrap: wrap;}
.banner_area ul.fixed_banner{text-align:center;}
.banner_area ul.fixed_banner li:nth-child(2){display:flex;}
.banner_area ul.fixed_banner li{width:100%}
.banner_area ul li{width: 48%;text-align: center}
.banner_area ul li img{width: 90%;margin: 10px auto}

@media screen and (min-width: 640px) {
.banner_area ul:not(.fixed_banner),
.banner_area ul{    display: flex;  flex-wrap: wrap;justify-content: space-between; -webkit-box-pack: justify;margin-bottom: 40px}
.banner_area ul li{ width:18%;}
.banner_area ul.fixed_banner li:nth-child(2){display:block;}
.banner_area ul.fixed_banner li:nth-child(2) img{margin:0 auto}
.banner_area ul.fixed_banner li{width: 30%}

}
@media screen and (min-width:1030px) {
#common-category-aside{width:100%;max-width: 1000px}
.banner_area ul.fixed_banner {width:100%}
.banner_area ul li{ width:18%; margin-bottom:22px}
.banner_area ul li img{width: 100%; margin:0 auto}
.banner_area ul.fixed_banner li:nth-child(2){display:block;}
.banner_area ul.fixed_banner li{width: 30%}
}


footer{border-top: solid 60px #ff3300; position: relative}
footer a{display:inline;}
footer::before{content:"";height:120px;width:130px; position: absolute; margin: 0 auto;left:0; right:0;top:-165px;background: url("/common/images/v1/bunko/footer_bunko.svg") no-repeat;background-size: contain;}
#bottom-banner,
#bottom-menu{max-width: initial;}
footer section#bottom-menu{overflow: hidden}

@media screen and (min-width:1030px) {
footer::before{left: 40px; right: auto;}
}

@media screen and (min-width:1200px) {
footer::before{right: calc(50vw + 420px);left: auto;}

}

.pickup__btns{margin:16px 0 0;display:flex;justify-content:space-between;flex-wrap:wrap;}
.pickup__btns-link{display:block;color:#055F96;border:solid 1px #055F96;border-radius:10px;text-align:center;line-height:48px;height:48px;width:48%;box-sizing:border-box;font-size:16px;font-weight:bold;background-repeat:no-repeat;background-position: 23% 50%;padding-left:26px;}
.pickup__btns-link.--reading{background-image:url(/common/images/v2/books/icon-reading.svg);}
.pickup__btns-link.--detail{background-image:url(/common/images/v2/books/icon-book.svg);}
.pickup__btns.--single .pickup__btns-link.--detail{width:100%;}
.pickup__item:not(:first-child) .pickup__btns.--single .pickup__btns-link{background-position:30% 50%;}

@media screen and (min-width: 1024px){
  .pickup__item:not(:first-child) .pickup__btns-link {
    font-size: 14px;
    background-position: 15% 50%;
 }
}