@charset "utf-8";

section{
	width: min(95%,1000px);
	margin:0 auto;
}

main .webbook{
	width:min(100%,200px);
	height: 50px;
	display: flex;
	background: #67A233;
	background: -webkit-linear-gradient(bottom, #67A233 0%, #74B43A 100%);
	background: -o-linear-gradient(bottom, #67A233 0%, #74B43A 100%);
	background: linear-gradient(to top, #67A233 0%, #74B43A 100%);
	color:#fff;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding:5px 8px;
	font-weight: 700;
	text-decoration: none;
	line-height: normal;
	border-radius: 5px;
}

main .webbook span{
	width:100%;
	display: block;
	border-bottom:1px solid #fff;
	position: relative;
	padding-bottom:2px;
}


main .webbook span::after{
	content: '';
	width:10%;
	height: 10%;
	display: block;
	/*background-color: #fff;*/
	border-bottom:2px solid #fff;
	 transform: rotate(45deg);
	position: absolute;
	bottom:calc(25% - 2px);
	right:calc( (5% - 2px) * -1);
}


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

	レスポンシブ

--------------------------------------*/
@media screen and (min-width: 431px){
	main .webbook{
		 -webkit-transition: all .3s;
	  transition: all .3s;
	}

	main .webbook:hover{
			opacity: 0.8;
	}
}
/*--------------------


	最新刊

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

#newvol{
	display: flex;
	justify-content: center;
	align-items: center;
	gap:30px 10px;
	margin-bottom:50px;
}

#newvol .photo{
	width:300px;
	line-height: 0;
}

#newvol .photo img{
	width:100%;
	height: auto;
}

#newvol .text{
	display: inline-block;
	margin-left:30px;
}

main #newvol .text h2{
	line-height: normal;
	/*background-color: #F4F2EB;*/
	font-size:2rem;
	font-weight: 700;
}

main #newvol .text .year{
	font-size:1rem;
}

main #newvol .text ul{
	margin-top:30px;
}

main #newvol .text li{
	margin-bottom:10px;
}
main #newvol .webbook{
	margin-top:30px;
}


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

	レスポンシブ

--------------------------------------*/
@media screen and (max-width: 430px){
	#newvol{
		display: block;
		text-align: center;
	}
	
	#newvol .photo{
		width:min(100%,150px);
		margin:0 auto 20px auto;
	}
	
	#newvol .text{
		margin-left:0;
		text-align: left;
	}
	
	main #newvol .text h2{
		text-align: center;
		font-size:1.2rem;
		line-height: normal;
		height: auto!important;
	}
	
	main #newvol .text ul{
		margin-top:10px;
	}
	main #newvol .text li{
		margin-bottom: 5px;
		line-height: normal;
	}
	
	main #newvol .webbook{
		margin-top:20px;
	}
}

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


	バックナンバー

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

#backno ul{
	margin-top:30px;
	width:min(100%,1000px);
	display: flex;
	justify-content: space-between;
	gap:10px;
	flex-wrap: wrap;
}

#backno li{
	width:180px;
}
#backno li a{
	width: 100%;
	border:1px solid #ddd;
	border-radius: 5px;
	font-sioze:0.8rem;
	line-height: 1;
	padding:5px;
	font-weight: 500;
	display: block;
	cursor: pointer;
}

#backno li .photo{
	width:100%;
	line-height: 0;
	
}

#backno li img{
	width:100%;
	height: auto;
}

#backno li p{
	font-size:0.8rem;
}

#backno li .link span{
	width:100%;
	display: flex;
	justify-content: space-between;
	font-size:0.8rem;
	padding:0 10px 0 3px;
	text-align: left;
	line-height: 1;
}

#backno li .link span::after{
	 font: var(--fa-font-solid); 
	content:"\f0da\f0da\f0da"; 
	text-decoration: none;
	color: rgba(149,149,149,1.00);
}

#backno li a:hover{
	color:#335C0E;
}

#backno li .link span::after{
	color:#335C0E;
}

#backno li a:hover img{
	opacity: 0.6;
}


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

	レスポンシブ

--------------------------------------*/
@media screen and (max-width: 430px){
	#backno ul{
		gap:10px 0;
		justify-content: space-around;
	}
	
	#backno ul::after{
		content:'';
		width:calc(50% - 10px);
	}
	#backno li{
		width:calc(50% - 10px);
	}
}