*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Yu Gothic",YuGothic,Arial,sans-serif;color:#333;background:#fafaf8}
.blog-header{padding:100px 20px 80px;background:#f1f4ed;text-align:center}
.blog-header__inner{max-width:1000px;margin:0 auto}
.blog-header__label{margin:0 0 15px;font-size:12px;letter-spacing:.2em;color:#71806c}
.blog-header h1{margin:0;font-size:38px;font-weight:500;letter-spacing:.08em}
.blog-header__lead{margin:25px 0 0;color:#666;line-height:1.8}
.blog{padding:80px 20px 120px}
.blog__inner{max-width:1200px;margin:0 auto}
.category-filter{display:flex;justify-content:center;gap:10px;margin-bottom:50px;flex-wrap:wrap}
.category-btn{min-width:110px;padding:11px 20px;border:1px solid #d8ddd3;background:#fff;color:#555;cursor:pointer;border-radius:30px;transition:.3s}
.category-btn:hover{background:#f1f4ed}
.category-btn.active{background:#5f7058;border-color:#5f7058;color:#fff}
.article-list{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.article-card{background:#fff;border:1px solid #e6e8e2;transition:transform .3s,box-shadow .3s}
.article-card:hover{transform:translateY(-5px);box-shadow:0 15px 35px rgba(0,0,0,.07)}
.article-card a{display:block;height:100%;padding:32px;color:inherit;text-decoration:none}
.article-card__meta{display:flex;align-items:center;gap:15px;margin-bottom:18px}
.article-card time{font-size:13px;color:#888}
.article-card__category{padding:4px 10px;background:#f1f4ed;color:#66725f;font-size:11px}
.article-card h2{margin:0 0 15px;font-size:20px;line-height:1.6;font-weight:500}
.article-card p{margin:0 0 25px;font-size:14px;line-height:1.9;color:#666}
.article-card__more{font-size:13px;letter-spacing:.05em}
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:70px}
.pagination button{width:42px;height:42px;padding:0;border:1px solid #ddd;background:#fff;cursor:pointer;font-size:14px;transition:.3s}
.pagination button:hover{background:#f1f4ed}
.pagination button.active{background:#5f7058;border-color:#5f7058;color:#fff}
.pagination button:disabled{opacity:.3;cursor:default}
.pagination__arrow{font-size:22px!important}
.error,.no-article{grid-column:1/-1;text-align:center;padding:50px 20px;color:#777}
.blog-footer{padding:40px 20px;background:#343a32;text-align:center;color:#fff;font-size:12px}
.article{padding:80px 20px 120px}
.article__inner{max-width:1200px;margin:0 auto;background:#fff;padding:60px}
.article__meta{display:flex;gap:15px;align-items:center;margin-bottom:25px;font-size:13px;color:#888}
.article__meta span{padding:5px 12px;background:#f1f4ed}
.article__inner h2{margin:0 0 50px;font-size:32px;line-height:1.6;font-weight:500}
.article__body{line-height:2.1;font-size:16px}
.article__body h3{margin:50px 0 20px;padding-left:15px;border-left:4px solid #5f7058;font-size:22px}
.article__body p{margin:0 0 30px}
.article__back{margin-top:70px;padding-top:30px;border-top:1px solid #eee}
.article__back a{color:#555;text-decoration:none}
@media screen and (max-width:767px){
.blog-header{padding:70px 20px 60px}.blog-header h1{font-size:27px}.blog-header__lead{font-size:14px}
.blog{padding:55px 15px 80px}.category-filter{margin-bottom:35px}.category-btn{min-width:90px;padding:9px 15px;font-size:13px}
.article-list{grid-template-columns:1fr;gap:20px}.article-card a{padding:25px}.article-card h2{font-size:18px}
.pagination{margin-top:45px}.pagination button{width:38px;height:38px}
.article{padding:40px 15px 70px}.article__inner{padding:30px 20px}.article__inner h2{font-size:24px;margin-bottom:35px}.article__body{font-size:15px}
}

.blog_productlist{
background:#F4F8F7;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
-o-border-radius: 1em;
-ms-border-radius: 1em;
padding:20px;
box-sizing:border-box;
background:url(../articles/images/bg_blogproduct.png) right bottom no-repeat;
background-size:auto;
}
.blog_productlist h4{
	color:#335226;
	font-size:1.6em;
	margin:0 0 30px;
	font-weight: bold;
}
.blog_productlist h4:before {
  content: '';/*何も入れない*/
  display: inline-block;
  width: 50px;/*画像の幅*/
  height: 50px;/*画像の高さ*/
  background-image: url(../articles/images/ico_blog.png);
  background-size: contain;
  vertical-align: middle;
  background-repeat: no-repeat;
  margin: 0 10px 0 0;
}
.blog_productlist li{
list-style-type: circle;
  margin: 0 0 20px 20px;
}
.blog_productlist li a{
	text-decoration:underline;
	font-size: 1.3em;
}
@media screen and (max-width:767px){
.blog_productlist{
background:url(../articles/images/bg_blogproduct_smp.png) center bottom no-repeat;
background-size:contain;
}
.blog_productlist ul{
margin: 0 0 42vw;
}
}