@charset "utf-8";
#listNav{
	width:min(96%,1100px);
	margin:0 auto;
	float:none;
}
#listNav span{color:#006039;}
body.category #listNav li a{opacity:0.5;}
.blogList{
	display:flex;
	justify-content:flex-start;
	flex-wrap:wrap;
	width:min(96%,1100px);
	margin:0 auto;
}
.blogList li{
	display:grid;
	text-align:left;
	font-weight:bold;
}
.blogList li figure{grid-area:dfg;}
.blogList li a{
	display:block;
	width:100%;
}
.blogList li a:hover{opacity:0.5;}
.blogList li[data-new] a{
	display:block;
	position:relative;
}
.blogList li[data-new] figure a:before{
	content:"";
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background-image:radial-gradient(rgba(0,0,0,0) 80%,rgba(0,0,0,0.05));
}
.blogList li[data-new] figure a:after{
	content:"";
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:url("../img/blog/new-icon.svg") no-repeat;
}
.blogList li time{
	grid-area:dtime;
	display:block;
	line-height:1.0;
	color:#006039;
}
.blogList li .blogTag{
	grid-area:dtag;
	display:block;
	font-weight:400;
	line-height:1.0;
	text-align:right;
}
.blogList li h3{
	grid-area:dttl;
	line-height:1.7222;
}
.blogList li h3 a{color:#333;}
.blogBox{
	max-width:1100px;
	display:grid;
	grid-template:"ctag ctag" auto "csec csec" auto "cpager cpager" auto / 1fr auto;
	margin:0 auto;
}
.catTag{
	width:100%;
	grid-area:ctag;
	display:flex;
	justify-content:flex-end;
	align-items:center;
	float:right;
	font-weight:bold;
	text-align:right;
	line-height:1.0;
}
.catTag li{display:inline-block;}
.catTag li+li{border-left:1px solid #006039;}
.blogAll{
	grid-area:csec;
	background:url("../img/blog/blog-bar.svg") no-repeat left top;
}
.blogHd{color:#006039;}
.blogHd time,
.blogHd .pTag{
	display:block;
	font-weight:bold;
	line-height:1.0;
}
.blogPageLink{
	grid-area:cpager;
	line-height:1.0;
	font-weight:bold;
}
.blogPageLink li,
.blogPageLink li a,
.blogPageLink li span{
	display:inline-block;
	line-height:1.0;
}
.blogPageLink li span{
	color:#006039;
	opacity:0.3;
}
.blogPageLink li[data-next]{border-left:1px solid #006039;}
#recomList{
	width:100%;
	background-color:#f5f7f6;
}
#recomList .blogList li{background-color:#fff;}
.blogArticles{
	width:100%;
	text-align:center;
}
.blogArticles .blogList{background:url("../img/blog/blog-bar.svg") no-repeat left top;}
body.category #pager{display:block;}
#pager ul.page-numbers{
	width:100%;
	display:flex;
	align-items:center;
}
.reLink a{border:1px solid #006039;}
@media (max-width:768.98px){
	.blogList li{
		width:146px;
		grid-template:"dfg" auto "dtime" auto "dttl" auto "dtag" 1fr / 100%;
	}
	.blogList li[data-new] figure a:after{
		background-position:right 0;
		background-size:14px auto;
	}
	.blogList li time{
		margin-top:19px;
		letter-spacing:1.8px;
		font-size:calc(10.666 / 16 * 1rem);
	}
	.blogList li h3{
		margin-top:7px;
		letter-spacing:0.6px;
		font-size:calc(14 / 16 * 1rem);/********sp upset************/
		line-height:1.9;
	}
	.blogList li .blogTag{
		margin-top:6px;
		font-size:calc(10.666 / 16 * 1rem);
		letter-spacing:1px;
		text-align:left;
	}
	#pager{margin-top:142px;}
	#pager ul.page-numbers{justify-content:center;}
	.blogBox{
		width:84vw;
		margin-top:64px;
	}
	.catTag{
		padding:3px 0;
		font-size:calc(13 / 16 * 1rem);/*14 > 13*/
		letter-spacing:1.4px;
	}
	.catTag li+li{
		margin-left:14px;
		padding:0 15px 0 24px;
	}
	.blogAll{
		margin-top:10px;
		padding-top:36px;
		background-size:auto 1.5px;
	}
	.blogHd h2{
		font-size:calc(20 / 16 * 1rem);
		letter-spacing:1.3px;
		line-height:1.8;
	}
	.blogHd time{
		margin-top:19px;
		font-size:calc(14 / 16 * 1rem);/********sp upset************/
		letter-spacing:1px;
	}
	.blogHd .pTag{
		margin-top:15px;
		font-size:calc(14 / 16 * 1rem);/********sp upset************/
		letter-spacing:0.9px;
	}
	.blogContent,
	.blogContent p{line-height:1.92;}
	.blogContent{margin-top:32px;}
	.blogContent p{
		font-size:calc(14 / 16 * 1rem);/********sp upset************/
		letter-spacing:1px;
	}
	.blogContent *+figure{margin-top:50px;}
	.blogContent figure+p{margin-top:40px;}
	.blogContent p+p{margin-top:27px;}
	.blogPageLink{
		margin-top:116px;
		font-size:calc(14 / 16 * 1rem);/********sp upset************/
		text-align:center;
	}
	.blogPageLink li{letter-spacing:3.2px;}
	.blogPageLink li[data-prev]{padding:5px 0;}
	.blogPageLink li[data-next]{
		margin-left:18px;
		padding:5px 2px 5px 25px;
	}
	#recomList{
		margin-top:105px;
		padding:100px 0;
	}
	#recomList .blogList li{padding:0 3vw 16px;}
	#recomList .blogList li figure{margin:0 -3vw;}
	#listNav{
		margin-top: 64px;
	}
	.blogArticles .blogList{
		margin-top:10px;
		padding-top:36px;
		background-size:auto 1.5px;
	}
/*	.blogArticles{margin-top:80px;}*/
	#pager{margin-top:183px;}
}
@media (min-width:640px) and (max-width:768.98px){
	#listNav,
	.blogList{max-width:482px;}
	.blogList li:nth-child(n+4){margin-top:38px;}
	.blogList li:not(:nth-child(3n+1)){margin-left:22px;}
}
@media (max-width:639.98px){
	#listNav,
	.blogList{width:314px;}
	.blogList{justify-content: space-between;}
	.blogList li{width:146px;}
	.blogList li:nth-child(n+3){margin-top:38px;}
}
@media (min-width:769px){
	.blogList li{
		grid-template:"dfg dfg" auto "dtime dtag" auto "dttl dttl" 1fr / 1fr auto;
		width:340px;
	}
	.blogList li figure{margin-bottom:34px;}
	.blogList li[data-new] figure a:after{
		background-position:right 22px;
		background-size:25px auto;
	}
	.blogList li time{
		padding-left:26px;
		font-size:calc(14.6 / 16 * 1rem);
		letter-spacing:2.5px;
	}
	.blogList li .blogTag{
		align-self: end;
		padding-right:20px;
		font-size:calc(13 / 16 * 1rem);/*14.6>13*/
		letter-spacing:1px;/*1.5px*/
	}
	.blogList li h3{
		margin-top:17px;
		padding:0 20px 0 25px;
		font-size:calc(19 / 16 * 1rem);
		letter-spacing:0.5px;
	}
	#recomList .blogList li{padding-bottom:48px;}
	.blogBox{
		width:96%;
		margin-top:92px;
	}
	.catTag{
		padding-top:2px;
		font-size:calc(14 / 16 * 1rem);
	}
	.catTag li:first-child{letter-spacing:1px;}
	.catTag li:last-child{
		margin-left:29px;
		padding:0 15px 0 24px;
		letter-spacing:7px;
	}
	.blogAll{
		margin-top:18px;
		padding-top:84px;
		background-size:auto 2px;
	}
	.blogHd h2{
		font-size:calc(26 / 16 * 1rem);
		letter-spacing:1.7px;
		line-height:1.8;
	}
	.blogHd time{
		margin-top:40px;
		font-size:calc(15 / 16 * 1rem);
		letter-spacing:2.5px;
	}
	.blogHd .pTag{
		margin-top:18px;
		font-size:calc(14 / 16 * 1rem);
		letter-spacing:1.5px;
	}
	.blogContent,
	.blogContent p{line-height:1.8;}
	.blogContent p{
		font-size:calc(17 / 16 * 1rem);
		letter-spacing:-0.9px;
	}
	.blogContent *+figure{margin-top:50px;}
	.blogContent figure+p{margin-top:57px;}
	.blogContent p+p{margin-top:32px;}
	.blogPageLink{
		margin-top:140px;
		font-size:calc(16 / 16 * 1rem);
		text-align:right;
	}
	.blogPageLink li{letter-spacing:3.2px;}
	.blogPageLink li[data-prev]{padding:5px 0;}
	.blogPageLink li[data-next]{
		margin-left:32px;
		padding:5px 2px 5px 32px;
	}
	#recomList{
		margin-top:105px;
		padding:100px 0;
	}
	#listNav{
		margin-top:96px;
		background-size:auto 2px;
	}
	.blogArticles .blogList{
		margin-top:18px;
		padding-top:84px;
		background-size:auto 2px;
	}
	/*.blogArticles{margin-top:160px;}*/
	#pager{margin-top:183px;}
	#pager ul.page-numbers{justify-content:flex-end;}
}
@media (min-width:960px){
	.blogAll{
		display:flex;
		justify-content:space-between;
	}
	.blogAll > *{width:50%;}
	.blogHd{padding:72px 4% 0 6.2%;}
}
@media (min-width:769px) and (max-width:1279.98px){
	#listNav,
	.blogList{width:720px;}
	.blogList li:nth-child(even){margin-left:40px;}
	.blogList li:nth-child(n+3){margin-top:90px;}
	.blogList li:nth-child(odd):last-child{margin-right:380px;}
}
@media (min-width:1280px){
	#listNav,
	.blogList{width:1100px;}
	.blogList li:not(:nth-child(3n+1)){margin-left:40px;}
	.blogList li:nth-child(n+4){margin-top:90px;}
}