@charset "UTF-8";

#pickuppage #header-btn{
	margin-right:0;
	padding-right:10px;
	}

#pickuppage .C{
	width:950px;
	margin:10px auto;
	background:#fff url(/frontend/pc/images/pickup_beta_bg.png) top left repeat fixed;
	}

#pickuppage .C h3{
	top:-10px;
	margin-top:-10px;
	}

#genrenavi {
	width:930px;
	margin:40px auto 0 auto;
	background-color:#fff;
	}

#genrenavi ul{
	margin:0 auto;
	padding:5px 25px;
	}

#genrenavi li{
	float:left;
	top:-42px;
	margin-top:-42px;
	margin-left:0;
	margin-right:0;
	margin-bottom:0;
	padding:0;
	}

#genrenavi a{
	display:block;
	width:73;
	height:37;
	padding-bottom:42px;
	}

.lovepage #genrenavi li.love a,
#genrenavi li.love a:hover{
	background:url(../images/genre01_bottom.gif) bottom center no-repeat;
	}

.mysterypage #genrenavi li.mystery a,
#genrenavi li.mystery a:hover{
	background:url(../images/genre02_bottom.gif) bottom center no-repeat;
	}

.essaypage #genrenavi li.essay a,
#genrenavi li.essay a:hover{
	background:url(../images/genre03_bottom.gif) bottom center no-repeat;
	}

.fantasypage #genrenavi li.fantasy a,
#genrenavi li.fantasy a:hover{
	background:url(../images/genre04_bottom.gif) bottom center no-repeat;
	}

.friendpage #genrenavi li.friend a,
#genrenavi li.friend a:hover{
	background:url(../images/genre05_bottom.gif) bottom center no-repeat;
	}

.nonficpage #genrenavi li.nonfic a,
#genrenavi li.nonfic a:hover{
	background:url(../images/genre06_bottom.gif) bottom center no-repeat;
	}

.horrorpage #genrenavi li.horror a,
#genrenavi li.horror a:hover{
	background:url(../images/genre07_bottom.gif) bottom center no-repeat;
	}

.historypage #genrenavi li.history a,
#genrenavi li.history a:hover{
	background:url(../images/genre08_bottom.gif) bottom center no-repeat;
	}

.comedypage #genrenavi li.comedy a,
#genrenavi li.comedy a:hover{
	background:url(../images/genre09_bottom.gif) bottom center no-repeat;
	}

.fairypage #genrenavi li.fairy a,
#genrenavi li.fairy a:hover{
	background:url(../images/genre10_bottom.gif) bottom center no-repeat;
	}

.poetrypage #genrenavi li.poetry a,
#genrenavi li.poetry a:hover{
	background:url(../images/genre11_bottom.gif) bottom center no-repeat;
	}

.otherpage #genrenavi li.other a,
#genrenavi li.other a:hover{
	background:url(../images/genre12_bottom.gif) bottom center no-repeat;
	}


#bookBlock{
	width:930px;
	margin:0 10px 20px 10px;
	padding-bottom:25px;
	background-color:#fff;
	}

.bookBlockList{
	float:left;
	width:288px;	
	margin:10px;
	border:1px solid #ccc;
	background-color:#fff;
	border-radius:5px;
	}
	
#pickuppage #bookBlock dl{
	display: table-cell;
	margin:15px 5px;
	padding:10px 10px 10px 30px;
	height:10em;
	vertical-align:middle;
	border-radius:5px;
	}

.lovepage #bookBlock dl{background:#fff url(../images/li01.gif) 15px center no-repeat;}
.mysterypage #bookBlock dl{background:#fff url(../images/li02.gif) 15px center no-repeat;}
.essaypage #bookBlock dl{background:#fff url(../images/li03.gif) 15px center no-repeat;}
.fantasypage #bookBlock dl{background:#fff url(../images/li04.gif) 15px center no-repeat;}
.friendpage #bookBlock dl{background:#fff url(../images/li05.gif) 15px center no-repeat;}
.nonficpage #bookBlock dl{background:#fff url(../images/li06.gif) 15px center no-repeat;}
.horrorpage #bookBlock dl{background:#fff url(../images/li07.gif) 15px center no-repeat;}
.historypage #bookBlock dl{background:#fff url(../images/li08.gif) 15px center no-repeat;}
.comedypage #bookBlock dl{background:#fff url(../images/li09.gif) 15px center no-repeat;}
.fairypage #bookBlock dl{background:#fff url(../images/li10.gif) 15px center no-repeat;}
.poetrypage #bookBlock dl{background:#fff url(../images/li11.gif) 15px center no-repeat;}
.otherpage #bookBlock dl{background:#fff url(../images/li12.gif) 15px center no-repeat;}


/* pager */
#pickuppage #paging{
	margin-top:20px;
	text-align:center;
	}

#pickuppage #paging ul{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 20px;
    box-sizing: border-box;
	}

#pickuppage #paging li{
    margin-bottom: 10px;
	margin-left: 5px;
	}

#pickuppage #paging li:first-child{
	margin-left: 0;
	}

#pickuppage #paging a{
	display:block;
	width:10px;
	height:10px;
	padding:7px 7px 12px 7px;	
	color:#fff;
	text-align:center;
	text-decoration:none;
	background-color:#333;
	}
	
#pickuppage #paging a:hover{
	background-color:#444;
	}
	
#pickuppage #paging .lt{
	border-top-left-radius:15px;
	border-bottom-left-radius:15px;
	}
	
#pickuppage #paging .gt{
	border-top-right-radius:15px;
	border-bottom-right-radius:15px;
	}