@charset "utf-8";
/* booklist */
/* CSS Document */

.page-id-18 section{
	max-width:980px;
	padding: 0 10px;
	margin:auto;
}

.page-id-18 h2 {
	background: url(/wp-content/uploads/2016/07/main_h2_04.png) no-repeat;
	height: auto;
	background-position: bottom left;
	line-height: 130%;
	padding-bottom: 0px;
	}

.page-id-18 .pw{
	float:left;
}


.page-id-18 .mag{
	border-bottom: 1px solid #eee;
	clear:both;
	overflow:auto;
}

.page-id-18 .mag li{
	float:left;
	vertical-align:top;
	margin-right:5px;
	line-height:20px;
	margin-bottom: 5px;
	margin-top: 5px;
}

.page-id-18 .mag3{
	clear:both;
	overflow:auto;
	border-bottom: 1px solid #ccc;
}

.page-id-18 .mag3 li{
	float:left;
	vertical-align:top;
	margin-right:5px;
	line-height:20px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.page-id-18 .mag3 li a{
	border:1px solid #ccc;
	padding:0 5px;
	font-size:1.4rem;
	display:block;
}


.page-id-18 .mag li a{
	border:1px solid #ccc;
	padding:0 5px;
	font-size:1.4rem;
	display:block;
}

.page-id-18  h3{
	line-height:20px;
	clear:both;
	font-size: 1.3rem;
	color:#333;
	background:#f1f1f1;
	/* margin-bottom: 9px; */
	padding: 3px;
}


.page-id-18 #sort li{
	float:left;
	font-size:1.4rem;
	line-height:30px;
	margin: 10px 10px 0 0;
}

@media screen and (max-width: 680px){
	.page-id-18 #sort{
		float: left;
		clear:both;
		/* letter-spacing:-4px; */
}

	.page-id-18 #sort li{
		display:inline-block;
		float:inherit;
		letter-spacing:normal;
}
}

.page-id-18 .pw li{
	float:left;
	line-height:30px;
	margin:10px 10px;
	font-size:1.2rem;
}

.page-id-18 .pw li:first-child{
	margin-left:0;
}


.page-id-18 .pw li a{
	border:1px solid #ccc;
	padding:0 10px;

	display:block;
}

@media screen and (max-width: 680px){
	.page-id-18 .pw{
	/* float: left; */
	/* text-align:center; */
}

	.page-id-18 .pw li{
		display:inline-block;
		float:inherit;
		margin: 10px 10px;
}

}

.page-id-18 #mlist{
	display:inline-flex;
	display:-webkit-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	-webkit-flex-wrap:wrap;
	border-bottom: 1px solid #ccc;
}

.page-id-18 #mlist li{
	width:32.33%;
	margin:10px 1% 10px 0;
}

@media screen and (max-width: 680px){
	.page-id-18 #mlist li{
		width:48%;
		margin-bottom:20px;
}
}

@media screen and (max-width: 380px){
	.page-id-18 #mlist li{
		width:100%;
		margin-bottom:20px;
		border-bottom:1px solid #ccc;
}

	.page-id-18 #mlist li li{
		border:none;
}
}


.page-id-18 #mlist img{
	width:40%;
	display:block;
	border:1px solid #CCCCCC;
	float:left;
	margin:0 10px 10px 0;
}


.page-id-18 #mlist li ul{
	padding-left:40%;
}

@media screen and (max-width: 380px){
	.page-id-18 #mlist li ul{
	padding-left:45%;
}
}

.page-id-18 #mlist li li{
	width:inherit;
	margin:0;
	word-break:break-all;
}


.page-id-18 #mlist li li:nth-child(2){
	margin-top:0;

}

.page-id-18 #mlist li li:nth-child(3){
	margin-top: 5px;
	margin-bottom: 5px;
	line-height:130%;
}


.page-id-18 #mlist li li:nth-child(4){
	margin-bottom: 3px;
	font-size:1.1rem;
	font-weight:bold;
}



.page-id-18 #mlist li li:nth-child(2) a{
	font-size:1.1rem;

}

.page-id-18 #mlist li li:nth-child(3) a{
	font-weight:bold;
	font-size:1.4rem;
	color:#333;

}


@media screen and (max-width: 680px){
	.page-id-18 #mlist li li:nth-child(2) a{
	font-size:1.1rem;

}

.page-id-18 #mlist li li:nth-child(3) a{
	font-size:1.2rem;
	line-height:110%;

}
}


.page-id-18 .tameshi{
	padding:5px;
	color:#fff;
	font-weight:bold;
	text-align:center;
	margin-left:40%;
}

.page-id-18 .tameshi a{
	line-height:20px;
	width:80%;
	font-size:1.4rem;
	display:block;
	margin-left:10px;
	margin:auto;
	color:#333;
	border:1px solid #ccc;
	margin-top:5px;
}

@media screen and (max-width: 680px){
		.page-id-18 .tameshi {
			padding:0;
}
	
	.page-id-18 .tameshi a{
	line-height:30px;
	margin-top:5px;
}
}


.page-id-18 table th{
	font-size:1.2rem;
	font-weight:bold;
	padding:5px;
}

.page-id-18 #clear{
	float:right;
	font-size:1.2rem;
	margin:0 0 10px 10px;

}

@media screen and (max-width: 680px){
	.page-id-18 #clear{
		/* margin-top:10px; */
}
	
}

.page-id-18 #clear a{
	padding:0 10px;
	line-height:30px;
	background:#666;
	color:#fff;
	display:block;
	text-align:center;
	margin-top: 10px;
}


#magazine-select, #sort {
	font-size: 1.4rem;
	margin: 10px 10px 0 0;
	border:1px solid #ccc;
	background:#fff;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    background: transparent;
	padding-right:40px;
	background:url(/wp-content/uploads/2016/07/arrow.png) no-repeat;
	background-size:10px;
	background-position:right 10px center;
}

@media screen and (max-width: 680px){
	   #magazine-select, #sort {
		   width:100%;
		   line-height:40px;
		   height:40px;
	   }
}


#sort,
#magazine-select {
	float: left;

}

.sort-button {
	margin: 0 1rem;
}

.sort-button.active {
	color: #f8823c;
}

.clearfix {
	clear: both;
}